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 = [
  ["globe-2", "Lead generation websites", "Pages, booking, intake, and SEO-ready foundations.", "site"],
  ["users", "Custom CRM", "Pipeline, clients, jobs, notes, and follow-up in one place.", "pipeline"],
  ["workflow", "Automations", "Reminders, documents, AI tasks, and status updates.", "flow"],
  ["layout-dashboard", "Internal dashboards", "Operations, revenue, team capacity, and delivery visibility.", "metrics"],
  ["file-check-2", "Client portals", "Messages, uploads, invoices, approvals, and project status.", "portal"],
  ["plug-zap", "Integrations", "Connect payments, email, calendars, spreadsheets, and existing tools.", "mesh"],
  ["bot", "AI work agents", "Proposal drafts, lead scoring, task routing, and research workflows.", "terminal"],
  ["shield-check", "Ownership layer", "Your data, your workflow, your operational advantage.", "orbit"],
];

const deliverySteps = [
  ["01", "Map the business", "We identify the expensive subscriptions, manual loops, and revenue bottlenecks."],
  ["02", "Design the system", "Your offer, workflows, team roles, data model, and client journey become one blueprint."],
  ["03", "Build fast", "We ship the highest-value modules first, then connect automations and reporting."],
  ["04", "Launch and improve", "Your team gets the operating system, handoff docs, and iteration plan."],
];

const platformCapabilities = [
  ["sparkles", "AI app generation", "Turn business requirements into governed workflows, portals, and automations.", "terminal"],
  ["blocks", "Integration fabric", "Connect CRM, ERP, payments, data stores, email, documents, and internal APIs.", "mesh"],
  ["shield", "Governance controls", "Policy gates, audit trails, permissions, and production readiness checks.", "orbit"],
  ["rocket", "Delivery pipeline", "Prototype, test, approve, and ship changes through a visible release path.", "flow"],
  ["bar-chart-3", "Operational intelligence", "Track usage, cost, latency, pipeline movement, and business outcomes.", "metrics"],
  ["users-round", "Human in the loop", "Keep approvals, exceptions, and specialist judgment in every critical workflow.", "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 LottieLoop({ src, className = "" }) {
  const containerRef = useRef(null);

  useEffect(() => {
    const container = containerRef.current;
    const reduceMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches;
    if (!container || reduceMotion) return undefined;

    let animation;
    let cancelled = false;
    let retryTimer;

    const start = () => {
      if (cancelled || !window.lottie || !containerRef.current) return false;
      animation = window.lottie.loadAnimation({
        container: containerRef.current,
        renderer: "svg",
        loop: true,
        autoplay: true,
        path: src,
        rendererSettings: {
          preserveAspectRatio: "xMidYMid meet",
          progressiveLoad: true,
        },
      });
      return true;
    };

    if (!start()) {
      retryTimer = window.setTimeout(start, 400);
    }

    return () => {
      cancelled = true;
      window.clearTimeout(retryTimer);
      animation?.destroy();
    };
  }, [src]);

  return <div ref={containerRef} className={`lottie-layer pointer-events-none ${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">
                One owned system for service businesses.
              </h1>
              <p className="mt-6 max-w-xl text-lg leading-8 text-slate-700">
                Websites, portals, CRM, automations, dashboards, and AI workflows shaped around how your
                team sells, serves, and follows up.
              </p>
              <div className="mt-8 flex flex-col gap-3 sm:flex-row">
                <CTAButton tone="dark">Book strategy 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>View 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 launch sprint"],
                  ["6+", "tools unified"],
                  ["1", "owned 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="The operating pieces, assembled like a product system."
            body="Each module is useful on its own, then stronger when the data, client journey, and team handoffs connect."
          />
          <div className="mt-12 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
            {studioSystems.map(([icon, title, body, preview]) => (
              <SystemCard key={title} icon={icon} title={title} body={body} preview={preview} />
            ))}
          </div>
        </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 path"
            title="A calm path from scattered tools to owned infrastructure."
            body="We map the business, design the workflows, build the highest-value modules first, then launch with a clear iteration plan."
          />
          <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 hover:-translate-y-1 hover:shadow-lift">
                <div className="flex items-center justify-between gap-3">
                  <span className="rounded-md border border-cobalt/20 bg-cobalt/[0.08] px-2 py-1 text-xs font-black text-cobalt">
                    {number}
                  </span>
                  <span className="h-px flex-1 bg-gradient-to-r from-cobalt/30 to-transparent" />
                  <Icon name="arrow-up-right" className="text-base text-slate-300 transition group-hover:text-cobalt" />
                </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">
              Give clients one clean place to approve, upload, pay, and track.
            </h2>
            <p className="mt-5 max-w-xl text-lg leading-8 text-slate-300">
              The site, portal, CRM, and back office work together so customers and staff see the same
              source of truth.
            </p>
            <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="Build the operating layer"
        title="Bring the work into one owned system."
        body="Start with the workflows that create the most drag, then turn them into a quieter, cleaner way to run the business."
        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-cobalt/25 bg-cobalt/10 text-cobalt"
                : "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-cobalt/35" : "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">
            See what rented software is really costing.
          </h2>
          <p className="mt-5 text-lg leading-8 text-slate-700">
            If the business is already paying for scattered tools forever, custom infrastructure can
            become the cleaner long-term asset.
          </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>
      <p className="mt-5 text-lg leading-8 text-slate-300">{body}</p>
    </div>
  );
}

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

  return (
    <article className="premium-panel group overflow-hidden rounded-lg border border-white/[0.16] bg-white/[0.055] shadow-[0_22px_80px_rgba(0,0,0,0.24)] transition hover:-translate-y-1 hover:border-white/[0.26]">
      <div className="relative h-44 overflow-hidden border-b border-white/10 bg-white/[0.02]">
        <SystemPreview variant={preview} tone={tone} />
      </div>
      <div className="p-5">
        <span
          className={cx(
            "grid h-10 w-10 place-items-center rounded-lg border",
            isEnterprise
              ? "border-signal/25 bg-signal/[0.08] text-signal"
              : "border-cyan/25 bg-cyan/[0.08] text-cyan",
          )}
        >
          <Icon name={icon} className="text-xl" />
        </span>
        <h3 className="mt-5 text-xl font-black text-white">{title}</h3>
        <p className="mt-3 text-sm leading-6 text-slate-400">{body}</p>
      </div>
    </article>
  );
}

function SystemPreview({ variant, tone = "studio" }) {
  const isEnterprise = tone === "enterprise";
  const accent = isEnterprise ? "bg-signal" : "bg-cobalt";
  const accentSoft = isEnterprise ? "bg-signal/[0.16]" : "bg-cobalt/[0.16]";
  const accentBorder = isEnterprise ? "border-signal/20" : "border-cobalt/20";
  const accentText = isEnterprise ? "text-signal" : "text-cyan";

  if (variant === "pipeline") {
    return (
      <div className="absolute inset-0 grid grid-cols-3 gap-3 p-5">
        {[0, 1, 2].map((column) => (
          <div key={column} className="rounded-lg border border-white/[0.08] bg-ink/45 p-3">
            <div className={cx("mb-4 h-1.5 w-8 rounded-full", column === 0 ? accent : "bg-white/[0.18]")} />
            {[68, 42, 58].map((width, index) => (
              <div key={index} className="mb-3 h-2 rounded-full bg-white/[0.08]">
                <div className="h-2 rounded-full bg-white/20" style={{ width: `${Math.max(width - column * 8, 24)}%` }} />
              </div>
            ))}
          </div>
        ))}
      </div>
    );
  }

  if (variant === "flow") {
    return (
      <div className="absolute inset-0 p-5">
        <LottieLoop src="/lottie/workflow-pulse.json" className="absolute inset-0 z-10 opacity-80" />
        <div className="absolute left-1/2 top-1/2 h-px w-[72%] -translate-x-1/2 bg-white/[0.12]" />
        <div className="absolute left-1/2 top-1/2 h-[62%] w-px -translate-y-1/2 bg-white/[0.12]" />
        {[
          ["left-7 top-8", "mail"],
          ["right-7 top-8", "file-check-2"],
          ["left-7 bottom-8", "message-square"],
          ["right-7 bottom-8", "calendar-check"],
        ].map(([position, name]) => (
          <span key={position} className={cx("absolute grid h-12 w-12 place-items-center rounded-lg border border-white/10 bg-ink/70 text-white/[0.48]", position)}>
            <Icon name={name} className="text-lg" />
          </span>
        ))}
        <span className={cx("absolute left-1/2 top-1/2 grid h-14 w-14 -translate-x-1/2 -translate-y-1/2 place-items-center rounded-xl border bg-ink text-white", accentBorder)}>
          <Icon name="workflow" className={cx("text-xl", accentText)} />
        </span>
      </div>
    );
  }

  if (variant === "metrics") {
    return (
      <div className="absolute inset-0 p-5">
        <LottieLoop src="/lottie/data-bars.json" className="absolute inset-0 z-10 opacity-90" />
        <div className="grid h-full grid-cols-[0.8fr_1.2fr] gap-4">
          <div className="rounded-lg border border-white/[0.08] bg-ink/55 p-4">
            <div className={cx("h-14 w-14 rounded-full border-[10px] bg-transparent", isEnterprise ? "border-signal/40" : "border-cyan/40")} />
            <div className="mt-6 h-2 rounded-full bg-white/10" />
            <div className="mt-2 h-2 w-2/3 rounded-full bg-white/10" />
          </div>
          <div className="flex items-end gap-2 rounded-lg border border-white/[0.08] bg-ink/55 p-4">
            {[32, 52, 44, 76, 58, 68].map((height, index) => (
              <span
                key={index}
                className={cx("w-full rounded-t-md", index === 3 ? accent : "bg-white/[0.18]")}
                style={{ height: `${height}%` }}
              />
            ))}
          </div>
        </div>
      </div>
    );
  }

  if (variant === "portal") {
    return (
      <div className="absolute inset-0 p-5">
        {[0, 1, 2].map((index) => (
          <div key={index} className="mb-3 grid grid-cols-[auto_1fr_auto] items-center gap-3 rounded-lg border border-white/[0.08] bg-ink/55 px-3 py-3">
            <Icon name={index === 0 ? "file-stack" : index === 1 ? "credit-card" : "message-square"} className="text-lg text-white/[0.42]" />
            <div>
              <div className="h-2 w-28 rounded-full bg-white/[0.18]" />
              <div className="mt-2 h-1.5 w-16 rounded-full bg-white/10" />
            </div>
            <span className={cx("h-2.5 w-2.5 rounded-full", index === 0 ? "bg-amber-300" : index === 1 ? "bg-mint" : accent)} />
          </div>
        ))}
      </div>
    );
  }

  if (variant === "mesh") {
    return (
      <div className="absolute inset-0 p-5">
        <div className="absolute left-8 right-8 top-1/2 h-px bg-white/[0.12]" />
        <div className="absolute left-1/2 top-8 bottom-8 w-px bg-white/[0.12]" />
        {[
          ["left-8 top-8", "database"],
          ["right-8 top-8", "mail"],
          ["left-8 bottom-8", "calendar"],
          ["right-8 bottom-8", "credit-card"],
        ].map(([position, name]) => (
          <span key={position} className={cx("absolute grid h-11 w-11 place-items-center rounded-lg border border-white/10 bg-ink text-white/[0.45]", position)}>
            <Icon name={name} className="text-lg" />
          </span>
        ))}
        <span className={cx("absolute left-1/2 top-1/2 grid h-16 w-16 -translate-x-1/2 -translate-y-1/2 place-items-center rounded-2xl", accentSoft)}>
          <Icon name="plug-zap" className={cx("text-2xl", accentText)} />
        </span>
      </div>
    );
  }

  if (variant === "terminal") {
    return (
      <div className="absolute inset-0 p-5 font-mono text-xs text-white/[0.44]">
        <div className="rounded-lg border border-white/[0.08] bg-ink/70">
          <div className="flex h-9 items-center gap-2 border-b border-white/[0.08] px-3">
            <span className="h-2 w-2 rounded-full bg-white/20" />
            <span className="h-2 w-2 rounded-full bg-white/[0.14]" />
            <span className="h-2 w-2 rounded-full bg-white/[0.14]" />
          </div>
          <div className="space-y-4 p-4">
            <div>$ score new lead</div>
            <div className={accentText}>intent: high</div>
            <div>draft: proposal follow-up</div>
            <div className="h-2 w-3/4 rounded-full bg-white/10" />
          </div>
        </div>
      </div>
    );
  }

  if (variant === "orbit") {
    return (
      <div className="absolute inset-0 grid place-items-center">
        <LottieLoop src="/lottie/system-orbit.json" className="absolute inset-0 z-10 opacity-90" />
        <div className="absolute h-32 w-32 rounded-full border border-white/[0.08]" />
        <div className="absolute h-20 w-20 rounded-full border border-white/10" />
        {[
          ["left-10 top-10", "key-round"],
          ["right-10 top-12", "database"],
          ["left-12 bottom-10", "lock"],
          ["right-12 bottom-10", "badge-check"],
        ].map(([position, name]) => (
          <span key={position} className={cx("absolute grid h-10 w-10 place-items-center rounded-lg border border-white/10 bg-ink text-white/[0.45]", position)}>
            <Icon name={name} className="text-base" />
          </span>
        ))}
        <span className={cx("grid h-16 w-16 place-items-center rounded-2xl border bg-ink", accentBorder)}>
          <Icon name="shield-check" className={cx("text-2xl", accentText)} />
        </span>
      </div>
    );
  }

  return (
    <div className="absolute inset-0 p-5">
      <div className="rounded-lg border border-white/[0.08] bg-ink/55 p-4">
        <div className="mb-5 flex items-center gap-2">
          <span className={cx("h-3 w-3 rounded-full", accent)} />
          <span className="h-2 w-20 rounded-full bg-white/[0.18]" />
          <span className="h-2 w-12 rounded-full bg-white/10" />
        </div>
        <div className="space-y-3">
          <div className="h-7 rounded-md bg-white/[0.08]" />
          <div className="grid grid-cols-3 gap-2">
            <span className="h-12 rounded-md bg-white/[0.06]" />
            <span className={cx("h-12 rounded-md", accentSoft)} />
            <span className="h-12 rounded-md bg-white/[0.06]" />
          </div>
        </div>
      </div>
    </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 systems for serious operations.
              </h1>
              <p className="mt-6 max-w-xl text-lg leading-8 text-slate-700">
                AI applications, integrations, approvals, observability, and release control in one
                practical build path.
              </p>
              <div className="mt-8 flex flex-col gap-3 sm:flex-row">
                <CTAButton tone="red">Schedule platform 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>View 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 apps plus human approval"],
            ["Ops", "Workflow and integration layer"],
            ["Trust", "Governance and audit controls"],
            ["Scale", "Prototype to 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-cyan" />
              <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="Platform capabilities"
            title="Speed without losing control."
            body="A deeper platform posture for teams that need AI generation, integrations, governance, auditability, and production readiness."
            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, not another disconnected app.
            </h2>
            <p className="mt-5 text-lg leading-8 text-slate-700">
              Complex teams need visible handoffs, secure exceptions, and clean data movement from
              intake through resolution.
            </p>
            <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-cobalt/10 text-cobalt">
                    <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">Governed release canvas</p>
                <h3 className="mt-1 text-2xl font-black">AI claims intake workflow</h3>
              </div>
              <span className="rounded-lg bg-mint/10 px-3 py-2 text-sm font-black text-mint">Ready</span>
            </div>
            <div className="grid gap-3 md:grid-cols-4">
              {[
                ["Intake", "Form and email capture", "cobalt"],
                ["Classify", "AI route and enrich", "cyan"],
                ["Approve", "Human exception queue", "signal"],
                ["Resolve", "Portal status and docs", "mint"],
              ].map(([title, body, color]) => (
                <div key={title} className="theme-subcard rounded-lg border border-black/10 p-4">
                  <span
                    className={cx(
                      "mb-4 block h-2 w-10 rounded-full",
                      color === "cobalt" && "bg-cobalt",
                      color === "cyan" && "bg-cyan",
                      color === "signal" && "bg-signal",
                      color === "mint" && "bg-mint",
                    )}
                  />
                  <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">
              Built for governed change.
            </h2>
          </div>
          <div className="grid gap-4 sm:grid-cols-3 lg:col-span-2">
            {[
              ["Audit trail", "Every AI step, user action, and approval is traceable."],
              ["Role security", "Separate admin, client, operator, and finance permissions."],
              ["Integration map", "Document where each system connects and where data lives."],
            ].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-signal" />
                <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="Move from prototype to production with control."
        body="Design the workflow, connect the systems, add AI where it earns its place, and keep the release path visible."
        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>
      <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 hover:-translate-y-1 hover:shadow-lift">
      <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>
            <p className="mt-5 max-w-3xl text-lg leading-8 text-slate-300">{body}</p>
          </div>
          <CTAButton tone={buttonTone}>Book the strategy 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 />);