// sections.jsx — secciones de contenido de la landing +Energía

// ─── URL de la PWA (panel de pacientes / login) ──────────────────────────────
// Mientras la PWA todavía no esté deployada, usar la URL temporal de Vercel
// (ej. "https://nutriapp-xxxx.vercel.app"). Cuando los DNS estén listos,
// queda en el subdominio definitivo.
const APP_URL = "https://app.amirachaime.com";

// ─── Lead magnet ────────────────────────────────────────────────────────────
// Form de captura para "5 cambios para tener más energía después de los 35".
// Doble escritura: Supabase (backup independiente del motor de email) +
// /api/subscribe (proxy serverless a Resend, ver deploy-vercel/api/subscribe.ts).
// Ambos se hacen en paralelo y fallan en silencio para no bloquear el redirect.
const SUPABASE_URL = "https://jkvpeduyrpwhypwwdpjh.supabase.co";
const SUPABASE_ANON_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImprdnBlZHV5cnB3aHlwd3dkcGpoIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzUxODg4NDMsImV4cCI6MjA5MDc2NDg0M30.Sz-EDM_XcAmTZ8K8XeuY3j-iA_Ju-aM7NgSS6WrzgBw";
// Slug descriptivo para Supabase (qué guía generó el lead).
const LEAD_SOURCE = "guia-5-cambios-energia";
// Key de ruteo para /api/subscribe → matchea el source en subscribe.ts.
const SUBSCRIBE_SOURCE = "lead-magnet";
// Página de agradecimiento donde se entrega el PDF y se nurturea al lead.
const LEAD_THANK_YOU_URL = "/gracias";

async function submitLeadMagnet({ name, email }) {
  const promises = [];

  if (SUPABASE_URL && !SUPABASE_URL.includes("YOUR_")) {
    promises.push(
      fetch(`${SUPABASE_URL}/rest/v1/lead_magnet_subscribers`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          apikey: SUPABASE_ANON_KEY,
          Authorization: `Bearer ${SUPABASE_ANON_KEY}`,
          Prefer: "return=minimal",
        },
        body: JSON.stringify({ name, email, source: LEAD_SOURCE }),
      }).catch((e) => console.error("supabase insert failed", e))
    );
  }

  promises.push(
    fetch("/api/subscribe", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        source: SUBSCRIBE_SOURCE,
        name,
        email,
        attributes: { GUIDE: LEAD_SOURCE },
      }),
    }).catch((e) => console.error("subscribe failed", e))
  );

  await Promise.all(promises);
}

// Fotos: arrastrá (o hacé clic) sobre cada slot para cargar la imagen. Queda guardada.
function Photo({ slotId, label, radius = 20, style }) {
  const baked = (typeof window !== "undefined" && window.__SLOT_SRC) ? window.__SLOT_SRC[slotId] : undefined;
  // En el archivo para compartir (export) usamos una imagen fija, más robusta.
  if (typeof window !== "undefined" && window.__EXPORT_MODE && baked) {
    return (
      <div style={{ width: "100%", height: "100%", overflow: "hidden", borderRadius: radius, ...style }}>
        <img src={baked} alt={label} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
      </div>
    );
  }
  return React.createElement("image-slot", {
    id: slotId,
    shape: "rounded",
    radius: String(radius),
    placeholder: label,
    style: { width: "100%", height: "100%", display: "block", ...style },
  });
}

function TopCallout() {
  return (
    <a href="#hacer-test" className="top-callout">
      <span className="top-callout-spark" aria-hidden="true">✨</span>
      <span className="top-callout-text">
        <strong>Hacé tu test gratis</strong>
        <span className="top-callout-sep"> · </span>
        <span className="top-callout-sub">Entendé en qué etapa estás (3 min)</span>
      </span>
      <span className="top-callout-arrow" aria-hidden="true">→</span>
    </a>
  );
}

function Nav() {
  return (
    <nav className="nav" id="nav">
      <div className="nav-inner">
        <a href="#" className="nav-logo">
          <img src={(typeof window!=='undefined' && window.__LOGO_SRC) || "assets/logo.png"} alt="Amira Chaime Nutrición" className="nav-logo-img" />
        </a>
        <div className="nav-actions">
          <a href={`${APP_URL}/login`} className="nav-login">
            <span className="nav-login-dot"></span>
            Ingresar a la Comunidad
          </a>
          <a href="#pricing" className="nav-cta">Quiero empezar</a>
        </div>
      </div>
    </nav>
  );
}

function Hero() {
  return (
    <React.Fragment>
      <section className="hero">
        <div className="hero-inner">
          <div>
            <div className="hero-tag">Programa +Energía · 8 semanas</div>
            <h1 className="hero-title">Recuperá tu energía,<br />sentite <em>liviana</em> otra vez</h1>
            <p className="hero-desc">
              El programa para mujeres en plena transición hormonal que quieren dejar de vivir cansadas, inflamadas y peleando con su cuerpo. Sin dietas restrictivas. Con ciencia, acompañamiento y una app que te guía cada día.
            </p>
            <div className="hero-cta-group">
              <a href="#pricing" className="btn-primary">Quiero empezar →</a>
              <a href="#programa" className="btn-secondary">Ver el programa ↓</a>
            </div>
            <div className="hero-trust">
              <div className="hero-trust-item"><span className="dot"></span> +100 mujeres acompañadas</div>
              <div className="hero-trust-item"><span className="dot"></span> Amira te acompaña hasta lograrlo</div>
              <div className="hero-trust-item"><span className="dot"></span> Acceso desde el celular</div>
            </div>
          </div>
          <div className="hero-image-wrap">
            <Photo slotId="amira-hero" radius={24} label="Foto de Amira (arrastrá una imagen)" />
            <div className="hero-badge">
              <div className="hero-badge-icon">⚡</div>
              <div className="hero-badge-text">
                <span>Método +Energía</span>
                <strong>Respaldo científico + app + comunidad</strong>
              </div>
            </div>
          </div>
        </div>
      </section>
      <svg className="section-wave" viewBox="0 0 1440 60" preserveAspectRatio="none"><path d="M0,40 C360,80 720,0 1440,40 L1440,60 L0,60Z" fill="#FFFFFF" /></svg>
    </React.Fragment>
  );
}

function Pain() {
  const pains = [
    "Te sentís cansada todo el día, aunque duermas",
    "Probaste mil dietas y siempre volvés al mismo lugar",
    "Vivís inflamada, con antojos que no podés controlar",
    "Dormís mal, te levantás sin energía y el estrés te gana",
    "Sentís culpa cada vez que comés algo \u201cque no deberías\u201d",
  ];
  return (
    <section className="pain">
      <div className="container">
        <div className="text-center reveal">
          <div className="section-tag">¿Te pasa esto?</div>
          <h2 className="section-title">Sabés que algo cambió en tu cuerpo.<br />Pero nadie te explicó qué.</h2>
        </div>
        <div className="pain-grid">
          <div className="pain-items reveal">
            {pains.map((p, i) => (
              <div className="pain-item" key={i}>
                <div className="pain-check"></div>
                <p>{p}</p>
              </div>
            ))}
          </div>
          <div className="pain-quote reveal">
            <blockquote>No estás haciendo nada mal. Tu cuerpo está cambiando, y necesita un enfoque nuevo.</blockquote>
            <cite>— Amira Chaime, Lic. en Nutrición</cite>
            <div className="pain-shift">
              <p className="pain-shift-title">Lo que necesitás ahora:</p>
              <p>Darle a tu cuerpo lo que necesita para reactivarse. Entender tus hormonas y trabajar con ellas. Proteína, timing y ejercicio inteligente. Una relación honesta — no perfecta — con la comida.</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Amira() {
  return (
    <React.Fragment>
      <section className="amira">
        <div className="container">
          <div className="amira-grid reveal">
            <div className="amira-photo"><Photo slotId="amira-retrato" radius={20} label="Retrato de Amira (arrastrá una imagen)" /></div>
            <div className="amira-content">
              <div className="section-tag">Tu nutricionista</div>
              <h2>Soy Amira, y acompaño a mujeres a <em>volver a confiar en su cuerpo</em></h2>
              <p>
                Soy Licenciada en Nutrición y me especializo en mujeres que están atravesando <em className="subtle">cambios hormonales</em>: <em className="subtle">perimenopausia, menopausia y post-menopausia</em>. Una transición que muchas empiezan a sentir desde los 35, cuando el cuerpo deja de responder como antes.
              </p>
              <p>
                Trabajo con mujeres que <em className="subtle">se levantan cansadas aunque duerman</em>, que <em className="subtle">acumulan grasa donde nunca tuvieron</em>, que <em className="subtle">viven inflamadas</em> y ya no saben qué comer. Conozco esa frustración porque la veo todos los días en mi consultorio.
              </p>
              <p>
                Diseñé +Energía porque vi que mis pacientes necesitaban más que un plan: necesitaban entender qué les pasaba, organizarse sin sufrimiento y tener acompañamiento real entre consulta y consulta.
              </p>
              <div className="amira-credentials">
                <span className="credential">🎓 Lic. en Nutrición — UBA</span>
                <span className="credential">🏥 +100 mujeres acompañadas</span>
                <span className="credential">📋 Especialista en salud hormonal femenina</span>
              </div>
            </div>
          </div>
        </div>
      </section>
      <svg className="section-wave" viewBox="0 0 1440 60" preserveAspectRatio="none"><path d="M0,40 C480,0 960,50 1440,15 L1440,60 L0,60Z" fill="#4A3228" /></svg>
    </React.Fragment>
  );
}

// Sección "la evolución": le habla a la que ya conoce el abordaje de Amira
// (tibia / repetidora) y le muestra qué cambió — método, herramienta, acompañamiento.
// Pensada para ir justo después del Hero en la variante corta (tráfico de WhatsApp).
function MethodShift() {
  const pillars = [
    {
      ico: "🧭", eyebrow: "El método",
      t: "Afinado y ordenado",
      d: "El mismo enfoque que entiende tu etapa hormonal, ahora paso a paso en 8 semanas claras. Menos teoría suelta, más cosas que podés aplicar desde hoy.",
    },
    {
      ico: "📱", eyebrow: "La herramienta",
      t: "Una app que te guía cada día",
      d: "Registrás en segundos, la IA te acompaña, y tenés tu plan, la Academia y tu progreso siempre a mano. Esto antes no existía.",
    },
    {
      ico: "💬", eyebrow: "El acompañamiento",
      t: "Amira, presente dentro de la app",
      d: "Desde la misma app ve tu seguimiento y te deja su devolución. Un ida y vuelta real y ordenado — no mensajes que se pierden en WhatsApp.",
    },
    {
      ico: "🎥", eyebrow: "El seguimiento",
      t: "Tu proceso, mirado de cerca",
      d: "Amira sigue tu evolución semana a semana y ajusta tu plan con lo que va viendo. Un acompañamiento 1 a 1, no un programa que se dicta igual para todas.",
    },
  ];
  return (
    <section className="shift">
      <div className="container">
        <div className="text-center reveal">
          <div className="section-tag">La evolución del programa</div>
          <h2 className="section-title">Ya conocés el abordaje.<br />Ahora cambia <em>cómo lo vivís</em>.</h2>
          <p className="section-subtitle" style={{ margin: "0 auto" }}>
            El mismo enfoque que entiende tu cuerpo en esta etapa, con una herramienta y un acompañamiento que antes no existían. Si ya fuiste parte de +Energía, esto es lo nuevo.
          </p>
        </div>
        <div className="shift-grid reveal">
          {pillars.map((p, i) => (
            <div className="shift-card" key={i}>
              <div className="shift-card-ico">{p.ico}</div>
              <div className="shift-eyebrow">{p.eyebrow}</div>
              <h3>{p.t}</h3>
              <p>{p.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Includes() {
  const items = [
    { ico: "🎬", t: "26 micro-cápsulas", d: "Videos cortos que ves cuando querés. Sin relleno, todo accionable." },
    { ico: "📱", t: "App con herramientas", d: "Registro con IA, planificador, recetario, lista de compras y tracking de hábitos." },
    { ico: "👥", t: "Comunidad privada", d: "Un espacio seguro para compartir con mujeres que están en el mismo camino." },
    { ico: "💬", t: "2 consultas con Amira", d: "Una al inicio para personalizar tu plan y otra al cierre para tu plan de continuidad." },
  ];
  return (
    <section className="includes">
      <div className="container">
        <div className="text-center reveal">
          <div className="section-tag">Todo lo que incluye</div>
          <h2 className="section-title">Más que un curso: un sistema completo</h2>
          <p className="section-subtitle" style={{ margin: "0 auto" }}>Todo lo que necesitás para las próximas 8 semanas — y para después también.</p>
        </div>
        <div className="includes-grid reveal">
          {items.map((it, i) => (
            <div className="include-card" key={i}>
              <div className="include-icon">{it.ico}</div>
              <h3>{it.t}</h3>
              <p>{it.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Modules() {
  const mods = [
    { w: "Semana 1–2", t: "Entendé qué te está pasando", d: "Hormonas, metabolismo y por qué lo de antes ya no funciona. Salís de la culpa y entrás en acción.", topics: ["Tus hormonas", "Metabolismo", "Mitos de dietas"] },
    { w: "Semana 3–4", t: "Comé para tener energía", d: "Proteína, timing y plato +Energía. Aprendés a armar comidas que te sostienen el día.", topics: ["Proteína", "Timing", "Plato modelo"] },
    { w: "Semana 5–6", t: "Desinflamar y dormir mejor", d: "Qué saca y qué suma inflamación, y cómo recuperar un descanso reparador.", topics: ["Antiinflamatorio", "Sueño", "Estrés"] },
    { w: "Semana 7–8", t: "Sostenerlo sin esfuerzo", d: "Hábitos que quedan, comer afuera, antojos y tu plan para los próximos meses.", topics: ["Hábitos", "Vida real", "Tu plan"] },
  ];
  return (
    <section className="modules" id="programa">
      <div className="container">
        <div className="text-center reveal">
          <div className="section-tag">El programa</div>
          <h2 className="section-title">8 semanas, paso a paso</h2>
          <p className="section-subtitle" style={{ margin: "0 auto" }}>Una transformación progresiva y realista. Cada etapa construye sobre la anterior.</p>
        </div>
        <div className="modules-timeline reveal">
          {mods.map((m, i) => (
            <div className="module-item" key={i}>
              <div className="module-dot"><span></span></div>
              <div className="module-content">
                <div className="module-week">{m.w}</div>
                <h3>{m.t}</h3>
                <p>{m.d}</p>
                <div className="module-topics">{m.topics.map((t, j) => <span key={j}>{t}</span>)}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const tt = [
    { q: "Amira, estoy muy contenta con los logros que voy alcanzando!!! Pude controlar mucho más mi picoteo, disminuyeron mis ganas de algo dulce siempre después de comer. Logro ser más consciente de lo que como, y no es que paso hambre: como de todo, pero en una cantidad y forma que me hace bien. Gracias por ayudarme y motivarme. ¡Vamos por más! 🙌🏻💪🏻", n: "Paula De Estrada", c: "Programa +Energía", a: "P" },
    { q: "Quería agradecerte por todo el acompañamiento. El plan me resultó claro, práctico y sostenible, y me ayudó a tomar conciencia sobre mi alimentación. Me sentí muy acompañada, sobre todo atravesando cambios hormonales y sintiendo que mi cuerpo no responde igual que antes. Tener una guía profesional en ese contexto hace una gran diferencia. ¡Gracias de corazón! 🙏", n: "Débora Albornoz", c: "Programa +Energía", a: "D" },
    { q: "Gracias a tu programa personalizado pude encontrar un cuerpo más equilibrado y cómodo, con una mejora notable en mi digestión. Me siento con más energía, liviana y feliz con los resultados. Tu programa marcó una gran diferencia en mi bienestar.", n: "Gabriela Renella", c: "Programa +Energía", a: "G" },
  ];
  return (
    <section className="testimonials">
      <div className="container">
        <div className="text-center reveal">
          <div className="section-tag">Resultados reales</div>
          <h2 className="section-title">Lo que dicen quienes ya<br />pasaron por el programa</h2>
        </div>
        <div className="testimonial-grid reveal">
          {tt.map((t, i) => (
            <div className="testimonial-card" key={i}>
              <div className="testimonial-stars">★★★★★</div>
              <p>{t.q}</p>
              <div className="testimonial-author">
                <div className="testimonial-avatar">{t.a}</div>
                <div className="testimonial-author-info">
                  <span>{t.n}</span>
                  <small>{t.c}</small>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function LeadMagnet() {
  const [name, setName] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState("");

  const validEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
  const validName = name.trim().length >= 2;
  const canSubmit = validName && validEmail && !submitting;

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!canSubmit) return;
    setSubmitting(true);
    setError("");
    try {
      await submitLeadMagnet({ name: name.trim(), email: email.trim() });
      // Redirigimos a /gracias — la entrega del PDF + nurturing pasa ahí.
      window.location.href = LEAD_THANK_YOU_URL;
    } catch (err) {
      console.error("lead magnet submit failed", err);
      setError("No pudimos enviar la guía. Probá de nuevo en un momento.");
      setSubmitting(false);
    }
  };

  return (
    <section className="lead">
      <div className="container">
        <div className="lead-card reveal">
          <div>
            <h2>¿Todavía no estás lista para empezar? <em>Llevate la guía gratis</em></h2>
            <p>Descargá <strong>“5 cambios para tener más energía después de los 35”</strong> — una guía breve y accionable para empezar hoy, sin dietas. Te la mando al instante.</p>
          </div>
          <form className="lead-form" onSubmit={handleSubmit} noValidate>
            <label htmlFor="lead-name">Tu nombre</label>
            <input
              className="lead-input"
              id="lead-name"
              type="text"
              autoComplete="given-name"
              placeholder="Cómo te llamás"
              value={name}
              onChange={(e) => setName(e.target.value)}
              disabled={submitting}
              required
            />
            <label htmlFor="lead-email">Tu email</label>
            <input
              className="lead-input"
              id="lead-email"
              type="email"
              inputMode="email"
              autoComplete="email"
              placeholder="tucorreo@ejemplo.com"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              disabled={submitting}
              required
            />
            <button className="btn-primary" type="submit" disabled={!canSubmit}>
              {submitting ? "Enviando…" : "Enviame la guía gratis →"}
            </button>
            {error && <p className="lead-error" role="alert">{error}</p>}
            <p className="lead-fineprint">Sin spam. Te podés desuscribir cuando quieras.</p>
          </form>
        </div>
      </div>
    </section>
  );
}

function FAQ({ short = false }) {
  const faqs = [
    { key: "cohorte", q: "¿Cuándo puedo empezar?", a: "Cuando te inscribís coordinamos tu primera consulta con Amira y ahí arranca tu programa. Desde el momento de la inscripción ya tenés acceso a la app y al curso para ir avanzando a tu ritmo. Como Amira acompaña a cada mujer personalmente, los cupos son limitados." },
    { key: "alumni", q: "Ya hice +Energía antes, ¿esto es para mí?", a: "Sí, y de hecho hay algo nuevo para vos. Vas a reconocer el enfoque, pero ahora sumamos la app que te guía cada día, la Academia y el acompañamiento de Amira entre consultas — todo lo que antes no existía. Y si ya fuiste parte de +Energía v1.0, tenés un 25% de descuento con tu código de alumni." },
    { key: "analisis", q: "¿Necesito hacerme análisis antes de empezar?", a: "No es obligatorio, pero si tenés estudios del último año los aprovechamos para personalizar mejor tu plan. Si no, te indicamos cuáles pedir cuando arrancamos." },
    { key: "vivo", q: "¿Cómo es el acompañamiento de Amira?", a: "Es 1 a 1, de principio a fin. Amira diseña tu plan a partir de tus estudios y tu historia, te ve en consultas individuales, y entre consultas sigue tus registros desde la app y te deja su devolución. No son clases grupales ni un curso que se dicta igual para todas: es tu proceso, mirado de cerca." },
    { key: "medicacion", q: "¿Esto sirve si estoy tomando medicación o tengo alguna condición?", a: "Sí. El plan se diseña a medida considerando tus condiciones, medicación y análisis. Amira es nutricionista clínica y trabaja con perfiles diversos: tiroides, prediabetes, hipertensión, autoinmunes." },
    { key: "etapa", q: "¿Sirve si estoy en perimenopausia o menopausia?", a: "Sí, está diseñado justamente para esa etapa. Todo el enfoque está pensado para mujeres atravesando cambios hormonales, algo que puede empezar a sentirse desde los 35." },
    { key: "vip", q: "¿Puedo pasar de +Energía a VIP después?", a: "Sí. Si arrancás con +Energía y querés subir a VIP, podés hacerlo en cualquier momento del programa pagando la diferencia." },
    { key: "garantia", q: "¿Y si no es para mí? ¿Qué pasa si no veo resultados?", a: "Mi compromiso es acompañarte durante todo el programa hasta que encuentres tu equilibrio. No te dejo sola: ajustamos tu plan las veces que haga falta mientras hagas tu parte. Antes de empezar coordinamos una llamada para asegurarnos juntas de que es para vos." },
  ];
  // En la página corta (tráfico tibio) mostramos solo las dudas que frenan la compra.
  const SHORT_KEYS = ["alumni", "garantia", "cohorte", "etapa"];
  const shown = short ? SHORT_KEYS.map((k) => faqs.find((f) => f.key === k)).filter(Boolean) : faqs;
  const [open, setOpen] = React.useState(0);
  return (
    <section className="faq">
      <div className="container">
        <div className="text-center reveal">
          <div className="section-tag">Preguntas frecuentes</div>
          <h2 className="section-title">Lo que seguramente te estás preguntando</h2>
        </div>
        <div className="faq-list reveal">
          {shown.map((f, i) => (
            <div className={`faq-item ${open === i ? "open" : ""}`} key={i}>
              <button className="faq-question" onClick={() => setOpen(open === i ? -1 : i)}>
                {f.q}
                <span className="icon">+</span>
              </button>
              <div className="faq-answer"><p>{f.a}</p></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Closing() {
  return (
    <section className="closing">
      <div className="container reveal">
        <div className="section-tag">Un último mensaje</div>
        <p className="closing-quote">Tu cuerpo no te traicionó.<br />Está cambiando, y nosotras vamos a <em>acompañarlo</em>.</p>
        <a href="#pricing" className="btn-primary" style={{ fontSize: "1.05rem", padding: "18px 44px" }}>Empezá tu transformación →</a>
        <p className="closing-faq">¿Tenés dudas? Escribile a Amira a <strong>chaimeamira@gmail.com</strong></p>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <img src={(typeof window!=='undefined' && window.__LOGO_SRC) || "assets/logo.png"} alt="Amira Chaime Nutrición" className="footer-logo-img" />
        <p>© 2026 Amira Chaime Nutrición. Todos los derechos reservados.</p>
      </div>
    </footer>
  );
}

function StickyCTA() {
  const [show, setShow] = React.useState(false);
  const [closed, setClosed] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => {
      const pricing = document.getElementById("pricing");
      const past = window.scrollY > window.innerHeight * 1.1;
      const atPricing = pricing && pricing.getBoundingClientRect().top < window.innerHeight && pricing.getBoundingClientRect().bottom > 0;
      setShow(past && !atPricing);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  if (closed) return null;
  return (
    <div className={`sticky-cta ${show ? "show" : ""}`}>
      <div className="sticky-cta-text">
        +Energía · <strong>3 cuotas de {PRICE.energiaCuota}</strong>
      </div>
      <a href="#pricing" className="btn-primary">Quiero empezar →</a>
      <button className="sticky-cta-close" onClick={() => setClosed(true)} aria-label="Cerrar">×</button>
    </div>
  );
}

Object.assign(window, { TopCallout, Nav, Hero, MethodShift, Pain, Amira, Includes, Modules, Testimonials, LeadMagnet, FAQ, Closing, Footer, StickyCTA });