/* global React */
// Below-the-fold sections — group A:
//  · Training paths
//  · Compare nearby paths
//  · What enterprise AI training covers
//  · Method
//  · Proof
//  · Related Ajaia paths
//  · Common scenarios

const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

// ─── Reusable section shell ─────────────────────────────────────────
function S({ tone = "light", id, padY = 120, children, style = {} }) {
  const bgs = {
    light: "var(--paper)",
    tint: "linear-gradient(180deg, var(--sky-50) 0%, var(--paper) 100%)",
    // Softer navy — never fully black. Subtle vignette from a deeper navy
    // toward a richer mid-navy, so dark sections feel premium not flat.
    dark: "radial-gradient(ellipse 100% 80% at 50% 0%, #122163 0%, #0c1849 40%, #08123c 100%)",
    paper: "var(--paper-warm)"
  };
  return (
    <section id={id} style={{
      background: bgs[tone] || bgs.light,
      color: tone === "dark" ? "white" : "var(--ink-ink)",
      padding: `${padY}px 0`,
      position: "relative",
      overflow: "hidden",
      ...style
    }}>
      {tone === "dark" && <><div className="grid-bg" /><div className="noise" /></>}
      <div className="container" style={{ position: "relative" }}>
        {children}
      </div>
    </section>);

}

// ─── Section header pattern ─────────────────────────────────────────
function SectionHeader({ eyebrow, title, sub, tone = "light", align = "left", maxW = 720 }) {
  const center = align === "center";
  return (
    <div style={{ textAlign: center ? "center" : "left", maxWidth: center ? maxW : maxW, marginLeft: center ? "auto" : 0, marginRight: center ? "auto" : 0 }} className="reveal">
      {eyebrow && <Eyebrow tone={tone}>{eyebrow}</Eyebrow>}
      {title &&
      <h2 className="h2" style={{
        marginTop: 18,
        fontFamily: "var(--font-display)", fontWeight: 700,
        fontSize: 44, lineHeight: 1.1, letterSpacing: "-0.025em",
        color: tone === "dark" ? "white" : "var(--ink-900)",
        textWrap: "balance"
      }}>{title}</h2>
      }
      {sub &&
      <p style={{
        marginTop: 16,
        fontFamily: "var(--font-sans)", fontSize: 17, lineHeight: 1.6,
        letterSpacing: "-0.005em",
        color: tone === "dark" ? "rgba(255,255,255,0.72)" : "var(--ink-muted)",
        maxWidth: 700,
        marginLeft: center ? "auto" : 0,
        marginRight: center ? "auto" : 0,
        textWrap: "pretty"
      }}>{sub}</p>
      }
    </div>);

}

// ─── Anchor sticky bar (paths/included/method/proof/faq) ────────────
function AnchorBar() {
  const items = [
  { id: "ajaia-cluster-problem", label: "Problem" },
  { id: "ajaia-cluster-solution", label: "Solution" },
  { id: "ajaia-cluster-included", label: "Included" },
  { id: "ajaia-cluster-method", label: "Method" },
  { id: "ajaia-cluster-formats", label: "Formats" },
  { id: "ajaia-cluster-proof", label: "Proof" },
  { id: "ajaia-cluster-faq", label: "FAQ" }];

  const [active, setActive] = useStateA("ajaia-cluster-problem");

  useEffectA(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {if (e.isIntersecting) setActive(e.target.id);});
    }, { rootMargin: "-30% 0px -60% 0px", threshold: 0 });
    items.forEach((it) => {
      const el = document.getElementById(it.id);
      if (el) io.observe(el);
    });
    return () => io.disconnect();
  }, []);

  return (
    <div style={{
      position: "sticky", top: 68, zIndex: 50,
      background: "rgba(255,255,255,0.85)",
      backdropFilter: "blur(16px)",
      borderBottom: "1px solid rgba(0,29,107,0.08)"
    }}>
      <div className="container" style={{ height: 56, display: "flex", alignItems: "center", gap: 6 }}>
        <div style={{
          padding: "8px 14px",
          fontFamily: "var(--font-sans)", fontSize: 13.5, fontWeight: 600,
          color: "var(--ink-subtle)", letterSpacing: "-0.005em",
          borderRight: "1px solid rgba(0,29,107,0.12)", marginRight: 10, paddingRight: 16
        }}>
          Home
        </div>
        {items.map((it) =>
        <a key={it.id} href={`#${it.id}`} style={{
          padding: "8px 14px",
          fontFamily: "var(--font-sans)", fontSize: 13.5, fontWeight: 600,
          letterSpacing: "-0.005em",
          color: active === it.id ? "var(--ink-900)" : "var(--ink-subtle)",
          textDecoration: "none",
          background: active === it.id ? "rgba(151,194,247,0.18)" : "transparent",
          border: active === it.id ? "1px solid rgba(0,29,107,0.10)" : "1px solid transparent",
          transition: "all var(--dur) var(--ease)"
        }}>
            {it.label}
          </a>
        )}
        <div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 16 }}>
          <AjButton size="sm" variant="primary">Plan training</AjButton>
        </div>
      </div>
    </div>);

}

// ─── PATHS section ──────────────────────────────────────────────────
function PathsSection() {
  const paths = [
  { tag: "Hub", title: "Workforce enablement", body: "The flagship path for organization-wide AI adoption, governance, role-based training, and reinforcement.", icon: <AjIcon.Layers /> },
  { tag: "Enterprise rollout", title: "AI training for enterprises", body: "The enterprise-wide path for coordinating Claude, ChatGPT, Copilot, Gemini, and internal AI training into one adoption program.", icon: <AjIcon.Briefcase />, featured: true },
  { tag: "Employee rollout", title: "AI training for employees", body: "The employee/L&D path for broad AI literacy, approved-tool usage, workflow practice, and safe daily habits.", icon: <AjIcon.Users /> },
  { tag: "Enterprise", title: "Enterprise AI training", body: "The enterprise path for larger organizations coordinating security, governance, role-based training, and adoption across functions.", icon: <AjIcon.Shield /> },
  { tag: "Service detail", title: "Training and enablement services", body: "The service-detail path for buyers comparing AI training partners, engagement models, and enablement scope.", icon: <AjIcon.Compass /> },
  { tag: "Program", title: "AI training programs", body: "Program-level planning for enterprise AI training across roles, approved tools, governance, formats, and adoption support.", icon: <AjIcon.Workflow /> },
  { tag: "Corporate", title: "Corporate AI training", body: "Corporate AI training for employees, managers, and departments that need practical workshops and reinforcement.", icon: <AjIcon.Book /> },
  { tag: "Upskilling", title: "AI upskilling programs", body: "AI upskilling programs for building employee capability over time through cohorts, assignments, office hours, and champions.", icon: <AjIcon.Chart /> }];


  return (
    <S id="ajaia-cluster-paths" tone="light" padY={112}>
      <SectionHeader
        eyebrow="Paths"
        title="AI training paths by audience and rollout layer"
        sub="Move from the broad workforce offer into the right training path for employees, leaders, managers, champions, governance owners, or platform-specific adoption." />
      
      <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }} className="paths-grid">
        {paths.map((p, i) =>
        <a key={i} href="#" className="lift reveal" data-delay={i % 4 + 1} style={{
          position: "relative",
          background: p.featured ? "linear-gradient(180deg, var(--ink-900) 0%, #052782 100%)" : "var(--paper)",
          color: p.featured ? "white" : "var(--ink-ink)",
          border: p.featured ? "1px solid rgba(151,194,247,0.30)" : "1px solid rgba(0,29,107,0.10)",
          padding: "24px 22px 24px",
          textDecoration: "none",
          boxShadow: p.featured ? "0 30px 60px -30px rgba(0,29,107,0.6)" : "var(--shadow-1)",
          overflow: "hidden",
          display: "flex", flexDirection: "column", gap: 14,
          minHeight: 260
        }}>
            {p.featured &&
          <div style={{ position: "absolute", inset: 0, opacity: 0.5, pointerEvents: "none" }}>
                <div style={{ position: "absolute", width: 220, height: 220, borderRadius: "50%", background: "radial-gradient(circle, rgba(151,194,247,0.35), transparent 70%)", right: -80, top: -80 }} />
              </div>
          }
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", position: "relative" }}>
              <div style={{
              width: 40, height: 40,
              background: p.featured ? "rgba(151,194,247,0.18)" : "var(--sky-50)",
              color: p.featured ? "var(--sky-400)" : "var(--ink-900)",
              display: "grid", placeItems: "center",
              border: p.featured ? "1px solid rgba(151,194,247,0.35)" : "1px solid rgba(0,29,107,0.08)"
            }}>{p.icon}</div>
              <span style={{
              fontFamily: "var(--font-mono)", fontSize: 10.5,
              color: p.featured ? "rgba(255,255,255,0.55)" : "var(--ink-subtle)",
              letterSpacing: "0.12em", textTransform: "uppercase"
            }}>{p.tag}</span>
            </div>
            <div className="h5" style={{
            fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 20,
            letterSpacing: "-0.015em", lineHeight: 1.25,
            color: p.featured ? "white" : "var(--ink-900)"
          }}>{p.title}</div>
            <div style={{
            fontFamily: "var(--font-sans)", fontSize: 13.5, lineHeight: 1.55,
            color: p.featured ? "rgba(255,255,255,0.72)" : "var(--ink-muted)",
            letterSpacing: "-0.005em",
            flex: 1
          }}>{p.body}</div>
            <div style={{
            display: "inline-flex", alignItems: "center", gap: 6,
            fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 13,
            color: p.featured ? "var(--sky-400)" : "var(--ink-900)",
            marginTop: 4
          }}>Open path <AjIcon.ArrowRight size={13} /></div>
          </a>
        )}
      </div>

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

}

// ─── COMPARE NEARBY PATHS ───────────────────────────────────────────
// Restructured: left rail with a branching trail-map illustration ("you are
// here" + 5 outgoing paths). Right side: rich rows with rank chips, icons,
// accent slide-in on hover, and a connecting timeline rail.
function ComparePathsSection() {
  const rows = [
  {
    title: "AI training for enterprises",
    tag: "Enterprise-wide rollout",
    body: "Choose enterprise AI training when the buyer needs one coordinated adoption program across teams, tools, governance, and reinforcement.",
    icon: <AjIcon.Briefcase />,
    youAreHere: true
  },
  {
    title: "AI training for employees",
    tag: "Employee cohorts",
    body: "Choose employee AI training when L&D or operations needs practical AI literacy and workflow labs for broad staff groups.",
    icon: <AjIcon.Users />
  },
  {
    title: "Claude training for teams",
    tag: "Claude teams",
    body: "Choose Claude training when the rollout depends on Anthropic-specific workflows, prompt patterns, model fit, and governance guidance.",
    icon: <AjIcon.Spark />
  },
  {
    title: "AI coding assistant training",
    tag: "Engineering teams",
    body: "Choose AI coding assistant training when developers need practical guidance for Claude Code, OpenAI Codex, GitHub Copilot, repo permissions, testing, and pull request review.",
    icon: <AjIcon.Code />
  },
  {
    title: "Microsoft Copilot training",
    tag: "Microsoft 365 teams",
    body: "Choose Microsoft Copilot training when employees need to use Copilot Chat, Microsoft 365 Copilot, Copilot Studio agents, or Copilot Cowork inside governed work.",
    icon: <AjIcon.Bolt />
  }];


  return (
    <S tone="tint" padY={112}>
      <SectionHeader
        eyebrow="Choose the right path"
        title="Compare nearby paths"
        sub="Pick the closest fit and move sideways into adjacent training paths without losing context." />

      <div className="compare-grid" style={{
        marginTop: 56,
        display: "grid",
        gridTemplateColumns: "minmax(320px, 380px) 1fr",
        gap: 56,
        alignItems: "flex-start"
      }}>
        {/* LEFT — Trail map illustration */}
        <div className="reveal compare-rail" style={{ position: "sticky", top: 140 }}>
          <PathsTrailMap rows={rows} />
        </div>

        {/* RIGHT — Rows list */}
        <div className="compare-rows" style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          {rows.map((r, i) =>
          <a key={i} href="#" className="lift reveal compare-row" data-delay={i % 4 + 1} style={{
            position: "relative", overflow: "hidden",
            display: "grid",
            gridTemplateColumns: "auto 1fr auto",
            alignItems: "center", gap: 24,
            padding: "22px 26px",
            background: r.youAreHere ?
            "linear-gradient(135deg, var(--ink-900) 0%, #052782 100%)" :
            "var(--paper)",
            color: r.youAreHere ? "white" : "var(--ink-ink)",
            border: r.youAreHere ?
            "1px solid rgba(151,194,247,0.30)" :
            "1px solid rgba(0,29,107,0.10)",
            textDecoration: "none",
            boxShadow: r.youAreHere ?
            "0 24px 60px -20px rgba(0,29,107,0.45)" :
            "var(--shadow-1)"
          }}>
              {/* Hover accent strip */}
              {!r.youAreHere &&
            <span className="compare-accent" style={{
              position: "absolute", left: 0, top: 0, bottom: 0, width: 3,
              background: "linear-gradient(180deg, var(--sky-400), #3B6DF5)",
              transform: "scaleY(0)", transformOrigin: "top",
              transition: "transform 320ms var(--ease)"
            }} />
            }

              {/* Rank + icon */}
              <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <div style={{
                fontFamily: "var(--font-mono)", fontSize: 10.5,
                color: r.youAreHere ? "rgba(255,255,255,0.55)" : "var(--ink-subtle)",
                letterSpacing: "0.16em", width: 24
              }}>{String(i + 1).padStart(2, "0")}</div>
                <div style={{
                width: 44, height: 44,
                background: r.youAreHere ? "rgba(151,194,247,0.18)" : "var(--sky-50)",
                border: r.youAreHere ? "1px solid rgba(151,194,247,0.35)" : "1px solid rgba(0,29,107,0.08)",
                color: r.youAreHere ? "var(--sky-400)" : "var(--ink-900)",
                display: "grid", placeItems: "center",
                flexShrink: 0
              }}>{r.icon}</div>
              </div>

              {/* Title / tag / body */}
              <div style={{ display: "flex", flexDirection: "column", gap: 8, minWidth: 0 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
                  <div style={{
                  fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 19,
                  letterSpacing: "-0.015em", lineHeight: 1.2,
                  color: r.youAreHere ? "white" : "var(--ink-900)"
                }}>{r.title}</div>
                  <span style={{
                  padding: "3px 9px",
                  background: r.youAreHere ? "rgba(151,194,247,0.15)" : "var(--sky-50)",
                  color: r.youAreHere ? "var(--sky-400)" : "var(--ink-900)",
                  border: r.youAreHere ? "1px solid rgba(151,194,247,0.30)" : "1px solid rgba(0,29,107,0.08)",
                  fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 11.5,
                  letterSpacing: "-0.005em",
                  whiteSpace: "nowrap"
                }}>{r.tag}</span>
                  {r.youAreHere &&
                <span style={{
                  padding: "3px 9px",
                  background: "var(--sky-400)",
                  color: "var(--ink-900)",
                  fontFamily: "var(--font-mono)", fontWeight: 700, fontSize: 10.5,
                  letterSpacing: "0.10em", textTransform: "uppercase"
                }}>You're here</span>
                }
                </div>
                <div style={{
                fontFamily: "var(--font-sans)", fontSize: 13.5, lineHeight: 1.55,
                color: r.youAreHere ? "rgba(255,255,255,0.72)" : "var(--ink-muted)",
                letterSpacing: "-0.002em"
              }}>{r.body}</div>
              </div>

              {/* Arrow chip */}
              <div className="compare-arrow" style={{
              width: 44, height: 44, display: "grid", placeItems: "center",
              background: r.youAreHere ? "var(--sky-400)" : "var(--ink-900)",
              color: r.youAreHere ? "var(--ink-900)" : "var(--sky-400)",
              transition: "transform 320ms var(--ease)",
              flexShrink: 0
            }}><AjIcon.ArrowRight size={14} /></div>
            </a>
          )}
        </div>
      </div>

      <style>{`
        @media (max-width: 1024px) {
          .compare-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          .compare-rail { position: static !important; }
        }
        @media (max-width: 700px) {
          .compare-row { grid-template-columns: 1fr !important; gap: 14px !important; padding: 20px !important; }
          .compare-row > div:last-child { display: none; }
        }
        .compare-row:hover .compare-accent { transform: scaleY(1) !important; }
        .compare-row:hover .compare-arrow { transform: translateX(3px); }
      `}</style>
    </S>);

}

// Trail-map illustration: a central "you are here" node fanning out to 5
// destination nodes, drawn with curved SVG paths and a soft halo behind.
function PathsTrailMap({ rows }) {
  // Layout in 360×420 viewBox. Center node sits on the left mid; 5 destinations
  // are spread on the right column, top-to-bottom.
  const center = { x: 90, y: 210 };
  const dests = [
  { x: 280, y: 60 },
  { x: 300, y: 138 },
  { x: 310, y: 215 },
  { x: 300, y: 292 },
  { x: 280, y: 370 }];


  return (
    <div style={{
      position: "relative",
      background: "var(--paper)",
      border: "1px solid rgba(0,29,107,0.08)",
      boxShadow: "var(--shadow-1)",
      padding: "24px 22px 22px",
      overflow: "hidden"
    }}>
      {/* Eyebrow */}
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14 }}>
        <div style={{ width: 6, height: 6, background: "var(--sky-400)" }} />
        <div style={{
          fontFamily: "var(--font-mono)", fontSize: 10.5,
          color: "var(--ink-subtle)", letterSpacing: "0.14em", textTransform: "uppercase"
        }}>Trail map</div>
        <div style={{ flex: 1, height: 1, background: "rgba(0,29,107,0.08)" }} />
      </div>

      <svg viewBox="0 0 360 420" width="100%" height="auto" style={{ display: "block" }}>
        <defs>
          <radialGradient id="tmHalo" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="rgba(151,194,247,0.45)" />
            <stop offset="100%" stopColor="rgba(151,194,247,0)" />
          </radialGradient>
          <linearGradient id="tmEdge" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stopColor="rgba(0,29,107,0.10)" />
            <stop offset="100%" stopColor="rgba(0,29,107,0.30)" />
          </linearGradient>
        </defs>

        {/* Halo behind center node */}
        <circle cx={center.x} cy={center.y} r="70" fill="url(#tmHalo)" />

        {/* Curved connection paths from center → each dest */}
        {dests.map((d, i) => {
          // Bezier control point pulls outward for a graceful curve
          const cx1 = center.x + 80;
          const cy1 = center.y + (d.y - center.y) * 0.15;
          const cx2 = d.x - 80;
          const cy2 = d.y;
          const path = `M${center.x},${center.y} C${cx1},${cy1} ${cx2},${cy2} ${d.x},${d.y}`;
          return (
            <g key={i}>
              <path d={path}
              fill="none" stroke="url(#tmEdge)" strokeWidth="1.5"
              strokeLinecap="round" strokeDasharray="2 5" opacity="0.7" />
              {/* Animated traveling dot */}
              <circle r="2.6" fill="#3B6DF5">
                <animateMotion
                  dur={`${2.6 + i * 0.2}s`}
                  begin={`${i * 0.35}s`}
                  repeatCount="indefinite"
                  path={path} />
                <animate attributeName="opacity"
                values="0;1;1;0" keyTimes="0;0.15;0.85;1"
                dur={`${2.6 + i * 0.2}s`} begin={`${i * 0.35}s`}
                repeatCount="indefinite" />
              </circle>
            </g>);

        })}

        {/* Center "you are here" node — large filled */}
        <g>
          <circle cx={center.x} cy={center.y} r="22"
          fill="var(--ink-900)" />
          <circle cx={center.x} cy={center.y} r="22"
          fill="none" stroke="rgba(151,194,247,0.45)" strokeWidth="1.5"
          className="tm-pulse" style={{ transformOrigin: `${center.x}px ${center.y}px` }} />
          <text x={center.x} y={center.y + 4.5} textAnchor="middle"
          fontFamily="var(--font-mono)" fontSize="9" fontWeight="700"
          fill="var(--sky-400)" letterSpacing="0.1em">YOU</text>
        </g>

        {/* Destination nodes */}
        {dests.map((d, i) =>
        <g key={`d-${i}`}>
            <circle cx={d.x} cy={d.y} r="10"
          fill="var(--paper)" stroke="var(--ink-900)" strokeWidth="1.5" />
            <circle cx={d.x} cy={d.y} r="3.5" fill="var(--ink-900)" />
            {/* Label */}
            <text x={d.x - 18} y={d.y + 4} textAnchor="end"
          fontFamily="var(--font-sans)" fontSize="10.5" fontWeight="600"
          fill="var(--ink-900)" letterSpacing="-0.005em">
              {String(i + 1).padStart(2, "0")}
            </text>
          </g>
        )}
      </svg>

      {/* Footnote */}
      <div style={{
        marginTop: 14, paddingTop: 14,
        borderTop: "1px solid rgba(0,29,107,0.08)",
        fontFamily: "var(--font-sans)", fontSize: 13, lineHeight: 1.5,
        color: "var(--ink-muted)", letterSpacing: "-0.002em"
      }}>
        Every nearby path connects back to the enterprise rollout — pick the closest fit on the right.
      </div>

      <style>{`
        .tm-pulse { animation: tmPulse 2.6s ease-out infinite; }
        @keyframes tmPulse {
          0%   { transform: scale(1);   opacity: 0.85; }
          70%  { transform: scale(1.8); opacity: 0;    }
          100% { transform: scale(1.8); opacity: 0;    }
        }
      `}</style>
    </div>);

}

// ─── WHAT ENTERPRISE AI TRAINING COVERS ─────────────────────────────
function IncludedSection() {
  return (
    <S id="ajaia-cluster-included" tone="light" padY={120}>
      <SectionHeader eyebrow="What's included" title="What enterprise-wide AI training covers" sub="The core program architecture for moving from AI access to governed, role-based usage across teams, tools, and rollout layers." />

      <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 32 }} className="included-grid">
        {/* LEFT: What the enterprise gets */}
        <div className="lift reveal" style={{
          position: "relative",
          background: "var(--ink-900)", color: "white",
          padding: "44px 44px 36px",
          overflow: "hidden"
        }}>
          <div style={{ position: "absolute", inset: 0, opacity: 0.5 }}>
            <div style={{ position: "absolute", width: 460, height: 460, borderRadius: "50%", background: "radial-gradient(circle, rgba(151,194,247,0.20), transparent 70%)", right: -160, top: -160 }} />
          </div>
          <Eyebrow tone="dark">What the enterprise gets</Eyebrow>
          <h3 className="h3" style={{ marginTop: 16, fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 30, letterSpacing: "-0.02em", color: "var(--cream-100)", position: "relative" }}>
            One coordinated rollout, not a one-off workshop
          </h3>

          <div style={{ marginTop: 28, display: "flex", flexDirection: "column", gap: 14, position: "relative" }}>
            {[
            "Enterprise-wide rollout map",
            "Role-based workflow labs",
            "Claude, ChatGPT, Microsoft Copilot, Gemini, and coding-agent training paths",
            "Responsible-use guidance",
            "Manager and champions reinforcement"].
            map((item, i) =>
            <div key={i} style={{ display: "flex", alignItems: "flex-start", gap: 14 }}>
                <div style={{
                width: 24, height: 24, borderRadius: "50%",
                background: "rgba(151,194,247,0.18)",
                border: "1px solid rgba(151,194,247,0.40)",
                display: "grid", placeItems: "center",
                color: "var(--sky-400)",
                flexShrink: 0, marginTop: 1
              }}><AjIcon.Check size={12} /></div>
                <div style={{ fontFamily: "var(--font-sans)", fontSize: 16, lineHeight: 1.55, color: "rgba(255,255,255,0.9)" }}>{item}</div>
              </div>
            )}
          </div>

          <Squares color="var(--sky-400)" corner="br" size={14} />
        </div>

        {/* RIGHT: Who it's for */}
        <div className="included-right-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          {[
          { tag: "Leadership", body: "Executives and sponsors deciding how AI should be adopted across the enterprise.", icon: <AjIcon.Compass /> },
          { tag: "L&D / Ops", body: "L&D, people, operations, and transformation teams coordinating training delivery.", icon: <AjIcon.Workflow /> },
          { tag: "Employees", body: "Employees learning how approved tools fit the work they already do.", icon: <AjIcon.Users /> },
          { tag: "Managers / Champions", body: "Managers and champions responsible for reinforcing usage after launch.", icon: <AjIcon.Shield /> }].
          map((p, i) =>
          <div key={i} className="lift reveal" data-delay={i % 4 + 1} style={{
            background: "var(--paper)",
            border: "1px solid rgba(0,29,107,0.10)",
            padding: 22,
            display: "flex", flexDirection: "column", gap: 12,
            boxShadow: "var(--shadow-1)"
          }}>
              <div style={{
              width: 36, height: 36,
              background: "var(--sky-50)",
              color: "var(--ink-900)",
              display: "grid", placeItems: "center",
              border: "1px solid rgba(0,29,107,0.08)"
            }}>{p.icon}</div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 17, letterSpacing: "-0.01em", color: "var(--ink-900)" }}>{p.tag}</div>
              <div style={{ fontFamily: "var(--font-sans)", fontSize: 13.5, lineHeight: 1.55, color: "var(--ink-muted)" }}>{p.body}</div>
            </div>
          )}
        </div>
      </div>
      <style>{`
        @media (max-width: 1024px) { .included-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </S>);

}

// ─── METHOD section (discovery design priorities) ──────────────────
function MethodSection() {
  const steps = [
  { tag: "Responsible use", title: "Safe and Responsible Use", body: "Human in the loop", icon: <AjIcon.Shield size={22} /> },
  { tag: "Application", title: "Practical Application", body: "Hands-on workflows that connect AI tools to the actual work teams need to complete.", icon: <AjIcon.Workflow size={22} /> },
  { tag: "Behavior change", title: "Observable Behavior Change", body: "Training designed around visible changes in habits, decisions, review patterns, and daily usage.", icon: <AjIcon.Chart size={22} /> },
  { tag: "Relevance", title: "Business Relevance", body: "Examples, labs, and coaching tied to the organization's priorities, functions, and operating context.", icon: <AjIcon.Briefcase size={22} /> },
  { tag: "Scale", title: "Scalable Enablement Model", body: "A repeatable model for cohorts, champions, reinforcement, and adoption support after launch.", icon: <AjIcon.Spark size={22} /> }];


  return (
    <S id="ajaia-cluster-method" tone="light" padY={128}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "flex-start" }} className="method-design-grid">
        <div className="reveal" style={{ position: "sticky", top: 140 }}>
          <Eyebrow>Discovery</Eyebrow>
          <h2 className="h2" style={{
            marginTop: 22, fontFamily: "var(--font-display)", fontWeight: 700,
            fontSize: 44, lineHeight: 1.1, letterSpacing: "-0.025em",
            color: "var(--ink-900)", textWrap: "balance",
          }}>
            What we design for based on discovery
          </h2>
          <p style={{
            marginTop: 22, fontFamily: "var(--font-sans)", fontSize: 17, lineHeight: 1.6,
            color: "var(--ink-muted)", letterSpacing: "-0.005em", maxWidth: 520, textWrap: "pretty",
          }}>
            Ajaia turns discovery into a training design that is safe, practical, observable, business-relevant, and scalable.
          </p>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
          {steps.map((it, i) => (
            <div key={i} className="lift reveal" data-delay={(i % 5) + 1} style={{
              position: "relative",
              background: "var(--paper)",
              border: "1px solid rgba(0,29,107,0.10)",
              padding: "26px 28px",
              boxShadow: "var(--shadow-1)",
              display: "grid", gridTemplateColumns: "auto 1fr", gap: 22, alignItems: "flex-start",
            }}>
              <div style={{
                width: 56, height: 56,
                background: "linear-gradient(135deg, var(--ink-900) 0%, #052782 100%)",
                color: "var(--sky-400)",
                display: "grid", placeItems: "center",
                boxShadow: "0 12px 30px -10px rgba(0,29,107,0.45)",
              }}>{it.icon}</div>
              <div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-subtle)", letterSpacing: "0.12em", textTransform: "uppercase" }}>{it.tag}</div>
                <div style={{ marginTop: 8, fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 22, letterSpacing: "-0.015em", color: "var(--ink-900)" }}>{it.title}</div>
                <div style={{ marginTop: 10, fontFamily: "var(--font-sans)", fontSize: 14.5, lineHeight: 1.6, color: "var(--ink-muted)", letterSpacing: "-0.002em" }}>{it.body}</div>
              </div>
              <Squares color="var(--sky-400)" corner="br" size={10} />
            </div>
          ))}
        </div>
      </div>
      <style>{`@media (max-width: 1024px) { .method-design-grid { grid-template-columns: 1fr !important; gap: 36px !important; } .method-design-grid > div:first-child { position: static !important; } }`}</style>
    </S>);

}

// ─── PROOF section (case studies grid) ──────────────────────────────
function ProofSection() {
  const cases = [
  { eyebrow: "Portfolio enablement · Private equity", title: "Private Equity Workforce AI Upskilling Initiative", tags: ["Portfolio rollout", "Repeatable capability", "Operating leverage"], body: "A portfolio-level example for turning AI training into repeatable operating capability.", accent: "linear-gradient(135deg, var(--ink-900), var(--sky-400))" },
  { eyebrow: "AI platform adoption · Education", title: "AI Platform for an Education Organization", tags: ["Platform rollout", "Workflow adoption", "Knowledge access"], body: "A platform implementation example showing how enablement connects to daily AI usage.", accent: "linear-gradient(135deg, var(--sky-500), var(--ink-900))" },
  { eyebrow: "Secure AI environment · Government-grade", title: "Private Cloud AI Chat for a Government-Grade Environment", tags: ["Private cloud", "Security controls", "Governed usage"], body: "A governed AI environment example for teams balancing adoption, security, and sensitive workflows.", accent: "linear-gradient(135deg, var(--sky-400), var(--ink-900))" },
  { eyebrow: "Organization-wide adoption · Education", title: "AI Training and Enablement for an Education Organization", tags: ["Role-based rollout", "Governance support", "Adoption enablement"], body: "How an education organization moved from low usage to practical, organization-wide adoption.", accent: "linear-gradient(135deg, var(--sky-500), var(--ink-900))" }];

  const outcomes = [
  { 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: "var(--ink-900)" },
  { 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: "var(--sky-500)" },
  { 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: "var(--sky-400)" }];


  return (
    <S id="ajaia-cluster-proof" tone="light" padY={120}>
      <SectionHeader eyebrow="Proof / case studies" title="Proof for enterprise AI training" sub="See how Ajaia connects role-based training, governance, adoption reinforcement, and real workflow outcomes across organizations." />
      <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }} className="proof-grid">
        {cases.map((c, i) =>
        <a key={i} href="#" className="lift reveal" data-delay={i % 2 + 1} style={{
          position: "relative", overflow: "hidden",
          background: "var(--paper)",
          border: "1px solid rgba(0,29,107,0.10)",
          padding: 32,
          textDecoration: "none", color: "var(--ink-ink)",
          boxShadow: "var(--shadow-1)",
          display: "flex", flexDirection: "column", gap: 16,
          minHeight: 280
        }}>
            {/* Accent bar */}
            <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 4, background: c.accent }} />
            {/* Subtle radial */}
            <div style={{ position: "absolute", width: 280, height: 280, borderRadius: "50%", background: c.accent, opacity: 0.06, filter: "blur(40px)", right: -80, top: -80, pointerEvents: "none" }} />

            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-subtle)", letterSpacing: "0.1em", textTransform: "uppercase" }}>{c.eyebrow}</div>
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 24, letterSpacing: "-0.02em", lineHeight: 1.2, color: "var(--ink-900)" }}>{c.title}</div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
              {c.tags.map((t, j) =>
            <span key={j} style={{
              padding: "4px 10px",
              background: "var(--sky-50)", color: "var(--ink-900)",
              border: "1px solid rgba(0,29,107,0.08)",
              fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 11.5,
              letterSpacing: "-0.005em"
            }}>{t}</span>
            )}
            </div>
            <div style={{ fontFamily: "var(--font-sans)", fontSize: 14.5, lineHeight: 1.55, color: "var(--ink-muted)", flex: 1 }}>{c.body}</div>
            <div style={{ display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 13.5, color: "var(--ink-900)" }}>
              View proof <AjIcon.ArrowRight size={13} />
            </div>
          </a>
        )}
      </div>

      <div className="reveal" style={{ marginTop: 72, maxWidth: 760 }}>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-subtle)", letterSpacing: "0.11em", textTransform: "uppercase" }}>Case study outcomes</div>
        <h3 style={{ margin: "12px 0 0", fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "clamp(28px, 4vw, 46px)", lineHeight: 1.03, letterSpacing: "-0.035em", color: "var(--ink-900)" }}>Enterprise-wide AI adoption tied to real workflows</h3>
        <p style={{ margin: "16px 0 0", fontFamily: "var(--font-sans)", fontSize: 17, lineHeight: 1.6, color: "var(--ink-muted)" }}>Selected outcome signals from portfolio, education, government, and healthcare programs.</p>
      </div>

      <div style={{ marginTop: 36, display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 20 }} className="case-grid">
        {outcomes.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"
        }}>
            <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) { .proof-grid, .case-grid { grid-template-columns: 1fr !important; } .case-grid > a { grid-template-columns: 1fr !important; } }`}</style>
    </S>);

}

// ─── RELATED SERVICES section ───────────────────────────────────────
function RelatedSection() {
  const hub = { tag: "Workforce hub", title: "AI Workforce Enablement Services", body: "Use this when the enterprise-wide program needs a broader workforce enablement plan across leaders, managers, employees, and champions." };
  const others = [
  { tag: "Service detail", title: "AI Training and Enablement Services", body: "Use this when the buyer is comparing AI training partners, engagement models, rollout scope, and implementation support." },
  { tag: "Anthropic", title: "Claude Training for Teams", body: "Use this when the enterprise needs Claude-specific enablement from an official Anthropic partner." },
  { tag: "Engineering", title: "AI Coding Assistant Training", body: "Use this when engineering teams need Claude Code, Codex, GitHub Copilot, or Cursor training tied to repo safety, reviews, and delivery workflows." },
  { tag: "Microsoft", title: "Microsoft Copilot Training", body: "Use this when Microsoft 365 teams need Copilot Chat, Microsoft 365 Copilot, Copilot Studio, or Copilot Cowork enablement." }];

  return (
    <S tone="tint" padY={112}>
      <SectionHeader eyebrow="Related paths / services" title="Explore related AI training services" sub="Route adjacent needs into focused service pages without diluting this enterprise AI training story." />

      <a href="#" className="lift reveal" style={{
        marginTop: 48, display: "grid", gridTemplateColumns: "1fr auto", alignItems: "center", gap: 32,
        padding: "32px 40px",
        background: "linear-gradient(135deg, var(--ink-900) 0%, #052782 100%)",
        color: "white",
        textDecoration: "none",
        border: "1px solid rgba(151,194,247,0.20)",
        boxShadow: "0 24px 60px -20px rgba(0,29,107,0.45)",
        position: "relative", overflow: "hidden"
      }}>
        <div style={{ position: "absolute", width: 380, height: 380, borderRadius: "50%", background: "radial-gradient(circle, rgba(151,194,247,0.30), transparent 70%)", right: -80, top: -120 }} />
        <div style={{ position: "relative" }}>
          <Eyebrow tone="dark">{hub.tag}</Eyebrow>
          <div className="h3" style={{ marginTop: 14, fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 28, letterSpacing: "-0.02em", color: "var(--cream-100)" }}>{hub.title}</div>
          <div style={{ marginTop: 10, maxWidth: 720, fontFamily: "var(--font-sans)", fontSize: 15, lineHeight: 1.6, color: "rgba(255,255,255,0.78)" }}>{hub.body}</div>
        </div>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 8, fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 14, color: "var(--sky-400)", position: "relative" }}>
          Open path <AjIcon.ArrowRight size={14} />
        </div>
      </a>

      <div style={{ marginTop: 20, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }} className="related-grid">
        {others.map((p, i) =>
        <a key={i} href="#" className="lift reveal" data-delay={i % 4 + 1} style={{
          background: "var(--paper)",
          border: "1px solid rgba(0,29,107,0.10)",
          padding: 22,
          textDecoration: "none", color: "var(--ink-ink)",
          display: "flex", flexDirection: "column", gap: 12,
          minHeight: 220,
          boxShadow: "var(--shadow-1)"
        }}>
            <div style={{
            padding: "3px 8px",
            background: "var(--sky-50)", color: "var(--ink-900)",
            border: "1px solid rgba(0,29,107,0.08)",
            fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 11.5,
            letterSpacing: "-0.005em", alignSelf: "flex-start"
          }}>{p.tag}</div>
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 17, letterSpacing: "-0.015em", color: "var(--ink-900)", lineHeight: 1.25 }}>{p.title}</div>
            <div style={{ fontFamily: "var(--font-sans)", fontSize: 13.5, lineHeight: 1.55, color: "var(--ink-muted)", flex: 1 }}>{p.body}</div>
            <div style={{ display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 13, color: "var(--ink-900)" }}>Open path <AjIcon.ArrowRight size={12} /></div>
          </a>
        )}
      </div>
      <style>{`
        @media (max-width: 1100px) { .related-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 600px)  { .related-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </S>);

}

// ─── COMMON SCENARIOS section ───────────────────────────────────────
function ScenariosSection() {
  const scenarios = [
  { title: "Rolling out AI tools across the enterprise", body: "Many enterprises approve Claude, ChatGPT Enterprise, Microsoft 365 Copilot, Copilot Chat, Gemini, OpenAI Codex, GitHub Copilot, or an internal AI assistant before employees know which tasks belong in which tool. The result is scattered experimentation, duplicate effort, and inconsistent review habits. Ajaia builds enterprise-wide AI training so teams understand the approved stack, practice with real workflows, and learn when to use AI, when to verify, and when to avoid it." },
  { title: "Coordinating Claude, ChatGPT, Copilot, and Gemini training", body: "Claude training, ChatGPT training, Microsoft Copilot training, Gemini training, and broader employee AI training should not live in separate silos. Enterprises often need one adoption architecture that explains tool fit, data boundaries, prompt patterns, output review, manager coaching, and reinforcement. Ajaia can coordinate those layers so platform-specific sessions support the same enterprise operating model instead of creating competing habits." },
  { title: "Training engineering teams on AI coding agents", body: "Claude Code, OpenAI Codex, GitHub Copilot, Cursor, and internal coding agents change engineering workflows more deeply than chat tools do. Developers need rules for repo access, permission settings, test execution, branch hygiene, code review, prompt injection risks, and when an agent should stop for human judgment. Ajaia trains engineering teams to use coding assistants as accountable collaborators, not unchecked automation." },
  { title: "Preparing teams for agentic work and AI coworkers", body: "Copilot Cowork, Claude Cowork, and other agentic tools move from answering questions to executing multi-step work. That shift creates a new training need: employees must learn how to delegate outcomes, set checkpoints, approve actions, review deliverables, and keep sensitive work inside the right boundaries. Ajaia helps teams build these habits before autonomous workflows spread informally." },
  { title: "Turning training into sustained adoption", body: "A one-time workshop can raise awareness, but enterprise adoption usually depends on what happens after the session. Managers need language for coaching usage, champions need examples to share, and leaders need signals that show where training is changing behavior. Ajaia pairs live training with office hours, use-case libraries, and adoption review so the program keeps improving after launch." }];


  return (
    <S tone="light" padY={120}>
      <SectionHeader eyebrow="Common scenarios" title="Common enterprise AI training scenarios" sub="Ajaia builds enterprise AI training programs around the rollout problem buyers actually face: many teams, many workflows, multiple tools, and uneven adoption." />

      <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }} className="scenarios-grid">
        {scenarios.map((s, i) =>
        <div key={i} className="lift reveal" data-delay={i % 2 + 1} style={{
          background: "var(--paper)",
          border: "1px solid rgba(0,29,107,0.10)",
          padding: "28px 32px",
          boxShadow: "var(--shadow-1)",
          display: "flex", flexDirection: "column", gap: 14,
          position: "relative"
        }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <div style={{
              width: 30, height: 30,
              background: "var(--ink-900)", color: "var(--sky-400)",
              display: "grid", placeItems: "center",
              fontFamily: "var(--font-mono)", fontSize: 12, fontWeight: 700,
              letterSpacing: "-0.02em"
            }}>0{i + 1}</div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-subtle)", letterSpacing: "0.1em", textTransform: "uppercase" }}>Scenario</div>
            </div>
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 21, letterSpacing: "-0.015em", lineHeight: 1.25, color: "var(--ink-900)" }}>{s.title}</div>
            <div style={{ fontFamily: "var(--font-sans)", fontSize: 15, lineHeight: 1.65, color: "var(--ink-muted)", letterSpacing: "-0.002em" }}>{s.body}</div>
          </div>
        )}
      </div>
      <style>{`@media (max-width: 900px) { .scenarios-grid { grid-template-columns: 1fr !important; } }`}</style>
    </S>);

}

Object.assign(window, { S, SectionHeader, AnchorBar, PathsSection, ComparePathsSection, IncludedSection, MethodSection, ProofSection, RelatedSection, ScenariosSection });