// pages/LP.jsx
const LpPage = ({ setRoute, openLineModal }) => {
  return (
    <div className="page-enter" style={{ background: 'var(--sub)' }}>
      {/* Hero */}
      <section style={{ background: 'var(--yellow)', borderBottom: '2.5px solid var(--line)', position: 'relative', overflow: 'hidden' }}>
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: 'repeating-linear-gradient(45deg, rgba(26,26,46,.06) 0 12px, transparent 12px 24px)',
          pointerEvents: 'none',
        }} />
        <div className="container" style={{ padding: '60px 24px', position: 'relative', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 40, alignItems: 'center' }}>
          <div>
            <span className="tag" style={{ background: 'var(--ink)', color: '#fff', marginBottom: 14 }}>
              <Icon name="gift" size={12} /> 無料プレゼント中
            </span>
            <h1 style={{ fontSize: 'clamp(32px, 4.5vw, 54px)', fontWeight: 900, lineHeight: 1.2, margin: '10px 0 20px', textWrap: 'balance' }}>
              LINE登録で<br/>
              <span style={{ background: '#fff', border: '3px solid var(--line)', padding: '2px 14px', borderRadius: 14, display: 'inline-block', transform: 'rotate(-1deg)' }}>AI攻略パック</span><br/>
              もらえるカメ〜！
            </h1>
            <p style={{ fontSize: 16, lineHeight: 1.8, margin: '0 0 24px', fontWeight: 600 }}>
              30日で「AIで仕事早くなったね」って言われる。<br/>
              ドット先生が作った<strong>無料AIロードマップ</strong>と<strong>プロンプト早見表</strong>を、今すぐLINEで受け取ってや〜。
            </p>
            <button className="btn btn-line btn-lg" onClick={openLineModal} style={{ fontSize: 18, padding: '18px 32px' }}>
              <Icon name="line" size={20} />
              今すぐ無料で受け取る
              <Icon name="arrow-right" size={16} />
            </button>
            <div style={{ display: 'flex', gap: 20, marginTop: 20, fontSize: 12, fontWeight: 700 }}>
              <span>🔒 完全無料</span>
              <span>⚡ 登録10秒</span>
              <span>🚪 いつでも解除OK</span>
            </div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'relative' }}>
            <div style={{ transform: 'scale(1.3)' }}>
              <KamePenlight size="lg" />
            </div>
            <div className="bubble" style={{ position: 'absolute', top: 0, left: -20, transform: 'rotate(-4deg)', fontSize: 14 }}>
              登録してくれカメ〜！
            </div>
            <div className="bubble" style={{ position: 'absolute', bottom: 0, right: -20, transform: 'rotate(4deg)', fontSize: 14, background: '#fff' }}>
              特典すごいで！
            </div>
          </div>
        </div>
      </section>

      {/* Gifts */}
      <section className="container" style={{ padding: '70px 24px 40px' }}>
        <div style={{ textAlign: 'center', marginBottom: 40 }}>
          <div style={{ fontFamily: 'IBM Plex Mono, monospace', fontSize: 12, color: 'var(--sky-deep)', fontWeight: 700, letterSpacing: '.15em' }}>FREE GIFTS</div>
          <h2 style={{ fontSize: 32, fontWeight: 900, margin: '4px 0 0' }}>登録で2つもらえる特典</h2>
        </div>
        <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(340px, 1fr))' }}>
          <div className="chunky chunky-lg" style={{ padding: 28, background: '#fff', position: 'relative' }}>
            <div style={{
              position: 'absolute', top: -16, left: 20,
              background: 'var(--sky)', color: '#fff',
              border: '2.5px solid var(--line)', borderRadius: 10,
              padding: '4px 14px', fontSize: 12, fontWeight: 900,
            }}>特典 01</div>
            <div style={{
              aspectRatio: '4/3', border: '2.5px dashed var(--line)', borderRadius: 12,
              background: 'repeating-linear-gradient(135deg, #e7f3ff 0 12px, #fff 12px 24px)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              marginBottom: 20,
              fontFamily: 'IBM Plex Mono, monospace', fontSize: 11,
            }}>
              <div style={{ textAlign: 'center' }}>
                <div style={{ fontSize: 50, marginBottom: 8 }}>📘</div>
                PDF表紙画像差し替え
              </div>
            </div>
            <h3 style={{ fontSize: 20, fontWeight: 900, margin: '0 0 10px' }}>無料AIロードマップ PDF</h3>
            <p style={{ fontSize: 13, lineHeight: 1.7, opacity: .8, margin: 0 }}>
              「何から始めればいいかわからん」から「毎日AIで仕事が早くなる」までの30日プラン。毎日の学習ステップ付き。
            </p>
          </div>
          <div className="chunky chunky-lg" style={{ padding: 28, background: '#fff', position: 'relative' }}>
            <div style={{
              position: 'absolute', top: -16, left: 20,
              background: 'var(--pink)', color: 'var(--ink)',
              border: '2.5px solid var(--line)', borderRadius: 10,
              padding: '4px 14px', fontSize: 12, fontWeight: 900,
            }}>特典 02</div>
            <div style={{
              aspectRatio: '4/3', border: '2.5px dashed var(--line)', borderRadius: 12,
              background: 'repeating-linear-gradient(135deg, #ffe7f0 0 12px, #fff 12px 24px)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              marginBottom: 20,
              fontFamily: 'IBM Plex Mono, monospace', fontSize: 11,
            }}>
              <div style={{ textAlign: 'center' }}>
                <div style={{ fontSize: 50, marginBottom: 8 }}>📝</div>
                早見表画像差し替え
              </div>
            </div>
            <h3 style={{ fontSize: 20, fontWeight: 900, margin: '0 0 10px' }}>プロンプト5技法 早見表</h3>
            <p style={{ fontSize: 13, lineHeight: 1.7, opacity: .8, margin: 0 }}>
              ロール/チェーン/Few-shot/ステップバイステップ/制約。コピペで今日から使えるテンプレ5種類をA4一枚にまとめたで。
            </p>
          </div>
        </div>
      </section>

      {/* Steps */}
      <section className="container" style={{ padding: '40px 24px 60px' }}>
        <div style={{ textAlign: 'center', marginBottom: 40 }}>
          <h2 style={{ fontSize: 28, fontWeight: 900, margin: 0 }}>登録は10秒・3ステップ</h2>
        </div>
        <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))' }}>
          {[
            { n: '01', t: '下のボタンをタップ', d: 'LINEアプリが起動' },
            { n: '02', t: '友だち追加', d: '「追加」を押すだけ' },
            { n: '03', t: 'PDF が届く', d: '自動で特典が送られる' },
          ].map((s, i) => (
            <div key={i} className="chunky" style={{ padding: 24, textAlign: 'center', background: '#fff' }}>
              <div style={{ fontSize: 40, fontFamily: 'IBM Plex Mono, monospace', fontWeight: 900, color: 'var(--sky)', marginBottom: 8 }}>{s.n}</div>
              <div style={{ fontSize: 17, fontWeight: 900, marginBottom: 6 }}>{s.t}</div>
              <div style={{ fontSize: 13, opacity: .75 }}>{s.d}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Final CTA */}
      <section className="container" style={{ padding: '0 24px 80px' }}>
        <div className="chunky chunky-lg" style={{ padding: 40, background: 'var(--ink)', color: '#fff', textAlign: 'center' }}>
          <h2 style={{ fontSize: 28, fontWeight: 900, margin: '0 0 14px' }}>迷ってる時間がもったいないで〜</h2>
          <p style={{ fontSize: 14, margin: '0 0 24px', opacity: .85 }}>無料やし、合わんかったらブロックしてや。それだけ。</p>
          <button className="btn btn-line btn-lg" onClick={openLineModal}>
            <Icon name="line" size={18} />
            今すぐ無料でLINE登録する
          </button>
        </div>
      </section>
    </div>
  );
};

Object.assign(window, { LpPage });