// ============================================================
// Qubi sections 2 — modules, use cases, pricing, FAQ, CTA, footer
// ============================================================
const Q = window.Q;

// ---------- Modules ----------
const Modules = () => {
  const mods = [
    { id: "agenda", name: "Qubi Agenda", tag: "Barberías, peluquerías, profesionales", color: Q.mustard, copy: "Turnos online, recordatorios automáticos y calendario sincronizado. Tus clientes sacan turno desde el cubo.", bullets: ["Turnos 24/7 desde tu Qubi.to", "Recordatorios por WhatsApp", "Sincroniza con Google Calendar", "Bloqueos de horario inteligentes"], mockup: <AgendaMockup width={252} tilt={-3} /> },
    { id: "food", name: "Qubi Food", tag: "Restaurantes, cafés, deliveries", color: Q.orange, copy: "Tu propia tienda de delivery, con tu marca y sin comisiones de terceros. Pedidos por web o WhatsApp.", bullets: ["Carta con fotos, precios y variantes", "Sin comisiones — pagás solo el plan", "Checkout por WhatsApp o web", "Se integra con tu cocina"], mockup: <FoodMockup width={252} tilt={3} /> },
    { id: "club", name: "Qubi Club", tag: "Para fidelizar y hacer volver clientes", color: Q.berry, copy: "Convertí clientes en regulares. Sellos por compra, puntos, premios canjeables y descuentos sorpresa — todo desde el mismo cubo.", bullets: ["Tarjeta de sellos digital", "Puntos por consumo, canjeables", "Premios para cumpleaños y top fans", "Avisos por WhatsApp"], mockup: <ClubMockup width={252} tilt={-3} /> },
  ];
  return (
    <section style={{ background: Q.cream }}>
      <div className="wrap">
        <div style={{ textAlign: "center", marginBottom: 52 }}>
          <div className="eyebrow" style={{ color: Q.muted }}>Los módulos</div>
          <h2 className="display" style={{ fontSize: "clamp(38px, 5vw, 62px)", margin: "8px 0 12px" }}>Sumá lo que tu<br />negocio necesita.</h2>
          <p style={{ color: Q.muted, fontSize: 18, maxWidth: 520, margin: "0 auto" }}>Activá uno, dos o todos. Pagás solo lo que usás.</p>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 26 }}>
          {mods.map((m, i) => (
            <div key={m.id} className="mod-card card hard-lg reveal" style={{ padding: 40, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, alignItems: "center", position: "relative", overflow: "hidden", background: Q.card }}>
              <div className="halftone" style={{ position: "absolute", right: -40, top: -40, width: 200, height: 200, color: m.color, opacity: .18 }} />
              <div className="mod-copy" style={{ order: i % 2 === 0 ? 1 : 2, position: "relative" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 13, marginBottom: 14 }}>
                  <div style={{ width: 52, height: 52, borderRadius: 13, background: m.color, border: `2.5px solid ${Q.ink}`, display: "flex", alignItems: "center", justifyContent: "center", boxShadow: `3px 3px 0 ${Q.ink}` }}><QubiCube size={38} color={Q.cream} face={m.color} expression={["wink", "happy", "wow"][i]} /></div>
                  <div><div className="display" style={{ fontSize: 30 }}>{m.name}</div><div style={{ fontSize: 13, color: Q.muted, fontWeight: 600 }}>{m.tag}</div></div>
                </div>
                <p style={{ fontSize: 17, lineHeight: 1.55, color: Q.ink, marginBottom: 18 }}>{m.copy}</p>
                <ul style={{ listStyle: "none", padding: 0, margin: "0 0 24px", display: "flex", flexDirection: "column", gap: 9 }}>
                  {m.bullets.map((b, bi) => <li key={bi} style={{ display: "flex", gap: 10, alignItems: "center", fontSize: 14.5, fontWeight: 600 }}><span style={{ background: m.color, color: "#fff", border: `2px solid ${Q.ink}`, borderRadius: 6, width: 22, height: 22, display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}><svg width="12" height="12" viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" stroke="#fff" strokeWidth="3.5" strokeLinecap="round" fill="none" /></svg></span>{b}</li>)}
                </ul>
                <a href="#hero" className="btn" style={{ background: m.color, color: m.color === Q.mustard ? Q.ink : "#fff" }}>Activar {m.name} →</a>
              </div>
              <div className="mod-mock" style={{ order: i % 2 === 0 ? 2 : 1, display: "flex", justifyContent: "center", position: "relative" }}>{m.mockup}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`@media (max-width:900px){ .mod-card{grid-template-columns:1fr!important;padding:28px!important} .mod-copy{order:1!important} .mod-mock{order:2!important} }`}</style>
    </section>
  );
};

// ---------- Use cases + testimonials ----------
const UseCases = () => {
  const rubros = [["Barberías", "💈"], ["Cafeterías", "☕"], ["Restaurantes", "🍔"], ["Peluquerías", "✂️"], ["Tiendas", "🛍️"], ["Estudios", "🎨"], ["Profesionales", "💼"], ["Gimnasios", "💪"], ["Hoteles", "🏨"], ["Lavanderías", "🧺"]];
  const testis = [
    { q: "Pegué el Qubito en la vidriera y empezaron a sacar turno solos. No atiendo más llamadas mientras corto.", a: "Lucas, La Salvaje", r: "Barbería · Palermo", c: Q.orange, e: "💈" },
    { q: "Qubi responde a las 11 de la noche cuando preguntan si tenemos sin gluten. Antes lo perdía.", a: "Juli, Café Compás", r: "Cafetería · Villa Crespo", c: Q.teal, e: "☕" },
    { q: "Saqué mi tienda de las apps de delivery. Ahora cobro 100% y el cliente pide desde el cubo.", a: "Diego, La Burguería", r: "Hamburguesería · Núñez", c: Q.berry, e: "🍔" },
  ];
  return (
    <section style={{ background: Q.card, borderTop: `2.5px solid ${Q.ink}`, borderBottom: `2.5px solid ${Q.ink}` }}>
      <div className="wrap">
        <div style={{ textAlign: "center", marginBottom: 38 }}>
          <div className="eyebrow" style={{ color: Q.orange }}>Para quién es Qubi</div>
          <h2 className="display" style={{ fontSize: "clamp(38px, 5vw, 58px)", margin: "8px 0 12px" }}>Sea cual sea tu negocio.</h2>
          <p style={{ color: Q.muted, fontSize: 18, maxWidth: 520, margin: "0 auto" }}>Si tenés clientes, tenés un Qubi.</p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(140px,1fr))", gap: 12, marginBottom: 60 }}>
          {rubros.map((r, i) => (
            <div key={i} className="card" style={{ padding: "18px 14px", display: "flex", flexDirection: "column", alignItems: "center", gap: 8, transition: "transform .15s ease, box-shadow .15s ease", cursor: "default" }}
              onMouseEnter={e => { e.currentTarget.style.transform = "translate(-2px,-2px)"; e.currentTarget.style.boxShadow = `4px 5px 0 ${Q.ink}`; }}
              onMouseLeave={e => { e.currentTarget.style.transform = "none"; e.currentTarget.style.boxShadow = "none"; }}>
              <div style={{ fontSize: 28 }}>{r[1]}</div><div style={{ fontWeight: 700, fontSize: 14 }}>{r[0]}</div>
            </div>
          ))}
          <div style={{ background: Q.ink, color: Q.cream, borderRadius: 18, padding: "18px 14px", border: `2.5px solid ${Q.ink}`, display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 800, fontSize: 14, textAlign: "center", lineHeight: 1.2 }}>y muchos<br />más →</div>
        </div>
        <div className="testis" style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 22 }}>
          {testis.map((t, i) => (
            <div key={i} className="card hard" style={{ padding: 24, transform: `rotate(${[-0.7, 0.6, -0.4][i]}deg)`, borderTop: `7px solid ${t.c}` }}>
              <div className="poster" style={{ fontSize: 46, color: t.c, lineHeight: 0.6, marginBottom: 10 }}>"</div>
              <p style={{ fontSize: 16, lineHeight: 1.5, fontWeight: 600, margin: "0 0 20px" }}>{t.q}</p>
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <div style={{ width: 38, height: 38, borderRadius: 10, background: t.c, border: `2.5px solid ${Q.ink}`, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 18 }}>{t.e}</div>
                <div><div style={{ fontWeight: 800, fontSize: 14 }}>{t.a}</div><div style={{ fontSize: 12, color: Q.muted }}>{t.r}</div></div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`@media (max-width:800px){ .testis{grid-template-columns:1fr!important} }`}</style>
    </section>
  );
};

// ---------- Pricing ----------
const Pricing = () => {
  const [annual, setAnnual] = React.useState(true);
  const plans = [
    { name: "Qubi.to", tag: "Tu mini-sitio + QR", priceLabel: "Gratis", priceSub: "para siempre", color: Q.orange, dark: false, features: ["URL Qubi.to/tu-negocio", "Botones, redes, ubicación, horarios", "QR digital listo para imprimir", "Analytics básico", "Personalización de colores"], cta: "Empezá gratis", ctaStyle: "btn-cream" },
    { name: "Qubi.chat", tag: "Sumá el asistente IA", price: { m: 29, a: 23 }, color: Q.mustard, dark: true, popular: true, features: ["Todo lo de Qubi.to", "Chat IA en web y WhatsApp", "Atiende llamadas con voz", "Aprende de tu negocio", "Deriva a humano", "Hasta 2.000 mensajes/mes"], cta: "Probar 7 días gratis", ctaStyle: "btn-primary" },
    { name: "Módulos", tag: "Agenda, Food, Club o todo", price: { m: 49, a: 39 }, color: Q.berry, dark: false, features: ["Todo lo de Qubi.chat", "Qubi.agenda (turnos)", "Qubi.food (delivery propio)", "Qubi.club (fidelización)", "Mensajes ilimitados", "Soporte prioritario"], cta: "Activar módulos", ctaStyle: "btn-ink" },
  ];
  return (
    <section id="precios" style={{ background: Q.cream }}>
      <div className="wrap">
        <div style={{ textAlign: "center", marginBottom: 28 }}>
          <div className="eyebrow" style={{ color: Q.berry }}>Precios</div>
          <h2 className="display" style={{ fontSize: "clamp(38px, 5vw, 62px)", margin: "8px 0 12px" }}>Empezá gratis.<br />Crecé cuando quieras.</h2>
          <p style={{ color: Q.muted, fontSize: 18, maxWidth: 520, margin: "0 auto 22px" }}>Sin contratos. Sin sorpresas. Cancelás con un click.</p>
          <div style={{ display: "inline-flex", background: Q.card, borderRadius: 999, padding: 5, border: `2.5px solid ${Q.ink}`, boxShadow: `3px 3px 0 ${Q.ink}` }}>
            {[{ l: "Mensual", v: false }, { l: "Anual", v: true, b: "-20%" }].map(o => (
              <button key={o.l} onClick={() => setAnnual(o.v)} style={{ padding: "9px 20px", borderRadius: 999, border: 0, background: annual === o.v ? Q.ink : "transparent", color: annual === o.v ? Q.cream : Q.ink, fontWeight: 700, fontSize: 14, display: "inline-flex", alignItems: "center", gap: 8 }}>{o.l}{o.b && <span style={{ background: annual === o.v ? Q.mustard : Q.mustard, color: Q.ink, padding: "2px 8px", borderRadius: 999, fontSize: 11, fontWeight: 800, border: `1.5px solid ${Q.ink}` }}>{o.b}</span>}</button>
            ))}
          </div>
        </div>
        <div className="plans" style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 22, alignItems: "stretch", paddingTop: 18 }}>
          {plans.map((p, i) => (
            <div key={i} className="hard-lg" style={{ background: p.dark ? Q.ink : Q.card, color: p.dark ? Q.cream : Q.ink, borderRadius: 22, padding: 32, border: `2.5px solid ${Q.ink}`, position: "relative", transform: p.popular ? "translateY(-12px)" : "none", display: "flex", flexDirection: "column" }}>
              {p.popular && <div className="poster" style={{ position: "absolute", top: -15, left: "50%", transform: "translateX(-50%)", background: Q.mustard, color: Q.ink, padding: "6px 16px", borderRadius: 999, fontSize: 14, whiteSpace: "nowrap", border: `2.5px solid ${Q.ink}`, boxShadow: `3px 3px 0 ${Q.ink}` }}>MÁS ELEGIDO</div>}
              <div style={{ display: "flex", alignItems: "center", gap: 11, marginBottom: 6 }}>
                <QubiCube size={34} color={p.dark ? Q.mustard : p.color} face={p.dark ? Q.ink : Q.card} /><div className="display" style={{ fontSize: 26 }}>{p.name}</div>
              </div>
              <div style={{ fontSize: 14, color: p.dark ? "rgba(255,255,255,.7)" : Q.muted, marginBottom: 22 }}>{p.tag}</div>
              <div style={{ marginBottom: 22 }}>
                {p.priceLabel ? (<><div className="poster" style={{ fontSize: 50, color: p.color }}>{p.priceLabel}</div><div style={{ fontSize: 14, color: p.dark ? "rgba(255,255,255,.7)" : Q.muted }}>{p.priceSub}</div></>)
                  : (<><div style={{ display: "flex", alignItems: "baseline", gap: 6 }}><span style={{ fontSize: 17, opacity: .6 }}>USD</span><span className="poster" style={{ fontSize: 50, color: p.color }}>{annual ? p.price.a : p.price.m}</span><span style={{ fontSize: 16, opacity: .6 }}>/mes</span></div><div style={{ fontSize: 11.5, color: p.dark ? "rgba(255,255,255,.55)" : Q.muted, marginTop: 4 }}>* precios placeholder · a confirmar</div></>)}
              </div>
              <ul style={{ listStyle: "none", padding: 0, margin: "0 0 26px", display: "flex", flexDirection: "column", gap: 10, flex: 1 }}>
                {p.features.map((f, fi) => <li key={fi} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 14 }}><span style={{ background: p.color, color: p.color === Q.mustard ? Q.ink : "#fff", border: `2px solid ${p.dark ? Q.cream : Q.ink}`, borderRadius: 999, width: 19, height: 19, display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, marginTop: 2 }}><svg width="11" height="11" viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" /></svg></span>{f}</li>)}
              </ul>
              <button className={`btn ${p.ctaStyle}`} style={{ width: "100%" }}>{p.cta} →</button>
            </div>
          ))}
        </div>
        <div style={{ textAlign: "center", marginTop: 30, fontSize: 14.5, color: Q.muted }}>¿Algo más grande? <a href="#" style={{ color: Q.orange, fontWeight: 800 }}>Hablá con nosotros →</a></div>
      </div>
      <style>{`@media (max-width:900px){ .plans{grid-template-columns:1fr!important} .plans>div{transform:none!important} }`}</style>
    </section>
  );
};

// ---------- FAQ ----------
const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  const items = [
    { q: "¿Necesito saber de tecnología?", a: "Para nada. Si usás WhatsApp e Instagram, ya sabés lo suficiente. Qubi se arma con clicks. Sin código, sin servidores, sin dolor de cabeza." },
    { q: "¿Qué es exactamente el Qubito?", a: "Es el cubo físico de diseño que te mandamos con tu QR impreso. Lo ponés en el mostrador, la mesa o la vidriera. Tus clientes lo escanean y entran a tu Qubi.to." },
    { q: "¿Puedo cancelar cuando quiera?", a: "Sí, con un click. Sin permanencias ni llamados. Tu Qubi.to sigue funcionando gratis aunque canceles los módulos pagos." },
    { q: "¿Qubi habla varios idiomas?", a: "Sí. Entiende y responde en español, inglés, portugués y francés. Si un turista te escribe en otro idioma, Qubi se adapta solo." },
    { q: "¿Mis datos están seguros?", a: "Sí. Tus datos y los de tus clientes están encriptados y hosteados en infraestructura cloud certificada. Nunca vendemos ni compartimos datos." },
    { q: "¿Puedo usar mi propio dominio?", a: "Sí. Tu Qubi puede vivir en tunegocio.com en vez de Qubi.to/tunegocio. Configurás los DNS una vez y listo, sin costo extra." },
  ];
  return (
    <section id="faq" style={{ background: Q.card, borderTop: `2.5px solid ${Q.ink}`, borderBottom: `2.5px solid ${Q.ink}` }}>
      <div className="wrap-tight">
        <div className="faq-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1.5fr", gap: 56, alignItems: "flex-start" }}>
          <div style={{ position: "sticky", top: 110 }}>
            <div className="eyebrow" style={{ color: Q.orange }}>Preguntas frecuentes</div>
            <h2 className="display" style={{ fontSize: "clamp(36px, 4.5vw, 52px)", margin: "8px 0 16px" }}>Dudas. Las respondemos.</h2>
            <p style={{ color: Q.muted, fontSize: 16, marginBottom: 16 }}>Si tu pregunta no está acá, escribinos y te respondemos sin bot.</p>
            <a href="#" className="btn btn-cream btn-sm">Escribinos →</a>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {items.map((it, i) => {
              const isOpen = open === i;
              return (
                <div key={i} className={isOpen ? "card hard" : "card"} style={{ padding: 0, overflow: "hidden", background: isOpen ? Q.card : "rgba(255,248,238,.6)" }}>
                  <button onClick={() => setOpen(isOpen ? -1 : i)} style={{ width: "100%", textAlign: "left", background: "transparent", border: 0, padding: "18px 22px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, fontFamily: "var(--display)", fontWeight: 800, fontSize: 18.5, color: Q.ink }}>
                    <span>{it.q}</span>
                    <span style={{ flexShrink: 0, width: 30, height: 30, borderRadius: 8, background: isOpen ? Q.orange : Q.cream, color: isOpen ? "#fff" : Q.ink, border: `2px solid ${Q.ink}`, display: "inline-flex", alignItems: "center", justifyContent: "center", transform: isOpen ? "rotate(45deg)" : "none", transition: "transform .2s ease" }}><svg width="13" height="13" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="3" strokeLinecap="round" /></svg></span>
                  </button>
                  {isOpen && <div style={{ padding: "0 22px 20px", fontSize: 16, color: Q.muted, lineHeight: 1.55 }}>{it.a}</div>}
                </div>
              );
            })}
          </div>
        </div>
      </div>
      <style>{`@media (max-width:860px){ .faq-grid{grid-template-columns:1fr!important} .faq-grid>div:first-child{position:static!important} }`}</style>
    </section>
  );
};

// ---------- Final CTA ----------
const FinalCTA = () => {
  return (
    <section style={{ background: Q.orange, color: Q.cream, padding: "104px 0", overflow: "hidden", position: "relative" }}>
      <div className="halftone" style={{ position: "absolute", inset: 0, color: Q.ink, opacity: .12 }} />
      <Starburst size={420} color="rgba(255,255,255,.12)" style={{ position: "absolute", top: -120, left: -120 }} />
      <div className="wrap-tight" style={{ position: "relative", textAlign: "center" }}>
        <div style={{ display: "flex", justifyContent: "center", marginBottom: 22 }}><QubitoCube s={150} /></div>
        <h2 className="display" style={{ fontSize: "clamp(42px, 6.2vw, 82px)", marginBottom: 16, color: Q.cream }}>Pedí tu Qubito ahora.</h2>
        <p style={{ fontSize: 19, maxWidth: 540, margin: "0 auto 30px", color: "rgba(255,251,242,.92)" }}>En lo que tardás en leer esto, ya podrías tener tu Qubi vivo en Qubi.to/tu-negocio.</p>
        <div style={{ maxWidth: 620, margin: "0 auto" }}><SlugInput onDark /></div>
      </div>
    </section>
  );
};

// ---------- Footer ----------
const Footer = () => {
  const cols = [
    { h: "Producto", links: ["Qubi.to", "Qubi.chat", "Qubi.agenda", "Qubi.food", "Qubi.club", "Precios"] },
    { h: "Recursos", links: ["Blog", "Guías", "Plantillas", "Soporte"] },
    { h: "Empresa", links: ["Nosotros", "Trabajá con Qubi", "Prensa", "Contacto"] },
    { h: "Legal", links: ["Términos", "Privacidad", "Cookies"] },
  ];
  return (
    <footer style={{ background: Q.ink, color: Q.cream, padding: "72px 0 30px" }}>
      <div className="wrap">
        <div className="ft-grid" style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr 1fr 1fr", gap: 40, marginBottom: 52 }}>
          <div>
            <img src="/landing/assets/qubi-logo.svg" alt="Qubi" style={{ height: 40 }} />
            <p style={{ marginTop: 16, fontSize: 14, opacity: .7, lineHeight: 1.5, maxWidth: 270 }}>El cubo que pone tu negocio online. Mini-sitio, QR de diseño y asistente IA — en una sola URL.</p>
            <div style={{ marginTop: 18, display: "inline-flex", background: "rgba(255,255,255,.08)", borderRadius: 999, padding: 4, border: "1.5px solid rgba(255,255,255,.18)" }}>
              {["ES", "EN"].map((l, i) => <button key={l} style={{ padding: "6px 14px", borderRadius: 999, border: 0, background: i === 0 ? "rgba(255,255,255,.16)" : "transparent", color: Q.cream, fontWeight: 700, cursor: "pointer", fontSize: 13 }}>{l}</button>)}
            </div>
          </div>
          {cols.map(c => (
            <div key={c.h}>
              <div className="eyebrow" style={{ fontSize: 12.5, marginBottom: 14, color: Q.mustard }}>{c.h}</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 9 }}>{c.links.map(l => <li key={l}><a href="#" style={{ fontSize: 14, opacity: .72 }}>{l}</a></li>)}</ul>
            </div>
          ))}
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16, paddingTop: 26, borderTop: "1.5px solid rgba(255,255,255,.12)", fontSize: 13, opacity: .6 }}>
          <div>© 2026 Qubi · Qubi.to · Hecho con cariño en LATAM 🧡</div>
          <div style={{ display: "flex", gap: 12 }}>{["IG", "TW", "IN", "YT"].map(s => <a key={s} href="#" style={{ width: 32, height: 32, borderRadius: 8, background: "rgba(255,255,255,.1)", display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 11, fontWeight: 700 }}>{s}</a>)}</div>
        </div>
      </div>
      <style>{`@media (max-width:860px){ .ft-grid{grid-template-columns:1fr 1fr!important;gap:30px!important} } @media (max-width:520px){ .ft-grid{grid-template-columns:1fr!important} }`}</style>
    </footer>
  );
};

window.Modules = Modules;
window.UseCases = UseCases;
window.Pricing = Pricing;
window.FAQ = FAQ;
window.FinalCTA = FinalCTA;
window.Footer = Footer;