const Home = ({ setRoute }) => {
  const isMobile = useIsMobile();
  const isTablet = useIsTablet();

  return (
    <main>
      {/* HERO */}
      <section style={{ position: 'relative', color: '#fff', borderBottom: '4px solid #F5E000', overflow: 'hidden', minHeight: isMobile ? 520 : 640, display: 'flex', alignItems: 'stretch' }}>
        {/* Background image */}
        <div style={{ position: 'absolute', inset: 0, zIndex: 0 }}>
          <img src="assets/hero-futsal.png" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: isMobile ? 'right center' : 'center' }} />
          {/* Dark overlay + left-fade scrim for text legibility */}
          <div style={{ position: 'absolute', inset: 0, background: isMobile
            ? 'linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.7) 100%)'
            : 'linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 40%, rgba(0,0,0,0.2) 70%, rgba(0,0,0,0.1) 100%)' }}></div>
        </div>
        <Container style={{ padding: isMobile ? '24px 20px 40px' : '40px 24px 56px', position: 'relative', zIndex: 1, width: '100%' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid rgba(255,255,255,0.15)', paddingBottom: 14, marginBottom: isMobile ? 24 : 36, gap: 12, flexWrap: 'wrap' }}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 11, letterSpacing: '0.2em', color: '#F5E000' }}>ISSUE №042 ・ 2026.04.27</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#BFBFB3' }}>FUTSAL · MEDIA · REVIEW</div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.4fr 1fr', gap: isMobile ? 28 : 48, alignItems: isMobile ? 'stretch' : 'flex-end' }}>
            <div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, letterSpacing: '0.18em', color: '#F5E000', textTransform: 'uppercase' }}>COVER · TECHNIQUE</div>
              <h1 style={{ fontFamily: 'var(--font-sans)', fontWeight: 900, fontSize: 'clamp(36px, 8vw, 88px)', lineHeight: 1.05, letterSpacing: '-0.01em', margin: '12px 0 16px', textShadow: '0 2px 24px rgba(0,0,0,0.6)' }}>
                ピヴォの動き、<br/>本気で<em style={{ color: '#F5E000', fontStyle: 'normal' }}>解剖</em>する。
              </h1>
              <p style={{ fontSize: isMobile ? 15 : 17, color: '#EDEDE7', lineHeight: 1.7, maxWidth: 520, marginBottom: 24, textShadow: '0 1px 8px rgba(0,0,0,0.6)' }}>5人制ならではの「点取り屋」、ピヴォ。動き出しのタイミング、ポストプレーの体の向き、決定機の作り方を、Fリーガー監修で徹底解説します。</p>
              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <Button variant="accent" size="md" icon="arrow-right" onClick={() => setRoute('article')}>記事を読む</Button>
                <Button variant="paper" size="md" onClick={() => setRoute('videos')} icon="play">動画で見る</Button>
              </div>
            </div>
            {!isMobile && (
              <div style={{ position: 'relative', alignSelf: 'flex-end' }}>
                <div style={{ display: 'inline-block', background: '#F5E000', color: '#0A0A09', padding: '8px 14px', fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 14, letterSpacing: '0.1em', textTransform: 'uppercase', boxShadow: '4px 4px 0 #0A0A09', transform: 'rotate(4deg)', float: 'right' }}>VOL.42</div>
              </div>
            )}
          </div>
        </Container>
      </section>

      {/* TICKER */}
      <div style={{ background: '#0A0A09', color: '#fff', overflow: 'hidden', padding: '12px 0', borderBottom: '4px solid #F5E000' }}>
        <div style={{
          display: 'flex', gap: 40, whiteSpace: 'nowrap',
          fontFamily: 'var(--font-display)', fontWeight: 900, fontStyle: 'italic',
          fontSize: isMobile ? 14 : 16, letterSpacing: '0.05em', textTransform: 'uppercase',
          animation: 'ticker 60s linear infinite',
        }}>
          {Array(3).fill(0).flatMap((_, i) => [
            <span key={`a${i}`}>★ NEW REVIEW — ミズノ Rebula Cup IN</span>,
            <span key={`b${i}`}>★ 解説：4-0システムの基本</span>,
            <span key={`c${i}`}>★ コラム：Fリーグ第3節を振り返る</span>,
            <span key={`d${i}`}>★ 動画：トーキックの正しいフォーム</span>,
          ])}
        </div>
        <style>{`@keyframes ticker { from { transform: translateX(0) } to { transform: translateX(-50%) } }`}</style>
      </div>

      {/* BEGINNER BANNER */}
      <a onClick={() => setRoute('article')} style={{ display: 'block', background: '#138236', color: '#fff', cursor: 'pointer', borderBottom: '2px solid #0A0A09' }}>
        <Container style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: isMobile ? '14px 20px' : '16px 24px', gap: 12, flexWrap: 'wrap' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, flex: 1, minWidth: 0 }}>
            <i data-lucide="help-circle" style={{ width: 20, height: 20, flex: 'none' }}></i>
            <span style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: isMobile ? 14 : 16 }}>はじめての方へ ・ フットサルってどんなスポーツ？</span>
          </div>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase', display: 'inline-flex', alignItems: 'center', gap: 6, background: '#F5E000', color: '#0A0A09', padding: '6px 12px' }}>
            読んでみる <i data-lucide="arrow-right" style={{ width: 14, height: 14 }}></i>
          </span>
        </Container>
      </a>

      {/* THREE PILLARS */}
      <section style={{ padding: isMobile ? '48px 0' : '80px 0', background: '#F7F7F4' }}>
        <Container>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : (isTablet ? '1fr 1fr' : '1fr 1fr 1fr'), gap: isMobile ? 16 : 24 }}>
            {[
              { eb: '01 ・ TECHNIQUE', t: '解説', s: 'ルール、ポジション、4-0や3-1のシステムまで。図解でやさしく。', tone: 'pitch', route: 'article' },
              { eb: '02 ・ REVIEW',    t: 'レビュー', s: 'シューズ・ボール・ウェア。実際に履いて、蹴って、評価します。', tone: 'sunset', route: 'reviews' },
              { eb: '03 ・ VIDEO',     t: '動画',   s: 'YouTube連携。練習法・名場面・選手インタビュー。', tone: 'night', route: 'videos' },
            ].map((c, i) => (
              <article key={i} onClick={() => setRoute(c.route)} style={{ background: '#fff', border: '2px solid #0A0A09', boxShadow: '4px 4px 0 #0A0A09', cursor: 'pointer', overflow: 'hidden' }}>
                <PhotoBlock aspect="16/10" tone={c.tone} label={c.eb} />
                <div style={{ padding: isMobile ? '20px' : '24px 24px 28px' }}>
                  <Eyebrow color="#138236">{c.eb}</Eyebrow>
                  <h3 style={{ fontFamily: 'var(--font-sans)', fontWeight: 900, fontSize: isMobile ? 26 : 32, margin: '8px 0 10px', lineHeight: 1.1 }}>{c.t}</h3>
                  <p style={{ fontSize: 14, color: '#3E3E37', lineHeight: 1.7, margin: 0 }}>{c.s}</p>
                </div>
              </article>
            ))}
          </div>
        </Container>
      </section>

      {/* LATEST */}
      <section style={{ padding: isMobile ? '0 0 48px' : '0 0 80px', background: '#F7F7F4' }}>
        <Container>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 24, borderBottom: '2px solid #0A0A09', paddingBottom: 12 }}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontStyle: 'italic', fontSize: isMobile ? 28 : 40, letterSpacing: '-0.01em', textTransform: 'uppercase', margin: 0 }}>LATEST</h2>
            <a style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 13, cursor: 'pointer' }} onClick={() => setRoute('article')}>すべての記事 →</a>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : (isTablet ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)'), gap: isMobile ? 12 : 24 }}>
            {[
              { n: '042', tag: 'TECHNIQUE', tagV: 'pitch', t: '4-0システムって何？図でわかる基本配置', meta: '2026.04.27 ・ 解説 ・ 6分', tone: 'pitch' },
              { n: '041', tag: 'REVIEW',    tagV: 'flood', t: 'ミズノ Rebula Cup IN を1ヶ月履いてみた', meta: '2026.04.25 ・ レビュー ・ 8分', tone: 'sunset' },
              { n: '040', tag: 'COLUMN',    tagV: 'ink',   t: 'Fリーグ第3節、シュライカー大阪が魅せた連動', meta: '2026.04.23 ・ コラム ・ 5分', tone: 'night' },
              { n: '039', tag: 'VIDEO',     tagV: 'danger',t: '【動画】トーキック、3つのコツ', meta: '2026.04.22 ・ 動画 ・ 4:32', tone: 'teal' },
            ].map((a, i) => (
              <article key={i} onClick={() => setRoute('article')} style={{ background: '#fff', border: '1px solid #DDDDD4', cursor: 'pointer', overflow: 'hidden' }}>
                <div style={{ position: 'relative' }}>
                  <PhotoBlock aspect="1/1" tone={a.tone} />
                  <div style={{ position: 'absolute', top: 8, left: 8 }}><Tag variant={a.tagV}>{a.tag}</Tag></div>
                  <div style={{ position: 'absolute', bottom: 8, right: 8, fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 900, fontSize: isMobile ? 22 : 28, color: '#fff', letterSpacing: '-0.02em', textShadow: '2px 2px 0 #0A0A09' }}>№{a.n}</div>
                </div>
                <div style={{ padding: isMobile ? '14px 16px' : '14px 16px 18px' }}>
                  <h3 style={{ fontFamily: 'var(--font-sans)', fontWeight: 900, fontSize: isMobile ? 15 : 15, lineHeight: 1.4, color: '#0A0A09', margin: '0 0 6px' }}>{a.t}</h3>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#5E5E55', letterSpacing: '0.05em' }}>{a.meta}</div>
                </div>
              </article>
            ))}
          </div>
        </Container>
      </section>

      {/* GEAR REVIEW */}
      <section style={{ background: '#0A0A09', color: '#fff', padding: isMobile ? '48px 0' : '80px 0' }}>
        <Container>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 24, borderBottom: '2px solid #F5E000', paddingBottom: 12, gap: 12, flexWrap: 'wrap' }}>
            <div>
              <Eyebrow color="#F5E000">GEAR REVIEW</Eyebrow>
              <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontStyle: 'italic', fontSize: isMobile ? 28 : 40, letterSpacing: '-0.01em', textTransform: 'uppercase', margin: '6px 0 0' }}>EDITOR'S PICK</h2>
            </div>
            <a style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 13, color: '#fff', cursor: 'pointer' }} onClick={() => setRoute('reviews')}>すべてのレビュー →</a>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : (isTablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)'), gap: isMobile ? 16 : 20 }}>
            {[
              { rank: '01', cat: 'インドア', t: 'ミズノ Rebula Cup IN',  weight: '210g', amz: '4.3', amzN: '1,247', price: '7,920', tone: 'sunset' },
              { rank: '02', cat: 'インドア', t: 'アシックス DESTAQUE',   weight: '195g', amz: '4.5', amzN: '892',   price: '8,250', tone: 'pitch' },
              { rank: '03', cat: 'ボール',   t: 'モルテン F9V5000',      weight: '410g', amz: '4.6', amzN: '2,103', price: '6,600', tone: 'teal' },
            ].map((r, i) => (
              <article key={i} onClick={() => setRoute('article')} style={{ background: '#1A1A17', border: '1px solid #2A2A25', cursor: 'pointer', overflow: 'hidden' }}>
                <div style={{ position: 'relative' }}>
                  <PhotoBlock aspect="4/3" tone={r.tone} />
                  <div style={{ position: 'absolute', top: 0, left: 0, background: '#F5E000', color: '#0A0A09', padding: '6px 12px', fontFamily: 'var(--font-display)', fontWeight: 900, fontStyle: 'italic', fontSize: 26, letterSpacing: '-0.02em' }}>№{r.rank}</div>
                </div>
                <div style={{ padding: '18px 20px 22px' }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#F5E000', marginBottom: 6 }}>{r.cat}</div>
                  <h3 style={{ fontFamily: 'var(--font-sans)', fontWeight: 900, fontSize: 18, color: '#fff', margin: '0 0 12px', lineHeight: 1.3 }}>{r.t}</h3>
                  <dl style={{ borderTop: '1px solid #2A2A25', paddingTop: 10, margin: 0, fontFamily: 'var(--font-mono)', fontSize: 11, color: '#BFBFB3' }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', padding: '3px 0' }}>
                      <dt style={{ color: '#8E8E82' }}>価格</dt>
                      <dd style={{ color: '#fff', fontWeight: 700, margin: 0 }}>¥{r.price}〜</dd>
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', padding: '3px 0' }}>
                      <dt style={{ color: '#8E8E82' }}>重量</dt>
                      <dd style={{ color: '#fff', margin: 0 }}>{r.weight}</dd>
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', padding: '3px 0' }}>
                      <dt style={{ color: '#8E8E82' }}>Amazon</dt>
                      <dd style={{ color: '#F5E000', margin: 0 }}>★ {r.amz} <span style={{ color: '#5E5E55' }}>({r.amzN})</span></dd>
                    </div>
                  </dl>
                </div>
              </article>
            ))}
          </div>
          <p style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#8E8E82', marginTop: 18, textAlign: 'center' }}>※ 当サイトはAmazon.co.jpアソシエイトプログラムに参加しています</p>
        </Container>
      </section>

      {/* CTA */}
      <section style={{ padding: isMobile ? '64px 0' : '96px 0', textAlign: 'center', background: '#F7F7F4' }}>
        <Container>
          <Eyebrow>SUBSCRIBE</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-sans)', fontWeight: 900, fontSize: 'clamp(28px, 5vw, 56px)', lineHeight: 1.15, margin: '12px auto 16px', maxWidth: 720 }}>毎週、フットサルを<br/>もっと面白く。</h2>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: isMobile ? 15 : 17, color: '#3E3E37', lineHeight: 1.7, maxWidth: 540, margin: '0 auto 28px', padding: '0 16px' }}>新着記事・動画・レビューをまとめてニュースレターでお届けします。</p>
          <Button variant="primary" size="lg" icon="arrow-right" onClick={() => setRoute('article')}>記事を読む</Button>
        </Container>
      </section>
    </main>
  );
};

window.Home = Home;