// ============================================================
// Qubi sections — header, hero, how it works, Qubi.to, Qubi.chat
// ============================================================
const Q = window.Q;

// ---------- Header ----------
const Header = () => {
  const [open, setOpen] = React.useState(false);
  const links = [
    { l: "Cómo funciona", h: "#como" },
    { l: "Productos", h: "#productos" },
    { l: "Precios", h: "#precios" },
    { l: "Preguntas", h: "#faq" },
  ];
  return (
    <header style={{ position: "sticky", top: 0, zIndex: 50 }}>
      {/* marquee announcement */}
      <div style={{ background: Q.ink, color: Q.cream, overflow: "hidden", whiteSpace: "nowrap", borderBottom: `2.5px solid ${Q.ink}` }}>
        <div style={{ display: "inline-block", animation: "qmarquee 26s linear infinite", paddingTop: 8, paddingBottom: 8 }}>
          {Array.from({ length: 2 }).map((_, k) => (
            <span key={k} className="eyebrow" style={{ fontSize: 12.5 }}>
              {["PEDÍ TU QUBITO AHORA", "EL QR MÁS LINDO DE TU LOCAL", "GRATIS PARA EMPEZAR", "Qubi.to/tu-negocio", "SIN COMISIONES"].map((t, i) => (
                <span key={i} style={{ margin: "0 14px", color: i % 2 ? Q.mustard : Q.cream }}>{t} <span style={{ color: Q.orange }}>✦</span></span>
              ))}
            </span>
          ))}
        </div>
      </div>

      <div style={{ background: "rgba(244,230,213,.85)", backdropFilter: "blur(10px)", WebkitBackdropFilter: "blur(10px)", borderBottom: `2.5px solid ${Q.ink}` }}>
        <div className="wrap" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "13px 28px", gap: 22 }}>
          <a href="#top" aria-label="Qubi"><QubiWordmark height={44} /></a>
          <nav className="hd-nav" style={{ display: "flex", gap: 4, alignItems: "center" }}>
            {links.map(it => (
              <a key={it.l} href={it.h} style={{ padding: "9px 14px", borderRadius: 9, fontWeight: 700, fontSize: 15.5 }}
                onMouseEnter={e => { e.currentTarget.style.background = Q.card; e.currentTarget.style.boxShadow = `2px 2px 0 ${Q.ink}`; e.currentTarget.style.border = `2px solid ${Q.ink}`; e.currentTarget.style.padding = "7px 12px"; }}
                onMouseLeave={e => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.boxShadow = "none"; e.currentTarget.style.border = "none"; e.currentTarget.style.padding = "9px 14px"; }}
              >{it.l}</a>
            ))}
          </nav>
          <div className="hd-right" style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <a href="#" style={{ fontWeight: 700, fontSize: 15.5 }}>Entrar</a>
            <a href="#hero" className="btn btn-primary btn-sm">Pedí tu Qubito →</a>
          </div>
          <button className="hd-burger" onClick={() => setOpen(!open)} aria-label="Menú" style={{ background: Q.card, border: `2.5px solid ${Q.ink}`, padding: 9, display: "none", borderRadius: 10, boxShadow: `2px 2px 0 ${Q.ink}` }}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d={open ? "M6 6l12 12M6 18L18 6" : "M4 7h16M4 12h16M4 17h16"} stroke={Q.ink} strokeWidth="2.4" strokeLinecap="round" /></svg>
          </button>
        </div>
        {open && (
          <div style={{ padding: "8px 28px 20px", borderTop: `2px solid ${Q.line}`, display: "flex", flexDirection: "column", gap: 2 }}>
            {links.map(l => <a key={l.l} href={l.h} onClick={() => setOpen(false)} style={{ padding: "14px 4px", fontWeight: 700, fontSize: 17, borderBottom: `1.5px solid ${Q.line}` }}>{l.l}</a>)}
            <a href="#hero" className="btn btn-primary" style={{ marginTop: 12 }}>Pedí tu Qubito →</a>
          </div>
        )}
      </div>
      <style>{`@media (max-width: 940px){ .hd-nav,.hd-right{display:none!important} .hd-burger{display:inline-flex!important} }`}</style>
    </header>
  );
};

// ---------- Slug input ----------
const SlugInput = ({ size = "lg", onDark = false }) => {
  const [slug, setSlug] = React.useState("");
  const [focus, setFocus] = React.useState(false);
  const big = size === "lg";
  return (
    <div style={{ width: "100%" }}>
      <form onSubmit={e => e.preventDefault()} className="slug-input" style={{
        display: "flex", alignItems: "stretch", background: Q.card,
        border: `2.5px solid ${Q.ink}`, borderRadius: 14, padding: 6,
        boxShadow: focus ? `6px 7px 0 ${Q.orange}` : `5px 6px 0 ${Q.ink}`, transition: "box-shadow .15s ease",
      }}>
        <div style={{ display: "flex", alignItems: "center", paddingLeft: big ? 18 : 14, whiteSpace: "nowrap", fontFamily: "var(--mono)", fontWeight: 700, fontSize: big ? 17 : 14, color: Q.ink }}>
          qubi<span style={{ margin: "0 -0.14em" }}>.</span>to/
        </div>
        <input value={slug} onChange={e => setSlug(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, "-"))} onFocus={() => setFocus(true)} onBlur={() => setFocus(false)} placeholder="mi-negocio" maxLength={28}
          style={{ flex: 1, minWidth: 0, border: 0, outline: 0, background: "transparent", padding: "0 6px 0 1px", fontSize: big ? 18 : 16, fontWeight: 600, color: onDark ? "rgba(255,255,255,.78)" : Q.muted, fontFamily: "var(--body)" }} />
        <button type="submit" className={`btn btn-primary ${big ? "" : "btn-sm"}`} style={{ borderRadius: 10, border: `2.5px solid ${Q.ink}`, boxShadow: "none" }}>Empezá gratis →</button>
      </form>
      <div className="slug-checks" style={{ marginTop: 14, marginLeft: 4, display: "flex", gap: 18, flexWrap: "wrap", fontSize: 14.5, fontWeight: 600, color: onDark ? "rgba(255,255,255,.92)" : Q.ink_2 || Q.ink }}>
        {["Sin tarjeta", "Listo en 30 seg", "Cancelás cuando quieras"].map((t, i) => (
          <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 7 }}>
            <span style={{ width: 18, height: 18, borderRadius: 999, background: "#21B07C", border: `2px solid ${onDark ? "rgba(255,255,255,.5)" : Q.ink}`, display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="#fff" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
            </span>{t}
          </span>
        ))}
      </div>
      <style>{`.slug-input input::placeholder{ color: inherit; opacity: 1 } @media (max-width:540px){ .slug-input{flex-wrap:wrap; align-items:center} .slug-input>div:first-child{padding:8px 0 8px 12px} .slug-input input{width:100%;padding:8px 12px 8px 6px!important} .slug-input button{width:100%;margin-top:6px} .slug-checks{justify-content:center; margin-left:0; margin-top:22px!important; row-gap:7px!important} }`}</style>
    </div>
  );
};

// ---------- Hero ----------
const Hero = () => {
  return (
    <section id="hero" style={{ paddingTop: 28, paddingBottom: 72, position: "relative", overflow: "hidden" }}>
      {/* subtle halftone texture, contained to the top-right corner */}
      <div className="halftone" style={{ position: "absolute", top: -28, right: -28, width: 320, height: 320, color: Q.orange, opacity: .22, pointerEvents: "none", WebkitMaskImage: "radial-gradient(circle at top right, #000 30%, transparent 70%)", maskImage: "radial-gradient(circle at top right, #000 30%, transparent 70%)" }} />
      <div className="halftone" style={{ position: "absolute", left: -20, bottom: 40, width: 220, height: 220, color: Q.orange, opacity: .22, pointerEvents: "none" }} />

      <div className="wrap hero-grid" style={{ position: "relative", display: "grid", gridTemplateColumns: "1.02fr .98fr", gap: 56, alignItems: "center" }}>
        <div>
          <div className="pill"><Sparkle size={16} color={Q.orange} /> Pedí tu Qubito ahora</div>
          <h1 className="display" style={{ fontSize: "clamp(46px, 6.6vw, 86px)", marginTop: 18, marginBottom: 18 }}>
            El QR que tu local<br />
            <span style={{ position: "relative", display: "inline-block", color: Q.orange }}>
              quiere mostrar
              <svg style={{ position: "absolute", left: -4, right: -4, bottom: -12, width: "calc(100% + 8px)" }} viewBox="0 0 300 18" preserveAspectRatio="none" height="14"><path d="M4 12 C 80 2, 150 16, 296 6" stroke={Q.ink} strokeWidth="6" fill="none" strokeLinecap="round" /></svg>
            </span>.
          </h1>
          <p style={{ fontSize: 19.5, color: Q.muted, maxWidth: 540, lineHeight: 1.5, marginBottom: 28 }}>
            Pedí tu <b style={{ color: Q.ink }}>Qubito</b>: el cubo de diseño para tu mostrador. Lo escanean y entran a todo tu negocio —
            WhatsApp, carta, turnos, ubicación— en <b style={{ color: Q.ink, fontFamily: "var(--mono)" }}>qubi<span style={{ margin: "0 -0.14em" }}>.</span>to<span style={{ color: "#61412f" }}>/mi-negocio</span></b>.
          </p>
          <SlugInput />
          <div className="hero-trust" style={{ display: "flex", gap: 16, marginTop: 34, alignItems: "center", flexWrap: "wrap" }}>
            <div style={{ display: "flex" }}>
              {["💈", "🍕", "✂️", "☕", "🌮"].map((e, i) => (
                <div key={i} style={{ width: 36, height: 36, borderRadius: 10, background: Q.card, marginLeft: i ? -8 : 0, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 16, zIndex: 5 - i }}>{e}</div>
              ))}
            </div>
            <div style={{ fontSize: 14.5, color: Q.muted }}><b style={{ color: Q.ink }}>+3.200 negocios</b> ya tienen su Qubito</div>
          </div>
        </div>

        {/* Right composition */}
        <div className="hero-art" style={{ position: "relative", height: 600, display: "flex", justifyContent: "center", alignItems: "center" }}>
          {/* big orange panel */}
          <div style={{ position: "absolute", width: 380, height: 470, borderRadius: 28, background: Q.orange, border: `2.5px solid ${Q.ink}`, boxShadow: `10px 12px 0 ${Q.ink}`, transform: "rotate(-3deg)" }} className="halftone-panel" />
          {/* phone */}
          <div style={{ position: "absolute", right: 6, top: 18, zIndex: 2 }}>
            <PhoneFrame width={236} tilt={5}><QubiLinkPage name="La Salvaje" handle="lasalvaje" accent={Q.orange} emoji="💈" /></PhoneFrame>
          </div>
          {/* mascot bust */}
          <img src="/landing/assets/qubi-mascot-full.png" alt="Qubito" style={{ position: "absolute", left: -14, top: 0, width: 215, zIndex: 3, transform: "rotate(-4deg)", filter: `drop-shadow(5px 7px 0 rgba(43,27,18,.18))` }} />
          {/* the physical Qubito cube */}
          <div style={{ position: "absolute", left: 0, bottom: 18, zIndex: 4 }}>
            <QubitoCube s={172} />
          </div>
          {/* floating chip */}
          <div className="card hard" style={{ position: "absolute", right: -8, bottom: 96, zIndex: 5, padding: "9px 13px", display: "flex", alignItems: "center", gap: 9, transform: "rotate(4deg)" }}>
            <span style={{ width: 9, height: 9, borderRadius: 999, background: Q.teal, border: `1.5px solid ${Q.ink}` }} />
            <span style={{ fontSize: 12.5, fontWeight: 700 }}>Nuevo turno · Diego · 18:15</span>
          </div>
          <Sparkle size={34} color={Q.ink} style={{ position: "absolute", left: 60, top: 20, zIndex: 5 }} />
        </div>
      </div>
      <style>{`
        .halftone-panel{ background-image: radial-gradient(rgba(43,27,18,.16) 2px, transparent 2.5px); background-size: 15px 15px; background-color:${Q.orange}; }
        @media (max-width: 980px){ .hero-grid{grid-template-columns:1fr!important; gap:28px!important} .hero-art{height:540px!important; transform:scale(.95)} }
      `}</style>
    </section>
  );
};

// ---------- How it works ----------
const HowItWorks = () => {
  const steps = [
    { n: "01", title: "Elegí tu Qubi.to", copy: "Reservá Qubi.to/tu-negocio. Si está libre, es tuyo en un click.", color: Q.orange,
      vis: <div style={{ fontFamily: "var(--mono)", fontSize: 13, background: Q.card, border: `2px solid ${Q.ink}`, borderRadius: 10, padding: "9px 11px", display: "flex", alignItems: "center", gap: 6, boxShadow: `2px 2px 0 ${Q.ink}` }}><span style={{ color: Q.muted }}>Qubi.to/</span><b>la-salvaje</b><span style={{ marginLeft: "auto", color: Q.teal, fontWeight: 800, fontFamily: "var(--body)", fontSize: 11 }}>✓ libre</span></div> },
    { n: "02", title: "Armá tu página", copy: "Botones, redes, carta, horarios, ubicación. Sin diseñador, sin código.", color: Q.teal,
      vis: <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>{["💬 WhatsApp", "🍔 Carta", "📍 Ubicación"].map((l, i) => <div key={i} style={{ background: Q.card, border: `2px solid ${Q.ink}`, borderRadius: 9, padding: "7px 10px", fontSize: 12, fontWeight: 700, boxShadow: `2px 2px 0 ${Q.ink}`, transform: `translateX(${i * 5}px)` }}>{l}</div>)}</div> },
    { n: "03", title: "Pedí tu Qubito", copy: "Te mandamos el cubo físico con tu QR. Lo ponés en el mostrador y listo.", color: Q.berry,
      vis: <div style={{ display: "flex", justifyContent: "center", paddingTop: 4 }}><QubitoCube s={96} spin={true} /></div> },
  ];
  return (
    <section id="como" style={{ background: Q.card, borderTop: `2.5px solid ${Q.ink}`, borderBottom: `2.5px solid ${Q.ink}` }}>
      <div className="wrap">
        <div style={{ textAlign: "center", marginBottom: 56 }}>
          <div className="eyebrow" style={{ color: Q.orange }}>Cómo funciona</div>
          <h2 className="display" style={{ fontSize: "clamp(38px, 5vw, 60px)", margin: "8px 0 12px" }}>Tres pasos. Cero vueltas.</h2>
          <p style={{ color: Q.muted, fontSize: 18, maxWidth: 520, margin: "0 auto" }}>Si sabés pedir un café por WhatsApp, sabés armar tu Qubi.</p>
        </div>
        <div className="steps-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 26 }}>
          {steps.map((s, i) => (
            <div key={i} className="card reveal hard" style={{ padding: 28, position: "relative", background: "#F4E8D7", transform: `rotate(${i === 1 ? 0.6 : i === 2 ? -0.8 : -0.4}deg)` }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 16 }}>
                <span className="poster" style={{ fontSize: 54, color: s.color, lineHeight: 1 }}>{s.n}</span>
                <QubiCube size={46} color={s.color} face={Q.card} expression={["happy", "wink", "wow"][i]} />
              </div>
              <h3 className="display" style={{ fontSize: 25, marginBottom: 8 }}>{s.title}</h3>
              <p style={{ color: Q.muted, fontSize: 15, marginBottom: 16, lineHeight: 1.5 }}>{s.copy}</p>
              <div>{s.vis}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`@media (max-width:860px){ .steps-grid{grid-template-columns:1fr!important} }`}</style>
    </section>
  );
};

// ---------- Qubi.to section ----------
const QubiToSection = () => {
  const feats = ["Personalizá colores y tipos", "Dominio propio opcional", "Analytics de visitas y clicks", "Lo editás desde el celu", "Carta y horarios siempre al día", "Multi-idioma para turistas"];
  return (
    <section id="productos" style={{ background: Q.cream, overflow: "hidden" }}>
      <div className="wrap link-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }}>
        <div>
          <div className="pill" style={{ color: Q.orange }}><QubiCube size={20} color={Q.orange} face={Q.card} /> Qubi.to · gratis para siempre</div>
          <h2 className="display" style={{ fontSize: "clamp(38px, 5vw, 62px)", margin: "16px 0 16px" }}>Tu mini-sitio.<br />En tu cubo.<br />En tu local.</h2>
          <p style={{ fontSize: 18, color: Q.ink_2 || Q.ink, maxWidth: 460, marginBottom: 22, lineHeight: 1.55 }}>
            Pegá tu Qubito en la barra, en la vidriera, en la mesa. Tus clientes escanean y ahí está todo: WhatsApp, carta, horarios, redes y ubicación.
          </p>
          <ul style={{ listStyle: "none", padding: 0, margin: "0 0 28px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 11 }}>
            {feats.map((f, i) => (
              <li key={i} style={{ display: "flex", gap: 9, alignItems: "flex-start", fontSize: 14.5, fontWeight: 600 }}>
                <span style={{ background: Q.orange, border: `2px solid ${Q.ink}`, borderRadius: 6, width: 22, height: 22, display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, marginTop: 1 }}><svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="#fff" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round" /></svg></span>{f}
              </li>
            ))}
          </ul>
          <a href="#hero" className="btn btn-ink">Creá tu Qubi.to gratis →</a>
        </div>
        <div className="link-art" style={{ position: "relative", height: 540, display: "flex", justifyContent: "center", alignItems: "center" }}>
          <Starburst size={300} color={Q.mustard} style={{ position: "absolute", opacity: .9 }} />
          <div style={{ position: "absolute", left: 8, top: 50, zIndex: 1 }}><PhoneFrame width={204} tilt={-9}><QubiLinkPage name="Café Compás" handle="cafecompas" accent={Q.teal} emoji="☕" /></PhoneFrame></div>
          <div style={{ position: "absolute", right: 6, top: 8, zIndex: 2 }}><PhoneFrame width={232} tilt={6}><QubiLinkPage name="La Salvaje" handle="lasalvaje" accent={Q.orange} emoji="💈" /></PhoneFrame></div>
          <div style={{ position: "absolute", left: "46%", bottom: -6, transform: "translateX(-50%)", zIndex: 3 }}><QubitoCube s={134} /></div>
        </div>
      </div>
      <style>{`@media (max-width:980px){ .link-grid{grid-template-columns:1fr!important} .link-art{height:500px!important;margin-top:16px} }`}</style>
    </section>
  );
};

// ---------- Qubi.chat section ----------
const QubiChatSection = () => {
  const feats = [{ i: "💬", t: "Chat en tu Qubi.to y en WhatsApp" }, { i: "📞", t: "Atiende llamadas con voz natural" }, { i: "🧠", t: "Aprende de tu carta, FAQ y reglas" }, { i: "🤝", t: "Deriva a un humano cuando hace falta" }];
  return (
    <section style={{ background: Q.teal, color: "#fff", overflow: "hidden", borderTop: `2.5px solid ${Q.ink}`, borderBottom: `2.5px solid ${Q.ink}` }}>
      <div className="halftone" style={{ position: "absolute", right: 30, top: 40, width: 200, height: 200, color: "#fff", opacity: .12 }} />
      <div className="wrap chat-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }}>
        <div className="chat-art" style={{ position: "relative", height: 560, display: "flex", justifyContent: "center", alignItems: "center", order: 0 }}>
          <div style={{ position: "absolute", left: 24, top: 30, transform: "rotate(-5deg)", zIndex: 1 }}><ChatMockup width={252} /></div>
          <div className="card hard" style={{ position: "absolute", right: 0, top: 50, padding: "13px 15px", maxWidth: 210, transform: "rotate(5deg)", zIndex: 3, color: Q.ink }}>
            <span style={{ background: Q.teal, color: "#fff", padding: "2px 8px", borderRadius: 999, fontSize: 10, fontWeight: 800, letterSpacing: ".06em", border: `1.5px solid ${Q.ink}` }}>NO INVENTA</span>
            <div style={{ fontSize: 12.5, lineHeight: 1.4, marginTop: 7 }}>Si no sabe, deriva a un humano. <b>Nunca</b> inventa precios ni stock.</div>
          </div>
          <div className="hard" style={{ position: "absolute", left: 0, bottom: 24, background: Q.ink, color: Q.cream, borderRadius: 14, padding: "11px 15px", border: `2.5px solid ${Q.ink}`, transform: "rotate(-3deg)", zIndex: 4, display: "flex", alignItems: "center", gap: 10 }}>
            <div style={{ width: 34, height: 34, borderRadius: 9, background: Q.mustard, border: `2px solid ${Q.cream}`, display: "flex", alignItems: "center", justifyContent: "center" }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 3v18M8 7v10M16 7v10M4 11v2M20 11v2" stroke={Q.ink} strokeWidth="2.6" strokeLinecap="round" /></svg>
            </div>
            <div><div style={{ fontSize: 10.5, opacity: .7 }}>Llamada entrante</div><div style={{ fontWeight: 800, fontSize: 12.5 }}>Qubi atendió · 1:24</div></div>
          </div>
        </div>
        <div>
          <div className="pill" style={{ color: Q.teal }}><QubiCube size={20} color={Q.teal} face={Q.card} expression="happy" /> Qubi.chat · 7 días gratis</div>
          <h2 className="display" style={{ fontSize: "clamp(38px, 5vw, 62px)", margin: "16px 0 16px", color: "#fff" }}>Un asistente que <span style={{ background: Q.mustard, color: Q.ink, padding: "0 10px", borderRadius: 8, border: `2.5px solid ${Q.ink}`, display: "inline-block" }}>nunca</span> duerme.</h2>
          <p style={{ fontSize: 18, maxWidth: 480, marginBottom: 20, lineHeight: 1.55, color: "rgba(255,255,255,.92)" }}>Tu Qubi atiende por <b>chat y voz</b>, 24/7. Aprende de tu negocio. Responde precios, horarios y turnos. Y cuando no sabe, deriva al humano sin drama.</p>
          <div style={{ display: "flex", flexDirection: "column", gap: 9, marginBottom: 28 }}>
            {feats.map((f, i) => <div key={i} style={{ display: "flex", gap: 10, alignItems: "center", background: "rgba(255,255,255,.12)", padding: "10px 14px", borderRadius: 10, fontWeight: 700, fontSize: 14.5, border: `2px solid rgba(255,255,255,.35)` }}><span style={{ fontSize: 18 }}>{f.i}</span>{f.t}</div>)}
          </div>
          <a href="#hero" className="btn btn-cream">Probar Qubi.chat gratis →</a>
        </div>
      </div>
      <style>{`@media (max-width:980px){ .chat-grid{grid-template-columns:1fr!important} .chat-art{order:1;height:520px!important} }`}</style>
    </section>
  );
};

window.Header = Header;
window.SlugInput = SlugInput;
window.Hero = Hero;
window.HowItWorks = HowItWorks;
window.QubiToSection = QubiToSection;
window.QubiChatSection = QubiChatSection;