/* Hero — matches Framer site: pink/orange gradient, large serif headline, video frame with avatars */

const Hero = () => {
  const [avatarIdx, setAvatarIdx] = React.useState(0);
  const ref = useReveal();

  return (
    <section id="hero" style={{
      paddingTop: 64, paddingBottom: 80,
      background: `
        radial-gradient(60% 45% at 12% 18%, rgba(193, 92, 196, 0.35) 0%, transparent 60%),
        radial-gradient(50% 45% at 88% 10%, rgba(236, 72, 153, 0.4) 0%, transparent 60%),
        radial-gradient(70% 60% at 50% -10%, rgba(248, 224, 240, 0.8) 0%, transparent 70%),
        #ffffff
      `,
      position: "relative",
      overflow: "hidden",
    }} ref={ref}>
      <div className="container" style={{ position: "relative", textAlign: "center" }}>
        <div className="reveal" style={{ marginBottom: 22 }}>
          <span className="pill" style={{ fontSize: 12 }}>
            <span className="dot" />
            {t("hero.eyebrow")}
          </span>
        </div>

        <h1 className="display reveal" style={{ margin: "0 auto 20px", maxWidth: 900 }}>
          {t("hero.headline")} <em>{t("hero.headlineAccent")}</em>
        </h1>

        <p className="body-lg reveal" style={{ maxWidth: 620, margin: "0 auto 28px", color: "var(--ink-2)" }}>
          {t("hero.subtitle")}
        </p>

        <div className="reveal" style={{ display: "flex", gap: 10, flexWrap: "wrap", justifyContent: "center", marginBottom: 28 }}>
          {["pill1", "pill2", "pill3"].map((k) => (
            <span key={k} className="pill"><span className="dot" /> {t(`hero.${k}`)}</span>
          ))}
        </div>

        <div className="reveal" style={{ marginBottom: 40 }}>
          <a href={window.ctaUrl()} target="_blank" rel="noreferrer" className="btn btn-primary btn-lg">
            {t("hero.cta")} <ArrowRight />
          </a>
        </div>

        {/* Intro video */}
        <HeroVideo />
      </div>
      <style>{`
        @keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.4 } }
      `}</style>
    </section>
  );
};

const HeroVideo = () => {
  const videoRef = React.useRef(null);
  const wrapRef = React.useRef(null);
  const [muted, setMuted] = React.useState(true);
  const [inView, setInView] = React.useState(true);
  const userPausedRef = React.useRef(false);

  // Autoplay muted on mount
  React.useEffect(() => {
    const v = videoRef.current;
    if (!v) return;
    v.muted = true;
    const tryPlay = () => v.play().catch(() => {});
    tryPlay();
  }, []);

  // Pause/resume on scroll (viewport visibility)
  React.useEffect(() => {
    const el = wrapRef.current;
    const v = videoRef.current;
    if (!el || !v || typeof IntersectionObserver === "undefined") return;
    const io = new IntersectionObserver(
      ([entry]) => {
        const visible = entry.isIntersecting && entry.intersectionRatio > 0.4;
        setInView(visible);
        if (!visible) {
          if (!v.paused) v.pause();
          // Re-mute whenever it leaves the viewport
          v.muted = true;
          setMuted(true);
        } else if (!userPausedRef.current) {
          v.muted = true;
          setMuted(true);
          v.play().catch(() => {});
        }
      },
      { threshold: [0, 0.4, 0.75] }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);

  // Pause when tab is hidden
  React.useEffect(() => {
    const onVis = () => {
      const v = videoRef.current;
      if (!v) return;
      if (document.hidden) v.pause();
      else if (inView && !userPausedRef.current) v.play().catch(() => {});
    };
    document.addEventListener("visibilitychange", onVis);
    return () => document.removeEventListener("visibilitychange", onVis);
  }, [inView]);

  const toggleMute = (e) => {
    e.stopPropagation();
    const v = videoRef.current;
    if (!v) return;
    const next = !v.muted;
    v.muted = next;
    setMuted(next);
    if (v.paused) v.play().catch(() => {});
  };

  const togglePlay = () => {
    const v = videoRef.current;
    if (!v) return;
    if (v.paused) {
      userPausedRef.current = false;
      v.play().catch(() => {});
    } else {
      userPausedRef.current = true;
      v.pause();
    }
  };

  return (
    <div className="reveal" ref={wrapRef} style={{ maxWidth: 980, margin: "0 auto", position: "relative" }}>
      <div
        onClick={togglePlay}
        style={{
          borderRadius: 24,
          overflow: "hidden",
          border: "1px solid var(--line)",
          boxShadow: "var(--shadow-lg)",
          background: "#000",
          aspectRatio: "16 / 9",
          position: "relative",
          cursor: "pointer",
        }}
      >
        <video
          ref={videoRef}
          src="assets/intervue-intro.mp4"
          poster="assets/hero-poster.jpg"
          playsInline
          muted
          autoPlay
          loop
          preload="auto"
          style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
        />

        {/* Mute / unmute control */}
        <button
          aria-label={muted ? "Unmute intro video" : "Mute intro video"}
          onClick={toggleMute}
          style={{
            position: "absolute", bottom: 14, right: 14,
            width: 44, height: 44, borderRadius: "50%",
            background: "rgba(0,0,0,0.55)", color: "#fff",
            display: "inline-flex", alignItems: "center", justifyContent: "center",
            border: "1px solid rgba(255,255,255,0.15)",
            backdropFilter: "blur(8px)",
            cursor: "pointer",
            transition: "transform 180ms var(--ease), background 180ms var(--ease)",
          }}
          onMouseEnter={(e) => (e.currentTarget.style.transform = "scale(1.06)")}
          onMouseLeave={(e) => (e.currentTarget.style.transform = "none")}
        >
          {muted ? (
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M11 5 6 9H2v6h4l5 4V5z" />
              <line x1="22" y1="9" x2="16" y2="15" />
              <line x1="16" y1="9" x2="22" y2="15" />
            </svg>
          ) : (
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M11 5 6 9H2v6h4l5 4V5z" />
              <path d="M15.54 8.46a5 5 0 0 1 0 7.07" />
              <path d="M19.07 4.93a10 10 0 0 1 0 14.14" />
            </svg>
          )}
        </button>

        {/* LIVE badge while playing */}
        <span style={{
          position: "absolute", top: 14, left: 14,
          display: "inline-flex", alignItems: "center", gap: 6,
          padding: "5px 10px", borderRadius: 999,
          background: "rgba(0,0,0,0.55)", color: "#fff",
          fontSize: 11, fontWeight: 500,
          backdropFilter: "blur(8px)",
          pointerEvents: "none",
        }}>
          <span style={{
            width: 6, height: 6, borderRadius: "50%",
            background: "#ec5c3f",
            animation: "pulse 1.6s var(--ease) infinite",
          }} />
          INTRO
        </span>
      </div>
    </div>
  );
};

window.Hero = Hero;