/* global React */

function Hero() {
  const [expanded, setExpanded] = React.useState(false);
  const [muted, setMuted]       = React.useState(true);
  const videoRef                = React.useRef(null);

  const toggleMute = (e) => {
    e.stopPropagation();
    const v = videoRef.current;
    if (v) { v.muted = !v.muted; setMuted(v.muted); }
  };

  const toggleExpand = (e) => {
    e.stopPropagation();
    setExpanded(ex => !ex);
  };

  // grid col ratio: texto comprime, vídeo expande
  const gridCols = expanded ? "0.7fr 1.3fr" : "1.4fr 1fr";

  return (
    <Section id="hero" tone="paper">
      <div style={{ paddingTop: "clamp(40px, 6vh, 80px)" }}>
        <Reveal>
          <span className="eyebrow"><span className="dot" />A primeira produtora híbrida · Lisboa</span>
        </Reveal>

        <h1 className="display" style={{
          fontSize: "clamp(72px, 14vw, 220px)",
          margin: "32px 0 0",
          letterSpacing: "-0.05em",
          lineHeight: 0.88
        }}>
          <Reveal>Be <em>Bolder</em>.</Reveal>
        </h1>

        {/* grid anima via CSS transition — grid-template-columns suportado em Chrome/Firefox/Safari modernos */}
        <div
          style={{
            display: "grid",
            gridTemplateColumns: gridCols,
            gap: 56,
            marginTop: 56,
            alignItems: "end",
            transition: "grid-template-columns 700ms cubic-bezier(0.22, 1, 0.36, 1)"
          }}
          className="hero-grid"
        >
          {/* coluna esquerda — comprime quando expandido */}
          <Reveal delay={1} style={{ overflow: "hidden", minWidth: 0 }}>
            <p
              className="display"
              style={{
                fontSize: "clamp(20px, 3vw, 44px)",
                margin: 0,
                letterSpacing: "-0.025em",
                maxWidth: "20ch",
                textWrap: "balance",
                fontWeight: 500,
                transition: "font-size 700ms cubic-bezier(0.22, 1, 0.36, 1), opacity 500ms ease",
                opacity: expanded ? 0.45 : 1
              }}
            >
              <span className="wavy">Human-in-the-Loop.</span><br />
              <span style={{ color: "var(--muted)" }}>Por design.</span>
            </p>
            <p style={{
              marginTop: 24, fontSize: 18, lineHeight: 1.5, color: "var(--ink-soft)", maxWidth: "48ch",
              transition: "opacity 500ms ease",
              opacity: expanded ? 0 : 1,
              pointerEvents: expanded ? "none" : "auto"
            }}>
              A alma da sua marca. A velocidade da IA. A garantia de que há sempre um humano a decidir.
            </p>
            <div style={{
              display: "flex", gap: 12, marginTop: 32, flexWrap: "wrap",
              transition: "opacity 500ms ease",
              opacity: expanded ? 0 : 1,
              pointerEvents: expanded ? "none" : "auto"
            }}>
              <a href="#pricing" className="btn">Subscrever <span className="arrow">→</span></a>
              <a href="#system" className="btn btn--ghost">Ver como funciona</a>
            </div>
          </Reveal>

          {/* coluna direita — vídeo card expansível */}
          <Reveal delay={2}>
            <Parallax speed={expanded ? 0 : 0.08}>
              <div
                className="card"
                style={{
                  padding: 0,
                  overflow: "hidden",
                  cursor: "pointer",
                  transition: "box-shadow 400ms ease",
                  boxShadow: expanded
                    ? "0 32px 80px rgba(0,0,0,0.18)"
                    : "0 4px 24px rgba(0,0,0,0.06)"
                }}
                onClick={toggleExpand}
                title={expanded ? "Minimizar" : "Expandir vídeo"}
              >
                {/* barra superior */}
                <div style={{
                  display: "flex", justifyContent: "space-between",
                  padding: "12px 16px",
                  borderBottom: "1px solid var(--rule)", alignItems: "center"
                }}>
                  <span className="mono">Loop · Be Cinematic · 5s</span>
                  <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                    <PoweredByBoldy />
                  </div>
                </div>

                {/* vídeo com asset real */}
                <div style={{ position: "relative" }}>
                  <video
                    ref={videoRef}
                    autoPlay
                    muted
                    loop
                    playsInline
                    style={{
                      width: "100%", display: "block",
                      aspectRatio: expanded ? "16/9" : "16/10",
                      objectFit: "cover",
                      borderRadius: 0, border: "none",
                      transition: "aspect-ratio 700ms cubic-bezier(0.22, 1, 0.36, 1)"
                    }}
                    src={(window.BOLDER_MEDIA_URL || '') + 'videos/SITE%20AI.mp4'}
                  />

                  {/* controlos sobre o vídeo — só visíveis no hover ou quando expanded */}
                  <div style={{
                    position: "absolute", bottom: 10, right: 10,
                    display: "flex", gap: 6
                  }}>
                    {/* botão mute/unmute */}
                    <button
                      onClick={toggleMute}
                      style={{
                        background: "rgba(0,0,0,0.55)", backdropFilter: "blur(6px)",
                        border: muted ? "1px solid rgba(255,255,255,0.25)" : "1px solid var(--coral)",
                        color: muted ? "#fff" : "var(--coral)",
                        borderRadius: 6, padding: "5px 10px",
                        fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.06em",
                        cursor: "pointer", transition: "all 200ms ease"
                      }}
                      aria-label={muted ? "Ativar áudio" : "Silenciar"}
                    >
                      {muted ? "🔇 Áudio" : "🔊 On"}
                    </button>

                    {/* botão expandir/colapsar */}
                    <button
                      onClick={toggleExpand}
                      style={{
                        background: "rgba(0,0,0,0.55)", backdropFilter: "blur(6px)",
                        border: "1px solid rgba(255,255,255,0.25)",
                        color: "#fff",
                        borderRadius: 6, padding: "5px 10px",
                        fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.06em",
                        cursor: "pointer", transition: "all 200ms ease"
                      }}
                      aria-label={expanded ? "Colapsar" : "Expandir"}
                    >
                      {expanded ? "⤡ Fechar" : "⤢ Expandir"}
                    </button>
                  </div>
                </div>

                {/* barra inferior */}
                <div style={{ padding: "12px 16px", display: "flex", justifyContent: "space-between", borderTop: "1px solid var(--rule)" }}>
                  <HumanVerifiedBadge id="HV-2026-001" />
                  <span className="mono" style={{ transition: "opacity 300ms ease", opacity: expanded ? 0 : 1 }}>↓ scroll</span>
                </div>
              </div>
            </Parallax>
          </Reveal>
        </div>

        <Reveal delay={3}>
          <div style={{ marginTop: 80, paddingTop: 32, borderTop: "1px solid var(--rule)", display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24 }} className="hero-metrics">
            {[
              { k: "Marcas ativas", n: 50, s: "+" },
              { k: "Assets gerados", n: 10, s: "k+" },
              { k: "Renovam", n: 92, s: "%" },
              { k: "Human-Verified", n: 100, s: "%" }
            ].map((m, i) => (
              <div key={i}>
                <div className="display" style={{ fontSize: 36, letterSpacing: "-0.03em" }}>
                  <Counter to={m.n} suffix={m.s} />
                </div>
                <div className="mono" style={{ marginTop: 4 }}>{m.k}</div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          .hero-metrics { grid-template-columns: 1fr 1fr !important; }
        }
      `}</style>
    </Section>
  );
}

window.Hero = Hero;