// pages/Home.jsx
const HomePage = ({ setRoute, openLineModal }) => {
  return (
    <div className="page-enter">
      {/* HERO */}
      <section style={{ position: 'relative', overflow: 'hidden', borderBottom: '2.5px solid var(--line)' }} className="bg-dots">
        <div className="container" style={{ padding: '70px 24px 40px', position: 'relative' }}>
          {/* Floating yellow blob */}
          <div style={{
            position: 'absolute', top: 20, right: -40, width: 200, height: 200,
            background: 'var(--yellow)', border: '2.5px solid var(--line)',
            borderRadius: '58% 42% 60% 40%', transform: 'rotate(-8deg)', opacity: .5,
            zIndex: 0,
          }} />
          <div style={{ position: 'relative', zIndex: 1, textAlign: 'center' }}>
            <span className="tag tag-sky" style={{ fontSize: 12 }}>
              <Icon name="sparkle" size={12} /> AI活用メディア × YouTube連動
            </span>
            <h1 style={{
              fontSize: 'clamp(36px, 5vw, 64px)',
              fontWeight: 900, lineHeight: 1.2, margin: '20px 0 18px', textWrap: 'balance',
            }}>
              AIは<span style={{ position: 'relative', display: 'inline-block' }}>
                難しくない<svg style={{ position: 'absolute', left: 0, bottom: -6, width: '100%', height: 12 }} viewBox="0 0 200 12" preserveAspectRatio="none">
                  <path d="M0 8 Q 50 2 100 6 T 200 5" stroke="var(--yellow)" strokeWidth="8" fill="none" strokeLinecap="round"/>
                </svg>
              </span>。<br/>
              楽しく学べば、<span style={{ background: 'var(--yellow)', padding: '0 10px', border: '2.5px solid var(--line)', borderRadius: 8, display: 'inline-block', transform: 'rotate(-1deg)' }}>仕事が変わる。</span>
            </h1>
            <p style={{ fontSize: 17, opacity: .8, maxWidth: 560, margin: '0 auto 28px', lineHeight: 1.7 }}>
              関西弁の犬・ドット先生と仲間たちが、<br/>
              明日から使えるAI活用術を楽しく教えるで〜。
            </p>
            <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
              <button className="btn btn-line btn-lg" onClick={openLineModal}>
                <Icon name="line" size={18} /> 無料でLINE登録する
              </button>
              <button className="btn btn-lg" onClick={() => setRoute({ page: 'list', cat: 'all' })}>
                記事を読む <Icon name="arrow-right" size={16} />
              </button>
            </div>

            {/* Characters row */}
            <div style={{
              marginTop: 50,
              display: 'flex', justifyContent: 'center', alignItems: 'flex-end', gap: 30,
              flexWrap: 'wrap',
            }}>
              <div style={{ position: 'relative' }}>
                <div className="bubble" style={{ position: 'absolute', top: -60, left: '50%', transform: 'translateX(-50%) rotate(-3deg)', whiteSpace: 'nowrap', fontSize: 13 }}>
                  AI全部教えたるで〜！
                </div>
                <div className="wiggle"><DotSensei size="lg" pose="指差しポーズ" /></div>
                <div style={{ fontSize: 12, fontWeight: 900, marginTop: 8, textAlign: 'center' }}>ドット先生 <span style={{ fontWeight: 500, fontSize: 11, opacity: .7 }}>(犬・関西弁)</span></div>
              </div>
              <div style={{ position: 'relative' }}>
                <div className="bubble bubble-up" style={{ position: 'absolute', bottom: -60, left: '50%', transform: 'translateX(-50%) rotate(2deg)', whiteSpace: 'nowrap', fontSize: 13, background: 'var(--sub)' }}>
                  こういうこと…？
                </div>
                <div className="wiggle-2"><Harin size="md" pose="首かしげ" /></div>
                <div style={{ fontSize: 12, fontWeight: 900, marginTop: 8, textAlign: 'center' }}>ハリン <span style={{ fontWeight: 500, fontSize: 11, opacity: .7 }}>(ハリネズミ)</span></div>
              </div>
              <div style={{ position: 'relative' }}>
                <div className="bubble" style={{ position: 'absolute', top: -60, left: '50%', transform: 'translateX(-50%) rotate(3deg)', whiteSpace: 'nowrap', fontSize: 13, background: 'var(--yellow)' }}>
                  LINE登録してカメ〜！
                </div>
                <div className="wiggle-3"><KamePenlight size="md" /></div>
                <div style={{ fontSize: 12, fontWeight: 900, marginTop: 8, textAlign: 'center' }}>亀 <span style={{ fontWeight: 500, fontSize: 11, opacity: .7 }}>(LINE担当)</span></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* MARQUEE */}
      <div className="marquee">
        <div className="marquee-track">
          {Array.from({length: 2}).flatMap((_, j) => [
            '🎉 新着 ChatGPTで議事録作成10倍速', '★ 人気 CapCut×AIで副業量産',
            '⚡ 30日で使えるAIロードマップ無料配布中', '🐢 LINE登録で特典GET',
            '🎬 YouTube新着動画公開中', '🔥 Claude vs ChatGPT 2026年春版',
          ].map((t, i) => <span key={`${j}-${i}`}>{t}</span>))}
        </div>
      </div>

      {/* NEW ARTICLES */}
      <section className="container" style={{ padding: '70px 24px' }} data-reveal>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 30, flexWrap: 'wrap', gap: 16 }}>
          <div>
            <div style={{ fontFamily: 'IBM Plex Mono, monospace', fontSize: 12, color: 'var(--sky-deep)', fontWeight: 700, letterSpacing: '.15em' }}>NEW ARTICLES</div>
            <h2 style={{ fontSize: 32, fontWeight: 900, margin: '4px 0 0' }}>新着記事</h2>
          </div>
          <button className="btn" onClick={() => setRoute({ page: 'list', cat: 'all' })}>
            全記事を見る <Icon name="arrow-right" size={14} />
          </button>
        </div>
        <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))' }}>
          {ARTICLES.slice(0, 4).map(a => <ArticleCard key={a.id} article={a} setRoute={setRoute} />)}
        </div>
      </section>

      {/* YOUTUBE */}
      <section style={{ background: 'var(--ink)', color: '#fff', borderTop: '2.5px solid var(--line)', borderBottom: '2.5px solid var(--line)' }}>
        <div className="container" style={{ padding: '70px 24px' }} data-reveal>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 30, flexWrap: 'wrap', gap: 16 }}>
            <div>
              <div style={{ fontFamily: 'IBM Plex Mono, monospace', fontSize: 12, color: 'var(--yellow)', fontWeight: 700, letterSpacing: '.15em' }}>YOUTUBE CHANNEL</div>
              <h2 style={{ fontSize: 32, fontWeight: 900, margin: '4px 0 0' }}>人気 YouTube コーナー</h2>
            </div>
            <a href="https://www.youtube.com" target="_blank" rel="noreferrer" className="btn btn-yellow">
              <Icon name="play" size={12} /> チャンネル登録
            </a>
          </div>
          <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))' }}>
            {VIDEOS.map((v, i) => (
              <div key={v.id} className="chunky" style={{ overflow: 'hidden', background: '#fff', color: 'var(--ink)' }}>
                <div style={{ position: 'relative', aspectRatio: '16/9', background: '#000' }}>
                  <iframe
                    src={`https://www.youtube.com/embed/${['dQw4w9WgXcQ', 'jNQXAC9IVRw', 'ScMzIvxBSi4'][i]}?rel=0`}
                    title={v.title}
                    frameBorder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowFullScreen
                    style={{ width: '100%', height: '100%', display: 'block' }}
                  />
                </div>
                <div style={{ padding: 16 }}>
                  <div style={{ fontWeight: 900, fontSize: 15, lineHeight: 1.4, marginBottom: 8, textWrap: 'pretty' }}>{v.title}</div>
                  <div style={{ fontSize: 12, opacity: .7, fontWeight: 700, display: 'flex', gap: 12 }}>
                    <span>▶ {v.views}回再生</span>
                    <span><Icon name="clock" size={11} /> {v.len}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CATEGORIES */}
      <section className="container" style={{ padding: '70px 24px' }} data-reveal>
        <div style={{ textAlign: 'center', marginBottom: 40 }}>
          <div style={{ fontFamily: 'IBM Plex Mono, monospace', fontSize: 12, color: 'var(--sky-deep)', fontWeight: 700, letterSpacing: '.15em' }}>CATEGORIES</div>
          <h2 style={{ fontSize: 32, fontWeight: 900, margin: '4px 0 0' }}>どのAI、攻略する？</h2>
        </div>
        <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))' }}>
          {CATEGORIES.map(c => (
            <button
              key={c.id}
              onClick={() => setRoute({ page: 'list', cat: c.id })}
              className="chunky lift"
              style={{
                background: c.bg,
                padding: 24,
                display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 16,
                textAlign: 'left', cursor: 'pointer', fontFamily: 'inherit',
              }}
            >
              <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', alignItems: 'center' }}>
                <div className="icon-sq" style={{ background: c.color, color: c.id === 'site' ? 'var(--ink)' : '#fff', fontSize: 24 }}>
                  {c.emoji}
                </div>
                <div className="char-ph" data-char={c.pose} style={{ width: 76, height: 96, fontSize: 9 }}>
                  <div className="char-silhouette" style={{ fontSize: 10 }}>{c.pose}</div>
                </div>
              </div>
              <div>
                <h3 style={{ fontSize: 18, fontWeight: 900, margin: '0 0 6px' }}>{c.label}</h3>
                <p style={{ fontSize: 12, margin: 0, opacity: .8, lineHeight: 1.6 }}>{c.desc}</p>
              </div>
              <div style={{ fontSize: 12, fontWeight: 800, display: 'flex', alignItems: 'center', gap: 4 }}>
                記事を見る <Icon name="arrow-right" size={12} />
              </div>
            </button>
          ))}
        </div>
      </section>

      {/* LINE CTA BANNER */}
      <section className="container" style={{ padding: '30px 24px 80px' }} data-reveal>
        <LineCTABanner openLineModal={openLineModal} />
      </section>
    </div>
  );
};

Object.assign(window, { HomePage });