/* global React */
// Below-the-fold sections — group B:
//  · Problem
//  · Solution
//  · Enterprise AI Training Stack (logos marquee)
//  · Case Studies / Stats grid
//  · Why Ajaia
//  · Testimonials
//  · FAQ
//  · Final CTA / Next step

const { useState: useStateB, useEffect: useEffectB, useRef: useRefB } = React;

// ─── PROBLEM ─────────────────────────────────────────────────────────
function ProblemSection() {
  const issues = [
    "Random experimentation, inconsistent results",
    "Confusion about what AI is safe to use and when",
    "No shared standards for prompts, quality, or review",
    "Expensive licenses that go underused",
  ];

  return (
    <S id="ajaia-cluster-problem" tone="dark" padY={128}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.05fr", gap: 80, alignItems: "center" }} className="prob-grid">
        {/* LEFT: copy */}
        <div className="reveal">
          <Eyebrow tone="dark">The Problem</Eyebrow>
          <h2 className="h2" style={{
            marginTop: 22,
            fontFamily: "var(--font-display)", fontWeight: 700,
            fontSize: 44, lineHeight: 1.1, letterSpacing: "-0.025em",
            color: "var(--cream-100)", textWrap: "balance",
          }}>
            Enterprises buy AI tools before teams know how to use them well.
          </h2>
          <p style={{
            marginTop: 22, fontFamily: "var(--font-sans)", fontSize: 17, lineHeight: 1.6,
            color: "rgba(255,255,255,0.72)", letterSpacing: "-0.005em", maxWidth: 580, textWrap: "pretty",
          }}>
            AI rollout stalls when employees get access without role-specific examples, governance guidance, manager coaching, or a clear view of which tool fits which workflow. measure impact, and teams revert to old workflows.
          </p>

          <div style={{
            marginTop: 32, fontFamily: "var(--font-mono)", fontSize: 11.5,
            color: "var(--sky-400)", letterSpacing: "0.12em", textTransform: "uppercase",
          }}>Common patterns we see</div>

          <div style={{ marginTop: 18, display: "flex", flexDirection: "column", gap: 12 }}>
            {issues.map((it, i) => (
              <div key={i} className="reveal" data-delay={(i % 4) + 1} style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <div style={{
                  width: 22, height: 22, borderRadius: "50%",
                  border: "1px solid rgba(255,100,100,0.4)",
                  background: "rgba(255,100,100,0.08)",
                  color: "rgba(255,160,160,0.95)",
                  display: "grid", placeItems: "center",
                  fontFamily: "var(--font-mono)", fontSize: 12, fontWeight: 700,
                  flexShrink: 0,
                }}>×</div>
                <div style={{ fontFamily: "var(--font-sans)", fontSize: 15.5, color: "rgba(255,255,255,0.88)", letterSpacing: "-0.005em" }}>{it}</div>
              </div>
            ))}
          </div>

          <div style={{
            marginTop: 36, paddingTop: 26, borderTop: "1px solid rgba(255,255,255,0.08)",
            fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: 500, fontSize: 18, lineHeight: 1.5,
            color: "rgba(255,255,255,0.6)", maxWidth: 560,
          }}>
            The gap between "having AI" and "using AI effectively" costs productivity, confidence, and speed.
          </div>
        </div>

        {/* RIGHT: animated dashboard */}
        <div className="reveal" data-delay="2" style={{ position: "relative" }}>
          <ProblemDashboard />
        </div>
      </div>
      <style>{`@media (max-width: 1024px) { .prob-grid { grid-template-columns: 1fr !important; gap: 48px !important; } }`}</style>
    </S>
  );
}

// ─── Problem dashboard — fragmentation visual ───────────────────────
function ProblemDashboard() {
  const [tick, setTick] = useStateB(0);
  useEffectB(() => {
    const id = setInterval(() => setTick(t => (t + 1) % 60), 1500);
    return () => clearInterval(id);
  }, []);

  const tools = [
    { name: "Claude",   pct: 32 + (tick % 5), color: "#D97757" },
    { name: "ChatGPT",  pct: 28 + (tick % 7), color: "#10A37F" },
    { name: "Copilot",  pct: 21 + (tick % 4), color: "#2E7DE3" },
    { name: "Gemini",   pct: 14 + (tick % 6), color: "#7C4DFF" },
    { name: "Codex",    pct: 9 + (tick % 5),  color: "#F472B6" },
    { name: "Internal", pct: 6 + (tick % 4),  color: "#5DE0A6" },
  ];

  return (
    <div className="float-1" style={{
      position: "relative",
      background: "linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%)",
      border: "1px solid rgba(255,255,255,0.10)",
      backdropFilter: "blur(20px)",
      padding: 28,
      boxShadow: "0 40px 100px -30px rgba(0,0,0,0.6)",
    }}>
      {/* Header */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, color: "rgba(255,255,255,0.55)", letterSpacing: "0.12em", textTransform: "uppercase" }}>License utilization · Q3</div>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 22, color: "white", letterSpacing: "-0.015em", marginTop: 4 }}>Fragmented usage</div>
        </div>
        <div style={{ display: "flex", gap: 6 }}>
          <div style={{ padding: "4px 8px", border: "1px solid rgba(255,255,255,0.12)", fontFamily: "var(--font-mono)", fontSize: 10.5, color: "rgba(255,255,255,0.7)" }}>30d</div>
          <div style={{ padding: "4px 8px", background: "rgba(151,194,247,0.15)", border: "1px solid rgba(151,194,247,0.3)", fontFamily: "var(--font-mono)", fontSize: 10.5, color: "var(--sky-400)" }}>90d</div>
        </div>
      </div>

      {/* Big number */}
      <div style={{ marginTop: 24, display: "flex", alignItems: "flex-end", gap: 16 }}>
        <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 72, color: "white", letterSpacing: "-0.04em", lineHeight: 1 }} className="num-tabular">
          {38 + (tick % 5)}%
        </div>
        <div style={{ paddingBottom: 8 }}>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "rgba(255,255,255,0.55)", letterSpacing: "0.1em", textTransform: "uppercase" }}>Avg. license utilization</div>
          <div style={{ fontFamily: "var(--font-sans)", fontSize: 13, color: "rgba(255, 160, 160, 0.95)", marginTop: 2 }}>−12% from last quarter</div>
        </div>
      </div>

      {/* Tool breakdown */}
      <div style={{ marginTop: 28, display: "flex", flexDirection: "column", gap: 10 }}>
        {tools.map((t, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "78px 1fr 44px", gap: 12, alignItems: "center" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <div style={{ width: 8, height: 8, background: t.color, borderRadius: "50%", boxShadow: `0 0 8px ${t.color}` }} />
              <div style={{ fontFamily: "var(--font-sans)", fontSize: 12.5, color: "rgba(255,255,255,0.85)" }}>{t.name}</div>
            </div>
            <div style={{ height: 6, background: "rgba(255,255,255,0.06)", position: "relative" }}>
              <div style={{
                position: "absolute", inset: 0, width: `${t.pct}%`,
                background: `linear-gradient(90deg, ${t.color}, ${t.color}AA)`,
                transition: "width 1.4s var(--ease)",
                boxShadow: `0 0 12px ${t.color}55`,
              }} />
            </div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, color: "rgba(255,255,255,0.7)", textAlign: "right" }} className="num-tabular">{t.pct}%</div>
          </div>
        ))}
      </div>

      {/* Decorative warnings */}
      <div style={{
        marginTop: 24, padding: "12px 14px",
        background: "rgba(255,100,100,0.08)",
        border: "1px solid rgba(255,100,100,0.25)",
        display: "flex", alignItems: "center", gap: 12,
      }}>
        <div className="pulse-dot" style={{ width: 8, height: 8, borderRadius: "50%", background: "#ff6b6b" }} />
        <div style={{ flex: 1, fontFamily: "var(--font-mono)", fontSize: 11.5, color: "rgba(255,200,200,0.95)" }}>
          14 teams · scattered prompts · no shared review pattern
        </div>
      </div>

      {/* Floating delta chip */}
      <div className="float-2" style={{
        position: "absolute", right: -22, top: 70, zIndex: 2,
        padding: "10px 14px",
        background: "rgba(151,194,247,0.10)",
        border: "1px solid rgba(151,194,247,0.30)",
        backdropFilter: "blur(20px)",
        fontFamily: "var(--font-mono)", fontSize: 10.5,
        color: "var(--sky-400)", letterSpacing: "0.1em", textTransform: "uppercase",
      }}>Q4 target · 78%</div>
    </div>
  );
}

// ─── SOLUTION ────────────────────────────────────────────────────────
function SolutionSection() {
  const process = [
    { n: "01", title: "Discovery & Needs Assessment", body: "Leadership alignment, hypothesis testing, survey + focus groups, AI literacy baseline", icon: <AjIcon.Compass /> },
    { n: "02", title: "Curriculum Architecture + Cohort Design", body: "Role analysis, content development, cohort stratification, learning objectives", icon: <AjIcon.Workflow /> },
    { n: "03", title: "Training Delivery", body: "Facilitated workshops, cohort sessions, interactive exercises, hands-on practice", icon: <AjIcon.Book /> },
    { n: "04", title: "Post Training Assessment", body: "Skills measurement, behavioral change, ROI reporting, impact docs, white papers", icon: <AjIcon.Layers /> },
    { n: "05", title: "Continuing Education & Cascade", body: "Team rollout, reinforcement, program iteration", icon: <AjIcon.Chart /> },
  ];

  return (
    <S id="ajaia-cluster-solution" tone="light" padY={128}>
      <div style={{ display: "grid", gridTemplateColumns: "0.85fr 1.15fr", gap: 72, alignItems: "center" }} className="sol-process-grid">
        <div className="reveal">
          <Eyebrow>The Solution</Eyebrow>
          <h2 className="h2" style={{
            marginTop: 22, fontFamily: "var(--font-display)", fontWeight: 700,
            fontSize: 44, lineHeight: 1.05, letterSpacing: "-0.025em",
            color: "var(--ink-900)", textWrap: "balance",
          }}>
            Ajaia Enterprise Training Process
          </h2>
          <p style={{
            marginTop: 18, fontFamily: "var(--font-sans)", fontSize: 17, lineHeight: 1.6,
            color: "var(--ink-muted)", letterSpacing: "-0.005em", maxWidth: 520, textWrap: "pretty",
          }}>
            A structured, iterative approach continuously refined by data from each cohort.
          </p>
          <div style={{ marginTop: 36 }}>
            <AjButton variant="primary" size="lg">Plan Enterprise AI Training</AjButton>
          </div>
        </div>

        <div className="process-stack" style={{ position: "relative", display: "flex", flexDirection: "column", gap: 0 }}>
          <div className="hide-md-down" style={{
            position: "absolute", left: 36, top: 38, bottom: 38, width: 2,
            background: "linear-gradient(180deg, rgba(0,29,107,0.08), rgba(0,29,107,0.34), rgba(151,194,247,0.34))",
            zIndex: 0
          }} />
          {process.map((it, i) => (
            <div key={i} className="reveal process-step" data-delay={(i % 5) + 1} style={{
              position: "relative",
              display: "grid", gridTemplateColumns: "74px 64px 1fr", gap: 20, alignItems: "center",
              minHeight: 96,
              zIndex: 1
            }}>
              <div style={{
                width: 58, height: 58,
                marginLeft: 7,
                background: i === 4 ? "var(--sky-400)" : "var(--ink-900)",
                color: "white",
                display: "grid", placeItems: "center",
                boxShadow: "0 16px 34px -16px rgba(0,29,107,0.48)",
                border: "1px solid rgba(151,194,247,0.35)"
              }}>{it.icon}</div>
              <div style={{
                fontFamily: "var(--font-display)", fontWeight: 700,
                fontSize: 30, lineHeight: 1, letterSpacing: "-0.025em",
                color: i === 4 ? "var(--sky-500)" : "var(--ink-900)"
              }}>{it.n}</div>
              <div>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 15.5, letterSpacing: "-0.005em", color: "var(--ink-900)" }}>{it.title}</div>
                <div style={{ marginTop: 6, fontFamily: "var(--font-sans)", fontSize: 12.5, lineHeight: 1.45, color: "var(--ink-muted)", letterSpacing: "-0.002em" }}>{it.body}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 1024px) {
          .sol-process-grid { grid-template-columns: 1fr !important; gap: 44px !important; }
        }
        @media (max-width: 640px) {
          .process-step { grid-template-columns: 58px 50px 1fr !important; gap: 12px !important; min-height: 116px !important; }
          .process-step > div:first-child { width: 48px !important; height: 48px !important; margin-left: 0 !important; }
          .process-step > div:nth-child(2) { font-size: 24px !important; }
        }
      `}</style>
    </S>
  );
}

// ─── STACK section (logos marquee + tool grid) ───────────────────────
function StackSection() {
  const PG = window.PlatformGlyph || {};
  const tools = [
    { name: "Claude",         sub: "Anthropic", color: "#D97757", Glyph: PG.Claude },
    { name: "Claude Code",    sub: "Anthropic", color: "#D97757", Glyph: PG.Claude },
    { name: "ChatGPT Ent.",   sub: "OpenAI",    color: "#10A37F", Glyph: PG.ChatGPT },
    { name: "OpenAI Codex",   sub: "OpenAI",    color: "#10A37F", Glyph: PG.Codex },
    { name: "M365 Copilot",   sub: "Microsoft", color: "#2E7DE3", Glyph: PG.Copilot },
    { name: "Copilot Studio", sub: "Microsoft", color: "#2E7DE3", Glyph: PG.Copilot },
    { name: "Copilot Cowork", sub: "Microsoft", color: "#2E7DE3", Glyph: PG.Copilot },
    { name: "GitHub Copilot", sub: "GitHub",    color: "#6E5494", Glyph: PG.GitHub },
    { name: "Gemini",         sub: "Google",    color: "#4285F4", Glyph: PG.Gemini },
    { name: "Cursor",         sub: "Anysphere", color: "#000000",        Glyph: PG.Cursor },
    { name: "Internal AI",    sub: "Custom",    color: "var(--ink-900)", Glyph: PG.Internal },
    { name: "RAG agents",     sub: "Custom",    color: "var(--ink-900)", Glyph: PG.RAG },
  ];

  return (
    <S tone="dark" padY={128}>
      <SectionHeader
        eyebrow="Enterprise AI Training Stack"
        tone="dark"
        title="Claude. Claude Code. ChatGPT Enterprise. Microsoft Copilot. Copilot Cowork. Gemini. Codex. GitHub Copilot."
        sub="Ajaia connects across leading models and enterprise systems to create secure, end-to-end solutions tailored to your systems, data, governance standards, and long-term roadmap."
      />

      <div style={{ marginTop: 64, display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 12 }} className="stack-grid">
        {tools.map((t, i) => (
          <div key={i} className="lift reveal" data-delay={(i % 6) + 1} style={{
            background: "linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%)",
            border: "1px solid rgba(255,255,255,0.08)",
            backdropFilter: "blur(10px)",
            padding: "20px 18px",
            display: "flex", flexDirection: "column", gap: 12,
            minHeight: 130,
            position: "relative", overflow: "hidden",
          }}>
            <div style={{
              width: 36, height: 36,
              background: t.Glyph ? "white" : `linear-gradient(135deg, ${t.color}, ${t.color}55)`,
              borderRadius: t.Glyph ? 8 : 0,
              boxShadow: `0 8px 24px -8px ${t.color}88`,
              display: "grid", placeItems: "center",
              color: t.icon ? t.color : undefined,
            }}>
              {t.Glyph && <t.Glyph size={22} />}
              {t.icon && t.icon}
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 15, color: "white", letterSpacing: "-0.01em" }}>{t.name}</div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, color: "rgba(255,255,255,0.5)", letterSpacing: "0.06em", marginTop: 2 }}>{t.sub}</div>
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 6, fontFamily: "var(--font-mono)", fontSize: 10, color: "rgba(255,255,255,0.45)" }}>
              <div className="pulse-dot" style={{ width: 5, height: 5, borderRadius: "50%", background: "#5DE0A6" }} />
              Approved
            </div>
          </div>
        ))}
      </div>

      {/* Tool-fit ribbon */}
      <div style={{
        marginTop: 48, padding: "24px 32px",
        background: "linear-gradient(90deg, rgba(151,194,247,0.06) 0%, rgba(151,194,247,0.02) 100%)",
        border: "1px solid rgba(151,194,247,0.15)",
        display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24, flexWrap: "wrap",
      }}>
        <div style={{ fontFamily: "var(--font-sans)", fontSize: 15, color: "rgba(255,255,255,0.85)", maxWidth: 720 }}>
          <span style={{ color: "var(--sky-400)", fontWeight: 600 }}>Tool-fit, not tool debate.</span> Ajaia trains teams on which workflow belongs in which tool — and how to keep prompts, review, and governance consistent across them.
        </div>
        <AjButton size="md" variant="primary">Plan Enterprise AI Training</AjButton>
      </div>

      <style>{`
        @media (max-width: 1100px) { .stack-grid { grid-template-columns: repeat(3, 1fr) !important; } }
        @media (max-width: 600px)  { .stack-grid { grid-template-columns: repeat(2, 1fr) !important; } }
      `}</style>
    </S>
  );
}

// ─── CASE STATS section (4 outcomes) ────────────────────────────────
function CaseStatsSection() {
  const cases = [
    { sector: "Education", stat: "85%+", statLabel: "AI usage across staff roles", title: "Companywide AI Training & Enablement for an Education Organization", body: "Weekly AI usage increased from near-zero to 85%+ across staff roles.", link: "Read Case Study", accent: "#2A4CFF" },
    { sector: "Private Equity", stat: "25k+", statLabel: "employees trained", title: "Private Equity Workforce AI Upskilling Initiative", body: "25k+ employees trained across portfolio companies.", link: "Read Case Study", accent: "var(--sky-400)" },
    { sector: "Government", stat: "65%", statLabel: "reduction in processing times", title: "Government Services Upskilling Programming", body: "65% reduction in processing times for documentation and case workflows.", link: "Read Case Study", accent: "#0EA5E9" },
    { sector: "Healthcare", stat: "200+", statLabel: "clinics trained", title: "Healthcare Workforce AI Upskilling Program", body: "HIPAA-aligned AI training across 200+ clinics.", link: "Read Case Study", accent: "#22D3EE" },
  ];

  return (
    <S tone="tint" padY={120}>
      <SectionHeader
        eyebrow="Case studies"
        title="Enterprise-wide AI adoption tied to real workflows"
        sub="Real outcomes across portfolio companies, education systems, government services, and healthcare."
      />
      <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 20 }} className="case-grid">
        {cases.map((c, i) => (
          <a key={i} href="#" className="lift reveal" data-delay={(i % 2) + 1} style={{
            position: "relative",
            background: "var(--paper)",
            border: "1px solid rgba(0,29,107,0.10)",
            padding: "32px 36px",
            textDecoration: "none", color: "var(--ink-ink)",
            boxShadow: "var(--shadow-1)",
            display: "grid", gridTemplateColumns: "auto 1fr", gap: 36, alignItems: "flex-start",
            overflow: "hidden",
          }}>
            {/* Glow */}
            <div style={{ position: "absolute", width: 320, height: 320, borderRadius: "50%", background: c.accent, opacity: 0.08, filter: "blur(60px)", left: -100, bottom: -100, pointerEvents: "none" }} />

            <div style={{ position: "relative" }}>
              <div style={{
                fontFamily: "var(--font-display)", fontWeight: 700,
                fontSize: 56, lineHeight: 1, letterSpacing: "-0.04em",
                background: `linear-gradient(135deg, ${c.accent}, var(--ink-900))`,
                WebkitBackgroundClip: "text", backgroundClip: "text",
                WebkitTextFillColor: "transparent", color: "transparent",
              }} className="num-tabular">{c.stat}</div>
              <div style={{ marginTop: 8, maxWidth: 140, fontFamily: "var(--font-sans)", fontSize: 12.5, color: "var(--ink-muted)", lineHeight: 1.4, letterSpacing: "-0.005em" }}>{c.statLabel}</div>
            </div>
            <div style={{ position: "relative" }}>
              <div style={{
                padding: "3px 8px",
                background: "var(--sky-50)", color: "var(--ink-900)",
                fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 11.5,
                alignSelf: "flex-start", display: "inline-flex",
              }}>{c.sector}</div>
              <div style={{ marginTop: 12, fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 19, lineHeight: 1.3, letterSpacing: "-0.015em", color: "var(--ink-900)" }}>{c.title}</div>
              <div style={{ marginTop: 10, fontFamily: "var(--font-sans)", fontSize: 14, lineHeight: 1.55, color: "var(--ink-muted)" }}>{c.body}</div>
              <div style={{ marginTop: 18, display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 13.5, color: "var(--ink-900)" }}>{c.link} <AjIcon.ArrowRight size={13} /></div>
            </div>
          </a>
        ))}
      </div>
      <style>{`@media (max-width: 900px) { .case-grid { grid-template-columns: 1fr !important; } }`}</style>
    </S>
  );
}

// ─── WHY AJAIA section ──────────────────────────────────────────────
function WhyAjaiaSection() {
  const [ref1, n1] = useCountUp(78);
  const [ref2, n2] = useCountUp(13500);
  const [ref3, n3] = useCountUp(10);

  return (
    <S tone="light" padY={120}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 80, alignItems: "center" }} className="why-grid">
        <div className="reveal">
          <Eyebrow>Why Ajaia</Eyebrow>
          <h2 className="h2" style={{
            marginTop: 22, fontFamily: "var(--font-display)", fontWeight: 700,
            fontSize: 42, lineHeight: 1.1, letterSpacing: "-0.025em",
            color: "var(--ink-900)", textWrap: "balance",
          }}>
            Enterprise AI training built around adoption, not isolated workshops
          </h2>
          <p style={{
            marginTop: 22, fontFamily: "var(--font-sans)", fontSize: 17, lineHeight: 1.6,
            color: "var(--ink-muted)", letterSpacing: "-0.005em", maxWidth: 540, textWrap: "pretty",
          }}>
            Ajaia builds and deploys AI solutions, then trains enterprises to use approved tools safely inside real workflows. Enterprise AI training connects leaders, employees, managers, champions, governance, and platform-specific support in one rollout model.
          </p>
          <div style={{ marginTop: 36 }}>
            <AjButton variant="primary" size="lg">Get Your Free Consultation</AjButton>
          </div>
        </div>

        <div className="reveal" data-delay="2">
          <div className="why-stats-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12 }}>
            {[
              { ref: ref1, val: n1, suffix: "+", label: "Sessions run" },
              { ref: ref2, val: n2, suffix: "",  label: "Employees trained" },
              { ref: ref3, val: n3, suffix: "+", label: "Years of AI experience" },
            ].map((s, i) => (
              <div key={i} ref={s.ref} style={{
                background: "linear-gradient(180deg, var(--ink-900) 0%, #052782 100%)",
                color: "white",
                padding: "32px 24px",
                position: "relative", overflow: "hidden",
                boxShadow: "0 24px 60px -20px rgba(0,29,107,0.4)",
              }}>
                <div style={{ position: "absolute", width: 200, height: 200, borderRadius: "50%", background: "radial-gradient(circle, rgba(151,194,247,0.20), transparent 70%)", right: -60, top: -60 }} />
                <div style={{ position: "relative", fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 48, lineHeight: 1, letterSpacing: "-0.03em", color: "var(--cream-100)" }} className="num-tabular">
                  {s.val.toLocaleString()}{s.suffix}
                </div>
                <div style={{ position: "relative", marginTop: 12, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--sky-400)", letterSpacing: "0.12em", textTransform: "uppercase" }}>{s.label}</div>
              </div>
            ))}
          </div>

          {/* Credibility band */}
          <div style={{
            marginTop: 24,
            background: "var(--sky-50)",
            border: "1px solid rgba(0,29,107,0.08)",
            padding: "22px 26px",
          }}>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-subtle)", letterSpacing: "0.12em", textTransform: "uppercase" }}>Presented our work to</div>
            <div style={{ marginTop: 12, display: "flex", flexWrap: "wrap", gap: 10 }}>
              {["U.S. Congress", "Stanford University", "NY State Dept. of Health"].map((l, i) => (
                <span key={i} style={{
                  padding: "8px 14px",
                  background: "var(--paper)",
                  border: "1px solid rgba(0,29,107,0.10)",
                  fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 13,
                  color: "var(--ink-900)",
                }}>{l}</span>
              ))}
            </div>
          </div>

          {/* What you leave with */}
          <div style={{ marginTop: 20, padding: "28px 32px", background: "var(--paper)", border: "1px solid rgba(0,29,107,0.10)", boxShadow: "var(--shadow-1)" }}>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-subtle)", letterSpacing: "0.12em", textTransform: "uppercase" }}>What the enterprise leaves with</div>
            <ul style={{ listStyle: "none", padding: 0, margin: "18px 0 0", display: "flex", flexDirection: "column", gap: 10 }}>
              {[
                "Confident, AI-literate teams equipped to use AI independently",
                "Role-specific training aligned to how your organization actually operates",
                "Reusable prompt systems that improve quality, speed, and consistency",
                "Clear internal norms for safe, effective AI adoption",
              ].map((t, i) => (
                <li key={i} style={{ display: "flex", alignItems: "flex-start", gap: 12 }}>
                  <div style={{ width: 18, height: 18, background: "var(--ink-900)", color: "var(--sky-400)", display: "grid", placeItems: "center", flexShrink: 0, marginTop: 2 }}>
                    <AjIcon.Check size={11} />
                  </div>
                  <div style={{ fontFamily: "var(--font-sans)", fontSize: 14.5, lineHeight: 1.55, color: "var(--ink-ink)" }}>{t}</div>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 1024px) { .why-grid { grid-template-columns: 1fr !important; gap: 48px !important; } }`}</style>
    </S>
  );
}

// ─── TESTIMONIALS section ───────────────────────────────────────────
function TestimonialsSection() {
  const quotes = [
    { body: "The presenter was fantastic. He explained a complex topic in simple terms and made it a highly informative and engaging session for all. The use cases and examples he demo'd were very practical and useful.", who: "Manager, Public Sector Org" },
    { body: "That was the most enlightening and helpful learning session / workshop my company has ever hosted! Incredibly useful!", who: "Analyst, Financial Services" },
    { body: "LOVED the presentation - Ajaia was excellent - full of great ideas and resources. Thank you for this training!", who: "Staff Lead, Healthcare Organization" },
  ];

  return (
    <S tone="dark" padY={120}>
      <SectionHeader
        eyebrow="Testimonials"
        tone="dark"
        title="What enterprise teams say after training"
        sub="Average 4.8-star feedback across all programs."
      />

      <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }} className="testi-grid">
        {quotes.map((q, i) => (
          <div key={i} className="lift reveal" data-delay={(i % 3) + 1} style={{
            position: "relative",
            background: "linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%)",
            border: "1px solid rgba(255,255,255,0.10)",
            backdropFilter: "blur(20px)",
            padding: "32px 28px",
            display: "flex", flexDirection: "column", gap: 18,
            minHeight: 280,
            overflow: "hidden",
          }}>
            <div style={{ position: "absolute", top: 16, right: 18, color: "rgba(151,194,247,0.30)" }}>
              <AjIcon.Quote size={36} />
            </div>
            <div style={{ display: "flex", gap: 2 }}>
              {[0,1,2,3,4].map(j => (
                <div key={j} style={{ color: "var(--sky-400)" }}><AjIcon.Star size={13} /></div>
              ))}
            </div>
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 17, lineHeight: 1.55, color: "white", letterSpacing: "-0.01em", flex: 1, textWrap: "pretty" }}>
              "{q.body}"
            </div>
            <div style={{ borderTop: "1px solid rgba(255,255,255,0.08)", paddingTop: 16 }}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, color: "var(--sky-400)", letterSpacing: "0.08em" }}>{q.who}</div>
            </div>
          </div>
        ))}
      </div>
      <style>{`
        @media (max-width: 1024px) { .testi-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </S>
  );
}

// ─── FAQ section ─────────────────────────────────────────────────────
function FAQSection() {
  const items = [
    { q: "What does AI training for enterprises include?", a: "AI training for enterprises covers the full adoption system around approved AI tools: executive alignment, employee workflow labs, manager reinforcement, champions support, responsible-use guidance, and follow-on adoption signals. Ajaia maps the training to the tools your organization has approved, the workflows teams actually perform, and the governance expectations employees need to follow. The goal is to help the enterprise move from AI access and interest into safer, more consistent usage across real work." },
    { q: "Can training cover Claude Code, Copilot, ChatGPT, and other AI tools?", a: "Yes. Enterprise AI training can include Claude, Claude Code, Claude Cowork, ChatGPT Enterprise, OpenAI Codex, Microsoft 365 Copilot, Copilot Chat, Copilot Studio, Copilot Cowork, GitHub Copilot, Gemini for Google Workspace, internal assistants, or a mix of approved tools. Ajaia helps teams understand where each tool fits, how prompt and review patterns change by workflow, and how the organization's data and governance rules apply across the stack. The training avoids platform debates and focuses on practical tool fit, safer usage, and repeatable work habits." },
    { q: "How does enterprise-wide AI training usually roll out?", a: "An enterprise-wide AI training program usually begins with a planning step around audiences, approved tools, workflows, risk boundaries, and rollout goals. From there, Ajaia can sequence executive sessions, employee cohorts, manager enablement, platform-specific training, champions support, office hours, and adoption review. The exact format depends on how many teams are involved, how much customization is needed, and whether the rollout starts with a pilot group or a broader enterprise launch." },
    { q: "Can training be customized by department or role?", a: "Yes. Enterprise AI training should usually be customized by department, role, and workflow. Finance, HR, sales, operations, legal, customer support, analysts, and executives do different work and face different risks. Ajaia builds examples around those differences so employees practice with tasks they recognize and leaders get a program that supports the organization's operating model rather than a generic AI literacy session." },
    { q: "How does the training handle governance and responsible AI use?", a: "Governance is built into the training itself. Ajaia can cover approved tools, sensitive-data boundaries, confidential information, output verification, human review, escalation, and examples of work where AI should not be used without additional control. This helps employees apply policy during daily work and gives managers clearer language for coaching responsible AI usage after the session." },
    { q: "How is enterprise AI training different from employee AI training?", a: "Enterprise AI training is broader than a one-off employee workshop. Employee training teaches individuals how to use approved tools in their roles. Enterprise AI training connects that layer with leadership alignment, manager coaching, platform-specific support for tools like Claude, Claude Code, ChatGPT Enterprise, Microsoft Copilot, Copilot Studio, Gemini, Codex, or GitHub Copilot, champions programs, office hours, and adoption measurement. It is the better fit when the buyer needs rollout architecture, not just a single session." },
  ];

  return (
    <S id="ajaia-cluster-faq" tone="light" padY={120}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "flex-start" }} className="faq-grid">
        <div className="reveal" style={{ position: "sticky", top: 140 }}>
          <Eyebrow>Frequently asked questions</Eyebrow>
          <h2 className="h2" style={{
            marginTop: 22, fontFamily: "var(--font-display)", fontWeight: 700,
            fontSize: 42, lineHeight: 1.1, letterSpacing: "-0.025em",
            color: "var(--ink-900)", textWrap: "balance",
          }}>
            Questions teams usually ask
          </h2>
          <p style={{
            marginTop: 22, fontFamily: "var(--font-sans)", fontSize: 16, lineHeight: 1.6,
            color: "var(--ink-muted)", letterSpacing: "-0.005em", maxWidth: 480, textWrap: "pretty",
          }}>
            Short answers for buyers comparing scope, rollout, governance, and follow-on support.
          </p>
          <div style={{ marginTop: 32 }}>
            <AjButton variant="primary">Talk to our team</AjButton>
          </div>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {items.map((it, i) => (
            <details key={i} className="faq-row reveal" data-delay={(i % 4) + 1} style={{
              background: "var(--paper)",
              border: "1px solid rgba(0,29,107,0.10)",
              padding: "20px 24px",
              transition: "border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease)",
            }}>
              <summary style={{
                display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24,
                fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 18,
                letterSpacing: "-0.01em", color: "var(--ink-900)",
              }}>
                {it.q}
                <span className="faq-icon" style={{
                  width: 30, height: 30, flexShrink: 0,
                  background: "var(--sky-50)", color: "var(--ink-900)",
                  display: "grid", placeItems: "center",
                  border: "1px solid rgba(0,29,107,0.08)",
                }}><AjIcon.Plus size={14} /></span>
              </summary>
              <div style={{
                marginTop: 14, paddingTop: 14, borderTop: "1px solid rgba(0,29,107,0.08)",
                fontFamily: "var(--font-sans)", fontSize: 14.5, lineHeight: 1.65,
                color: "var(--ink-muted)", letterSpacing: "-0.002em", textWrap: "pretty",
              }}>{it.a}</div>
            </details>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 1024px) { .faq-grid { grid-template-columns: 1fr !important; gap: 32px !important; } .faq-grid > div:first-child { position: static !important; } }
        details[open] { border-color: rgba(0,29,107,0.18) !important; box-shadow: var(--shadow-1); }
      `}</style>
    </S>
  );
}

// ─── FINAL CTA (Next step) ──────────────────────────────────────────
function FinalCTASection() {
  return (
    <S tone="dark" padY={120}>
      <div className="reveal final-cta-band" style={{
        position: "relative", overflow: "hidden",
        padding: "72px 64px",
        background: "linear-gradient(135deg, rgba(151,194,247,0.06) 0%, rgba(151,194,247,0.02) 100%)",
        border: "1px solid rgba(151,194,247,0.18)",
        backdropFilter: "blur(20px)",
      }}>
        {/* Decorative orbs */}
        <div style={{ position: "absolute", width: 600, height: 600, borderRadius: "50%", background: "radial-gradient(circle, rgba(124,77,255,0.30), transparent 70%)", filter: "blur(80px)", right: -200, top: -200, pointerEvents: "none" }} />
        <div style={{ position: "absolute", width: 600, height: 600, borderRadius: "50%", background: "radial-gradient(circle, rgba(14,165,233,0.20), transparent 70%)", filter: "blur(80px)", left: -200, bottom: -200, pointerEvents: "none" }} />

        <div style={{ position: "relative", display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 56, alignItems: "center" }} className="final-grid">
          <div>
            <Eyebrow tone="dark">Next step</Eyebrow>
            <h2 style={{
              marginTop: 22,
              fontFamily: "var(--font-display)", fontWeight: 700,
              fontSize: 48, lineHeight: 1.05, letterSpacing: "-0.03em",
              color: "white", textWrap: "balance",
            }}>
              Build enterprise AI training around the way work actually happens
            </h2>
            <p style={{
              marginTop: 22, fontFamily: "var(--font-sans)", fontSize: 17, lineHeight: 1.6,
              color: "rgba(255,255,255,0.75)", letterSpacing: "-0.005em", maxWidth: 640, textWrap: "pretty",
            }}>
              Ajaia helps enterprises turn AI access into role-based usage, safer workflows, and durable adoption. Start with a practical conversation about the tools, audiences, governance requirements, and rollout layers in scope.
            </p>
            <div style={{ marginTop: 36, display: "flex", flexWrap: "wrap", gap: 14 }}>
              <AjButton variant="glow" size="lg">Plan enterprise AI training</AjButton>
              <AjButton variant="outline" size="lg" href="#ajaia-cluster-proof">Review proof</AjButton>
            </div>
            <div style={{
              marginTop: 32, fontFamily: "var(--font-mono)", fontSize: 12,
              color: "rgba(255,255,255,0.55)", letterSpacing: "0.06em",
            }}>
              Enterprise AI training can begin with one pilot group or scale into a broader workforce enablement program.
            </div>
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {[
              { k: "Avg. program feedback", v: "4.8 / 5", icon: <AjIcon.Star size={14} /> },
              { k: "Employees trained", v: "25,000+", icon: <AjIcon.Users size={14} /> },
              { k: "Enterprises served", v: "100+", icon: <AjIcon.Briefcase size={14} /> },
              { k: "Years of AI experience", v: "10+", icon: <AjIcon.Layers size={14} /> },
            ].map((kpi, i) => (
              <div key={i} style={{
                background: "rgba(255,255,255,0.03)",
                border: "1px solid rgba(255,255,255,0.08)",
                padding: "18px 22px",
                display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16,
              }}>
                <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                  <div style={{ width: 30, height: 30, background: "rgba(151,194,247,0.10)", color: "var(--sky-400)", display: "grid", placeItems: "center", border: "1px solid rgba(151,194,247,0.20)" }}>{kpi.icon}</div>
                  <div style={{ fontFamily: "var(--font-sans)", fontSize: 13.5, color: "rgba(255,255,255,0.78)" }}>{kpi.k}</div>
                </div>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 20, color: "white", letterSpacing: "-0.015em" }}>{kpi.v}</div>
              </div>
            ))}
          </div>
        </div>
        <Squares color="var(--sky-400)" corner="tr" size={14} />
      </div>
      <style>{`@media (max-width: 1024px) { .final-grid { grid-template-columns: 1fr !important; gap: 36px !important; } }`}</style>
    </S>
  );
}

Object.assign(window, { ProblemSection, SolutionSection, StackSection, CaseStatsSection, WhyAjaiaSection, TestimonialsSection, FAQSection, FinalCTASection });
