// Wasabil Startup — HomePage · intent picker + supporting sections

// ---- Compact verticales grid — clickable cards with verde limón hover ----
function VerticalesStrip() {
  const cards = [
    { n: "01", tag: "Facturación", title: "Documentos que aprenden de ti.", href: "producto.html#facturacion", icon: <IconDoc size={20}/>, art: "" },
    { n: "02", tag: "eCommerce", title: "Shopify + Mercado Libre sincronizados.", href: "producto.html#ecommerce", icon: <IconCart size={20}/>, art: "" },
    { n: "03", tag: "Gastos extranjeros", title: "Recupera IVA de Google, Meta, AWS.", href: "producto.html#gastos", icon: <IconGlobe size={20}/>, art: "" },
    { n: "04", tag: "Conciliación", title: "Tu banco cruzado solo · 98% auto.", href: "producto.html#conciliacion", icon: <IconBank size={20}/>, art: "" },
    { n: "05", tag: "MCP & API", title: "Conecta Claude, Cursor o tu agente.", href: "producto.html#mcp", icon: <IconSpark size={20}/>, art: "" },
  ];
  return (
    <section className="section">
      <div className="container-wide">
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 40, flexWrap: "wrap", gap: 24 }}>
          <div>
            <Reveal><div className="eyebrow"><span className="dot"/>Cinco verticales</div></Reveal>
            <Reveal delay={1}>
              <h2 className="display-2" style={{ marginTop: 20, maxWidth: "18ch" }}>
                Una plataforma · toda tu operación tributaria.
              </h2>
            </Reveal>
          </div>
          <Reveal delay={2}>
            <p className="lede">
              Hoy cubrimos cinco verticales críticas. Mañana, cobranza, pagos integrados y más.
            </p>
          </Reveal>
        </div>

        <Reveal>
          <div className="verticales-grid">
            {cards.map((c, i) => (
              <a key={c.n} href={c.href} className="vertical-card" style={{ animationDelay: `${0.1 + i * 0.07}s` }}>
                {c.art && (
                  <img src={c.art} alt="" className="vertical-art" aria-hidden="true"/>
                )}
                <div style={{ position: "relative" }}>
                  <div className="vertical-head">
                    <div className="vertical-icon">{c.icon}</div>
                    <span className="mono vertical-num">{c.n}</span>
                  </div>
                  <div className="caption vertical-tag" style={{ marginTop: 16 }}>{c.tag}</div>
                  <h3 className="vertical-title">{c.title}</h3>
                </div>
                <div className="vertical-cta">
                  <span style={{ width: 20, height: 1, background: "currentColor", opacity: 0.4 }}/>
                  <span>Ver en detalle</span>
                  <ArrowUpRight size={12}/>
                </div>
              </a>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ---- Metrics band ----
function MetricsBand() {
  const stats = [
    { n: "500+", l: "Empresas activas" },
    { n: "$2.4B", l: "Facturado / año" },
    { n: "8M+", l: "Documentos emitidos" },
    { n: "99%", l: "Precisión SII" },
  ];
  return (
    <section style={{ padding: "80px 0", position: "relative" }}>
      <div className="container-wide">
        <Reveal>
          <div className="glass" style={{ padding: "48px 56px", display: "flex", justifyContent: "space-around", alignItems: "center", gap: 32, flexWrap: "wrap" }}>
            {stats.map((s, i, arr) => (
              <React.Fragment key={i}>
                <div style={{ textAlign: "center" }}>
                  <div style={{ fontSize: 42, letterSpacing: "-0.035em", lineHeight: 1, color: i === 0 ? "var(--signal)" : "var(--ink)", fontWeight: 400 }}>{s.n}</div>
                  <div className="caption" style={{ marginTop: 10 }}>{s.l}</div>
                </div>
                {i < arr.length - 1 && <div style={{ width: 1, height: 40, background: "var(--hairline)" }}/>}
              </React.Fragment>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ---- Testimonials (single rotator) ----
function Testimonials() {
  const items = [
    { q: "Apareció Wasabilito, lo configurai y después cada vez que te llega un invoice de Facebook o Google, ¡pum! lo declara solo. Incluso podi reemplazar tu facturador electrónico por Wasabilito.", n: "Gonzalo Reutter", r: "CEO, Makezu", c: "GR" },
    { q: "Fui de los primeros usuarios. Tremenda app, siempre escuchando las recomendaciones. Muy útil y rentable desde el primer mes.", n: "Javier Hasbún", r: "CEO, Tu Firma Digital", c: "JH" },
    { q: "Híper pro que tu facturador tenga un servidor MCP. Lo conecté con una app de IA, le pedí que revisara todos mis mails con boletas sin factura de compra. Las encontró y las emitió. Listo.", n: "Andrés Arellano", r: "CEO, Magnar", c: "AA" },
  ];
  const [idx, setIdx] = React.useState(0);

  React.useEffect(() => {
    const t = setInterval(() => setIdx(i => (i + 1) % items.length), 7000);
    return () => clearInterval(t);
  }, []);

  const clients = [
    { name: "Fintual", src: "assets/clients/fintual.png", h: 24 },
    { name: "The Qualis", src: "assets/clients/qualis.webp", h: 28 },
    { name: "Froens", src: "assets/clients/froens.png", h: 42 },
    { name: "Duoc UC", src: "assets/clients/duoc.png", h: 50 },
    { name: "Tika", src: "assets/clients/tika.webp", h: 42 },
    { name: "Gux Technologies", src: "assets/clients/gux.webp", h: 32 },
  ];

  return (
    <section className="section">
      <div className="container-wide">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 72, alignItems: "center" }}>
          <div>
            <Reveal><div className="eyebrow"><span className="dot"/>Clientes</div></Reveal>
            <Reveal delay={1}>
              <h2 className="display-2" style={{ marginTop: 20 }}>
                500+ empresas<br/>ya operan con Wasabil.
              </h2>
            </Reveal>
            <Reveal delay={2}>
              <p className="lede" style={{ marginTop: 24 }}>
                Fintechs reguladas, e-commerce, universidades y estudios profesionales. Todos resolvieron el mismo dolor para enfocarse en lo que importa.
              </p>
            </Reveal>
            <Reveal delay={3}>
              <div style={{ marginTop: 40, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1, background: "var(--hairline)", border: "1px solid var(--hairline)", borderRadius: 16, overflow: "hidden" }}>
                {clients.map(c => (
                  <div key={c.name} style={{ background: "var(--bg-1)", padding: "28px 16px", display: "grid", placeItems: "center", minHeight: 100 }}>
                    <img src={c.src} alt={c.name} style={{ height: c.h, width: "auto", opacity: 0.95, filter: "grayscale(1) invert(1)" }}/>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>

          <Reveal delay={2}>
            <div className="glass" style={{ padding: 44, minHeight: 360, display: "flex", flexDirection: "column", justifyContent: "space-between", position: "relative", overflow: "hidden" }}>
              <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 1, background: "linear-gradient(90deg, transparent, var(--signal), transparent)" }}/>
              <div>
                <div className="caption" style={{ marginBottom: 20, color: "var(--signal)" }}>0{idx + 1} / 0{items.length}</div>
                <blockquote key={idx} style={{ margin: 0, fontSize: 20, lineHeight: 1.45, letterSpacing: "-0.015em", color: "var(--ink)", animation: "fadeIn 0.6s cubic-bezier(0.32,0.72,0,1)" }}>
                  "{items[idx].q}"
                </blockquote>
              </div>
              <figcaption style={{ display: "flex", alignItems: "center", gap: 14, marginTop: 36, paddingTop: 20, borderTop: "1px solid var(--hairline)" }}>
                <div style={{ width: 40, height: 40, borderRadius: "50%", background: "var(--signal)", color: "var(--bg)", display: "grid", placeItems: "center", fontSize: 13, fontWeight: 600 }}>{items[idx].c}</div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13.5, color: "var(--ink)", fontWeight: 500 }}>{items[idx].n}</div>
                  <div style={{ fontSize: 12, color: "var(--muted)" }}>{items[idx].r}</div>
                </div>
                <div style={{ display: "flex", gap: 4 }}>
                  {items.map((_, i) => (
                    <button key={i} onClick={() => setIdx(i)} aria-label={`Testimonio ${i+1}`} style={{ width: i === idx ? 20 : 6, height: 6, borderRadius: 999, border: "none", padding: 0, cursor: "pointer", background: i === idx ? "var(--signal)" : "var(--hairline-2)", transition: "all 0.5s cubic-bezier(0.32,0.72,0,1)" }}/>
                  ))}
                </div>
              </figcaption>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ---- CTA band ----
function CtaBand() {
  return (
    <section style={{ padding: "60px 0 120px" }}>
      <div className="container-wide">
        <Reveal>
          <div className="glass" style={{ padding: "72px 56px", display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 56, alignItems: "center", position: "relative", overflow: "hidden" }}>
            <div style={{ position: "absolute", top: -100, right: -80, width: 400, height: 400, borderRadius: "50%", background: "radial-gradient(circle, rgba(168,242,108,0.2), transparent 70%)", pointerEvents: "none" }}/>
            <div style={{ position: "relative" }}>
              <h2 className="display-2">
                Dale un respiro<br/>a tu contador.
              </h2>
              <p style={{ marginTop: 20, maxWidth: "46ch", color: "var(--ink-2)", fontSize: 17, lineHeight: 1.55 }}>
                10 minutos para conectar. Y tu vida tributaria cambia para siempre.
              </p>
              <div style={{ display: "flex", gap: 10, marginTop: 32, flexWrap: "wrap" }}>
                <a className="btn btn-primary" href="agenda.html">
                  <Calendar size={13}/> Agenda una reunión <span className="arrow"><ArrowRight size={13}/></span>
                </a>
                <a className="btn btn-ghost" href="pricing.html">
                  <span className="btn-ic"><IconSpark size={13}/></span> Prueba gratis <span className="arrow"><ArrowRight size={13}/></span>
                </a>
              </div>
            </div>
            <div style={{ position: "relative", height: 260, display: "grid", placeItems: "center" }}>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function CalculatorSection() {
  return (
    <section id="calculadora" className="section" style={{ borderTop: "1px solid var(--hairline)" }}>
      <div className="container-wide">
        <Calculator/>
      </div>
    </section>
  );
}

function HomePage() {
  return (
    <>
      <AmbientCanvas/>
      <Nav current="home"/>
      <IntentPicker/>
      <BackersMarquee/>
      <VerticalesStrip/>
      <MetricsBand/>
      <Testimonials/>
      <CalculatorSection/>
      <CtaBand/>
      <Footer/>
    </>
  );
}

Object.assign(window, { HomePage });