// Sygnal LP sections — narrative: 共感 → 原因 → Sygnalとは → AI×PM → 改善履歴 → 画面 → 比較 → 導入 → 料金 → FAQ
const { DatabaseMock, AIMessageMock, InsightsMock, SalesMock } = window.SygnalMocks;

const Chk = ({ s = 14, c = "#111" }) => (
  <svg viewBox="0 0 24 24" width={s} height={s} fill="none" stroke={c} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5" /></svg>
);
const Cross = ({ s = 14, c = "#999" }) => (
  <svg viewBox="0 0 24 24" width={s} height={s} fill="none" stroke={c} strokeWidth="2.2" strokeLinecap="round"><path d="M18 6L6 18M6 6l12 12" /></svg>
);
const Arw = ({ dir = "right", c = "#ccc", s = 20 }) => (
  <svg viewBox="0 0 24 24" width={s} height={s} fill="none" stroke={c} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"
    style={{ transform: dir === "down" ? "rotate(90deg)" : "none" }}><path d="M5 12h14M12 5l7 7-7 7" /></svg>
);

/* ───────── ② 共感チェックリスト ───────── */
const Checks = () => {
  const items = [
    { t: "営業しているのに、商談が増えない", d: "送信数は増えているのに、パイプラインの中身は去年とほぼ同じ。" },
    { t: "営業代行に依頼したが、成果が見えない", d: "何件動いたかは報告されるが、なぜ効かなかったのかが分からない。" },
    { t: "広告費だけが増えていく", d: "CPAは改善提案されるが、そもそも狙う市場が正しいのか判断できない。" },
    { t: "どこを改善すればいいか分からない", d: "業界か、規模か、文面か、タイミングか。仮説の当たりがつかない。" },
    { t: "営業が担当者の経験に依存している", d: "できる人のやり方が言語化されず、退職と同時に消えていく。" },
    { t: "毎年、同じ営業を繰り返している", d: "市場も競合も変わっているのに、営業のやり方だけが変わっていない。" },
  ];
  return (
    <div className="checks">
      {items.map((it, i) => (
        <div className="check" key={i}>
          <span className="check-box"><Chk s={13} c="#fff" /></span>
          <div>
            <p className="check-t">{it.t}</p>
            <p className="check-d">{it.d}</p>
          </div>
        </div>
      ))}
    </div>
  );
};

/* ───────── ③ ループ比較 ───────── */
const Loops = () => {
  const wrap = { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 22 };
  const card = (dim) => ({
    border: "1px solid " + (dim ? "#ececec" : "#111"),
    borderRadius: 18, padding: "34px 30px 30px", background: dim ? "#fafafa" : "#fff",
    boxShadow: dim ? "none" : "0 20px 50px -24px rgba(17,17,17,.22)",
  });
  const nodeS = (dim, strong) => ({
    padding: "11px 16px", borderRadius: 8, fontSize: 13.5, fontWeight: strong ? 600 : 500,
    background: dim ? "#fff" : strong ? "#111" : "#fff",
    color: dim ? "#999" : strong ? "#fff" : "#111",
    border: "1px solid " + (dim ? "#e8e8e8" : strong ? "#111" : "#ddd"),
    textAlign: "center",
  });
  const Row = ({ children }) => <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 7 }}>{children}</div>;

  return (
    <div style={wrap} className="loops-grid">
      {/* 多くの会社 */}
      <div style={card(true)}>
        <div style={{ fontSize: 11.5, letterSpacing: ".14em", color: "#aaa", fontWeight: 600, marginBottom: 6 }}>ほとんどの会社</div>
        <h3 style={{ fontSize: 21, fontWeight: 700, margin: "0 0 8px", color: "#888", letterSpacing: "-.01em" }}>実行して、終わる。</h3>
        <p style={{ fontSize: 13, color: "#999", lineHeight: 1.75, margin: "0 0 26px" }}>結果は残るが、次の営業には反映されない。だから来月も同じ精度で送ることになる。</p>
        <Row>
          <div style={nodeS(true)}>営業する</div>
          <Arw dir="down" c="#ddd" s={17} />
          <div style={nodeS(true)}>反応が出る</div>
          <Arw dir="down" c="#ddd" s={17} />
          <div style={{ ...nodeS(true), borderStyle: "dashed", color: "#bbb" }}>そのまま</div>
          <Arw dir="down" c="#ddd" s={17} />
          <div style={nodeS(true)}>また営業する</div>
        </Row>
        <div style={{ marginTop: 24, padding: "12px 14px", background: "#fff", border: "1px dashed #ddd", borderRadius: 8, fontSize: 12.5, color: "#999", textAlign: "center" }}>
          反応率は、何ヶ月経っても横ばい
        </div>
      </div>

      {/* 成果が出る会社 */}
      <div style={card(false)}>
        <div style={{ fontSize: 11.5, letterSpacing: ".14em", color: "#111", fontWeight: 600, marginBottom: 6 }}>成果が出る会社</div>
        <h3 style={{ fontSize: 21, fontWeight: 700, margin: "0 0 8px", letterSpacing: "-.01em" }}>実行して、学んで、変える。</h3>
        <p style={{ fontSize: 13, color: "#666", lineHeight: 1.75, margin: "0 0 26px" }}>1回の営業が、次の営業の精度を上げる材料になる。回すたびに勝ち筋が濃くなる。</p>
        <Row>
          <div style={nodeS(false)}>営業する</div>
          <Arw dir="down" c="#111" s={17} />
          <div style={nodeS(false)}>反応が出る</div>
          <Arw dir="down" c="#111" s={17} />
          <div style={nodeS(false, true)}>分析する</div>
          <Arw dir="down" c="#111" s={17} />
          <div style={nodeS(false, true)}>改善する</div>
          <Arw dir="down" c="#111" s={17} />
          <div style={nodeS(false)}>また営業する</div>
        </Row>
        <div style={{ marginTop: 24, padding: "12px 14px", background: "#111", borderRadius: 8, fontSize: 12.5, color: "#fff", textAlign: "center", fontWeight: 500 }}>
          回すたびに、勝ち筋が溜まっていく
        </div>
      </div>
      <style>{`@media (max-width:820px){.loops-grid{grid-template-columns:1fr!important}}`}</style>
    </div>
  );
};

/* ───────── ④ Sygnalの改善ループ（ダーク） ───────── */
const LoopBig = () => {
  const steps = [
    { n: "01", t: "企業データベース", d: "業種・地域・規模で市場を切り出す", who: "PLATFORM" },
    { n: "02", t: "営業実行", d: "フォーム送信を自動で回す", who: "PLATFORM" },
    { n: "03", t: "反応データ蓄積", d: "全件記録し、クリックは即時通知", who: "PLATFORM" },
    { n: "04", t: "AI分析", d: "効いた市場と訴求を洗い出す", who: "AI" },
    { n: "05", t: "PMレビュー", d: "打ち手の優先順位を決める", who: "PM" },
    { n: "06", t: "改善して再実行", d: "次の仮説で、もう一度回す", who: "AI + PM" },
  ];
  const tone = (w) => w === "AI" ? { bg: "rgba(59,130,246,.12)", fg: "#7dabf8", bd: "rgba(59,130,246,.3)" }
    : w === "PM" ? { bg: "rgba(245,158,11,.12)", fg: "#f0b959", bd: "rgba(245,158,11,.3)" }
    : w === "AI + PM" ? { bg: "rgba(255,255,255,.1)", fg: "#fff", bd: "rgba(255,255,255,.25)" }
    : { bg: "rgba(255,255,255,.05)", fg: "#888", bd: "rgba(255,255,255,.12)" };

  return (
    <div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 0, border: "1px solid #1e1e1e", borderRadius: 18, overflow: "hidden" }} className="loopbig-grid">
        {steps.map((s, i) => {
          const t = tone(s.who);
          return (
            <div key={s.n} style={{
              padding: "34px 28px 30px", position: "relative",
              borderRight: (i + 1) % 3 === 0 ? "none" : "1px solid #1e1e1e",
              borderBottom: i < 3 ? "1px solid #1e1e1e" : "none",
              background: s.who === "AI + PM" ? "rgba(255,255,255,.03)" : "transparent",
            }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 18 }}>
                <span style={{ fontFamily: "var(--font-en)", fontSize: 12, color: "#555", fontWeight: 600, letterSpacing: ".08em" }}>{s.n}</span>
                <span style={{ fontSize: 10, letterSpacing: ".1em", fontWeight: 600, padding: "3px 9px", borderRadius: 999, background: t.bg, color: t.fg, border: "1px solid " + t.bd, fontFamily: "var(--font-en)" }}>{s.who}</span>
              </div>
              <h3 style={{ fontSize: 18.5, fontWeight: 600, margin: "0 0 9px", color: "#fff", letterSpacing: "-.01em" }}>{s.t}</h3>
              <p style={{ fontSize: 13, color: "#8a8a8a", lineHeight: 1.75, margin: 0 }}>{s.d}</p>
            </div>
          );
        })}
      </div>
      <div style={{ marginTop: 22, display: "flex", alignItems: "center", justifyContent: "center", gap: 12, padding: "16px 22px", border: "1px solid #1e1e1e", borderRadius: 999, fontSize: 13.5, color: "#aaa" }}>
        <span style={{ color: "#fff", fontWeight: 600 }}>06 → 01</span>
        <span>このループが毎月回り続けることが、Sygnalが提供している価値そのものです。</span>
      </div>
      <style>{`@media (max-width:900px){.loopbig-grid{grid-template-columns:1fr!important}.loopbig-grid>div{border-right:none!important;border-bottom:1px solid #1e1e1e!important}.loopbig-grid>div:last-child{border-bottom:none!important}}`}</style>
    </div>
  );
};

/* ───────── ⑤ AI × PM 比較 ───────── */
const AIPM = () => {
  const box = (dim) => ({
    border: "1px solid " + (dim ? "#ececec" : "#111"), borderRadius: 18,
    padding: "32px 30px", background: dim ? "#fafafa" : "#fff",
    boxShadow: dim ? "none" : "0 20px 50px -24px rgba(17,17,17,.2)",
  });
  const step = (label, sub, dim, strong) => (
    <div style={{ display: "flex", gap: 13, alignItems: "flex-start" }}>
      <span style={{
        width: 26, height: 26, borderRadius: 99, flexShrink: 0, marginTop: 1,
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        background: dim ? "#eee" : strong ? "#111" : "#fff", border: "1px solid " + (dim ? "#e0e0e0" : "#111"),
      }}>
        {dim ? <Cross s={12} c="#bbb" /> : <Chk s={12} c={strong ? "#fff" : "#111"} />}
      </span>
      <div>
        <div style={{ fontSize: 14.5, fontWeight: 600, color: dim ? "#999" : "#111", marginBottom: 3 }}>{label}</div>
        <div style={{ fontSize: 12.5, color: dim ? "#aaa" : "#666", lineHeight: 1.7 }}>{sub}</div>
      </div>
    </div>
  );

  return (
    <>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 22 }} className="aipm-grid">
        <div style={box(true)}>
          <div style={{ fontSize: 11.5, letterSpacing: ".14em", color: "#aaa", fontWeight: 600, marginBottom: 8 }}>AI分析だけの場合</div>
          <h3 style={{ fontSize: 20, fontWeight: 700, margin: "0 0 22px", color: "#888", letterSpacing: "-.01em" }}>レポートは出る。<br />でも、動かない。</h3>
          <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
            {step("分析結果は出る", "「建設業の反応が低い」という事実が分かる", false, false)}
            {step("優先順位がつかない", "示された10個の改善案のうち、どれから手をつけるか決まらない", true)}
            {step("実行されない", "結論が出ないまま、来月も同じ条件で送信が続く", true)}
          </div>
        </div>
        <div style={box(false)}>
          <div style={{ fontSize: 11.5, letterSpacing: ".14em", color: "#111", fontWeight: 600, marginBottom: 8 }}>Sygnal（AI × 専任PM）</div>
          <h3 style={{ fontSize: 20, fontWeight: 700, margin: "0 0 22px", letterSpacing: "-.01em" }}>判断まで、<br />持っていきます。</h3>
          <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
            {step("AIが分析する", "効いた市場・効いた訴求・効いた時間帯をデータから抽出", false, false)}
            {step("PMが判断する", "月次レビューで「来月まずこれをやる」を1〜3個に絞り込む", false, true)}
            {step("そのまま実行する", "抽出条件・文面・送信設定に反映し、翌月の結果でまた検証する", false, true)}
          </div>
        </div>
      </div>

      {/* PM role detail */}
      <div style={{ marginTop: 22, border: "1px solid #ececec", borderRadius: 18, overflow: "hidden" }}>
        <div style={{ padding: "22px 28px", borderBottom: "1px solid #f0f0f0", background: "#fafafa" }}>
          <div style={{ fontSize: 15, fontWeight: 600 }}>専任PMが、毎月やること</div>
          <div style={{ fontSize: 12.5, color: "#777", marginTop: 4 }}>「困ったら聞ける担当者」ではなく、営業改善の責任を持つパートナーとして入ります。</div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 0 }} className="pmrole-grid">
          {[
            { t: "初期の市場設計", d: "どの業種・規模から検証を始めるべきか、仮説を一緒に立てます。" },
            { t: "月次レビュー", d: "送信結果とAI分析を読み解き、勝ち筋と捨てる市場を判断します。" },
            { t: "文面と訴求の改善", d: "反応の出た訴求パターンを次の文面へ落とし込みます。" },
            { t: "次の打ち手の提案", d: "必要ならフォーム以外の接点も含めて、次の一手を提案します。" },
          ].map((x, i) => (
            <div key={i} style={{ padding: "24px 24px", borderRight: i < 3 ? "1px solid #f0f0f0" : "none" }}>
              <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 8 }}>{x.t}</div>
              <div style={{ fontSize: 12.5, color: "#777", lineHeight: 1.75 }}>{x.d}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`@media (max-width:820px){.aipm-grid{grid-template-columns:1fr!important}.pmrole-grid{grid-template-columns:1fr!important}.pmrole-grid>div{border-right:none!important;border-bottom:1px solid #f0f0f0}.pmrole-grid>div:last-child{border-bottom:none}}`}</style>
    </>
  );
};

/* ───────── ⑥ 改善履歴タイムライン ───────── */
const Timeline = () => {
  const months = [
    { m: "1ヶ月目", act: "製造業・関東から検証開始", learn: "まずは母数を確保し、反応の出る場所を探る", rate: 0.4, note: "ベースライン" },
    { m: "2ヶ月目", act: "文面の訴求を「数字の実証」へ変更", learn: "抽象的な価値訴求より、導入実績の数字が反応する", rate: 0.9, note: "+0.5pt" },
    { m: "3ヶ月目", act: "反応の低い業種を外し、医療機器へ集中", learn: "業種で反応が5倍違うことがデータで判明", rate: 2.1, note: "+1.2pt" },
    { m: "4ヶ月目", act: "送信を火・水の午前帯に集中", learn: "クリックの6割が特定の曜日・時間帯に集中していた", rate: 2.8, note: "+0.7pt" },
    { m: "5ヶ月目", act: "通知が来たクリック企業へ即電話", learn: "興味シグナルが出た企業だけに人的リソースを寄せる", rate: 3.4, note: "商談化", peak: true },
  ];
  const max = 3.6;
  return (
    <div style={{ border: "1px solid #ececec", borderRadius: 18, background: "#fff", overflow: "hidden" }}>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(5,1fr)", gap: 0 }} className="tl-grid">
        {months.map((x, i) => (
          <div key={i} style={{ padding: "30px 24px 26px", borderRight: i < 4 ? "1px solid #f0f0f0" : "none", background: x.peak ? "#fafafa" : "#fff", position: "relative" }}>
            <div style={{ fontSize: 11.5, color: "#999", fontWeight: 600, letterSpacing: ".06em", marginBottom: 16 }}>{x.m}</div>

            {/* bar */}
            <div style={{ height: 108, display: "flex", alignItems: "flex-end", marginBottom: 10 }}>
              <div style={{ width: "100%", position: "relative" }}>
                <div style={{
                  height: (x.rate / max) * 108, background: x.peak ? "#111" : "linear-gradient(180deg,#333,#111)",
                  borderRadius: "4px 4px 0 0", position: "relative",
                }}>
                  <span style={{
                    position: "absolute", top: -22, left: 0, fontSize: 15, fontWeight: 700,
                    fontFamily: "var(--font-en)", letterSpacing: "-.01em",
                  }}>{x.rate}%</span>
                </div>
              </div>
            </div>
            <div style={{ fontSize: 10.5, color: x.peak ? "#16a34a" : "#999", fontWeight: 600, marginBottom: 16, letterSpacing: ".02em" }}>{x.note}</div>

            <div style={{ fontSize: 13, fontWeight: 600, lineHeight: 1.6, marginBottom: 8 }}>{x.act}</div>
            <div style={{ fontSize: 12, color: "#888", lineHeight: 1.75 }}>{x.learn}</div>
          </div>
        ))}
      </div>
      <div style={{ padding: "16px 26px", borderTop: "1px solid #f0f0f0", background: "#fafafa", fontSize: 12.5, color: "#777", display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap" }}>
        <span style={{ fontWeight: 600, color: "#111" }}>縦軸：クリック率</span>
        <span>·</span>
        <span>営業量は5ヶ月間ほぼ一定。変えたのは「どこに・なにを・いつ送るか」だけです。</span>
      </div>
      <style>{`@media (max-width:900px){.tl-grid{grid-template-columns:1fr!important}.tl-grid>div{border-right:none!important;border-bottom:1px solid #f0f0f0}.tl-grid>div:last-child{border-bottom:none}}`}</style>
    </div>
  );
};

/* ───────── ⑦ 画面（証拠） ───────── */
const Feature = ({ num, eyebrow, title, lead, mock }) => (
  <div className="feature">
    <div className="feature-text">
      <div className="feature-eyebrow"><span className="num">{num}</span><span>{eyebrow}</span></div>
      <h3>{title}</h3>
      <p>{lead}</p>
    </div>
    <div style={{ width: "100%", maxWidth: 1240 }}>
      <div className="feature-mock">{mock}</div>
      <div className="mock-hint">
        <svg viewBox="0 0 24 24"><path d="M8 12h8M8 12l3-3M8 12l3 3M16 12l-3-3M16 12l-3 3" /></svg>
        <span>横にスワイプすると画面全体を確認できます</span>
      </div>
    </div>
  </div>
);

const Features = () => (
  <>
    <Feature
      num="01" eyebrow="WHERE — どこに送るか"
      title="市場を、条件で切り出す。"
      lead="日々更新される法人データベースを標準搭載。地域・業種・従業員数・売上高・利益・資本金・設立年・上場区分・決算月・連絡先の有無など、多数の条件を組み合わせて市場を切り出せます。リストは無制限に作成できるので、検証したい仮説の数だけ市場を用意して比べられます。"
      mock={<DatabaseMock />}
    />
    <Feature
      num="02" eyebrow="WHAT — なにを送るか"
      title="訴求を、変えて試せる。"
      lead="送信先に合わせた文面をAIが作成します。フォームの文字数制限に応じて2パターンを自動で出し分け、トラッキングURLも文面に組み込まれます。訴求を変えた文面を市場ごとに試せるので、「なにが刺さったか」が比較できる状態になります。処理はクラウド上で動くため、ブラウザを閉じても生成と送信は止まりません。"
      mock={<AIMessageMock />}
    />
    <Feature
      num="03" eyebrow="WHY — なにが効いたか"
      title="勝ち筋が、数字で出る。"
      lead="業種・規模・エリア別に有望度スコアを算出し、伸ばす／維持／絞る／テストを提示。訴求パターンごとのクリック率、そして「今週やるべき打ち手」まで優先度付きで並びます。PMの月次レビューはこの画面を起点に行われます。"
      mock={<InsightsMock />}
    />
    <Feature
      num="04" eyebrow="NEXT — 次にどうするか"
      title="反応した会社に、寄せる。"
      lead="送信した文面のリンクをクリックした企業が、リアルタイムでパイプラインに上がってきます。Slack・Chatwork・メールへ即時通知されるので、興味を示した企業へすぐ動けます。営業先を勘で選ぶ必要がなくなり、限られた人的リソースを集中させられます。"
      mock={<SalesMock />}
    />
  </>
);

/* ───────── ⑧ 比較表 ───────── */
const Compare = () => {
  const cols = ["営業代行", "CRM / SFA", "営業ツール", "Sygnal"];
  const rows = [
    { l: "営業の実行", v: ["○", "×", "○", "○"] },
    { l: "結果の記録・可視化", v: ["△", "○", "△", "○"] },
    { l: "効いた市場・訴求の分析", v: ["△", "×", "△", "○"] },
    { l: "次の打ち手の提案", v: ["×", "×", "×", "○"] },
    { l: "専任PMによる改善伴走", v: ["△", "×", "×", "○"] },
    { l: "改善サイクルが回る", v: ["×", "×", "△", "◎"] },
    { l: "ノウハウが社内に残る", v: ["×", "△", "△", "○"] },
  ];
  const mk = (s, isSy) => {
    if (s === "◎") return <span style={{ color: isSy ? "#fff" : "#111", fontWeight: 700, fontSize: 16 }}>◎</span>;
    if (s === "○") return <span style={{ color: isSy ? "#fff" : "#ddd", fontWeight: 600, fontSize: 15 }}>○</span>;
    if (s === "△") return <span style={{ color: isSy ? "#ccc" : "#b5b5b5", fontSize: 14 }}>△</span>;
    return <span style={{ color: "#8a8a8a", fontSize: 14 }}>×</span>;
  };
  return (
    <div style={{ border: "1px solid #1e1e1e", borderRadius: 18, overflow: "hidden" }}>
      <div className="cmp-scroll" style={{ overflowX: "auto" }}>
      <table style={{ width: "100%", minWidth: 620, borderCollapse: "collapse", fontSize: 13.5 }}>
        <thead>
          <tr>
            <th style={{ textAlign: "left", padding: "20px 26px", fontWeight: 500, color: "#777", fontSize: 12, letterSpacing: ".06em", borderBottom: "1px solid #1e1e1e", borderRight: "1px solid #1e1e1e" }}></th>
            {cols.map((c, i) => {
              const isSy = i === 3;
              return (
                <th key={c} style={{
                  padding: "20px 18px", fontSize: 13, fontWeight: isSy ? 700 : 500,
                  color: isSy ? "#fff" : "#888", borderBottom: "1px solid #1e1e1e",
                  borderRight: i < 3 ? "1px solid #1e1e1e" : "none",
                  background: isSy ? "rgba(255,255,255,.06)" : "transparent", textAlign: "center", whiteSpace: "nowrap",
                }}>{c}</th>
              );
            })}
          </tr>
        </thead>
        <tbody>
          {rows.map((r, ri) => (
            <tr key={ri}>
              <td style={{ padding: "16px 26px", color: "#ddd", borderBottom: ri < rows.length - 1 ? "1px solid #161616" : "none", borderRight: "1px solid #1e1e1e", fontSize: 13.5 }}>{r.l}</td>
              {r.v.map((v, vi) => {
                const isSy = vi === 3;
                return (
                  <td key={vi} style={{
                    padding: "16px 18px", textAlign: "center",
                    borderBottom: ri < rows.length - 1 ? "1px solid #161616" : "none",
                    borderRight: vi < 3 ? "1px solid #1e1e1e" : "none",
                    background: isSy ? "rgba(255,255,255,.06)" : "transparent",
                  }}>{mk(v, isSy)}</td>
                );
              })}
            </tr>
          ))}
        </tbody>
      </table>
      </div>
    </div>
  );
};

/* ───────── ⑨ 導入フロー ───────── */
const Flow = () => {
  const steps = [
    { n: "01", t: "営業改善ミーティング", d: "60分オンライン。いまの営業と課題を伺い、どこに改善余地があるかを整理します。", when: "Day 0" },
    { n: "02", t: "市場仮説の設計", d: "PMと一緒に、最初に検証する市場と訴求の仮説を決めます。", when: "〜1週" },
    { n: "03", t: "初期設定・送信開始", d: "送信元情報とリストを整え、最初の案件が動き出します。", when: "〜2週" },
    { n: "04", t: "初回レビュー", d: "1ヶ月分の結果をAI分析とPMで読み解き、次の打ち手を決めます。", when: "1ヶ月" },
    { n: "05", t: "改善が始まる", d: "ここからが本番。毎月レビューし、勝ち筋を積み上げていきます。", when: "以降ずっと", hl: true },
  ];
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(5,1fr)", gap: 0, border: "1px solid #ececec", borderRadius: 18, overflow: "hidden" }} className="flow-grid">
      {steps.map((s, i) => (
        <div key={s.n} style={{
          padding: "30px 24px 28px", borderRight: i < 4 ? "1px solid #f0f0f0" : "none",
          background: s.hl ? "#111" : "#fff", color: s.hl ? "#fff" : "#111",
        }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 18 }}>
            <span style={{ fontFamily: "var(--font-en)", fontSize: 11.5, fontWeight: 600, color: s.hl ? "#888" : "#bbb", letterSpacing: ".08em" }}>{s.n}</span>
            <span style={{ fontSize: 10.5, padding: "3px 8px", borderRadius: 999, background: s.hl ? "rgba(255,255,255,.12)" : "#f5f5f5", color: s.hl ? "#ddd" : "#888", fontWeight: 500 }}>{s.when}</span>
          </div>
          <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 9, lineHeight: 1.45, letterSpacing: "-.01em" }}>{s.t}</div>
          <div style={{ fontSize: 12.5, color: s.hl ? "#aaa" : "#777", lineHeight: 1.75 }}>{s.d}</div>
        </div>
      ))}
      <style>{`@media (max-width:900px){.flow-grid{grid-template-columns:1fr!important}.flow-grid>div{border-right:none!important;border-bottom:1px solid #f0f0f0}.flow-grid>div:last-child{border-bottom:none}}`}</style>
    </div>
  );
};

/* ───────── ⑩ 料金 ───────── */
const Pricing = () => (
  <div style={{ display: "grid", gridTemplateColumns: "1.35fr 1fr", gap: 22, alignItems: "stretch" }} className="price-grid">
    {/* main */}
    <div style={{ background: "#0a0a0a", color: "#fff", borderRadius: 22, padding: "44px 42px", display: "flex", flexDirection: "column", position: "relative", overflow: "hidden" }}>
      <span style={{ alignSelf: "flex-start", display: "inline-flex", alignItems: "center", gap: 7, fontSize: 10.5, letterSpacing: ".16em", padding: "6px 13px", borderRadius: 999, background: "rgba(255,255,255,.1)", border: "1px solid rgba(255,255,255,.16)", fontWeight: 600, marginBottom: 26, fontFamily: "var(--font-en)" }}>
        <span style={{ width: 6, height: 6, borderRadius: 99, background: "#fff" }} />EARLY ACCESS
      </span>
      <h3 style={{ fontSize: 28, fontWeight: 700, margin: "0 0 8px", letterSpacing: "-.02em" }}>スタンダードプラン</h3>
      <p style={{ fontSize: 13.5, color: "#999", margin: "0 0 30px", lineHeight: 1.75 }}>
        正式リリース時に提供予定の内容を、先行利用枠として特別価格でご提供します。
      </p>

      <div style={{ display: "flex", alignItems: "baseline", gap: 9, marginBottom: 6 }}>
        <span style={{ fontSize: 58, fontWeight: 700, letterSpacing: "-.035em", fontFamily: "var(--font-en)" }}>¥50,000</span>
        <span style={{ fontSize: 17, color: "#999", fontWeight: 500 }}>/ 月</span>
      </div>
      <p style={{ fontSize: 12.5, color: "#777", margin: "0 0 24px" }}>税別 · 初期費用なし</p>

      <div style={{ display: "inline-flex", alignItems: "center", gap: 12, padding: "11px 17px", background: "rgba(255,255,255,.06)", borderRadius: 10, fontSize: 12.5, color: "#bbb", marginBottom: 30, border: "1px solid rgba(255,255,255,.08)", flexWrap: "wrap" }}>
        <span>正式リリース時の予定価格 <s style={{ color: "#777" }}>月額 ¥70,000</s></span>
        <span style={{ color: "#fff", fontWeight: 600 }}>→ 先行利用 ¥50,000</span>
      </div>

      <ul style={{ margin: "0 0 32px", padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 14 }}>
        {[
          ["専任PMによる営業改善伴走", true],
          ["月次レビュー（市場・訴求・打ち手の見直し）", true],
          ["日々更新される法人データベースへの全件アクセス", false],
          ["AI文面生成 + 自動フォーム送信 + 結果の全件記録", false],
          ["AI分析（攻めるべき市場 / 刺さる訴求 / 推奨アクション）", false],
          ["営業パイプライン管理 + クリックトラッキング", false],
          ["月間送信数 150,000件 / 並行案件 3件", false],
          ["送信リストの作成は無制限", false],
          ["クリック企業をSlack・Chatwork・メールへリアルタイム通知", false],
        ].map(([t, hl], i) => (
          <li key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start", fontSize: 14, color: hl ? "#fff" : "#ccc", lineHeight: 1.65 }}>
            <span style={{ marginTop: 2, flexShrink: 0 }}><Chk s={17} c="#fff" /></span>
            <span style={{ fontWeight: hl ? 600 : 400 }}>{t}</span>
          </li>
        ))}
      </ul>
      <a href="https://timerex.net/s/saku/6418f27a" target="_blank" rel="noopener"
        style={{ marginTop: "auto", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10, background: "#fff", color: "#111", padding: "17px 28px", borderRadius: 999, fontWeight: 600, fontSize: 15 }}>
        無料で営業改善ミーティングを予約 <span>→</span>
      </a>
    </div>

    {/* side */}
    <div style={{ background: "#fff", border: "1px solid #ececec", borderRadius: 22, padding: "40px 36px", display: "flex", flexDirection: "column", gap: 22 }}>
      {[
        { h: "なぜ「先行利用」なのか", p: "Sygnalはリリース直前の最終調整段階にあります。先行利用枠は、正式版で提供予定の内容をいち早く使っていただきながら、料金を正式価格より抑えてご利用いただける枠です。" },
        { h: "伴走支援に含まれるもの", p: "専任PMが市場仮説の設計から月次レビュー、文面と訴求の改善提案、次の打ち手の設計まで担当します。ツールを渡して終わりではなく、改善が回る状態まで一緒に作ります。" },
        { h: "営業代行との違い", p: "営業代行は実行を代わりに行うサービスです。Sygnalは実行結果から学び、次の判断材料をつくるためのプラットフォームです。ノウハウが自社に残る点が最大の違いです。" },
        { h: "契約条件について", p: "利用期間や契約形態は、ご状況に合わせて個別にご提案します。正式リリース時には先行利用ユーザー様向けの優遇も予定しています。詳細は営業改善ミーティングでご案内します。" },
      ].map((x, i, a) => (
        <div key={i} style={{ paddingBottom: i < a.length - 1 ? 22 : 0, borderBottom: i < a.length - 1 ? "1px dashed #e5e5e5" : "none" }}>
          <h4 style={{ fontSize: 14.5, fontWeight: 600, margin: "0 0 7px" }}>{x.h}</h4>
          <p style={{ fontSize: 13, color: "#666", lineHeight: 1.8, margin: 0 }}>{x.p}</p>
        </div>
      ))}
    </div>
    <style>{`@media (max-width:1000px){.price-grid{grid-template-columns:1fr!important}}`}</style>
  </div>
);

/* ───────── ⑪ FAQ ───────── */
const FAQ = () => {
  const items = [
    { q: "営業代行とは何が違いますか？", a: "営業代行は「実行」を代わりに行うサービスです。Sygnalは実行しながら、その結果から学び、次にどこを変えるべきかを判断できる状態をつくるプラットフォームです。実行はSygnalが自動化し、判断のための材料をAIが分析し、優先順位を専任PMが一緒に決めます。結果として、営業の勝ち筋というノウハウが自社に残ります。" },
    { q: "専任PMは具体的に何をしてくれますか？", a: "導入時は、最初に検証すべき市場と訴求の仮説設計をご一緒します。運用開始後は月次でレビューを行い、AI分析の結果を読み解いたうえで「来月まずこれをやる」という打ち手を1〜3個に絞ってご提案します。文面の訴求改善、抽出条件の見直し、反応企業への次のアクションまで含めて伴走します。" },
    { q: "営業リストは自社で用意する必要がありますか？", a: "いいえ。日々更新される法人データベースを標準でご利用いただけます。地域・市区町村・業種・従業員数・売上高・利益・資本金・設立年・上場区分・決算月・連絡先の有無など、多数の条件を組み合わせた抽出が可能です。自社で保有しているCSVリストもインポートして、同じ送信・分析フローに乗せられます。リストの作成数に上限はありません。" },
    { q: "AI分析は、ただの集計レポートですか？", a: "いいえ。「攻めるべき市場（業種・規模・エリア別の有望度スコアと、伸ばす／維持／絞る／テストの推奨）」「刺さる訴求（訴求パターンごとのクリック率）」「今週の推奨アクション（優先度付き）」の3ブロックで、次にとるべき打ち手を具体的に提示します。数字を並べるのではなく、判断につながる形で出すことを目的にしています。" },
    { q: "文面はテンプレート送信になりませんか？", a: "送信先に合わせた文面をAIが作成します。フォームの文字数制限に応じて500文字未満用と500文字以上用の2パターンを同時生成し、送信先に応じて自動で出し分けます。訴求を変えた文面を市場ごとに試せるため、どの切り口が反応するかを比較できます。もちろん手動入力モードもあり、ご自身で作成した文面をお使いいただけます。" },
    { q: "送信の曜日や時間はコントロールできますか？", a: "はい。案件ごとに稼働曜日・稼働時間帯・1日の上限送信件数・ドメイン単位のレート制限を設定できます。土日や深夜の自動停止、業務時間内への集中送信が可能です。AI分析で反応の良い時間帯が分かったら、そこに送信を寄せるという改善もできます。" },
    { q: "成果が出るまでどのくらいかかりますか？", a: "最初の案件は導入から2週間程度で動き始めます。ただしSygnalの価値は初月の数字ではなく、改善が積み上がることにあります。1ヶ月目で母数を確保し、2ヶ月目以降にレビューと改善を回していく中で反応率が変わっていく、という進み方が一般的です。" },
    { q: "反応があったらどう分かりますか？", a: "送信した文面内のリンクがクリックされると、リアルタイムで検知して Slack・Chatwork・メールへ通知します。通知を受けてから電話や個別メールで動けるので、興味を示したタイミングを逃しません。なお、フォーム送信に対する先方からのメール返信そのものは検知対象外です。" },
    { q: "リストはいくつまで作れますか？", a: "送信リストの作成数に上限はありません。業種別・規模別・訴求別に細かくリストを分けて、どのセグメントが反応するかを並行して検証できます。" },
    { q: "処理中はブラウザを開いたままにする必要がありますか？", a: "いいえ。クラウド上で処理が動くため、ブラウザを閉じてもAIの文面生成や送信処理はそのまま継続します。作業を止めずに他の業務へ移っていただけます。" },
    { q: "セキュリティはどうなっていますか？", a: "AWS東京リージョン（ECS Fargate / RDS PostgreSQL / S3）で運用しています。データはテナント単位で分離管理され、認証は AWS Cognito（JWT）で行っています。詳細は営業改善ミーティングでご案内します。" },
  ];
  return (
    <>
      {items.map((it, i) => (
        <details key={i}>
          <summary>
            <span>{it.q}</span>
            <svg className="q-mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M12 5v14M5 12h14" /></svg>
          </summary>
          <div className="a">{it.a}</div>
        </details>
      ))}
    </>
  );
};

/* ───────── Mount ───────── */
const mount = (id, Cmp) => { const el = document.getElementById(id); if (el) ReactDOM.createRoot(el).render(<Cmp />); };
mount("checks-slot", Checks);
mount("loops-slot", Loops);
mount("loop-big-slot", LoopBig);
mount("aipm-slot", AIPM);
mount("timeline-slot", Timeline);
mount("features-slot", Features);
mount("compare-slot", Compare);
mount("flow-slot", Flow);
mount("pricing-slot", Pricing);
mount("faq-slot", FAQ);