// fde-components.jsx
// FDE page sections — registered on window.FormativeSite.sections
// Load order: tweaks-panel.jsx → site-components.jsx → fde-components.jsx → render call

// ── Design tokens ─────────────────────────────────────────────────────────────
const TEAL  = "#00e5c3";
const VOID  = "#111114";
const SURF  = "#16161a";
const TEXT  = "#e8e8ef";
const MUTED = "rgba(232,232,239,0.55)";
const HAIR  = "rgba(255,255,255,0.07)";
const BLUE  = "#3b7cf4";

// ── Console constants (each Babel script compiles in its own scope, so these
//    must be re-declared here; values mirror site-components.jsx exactly) ──────
const FDE_F_PATH     = "M 183,155 L 183,7 L 17,7 L 17,203 L 118,203 L 118,155 L 183,155";
const FDE_F_LEN      = 724;
const FDE_COMET_DUR  = "2.5s";
const FDE_TIP_DELAY  = "-0.207s";
const FDE_BODY_DELAY = "-0.076s";
const FDE_SHIMMER_MS = 2800;
const FDE_PHRASES    = [
  "Formulating", "Architecting", "Orchestrating", "Synthesizing", "Forging",
  "Bootstrapping", "Calibrating", "Incubating", "Distilling", "Cogitating",
];

// ── CIO figure — picked once per page load from the funchar set ──────────────
// Tracks seen figures in localStorage so each load shows an unseen one;
// when all have been seen the cycle resets (skipping the one just shown).
const FDE_FIGURE_SRC = (() => {
  const KEY = "fdeFuncharSeen";
  const ALL = [0, 1, 2, 3, 4];
  let seen = [];
  try { seen = (JSON.parse(localStorage.getItem(KEY)) || []).filter(i => ALL.includes(i)); } catch (e) {}
  let pool = ALL.filter(i => !seen.includes(i));
  if (pool.length === 0) {
    pool = ALL.filter(i => i !== seen[seen.length - 1]);
    seen = [];
  }
  const pick = pool[Math.floor(Math.random() * pool.length)];
  try { localStorage.setItem(KEY, JSON.stringify([...seen, pick])); } catch (e) {}
  return `uploads/funchar${pick}.png`;
})();

// ── Scroll-reveal hook ────────────────────────────────────────────────────────
// IntersectionObserver-based — fires once when element enters viewport, then disconnects.
function useReveal(threshold = 0.1) {
  const ref = React.useRef(null);
  const [on, setOn] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el || on) return;
    const obs = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) { setOn(true); obs.disconnect(); } },
      { threshold, rootMargin: "0px 0px -40px 0px" }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, [on]);
  return [ref, on];
}

// Returns inline style object for a reveal element, with optional stagger delay
function revealStyle(on, delay = 0) {
  return {
    opacity: on ? 1 : 0,
    transform: on ? "translateY(0)" : "translateY(24px)",
    transition: `opacity 0.72s cubic-bezier(0.16,1,0.3,1) ${delay}ms, transform 0.72s cubic-bezier(0.16,1,0.3,1) ${delay}ms`,
  };
}

// ── Shared eyebrow label ──────────────────────────────────────────────────────
function Eyebrow({ children, style = {} }) {
  return (
    <p style={{
      fontFamily: "'IBM Plex Mono', monospace",
      fontSize: 10,
      fontWeight: 400,
      color: TEAL,
      letterSpacing: "0.14em",
      textTransform: "uppercase",
      marginBottom: 22,
      ...style,
    }}>
      {children}
    </p>
  );
}

// ── Section 01: FdeHero ───────────────────────────────────────────────────────
// Full-bleed image with a frosted-glass card over the left side.
// On mobile the card goes full-width and the image peeks above.
function FdeHero({ tweaks = {} }) {
  const [phraseIdx, setPhraseIdx] = React.useState(0);
  const [dotCount,  setDotCount]  = React.useState(1);
  const [fading,    setFading]    = React.useState(false);

  React.useEffect(() => {
    setDotCount(1);
    let n = 1;
    const iv = setInterval(() => { n++; setDotCount(n); if (n >= 3) clearInterval(iv); }, 550);
    return () => clearInterval(iv);
  }, [phraseIdx]);

  const handleShimmerEnd = () => {
    setFading(true);
    setTimeout(() => { setPhraseIdx(i => (i + 1) % FDE_PHRASES.length); setFading(false); }, 320);
  };

  const [panelHovered, setPanelHovered] = React.useState(false);

  const advancePhrase = () => {
    if (fading) return;
    setFading(true);
    setTimeout(() => { setPhraseIdx(i => (i + 1) % FDE_PHRASES.length); setFading(false); }, 200);
  };

  // ── 3D tilt: two states only — scroll-driven (0→100px = tilted→flat) + tap toggle ──
  const cardRef = React.useRef(null);
  const [cardHov,    setCardHov]    = React.useState(false);
  const [tapFlat,    setTapFlat]    = React.useState(false);
  const [scrollProg, setScrollProg] = React.useState(0);

  React.useEffect(() => {
    const onScroll = () => setScrollProg(Math.min(window.scrollY / 50, 1));
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const tiltProg = tapFlat ? 1 : scrollProg;
  const tiltRy   = 28 * (1 - tiltProg);
  const tiltRx   = 10 * (1 - tiltProg);

  const onCardEnter = () => { setCardHov(true); setPanelHovered(true); };
  const onCardLeave = () => { setCardHov(false); setPanelHovered(false); };
  const onCardTap   = () => setTapFlat(f => !f);

  // ── CIO figure: defer the entry/float animation until the PNG has loaded ──
  // The funchar images are large, so the animation should only run once the
  // bytes are decoded. Covers the cached case (img.complete on mount) too.
  const figureRef = React.useRef(null);
  const [figureLoaded, setFigureLoaded] = React.useState(false);
  React.useEffect(() => {
    const img = figureRef.current;
    if (img && img.complete && img.naturalWidth > 0) setFigureLoaded(true);
  }, []);

  return (
    <section className="fde-hero-section" style={{
      position: "relative",
      background: VOID,
      overflow: "hidden",
      display: "flex",
      alignItems: "center",
    }}>
      <style>{`
        /* ── Full-viewport height — svh fixes Chrome mobile toolbar ── */
        .fde-hero-section,
        .fde-hero-wrap { min-height: 100vh; min-height: 100svh; }

        /* ── Image slow drift ── */
        @keyframes fdeHeroDrift {
          0%   { transform: scale(1.05) translate(0px, 0px); }
          50%  { transform: scale(1.05) translate(-8px, -5px); }
          100% { transform: scale(1.05) translate(0px, 0px); }
        }
        .fde-hero-img { animation: fdeHeroDrift 20s ease-in-out infinite; }
        @media (prefers-reduced-motion: reduce) {
          .fde-hero-img { animation: none; transform: scale(1.05); }
        }

        /* ── Float wrapper: entry fade-up + continuous bob ── */
        @keyframes fdeHeroEntry {
          from { opacity: 0; transform: translateY(32px); }
          to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes fdeHeroFloat {
          0%, 100% { transform: translateY(0px); }
          50%       { transform: translateY(-18px); }
        }
        .fde-hero-float-wrap {
          animation:
            fdeHeroEntry 0.9s cubic-bezier(0.16,1,0.3,1) 0.12s both,
            fdeHeroFloat 5s ease-in-out 1.05s infinite;
        }
        .fde-hero-float-paused { animation-play-state: paused !important; }

        /* ── Card: perspective tilt via inline style, smooth transition ── */
        .fde-hero-card {
          transition: transform 0.55s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease;
          will-change: transform;
        }

        /* ── CIO figure ── */
        @keyframes cioEntry {
          from { opacity: 0; transform: translateX(32px); }
          to   { opacity: 1; transform: translateX(0); }
        }
        @keyframes cioPresence {
          0%, 100% { transform: translateY(0px)   rotate(0deg); }
          30%       { transform: translateY(-7px)  rotate(0.3deg); }
          65%       { transform: translateY(-4px)  rotate(-0.2deg); }
        }
        /* Hidden until the image finishes loading; the --in class (added by JS
           on the img's load event) triggers the entry + float animation. */
        .fde-cio-figure { opacity: 0; }
        .fde-cio-figure--in {
          animation:
            cioEntry    1.2s cubic-bezier(0.16,1,0.3,1) 0s   both,
            cioPresence 7s  ease-in-out               1.2s infinite;
        }

        /* ── Disable motion for accessibility + mobile ── */
        @media (prefers-reduced-motion: reduce) {
          .fde-hero-float-wrap { animation: none; opacity: 1; }
          .fde-hero-card { transition: box-shadow 0.4s ease; transform: none !important; }
          .fde-cio-figure--in { animation: cioEntry 0.001s both; }
        }
        /* ── Mobile bob — same feel as desktop but gentler amplitude ── */
        @keyframes fdeHeroFloatMobile {
          0%, 100% { transform: translateY(0px); }
          50%       { transform: translateY(-8px); }
        }
        @media (max-width: 768px) {
          .fde-hero-float-wrap {
            animation:
              fdeHeroEntry 0.9s cubic-bezier(0.16,1,0.3,1) 0.12s both,
              fdeHeroFloatMobile 6s ease-in-out 1.05s infinite !important;
          }
          /* No transform override — card keeps its perspective tilt on mobile */
          /* CIO figure: flush to right viewport edge, then shifted 30% of own width off-screen
             so exactly 70% is visible. translateX(%) is relative to the element's own width. */
          .fde-cio-figure-wrap { right: 0 !important; left: auto !important;
                                  transform: translateX(30%) !important;
                                  height: 60% !important; z-index: 4 !important; }
          /* Portrait-friendly image framing */
          .fde-hero-img { object-position: 38% center !important; }
        }

        /* ── Console animations ── */
        @keyframes fdeHeroCometLoop {
          from { stroke-dashoffset: 0; }
          to   { stroke-dashoffset: -724; }
        }
        @keyframes fdeHeroShimmer {
          0%   { background-position: 75% center; }
          100% { background-position: 25% center; }
        }
        @keyframes fdeHeroLivePulse {
          0%, 100% { opacity: 1; transform: scale(1); }
          50%      { opacity: 0.4; transform: scale(0.78); }
        }

        /* ── Header status strip interactions ── */
        .fdehero-header-status { cursor: pointer; }
        .fdehero-advance-hint { opacity: 0; transition: opacity 0.2s ease; }
        .fdehero-header-status:hover .fdehero-advance-hint { opacity: 1; }

        /* ── Buttons ── */
        .fdehero-btn-ghost {
          display: inline-flex; align-items: center; gap: 6px;
          border: 1px solid rgba(0,229,195,0.35);
          color: rgba(232,232,239,0.65);
          font-family: 'IBM Plex Sans', sans-serif;
          font-size: 14px; font-weight: 400;
          padding: 14px 24px; border-radius: 10px;
          text-decoration: none;
          transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
          white-space: nowrap;
        }
        .fdehero-btn-ghost:hover,
        .fdehero-btn-ghost:focus-visible { border-color: rgba(0,229,195,0.65); color: #e8e8ef; background: rgba(0,229,195,0.04); }
        /* Keyboard focus: a visible teal ring in the brand's interaction language,
           legible against the dark console card. Mouse clicks fall back to :hover. */
        .fdehero-btn-ghost:focus-visible { outline: 2px solid rgba(0,229,195,0.6); outline-offset: 3px; }

        /* ── Mobile ≤ 768px: floating centered console — mirrors desktop ── */
        @media (max-width: 768px) {
          .fde-hero-wrap  { padding: 96px 16px 48px !important; align-items: center !important; }
          .fde-hero-card  { border-radius: 12px !important;
                            border-left: 1px solid rgba(255,255,255,0.10) !important;
                            border-right: 1px solid rgba(255,255,255,0.10) !important;
                            border-bottom: 1px solid rgba(255,255,255,0.10) !important; }
          .fdehero-body-pad { padding: 28px 20px !important; }
          .fdehero-body-pad > * { padding-right: 30px !important; }
          .fdehero-btns   { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
          .fdehero-btns a { text-align: center !important; white-space: normal !important; line-height: 1.35 !important; width: 70% !important; }
        }

        /* ── Small phones ≤ 480px ── */
        @media (max-width: 480px) {
          .fdehero-body-pad { padding: 22px 14px !important; }
          .fdehero-body-pad > * { padding-right: 30px !important; }
        }

        /* ── Desktop: explicit card dimensions ── */
        @media (min-width: 769px) {
          .fde-hero-float-wrap { width: 60vw !important; max-width: 960px !important; margin: 0 auto !important; position: relative !important; left: 40px !important; }
          .fde-hero-card { min-height: 350px !important; }
        }
      `}</style>

      {/* ── Full-bleed background image ──────────────────────────────────────── */}
      <div style={{
        position: "absolute", inset: 0,
        zIndex: 0, overflow: "hidden",
      }}>
        <img
          className="fde-hero-img"
          src="uploads/fde-hero.png"
          alt="Bright modern open-plan office with floor-to-ceiling windows overlooking a city skyline, featuring natural plants, a leather sofa lounge area, and a wooden conference table."
          style={{
            width: "100%", height: "100%",
            objectFit: "cover",
            objectPosition: "55% center",
            display: "block",
            transformOrigin: "center center",
          }}
        />
      </div>

      {/* ── Vignettes ─────────────────────────────────────────────────────────── */}

      {/* Top — nav sits on dark */}
      <div style={{
        position: "absolute", top: 0, left: 0, right: 0, height: "20%",
        background: `linear-gradient(to bottom, ${VOID} 0%, transparent 100%)`,
        zIndex: 1, pointerEvents: "none",
      }} />
      {/* Bottom — blends into next section */}
      <div style={{
        position: "absolute", bottom: 0, left: 0, right: 0, height: "30%",
        background: `linear-gradient(to top, ${VOID} 0%, transparent 100%)`,
        zIndex: 1, pointerEvents: "none",
      }} />
      {/* Right — darkens the scene behind the figure so the blend works */}
      <div style={{
        position: "absolute", top: 0, right: 0, bottom: 0, width: "38%",
        background: `linear-gradient(to right, transparent 0%, rgba(10,10,14,0.62) 100%)`,
        zIndex: 1, pointerEvents: "none",
      }} />

      {/* ── CIO figure — right side, looking toward the console ── */}
      <div className="fde-cio-figure-wrap" style={{
        position: "absolute", right: "calc(5% + 40px)", bottom: 0,
        height: "72%", zIndex: 3, pointerEvents: "none",
      }}>
        <img
          ref={figureRef}
          className={`fde-cio-figure${figureLoaded ? " fde-cio-figure--in" : ""}`}
          src={FDE_FIGURE_SRC}
          alt=""
          aria-hidden="true"
          onLoad={() => setFigureLoaded(true)}
          style={{
            height: "100%", width: "auto", display: "block",
            objectFit: "contain", objectPosition: "bottom",
            filter: "drop-shadow(0 8px 32px rgba(0,0,0,0.45))",
          }}
        />
      </div>

      {/* ── Content wrapper ───────────────────────────────────────────────────── */}
      <div className="fde-hero-wrap" style={{
        position: "relative",
        zIndex: 2,
        width: "100%",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        padding: "96px 60px",
        boxSizing: "border-box",
      }}>

        {/* ── Console panel — floats in 3D perspective over the office scene ── */}
        <div
          className={`fde-hero-float-wrap${cardHov ? " fde-hero-float-paused" : ""}`}
          style={{ width: "100%", maxWidth: 960 }}
        >
        <div
          ref={cardRef}
          className="fde-hero-card terminal-card--unified"
          onMouseEnter={onCardEnter}
          onMouseLeave={onCardLeave}
          onTouchEnd={onCardTap}
          style={{
            position: "relative",
            borderRadius: 12,
            borderTop: "1px solid rgba(0,229,195,0.32)",
            borderLeft: "1px solid rgba(255,255,255,0.10)",
            borderRight: "1px solid rgba(255,255,255,0.10)",
            borderBottom: "1px solid rgba(255,255,255,0.10)",
            overflow: "hidden",
            background: "#0d0d10",
            display: "flex",
            flexDirection: "column",
            boxShadow: cardHov
              ? "0 0 0 1px rgba(0,229,195,0.16), 0 48px 96px rgba(0,0,0,0.7), 0 0 80px rgba(0,229,195,0.05)"
              : "0 24px 60px rgba(0,0,0,0.45)",
            transform: `perspective(900px) rotateY(${tiltRy}deg) rotateX(${tiltRx}deg)`,
          }}
        >
          {/* Panel header bar */}
          <div style={{
            height: 40, background: "#0c0c0f",
            borderBottom: "1px solid rgba(255,255,255,0.07)",
            display: "flex", alignItems: "center", justifyContent: "space-between",
            padding: "0 20px", userSelect: "none", overflow: "hidden",
          }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10, overflow: "hidden" }}>
              {/* FORMATIVE | FDE label */}
              <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", color: "rgba(232,232,239,0.62)", fontWeight: 500, flexShrink: 0 }}>FORMATIVE</span>
              <span style={{ color: "rgba(255,255,255,0.15)", fontSize: 13, lineHeight: 1, flexShrink: 0 }}>|</span>
              <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", color: "rgba(232,232,239,0.3)", flexShrink: 0 }}>FDE</span>

              {/* Status strip — 10px gap, F-comet + phrase, clickable */}
              <div className="fdehero-header-status" onClick={advancePhrase}
                style={{ display: "flex", alignItems: "center", gap: 8, paddingLeft: 10, overflow: "hidden" }}>
                <svg viewBox="0 0 200 220" width="12" height="14" style={{ overflow: "visible", flexShrink: 0 }}>
                  <defs>
                    <filter id="fdeHeroGlow" x="-120%" y="-120%" width="340%" height="340%">
                      <feGaussianBlur stdDeviation="5" result="b" />
                      <feMerge><feMergeNode in="b" /><feMergeNode in="SourceGraphic" /></feMerge>
                    </filter>
                  </defs>
                  <path d={FDE_F_PATH} fill="none" stroke="rgba(0,229,195,0.12)" strokeWidth="14" strokeLinecap="square" strokeLinejoin="miter" />
                  <path d={FDE_F_PATH} fill="none" stroke="rgba(0,229,195,0.18)" strokeWidth="12" strokeLinecap="round" strokeLinejoin="round"
                    strokeDasharray={`80 ${FDE_F_LEN - 80}`}
                    style={{ animation: `fdeHeroCometLoop ${FDE_COMET_DUR} linear infinite`, animationDelay: "0s" }} />
                  <path d={FDE_F_PATH} fill="none" stroke="rgba(0,229,195,0.45)" strokeWidth="7" strokeLinecap="round" strokeLinejoin="round"
                    strokeDasharray={`45 ${FDE_F_LEN - 45}`}
                    style={{ animation: `fdeHeroCometLoop ${FDE_COMET_DUR} linear infinite`, animationDelay: FDE_BODY_DELAY }} />
                  <path d={FDE_F_PATH} fill="none" stroke="#00e5c3" strokeWidth="10" strokeLinecap="round" strokeLinejoin="round"
                    strokeDasharray={`8 ${FDE_F_LEN - 8}`} filter="url(#fdeHeroGlow)"
                    style={{ animation: `fdeHeroCometLoop ${FDE_COMET_DUR} linear infinite`, animationDelay: FDE_TIP_DELAY }} />
                </svg>
                <span style={{ color: "rgba(0,229,195,0.7)", fontSize: 12, userSelect: "none", flexShrink: 0 }}>&#8250;</span>
                <span
                  key={phraseIdx}
                  onAnimationEnd={handleShimmerEnd}
                  style={{
                    fontFamily: "'IBM Plex Mono', monospace",
                    fontSize: 11, fontWeight: 400,
                    display: "inline-block", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
                    opacity: fading ? 0 : 1,
                    transition: "opacity 0.32s ease",
                    background: "linear-gradient(90deg, #00e5c3 49%, rgba(220,255,250,0.95) 50%, #00e5c3 51%)",
                    backgroundSize: "300% 100%",
                    WebkitBackgroundClip: "text",
                    WebkitTextFillColor: "transparent",
                    backgroundClip: "text",
                    animation: `fdeHeroShimmer ${FDE_SHIMMER_MS}ms linear 1 forwards`,
                  }}
                >
                  {FDE_PHRASES[phraseIdx]}{".".repeat(dotCount)}
                </span>
                <span className="fdehero-advance-hint" style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 10, color: "rgba(0,229,195,0.38)", userSelect: "none", flexShrink: 0 }}>&#8635;</span>
              </div>
            </div>

            {/* LIVE pill */}
            <div style={{
              display: "flex", alignItems: "center", gap: 6, flexShrink: 0,
              border: "1px solid rgba(0,229,195,0.3)", borderRadius: 100,
              background: "rgba(0,229,195,0.07)", padding: "4px 12px",
            }}>
              <div style={{ width: 6, height: 6, borderRadius: "50%", background: TEAL, flexShrink: 0, animation: "fdeHeroLivePulse 2s ease-in-out infinite" }} />
              <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 10, letterSpacing: "0.18em", color: TEAL, textTransform: "uppercase", fontWeight: 500 }}>live</span>
            </div>
          </div>

          {/* Panel body — single column */}
          <div style={{ background: "#0d0d10", position: "relative", overflow: "hidden", flex: 1 }}>
            <div style={{
              position: "absolute", inset: 0, pointerEvents: "none", zIndex: 0,
              backgroundImage: "repeating-linear-gradient(to bottom, transparent 0px, transparent 3px, rgba(0,0,0,0.055) 3px, rgba(0,0,0,0.055) 4px)",
            }} />
            <div className="fdehero-body-pad" style={{ padding: "40px 48px", position: "relative", zIndex: 1 }}>
              <h1 style={{
                fontFamily: "'Instrument Serif', Georgia, serif",
                fontSize: "clamp(26px, 2.6vw, 42px)",
                fontWeight: 400, lineHeight: 1.1,
                letterSpacing: "-0.022em",
                color: TEXT, marginBottom: 18,
              }}>
                Forward Deployment Engineering,{" "}
                <em style={{ fontStyle: "italic" }}>grounded in Digital Operations.</em>
              </h1>

              <p style={{
                fontFamily: "'IBM Plex Sans', sans-serif",
                // One deliberate step below the site body token (clamp 16–20);
                // floor held at 16px — the supporting line both audiences read.
                fontSize: "clamp(16px, 1.2vw, 18px)", lineHeight: 1.65,
                color: "rgba(232,232,239,0.62)", // subheadline Dim White, not secondary MUTED
                maxWidth: "60ch", marginBottom: 36,
              }}>
                We help technology leaders turn AI ambition into practical operating systems
                for teams, workflows, and measurable outcomes.
              </p>

              <div className="fdehero-btns" style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
                <a className="fdehero-btn-ghost" href="#fde-engagement">See how we work &nbsp;↓</a>
              </div>
            </div>
          </div>
        </div>

          {/* Ambient floor glow — grounds the panel in the 3D scene */}
          <div style={{
            width: "65%", height: 1, margin: "0 auto",
            boxShadow: "0 0 80px 32px rgba(0,0,0,0.55), 0 0 40px 18px rgba(0,229,195,0.07)",
            pointerEvents: "none",
          }} />
        </div>
      </div>
    </section>
  );
}

// ── Deep-link into the diagnostic form ────────────────────────────────────────
// The href does the scrolling. This only moves focus, once the smooth scroll has
// had time to settle, so the reader arrives with the cursor in the first field.
// preventScroll keeps focus from yanking the viewport mid-animation. Silent if
// the form has already been submitted and replaced by its success state.
function focusDiagnosticForm() {
  setTimeout(() => {
    const el = document.querySelector('#fde-cta form input[name="name"]');
    if (el) el.focus({ preventScroll: true });
  }, 700);
}

// ── Section 02: FdeDeploymentGap ──────────────────────────────────────────────
function FdeDeploymentGap() {
  const [ref, on] = useReveal(0.08);

  return (
    <section className="fdegap-pad" style={{ background: VOID, padding: "140px 60px 120px" }}>
      <style>{`
        @media (max-width: 768px) {
          .fdegap-body  { grid-template-columns: 1fr !important; gap: 32px !important; }
          .fdegap-pad   { padding: 80px 24px 60px !important; }
        }
        .fdegap-row-hover:hover td { background: rgba(0,229,195,0.018) !important; }
        .fdegap-cta {
          display: inline-flex; align-items: center; gap: 8px;
          border: 1px solid rgba(0,229,195,0.35);
          color: rgba(232,232,239,0.72);
          font-family: 'IBM Plex Sans', sans-serif;
          font-size: 14px; font-weight: 500;
          padding: 13px 24px; border-radius: 10px;
          text-decoration: none; white-space: nowrap;
          transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
        }
        .fdegap-cta:hover,
        .fdegap-cta:focus-visible {
          border-color: rgba(0,229,195,0.65); color: #e8e8ef; background: rgba(0,229,195,0.05);
        }
        .fdegap-cta:focus-visible { outline: 2px solid rgba(0,229,195,0.6); outline-offset: 3px; }
        @media (max-width: 640px) {
          .fdegap-ctarow { flex-direction: column !important; align-items: stretch !important; }
          .fdegap-cta    { justify-content: center; white-space: normal; line-height: 1.35; }
        }
      `}</style>
      <div style={{ maxWidth: 1100, margin: "0 auto" }} ref={ref}>

        <Eyebrow style={revealStyle(on, 0)}>The Deployment Gap</Eyebrow>

        {/* Cinematic pull quote — scaled to display size, left-anchored */}
        <blockquote style={{
          ...revealStyle(on, 80),
          fontFamily: "'Instrument Serif', Georgia, serif",
          fontSize: "clamp(30px, 3.8vw, 54px)",
          fontStyle: "italic",
          fontWeight: 400,
          lineHeight: 1.18,
          color: TEXT,
          letterSpacing: "-0.02em",
          maxWidth: 900,
          marginBottom: 72,
          borderTop: `1px solid ${HAIR}`,
          paddingTop: 48,
        }}>
          "Every enterprise has access to AI. Almost none have deployed it as a coherent operating system."
        </blockquote>

        {/* Body: two columns below the quote */}
        <div className="fdegap-body" style={{
          ...revealStyle(on, 180),
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: "0 80px",
          fontSize: "clamp(14px, 1.15vw, 16px)",
          lineHeight: 1.8,
          color: MUTED,
          maxWidth: 900,
          paddingLeft: "calc(max(0px, (900px - 100%) / 2))",
        }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
            <p>The gap is not technical. The AI works. The models are powerful. The APIs are available.</p>
            <p>The gap is operational: enterprises attempt to deploy AI into organisations that were never designed to run it — fragmented workflows, disconnected observability, no coherent model for governing AI agents alongside human teams.</p>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
            <p style={{ color: TEXT, fontWeight: 600 }}>The result: islands of AI that never compound.</p>
            <p>This gap is Formative's market. And closing it requires more than embedding engineers and shipping use cases. It requires building the operating layer the enterprise was missing.</p>
          </div>
        </div>

        {/* Hand-off to the diagnostic form at the foot of the page. The anchor
            does the scrolling; focusing the first field afterwards (with
            preventScroll, so it does not fight the smooth scroll) means the
            reader lands in the form rather than merely beside it. */}
        <div className="fdegap-ctarow" style={{
          ...revealStyle(on, 260),
          maxWidth: 900, marginTop: 56, paddingTop: 34,
          borderTop: `1px solid ${HAIR}`,
          display: "flex", alignItems: "center", justifyContent: "space-between",
          gap: 24, flexWrap: "wrap",
        }}>
          <p style={{
            fontFamily: "'IBM Plex Sans', sans-serif",
            fontSize: "clamp(15px, 1.25vw, 18px)", lineHeight: 1.6,
            color: TEXT, fontWeight: 500, margin: 0, maxWidth: "42ch",
          }}>
            Find out where your operating layer actually stands.
          </p>
          <a className="fdegap-cta" href="#fde-cta" onClick={focusDiagnosticForm}>
            Start with a Digital Operations Diagnostic &nbsp;&rarr;
          </a>
        </div>
      </div>
    </section>
  );
}

// ── Section 03: FdeFramework ──────────────────────────────────────────────────
const SCOPE_ROWS = [
  ["Service reliability",           "Business reliability"],
  ["Infrastructure observability",  "End-to-end customer journey observability"],
  ["Incident response",             "Automated operational decision-making"],
  ["System automation",             "Enterprise workflow orchestration"],
  ["Platform engineering",          "Digital capability engineering"],
  ["Human operators",               "Human + AI operators"],
];

function FdeFramework() {
  const [ref, on] = useReveal(0.06);

  return (
    <section className="fdefw-pad" style={{ background: SURF, padding: "120px 60px" }}>
      <style>{`
        .fdefw-table { width: 100%; border-collapse: collapse; }
        .fdefw-table th,
        .fdefw-table td { padding: 17px 24px; border: 1px solid ${HAIR}; text-align: left; vertical-align: middle; }
        .fdefw-tr { transition: background 0.15s ease; }
        .fdefw-tr:hover .fdefw-td-itops   { background: rgba(255,255,255,0.055) !important; color: rgba(232,232,239,0.72) !important; }
        .fdefw-tr:hover .fdefw-td-digital { background: rgba(0,229,195,0.085) !important; color: #e8e8ef !important; }
        @media (max-width: 768px) {
          .fdefw-table th,
          .fdefw-table td { padding: 12px 14px; font-size: 13px !important; }
          .fdefw-wrap    { overflow-x: auto; -webkit-overflow-scrolling: touch; }
          .fdefw-pad     { padding: 72px 24px !important; }
        }
      `}</style>
      <div style={{ maxWidth: 1100, margin: "0 auto" }} ref={ref}>

        <Eyebrow style={revealStyle(on, 0)}>The Digital Operations Framework</Eyebrow>

        <h2 style={{
          ...revealStyle(on, 70),
          fontFamily: "'Instrument Serif', Georgia, serif",
          fontSize: "clamp(26px, 2.8vw, 44px)",
          fontWeight: 400,
          lineHeight: 1.1,
          letterSpacing: "-0.022em",
          color: TEXT,
          marginBottom: 10,
        }}>
          Reliability was the foundation.<br />Digital Operations is the next layer.
        </h2>

        <p style={{
          ...revealStyle(on, 110),
          fontFamily: "'IBM Plex Mono', monospace",
          fontSize: 11,
          color: "rgba(232,232,239,0.28)",
          letterSpacing: "0.03em",
          marginBottom: 48,
          lineHeight: 1.5,
        }}>
          — Khang Toh, Founder &amp; Chief Digital Operating Officer, Formative Labs
        </p>

        <p style={{
          ...revealStyle(on, 150),
          fontSize: "clamp(14px, 1.15vw, 16px)",
          lineHeight: 1.8,
          color: MUTED,
          maxWidth: 680,
          marginBottom: 64,
        }}>
          Digital Operations is not IT Operations with a new label. It is the discipline of designing,
          operating, and continuously improving the digital factory of an organisation — the interconnected
          system through which work gets done, decisions are made, and value is delivered.
        </p>

        <div className="fdefw-wrap" style={revealStyle(on, 200)}>
          <table className="fdefw-table">
            <thead>
              <tr>
                <th style={{
                  fontFamily: "'IBM Plex Sans', sans-serif",
                  fontSize: 10,
                  fontWeight: 700,
                  letterSpacing: "0.1em",
                  textTransform: "uppercase",
                  color: "rgba(232,232,239,0.45)",
                  background: "rgba(255,255,255,0.035)",
                  width: "50%",
                }}>IT Operations Lens</th>
                <th style={{
                  fontFamily: "'IBM Plex Sans', sans-serif",
                  fontSize: 10,
                  fontWeight: 700,
                  letterSpacing: "0.1em",
                  textTransform: "uppercase",
                  color: TEAL,
                  background: "rgba(0,229,195,0.055)",
                  width: "50%",
                }}>Digital Operations Lens</th>
              </tr>
            </thead>
            <tbody>
              {SCOPE_ROWS.map(([itops, digital], i) => (
                <tr key={i} className="fdefw-tr">
                  <td className="fdefw-td-itops" style={{
                    fontSize: 14,
                    // 0.52 alpha over the section surface clears WCAG AA (~5:1).
                    // The column stays secondary via weight, not by being unreadable.
                    color: "rgba(232,232,239,0.52)",
                    fontWeight: 400,
                    // Both columns stripe over the same surface at matching alpha
                    // steps, so the two sides alternate in lockstep. The previous
                    // pass dropped even rows to a darker base than the section,
                    // which read as patchy rather than striped.
                    background: i % 2 === 0 ? "transparent" : "rgba(255,255,255,0.022)",
                    transition: "background 0.15s ease",
                  }}>{itops}</td>
                  <td className="fdefw-td-digital" style={{
                    fontSize: 14,
                    color: TEXT,
                    fontWeight: 500,
                    background: i % 2 === 0 ? "rgba(0,229,195,0.022)" : "rgba(0,229,195,0.045)",
                    transition: "background 0.15s ease, color 0.15s ease",
                  }}>{digital}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

// ── Section 04: FdeModel ──────────────────────────────────────────────────────
// Layout: definition strips instead of identical card grid.
// Each strip: left = monospace label + small description, right = the proof value.
// Different typographic treatment per strip prevents metric-card cliché.

const MODEL_STRIPS = [
  {
    label: "Time to production",
    desc: "From Digital Operations Diagnostic to live operating system",
    value: "12 weeks",
    valueStyle: {
      fontFamily: "'Instrument Serif', Georgia, serif",
      fontSize: "clamp(48px, 5vw, 80px)",
      fontWeight: 400,
      lineHeight: 1,
      letterSpacing: "-0.03em",
      color: TEXT,
    },
  },
  {
    label: "What we leave behind",
    desc: "Not a model. A governed, scalable digital operating architecture.",
    value: "A running system",
    valueStyle: {
      fontFamily: "'Instrument Serif', Georgia, serif",
      fontSize: "clamp(24px, 2.4vw, 36px)",
      fontStyle: "italic",
      fontWeight: 400,
      lineHeight: 1.2,
      letterSpacing: "-0.01em",
      color: TEXT,
    },
  },
  {
    label: "How we build",
    desc: "Production-tested solutions wired into your operating model, not blank-canvas builds.",
    value: "Pre-built + proven",
    valueStyle: {
      fontFamily: "'IBM Plex Sans', sans-serif",
      fontSize: "clamp(18px, 1.8vw, 26px)",
      fontWeight: 700,
      lineHeight: 1.2,
      letterSpacing: "-0.015em",
      color: TEXT,
    },
  },
];

function FdeModel() {
  const [ref, on] = useReveal(0.06);

  return (
    <section className="fdemodel-pad" style={{ background: VOID, padding: "120px 60px" }}>
      <style>{`
        .fdemodel-strip {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 0 60px;
          padding: 44px 0;
          border-top: 1px solid ${HAIR};
          align-items: center;
          transition: border-color 0.2s ease;
        }
        .fdemodel-strip:last-child { border-bottom: 1px solid ${HAIR}; }
        .fdemodel-strip:hover { border-color: rgba(0,229,195,0.2); }
        .fdemodel-strip:hover .fdemodel-strip-value { color: #fff !important; }
        @media (max-width: 768px) {
          .fdemodel-strip { grid-template-columns: 1fr !important; gap: 16px !important; padding: 32px 0 !important; }
          .fdemodel-pad   { padding: 72px 24px !important; }
        }
      `}</style>
      <div style={{ maxWidth: 1100, margin: "0 auto" }} ref={ref}>

        <Eyebrow style={revealStyle(on, 0)}>The Formative FDE Model</Eyebrow>

        <h2 style={{
          ...revealStyle(on, 70),
          fontFamily: "'Instrument Serif', Georgia, serif",
          fontSize: "clamp(26px, 2.8vw, 44px)",
          fontWeight: 400,
          lineHeight: 1.1,
          letterSpacing: "-0.022em",
          color: TEXT,
          marginBottom: 28,
          maxWidth: 640,
        }}>
          We don't just deploy AI.<br />We build the operating system your AI runs on.
        </h2>

        <div style={{
          ...revealStyle(on, 130),
          display: "flex",
          flexDirection: "column",
          gap: 16,
          maxWidth: 680,
          marginBottom: 80,
          fontSize: "clamp(14px, 1.15vw, 16px)",
          lineHeight: 1.8,
          color: MUTED,
        }}>
          <p>Most FDE engagements target a quick-win use case and ship fast — often neglecting the big picture, the people, and the system they're deploying into.</p>
          <p>Formative's approach is holistic, systematic, and grounded in a methodology conceived by our founder. Before a single model goes to production, our FDEs map how the enterprise runs as a digital system.</p>
          <p style={{ color: TEXT, fontWeight: 600 }}>The outcome isn't a feature. It's a coherent digital operating model that scales.</p>
        </div>

        {/* Definition strips */}
        <div style={revealStyle(on, 200)}>
          {MODEL_STRIPS.map((strip, i) => (
            <div key={i} className="fdemodel-strip">
              {/* Left: label + description */}
              <div>
                <p style={{
                  fontFamily: "'IBM Plex Mono', monospace",
                  fontSize: 10,
                  color: TEAL,
                  letterSpacing: "0.12em",
                  textTransform: "uppercase",
                  marginBottom: 10,
                }}>
                  {strip.label}
                </p>
                <p style={{
                  fontSize: 13,
                  lineHeight: 1.65,
                  color: "rgba(232,232,239,0.42)",
                  maxWidth: 320,
                }}>
                  {strip.desc}
                </p>
              </div>
              {/* Right: proof value — different type treatment per strip */}
              <div className="fdemodel-strip-value" style={strip.valueStyle}>
                {strip.value}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Section 05: FdeEngagement ─────────────────────────────────────────────────
const PHASES = [
  {
    num: "01",
    title: "Digital Operations Diagnostic",
    duration: "2–4 weeks · Fixed fee",
    desc: "Map the enterprise as a digital system. Identify workflow gaps, observability blind spots, fragmentation risks, and the highest-ROI AI opportunities.",
  },
  {
    num: "02",
    title: "Operating Layer Design",
    duration: "2–3 weeks",
    desc: "Define the target digital operating model: decision loops, automation architecture, governance structure, human + AI team design.",
  },
  {
    num: "03",
    title: "FDE Build and Deploy",
    duration: "8–12 weeks",
    desc: "Embed FDEs. Bring proven pre-built solutions. Wire AI into the operating model — not as features, but as operating capabilities.",
  },
  {
    num: "04",
    title: "Scale and Enable",
    duration: "Ongoing",
    desc: "Transition to internal teams. Establish CDOO-level governance. Build the digital capability that compounds over time.",
  },
];

function FdeEngagement() {
  const [active, setActive] = React.useState(2);
  const [ref, on] = useReveal(0.06);

  return (
    <section id="fde-engagement" className="fdeeng-pad" style={{ background: SURF, padding: "120px 60px" }}>
      <style>{`
        .fdeph-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 0;
          position: relative;
        }
        .fdeph-connector {
          position: absolute;
          top: 19px;
          left: calc(12.5% + 20px);
          right: calc(12.5% + 20px);
          height: 1px;
          background: linear-gradient(90deg, rgba(0,229,195,0.22), rgba(0,229,195,0.08));
          z-index: 0;
          pointer-events: none;
        }
        .fdeph-item {
          padding: 0 24px 0 0;
          position: relative;
          cursor: pointer;
          transition: opacity 0.22s ease;
        }
        .fdeph-dot {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 22px;
          position: relative;
          z-index: 1;
          transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
          flex-shrink: 0;
        }
        @media (max-width: 768px) {
          .fdeph-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
          .fdeph-connector { display: none !important; }
          .fdeph-item {
            padding: 24px 0 24px 52px !important;
            border-left: 1px solid rgba(0,229,195,0.18) !important;
            margin-left: 20px !important;
          }
          .fdeph-dot {
            position: absolute !important;
            left: -20px !important;
            top: 24px !important;
            margin-bottom: 0 !important;
          }
          .fdeeng-pad { padding: 72px 24px !important; }
        }
      `}</style>
      <div style={{ maxWidth: 1100, margin: "0 auto" }} ref={ref}>

        <Eyebrow style={revealStyle(on, 0)}>How We Engage</Eyebrow>

        <h2 style={{
          ...revealStyle(on, 70),
          fontFamily: "'Instrument Serif', Georgia, serif",
          fontSize: "clamp(26px, 2.8vw, 44px)",
          fontWeight: 400,
          lineHeight: 1.1,
          letterSpacing: "-0.022em",
          color: TEXT,
          marginBottom: 72,
          maxWidth: 500,
        }}>
          Four phases. One coherent operating system.
        </h2>

        <div className="fdeph-grid" style={revealStyle(on, 160)}>
          <div className="fdeph-connector" />

          {PHASES.map((phase, i) => {
            const isActive = i === active;
            return (
              <div
                key={phase.num}
                className="fdeph-item"
                onClick={() => setActive(i)}
                style={{ opacity: isActive ? 1 : 0.4 }}
                onMouseEnter={(e) => { if (!isActive) e.currentTarget.style.opacity = "0.68"; }}
                onMouseLeave={(e) => { if (!isActive) e.currentTarget.style.opacity = "0.4"; }}
              >
                <div className="fdeph-dot" style={{
                  background: isActive ? TEAL : "rgba(255,255,255,0.05)",
                  border: isActive ? "none" : "1px solid rgba(255,255,255,0.08)",
                  boxShadow: isActive ? `0 0 20px rgba(0,229,195,0.35)` : "none",
                }}>
                  <span style={{
                    fontFamily: "'IBM Plex Mono', monospace",
                    fontSize: 11,
                    fontWeight: 500,
                    color: isActive ? "#0a0a0c" : "rgba(232,232,239,0.38)",
                  }}>{phase.num}</span>
                </div>

                <p style={{
                  fontFamily: "'IBM Plex Sans', sans-serif",
                  fontSize: 14,
                  fontWeight: 600,
                  color: TEXT,
                  lineHeight: 1.3,
                  letterSpacing: "-0.01em",
                  marginBottom: 7,
                }}>{phase.title}</p>

                <p style={{
                  fontFamily: "'IBM Plex Mono', monospace",
                  fontSize: 10,
                  color: isActive ? TEAL : "rgba(232,232,239,0.25)",
                  letterSpacing: "0.06em",
                  marginBottom: 14,
                  transition: "color 0.22s ease",
                }}>{phase.duration}</p>

                <p style={{
                  fontSize: 13,
                  lineHeight: 1.68,
                  color: isActive ? "rgba(232,232,239,0.68)" : "rgba(232,232,239,0.28)",
                  transition: "color 0.22s ease",
                }}>{phase.desc}</p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ── Section 06: FdeCDOO ───────────────────────────────────────────────────────
const ROLE_CARDS = [
  { abbr: "CTO",  label: "Chief Technology Officer",  role: "Builds the technology" },
  { abbr: "CDO",  label: "Chief Data Officer",        role: "Governs the data" },
  { abbr: "COO",  label: "Chief Operating Officer",   role: "Manages the process" },
  {
    abbr: "CDOO",
    label: "Chief Digital Operating Officer",
    role: "Owns the integrated digital operating model — the layer where technology, data, process, and AI converge",
    isCdoo: true,
  },
];

function FdeCDOO() {
  const [ref, on] = useReveal(0.06);

  return (
    <section className="fdecdoo-pad" style={{ background: VOID, padding: "120px 60px" }}>
      <style>{`
        .fdecdoo-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
        .fdecdoo-roles  { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        .fdecdoo-role-card {
          border-radius: 12px;
          padding: 22px 18px;
          transition: border-color 0.2s ease;
        }
        .fdecdoo-role-card:hover { border-color: rgba(255,255,255,0.12) !important; }
        .fdecdoo-cdoo-card {
          border-radius: 12px;
          padding: 24px 20px;
          position: relative;
          overflow: hidden;
          transition: box-shadow 0.3s ease;
        }
        .fdecdoo-cdoo-card:hover {
          box-shadow: 0 0 40px rgba(0,229,195,0.12), inset 0 0 40px rgba(0,229,195,0.03);
        }
        @media (max-width: 768px) {
          .fdecdoo-layout { grid-template-columns: 1fr !important; gap: 48px !important; }
          .fdecdoo-roles  { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
          .fdecdoo-pad    { padding: 72px 24px !important; }
        }
        @media (max-width: 480px) {
          .fdecdoo-roles { grid-template-columns: 1fr !important; }
        }
      `}</style>
      <div style={{ maxWidth: 1100, margin: "0 auto" }} ref={ref}>
        <div className="fdecdoo-layout">

          {/* Left: definition */}
          <div style={revealStyle(on, 0)}>
            <Eyebrow>A Role for the AI Era</Eyebrow>

            <h2 style={{
              fontFamily: "'Instrument Serif', Georgia, serif",
              fontSize: "clamp(26px, 2.8vw, 42px)",
              fontWeight: 400,
              lineHeight: 1.1,
              letterSpacing: "-0.022em",
              color: TEXT,
              marginBottom: 32,
            }}>
              The Chief Digital Operating Officer
            </h2>

            <div style={{ display: "flex", flexDirection: "column", gap: 18, fontSize: "clamp(14px, 1.1vw, 16px)", lineHeight: 1.78, color: MUTED, marginBottom: 20 }}>
              <p>As AI becomes embedded into business processes at scale, the enterprise needs a new executive role: the Chief Digital Operating Officer (CDOO).</p>
              <p>The CDOO is not a CTO, a CDO, or a COO. It is the leader responsible for designing and running the organisation's digital operating model — overseeing fleets of AI agents, governing autonomous workflows, and optimising digital labour alongside human teams.</p>
            </div>

            <p style={{
              fontFamily: "'IBM Plex Mono', monospace",
              fontSize: 10,
              color: TEAL,
              letterSpacing: "0.06em",
              lineHeight: 1.55,
              marginBottom: 36,
            }}>
              Role conceived by Khang Toh, Founder &amp; Chief Digital Operating Officer, Formative Labs
            </p>

            <p style={{
              fontFamily: "'Instrument Serif', Georgia, serif",
              fontSize: "clamp(16px, 1.5vw, 21px)",
              fontStyle: "italic",
              lineHeight: 1.55,
              color: "rgba(232,232,239,0.6)",
              paddingTop: 28,
              borderTop: `1px solid ${HAIR}`,
            }}>
              "The future operator won't just manage infrastructure. They will oversee fleets of AI agents, govern autonomous workflows, and optimise digital labour alongside human teams."
            </p>
          </div>

          {/* Right: role grid */}
          <div style={revealStyle(on, 120)}>
            <p style={{
              fontFamily: "'IBM Plex Sans', sans-serif",
              fontSize: 10,
              fontWeight: 600,
              color: "rgba(232,232,239,0.25)",
              letterSpacing: "0.1em",
              textTransform: "uppercase",
              marginBottom: 20,
            }}>How the CDOO differs</p>

            <div className="fdecdoo-roles">
              {ROLE_CARDS.map((card) =>
                card.isCdoo ? (
                  <div key={card.abbr} className="fdecdoo-cdoo-card" style={{
                    background: "#1a1a22",
                    border: "1px solid rgba(0,229,195,0.35)",
                  }}>
                    {/* Teal glow in corner */}
                    <div style={{
                      position: "absolute", top: -20, right: -20,
                      width: 100, height: 100,
                      background: "radial-gradient(ellipse, rgba(0,229,195,0.18) 0%, transparent 70%)",
                      pointerEvents: "none",
                    }} />
                    <p style={{
                      fontFamily: "'IBM Plex Mono', monospace",
                      fontSize: 22,
                      fontWeight: 500,
                      color: TEAL,
                      marginBottom: 5,
                      letterSpacing: "-0.01em",
                      position: "relative",
                    }}>{card.abbr}</p>
                    <p style={{
                      fontSize: 10,
                      fontWeight: 500,
                      color: "rgba(232,232,239,0.35)",
                      letterSpacing: "0.04em",
                      marginBottom: 10,
                      lineHeight: 1.4,
                      position: "relative",
                    }}>{card.label}</p>
                    <p style={{
                      fontSize: 13,
                      lineHeight: 1.58,
                      color: "rgba(232,232,239,0.75)",
                      fontWeight: 500,
                      position: "relative",
                    }}>{card.role}</p>
                  </div>
                ) : (
                  <div key={card.abbr} className="fdecdoo-role-card" style={{
                    background: "rgba(255,255,255,0.022)",
                    border: `1px solid ${HAIR}`,
                  }}>
                    <p style={{
                      fontFamily: "'IBM Plex Mono', monospace",
                      fontSize: 20,
                      fontWeight: 500,
                      color: "rgba(232,232,239,0.3)",
                      marginBottom: 5,
                      letterSpacing: "-0.01em",
                    }}>{card.abbr}</p>
                    <p style={{
                      fontSize: 10,
                      fontWeight: 500,
                      color: "rgba(232,232,239,0.22)",
                      letterSpacing: "0.04em",
                      marginBottom: 10,
                      lineHeight: 1.4,
                    }}>{card.label}</p>
                    <p style={{
                      fontSize: 13,
                      lineHeight: 1.58,
                      color: "rgba(232,232,239,0.38)",
                    }}>{card.role}</p>
                  </div>
                )
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Section 07: FdeComparison ─────────────────────────────────────────────────
const COMPARISON_ROWS = [
  [
    "Target a quick-win use case and ship fast",
    "Map the enterprise's Digital Operations layer before touching a single model",
  ],
  [
    "Embed engineers to deploy AI features",
    "Embed engineers to build the foundational digital operating system",
  ],
  [
    "Measure output: tickets resolved, cost saved",
    "Measure operational outcomes: business reliability, journey performance, AI throughput",
  ],
  [
    "Leave behind a working model",
    "Leave behind a running, governed digital operating system",
  ],
  [
    "Risk: AI islands that don't compound",
    "Result: AI that scales coherently across the enterprise",
  ],
  [
    "Pre-built = reusable code components",
    "Pre-built = proven operational patterns + production-tested solutions",
  ],
  [
    "No framework for the human + AI transition",
    "CDOO framework: governance for human and AI operators together",
  ],
];

function FdeComparison() {
  const [ref, on] = useReveal(0.06);

  return (
    <section className="fdecmp-pad" style={{ background: SURF, padding: "120px 60px" }}>
      <style>{`
        .fdecmp-table { width: 100%; border-collapse: collapse; }
        .fdecmp-table th,
        .fdecmp-table td {
          padding: 16px 24px;
          border: 1px solid ${HAIR};
          text-align: left;
          vertical-align: top;
          line-height: 1.6;
          transition: background 0.14s ease, color 0.14s ease;
        }
        .fdecmp-table th {
          font-family: 'IBM Plex Sans', sans-serif;
          font-size: 10px;
          font-weight: 700;
          letter-spacing: 0.1em;
          text-transform: uppercase;
        }
        .fdecmp-tr:hover .fdecmp-td-std { background: rgba(255,255,255,0.025) !important; color: rgba(232,232,239,0.55) !important; }
        .fdecmp-tr:hover .fdecmp-td-fmv { background: rgba(0,229,195,0.07) !important; }
        @media (max-width: 768px) {
          .fdecmp-wrap  { overflow-x: auto; -webkit-overflow-scrolling: touch; }
          .fdecmp-table { min-width: 500px; }
          .fdecmp-table th,
          .fdecmp-table td { padding: 12px 14px; font-size: 13px !important; }
          .fdecmp-pad   { padding: 72px 24px !important; }
        }
      `}</style>
      <div style={{ maxWidth: 1100, margin: "0 auto" }} ref={ref}>

        <Eyebrow style={revealStyle(on, 0)}>Why Formative FDE Is Different</Eyebrow>

        <h2 style={{
          ...revealStyle(on, 70),
          fontFamily: "'Instrument Serif', Georgia, serif",
          fontSize: "clamp(26px, 2.8vw, 44px)",
          fontWeight: 400,
          lineHeight: 1.1,
          letterSpacing: "-0.022em",
          color: TEXT,
          marginBottom: 60,
          maxWidth: 560,
        }}>
          Most FDE teams ship use cases.<br />We build the operating system.
        </h2>

        <div className="fdecmp-wrap" style={revealStyle(on, 150)}>
          <table className="fdecmp-table">
            <thead>
              <tr>
                <th style={{ color: "rgba(232,232,239,0.3)", background: VOID, width: "50%" }}>Standard FDE</th>
                <th style={{ color: TEAL, background: "rgba(0,229,195,0.055)", width: "50%" }}>Formative FDE</th>
              </tr>
            </thead>
            <tbody>
              {COMPARISON_ROWS.map(([std, fmv], i) => (
                <tr key={i} className="fdecmp-tr">
                  <td className="fdecmp-td-std" style={{
                    fontSize: 14,
                    color: "rgba(232,232,239,0.35)",
                    fontWeight: 400,
                    background: i % 2 === 0 ? VOID : "rgba(255,255,255,0.012)",
                  }}>{std}</td>
                  <td className="fdecmp-td-fmv" style={{
                    fontSize: 14,
                    color: TEXT,
                    fontWeight: 500,
                    background: i % 2 === 0 ? "rgba(0,229,195,0.022)" : "rgba(0,229,195,0.04)",
                  }}>{fmv}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

// ── Section 08: FdeCta ────────────────────────────────────────────────────────
// Formative Console frame with FDE CTA content inside.
// Left col: animated F-mark comet + cycling formation phrase (same as ConsoleTerminal).
// Right col: existing CTA copy — description, stat line, action buttons.
// ── Diagnostic form ───────────────────────────────────────────────────────────
// Structure follows the cxo.dev/#talk reference: paired name/email row, an
// interest grid, two qualifying selects, a free-text box, then submit. Options
// are Formative's, not the reference's.
// Posts to /api/diagnostic, which persists the lead and notifies the team.
const FDE_INTERESTS = [
  ["diagnostic",  "Digital Operations Diagnostic"],
  ["fde",         "Forward Deployment Engineering"],
  ["agentic",     "Agentic workflow design"],
  ["operability", "AI-operability assessment"],
  ["factory",     "Software factory build-out"],
  ["unsure",      "Not sure yet"],
];

const FDE_TEAM_SIZES = ["1–10", "11–50", "51–200", "201–1,000", "1,000+"];
const FDE_REVENUES   = ["Pre-revenue", "<$1M", "$1M–$10M", "$10M–$50M", "$50M–$250M", "$250M+"];

function FdeField({ label, children }) {
  return (
    <label style={{ display: "block" }}>
      <span style={{
        display: "block",
        fontFamily: "'IBM Plex Mono', monospace",
        fontSize: 9.5, letterSpacing: "0.16em", textTransform: "uppercase",
        color: "rgba(232,232,239,0.4)", marginBottom: 7,
      }}>{label}</span>
      {children}
    </label>
  );
}

function FdeDiagnosticForm() {
  const [interests, setInterests] = React.useState([]);
  const [status,    setStatus]    = React.useState("idle"); // idle | sending | ok | error
  const [error,     setError]     = React.useState("");

  const toggle = (key) => setInterests((prev) =>
    prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key]
  );

  const onSubmit = async (e) => {
    e.preventDefault();
    if (status === "sending") return;
    const fd = new FormData(e.currentTarget);

    // Honeypot: real people leave this empty. Silently accept and stop.
    if (fd.get("website")) { setStatus("ok"); return; }

    setStatus("sending"); setError("");
    try {
      const res = await fetch("/api/diagnostic", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          name:      (fd.get("name")    || "").toString().trim(),
          email:     (fd.get("email")   || "").toString().trim(),
          teamSize:  (fd.get("teamSize")  || "").toString(),
          revenue:   (fd.get("revenue")   || "").toString(),
          context:   (fd.get("context")   || "").toString().trim(),
          interests,
          page: "fde",
        }),
      });
      if (!res.ok) {
        const body = await res.json().catch(() => ({}));
        throw new Error(body.error || `Request failed (${res.status})`);
      }
      setStatus("ok");
    } catch (err) {
      setStatus("error");
      setError(err.message || "Something went wrong.");
    }
  };

  if (status === "ok") {
    return (
      <div role="status" style={{
        border: "1px solid rgba(0,229,195,0.28)", borderRadius: 10,
        background: "rgba(0,229,195,0.05)", padding: "22px 24px",
      }}>
        <p style={{
          fontFamily: "'IBM Plex Mono', monospace", fontSize: 10,
          letterSpacing: "0.16em", textTransform: "uppercase",
          color: TEAL, marginBottom: 10,
        }}>Received</p>
        <p style={{
          fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 14.5,
          lineHeight: 1.7, color: TEXT, margin: 0,
        }}>
          Thanks — we&rsquo;ll be in touch within two business days to scope the
          diagnostic.
        </p>
      </div>
    );
  }

  const sending = status === "sending";

  return (
    <form onSubmit={onSubmit} noValidate={false}>
      {/* Honeypot — off-screen, not hidden, so bots that check visibility still fill it */}
      <div aria-hidden="true" style={{ position: "absolute", left: "-9999px", top: 0 }}>
        <label>Website<input type="text" name="website" tabIndex={-1} autoComplete="off" /></label>
      </div>

      <div className="fdeform-row">
        <FdeField label="Name">
          <input className="fdeform-input" type="text" name="name" required
            placeholder="Your name" autoComplete="name" disabled={sending} />
        </FdeField>
        <FdeField label="Work email">
          <input className="fdeform-input" type="email" name="email" required
            placeholder="you@company.com" autoComplete="email" disabled={sending} />
        </FdeField>
      </div>

      <fieldset style={{ border: "none", padding: 0, margin: "18px 0 0" }}>
        <legend style={{
          fontFamily: "'IBM Plex Mono', monospace",
          fontSize: 9.5, letterSpacing: "0.16em", textTransform: "uppercase",
          color: "rgba(232,232,239,0.4)", marginBottom: 9, padding: 0,
        }}>What do you need help with?</legend>
        <div className="fdeform-interests">
          {FDE_INTERESTS.map(([key, label]) => {
            const on = interests.includes(key);
            return (
              <button key={key} type="button"
                className="fdeform-chip" data-on={on ? "true" : "false"}
                aria-pressed={on} disabled={sending}
                onClick={() => toggle(key)}
              >
                <span>{label}</span>
                <span className="fdeform-box" aria-hidden="true">{on ? "✓" : ""}</span>
              </button>
            );
          })}
        </div>
      </fieldset>

      <div className="fdeform-row" style={{ marginTop: 18 }}>
        <FdeField label="Team size">
          <select className="fdeform-input" name="teamSize" required disabled={sending} defaultValue="">
            <option value="" disabled>Select range</option>
            {FDE_TEAM_SIZES.map((v) => <option key={v} value={v}>{v}</option>)}
          </select>
        </FdeField>
        <FdeField label="Annual revenue">
          <select className="fdeform-input" name="revenue" required disabled={sending} defaultValue="">
            <option value="" disabled>Select range</option>
            {FDE_REVENUES.map((v) => <option key={v} value={v}>{v}</option>)}
          </select>
        </FdeField>
      </div>

      <div style={{ marginTop: 18 }}>
        <FdeField label="Tell us more">
          <textarea className="fdeform-input fdeform-textarea" name="context" rows={3}
            disabled={sending}
            placeholder="Where work is stuck, current AI usage, what you're hoping to change..." />
        </FdeField>
      </div>

      {status === "error" && (
        <p role="alert" style={{
          fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 13,
          lineHeight: 1.6, color: "rgba(232,232,239,0.75)", marginTop: 14,
        }}>
          {error} You can also email{" "}
          <a href="mailto:khang@formative.ai" style={{ color: TEAL }}>khang@formative.ai</a>.
        </p>
      )}

      <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 22 }}>
        <button type="submit" className="fdeform-submit" disabled={sending}>
          {sending ? "Sending…" : "Send  →"}
        </button>
      </div>
    </form>
  );
}

function FdeCta() {
  const [ref, on]                        = useReveal(0.1);
  const [phraseIdx,    setPhraseIdx]     = React.useState(0);
  const [dotCount,     setDotCount]      = React.useState(1);
  const [fading,       setFading]        = React.useState(false);
  const [panelHovered, setPanelHovered]  = React.useState(false);

  // Animate dots 1 → 2 → 3 whenever phrase changes
  React.useEffect(() => {
    setDotCount(1);
    let n = 1;
    const iv = setInterval(() => { n++; setDotCount(n); if (n >= 3) clearInterval(iv); }, 550);
    return () => clearInterval(iv);
  }, [phraseIdx]);

  // Auto-advance phrase when shimmer animation ends
  const handleShimmerEnd = () => {
    setFading(true);
    setTimeout(() => { setPhraseIdx(i => (i + 1) % FDE_PHRASES.length); setFading(false); }, 320);
  };

  // Manual advance on click
  const advancePhrase = () => {
    if (fading) return;
    setFading(true);
    setTimeout(() => { setPhraseIdx(i => (i + 1) % FDE_PHRASES.length); setFading(false); }, 200);
  };

  return (
    <section id="fde-cta" className="fdecta-pad" style={{ background: VOID, padding: "120px 60px 140px", position: "relative", overflow: "hidden" }}>

      {/* Ambient glow — outer diffuse */}
      <div style={{
        position: "absolute", inset: 0, pointerEvents: "none",
        background: "radial-gradient(ellipse 80% 60% at 50% 52%, rgba(0,229,195,0.065) 0%, transparent 65%)",
      }} />
      {/* Ambient glow — inner spotlight */}
      <div style={{
        position: "absolute", left: "50%", top: "50%",
        transform: "translate(-50%,-50%)",
        width: 700, height: 400, borderRadius: "50%",
        pointerEvents: "none",
        background: "radial-gradient(ellipse at center, rgba(0,229,195,0.08) 0%, transparent 70%)",
        filter: "blur(48px)",
      }} />

      <style>{`
        @keyframes fdectaCometLoop {
          from { stroke-dashoffset: 0; }
          to   { stroke-dashoffset: -724; }
        }
        @keyframes fdectaLivePulse {
          0%, 100% { opacity: 1; transform: scale(1); }
          50%      { opacity: 0.4; transform: scale(0.78); }
        }
        @keyframes fdectaShimmer {
          0%   { background-position: 75% center; }
          100% { background-position: 25% center; }
        }
        .fdecta-phrase { cursor: pointer; transition: opacity 0.25s ease; }
        .fdecta-phrase:hover { opacity: 0.85; }
        .fdecta-advance-hint { opacity: 0; transition: opacity 0.2s ease; }
        .fdecta-phrase:hover .fdecta-advance-hint { opacity: 1; }
        .fdecta-btn-primary {
          display: inline-flex; align-items: center; justify-content: center;
          background: linear-gradient(135deg, #00e5c3, #3b7cf4);
          color: #0a0a0c;
          font-family: 'IBM Plex Sans', sans-serif;
          font-size: 14px; font-weight: 700;
          padding: 14px 28px; border-radius: 10px;
          text-decoration: none; letter-spacing: 0.01em;
          transition: transform 0.22s ease, box-shadow 0.22s ease;
          white-space: nowrap;
        }
        .fdecta-btn-primary:hover {
          transform: translateY(-2px);
          box-shadow: 0 16px 48px rgba(0,229,195,0.32);
        }
        /* ── Diagnostic form ── */
        .fdeform-row {
          display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
        }
        .fdeform-input {
          width: 100%;
          background: rgba(255,255,255,0.02);
          border: 1px solid rgba(255,255,255,0.10);
          border-radius: 8px;
          padding: 10px 12px;
          color: #e8e8ef;
          font-family: 'IBM Plex Sans', sans-serif;
          font-size: 13.5px; line-height: 1.4;
          transition: border-color 0.18s ease, background 0.18s ease;
          appearance: none; -webkit-appearance: none;
        }
        .fdeform-input::placeholder { color: rgba(232,232,239,0.28); }
        .fdeform-input:hover { border-color: rgba(255,255,255,0.18); }
        .fdeform-input:focus {
          outline: none;
          border-color: rgba(0,229,195,0.55);
          background: rgba(0,229,195,0.03);
        }
        .fdeform-input:focus-visible { outline: 2px solid rgba(0,229,195,0.35); outline-offset: 2px; }
        .fdeform-input:disabled { opacity: 0.5; }
        .fdeform-textarea { resize: vertical; min-height: 66px; font-family: 'IBM Plex Sans', sans-serif; }
        /* Native select arrow, drawn to match the hairline system */
        select.fdeform-input {
          background-image: linear-gradient(45deg, transparent 50%, rgba(232,232,239,0.4) 50%),
                            linear-gradient(135deg, rgba(232,232,239,0.4) 50%, transparent 50%);
          background-position: calc(100% - 16px) center, calc(100% - 11px) center;
          background-size: 5px 5px, 5px 5px;
          background-repeat: no-repeat;
          padding-right: 32px;
        }
        select.fdeform-input option { background: #16161a; color: #e8e8ef; }

        .fdeform-interests { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
        .fdeform-chip {
          display: flex; align-items: center; justify-content: space-between; gap: 10px;
          width: 100%; text-align: left; cursor: pointer;
          background: rgba(255,255,255,0.02);
          border: 1px solid rgba(255,255,255,0.10);
          border-radius: 8px; padding: 9px 11px;
          color: rgba(232,232,239,0.62);
          font-family: 'IBM Plex Sans', sans-serif;
          font-size: 12.5px; line-height: 1.35;
          transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
        }
        .fdeform-chip:hover { border-color: rgba(255,255,255,0.2); color: #e8e8ef; }
        .fdeform-chip[data-on="true"] {
          border-color: rgba(0,229,195,0.45);
          background: rgba(0,229,195,0.06);
          color: #e8e8ef;
        }
        .fdeform-chip:focus-visible { outline: 2px solid rgba(0,229,195,0.5); outline-offset: 2px; }
        .fdeform-chip:disabled { opacity: 0.5; cursor: default; }
        .fdeform-box {
          flex-shrink: 0; width: 14px; height: 14px; border-radius: 3px;
          border: 1px solid rgba(255,255,255,0.18);
          display: flex; align-items: center; justify-content: center;
          font-size: 9px; color: #0a0a0c; line-height: 1;
        }
        .fdeform-chip[data-on="true"] .fdeform-box {
          background: #00e5c3; border-color: #00e5c3;
        }

        .fdeform-submit {
          display: inline-flex; align-items: center; justify-content: center;
          background: linear-gradient(135deg, #00e5c3, #3b7cf4);
          color: #0a0a0c; border: none;
          font-family: 'IBM Plex Sans', sans-serif;
          font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
          padding: 12px 26px; border-radius: 9px; cursor: pointer;
          transition: transform 0.22s ease, box-shadow 0.22s ease, opacity 0.2s ease;
        }
        .fdeform-submit:hover:not(:disabled) {
          transform: translateY(-2px); box-shadow: 0 14px 40px rgba(0,229,195,0.3);
        }
        .fdeform-submit:focus-visible { outline: 2px solid rgba(0,229,195,0.6); outline-offset: 3px; }
        .fdeform-submit:disabled { opacity: 0.6; cursor: default; }

        @media (max-width: 900px) {
          .fdeform-row, .fdeform-interests { grid-template-columns: 1fr; }
          .fdeform-submit { width: 100%; }
        }

        .fdecta-btn-ghost {
          display: inline-flex; align-items: center; gap: 6px;
          border: 1px solid rgba(0,229,195,0.35);
          color: rgba(232,232,239,0.65);
          font-family: 'IBM Plex Sans', sans-serif;
          font-size: 14px; font-weight: 400;
          padding: 14px 24px; border-radius: 10px;
          text-decoration: none;
          transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
          white-space: nowrap;
        }
        .fdecta-btn-ghost:hover { border-color: rgba(0,229,195,0.65); color: #e8e8ef; background: rgba(0,229,195,0.04); }
        @media (max-width: 768px) {
          .fdecta-pad    { padding: 80px 0 60px !important; }
          .fdecta-cols   { grid-template-columns: 1fr !important; }
          .fdecta-left   { padding-right: 0 !important; border-right: none !important; padding-bottom: 28px !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
          .fdecta-right  { padding-left: 0 !important; padding-top: 28px !important; }
          .fdecta-btns   { flex-direction: column !important; align-items: stretch !important; }
          .fdecta-btns a { text-align: center !important; }
          .fde-cta-panel  { border-radius: 0 !important; border-left: none !important; border-right: none !important; }
        }
        @media (min-width: 769px) {
          .fdecta-pad { padding: 120px 60px 140px !important; }
        }
      `}</style>

      {/* ── Section intro ──────────────────────────────────────────────────────── */}
      <div style={{
        maxWidth: 960, margin: "0 auto 52px",
        position: "relative", zIndex: 1, textAlign: "center",
        opacity: on ? 1 : 0,
        transform: on ? "translateY(0)" : "translateY(16px)",
        transition: "opacity 0.5s ease, transform 0.5s ease",
      }} ref={ref}>
        <div style={{
          display: "inline-flex", alignItems: "center", gap: 8, marginBottom: 20,
          border: "1px solid rgba(0,229,195,0.25)", borderRadius: 100,
          background: "rgba(0,229,195,0.05)", padding: "5px 14px",
        }}>
          <div style={{
            width: 5, height: 5, borderRadius: "50%",
            background: TEAL, boxShadow: `0 0 6px ${TEAL}`,
            animation: "fdectaLivePulse 2s ease-in-out infinite",
          }} />
          <span style={{
            fontFamily: "'IBM Plex Mono', monospace",
            fontSize: 11, fontWeight: 700, letterSpacing: "0.1em",
            textTransform: "uppercase", color: TEAL,
          }}>Start Here</span>
        </div>
        <h2 style={{
          fontFamily: "'Instrument Serif', Georgia, serif",
          fontSize: "clamp(26px, 3.2vw, 48px)",
          fontWeight: 400, letterSpacing: "-0.024em", lineHeight: 1.08,
          color: TEXT, margin: 0,
        }}>
          Start with a Digital Operations Diagnostic
        </h2>
      </div>

      {/* ── Console panel ──────────────────────────────────────────────────────── */}
      <div
        className="fde-cta-panel terminal-card--split"
        onMouseEnter={() => setPanelHovered(true)}
        onMouseLeave={() => setPanelHovered(false)}
        style={{
          maxWidth: 960, margin: "0 auto",
          position: "relative", zIndex: 1,
          borderRadius: 12,
          borderTop: "1px solid rgba(0,229,195,0.32)",
          borderLeft: "1px solid rgba(255,255,255,0.10)",
          borderRight: "1px solid rgba(255,255,255,0.10)",
          borderBottom: "1px solid rgba(255,255,255,0.10)",
          overflow: "hidden",
          opacity: on ? 1 : 0,
          transform: on ? "translateY(0)" : "translateY(20px)",
          transition: "opacity 0.7s ease 0.15s, transform 0.7s cubic-bezier(0.16,1,0.3,1) 0.15s, box-shadow 0.4s ease",
          boxShadow: panelHovered
            ? "0 0 0 1px rgba(0,229,195,0.16), 0 48px 96px rgba(0,0,0,0.7), 0 0 80px rgba(0,229,195,0.05)"
            : "0 24px 60px rgba(0,0,0,0.45)",
        }}
      >
        {/* Panel header */}
        <div style={{
          height: 40, background: "#0c0c0f",
          borderBottom: "1px solid rgba(255,255,255,0.07)",
          display: "flex", alignItems: "center", justifyContent: "space-between",
          padding: "0 20px", userSelect: "none",
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", color: "rgba(232,232,239,0.62)", fontWeight: 500 }}>FORMATIVE</span>
            <span style={{ color: "rgba(255,255,255,0.15)", fontSize: 13, lineHeight: 1 }}>|</span>
            <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", color: "rgba(232,232,239,0.3)" }}>FDE</span>
          </div>
          <div style={{
            display: "flex", alignItems: "center", gap: 6,
            border: "1px solid rgba(0,229,195,0.3)", borderRadius: 100,
            background: "rgba(0,229,195,0.07)", padding: "4px 12px",
          }}>
            <div style={{ width: 6, height: 6, borderRadius: "50%", background: TEAL, flexShrink: 0, animation: "fdectaLivePulse 2s ease-in-out infinite" }} />
            <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 10, letterSpacing: "0.18em", color: TEAL, textTransform: "uppercase", fontWeight: 500 }}>live</span>
          </div>
        </div>

        {/* Panel body — two-column split */}
        <div style={{ background: "#0d0d10", position: "relative", overflow: "hidden" }}>
          {/* Scanlines */}
          <div style={{
            position: "absolute", inset: 0, pointerEvents: "none", zIndex: 0,
            backgroundImage: "repeating-linear-gradient(to bottom, transparent 0px, transparent 3px, rgba(0,0,0,0.055) 3px, rgba(0,0,0,0.055) 4px)",
          }} />

          <div style={{ padding: "40px 48px", position: "relative", zIndex: 1 }}>
            <div className="fdecta-cols" style={{ display: "grid", gridTemplateColumns: "1fr 1.35fr", gap: 0, alignItems: "start" }}>

              {/* ── LEFT: F-mark comet + cycling phrase ── */}
              <div className="fdecta-left"
                style={{ paddingRight: 56, borderRight: "1px solid rgba(255,255,255,0.07)", paddingBottom: 4 }}>
                <div className="fdecta-phrase" onClick={advancePhrase}
                  style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <svg viewBox="0 0 200 220" width="16" height="18" style={{ overflow: "visible", flexShrink: 0 }}>
                    <defs>
                      <filter id="fdectaGlow" x="-120%" y="-120%" width="340%" height="340%">
                        <feGaussianBlur stdDeviation="5" result="b" />
                        <feMerge><feMergeNode in="b" /><feMergeNode in="SourceGraphic" /></feMerge>
                      </filter>
                    </defs>
                    <path d={FDE_F_PATH} fill="none" stroke="rgba(0,229,195,0.12)" strokeWidth="14" strokeLinecap="square" strokeLinejoin="miter" />
                    <path d={FDE_F_PATH} fill="none" stroke="rgba(0,229,195,0.18)" strokeWidth="12" strokeLinecap="round" strokeLinejoin="round"
                      strokeDasharray={`80 ${FDE_F_LEN - 80}`}
                      style={{ animation: `fdectaCometLoop ${FDE_COMET_DUR} linear infinite`, animationDelay: "0s" }} />
                    <path d={FDE_F_PATH} fill="none" stroke="rgba(0,229,195,0.45)" strokeWidth="7" strokeLinecap="round" strokeLinejoin="round"
                      strokeDasharray={`45 ${FDE_F_LEN - 45}`}
                      style={{ animation: `fdectaCometLoop ${FDE_COMET_DUR} linear infinite`, animationDelay: FDE_BODY_DELAY }} />
                    <path d={FDE_F_PATH} fill="none" stroke="#00e5c3" strokeWidth="10" strokeLinecap="round" strokeLinejoin="round"
                      strokeDasharray={`8 ${FDE_F_LEN - 8}`} filter="url(#fdectaGlow)"
                      style={{ animation: `fdectaCometLoop ${FDE_COMET_DUR} linear infinite`, animationDelay: FDE_TIP_DELAY }} />
                  </svg>
                  <span style={{ color: "rgba(0,229,195,0.7)", fontSize: 14, userSelect: "none" }}>&#8250;</span>
                  <span
                    key={phraseIdx}
                    onAnimationEnd={handleShimmerEnd}
                    style={{
                      fontFamily: "'IBM Plex Mono', monospace",
                      fontSize: 15, fontWeight: 400,
                      width: 180, display: "inline-block",
                      opacity: fading ? 0 : 1,
                      transition: "opacity 0.32s ease",
                      background: "linear-gradient(90deg, #00e5c3 49%, rgba(220,255,250,0.95) 50%, #00e5c3 51%)",
                      backgroundSize: "300% 100%",
                      WebkitBackgroundClip: "text",
                      WebkitTextFillColor: "transparent",
                      backgroundClip: "text",
                      animation: `fdectaShimmer ${FDE_SHIMMER_MS}ms linear 1 forwards`,
                    }}
                  >
                    {FDE_PHRASES[phraseIdx]}{".".repeat(dotCount)}
                  </span>
                  <span className="fdecta-advance-hint" style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, color: "rgba(0,229,195,0.38)", userSelect: "none" }}>&#8635;</span>
                </div>

                <div style={{ display: "inline-flex", alignItems: "center", gap: 8, border: "1px solid rgba(0,229,195,0.22)", borderRadius: 100, background: "rgba(0,229,195,0.05)", padding: "4px 12px", margin: "26px 0 22px" }}>
                  <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, color: "rgba(0,229,195,0.6)" }}>$</span>
                  <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, letterSpacing: "0.04em", color: "rgba(0,229,195,0.78)" }}>fde --engage</span>
                </div>
                <p style={{
                  fontFamily: "'IBM Plex Sans', sans-serif",
                  fontSize: "clamp(13px, 1.05vw, 15px)", lineHeight: 1.78,
                  color: MUTED, marginBottom: 14,
                }}>
                  In 2&ndash;4 weeks, our team maps your enterprise as a digital system &mdash; identifying the highest-ROI AI opportunities and the gaps preventing you from reaching them. Fixed fee. No strings.
                </p>
                <p style={{
                  fontFamily: "'IBM Plex Sans', sans-serif",
                  fontSize: "clamp(13px, 1.05vw, 15px)", lineHeight: 1.78,
                  color: TEXT, fontWeight: 600, margin: 0,
                }}>
                  The finding usually pays for itself 10x.
                </p>
              </div>

              {/* ── RIGHT: the form ── */}
              <div className="fdecta-right" style={{ paddingLeft: 56 }}>
                <FdeDiagnosticForm />
              </div>

            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Register sections ─────────────────────────────────────────────────────────
window.FormativeSite.sections = window.FormativeSite.sections || {};
window.FormativeSite.sections["fdeHero"]          = (t) => <FdeHero tweaks={t} />;
window.FormativeSite.sections["fdeDeploymentGap"] = ()  => <FdeDeploymentGap />;
window.FormativeSite.sections["fdeFramework"]     = ()  => <FdeFramework />;
window.FormativeSite.sections["fdeModel"]         = ()  => <FdeModel />;
window.FormativeSite.sections["fdeEngagement"]    = ()  => <FdeEngagement />;
window.FormativeSite.sections["fdeCDOO"]          = ()  => <FdeCDOO />;
window.FormativeSite.sections["fdeComparison"]    = ()  => <FdeComparison />;
window.FormativeSite.sections["fdeCta"]           = ()  => <FdeCta />;