// Hero — animated dual-product visual
function Hero({ tweaks }) {
  const y = useScrollY();
  const par = Math.min(y * 0.3, 200);
  const fade = Math.max(0, 1 - y / 600);

  return (
    <header style={{
      minHeight: "100vh", position: "relative", overflow: "hidden",
      paddingTop: 140, paddingBottom: 80,
      display: "flex", flexDirection: "column",
    }}>
      <HeroBackdrop y={y} />

      <div style={{
        maxWidth: 1400, margin: "0 auto", padding: "0 32px", width: "100%",
        position: "relative", zIndex: 2,
        flex: 1, display: "flex", flexDirection: "column", justifyContent: "center",
      }}>
        <Reveal delay={100}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 12, marginBottom: 28 }}>
            <Pill>— A product studio</Pill>
            <span className="mono" style={{ fontSize: 11, color: "var(--ink-mute)", letterSpacing: "0.12em" }}>
              ◦ EST. 2026 · FIRST TWO SHIPPED
            </span>
          </div>
        </Reveal>

        <h1 className="serif" style={{
          fontSize: "clamp(56px, 9vw, 148px)",
          maxWidth: "16ch",
          marginBottom: 32,
          transform: `translateY(${-par * 0.15}px)`,
        }}>
          <SplitText text="We build" />{" "}
          <span style={{ fontStyle: "italic", color: "var(--ink-dim)" }}>
            <SplitText text="software" delay={150} />
          </span>
          <br />
          <SplitText text="that does" delay={400} />{" "}
          <span style={{ color: "var(--amber)", fontStyle: "italic" }}>
            <SplitText text="serious" delay={600} />
          </span>
          <br />
          <SplitText text="work." delay={900} />
        </h1>

        <Reveal delay={1200}>
          <p style={{
            maxWidth: 620, fontSize: 19, lineHeight: 1.5, color: "var(--ink-dim)",
            marginBottom: 40,
          }}>
            epakDigital is a product studio. We design and operate opinionated software for
            problems other teams find too boring, too regulated, or too hard. Two products
            are live — more on the way.
          </p>
        </Reveal>

        <Reveal delay={1400}>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <CTA size="lg">Explore the platform</CTA>
            <GhostCTA style={{ padding: "16px 24px", fontSize: 15 }}>
              Watch 90-second tour
            </GhostCTA>
          </div>
        </Reveal>

        <Reveal delay={1600} style={{ marginTop: 80 }}>
          <TrustBar />
        </Reveal>
      </div>

      {/* Scroll indicator */}
      <div style={{
        position: "absolute", bottom: 24, left: "50%", transform: "translateX(-50%)",
        opacity: fade, zIndex: 3,
        display: "flex", flexDirection: "column", alignItems: "center", gap: 10,
      }}>
        <span className="mono" style={{ fontSize: 10, color: "var(--ink-mute)", letterSpacing: "0.2em" }}>
          SCROLL
        </span>
        <div style={{ width: 1, height: 40, background: "linear-gradient(180deg, var(--ink-mute), transparent)" }} />
      </div>
    </header>
  );
}

function HeroBackdrop({ y }) {
  return (
    <div style={{
      position: "absolute", inset: 0, zIndex: 1, overflow: "hidden",
      pointerEvents: "none",
    }}>
      {/* Grid */}
      <svg width="100%" height="100%" style={{ position: "absolute", inset: 0, opacity: 0.3 }}>
        <defs>
          <pattern id="grid" width="80" height="80" patternUnits="userSpaceOnUse">
            <path d="M 80 0 L 0 0 0 80" fill="none" stroke="rgba(243,239,232,0.05)" strokeWidth="1" />
          </pattern>
          <radialGradient id="fade">
            <stop offset="0%" stopColor="rgba(255,255,255,0.9)" />
            <stop offset="100%" stopColor="rgba(255,255,255,0)" />
          </radialGradient>
          <mask id="m">
            <rect width="100%" height="100%" fill="url(#fade)" />
          </mask>
        </defs>
        <rect width="100%" height="100%" fill="url(#grid)" mask="url(#m)" />
      </svg>

      {/* Blobs — one per product */}
      <div style={{
        position: "absolute", right: "-10%", top: "20%",
        width: 600, height: 600, borderRadius: "50%",
        background: "radial-gradient(circle, oklch(0.78 0.14 70 / 0.18), transparent 65%)",
        filter: "blur(40px)",
        transform: `translateY(${y * 0.1}px) translateX(${y * 0.05}px)`,
      }} />
      <div style={{
        position: "absolute", right: "15%", top: "50%",
        width: 500, height: 500, borderRadius: "50%",
        background: "radial-gradient(circle, oklch(0.72 0.18 275 / 0.22), transparent 65%)",
        filter: "blur(40px)",
        transform: `translateY(${-y * 0.15}px) translateX(${-y * 0.03}px)`,
      }} />

      {/* Orbital visual */}
      <HeroVisual y={y} />
    </div>
  );
}

function HeroVisual({ y }) {
  const rot = y * 0.05;
  return (
    <div style={{
      position: "absolute", right: "-5%", top: "12%",
      width: 720, height: 720,
      transform: `rotate(${rot}deg)`,
      transition: "transform 0.1s linear",
      display: "none",
    }} className="hero-visual-desktop">
      <OrbitalVisual />
    </div>
  );
}

function OrbitalVisual() {
  return (
    <svg viewBox="-200 -200 400 400" width="100%" height="100%">
      {[60, 100, 140, 180].map((r, i) => (
        <circle key={r} cx="0" cy="0" r={r}
          fill="none" stroke="rgba(243,239,232,0.1)" strokeWidth="0.5"
          strokeDasharray={i % 2 ? "2 3" : "0"} />
      ))}
      <circle cx="0" cy="0" r="20" fill="var(--bg-3)" stroke="var(--line-strong)" />
      <circle cx="0" cy="0" r="4" fill="var(--ink)" />

      <g transform="rotate(30)">
        <circle cx="100" cy="0" r="8" fill="var(--amber)" />
        <circle cx="100" cy="0" r="14" fill="none" stroke="var(--amber)" strokeOpacity="0.3" />
      </g>
      <g transform="rotate(-120)">
        <circle cx="140" cy="0" r="6" fill="var(--indigo)" />
        <circle cx="140" cy="0" r="12" fill="none" stroke="var(--indigo)" strokeOpacity="0.3" />
      </g>
      <g transform="rotate(200)">
        <rect x="170" y="-3" width="6" height="6" fill="var(--ink-dim)" />
      </g>
    </svg>
  );
}

function TrustBar() {
  const logos = ["Ministry of Finance", "Hargate Capital", "Northwind Utility", "Bureau of Records", "Altis Health", "Port of Kalbek"];
  return (
    <div>
      <div className="mono" style={{ fontSize: 11, color: "var(--ink-mute)", letterSpacing: "0.18em", marginBottom: 20 }}>
        TRUSTED BY INSTITUTIONS AND INDUSTRY —
      </div>
      <div style={{
        display: "grid", gridTemplateColumns: "repeat(6,1fr)", gap: 32,
        alignItems: "center",
      }}>
        {logos.map((l, i) => (
          <div key={l} className="mono" style={{
            fontSize: 12, color: "var(--ink-dim)", letterSpacing: "0.06em",
            borderLeft: i === 0 ? "none" : "1px solid var(--line)",
            paddingLeft: i === 0 ? 0 : 16,
          }}>
            {l}
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Hero });