const Article = ({ setRoute }) => {
  const isMobile = useIsMobile();
  return (
  <main style={{ paddingBottom: 96, background: '#F7F7F4' }}>
    {/* Hero — gear guide article */}
    <section style={{ background: '#0A0A09', color: '#fff', borderBottom: '4px solid #F5E000' }}>
      <Container style={{ padding: '40px 24px 56px' }}>
        <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
          <Tag variant="flood">GEAR GUIDE</Tag>
          <Tag variant="ink">インドアシューズ</Tag>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.3fr 1fr', gap: isMobile ? 24 : 40, alignItems: 'center' }}>
          <div>
            <h1 style={{ fontFamily: 'var(--font-sans)', fontWeight: 900, fontSize: 'clamp(32px, 4.6vw, 56px)', lineHeight: 1.15, margin: 0, letterSpacing: '-0.01em' }}>
              <em style={{ fontStyle: 'normal', color: '#F5E000' }}>2026年版</em><br/>はじめてのインドアシューズ、<br/>選び方ガイド
            </h1>
            <p style={{ fontSize: 17, color: '#BFBFB3', marginTop: 18, maxWidth: 520, lineHeight: 1.7 }}>主要メーカー6モデルを公開スペックとユーザー評価で徹底比較。あなたにぴったりの一足を見つけよう。</p>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, marginTop: 24, color: '#F5E000', letterSpacing: '0.05em' }}>2026.04.27 ・ 編集部 ・ 読了 8分</div>
          </div>
          <PhotoBlock aspect="4/3" tone="sunset" label="GUIDE №041" />
        </div>
      </Container>
    </section>

    <Container style={{ marginTop: isMobile ? 32 : 56 }}>
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '720px 1fr', gap: isMobile ? 32 : 48, alignItems: 'flex-start' }}>
        <article style={{ fontFamily: 'var(--font-sans)', fontSize: 17, lineHeight: 1.85, color: '#1A1A17', letterSpacing: '0.02em' }}>
          {/* Body content placeholder — replace with article copy when ready */}
          <div style={{ background: '#fff', border: '2px dashed #DDDDD4', padding: '40px 32px', textAlign: 'center', marginBottom: 32 }}>
            <Eyebrow>CONTENT</Eyebrow>
            <p style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 18, color: '#5E5E55', margin: '8px 0 4px' }}>コンテンツ準備中</p>
            <p style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: '#8E8E82', margin: 0 }}>本文は別途追加予定です</p>
          </div>

          <p style={{ fontSize: 21, fontWeight: 700, lineHeight: 1.7, marginBottom: 32 }}>「最初の1足、何にすればいい？」 編集部が春のFAQ第1位に、メーカー公開データとAmazonレビュー2,000件超の集計でお答えします。</p>

          <h2 style={{ fontFamily: 'var(--font-sans)', fontWeight: 900, fontSize: 28, margin: '32px 0 16px', borderLeft: '6px solid #F5E000', paddingLeft: 16 }}>選び方の3ポイント</h2>
          <p style={{ marginBottom: 24 }}>① プレーするサーフェス（体育館 / 屋外人工芝）に合わせること、② 自分の足型に合うフィット感、③ 予算と頻度のバランス。この3つを押さえれば失敗しません。</p>

          {/* Comparison table */}
          <h2 style={{ fontFamily: 'var(--font-sans)', fontWeight: 900, fontSize: 28, margin: '40px 0 16px', borderLeft: '6px solid #F5E000', paddingLeft: 16 }}>主要モデル比較表</h2>
          <div style={{ background: '#fff', border: '2px solid #0A0A09', overflow: 'auto', marginBottom: 12 }}>
            <table style={{ width: '100%', borderCollapse: 'collapse', fontFamily: 'var(--font-sans)', fontSize: 13 }}>
              <thead>
                <tr style={{ background: '#0A0A09', color: '#fff' }}>
                  {['モデル', '価格', '重量', 'アウトソール', 'Amazon★'].map(h => (
                    <th key={h} style={{ padding: '12px 14px', textAlign: 'left', fontFamily: 'var(--font-display)', fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {[
                  ['ミズノ Rebula Cup IN',   '¥7,920', '210g', 'ガムラバー',   '4.3 (1,247)', true],
                  ['アシックス DESTAQUE',    '¥8,250', '195g', 'ノンマーキング','4.5 (892)',  false],
                  ['ナイキ Lunar Gato II',   '¥9,900', '230g', 'ラバー',       '4.4 (1,508)', false],
                  ['アディダス Top Sala',    '¥10,450','205g', 'ラバー',       '4.2 (724)',  false],
                  ['プーマ Future Match',    '¥6,490', '215g', 'ラバー',       '4.1 (412)',  false],
                ].map(([m, p, w, s, a, hl], i) => (
                  <tr key={i} style={{ background: hl ? '#FFFCE6' : (i % 2 ? '#F7F7F4' : '#fff'), borderTop: '1px solid #EDEDE7' }}>
                    <td style={{ padding: '12px 14px', fontWeight: 700, color: '#0A0A09' }}>
                      {hl && <span style={{ background: '#F5E000', color: '#0A0A09', fontFamily: 'var(--font-display)', fontSize: 9, fontWeight: 900, padding: '2px 5px', marginRight: 6, letterSpacing: '0.05em' }}>EDITOR</span>}
                      {m}
                    </td>
                    <td style={{ padding: '12px 14px', fontFamily: 'var(--font-mono)' }}>{p}</td>
                    <td style={{ padding: '12px 14px', fontFamily: 'var(--font-mono)' }}>{w}</td>
                    <td style={{ padding: '12px 14px' }}>{s}</td>
                    <td style={{ padding: '12px 14px', fontFamily: 'var(--font-mono)' }}>★ {a}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <p style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#5E5E55', marginBottom: 32 }}>※ 価格・スペックはメーカー公開情報、Amazon評価は2026年4月時点</p>

          <h2 style={{ fontFamily: 'var(--font-sans)', fontWeight: 900, fontSize: 28, margin: '40px 0 16px', borderLeft: '6px solid #F5E000', paddingLeft: 16 }}>編集部のおすすめ：ミズノ Rebula Cup IN</h2>
          <p style={{ marginBottom: 24 }}>初めての一足として編集部が推すのは、ミズノ Rebula Cup IN。価格・重量・ユーザー評価のバランスがよく、特に「足幅が合う」というレビューが目立ちます。Amazonでは1,200件超のレビューで★4.3、エントリーモデルとしては十分すぎるスコアです。</p>

          {/* Affiliate card */}
          <div style={{ background: '#0A0A09', color: '#fff', padding: 28, margin: '32px 0' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 20, alignItems: 'center', ...(isMobile && { gridTemplateColumns: '1fr', textAlign: 'center' }) }}>
              <PhotoBlock aspect="1/1" tone="sunset" />
              <div style={{ minWidth: 0 }}>
                <Eyebrow color="#F5E000">EDITOR'S PICK</Eyebrow>
                <h3 style={{ fontFamily: 'var(--font-sans)', fontWeight: 900, fontSize: 20, margin: '6px 0 6px', color: '#fff' }}>ミズノ Rebula Cup IN</h3>
                <p style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: '#BFBFB3', margin: 0, lineHeight: 1.6 }}>¥7,920 ・ 210g ・ ★4.3 (Amazon 1,247件)</p>
              </div>
              <Button variant="accent" size="md" icon="external-link">Amazonで見る</Button>
            </div>
          </div>

          <h2 style={{ fontFamily: 'var(--font-sans)', fontWeight: 900, fontSize: 28, margin: '40px 0 16px', borderLeft: '6px solid #F5E000', paddingLeft: 16 }}>こんな人にはこちら</h2>
          <ul style={{ paddingLeft: 22, marginBottom: 24 }}>
            <li style={{ marginBottom: 8 }}>軽さ重視 → アシックス DESTAQUE（195g・★4.5）</li>
            <li style={{ marginBottom: 8 }}>レビュー数で選びたい → ナイキ Lunar Gato II（★4.4・1,508件）</li>
            <li style={{ marginBottom: 8 }}>とにかく安く → プーマ Future Match（¥6,490〜）</li>
          </ul>

          <p style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: '#5E5E55', margin: '48px 0 0', borderTop: '1px solid #DDDDD4', paddingTop: 24, lineHeight: 1.7 }}>
            ※ 本記事は編集部が公開情報を基にまとめた比較ガイドです。実機テストではありません。<br/>
            ※ 当サイトはAmazon.co.jpアソシエイトプログラムに参加しており、リンク経由でご購入いただくとサイト運営の支えになります。
          </p>
        </article>

        {/* Sidebar */}
        <aside style={{ position: isMobile ? 'static' : 'sticky', top: 96, display: 'flex', flexDirection: 'column', gap: 28 }}>
          <div style={{ background: '#fff', border: '1px solid #DDDDD4', padding: 18 }}>
            <Eyebrow>TABLE OF CONTENTS</Eyebrow>
            <ol style={{ paddingLeft: 22, margin: '12px 0 0', fontSize: 13, lineHeight: 1.8, color: '#1A1A17' }}>
              <li>選び方の3ポイント</li>
              <li>主要モデル比較表</li>
              <li>編集部のおすすめ</li>
              <li>こんな人にはこちら</li>
            </ol>
          </div>
          <div>
            <Eyebrow>RELATED</Eyebrow>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 12 }}>
              {[
                { t: 'ターフ用シューズの選び方', tone: 'pitch' },
                { t: '【動画】トーキック、3つのコツ', tone: 'night' },
                { t: '4-0システムって何？図解', tone: 'teal' },
              ].map((r, i) => (
                <a key={i} onClick={() => setRoute('article')} style={{ display: 'grid', gridTemplateColumns: '80px 1fr', gap: 12, cursor: 'pointer' }}>
                  <PhotoBlock aspect="1/1" tone={r.tone} />
                  <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 700, color: '#0A0A09', lineHeight: 1.4 }}>{r.t}</div>
                </a>
              ))}
            </div>
          </div>
          <div style={{ background: '#0A0A09', color: '#fff', padding: 20 }}>
            <Eyebrow color="#F5E000">NEWSLETTER</Eyebrow>
            <p style={{ fontSize: 13, color: '#BFBFB3', margin: '8px 0 14px', lineHeight: 1.6 }}>毎週、新着記事と動画をお届け。</p>
            <Button variant="accent" size="sm" icon="arrow-right">登録する</Button>
          </div>
        </aside>
      </div>
    </Container>
  </main>
  );
};

window.Article = Article;