const Reviews = ({ setRoute }) => {
  const [cat, setCat] = React.useState('all');
  const isMobile = useIsMobile();
  const isTablet = useIsTablet();
  const items = [
    { cat: 'shoes', tag: 'インドア', t: 'ミズノ Rebula Cup IN', sub: '初心者にやさしい万能型',
      price: '7,920', weight: '210g', sole: 'ガムラバー', amz: '4.3', amzN: '1,247',
      pick: ['初心者◎', '幅広足◎', 'コスパ◎'], tone: 'sunset' },
    { cat: 'shoes', tag: 'インドア', t: 'アシックス DESTAQUE',  sub: 'グリップとフィットの両立',
      price: '8,250', weight: '195g', sole: 'ノンマーキング', amz: '4.5', amzN: '892',
      pick: ['中級者◎', 'グリップ◎'], tone: 'pitch' },
    { cat: 'ball',  tag: 'ボール',   t: 'モルテン F9V5000',     sub: '公式試合球。安定の弾道',
      price: '6,600', weight: '410g', sole: '—', amz: '4.6', amzN: '2,103',
      pick: ['公式球', '試合用◎'], tone: 'teal' },
    { cat: 'shoes', tag: 'ターフ',   t: 'ナイキ Premier III TF', sub: '長時間でも疲れにくい',
      price: '12,100', weight: '220g', sole: 'TPUスタッド', amz: '4.4', amzN: '634',
      pick: ['屋外◎', 'クッション◎'], tone: 'night' },
    { cat: 'wear',  tag: 'ウェア',   t: 'アンブロ プラクティスシャツ', sub: 'ドライ素材、通気性ばつぐん',
      price: '4,400', weight: '160g', sole: '—', amz: '4.2', amzN: '438',
      pick: ['練習用◎', '速乾'], tone: 'pitch' },
    { cat: 'ball',  tag: 'ボール',   t: 'スフィーダ INFINITO II',     sub: '蹴り心地のやわらかさが特徴',
      price: '5,830', weight: '420g', sole: '—', amz: '4.4', amzN: '716',
      pick: ['練習用◎', '入門◎'], tone: 'sunset' },
  ];
  const filtered = cat === 'all' ? items : items.filter(i => i.cat === cat);

  return (
    <main style={{ paddingBottom: 96, background: '#F7F7F4' }}>
      <section style={{ background: '#0A0A09', color: '#fff', padding: isMobile ? '40px 0' : '56px 0', borderBottom: '4px solid #F5E000' }}>
        <Container>
          <Eyebrow color="#F5E000">GEAR GUIDE</Eyebrow>
          <h1 style={{ fontFamily: 'var(--font-sans)', fontWeight: 900, fontSize: 'clamp(40px, 5.5vw, 64px)', marginTop: 12, lineHeight: 1.1 }}>道具で、フットサルは変わる。</h1>
          <p style={{ fontSize: 16, color: '#BFBFB3', marginTop: 16, maxWidth: 620, lineHeight: 1.7 }}>編集部が公開スペック・ユーザー評価・価格データをもとに比較。中立的な視点で、あなたに合う一足を見つけるお手伝いをします。</p>
        </Container>
      </section>

      <section style={{ borderBottom: '1px solid #DDDDD4', padding: '14px 0', background: '#fff', position: 'sticky', top: isMobile ? 56 : 68, zIndex: 10, overflowX: 'auto' }}>
        <Container>
          <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#5E5E55', marginRight: 4 }}>カテゴリ</span>
            {[['all','すべて'],['shoes','シューズ'],['ball','ボール'],['wear','ウェア']].map(([id, label]) => (
              <Chip key={id} active={cat === id} onClick={() => setCat(id)}>{label}</Chip>
            ))}
          </div>
        </Container>
      </section>

      <Container style={{ marginTop: 32 }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: '#5E5E55', marginBottom: 14 }}>{filtered.length} 件 ・ 価格・スペックは2026年4月時点のメーカー公開データ</div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : (isTablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)'), gap: isMobile ? 16 : 24 }}>
          {filtered.map((r, i) => (
            <article key={i} onClick={() => setRoute('article')} style={{ background: '#fff', border: '1px solid #DDDDD4', cursor: 'pointer', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
              <div style={{ position: 'relative' }}>
                <PhotoBlock aspect="4/3" tone={r.tone} />
                <div style={{ position: 'absolute', top: 10, left: 10 }}><Tag variant="ink">{r.tag}</Tag></div>
              </div>
              <div style={{ padding: '18px 20px 22px', flex: 1, display: 'flex', flexDirection: 'column' }}>
                <h3 style={{ fontFamily: 'var(--font-sans)', fontWeight: 900, fontSize: 18, color: '#0A0A09', margin: '0 0 6px', lineHeight: 1.3 }}>{r.t}</h3>
                <p style={{ fontSize: 13, color: '#5E5E55', margin: '0 0 14px', lineHeight: 1.55 }}>{r.sub}</p>

                {/* spec mini-table */}
                <dl style={{ borderTop: '1px solid #EDEDE7', paddingTop: 12, margin: '0 0 12px', fontFamily: 'var(--font-mono)', fontSize: 11 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0' }}>
                    <dt style={{ color: '#8E8E82' }}>価格</dt>
                    <dd style={{ color: '#0A0A09', fontWeight: 700, margin: 0 }}>¥{r.price}〜</dd>
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0' }}>
                    <dt style={{ color: '#8E8E82' }}>重量</dt>
                    <dd style={{ color: '#0A0A09', margin: 0 }}>{r.weight}</dd>
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0' }}>
                    <dt style={{ color: '#8E8E82' }}>アウトソール</dt>
                    <dd style={{ color: '#0A0A09', margin: 0 }}>{r.sole}</dd>
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', borderTop: '1px dashed #EDEDE7', marginTop: 4, paddingTop: 8 }}>
                    <dt style={{ color: '#8E8E82' }}>Amazon評価</dt>
                    <dd style={{ color: '#0A0A09', margin: 0 }}>★ {r.amz} <span style={{ color: '#8E8E82' }}>({r.amzN}件)</span></dd>
                  </div>
                </dl>

                {/* editor pick badges */}
                <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 14 }}>
                  {r.pick.map(p => (
                    <span key={p} style={{ fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 700, color: '#138236', background: '#E6F4EA', padding: '3px 8px', borderRadius: 2 }}>{p}</span>
                  ))}
                </div>

                {/* editor's comment placeholder */}
                <div style={{ background: '#F7F7F4', border: '1px dashed #DDDDD4', padding: '12px 14px', marginBottom: 14 }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#138236', marginBottom: 4 }}>EDITOR'S NOTE</div>
                  <p style={{ fontFamily: 'var(--font-sans)', fontSize: 12, color: '#8E8E82', margin: 0, lineHeight: 1.6, fontStyle: 'italic' }}>編集部コメント準備中</p>
                </div>

                <div style={{ marginTop: 'auto' }}>
                  <Button variant="accent" size="sm" icon="external-link">Amazonで見る</Button>
                </div>
              </div>
            </article>
          ))}
        </div>
        <p style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#5E5E55', marginTop: 32, textAlign: 'center', lineHeight: 1.7 }}>
          ※ 価格・スペックはメーカー公開情報に基づきます ・ Amazon評価は2026年4月時点のデータ<br/>
          ※ 当サイトはAmazon.co.jpアソシエイトプログラムに参加しています
        </p>
      </Container>
    </main>
  );
};

window.Reviews = Reviews;