"use client";

import { useEffect, useRef, useState } from "react";

declare global {
  interface Window {
    Vimeo?: {
      Player: new (element: HTMLIFrameElement) => {
        on: (event: string, callback: () => void) => void;
      };
    };
  }
}

export interface MazixmahalelVideoHeroProps {
  /** Vimeo video ID for the looping background. Default = 1157124649 (mazixmahalel.com production video). */
  vimeoId?: string;
  /** Fallback bg image shown until the video loads. Defaults to mazix gold backdrop. */
  fallbackImageSrc?: string;
  eyebrow?: string;
  headlinePart1?: string;
  highlightedText?: string;
  italicTagline?: string;
  taglineLines?: string[];
  primaryCta?: { label: string; onClick?: () => void; href?: string };
  scrollLabel?: string;
  scrollHref?: string;
  /** Default = mazixmahalel gold #c9a962 */
  goldColor?: string;
  /** Default = mazixmahalel gold-light #e2c992 (gradient mid) */
  goldLightColor?: string;
}

export default function MazixmahalelVideoHero({
  vimeoId = "1157124649",
  fallbackImageSrc = "/heroes/mazixmahalel/fallback.webp",
  eyebrow = "For Those Who Know There's More",
  headlinePart1 = "THE FREQUENCY",
  highlightedText = "ARCHITECT",
  italicTagline = "I don't teach. I transmit. You remember.",
  taglineLines = [
    "Your body is the instrument.",
    "Frequency is the music.",
  ],
  primaryCta = { label: "Begin the Conversation", href: "#contact" },
  scrollLabel = "Scroll",
  scrollHref = "#philosophy",
  goldColor = "#c9a962",
  goldLightColor = "#e2c992",
}: MazixmahalelVideoHeroProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const [loaded, setLoaded] = useState(false);

  // Fade the video container in once Vimeo signals "play". Until then,
  // the fallback image is visible. This prevents the awkward "iframe
  // black flash" before the video starts streaming.
  useEffect(() => {
    if (!containerRef.current) return;
    const iframe = containerRef.current.querySelector("iframe") as HTMLIFrameElement | null;
    if (!iframe) return;

    let cancelled = false;
    const playerScript = document.createElement("script");
    playerScript.src = "https://player.vimeo.com/api/player.js";
    playerScript.async = true;
    playerScript.onload = () => {
      if (cancelled || !window.Vimeo) return;
      try {
        const player = new window.Vimeo.Player(iframe);
        player.on("play", () => setLoaded(true));
      } catch {
        // If the Vimeo SDK fails (network, blocker), just reveal after a delay.
        setTimeout(() => setLoaded(true), 2000);
      }
    };
    playerScript.onerror = () => setTimeout(() => setLoaded(true), 2000);
    document.head.appendChild(playerScript);
    return () => {
      cancelled = true;
    };
  }, []);

  return (
    <>
      <link rel="preconnect" href="https://fonts.googleapis.com" />
      <link
        rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;1,400&family=Raleway:wght@400;600;700&display=swap"
      />
      <style>{`
        @keyframes mazix-fade-up {
          from { opacity: 0; transform: translateY(20px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .mazix-fade-up { animation: mazix-fade-up 1s ease-out forwards; opacity: 0; }
      `}</style>

      <section
        className="relative flex min-h-screen items-center justify-center overflow-hidden text-white"
        style={{ background: "#0a0a0a" }}
      >
        {/* Fallback bg image — visible until Vimeo player signals play */}
        <div
          aria-hidden
          className="absolute inset-0 z-0"
          style={{
            background: `url('${fallbackImageSrc}') center center / cover no-repeat`,
          }}
        />

        {/* Vimeo video background */}
        <div
          ref={containerRef}
          aria-hidden
          className="absolute inset-0 overflow-hidden"
          style={{
            zIndex: 0,
            opacity: loaded ? 0.6 : 0,
            transition: "opacity 1.5s ease-in-out",
          }}
        >
          <iframe
            src={`https://player.vimeo.com/video/${vimeoId}?background=1&autoplay=1&loop=1&muted=1&badge=0&autopause=0`}
            frameBorder={0}
            allow="autoplay; fullscreen; picture-in-picture"
            referrerPolicy="strict-origin-when-cross-origin"
            title="Background video"
            style={{
              position: "absolute",
              top: "50%",
              left: "50%",
              width: "100vw",
              height: "100vh",
              minWidth: "177.77vh",
              minHeight: "56.25vw",
              transform: "translate(-50%, -50%)",
              pointerEvents: "none",
            }}
          />
        </div>

        {/* Dark overlay */}
        <div
          aria-hidden
          className="absolute inset-0"
          style={{
            background: "linear-gradient(180deg, rgba(10,10,10,0.4) 0%, rgba(10,10,10,0.8) 100%)",
            zIndex: 1,
          }}
        />

        {/* Content */}
        <div
          className="relative z-10 mx-auto max-w-5xl px-8 pt-32 text-center"
          style={{ fontFamily: "'Raleway', sans-serif" }}
        >
          <p
            className="mazix-fade-up mb-8 text-xs uppercase"
            style={{
              color: goldColor,
              letterSpacing: "0.4em",
            }}
          >
            {eyebrow}
          </p>

          <h1
            className="mazix-fade-up mb-8 tracking-wide"
            style={{
              fontFamily: "'Cinzel', serif",
              fontSize: "clamp(2.75rem, 8vw, 6rem)",
              animationDelay: "0.2s",
            }}
          >
            {headlinePart1}
            <br />
            <span
              style={{
                background: `linear-gradient(135deg, ${goldColor} 0%, ${goldLightColor} 50%, ${goldColor} 100%)`,
                WebkitBackgroundClip: "text",
                WebkitTextFillColor: "transparent",
                backgroundClip: "text",
              }}
            >
              {highlightedText}
            </span>
          </h1>

          <div
            className="mazix-fade-up mx-auto mb-8"
            style={{
              width: "8rem",
              height: 1,
              background: `linear-gradient(90deg, transparent, ${goldColor}, transparent)`,
              animationDelay: "0.4s",
            }}
          />

          <p
            className="mazix-fade-up mx-auto max-w-2xl leading-relaxed"
            style={{
              fontFamily: "'Cormorant Garamond', serif",
              fontSize: "clamp(1.25rem, 2.4vw, 2rem)",
              color: "rgba(255,255,255,0.85)",
              animationDelay: "0.6s",
            }}
          >
            {taglineLines.map((line, i) => (
              <span key={i}>
                {line}
                <br />
              </span>
            ))}
            <em style={{ color: goldColor }}>{italicTagline}</em>
          </p>

          {primaryCta.href ? (
            <a
              href={primaryCta.href}
              className="mazix-fade-up mt-12 inline-block px-12 py-5 text-xs font-semibold uppercase transition-all"
              style={{
                border: `1px solid ${goldColor}`,
                color: goldColor,
                letterSpacing: "0.3em",
                animationDelay: "0.8s",
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.background = goldColor;
                e.currentTarget.style.color = "#000";
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.background = "transparent";
                e.currentTarget.style.color = goldColor;
              }}
            >
              {primaryCta.label}
            </a>
          ) : (
            <button
              type="button"
              onClick={primaryCta.onClick}
              className="mazix-fade-up mt-12 cursor-pointer px-12 py-5 text-xs font-semibold uppercase transition-all"
              style={{
                background: "transparent",
                border: `1px solid ${goldColor}`,
                color: goldColor,
                letterSpacing: "0.3em",
                animationDelay: "0.8s",
              }}
            >
              {primaryCta.label}
            </button>
          )}

          <a
            href={scrollHref}
            className="mazix-fade-up mt-16 flex flex-col items-center gap-3 transition-colors"
            style={{ animationDelay: "1s", color: "rgba(255,255,255,0.85)" }}
          >
            <span
              className="text-xs uppercase"
              style={{ letterSpacing: "0.2em" }}
            >
              {scrollLabel}
            </span>
            <span
              aria-hidden
              className="block"
              style={{
                width: 1,
                height: "3rem",
                background: `linear-gradient(to bottom, ${goldColor}, transparent)`,
              }}
            />
          </a>
        </div>
      </section>
    </>
  );
}