// ============================================================
// Control AI — Section parts 3: Features, Testimonials, Pricing, CTA, Footer, Tweaks
// ============================================================

// ============================================================
// FEATURES grid
// ============================================================

function FeaturesSection() {
  const feats = [
    { icon: "hub", t: "Universal Tool Graph", d: "A live semantic map of every doc, thread, ticket, and message your team produces — scoped to permissions." },
    { icon: "shield_lock", t: "Enterprise security", d: "SOC2 Type II. Granular RBAC that mirrors your org. Agents act through scoped tokens, never user credentials." },
    { icon: "history", t: "Every action audited", d: "Every thought, tool call, and decision an agent makes is logged and replayable. Full chain-of-custody." },
    { icon: "monitoring", t: "Workforce analytics", d: "Measure which Chiefs ship, which sub-agents stall, and where your team's bottlenecks actually are." },
    { icon: "account_tree", t: "Multi-agent swarms", d: "Chiefs recruit sub-agents and coordinate with peer Chiefs across teams. Your org scales itself." },
    { icon: "terminal", t: "Your way of working", d: "Teach Control your playbooks, protocols, and tone. Each Chief inherits them and passes them down." },
    { icon: "bolt", t: "Runs on any model", d: "Route tasks to GPT-5, Claude, Gemini, or your private model based on cost, latency, and sensitivity." },
    { icon: "fingerprint", t: "Human-in-the-loop", d: "Set approval thresholds per person, per action. Escalates before it costs, commits, or communicates externally." },
    { icon: "language", t: "Speaks every tool", d: "Native connectors for the stack your team already runs on — plus an SDK. If it has an API, your Chief can use it." },
  ];

  return (
    <section className="max-w-screen-2xl mx-auto px-4 sm:px-6 md:px-8 py-16 md:py-24 lg:py-32">
      <div className="max-w-4xl mb-16">
        <SectionTag num="CTRL·11">Platform</SectionTag>
        <h2 className="font-headline text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-[-0.03em] leading-[1.05]">
          Every capability your AI workforce <span className="text-primary italic">actually needs.</span>
        </h2>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px bg-outline-variant/15 border border-outline-variant/15">
        {feats.map((f, i) => (
          <Reveal key={i} delay={(i % 3) * 100}>
          <div className="bg-surface p-10 hover:bg-surface-container-low transition-all duration-500 hover:-translate-y-1 group relative h-full">
            <div className="flex items-start justify-between mb-8">
              <span className="material-symbols-outlined text-primary" style={{ fontSize: 28 }}>{f.icon}</span>
              <span className="font-label text-[9px] text-outline/50 tracking-[0.3em]">{String(i + 1).padStart(2, "0")}</span>
            </div>
            <h4 className="font-headline text-xl font-bold mb-3">{f.t}</h4>
            <p className="text-on-surface-variant text-sm leading-relaxed">{f.d}</p>
          </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ============================================================
// WHO IT'S FOR / Testimonials
// ============================================================

function TestimonialsSection() {
  const beliefs = [
    {
      tag: "Belief 01",
      title: "The next 10× is org design, not model size.",
      body: "Making each person the commander of a phantom team is a bigger unlock than any single model generation. Control is the operating layer for that shift.",
    },
    {
      tag: "Belief 02",
      title: "Audit beats autonomy.",
      body: "An agent you can't inspect is a liability. Every action in Control leaves a receipt — who asked, what data, which tools, what changed, why. Legal shouldn't be the reason this doesn't ship.",
    },
    {
      tag: "Belief 03",
      title: "Humans stay in command.",
      body: "Chiefs don't replace judgment, they multiply it. Thresholds, approvals, and escalation rules are first-class primitives — not afterthoughts bolted on after launch.",
    },
  ];
  return (
    <section className="bg-surface-container-lowest py-16 md:py-24 lg:py-32 border-y border-outline-variant/10">
      <div className="max-w-screen-2xl mx-auto px-4 sm:px-6 md:px-8">
        <div className="max-w-4xl mb-16">
          <SectionTag num="CTRL·13">What we believe</SectionTag>
          <h2 className="font-headline text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-[-0.03em] leading-[1.05]">
            The thesis behind <span className="text-primary italic">Control.</span>
          </h2>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-px bg-outline-variant/15 border border-outline-variant/15">
          {beliefs.map((b, i) => (
            <Reveal key={i} delay={i * 150}>
            <div className="bg-surface p-10 flex flex-col h-full">
              <TeleLabel className="mb-6">◉ {b.tag}</TeleLabel>
              <h3 className="font-headline text-2xl font-bold text-on-surface mb-5 leading-tight tracking-tight">
                {b.title}
              </h3>
              <p className="text-on-surface-variant leading-relaxed flex-1">
                {b.body}
              </p>
            </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// PRICING / TIERS
// ============================================================

function PricingSection() {
  const tiers = [
    {
      name: "Crew",
      ideal: "Early teams · up to 15 humans",
      price: "Early access",
      unit: "request a slot",
      features: ["5 Chiefs of Staff", "Unlimited sub-agents", "Core connectors", "30-day audit retention", "Community support"],
      cta: "Request access",
      highlight: false,
    },
    {
      name: "Command",
      ideal: "Scaling teams · 15–150 humans",
      price: "Design partner",
      unit: "pricing set together",
      features: ["Unlimited Chiefs", "Custom protocols & tone", "All connectors + SDK", "1-year audit retention", "SSO · SCIM", "Priority support"],
      cta: "Talk to sales",
      highlight: true,
    },
    {
      name: "Mission",
      ideal: "Enterprise · 150+ humans",
      price: "Custom",
      unit: "volume + deployment",
      features: ["Private deployment", "Bring your own model", "Custom RBAC & DLP", "Indefinite audit retention", "Dedicated CSM", "99.95% SLA"],
      cta: "Contact us",
      highlight: false,
    },
  ];
  return (
    <section className="max-w-screen-2xl mx-auto px-4 sm:px-6 md:px-8 py-16 md:py-24 lg:py-32">
      <div className="max-w-4xl mb-16">
        <SectionTag num="CTRL·15">Deployment</SectionTag>
        <h2 className="font-headline text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-[-0.03em] leading-[1.05]">
          Choose your <span className="text-primary italic">mission profile.</span>
        </h2>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-px bg-outline-variant/15 border border-outline-variant/15">
        {tiers.map((t, i) => (
          <Reveal key={t.name} delay={i * 120}>
          <div className={`p-10 flex flex-col h-full ${t.highlight ? "bg-surface-container" : "bg-surface"} relative transition-all duration-500 hover:-translate-y-1`}>
            {t.highlight && (
              <div className="absolute top-0 right-0 bg-primary text-on-primary px-3 py-1 font-label text-[9px] tracking-[0.25em] uppercase font-bold">Most teams</div>
            )}
            <div className="mb-8">
              <h3 className="font-headline text-3xl font-bold mb-2">{t.name}</h3>
              <TeleLabel>{t.ideal}</TeleLabel>
            </div>
            <div className="mb-8 pb-8 border-b border-outline-variant/10">
              <div className="flex items-baseline gap-2 flex-wrap">
                <span className={`font-headline font-bold text-on-surface ${t.price.length > 6 ? "text-3xl" : "text-5xl"}`}>{t.price}</span>
                <span className="font-label text-[10px] text-outline tracking-widest uppercase">{t.unit}</span>
              </div>
            </div>
            <ul className="space-y-3 mb-10 flex-1">
              {t.features.map((f) => (
                <li key={f} className="flex items-start gap-3 font-body text-sm text-on-surface">
                  <span className="text-primary mt-0.5 font-label">◉</span>
                  {f}
                </li>
              ))}
            </ul>
            <button
              className={`w-full py-4 font-label text-[11px] font-bold tracking-[0.2em] uppercase transition-all ${
                t.highlight
                  ? "bg-primary text-on-primary hover:bg-primary-container"
                  : "border border-outline-variant/30 text-on-surface hover:bg-surface-container"
              }`}
            >
              {t.cta} →
            </button>
          </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ============================================================
// HOW IT WORKS (reused from original with polish)
// ============================================================

function HowItWorksSection() {
  const steps = [
    { n: "01", t: "Connect your stack", d: "Plug in Slack, Gmail, Jira, Zoom, Granola, and 35+ more. Control maps your operational graph in minutes, not quarters." },
    { n: "02", t: "Deploy your Chiefs", d: "Every leader gets an AI Chief of Staff. It learns your tools, your voice, your 'way of working' from the first week." },
    { n: "03", t: "Command the mission", d: "Review progress. Approve high-leverage calls. Chiefs coordinate with Chiefs. You stay in command, not in the weeds." },
  ];
  return (
    <section className="max-w-screen-2xl mx-auto px-4 sm:px-6 md:px-8 py-16 md:py-24 lg:py-32 border-t border-outline-variant/10">
      <div className="max-w-4xl mb-24">
        <SectionTag num="CTRL·11">Onboarding</SectionTag>
        <h2 className="font-headline text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-[-0.03em] leading-[1.05]">
          From briefing to execution <span className="text-primary italic">in three steps.</span>
        </h2>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 relative">
        {steps.map((s, i) => (
          <Reveal key={s.n} delay={i * 150}>
          <div className="bg-surface-container-low p-10 relative group hover:bg-surface-container transition-all duration-500 hover:-translate-y-1 min-h-[340px] flex flex-col h-full">
            <div className="font-headline text-[10rem] font-bold text-primary/10 absolute -top-8 -right-4 select-none leading-none">{s.n}</div>
            <div className="relative z-10 flex-1 flex flex-col">
              <TeleLabel className="mb-4">Step {s.n}</TeleLabel>
              <h3 className="font-headline text-2xl font-bold mb-4 text-on-surface leading-tight">{s.t}</h3>
              <p className="text-on-surface-variant leading-relaxed flex-1">{s.d}</p>
              <div className="flex items-center gap-2 mt-8 pt-6 border-t border-outline-variant/10">
                <StatusDot state={i === 0 ? "nominal" : i === 1 ? "info" : "idle"} pulse={false} />
                <span className="font-label text-[9px] text-outline tracking-widest uppercase">
                  {i === 0 ? "Day 1" : i === 1 ? "Week 1" : "Week 2+"}
                </span>
              </div>
            </div>
          </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ============================================================
// CTA — Request access
// ============================================================

function CTASection() {
  return (
    <section className="max-w-screen-2xl mx-auto px-4 sm:px-6 md:px-8 py-16 md:py-24 lg:py-32">
      <div className="bg-surface-container-lowest p-6 sm:p-10 lg:p-16 border border-outline-variant/15 relative overflow-hidden">
        <GridBackdrop className="text-primary" opacity={0.08} />
        <div className="absolute -top-32 -right-32 w-96 h-96 pointer-events-none">
          <svg viewBox="0 0 400 400" className="w-full h-full">
            <circle cx="200" cy="200" r="190" stroke="#ffc880" strokeOpacity="0.15" strokeDasharray="2 8" fill="none" />
            <circle cx="200" cy="200" r="150" stroke="#ffc880" strokeOpacity="0.08" fill="none" />
            <circle cx="200" cy="200" r="110" stroke="#ffc880" strokeOpacity="0.15" strokeDasharray="1 6" fill="none" />
            <circle cx="200" cy="200" r="3" fill="#ffc880" />
          </svg>
        </div>
        <div className="relative z-10 grid lg:grid-cols-12 gap-12 items-start">
          <div className="lg:col-span-6">
            <div className="inline-flex items-center gap-2 px-3 py-1.5 bg-primary/10 border border-primary/30 mb-8">
              <span className="w-1.5 h-1.5 bg-primary animate-pulse" />
              <span className="font-label text-[10px] text-primary tracking-[0.25em] uppercase font-bold">Requesting clearance</span>
            </div>
            <h2 className="font-headline text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-[-0.03em] leading-[1.05] mb-8">
              Your crew is <span className="text-primary italic">waiting.</span>
            </h2>
            <p className="text-on-surface-variant text-lg leading-relaxed mb-10 max-w-lg">
              We're onboarding teams in small cohorts. Tell us about your stack and we'll schedule a 20‑minute mission briefing.
            </p>
            <div className="space-y-4">
              {[
                "Hands-on deploy with a founding engineer",
                "First 3 Chiefs configured with you in the room",
                "All your existing connectors — no switching cost",
              ].map((b) => (
                <div key={b} className="flex items-center gap-3 font-body text-sm text-on-surface">
                  <span className="text-primary font-label">◉</span>
                  {b}
                </div>
              ))}
            </div>
          </div>
          <div className="lg:col-span-6">
            <CornerFrame className="bg-surface p-5 sm:p-8" size={10} color="primary/40">
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                {[
                  { l: "First name", ph: "First…", cols: 1 },
                  { l: "Last name", ph: "Last…", cols: 1 },
                  { l: "Work email", ph: "you@company.com", cols: 2 },
                  { l: "Role", ph: "Head of Ops", cols: 1 },
                  { l: "Team size", ph: "15 humans", cols: 1 },
                  { l: "What should your first Chief do?", ph: "Drafting board updates, triaging my inbox…", cols: 2, textarea: true },
                ].map((f, i) => (
                  <div key={i} className={`space-y-2 ${f.cols === 2 ? "sm:col-span-2" : ""}`}>
                    <label className="font-label text-[9px] text-outline uppercase tracking-widest">{f.l}</label>
                    {f.textarea ? (
                      <textarea rows={3} placeholder={f.ph} className="w-full bg-surface-container-lowest border-0 border-b border-outline-variant focus:ring-0 focus:border-primary font-label text-sm py-3 text-on-surface resize-none" />
                    ) : (
                      <input type="text" placeholder={f.ph} className="w-full bg-surface-container-lowest border-0 border-b border-outline-variant focus:ring-0 focus:border-primary font-label text-sm py-3 text-on-surface" />
                    )}
                  </div>
                ))}
                <button className="sm:col-span-2 bg-primary text-on-primary py-4 mt-3 font-label text-[11px] font-bold tracking-[0.2em] uppercase hover:bg-primary-container transition-all inline-flex items-center justify-center gap-3">
                  Request access
                  <span>→</span>
                </button>
              </div>
            </CornerFrame>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FOOTER
// ============================================================

function Footer() {
  return (
    <footer className="bg-surface-dim border-t border-outline-variant/10">
      <div className="max-w-screen-2xl mx-auto px-4 sm:px-6 md:px-8 py-12 md:py-16">
        <div className="grid grid-cols-1 md:grid-cols-5 gap-12 mb-16">
          <div className="md:col-span-2">
            <div className="mb-6">
              <img
                src="assets/Contorl_Labs_Logo.png"
                alt="Control Labs"
                className="h-16 w-auto object-contain"
                style={{ mixBlendMode: "lighten" }}
              />
            </div>
            <p className="text-on-surface-variant max-w-sm font-body leading-relaxed text-sm mb-6">
              Mission control for AI workforces. Connect your tools, deploy your Chiefs, command your organization.
            </p>
                        <TeleLabel>◉ © 2026 Control Labs · All systems nominal</TeleLabel>
          </div>
          {[
            { h: "Platform", links: ["AI Org", "Chiefs of Staff", "Missions", "Integrations", "SDK"] },
            { h: "Company", links: ["About", "Careers", "Security", "Blog", "Contact"] },
            { h: "Resources", links: ["Docs", "Changelog", "Community", "Privacy", "Terms"] },
          ].map((c) => (
            <div key={c.h}>
              <h5 className="font-label text-[10px] text-outline uppercase tracking-widest mb-6">{c.h}</h5>
              <ul className="space-y-3">
                {c.links.map((l) => (
                  <li key={l}><a className="text-on-surface-variant hover:text-primary transition-colors text-sm font-body" href="#">{l}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div className="pt-6 border-t border-outline-variant/10 flex flex-col md:flex-row justify-between items-center gap-4">
          <TeleLabel>◉ SOC2 Type II · HIPAA · GDPR · ISO 27001</TeleLabel>
          <div className="flex gap-6">
            {["terminal", "public", "code"].map((i) => (
              <a key={i} className="text-outline hover:text-primary transition-colors" href="#">
                <span className="material-symbols-outlined text-base">{i}</span>
              </a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}

// ============================================================
// TWEAKS PANEL
// ============================================================

function TweaksPanel({ tweaks, setTweak }) {
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    const handler = (e) => {
      if (e.data?.type === "__activate_edit_mode") setVisible(true);
      if (e.data?.type === "__deactivate_edit_mode") setVisible(false);
    };
    window.addEventListener("message", handler);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", handler);
  }, []);

  if (!visible) return null;

  const accents = {
    amber: { primary: "#ffc880", container: "#f5a623", on: "#452b00" },
    green: { primary: "#4de082", container: "#00b55d", on: "#003919" },
    blue: { primary: "#9bdaff", container: "#38bdf8", on: "#00354a" },
    crimson: { primary: "#ff8a80", container: "#d93025", on: "#410002" },
  };

  return (
    <div className="fixed bottom-6 right-6 z-[100] bg-surface-container-lowest border border-outline-variant/40 p-5 w-80 font-label shadow-2xl">
      <div className="flex items-center justify-between mb-4 pb-3 border-b border-outline-variant/20">
        <span className="text-[10px] tracking-[0.3em] uppercase text-primary font-bold">◉ Tweaks</span>
        <span className="text-[9px] tracking-widest text-outline">CTRL-PANEL</span>
      </div>

      <div className="space-y-5">
        {/* Accent */}
        <div>
          <div className="text-[9px] tracking-[0.25em] uppercase text-outline mb-2">Accent color</div>
          <div className="grid grid-cols-4 gap-1">
            {Object.keys(accents).map((k) => (
              <button
                key={k}
                onClick={() => setTweak("accent", k)}
                className={`h-8 border ${tweaks.accent === k ? "border-on-surface" : "border-outline-variant/30"}`}
                style={{ background: accents[k].primary }}
                title={k}
              />
            ))}
          </div>
        </div>

        {/* Density */}
        <div>
          <div className="text-[9px] tracking-[0.25em] uppercase text-outline mb-2">Density</div>
          <div className="grid grid-cols-2 gap-1">
            {["compact", "comfortable"].map((d) => (
              <button
                key={d}
                onClick={() => setTweak("density", d)}
                className={`py-2 text-[10px] tracking-widest uppercase ${
                  tweaks.density === d ? "bg-primary text-on-primary" : "bg-surface-container text-on-surface-variant"
                }`}
              >
                {d}
              </button>
            ))}
          </div>
        </div>

        {/* Copy tone */}
        <div>
          <div className="text-[9px] tracking-[0.25em] uppercase text-outline mb-2">Copy tone</div>
          <div className="grid grid-cols-2 gap-1">
            {["mission", "plain"].map((d) => (
              <button
                key={d}
                onClick={() => setTweak("tone", d)}
                className={`py-2 text-[10px] tracking-widest uppercase ${
                  tweaks.tone === d ? "bg-primary text-on-primary" : "bg-surface-container text-on-surface-variant"
                }`}
              >
                {d}
              </button>
            ))}
          </div>
        </div>

        {/* Grid overlay */}
        <div>
          <div className="text-[9px] tracking-[0.25em] uppercase text-outline mb-2">Grid overlay</div>
          <button
            onClick={() => setTweak("grid", !tweaks.grid)}
            className={`w-full py-2 text-[10px] tracking-widest uppercase ${
              tweaks.grid ? "bg-primary text-on-primary" : "bg-surface-container text-on-surface-variant"
            }`}
          >
            {tweaks.grid ? "◉ ON" : "○ OFF"}
          </button>
        </div>
      </div>
    </div>
  );
}

// ============================================================
// WHY NOW — the window (deck slide 15)
// ============================================================

function WhyNowSection() {
  const lanes = [
    {
      yr: "Then",
      t: "Raw capability",
      d: "First real agents. Demos wow, nothing ships. Every team hand-rolls glue code.",
      state: "past",
    },
    {
      yr: "Recently",
      t: "Polished point tools",
      d: "Cursor, Granola, Claude Code. Each vertical gets its hero tool. Nothing talks to anything.",
      state: "past",
    },
    {
      yr: "Now",
      t: "Orchestration layer",
      d: "Enterprises demand audit, HITL, and multi-model routing. A conductor — or a rip-and-replace.",
      state: "now",
    },
  ];
  const beliefs = [
    {
      tag: "Belief 01",
      title: "The next 10× is org design, not model size.",
      body: "Making each person the commander of a phantom team is a bigger unlock than any single model generation. Control is the operating layer for that shift.",
    },
    {
      tag: "Belief 02",
      title: "Audit beats autonomy.",
      body: "An agent you can't inspect is a liability. Every action in Control leaves a receipt — who asked, what data, which tools, what changed, why. Legal shouldn't be the reason this doesn't ship.",
    },
    {
      tag: "Belief 03",
      title: "Humans stay in command.",
      body: "Chiefs don't replace judgment, they multiply it. Thresholds, approvals, and escalation rules are first-class primitives — not afterthoughts bolted on after launch.",
    },
  ];
  return (
    <section className="bg-surface-container-lowest py-16 md:py-24 lg:py-32 border-y border-outline-variant/10 relative overflow-hidden">
      <GridBackdrop className="text-primary" opacity={0.04} />
      <div className="max-w-screen-2xl mx-auto px-4 sm:px-6 md:px-8 relative">
        <div className="max-w-4xl mb-16">
          <SectionTag num="CTRL·12">Why now</SectionTag>
          <h2 className="font-headline text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-[-0.03em] leading-[1.05]">
            The tools are <span className="text-primary italic">polished.</span><br />
            Enterprise is ready.
          </h2>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-px bg-outline-variant/15 border border-outline-variant/15">
          {lanes.map((c, i) => (
            <Reveal key={i} delay={i * 150}>
              <div className={`p-10 flex flex-col h-full transition-colors ${c.state === "now" ? "bg-primary/[0.06] border-l-2 border-primary" : "bg-surface"}`}>
                <div className={`font-label text-[10px] tracking-[0.3em] uppercase mb-6 ${c.state === "now" ? "text-primary" : "text-outline"}`}>
                  ◉ {c.yr}
                </div>
                <h3 className="font-headline text-2xl font-bold text-on-surface mb-4 leading-tight">{c.t}</h3>
                <p className="font-body text-on-surface-variant leading-relaxed flex-1">{c.d}</p>
                {c.state === "now" && (
                  <div className="mt-8 pt-6 border-t border-primary/30 flex items-center gap-3">
                    <StatusDot state="nominal" />
                    <span className="font-label text-[10px] text-secondary tracking-[0.28em] uppercase">This is the window</span>
                  </div>
                )}
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal delay={500}>
          <p className="mt-14 font-body text-xl md:text-2xl text-on-surface-variant leading-relaxed max-w-5xl">
            Too early: the models couldn't plan. Too late: orchestration becomes table stakes — and someone else owns the category. <span className="text-on-surface">This is the window.</span>
          </p>
        </Reveal>

        {/* Beliefs — what we're betting on inside this window */}
        <div className="mt-20 pt-16 border-t border-outline-variant/15">
          <Reveal>
            <div className="flex items-baseline justify-between gap-6 flex-wrap mb-10">
              <h3 className="font-headline text-3xl md:text-4xl font-bold tracking-[-0.02em] leading-tight">
                What we're <span className="text-primary italic">betting on.</span>
              </h3>
              <TeleLabel>◉ The thesis behind Control</TeleLabel>
            </div>
          </Reveal>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-px bg-outline-variant/15 border border-outline-variant/15">
            {beliefs.map((b, i) => (
              <Reveal key={i} delay={i * 120}>
                <div className="bg-surface p-8 flex flex-col h-full">
                  <TeleLabel className="mb-5">◉ {b.tag}</TeleLabel>
                  <h4 className="font-headline text-xl font-bold text-on-surface mb-4 leading-tight tracking-tight">
                    {b.title}
                  </h4>
                  <p className="text-on-surface-variant text-sm leading-relaxed flex-1">
                    {b.body}
                  </p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// TEAM — the crew (deck slide 20)
// ============================================================

function TeamSection() {
  return (
    <section className="max-w-screen-2xl mx-auto px-4 sm:px-6 md:px-8 py-16 md:py-24 lg:py-32 border-t border-outline-variant/10 relative">
      <div className="max-w-4xl mb-16">
        <SectionTag num="CTRL·16">The team</SectionTag>
        <h2 className="font-headline text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-[-0.03em] leading-[1.05]">
          Built by people who've run<br />
          <span className="text-primary italic">real operations at scale.</span>
        </h2>
      </div>

      <div className="grid lg:grid-cols-[1.3fr_1fr] gap-12 items-start">
        {/* LEFT — Founder card + Hiring */}
        <Reveal>
          <div className="space-y-6">
            <CornerFrame className="bg-surface-container-lowest p-10 relative" size={12} color="primary/40">
              <div className="flex items-start gap-8 flex-wrap">
                <div className="relative w-24 h-24 shrink-0 bg-primary/10 border border-primary/40 flex items-center justify-center">
                  <span className="font-headline text-4xl text-primary font-bold">IP</span>
                </div>
                <div className="flex-1 min-w-0">
                  <div className="font-label text-[10px] text-primary tracking-[0.3em] uppercase mb-2">◉ Founder &amp; CEO</div>
                  <div className="font-headline text-3xl text-on-surface font-bold mb-1.5">Imanuel Piwko</div>
                  <div className="font-label text-[12px] text-on-surface-variant tracking-[0.1em] mb-5">Prev. Payward / Kraken</div>
                  <p className="font-body text-on-surface-variant text-base leading-relaxed">
                    Ran operations inside one of the highest-stakes environments in crypto — where audit, HITL, and permissioning aren't features, they're survival. Now building the same discipline into AI work.
                  </p>
                </div>
              </div>
            </CornerFrame>

            <div className="bg-surface-container-lowest border border-dashed border-outline-variant/40 p-8">
              <div className="font-label text-[10px] text-outline tracking-[0.3em] uppercase mb-3">◉ Hiring</div>
              <div className="font-headline text-xl text-on-surface font-bold mb-2">Founding engineers · designers · design partners</div>
              <p className="font-body text-on-surface-variant text-base leading-relaxed">
                We want operators with scars, designers who hate chatboxes, and engineers who've shipped at the edge where reliability matters.
              </p>
              <a className="mt-5 inline-flex items-center gap-2 font-label text-[10px] text-primary tracking-[0.25em] uppercase border-b border-primary/30 pb-1 hover:border-primary transition-colors" href="mailto:im@control.ai">
                Reach out → im@control.ai
              </a>
            </div>
          </div>
        </Reveal>

        {/* RIGHT — Mission + contact */}
        <Reveal delay={200}>
          <div className="flex flex-col h-full">
            <div className="font-label text-[10px] text-primary tracking-[0.3em] uppercase mb-5">◉ The mission</div>
            <p className="font-headline text-2xl md:text-3xl text-on-surface font-light leading-tight mb-8">
              Give every person the leverage of <span className="text-primary italic">an entire organization.</span>
            </p>
            <p className="font-body text-on-surface-variant text-lg leading-relaxed mb-10">
              Not a tool. Not a copilot. An operating layer for how AI-augmented teams actually work.
            </p>

            <div className="border-t border-outline-variant/20 pt-8 mt-auto">
              <div className="font-label text-[10px] text-outline tracking-[0.3em] uppercase mb-4">◉ Let's talk</div>
              <div className="space-y-2.5 font-label text-base">
                <div className="flex items-center gap-4">
                  <span className="text-outline w-16 text-[10px] tracking-[0.25em]">EMAIL</span>
                  <a href="mailto:im@control.ai" className="text-on-surface hover:text-primary transition-colors">im@control.ai</a>
                </div>
                <div className="flex items-center gap-4">
                  <span className="text-outline w-16 text-[10px] tracking-[0.25em]">WEB</span>
                  <span className="text-on-surface">control.ai</span>
                </div>
                <div className="flex items-center gap-4">
                  <span className="text-outline w-16 text-[10px] tracking-[0.25em]">DEMO</span>
                  <a href="#cta" className="text-primary hover:underline">control.ai/demo</a>
                </div>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, {
  FeaturesSection, TestimonialsSection, PricingSection, HowItWorksSection,
  CTASection, Footer, TweaksPanel, WhyNowSection, TeamSection,
});