/* procura/sections.jsx — all page sections. Exported to window for app.jsx. */

const { useState, useEffect, useRef } = React;

/* ---- Formspree endpoint (フォームID を入力してください) ---- */
const FORMSPREE_ID = "mgobnnbp"; // → tominaga@incubatefund.com に通知

/* ---- inline icons (Lucide-style, 1.5px) ---- */
const Ic = {
  compare: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M6 3v12"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="6" r="3"/><path d="M18 9v3a3 3 0 0 1-3 3H9"/><path d="M9 18l-3-3 3-3"/></svg>,
  file: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M16 13H8M16 17H8M10 9H8"/></svg>,
  mail: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>,
  check: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5"/></svg>,
  userCheck: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="m16 11 2 2 4-4"/></svg>,
  zap: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg>,
  arrow: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>,
};

function Wordmark({ dark }) {
  return <span className={"wordmark" + (dark ? " dark" : "")}>Procura<span className="dot">.</span></span>;
}

/* ============================== NAV ============================== */
function Nav() {
  return (
    <header className="nav">
      <div className="wrap nav-inner">
        <a href="#top"><Wordmark /></a>
        <nav className="nav-links">
          <a href="#product">プロダクト</a>
          <a href="#speed">スピード</a>
          <a href="#pricing">料金</a>
          <a href="#waitinglist">登録する</a>
        </nav>
        <div className="nav-cta">
          <a href="#waitinglist" className="btn btn-accent btn-sm">ウェイティングリスト登録</a>
        </div>
      </div>
    </header>
  );
}

/* ============================== HERO ============================== */
function Hero() {
  return (
    <section className="hero" id="top">
      <div className="wrap hero-grid">
        <div className="hero-logo">
          <div className="hero-logo-inner">
            <div className="hero-logo-mark">Procura<span className="dot">.</span></div>
            <div className="hero-logo-rule"><span></span></div>
            <div className="hero-logo-tag">発注まで完結する、<br />調達AIエージェント。</div>
            <div className="hero-logo-eyebrow">ZERO TO ORDER</div>
          </div>
        </div>
        <div>
          <div className="hero-eyebrow-row">
            <span className="hero-badge"><span className="pulse"></span>Slack で完結する調達AI</span>
          </div>
          <h1>
            調達、まだ<br /><span className="strike">手作業</span>ですか。
          </h1>
          <div className="hero-actions">
            <a href="#waitinglist" className="btn btn-accent">ウェイティングリストに登録する {Ic.arrow}</a>
            <a href="#product" className="btn btn-ghost-light">動作を見る</a>
          </div>
          <div className="hero-trust">
            <span><b>Slack</b>で完結</span><span className="sep"></span>
            <span>承認は<b>ワンタップ</b></span><span className="sep"></span>
            <span>成果報酬<b>1件 ¥100</b></span>
          </div>
        </div>
      </div>
      <div className="wrap">
        <div className="hero-stats">
          {[
            ["4", "時間/月", "手作業から解放"],
            ["3", "社", "AIが自動で相見積もり"],
            ["2", "分", "依頼から比較完了まで"],
            ["100", "円", "発注完結ごとの成果報酬"],
          ].map(([n, u, l], i) => (
            <div className="hero-stat" key={i}>
              <div className="num">{n}<span className="u">{u}</span></div>
              <div className="lbl">{l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================== PROBLEM ============================== */
function Problem() {
  const items = [
    { ic: Ic.compare, t: "相見積もりの取得", d: "複数社に問い合わせ、返信を待ち、条件を表に並べ直す。担当者の勘と根気に依存する作業。", m: "月 90 分" },
    { ic: Ic.file, t: "発注書の作成・送付", d: "テンプレに転記し、金額を確認し、宛先を間違えないよう送る。1件ずつ手で繰り返す。", m: "月 80 分" },
    { ic: Ic.mail, t: "納期と承認の催促", d: "「あの件どうなりました？」の往復。承認待ちとエスカレーションで時間が溶けていく。", m: "月 70 分" },
  ];
  return (
    <section className="section band" id="problem">
      <div className="wrap">
        <div className="sec-head sr">
          <p className="eyebrow dim">EVERY MONTH, EVERY OFFICE</p>
          <h2 className="sec-title">総務と経理から、<br />月4時間が静かに消えている。</h2>
        </div>
        <div className="pain-grid">
          {items.map((it, i) => (
            <div className="pain sr" key={i} style={{ transitionDelay: (i * 80) + "ms" }}>
              <div className="pic">{it.ic}</div>
              <h3>{it.t}</h3>
              <p>{it.d}</p>
              <div className="mins">{it.m}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================== PRODUCT (Slack, interactive) ============================== */
function ProductSection() {
  const [step, setStep] = useState(1);
  const [approved, setApproved] = useState(false);
  const [auto, setAuto] = useState(true);
  const ref = useRef(null);
  const started = useRef(false);

  const steps = [
    { t: "Slackで依頼", d: "いつものチャンネルで@メンション。専用ツールも、フォーム入力も不要。" },
    { t: "仕様を自動確定", d: "曖昧な依頼から要件を補完。型番・数量・納期まで構造化する。" },
    { t: "3社を自動比較", d: "見積を取得し、価格・納期・在庫を一枚の表に。推奨先まで提示。" },
    { t: "人間が承認", d: "意思決定は人に。ワンタップで承認、あとはすべて自動で進む。" },
    { t: "発注書まで送付", d: "発注書を生成して先方へ自動送付。承認後の事務作業はゼロ。" },
  ];

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((es) => {
      es.forEach((e) => {
        if (e.isIntersecting && !started.current) { started.current = true; }
      });
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  useEffect(() => {
    if (!auto) return;
    if (step >= 5) return;
    const id = setTimeout(() => {
      setStep((s) => {
        const n = Math.min(5, s + 1);
        if (n >= 4) setApproved(true);
        return n;
      });
    }, 1300);
    return () => clearTimeout(id);
  }, [step, auto]);

  const jump = (i) => {
    setAuto(false);
    const n = i + 1;
    setStep(n);
    setApproved(n >= 5);
  };
  const approve = () => { setApproved(true); setAuto(false); setStep(5); };

  return (
    <section className="section dark" id="product" ref={ref}>
      <div className="wrap">
        <div className="sec-head sr">
          <p className="eyebrow">PRODUCT IN ACTION</p>
          <h2 className="sec-title">Slack ひとつで、<br />発注まで完結する。</h2>
          <p className="sec-lead">依頼から発注書の送付まで、Procuraが一連で代行。人は「承認」を押すだけです。</p>
        </div>
        <div className="prod-grid">
          <div className="prod-copy">
            <div className="feat">
              {steps.map((s, i) => (
                <div
                  className={"fstep" + (step === i + 1 ? " active" : "")}
                  key={i}
                  onClick={() => jump(i)}
                  role="button"
                  tabIndex={0}
                  onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); jump(i); } }}
                >
                  <span className="n">{i + 1}</span>
                  <div className="ft">
                    <h4>{s.t}</h4>
                    <p>{s.d}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div className="prod-demo">
            <SlackFlow step={step} approved={approved} onApprove={approve} />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================== SPEED (2分) ============================== */
function Speed() {
  const nodes = [
    { t: "依頼", d: "Slackで@メンション", m: "0:00", done: true },
    { t: "仕様確定", d: "要件を自動構造化", m: "0:20", done: true },
    { t: "3社比較", d: "見積を並べて推奨", m: "1:30", done: true },
    { t: "承認", d: "人がワンタップ", m: "—", done: true },
    { t: "発注完了", d: "発注書を自動送付", m: "2:00", done: true },
  ];
  return (
    <section className="section light speed" id="speed">
      <div className="wrap">
        <div className="sr">
          <p className="eyebrow">REQUEST → ORDER</p>
          <div className="big" style={{ marginTop: 10 }}>2<span className="u">分</span><span className="maru">。</span></div>
          <p className="speed-sub">依頼から比較完了まで、わずか2分。<br />承認後の事務作業は、<b style={{ color: "var(--ink)" }}>ゼロ</b>。</p>
          <div className="speed-chips">
            <span className="chip"><span className="ci">{Ic.check}</span>仕様の自動確定</span>
            <span className="chip"><span className="ci">{Ic.userCheck}</span>承認は人間が判断</span>
            <span className="chip"><span className="ci">{Ic.zap}</span>催促は全自動エスカレーション</span>
          </div>
        </div>
        <div className="timeline sr" id="flow">
          <div className="tl-fill"></div>
          {nodes.map((n, i) => (
            <div className={"tl-node" + (n.done ? " done" : "")} key={i}>
              <div className="tt">{n.t}</div>
              <div className="td">{n.d}</div>
              <div className="tm">{n.m}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================== PRICING ============================== */
function Pricing() {
  return (
    <section className="section dark" id="pricing">
      <div className="wrap">
        <div className="sec-head sr">
          <p className="eyebrow">OUTCOME-BASED PRICING</p>
          <h2 className="sec-title">未完結は、課金なし。</h2>
          <p className="sec-lead">固定費を、ムダに上げない。発注が完結したぶんだけ、お支払いください。</p>
        </div>
        <div className="price-grid">
          <div className="price-card sr">
            <div className="pc-top">
              <div className="pc-label">発注完結ごと</div>
              <div className="pc-amount">
                <span className="yen">¥</span>
                <span className="val">100</span>
                <span className="per">/ 1 件</span>
              </div>
              <div className="pc-note">着手金なし・月額固定なし。比較や下調べだけなら、料金は発生しません。</div>
            </div>
            <div className="pc-list">
              {[
                "発注が完結した件だけ課金（成果報酬）",
                "未完結・キャンセルは ¥0",
                "3社相見積もり・発注書送付すべて込み",
              ].map((t, i) => (
                <div className="pc-li" key={i}><span className="pcheck">{Ic.check}</span><span>{t}</span></div>
              ))}
              <div className="pc-li"><span className="pcheck">{Ic.check}</span><span>固定SaaS費 <s>月¥50,000〜</s> は、不要。</span></div>
            </div>
          </div>
          <div className="price-points">
            <div className="pp sr"><h4>使った分だけ、が正直。</h4><p>件数が読めない月でも、固定費に縛られない。<span className="k">完結 = 課金</span>のシンプルな一本。</p></div>
            <div className="pp sr"><h4>導入のハードルを、低く。</h4><p>初期費用ゼロ。まず1部署・1カテゴリから。効果が出たぶんだけ広げられます。</p></div>
            <div className="pp sr"><h4>成果に責任を持つ設計。</h4><p>完結しなければ無料。だからProcuraは、<span className="k">最後までやり切る</span>ことに集中します。</p></div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================== CTA ============================== */
function CTA() {
  return (
    <section className="cta" id="demo">
      <div className="wrap sr">
        <div className="endmark">Procura<span className="dot">.</span></div>
        <p className="cta-sub">発注まで完結する、調達AIエージェント。<br />まずは、いまの調達フローに2分で組み込めます。</p>
        <div className="cta-actions">
          <a href="#waitinglist" className="btn btn-accent">ウェイティングリストに登録する {Ic.arrow}</a>
          <a href="#product" className="btn btn-ghost-light">もっと詳しく見る</a>
        </div>
      </div>
    </section>
  );
}

/* ============================== FOOTER ============================== */
function Footer() {
  const cols = [
    ["プロダクト", ["機能", "Slack連携", "セキュリティ", "料金"]],
    ["導入", ["導入の流れ", "導入事例", "FAQ", "お問い合わせ"]],
    ["会社", ["運営会社", "採用情報", "ニュース", "利用規約"]],
  ];
  return (
    <footer className="foot">
      <div className="wrap">
        <div className="foot-top">
          <div style={{ maxWidth: 280 }}>
            <Wordmark />
            <p style={{ color: "rgba(255,255,255,0.5)", fontSize: 13.5, lineHeight: 1.7, marginTop: 14 }}>
              依頼から発注完結まで。調達の事務作業を、AIエージェントに。
            </p>
          </div>
        </div>
        <div className="foot-bottom">
          <div className="conf">CONFIDENTIAL AND PROPRIETARY — このページはProcuraのコンセプトモックアップです。記載の数値・社名・仕様はデモ用のサンプルです。</div>
          <div className="cp">© 2026 Procura</div>
        </div>
      </div>
    </footer>
  );
}

/* ============================== WAITING LIST ============================== */
function WaitingList() {
  const [email, setEmail] = useState("");
  const [company, setCompany] = useState("");
  const [request, setRequest] = useState("");
  const [status, setStatus] = useState("idle"); // idle | sending | success | error

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!email) return;
    setStatus("sending");
    try {
      if (!FORMSPREE_ID) {
        console.log("[WaitingList] 登録:", { email, company, request });
        await new Promise((r) => setTimeout(r, 700));
        setStatus("success");
        return;
      }
      const res = await fetch(`https://formspree.io/f/${FORMSPREE_ID}`, {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify({
          email,
          company: company || "(未入力)",
          request: request || "(未入力)",
          _subject: `[Procura] ウェイティングリスト登録 — ${email}`,
          _replyto: email,
        }),
      });
      setStatus(res.ok ? "success" : "error");
    } catch {
      setStatus("error");
    }
  };

  return (
    <section className="section wl-section" id="waitinglist">
      <div className="wrap">
        <div className="sec-head center sr">
          <p className="eyebrow">EARLY ACCESS</p>
          <h2 className="sec-title wl-title">ウェイティングリストに登録する</h2>
        </div>
        {status === "success" ? (
          <div className="wl-success sr in">
            <div className="wl-checkmark">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
            </div>
            <p className="wl-success-txt">登録を受け付けました。<br />正式リリース時に改めてご連絡します。</p>
          </div>
        ) : (
          <form className="wl-form sr" onSubmit={handleSubmit} noValidate>
            <input
              className="wl-input"
              type="email"
              placeholder="メールアドレス（必須）"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
              disabled={status === "sending"}
            />
            <input
              className="wl-input"
              type="text"
              placeholder="会社名（任意）"
              value={company}
              onChange={(e) => setCompany(e.target.value)}
              disabled={status === "sending"}
            />
            <textarea
              className="wl-input wl-textarea"
              placeholder="ご要望・気になっていること（任意）"
              value={request}
              onChange={(e) => setRequest(e.target.value)}
              disabled={status === "sending"}
              rows={4}
            ></textarea>
            <button
              type="submit"
              className={"btn btn-accent wl-btn" + (status === "sending" ? " wl-busy" : "")}
              disabled={status === "sending" || !email}
            >
              {status === "sending" ? "送信中…" : <>登録する {Ic.arrow}</>}
            </button>
            {status === "error" && (
              <p className="wl-error">送信に失敗しました。もう一度お試しください。</p>
            )}
            <p className="wl-note">スパムは送りません。登録解除はいつでも可能です。</p>
          </form>
        )}
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Problem, ProductSection, Speed, Pricing, CTA, WaitingList, Footer, Wordmark });