// Contact / Footer — flipped HLS background, GSAP marquee, big email CTA, footer bar
const { useEffect: useEffectC, useRef: useRefC, useState: useStateC } = React;

function Contact() {
  const videoRef = useRefC(null);
  const marqueeRef = useRefC(null);
  const [videoReady, setVideoReady] = useStateC(false);

  useEffectC(() => {
    const v = videoRef.current;
    if (!v) return;
    const src = "https://stream.mux.com/Aa02T7oM1wH5Mk5EEVDYhbZ1ChcdhRsS2m1NYyx4Ua1g.m3u8";
    let hls;
    if (window.Hls && window.Hls.isSupported()) {
      hls = new window.Hls({ lowLatencyMode: true });
      hls.loadSource(src);
      hls.attachMedia(v);
      hls.on(window.Hls.Events.MANIFEST_PARSED, () => {
        v.play().catch(() => {});
        setVideoReady(true);
      });
    } else if (v.canPlayType("application/vnd.apple.mpegurl")) {
      v.src = src;
      v.addEventListener("loadedmetadata", () => {
        v.play().catch(() => {});
        setVideoReady(true);
      });
    }
    return () => { if (hls) hls.destroy(); };
  }, []);

  useEffectC(() => {
    if (!window.gsap || !marqueeRef.current) return;
    const tween = window.gsap.to(marqueeRef.current, {
      xPercent: -50,
      duration: 40,
      ease: "none",
      repeat: -1,
    });
    return () => tween.kill();
  }, []);

  const word = "DIGITAL EXPERIENCES";
  const items = Array.from({ length: 20 });

  return (
    <section id="contact" className="relative bg-bg pt-16 md:pt-20 pb-8 md:pb-12 overflow-hidden">
      {/* Background video (flipped) */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <video
          ref={videoRef}
          autoPlay
          muted
          loop
          playsInline
          className="absolute top-1/2 left-1/2 min-w-full min-h-full object-cover -translate-x-1/2 -translate-y-1/2"
          style={{ transform: "translate(-50%, -50%) scaleY(-1)", opacity: videoReady ? 1 : 0, transition: "opacity 0.8s ease" }}
        ></video>
        <div
          className="absolute inset-0"
          style={{
            background:
              "radial-gradient(ellipse at 50% 60%, rgba(78, 133, 191, 0.18), transparent 70%), #050505",
            opacity: videoReady ? 0 : 1,
            transition: "opacity 0.8s ease",
          }}
        ></div>
        <div className="absolute inset-0 bg-black/60"></div>
        <div className="absolute top-0 left-0 right-0 h-32 bg-gradient-to-b from-bg to-transparent"></div>
        <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-bg to-transparent"></div>
      </div>

      <div className="relative z-10">
        {/* Marquee */}
        <div className="overflow-hidden mb-12 md:mb-20 py-4 border-y border-stroke/40">
          <div ref={marqueeRef} className="flex whitespace-nowrap gap-8 will-change-transform">
            {items.map((_, i) => (
              <span
                key={i}
                className="text-3xl md:text-5xl lg:text-6xl font-display italic text-text-primary/90 inline-flex items-center gap-8"
              >
                {word}
                <span className="text-[#89AACC]">●</span>
              </span>
            ))}
          </div>
        </div>

        {/* Big CTA */}
        <div className="max-w-[1200px] mx-auto px-6 md:px-10 lg:px-16 text-center">
          <div className="text-xs text-muted uppercase tracking-[0.3em] mb-6">Let&apos;s build your next project</div>
          <h2 className="text-5xl md:text-7xl lg:text-8xl font-display italic text-text-primary leading-[0.95] tracking-tight mb-10">
            Need a creative technology<br />partner?
          </h2>
          <a
            href="mailto:hello@youragency.com"
            className="group relative inline-flex rounded-full"
          >
            <span className="absolute inset-[-2px] rounded-full opacity-0 group-hover:opacity-100 transition-opacity accent-gradient-anim"></span>
            <span className="relative inline-flex items-center rounded-full text-sm md:text-base px-7 py-4 bg-text-primary text-bg group-hover:bg-bg group-hover:text-text-primary transition-colors gap-2">
              Request a strategy call
              <span className="opacity-70">↗</span>
            </span>
          </a>
        </div>

        {/* Footer bar */}
        <div className="mt-20 md:mt-28">
          <div className="max-w-[1200px] mx-auto px-6 md:px-10 lg:px-16">
            <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-6 pt-6 border-t border-stroke/60">
              <div className="flex items-center gap-2 text-xs text-muted">
                <span className="relative flex w-2 h-2">
                  <span className="absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-60 animate-ping"></span>
                  <span className="relative inline-flex rounded-full h-2 w-2 bg-green-400"></span>
                </span>
                Available for global digital projects
              </div>

              <div className="flex items-center gap-1">
                {[
                  { label: "LinkedIn", href: "#" },
                  { label: "Behance", href: "#" },
                  { label: "Instagram", href: "#" },
                  { label: "Vimeo", href: "#" },
                ].map((s) => (
                  <a
                    key={s.label}
                    href={s.href}
                    className="text-xs text-muted hover:text-text-primary px-3 py-1.5 rounded-full hover:bg-stroke/50 transition-colors"
                  >
                    {s.label}
                  </a>
                ))}
              </div>

              <div className="text-xs text-muted">
                © 2026 — Noema Agent. All rights reserved.
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Contact = Contact;