// Premium product-page portfolio — light, spacious, marquee-driven.
// Inspired by the *principles* of high-end product marketing sites: massive type,
// generous whitespace, centered single-focus sections. NOT a recreation of any
// branded site. Original aesthetic.

const PALETTE = {
  bg: "#F5F5F7",
  bgAlt: "#FFFFFF",
  bgDark: "#1D1D1F",
  ink: "#1D1D1F",
  inkSoft: "#424245",
  inkMuted: "#86868B",
  inkFaint: "#D2D2D7",
  line: "#D2D2D7",
  lineFaint: "#E8E8ED",
  // Apple-like link blue on light neutral surfaces.
  accent: "#0066CC",
  accentHover: "#0057B8",
  accentSoft: "#EAF3FF",
  // Secondary surface for inverted hero blocks
  inkBg: "#1D1D1F",
  inkBgInk: "#F5F5F7",
};

const INTELLIGENCE_GRADIENT = "linear-gradient(90deg, #0A84FF 0%, #5E5CE6 28%, #BF5AF2 50%, #FF375F 72%, #FF6A00 100%)";

const LAYOUT = {
  content: 1180,
  wide: 1280,
  reading: 980,
};

const SPACE = {
  pageX: "clamp(18px, 2.2vw, 32px)",
  sectionY: "clamp(84px, 10vw, 120px)",
  sectionYTight: "clamp(56px, 7vw, 80px)",
  sectionYLoose: "clamp(100px, 12vw, 140px)",
};

const RADIUS = {
  sm: 14,
  md: 20,
  lg: 24,
  xl: 28,
  pill: 999,
};

const SHADOW = {
  card: "0 12px 28px rgba(17,24,39,0.06)",
  cardHover: "0 20px 44px rgba(17,24,39,0.10)",
  insetGlow: "inset 0 1px 0 rgba(255,255,255,0.72)",
};

const MOTION = {
  fast: "180ms cubic-bezier(0.2, 0.8, 0.2, 1)",
  standard: "280ms cubic-bezier(0.2, 0.8, 0.2, 1)",
};

// ─────── Cool tint system ───────
// All tints share the same lightness (0.97) and chroma (0.025).
// Only hue varies, so the page stays calm and on-brand with the existing blue.
// Each tint comes with: bg (card surface), edge (subtle border), ink (label/icon color).
const TINTS = {
  blue:     { bg: "oklch(0.97 0.025 252)", edge: "oklch(0.92 0.04 252)", ink: "oklch(0.45 0.14 252)" },
  teal:     { bg: "oklch(0.97 0.025 195)", edge: "oklch(0.92 0.04 195)", ink: "oklch(0.45 0.12 195)" },
  mint:     { bg: "oklch(0.97 0.025 165)", edge: "oklch(0.92 0.04 165)", ink: "oklch(0.45 0.12 165)" },
  lavender: { bg: "oklch(0.97 0.025 290)", edge: "oklch(0.92 0.04 290)", ink: "oklch(0.45 0.14 290)" },
  rose:     { bg: "oklch(0.97 0.025 15)",  edge: "oklch(0.92 0.04 15)",  ink: "oklch(0.50 0.14 15)"  },
  amber:    { bg: "oklch(0.97 0.025 75)",  edge: "oklch(0.92 0.04 75)",  ink: "oklch(0.50 0.12 75)"  },
};

// Layer hues — bottom-up infrastructure → top-of-stack business value.
// L1 Data Fabric (mint) → L2 Platform (teal) → L3 Products & Agents (blue)
// → L4 Governance (lavender) → L5 Business Integration (rose).
const LAYER_TINTS = {
  L1: TINTS.mint,
  L2: TINTS.teal,
  L3: TINTS.blue,
  L4: TINTS.lavender,
  L5: TINTS.rose,
};

// Publication category hues.
const CATEGORY_TINTS = {
  "Enterprise AI & Financial Systems":  TINTS.blue,
  "AI in Healthcare & Life Sciences":   TINTS.mint,
  "Cybersecurity & Intelligent Systems": TINTS.teal,
  "AI Governance, Ethics & Trust":      TINTS.lavender,
};

const TYPE = {
  display: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
  body: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
  mono: '"JetBrains Mono", ui-monospace, Menlo, monospace',
};

const EAIOS_LOGO = "uploads/eai.os.jpg";

// Premium type scale
const TS = {
  hero:      { fontSize: "clamp(54px, 8vw, 88px)", lineHeight: 1.05, letterSpacing: "-0.035em", fontWeight: 600 },
  heroBig:   { fontSize: "clamp(72px, 10vw, 112px)", lineHeight: 1.02, letterSpacing: "-0.04em", fontWeight: 600 },
  display:   { fontSize: "clamp(42px, 6.4vw, 64px)", lineHeight: 1.08, letterSpacing: "-0.03em", fontWeight: 600 },
  h1:        { fontSize: "clamp(34px, 4.7vw, 48px)", lineHeight: 1.1, letterSpacing: "-0.025em", fontWeight: 600 },
  h2:        { fontSize: "clamp(28px, 4.2vw, 36px)", lineHeight: 1.15, letterSpacing: "-0.02em", fontWeight: 600 },
  h3:        { fontSize: "clamp(21px, 3vw, 24px)", lineHeight: 1.25, letterSpacing: "-0.015em", fontWeight: 600 },
  lead:      { fontSize: "clamp(19px, 2.8vw, 24px)", lineHeight: 1.4, letterSpacing: "-0.012em", fontWeight: 400 },
  body:      { fontSize: 17, lineHeight: 1.5, letterSpacing: "-0.005em", fontWeight: 400 },
  bodySmall: { fontSize: 14, lineHeight: 1.5, letterSpacing: 0, fontWeight: 400 },
  eyebrow:   { fontSize: 12, lineHeight: 1.4, letterSpacing: "0.08em", fontWeight: 600, textTransform: "uppercase" },
  caption:   { fontSize: 12, lineHeight: 1.4, letterSpacing: 0, fontWeight: 400 },
};

const SECTION_DEFS = {
  hero:          { title: "Overview" },
  marquee:       { title: "Highlights" },
  about:         { title: "About" },
  proficiencies: { title: "Capabilities" },
  eaios:         { title: "eAi.OS" },
  labs:          { title: "Technical Labs" },
  projects:      { title: "Reference Architectures" },
  experience:    { title: "Experience" },
  writing:       { title: "Writing & Research" },
  speaking:      { title: "Speaking" },
  education:     { title: "Credentials" },
  hiking:        { title: "Off the keyboard" },
  contact:       { title: "Contact" },
};

// Generic SVG placeholder for product/visual hero blocks.
// Subtle stripes, mono caption — no fake imagery.
function VisualPlaceholder({ caption, height = 480, tone = "light", style = {} }) {
  const isDark = tone === "dark";
  const bg = isDark ? "#1D1D1F" : "#F5F5F7";
  const stripe = isDark ? "rgba(255,255,255,0.04)" : "rgba(0,0,0,0.025)";
  const ink = isDark ? "#86868B" : "#86868B";
  return (
    <div style={{
      width: "100%",
      height,
      background: bg,
      backgroundImage: `repeating-linear-gradient(135deg, transparent 0, transparent 14px, ${stripe} 14px, ${stripe} 15px)`,
      borderRadius: 24,
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      position: "relative",
      overflow: "hidden",
      ...style,
    }}>
      <div style={{
        fontFamily: TYPE.mono,
        fontSize: 11,
        letterSpacing: "0.12em",
        color: ink,
        textTransform: "uppercase",
        textAlign: "center",
        padding: "0 32px",
      }}>
        [ {caption} ]
      </div>
    </div>
  );
}

// Abstract glyph for each eAi.OS layer — pure geometry, no AI-slop iconography.
// L1 = stacked bars (data layers) · L2 = grid dots (platform mesh) · L3 = pills (products)
// L4 = shield outline (governance) · L5 = ascending bars (business value)
function LayerGlyph({ id, tint }) {
  const stroke = tint.ink;
  const fill = tint.bg;
  return (
    <div style={{
      width: 48,
      height: 48,
      borderRadius: 12,
      background: fill,
      border: `1px solid ${tint.edge}`,
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      flexShrink: 0,
    }}>
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="1.6" strokeLinecap="round">
        {id === "L1" && (
          <g>
            <rect x="3"  y="5"  width="18" height="3" rx="1" />
            <rect x="3"  y="10.5" width="18" height="3" rx="1" />
            <rect x="3"  y="16" width="18" height="3" rx="1" />
          </g>
        )}
        {id === "L2" && (
          <g fill={stroke} stroke="none">
            <circle cx="6"  cy="6"  r="1.6" />
            <circle cx="12" cy="6"  r="1.6" />
            <circle cx="18" cy="6"  r="1.6" />
            <circle cx="6"  cy="12" r="1.6" />
            <circle cx="12" cy="12" r="1.6" />
            <circle cx="18" cy="12" r="1.6" />
            <circle cx="6"  cy="18" r="1.6" />
            <circle cx="12" cy="18" r="1.6" />
            <circle cx="18" cy="18" r="1.6" />
          </g>
        )}
        {id === "L3" && (
          <g>
            <rect x="3" y="5"  width="18" height="4" rx="2" />
            <rect x="3" y="11" width="12" height="4" rx="2" />
            <rect x="3" y="17" width="15" height="3" rx="1.5" />
          </g>
        )}
        {id === "L4" && (
          <g>
            <path d="M12 3 L20 6 L20 12 C20 16.5 16.5 19.5 12 21 C7.5 19.5 4 16.5 4 12 L4 6 Z" />
            <path d="M9 12 L11 14 L15 10" />
          </g>
        )}
        {id === "L5" && (
          <g>
            <line x1="4"  y1="20" x2="4"  y2="14" />
            <line x1="9"  y1="20" x2="9"  y2="11" />
            <line x1="14" y1="20" x2="14" y2="8"  />
            <line x1="19" y1="20" x2="19" y2="5"  />
          </g>
        )}
      </svg>
    </div>
  );
}

// ─────── Nav ───────
const NAV_LINKS = [
  { label: "Home",          anchor: "#hero",         page: "home",        file: "index.html" },
  { label: "Work",          anchor: "#experience",   page: "work",        file: "work.html" },
  { label: "eAi.OS",        anchor: "#eaios",        page: "eaios",       file: "eai-os.html" },
  { label: "Labs",          anchor: "#labs",         page: "labs",        file: "eai-os.html" },
  { label: "Architectures", anchor: "#projects",     page: "projects",    file: "eai-os.html" },
  { label: "Writing",       anchor: "#writing",      page: "writing",     file: "writing.html" },
  { label: "Speaking",      anchor: "#speaking",     page: "speaking",    file: "speaking.html" },
  { label: "Credentials",   anchor: "#education",    page: "credentials", file: "credentials.html" },
  { label: "Trail Log",     anchor: "#hiking",       page: "hiking",      file: "hiking.html" },
];

// Scroll-spy: observes section ids and returns the one currently in view.
function useActiveSection(ids, { topOffset = 80 } = {}) {
  const [active, setActive] = React.useState(null);
  React.useEffect(() => {
    if (!ids || !ids.length) return;

    const compute = () => {
      // Bottom-of-page edge case: if the user is at the very bottom, force last id.
      const scrollBottom = window.scrollY + window.innerHeight;
      const docHeight = document.documentElement.scrollHeight;
      if (docHeight - scrollBottom < 4) {
        setActive(ids[ids.length - 1]);
        return;
      }

      // Pick the section whose top is just above the offset line.
      const probe = window.scrollY + topOffset + 1;
      let current = null;
      for (const id of ids) {
        const el = document.getElementById(id);
        if (!el) continue;
        const top = el.getBoundingClientRect().top + window.scrollY;
        if (top <= probe) current = id;
      }
      setActive(current);
    };

    compute();
    window.addEventListener("scroll", compute, { passive: true });
    window.addEventListener("resize", compute);
    return () => {
      window.removeEventListener("scroll", compute);
      window.removeEventListener("resize", compute);
    };
  }, [ids.join("|"), topOffset]);
  return active;
}

function Nav({ currentPage, activeAnchor }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header style={{
      position: "sticky",
      top: 0,
      zIndex: 50,
      background: scrolled ? "rgba(251,251,253,0.78)" : "rgba(251,251,253,0.6)",
      backdropFilter: "saturate(180%) blur(20px)",
      WebkitBackdropFilter: "saturate(180%) blur(20px)",
      borderBottom: scrolled ? `1px solid ${PALETTE.lineFaint}` : "1px solid transparent",
      transition: `all ${MOTION.standard}`,
    }}>
      <nav style={{
        maxWidth: LAYOUT.wide,
        margin: "0 auto",
        padding: `0 ${SPACE.pageX}`,
        height: 60,
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        gap: 16,
        fontFamily: TYPE.body,
        fontSize: 14,
        fontWeight: 400,
      }}>
        <a href="index.html" style={{
          color: PALETTE.ink,
          textDecoration: "none",
          fontWeight: 600,
          letterSpacing: "-0.01em",
          whiteSpace: "nowrap",
        }}>
          GaneshRamalingam.us
        </a>
        <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
          {NAV_LINKS.map((n) => {
            // On sub-pages: highlight the link matching the page.
            // On the homepage: highlight the link whose anchor section is currently in view.
            const isPageActive = currentPage === n.page;
            const isAnchorActive = !currentPage && activeAnchor && ("#" + activeAnchor) === n.anchor;
            const isActive = isPageActive || isAnchorActive;
            const href = currentPage ? n.file : n.anchor;
            return (
              <a key={n.label} href={href} style={{
                color: isActive ? "#fff" : PALETTE.inkSoft,
                background: isActive ? PALETTE.accent : "transparent",
                fontWeight: isActive ? 600 : 400,
                textDecoration: "none",
                fontSize: 13,
                padding: "6px 9px",
                borderRadius: RADIUS.pill,
                whiteSpace: "nowrap",
                transition: `background ${MOTION.fast}, color ${MOTION.fast}`,
              }}
              onMouseEnter={(e) => {
                if (isActive) return;
                e.currentTarget.style.background = PALETTE.accentSoft;
                e.currentTarget.style.color = PALETTE.accent;
              }}
              onMouseLeave={(e) => {
                if (isActive) return;
                e.currentTarget.style.background = "transparent";
                e.currentTarget.style.color = PALETTE.inkSoft;
              }}>
                {n.label}
              </a>
            );
          })}
          <a href="book-call.html" style={{
            color: PALETTE.accent,
            textDecoration: "none",
            fontSize: 13,
            fontWeight: 500,
            whiteSpace: "nowrap",
            marginLeft: 8,
          }}>
            Book a call ›
          </a>
        </div>
      </nav>
    </header>
  );
}

// ─────── Section primitives ───────

function usePrefersReducedMotion() {
  const [prefersReduced, setPrefersReduced] = React.useState(false);
  React.useEffect(() => {
    if (!window.matchMedia) return;
    const media = window.matchMedia("(prefers-reduced-motion: reduce)");
    const update = () => setPrefersReduced(media.matches);
    update();
    if (media.addEventListener) {
      media.addEventListener("change", update);
      return () => media.removeEventListener("change", update);
    }
    media.addListener(update);
    return () => media.removeListener(update);
  }, []);
  return prefersReduced;
}

function useViewportWidth() {
  const [width, setWidth] = React.useState(() =>
    typeof window === "undefined" ? 1280 : window.innerWidth
  );

  React.useEffect(() => {
    const onResize = () => setWidth(window.innerWidth);
    onResize();
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);

  return width;
}

function ScrollReveal({ children, delayMs = 0 }) {
  const prefersReduced = usePrefersReducedMotion();
  const [visible, setVisible] = React.useState(prefersReduced);
  const ref = React.useRef(null);

  React.useEffect(() => {
    if (prefersReduced) {
      setVisible(true);
      return;
    }
    const node = ref.current;
    if (!node || !window.IntersectionObserver) {
      setVisible(true);
      return;
    }

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            setVisible(true);
            observer.unobserve(entry.target);
          }
        });
      },
      { threshold: 0.15, rootMargin: "-6% 0px -10% 0px" }
    );

    observer.observe(node);
    return () => observer.disconnect();
  }, [prefersReduced]);

  return (
    <div
      ref={ref}
      style={{
        opacity: visible ? 1 : 0,
        transform: visible ? "translate3d(0,0,0) scale(1)" : "translate3d(0,22px,0) scale(0.997)",
        filter: visible ? "blur(0px)" : "blur(2px)",
        transitionProperty: "opacity, transform, filter",
        transitionDuration: "700ms",
        transitionTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
        transitionDelay: `${delayMs}ms`,
        willChange: "transform, opacity",
      }}
    >
      {children}
    </div>
  );
}

// Centered marquee-style section. Big eyebrow, huge title, lead, optional visual.
function MarqueeSection({ tone = "light", eyebrow, title, lead, cta, visual, padding = `${SPACE.sectionY} ${SPACE.pageX}`, children }) {
  const isDark = tone === "dark";
  return (
    <section style={{
      background: isDark ? PALETTE.inkBg : (tone === "alt" ? PALETTE.bgAlt : PALETTE.bg),
      color: isDark ? PALETTE.inkBgInk : PALETTE.ink,
      padding,
      textAlign: "center",
    }}>
      <div style={{ maxWidth: LAYOUT.reading, margin: "0 auto" }}>
        {eyebrow && (
          <div style={{
            ...TS.eyebrow,
            color: isDark ? "#A1A1A6" : PALETTE.accent,
            marginBottom: 16,
          }}>
            {eyebrow}
          </div>
        )}
        {title && (
          <h2 style={{
            ...TS.display,
            margin: 0,
            color: isDark ? PALETTE.inkBgInk : PALETTE.ink,
            textWrap: "balance",
          }}>
            {title}
          </h2>
        )}
        {lead && (
          <p style={{
            ...TS.lead,
            margin: "20px auto 0",
            color: isDark ? "#A1A1A6" : PALETTE.inkSoft,
            maxWidth: 720,
            textWrap: "pretty",
          }}>
            {lead}
          </p>
        )}
        {cta && (
          <div style={{ marginTop: 32, display: "flex", gap: 24, justifyContent: "center", flexWrap: "wrap" }}>
            {cta}
          </div>
        )}
        {visual && (
          <div style={{ marginTop: 56 }}>{visual}</div>
        )}
        {children && (
          <div style={{ marginTop: visual ? 0 : 56, textAlign: "left" }}>{children}</div>
        )}
      </div>
    </section>
  );
}

function PillLink({ href, children, primary = false, dark = false }) {
  const [hover, setHover] = React.useState(false);
  if (primary) {
    return (
      <a href={href} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{
        display: "inline-block",
        background: hover ? PALETTE.accentHover : PALETTE.accent,
        color: "#fff",
        padding: "12px 22px",
        borderRadius: 980,
        textDecoration: "none",
        fontFamily: TYPE.body,
        fontSize: 15,
        fontWeight: 500,
        transition: "background .15s",
      }}>
        {children}
      </a>
    );
  }
  return (
    <a href={href} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{
      color: dark ? "#2997FF" : PALETTE.accent,
      textDecoration: hover ? "underline" : "none",
      fontFamily: TYPE.body,
      fontSize: 15,
      fontWeight: 400,
    }}>
      {children} ›
    </a>
  );
}

// ─────── Hero — resume-first ───────
// Left: portrait + identity. Right: snapshot card with at-a-glance facts.
// Below: stat strip.
function Hero({ C }) {
  return (
    <section style={{
      background: PALETTE.bg,
      padding: `${SPACE.sectionYTight} ${SPACE.pageX} ${SPACE.sectionY}`,
    }}>
      <div style={{ maxWidth: LAYOUT.content, margin: "0 auto" }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))",
          gap: "clamp(28px, 4.5vw, 56px)",
          alignItems: "center",
        }}>
          {/* Identity */}
          <div>
            <div style={{ ...TS.eyebrow, color: PALETTE.accent, marginBottom: 18 }}>
              Founder eAi.OS · The Greater RTP area, North Carolina
            </div>
            <h1 style={{
              ...TS.hero,
              margin: 0,
              color: PALETTE.ink,
              textWrap: "balance",
            }}>
              Ganesh<br/>Ramalingam.
            </h1>
            <div style={{
              fontSize: 26,
              lineHeight: 1.25,
              letterSpacing: "-0.015em",
              fontWeight: 500,
              marginTop: 20,
            }}>
              <div style={{ backgroundImage: INTELLIGENCE_GRADIENT, WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent", fontWeight: 600 }}>Enterprise AI Platform Leader.</div>
              <div style={{ color: PALETTE.accent }}>Scaling intelligent systems for real-world impact.</div>
            </div>
            <div style={{
              display: "flex",
              flexWrap: "wrap",
              gap: "8px 14px",
              marginTop: 18,
              maxWidth: 580,
            }}>
              {C.taglineParts.slice(1).map((t, i) => (
                <span key={i} style={{
                  ...TS.eyebrow,
                  fontSize: 11,
                  letterSpacing: "0.1em",
                  color: PALETTE.inkMuted,
                  padding: "6px 10px",
                  border: `1px solid ${PALETTE.lineFaint}`,
                  borderRadius: 999,
                  background: PALETTE.bg,
                }}>{t}</span>
              ))}
            </div>
            <p style={{
              ...TS.lead,
              fontSize: 19,
              margin: "20px 0 0",
              color: PALETTE.inkSoft,
              maxWidth: 580,
              textWrap: "pretty",
            }}>
              {C.hero.sub}
            </p>
            <div style={{ marginTop: 32, display: "flex", gap: 24, flexWrap: "wrap", alignItems: "center" }}>
              <PillLink href="#experience" primary>View experience</PillLink>
              <PillLink href="book-call.html">Book a call</PillLink>
            </div>
          </div>

          {/* Snapshot card — the at-a-glance resume facts */}
          <div style={{
            background: PALETTE.bgAlt,
            borderRadius: RADIUS.lg,
            padding: "clamp(22px, 3.2vw, 32px)",
            boxShadow: `${SHADOW.insetGlow}, ${SHADOW.card}`,
            border: `1px solid ${PALETTE.lineFaint}`,
          }}>
            {/* Portrait */}
            <div style={{
              width: "100%",
              aspectRatio: "1 / 1",
              maxHeight: 220,
              background: "#fff",
              borderRadius: RADIUS.sm,
              overflow: "hidden",
              marginBottom: 24,
            }}>
              <img
                src="uploads/folio.jpg"
                alt="Ganesh Ramalingam"
                loading="eager"
                decoding="async"
                style={{
                  width: "100%",
                  height: "103%",
                  objectFit: "cover",
                  display: "block",
                }}
              />
            </div>

            {/* Quick-facts table */}
            <div style={{ ...TS.eyebrow, color: PALETTE.accent, marginBottom: 14 }}>At a glance</div>
            {[
              { k: "Currently",  v: "Principal Architect, Lateetud Inc" },
              { k: "Scope",      v: "Production AI platforms · teams · governance" },
              { k: "Sectors",    v: "Healthcare · Insurance · Financial Services" },
              { k: "Education",  v: "Duke MBA · PhD candidate (AI)" },
              { k: "Certified",  v: "TOGAF Distinguished EA" },
              { k: "Focus",      v: "Scaling agentic systems with operational control" },
              { k: "Status",     v: "Available for advisory", accent: true },
            ].map((r, i) => (
              <div key={i} style={{
                display: "grid",
                gridTemplateColumns: "100px 1fr",
                gap: 12,
                padding: "10px 0",
                borderTop: `1px solid ${PALETTE.lineFaint}`,
                alignItems: "baseline",
              }}>
                <div style={{ fontSize: 12, color: PALETTE.inkMuted, fontWeight: 500, letterSpacing: "0.02em" }}>{r.k}</div>
                <div style={{ fontSize: 14, color: r.accent ? PALETTE.accent : PALETTE.ink, fontWeight: r.accent ? 600 : 500 }}>
                  {r.accent && <span style={{ marginRight: 6 }}>●</span>}
                  {r.v}
                </div>
              </div>
            ))}

            {/* Social links */}
            <div style={{
              marginTop: 16,
              paddingTop: 16,
              borderTop: `1px solid ${PALETTE.lineFaint}`,
              display: "flex",
              flexDirection: "column",
              gap: 8,
            }}>
              <a href={`https://${C.linkedin}`} style={{ fontSize: 13, color: PALETTE.accent, fontWeight: 500, textDecoration: "none" }}>
                LinkedIn ›
              </a>
            </div>
          </div>
        </div>

        {/* Hero stat strip */}
        <div style={{
          marginTop: 64,
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(170px, 1fr))",
          gap: 24,
          padding: "clamp(22px, 3vw, 32px) 0",
          borderTop: `1px solid ${PALETTE.lineFaint}`,
          borderBottom: `1px solid ${PALETTE.lineFaint}`,
        }}>
          {C.hero.stats.map((s, i) => {
            const tints = [TINTS.blue, TINTS.teal, TINTS.mint, TINTS.lavender];
            const tint = tints[i % tints.length];
            return (
              <div key={i} style={{ textAlign: "center" }}>
                <div style={{
                  fontFamily: TYPE.display,
                  fontSize: 44,
                  fontWeight: 600,
                  letterSpacing: "-0.03em",
                  color: tint.ink,
                  lineHeight: 1,
                }}>{s.v}</div>
                <div style={{
                  ...TS.bodySmall,
                  color: PALETTE.inkMuted,
                  marginTop: 10,
                }}>{s.l}</div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ─────── Marquee — eAi.OS pitch (dark hero card) ───────
function EaiOSMarquee({ C }) {
  const E = C.eaios;
  return (
    <section style={{ background: PALETTE.bg, padding: `0 ${SPACE.pageX} ${SPACE.pageX}` }}>
      <div style={{ maxWidth: LAYOUT.wide, margin: "0 auto" }}>
        <div style={{
          background: PALETTE.inkBg,
          color: PALETTE.inkBgInk,
          borderRadius: RADIUS.xl,
          padding: "clamp(56px, 9vw, 100px) clamp(24px, 5vw, 48px)",
          textAlign: "center",
          position: "relative",
          overflow: "hidden",
          boxShadow: "0 30px 70px rgba(0,0,0,0.30)",
        }}>
          <div style={{ marginBottom: 28 }}>
            <img
              src={EAIOS_LOGO}
              alt="eAi.OS logo"
              loading="lazy"
              decoding="async"
              style={{
                width: "min(260px, 58vw)",
                height: "auto",
                display: "block",
                margin: "0 auto",
                borderRadius: 22,
                boxShadow: "0 24px 60px rgba(0,0,0,0.28)",
              }}
            />
          </div>
          <div style={{ ...TS.eyebrow, color: "#A1A1A6", marginBottom: 16 }}>
            eAi.OS · Enterprise AI Operating System
          </div>
          <h2 style={{
            ...TS.hero,
            margin: 0,
            color: PALETTE.inkBgInk,
            textWrap: "balance",
          }}>
            AI is not a project.<br/>
            <span style={{ color: "#86868B" }}>AI is enterprise infrastructure.</span>
          </h2>
          <p style={{
            ...TS.lead,
            margin: "28px auto 0",
            color: "#A1A1A6",
            maxWidth: 720,
            textWrap: "pretty",
          }}>
            {E.positioning}
          </p>
          <div style={{ marginTop: 40 }}>
            <PillLink href="eai-os.html" primary>Explore the framework</PillLink>
          </div>

          {/* proof strip inside dark card */}
          <div style={{
            marginTop: 80,
            display: "grid",
            gridTemplateColumns: "repeat(4, 1fr)",
            gap: 0,
            paddingTop: 40,
            borderTop: "1px solid rgba(255,255,255,0.08)",
          }}>
            {E.proof.map((p, i) => {
              // Lighter, brighter shades since this card sits on a dark bg.
              const proofColors = [
                "oklch(0.78 0.15 252)", // soft blue
                "oklch(0.78 0.12 195)", // soft teal
                "oklch(0.80 0.12 165)", // soft mint
                "oklch(0.78 0.14 290)", // soft lavender
              ];
              return (
                <div key={i} style={{
                  textAlign: "left",
                  padding: "0 24px",
                  borderLeft: i ? "1px solid rgba(255,255,255,0.08)" : "none",
                }}>
                  <div style={{
                    fontFamily: TYPE.display,
                    fontSize: 48,
                    fontWeight: 600,
                    letterSpacing: "-0.03em",
                    color: proofColors[i % proofColors.length],
                    lineHeight: 1,
                  }}>{p.stat}</div>
                  <div style={{ ...TS.bodySmall, color: "#A1A1A6", marginTop: 12, lineHeight: 1.45 }}>{p.note}</div>
                  <div style={{ ...TS.caption, letterSpacing: "0.06em", color: "#6E6E73", marginTop: 8, textTransform: "uppercase", fontSize: 10 }}>{p.source}</div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────── About ───────
function About({ C }) {
  return (
    <section style={{ background: PALETTE.bg, padding: `${SPACE.sectionY} ${SPACE.pageX}` }}>
      <div style={{ maxWidth: LAYOUT.reading, margin: "0 auto", textAlign: "center" }}>
        <div style={{ ...TS.eyebrow, color: PALETTE.accent, marginBottom: 16 }}>About</div>
        <h2 style={{ ...TS.display, margin: 0, color: PALETTE.ink, textWrap: "balance" }}>
          <span style={{ backgroundImage: INTELLIGENCE_GRADIENT, WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }}>Twenty-two years</span> architecting the systems behind the systems.
        </h2>
      </div>
      <div style={{
        maxWidth: "min(74ch, 100%)",
        margin: "clamp(40px, 6vw, 56px) auto 0",
        textAlign: "left",
      }}>
        {C.about.paragraphs.map((p, i) => (
          <p key={i} style={{
            ...TS.lead,
            fontSize: i === 0 ? "clamp(20px, 2.8vw, 22px)" : "clamp(17px, 2.2vw, 19px)",
            color: i === 0 ? PALETTE.ink : PALETTE.inkSoft,
            marginBottom: "clamp(14px, 2.4vw, 20px)",
            textWrap: "pretty",
          }}>{p}</p>
        ))}
      </div>

      {/* Verticals strip — three centered columns */}
      <div style={{
        maxWidth: LAYOUT.content,
        margin: "clamp(52px, 7vw, 80px) auto 0",
        display: "grid",
        gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))",
        gap: "clamp(14px, 2vw, 24px)",
      }}>
        {[
          { name: "Healthcare & Life Sciences", line: "Population health, precision medicine, and explainable clinical AI." },
          { name: "Insurance", line: "Underwriting intelligence, fraud detection, and risk analytics at scale." },
          { name: "Financial Services", line: "AI-driven advisory, intelligent document processing, regulated workflows." },
        ].map((v, i) => (
          <div key={i} style={{
            background: PALETTE.bgAlt,
            borderRadius: RADIUS.md,
            padding: "clamp(24px, 4vw, 40px) clamp(20px, 3.2vw, 32px)",
            border: `1px solid ${PALETTE.lineFaint}`,
            boxShadow: SHADOW.card,
          }}>
            <div style={{ ...TS.h3, color: PALETTE.ink, marginBottom: 12 }}>{v.name}</div>
            <p style={{ ...TS.body, color: PALETTE.inkSoft, margin: 0 }}>{v.line}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─────── Proficiencies ───────
function Proficiencies({ C }) {
  const T = C.technicalProficiencies;
  const viewportWidth = useViewportWidth();
  const isMobile = viewportWidth <= 700;
  const isTablet = viewportWidth > 700 && viewportWidth <= 1100;
  const isNarrow = viewportWidth <= 980;

  const spotlightWrapStyle = isMobile
    ? {
        maxWidth: 1180,
        margin: "56px auto 0",
        display: "grid",
        gridTemplateColumns: "1fr",
        gap: 14,
      }
    : isTablet
      ? {
          maxWidth: 1180,
          margin: "56px auto 0",
          display: "grid",
          gridAutoFlow: "column",
          gridAutoColumns: "minmax(320px, 78vw)",
          gap: 16,
          overflowX: "auto",
          scrollSnapType: "x mandatory",
          WebkitOverflowScrolling: "touch",
          paddingBottom: 8,
        }
      : {
          maxWidth: 1180,
          margin: "56px auto 0",
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 18,
        };

  return (
    <section style={{ background: PALETTE.bg, padding: `${SPACE.sectionY} ${SPACE.pageX}` }}>
      <div style={{ maxWidth: LAYOUT.reading, margin: "0 auto", textAlign: "center" }}>
        <div style={{ ...TS.eyebrow, color: PALETTE.accent, marginBottom: 16 }}>Capabilities</div>
        <h2 style={{ ...TS.display, margin: 0, color: PALETTE.ink, textWrap: "balance" }}>
          {T.headline.split(" ").slice(0, -2).join(" ")} <span style={{ backgroundImage: INTELLIGENCE_GRADIENT, WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }}>{T.headline.split(" ").slice(-2).join(" ")}</span>
        </h2>
        <p style={{ ...TS.lead, margin: "20px auto 0", color: PALETTE.inkSoft, maxWidth: 720, textWrap: "pretty" }}>
          {T.sub}
        </p>
      </div>

      <div style={spotlightWrapStyle}>
        {[
          { k: "Architecture", t: "Flexible platforming.", d: "Composable AI architecture that supports rapid iteration without operational sprawl." },
          { k: "Governance", t: "Effortlessly controlled every day.", d: "Policy guardrails and lifecycle governance built into model, agent, and data operations." },
          { k: "Execution", t: "Work can scale in any place.", d: "Delivery systems designed for regulated enterprise environments and measurable business outcomes." },
        ].map((card, i) => (
          <div key={i} style={{
            position: "relative",
            minHeight: isMobile ? 260 : 320,
            borderRadius: 28,
            overflow: "hidden",
            background: "#000",
            padding: "28px 28px 26px",
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-between",
            scrollSnapAlign: isTablet ? "start" : undefined,
          }}>
            <div style={{
              position: "absolute",
              inset: 0,
              background: i === 1
                ? "radial-gradient(120% 90% at 20% 100%, rgba(10,132,255,.26), transparent 55%), radial-gradient(100% 80% at 85% 10%, rgba(191,90,242,.28), transparent 55%)"
                : "radial-gradient(90% 70% at 80% 100%, rgba(10,132,255,.18), transparent 58%)",
              pointerEvents: "none",
            }} />

            <div style={{ position: "relative", zIndex: 1 }}>
              <div style={{ ...TS.eyebrow, color: "rgba(255,255,255,0.78)", marginBottom: 10 }}>{card.k}</div>
              <div style={{ ...TS.h2, fontSize: isMobile ? 40 : (isTablet ? 46 : 52), lineHeight: 1.04, letterSpacing: "-0.03em", color: "#fff", marginBottom: 12 }}>
                {card.t}
              </div>
              <p style={{ ...TS.body, color: "rgba(255,255,255,0.78)", margin: 0, maxWidth: 340 }}>{card.d}</p>
            </div>

            <div style={{
              position: "relative",
              zIndex: 1,
              alignSelf: "flex-end",
              width: 34,
              height: 34,
              borderRadius: 999,
              background: "rgba(255,255,255,0.16)",
              color: "#fff",
              display: "grid",
              placeItems: "center",
              fontSize: 24,
              lineHeight: 1,
            }}>+</div>
          </div>
        ))}
      </div>

      <div style={{
        maxWidth: 1180,
        margin: "24px auto 0",
        display: "grid",
        gridTemplateColumns: isNarrow ? "1fr" : "repeat(2, 1fr)",
        gap: 20,
      }}>
        {T.pillars.map((p, i) => (
          <div key={i} style={{
            background: PALETTE.bgAlt,
            borderRadius: 20,
            padding: "40px 36px",
            border: `1px solid ${PALETTE.lineFaint}`,
          }}>
            <div style={{ ...TS.h3, color: PALETTE.ink, marginBottom: 20 }}>{p.name}</div>
            <ul style={{ margin: 0, padding: 0, listStyle: "none" }}>
              {p.items.map((it, j) => (
                <li key={j} style={{
                  ...TS.body,
                  color: PALETTE.inkSoft,
                  padding: "10px 0",
                  borderTop: j ? `1px solid ${PALETTE.lineFaint}` : "none",
                }}>{it}</li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─────── eAi.OS detail (full) ───────
function EaiOS({ C }) {
  const E = C.eaios;
  const [activeLayer, setActiveLayer] = React.useState(null);
  const viewportWidth = useViewportWidth();
  const isNarrow = viewportWidth <= 980;
  return (
    <section style={{ background: PALETTE.bg, padding: `${SPACE.sectionY} ${SPACE.pageX}` }}>
      <div style={{ maxWidth: LAYOUT.reading, margin: "0 auto", textAlign: "center" }}>
        <div style={{ ...TS.eyebrow, color: PALETTE.accent, marginBottom: 16 }}>The Framework</div>
        <h2 style={{ ...TS.display, margin: 0, color: PALETTE.ink, textWrap: "balance" }}>
          <span style={{ backgroundImage: INTELLIGENCE_GRADIENT, WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }}>Five layers.</span> One control plane.<br/>
          <span style={{ color: PALETTE.inkMuted }}>The operating system for enterprise AI.</span>
        </h2>
        <p style={{ ...TS.lead, margin: "20px auto 0", color: PALETTE.inkSoft, maxWidth: "min(66ch, 100%)", textWrap: "pretty" }}>
          {E.analogy}
        </p>
      </div>

      <div style={{ maxWidth: LAYOUT.content, margin: "clamp(36px, 5.5vw, 48px) auto 0" }}>
        <div style={{
          background: PALETTE.bgAlt,
          borderRadius: RADIUS.lg,
          padding: "clamp(22px, 3.8vw, 40px)",
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))",
          gap: "clamp(18px, 3vw, 32px)",
          alignItems: "start",
          border: `1px solid ${PALETTE.lineFaint}`,
          boxShadow: SHADOW.card,
        }}>
          <div>
            <div style={{ ...TS.eyebrow, color: PALETTE.accent, marginBottom: 10 }}>{E.whyBuilt.title}</div>
            <div style={{ ...TS.h3, color: PALETTE.ink, margin: 0 }}>{E.whyBuilt.headline}</div>
          </div>
          <div style={{ ...TS.body, color: PALETTE.inkSoft, fontSize: 17, lineHeight: 1.7 }}>
            {E.whyBuilt.body}
          </div>
        </div>
      </div>

      {/* Architecture stack */}
      <div style={{ maxWidth: LAYOUT.content, margin: "clamp(50px, 7vw, 72px) auto 0" }}>
        {/* Control plane top */}
        <div style={{
          background: PALETTE.inkBg,
          color: PALETTE.inkBgInk,
          borderRadius: `${RADIUS.md}px ${RADIUS.md}px 0 0`,
          padding: "clamp(18px, 3.2vw, 32px) clamp(18px, 3.8vw, 40px)",
          display: "grid",
          gridTemplateColumns: isNarrow ? "1fr" : "200px 1fr",
          gap: "clamp(14px, 2.6vw, 32px)",
          alignItems: "center",
        }}>
          <div>
            <div style={{ ...TS.eyebrow, color: "#A1A1A6", marginBottom: 6 }}>Kernel</div>
            <div style={{ ...TS.h3, color: PALETTE.inkBgInk }}>Control Plane</div>
          </div>
          <div>
            <div style={{ ...TS.body, color: "#A1A1A6", marginBottom: 14 }}>{E.controlPlane.tagline}</div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
              {E.controlPlane.capabilities.map((c, i) => (
                <span key={i} style={{
                  fontSize: 12,
                  fontWeight: 500,
                  color: PALETTE.inkBgInk,
                  padding: "6px 12px",
                  background: "rgba(255,255,255,0.08)",
                  borderRadius: 980,
                }}>{c}</span>
              ))}
            </div>
          </div>
        </div>

        {/* Layers */}
        <div style={{
          background: PALETTE.bgAlt,
          borderRadius: `0 0 ${RADIUS.md}px ${RADIUS.md}px`,
          overflow: "hidden",
        }}>
          {E.layers.map((l, i) => {
            const isActive = activeLayer === l.id;
            const tint = LAYER_TINTS[l.id] || TINTS.blue;
            return (
              <div key={l.id} style={{
                borderTop: i ? `1px solid ${PALETTE.line}` : "none",
              }}>
                <button onClick={() => setActiveLayer(isActive ? null : l.id)} style={{
                  display: "grid",
                  gridTemplateColumns: isNarrow ? "56px 1fr 24px" : "56px 200px 1fr 32px",
                  gap: isNarrow ? 14 : 24,
                  alignItems: "center",
                  width: "100%",
                  padding: isNarrow ? "20px 18px" : "28px 40px",
                  background: isActive ? tint.bg : "transparent",
                  border: "none",
                  cursor: "pointer",
                  textAlign: "left",
                  fontFamily: TYPE.body,
                  transition: "background .15s",
                }}>
                  <LayerGlyph id={l.id} tint={tint} />
                  <div>
                    <div style={{ ...TS.eyebrow, color: tint.ink, marginBottom: 6 }}>Layer {l.id.replace("L","")}</div>
                    <div style={{ ...TS.h3, color: PALETTE.ink }}>{l.name}</div>
                  </div>
                  <div style={{ ...TS.body, color: PALETTE.inkSoft, display: isNarrow ? "none" : "block" }}>{l.purpose}</div>
                  <div style={{
                    fontSize: 22,
                    color: tint.ink,
                    transform: isActive ? "rotate(90deg)" : "none",
                    transition: "transform .2s",
                  }}>›</div>
                </button>
                {isActive && (
                  <div style={{
                    background: tint.bg,
                    padding: isNarrow ? "8px 18px 24px 18px" : "8px 40px 36px 320px",
                    display: "grid",
                    gridTemplateColumns: isNarrow ? "1fr" : "1fr 1fr",
                    gap: isNarrow ? 16 : 32,
                    borderTop: `1px solid ${tint.edge}`,
                  }}>
                    <div>
                      <div style={{ ...TS.eyebrow, color: tint.ink, marginBottom: 12 }}>Key components</div>
                      {l.components.map((c, j) => (
                        <div key={j} style={{ ...TS.body, color: PALETTE.inkSoft, padding: "6px 0", borderTop: j ? `1px solid ${tint.edge}` : "none" }}>{c}</div>
                      ))}
                    </div>
                    <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
                      <div>
                        <div style={{ ...TS.eyebrow, color: tint.ink, marginBottom: 8 }}>Real-world challenges</div>
                        <div style={{ ...TS.body, color: PALETTE.inkSoft }}>{l.challenges}</div>
                      </div>
                      <div>
                        <div style={{ ...TS.eyebrow, color: tint.ink, marginBottom: 8 }}>Industry anchor</div>
                        <div style={{ ...TS.body, color: PALETTE.inkSoft }}>{l.anchor}</div>
                      </div>
                      <div>
                        <div style={{ ...TS.eyebrow, color: tint.ink, marginBottom: 8 }}>2026—2028 outlook</div>
                        <div style={{ ...TS.body, color: PALETTE.inkSoft }}>{l.outlook}</div>
                      </div>
                    </div>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>

      {/* Maturity model */}
      <div style={{ maxWidth: LAYOUT.content, margin: "clamp(56px, 8vw, 80px) auto 0" }}>
        <div style={{ textAlign: "center", marginBottom: 48 }}>
          <div style={{ ...TS.eyebrow, color: PALETTE.accent, marginBottom: 12 }}>Maturity model</div>
          <h3 style={{ ...TS.h1, margin: 0, color: PALETTE.ink, textWrap: "balance" }}>
            Five levels from pilot purgatory to <span style={{ backgroundImage: INTELLIGENCE_GRADIENT, WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }}>autonomous enterprise.</span>
          </h3>
        </div>
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(170px, 1fr))",
          gap: "clamp(10px, 1.6vw, 12px)",
        }}>
          {E.maturity.map((m, i) => (
            <div key={i} style={{
              background: i === 0 ? "oklch(0.96 0.04 30)" : (i === E.maturity.length - 1 ? PALETTE.accentSoft : PALETTE.bgAlt),
              borderRadius: 16,
              padding: "28px 24px",
            }}>
              <div style={{
                fontFamily: TYPE.display,
                fontSize: 40,
                fontWeight: 600,
                letterSpacing: "-0.03em",
                color: PALETTE.ink,
                lineHeight: 1,
                marginBottom: 8,
              }}>L{m.level}</div>
              {m.zone && (
                <div style={{ ...TS.caption, letterSpacing: "0.06em", color: i === 0 ? "oklch(0.45 0.18 30)" : PALETTE.accent, textTransform: "uppercase", fontWeight: 600, marginBottom: 10 }}>
                  {m.zone}
                </div>
              )}
              <div style={{ ...TS.h3, fontSize: 18, color: PALETTE.ink, marginBottom: 8 }}>{m.name}</div>
              <div style={{ ...TS.bodySmall, color: PALETTE.inkSoft }}>{m.desc}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Book teaser */}
      <div style={{ maxWidth: LAYOUT.content, margin: "clamp(56px, 8vw, 80px) auto 0" }}>
        <div style={{
          background: PALETTE.bgAlt,
          borderRadius: RADIUS.lg,
          padding: "clamp(24px, 5vw, 64px) clamp(20px, 4vw, 56px)",
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
          gap: "clamp(24px, 4vw, 56px)",
          alignItems: "center",
          border: `1px solid ${PALETTE.lineFaint}`,
          boxShadow: SHADOW.card,
        }}>
          <div>
            <div style={{ ...TS.eyebrow, color: PALETTE.accent, marginBottom: 12 }}>{E.book.tag}</div>
            <h3 style={{ ...TS.h1, margin: 0, color: PALETTE.ink, textWrap: "balance" }}>
              {E.book.title}
            </h3>
            <p style={{ ...TS.body, color: PALETTE.inkSoft, marginTop: 16, fontStyle: "italic" }}>
              {E.book.subtitle}
            </p>
          </div>
          <div>
            {E.book.parts.map((p, i) => (
              <div key={i} style={{
                display: "grid",
                gridTemplateColumns: "60px 1fr",
                gap: 20,
                padding: "12px 0",
                borderTop: i ? `1px solid ${PALETTE.line}` : "none",
                alignItems: "baseline",
              }}>
                <div style={{ ...TS.eyebrow, color: PALETTE.accent }}>Pt. {p.num}</div>
                <div>
                  <div style={{ ...TS.body, color: PALETTE.ink, fontWeight: 600 }}>{p.title}</div>
                  <div style={{ ...TS.bodySmall, color: PALETTE.inkMuted, marginTop: 2 }}>{p.chapters}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────── Labs ───────
function Labs({ C }) {
  return (
    <section style={{ background: PALETTE.bgAlt, padding: `${SPACE.sectionY} ${SPACE.pageX}` }}>
      <div style={{ maxWidth: LAYOUT.reading, margin: "0 auto", textAlign: "center" }}>
        <div style={{ ...TS.eyebrow, color: PALETTE.accent, marginBottom: 16 }}>Technical Labs</div>
        <h2 style={{ ...TS.display, margin: 0, color: PALETTE.ink, textWrap: "balance" }}>
          Five production-grade builds. <span style={{ backgroundImage: INTELLIGENCE_GRADIENT, WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }}>Public soon.</span>
        </h2>
        <p style={{ ...TS.lead, margin: "20px auto 0", color: PALETTE.inkSoft, maxWidth: 720, textWrap: "pretty" }}>
          Each lab ships with a clean GitHub repo, a demo walkthrough, and an architecture-decision case study. Not demos — proof of build.
        </p>
      </div>

      <div style={{
        maxWidth: LAYOUT.content,
        margin: "clamp(48px, 7vw, 72px) auto 0",
        display: "grid",
        gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
        gap: "clamp(14px, 2vw, 20px)",
      }}>
        {C.labs.map((l, i) => {
          const tints = [TINTS.blue, TINTS.teal, TINTS.mint, TINTS.lavender, TINTS.rose];
          const tint = tints[i % tints.length];
          return (
            <div key={i} style={{
              background: tint.bg,
              borderRadius: 20,
              padding: "36px 36px 32px",
              border: `1px solid ${tint.edge}`,
              display: "flex",
              flexDirection: "column",
            }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
                <div style={{ ...TS.eyebrow, color: tint.ink, fontFamily: TYPE.mono, letterSpacing: "0.1em" }}>{l.id}</div>
                <span style={{
                  fontSize: 11,
                  fontWeight: 600,
                  letterSpacing: "0.06em",
                  color: "oklch(0.45 0.14 145)",
                  padding: "4px 10px",
                  background: "oklch(0.96 0.04 145)",
                  borderRadius: 980,
                }}>● {l.status}</span>
              </div>
              <div style={{ ...TS.h3, color: PALETTE.ink, marginBottom: 8 }}>{l.name}</div>
              <div style={{ ...TS.body, color: PALETTE.inkMuted, fontStyle: "italic", marginBottom: 24 }}>{l.goal}</div>

              <div style={{ ...TS.eyebrow, color: PALETTE.inkSoft, marginBottom: 10 }}>Core features</div>
              <ul style={{ margin: 0, padding: 0, listStyle: "none", marginBottom: 20 }}>
                {l.core.map((c, j) => (
                  <li key={j} style={{ ...TS.body, color: PALETTE.inkSoft, padding: "5px 0" }}>— {c}</li>
                ))}
              </ul>

              <div style={{ ...TS.eyebrow, color: tint.ink, marginBottom: 10 }}>What differentiates</div>
              <ul style={{ margin: 0, padding: 0, listStyle: "none", marginBottom: 24 }}>
                {l.differentiators.map((c, j) => (
                  <li key={j} style={{ ...TS.body, color: PALETTE.ink, padding: "5px 0", fontWeight: 500 }}>★ {c}</li>
                ))}
              </ul>

              <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginBottom: 20 }}>
                {l.tags.map((t, j) => (
                  <span key={j} style={{ fontSize: 11, color: tint.ink, padding: "4px 10px", background: "rgba(255,255,255,0.6)", border: `1px solid ${tint.edge}`, borderRadius: 980, fontWeight: 500, letterSpacing: "0.04em" }}>{t}</span>
                ))}
              </div>

              <div style={{
                marginTop: "auto",
                paddingTop: 20,
                borderTop: `1px solid ${tint.edge}`,
                display: "flex",
                gap: 20,
                fontSize: 13,
                color: PALETTE.inkMuted,
              }}>
                <span>Repo · soon</span>
                <span>Demo · soon</span>
                <span>Case study ›</span>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

// ─────── Projects ───────
function Projects({ C }) {
  const isNarrow = useViewportWidth() <= 980;
  return (
    <section style={{ background: PALETTE.bg, padding: `${SPACE.sectionY} ${SPACE.pageX}` }}>
      <div style={{ maxWidth: LAYOUT.reading, margin: "0 auto", textAlign: "center" }}>
        <div style={{ ...TS.eyebrow, color: PALETTE.accent, marginBottom: 16 }}>Reference Architectures</div>
        <h2 style={{ ...TS.display, margin: 0, color: PALETTE.ink, textWrap: "balance" }}>
          Patterns I've shipped. Often. <span style={{ backgroundImage: INTELLIGENCE_GRADIENT, WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }}>At scale.</span>
        </h2>
      </div>
      <div style={{ maxWidth: LAYOUT.content, margin: "clamp(48px, 7vw, 72px) auto 0" }}>
        {C.projects.map((p, i) => (
          <div key={i} style={{
            display: "grid",
            gridTemplateColumns: isNarrow ? "1fr" : "60px 1.4fr 2fr 1fr",
            gap: isNarrow ? 8 : 32,
            padding: isNarrow ? "18px 0" : "32px 0",
            borderTop: `1px solid ${PALETTE.line}`,
            borderBottom: i === C.projects.length - 1 ? `1px solid ${PALETTE.line}` : "none",
            alignItems: "baseline",
          }}>
            <div style={{ ...TS.eyebrow, color: PALETTE.accent }}>{String(i + 1).padStart(2, "0")}</div>
            <div style={{ ...TS.h3, color: PALETTE.ink }}>{p.name}</div>
            <div style={{ ...TS.body, color: PALETTE.inkSoft }}>{p.desc}</div>
            <div style={{ ...TS.bodySmall, color: PALETTE.inkMuted, lineHeight: 1.7 }}>
              {p.tags.join(" · ")}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─────── Experience ───────
function Experience({ C }) {
  return (
    <section style={{ background: PALETTE.bgAlt, padding: `${SPACE.sectionY} ${SPACE.pageX}` }}>
      <div style={{ maxWidth: LAYOUT.reading, margin: "0 auto", textAlign: "center" }}>
        <div style={{ ...TS.eyebrow, color: PALETTE.accent, marginBottom: 16 }}>Experience</div>
        <h2 style={{ ...TS.display, margin: 0, color: PALETTE.ink, textWrap: "balance" }}>
          <span style={{ backgroundImage: INTELLIGENCE_GRADIENT, WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }}>Twenty-two years.</span> Three industries. <span style={{ backgroundImage: INTELLIGENCE_GRADIENT, WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }}>One throughline.</span>
        </h2>
      </div>
      <div style={{ maxWidth: LAYOUT.content, margin: "clamp(48px, 7vw, 72px) auto 0" }}>
        {C.experience.map((e, i) => (
          <div key={i} style={{
            background: PALETTE.bg,
            borderRadius: RADIUS.md,
            padding: "clamp(20px, 3.8vw, 40px)",
            marginBottom: 16,
            border: `1px solid ${PALETTE.lineFaint}`,
            boxShadow: SHADOW.card,
          }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", flexWrap: "wrap", gap: 16, marginBottom: 8 }}>
              <h3 style={{ ...TS.h2, fontSize: 28, margin: 0, color: PALETTE.ink }}>{e.role}</h3>
              <div style={{ ...TS.bodySmall, color: PALETTE.inkMuted, fontWeight: 500 }}>{e.years}</div>
            </div>
            <div style={{ ...TS.body, color: PALETTE.accent, fontWeight: 500, marginBottom: 16 }}>
              {e.org}{e.loc && e.loc !== "—" ? ` · ${e.loc}` : ""}
            </div>
            <p style={{ ...TS.body, color: PALETTE.inkSoft, marginBottom: e.bullets.length ? 20 : 0, maxWidth: "min(72ch, 100%)" }}>{e.summary}</p>
            {e.bullets.length > 0 && (
              <ul style={{ margin: 0, padding: 0, listStyle: "none" }}>
                {e.bullets.map((b, j) => (
                  <li key={j} style={{ ...TS.body, color: PALETTE.inkSoft, padding: "8px 0", borderTop: j ? `1px solid ${PALETTE.lineFaint}` : "none" }}>
                    — {b}
                  </li>
                ))}
              </ul>
            )}
          </div>
        ))}
      </div>
    </section>
  );
}

// ─────── Writing ───────
function Writing({ C, pubUrls = {} }) {
  const isNarrow = useViewportWidth() <= 900;
  return (
    <section style={{ background: PALETTE.bgAlt, padding: `${SPACE.sectionY} ${SPACE.pageX}` }}>
      <div style={{ maxWidth: LAYOUT.reading, margin: "0 auto", textAlign: "center" }}>
        <div style={{ ...TS.eyebrow, color: PALETTE.accent, marginBottom: 16 }}>Writing & Research</div>
        <h2 style={{ ...TS.display, margin: 0, color: PALETTE.ink, textWrap: "balance" }}>
          Books, papers, and the <span style={{ backgroundImage: INTELLIGENCE_GRADIENT, WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }}>long-form work</span> behind the framework.
        </h2>
      </div>
      <div style={{
        maxWidth: LAYOUT.content,
        margin: "clamp(42px, 6vw, 64px) auto 0",
        display: "grid",
        gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
        gap: "clamp(14px, 2vw, 20px)",
      }}>
        {C.forthcoming.map((b, i) => (
          <div key={i} style={{
            background: PALETTE.bgAlt,
            borderRadius: 20,
            padding: "40px 36px",
          }}>
            <div style={{ ...TS.eyebrow, color: PALETTE.accent, marginBottom: 14 }}>{b.kind}</div>
            <div style={{ ...TS.h2, fontSize: 28, color: PALETTE.ink, lineHeight: 1.2 }}>{b.title}</div>
            <div style={{ ...TS.bodySmall, color: PALETTE.inkMuted, marginTop: 20 }}>By Ganesh Ramalingam</div>
          </div>
        ))}
      </div>

      <div style={{ maxWidth: LAYOUT.content, margin: "clamp(38px, 5.5vw, 56px) auto 0" }}>
        <div style={{ ...TS.eyebrow, color: PALETTE.inkSoft, marginBottom: 18 }}>Selected publications</div>
        {C.publications.map((p, i) => {
          const url = (pubUrls[i] || p.href || "").trim();
          const hasUrl = url.length > 0;
          const tint = CATEGORY_TINTS[p.cat] || TINTS.blue;
          return (
            <a
              key={i}
              href={hasUrl ? url : "#"}
              target={hasUrl ? "_blank" : undefined}
              rel={hasUrl ? "noopener noreferrer" : undefined}
              onClick={(e) => { if (!hasUrl) e.preventDefault(); }}
              style={{
                display: "grid",
                gridTemplateColumns: isNarrow ? "1fr" : "260px 1fr 100px",
                gap: isNarrow ? 10 : 32,
                padding: "20px 0",
                borderTop: `1px solid ${PALETTE.line}`,
                borderBottom: i === C.publications.length - 1 ? `1px solid ${PALETTE.line}` : "none",
                alignItems: "baseline",
                textDecoration: "none",
                color: "inherit",
                cursor: hasUrl ? "pointer" : "default",
                transition: "background .15s",
              }}
              onMouseEnter={(e) => { if (hasUrl) e.currentTarget.style.background = tint.bg; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; }}
            >
              <div>
                <span style={{
                  display: "inline-block",
                  fontSize: 11,
                  fontWeight: 600,
                  letterSpacing: "0.04em",
                  color: tint.ink,
                  background: tint.bg,
                  border: `1px solid ${tint.edge}`,
                  padding: "4px 10px",
                  borderRadius: 999,
                }}>{p.cat}</span>
              </div>
              <div style={{ ...TS.body, color: PALETTE.ink }}>{p.title}</div>
              <div style={{
                ...TS.bodySmall,
                color: hasUrl ? tint.ink : PALETTE.inkMuted,
                textAlign: isNarrow ? "left" : "right",
                fontWeight: 500,
              }}>
                {hasUrl ? "Read ↗" : "— soon"}
              </div>
            </a>
          );
        })}
      </div>
    </section>
  );
}

// ─────── Speaking ───────
function Speaking({ C }) {
  return (
    <section style={{ background: PALETTE.bg, padding: `${SPACE.sectionY} ${SPACE.pageX}` }}>
      <div style={{ maxWidth: LAYOUT.reading, margin: "0 auto", textAlign: "center" }}>
        <div style={{ ...TS.eyebrow, color: PALETTE.accent, marginBottom: 16 }}>Speaking · Press · Code</div>
        <h2 style={{ ...TS.display, margin: 0, color: PALETTE.ink, textWrap: "balance" }}>
          Where the work <span style={{ backgroundImage: INTELLIGENCE_GRADIENT, WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }}>shows up.</span>
        </h2>
      </div>
      <div style={{
        maxWidth: LAYOUT.content,
        margin: "clamp(48px, 7vw, 72px) auto 0",
        display: "grid",
        gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
        gap: "clamp(14px, 2vw, 20px)",
      }}>
        <div style={{ background: PALETTE.bg, borderRadius: RADIUS.md, padding: "clamp(22px, 3.6vw, 40px) clamp(20px, 3.2vw, 36px)", border: `1px solid ${PALETTE.lineFaint}` }}>
          <div style={{ ...TS.eyebrow, color: PALETTE.accent, marginBottom: 18 }}>Speaking</div>
          {C.speaking.map((s, i) => (
            <div key={i} style={{ padding: "14px 0", borderTop: i ? `1px solid ${PALETTE.lineFaint}` : "none" }}>
              <div style={{ ...TS.body, color: PALETTE.ink, fontWeight: 600 }}>{s.venue}</div>
              <div style={{ ...TS.bodySmall, color: PALETTE.inkMuted, marginTop: 4 }}>{s.role}</div>
            </div>
          ))}
        </div>
        <div style={{ background: PALETTE.bg, borderRadius: RADIUS.md, padding: "clamp(22px, 3.6vw, 40px) clamp(20px, 3.2vw, 36px)", border: `1px solid ${PALETTE.lineFaint}` }}>
          <div style={{ ...TS.eyebrow, color: PALETTE.accent, marginBottom: 18 }}>Press</div>
          {C.press.map((s, i) => (
            <div key={i} style={{ padding: "14px 0", borderTop: i ? `1px solid ${PALETTE.lineFaint}` : "none" }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 12 }}>
                <span style={{ ...TS.body, color: PALETTE.ink, fontWeight: 600 }}>{s.outlet}</span>
                <span style={{ ...TS.caption, color: PALETTE.inkMuted, fontWeight: 500 }}>{s.year}</span>
              </div>
              <div style={{ ...TS.bodySmall, color: PALETTE.inkSoft, marginTop: 4 }}>{s.note}</div>
            </div>
          ))}
        </div>
        <div style={{ background: PALETTE.bg, borderRadius: RADIUS.md, padding: "clamp(22px, 3.6vw, 40px) clamp(20px, 3.2vw, 36px)", border: `1px solid ${PALETTE.lineFaint}` }}>
          <div style={{ ...TS.eyebrow, color: PALETTE.accent, marginBottom: 18 }}>Repos</div>
          {C.github.map((g, i) => (
            <div key={i} style={{ padding: "14px 0", borderTop: i ? `1px solid ${PALETTE.lineFaint}` : "none" }}>
              <div style={{ ...TS.body, color: PALETTE.ink, fontFamily: TYPE.mono, fontSize: 14 }}>~/{g.name}</div>
              <div style={{ ...TS.bodySmall, color: PALETTE.inkSoft, marginTop: 4 }}>{g.desc}</div>
              <div style={{ ...TS.caption, color: PALETTE.inkMuted, marginTop: 6, letterSpacing: "0.06em", fontWeight: 600 }}>{g.lang.toUpperCase()}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────── Education ───────
function Education({ C }) {
  const all = [...C.education, ...C.certifications.map(c => ({ degree: c.name, school: c.org, year: c.year || "—", loc: "" }))];
  const isNarrow = useViewportWidth() <= 980;
  return (
    <section style={{ background: PALETTE.bg, padding: `${SPACE.sectionY} ${SPACE.pageX}` }}>
      <div style={{ maxWidth: LAYOUT.reading, margin: "0 auto", textAlign: "center" }}>
        <div style={{ ...TS.eyebrow, color: PALETTE.accent, marginBottom: 16 }}>Credentials</div>
        <h2 style={{ ...TS.display, margin: 0, color: PALETTE.ink, textWrap: "balance" }}>
          Education and certifications.
        </h2>
      </div>
      <div style={{ maxWidth: LAYOUT.content, margin: "clamp(42px, 6vw, 64px) auto 0" }}>
        {all.map((e, i) => (
          <div key={i} style={{
            display: "grid",
            gridTemplateColumns: isNarrow ? "1fr" : "60px 1.4fr 1.4fr 80px",
            gap: isNarrow ? 8 : 32,
            padding: "24px 0",
            borderTop: `1px solid ${PALETTE.line}`,
            borderBottom: i === all.length - 1 ? `1px solid ${PALETTE.line}` : "none",
            alignItems: "baseline",
          }}>
            <div style={{ ...TS.eyebrow, color: PALETTE.accent }}>{String(i + 1).padStart(2, "0")}</div>
            <div style={{ ...TS.body, color: PALETTE.ink, fontWeight: 600 }}>{e.degree}</div>
            <div style={{ ...TS.body, color: PALETTE.inkSoft }}>{e.school}{e.loc ? ` · ${e.loc}` : ""}</div>
            <div style={{ ...TS.bodySmall, color: PALETTE.inkMuted, textAlign: isNarrow ? "left" : "right", fontWeight: 500 }}>{e.year}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─────── Hiking ───────
// Hand-drawn topographic contour pattern. Subtle, single hue,
// just enough to evoke a trail map without being decorative slop.
const TOPO_SVG = `<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'>
  <g fill='none' stroke='oklch(0.45 0.12 195)' stroke-width='1' stroke-opacity='0.18'>
    <path d='M -50 320 Q 80 280 200 310 T 420 295 T 650 320'/>
    <path d='M -50 360 Q 90 320 210 350 T 430 340 T 650 360'/>
    <path d='M -50 240 Q 100 200 220 235 T 440 220 T 650 240'/>
    <path d='M -50 200 Q 110 165 230 195 T 450 180 T 650 200'/>
    <path d='M -50 400 Q 120 360 240 390 T 460 380 T 650 400'/>
    <path d='M -50 440 Q 130 405 250 430 T 470 425 T 650 440'/>
    <path d='M -50 160 Q 130 130 250 155 T 470 145 T 650 160'/>
    <path d='M -50 480 Q 140 450 260 470 T 480 470 T 650 480'/>
    <ellipse cx='320' cy='300' rx='90' ry='70' />
    <ellipse cx='320' cy='300' rx='55' ry='40' />
    <ellipse cx='320' cy='300' rx='25' ry='18' />
  </g>
</svg>`;
const TOPO_DATA_URL = `url("data:image/svg+xml;utf8,${encodeURIComponent(TOPO_SVG)}")`;

function Hiking({ C }) {
  const H = C.hiking;
  const isNarrow = useViewportWidth() <= 980;
  return (
    <section style={{
      background: PALETTE.bgAlt,
      padding: `${SPACE.sectionY} ${SPACE.pageX}`,
      position: "relative",
      overflow: "hidden",
      backgroundImage: TOPO_DATA_URL,
      backgroundSize: "780px 780px",
      backgroundPosition: "center top",
      backgroundRepeat: "repeat",
    }}>
      <div style={{ maxWidth: LAYOUT.reading, margin: "0 auto", textAlign: "center", position: "relative" }}>
        <div style={{ ...TS.eyebrow, color: PALETTE.accent, marginBottom: 16 }}>Off the keyboard</div>
        <h2 style={{ ...TS.display, margin: 0, color: PALETTE.ink, textWrap: "balance" }}>
          <span style={{ backgroundImage: INTELLIGENCE_GRADIENT, WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }}>Off the</span> keyboard
        </h2>
        <p style={{ ...TS.lead, margin: "20px auto 0", color: PALETTE.inkSoft, maxWidth: 720, textWrap: "pretty" }}>
          {H.body}
        </p>
      </div>

      <div style={{
        maxWidth: LAYOUT.content,
        margin: "clamp(42px, 6vw, 64px) auto 0",
        display: "grid",
        gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))",
        gap: "clamp(14px, 2vw, 20px)",
      }}>
        {H.philosophy.map((p, i) => (
          <div key={i} style={{
            background: PALETTE.bg,
            borderRadius: 20,
            padding: "32px 36px",
          }}>
            <div style={{ ...TS.eyebrow, color: PALETTE.accent, marginBottom: 10 }}>{p.k}</div>
            <div style={{ ...TS.body, color: PALETTE.ink, fontSize: 18, lineHeight: 1.5 }}>{p.v}</div>
          </div>
        ))}
      </div>

      <div style={{ maxWidth: LAYOUT.content, margin: "clamp(38px, 5.5vw, 56px) auto 0" }}>
        <div style={{ ...TS.eyebrow, color: PALETTE.inkSoft, marginBottom: 18, textAlign: "center" }}>Routes in rotation</div>
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))",
          gap: "clamp(12px, 1.8vw, 16px)",
        }}>
          {H.trails.map((t, i) => {
            const tints = [TINTS.teal, TINTS.mint, TINTS.lavender];
            const tint = tints[i % tints.length];
            return (
              <div key={i} style={{
                background: PALETTE.bg,
                borderRadius: 20,
                padding: "32px 32px",
                borderTop: `3px solid ${tint.ink}`,
                position: "relative",
              }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 12 }}>
                  <span style={{ ...TS.eyebrow, color: tint.ink, fontFamily: TYPE.mono }}>{String(i + 1).padStart(2, "0")}</span>
                  <span style={{ ...TS.bodySmall, color: PALETTE.inkMuted, fontWeight: 500 }}>{t.elev}</span>
                </div>
                <div style={{ ...TS.h3, fontSize: 20, color: PALETTE.ink }}>{t.name}</div>
                <div style={{ ...TS.bodySmall, color: PALETTE.inkMuted, marginTop: 4, marginBottom: 16 }}>{t.loc}</div>
                <div style={{ ...TS.body, color: PALETTE.inkSoft, fontSize: 15 }}>{t.note}</div>
              </div>
            );
          })}
        </div>
      </div>

      <div style={{ maxWidth: LAYOUT.content, margin: "clamp(38px, 5.5vw, 56px) auto 0" }}>
        <div style={{ ...TS.eyebrow, color: PALETTE.inkSoft, marginBottom: 18, textAlign: "center" }}>Recent entries</div>
        <div>
          {H.log.map((l, i) => (
            <div key={i} style={{
              display: "grid",
              gridTemplateColumns: isNarrow ? "1fr" : "140px 1fr",
              gap: isNarrow ? 8 : 32,
              padding: "20px 0",
              borderTop: `1px solid ${PALETTE.line}`,
              borderBottom: i === H.log.length - 1 ? `1px solid ${PALETTE.line}` : "none",
              alignItems: "baseline",
            }}>
              <div style={{ ...TS.eyebrow, color: PALETTE.accent }}>{l.date}</div>
              <div style={{ ...TS.body, color: PALETTE.ink }}>{l.entry}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────── Contact (final marquee) ───────
function Contact({ C }) {
  return (
    <section style={{ background: PALETTE.bg, padding: `0 ${SPACE.pageX} ${SPACE.sectionYTight}` }}>
      <div style={{ maxWidth: LAYOUT.wide, margin: "0 auto" }}>
        <div style={{
          background: PALETTE.bgAlt,
          borderRadius: RADIUS.xl,
          padding: "clamp(62px, 10vw, 120px) clamp(22px, 5vw, 48px)",
          textAlign: "center",
          border: `1px solid ${PALETTE.lineFaint}`,
          boxShadow: SHADOW.card,
        }}>
          <div style={{ ...TS.eyebrow, color: PALETTE.accent, marginBottom: 16 }}>Let's talk</div>
          <h2 style={{
            ...TS.heroBig,
            margin: 0,
            color: PALETTE.ink,
            textWrap: "balance",
          }}>
            Bring me a real AI<br/>
            <span style={{ color: PALETTE.inkMuted }}>architecture problem.</span>
          </h2>
          <p style={{
            ...TS.lead,
            margin: "28px auto 0",
            color: PALETTE.inkSoft,
            maxWidth: "min(66ch, 100%)",
            textWrap: "pretty",
          }}>
            30-min advisory call. Model routing, governance, agent reliability, scaling pilots — the messy ones. I'll bring patterns that have shipped to production.
          </p>
          <div style={{ marginTop: 40, display: "flex", gap: 28, justifyContent: "center", flexWrap: "wrap", alignItems: "center" }}>
            <PillLink href="book-call.html" primary>Book a call ›</PillLink>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────── Footer ───────
function Footer({ C }) {
  return (
    <footer style={{ background: PALETTE.bg, borderTop: `1px solid ${PALETTE.lineFaint}`, padding: `clamp(24px, 3vw, 32px) ${SPACE.pageX} clamp(30px, 4vw, 40px)`, fontFamily: TYPE.body }}>
      <div style={{ maxWidth: LAYOUT.wide, margin: "0 auto" }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))",
          gap: "clamp(18px, 3vw, 32px)",
          paddingBottom: 24,
        }}>
          <div>
            <div style={{ ...TS.body, color: PALETTE.ink, fontWeight: 600, marginBottom: 8 }}>Ganesh Ramalingam</div>
            <div style={{ ...TS.bodySmall, color: PALETTE.inkMuted, maxWidth: 380 }}>
              Director-level AI architecture leader. Founder of eAi.OS.
            </div>
          </div>
          <div>
            <div style={{ ...TS.eyebrow, color: PALETTE.inkMuted, marginBottom: 14 }}>About</div>
            <div style={{ ...TS.bodySmall, color: PALETTE.inkSoft, lineHeight: 2 }}>
              Architect of enterprise AI<br/>infrastructure &amp; platforms<br/>
              {C.location}
            </div>
          </div>
          <div>
            <div style={{ ...TS.eyebrow, color: PALETTE.inkMuted, marginBottom: 14 }}>Explore</div>
            <div style={{ ...TS.bodySmall, lineHeight: 2 }}>
              {NAV_LINKS.map((link) => (
                <a key={link.label} href={link.file} style={{ color: PALETTE.inkSoft, textDecoration: "none", display: "block" }}>{link.label}</a>
              ))}
            </div>
          </div>
          <div>
            <div style={{ ...TS.eyebrow, color: PALETTE.inkMuted, marginBottom: 14 }}>Elsewhere</div>
            <div style={{ ...TS.bodySmall, lineHeight: 2 }}>
              <a href={`https://${C.linkedin}`} style={{ color: PALETTE.inkSoft, textDecoration: "none", display: "block" }}>LinkedIn</a>
              <a href="#" style={{ color: PALETTE.inkSoft, textDecoration: "none", display: "block" }}>GitHub</a>
            </div>
          </div>
        </div>
        <div style={{
          paddingTop: 24,
          borderTop: `1px solid ${PALETTE.lineFaint}`,
          ...TS.caption,
          color: PALETTE.inkMuted,
          display: "flex",
          justifyContent: "space-between",
          flexWrap: "wrap",
          gap: 16,
        }}>
          <span>© {new Date().getFullYear()} Ganesh Ramalingam. All rights reserved.</span>
          <span>v2026.04 · Original design</span>
        </div>
      </div>
    </footer>
  );
}

// ─────── App ───────
function PremiumApp({ pageFilter, currentPage, pageTitle, pageMode }) {
  const C = window.CONTENT;
  const TWEAK_DEFAULTS = window.TWEAK_DEFAULTS || {};
  const [tweaks, setTweak] = (window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}]);

  // Build per-publication URL map from tweaks (keys: pubUrl0, pubUrl1, ...)
  const pubUrls = {};
  (C.publications || []).forEach((_, i) => { pubUrls[i] = tweaks[`pubUrl${i}`] || ""; });

  const sectionRenderers = {
    hero: () => <Hero C={C} />,
    eaiosMarquee: () => <EaiOSMarquee C={C} />,
    about: () => <About C={C} />,
    proficiencies: () => <Proficiencies C={C} />,
    eaios: () => <EaiOS C={C} />,
    labs: () => <Labs C={C} />,
    projects: () => <Projects C={C} />,
    experience: () => <Experience C={C} />,
    writing: () => <Writing C={C} pubUrls={pubUrls} />,
    speaking: () => <Speaking C={C} />,
    education: () => <Education C={C} />,
    hiking: () => <Hiking C={C} />,
  };

  // Default homepage order — alternating bg / bgAlt is built into each section.
  // Resume-first order: who → proof of work → depth.
  // Act 1 (Who): hero with snapshot card
  // Act 2 (Proof): experience, credentials/education, capabilities, about narrative
  // Act 3 (Depth): eAi.OS marquee → eAi.OS detail → labs → reference architectures → writing → speaking → trail → contact
  // Page order mirrors the top-nav order so scroll-spy stays in sync:
  //   hero → about → proficiencies (intro)
  //   Work (experience) → eAi.OS (marquee + detail + labs + projects)
  //   Writing → Speaking → Credentials → Trail Log → contact
  const defaultOrder = ["hero","about","proficiencies","experience","eaiosMarquee","eaios","labs","projects","writing","speaking","education","hiking","contact"];

  let order = defaultOrder.filter(k => sectionRenderers[k]);
  if (pageFilter && pageFilter.length) {
    order = pageFilter.filter(k => sectionRenderers[k]);
  }

  // Scroll-spy: only run on the homepage (no currentPage).
  // Map each rendered section key to the anchor id used by NAV_LINKS.
  const anchorIds = currentPage
    ? []
    : order
        .map(k => (k === "eaiosMarquee" ? null : k))
        .filter(k => NAV_LINKS.some(n => n.anchor === "#" + k));
  const activeAnchor = useActiveSection(anchorIds, { topOffset: 80 });

  return (
    <div style={{
      width: "100%",
      minHeight: "100vh",
      background: PALETTE.bg,
      color: PALETTE.ink,
      fontFamily: TYPE.body,
      fontSize: 17,
      lineHeight: 1.5,
      WebkitFontSmoothing: "antialiased",
      MozOsxFontSmoothing: "grayscale",
    }}>
      <Nav currentPage={currentPage || null} activeAnchor={activeAnchor} />

      {pageMode === "bookcall" && window.BookCallPageLight ? (
        <window.BookCallPageLight C={C} />
      ) : (
        <main>
          {order.map((key, i) => (
            <ScrollReveal key={key} delayMs={Math.min(i * 35, 210)}>
              <div id={key === "eaiosMarquee" ? "eaios-marquee" : key} style={{ scrollMarginTop: 72 }}>
                {sectionRenderers[key]()}
              </div>
            </ScrollReveal>
          ))}
        </main>
      )}

      <Footer C={C} />

      {/* Tweaks panel — per-publication URLs */}
      {window.TweaksPanel && window.TweakSection && window.TweakText && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection label="Publication links" />
          <div style={{ fontSize: 11, color: "#86868B", padding: "0 4px 8px", lineHeight: 1.45 }}>
            Paste a URL for each. Saved to disk; the "Read ↗" link in Writing opens in a new tab.
          </div>
          {(C.publications || []).map((p, i) => (
            <window.TweakText
              key={i}
              label={`${i + 1}. ${p.title.length > 38 ? p.title.slice(0, 38) + "…" : p.title}`}
              value={tweaks[`pubUrl${i}`] || ""}
              placeholder="https://… or PDF URL"
              onChange={(v) => setTweak(`pubUrl${i}`, v)}
            />
          ))}
        </window.TweaksPanel>
      )}
    </div>
  );
}

window.PremiumApp = PremiumApp;
window.BlueprintApp = PremiumApp; // alias so existing pages keep working