/* global React */
// Sections — group D (added from slide reference imagery):
//  · DiscoverySection   — What we look for in discovery / What we design for
//  · CohortsSection     — How we organize your leaders (segmentation + columns)
//  · EngagementsSection — Single-day engagements (workshops vs lunch & learns)
//  · PilotSection       — What a pilot will unlock (3 audience outcomes)
//  · GoldStandardSection — AI Training is the Gold Standard (5 differentiators)
//
// All sections use the shared <S>, <Eyebrow>, <Squares>, <AjIcon> language
// and follow design system rhythm (Poppins display + sans body, ink-900 navy,
// sky-400 accent, square corners, paired-squares marker).

// ─── Shared diamond pictogram ───────────────────────────────────────
// A 45°-rotated square that holds a centered, un-rotated icon.
// Three tonal variants — deep, mid, light — used in the cohorts and
// discovery sections.
function Diamond({ tone = "deep", size = 64, icon }) {
  const palettes = {
    deep: { bg: "var(--ink-900)", fg: "white" },
    mid: { bg: "#3457C6", fg: "white" },
    light: { bg: "var(--sky-400)", fg: "var(--ink-900)" }
  };
  const p = palettes[tone];
  return (
    <div style={{
      width: size, height: size, flexShrink: 0,
      transform: "rotate(45deg)",
      background: p.bg,
      display: "grid", placeItems: "center",
      boxShadow: tone === "deep" ?
      "0 14px 28px -14px rgba(0,29,107,0.4)" :
      "0 10px 22px -12px rgba(0,29,107,0.25)"
    }}>
      <div style={{
        transform: "rotate(-45deg)",
        color: p.fg,
        display: "grid", placeItems: "center"
      }}>{icon}</div>
    </div>);

}

// ─── COHORTS — "How We Organize Your Leaders" ───────────────────────
function CohortsSection() {
  const groups = [
  {
    title: "By Leadership Level",
    body: "Directors, Sr. Managers, Managers, and Sr. ICs grouped so practice and pacing match scope of responsibility.",
    tone: "deep",
    icon: <AjIcon.Spark size={22} />
  },
  {
    title: "By Function",
    body: "Investment · Advisory · Operations · Technology — workflow labs tuned to the work each function actually does.",
    tone: "deep",
    icon: <AjIcon.Users size={22} />
  },
  {
    title: "By AI Literacy",
    body: "Foundational, Intermediate, or Advanced — placement set by a short pre-assessment so no one is bored or lost.",
    tone: "mid",
    icon: <AjIcon.Chart size={22} />
  },
  {
    title: "By Geography / Location",
    body: "Valley Forge · Scottsdale · Charlotte · Malvern — schedules and delivery shaped around how teams already gather.",
    tone: "light",
    icon: <AjIcon.Compass size={22} />
  }];


  return (
    <S tone="light" padY={120}>
      <div style={{
        display: "grid",
        gridTemplateColumns: "1.05fr 0.95fr",
        gap: 72,
        alignItems: "center"
      }} className="cohorts-grid">
        {/* LEFT — copy + segmentation list */}
        <div className="reveal">
          <Eyebrow>Cohort design</Eyebrow>
          <h2 className="h2" style={{
            marginTop: 18,
            fontFamily: "var(--font-display)", fontWeight: 700,
            fontSize: 44, lineHeight: 1.1, letterSpacing: "-0.025em",
            color: "var(--ink-900)", textWrap: "balance"
          }}>
            How we organize your leaders
          </h2>
          <p style={{
            marginTop: 16, maxWidth: 600,
            fontFamily: "var(--font-sans)", fontSize: 17, lineHeight: 1.6,
            color: "var(--ink-muted)", letterSpacing: "-0.005em",
            textWrap: "pretty"
          }}>
            Or mixed / cross-functional cohorts when peer learning is the goal.
          </p>

          <div style={{
            marginTop: 44,
            display: "flex", flexDirection: "column", gap: 22
          }}>
            {groups.map((g, i) =>
            <div key={i} className="reveal cohorts-row" data-delay={i % 4 + 1} style={{
              display: "grid",
              gridTemplateColumns: "64px 1fr",
              gap: 24, alignItems: "flex-start"
            }}>
                <div style={{ display: "grid", placeItems: "center", height: 64 }}>
                  <Diamond tone={g.tone} size={56} icon={g.icon} />
                </div>
                <div>
                  <div style={{
                  fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 19,
                  letterSpacing: "-0.015em", lineHeight: 1.25,
                  color: "var(--ink-900)"
                }}>{g.title}</div>
                  <div style={{
                  marginTop: 6,
                  fontFamily: "var(--font-sans)", fontSize: 14.5, lineHeight: 1.55,
                  color: "var(--ink-muted)", letterSpacing: "-0.002em",
                  textWrap: "pretty"
                }}>{g.body}</div>
                </div>
              </div>
            )}
          </div>
        </div>

        {/* RIGHT — cohort mapping visual */}
        <div className="reveal" style={{ position: "relative", minHeight: 480 }}>
          <CohortsMap />
        </div>
      </div>

      <style>{`
        @media (max-width: 1024px) {
          .cohorts-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
          .cohorts-grid > div:last-child { min-height: 360px !important; }
        }
      `}</style>
    </S>);

}

// Cohort mapping illustration — leaders are grouped by practical signals,
// then routed into a shared learning plan and adoption outcomes.
function CohortsMap() {
  const tracks = [
  { label: "Level", value: "4", top: 42, left: 22, color: "var(--ink-900)" },
  { label: "Function", value: "4", top: 132, left: 0, color: "#3457C6" },
  { label: "Literacy", value: "3", top: 222, left: 22, color: "var(--sky-400)" },
  { label: "Location", value: "4", top: 312, left: 0, color: "#6F8CFF" }];

  const outcomes = [
  { label: "Role labs", top: 78 },
  { label: "Peer cohorts", top: 168 },
  { label: "Adoption signals", top: 258 }];

  return (
    <div style={{
      position: "relative",
      width: "100%", height: "100%",
      minHeight: 480,
      display: "grid",
      placeItems: "center"
    }}>
      <div style={{
        position: "relative",
        width: "min(100%, 520px)",
        height: 430
      }}>
        <svg viewBox="0 0 520 430" aria-hidden="true" style={{
          position: "absolute", inset: 0,
          width: "100%", height: "100%",
          overflow: "visible"
        }}>
          <defs>
            <linearGradient id="cohortFlow" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0%" stopColor="#97C2F8" stopOpacity="0.25" />
              <stop offset="100%" stopColor="#3457C6" stopOpacity="0.8" />
            </linearGradient>
          </defs>
          {tracks.map((t, i) =>
          <path key={`in-${i}`} d={`M ${t.left + 112} ${t.top + 34} C 205 ${t.top + 34}, 214 215, 258 215`}
            fill="none" stroke="url(#cohortFlow)" strokeWidth="2.5" strokeLinecap="square" />
          )}
          {outcomes.map((o, i) =>
          <path key={`out-${i}`} d={`M 322 215 C 370 215, 374 ${o.top + 28}, 410 ${o.top + 28}`}
            fill="none" stroke="url(#cohortFlow)" strokeWidth="2.5" strokeLinecap="square" />
          )}
        </svg>

        {tracks.map((t, i) =>
        <div key={t.label} className="lift" style={{
          position: "absolute",
          top: t.top, left: t.left,
          width: 126,
          padding: "15px 16px",
          background: "var(--paper)",
          border: "1px solid rgba(0,29,107,0.10)",
          boxShadow: "var(--shadow-1)"
        }}>
            <div style={{
            display: "flex", alignItems: "center", justifyContent: "space-between",
            gap: 12
          }}>
              <span style={{
              width: 34, height: 34,
              background: t.color,
              color: t.color === "var(--sky-400)" ? "var(--ink-900)" : "white",
              display: "grid", placeItems: "center",
              fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 18
            }}>{t.value}</span>
              <span style={{
              flex: 1,
              fontFamily: "var(--font-mono)", fontWeight: 700, fontSize: 10.5,
              letterSpacing: "0.12em", textTransform: "uppercase",
              color: "var(--ink-subtle)"
            }}>{t.label}</span>
            </div>
          </div>
        )}

        <div style={{
          position: "absolute",
          left: "50%", top: "50%",
          transform: "translate(-50%, -50%)",
          width: 150, height: 150,
          background: "var(--ink-900)",
          color: "white",
          display: "grid",
          placeItems: "center",
          boxShadow: "0 28px 70px -28px rgba(0,29,107,0.55)"
        }}>
          <div style={{
            position: "absolute", inset: 12,
            border: "1px solid rgba(151,194,247,0.32)"
          }} />
          <div style={{ textAlign: "center", position: "relative", zIndex: 1 }}>
            <div style={{
              margin: "0 auto 14px",
              width: 42, height: 42,
              background: "var(--sky-400)",
              color: "var(--ink-900)",
              display: "grid", placeItems: "center"
            }}><AjIcon.Layers size={20} /></div>
            <div style={{
              fontFamily: "var(--font-display)", fontWeight: 700,
              fontSize: 21, lineHeight: 1.05, letterSpacing: "-0.015em"
            }}>Learning<br />plan</div>
          </div>
        </div>

        {outcomes.map((o, i) =>
        <div key={o.label} style={{
          position: "absolute",
          top: o.top, right: 0,
          width: 126,
          padding: "14px 15px",
          background: i === 2 ? "var(--sky-50)" : "rgba(255,255,255,0.82)",
          border: "1px solid rgba(0,29,107,0.10)",
          boxShadow: i === 1 ? "var(--shadow-1)" : "none"
        }}>
            <div style={{
            width: 7, height: 7,
            background: i === 0 ? "var(--ink-900)" : i === 1 ? "#3457C6" : "var(--sky-400)",
            marginBottom: 10
          }} />
            <div style={{
            fontFamily: "var(--font-display)", fontWeight: 700,
            fontSize: 15, lineHeight: 1.2,
            color: "var(--ink-900)", letterSpacing: "-0.01em"
          }}>{o.label}</div>
          </div>
        )}

        <div style={{
          position: "absolute",
          left: 186, bottom: 8,
          width: 148, height: 50,
          display: "grid",
          gridTemplateColumns: "repeat(7, 1fr)",
          alignItems: "end",
          gap: 6
        }}>
          {[30, 20, 36, 24, 42, 28, 48].map((h, i) =>
          <span key={i} style={{
            height: h,
            background: i % 3 === 0 ? "var(--ink-900)" : i % 3 === 1 ? "#3457C6" : "var(--sky-400)"
          }} />
          )}
        </div>
      </div>

      {/* Decorative paired squares */}
      <span style={{ position: "absolute", top: 0, right: 12, width: 12, height: 12, background: "var(--sky-400)" }} />
      <span style={{ position: "absolute", top: 12, right: 0, width: 12, height: 12, background: "var(--sky-400)" }} />
    </div>);

}

// ─── ENGAGEMENTS — "Single Day Engagements" ─────────────────────────
function EngagementsSection() {
  const cards = [
  {
    title: "Half to Full Day Workshops",
    sub: "Comprehensive instructor-led sessions covering core AI competencies.",
    themes: [
    "AI Fundamentals",
    "High-Value AI Use Opportunity Mapping",
    "Responsible AI Usage",
    "Strategic Analysis",
    "Role-Based AI Training",
    "Industry-Specific AI Implementation",
    "Human-in-the-Loop Protocols"],

    icon: <AjIcon.Layers size={22} />,
    duration: "4–8 hrs"
  },
  {
    title: "Multi-Day Enablement Programs",
    sub: "A deeper rollout format for cohorts that need practice, reinforcement, and manager follow-through across several sessions.",
    themes: [
    "Discovery and role mapping",
    "Tool-fit workflow labs",
    "Prompt and review standards",
    "Manager coaching guides",
    "Champion enablement",
    "Office hours and reinforcement",
    "Adoption signal review"],

    icon: <AjIcon.Workflow size={22} />,
    duration: "2–6 days"
  },
  {
    title: "Lunch & Learns",
    sub: "Low-commitment one-hour sessions for quick wins and awareness building.",
    themes: [
    "AI Use Case Showcases",
    "Tool Spotlight Series",
    "Quick Wins Workshop",
    "AI Ethics Roundtable",
    "Industry Trend Briefings",
    "Quality Assurance Standards",
    "Prompt Mastery"],

    icon: <AjIcon.Bolt size={22} />,
    duration: "1 hr"
  }];


  return (
    <S id="ajaia-cluster-formats" tone="tint" padY={120}>
      <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 56, alignItems: "center" }} className="engagements-header">
        <EngagementsGlyph />
        <div className="reveal">
          <Eyebrow>Formats</Eyebrow>
          <h2 style={{
            marginTop: 16,
            fontFamily: "var(--font-display)", fontWeight: 700,
            fontSize: 52, lineHeight: 1.05, letterSpacing: "-0.03em",
            color: "var(--ink-900)", textWrap: "balance"
          }}>
            Engagement formats for enterprise AI training
          </h2>
          <p style={{
            marginTop: 14, maxWidth: 640,
            fontFamily: "var(--font-sans)", fontSize: 16.5, lineHeight: 1.6,
            color: "var(--ink-muted)", letterSpacing: "-0.005em",
            textWrap: "pretty"
          }}>
            Choose the format around adoption depth: focused single-day workshops, multi-day enablement programs, or short awareness sessions that seed broader training.
          </p>
        </div>
      </div>

      <div style={{
        marginTop: 64,
        display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20
      }} className="engagements-grid">
        {cards.map((c, i) =>
        <div key={i} className="lift reveal" data-delay={i % 2 + 1} style={{
          position: "relative",
          background: "var(--paper)",
          border: "1px solid rgba(0,29,107,0.10)",
          padding: "36px 36px 32px",
          boxShadow: "var(--shadow-1)",
          display: "flex", flexDirection: "column", gap: 22,
          overflow: "hidden"
        }}>
            {/* Accent bar */}
            <div style={{
            position: "absolute", top: 0, left: 0, right: 0,
            height: 4, background: i === 0 ? "var(--ink-900)" : "var(--sky-400)"
          }} />

            <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
              <div style={{
              width: 44, height: 44,
              background: i === 0 ? "var(--ink-900)" : "var(--sky-400)",
              color: i === 0 ? "var(--sky-400)" : "var(--ink-900)",
              display: "grid", placeItems: "center"
            }}>{c.icon}</div>
              <div style={{ flex: 1 }}>
                <div style={{
                fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 24,
                letterSpacing: "-0.02em", lineHeight: 1.2, color: "var(--ink-900)"
              }}>{c.title}</div>
              </div>
              <span style={{
              padding: "5px 10px",
              background: "var(--sky-50)", color: "var(--ink-900)",
              border: "1px solid rgba(0,29,107,0.08)",
              fontFamily: "var(--font-mono)", fontWeight: 600, fontSize: 11,
              letterSpacing: "0.08em", textTransform: "uppercase",
              whiteSpace: "nowrap"
            }}>{c.duration}</span>
            </div>

            <p style={{
            fontFamily: "var(--font-sans)", fontStyle: "italic",
            fontSize: 15, lineHeight: 1.55,
            color: "var(--ink-muted)", letterSpacing: "-0.002em",
            margin: 0
          }}>{c.sub}</p>

            <div style={{
            paddingTop: 18,
            borderTop: "1px solid rgba(0,29,107,0.08)",
            fontFamily: "var(--font-mono)", fontSize: 11,
            color: "var(--ink-subtle)", letterSpacing: "0.14em",
            textTransform: "uppercase"
          }}>Common engagement themes</div>

            <ul style={{
            margin: 0, padding: 0, listStyle: "none",
            display: "flex", flexDirection: "column", gap: 10
          }}>
              {c.themes.map((t, j) =>
            <li key={j} style={{
              display: "flex", alignItems: "flex-start", gap: 12,
              fontFamily: "var(--font-sans)", fontSize: 14.5, lineHeight: 1.5,
              color: "var(--ink-ink)", letterSpacing: "-0.002em"
            }}>
                  <span style={{
                width: 6, height: 6, marginTop: 8, flexShrink: 0,
                background: i === 0 ? "var(--ink-900)" : "var(--sky-400)"
              }} />
                  {t}
                </li>
            )}
            </ul>
          </div>
        )}
      </div>

      <style>{`
        @media (max-width: 900px) {
          .engagements-grid { grid-template-columns: 1fr !important; }
          .engagements-header { grid-template-columns: 1fr !important; gap: 24px !important; }
        }
      `}</style>
    </S>);

}

// Small geometric "engagement" pictogram — instructor + screens silhouette
function EngagementsGlyph() {
  return (
    <div className="reveal" style={{
      width: 220, height: 180, flexShrink: 0,
      position: "relative",
      background: "var(--paper)",
      border: "1px solid rgba(0,29,107,0.10)",
      boxShadow: "var(--shadow-1)",
      padding: 18
    }}>
      <svg viewBox="0 0 200 160" width="100%" height="100%">
        {/* Screen left */}
        <rect x="6" y="20" width="60" height="44" fill="none" stroke="var(--ink-900)" strokeWidth="2" />
        <rect x="12" y="26" width="16" height="6" fill="var(--sky-400)" />
        <rect x="32" y="26" width="28" height="3" fill="var(--ink-900)" opacity="0.4" />
        <rect x="32" y="32" width="22" height="3" fill="var(--ink-900)" opacity="0.4" />
        <rect x="12" y="40" width="48" height="3" fill="var(--ink-900)" opacity="0.2" />
        <rect x="12" y="46" width="32" height="3" fill="var(--ink-900)" opacity="0.2" />
        <rect x="12" y="52" width="40" height="3" fill="var(--ink-900)" opacity="0.2" />

        {/* Screen right */}
        <rect x="134" y="20" width="60" height="44" fill="none" stroke="var(--ink-900)" strokeWidth="2" />
        <rect x="140" y="26" width="48" height="3" fill="var(--ink-900)" opacity="0.4" />
        <circle cx="146" cy="38" r="3.5" fill="var(--sky-400)" />
        <rect x="154" y="36" width="32" height="3" fill="var(--ink-900)" opacity="0.3" />
        <circle cx="146" cy="48" r="3.5" fill="var(--ink-900)" opacity="0.5" />
        <rect x="154" y="46" width="28" height="3" fill="var(--ink-900)" opacity="0.3" />
        <circle cx="146" cy="58" r="3.5" fill="var(--ink-900)" opacity="0.5" />
        <rect x="154" y="56" width="22" height="3" fill="var(--ink-900)" opacity="0.3" />

        {/* Instructor (center pedestal) */}
        <circle cx="100" cy="56" r="9" fill="var(--ink-900)" />
        <path d="M88 90 L88 76 Q100 68 112 76 L112 90 Z" fill="var(--ink-900)" />
        <rect x="86" y="90" width="28" height="6" fill="var(--sky-400)" />
        {/* Audience */}
        <circle cx="40" cy="120" r="6" fill="var(--ink-900)" />
        <path d="M30 138 Q40 128 50 138 Z" fill="var(--ink-900)" />
        <circle cx="80" cy="124" r="6" fill="var(--ink-900)" />
        <path d="M70 142 Q80 132 90 142 Z" fill="var(--ink-900)" />
        <circle cx="120" cy="124" r="6" fill="var(--ink-900)" />
        <path d="M110 142 Q120 132 130 142 Z" fill="var(--ink-900)" />
        <circle cx="160" cy="120" r="6" fill="var(--ink-900)" />
        <path d="M150 138 Q160 128 170 138 Z" fill="var(--ink-900)" />
        {/* Speech rays */}
        <path d="M88 60 L70 70" stroke="var(--ink-900)" strokeWidth="1.2" strokeDasharray="2 3" />
        <path d="M112 60 L130 70" stroke="var(--ink-900)" strokeWidth="1.2" strokeDasharray="2 3" />
      </svg>
      <span style={{ position: "absolute", top: -6, right: 6, width: 8, height: 8, background: "var(--sky-400)" }} />
      <span style={{ position: "absolute", top: 6, right: -6, width: 8, height: 8, background: "var(--sky-400)" }} />
    </div>);

}

// ─── PILOT — "What A Pilot Will Unlock" ─────────────────────────────
function PilotSection() {
  const audiences = [
  {
    who: "For Cohort Leaders",
    body: "Builds practical AI confidence they can apply in their role and model with their teams."
  },
  {
    who: "For L&D Team",
    body: "Helps define a scalable enablement model for leadership AI learning and future rollout."
  },
  {
    who: "For Vanguard",
    body: "Creates proof points for responsible AI adoption and momentum toward an AI-capable leadership culture."
  }];


  return (
    <S tone="light" padY={0} style={{ padding: 0 }}>
      <div className="pilot-split" style={{
        display: "grid",
        gridTemplateColumns: "minmax(360px, 420px) 1fr",
        minHeight: 600
      }}>
        {/* LEFT — navy panel with lock + title */}
        <div className="reveal" style={{
          position: "relative", overflow: "hidden",
          background: "var(--ink-900)",
          color: "white",
          padding: "100px 56px",
          display: "flex", flexDirection: "column", justifyContent: "center"
        }}>
          {/* Subtle accent */}
          <div style={{
            position: "absolute", width: 420, height: 420, borderRadius: "50%",
            background: "radial-gradient(circle, rgba(151,194,247,0.18), transparent 70%)",
            right: -160, bottom: -160, pointerEvents: "none"
          }} />

          {/* Lock + key glyph */}
          <svg viewBox="0 0 72 80" width="64" height="72" style={{ display: "block", marginBottom: 28 }}>
            <path d="M22 36 V26 a14 14 0 0 1 28 0 V36"
            fill="none" stroke="white" strokeWidth="3" strokeLinecap="square" />
            <rect x="14" y="36" width="44" height="36" fill="none" stroke="white" strokeWidth="3" />
            {/* Key */}
            <circle cx="36" cy="50" r="5" fill="none" stroke="white" strokeWidth="3" />
            <path d="M36 55 V66 M33 62 H39" stroke="white" strokeWidth="3" strokeLinecap="square" />
          </svg>

          <Eyebrow tone="dark">Pilot outcomes</Eyebrow>
          <h2 style={{
            marginTop: 18,
            fontFamily: "var(--font-display)", fontWeight: 700,
            fontSize: 40, lineHeight: 1.08, letterSpacing: "-0.025em",
            color: "white", textWrap: "balance"
          }}>
            What a pilot will <span style={{ color: "var(--sky-400)" }}>unlock</span>
          </h2>
          <p style={{
            marginTop: 18, maxWidth: 360,
            fontFamily: "var(--font-sans)", fontStyle: "italic",
            fontSize: 16, lineHeight: 1.55,
            color: "rgba(255,255,255,0.78)", letterSpacing: "-0.005em",
            textWrap: "pretty"
          }}>
            Build leader capability while generating the insight needed to shape broader rollout.
          </p>

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

        {/* RIGHT — three audience rows on white */}
        <div style={{
          padding: "80px 80px",
          display: "flex", flexDirection: "column", gap: 16,
          background: "var(--paper)"
        }} className="pilot-rows">
          {audiences.map((a, i) =>
          <div key={i} className="lift reveal pilot-row" data-delay={i % 3 + 1} style={{
            position: "relative",
            display: "grid",
            gridTemplateColumns: "minmax(240px, 0.9fr) 1fr",
            gap: 32,
            alignItems: "center",
            padding: "32px 36px",
            background: "var(--sky-50)",
            border: "1px solid rgba(0,29,107,0.08)"
          }}>
              {/* Step rail */}
              <div style={{
              position: "absolute", left: 0, top: 0, bottom: 0,
              width: 4, background: "var(--ink-900)"
            }} />

              <div style={{
              display: "flex", alignItems: "center", gap: 14
            }}>
                <span style={{
                fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 700,
                color: "var(--ink-subtle)", letterSpacing: "0.16em"
              }}>0{i + 1}</span>
                <div style={{
                fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 22,
                letterSpacing: "-0.015em", color: "var(--ink-900)", lineHeight: 1.2
              }}>{a.who}</div>
              </div>
              <div style={{
              fontFamily: "var(--font-sans)", fontSize: 15, lineHeight: 1.6,
              color: "var(--ink-muted)", letterSpacing: "-0.002em",
              textWrap: "pretty"
            }}>{a.body}</div>
            </div>
          )}

          <div style={{
            marginTop: 14,
            fontFamily: "var(--font-sans)", fontStyle: "italic",
            fontSize: 12.5, lineHeight: 1.55,
            color: "var(--ink-subtle)"
          }}>
            **Optional white paper, executive brief, and PR materials that position your organization as a leader in AI for investors, clients, and the market.
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 1024px) {
          .pilot-split { grid-template-columns: 1fr !important; }
          .pilot-split > div:first-child { padding: 64px 40px !important; }
          .pilot-rows { padding: 56px 40px !important; }
        }
        @media (max-width: 640px) {
          .pilot-row { grid-template-columns: 1fr !important; gap: 14px !important; padding: 24px !important; }
        }
      `}</style>
    </S>);

}

// ─── DISCOVERY — "What We Look For / What We Design For" ────────────
function DiscoverySection() {
  const lookFor = [
  {
    title: "Context",
    bullets: ["Business functions", "Operating model", "Risk environment"],
    icon: <AjIcon.Book size={22} />,
    tone: "deep"
  },
  {
    title: "Workflows",
    bullets: ["Leader decisions", "Team workflows", "Existing tools"],
    icon: <AjIcon.Chart size={22} />,
    tone: "deep"
  },
  {
    title: "Readiness",
    bullets: ["AI literacy", "Learning ecosystem", "Support needs"],
    icon: <AjIcon.Layers size={22} />,
    tone: "deep"
  }];


  const designFor = [
  { label: "Safe and Responsible Use", sub: "Human in the loop", icon: <AjIcon.Shield size={22} /> },
  { label: "Practical Application", icon: <AjIcon.Workflow size={22} /> },
  { label: "Observable Behavior Change", icon: <AjIcon.Chart size={22} /> },
  { label: "Business Relevance", icon: <AjIcon.Briefcase size={20} /> },
  { label: "Scalable Enablement Model", icon: <AjIcon.Users size={22} /> }];


  return (
    <S tone="light" padY={0} style={{ padding: 0 }}>
      <div className="discovery-split" style={{
        display: "grid", gridTemplateColumns: "1fr 1fr",
        minHeight: 720
      }}>
        {/* LEFT — light side, "What we look for" */}
        <div className="reveal" style={{
          background: "var(--paper)",
          padding: "112px 80px",
          position: "relative"
        }}>
          <Eyebrow>Inputs</Eyebrow>
          <h3 style={{
            marginTop: 16,
            fontFamily: "var(--font-display)", fontWeight: 700,
            fontSize: 32, lineHeight: 1.12, letterSpacing: "-0.02em",
            color: "var(--ink-900)", textWrap: "balance"
          }}>
            What we look for in discovery
          </h3>

          <div style={{
            marginTop: 40,
            display: "flex", flexDirection: "column", gap: 24
          }}>
            {lookFor.map((g, i) =>
            <div key={i} className="reveal" data-delay={i % 3 + 1} style={{
              display: "grid", gridTemplateColumns: "80px 1fr",
              gap: 24, alignItems: "center",
              padding: "20px 24px",
              background: "var(--sky-50)",
              border: "1px solid rgba(0,29,107,0.08)",
              position: "relative"
            }}>
                <div style={{ display: "grid", placeItems: "center", height: 64 }}>
                  <Diamond tone={g.tone} size={58} icon={g.icon} />
                </div>
                <div>
                  <div style={{
                  fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 22,
                  letterSpacing: "0.04em", textTransform: "uppercase",
                  color: "var(--ink-900)", lineHeight: 1
                }}>{g.title}</div>
                  <ul style={{
                  margin: "10px 0 0", padding: 0, listStyle: "none",
                  display: "flex", flexDirection: "column", gap: 4
                }}>
                    {g.bullets.map((b, j) =>
                  <li key={j} style={{
                    display: "flex", alignItems: "center", gap: 8,
                    fontFamily: "var(--font-sans)", fontSize: 14.5, lineHeight: 1.5,
                    color: "var(--ink-ink)"
                  }}>
                        <span style={{ width: 4, height: 4, background: "var(--ink-900)", flexShrink: 0 }} />
                        {b}
                      </li>
                  )}
                  </ul>
                </div>
              </div>
            )}
          </div>
        </div>

        {/* RIGHT — navy side, "What we design for" */}
        <div className="reveal" style={{
          background: "var(--ink-900)",
          color: "white",
          padding: "112px 80px",
          position: "relative", overflow: "hidden"
        }}>
          <div style={{
            position: "absolute", width: 440, height: 440, borderRadius: "50%",
            background: "radial-gradient(circle, rgba(151,194,247,0.16), transparent 70%)",
            right: -160, top: -160, pointerEvents: "none"
          }} />

          <Eyebrow tone="dark">Outputs</Eyebrow>
          <h3 style={{
            marginTop: 16,
            fontFamily: "var(--font-display)", fontWeight: 700,
            fontSize: 32, lineHeight: 1.12, letterSpacing: "-0.02em",
            color: "white", textWrap: "balance",
            position: "relative"
          }}>
            What we design for based on discovery
          </h3>

          <div style={{
            marginTop: 40,
            display: "flex", flexDirection: "column", gap: 12,
            position: "relative"
          }}>
            {designFor.map((d, i) =>
            <div key={i} className="reveal" data-delay={i % 5 + 1} style={{
              display: "grid", gridTemplateColumns: "64px 1fr",
              gap: 18, alignItems: "center",
              padding: "16px 22px",
              background: "rgba(151,194,247,0.18)",
              border: "1px solid rgba(151,194,247,0.35)"
            }}>
                <div style={{
                width: 48, height: 48,
                background: "rgba(151,194,247,0.30)",
                border: "1px solid rgba(151,194,247,0.50)",
                display: "grid", placeItems: "center",
                color: "white"
              }}>{d.icon}</div>
                <div>
                  <div style={{
                  fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 18,
                  letterSpacing: "-0.01em", color: "white", lineHeight: 1.25
                }}>{d.label}</div>
                  {d.sub &&
                <div style={{
                  marginTop: 3,
                  fontFamily: "var(--font-sans)", fontStyle: "italic",
                  fontSize: 13, color: "var(--sky-400)"
                }}>{d.sub}</div>
                }
                </div>
              </div>
            )}
          </div>

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

      <style>{`
        @media (max-width: 1024px) {
          .discovery-split { grid-template-columns: 1fr !important; min-height: 0 !important; }
          .discovery-split > div { padding: 72px 40px !important; }
        }
      `}</style>
    </S>);

}

// ─── GOLD STANDARD — "AI Training is the Gold Standard" ─────────────
function GoldStandardSection() {
  const points = [
  { title: "Bespoke", body: "We develop the program around your specific business goals and pain points." },
  { title: "Bleeding-Edge Access", body: "Our curriculum is constantly updated to reflect AI's latest capabilities and models." },
  { title: "Adoption-Centric Methodology", body: "Success is measured by behavioral change and workflow integration." },
  { title: "Real-World Business and Engineering Expertise", body: "Training grounded in how these models actually work and where AI is generating ROI in industry." },
  { title: "Safety & Governance First", body: "Responsible scaling and risk mitigation are woven into the DNA of our training." }];


  return (
    <S tone="light" padY={0} style={{ padding: 0 }}>
      <div className="gold-split" style={{
        display: "grid",
        gridTemplateColumns: "minmax(360px, 460px) 1fr",
        minHeight: 640
      }}>
        {/* LEFT — navy panel with logo lockup */}
        <div className="reveal" style={{
          position: "relative", overflow: "hidden",
          background: "linear-gradient(180deg, #2D44A7 0%, #1B2D7A 100%)",
          color: "white",
          padding: "112px 64px",
          display: "flex", flexDirection: "column", justifyContent: "center"
        }}>
          <div style={{
            position: "absolute", inset: 0, opacity: 0.4,
            backgroundImage: `
              repeating-linear-gradient(0deg,
                rgba(255,255,255,0.04) 0 1px, transparent 1px 36px),
              repeating-linear-gradient(90deg,
                rgba(255,255,255,0.04) 0 1px, transparent 1px 36px)`,
            pointerEvents: "none"
          }} />

          <img src={window.__resources.ajaiaLogoWhite} alt="Ajaia"
          style={{ width: 240, height: "auto", display: "block", position: "relative" }} />

          <h2 style={{
            marginTop: 36,
            fontFamily: "var(--font-display)", fontWeight: 700,
            fontSize: 48, lineHeight: 1.08, letterSpacing: "-0.03em",
            color: "white", textWrap: "balance", position: "relative"
          }}>
            <span style={{ color: "var(--sky-400)" }}>AI Training</span>{" "}
            is the <span style={{ display: "block" }}>Gold Standard</span>
          </h2>

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

        {/* RIGHT — numbered list of differentiators */}
        <div style={{
          padding: "96px 80px",
          background: "var(--paper)",
          display: "flex", flexDirection: "column", justifyContent: "center", gap: 28
        }} className="gold-rows">
          {points.map((p, i) =>
          <div key={i} className="reveal" data-delay={i % 5 + 1} style={{
            display: "grid", gridTemplateColumns: "auto 1fr",
            gap: 24, alignItems: "flex-start"
          }}>
              <div style={{
              width: 56, height: 56, borderRadius: "50%",
              background: "#3457C6",
              color: "white",
              display: "grid", placeItems: "center",
              fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 22,
              boxShadow: "0 8px 20px -8px rgba(0,29,107,0.40)",
              flexShrink: 0
            }}>{i + 1}</div>

              <div style={{ paddingTop: 6 }}>
                <span style={{
                fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 19,
                letterSpacing: "-0.015em", color: "var(--ink-900)",
                marginRight: 6
              }}>{p.title}:</span>
                <span style={{
                fontFamily: "var(--font-sans)", fontSize: 16, lineHeight: 1.55,
                color: "var(--ink-muted)", letterSpacing: "-0.002em"
              }}>{p.body}</span>
              </div>
            </div>
          )}
        </div>
      </div>

      <style>{`
        @media (max-width: 1024px) {
          .gold-split { grid-template-columns: 1fr !important; min-height: 0 !important; }
          .gold-split > div { padding: 72px 40px !important; }
        }
      `}</style>
    </S>);

}

Object.assign(window, {
  CohortsSection,
  EngagementsSection,
  PilotSection,
  DiscoverySection,
  GoldStandardSection
});
