/* global React, MagneticButton, Icons, Fn */
const { useEffect, useState, useRef } = React;

// ============================================================
// Hero — composición CENTRADA (vista original):
//   eyebrow · headline a dos líneas · subtítulo · CTAs · trust note
//   y debajo, una ventana de navegador estilo Mac (.browser-frame)
//   con la captura real del dashboard (assets/dashboard-def.png).
// En móvil todo se mantiene centrado y la ventana ocupa el ancho.
// ============================================================
function Hero({ variant = "A" }) {
  // Parallax sutil (solo desplazamiento vertical) al hacer scroll.
  const wrapRef = useRef(null);
  const [shift, setShift] = useState(0);

  useEffect(() => {
    const onScroll = () => {
      const el = wrapRef.current;
      if (!el) return;
      const rect = el.getBoundingClientRect();
      const progress = Math.max(0, Math.min(1, 1 - rect.top / window.innerHeight));
      setShift(progress * -16);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <section
      id="top"
      style={{
        position: "relative",
        padding: "72px 0 64px",
        background: "var(--bg-1)",
        overflow: "hidden"
      }}>

      {/* Soft radial brand glow behind hero */}
      <div
        aria-hidden="true"
        style={{
          position: "absolute", top: -260, left: "50%", transform: "translateX(-50%)",
          width: 1100, height: 700, pointerEvents: "none",
          background: "radial-gradient(closest-side, rgba(5,48,206,0.10), transparent 70%)",
          filter: "blur(8px)"
        }} />

      <div className="wrap" style={{ position: "relative", maxWidth: 1320 }}>

        {/* ── Copy centrado ── */}
        <div className="hero-copy">
          <div className="reveal hero-badge-row">
            <span className="eyebrow"><span className="dot" /> Plataforma financiera para PyMEs</span>
          </div>

          <h1
            className="reveal hero-title"
            style={{
              margin: "0 0 24px",
              fontFamily: "var(--font-display)",
              fontWeight: 500,
              fontSize: "clamp(2.5rem, 3.8vw + 1rem, 4.5rem)",
              lineHeight: 1.04,
              letterSpacing: "-0.035em",
              color: "var(--fg-1)",
              "--reveal-delay": "80ms"
            }}>

            La tesorería global<br />
            <span style={{ color: "var(--fg-2)" }}>que tu empresa ya necesitaba.</span>
          </h1>

          <p
            className="reveal hero-lede"
            style={{
              fontSize: 18,
              color: "var(--fg-2)",
              lineHeight: 1.55,
              margin: "0 auto 32px",
              maxWidth: 600,
              "--reveal-delay": "160ms"
            }}>

            Pagos internacionales el mismo día<Fn n={1}/>, con trazabilidad en tiempo real y comisiones transparentes<Fn n={2}/>.{" "}
            <span style={{ color: "var(--fg-1)", fontWeight: 500 }}>Diseñada para importadoras ambiciosas.</span>
          </p>

          <div
            className="reveal hero-cta-row"
            style={{
              display: "flex", gap: 12, flexWrap: "wrap", justifyContent: "center",
              marginBottom: 18, "--reveal-delay": "240ms"
            }}>

            <MagneticButton variant="primary" onClick={trackLead}>
              Aplica ahora <Icons.ArrowRight size={14} />
            </MagneticButton>
            <MagneticButton variant="outline" onClick={trackLead}>
              Agenda demo <Icons.ArrowUpRight size={14} />
            </MagneticButton>
          </div>

          <p
            className="reveal hero-subnote"
            style={{
              fontSize: 12, color: "var(--fg-3)",
              margin: 0, lineHeight: 1.5,
              "--reveal-delay": "320ms"
            }}>

            Onboarding en menos de 24 horas<Fn n={7}/> · Supervisado por la CNBV<Fn n={8}/>.
          </p>
        </div>

        {/* ── Ventana de navegador estilo Mac con el dashboard ── */}
        <div ref={wrapRef} className="hero-visual reveal" style={{ "--reveal-delay": "200ms" }}>
          <div
            className="browser-frame"
            style={{
              transform: `translateY(${shift}px)`,
              transition: "transform 200ms linear"
            }}>
            <div className="chrome">
              <div className="lights"><span className="light" /><span className="light" /><span className="light" /></div>
              <div className="url">app.meefi.io</div>
              <div style={{ width: 36 }} />
            </div>
            <img src="assets/dashboard-def.png" alt="Dashboard de Meefi" className="hero-dash-img" />
          </div>
        </div>
      </div>

      {/* Hero layout + fade-in-up keyframes */}
      <style>{`
        @keyframes fadeInUp {
          from { opacity: 0; transform: translateY(20px); }
          to   { opacity: 1; transform: translateY(0); }
        }
        .hero-title { white-space: nowrap; }
        .hero-copy { text-align: center; max-width: none; margin: 0 auto 56px; }
        .hero-badge-row { display: flex; justify-content: center; }
        .hero-visual { position: relative; max-width: 1248px; margin: 0 auto; }
        .hero-dash-img { display: block; width: 100%; height: auto; }
        @media (max-width: 980px) {
          .hero-copy { margin-bottom: 40px; }
        }
        @media (max-width: 900px) {
          .hero-title { white-space: normal; }
        }
      `}</style>
    </section>);

}

window.Hero = Hero;