/* ============================================================================
   CHECKPOINT 4 — PROOF
   Four-pillars band · The Platform Behind Your Platform · AI Maturity Curve ·
   Platform Discovery Engine. All data-driven; ≤12 platform names ever visible.
   ============================================================================ */
const { useState: useStatePf, useEffect: useEffectPf, useRef: useRefPf } = React;

/* ---- Four pillars + long-term arc ---- */
function FourPillars() {
  const pillars = [
    { t: "SaaS Factory", d: "One orchestrator, every vertical. New industries stand up in weeks because the shared engine is already operating across 200+ builds." },
    { t: "AI Venture Studio", d: "We co-found and co-operate AI ventures with operators. Equity + revenue share, not just SaaS fees." },
    { t: "Private-Label Platforms", d: "Ship under your brand on our engine. We stay invisible." },
    { t: "Industry Intelligence", d: "We start with how your industry makes money. AI without industry intelligence is a demo. Industry intelligence turns AI into a business." },
  ];
  const arc = [
    ["2026", "AI consultancy"],
    ["2027", "Industry transformation company"],
    ["2028", "Private-label platform factory"],
    ["2030", "AI holding company operating dozens of vertical platforms"],
  ];
  return React.createElement("section", { className: "section pillars", id: "pillars", "data-screen-label": "Four Pillars" },
    React.createElement("div", { className: "section-head" },
      React.createElement("span", { className: "kicker" }, "What Talya Smart is"),
      React.createElement("h2", { className: "section-title" }, "A SaaS factory, a venture studio, an intelligence house."),
      React.createElement("p", { className: "section-lede" }, "200+ production builds. 2 years. 12 industry verticals. First platform live in 8 weeks.")
    ),
    React.createElement("div", { className: "pillar-grid" },
      pillars.map((p, i) =>
        React.createElement(Reveal, { key: p.t, delay: i * 70, className: "pillar-card" },
          React.createElement("span", { className: "pillar-num mono" }, "0" + (i + 1)),
          React.createElement("h3", { className: "pillar-title" }, p.t),
          React.createElement("p", { className: "pillar-desc" }, p.d)
        )
      )
    ),
    React.createElement("div", { className: "arc" },
      React.createElement("span", { className: "arc-label mono" }, "Where this is going"),
      React.createElement("ol", { className: "arc-track" },
        arc.map(([y, t], i) =>
          React.createElement(Reveal, { as: "li", key: y, delay: i * 90, className: "arc-step" },
            React.createElement("span", { className: "arc-year mono" }, y),
            React.createElement("span", { className: "arc-what" }, t)
          )
        )
      )
    )
  );
}

/* ---- The Platform Behind Your Platform (private-label brand swap) ---- */
function PlatformBehind({ lab, info }) {
  const brands = ["Your Marketplace", "A Regional Carrier", "A National 3PL", "A Specialty Retailer", "You"];
  const [bi, setBi] = useStatePf(0);
  useEffectPf(() => {
    if (window.prefersReduced()) return;
    const id = setInterval(() => setBi((v) => (v + 1) % brands.length), 1900);
    return () => clearInterval(id);
  }, []);
  return React.createElement("section", { className: "section behind", id: "behind", "data-screen-label": "Platform Behind" },
    React.createElement("div", { className: "section-head" },
      React.createElement("span", { className: "kicker" }, "Private label"),
      React.createElement("h2", { className: "section-title" }, "The platform behind your platform"),
      React.createElement("p", { className: "section-lede" }, "Ships under your brand. Runs on our engine. We stay invisible.")
    ),
    React.createElement("div", { className: "behind-grid" },
      React.createElement("div", { className: "behind-col engine" },
        React.createElement("span", { className: "behind-tag mono" }, "Our engine"),
        React.createElement("div", { className: "behind-engine-mark" }, React.createElement(Logo, { size: 30, variant: "lockup" })),
        React.createElement("ul", { className: "behind-list" },
          ["AI orchestrator + vertical modules", "Identity, deploy, compliance plane", "200+ builds of operating leverage"].map((x) =>
            React.createElement("li", { key: x }, React.createElement("span", { className: "behind-check" }, "✓"), x))
        )
      ),
      React.createElement("div", { className: "behind-swap" }, React.createElement("span", { className: "behind-swap-arrow" }, "→"), React.createElement("span", { className: "behind-swap-label mono" }, "ships as")),
      React.createElement("div", { className: "behind-col branded", style: { "--accent": lab.accent } },
        React.createElement("span", { className: "behind-tag mono" }, "Your brand"),
        React.createElement("div", { className: "behind-brand-chrome" },
          React.createElement("div", { className: "behind-brand-mark", key: bi }, brands[bi]),
          React.createElement("span", { className: "behind-os mono" }, info.os)
        ),
        React.createElement("p", { className: "behind-note" }, "Same engine. Your logo, your domain, your customers. First platform live in 8 weeks.")
      )
    )
  );
}

/* ---- AI Maturity Curve ---- */
function MaturityCurve({ sme, lab }) {
  const stages = [
    ["AI User", "ChatGPT, Copilot"],
    ["AI Team", "internal agents"],
    ["AI Company", "departments run on AI"],
    ["AI Platform", "custom vertical platform"],
    ["AI Ecosystem", "marketplace + network effects"],
  ];
  const lines = [
    "You're using AI. We turn it into a business.",
    "Your team is using AI. Your industry is being rebuilt around it.",
    "Your company is AI-native. The next leap is your own platform.",
    "You have a platform. The next leap is an ecosystem.",
    "You're the platform others are built on. Let's compound.",
  ];
  const [ref, shown] = window.useReveal({ threshold: 0.3 });
  const [cur, setCur] = useStatePf(sme ? 0 : 1);
  useEffectPf(() => { setCur(sme ? 0 : 1); }, [sme]);
  return React.createElement("section", { className: "section maturity", id: "maturity", "data-screen-label": "AI Maturity", ref },
    React.createElement("div", { className: "section-head" },
      React.createElement("span", { className: "kicker" }, "The AI maturity curve"),
      React.createElement("h2", { className: "section-title" }, "Most operators are at Stage 1–2. We take you to 4–5."),
      React.createElement("p", { className: "section-lede" }, "Tap where you are. The engine pulls you up the curve.")
    ),
    React.createElement("ol", { className: `mat-track ${shown ? "in" : ""}` },
      stages.map(([t, d], i) =>
        React.createElement("li", {
          key: t,
          className: `mat-stage ${i === cur ? "cur" : ""} ${i < cur ? "past" : ""} ${i <= cur ? "reached" : ""}`,
          style: { "--i": i, "--accent": lab.accent },
          onClick: () => setCur(i),
        },
          React.createElement("span", { className: "mat-node" }, i + 1),
          React.createElement("span", { className: "mat-name" }, t),
          React.createElement("span", { className: "mat-desc mono" }, d)
        )
      )
    ),
    React.createElement("p", { className: "mat-line" }, lines[cur])
  );
}

/* ---- Platform Discovery Engine ---- */
function DiscoveryEngine({ onGoToLab }) {
  const { searchPlatforms, discoveryStartingPoints, archetypeFor } = window.TALYA_PLATFORMS;
  const { LABS } = window.TALYA_DATA;
  const [q, setQ] = useStatePf("");
  const [size, setSize] = useStatePf(null);
  const sizes = ["SME", "Mid-market", "Enterprise", "Hyperscaler"];
  const results = (q || size) ? searchPlatforms(q, { size }) : discoveryStartingPoints();
  const isEmpty = !q && !size;

  return React.createElement("section", { className: "section discovery", id: "discovery", "data-screen-label": "Discovery Engine" },
    React.createElement("div", { className: "section-head" },
      React.createElement("span", { className: "kicker" }, "Platform Discovery Engine"),
      React.createElement("h2", { className: "section-title" }, "Find the platform behind your next move"),
      React.createElement("p", { className: "section-lede" }, "Search 150+ functional platforms across 12 labs. Not a directory — infrastructure.")
    ),
    React.createElement("div", { className: "disc-controls" },
      React.createElement("input", {
        type: "text", className: "disc-search", placeholder: "Try: gpu · route · payments · marina · construction · operator model",
        value: q, onChange: (e) => setQ(e.target.value),
      }),
      React.createElement("div", { className: "seg disc-size" },
        sizes.map((s) =>
          React.createElement("button", {
            key: s, type: "button", className: `seg-btn ${size === s ? "on" : ""}`,
            onClick: () => setSize(size === s ? null : s),
          }, s)
        )
      )
    ),
    React.createElement("div", { className: "disc-meta mono" },
      isEmpty ? "Starting points across the labs" : `${results.length} match${results.length === 1 ? "" : "es"}${results.length === 12 ? " (showing first 12)" : ""}`
    ),
    React.createElement("div", { className: "disc-grid" },
      results.map((p) => {
        const accent = p.labKey && LABS[p.labKey] ? LABS[p.labKey].accent : "#4A76F6";
        return React.createElement("div", { key: p.key, className: "disc-card", style: { "--accent": accent } },
          React.createElement("span", { className: "disc-dot" }),
          React.createElement("div", { className: "disc-body" },
            React.createElement("h4", { className: "disc-name" }, p.name),
            React.createElement("p", { className: "disc-tag" }, p.tagline),
            React.createElement("div", { className: "disc-foot" },
              React.createElement("span", { className: "disc-arch mono" }, archetypeFor(p)),
              p.labKey && React.createElement("button", { type: "button", className: "disc-see", onClick: () => onGoToLab(p.labKey) }, "See the OS →")
            )
          )
        );
      })
    )
  );
}

Object.assign(window, { FourPillars, PlatformBehind, MaturityCurve, DiscoveryEngine });