const { memo, useEffect, useMemo, useRef, useState } = React;

const TWO_PI = Math.PI * 2;

const DotField = memo(
  ({
    dotRadius = 1.5,
    dotSpacing = 14,
    cursorRadius = 500,
    cursorForce = 0.1,
    bulgeOnly = true,
    bulgeStrength = 67,
    glowRadius = 160,
    sparkle = false,
    waveAmplitude = 0,
    gradientFrom = "rgba(168, 85, 247, 0.35)",
    gradientTo = "rgba(180, 151, 207, 0.25)",
    glowColor = "#120F17",
    className = "",
    ...rest
  }) => {
    const canvasRef = useRef(null);
    const glowRef = useRef(null);
    const dotsRef = useRef([]);
    const mouseRef = useRef({ x: -9999, y: -9999, prevX: -9999, prevY: -9999, speed: 0 });
    const rafRef = useRef(null);
    const sizeRef = useRef({ w: 0, h: 0, offsetX: 0, offsetY: 0 });
    const glowOpacity = useRef(0);
    const engagement = useRef(0);
    const propsRef = useRef({});
    propsRef.current = {
      dotRadius,
      dotSpacing,
      cursorRadius,
      cursorForce,
      bulgeOnly,
      bulgeStrength,
      sparkle,
      waveAmplitude,
      gradientFrom,
      gradientTo,
    };
    const rebuildRef = useRef(null);
    const glowIdRef = useRef(`dot-field-glow-${Math.random().toString(36).slice(2, 9)}`);

    useEffect(() => {
      const canvas = canvasRef.current;
      const glowEl = glowRef.current;
      if (!canvas) return;

      const ctx = canvas.getContext("2d", { alpha: true });
      const dpr = Math.min(window.devicePixelRatio || 1, 2);
      let resizeTimer;

      function resize() {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(doResize, 100);
      }

      function doResize() {
        const rect = canvas.parentElement.getBoundingClientRect();
        const w = rect.width;
        const h = rect.height;

        canvas.width = w * dpr;
        canvas.height = h * dpr;
        canvas.style.width = `${w}px`;
        canvas.style.height = `${h}px`;
        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);

        sizeRef.current = {
          w,
          h,
          offsetX: rect.left + window.scrollX,
          offsetY: rect.top + window.scrollY,
        };

        buildDots(w, h);
      }

      function buildDots(w, h) {
        const p = propsRef.current;
        const step = p.dotRadius + p.dotSpacing;
        const cols = Math.floor(w / step);
        const rows = Math.floor(h / step);
        const padX = (w % step) / 2;
        const padY = (h % step) / 2;
        const dots = new Array(rows * cols);
        let idx = 0;

        for (let row = 0; row < rows; row++) {
          for (let col = 0; col < cols; col++) {
            const ax = padX + col * step + step / 2;
            const ay = padY + row * step + step / 2;
            dots[idx++] = { ax, ay, sx: ax, sy: ay, vx: 0, vy: 0, x: ax, y: ay };
          }
        }
        dotsRef.current = dots;
      }

      function onPointerMove(event) {
        const s = sizeRef.current;
        mouseRef.current.x = event.pageX - s.offsetX;
        mouseRef.current.y = event.pageY - s.offsetY;
      }

      function updateMouseSpeed() {
        const m = mouseRef.current;
        const dx = m.prevX - m.x;
        const dy = m.prevY - m.y;
        const dist = Math.sqrt(dx * dx + dy * dy);
        m.speed += (dist - m.speed) * 0.5;
        if (m.speed < 0.001) m.speed = 0;
        m.prevX = m.x;
        m.prevY = m.y;
      }

      const speedInterval = setInterval(updateMouseSpeed, 20);
      let frameCount = 0;

      function tick() {
        frameCount++;
        const dots = dotsRef.current;
        const m = mouseRef.current;
        const { w, h } = sizeRef.current;
        const p = propsRef.current;
        const len = dots.length;
        const time = frameCount * 0.02;

        const targetEngagement = Math.min(m.speed / 5, 1);
        engagement.current += (targetEngagement - engagement.current) * 0.06;
        if (engagement.current < 0.001) engagement.current = 0;
        const eng = engagement.current;

        glowOpacity.current += (eng - glowOpacity.current) * 0.08;

        if (glowEl) {
          glowEl.setAttribute("cx", m.x);
          glowEl.setAttribute("cy", m.y);
          glowEl.style.opacity = glowOpacity.current;
        }

        ctx.clearRect(0, 0, w, h);

        const grad = ctx.createLinearGradient(0, 0, w, h);
        grad.addColorStop(0, p.gradientFrom);
        grad.addColorStop(1, p.gradientTo);
        ctx.fillStyle = grad;

        const cr = p.cursorRadius;
        const crSq = cr * cr;
        const rad = p.dotRadius / 2;
        const isBulge = p.bulgeOnly;

        ctx.beginPath();

        for (let i = 0; i < len; i++) {
          const d = dots[i];
          const dx = m.x - d.ax;
          const dy = m.y - d.ay;
          const distSq = dx * dx + dy * dy;

          if (distSq < crSq && eng > 0.01) {
            const dist = Math.sqrt(distSq);
            if (isBulge) {
              const t = 1 - dist / cr;
              const push = t * t * p.bulgeStrength * eng;
              const angle = Math.atan2(dy, dx);
              d.sx += (d.ax - Math.cos(angle) * push - d.sx) * 0.15;
              d.sy += (d.ay - Math.sin(angle) * push - d.sy) * 0.15;
            } else {
              const angle = Math.atan2(dy, dx);
              const move = (500 / Math.max(dist, 1)) * (m.speed * p.cursorForce);
              d.vx += Math.cos(angle) * -move;
              d.vy += Math.sin(angle) * -move;
            }
          } else if (isBulge) {
            d.sx += (d.ax - d.sx) * 0.1;
            d.sy += (d.ay - d.sy) * 0.1;
          }

          if (!isBulge) {
            d.vx *= 0.9;
            d.vy *= 0.9;
            d.x = d.ax + d.vx;
            d.y = d.ay + d.vy;
            d.sx += (d.x - d.sx) * 0.1;
            d.sy += (d.y - d.sy) * 0.1;
          }

          let drawX = d.sx;
          let drawY = d.sy;
          if (p.waveAmplitude > 0) {
            drawY += Math.sin(d.ax * 0.03 + time) * p.waveAmplitude;
            drawX += Math.cos(d.ay * 0.03 + time * 0.7) * p.waveAmplitude * 0.5;
          }

          const size = p.sparkle && ((((i * 2654435761) ^ (frameCount >> 3)) >>> 0) % 100) < 3 ? rad * 1.8 : rad;
          ctx.moveTo(drawX + size, drawY);
          ctx.arc(drawX, drawY, size, 0, TWO_PI);
        }

        ctx.fill();
        rafRef.current = requestAnimationFrame(tick);
      }

      doResize();
      window.addEventListener("resize", resize);
      window.addEventListener("pointermove", onPointerMove, { passive: true });
      rafRef.current = requestAnimationFrame(tick);

      rebuildRef.current = () => {
        const { w, h } = sizeRef.current;
        if (w > 0 && h > 0) buildDots(w, h);
      };

      return () => {
        cancelAnimationFrame(rafRef.current);
        clearInterval(speedInterval);
        clearTimeout(resizeTimer);
        window.removeEventListener("resize", resize);
        window.removeEventListener("pointermove", onPointerMove);
      };
    }, []);

    useEffect(() => {
      rebuildRef.current?.();
    }, [dotRadius, dotSpacing]);

    return (
      <div className={`dot-field-container ${className}`} {...rest}>
        <canvas ref={canvasRef} className="absolute inset-0 h-full w-full" />
        <svg className="absolute inset-0 h-full w-full" aria-hidden="true">
          <defs>
            <radialGradient id={glowIdRef.current}>
              <stop offset="0%" stopColor={glowColor} />
              <stop offset="100%" stopColor="transparent" />
            </radialGradient>
          </defs>
          <circle
            ref={glowRef}
            cx="-9999"
            cy="-9999"
            r={glowRadius}
            fill={`url(#${glowIdRef.current})`}
            style={{ opacity: 0, willChange: "opacity" }}
          />
        </svg>
      </div>
    );
  },
);

DotField.displayName = "DotField";

const studioSystems = [
  {
    icon: "globe-2",
    title: "Lead generation websites",
    body: "Pages, intake, booking.",
    group: "Acquire",
    tags: ["SEO", "Booking", "Intake"],
    priority: "chip",
    preview: "site",
  },
  {
    icon: "users",
    title: "Custom CRM",
    body: "Pipeline, clients, follow-up.",
    group: "Sell",
    tags: ["Pipeline", "Clients", "Follow-up"],
    priority: "panel",
    preview: "pipeline",
  },
  {
    icon: "workflow",
    title: "Automations",
    body: "Tasks, docs, status.",
    group: "Operate",
    tags: ["Tasks", "Docs", "Status"],
    priority: "panel",
    preview: "flow",
  },
  {
    icon: "layout-dashboard",
    title: "Internal dashboards",
    body: "Revenue, capacity, ops.",
    group: "Measure",
    tags: ["Revenue", "Capacity", "Ops"],
    priority: "chip",
    preview: "metrics",
  },
  {
    icon: "file-check-2",
    title: "Client portals",
    body: "Messages, files, approvals.",
    group: "Serve",
    tags: ["Approvals", "Files", "Payments"],
    priority: "panel",
    preview: "portal",
  },
  {
    icon: "plug-zap",
    title: "Integrations",
    body: "Payments, email, calendars.",
    group: "Connect",
    tags: ["Payments", "Email", "Sheets"],
    priority: "chip",
    preview: "mesh",
  },
  {
    icon: "bot",
    title: "AI work agents",
    body: "Scoring, drafts, routing.",
    group: "Assist",
    tags: ["Scoring", "Drafts", "Routing"],
    priority: "panel",
    preview: "terminal",
  },
  {
    icon: "shield-check",
    title: "Ownership layer",
    body: "Data, access, control.",
    group: "Own",
    tags: ["Data", "Access", "Control"],
    priority: "chip",
    preview: "orbit",
  },
];

const deliverySteps = [
  ["01", "Map", "Find the drag."],
  ["02", "Design", "Define the flow."],
  ["03", "Build", "Ship the core."],
  ["04", "Launch", "Handoff and iterate."],
];

const platformCapabilities = [
  ["sparkles", "AI app generation", "Generate governed apps.", "terminal"],
  ["blocks", "Integration fabric", "Connect core tools.", "mesh"],
  ["shield", "Governance controls", "Policy, audit, access.", "orbit"],
  ["rocket", "Delivery pipeline", "Prototype to release.", "flow"],
  ["bar-chart-3", "Operational intelligence", "Usage, cost, outcomes.", "metrics"],
  ["users-round", "Human in the loop", "Approvals stay visible.", "portal"],
];

const useCases = [
  "Field service operations",
  "Sales and proposal teams",
  "Franchise back offices",
  "Healthcare admin workflows",
  "Finance and reporting ops",
  "Agency delivery teams",
];

function Icon({ name, className = "" }) {
  return <i data-lucide={name} className={`icon inline-block ${className}`} aria-hidden="true" />;
}

function cx(...classes) {
  return classes.filter(Boolean).join(" ");
}

function getInitialView() {
  return window.location.hash.toLowerCase().includes("platform") ? "platform" : "studio";
}

function getInitialTheme() {
  const saved = window.localStorage?.getItem("ps-theme");
  if (saved === "dark" || saved === "light") return saved;
  return window.matchMedia?.("(prefers-color-scheme: dark)")?.matches ? "dark" : "light";
}

function App() {
  const [view, setView] = useState(getInitialView);
  const [theme, setTheme] = useState(getInitialTheme);

  useEffect(() => {
    const handleHash = () => setView(getInitialView());
    window.addEventListener("hashchange", handleHash);
    return () => window.removeEventListener("hashchange", handleHash);
  }, []);

  useEffect(() => {
    window.lucide?.createIcons();
  });

  useEffect(() => {
    document.documentElement.dataset.theme = theme;
    document.documentElement.style.colorScheme = theme;
    document.querySelector("meta[name='theme-color']")?.setAttribute("content", theme === "dark" ? "#07111f" : "#f8fafc");
    window.localStorage?.setItem("ps-theme", theme);
  }, [theme]);

  const goTo = (nextView) => {
    window.location.hash = nextView === "platform" ? "platform-version" : "studio-version";
    setView(nextView);
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  const toggleTheme = () => setTheme((current) => (current === "dark" ? "light" : "dark"));

  return (
    <main className="site-shell min-h-screen bg-white">
      {view === "platform" ? (
        <PlatformVersion currentView={view} goTo={goTo} theme={theme} toggleTheme={toggleTheme} />
      ) : (
        <StudioVersion currentView={view} goTo={goTo} theme={theme} toggleTheme={toggleTheme} />
      )}
    </main>
  );
}

function VersionToggle({ currentView, goTo, dark = false }) {
  const base = dark
    ? "border-white/20 bg-white/10 text-white"
    : "border-black/10 bg-white/80 text-ink shadow-soft";
  const active = dark ? "bg-white text-ink" : "bg-ink text-white";
  const inactive = dark ? "text-white/70 hover:text-white" : "text-slate-600 hover:text-ink";

  return (
    <div className={cx("theme-version-toggle hidden h-10 items-center gap-1 rounded-lg border p-1 backdrop-blur sm:inline-flex", base)}>
      <button
        type="button"
        onClick={() => goTo("studio")}
        className={cx(
          "h-8 rounded-md px-3 text-sm font-semibold transition",
          currentView === "studio" ? `theme-version-active ${active}` : `theme-version-inactive ${inactive}`,
        )}
      >
        <span className="sm:hidden">A</span>
        <span className="hidden sm:inline">Studio</span>
      </button>
      <button
        type="button"
        onClick={() => goTo("platform")}
        className={cx(
          "h-8 rounded-md px-3 text-sm font-semibold transition",
          currentView === "platform" ? `theme-version-active ${active}` : `theme-version-inactive ${inactive}`,
        )}
      >
        <span className="sm:hidden">B</span>
        <span className="hidden sm:inline">Platform</span>
      </button>
    </div>
  );
}

function ThemeToggle({ theme, onToggle }) {
  return (
    <button
      type="button"
      onClick={onToggle}
      aria-label={`Switch to ${theme === "dark" ? "light" : "dark"} mode`}
      className="theme-toggle grid h-10 w-10 place-items-center rounded-lg border border-black/10 bg-white/80 text-ink shadow-soft backdrop-blur transition hover:border-ink"
    >
      <Icon name={theme === "dark" ? "sun" : "moon"} className="text-lg" />
    </button>
  );
}

function Brand({ light = false }) {
  return (
    <a href="#" className="flex min-w-0 items-center gap-3">
      <span
        className={cx(
          "grid h-9 w-9 shrink-0 place-items-center rounded-lg",
          light ? "bg-white text-ink" : "bg-ink text-white",
        )}
      >
        <img src="/icons/icon-192.png" alt="" className="h-6 w-6 rounded-md" />
      </span>
      <span className={cx("truncate text-base font-black sm:hidden", light ? "text-white" : "text-ink")}>
        PS<span className={light ? "text-cyan" : "text-cobalt"}>.ai</span>
      </span>
      <span className={cx("hidden truncate text-lg font-black sm:inline", light ? "text-white" : "text-ink")}>
        ProprietarySystems<span className={light ? "text-cyan" : "text-cobalt"}>.ai</span>
      </span>
    </a>
  );
}

function HeroMedia({ tone = "studio" }) {
  const isPlatform = tone === "platform";
  const lightSrc = isPlatform
    ? "/media/generated/hero-platform-governance-v1.png"
    : "/media/generated/hero-studio-interactions-v1.png";
  const darkSrc = isPlatform
    ? "/media/generated/hero-platform-governance-dark-v1.png"
    : "/media/generated/hero-studio-interactions-dark-v1.png";
  const alt = isPlatform
    ? "Calm governed AI operations media showing a central control layer connected to policy, approval, audit, and deployment modules"
    : "Calm custom operating system media showing a central workflow layer connected to CRM, portal, automation, and reporting modules";

  return (
    <div className="hero-media relative mx-auto w-full max-w-xl overflow-hidden rounded-2xl lg:mx-0" role="img" aria-label={alt}>
      <img src={lightSrc} alt="" className="hero-media-image hero-media-light relative w-full" loading="eager" decoding="async" aria-hidden="true" />
      <img src={darkSrc} alt="" className="hero-media-image hero-media-dark relative w-full" loading="eager" decoding="async" aria-hidden="true" />
    </div>
  );
}

function CTAButton({ href = "#book", children, tone = "dark", icon = "arrow-right" }) {
  const styles = {
    dark: "bg-ink text-white hover:bg-black",
    blue: "bg-cobalt text-white hover:bg-blue-700",
    red: "bg-signal text-white hover:bg-red-700",
    light: "bg-white text-ink hover:bg-slate-100",
    outline: "border border-ink/20 bg-white text-ink hover:border-ink",
  };

  return (
    <a
      href={href}
      className={cx(
        `cta-button cta-${tone} inline-flex min-h-12 items-center justify-center gap-2 rounded-lg px-5 py-3 text-sm font-bold transition`,
        styles[tone],
      )}
    >
      <span>{children}</span>
      <Icon name={icon} className="text-base" />
    </a>
  );
}

function StudioVersion({ currentView, goTo, theme, toggleTheme }) {
  return (
    <div className="site-surface bg-white text-ink">
      <header className="site-header fixed inset-x-0 top-0 z-50 border-b border-black/10 bg-white/90 backdrop-blur-xl">
        <div className="mx-auto flex h-16 max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8">
          <Brand />
          <nav className="hidden items-center gap-7 text-sm font-semibold text-slate-600 lg:flex">
            <a href="#systems" className="hover:text-ink">
              Systems
            </a>
            <a href="#math" className="hover:text-ink">
              Cost
            </a>
            <a href="#process" className="hover:text-ink">
              Process
            </a>
            <a href="#book" className="hover:text-ink">
              Book
            </a>
          </nav>
          <div className="flex items-center gap-2">
            <VersionToggle currentView={currentView} goTo={goTo} />
            <ThemeToggle theme={theme} onToggle={toggleTheme} />
          </div>
        </div>
      </header>

      <section className="hero-shell relative isolate overflow-hidden pt-16">
        <div className="absolute inset-0">
          <DotField
            className="opacity-65"
            dotRadius={1.4}
            dotSpacing={20}
            cursorRadius={430}
            bulgeStrength={34}
            glowRadius={190}
            gradientFrom="rgba(19, 93, 248, 0.14)"
            gradientTo="rgba(16, 184, 199, 0.10)"
            glowColor="rgba(19, 93, 248, 0.09)"
            sparkle={false}
            waveAmplitude={0}
          />
        </div>
        <div className="relative mx-auto grid min-h-[84svh] max-w-7xl content-center px-4 py-20 sm:px-6 lg:px-8">
          <div className="hero-layout grid items-center gap-12 lg:grid-cols-[minmax(0,0.92fr)_minmax(380px,0.9fr)]">
            <div className="hero-copy">
              <h1 className="break-words text-4xl font-black leading-[1.02] text-ink sm:text-5xl lg:text-6xl">
                Owned systems for service businesses.
              </h1>
              <p className="mt-6 max-w-xl text-lg leading-8 text-slate-700">
                Websites, CRM, portals, automations, AI.
              </p>
              <div className="mt-8 flex flex-col gap-3 sm:flex-row">
                <CTAButton tone="dark">Book call</CTAButton>
                <button
                  type="button"
                  onClick={() => goTo("platform")}
                  className="theme-button-ghost inline-flex min-h-12 items-center justify-center gap-2 rounded-lg border border-ink/20 bg-white/80 px-5 py-3 text-sm font-bold text-ink backdrop-blur transition hover:border-ink"
                >
                  <span>Platform model</span>
                  <Icon name="move-right" className="text-base" />
                </button>
              </div>
              <div className="mt-10 grid max-w-2xl grid-cols-1 gap-3 sm:grid-cols-3">
                {[
                  ["7-14", "day sprint"],
                  ["6+", "tools"],
                  ["1", "data layer"],
                ].map(([value, label]) => (
                  <div key={label} className="hero-stat rounded-lg border border-black/10 bg-white/70 p-4 shadow-soft backdrop-blur">
                    <div className="text-2xl font-black text-ink">{value}</div>
                    <div className="mt-1 text-sm font-semibold text-slate-600">{label}</div>
                  </div>
                ))}
              </div>
            </div>
            <HeroMedia tone="studio" />
          </div>
        </div>
      </section>

      <section id="systems" className="dark-stage relative isolate overflow-hidden px-4 py-24 text-white sm:px-6 lg:px-8">
        <div className="stage-dots absolute inset-0" />
        <div className="stage-vignette absolute inset-0" />
        <div className="relative mx-auto max-w-7xl">
          <DarkSectionIntro
            eyebrow="What we build"
            title="One product system."
          />
          <SystemsBento systems={studioSystems} />
        </div>
      </section>

      <StudioCostSection />

      <section id="process" className="light-section bg-white px-4 py-24 sm:px-6 lg:px-8">
        <div className="mx-auto max-w-7xl">
          <SectionIntro
            eyebrow="Delivery"
            title="From scattered tools to owned workflow."
          />
          <div className="mt-12 grid gap-4 lg:grid-cols-4">
            {deliverySteps.map(([number, title, body]) => (
              <div key={number} className="theme-card group rounded-lg border border-black/10 bg-white p-5 shadow-soft transition">
                <div className="flex items-center justify-between gap-3">
                  <span className="rounded-md border border-black/10 bg-slate-100 px-2 py-1 text-xs font-black text-slate-600">
                    {number}
                  </span>
                  <span className="h-px flex-1 bg-gradient-to-r from-slate-300 to-transparent" />
                  <Icon name="arrow-up-right" className="text-base text-slate-300" />
                </div>
                <div className="theme-card-figure mt-8 h-20 rounded-lg border border-black/10 bg-slate-50 p-3">
                  <ProcessGlyph step={number} />
                </div>
                <h3 className="mt-5 text-xl font-black text-ink">{title}</h3>
                <p className="mt-3 text-sm leading-6 text-slate-600">{body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="dark-stage relative isolate overflow-hidden px-4 py-24 text-white sm:px-6 lg:px-8">
        <div className="stage-dots absolute inset-0" />
        <div className="stage-vignette absolute inset-0" />
        <div className="relative mx-auto grid max-w-7xl gap-10 lg:grid-cols-[0.9fr_1.1fr] lg:items-center">
          <div>
            <p className="text-sm font-black uppercase text-cyan">Client portal preview</p>
            <h2 className="mt-4 text-4xl font-black leading-tight sm:text-5xl">
              One clean client room.
            </h2>
            <div className="mt-8 flex flex-wrap gap-3">
              {["Approvals", "Messages", "Payments", "Files", "Milestones"].map((item) => (
                <span key={item} className="rounded-lg border border-white/15 bg-white/[0.08] px-3 py-2 text-sm font-bold">
                  {item}
                </span>
              ))}
            </div>
          </div>
          <PortalConsole />
        </div>
      </section>

      <FinalCTA
        id="book"
        eyebrow="Next"
        title="Build the operating layer."
        buttonTone="blue"
      />
      <Footer />
    </div>
  );
}

function ProcessGlyph({ step }) {
  const active = Number(step) - 1;
  return (
    <div className="grid h-full grid-cols-4 items-center gap-2">
      {[0, 1, 2, 3].map((index) => (
        <React.Fragment key={index}>
          <span
            className={cx(
              "grid h-8 place-items-center rounded-md border text-[10px] font-black",
              index <= active
                ? "border-slate-300 bg-slate-100 text-slate-700"
                : "workflow-step-muted border-slate-200 bg-white text-slate-300",
            )}
          >
            {index + 1}
          </span>
          {index < 3 && (
            <span className={cx("hidden h-px sm:block", index < active ? "bg-slate-300" : "workflow-step-line bg-slate-200")} />
          )}
        </React.Fragment>
      ))}
    </div>
  );
}

function PortalConsole() {
  return (
    <div className="premium-panel overflow-hidden rounded-lg border border-white/[0.16] bg-white/[0.055] shadow-lift backdrop-blur">
      <div className="flex h-12 items-center justify-between border-b border-white/10 px-4">
        <div className="flex gap-2">
          <span className="h-2.5 w-2.5 rounded-full bg-white/[0.18]" />
          <span className="h-2.5 w-2.5 rounded-full bg-white/[0.12]" />
          <span className="h-2.5 w-2.5 rounded-full bg-white/[0.12]" />
        </div>
        <span className="rounded-md border border-white/10 px-2 py-1 font-mono text-xs text-white/[0.45]">client.os</span>
      </div>
      <div className="grid gap-px bg-white/10 md:grid-cols-[0.85fr_1.15fr]">
        <div className="bg-ink/80 p-5">
          <div className="mb-5 flex items-center justify-between">
            <span className="text-sm font-black text-white">Project room</span>
            <span className="rounded-md bg-mint/[0.12] px-2 py-1 text-xs font-black text-mint">live</span>
          </div>
          {[
            ["Proposal", "approved", "bg-mint"],
            ["Deposit", "paid", "bg-cobalt"],
            ["Files", "received", "bg-cyan"],
            ["Milestone", "in review", "bg-amber-300"],
          ].map(([label, status, color]) => (
            <div key={label} className="flex items-center justify-between border-t border-white/[0.08] py-4">
              <div className="flex items-center gap-3">
                <span className={cx("h-2.5 w-2.5 rounded-full", color)} />
                <span className="font-semibold text-white/[0.88]">{label}</span>
              </div>
              <span className="font-mono text-xs text-white/[0.42]">{status}</span>
            </div>
          ))}
        </div>
        <div className="bg-ink/80 p-5">
          <div className="mb-5 flex items-center justify-between">
            <span className="text-sm font-black text-white">Owner view</span>
            <span className="font-mono text-xs text-white/[0.42]">91%</span>
          </div>
          <div className="h-2 rounded-full bg-white/[0.08]">
            <div className="h-2 w-[91%] rounded-full bg-gradient-to-r from-cobalt via-cyan to-mint" />
          </div>
          <div className="mt-8 grid grid-cols-3 gap-3">
            {[
              ["24", "clients"],
              ["18", "messages"],
              ["32", "files"],
            ].map(([value, label]) => (
              <div key={label} className="border-l border-white/10 pl-3">
                <div className="text-2xl font-black text-white">{value}</div>
                <div className="mt-1 font-mono text-xs text-white/[0.42]">{label}</div>
              </div>
            ))}
          </div>
          <div className="mt-8 grid gap-2">
            {[74, 46, 82, 61].map((width, index) => (
              <div key={index} className="h-2 rounded-full bg-white/[0.08]">
                <div className="h-2 rounded-full bg-white/[0.22]" style={{ width: `${width}%` }} />
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function StudioCostSection() {
  const [monthly, setMonthly] = useState(1650);
  const [build, setBuild] = useState(18000);
  const threeYearRent = monthly * 36;
  const savings = Math.max(threeYearRent - build, 0);

  const formatted = useMemo(() => {
    const dollars = new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
      maximumFractionDigits: 0,
    });
    return {
      rent: dollars.format(threeYearRent),
      build: dollars.format(build),
      savings: dollars.format(savings),
      monthly: dollars.format(monthly),
    };
  }, [monthly, build, threeYearRent, savings]);

  return (
    <section id="math" className="light-section bg-white px-4 py-20 sm:px-6 lg:px-8">
      <div className="mx-auto grid max-w-7xl gap-8 lg:grid-cols-[0.9fr_1.1fr] lg:items-start">
        <div>
          <p className="text-sm font-black uppercase text-cobalt">Own vs rent</p>
          <h2 className="mt-4 text-4xl font-black leading-tight text-ink sm:text-5xl">
            Own the system.
          </h2>
          <p className="mt-5 text-lg leading-8 text-slate-700">
            Compare rent vs build.
          </p>
        </div>
        <div className="theme-card rounded-lg border border-black/10 bg-bone p-6 shadow-soft">
          <div className="grid gap-5 sm:grid-cols-2">
            <RangeControl
              label="Monthly software spend"
              value={monthly}
              min={500}
              max={8000}
              step={50}
              onChange={setMonthly}
              display={formatted.monthly}
            />
            <RangeControl
              label="Estimated system build"
              value={build}
              min={8000}
              max={65000}
              step={1000}
              onChange={setBuild}
              display={formatted.build}
            />
          </div>
          <div className="mt-6 grid gap-3 sm:grid-cols-3">
            <Metric label="3-year rent" value={formatted.rent} />
            <Metric label="Owned build" value={formatted.build} />
            <Metric label="Potential delta" value={formatted.savings} accent />
          </div>
        </div>
      </div>
    </section>
  );
}

function RangeControl({ label, value, min, max, step, onChange, display }) {
  return (
    <label className="theme-card block rounded-lg border border-black/10 bg-white p-4">
      <span className="flex items-center justify-between gap-3 text-sm font-bold text-slate-600">
        {label}
        <strong className="text-ink">{display}</strong>
      </span>
      <input
        className="mt-4 w-full accent-cobalt"
        type="range"
        min={min}
        max={max}
        step={step}
        value={value}
        onChange={(event) => onChange(Number(event.target.value))}
      />
    </label>
  );
}

function Metric({ label, value, accent = false }) {
  return (
    <div className={cx("theme-card rounded-lg p-4", accent ? "bg-ink text-white" : "bg-white text-ink")}>
      <div className={cx("text-sm font-bold", accent ? "text-cyan" : "text-slate-500")}>{label}</div>
      <div className="mt-2 text-2xl font-black">{value}</div>
    </div>
  );
}

function DarkSectionIntro({ eyebrow, title, body, tone = "studio" }) {
  return (
    <div className="max-w-3xl">
      <p className={cx("text-sm font-black uppercase", tone === "enterprise" ? "text-signal" : "text-cyan")}>
        {eyebrow}
      </p>
      <h2 className="mt-4 text-4xl font-black leading-tight text-white sm:text-5xl">{title}</h2>
      {body && <p className="mt-5 text-lg leading-8 text-slate-300">{body}</p>}
    </div>
  );
}

function SystemsBento({ systems }) {
  const featured = ["Custom CRM", "Automations", "Client portals", "AI work agents"]
    .map((title) => systems.find((system) => system.title === title))
    .filter(Boolean);
  const supportSpans = ["lg:col-span-5", "lg:col-span-5", "lg:col-span-4", "lg:col-span-4"];

  return (
    <div className="systems-bento mt-12 grid gap-4 lg:grid-cols-12">
      <OwnedSystemPanel />
      {featured.slice(0, 2).map((system, index) => (
        <SystemMotionPanel key={system.title} system={system} className={supportSpans[index]} />
      ))}
      <CapabilityMatrix systems={systems} className="lg:col-span-4" />
      {featured.slice(2).map((system, index) => (
        <SystemMotionPanel key={system.title} system={system} className={supportSpans[index + 2]} />
      ))}
    </div>
  );
}

function OwnedSystemPanel() {
  return (
    <article className="premium-panel system-bento-panel system-hero-panel group min-h-[560px] overflow-hidden lg:col-span-7 lg:row-span-2">
      <div className="system-panel-glow" />
      <div className="system-hero-visual">
        <SystemPreview variant="operating" density="large" />
      </div>
      <div className="system-panel-copy relative z-10 p-6 sm:p-7">
        <div className="flex flex-wrap items-center gap-2 text-xs font-black uppercase tracking-normal text-cyan">
          <Icon name="scan-line" className="text-base" />
          <span>Owned operating system</span>
        </div>
        <h3 className="mt-4 max-w-xl text-3xl font-black leading-tight text-white sm:text-4xl">
          One operating layer.
        </h3>
        <div className="system-proof-strip mt-6 grid gap-2 sm:grid-cols-4">
          {[
            ["Lead scored", "high intent"],
            ["Approval needed", "proposal"],
            ["Capacity", "82%"],
            ["Invoice paid", "synced"],
          ].map(([label, value], index) => (
            <span key={label} className="system-proof-pill" style={{ "--motion-index": index }}>
              <span>{label}</span>
              <strong>{value}</strong>
            </span>
          ))}
        </div>
      </div>
    </article>
  );
}

function SystemMotionPanel({ system, className = "" }) {
  return (
    <article className={cx("premium-panel system-bento-panel system-support-panel group min-h-[272px] overflow-hidden", className)}>
      <div className="system-support-preview">
        <SystemPreview variant={system.preview} />
      </div>
      <div className="system-support-copy relative z-10 p-5">
        <div className="flex items-center justify-between gap-3">
          <span className="system-mini-icon">
            <Icon name={system.icon} className="text-lg" />
          </span>
          <span className="font-mono text-xs text-white/[0.38]">{system.group}</span>
        </div>
        <h3 className="mt-4 text-xl font-black text-white">{system.title}</h3>
        <div className="mt-4 flex flex-wrap gap-2">
          {system.tags.map((tag) => (
            <span key={tag} className="system-tag">
              {tag}
            </span>
          ))}
        </div>
      </div>
    </article>
  );
}

function CapabilityMatrix({ systems, className = "" }) {
  return (
    <article className={cx("premium-panel system-bento-panel system-chip-panel overflow-hidden", className)}>
      <div className="relative z-10 p-5">
        <div className="flex items-center justify-between gap-3">
          <span className="system-mini-icon">
            <Icon name="blocks" className="text-lg" />
          </span>
          <span className="font-mono text-xs text-white/[0.36]">8 modules</span>
        </div>
        <h3 className="mt-4 text-xl font-black text-white">8 modules.</h3>
        <div className="systems-chip-grid mt-5 grid gap-2">
          {systems.map((system, index) => (
            <span key={system.title} className="system-capability-chip" style={{ "--motion-index": index }}>
              <Icon name={system.icon} className="text-base" />
              <span>
                <strong>{system.group}</strong>
                {system.title}
              </span>
            </span>
          ))}
        </div>
      </div>
    </article>
  );
}

function SystemCard({ icon, title, body, preview, tone = "studio" }) {
  const isEnterprise = tone === "enterprise";

  return (
    <article className={cx("premium-panel system-bento-panel system-card group overflow-hidden", isEnterprise && "system-enterprise-card")}>
      <div className="system-card-preview">
        <SystemPreview variant={preview} tone={tone} />
      </div>
      <div className="p-5">
        <span
          className={cx(
            "grid h-10 w-10 place-items-center rounded-lg border",
            "border-white/15 bg-white/[0.055] text-white/70",
          )}
        >
          <Icon name={icon} className="text-xl" />
        </span>
        <h3 className="mt-5 text-xl font-black text-white">{title}</h3>
      </div>
    </article>
  );
}

function SystemPreview({ variant, tone = "studio", density = "standard" }) {
  const isEnterprise = tone === "enterprise";
  const sceneClass = cx(
    "system-preview-scene",
    isEnterprise ? "system-preview-enterprise" : "system-preview-studio",
    density === "large" && "system-preview-large",
  );

  if (variant === "operating") {
    return (
      <div className={sceneClass}>
        <OperatingSystemScene />
      </div>
    );
  }

  if (variant === "pipeline") {
    return (
      <div className={sceneClass}>
        <PipelineScene />
      </div>
    );
  }

  if (variant === "flow") {
    return (
      <div className={sceneClass}>
        <FlowScene />
      </div>
    );
  }

  if (variant === "metrics") {
    return (
      <div className={sceneClass}>
        <MetricsScene />
      </div>
    );
  }

  if (variant === "portal") {
    return (
      <div className={sceneClass}>
        <PortalScene />
      </div>
    );
  }

  if (variant === "mesh") {
    return (
      <div className={sceneClass}>
        <MeshScene />
      </div>
    );
  }

  if (variant === "terminal") {
    return (
      <div className={sceneClass}>
        <AgentScene />
      </div>
    );
  }

  if (variant === "orbit") {
    return (
      <div className={sceneClass}>
        <OwnershipScene />
      </div>
    );
  }

  return (
    <div className={sceneClass}>
      <SiteScene />
    </div>
  );
}

function OperatingSystemScene() {
  const nodes = [
    ["node-intake", "globe-2", "Intake", "3 new"],
    ["node-crm", "users", "CRM", "Lead scored"],
    ["node-portal", "file-check-2", "Portal", "Approval needed"],
    ["node-ops", "workflow", "Ops", "Task routed"],
    ["node-metrics", "bar-chart-3", "Revenue", "$18.4k"],
    ["node-owner", "shield-check", "Owner layer", "Synced"],
  ];

  return (
    <div className="owned-system-scene">
      <svg className="system-link-layer" viewBox="0 0 640 360" preserveAspectRatio="none" aria-hidden="true">
        <path className="system-link system-link-a" d="M112 82 C210 74 245 136 320 168" />
        <path className="system-link system-link-b" d="M118 276 C208 276 242 218 320 184" />
        <path className="system-link system-link-c" d="M320 168 C402 98 452 76 536 82" />
        <path className="system-link system-link-d" d="M320 184 C408 228 456 280 538 276" />
        <path className="system-link system-link-e" d="M242 316 C306 276 360 280 420 318" />
      </svg>
      <div className="system-core">
        <span className="system-core-ring" />
        <span className="system-core-icon">
          <Icon name="blocks" className="text-2xl" />
        </span>
        <span className="system-core-label">Owner OS</span>
      </div>
      {nodes.map(([position, icon, label, value], index) => (
        <div key={label} className={cx("system-node", position)} style={{ "--motion-index": index }}>
          <Icon name={icon} className="text-lg" />
          <span>
            <strong>{label}</strong>
            {value}
          </span>
        </div>
      ))}
      <div className="system-event system-event-one">
        <span>Lead scored</span>
        <strong>high intent</strong>
      </div>
      <div className="system-event system-event-two">
        <span>Capacity</span>
        <strong>82%</strong>
      </div>
    </div>
  );
}

function PipelineScene() {
  const columns = [
    ["New", ["Lead scored"]],
    ["Proposal", ["Draft ready"]],
    ["Won", ["Deposit paid"]],
  ];

  return (
    <div className="product-window pipeline-window">
      <WindowBar label="crm.pipeline" />
      <div className="pipeline-board">
        {columns.map(([label, cards], columnIndex) => (
          <div key={label} className="pipeline-lane" style={{ "--motion-index": columnIndex }}>
            <div className="pipeline-lane-title">{label}</div>
            {cards.map((card, cardIndex) => (
              <div key={card} className="pipeline-card" style={{ "--motion-index": columnIndex + cardIndex }}>
                <span>{card}</span>
                <strong>{cardIndex === 0 ? "live" : "next"}</strong>
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

function FlowScene() {
  const nodes = [
    ["Lead", "globe-2"],
    ["Score", "sparkles"],
    ["Draft", "file-text"],
    ["Send", "send"],
  ];

  return (
    <div className="product-window flow-window">
      <WindowBar label="release.flow" />
      <div className="flow-steps">
        {nodes.map(([label, icon], index) => (
          <React.Fragment key={label}>
            <div className="flow-step" style={{ "--motion-index": index }}>
              <Icon name={icon} className="text-base" />
              <span>{label}</span>
            </div>
            {index < nodes.length - 1 && <i aria-hidden="true" />}
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

function MetricsScene() {
  return (
    <div className="metrics-scene">
      <div className="metric-ring">
        <span>82%</span>
        <strong>capacity</strong>
      </div>
      <div className="metric-bars" aria-hidden="true">
        {[42, 58, 48, 74, 66, 88, 72].map((height, index) => (
          <span key={index} style={{ "--bar-height": `${height}%`, "--motion-index": index }} />
        ))}
      </div>
      <div className="metric-caption">
        <span>Revenue</span>
        <strong>$18.4k</strong>
      </div>
    </div>
  );
}

function PortalScene() {
  return (
    <div className="product-window portal-window">
      <WindowBar label="client.room" />
      <div className="portal-feed">
        {[
          ["file-check-2", "Approval", "Ready"],
          ["user-check", "Review", "Queued"],
        ].map(([icon, label, value], index) => (
          <div key={label} className="portal-row" style={{ "--motion-index": index }}>
            <Icon name={icon} className="text-lg" />
            <span>
              <strong>{label}</strong>
              {value}
            </span>
            <i />
          </div>
        ))}
      </div>
    </div>
  );
}

function MeshScene() {
  return (
    <div className="mesh-scene">
      <svg className="system-link-layer" viewBox="0 0 420 220" preserveAspectRatio="none" aria-hidden="true">
        <path className="system-link system-link-a" d="M82 52 C158 108 238 104 338 52" />
        <path className="system-link system-link-b" d="M82 168 C164 116 248 118 338 168" />
        <path className="system-link system-link-c" d="M210 56 L210 166" />
      </svg>
      {[
        ["mesh-payments", "credit-card"],
        ["mesh-email", "mail"],
        ["mesh-calendar", "calendar"],
        ["mesh-data", "database"],
      ].map(([position, icon], index) => (
        <div key={position} className={cx("mesh-node", position)} style={{ "--motion-index": index }}>
          <Icon name={icon} className="text-lg" />
        </div>
      ))}
      <div className="mesh-core">
        <Icon name="plug-zap" className="text-2xl" />
        <span>Synced</span>
      </div>
    </div>
  );
}

function AgentScene() {
  return (
    <div className="agent-console">
      <WindowBar label="agent.run" />
      <div className="agent-lines">
        <span>$ score new lead</span>
        <strong>intent: high</strong>
        <em>draft: ready</em>
      </div>
      <div className="agent-scan" />
    </div>
  );
}

function OwnershipScene() {
  return (
    <div className="ownership-scene">
      <span className="ownership-ring ring-one" />
      <span className="ownership-ring ring-two" />
      <span className="ownership-ring ring-three" />
      <div className="ownership-core">
        <Icon name="shield-check" className="text-2xl" />
        <span>Owned data</span>
      </div>
      {[
        ["own-key", "key-round"],
        ["own-lock", "lock"],
        ["own-db", "database"],
        ["own-check", "badge-check"],
      ].map(([position, icon], index) => (
        <span key={position} className={cx("ownership-node", position)} style={{ "--motion-index": index }}>
          <Icon name={icon} className="text-base" />
        </span>
      ))}
    </div>
  );
}

function SiteScene() {
  return (
    <div className="product-window site-window">
      <WindowBar label="lead.intake" />
      <div className="site-composition">
        <div className="site-hero-line" />
        <div className="site-form">
          <span>Booking request</span>
          <strong>Qualified</strong>
        </div>
        <div className="site-cards">
          <span />
          <span />
          <span />
        </div>
      </div>
    </div>
  );
}

function WindowBar({ label }) {
  return (
    <div className="window-bar">
      <span />
      <span />
      <span />
      <strong>{label}</strong>
    </div>
  );
}

function PlatformVersion({ currentView, goTo, theme, toggleTheme }) {
  return (
    <div className="site-surface bg-white text-ink">
      <header className="site-header fixed inset-x-0 top-0 z-50 border-b border-black/10 bg-white/90 backdrop-blur-xl">
        <div className="mx-auto flex h-16 max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8">
          <Brand />
          <nav className="hidden items-center gap-7 text-sm font-semibold text-slate-600 xl:flex">
            <a href="#platform" className="hover:text-ink">
              Platform
            </a>
            <a href="#capabilities" className="hover:text-ink">
              Capabilities
            </a>
            <a href="#use-cases" className="hover:text-ink">
              Use cases
            </a>
            <a href="#enterprise" className="hover:text-ink">
              Enterprise
            </a>
          </nav>
          <div className="flex items-center gap-2">
            <VersionToggle currentView={currentView} goTo={goTo} />
            <ThemeToggle theme={theme} onToggle={toggleTheme} />
          </div>
        </div>
      </header>

      <section id="platform" className="hero-shell relative isolate overflow-hidden pt-16">
        <div className="absolute inset-0">
          <DotField
            className="opacity-60"
            dotRadius={1.35}
            dotSpacing={20}
            cursorRadius={420}
            bulgeStrength={32}
            glowRadius={180}
            gradientFrom="rgba(239, 48, 56, 0.11)"
            gradientTo="rgba(16, 184, 199, 0.10)"
            glowColor="rgba(239, 48, 56, 0.08)"
            sparkle={false}
            waveAmplitude={0}
          />
        </div>
        <div className="relative mx-auto grid min-h-[84svh] max-w-7xl content-center px-4 py-20 sm:px-6 lg:px-8">
          <div className="hero-layout grid items-center gap-12 lg:grid-cols-[minmax(0,0.92fr)_minmax(380px,0.9fr)]">
            <div className="hero-copy">
              <h1 className="break-words text-4xl font-black leading-[1.02] text-ink sm:text-5xl lg:text-6xl">
                Governed AI operations.
              </h1>
              <p className="mt-6 max-w-xl text-lg leading-8 text-slate-700">
                AI apps, approvals, observability, release control.
              </p>
              <div className="mt-8 flex flex-col gap-3 sm:flex-row">
                <CTAButton tone="red">Book demo</CTAButton>
                <button
                  type="button"
                  onClick={() => goTo("studio")}
                  className="theme-button-ghost inline-flex min-h-12 items-center justify-center gap-2 rounded-lg border border-ink/20 bg-white/80 px-5 py-3 text-sm font-bold text-ink backdrop-blur transition hover:border-ink"
                >
                  <span>Studio model</span>
                  <Icon name="move-right" className="text-base" />
                </button>
              </div>
            </div>
            <HeroMedia tone="platform" />
          </div>
        </div>
      </section>

      <section className="border-y border-black/10 bg-ink px-4 py-6 text-white sm:px-6 lg:px-8">
        <div className="mx-auto grid max-w-7xl gap-4 text-sm font-bold sm:grid-cols-2 lg:grid-cols-4">
          {[
            ["Model", "AI + approval"],
            ["Ops", "Workflow layer"],
            ["Trust", "Governance"],
            ["Scale", "Production path"],
          ].map(([label, value]) => (
            <div key={label} className="flex items-center gap-3 rounded-lg border border-white/10 bg-white/[0.08] px-4 py-3">
              <Icon name="check-circle-2" className="text-lg text-white/55" />
              <span className="text-white/[0.55]">{label}</span>
              <span>{value}</span>
            </div>
          ))}
        </div>
      </section>

      <section id="capabilities" className="dark-stage relative isolate overflow-hidden px-4 py-24 text-white sm:px-6 lg:px-8">
        <div className="stage-dots absolute inset-0" />
        <div className="stage-vignette absolute inset-0" />
        <div className="relative mx-auto max-w-7xl">
          <DarkSectionIntro
            eyebrow="Capabilities"
            title="Speed with control."
            tone="enterprise"
          />
          <div className="mt-12 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
            {platformCapabilities.map(([icon, title, body, preview]) => (
              <SystemCard key={title} icon={icon} title={title} body={body} preview={preview} tone="enterprise" />
            ))}
          </div>
        </div>
      </section>

      <section id="use-cases" className="light-section bg-bone px-4 py-20 sm:px-6 lg:px-8">
        <div className="mx-auto grid max-w-7xl gap-10 lg:grid-cols-[0.85fr_1.15fr] lg:items-center">
          <div>
            <p className="text-sm font-black uppercase text-signal">Solutions</p>
            <h2 className="mt-4 text-4xl font-black leading-tight text-ink sm:text-5xl">
              Build the workflow.
            </h2>
            <div className="mt-8 grid gap-3 sm:grid-cols-2">
              {useCases.map((item) => (
                <div key={item} className="theme-card flex items-center gap-3 rounded-lg bg-white px-4 py-3 text-sm font-bold shadow-soft">
                  <span className="grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-slate-100 text-slate-500">
                    <Icon name="arrow-up-right" className="text-base" />
                  </span>
                  {item}
                </div>
              ))}
            </div>
          </div>
          <div className="theme-card rounded-lg border border-black/10 bg-white p-5 shadow-lift">
            <div className="mb-4 flex items-center justify-between gap-4">
              <div>
                <p className="text-sm font-bold text-slate-500">Release canvas</p>
                <h3 className="mt-1 text-2xl font-black">Claims intake</h3>
              </div>
              <span className="rounded-lg bg-slate-100 px-3 py-2 text-sm font-black text-slate-600">Ready</span>
            </div>
            <div className="grid gap-3 md:grid-cols-4">
              {[
                ["Intake", "Capture"],
                ["Classify", "Route"],
                ["Approve", "Review"],
                ["Resolve", "Status"],
              ].map(([title, body]) => (
                <div key={title} className="theme-subcard rounded-lg border border-black/10 p-4">
                  <span className="mb-4 block h-2 w-10 rounded-full bg-slate-300" />
                  <h4 className="font-black">{title}</h4>
                  <p className="mt-2 text-sm leading-6 text-slate-600">{body}</p>
                </div>
              ))}
            </div>
            <div className="mt-5 grid gap-3 sm:grid-cols-3">
              <Metric label="Latency target" value="900ms" />
              <Metric label="Policy checks" value="18" />
              <Metric label="Release risk" value="Low" accent />
            </div>
          </div>
        </div>
      </section>

      <section id="enterprise" className="light-section bg-white px-4 py-20 sm:px-6 lg:px-8">
        <div className="mx-auto grid max-w-7xl gap-8 lg:grid-cols-3">
          <div className="lg:col-span-1">
            <p className="text-sm font-black uppercase text-signal">Enterprise trust</p>
            <h2 className="mt-4 text-4xl font-black leading-tight text-ink">
              Governed change.
            </h2>
          </div>
          <div className="grid gap-4 sm:grid-cols-3 lg:col-span-2">
            {[
              ["Audit trail", "Trace every step."],
              ["Role security", "Separate access."],
              ["Integration map", "Know the data path."],
            ].map(([title, body]) => (
              <div key={title} className="theme-card rounded-lg border border-black/10 bg-bone p-6">
                <Icon name="badge-check" className="text-2xl text-slate-500" />
                <h3 className="mt-5 text-xl font-black">{title}</h3>
                <p className="mt-3 text-sm leading-6 text-slate-600">{body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <FinalCTA
        id="book"
        eyebrow="Platform path"
        title="Ship with control."
        buttonTone="red"
      />
      <Footer />
    </div>
  );
}

function SectionIntro({ eyebrow, title, body }) {
  return (
    <div className="max-w-3xl">
      <p className="text-sm font-black uppercase text-cobalt">{eyebrow}</p>
      <h2 className="mt-4 text-4xl font-black leading-tight text-ink sm:text-5xl">{title}</h2>
      {body && <p className="mt-5 text-lg leading-8 text-slate-700">{body}</p>}
    </div>
  );
}

function FeatureCard({ icon, title, body, tone = "studio" }) {
  return (
    <article className="rounded-lg border border-black/10 bg-white p-6 shadow-soft transition">
      <span
        className={cx(
          "grid h-11 w-11 place-items-center rounded-lg",
          tone === "enterprise" ? "bg-signal/10 text-signal" : "bg-cobalt/10 text-cobalt",
        )}
      >
        <Icon name={icon} className="text-xl" />
      </span>
      <h3 className="mt-5 text-xl font-black text-ink">{title}</h3>
      <p className="mt-3 text-sm leading-6 text-slate-600">{body}</p>
    </article>
  );
}

function FinalCTA({ id, eyebrow, title, body, buttonTone }) {
  return (
    <section id={id} className="dark-stage relative isolate overflow-hidden px-4 py-20 text-white sm:px-6 lg:px-8">
      <div className="stage-dots absolute inset-0" />
      <div className="stage-vignette absolute inset-0" />
      <div className="relative mx-auto max-w-7xl border-t border-white/10 pt-12">
        <p className="text-sm font-black uppercase text-cyan">{eyebrow}</p>
        <div className="mt-4 grid gap-8 lg:grid-cols-[1fr_auto] lg:items-end">
          <div>
            <h2 className="max-w-4xl text-4xl font-black leading-tight sm:text-5xl">{title}</h2>
            {body && <p className="mt-5 max-w-3xl text-lg leading-8 text-slate-300">{body}</p>}
          </div>
          <CTAButton tone={buttonTone}>Book call</CTAButton>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="site-footer border-t border-black/10 bg-white px-4 py-10 sm:px-6 lg:px-8">
      <div className="mx-auto flex max-w-7xl flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
        <Brand />
        <div className="flex flex-wrap gap-5 text-sm font-semibold text-slate-500">
          <a href="mailto:hello@proprietarysystems.ai" className="hover:text-ink">
            hello@proprietarysystems.ai
          </a>
          <span>ProprietarySystems.ai</span>
          <span>2026</span>
        </div>
      </div>
    </footer>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);