/* MANIFESTO — full-bleed looping video with a profound quote overlay, above footer */

const MANIFESTO_VIDEO = "assets/footer-loop.mp4";

function Manifesto() {
  const videoRef = React.useRef(null);

  React.useEffect(() => {
    const v = videoRef.current;
    if (!v) return;
    const tryPlay = () => {
      const p = v.play();
      if (p && p.catch) p.catch(() => {});
    };
    tryPlay();
    const onLoaded = () => tryPlay();
    v.addEventListener("loadeddata", onLoaded);
    v.addEventListener("canplay", onLoaded);
    return () => {
      v.removeEventListener("loadeddata", onLoaded);
      v.removeEventListener("canplay", onLoaded);
    };
  }, []);

  return (
    <section className="bg-black px-4 md:px-6 pt-6 md:pt-10 pb-0">
      <div className="relative w-full rounded-2xl md:rounded-[2rem] overflow-hidden bg-black">
        {/* Aspect-ratio shell — cinematic widescreen on desktop, slightly taller on mobile */}
        <div className="relative w-full" style={{ aspectRatio: "21 / 9", minHeight: "min(88vh, 760px)" }}>
          {/* Video */}
          <video
            ref={videoRef}
            src={MANIFESTO_VIDEO}
            autoPlay
            loop
            muted
            playsInline
            preload="auto"
            className="absolute inset-0 w-full h-full object-cover pointer-events-none"
          />

          {/* Fallback */}
          <div
            className="absolute inset-0 pointer-events-none"
            style={{
              zIndex: -1,
              background:
                "radial-gradient(120% 80% at 50% 50%, #1a1814 0%, #0a0907 60%, #000 100%)",
            }}
          />

          {/* Noise + gradient overlays for text legibility */}
          <div className="absolute inset-0 noise-overlay opacity-[0.55] mix-blend-overlay pointer-events-none" />
          <div
            className="absolute inset-0 pointer-events-none"
            style={{
              background:
                "linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.1) 35%, rgba(0,0,0,0.15) 65%, rgba(0,0,0,0.75) 100%)",
            }}
          />

          {/* Corner meta — top left */}
          <div
            className="absolute top-5 left-6 md:top-7 md:left-10 z-10 text-[10px] sm:text-xs tracking-[0.25em] uppercase flex items-center gap-2"
            style={{ color: "rgba(225,224,204,0.7)" }}
          >
            <span className="inline-block w-1.5 h-1.5 rounded-full bg-primary animate-pulse" />
            <span>Manifesto / 001</span>
          </div>

          {/* Corner meta — top right */}
          <div
            className="absolute top-5 right-6 md:top-7 md:right-10 z-10 text-[10px] sm:text-xs tracking-[0.25em] uppercase"
            style={{ color: "rgba(225,224,204,0.55)" }}
          >
            <span>Total Visibility</span>
          </div>

          {/* Quote — centered */}
          <div className="absolute inset-0 z-10 flex flex-col items-center justify-center px-6 sm:px-10 md:px-16 text-center pointer-events-none">
            <div
              aria-hidden="true"
              className="font-serif-italic mb-6 md:mb-10 select-none"
              style={{
                color: "rgba(225,224,204,0.4)",
                fontSize: "clamp(56px, 8vw, 120px)",
                lineHeight: 1,
              }}
            >
              "
            </div>

            <blockquote
              className="max-w-5xl leading-[1.04] tracking-[-0.02em]"
              style={{
                color: "#E1E0CC",
                fontSize: "clamp(28px, 4.6vw, 76px)",
                fontWeight: 400,
              }}
            >
              <span>Attention is rented.</span>{" "}
              <span className="font-serif-italic" style={{ color: "rgba(225,224,204,0.75)" }}>
                Authority
              </span>{" "}
              <span>is owned.</span>
              <br />
              <span>We build the infrastructure that makes your name</span>{" "}
              <span className="font-serif-italic" style={{ color: "rgba(225,224,204,0.75)" }}>
                the answer
              </span>
              <span>—</span>
              <br />
              <span>across every search engine, human or machine.</span>
            </blockquote>

            <div
              className="mt-8 md:mt-12 flex items-center gap-3 text-[10px] sm:text-xs tracking-[0.25em] uppercase"
              style={{ color: "rgba(225,224,204,0.55)" }}
            >
              <span className="inline-block w-6 h-[1px] bg-primary/60" />
              <span>DATA DOGS — Studio doctrine</span>
              <span className="inline-block w-6 h-[1px] bg-primary/60" />
            </div>
          </div>

          {/* Bottom meta strip */}
          <div
            className="absolute bottom-5 left-6 right-6 md:bottom-7 md:left-10 md:right-10 z-10 flex items-end justify-between text-[10px] sm:text-xs tracking-[0.25em] uppercase"
            style={{ color: "rgba(225,224,204,0.5)" }}
          >
            <div className="flex items-center gap-2">
              <span>◉</span>
              <span>Live loop</span>
            </div>
            <div className="hidden sm:block font-mono tracking-wider">
              §01 · DOCTRINE
            </div>
            <div>
              <span>Read more ↗</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Manifesto });