/* global React */

// ⭐ Be Cinematic — vídeo fullwidth com overlay que desaparece 2s após entrar em viewport
function Cinematic() {
  const videoRef     = React.useRef(null);
  const sectionRef   = React.useRef(null);
  const timerRef     = React.useRef(null);
  const [playing, setPlaying]         = React.useState(true);
  const [muted, setMuted]             = React.useState(true);
  const [overlayVisible, setOverlay]  = React.useState(true); // lettering overlay

  // IntersectionObserver — quando 30% visível, arranca timer de 2s para esconder overlay
  React.useEffect(() => {
    const el = sectionRef.current;
    if (!el) return;
    const obs = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting && overlayVisible) {
          timerRef.current = setTimeout(() => setOverlay(false), 2000);
        } else if (!entry.isIntersecting) {
          // saiu do viewport antes do timer — cancelar e repor overlay
          clearTimeout(timerRef.current);
          setOverlay(true);
        }
      },
      { threshold: 0.3 }
    );
    obs.observe(el);
    return () => { obs.disconnect(); clearTimeout(timerRef.current); };
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  const toggleAudio = () => {
    const v = videoRef.current;
    if (v) { v.muted = !v.muted; setMuted(v.muted); }
    else { setMuted(m => !m); }
  };

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

  const steps = [
    { n: "01", k: "Briefing & Proposta", d: "Entendemos a campanha; definimos âmbito, orçamento e timeline." },
    { n: "02", k: "Pré-produção",        d: "Moodboard, storyboard, casting (real, AI, ou ambos), guidelines de marca." },
    { n: "03", k: "Produção",            d: "Captação tradicional, geração AI, ou híbrida, decidida plano a plano." },
    { n: "04", k: "Pós-produção",        d: "Edição, motion, sound design, color grading." },
    { n: "05", k: "Entrega",             d: "Todas as versões e formatos que a campanha precisa." }
  ];

  return (
    <Section id="cinematic" tone="ink" full>
      {/* Vídeo hero fullwidth */}
      <div ref={sectionRef} style={{ position: "relative", width: "100%", aspectRatio: "21/9", background: "#000", overflow: "hidden" }}>

        {/* Vídeo real: RM AD.mp4 — visível imediatamente, sem placeholder a cobrir */}
        <video
          ref={videoRef}
          autoPlay
          muted
          loop
          playsInline
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }}
          aria-label="Be Cinematic showreel"
          src={(window.BOLDER_MEDIA_URL || '') + 'videos/RM%20AD.mp4'}
        />

        {/* grão de filme — overlay subtil sempre visível */}
        <div style={{
          position: "absolute", inset: 0,
          backgroundImage: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>\")",
          opacity: 0.10,
          mixBlendMode: "overlay",
          pointerEvents: "none"
        }} />

        {/* ── OVERLAY LETTERINGS — fade-out 2s após entrar em viewport ── */}
        <div style={{
          position: "absolute", inset: 0,
          display: "flex", flexDirection: "column",
          transition: "opacity 800ms ease",
          opacity: overlayVisible ? 1 : 0,
          pointerEvents: overlayVisible ? "auto" : "none"
        }}>
          {/* chip + timecode */}
          <div style={{ display: "flex", justifyContent: "space-between", padding: "24px 24px 0" }}>
            <span className="chip" style={{ background: "rgba(0,0,0,0.55)", color: "#FFF", borderColor: "rgba(255,255,255,0.18)" }}>
              <span className="dot" style={{ background: "var(--coral)" }} />Showreel · Be Cinematic
            </span>
            <span className="mono" style={{ color: "rgba(255,255,255,0.7)" }}>
              00:00:00.00
            </span>
          </div>

          {/* título central */}
          <div style={{
            flex: 1,
            display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center",
            padding: "0 32px", textAlign: "center", color: "#FFF",
            gap: "clamp(16px, 2vh, 28px)"
          }}>
            <span className="mono" style={{ color: "rgba(255,255,255,0.6)" }}>★ Módulo · Filmes & Campanhas</span>
            <h2 className="display" style={{
              fontSize: "clamp(56px, 10vw, 160px)", margin: 0,
              letterSpacing: "-0.05em", lineHeight: 0.9, color: "#FFF"
            }}>
              <em style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 300, color: "var(--coral)" }}>Be</em>{" "}Cinematic
            </h2>
            <p style={{ margin: 0, fontSize: "clamp(15px, 1.4vw, 20px)", maxWidth: "48ch", color: "rgba(255,255,255,0.82)", lineHeight: 1.4 }}>
              Quando a marca pede um filme, e o filme pede um motor.
            </p>
          </div>
        </div>

        {/* ── CONTROLOS — sempre visíveis em baixo ── */}
        <div style={{ position: "absolute", bottom: 24, left: 24, right: 24, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
          <div style={{ display: "flex", gap: 10 }}>
            <button
              onClick={togglePlay}
              className="btn btn--ghost"
              style={{ borderColor: "rgba(255,255,255,0.4)", color: "#FFF", background: "rgba(0,0,0,0.45)", backdropFilter: "blur(8px)" }}
              aria-label={playing ? "Pausar vídeo" : "Reproduzir vídeo"}
            >
              {playing ? "❚❚ Pausar" : "▶ Play"}
            </button>
            <button
              onClick={toggleAudio}
              className="btn btn--ghost"
              style={{
                borderColor: muted ? "rgba(255,255,255,0.4)" : "var(--coral)",
                color: muted ? "#FFF" : "var(--coral)",
                background: "rgba(0,0,0,0.45)", backdropFilter: "blur(8px)"
              }}
              aria-label={muted ? "Ativar áudio" : "Silenciar"}
            >
              {muted ? "🔇 Ativar áudio" : "🔊 Áudio on"}
            </button>
          </div>
          <PoweredByBoldy />
        </div>
      </div>

      {/* corpo da secção */}
      <div className="page" style={{ paddingTop: 80, paddingBottom: 100 }}>
        <SectionHead
          num="★ / Be Cinematic"
          title="Filmes acabados.<br/><em>Decisões técnicas a cada plano.</em>"
          sub="Há campanhas que pedem mais do que assets soltos. Pedem uma história, uma direção, uma peça acabada: pedem cinema. <strong style='color:var(--ink)'>Be Cinematic</strong> é o lado da Bolder que vive em modo campanha: briefing, conceito, moodboard, storyboard, produção, pós. O processo é o de qualquer produtora a sério. A diferença está em <em style='color:var(--coral); font-style:italic'>como produzimos</em>: decidimos contigo, em cada plano, o que se ganha em rodar real, o que se ganha em gerar com AI, o que se ganha em misturar."
        />

        <div className="grid-3" style={{ marginBottom: 24 }}>
          {steps.slice(0, 3).map((s, i) => (
            <Reveal key={i} delay={i + 1} className="card" style={{ background: "rgba(255,255,255,0.03)" }}>
              <span className="mono mono-coral" style={{ fontSize: 12 }}>{s.n}_</span>
              <h3 className="display" style={{ fontSize: 24, margin: "8px 0 8px", letterSpacing: "-0.02em" }}>{s.k}</h3>
              <p style={{ fontSize: 14, color: "var(--muted)", margin: 0 }}>{s.d}</p>
            </Reveal>
          ))}
        </div>
        <div className="grid-2" style={{ marginBottom: 56 }}>
          {steps.slice(3).map((s, i) => (
            <Reveal key={i} delay={i + 1} className="card" style={{ background: "rgba(255,255,255,0.03)" }}>
              <span className="mono mono-coral" style={{ fontSize: 12 }}>{s.n}_</span>
              <h3 className="display" style={{ fontSize: 24, margin: "8px 0 8px", letterSpacing: "-0.02em" }}>{s.k}</h3>
              <p style={{ fontSize: 14, color: "var(--muted)", margin: 0 }}>{s.d}</p>
            </Reveal>
          ))}
        </div>

        <div className="card" style={{
          background: "var(--coral)", borderColor: "var(--coral)", color: "#FFF",
          padding: "clamp(28px, 3.5vw, 48px)",
          display: "grid", gridTemplateColumns: "1fr auto",
          gap: 32, alignItems: "center"
        }}>
          <div>
            <span className="mono" style={{ color: "rgba(255,255,255,0.7)" }}>Modelo comercial</span>
            <h3 className="display" style={{ fontSize: "clamp(36px, 4.4vw, 64px)", margin: "10px 0 12px", letterSpacing: "-0.035em", color: "#FFF" }}>
              Sob consulta
            </h3>
            <p style={{ margin: 0, fontSize: 16, color: "rgba(255,255,255,0.85)", maxWidth: "50ch" }}>
              Cada campanha é diferente; cada proposta é construída sobre briefing real, não checkout direto.
            </p>
          </div>
          <a href="#contact" className="btn btn--ghost" style={{
            borderColor: "#FFF", color: "#FFF", background: "transparent"
          }}>
            Pedir proposta <span className="arrow">→</span>
          </a>
        </div>
      </div>

      <style>{`
        @media (max-width: 760px) {
          #cinematic .card[style*="grid-template-columns: 1fr auto"] { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </Section>
  );
}

window.Cinematic = Cinematic;
window.Production = Cinematic;