/* global React */
const { useEffect, useRef, useState: useStateHero } = React;

function Hero() {
  const stageRef = useRef(null);
  const [mouse, setMouse] = useStateHero({ x: 0, y: 0 });

  useEffect(() => {
    const el = stageRef.current;
    if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      const x = (e.clientX - r.left) / r.width - 0.5;
      const y = (e.clientY - r.top) / r.height - 0.5;
      setMouse({ x, y });
    };
    el.addEventListener("mousemove", onMove);
    return () => el.removeEventListener("mousemove", onMove);
  }, []);

  return (
    <section className="hero" id="top" ref={stageRef}>
      {/* Background layers */}
      <div className="hero-grid-bg" aria-hidden="true" />
      <div
        className="hero-violet-glow"
        aria-hidden="true"
        style={{
          top: "8%",
          left: "50%",
          transform: `translate(-50%, 0) translate(${mouse.x * 30}px, ${mouse.y * 20}px)`,
          transition: "transform 600ms cubic-bezier(0.2,0,0,1)",
        }}
      />
      <div className="noise-overlay" aria-hidden="true" />

      {/* Orbits behind monogram */}
      <div
        className="orbit"
        style={{
          width: 720, height: 720,
          top: "50%", left: "50%",
          transform: `translate(-50%,-50%) translate(${mouse.x * 12}px, ${mouse.y * 12}px)`,
          transition: "transform 800ms cubic-bezier(0.2,0,0,1)",
        }}
      />
      <div
        className="orbit"
        style={{
          width: 1080, height: 1080,
          top: "50%", left: "50%",
          transform: `translate(-50%,-50%) translate(${mouse.x * 22}px, ${mouse.y * 22}px)`,
          transition: "transform 800ms cubic-bezier(0.2,0,0,1)",
        }}
      />

      {/* Floating monogram (the brand icon, very large, low opacity) */}
      <img
        src={(window.__resources && window.__resources.iconWhite) || "assets/icon-cabecalho-white.png"}
        alt=""
        aria-hidden="true"
        style={{
          position: "absolute",
          right: "-4%",
          bottom: "-8%",
          height: "82vh",
          maxHeight: 900,
          opacity: 0.14,
          mixBlendMode: "screen",
          transform: `translate(${mouse.x * -40}px, ${mouse.y * -28}px)`,
          transition: "transform 800ms cubic-bezier(0.2,0,0,1)",
          pointerEvents: "none",
        }}
      />

      {/* Content */}
      <div
        style={{
          position: "relative",
          zIndex: 2,
          flex: 1,
          display: "flex",
          alignItems: "center",
          paddingTop: 140,
          paddingBottom: 80,
        }}
      >
        <div className="wrap" style={{ width: "100%" }}>
          <div className="hero-grid">
            {/* Eyebrow row */}
            <div className="reveal in" style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 28 }}>
              <span className="eyebrow-tag on-dark">
                <span className="dot" />
                Assessoria Mave • Especialista
              </span>
              <span style={{ width: 32, height: 1, background: "rgba(255,255,255,0.18)" }} />
              <span style={{ fontSize: 12, color: "rgba(255,255,255,0.5)", letterSpacing: "0.08em", textTransform: "uppercase" }}>
                Barueri — Alphaville · SP
              </span>
            </div>

            {/* Headline */}
            <h1
              style={{
                fontFamily: "var(--font-display)",
                fontWeight: 600,
                color: "#fff",
                fontSize: "clamp(40px, 6.4vw, 92px)",
                lineHeight: 1.02,
                letterSpacing: "-0.025em",
                margin: 0,
                maxWidth: 1080,
                textWrap: "balance",
              }}
            >
              Sua clínica não cresce<br />
              por falta de leads.<br />
              <span style={{ color: "rgba(255,255,255,0.45)" }}>Cresce por falta de </span>
              <span style={{
                color: "#fff",
                position: "relative",
                display: "inline-block",
              }}>
                <span style={{ position: "relative", zIndex: 2 }}>estrutura</span>
                <span aria-hidden="true" style={{
                  position: "absolute",
                  left: "-2px",
                  right: "-2px",
                  bottom: "0.08em",
                  height: "0.32em",
                  background: "var(--brand-violet)",
                  zIndex: 1,
                  borderRadius: 2,
                }} />
              </span>
              <span style={{ color: "rgba(255,255,255,0.45)" }}> e </span>
              <span style={{
                color: "#fff",
                position: "relative",
                display: "inline-block",
              }}>
                <span style={{ position: "relative", zIndex: 2 }}>método</span>
                <span aria-hidden="true" style={{
                  position: "absolute",
                  left: "-2px", right: "-2px", bottom: "0.08em",
                  height: "0.32em",
                  background: "var(--brand-violet)",
                  zIndex: 1, borderRadius: 2,
                }} />
              </span>
              <span style={{ color: "rgba(255,255,255,0.45)" }}>.</span>
            </h1>

            {/* Lede */}
            <p
              style={{
                marginTop: 32,
                color: "rgba(255,255,255,0.72)",
                fontSize: "clamp(16px, 1.3vw, 19px)",
                lineHeight: 1.55,
                maxWidth: 640,
                textWrap: "pretty",
              }}
            >
              Muitas clínicas já possuem demanda suficiente para faturar mais, cobrar
              melhor e crescer com previsibilidade — mas travam em posicionamento,
              processo comercial e conversão. A MaveUp aplica o <strong style={{ color: "#fff", fontWeight: 600 }}>Método OPV™</strong> para
              transformar clínicas comuns em operações lucrativas e prontas para escalar.
            </p>

            {/* CTAs */}
            <div style={{ marginTop: 40, display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a href="#diagnostico" className="btn btn-primary">
                Solicitar diagnóstico estratégico
                <span className="arrow"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></span>
              </a>
              <a href="#metodo" className="btn btn-ghost-dark">
                Como funciona o Método OPV
              </a>
            </div>

            {/* Trust bar (anti-objections, no fake numbers) */}
            <div
              style={{
                marginTop: 80,
                display: "grid",
                gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))",
                gap: 24,
                paddingTop: 32,
                borderTop: "1px solid rgba(255,255,255,0.08)",
                maxWidth: 1080,
              }}
            >
              {[
                { k: "Especialistas em", v: "clínicas e consultórios de estética" },
                { k: "Foco em", v: "harmonização facial e orofacial" },
                { k: "Sede", v: "Barueri — Alphaville · SP" },
                { k: "Método proprietário", v: "OPV™ — Oportunidade · Processo · Venda" },
              ].map((it) => (
                <div key={it.k}>
                  <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "rgba(255,255,255,0.45)", marginBottom: 8 }}>
                    {it.k}
                  </div>
                  <div style={{ fontFamily: "var(--font-display)", color: "#fff", fontWeight: 500, fontSize: 15, lineHeight: 1.35 }}>
                    {it.v}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Scroll cue */}
      <div
        aria-hidden="true"
        style={{
          position: "absolute",
          bottom: 28,
          left: "50%",
          transform: "translateX(-50%)",
          color: "rgba(255,255,255,0.5)",
          fontSize: 11,
          letterSpacing: "0.16em",
          textTransform: "uppercase",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          gap: 10,
          zIndex: 3,
        }}
      >
        <span>Role para descobrir</span>
        <span style={{
          width: 1, height: 36,
          background: "linear-gradient(to bottom, rgba(255,255,255,0.5), transparent)",
          animation: "scroll-cue 2s ease-in-out infinite",
        }} />
        <style>{`
          @keyframes scroll-cue {
            0% { transform: scaleY(0); transform-origin: top; }
            50% { transform: scaleY(1); transform-origin: top; }
            51% { transform-origin: bottom; }
            100% { transform: scaleY(0); transform-origin: bottom; }
          }
        `}</style>
      </div>
    </section>
  );
}

window.Hero = Hero;