/* ============================================================
   sections.jsx — page sections
   ============================================================ */

/* ---------------- NAV ---------------- */
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header className={'nav' + (scrolled ? ' nav-scrolled' : '')}>
      <div className="wrap nav-inner">
        <a href="#top" className="nav-logo">
          <SealMark size={34} variant="flat" label="印" />
          <span className="serif nav-name">デジスタ</span>
        </a>
        <nav className="nav-links">
          <a href="#problem">課題</a>
          <a href="#feature">機能</a>
          <a href="#trust">信頼性</a>
          <a href="#pricing">料金</a>
        </nav>
        <a href="#cta" className="btn btn-gold nav-cta">先行登録</a>
      </div>
    </header>
  );
}

/* ---------------- HERO (3 variants) ---------------- */
function Hero({ variant }) {
  if (variant === 'split') return <HeroSplit />;
  if (variant === 'impact') return <HeroImpact />;
  return <HeroCentered />;
}

function HeroBadge() {
  return <span className="badge-soon"><span className="dot" />近日提供予定 ・ 先行お問い合わせ受付中</span>;
}

/* A — 正統 / centered, seal behind headline */
function HeroCentered() {
  const sealRef = React.useRef(null);
  const replay = () => {
    const s = sealRef.current; if (!s) return;
    s.classList.remove('stamp-play'); void s.offsetWidth; s.classList.add('stamp-play');
  };
  React.useEffect(() => autoStampSafe(() => sealRef.current), []);
  return (
    <section className="hero hero-centered" id="top">
      <div className="hero-bg-rings" />
      <div className="wrap hero-c-inner">
        <div className="reveal" style={{ '--d': '0ms' }}><HeroBadge /></div>
        <div ref={sealRef} className="hero-c-seal" onClick={replay} title="クリックで再捺印">
          <SealMark size={264} variant="glow" label="印" />
        </div>
        <h1 className="serif hero-c-title reveal" style={{ '--d': '120ms' }}>
          印鑑を、<br /><span className="nowrap"><span className="text-foil">デジタル</span>に。</span>
        </h1>
        <p className="hero-c-sub reveal" style={{ '--d': '220ms' }}>
          金印の威厳と信頼を、クラウドに。<br />
          デジタル印鑑を、作成・管理・捺印。
        </p>
        <div className="hero-c-cta reveal" style={{ '--d': '320ms' }}>
          <a href="#cta" className="btn btn-gold btn-lg">先行登録する <IconArrowR size={18} stroke="#0D1F0F" /></a>
          <a href="#feature" className="btn btn-outline-gold btn-lg">機能を見る</a>
        </div>
      </div>
      <HeroScrollCue />
    </section>
  );
}

/* B — 対比 / split editorial */
function HeroSplit() {
  const sealRef = React.useRef(null);
  const replay = () => { const s = sealRef.current; if (!s) return; s.classList.remove('stamp-play'); void s.offsetWidth; s.classList.add('stamp-play'); };
  React.useEffect(() => autoStampSafe(() => sealRef.current), []);
  return (
    <section className="hero hero-split" id="top">
      <div className="wrap hero-s-grid">
        <div className="hero-s-text">
          <div className="reveal"><HeroBadge /></div>
          <h1 className="serif hero-s-title reveal" style={{ '--d': '120ms' }}>
            印鑑を、<br /><span className="nowrap"><span className="text-foil">デジタル</span>に。</span>
          </h1>
          <p className="hero-s-sub reveal" style={{ '--d': '220ms' }}>
            金印の威厳と信頼を、クラウドに。<br />
            士業・経営層のためのデジタル印鑑サービス。
          </p>
          <div className="hero-s-cta reveal" style={{ '--d': '320ms' }}>
            <a href="#cta" className="btn btn-gold btn-lg">先行登録する <IconArrowR size={18} stroke="#0D1F0F" /></a>
            <a href="#feature" className="btn btn-outline-gold btn-lg">機能を見る</a>
          </div>
        </div>
        <div className="hero-s-visual reveal-scale" style={{ '--d': '200ms' }}>
          <div className="hero-s-plinth" />
          <div ref={sealRef} className="hero-s-seal" onClick={replay} title="クリックで再捺印">
            <SealMark size={360} variant="glow" label="印" />
          </div>
        </div>
      </div>
      <HeroScrollCue />
    </section>
  );
}

/* C — 捺印インパクト / huge headline, seal presses into corner */
function HeroImpact() {
  const sealRef = React.useRef(null);
  const impRef = React.useRef(null);
  const replay = () => {
    const s = sealRef.current; if (!s) return;
    s.classList.remove('stamp-play'); void s.offsetWidth; s.classList.add('stamp-play');
    if (impRef.current) { impRef.current.classList.remove('show'); setTimeout(() => impRef.current && impRef.current.classList.add('show'), 360); }
  };
  React.useEffect(() => autoStampSafe(() => sealRef.current), []);
  return (
    <section className="hero hero-impact" id="top">
      <div className="wrap hero-i-inner">
        <div className="reveal"><HeroBadge /></div>
        <h1 className="serif hero-i-title">
          <span className="reveal" style={{ '--d': '100ms' }}>その一印に、</span>
          <span className="reveal" style={{ '--d': '200ms' }}>会社の<span className="text-foil">信頼</span>を。</span>
        </h1>
        <div ref={sealRef} className="hero-i-seal" onClick={replay} title="クリックで再捺印">
          <SealMark size={132} variant="glow" label="印" />
          <span ref={impRef} className="hero-i-impression">
            <SealMark size={132} variant="flat" label="印" strokeOnly />
          </span>
        </div>
        <p className="hero-i-sub reveal" style={{ '--d': '340ms' }}>
          印鑑を、デジタルに。<br />金印の威厳と信頼を、クラウドに。
        </p>
        <div className="hero-i-cta reveal" style={{ '--d': '420ms' }}>
          <a href="#cta" className="btn btn-gold btn-lg">先行登録する <IconArrowR size={18} stroke="#0D1F0F" /></a>
          <a href="#feature" className="btn btn-outline-gold btn-lg">機能を見る</a>
        </div>
      </div>
      <HeroScrollCue />
    </section>
  );
}

function HeroScrollCue() {
  return <div className="scroll-cue"><span>SCROLL</span><i /></div>;
}

/* ---------------- PROBLEM ---------------- */
function Problem() {
  const pains = [
    { Icon: IconCommute, t: '押すたびに、出社。', d: '在宅でも、捺印のためだけに出社する。郵送で書類を回し、承認に何日も待つ。' },
    { Icon: IconScan, t: '撮って、貼って、また撮って。', d: 'PDF化のたびにスキャン・撮影・トリミング。印影は劣化し、毎回ばらつく。' },
    { Icon: IconRisk, t: '誰が、いつ、押したのか。', d: '物理印は使用履歴が残らない。紛失・なりすまし・偽造のリスクが常につきまとう。' },
  ];
  return (
    <section className="problem" id="problem">
      <div className="wrap">
        <div className="sec-head center reveal">
          <span className="eyebrow eyebrow-dark">課題 / PROBLEM</span>
          <h2 className="serif sec-title">その職印、<br className="br-sp" />まだ撮していますか？</h2>
          <p className="sec-lead">紙の職印は、想像以上にコストがかかっています。</p>
        </div>
        <div className="pain-grid">
          {pains.map((p, i) => (
            <div key={i} className="pain-card reveal" style={{ '--d': `${i * 120}ms` }}>
              <div className="pain-no">{String(i + 1).padStart(2, '0')}</div>
              <div className="pain-icon"><p.Icon size={52} stroke="var(--gold-deep)" /></div>
              <h3 className="serif pain-t">{p.t}</h3>
              <p className="pain-d">{p.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- FEATURE ---------------- */
function Feature() {
  return (
    <section className="feature" id="feature">
      <div className="feat-grain" />
      <div className="wrap">
        <div className="sec-head reveal center">
          <span className="eyebrow eyebrow-gold">機能 / FEATURE</span>
          <h2 className="serif sec-title on-dark">金印の威厳を、<span className="text-foil">クラウド</span>に。</h2>
          <p className="sec-lead on-dark">電子印鑑——たった一つの機能に、すべてを注ぐ。<br />クラウド上でデジタル印鑑を作成し、管理し、ワンタップで捺印する。</p>
        </div>

        {/* phone + steps */}
        <div className="feat-showcase reveal-scale">
          <div className="feat-phone"><PhoneMockup /></div>
          <div className="feat-steps">
            {[
              { n: '作成', t: '印影を、デジタルで再現。', d: '代表者印・角印・銀行印・職印を、フォントと朱の質感までデジタルで忠実に再現します。' },
              { n: '管理', t: 'すべての印を、一元管理。', d: '組織の印鑑を一箇所に。権限を割り当て、誰が・いつ・どの印を押したかを完全に記録します。' },
              { n: '捺印', t: 'ワンタップで、押印完了。', d: 'ブラウザ／スマホから対象の書類に押印。タイムスタンプ付きで、瞬時に承認が回ります。' },
            ].map((s, i) => (
              <div key={i} className="feat-step reveal" style={{ '--d': `${i * 110}ms` }}>
                <div className="feat-step-n serif">{s.n}</div>
                <div>
                  <h4 className="serif">{s.t}</h4>
                  <p>{s.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* desktop dashboard */}
        <div className="feat-desktop reveal-scale">
          <div className="feat-desktop-label">
            <span className="eyebrow eyebrow-gold">管理画面 / DASHBOARD</span>
            <h3 className="serif on-dark">組織の印鑑を、ひと目で。</h3>
            <p className="on-dark">PCの管理画面から、登録した印鑑・押印履歴・メンバー権限をまとめて統制。監査証跡はすべて自動で残ります。</p>
          </div>
          <DesktopMockup />
        </div>
      </div>
    </section>
  );
}

/* ---------------- TRUST ---------------- */
function Trust() {
  const items = [
    { Icon: IconLaw, t: '電子署名法・電子印鑑法 準拠', d: '法的有効性を備えたデジタル押印。書面と同等の証拠力を確保します。' },
    { Icon: IconTimestamp, t: 'タイムスタンプ', d: '押印日時を、改ざん不可能な形で記録。「いつ押したか」を客観的に証明します。' },
    { Icon: IconLock, t: '暗号化・監査ログ', d: 'すべての操作を暗号化し、監査証跡を保全。内部統制・コンプライアンスに対応。' },
  ];
  return (
    <section className="trust" id="trust">
      <div className="wrap">
        <div className="sec-head reveal center">
          <span className="eyebrow eyebrow-dark">信頼性 / TRUST</span>
          <h2 className="serif sec-title">電子署名法・電子印鑑法 準拠</h2>
          <p className="sec-lead">「デジタルでも、本物の印鑑」。その信頼を、法とテクノロジーで支えます。</p>
        </div>
        <div className="trust-hero reveal-scale">
          <div className="trust-shield">
            <IconShield size={120} stroke="var(--gold-deep)" sw={1} />
            <div className="trust-shield-glow" />
          </div>
        </div>
        <div className="trust-grid">
          {items.map((it, i) => (
            <div key={i} className="trust-card reveal" style={{ '--d': `${i * 120}ms` }}>
              <div className="trust-icon"><it.Icon size={56} stroke="var(--gold-deep)" /></div>
              <h3 className="serif">{it.t}</h3>
              <p>{it.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- PRICING ---------------- */
function Pricing() {
  return (
    <section className="pricing" id="pricing">
      <div className="wrap-narrow">
        <div className="price-card reveal-scale">
          <div className="price-seal"><SealMark size={84} variant="flat" label="料" /></div>
          <span className="eyebrow eyebrow-gold">料金 / PRICING</span>
          <h2 className="serif price-title on-dark">料金プランは、ただいま準備中です。</h2>
          <p className="price-lead on-dark">
            デジスタは <strong>近日提供予定</strong> のサービスです。<br />
            料金・プランの詳細は、<strong>先行お問い合わせ</strong>にてご案内いたします。
          </p>
          <ul className="price-notes">
            <li><IconCheck size={18} stroke="var(--gold-light)" />先行登録者には、特別なご案内を予定</li>
            <li><IconCheck size={18} stroke="var(--gold-light)" />士業・中小企業の運用に合わせたプラン設計</li>
            <li><IconCheck size={18} stroke="var(--gold-light)" />リリース時に、最優先でご連絡</li>
          </ul>
          <a href="#cta" className="btn btn-gold btn-lg">先行お問い合わせへ <IconArrowR size={18} stroke="#0D1F0F" /></a>
        </div>
      </div>
    </section>
  );
}

/* ---------------- CTA FORM ---------------- */
function CTAForm() {
  const [sent, setSent] = React.useState(false);
  const submit = (e) => { e.preventDefault(); setSent(true); };
  return (
    <section className="cta" id="cta">
      <div className="cta-rings" />
      <div className="wrap cta-inner">
        <div className="cta-left reveal">
          <span className="badge-soon"><span className="dot" />近日提供予定</span>
          <h2 className="serif cta-title">先行登録して、<br />リリース時に即時通知を。</h2>
          <p className="cta-sub">いち早くデジスタを体験したい方へ。提供開始のタイミングと、先行案内を最優先でお届けします。</p>
          <div className="cta-assure">
            <span><IconCheck size={16} stroke="var(--gold-light)" />ご登録は無料・約30秒</span>
            <span><IconCheck size={16} stroke="var(--gold-light)" />しつこい営業はいたしません</span>
          </div>
        </div>
        <div className="cta-formwrap reveal" style={{ '--d': '120ms' }}>
          {!sent ? (
            <form className="cta-form" onSubmit={submit}>
              <label>会社名<input type="text" placeholder="株式会社デジスタ" required /></label>
              <label>お名前<input type="text" placeholder="印鑑 太郎" required /></label>
              <label>メールアドレス<input type="email" placeholder="you@example.com" required /></label>
              <label>ご業種
                <select required defaultValue="">
                  <option value="" disabled>選択してください</option>
                  <option>弁護士</option><option>税理士</option><option>社会保険労務士</option>
                  <option>司法書士</option><option>中小企業の管理職・役職者</option><option>その他</option>
                </select>
              </label>
              {/* TODO: 実運用の Google フォーム URL が決まったら href="#" を差し替える（現状は仮置き） */}
              <a href="#" target="_blank" rel="noopener" className="btn btn-gold btn-lg cta-submit">先行登録する <IconArrowR size={18} stroke="#0D1F0F" /></a>
              <p className="cta-fine">ご登録は提供開始のご案内のみに利用します。<a href="#">プライバシーポリシー</a></p>
            </form>
          ) : (
            <div className="cta-thanks">
              <div className="thanks-seal"><SealMark size={92} variant="flat" label="受" /></div>
              <h3 className="serif">先行登録を受け付けました。</h3>
              <p>ありがとうございます。提供開始のタイミングで、ご登録のメールアドレスへ最優先でご連絡いたします。</p>
              <button className="btn btn-outline-gold" onClick={() => setSent(false)}>別の登録をする</button>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

/* ---------------- FOOTER ---------------- */
function Footer() {
  const cols = [
    { h: '製品', links: ['機能', '信頼性・セキュリティ', '料金', 'よくある質問'] },
    { h: '会社情報', links: ['会社概要', 'ニュース', '採用情報', 'お問い合わせ'] },
    { h: '規約', links: ['利用規約', 'プライバシーポリシー', '特定商取引法'] },
  ];
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div className="footer-brand">
            <a href="#top" className="nav-logo"><SealMark size={36} variant="flat" label="印" /><span className="serif nav-name">デジスタ</span></a>
            <p className="footer-tag">印鑑を、デジタルに。<br />金印の威厳と信頼を、クラウドに。</p>
            <span className="badge-soon"><span className="dot" />近日提供予定</span>
          </div>
          <div className="footer-cols">
            {cols.map((c, i) => (
              <div key={i} className="footer-col">
                <h5>{c.h}</h5>
                <ul>{c.links.map((l, j) => <li key={j}><a href="#">{l}</a></li>)}</ul>
              </div>
            ))}
          </div>
        </div>
        <div className="rule-gold" style={{ margin: '36px 0 22px' }} />
        <div className="footer-bottom">
          <span>株式会社インペリアル・メッセンジャー</span>
          <span>© 2026 Degista. All rights reserved.</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Hero, Problem, Feature, Trust, Pricing, CTAForm, Footer });