// offers.jsx — sección de oferta para +Energía
// Variante principal: "planes" (+Energía vs. +Energía VIP).
// Se alterna en vivo desde el panel de Tweaks (tweak "offer").

const CHECKOUT_URL = "#checkout"; // ← Reemplazar por el link de Mercado Pago / Hotmart
// TODO checkout: al wirear el pago, habilitar campo de cupón para el código de
// alumni (25% off para quienes hicieron +Energía v1.0). Hoy la copy ya anuncia el
// descuento (ver .plan-alumni); el código lo comparte Amira y se aplica acá.
const TEST_URL = "/test";         // ← Test MRS (síntomas perimenopausia/menopausia)
const VIP_CONTACT_URL = "#contacto"; // ← Reemplazar por WhatsApp / link de agenda de Amira

const PRICE = {
  // ── +Energía ──────────────────────────────────────────────────────────────
  // Moneda principal: pesos (la mayoría de las pacientes son argentinas). La
  // cuota lidera (menos impacto que el total); USD queda como referencia.
  energiaCuota: "$ 289.000",                 // valor de cada cuota (ARS)
  energiaCuotasTexto: "3 cuotas sin interés", // cómo se paga
  energiaTotalARS: "$ 867.000",              // total en pesos (3 × 289.000)
  // Pago único (ARS): conviene vs. las 3 cuotas. 867.000 → 700.000 = ahorro de
  // 167.000 (~19%). NO acumulable con el 25% de alumni (ver .plan-alumni).
  energiaUnPagoARS: "$ 700.000",             // precio en un solo pago (ARS)
  energiaUnPagoAhorro: "$ 167.000",          // cuánto ahorra vs. 3 cuotas
  energiaUSD: "497",                          // referencia en dólares (exterior)
  // Ancla que se tacha (precio regular vs. lanzamiento). 999 → 497 es más
  // creíble que el valor desglosado. Confirmar con Amira el valor regular real.
  energiaAnchor: "US$ 999",
  // Compat con variantes A/B (precio único / stack)
  energia: "497",
  energiaCuotas: "3 cuotas sin interés de $ 289.000 ARS",
  // ── VIP ───────────────────────────────────────────────────────────────────
  // Sin precio: el VIP es "solo por entrevista" (se cotiza en la llamada con
  // Amira). La tarjeta no renderiza precio, por eso no hay campos acá.
};

// Bloque de precio reutilizable (plan +Energía y cierre de compra).
// Pesos primero: la cuota es el número protagonista (menos impacto que el
// total). El dólar queda como referencia para el exterior, con el ancla
// tachada (999 → 497) que reconcilia dentro de su propia moneda.
function PriceBlock({ featured = false }) {
  return (
    <div className={`price-block ${featured ? "price-block-featured" : ""}`}>
      <div className="price-launch">Precio de lanzamiento · cupos limitados</div>
      <div className="price-cuota">
        <span className="price-cuota-n">{PRICE.energiaCuotasTexto} de</span>
        <span className="price-cuota-amount">{PRICE.energiaCuota}</span>
      </div>
      <div className="price-onepay">
        o <strong>{PRICE.energiaUnPagoARS}</strong> en un pago
        <span className="price-onepay-save">ahorrás {PRICE.energiaUnPagoAhorro}</span>
      </div>
      <div className="price-secondary">
        o US$ {PRICE.energiaUSD} en un pago <s>{PRICE.energiaAnchor}</s> · desde el exterior
      </div>
    </div>
  );
}

function CheckoutButton({ children, className = "btn-primary" }) {
  return (
    <a href={CHECKOUT_URL} className={className}>
      {children || "Quiero empezar →"}
    </a>
  );
}

// ───────── VARIANTE A · Precio único ─────────
function OfferVariantA() {
  return (
    <div className="offer-a">
      <div className="offer-a-left">
        <h3>+Energía</h3>
        <p className="offer-sub">El programa completo de 8 semanas: plan personalizado, acompañamiento 1 a 1 con Amira y comunidad activa.</p>
        <ul className="offer-features">
          <li>Plan alimentario personalizado, hecho por Amira</li>
          <li>2 consultas 1-a-1 con Amira: una al inicio y otra al cierre</li>
          <li>26 micro-cápsulas en video, a tu ritmo</li>
          <li>Seguimiento personal de Amira dentro de la app</li>
          <li>App +Energía por 6 meses</li>
          <li>Comunidad privada + guías y recetario</li>
        </ul>
      </div>
      <div className="offer-a-right">
        <span className="offer-save-pill">La experiencia completa</span>
        <div className="offer-price-row">
          <span className="offer-curr">US$</span>
          <span className="offer-price">{PRICE.energia}</span>
        </div>
        <div className="offer-installments">o {PRICE.energiaCuotas}</div>
        <CheckoutButton>Quiero empezar →</CheckoutButton>
        <div className="offer-guarantee-line">🤝 Mi compromiso: te acompaño hasta lograrlo</div>
      </div>
    </div>
  );
}

// ───────── VARIANTE B · Stack de valor desglosado ─────────
function OfferVariantB() {
  const stack = [
    { ico: "📋", t: "Plan alimentario personalizado", s: "Hecho por Amira a partir de tus estudios", v: "US$ 300" },
    { ico: "💬", t: "2 consultas 1-a-1 con Amira", s: "Una al inicio y otra al cierre", v: "US$ 240" },
    { ico: "🎥", t: "Seguimiento 1-a-1 con Amira", s: "Ve tus registros y te deja su devolución en la app", v: "US$ 200" },
    { ico: "🎬", t: "Curso +Energía (26 cápsulas)", s: "El método paso a paso, a tu ritmo", v: "US$ 200" },
    { ico: "📱", t: "App +Energía por 6 meses", s: "Registro IA · planificador · recetario", v: "US$ 120" },
    { ico: "👥", t: "Comunidad + guías + recetario", s: "Acompañamiento permanente", v: "US$ 80" },
  ];
  return (
    <div className="offer-b">
      <h3>Todo lo que te llevás</h3>
      <p className="offer-sub">Un acompañamiento completo, no un PDF más. Esto es lo que incluye y cuánto vale por separado:</p>
      <ul className="stack-list">
        {stack.map((r, i) => (
          <li className="stack-row" key={i}>
            <div className="stack-row-main">
              <div className="stack-ico">{r.ico}</div>
              <div>
                <strong>{r.t}</strong>
                <span>{r.s}</span>
              </div>
            </div>
            <div className="stack-val">{r.v}</div>
          </li>
        ))}
        <div className="stack-total">
          <span>Valor total</span>
          <span className="stack-total-val">US$ 1.140</span>
        </div>
      </ul>
      <div className="stack-today">
        <div className="stack-today-label">Hoy lo empezás por</div>
        <div className="offer-price-row">
          <span className="offer-curr">US$</span>
          <span className="offer-price">{PRICE.energia}</span>
        </div>
        <div className="offer-installments">o {PRICE.energiaCuotas}</div>
        <CheckoutButton>Quiero empezar →</CheckoutButton>
      </div>
    </div>
  );
}

// ───────── VARIANTE C · Dos planes (+Energía vs. VIP) ─────────
function OfferVariantC() {
  return (
    <div className="offer-c">
      <div className="plan-card">
        <div className="plan-eyebrow">La experiencia completa</div>
        <h3>+Energía</h3>
        <p className="plan-desc">El programa completo de 8 semanas con plan personalizado, acompañamiento 1 a 1 de Amira y comunidad activa.</p>
        <PriceBlock />
        <ul className="plan-features">
          <li>Plan alimentario personalizado, hecho por Amira a partir de tus estudios</li>
          <li>2 consultas 1-a-1 con Amira: una al inicio para diseñar tu plan y otra al cierre para tu plan de continuidad</li>
          <li>Acceso completo a la app +Energía durante 6 meses</li>
          <li>Curso +Energía: 26 micro-cápsulas en video, a tu ritmo</li>
          <li>Seguimiento personal de Amira dentro de la app: ve tus registros y te deja su devolución</li>
          <li>Comunidad privada con acceso permanente</li>
          <li>Guías por módulo y recetario</li>
          <li>Mi compromiso: te acompaño hasta que encuentres tu equilibrio</li>
        </ul>
        <CheckoutButton>Quiero empezar →</CheckoutButton>
        <div className="plan-scarcity">Cupos limitados por cohorte — Amira acompaña a cada una personalmente.</div>
        <div className="plan-alumni">¿Ya fuiste parte de <strong>+Energía v1.0</strong>? Tenés un <strong>25% de descuento</strong> con tu código de alumni <em>(no acumulable con el precio de pago único)</em>.</div>
      </div>
      <div className="plan-card featured">
        <div className="plan-badge">Cupos limitados</div>
        <div className="plan-eyebrow">Acompañamiento cercano</div>
        <h3>+Energía VIP</h3>
        <p className="plan-desc">Todo el programa, con Amira siguiéndote de cerca cada semana: consultas individuales, WhatsApp directo y revisión clínica completa de tus análisis.</p>
        <div className="plan-vip-note">
          <span className="plan-vip-tag">Solo por entrevista</span>
          <p>Cupos muy limitados por cohorte. Coordinás una llamada con Amira para ver si es para vos y armar tu plan a medida.</p>
        </div>
        <ul className="plan-features">
          <li>Todo lo del programa +Energía</li>
          <li>4 consultas 1-a-1 mensuales con Amira durante las 8 semanas</li>
          <li>WhatsApp directo con Amira para tus dudas durante el programa</li>
          <li>Lectura clínica detallada de todos tus análisis</li>
          <li>App +Energía por 12 meses</li>
          <li>Acceso prioritario a futuras cohortes y contenidos</li>
          <li>Mi compromiso: te acompaño hasta que encuentres tu equilibrio</li>
        </ul>
        <a href={VIP_CONTACT_URL} className="btn-primary" style={{ display: "flex", justifyContent: "center", width: "100%" }}>Coordiná una entrevista →</a>
      </div>
    </div>
  );
}

// NOTA: acá vivía <TeamStrip /> (Amira + endocrinóloga + psicóloga + entrenadora).
// Se saca junto con las sesiones grupales: por ahora el acompañamiento es 1 a 1
// con Amira. Si el equipo interdisciplinario vuelve, recuperar de git.
// El CSS (.team-strip) sigue en styles.css sin uso.

function GuaranteeStrip() {
  return (
    <React.Fragment>
      <div className="guarantee reveal">
        <div className="guarantee-seal">
          <strong>🤝</strong>
          <small>mi compromiso</small>
        </div>
        <div>
          <h4>Mi compromiso con vos</h4>
          <p>No te dejo sola a mitad de camino. Te acompaño durante todo el programa hasta que encuentres tu equilibrio — ajustamos juntas las veces que haga falta. Tu progreso es mi trabajo. <strong>— Amira</strong></p>
        </div>
      </div>
      <div className="payment-logos reveal">
        <span>Pago seguro con</span>
        <span className="pay-chip">Mercado Pago</span>
        <span className="pay-chip">Tarjeta</span>
        <span className="pay-chip">Transferencia</span>
        <span className="pay-chip">PayPal</span>
      </div>
    </React.Fragment>
  );
}

// ───────── CTA del test (para quien todavía duda) ─────────
function TestCTA() {
  return (
    <div id="hacer-test" className="test-cta reveal">
      <div className="test-cta-icon">🧬</div>
      <div className="test-cta-text">
        <h3>¿Todavía no estás segura de cuál elegir?</h3>
        <p>Hacé el test validado de 3 minutos y entendé cómo está impactando esta etapa en tu cuerpo y tu ánimo. Vas a tener un mapa claro de lo que más te afecta hoy y qué priorizar.</p>
      </div>
      <a href={TEST_URL} className="btn-secondary test-cta-btn">Hacer el test gratis →</a>
    </div>
  );
}

// `short` = página corta (tráfico tibio/WhatsApp): ocultamos el CTA del test
// gratis para no competir con la compra (una sola acción dominante).
// Cierre de compra corto para la variante corta (WhatsApp): recordatorio de
// precio + botón, SIN repetir todo lo que incluye. Va cerca del final, después
// de resolver objeciones en el FAQ.
function FinalCTA() {
  return (
    <section className="final-cta">
      <div className="container">
        <div className="final-cta-card reveal">
          <div className="final-cta-eyebrow">Programa +Energía · 8 semanas</div>
          <h2>Estás a un paso de <em>sentirte bien otra vez</em></h2>
          <PriceBlock />
          <CheckoutButton>Quiero empezar →</CheckoutButton>
          <div className="final-cta-guarantee">🤝 Mi compromiso: te acompaño hasta lograrlo</div>
          <div className="final-cta-alumni">¿Ya fuiste parte de <strong>+Energía v1.0</strong>? Tenés un <strong>25%</strong> con tu código de alumni <em>(no acumulable con el pago único)</em>.</div>
        </div>
      </div>
    </section>
  );
}

function OfferSection({ variant, short = false }) {
  const isPlanes = variant === "planes";
  return (
    <section className="pricing" id="pricing">
      <div className="container">
        <div className="for-who-compact reveal">
          <div className="fwc-yes">
            <strong>Esto es para vos si…</strong>
            estás atravesando cambios hormonales que pueden empezar desde los 35, sentís que tu cuerpo cambió, y querés un enfoque realista y con ciencia — no una dieta mágica.
          </div>
          <div className="fwc-no">
            <strong>No es para vos si…</strong>
            buscás bajar 10 kilos en un mes o no podés dedicarle 20 minutos por semana a vos misma.
          </div>
        </div>

        <div className="text-center reveal" style={{ marginTop: "56px" }}>
          <div className="section-tag">Invertí en vos</div>
          <h2 className="section-title">
            {isPlanes ? "Elegí cómo querés transitar estas 8 semanas" : "Empezá +Energía hoy"}
          </h2>
          <p className="section-subtitle" style={{ margin: "0 auto" }}>
            {isPlanes
              ? "No es una dieta. No es un curso más. Es el método que entiende tu etapa, con plan personalizado, el acompañamiento 1 a 1 de Amira y su app para guiarte cada día."
              : "El programa completo de 8 semanas, con el acompañamiento de Amira hasta que encuentres tu equilibrio."}
          </p>
        </div>

        <div className="offer-wrap reveal">
          {variant === "stack" && <OfferVariantB />}
          {variant === "planes" && <OfferVariantC />}
          {(!variant || variant === "unico") && <OfferVariantA />}
        </div>

        <GuaranteeStrip />
        {!short && <TestCTA />}
      </div>
    </section>
  );
}

Object.assign(window, { OfferSection, FinalCTA, PRICE, CHECKOUT_URL });