// home.jsx — the showpiece

const { useState: useStateH, useEffect: useEffectH, useRef: useRefH } = React;

function Home({ setRoute, tweaks }) {
  const [lightbox, setLightbox] = useStateH(false);

  return (
    <main style={{ paddingTop: 88 }}>
      <Hero tweaks={tweaks} setRoute={setRoute} />

      <BrandMarquee />

      <ShowreelSection onPlay={() => setLightbox(true)} />

      <SelectedWork setRoute={setRoute} onPlay={() => setLightbox(true)} />

      <ProcessStrip />

      <Reviews />

      <PricingSnapshot setRoute={setRoute} />

      <Closer setRoute={setRoute} />

      {lightbox && <Lightbox src={VM_SHOWREEL.full} onClose={() => setLightbox(false)} />}
    </main>);

}

/* ─── HERO ─────────────────────────────────────────────────────────── */

function Hero({ tweaks, setRoute }) {
  const prismRef = useRefH(null);
  const heroRef = useRefH(null);
  const [mouse, setMouse] = useStateH({ x: 0, y: 0 });
  const [clock, setClock] = useStateH("");
  const mobile = useMobile();

  // gentle parallax on prism following cursor
  useEffectH(() => {
    const onMove = (e) => {
      const r = heroRef.current?.getBoundingClientRect();
      if (!r) return;
      const x = (e.clientX - r.left - r.width / 2) / (r.width / 2);
      const y = (e.clientY - r.top - r.height / 2) / (r.height / 2);
      setMouse({ x: Math.max(-1, Math.min(1, x)), y: Math.max(-1, Math.min(1, y)) });
    };
    window.addEventListener("mousemove", onMove);
    return () => window.removeEventListener("mousemove", onMove);
  }, []);

  useEffectH(() => {
    const tick = () => {
      const d = new Date();
      const hh = String(d.getUTCHours()).padStart(2, "0");
      const mm = String(d.getUTCMinutes()).padStart(2, "0");
      const ss = String(d.getUTCSeconds()).padStart(2, "0");
      setClock(`${hh}:${mm}:${ss}`);
    };
    tick();const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []);

  const animStyle = tweaks?.heroAnim || "dispersion";

  return (
    <section ref={heroRef} style={{
      position: "relative",
      minHeight: mobile ? "auto" : "min(100vh, 920px)",
      padding: mobile ? "32px 0 48px" : "60px 0 80px",
      overflow: "hidden"
    }}>
      <div className="wrap-wide">

        {/* top status row */}
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "center",
          marginBottom: 56, flexWrap: "wrap", gap: 16
        }}>
          <div style={{ display: "flex", gap: 10 }}>
            <span className="chip"><span className="chip-dot" style={{ backgroundColor: "rgb(50, 255, 240)" }} /> AVAILABLE</span>
          </div>
          <div className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", color: "var(--ink-3)" }}>
            STUDIO TIME — {clock} UTC
          </div>
        </div>

        {/* MAIN — big type with prism nested inline-flow */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "1fr",
          gap: 32,
          position: "relative"
        }}>
          {/* prism floating large — desktop only */}
          {!mobile && (
            <div className="prism-hero-wrap" style={{
              position: "absolute",
              right: "-2%",
              top: "-2%",
              width: "min(620px, 46vw)",
              transform: `translate3d(0, ${mouse.y * -10}px, 0)`,
              transition: "transform 900ms cubic-bezier(.2,.7,.2,1), filter 500ms ease",
              pointerEvents: "auto",
              cursor: "crosshair",
              filter: "drop-shadow(0 60px 100px rgba(138,77,255,0.35)) drop-shadow(0 0 60px rgba(0,212,255,0.25))",
              zIndex: 0
            }}>
              <PrismHero animation={animStyle} />
            </div>
          )}

          <h1 style={{ position: "relative", zIndex: 1, maxWidth: mobile ? "100%" : "85%" }}>
            <span style={{ display: "block", color: "var(--ink)" }}>
              Logo
            </span>
            <span style={{ display: "block" }}>
              <span className="serif spectrum" style={{ letterSpacing: "-0.04em" }}>
                animations
              </span>
            </span>
            <span style={{ display: "block", color: "var(--ink)" }}>
              crafted with
              <span className="serif" style={{
                fontStyle: "italic", color: "var(--ink-2)",
                marginLeft: 24
              }}>care

              </span>
            </span>
          </h1>

          {/* sub & CTA */}
          <div style={{
            display: "grid",
            gridTemplateColumns: mobile ? "1fr" : "1.5fr 1fr",
            gap: mobile ? 24 : 48,
            marginTop: mobile ? 24 : 48,
            alignItems: "flex-end",
            position: "relative",
            zIndex: 1
          }}>
            <p style={{
              fontSize: mobile ? 17 : 22, lineHeight: 1.45,
              color: "var(--ink-2)",
              maxWidth: 580,
              margin: 0,
              fontWeight: 400,
              textWrap: "pretty"
            }}>
              A one-person motion studio. I take your static logo and animate it
              in After Effects — bespoke, never templated — and deliver in two to five days.
            </p>

            <div style={{ display: "flex", flexDirection: "column", gap: 12, alignItems: mobile ? "stretch" : "flex-end" }}>
              <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
                <button onClick={() => setRoute("order")} className="btn btn-primary" style={{ flex: mobile ? 1 : "none", justifyContent: "center" }}>
                  Start a project <span className="arr">→</span>
                </button>
                <button onClick={() => setRoute("work")} className="btn btn-ghost" style={{ flex: mobile ? 1 : "none", justifyContent: "center" }}>
                  See the reel
                </button>
              </div>
              <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.18em", textAlign: mobile ? "center" : "right" }}>FROM $150 · NO TEMPLATES · 3-DAY MONEY-BACK
              </div>
            </div>
          </div>
        </div>

        {/* technical readout strip at base */}
        <div style={{
          marginTop: mobile ? 40 : 96,
          display: "grid",
          gridTemplateColumns: mobile ? "repeat(2, 1fr)" : "repeat(4, 1fr)",
          gap: 0,
          borderTop: "1px solid var(--line)",
          borderBottom: "1px solid var(--line)"
        }}>
          {[
          { k: "AVG DELIVERY", v: "3 days" },
          { k: "LOGOS ANIMATED", v: "147" },
          { k: "REPEAT RATE", v: "62%" },
          { k: "RATING", v: "4.98 / 5" }].
          map((it, i) =>
          <div key={i} style={{
            padding: mobile ? "16px 14px" : "22px 24px",
            borderLeft: (mobile ? i % 2 !== 0 : i > 0) ? "1px solid var(--line)" : "none",
            borderTop: mobile && i >= 2 ? "1px solid var(--line)" : "none",
            display: "flex", flexDirection: "column", gap: 6
          }}>
              <div className="eyebrow">{it.k}</div>
              <div style={{
              fontFamily: "var(--font-display)",
              fontSize: 32, fontWeight: 500, letterSpacing: "-0.025em"
            }}>
                {it.v}
              </div>
            </div>
          )}
        </div>

      </div>
    </section>);

}

/* ─── prism hero with multiple animation modes ─────────────────────── */

function PrismHero({ animation }) {
  const style = (() => {
    switch (animation) {
      case "spin":return { animation: "prismSpin 14s linear infinite" };
      case "tilt":return { animation: "prismTilt 6s ease-in-out infinite" };
      case "pulse":return { animation: "prismPulse 3.6s ease-in-out infinite" };
      case "dispersion":
      default:return { animation: "prismFloat 7s ease-in-out infinite" };
    }
  })();

  return (
    <>
      <style>{`
        @keyframes prismFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }
        @keyframes prismSpin  { to { transform: rotate(360deg); } }
        @keyframes prismPulse { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-18px) scale(1.04); } }

        .prism-hero-wrap { will-change: transform, filter; }
        .prism-hero-wrap:hover {
          filter:
            drop-shadow(0 70px 110px rgba(138,77,255,0.55))
            drop-shadow(0 0 90px rgba(0,212,255,0.55))
            drop-shadow(0 0 140px rgba(255,90,200,0.35)) !important;
        }
        .prism-hero-wrap .prism-core { transition: transform 600ms cubic-bezier(.2,.7,.2,1), filter 600ms ease; }
        .prism-hero-wrap:hover .prism-core {
          transform: scale(1.06);
          filter: saturate(1.25) brightness(1.08) contrast(1.05);
        }
        .prism-hero-wrap .prism-ghost { transition: transform 700ms cubic-bezier(.2,.7,.2,1), opacity 600ms ease, filter 600ms ease; }
        .prism-hero-wrap:hover .prism-ghost-a { transform: translate(-4.5%, 1.8%) !important; opacity: 0.85 !important; }
        .prism-hero-wrap:hover .prism-ghost-b { transform: translate(4.5%, -1.8%) !important; opacity: 0.85 !important; }

        .prism-hero-wrap .prism-aura {
          position: absolute; inset: -8%;
          border-radius: 50%;
          background: radial-gradient(closest-side, rgba(138,77,255,0.35), rgba(0,212,255,0.18) 45%, transparent 70%);
          opacity: 0; transform: scale(0.85);
          transition: opacity 600ms ease, transform 700ms cubic-bezier(.2,.7,.2,1);
          pointer-events: none; mix-blend-mode: screen; z-index: -1;
        }
        .prism-hero-wrap:hover .prism-aura { opacity: 1; transform: scale(1.05); }
      `}</style>
      <div style={{ position: "relative", width: "100%" }}>
        <div className="prism-aura" />

        <img src="assets/prism.png" alt="prism"
        className="prism-core"
        style={{
          width: "100%", height: "auto",
          display: "block",
          ...style, opacity: "1"
        }} />
        
      </div>
    </>);

}

/* ─── BRAND MARQUEE ────────────────────────────────────────────────── */

function BrandMarquee() {
  const brands = ["Embark", "Ganymede", "Helvetik", "On Path", "GOkaido", "Grippi", "Northstack", "Nimbus"];
  return (
    <section style={{ padding: "32px 0 24px", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <Marquee items={brands} />
    </section>);

}

/* ─── SHOWREEL ─────────────────────────────────────────────────────── */

function ShowreelSection({ onPlay }) {
  return (
    <section style={{ padding: "var(--d-section) 0 var(--d-block)" }}>
      <div className="wrap-wide">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 40, gap: 32, flexWrap: "wrap" }}>
          <Reveal>
            <div className="eyebrow" style={{ marginBottom: 18 }}>—  001 / Reel</div>
            <h2 style={{ maxWidth: 820 }}>
              <span className="serif">Two minutes of </span>
              motion <br />
              <span className="serif">that has paid for itself.</span>
            </h2>
          </Reveal>
          <Reveal delay={120} style={{ maxWidth: 380 }}>
            <p style={{ color: "var(--ink-2)", fontSize: 17, lineHeight: 1.5, margin: 0 }}>
              A rolling cut of the last 24 logos. Watch with sound — the SFX is half the magic.
            </p>
          </Reveal>
        </div>
        <Reveal y={48}>
          <ShowreelCard onPlay={onPlay} />
        </Reveal>
      </div>
    </section>);

}

/* ─── SELECTED WORK ────────────────────────────────────────────────── */

function SelectedWork({ setRoute }) {
  const mobile = useMobile();
  const items = VM_PORTFOLIO.slice(0, 4);
  return (
    <section style={{ padding: "var(--d-block) 0 var(--d-block)" }}>
      <div className="wrap-wide">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 40, gap: 32, flexWrap: "wrap" }}>
          <Reveal>
            <div className="eyebrow" style={{ marginBottom: 18 }}>—  002 / Work</div>
            <h2><span className="serif">Recent</span> work.</h2>
          </Reveal>
          <Reveal delay={120}>
            <button onClick={() => setRoute("work")} className="btn btn-ghost">
              View all projects <span className="arr">→</span>
            </button>
          </Reveal>
        </div>

        {mobile ? (
          <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 16 }}>
            <Reveal><VideoTile item={items[0]} aspect="16/9" big /></Reveal>
            <Reveal delay={80}><VideoTile item={items[1]} aspect="16/9" /></Reveal>
            <Reveal delay={160}><VideoTile item={items[2]} aspect="16/9" /></Reveal>
          </div>
        ) : (
          <>
            <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 24 }}>
              <Reveal><VideoTile item={items[0]} aspect="16/11" big /></Reveal>
              <div style={{ display: "grid", gridTemplateRows: "1fr 1fr", gap: 24 }}>
                <Reveal delay={80}><VideoTile item={items[1]} aspect="16/9" /></Reveal>
                <Reveal delay={160}><VideoTile item={items[2]} aspect="16/9" /></Reveal>
              </div>
            </div>
            <div style={{ marginTop: 24 }}>
              <Reveal delay={120}><VideoTile item={items[3]} aspect="21/8" /></Reveal>
            </div>
          </>
        )}
      </div>
    </section>);

}

/* ─── PROCESS STRIP ────────────────────────────────────────────────── */

function ProcessStrip() {
  const mobile = useMobile();
  const steps = [
  { n: "01", t: "Brief", d: "You drop your logo + a paragraph on the vibe.", meta: "5 min" },
  { n: "02", t: "Direction", d: "I send back a moodboard and a rough timing plan.", meta: "next day" },
  { n: "03", t: "Animate", d: "I build it from scratch in After Effects, no templates.", meta: "2–4 days" },
  { n: "04", t: "Deliver", d: "MP4, MOV, transparent, looped. Yours forever.", meta: "+ 1 revision" }];

  return (
    <section style={{ padding: "var(--d-block) 0" }}>
      <div className="wrap-wide">
        <Reveal>
          <div className="eyebrow" style={{ marginBottom: 18 }}>—  003 / How it works</div>
          <h2 style={{ marginBottom: 56 }}>
            <span className="serif">Four steps. </span>No agency overhead.
          </h2>
        </Reveal>
        <div style={{
          display: "grid",
          gridTemplateColumns: mobile ? "repeat(2, 1fr)" : "repeat(4, 1fr)",
          gap: 1,
          background: "var(--line)",
          border: "1px solid var(--line)",
          borderRadius: "var(--radius)",
          overflow: "hidden"
        }}>
          {steps.map((s, i) =>
          <Reveal key={i} delay={i * 80} style={{
            background: "var(--void-2)",
            padding: "36px 28px 32px",
            display: "flex", flexDirection: "column", gap: 16,
            minHeight: 260,
            position: "relative"
          }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <span className="mono" style={{
                fontSize: 11, letterSpacing: "0.18em",
                color: i === 0 ? "var(--p-cyan)" : "var(--ink-3)"
              }}>
                  {s.n}
                </span>
                <span className="mono" style={{ fontSize: 10, color: "var(--ink-4)", letterSpacing: "0.18em" }}>
                  {s.meta.toUpperCase()}
                </span>
              </div>
              <div style={{
              fontFamily: "var(--font-display)", fontSize: 30, fontWeight: 500,
              letterSpacing: "-0.025em"
            }}>
                {s.t}
              </div>
              <div style={{ color: "var(--ink-2)", fontSize: 15, lineHeight: 1.45 }}>
                {s.d}
              </div>
              <div style={{ flex: 1 }} />
              {/* mini diagram */}
              <ProcessGlyph kind={s.n} />
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

function ProcessGlyph({ kind }) {
  const c = "rgba(255,255,255,0.45)";
  if (kind === "01") return (
    <svg width="56" height="34" viewBox="0 0 56 34" fill="none">
      <rect x="0.5" y="0.5" width="36" height="24" rx="3" stroke={c} />
      <path d="M5 6h26M5 12h20M5 18h14" stroke={c} strokeLinecap="round" />
      <circle cx="48" cy="22" r="6" stroke="var(--p-cyan)" />
    </svg>);

  if (kind === "02") return (
    <svg width="56" height="34" viewBox="0 0 56 34" fill="none">
      <rect x="0.5" y="2.5" width="14" height="20" rx="2" stroke={c} />
      <rect x="20" y="6" width="14" height="20" rx="2" stroke={c} />
      <rect x="40" y="0" width="14" height="20" rx="2" stroke="var(--p-magenta)" />
    </svg>);

  if (kind === "03") return (
    <svg width="80" height="20" viewBox="0 0 80 20" fill="none">
      <path d="M0 10 Q10 0 20 10 T40 10 T60 10 T80 10" stroke="var(--p-amber)" strokeWidth="1.2" fill="none" />
      <circle cx="0" cy="10" r="2" fill={c} />
      <circle cx="80" cy="10" r="2" fill={c} />
    </svg>);

  return (
    <svg width="56" height="28" viewBox="0 0 56 28" fill="none">
      <path d="M0 14h44M38 6l10 8-10 8" stroke="var(--p-cyan)" strokeLinecap="round" strokeLinejoin="round" />
      <circle cx="2" cy="14" r="2" fill={c} />
    </svg>);

}

/* ─── REVIEWS ──────────────────────────────────────────────────────── */

function Reviews() {
  const mobile = useMobile();
  return (
    <section style={{ padding: "var(--d-block) 0" }}>
      <div className="wrap-wide">
        <Reveal>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 56, gap: 32, flexWrap: "wrap" }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 18 }}>—  004 / What clients say</div>
              <h2 style={{ maxWidth: 740 }}>
                <span className="serif">4.98 </span>
                <span className="serif" style={{ color: "var(--ink-3)" }}>/ 5</span> · across <span className="serif">147</span> commissions.
              </h2>
            </div>
            <div style={{ display: "flex", gap: 4, alignItems: "center" }}>
              {[1, 2, 3, 4, 5].map((i) =>
              <svg key={i} width="22" height="22" viewBox="0 0 24 24" fill="var(--p-amber)">
                  <path d="M12 2l2.6 6.3 6.8.6-5.2 4.5 1.6 6.6L12 16.8 6.2 20l1.6-6.6L2.6 8.9l6.8-.6L12 2z" />
                </svg>
              )}
            </div>
          </div>
        </Reveal>

        <div style={{
          display: "grid",
          gridTemplateColumns: mobile ? "1fr" : "repeat(2, 1fr)",
          gap: mobile ? 12 : 24
        }}>
          {VM_REVIEWS.map((r, i) =>
          <Reveal key={r.id} delay={i * 80}>
              <ReviewCard r={r} />
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

function ReviewCard({ r }) {
  return (
    <div className="glass" style={{
      padding: "36px 32px",
      display: "flex", flexDirection: "column", gap: 20,
      minHeight: 220
    }}>
      <div style={{ display: "flex", gap: 4 }}>
        {[1, 2, 3, 4, 5].map((i) =>
        <svg key={i} width="14" height="14" viewBox="0 0 24 24" fill="var(--p-amber)">
            <path d="M12 2l2.6 6.3 6.8.6-5.2 4.5 1.6 6.6L12 16.8 6.2 20l1.6-6.6L2.6 8.9l6.8-.6L12 2z" />
          </svg>
        )}
      </div>
      <p style={{
        fontFamily: "var(--font-display)", fontSize: 26, fontWeight: 400,
        letterSpacing: "-0.02em", lineHeight: 1.25,
        margin: 0, textWrap: "pretty"
      }}>
        <span className="serif" style={{ color: "var(--ink-3)" }}>“</span>
        {r.text}
        <span className="serif" style={{ color: "var(--ink-3)" }}>”</span>
      </p>
      <div style={{ flex: 1 }} />
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div>
          <div style={{ fontWeight: 600, fontSize: 14 }}>{r.name}</div>
          <div style={{ color: "var(--ink-3)", fontSize: 13 }}>{r.role}</div>
        </div>
        <div className="mono" style={{ fontSize: 11, letterSpacing: "0.16em", color: "var(--ink-3)" }}>
          DELIVERED IN {r.delivery.toUpperCase()}
        </div>
      </div>
    </div>);

}

/* ─── PRICING SNAPSHOT ─────────────────────────────────────────────── */

function PricingSnapshot({ setRoute }) {
  const mobile = useMobile();
  return (
    <section style={{ padding: "var(--d-block) 0" }}>
      <div className="wrap-wide">
        <Reveal>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 56, gap: 32, flexWrap: "wrap" }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 18 }}>—  005 / Pricing</div>
              <h2 style={{ maxWidth: 720 }}>
                Three packages. <span className="serif">One promise:</span>
                <br /> animated by hand.
              </h2>
            </div>
            <p style={{ color: "var(--ink-2)", maxWidth: 360, margin: 0, fontSize: 17, lineHeight: 1.5 }}>Pay once, get the files, keep them forever.

            </p>
          </div>
        </Reveal>
        <div style={{
          display: "grid", gridTemplateColumns: mobile ? "1fr" : "repeat(3, 1fr)", gap: mobile ? 12 : 16
        }}>
          {VM_PACKAGES.map((p, i) =>
          <Reveal key={p.id} delay={i * 80}>
              <PackageCard p={p} onClick={() => setRoute("order")} />
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

function PackageCard({ p, onClick }) {
  const [hover, setHover] = useStateH(false);
  return (
    <div
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      onClick={onClick}
      className="glass"
      style={{
        padding: "32px 28px 28px",
        cursor: "pointer",
        transition: "transform 240ms cubic-bezier(.2,.7,.2,1), border-color 240ms",
        transform: hover ? "translateY(-4px)" : "translateY(0)",
        borderColor: p.popular ? "var(--line-2)" : hover ? "var(--line-2)" : "var(--line)",
        background: p.popular ? "linear-gradient(180deg, rgba(138,77,255,0.06), rgba(255,255,255,0.02))" : "var(--glass)",
        minHeight: 480,
        display: "flex", flexDirection: "column",
        position: "relative",
        overflow: "hidden"
      }}>
      
      {p.popular &&
      <div style={{
        position: "absolute", top: -1, right: -1,
        padding: "6px 12px",
        fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.18em",
        background: "linear-gradient(135deg, var(--p-cyan), var(--p-violet))",
        color: "white",
        borderBottomLeftRadius: 8
      }}>
          MOST PICKED
        </div>
      }

      <div style={{
        display: "flex", justifyContent: "space-between", alignItems: "baseline",
        marginBottom: 24
      }}>
        <div style={{
          fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 500,
          letterSpacing: "-0.025em"
        }}>
          {p.name}
        </div>
        <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.16em" }}>
          {p.delivery.toUpperCase()}
        </div>
      </div>

      <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginBottom: 28 }}>
        <span style={{
          fontFamily: "var(--font-display)", fontSize: 72, fontWeight: 500,
          letterSpacing: "-0.04em", lineHeight: 0.9
        }}>
          ${p.price}
        </span>
        <span style={{ color: "var(--ink-3)", fontSize: 14 }}>
          once
        </span>
      </div>

      <div className="divider" style={{ marginBottom: 20 }} />

      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 }}>
        {p.includes.map((it, i) =>
        <li key={i} style={{ display: "flex", gap: 10, fontSize: 14, color: "var(--ink-2)" }}>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" style={{ flexShrink: 0, marginTop: 4 }}>
              <path d="M3 7l3 3 5-6" stroke="var(--p-cyan)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
            {it}
          </li>
        )}
      </ul>

      <div style={{ flex: 1 }} />

      <button className={p.popular ? "btn btn-primary" : "btn btn-ghost"} style={{ width: "100%", justifyContent: "center", marginTop: 24 }}>
        Pick {p.name} <span className="arr">→</span>
      </button>

      <div className="mono" style={{
        marginTop: 14, fontSize: 11, color: "var(--ink-4)",
        textAlign: "center", letterSpacing: "0.12em"
      }}>
        {p.revisions} REVISION{p.revisions > 1 ? "S" : ""} · COMMERCIAL RIGHTS
      </div>
    </div>);

}

/* ─── CLOSER ───────────────────────────────────────────────────────── */

function Closer({ setRoute }) {
  const mobile = useMobile();
  return (
    <section style={{ padding: "var(--d-section) 0 var(--d-block)" }}>
      <div className="wrap-wide">
        <Reveal>
          <div className="glass glass-hi" style={{
            position: "relative",
            padding: mobile ? "48px 24px" : "100px 80px",
            borderRadius: "var(--radius-lg)",
            overflow: "hidden",
            textAlign: "center",
            isolation: "isolate"
          }}>
            {/* prism background bloom */}
            <div style={{
              position: "absolute", top: "-20%", left: "50%",
              transform: "translateX(-50%)",
              width: "60%", opacity: 0.5,
              filter: "blur(2px)",
              pointerEvents: "none",
              zIndex: -1
            }}>
              <img src="assets/prism.png" alt="" style={{ width: "100%" }} />
            </div>
            <div style={{
              position: "absolute", inset: 0,
              background: "radial-gradient(60% 60% at 50% 0%, rgba(138,77,255,0.35), transparent 70%)",
              zIndex: -1
            }} />

            <div className="eyebrow" style={{ marginBottom: 20, color: "rgb(233, 233, 233)" }}>—  ready when you are</div>
            <h2 style={{ marginBottom: 24, maxWidth: 900, marginInline: "auto", lineHeight: 0.92 }}>
              Your logo
              <span className="serif"> deserves a </span>
              second life.
            </h2>
            <p style={{
              color: "var(--ink-2)", fontSize: 19, lineHeight: 1.45,
              maxWidth: 580, margin: "0 auto 36px"
            }}>
              Drop your file in, pay once, get a hand-animated MP4 in your inbox.
            </p>
            <div style={{ display: "flex", gap: 10, justifyContent: "center", flexWrap: "wrap" }}>
              <button onClick={() => setRoute("order")} className="btn btn-primary" style={{ fontSize: mobile ? 15 : 16, padding: mobile ? "14px 22px" : "16px 26px" }}>
                Start a project <span className="arr">→</span>
              </button>
              <button onClick={() => setRoute("work")} className="btn btn-ghost" style={{ fontSize: mobile ? 15 : 16, padding: mobile ? "14px 22px" : "16px 26px" }}>
                Browse the work
              </button>
            </div>
          </div>
        </Reveal>
      </div>
    </section>);

}

Object.assign(window, { Home });