// PrimeLanding.jsx — Allen Prime membership landing page + "Vende en Allen" public landing.
// Triggered from home promo tile or marketing links.

const { useState: usePrimeState } = React;

const PrimeLanding = ({ onNav }) => {
  const [plan, setPlan] = usePrimeState("monthly");
  const { isMobile } = useViewport();
  const toast = useToast();

  return (
    <div style={{ background: "var(--bg)" }}>
      {/* Hero */}
      <section style={{ position: "relative", background: "var(--hub-black)", color: "#fff", overflow: "hidden" }}>
        <div style={{ position: "absolute", top: -100, right: -100, width: 480, height: 480, borderRadius: "50%", background: "radial-gradient(circle, rgba(52,143,221,.35) 0%, transparent 70%)" }} />
        <div style={{ maxWidth: "var(--container)", margin: "0 auto", padding: isMobile ? "48px 16px 64px" : "96px 32px", display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: 48, alignItems: "center", position: "relative", zIndex: 2 }}>
          <div>
            <div style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "6px 14px", background: "rgba(52,143,221,.15)", border: "1px solid rgba(52,143,221,.4)", borderRadius: "9999px", marginBottom: 18 }}>
              <span style={{ width: 8, height: 8, borderRadius: 4, background: "var(--primary)" }} />
              <span style={{ font: "700 11px var(--font-sans)", color: "var(--vert-ecom-end)", letterSpacing: ".06em", textTransform: "uppercase" }}>Nuevo en México</span>
            </div>
            <h1 className={isMobile ? "display" : "display-lg"} style={{ color: "#fff" }}>
              Pide hoy, <br />recíbelo <span style={{ color: "var(--vert-ecom-end)" }}>mañana</span>.
            </h1>
            <p className="body-lg" style={{ color: "rgba(255,255,255,.78)", marginTop: 16, maxWidth: 480 }}>
              Allen Prime te da envío en 24 horas en miles de productos elegibles, descuentos exclusivos, y soporte prioritario. Tu primer mes es gratis.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 28, flexWrap: "wrap" }}>
              <button onClick={() => toast("Tu mes gratis comienza ahora")} style={{ background: "var(--primary)", color: "#fff", border: 0, padding: "16px 32px", borderRadius: "9999px", font: "700 15px var(--font-sans)", cursor: "pointer", boxShadow: "var(--elev-cta-blue)" }}>
                Activa 30 días gratis
              </button>
              <button onClick={() => document.getElementById("plans")?.scrollIntoView({ behavior: "smooth" })} style={{ background: "transparent", color: "#fff", border: "1.5px solid rgba(255,255,255,.4)", padding: "16px 32px", borderRadius: "9999px", font: "700 15px var(--font-sans)", cursor: "pointer" }}>
                Ver planes
              </button>
            </div>
            <p className="body-sm" style={{ color: "rgba(255,255,255,.5)", marginTop: 14, fontSize: 12 }}>Sin compromiso. Cancela cuando quieras.</p>
          </div>
          {!isMobile && (
            <div style={{ position: "relative" }}>
              <div style={{ width: "100%", aspectRatio: 1, borderRadius: "50%", background: "linear-gradient(135deg, var(--primary), var(--vert-ecom-end))", display: "grid", placeItems: "center", boxShadow: "0 20px 60px rgba(52,143,221,.4)" }}>
                <div style={{ width: "70%", aspectRatio: 1, borderRadius: "50%", background: "var(--hub-black)", display: "grid", placeItems: "center" }}>
                  <div style={{ textAlign: "center" }}>
                    <div style={{ font: "900 96px var(--font-sans)", color: "var(--vert-ecom-end)", letterSpacing: "-.04em", lineHeight: 1 }}>24h</div>
                    <div style={{ font: "600 14px var(--font-sans)", color: "#fff", marginTop: 8, letterSpacing: ".05em", textTransform: "uppercase" }}>Envío garantizado</div>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      </section>

      {/* Benefits */}
      <section style={{ maxWidth: "var(--container)", margin: "0 auto", padding: isMobile ? "64px 16px" : "96px 32px" }}>
        <h2 className="headline-lg" style={{ textAlign: "center", maxWidth: 720, margin: "0 auto" }}>Lo que te da Prime</h2>
        <p className="body-lg" style={{ textAlign: "center", color: "var(--fg-muted)", marginTop: 12, marginBottom: 48, maxWidth: 540, marginLeft: "auto", marginRight: "auto" }}>
          Una membresía, todo el marketplace. Sin letras chiquitas.
        </p>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: 20 }}>
          {[
            { icon: "local_shipping", title: "Envío en 24 h",        sub: "En miles de productos elegibles del marketplace. Llega antes o tu envío es gratis para siempre." },
            { icon: "credit_card",    title: "Hasta 5% en cashback", sub: "Devuelto a tu cuenta Allen al instante. Acumúlalo y úsalo en cualquier vertical." },
            { icon: "verified",       title: "Devolución sin costo", sub: "Hasta 60 días en cualquier producto Prime. Pasamos por él, sin formularios largos." },
            { icon: "favorite",       title: "Acceso anticipado",     sub: "A ofertas relámpago, drops de marcas y rebajas estacionales — 48 h antes que el resto." },
            { icon: "support_agent",  title: "Soporte prioritario",   sub: "WhatsApp directo a un agente humano. Sin filas, sin bots, en menos de 5 minutos." },
            { icon: "storefront",     title: "Beneficios cruzados",   sub: "Pronto: Allen Food sin comisión de envío y Allen Travel con tarifas preferentes." },
          ].map(b => (
            <div key={b.icon} style={{ padding: 28, background: "var(--bg-elev-1)", border: "1px solid var(--border-soft)", borderRadius: "var(--radius-xl)" }}>
              <div style={{ width: 56, height: 56, borderRadius: 28, background: "var(--primary-soft)", display: "grid", placeItems: "center", marginBottom: 18 }}>
                <AllenIcon name={b.icon} size={28} color="var(--primary-press)" />
              </div>
              <h3 className="title-lg">{b.title}</h3>
              <p className="body" style={{ marginTop: 8 }}>{b.sub}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Plans */}
      <section id="plans" style={{ background: "var(--bg-elev-2)", padding: isMobile ? "64px 16px" : "96px 32px" }}>
        <div style={{ maxWidth: 880, margin: "0 auto" }}>
          <h2 className="headline-lg" style={{ textAlign: "center" }}>Un solo plan, paga como te acomode</h2>
          <p className="body-lg" style={{ textAlign: "center", color: "var(--fg-muted)", marginTop: 12, marginBottom: 40 }}>El primer mes es gratis. Cancela cuando quieras.</p>

          {/* Toggle */}
          <div style={{ display: "inline-flex", background: "var(--bg-elev-1)", borderRadius: "9999px", padding: 4, marginBottom: 32, marginLeft: "50%", transform: "translateX(-50%)", border: "1px solid var(--border-soft)" }}>
            {[
              { id: "monthly", label: "Mensual", save: null },
              { id: "annual",  label: "Anual",   save: "Ahorra $396" },
            ].map(p => (
              <button key={p.id} onClick={() => setPlan(p.id)}
                style={{
                  padding: "10px 22px", borderRadius: "9999px",
                  background: plan === p.id ? "var(--hub-black)" : "transparent",
                  color: plan === p.id ? "#fff" : "var(--fg-strong)",
                  border: 0, font: plan === p.id ? "700 14px var(--font-sans)" : "500 14px var(--font-sans)",
                  cursor: "pointer", display: "flex", alignItems: "center", gap: 8,
                }}>
                {p.label}
                {p.save && <span style={{ font: "700 10px var(--font-sans)", color: "var(--success)", background: plan === p.id ? "rgba(66,184,131,.2)" : "var(--success-bg)", padding: "3px 8px", borderRadius: "9999px" }}>{p.save}</span>}
              </button>
            ))}
          </div>

          <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: 16 }}>
            {/* Free trial card */}
            <div style={{ background: "var(--bg-elev-1)", border: "1px solid var(--border-soft)", borderRadius: "var(--radius-xl)", padding: 32 }}>
              <div className="label-sm" style={{ color: "var(--fg-muted)" }}>Para probar</div>
              <div className="price-xl" style={{ marginTop: 12 }}>Gratis</div>
              <div className="body-sm" style={{ marginTop: 4 }}>30 días sin cargo</div>
              <ul style={{ listStyle: "none", padding: 0, margin: "24px 0", display: "flex", flexDirection: "column", gap: 10 }}>
                {["Envío 24 h ilimitado", "Cashback 3%", "Acceso anticipado a ofertas", "Devolución 30 días"].map(f => (
                  <li key={f} style={{ display: "flex", alignItems: "flex-start", gap: 8, font: "500 14px var(--font-sans)", color: "var(--fg-strong)" }}>
                    <AllenIcon name="check" size={18} color="var(--success)" weight={3} /> {f}
                  </li>
                ))}
              </ul>
              <button onClick={() => toast("Tu mes gratis comienza ahora")} style={{ width: "100%", background: "transparent", color: "var(--fg-strong)", border: "1.5px solid var(--border-input)", padding: "14px 20px", borderRadius: "9999px", font: "700 14px var(--font-sans)", cursor: "pointer" }}>Iniciar mi prueba</button>
            </div>

            {/* Paid plan */}
            <div style={{ background: "var(--hub-black)", color: "#fff", border: "1px solid var(--hub-black)", borderRadius: "var(--radius-xl)", padding: 32, position: "relative", overflow: "hidden" }}>
              <div style={{ position: "absolute", top: 16, right: 16, font: "700 10px var(--font-sans)", color: "var(--vert-ecom-end)", background: "rgba(52,143,221,.15)", padding: "4px 10px", borderRadius: "9999px", letterSpacing: ".05em", textTransform: "uppercase" }}>Más popular</div>
              <div className="label-sm" style={{ color: "rgba(255,255,255,.6)" }}>Allen Prime {plan === "annual" ? "Anual" : "Mensual"}</div>
              <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginTop: 12 }}>
                <span className="price-xl" style={{ color: "#fff" }}>${plan === "annual" ? "1,392" : "149"}</span>
                <span style={{ font: "500 14px var(--font-sans)", color: "rgba(255,255,255,.6)" }}>MXN / {plan === "annual" ? "año" : "mes"}</span>
              </div>
              {plan === "annual" && <div className="body-sm" style={{ color: "rgba(255,255,255,.6)", marginTop: 4 }}>$116 MXN al mes facturado anual</div>}
              <ul style={{ listStyle: "none", padding: 0, margin: "24px 0", display: "flex", flexDirection: "column", gap: 10 }}>
                {["Todo lo del plan gratis", "Cashback 5% (en vez de 3%)", "Devolución 60 días", "Soporte WhatsApp prioritario", "Beneficios cruzados Food, Travel, Experts"].map(f => (
                  <li key={f} style={{ display: "flex", alignItems: "flex-start", gap: 8, font: "500 14px var(--font-sans)", color: "#fff" }}>
                    <AllenIcon name="check" size={18} color="var(--vert-ecom-end)" weight={3} /> {f}
                  </li>
                ))}
              </ul>
              <button onClick={() => toast("Plan activado")} style={{ width: "100%", background: "var(--primary)", color: "#fff", border: 0, padding: "14px 20px", borderRadius: "9999px", font: "700 14px var(--font-sans)", cursor: "pointer", boxShadow: "var(--elev-cta-blue)" }}>
                Activar Prime
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section style={{ maxWidth: 760, margin: "0 auto", padding: isMobile ? "64px 16px" : "96px 32px" }}>
        <h2 className="headline-lg" style={{ textAlign: "center" }}>Preguntas frecuentes</h2>
        <div style={{ marginTop: 32, display: "flex", flexDirection: "column", gap: 4 }}>
          {[
            { q: "¿Cómo funciona el mes gratis?", a: "Activas Prime y los primeros 30 días son sin cargo. Te avisamos 5 días antes de que termine la prueba para que decidas si continúas o cancelas. Si cancelas antes, no se te cobra nada." },
            { q: "¿Qué productos son elegibles para envío en 24 h?", a: "Más de 12,000 productos del marketplace. Verás un badge Prime en la tarjeta y en la página de detalle. Sellers locales en Vallarta participan al 100%." },
            { q: "¿Puedo cambiar entre plan mensual y anual?", a: "Sí. Cambias cuando quieras desde Mi cuenta. Si pasas a anual, te damos crédito proporcional por los días no usados del mensual." },
            { q: "¿El cashback expira?", a: "No. Tu cashback se acumula en tu cuenta Allen y lo puedes usar en cualquier vertical (Ecommerce, Food, Travel, Experts) sin fecha límite." },
            { q: "¿Qué pasa si cancelo?", a: "Pierdes los beneficios al final del periodo pagado. Tu cashback acumulado lo conservas para siempre." },
          ].map(f => <FAQItem key={f.q} q={f.q} a={f.a} />)}
        </div>
      </section>

      {/* Final CTA */}
      <section style={{ background: "linear-gradient(120deg, var(--primary), var(--vert-ecom-end))", padding: isMobile ? "48px 16px" : "80px 32px", textAlign: "center", color: "#fff" }}>
        <h2 className="headline-lg" style={{ color: "#fff" }}>Empieza tu mes gratis</h2>
        <p className="body-lg" style={{ color: "rgba(255,255,255,.9)", marginTop: 12, maxWidth: 480, margin: "12px auto 28px" }}>Activa en 30 segundos. Cancela cuando quieras.</p>
        <button onClick={() => toast("Prime activado")} style={{ background: "#fff", color: "var(--primary-press)", border: 0, padding: "18px 36px", borderRadius: "9999px", font: "700 16px var(--font-sans)", cursor: "pointer", boxShadow: "var(--elev-3)" }}>
          Activa 30 días gratis
        </button>
      </section>
    </div>
  );
};

const FAQItem = ({ q, a }) => {
  const [open, setOpen] = usePrimeState(false);
  return (
    <div style={{ borderTop: "1px solid var(--border-soft)" }}>
      <button onClick={() => setOpen(o => !o)} style={{ width: "100%", textAlign: "left", padding: "18px 0", background: "transparent", border: 0, cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16 }}>
        <span className="title">{q}</span>
        <AllenIcon name="chevron_down" size={20} style={{ transform: open ? "rotate(180deg)" : "rotate(0)", transition: "transform var(--dur-fast) var(--ease-out-quart)", color: "var(--fg-muted)" }} />
      </button>
      {open && <p className="body" style={{ padding: "0 0 18px", color: "var(--fg-muted)" }}>{a}</p>}
    </div>
  );
};

// =====================================================================
// SellerLanding — public page for "Vende en Allen" (before onboarding)
// =====================================================================
const SellerLanding = ({ onNav }) => {
  const { isMobile } = useViewport();
  return (
    <div style={{ background: "var(--bg)" }}>
      {/* Hero */}
      <section style={{ background: "linear-gradient(135deg, var(--bg-elev-2) 0%, var(--bg) 100%)", padding: isMobile ? "48px 16px" : "96px 32px" }}>
        <div style={{ maxWidth: "var(--container)", margin: "0 auto", display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1.2fr 1fr", gap: 48, alignItems: "center" }}>
          <div>
            <div className="label-sm" style={{ color: "var(--primary)" }}>Vende en Allen</div>
            <h1 className={isMobile ? "display" : "display-lg"} style={{ marginTop: 8 }}>
              Tu negocio, <br />en todo México.
            </h1>
            <p className="body-lg" style={{ color: "var(--fg-muted)", marginTop: 16, maxWidth: 540 }}>
              Únete a más de 284 sellers que venden en el marketplace de Allen. Sin renta de stand, sin inventario en consigna, sin contratos largos. Solo cobras cuando vendes.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 28, flexWrap: "wrap" }}>
              <button onClick={() => onNav("seller-onboarding")} style={{ background: "var(--primary)", color: "#fff", border: 0, padding: "16px 32px", borderRadius: "9999px", font: "700 15px var(--font-sans)", cursor: "pointer", boxShadow: "var(--elev-cta-blue)" }}>
                Empezar gratis
              </button>
              <button onClick={() => document.getElementById("seller-faq")?.scrollIntoView({ behavior: "smooth" })} style={{ background: "transparent", color: "var(--fg-strong)", border: "1.5px solid var(--border-input)", padding: "16px 32px", borderRadius: "9999px", font: "700 15px var(--font-sans)", cursor: "pointer" }}>
                Preguntas frecuentes
              </button>
            </div>
            <div style={{ display: "flex", gap: 24, marginTop: 32, flexWrap: "wrap" }}>
              {[
                { v: "284", l: "Sellers activos" },
                { v: "$2.4M", l: "GMV semanal" },
                { v: "24 h", l: "Aprobación promedio" },
              ].map(s => (
                <div key={s.l}>
                  <div className="display-sm">{s.v}</div>
                  <div className="body-sm">{s.l}</div>
                </div>
              ))}
            </div>
          </div>
          {!isMobile && (
            <div style={{ background: "var(--hub-black)", borderRadius: "var(--radius-xl)", padding: 32, color: "#fff", boxShadow: "var(--elev-3)" }}>
              <div className="label-sm" style={{ color: "rgba(255,255,255,.6)" }}>Caso de éxito</div>
              <div className="title-lg" style={{ color: "#fff", marginTop: 8 }}>Ferretería El Tornillo</div>
              <p className="body" style={{ color: "rgba(255,255,255,.8)", marginTop: 12 }}>
                "En 4 meses con Allen aumentamos nuestras ventas 3x sin abrir otra sucursal. La aprobación tomó 18 horas y los pagos llegan cada lunes."
              </p>
              <div style={{ display: "flex", justifyContent: "space-between", marginTop: 24, paddingTop: 20, borderTop: "1px solid rgba(255,255,255,.15)" }}>
                <div>
                  <div className="price" style={{ color: "var(--vert-ecom-end)" }}>$184K</div>
                  <div className="body-sm" style={{ color: "rgba(255,255,255,.6)" }}>GMV / mes</div>
                </div>
                <div>
                  <div className="price" style={{ color: "var(--vert-ecom-end)" }}>142</div>
                  <div className="body-sm" style={{ color: "rgba(255,255,255,.6)" }}>Pedidos / mes</div>
                </div>
                <div>
                  <div className="price" style={{ color: "var(--vert-ecom-end)" }}>★ 4.8</div>
                  <div className="body-sm" style={{ color: "rgba(255,255,255,.6)" }}>Rating</div>
                </div>
              </div>
            </div>
          )}
        </div>
      </section>

      {/* How it works */}
      <section style={{ maxWidth: "var(--container)", margin: "0 auto", padding: isMobile ? "64px 16px" : "96px 32px" }}>
        <h2 className="headline-lg" style={{ textAlign: "center" }}>3 pasos para empezar</h2>
        <div style={{ marginTop: 48, display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: 24 }}>
          {[
            { n: 1, t: "Regístrate gratis", s: "5 minutos. Solo pedimos RFC, datos bancarios y un correo. Sin contratos largos ni inversión inicial." },
            { n: 2, t: "Sube tu catálogo", s: "Carga productos uno por uno o por archivo. Te ayudamos con fotos y descripciones si las necesitas." },
            { n: 3, t: "Cobra cada lunes", s: "Allen procesa los pagos y deposita en tu CLABE. Ves todo en tu dashboard: ventas, comisión, depósitos." },
          ].map(s => (
            <div key={s.n} style={{ padding: 28, background: "var(--bg-elev-1)", border: "1px solid var(--border-soft)", borderRadius: "var(--radius-xl)" }}>
              <div style={{ width: 56, height: 56, borderRadius: 28, background: "var(--hub-black)", color: "#fff", display: "grid", placeItems: "center", font: "800 22px var(--font-sans)", marginBottom: 18 }}>{s.n}</div>
              <h3 className="title-lg">{s.t}</h3>
              <p className="body" style={{ marginTop: 8 }}>{s.s}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Pricing strip */}
      <section style={{ background: "var(--bg-elev-2)", padding: isMobile ? "48px 16px" : "72px 32px" }}>
        <div style={{ maxWidth: 880, margin: "0 auto", textAlign: "center" }}>
          <h2 className="headline-lg">Pricing transparente</h2>
          <p className="body-lg" style={{ color: "var(--fg-muted)", marginTop: 12, marginBottom: 32 }}>Sin renta mensual ni fees ocultos. Solo pagas cuando vendes.</p>
          <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: 16 }}>
            {[
              { v: "$0", l: "Renta mensual",       sub: "Para siempre" },
              { v: "8.5%", l: "Comisión Allen",     sub: "Solo por venta concretada" },
              { v: "2.9% + $4", l: "Procesamiento", sub: "Costo del banco" },
            ].map(c => (
              <div key={c.l} style={{ background: "var(--bg-elev-1)", border: "1px solid var(--border-soft)", borderRadius: "var(--radius-lg)", padding: 24 }}>
                <div className="display-sm" style={{ color: "var(--primary)" }}>{c.v}</div>
                <div className="title-sm" style={{ marginTop: 6 }}>{c.l}</div>
                <div className="body-sm" style={{ marginTop: 4 }}>{c.sub}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{ background: "var(--hub-black)", color: "#fff", padding: isMobile ? "48px 16px" : "80px 32px", textAlign: "center" }}>
        <h2 className="headline-lg" style={{ color: "#fff" }}>Empieza hoy. Vende mañana.</h2>
        <p className="body-lg" style={{ color: "rgba(255,255,255,.78)", marginTop: 12, maxWidth: 480, margin: "12px auto 28px" }}>Aprobación promedio en 24 horas. Empieza el registro ahora.</p>
        <button onClick={() => onNav("seller-onboarding")} style={{ background: "var(--primary)", color: "#fff", border: 0, padding: "18px 36px", borderRadius: "9999px", font: "700 16px var(--font-sans)", cursor: "pointer", boxShadow: "var(--elev-cta-blue)" }}>
          Crea tu tienda gratis
        </button>
      </section>
    </div>
  );
};

window.PrimeLanding = PrimeLanding;
window.SellerLanding = SellerLanding;