const Videos = ({ setRoute }) => {
  const [active, setActive] = React.useState(0);
  const isMobile = useIsMobile();
  const isTablet = useIsTablet();
  const vids = [
    { dur: '4:32', t: 'トーキック、3つのコツ', cat: 'TECHNIQUE', tone: 'pitch', views: '124K' },
    { dur: '7:18', t: '4-0システム入門', cat: 'TACTICS', tone: 'night', views: '89K' },
    { dur: '3:45', t: 'ピヴォの動き出し', cat: 'TECHNIQUE', tone: 'sunset', views: '67K' },
    { dur: '12:04', t: 'Fリーグ第3節 ハイライト', cat: 'MATCH', tone: 'teal', views: '210K' },
    { dur: '5:22', t: 'インドアシューズ徹底比較', cat: 'REVIEW', tone: 'pitch', views: '94K' },
    { dur: '6:50', t: '初心者あるある10選', cat: 'COLUMN', tone: 'night', views: '156K' },
  ];

  return (
    <main style={{ paddingBottom: 96, background: '#0A0A09', color: '#fff' }}>
      <section style={{ background: '#0A0A09', borderBottom: '4px solid #F5E000', padding: isMobile ? '40px 0 24px' : '56px 0 32px' }}>
        <Container>
          <Eyebrow color="#F5E000">VIDEO</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: 560, lineHeight: 1.7 }}>練習法・ハイライト・解説動画を、YouTubeチャンネルから厳選して配信。</p>
        </Container>
      </section>

      <Container style={{ marginTop: 40 }}>
        {/* Featured player */}
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '2fr 1fr', gap: isMobile ? 20 : 24, marginBottom: 48 }}>
          <div style={{ position: 'relative', background: '#000', border: '2px solid #F5E000', overflow: 'hidden' }}>
            <PhotoBlock aspect="16/9" tone={vids[active].tone} />
            <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <button style={{ width: 88, height: 88, borderRadius: '50%', background: '#F5E000', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 0 0 8px rgba(245,224,0,0.25)' }}>
                <i data-lucide="play" style={{ width: 36, height: 36, color: '#0A0A09', marginLeft: 4 }}></i>
              </button>
            </div>
            <div style={{ position: 'absolute', top: 12, left: 12 }}><Tag variant="danger">▶ NOW PLAYING</Tag></div>
            <div style={{ position: 'absolute', bottom: 12, right: 12, fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 700, background: 'rgba(10,10,9,0.8)', color: '#fff', padding: '4px 8px' }}>{vids[active].dur}</div>
            <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '20px 24px', background: 'linear-gradient(180deg, transparent, rgba(10,10,9,0.85))' }}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', color: '#F5E000', marginBottom: 4 }}>{vids[active].cat}</div>
              <h2 style={{ fontFamily: 'var(--font-sans)', fontWeight: 900, fontSize: 28, lineHeight: 1.2, margin: 0 }}>{vids[active].t}</h2>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, maxHeight: 420, overflow: 'auto' }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', color: '#F5E000', marginBottom: 4 }}>UP NEXT</div>
            {vids.map((v, i) => (
              <button key={i} onClick={() => setActive(i)} style={{
                display: 'flex', gap: 12, padding: 8, background: i === active ? '#1A1A17' : 'transparent', border: i === active ? '1px solid #F5E000' : '1px solid #2A2A25', cursor: 'pointer', textAlign: 'left',
              }}>
                <div style={{ position: 'relative', width: 100, flex: 'none' }}>
                  <PhotoBlock aspect="16/9" tone={v.tone} />
                  <div style={{ position: 'absolute', bottom: 4, right: 4, fontFamily: 'var(--font-mono)', fontSize: 9, fontWeight: 700, background: 'rgba(10,10,9,0.85)', color: '#fff', padding: '2px 4px' }}>{v.dur}</div>
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 9, fontWeight: 700, letterSpacing: '0.1em', color: '#F5E000', marginBottom: 2 }}>{v.cat}</div>
                  <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 700, color: '#fff', lineHeight: 1.35 }}>{v.t}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#8E8E82', marginTop: 4 }}>{v.views} views</div>
                </div>
              </button>
            ))}
          </div>
        </div>

        {/* Grid */}
        <div style={{ borderTop: '2px solid #F5E000', paddingTop: 24 }}>
          <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontStyle: 'italic', fontSize: 28, letterSpacing: '-0.01em', textTransform: 'uppercase', margin: '0 0 20px' }}>POPULAR THIS WEEK</h3>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)', gap: isMobile ? 12 : 18 }}>
            {vids.slice(0, 4).map((v, i) => (
              <article key={i} onClick={() => setActive(i)} style={{ cursor: 'pointer' }}>
                <div style={{ position: 'relative' }}>
                  <PhotoBlock aspect="16/9" tone={v.tone} />
                  <div style={{ position: 'absolute', bottom: 6, right: 6, fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 700, background: 'rgba(10,10,9,0.85)', color: '#fff', padding: '2px 6px' }}>{v.dur}</div>
                </div>
                <div style={{ paddingTop: 10 }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', color: '#F5E000', marginBottom: 4 }}>{v.cat}</div>
                  <h4 style={{ fontFamily: 'var(--font-sans)', fontWeight: 900, fontSize: 14, lineHeight: 1.4, margin: '0 0 4px' }}>{v.t}</h4>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#8E8E82' }}>{v.views} views</div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </Container>
    </main>
  );
};

window.Videos = Videos;