// P1–P5 Components — exported to window
const { useState, useEffect, useRef } = React;

const _svcs = [
  { n:"01", name:"アプリ開発", desc:"業務に特化したWebアプリや社内ツールのお困りごと。要件整理から運用まで一貫してサポートします。", tags:["Webアプリ","社内ツール","API連携"] },
  { n:"02", name:"業務効率化DX", desc:"手作業・属人化・紙業務を見直し、デジタルで自動化。無理のない変革で現場の負担を減らします。", tags:["業務自動化","RPA","DX推進","人材育成"] },
  { n:"03", name:"AI活用", desc:"ChatGPTや生成AIを実務で使いこなす仕組みを構築。プロンプト設計から業務フローへの統合まで対応。", tags:["生成AI導入","AIエージェント","AI人材育成"] },
  { n:"04", name:"セミナー・研修", desc:"AI・DX・ノーコードをテーマにしたワークショップ・セミナーを企業・団体向けに開催。初心者にもわかりやすく。", tags:["企業研修","ワークショップ","オンライン可"] },
];
const _reasons = [
  { n:"01", t:"現場目線で考える", tx:"技術先行ではなく、人材・業務の実態から課題を整理します。現場の方が本当に使えるものの作り方を一緒に考えます。" },
  { n:"02", t:"スモールスタートOK", tx:"まず小さく試して、効果を確認しながら広げる進め方を提案。大きな投資の前に未来を見せます。" },
  { n:"03", t:"伴走型のサポート", tx:"納品して終わりではなく、継続的に改善・運用をサポート。人と職場を一緒に育てていく関係を大切にします。" },
];

function _useNav(cls) {
  useEffect(() => {
    const nav = document.querySelector(`.${cls}`);
    if (!nav) return;
    const fn = () => nav.classList.toggle('scrolled', window.scrollY > 40);
    window.addEventListener('scroll', fn, { passive: true });
    return () => window.removeEventListener('scroll', fn);
  }, []);
}
function _useSR() {
  useEffect(() => {
    const els = document.querySelectorAll('.sr');
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); io.unobserve(e.target); } });
    }, { threshold: 0.1 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  });
}

const _Form = ({ cls, btnCls, btnLabel="送信する →" }) => {
  const [sent, setSent] = useState(false);
  if (sent) return <p style={{opacity:.5,fontSize:14,paddingTop:16,fontFamily:"'Noto Sans JP',sans-serif"}}>ありがとうございます！3営業日以内にご連絡いたします。</p>;
  return (
    <form className={`${cls}-form`} onSubmit={e=>{e.preventDefault();setSent(true);}}>
      <div className="fr"><label>お名前</label><input type="text" placeholder="山田 太郎" required/></div>
      <div className="fr"><label>会社名</label><input type="text" placeholder="株式会社〇〇"/></div>
      <div className="fr"><label>メールアドレス</label><input type="email" placeholder="your@email.com" required/></div>
      <div className="fr"><label>お問い合わせ種別</label>
        <select><option>選択してください</option><option>アプリ開発について</option><option>業務効率化・DXについて</option><option>AI活用について</option><option>セミナー・研修について</option><option>その他</option></select>
      </div>
      <div className="fr"><label>お問い合わせ内容</label><textarea placeholder="ざっくりした内容で大丈夫です..."></textarea></div>
      <button type="submit" className={btnCls}>{btnLabel}</button>
    </form>
  );
};

/* ═══════════════════════════════════════
   P1 — MANIFESTO
   Word-burst hero · Photo cards · Alt why
═══════════════════════════════════════ */
const P1 = ({ cta, tagline }) => {
  const [stage, setStage] = useState(0);
  _useNav('p1m-nav'); _useSR();

  useEffect(() => {
    const t1 = setTimeout(() => setStage(1), 300);
    const t2 = setTimeout(() => setStage(2), 600);
    const t3 = setTimeout(() => setStage(3), 900);
    return () => [t1,t2,t3].forEach(clearTimeout);
  }, []);

  const svcBgs = [
    'linear-gradient(145deg,#1a1008,#2a1a08)',
    'linear-gradient(145deg,#0d1208,#1a2010)',
    'linear-gradient(145deg,#12080d,#201018)',
    'linear-gradient(145deg,#0a0d18,#101828)',
  ];
  const whyBgs = [
    'linear-gradient(145deg,#14100a,#201808)',
    'linear-gradient(145deg,#0a1410,#101e18)',
    'linear-gradient(145deg,#100a14,#181020)',
  ];

  return (
    <div className="p1m">
      <nav className="p1m-nav">
        <div className="p1m-logo">ゆるハックラボ</div>
        <div className="p1m-nl"><a href="#">Services</a><a href="#">About</a><a href="#">Contact</a><a href="#" className="p1m-cta">{cta}</a></div>
      </nav>

      {/* ── HERO MOVIE: Word burst ── */}
      <section className="p1m-hero">
        <div className="p1m-photo-bg"></div>
        <div className="p1m-photo-grain"></div>
        <div className="p1m-photo-overlay"></div>
        <div className="p1m-bg-type">MANIFEST</div>
        <div className="p1m-photo-label">PHOTO — オフィスシーン / TEAM AT WORK — 2025</div>
        <div className="p1m-hero-content">
          <div className="p1m-word p1m-w1" style={{animationDelay:'.2s'}} ref={el=>{if(el&&stage>=1)el.classList.add('go')}}>ゆるく、</div>
          <div className="p1m-word p1m-w2" style={{animationDelay:'0s'}} ref={el=>{if(el&&stage>=2)el.classList.add('go')}}>でもしっかり</div>
          <div className="p1m-word p1m-w3" style={{animationDelay:'0s'}} ref={el=>{if(el&&stage>=3)el.classList.add('go')}}>ハックする</div>
          <p className="p1m-sub">{tagline}。アプリ開発・業務DX・AI活用・セミナーを通じて、あなたのビジネスをアップデートします。</p>
          <div className="p1m-btns">
            <button className="p1m-btn">{cta}</button>
            <button className="p1m-btn-o">SERVICES ↓</button>
          </div>
        </div>
        <div className="p1m-scroll">SCROLL ↓</div>
      </section>

      {/* ── SERVICES: Photo cards 2×2 ── */}
      <section className="p1m-svc">
        <div className="p1m-svch sr">
          <h2>あなたの会社に<br/>あった<em>IT・AI活用</em></h2>
          <p>小さなツールから本格的なシステムまで。ビジネスの課題に合わせて柔軟に対応します。</p>
        </div>
        <div className="p1m-sg">
          {_svcs.map((s,i) => (
            <div key={s.n} className={`p1m-sc sr sr-d${i%2+1}`}>
              <div className="p1m-sc-photo">
                <div className="p1m-sc-bg" style={{background:svcBgs[i]}}></div>
                <div className="p1m-sc-grain"></div>
                <div className="p1m-sc-inner">
                  <span className="p1m-sc-big">{s.name.charAt(0)}</span>
                </div>
                <div className="p1m-sc-label">PHOTO — {s.name}のイメージ</div>
              </div>
              <div className="p1m-sc-text">
                <div className="p1m-sc-num">{s.n}</div>
                <div className="p1m-sc-name">{s.name}</div>
                <div className="p1m-sc-desc">{s.desc}</div>
                <div className="p1m-sc-tags">{s.tags.map(t=><span key={t} className="p1m-sc-tag">{t}</span>)}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ── WHY: Alternating image+text ── */}
      <section className="p1m-why">
        <div className="p1m-why-top sr">
          <h2>ゆるハックラボが<br/>選ばれる理由</h2>
        </div>
        {_reasons.map((r,i) => (
          <div key={r.n} className={`p1m-wrow${i%2===1?' p1m-wrow-flip':''}`}>
            <div className={`p1m-wphoto sr sr-d${i%2===0?1:2}`}>
              <div className="p1m-wphoto-bg" style={{background:whyBgs[i]}}></div>
              <div className="p1m-wphoto-big">{String(i+1).padStart(2,'0')}</div>
              <div className="p1m-wphoto-label">PHOTO — {r.t}</div>
            </div>
            <div className={`p1m-wcontent sr sr-d${i%2===0?2:1}`}>
              <div className="p1m-wnum">{r.n}</div>
              <div className="p1m-wt">{r.t}</div>
              <div className="p1m-wtx">{r.tx}</div>
            </div>
          </div>
        ))}
      </section>

      {/* ── CONTACT ── */}
      <section className="p1m-ct">
        <div className="p1m-ct-tag sr">CONTACT</div>
        <h2 className="sr sr-d1">まず、<em>話して</em>みませんか</h2>
        <p className="sr sr-d2">ざっくりした相談でも大歓迎です。フォームからお気軽にどうぞ。</p>
        <div className="p1m-ct-inner sr sr-d3"><_Form cls="p1m" btnCls="p1m-btn"/></div>
      </section>
      <footer className="p1m-ft">
        <span className="p1m-logo">ゆるハックラボ</span>
        <span className="p1m-ftc">© 2025 YuruHack Lab. All rights reserved.</span>
      </footer>
    </div>
  );
};

/* ═══════════════════════════════════════
   P2 — LIQUID
   Morphing blob hero · Organic cards
═══════════════════════════════════════ */
const P2 = ({ cta, tagline }) => {
  _useNav('p2l-nav'); _useSR();
  const icons = ['⬡','◈','◎','◇'];
  return (
    <div className="p2l">
      <nav className="p2l-nav">
        <div className="p2l-logo">ゆるハックラボ</div>
        <div className="p2l-nl"><a href="#">Services</a><a href="#">About</a><a href="#">Contact</a><a href="#" className="p2l-cta">{cta}</a></div>
      </nav>

      {/* ── HERO MOVIE: CSS blob morph ── */}
      <section className="p2l-hero">
        <div className="p2l-blob p2l-blob1"></div>
        <div className="p2l-blob p2l-blob2"></div>
        <div className="p2l-blob p2l-blob3"></div>
        <div className="p2l-hero-content">
          <div className="p2l-kicker">AI × TECHNOLOGY × SUPPORT</div>
          <div className="p2l-title">ゆるく、でも<br/><em>しっかり</em><br/>ハックする</div>
          <div className="p2l-sub">{tagline}。アプリ開発・業務DX・AI活用・セミナーを通じて、あなたのビジネスをアップデートします。</div>
          <div className="p2l-hb">
            <button className="p2l-btn">{cta}</button>
            <button className="p2l-btn-o">SERVICES ↓</button>
          </div>
        </div>
        {/* Large ambient type behind content */}
        <div style={{position:'absolute',bottom:'-5%',right:'-3%',fontFamily:"'Noto Serif JP',serif",fontSize:'clamp(100px,18vw,260px)',fontWeight:900,color:'rgba(34,197,94,.04)',letterSpacing:'-.05em',userSelect:'none',lineHeight:.85,zIndex:0,pointerEvents:'none'}}>HACK</div>
      </section>

      {/* ── STATS ── */}
      <div className="p2l-stats">
        {[["4+","主要サービス"],["100%","伴走型サポート"],["即日","相談対応"],["∞","成長の可能性"]].map(([v,l])=>(
          <div key={l} className="p2l-stat sr"><div className="p2l-sv">{v}</div><div className="p2l-sl">{l}</div></div>
        ))}
      </div>

      {/* ── SERVICES ── */}
      <section className="p2l-svc">
        <div className="p2l-stag sr">SERVICES</div>
        <div className="p2l-stitle sr sr-d1">あなたの会社にあった IT・AI活用</div>
        <div className="p2l-sg">
          {_svcs.map((s,i) => (
            <div key={s.n} className={`p2l-sc sr sr-d${i+1}`}>
              <div className="p2l-sc-icon">{icons[i]}</div>
              <div className="p2l-sn">{s.name}</div>
              <div className="p2l-sd">{s.desc}</div>
              <div className="p2l-st">{s.tags.map(t=><span key={t} className="p2l-stg">{t}</span>)}</div>
            </div>
          ))}
        </div>
      </section>

      {/* ── WHY ── */}
      <section className="p2l-svc" style={{borderBottom:'none',paddingTop:0}}>
        <div className="p2l-stag sr">WHY US</div>
        <div className="p2l-stitle sr sr-d1">ゆるハックラボが選ばれる理由</div>
        <div className="p2l-wg">
          {_reasons.map((r,i) => (
            <div key={r.n} className={`p2l-wc sr sr-d${i+1}`}>
              <div className="p2l-wnum">{r.n}</div>
              <div className="p2l-wt">{r.t}</div>
              <div className="p2l-wtx">{r.tx}</div>
            </div>
          ))}
        </div>
      </section>

      {/* ── CONTACT ── */}
      <section className="p2l-ct">
        <div className="p2l-stag" style={{marginBottom:12,color:'rgba(34,197,94,.6)'}}>CONTACT</div>
        <h2>まず、<em>話して</em>みませんか</h2>
        <p>ざっくりした相談でも大歓迎です。フォームからお気軽にどうぞ。</p>
        <div className="p2l-ctg sr">
          <div className="p2l-ctl"><p>技術よりも人への向き合い方が、私たちの強みです。小さな一歩が大きな変化の始まりです。</p></div>
          <_Form cls="p2l" btnCls="p2l-btn"/>
        </div>
      </section>
      <footer className="p2l-ft">
        <span className="p2l-ftl">ゆるハックラボ</span>
        <span className="p2l-ftc">© 2025 YuruHack Lab. All rights reserved.</span>
      </footer>
    </div>
  );
};

/* ═══════════════════════════════════════
   P3 — GRID SYSTEM
   Grid-line draw hero · Swiss precision
═══════════════════════════════════════ */
const P3 = ({ cta, tagline }) => {
  _useSR();
  // Grid lines: horizontal & vertical, drawn in on load
  const hLines = [25, 50, 75].map((pct, i) => ({
    top: `${pct}%`, delay: `${0.2 + i * 0.15}s`
  }));
  const vLines = [16.6, 33.3, 50, 66.6, 83.3].map((pct, i) => ({
    left: `${pct}%`, delay: `${0.1 + i * 0.12}s`
  }));

  return (
    <div className="p3g">
      <nav className="p3g-nav">
        <div className="p3g-logo">ゆるハックラボ</div>
        <div className="p3g-nl">
          <a href="#">Services</a><a href="#">About</a><a href="#">Contact</a>
          <a href="#" className="p3g-cta">{cta}</a>
        </div>
      </nav>

      {/* ── HERO MOVIE: Grid lines draw in ── */}
      <section className="p3g-hero">
        {hLines.map((l,i) => (
          <div key={i} className="p3g-grid-line-h p3g-line-draw-h" style={{top:l.top,animationDelay:l.delay}}></div>
        ))}
        {vLines.map((l,i) => (
          <div key={i} className="p3g-grid-line-v p3g-line-draw-v" style={{left:l.left,animationDelay:l.delay}}></div>
        ))}
        <div className="p3g-hero-cell">
          <div className="p3g-bg-num">HACK</div>
          <div className="p3g-label">YuruHack Lab — App Dev · DX · AI · Seminar</div>
          <div className="p3g-title">YURU<br/><span>HACK</span><br/>LAB.</div>
          <div className="p3g-sub">{tagline}。アプリ開発・業務DX・AI活用・セミナーを通じて、あなたのビジネスをアップデートします。</div>
          <div className="p3g-hbtns">
            <button className="p3g-btn">{cta}</button>
            <button className="p3g-btn-o">SERVICES ↓</button>
          </div>
        </div>
        <div className="p3g-hero-meta">
          {[["04","SERVICES"],["∞","SUPPORT"],["即日","RESPONSE"]].map(([v,l])=>(
            <div key={l} className="p3g-meta-item">
              <div className="p3g-meta-val">{v}</div>
              <div className="p3g-meta-label">{l}</div>
            </div>
          ))}
        </div>
        <div className="p3g-hero-tag">
          <div className="p3g-hero-tag-text">IT & AI<br/>PARTNER</div>
        </div>
        <div className="p3g-hero-scroll">
          <span>SCROLL DOWN</span>
          <div className="p3g-hero-scroll-line"></div>
          <span>↓</span>
        </div>
      </section>

      {/* ── SERVICES: strict grid ── */}
      <section className="p3g-svc">
        <div className="p3g-svc-hd">
          <div className="p3g-svc-hd-l"><h2>IT・AI<br/>SERVICES</h2></div>
          <div className="p3g-svc-hd-r"><p className="sr">小さなツールから本格的なシステムまで。ビジネスの課題に合わせて柔軟に対応します。あなたの会社にあった最適な解決策を一緒に考えます。</p></div>
        </div>
        <div className="p3g-sg">
          {_svcs.map((s,i) => (
            <div key={s.n} className={`p3g-sc sr sr-d${i+1}`}>
              <div className="p3g-sc-bar"></div>
              <div className="p3g-sc-num">{s.n}</div>
              <div className="p3g-sc-name">{s.name}</div>
              <div className="p3g-sc-desc">{s.desc}</div>
              <div className="p3g-sc-tags">{s.tags.map(t=><span key={t} className="p3g-sc-tag">{t}</span>)}</div>
            </div>
          ))}
        </div>
      </section>

      {/* ── WHY: systematic ── */}
      <section className="p3g-why">
        <div className="p3g-why-label"><h2>WHY US</h2></div>
        {_reasons.map((r,i) => (
          <div key={r.n} className={`p3g-wc sr sr-d${i+1}`}>
            <div className="p3g-wnum">{r.n}</div>
            <div className="p3g-wt">{r.t}</div>
            <div className="p3g-wtx">{r.tx}</div>
          </div>
        ))}
      </section>

      {/* ── CONTACT: grid form ── */}
      <section className="p3g-ct">
        <div className="p3g-ctl">
          <h2>まず、話して<br/>みませんか</h2>
          <p>ざっくりした相談でも大歓迎です。</p>
        </div>
        <div className="p3g-ctr sr"><_Form cls="p3g" btnCls="p3g-bsub"/></div>
      </section>
      <footer className="p3g-ft">
        <span className="p3g-ftl">ゆるハックラボ</span>
        <span className="p3g-ftc">© 2025 YuruHack Lab. All rights reserved.</span>
      </footer>
    </div>
  );
};

/* ═══════════════════════════════════════
   P4 — DEPTH
   Canvas 3-layer parallax · 3D cards
═══════════════════════════════════════ */
const P4 = ({ cta, tagline }) => {
  _useNav('p4d-nav'); _useSR();

  useEffect(() => {
    const cv = document.getElementById('p4cv');
    if (!cv) return;
    const ctx = cv.getContext('2d');
    let raf, W, H, mx = 0, my = 0, tmx = 0, tmy = 0;

    const resize = () => { W = cv.width = cv.offsetWidth; H = cv.height = cv.offsetHeight; };
    resize();
    const ro = new ResizeObserver(resize);
    ro.observe(cv);

    const onMouse = e => { mx = (e.clientX/W - 0.5) * 2; my = (e.clientY/H - 0.5) * 2; };
    window.addEventListener('mousemove', onMouse);

    // 3 depth layers
    const layers = [
      // Far: many small dim dots
      Array.from({length:120}, () => ({
        x: Math.random(), y: Math.random(),
        vx: (Math.random()-.5)*.0002, vy: (Math.random()-.5)*.0002,
        r: Math.random()*1.2+.3, depth: 0.2,
        color: `rgba(56,189,248,${Math.random()*.15+.05})`
      })),
      // Mid: medium dots
      Array.from({length:60}, () => ({
        x: Math.random(), y: Math.random(),
        vx: (Math.random()-.5)*.0004, vy: (Math.random()-.5)*.0004,
        r: Math.random()*2+.8, depth: 0.5,
        color: `rgba(56,189,248,${Math.random()*.3+.1})`
      })),
      // Near: few large bright
      Array.from({length:20}, () => ({
        x: Math.random(), y: Math.random(),
        vx: (Math.random()-.5)*.0006, vy: (Math.random()-.5)*.0006,
        r: Math.random()*4+2, depth: 1.0,
        color: `rgba(56,189,248,${Math.random()*.5+.3})`
      })),
    ];

    const draw = () => {
      tmx += (mx - tmx) * 0.04;
      tmy += (my - tmy) * 0.04;
      ctx.clearRect(0,0,W,H);

      // Deep gradient bg
      const grd = ctx.createRadialGradient(W*.4, H*.5, 0, W*.4, H*.5, W*.6);
      grd.addColorStop(0, 'rgba(56,189,248,.04)');
      grd.addColorStop(1, 'transparent');
      ctx.fillStyle = grd;
      ctx.fillRect(0,0,W,H);

      layers.forEach((layer, li) => {
        const parallax = layer[0].depth;
        const ox = tmx * parallax * 40;
        const oy = tmy * parallax * 24;

        layer.forEach(p => {
          p.x += p.vx; p.y += p.vy;
          if (p.x < 0) p.x = 1; if (p.x > 1) p.x = 0;
          if (p.y < 0) p.y = 1; if (p.y > 1) p.y = 0;
          const sx = p.x * W + ox, sy = p.y * H + oy;

          // Glow
          if (li === 2) {
            const g = ctx.createRadialGradient(sx,sy,0,sx,sy,p.r*4);
            g.addColorStop(0, 'rgba(56,189,248,.3)');
            g.addColorStop(1, 'transparent');
            ctx.fillStyle = g;
            ctx.beginPath(); ctx.arc(sx,sy,p.r*4,0,Math.PI*2); ctx.fill();
          }
          ctx.beginPath();
          ctx.arc(sx, sy, p.r, 0, Math.PI*2);
          ctx.fillStyle = p.color;
          ctx.fill();
        });

        // Connect nearby mid-layer dots
        if (li === 1) {
          for (let i=0;i<layer.length;i++) for (let j=i+1;j<layer.length;j++) {
            const dx=(layer[i].x-layer[j].x)*W, dy=(layer[i].y-layer[j].y)*H;
            const d=Math.sqrt(dx*dx+dy*dy);
            if(d<120){
              ctx.beginPath();
              ctx.strokeStyle=`rgba(56,189,248,${(1-d/120)*.08})`;
              ctx.lineWidth=.5;
              ctx.moveTo(layer[i].x*W+ox,layer[i].y*H+oy);
              ctx.lineTo(layer[j].x*W+ox,layer[j].y*H+oy);
              ctx.stroke();
            }
          }
        }
      });

      raf = requestAnimationFrame(draw);
    };
    draw();
    return () => { cancelAnimationFrame(raf); ro.disconnect(); window.removeEventListener('mousemove', onMouse); };
  }, []);

  return (
    <div className="p4d">
      <nav className="p4d-nav">
        <div className="p4d-logo">ゆるハックラボ</div>
        <div className="p4d-nl"><a href="#">Services</a><a href="#">About</a><a href="#">Contact</a><a href="#" className="p4d-cta">{cta}</a></div>
      </nav>

      {/* ── HERO MOVIE: Canvas 3-layer parallax ── */}
      <section className="p4d-hero">
        <canvas id="p4cv"></canvas>
        <div className="p4d-hero-content">
          <div className="p4d-ey">DEPTH × DIMENSION × DIGITAL</div>
          <div className="p4d-title">AIと技術で、<br/><em>仕事をもっと</em><br/>楽しく</div>
          <div className="p4d-sub">{tagline}。アプリ開発・業務DX・AI活用・セミナーを通じて、あなたのビジネスをアップデートします。</div>
          <div className="p4d-hb">
            <button className="p4d-btn">{cta}</button>
            <button className="p4d-btn-o">SERVICES ↓</button>
          </div>
        </div>
        <div className="p4d-depth-label">
          {['LAYER 01 — NEAR','LAYER 02 — MID','LAYER 03 — FAR'].map(l=><span key={l} className="p4d-dl">{l}</span>)}
        </div>
        {/* Large ambient 3D type */}
        <div style={{position:'absolute',right:'-2%',bottom:'-5%',fontFamily:"'DM Serif Display',serif",fontSize:'clamp(100px,16vw,240px)',fontStyle:'italic',color:'rgba(56,189,248,.025)',letterSpacing:'-.04em',userSelect:'none',zIndex:1,lineHeight:.85,pointerEvents:'none'}}>DEEP</div>
      </section>

      {/* ── SERVICES: 3D hover cards ── */}
      <section className="p4d-svc">
        <div className="p4d-stag sr">SERVICES</div>
        <div className="p4d-stitle sr sr-d1">あなたの会社にあった IT・AI活用</div>
        <div className="p4d-sg">
          {_svcs.map((s,i) => (
            <div key={s.n} className={`p4d-sc sr sr-d${i+1}`}>
              <div className="p4d-sc-depth"></div>
              <div className="p4d-sn">{s.name}</div>
              <div className="p4d-sd">{s.desc}</div>
              <div className="p4d-st">{s.tags.map(t=><span key={t} className="p4d-stg">{t}</span>)}</div>
            </div>
          ))}
        </div>
      </section>

      {/* ── WHY ── */}
      <section className="p4d-why">
        <div className="p4d-stag sr">WHY US</div>
        <div className="p4d-stitle sr sr-d1" style={{fontFamily:"'DM Serif Display',serif"}}>ゆるハックラボが選ばれる理由</div>
        <div className="p4d-wg">
          {_reasons.map((r,i) => (
            <div key={r.n} className={`p4d-wc sr sr-d${i+1}`}>
              <div className="p4d-wnum">{r.n}</div>
              <div className="p4d-wt">{r.t}</div>
              <div className="p4d-wtx">{r.tx}</div>
            </div>
          ))}
        </div>
      </section>

      {/* ── CONTACT ── */}
      <section className="p4d-ct">
        <div className="p4d-ctl sr">
          <div className="p4d-stag" style={{marginBottom:12}}>CONTACT</div>
          <h2>まず、話してみませんか</h2>
          <p>ざっくりした相談でも大歓迎です。フォームからお気軽にどうぞ。</p>
        </div>
        <div className="sr sr-d2"><_Form cls="p4d" btnCls="p4d-btn"/></div>
      </section>
      <footer className="p4d-ft">
        <span className="p4d-ftl">ゆるハックラボ</span>
        <span className="p4d-ftc">© 2025 YuruHack Lab. All rights reserved.</span>
      </footer>
    </div>
  );
};

/* ═══════════════════════════════════════
   P5 — AURORA
   Canvas northern lights · Frosted glass
═══════════════════════════════════════ */
const P5 = ({ cta, tagline }) => {
  _useSR();

  const orbClasses = ['p5a-sc-orb-1','p5a-sc-orb-2','p5a-sc-orb-3','p5a-sc-orb-4'];

  return (
    <div className="p5a">
      <nav className="p5a-nav">
        <div className="p5a-logo">ゆるハックラボ</div>
        <div className="p5a-nl"><a href="#">Services</a><a href="#">About</a><a href="#">Contact</a><a href="#" className="p5a-cta">{cta}</a></div>
      </nav>

      {/* ── HERO: Galaxy canvas renders via BackgroundCanvas in App ── */}
      <section className="p5a-hero">
        <div className="p5a-hero-content">
          <div className="p5a-kicker">GALAXY × AI × COSMIC TECH</div>
          <div className="p5a-title">ゆるく、でも<br/><em>しっかり</em><br/>ハックする</div>
          <div className="p5a-sub">{tagline}。アプリ開発・業務DX・AI活用・セミナーを通じて、あなたのビジネスをアップデートします。</div>
          <div className="p5a-hb">
            <button className="p5a-btn">{cta}</button>
            <button className="p5a-btn-o">SERVICES ↓</button>
          </div>
        </div>
        <div className="p5a-scroll">SCROLL ↓</div>
        {/* Large ambient background type */}
        <div style={{position:'absolute',right:'-2%',bottom:'-4%',fontFamily:"'Outfit',sans-serif",fontSize:'clamp(120px,18vw,260px)',fontWeight:800,color:'rgba(126,232,250,.03)',letterSpacing:'-.05em',userSelect:'none',zIndex:0,lineHeight:.85,pointerEvents:'none'}}>AURORA</div>
      </section>

      {/* ── STATS ── */}
      <div className="p5a-stats">
        {[["4+","主要サービス"],["100%","伴走型"],["即日","相談対応"],["∞","可能性"]].map(([v,l])=>(
          <div key={l} className="p5a-stat sr"><div className="p5a-sv">{v}</div><div className="p5a-sl">{l}</div></div>
        ))}
      </div>

      {/* ── SERVICES: frosted glass ── */}
      <section className="p5a-svc">
        <div className="p5a-stag sr">SERVICES</div>
        <div className="p5a-stitle sr sr-d1">あなたの会社にあった IT・AI活用</div>
        <div className="p5a-sg">
          {_svcs.map((s,i) => (
            <div key={s.n} className={`p5a-sc sr sr-d${i+1}`}>
              <div className={`p5a-sc-orb ${orbClasses[i]}`}></div>
              <div className="p5a-sn">{s.name}</div>
              <div className="p5a-sd">{s.desc}</div>
              <div className="p5a-st">{s.tags.map(t=><span key={t} className="p5a-stg">{t}</span>)}</div>
            </div>
          ))}
        </div>
      </section>

      {/* ── WHY ── */}
      <section className="p5a-why">
        <div className="p5a-stag sr">WHY US</div>
        <div className="p5a-stitle sr sr-d1">ゆるハックラボが選ばれる理由</div>
        <div className="p5a-wg">
          {_reasons.map((r,i) => (
            <div key={r.n} className={`p5a-wc sr sr-d${i+1}`}>
              <div className={`p5a-wacc p5a-wacc-${i+1}`}></div>
              <div className="p5a-wnum">{r.n}</div>
              <div className="p5a-wt">{r.t}</div>
              <div className="p5a-wtx">{r.tx}</div>
            </div>
          ))}
        </div>
      </section>

      {/* ── CONTACT: glass ── */}
      <section className="p5a-ct">
        <div className="p5a-ctw sr">
          <div>
            <div className="p5a-stag" style={{marginBottom:12}}>CONTACT</div>
            <h2>まず、<em>話して</em>みませんか</h2>
            <p className="p5a-ctdesc">ざっくりした相談でも大歓迎です。フォームからお気軽にどうぞ。</p>
          </div>
          <_Form cls="p5a" btnCls="p5a-btn"/>
        </div>
      </section>
      <footer className="p5a-ft">
        <span className="p5a-ftl">ゆるハックラボ</span>
        <span className="p5a-ftc">© 2025 YuruHack Lab. All rights reserved.</span>
      </footer>
    </div>
  );
};

// Export to window for main script
Object.assign(window, { P1, P2, P3, P4, P5 });