// Wasabil — Home page
const { useState: useStateHome, useEffect: useEffectHome } = React;

// ---- Video Modal ----
const DEMO_VIDEO_ID = "HzHZA-_lHjY";

function VideoModal({ onClose, videoId }) {
  useEffectHome(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = prev;
    };
  }, [onClose]);
  return (
    <div
      onClick={onClose}
      style={{
        position: "fixed", inset: 0, zIndex: 1000,
        background: "rgba(10,10,10,0.85)",
        backdropFilter: "blur(8px)",
        display: "grid", placeItems: "center",
        padding: "5vh 5vw",
        animation: "fadeIn 0.2s ease",
      }}
    >
      <div
        onClick={e => e.stopPropagation()}
        style={{
          position: "relative",
          width: "100%", maxWidth: 1100,
          aspectRatio: "16/9",
          borderRadius: 14,
          overflow: "hidden",
          boxShadow: "0 24px 80px rgba(0,0,0,0.5)",
          background: "#000",
        }}
      >
        <button
          onClick={onClose}
          aria-label="Cerrar"
          style={{
            position: "absolute", top: -44, right: 0,
            width: 36, height: 36,
            borderRadius: "50%",
            border: "1px solid rgba(255,255,255,0.2)",
            background: "rgba(255,255,255,0.08)",
            color: "#f0ede5",
            fontSize: 18, lineHeight: 1,
            cursor: "pointer",
            display: "grid", placeItems: "center",
            fontFamily: "var(--sans)",
          }}
        >×</button>
        <iframe
          width="100%" height="100%"
          src={`https://www.youtube.com/embed/${videoId}?autoplay=1&rel=0&modestbranding=1`}
          title="Demo Wasabil"
          frameBorder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowFullScreen
          style={{ display: "block" }}
        />
      </div>
    </div>
  );
}

// ---- Hero ----
function Hero() {
  const [showVideo, setShowVideo] = useStateHome(false);
  return (
    <section className="hero-section">
      <div className="container-wide" style={{ position: "relative" }}>
        <div className="hero-grid">
          <div>
            <div className="pill" style={{ marginBottom: 18 }}>
              <span className="pill-tag">Nuevo</span>
              <span>MCP para Claude & Cursor — factura con prompts</span>
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M9 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>
            </div>
            <h1 className="display-1 serif">
              Finanzas <em className="italic" style={{ fontFamily: "var(--serif)", color: "var(--accent)" }}>sin fricción</em> para negocios que crecen.
            </h1>
            <p className="lede" style={{ marginTop: 18 }}>
              La plataforma de facturación electrónica para empresas chilenas que contratan servicios digitales extranjeros — Google, Meta, AWS, Shopify y más. Emite facturas de compra, recupera IVA y declara al SII desde una sola plataforma <em style={{ fontStyle: "italic" }}>AI-first</em>.
            </p>
            <div className="hero-cta-row" style={{ display: "flex", gap: 12, marginTop: 24, alignItems: "center", flexWrap: "nowrap" }}>
              <a className="btn" href="https://app.wasabil.com/register" style={{ background: "var(--accent)", color: "#0b140b", fontWeight: 600, padding: "14px 22px", fontSize: 15 }}>
                Prueba gratis
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </a>
              <a className="btn btn-ghost" href="agenda.html" style={{ padding: "14px 22px", fontSize: 15 }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><rect x="3" y="5" width="18" height="16" rx="2" stroke="currentColor" strokeWidth="1.8"/><path d="M3 9h18M8 3v4M16 3v4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>
                Agenda una reunión
              </a>
              <a className="btn-link hero-demo-link" href="#" onClick={(e) => { e.preventDefault(); setShowVideo(true); }} style={{ fontSize: 14, display: "inline-flex", alignItems: "center", gap: 8 }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="1.6"/><path d="M10 8l6 4-6 4V8z" fill="currentColor"/></svg>
                Ver demo <span className="arrow">→</span>
              </a>
            </div>
            <div className="hero-stats-row" style={{ display: "flex", gap: 24, marginTop: 24, alignItems: "center", flexWrap: "nowrap" }}>
              <div>
                <div className="serif" style={{ fontSize: 28, lineHeight: 1 }}>500+</div>
                <div className="caption" style={{ marginTop: 6 }}>Empresas activas</div>
              </div>
              <div style={{ width: 1, height: 36, background: "var(--rule)" }} />
              <div>
                <div className="serif" style={{ fontSize: 28, lineHeight: 1 }}>$2.4B</div>
                <div className="caption" style={{ marginTop: 6 }}>Facturado el último año</div>
              </div>
              <div style={{ width: 1, height: 36, background: "var(--rule)" }} />
              <div>
                <div className="serif" style={{ fontSize: 28, lineHeight: 1 }}>99%</div>
                <div className="caption" style={{ marginTop: 6 }}>Precisión SII</div>
              </div>
            </div>
          </div>
          <div className="hero-product-shot-wrap">
            <HeroProductShot />
          </div>
        </div>

        {/* mascota — genki dama, energía */}
        <div className="hero-mascot" style={{ position: "absolute", right: -30, bottom: -60, pointerEvents: "none", zIndex: 2 }}>
          <Mascot pose="genki" size={180} />
        </div>
      </div>
      {showVideo && <VideoModal videoId={DEMO_VIDEO_ID} onClose={() => setShowVideo(false)} />}
    </section>
  );
}

function HeroProductShot() {
  // Entry animation: plays every time the shot enters the viewport (so it's
  // visible on initial load AND on scroll-back). No session lockout.
  const [played, setPlayed] = React.useState(false);
  const rootRef = React.useRef(null);

  React.useEffect(() => {
    const el = rootRef.current;
    if (!el) return;
    // Start hidden; flip to played with a small delay so hero copy lands first.
    const t = setTimeout(() => setPlayed(true), 240);
    return () => clearTimeout(t);
  }, []);

  // Helper: returns style for a staggered element. `delay` in ms.
  // When not yet played, element starts slightly offset & transparent.
  // When played, transitions to its natural position.
  const anim = (delay, opts = {}) => {
    const { y = 14, x = 0, scale = 1, rotate = 0, duration = 700 } = opts;
    const active = played;
    return {
      opacity: active ? 1 : 0,
      transform: active
        ? `translate3d(0,0,0) scale(1) rotate(${rotate}deg)`
        : `translate3d(${x}px,${y}px,0) scale(${scale})`,
      transition: `opacity ${duration}ms cubic-bezier(0.22, 1, 0.36, 1) ${delay}ms, transform ${duration}ms cubic-bezier(0.22, 1, 0.36, 1) ${delay}ms`,
      willChange: "opacity, transform",
    };
  };

  const rows = [
    {
      type: "Nota de Crédito",
      typeBg: "#1a2a1a",
      date: "20/Abr/2026",
      folio: "F26453",
      source: "miotratienda.myshopify.com",
      int: "20260400132866",
      name: "Lorraine M",
      sub: "Relacionado a",
      subLink: "Boleta · Folio 183600",
      sub2: "Devolución / Reembolso",
      invoice: "138840",
      neto: "CLP 25.202",
      iva: "CLP 4.788",
      total: "CLP 29.990",
      time: "20/04/26 11:25 hrs",
      ref: "11309604779",
      accent: "var(--accent)",
    },
    {
      type: "Boleta",
      typeBg: "#f0ede3",
      date: "20/Abr/2026",
      folio: "F184589",
      source: "mitienda.myshopify.com",
      int: "20260400134444",
      name: "George M",
      sub: "george@mcfly.com",
      invoice: "128508",
      neto: "CLP 66.370",
      iva: "CLP 12.610",
      total: "CLP 78.980",
      time: "20/04/26 16:51 hrs",
      ref: "21803064509",
      accent: "var(--ink-2)",
    },
    {
      type: "Boleta",
      typeBg: "#f0ede3",
      date: "20/Abr/2026",
      folio: "F184609",
      source: "Dave M",
      int: "20260400134964",
      name: "Dave M",
      sub: "Dave@mcfly.com",
      sub2: "1.234.567-8",
      invoice: "138984",
      neto: "CLP 37.811",
      iva: "CLP 7.184",
      total: "CLP 44.995",
      time: "20/04/26 19:58 hrs",
      ref: "21606140585",
      accent: "var(--ink-2)",
    },
  ];

  const NavItem = ({ icon, label, active }) => (
    <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 14px", background: active ? "#1f1f1f" : "transparent", borderRadius: 6, fontSize: 12.5, color: active ? "#fff" : "#bbb", cursor: "default" }}>
      <span style={{ width: 14, height: 14, display: "inline-grid", placeItems: "center", opacity: 0.8 }}>{icon}</span>
      {label}
    </div>
  );

  const SubItem = ({ icon, label }) => (
    <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "6px 14px 6px 28px", fontSize: 12, color: "#999", cursor: "default" }}>
      <span style={{ fontSize: 11, opacity: 0.7 }}>{icon}</span>
      {label}
    </div>
  );

  return (
    <div ref={rootRef} style={{ position: "relative" }}>
      <div
        className="window"
        style={{
          perspective: "1400px",
          overflow: "hidden",
          boxShadow: "var(--shadow-lg)",
          opacity: played ? 1 : 0,
          transform: played
            ? "perspective(1400px) rotateY(-4deg) rotateX(2deg) scale(1)"
            : "perspective(1400px) rotateY(-4deg) rotateX(2deg) scale(0.985)",
          transition: "opacity 900ms cubic-bezier(0.22, 1, 0.36, 1), transform 900ms cubic-bezier(0.22, 1, 0.36, 1)",
          willChange: "opacity, transform",
        }}
      >
        <div className="window-bar">
          <div className="window-dots"><span/><span/><span/></div>
          <div className="window-title">app.wasabil.cl · dmc motors spa</div>
          <div style={{ width: 40 }} />
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "220px 1fr", background: "#fff", minHeight: 520 }}>
          {/* Sidebar */}
          <aside style={{ background: "#15130f", padding: "18px 10px", color: "#fff", display: "flex", flexDirection: "column", gap: 2 }}>
            <div style={{ padding: "4px 12px 18px", display: "flex", alignItems: "center" }}>
              <img src="assets/logo-wasabil-dark.png" alt="Wasabil" style={{ height: 26, width: "auto" }}/>
            </div>
            <div style={{ margin: "4px 8px 14px", padding: 10, background: "#1f1f1f", borderRadius: 8, display: "flex", alignItems: "center", gap: 10 }}>
              <div style={{ width: 32, height: 32, borderRadius: "50%", background: "oklch(0.55 0.18 135)", display: "grid", placeItems: "center", color: "#0a0a0a", fontSize: 13, fontWeight: 700 }}>DM</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 12, fontWeight: 500 }}>DMC Motors SpA</div>
                <div style={{ fontSize: 10, color: "#888" }}>21.010.201-5</div>
              </div>
              <span style={{ fontSize: 11, color: "#666" }}>›</span>
            </div>
            <NavItem icon="↗" label="Ventas" active />
            <NavItem icon="↙" label="Gastos" />
            <NavItem icon="📋" label="Guías de Despacho" />

            <div style={{ padding: "16px 14px 6px", fontSize: 10, color: "#666", textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 600, marginTop: 6 }}>
              Declarar Ventas <span style={{ float: "right" }}>⌃</span>
            </div>
            <SubItem icon="+" label="Emitir Factura" />
            <SubItem icon="+" label="Emitir Boleta" />
            <SubItem icon="+" label="Emitir Guía de Despacho" />
            <SubItem icon="▤" label="Emitir desde Archivo" />
            <SubItem icon="⏱" label="Programar Factura" />
            <SubItem icon="⇌" label="Integraciones E-commerce" />

            <div style={{ padding: "16px 14px 6px", fontSize: 10, color: "#666", textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 600, marginTop: 6 }}>
              Declarar Gastos Extranjero <span style={{ float: "right" }}>⌃</span>
            </div>
            <SubItem icon="+" label="Emitir Factura de Compra" />
            <SubItem icon="⏱" label="Programar Factura de Compra" />
            <SubItem icon="▤" label="Emitir desde Archivo" />
            <SubItem icon="⇌" label="Integraciones" />
          </aside>

          {/* Main area */}
          <div style={{ display: "flex", flexDirection: "column", background: "#fafaf7" }}>
            {/* totals header */}
            <div style={{ background: "#15130f", color: "#fff", padding: "14px 22px", ...anim(180, { y: -10, duration: 600 }) }}>
              <div style={{ fontSize: 10, color: "#888", textTransform: "uppercase", letterSpacing: "0.1em", fontWeight: 600, marginBottom: 8 }}>Total Ventas</div>
              <div style={{ display: "flex", gap: 40, alignItems: "baseline" }}>
                <div>
                  <div style={{ fontSize: 10, color: "#999", marginBottom: 2 }}>Neto</div>
                  <div style={{ fontSize: 15, fontWeight: 600 }}>$ 1.697.913.936</div>
                </div>
                <div>
                  <div style={{ fontSize: 10, color: "#999", marginBottom: 2 }}>IVA</div>
                  <div style={{ fontSize: 15, fontWeight: 600 }}>$ 322.576.694</div>
                </div>
                <div>
                  <div style={{ fontSize: 10, color: "#999", marginBottom: 2 }}>Total</div>
                  <div style={{ fontSize: 15, fontWeight: 600, color: "oklch(0.72 0.18 135)" }}>$ 2.020.490.630</div>
                </div>
              </div>
            </div>

            {/* toolbar */}
            <div style={{ padding: "10px 22px", display: "flex", justifyContent: "space-between", alignItems: "center", borderBottom: "1px solid #eee", background: "#fff", ...anim(320, { y: -6, duration: 550 }) }}>
              <div style={{ display: "flex", gap: 18, alignItems: "center", fontSize: 11 }}>
                <label style={{ display: "flex", alignItems: "center", gap: 6, color: "#555" }}>
                  <span style={{ width: 12, height: 12, border: "1px solid #bbb", borderRadius: 2, display: "inline-block" }}/>
                  Seleccionar varios
                </label>
                <span style={{ color: "oklch(0.45 0.15 135)", display: "flex", gap: 4, alignItems: "center" }}>⤓ Exportar</span>
                <span style={{ color: "oklch(0.45 0.15 135)", display: "flex", gap: 4, alignItems: "center" }}>↻ Actualizar</span>
              </div>
              <div style={{ display: "flex", gap: 12, alignItems: "center", fontSize: 11, color: "#666" }}>
                <span style={{ padding: "3px 8px", border: "1px solid #ddd", borderRadius: 4 }}>25 ⌄</span>
                <span>« ‹</span>
                <span>1 – 25 <span style={{ color: "#999" }}>de 38075 resultados</span></span>
                <span>› »</span>
              </div>
            </div>

            {/* rows */}
            <div style={{ flex: 1, padding: "14px 18px", display: "flex", flexDirection: "column", gap: 10, background: "#f5f4ef" }}>
              {rows.map((r, i) => (
                <div key={i} style={{ background: "#fff", borderRadius: 8, borderLeft: `4px solid ${r.accent}`, padding: "14px 16px", display: "grid", gridTemplateColumns: "180px 1fr 110px 120px 100px", gap: 16, fontSize: 11, alignItems: "flex-start", boxShadow: "0 1px 2px rgba(0,0,0,0.04)", ...anim(460 + i * 110, { y: 24, duration: 720 }) }}>
                  <div>
                    <span style={{ display: "inline-block", padding: "3px 8px", background: r.typeBg, color: r.type === "Nota de Crédito" ? "#fff" : "var(--ink)", fontSize: 10, fontWeight: 600, borderRadius: 3, marginBottom: 6 }}>{r.type}</span>
                    <div style={{ color: "#333", fontWeight: 500 }}>{r.date} | {r.folio}</div>
                    <div style={{ color: "oklch(0.45 0.15 135)", marginTop: 2, fontSize: 10 }}>{r.source}</div>
                    <div style={{ color: "#999", marginTop: 8, fontSize: 10 }}>Integración</div>
                    <div style={{ color: "#555", fontSize: 10 }}>{r.int}</div>
                  </div>
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 13, color: "#111" }}>{r.name}</div>
                    {r.sub && <div style={{ color: "#666", marginTop: 3 }}>{r.sub}{r.subLink && <> <span style={{ color: "oklch(0.45 0.15 135)", textDecoration: "underline" }}>{r.subLink}</span></>}</div>}
                    {r.sub2 && <div style={{ color: "#666", marginTop: 2 }}>{r.sub2}</div>}
                    <div style={{ color: "#999", marginTop: 8, fontSize: 10 }}>Invoice ID</div>
                    <div style={{ color: "oklch(0.45 0.15 135)", textDecoration: "underline", fontSize: 11 }}>{r.invoice}</div>
                  </div>
                  <div style={{ color: "#555" }}>
                    <div>Neto</div>
                    <div style={{ marginTop: 10 }}>IVA</div>
                  </div>
                  <div style={{ textAlign: "right" }}>
                    <div style={{ color: "#555" }}>{r.neto}</div>
                    <div style={{ color: "#555", marginTop: 10 }}>{r.iva}</div>
                    <div style={{ fontWeight: 700, color: "#111", marginTop: 10, fontSize: 13 }}>{r.total}</div>
                  </div>
                  <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 6 }}>
                    <span style={{ padding: "3px 10px", background: "oklch(0.75 0.18 135)", color: "#0a0a0a", fontSize: 10, borderRadius: 3, fontWeight: 600 }}>Emitido</span>
                    <div style={{ color: "#999", fontSize: 10, textAlign: "right" }}>{r.time}</div>
                    <div style={{ color: "#999", fontSize: 10 }}>Wasabil | {r.ref}</div>
                    <button style={{ marginTop: 4, padding: "4px 10px", fontSize: 10, border: "1px solid #ddd", background: "#fff", borderRadius: 4, cursor: "default", display: "flex", alignItems: "center", gap: 4, color: "#555" }}>⚙ Acciones ⌄</button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* floating IVA recuperable card */}
      <div
        style={{
          position: "absolute",
          bottom: -40,
          left: -30,
          width: 260,
          zIndex: 3,
          opacity: played ? 1 : 0,
          transform: played
            ? "rotate(-4deg) translate3d(0,0,0) scale(1)"
            : "rotate(-4deg) translate3d(-18px, 30px, 0) scale(0.92)",
          transition: "opacity 800ms cubic-bezier(0.22, 1, 0.36, 1) 860ms, transform 800ms cubic-bezier(0.22, 1, 0.36, 1) 860ms",
          willChange: "opacity, transform",
        }}
      >
        <div className="window" style={{ boxShadow: "var(--shadow-lg)" }}>
          <div style={{ padding: 14 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <div style={{ width: 28, height: 28, borderRadius: 6, background: "var(--ink)", display: "grid", placeItems: "center", color: "var(--bg)", fontSize: 14, fontWeight: 600 }}>G</div>
              <div>
                <div style={{ fontSize: 12, fontWeight: 500 }}>Google LLC</div>
                <div style={{ fontSize: 10, color: "var(--muted)" }}>Invoice INV-84792 · USD</div>
              </div>
              <span style={{ marginLeft: "auto", fontSize: 10, color: "oklch(0.35 0.1 135)", background: "var(--accent-wash)", padding: "3px 7px", borderRadius: 4, fontWeight: 600 }}>AUTO</span>
            </div>
            <div style={{ marginTop: 12, paddingTop: 12, borderTop: "1px solid var(--rule)" }}>
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, color: "var(--muted)" }}>
                <span>Monto</span><span className="mono">US$ 847.00</span>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, color: "var(--muted)", marginTop: 4 }}>
                <span>IVA recuperable</span><span className="mono" style={{ color: "oklch(0.45 0.15 135)", fontWeight: 600 }}>$161.149 CLP</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ---- Verticales ----
function Verticales() {
  const verticales = [
    {
      num: "01",
      tag: "Facturación",
      title: "Facturación electrónica inteligente",
      copy: "Emite boletas, facturas, notas de crédito y débito. Integrado al SII, con validaciones en tiempo real y reglas que se aprenden de tus ventas.",
      stat: "5.000+ doc/mes por empresa",
      demo: <InvoiceDemo />,
    },
    {
      num: "02",
      tag: "eCommerce",
      title: "eCommerce resuelto, de punta a punta",
      copy: "100% de tus ventas online se convierten en documentos tributarios automáticamente. Shopify, Mercado Libre, Shopify POS y marketplaces. Cuando hay un cambio o devolución, la nota de crédito se emite sola — sin que muevas un dedo.",
      stat: "Integración en < 10 min",
      demo: <EcommerceDemo />,
    },
    {
      num: "03",
      tag: "Gastos extranjeros",
      title: "Recupera IVA por gastos en el extranjero",
      copy: "Nos integramos directo a Google, Meta, Shopify, AWS y más. Generamos automáticamente la factura de compra por cada cobro, la declaramos al SII y recuperas el IVA. Hasta $4M de ahorro al año.",
      stat: null,
      demo: <ForeignExpensesDemo />,
    },
    {
      num: "04",
      tag: "Conciliación bancaria",
      title: "Tu banco, conciliado automáticamente",
      copy: "Conectamos tu cuenta corriente y cruzamos cada movimiento con sus documentos tributarios. Identificamos pagos, cobros, reembolsos y comisiones en segundos. Cero macros en Excel, cero ceguera sobre tu caja.",
      stat: "Beta",
      demo: <ReconciliationDemo />,
    },
  ];
  return (
    <section className="section" style={{ background: "var(--bg-2)" }}>
      <div className="container-wide">
        <div className="section-title">
          <div>
            <div className="eyebrow"><span className="dot"></span>Verticales</div>
            <h2 className="display-2 serif" style={{ marginTop: 16, maxWidth: 22 + "ch" }}>
              Una plataforma.<br/>
              <em className="italic">Toda</em> tu operación tributaria.
            </h2>
          </div>
          <p className="lede" style={{ maxWidth: "42ch" }}>
            Wasabil está en evolución constante. Hoy cubrimos cuatro verticales críticas. Mañana, cobranza, pagos integrados y más.
          </p>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 1, background: "var(--rule)", border: "1px solid var(--rule)", borderRadius: 16, overflow: "hidden" }}>
          {verticales.map((v, i) => (
            <div key={i} className="feature-row">
              <div className="feature-row-text" style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", borderRight: "1px solid var(--rule)" }}>
                <div>
                  <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 20 }}>
                    <span className="mono caption">{v.num} / {v.tag}</span>
                  </div>
                  <h3 className="display-3 serif" style={{ marginBottom: 16 }}>{v.title}</h3>
                  <p style={{ color: "var(--ink-2)", maxWidth: "48ch", lineHeight: 1.5 }}>{v.copy}</p>
                </div>
                {v.stat && (
                  <div style={{ display: "flex", alignItems: "center", gap: 16, marginTop: 32 }}>
                    <span className="caption">{v.stat}</span>
                  </div>
                )}
              </div>
              <div className="feature-row-demo" style={{ background: `linear-gradient(135deg, var(--paper), var(--bg-2))`, display: "grid", placeItems: "center" }}>
                {v.demo}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function InvoiceDemo() {
  return (
    <div className="window" style={{ width: "100%", maxWidth: 480 }}>
      <div className="window-bar">
        <div className="window-dots"><span/><span/><span/></div>
        <div className="window-title">Boleta electrónica</div>
      </div>
      <div style={{ padding: 24, background: "var(--paper)" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
          <div>
            <div className="caption">Folio · emitida</div>
            <div className="serif" style={{ fontSize: 22, marginTop: 4 }}>Boleta #48,291</div>
          </div>
          <div style={{ fontSize: 11, background: "var(--accent-wash)", color: "oklch(0.35 0.1 135)", padding: "4px 10px", borderRadius: 4, fontWeight: 600, letterSpacing: "0.06em" }}>SII ✓</div>
        </div>
        <div style={{ marginTop: 20, paddingTop: 20, borderTop: "1px dashed var(--rule-2)" }}>
          {[
            ["Producto", "Cantidad", "Precio"],
            ["Camiseta oversized", "2", "$29.980"],
            ["Pantalón lino", "1", "$39.990"],
            ["Envío Santiago", "—", "$4.990"],
          ].map((row, i) => (
            <div key={i} style={{ display: "grid", gridTemplateColumns: "1.5fr 0.5fr 0.8fr", padding: "8px 0", fontSize: 12, borderBottom: i < 3 ? "1px solid var(--rule)" : "none", color: i === 0 ? "var(--muted)" : "var(--ink)", fontWeight: i === 0 ? 500 : 400, textTransform: i === 0 ? "uppercase" : "none", letterSpacing: i === 0 ? "0.08em" : 0, fontFamily: i === 0 ? "var(--mono)" : "var(--sans)" }}>
              <span>{row[0]}</span>
              <span>{row[1]}</span>
              <span className="mono">{row[2]}</span>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 16, paddingTop: 16, borderTop: "1px solid var(--ink)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <span className="serif" style={{ fontSize: 18 }}>Total</span>
          <span className="serif" style={{ fontSize: 24 }}>$74.960</span>
        </div>
      </div>
    </div>
  );
}

function EcommerceDemo() {
  const platforms = [
    { n: "Shopify", logo: <img src="assets/logos/shopify.png" alt="Shopify" style={{ width: 24, height: 24, objectFit: "contain" }} />, doc: "Boleta · auto" },
    { n: "Mercado Libre", logo: <img src="assets/logos/mercadolibre.webp" alt="Mercado Libre" style={{ width: 28, height: 20, objectFit: "contain" }} />, doc: "Factura · auto" },
  ];
  const soon = ["Falabella", "Paris", "Walmart", "Ripley"];
  return (
    <div style={{ width: "100%", maxWidth: 480, display: "flex", flexDirection: "column", gap: 8 }}>
      <div className="caption" style={{ marginBottom: 4 }}>Integraciones activas · 2</div>
      {platforms.map((p, i) => (
        <div key={i} className="window" style={{ padding: "14px 18px", display: "flex", alignItems: "center", gap: 14, boxShadow: "var(--shadow-sm)" }}>
          <div style={{ width: 36, height: 36, borderRadius: 8, background: "#fff", border: "1px solid var(--rule)", display: "grid", placeItems: "center" }}>{p.logo}</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14, fontWeight: 500 }}>{p.n}</div>
            <div style={{ fontSize: 11, color: "var(--muted)", marginTop: 2 }}>{p.doc} · sincronizado hace {i+1} min</div>
          </div>
          <div style={{ display: "flex", gap: 6, alignItems: "center", fontSize: 11, color: "oklch(0.45 0.15 135)" }}>
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: "oklch(0.55 0.18 135)" }}/>
            Activo
          </div>
        </div>
      ))}
      <div className="window" style={{ padding: "14px 18px", boxShadow: "var(--shadow-sm)", borderStyle: "dashed" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }}>
          <span className="mono caption" style={{ fontSize: 10 }}>Próximamente</span>
        </div>
        <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
          {soon.map(s => <span key={s} style={{ fontSize: 11, padding: "3px 8px", background: "var(--bg-2)", borderRadius: 4, color: "var(--ink-2)" }}>{s}</span>)}
        </div>
      </div>
      <div style={{ marginTop: 12, padding: "10px 14px", background: "var(--ink)", color: "var(--bg)", borderRadius: 8, fontSize: 12, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <span>Hoy: 347 documentos emitidos automáticamente</span>
        <span className="mono">100% ✓</span>
      </div>
    </div>
  );
}

function ForeignExpensesDemo() {
  const expenses = [
    { n: "Google Ads", a: "US$ 1,240", iva: "$235,840" },
    { n: "Meta / Facebook", a: "US$ 890", iva: "$169,290" },
    { n: "Shopify Plus", a: "US$ 2,000", iva: "$380,400" },
    { n: "AWS", a: "US$ 420", iva: "$79,884" },
  ];
  return (
    <div className="window" style={{ width: "100%", maxWidth: 480 }}>
      <div style={{ padding: "16px 20px", background: "var(--ink)", color: "var(--bg)" }}>
        <div style={{ fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", opacity: 0.6, fontFamily: "var(--mono)" }}>IVA recuperable este mes</div>
        <div className="serif" style={{ fontSize: 32, marginTop: 4 }}>$865.414 CLP</div>
        <div style={{ fontSize: 12, opacity: 0.7, marginTop: 4 }}>Detectado automáticamente desde tu tarjeta · declarado al SII</div>
      </div>
      <div style={{ padding: "12px 20px", background: "var(--paper)" }}>
        {expenses.map((e, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr auto auto", gap: 16, padding: "10px 0", borderBottom: i < 3 ? "1px solid var(--rule)" : "none", alignItems: "center" }}>
            <span style={{ fontSize: 13, fontWeight: 500 }}>{e.n}</span>
            <span className="mono" style={{ fontSize: 12, color: "var(--muted)" }}>{e.a}</span>
            <span className="mono" style={{ fontSize: 12, color: "oklch(0.45 0.15 135)", fontWeight: 600 }}>+{e.iva}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ---- Reconciliation Demo ----
function ReconciliationDemo() {
  const movements = [
    { date: "20/04", desc: "TRF ORIGINADA DMC MOTORS", amt: "+$2.020.491", match: { label: "Factura F184589", note: "conciliado auto", color: "oklch(0.55 0.18 135)" } },
    { date: "20/04", desc: "CARGO VISA GOOGLE *ADS", amt: "−$1.240.250", match: { label: "Factura de compra", note: "emitida al SII", color: "oklch(0.55 0.18 135)" } },
    { date: "19/04", desc: "TRF ORIGINADA MERCADO PAGO", amt: "+$847.900", match: { label: "Liquidación ML", note: "7 boletas cruzadas", color: "oklch(0.55 0.18 135)" } },
    { date: "19/04", desc: "COMISIÓN BANCARIA", amt: "−$4.990", match: { label: "Sin documento", note: "excluido", color: "var(--muted)" } },
    { date: "18/04", desc: "TRF SHOPIFY PAYMENTS", amt: "+$5.382.100", match: null },
  ];
  return (
    <div className="window" style={{ width: "100%", maxWidth: 520 }}>
      <div className="window-bar">
        <div className="window-dots"><span/><span/><span/></div>
        <div className="window-title">Banco Santander · cta. corriente</div>
        <span className="pill" style={{ fontSize: 10, padding: "3px 8px", background: "var(--accent-wash)", color: "oklch(0.35 0.1 135)", border: "1px solid transparent" }}>98% auto</span>
      </div>
      <div style={{ padding: 16, background: "var(--paper)" }}>
        {movements.map((m, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "42px 1fr auto", gap: 14, padding: "12px 0", borderBottom: i < movements.length - 1 ? "1px solid var(--rule)" : "none", alignItems: "flex-start" }}>
            <div className="mono caption" style={{ fontSize: 10, paddingTop: 3 }}>{m.date}</div>
            <div>
              <div style={{ fontSize: 12, fontWeight: 500, color: "var(--ink)" }}>{m.desc}</div>
              {m.match ? (
                <div style={{ marginTop: 6, display: "inline-flex", alignItems: "center", gap: 8, padding: "3px 10px 3px 8px", background: m.match.color === "var(--muted)" ? "var(--bg-2)" : "var(--accent-wash)", borderRadius: 999, fontSize: 10 }}>
                  <svg width="10" height="10" viewBox="0 0 24 24" fill="none"><path d="M5 12l5 5L20 7" stroke={m.match.color} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  <span style={{ color: "var(--ink-2)" }}>{m.match.label}</span>
                  <span style={{ color: "var(--muted)" }}>· {m.match.note}</span>
                </div>
              ) : (
                <div style={{ marginTop: 6, display: "inline-flex", alignItems: "center", gap: 8, padding: "3px 10px", border: "1px dashed var(--rule-2)", borderRadius: 999, fontSize: 10, color: "var(--muted)" }}>
                  <span style={{ width: 6, height: 6, borderRadius: "50%", background: "oklch(0.72 0.14 60)", animation: "pulse 1.8s infinite" }}/>
                  Buscando documento…
                </div>
              )}
            </div>
            <div className="mono" style={{ fontSize: 12, color: m.amt.startsWith("−") ? "var(--ink-2)" : "var(--ink)", fontWeight: 500, textAlign: "right", whiteSpace: "nowrap" }}>{m.amt}</div>
          </div>
        ))}
      </div>
      <div style={{ padding: "12px 16px", background: "var(--ink)", color: "var(--bg)", display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 12 }}>
        <span style={{ opacity: 0.7 }}>Saldo conciliado</span>
        <span className="mono" style={{ fontWeight: 600 }}>$7.005.251</span>
      </div>
    </div>
  );
}

// ---- MCP / AI Demo ----
function McpDemo() {
  const [step, setStep] = useStateHome(0);
  const steps = [
    { who: "user", text: "Necesito el Estado de Resultados del Q1 2026 para la reunión de mañana" },
    { who: "claude", text: "Claro. Voy a consultar tu data de Wasabil.", tool: "wasabil.get_financials", args: "{ period: 'Q1-2026', format: 'income-statement' }" },
    { who: "claude", text: "Listo. Q1 2026 para McDowell's Restaurante SpA:\n\nIngresos: $142.487.200\nCostos: −$58.920.400\nGastos operacionales: −$34.210.800 (incl. $2.1M recuperables IVA)\n\nUtilidad operacional: $49.356.000\nMargen: 34.6%\n\n¿Quieres que genere el PDF o lo envíe a tu contador?" },
  ];

  useEffectHome(() => {
    const t = setInterval(() => setStep(s => (s + 1) % (steps.length + 1)), 3000);
    return () => clearInterval(t);
  }, []);

  return (
    <section id="mcp-demo" className="section">
      <div className="container-wide">
        <div className="mcp-demo-grid">
          <div style={{ position: "relative" }}>
            <div style={{ position: "absolute", right: -20, top: -40, opacity: 0.9, pointerEvents: "none" }}>
              <Mascot pose="explain" size={96} />
            </div>
            <div className="eyebrow"><span className="dot"/>AI-first · MCP</div>
            <h2 className="display-2 serif" style={{ marginTop: 16 }}>
              Tu contabilidad, <em className="italic">en lenguaje natural.</em>
            </h2>
            <p className="lede" style={{ marginTop: 24 }}>
              Wasabil es el primer facturador electrónico en Chile con <strong style={{ fontWeight: 600 }}>Model Context Protocol</strong>. Conecta Claude, Cursor o cualquier agente, y deja que consulte, emita y concilie por ti.
            </p>
            <ul style={{ listStyle: "none", padding: 0, margin: "32px 0 0", display: "flex", flexDirection: "column", gap: 14 }}>
              {[
                { k: "Pregunta", v: "\"¿Cuánto IVA recuperable tengo este mes?\"" },
                { k: "Emite", v: "\"Factura a La Casa Roja por $120k, envío mañana.\"" },
                { k: "Analiza", v: "\"Arma el EERR del último trimestre.\"" },
              ].map((item, i) => (
                <li key={i} style={{ display: "grid", gridTemplateColumns: "100px 1fr", gap: 16, alignItems: "baseline", paddingBottom: 14, borderBottom: "1px solid var(--rule)" }}>
                  <span className="caption">{item.k}</span>
                  <span style={{ fontFamily: "var(--serif)", fontSize: 18, fontStyle: "italic", color: "var(--ink-2)" }}>{item.v}</span>
                </li>
              ))}
            </ul>
            <div style={{ display: "flex", gap: 12, marginTop: 40 }}>
              <a className="btn btn-primary" href="#">
                Leer docs del MCP
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2"/></svg>
              </a>
            </div>
          </div>

          {/* chat window */}
          <div className="window" style={{ background: "#0f0e0c", border: "none" }}>
            <div className="window-bar" style={{ background: "#1a1816", borderBottom: "1px solid #2a2824" }}>
              <div className="window-dots"><span/><span/><span/></div>
              <div className="window-title" style={{ color: "#888" }}>Claude Desktop · wasabil-mcp</div>
              <div className="pill" style={{ background: "#2a2824", border: "1px solid #3a3632", color: "#aaa", fontSize: 10, padding: "3px 8px" }}>
                <span style={{ width: 6, height: 6, borderRadius: "50%", background: "oklch(0.55 0.18 135)" }}/>
                MCP conectado
              </div>
            </div>
            <div style={{ padding: 24, minHeight: 440, display: "flex", flexDirection: "column", gap: 16, fontSize: 14 }}>
              {steps.slice(0, step + 1).map((s, i) => (
                <div key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start", animation: "fadeIn 0.4s ease" }}>
                  <div style={{ width: 28, height: 28, borderRadius: 6, background: s.who === "user" ? "#3a3632" : "var(--accent)", display: "grid", placeItems: "center", flexShrink: 0, fontSize: 12, fontWeight: 600, color: s.who === "user" ? "#ccc" : "#0a0a0a" }}>
                    {s.who === "user" ? "B" : "C"}
                  </div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 11, color: "#777", marginBottom: 6, textTransform: "uppercase", letterSpacing: "0.08em", fontFamily: "var(--mono)" }}>{s.who === "user" ? "Tú" : "Claude"}</div>
                    <div style={{ color: "#e8e6e0", whiteSpace: "pre-line", lineHeight: 1.55 }}>{s.text}</div>
                    {s.tool && (
                      <div style={{ marginTop: 10, padding: "10px 12px", background: "#1a1816", border: "1px solid #2a2824", borderRadius: 6, fontFamily: "var(--mono)", fontSize: 11, color: "#888" }}>
                        <div style={{ color: "oklch(0.72 0.14 135)", marginBottom: 4 }}>🔧 tool_call · {s.tool}</div>
                        <div style={{ color: "#aaa" }}>{s.args}</div>
                      </div>
                    )}
                  </div>
                </div>
              ))}
              {step >= steps.length && (
                <div style={{ display: "flex", gap: 12, alignItems: "center", color: "#555", fontSize: 12, marginTop: 4 }}>
                  <div style={{ width: 4, height: 4, borderRadius: "50%", background: "#555", animation: "pulse 1.2s infinite" }}/>
                  <div style={{ width: 4, height: 4, borderRadius: "50%", background: "#555", animation: "pulse 1.2s infinite 0.2s" }}/>
                  <div style={{ width: 4, height: 4, borderRadius: "50%", background: "#555", animation: "pulse 1.2s infinite 0.4s" }}/>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---- Pricing preview ----
function PricingPreview() {
  const plans = [
    { name: "Growth", price: "$34.990", desc: "Para empresas con pocas ventas que declaran gastos en el extranjero", bullets: ["Hasta 2 usuarios", "Integra Shopify y Mercadolibre", "500 documentos/mes", "10 servicios digitales o $10M en gastos", "Acceso a la API y MCP"] },
    { name: "Full", price: "$79.990", desc: "Para empresas consolidadas", bullets: ["Hasta 10 usuarios", "Integra Shopify y Mercadolibre", "1.500 documentos/mes", "30 servicios digitales o $50M en gastos", "Soporte ilimitado", "Acceso a la API y MCP"], featured: true },
    { name: "Unlimited", price: "$119.990", desc: "Para empresas que emiten muchos documentos", bullets: ["Todo lo de Full +", "Usuarios ilimitados", "5.000 documentos/mes", "Servicios digitales ilimitados", "Acceso a la API y MCP"] },
  ];
  return (
    <section className="section" style={{ background: "var(--bg-2)" }}>
      <div className="container-wide">
        <div className="section-title">
          <div>
            <div className="eyebrow"><span className="dot"/>Precios simples</div>
            <h2 className="display-2 serif" style={{ marginTop: 16 }}>Empieza gratis.<br/><em className="italic">Crece sin sorpresas.</em></h2>
          </div>
          <p className="lede">Sin contratos, sin permanencia. Cambia de plan cuando quieras. Cancela en un click.</p>
        </div>
        <div className="home-plans-grid">
          {plans.map((p, i) => (
            <div key={i} className="window" style={{ padding: 32, background: p.featured ? "var(--ink)" : "var(--paper)", color: p.featured ? "var(--bg)" : "var(--ink)", position: "relative" }}>
              {p.featured && <div style={{ position: "absolute", top: 16, right: 16, fontSize: 10, background: "var(--accent)", color: "#0a0a0a", padding: "4px 8px", borderRadius: 4, fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase" }}>Popular</div>}
              <div className="caption" style={{ color: p.featured ? "color-mix(in oklab, var(--bg) 60%, transparent)" : "var(--muted)" }}>{p.desc}</div>
              <h3 className="serif" style={{ fontSize: 28, marginTop: 8 }}>{p.name}</h3>
              <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginTop: 16 }}>
                <span className="serif" style={{ fontSize: 40, lineHeight: 1 }}>{p.price}</span>
                {p.price !== "Gratis" && <span style={{ fontSize: 13, color: p.featured ? "color-mix(in oklab, var(--bg) 60%, transparent)" : "var(--muted)" }}>/mes</span>}
              </div>
              <ul style={{ listStyle: "none", padding: 0, margin: "28px 0", display: "flex", flexDirection: "column", gap: 10, minHeight: 160 }}>
                {p.bullets.map((b, bi) => (
                  <li key={bi} style={{ display: "flex", gap: 10, fontSize: 13, alignItems: "flex-start" }}>
                    <span style={{ color: p.featured ? "var(--accent)" : "oklch(0.55 0.15 135)", flexShrink: 0, marginTop: 2 }}>✓</span>
                    {b}
                  </li>
                ))}
              </ul>
              <a className={p.featured ? "btn btn-primary" : "btn btn-ghost"} href="https://app.wasabil.com/register" style={{ background: p.featured ? "var(--accent)" : "transparent", color: p.featured ? "#0a0a0a" : "var(--ink)", width: "100%", justifyContent: "center", borderColor: p.featured ? "var(--accent)" : "var(--rule-2)" }}>
                Elegir {p.name}
              </a>
            </div>
          ))}
        </div>
        <div style={{ textAlign: "center", marginTop: 40 }}>
          <a className="btn-link" href="pricing.html" style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
            Ver comparación completa <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

// ---- Testimonials + Clients (merged) ----
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. Además te hace las notas de crédito en Shopify.", 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 de este año con boletas sin factura de compra asociada. Las encontró y las emitió. Listo. Grande Wasabil.", n: "Andrés Arellano", r: "CEO, Magnar", c: "AA" },
  ];
  const clients = [
    { name: "Fintual", src: "assets/clients/fintual.png", h: 30 },
    { name: "The Qualis", src: "assets/clients/qualis.webp", h: 34 },
    { name: "Froens", src: "assets/clients/froens.png", h: 54 },
    { name: "Duoc UC", src: "assets/clients/duoc.png", h: 64 },
    { name: "Tika", src: "assets/clients/tika.webp", h: 54 },
    { name: "Gux Technologies", src: "assets/clients/gux.webp", h: 42 },
  ];
  const bgVal = getComputedStyle(document.documentElement).getPropertyValue("--bg").trim();
  const isDark = (() => {
    if (bgVal.startsWith("#")) {
      const hex = bgVal.slice(1);
      const r = parseInt(hex.slice(0,2),16), g = parseInt(hex.slice(2,4),16), b = parseInt(hex.slice(4,6),16);
      return (r * 299 + g * 587 + b * 114) / 1000 < 128;
    }
    return true;
  })();
  const logoDefaultFilter = isDark ? "brightness(0) invert(1)" : "grayscale(1)";
  const logoHoverFilter   = isDark ? "brightness(0) invert(1)" : "grayscale(0)";
  const logoDefaultOpacity = isDark ? "0.7" : "0.85";

  return (
    <section className="section">
      <div className="container-wide">
        <div className="section-title">
          <div>
            <div className="eyebrow"><span className="dot"/>Clientes</div>
            <h2 className="display-2 serif" style={{ marginTop: 16 }}>
              <em className="italic">500+ empresas</em><br/>
              ya operan con Wasabil.
            </h2>
          </div>
          <p className="lede" style={{ maxWidth: "42ch" }}>
            Fintechs reguladas, e-commerce, universidades y estudios profesionales. Todos resolvieron el mismo dolor para enfocarse en lo que importa.
          </p>
        </div>

        {/* Logos */}
        <div className="clients-logo-strip" style={{ marginBottom: 48 }}>
          {clients.map(c => (
            <div key={c.name} style={{
              background: "var(--paper)",
              padding: "40px 24px",
              display: "grid",
              placeItems: "center",
              minHeight: 140,
            }}>
              <img src={c.src} alt={c.name} style={{ height: c.h, width: "auto", maxWidth: "100%", objectFit: "contain", opacity: logoDefaultOpacity, filter: logoDefaultFilter, transition: "opacity 160ms, filter 160ms" }}
                onMouseEnter={e => { e.currentTarget.style.opacity = "1"; e.currentTarget.style.filter = logoHoverFilter; }}
                onMouseLeave={e => { e.currentTarget.style.opacity = logoDefaultOpacity; e.currentTarget.style.filter = logoDefaultFilter; }}
              />
            </div>
          ))}
        </div>

        {/* Testimonials */}
        <div className="testimonials-grid">
          {items.map((it, i) => (
            <figure key={i} style={{ margin: 0, padding: 32, background: "var(--paper)", border: "1px solid var(--rule)", borderRadius: 12, display: "flex", flexDirection: "column", justifyContent: "space-between", minHeight: 260 }}>
              <blockquote style={{ margin: 0, fontFamily: "var(--serif)", fontSize: 22, lineHeight: 1.3, letterSpacing: "-0.01em" }}>
                <span style={{ color: "var(--accent)", marginRight: 4 }}>"</span>{it.q}<span style={{ color: "var(--accent)" }}>"</span>
              </blockquote>
              <figcaption style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 32, paddingTop: 20, borderTop: "1px solid var(--rule)" }}>
                <div style={{ width: 36, height: 36, borderRadius: "50%", background: "var(--ink)", color: "var(--bg)", display: "grid", placeItems: "center", fontSize: 13, fontWeight: 500 }}>{it.c}</div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 500 }}>{it.n}</div>
                  <div style={{ fontSize: 11, color: "var(--muted)" }}>{it.r}</div>
                </div>
              </figcaption>
            </figure>
          ))}
        </div>

        {/* Stats strip */}
        <div style={{ marginTop: 48, padding: "32px 40px", background: "var(--paper)", border: "1px solid var(--rule)", borderRadius: 12, display: "flex", justifyContent: "space-around", alignItems: "center", gap: 32, flexWrap: "wrap" }}>
          {[
            { n: "500+", l: "Empresas activas" },
            { n: "$2.4B", l: "Facturado / año" },
            { n: "8M+", l: "Documentos emitidos" },
            { n: "99%", l: "Precisión SII" },
          ].map((s, i, arr) => (
            <React.Fragment key={i}>
              <div style={{ textAlign: "center" }}>
                <div className="serif" style={{ fontSize: 32, lineHeight: 1 }}>{s.n}</div>
                <div className="caption" style={{ marginTop: 8 }}>{s.l}</div>
              </div>
              {i < arr.length - 1 && <div style={{ width: 1, height: 36, background: "var(--rule)" }}/>}
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- CTA ----
function CtaBand() {
  return (
    <section style={{ padding: "96px 0", background: "var(--ink)", color: "var(--bg)", position: "relative", overflow: "hidden" }}>
      <div className="container-wide" style={{ position: "relative" }}>
        <div className="cta-band-grid">
          <div>
            <h2 className="display-2 serif">
              Dale un respiro <em className="italic">a tu contador.</em><br/>
              Y a ti.
            </h2>
            <p style={{ marginTop: 24, maxWidth: "50ch", color: "color-mix(in oklab, var(--bg) 75%, transparent)", fontSize: 18, lineHeight: 1.5 }}>
              Prueba Wasabil gratis. 10 minutos para conectar, y tu vida tributaria cambia para siempre.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 32, flexWrap: "wrap" }}>
              <a className="btn" href="agenda.html" style={{ background: "var(--accent)", color: "#0a0a0a", padding: "14px 22px", fontSize: 15 }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><rect x="3" y="5" width="18" height="16" rx="2" stroke="currentColor" strokeWidth="1.8"/><path d="M3 9h18M8 3v4M16 3v4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>
                Agenda una reunión
              </a>
              <a className="btn btn-ghost" href="https://app.wasabil.com/register" style={{ borderColor: "rgba(246,243,236,0.3)", color: "var(--bg)", padding: "14px 22px", fontSize: 15 }}>
                Prueba gratis
              </a>
            </div>
          </div>
          <div style={{ position: "relative", height: 260 }}>
            <div style={{ position: "absolute", right: 20, top: -30, transform: "rotate(4deg)" }}>
              <Mascot pose="clap" size={260} />
            </div>
            <div className="mono" style={{ position: "absolute", right: 180, top: 100, fontSize: 11, color: "color-mix(in oklab, var(--bg) 50%, transparent)", textAlign: "right" }}>
              ↗ nos vemos dentro<br/>wasabil.cl
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomePage() {
  return (
    <>
      <Nav current="home" />
      <Hero />
      <LogoCloud />
      <Verticales />
      <McpDemo />
      <PricingPreview />
      <Testimonials />
      <CtaBand />
      <Footer />
    </>
  );
}

// ---- Clients wall ----
function ClientsWall() {
  const clients = [
    {
      name: "Fintual",
      mark: (
        <svg viewBox="0 0 180 40" height="26" style={{ display: "block" }}>
          <circle cx="16" cy="20" r="11" fill="#1A8FF5"/>
          <path d="M12 15h8M12 20h6M12 25h4" stroke="#fff" strokeWidth="2" strokeLinecap="round"/>
          <text x="36" y="27" fontFamily="Inter, system-ui, sans-serif" fontSize="20" fontWeight="700" fill="currentColor" letterSpacing="-0.02em">fintual</text>
        </svg>
      ),
    },
    {
      name: "The Qualis",
      mark: (
        <svg viewBox="0 0 200 40" height="28" style={{ display: "block" }}>
          <text x="0" y="20" fontFamily="Instrument Serif, Georgia, serif" fontSize="16" fontStyle="italic" fill="currentColor">the</text>
          <text x="0" y="36" fontFamily="Instrument Serif, Georgia, serif" fontSize="24" fill="currentColor" letterSpacing="0.02em">Qualis</text>
          <circle cx="92" cy="22" r="3.5" fill="currentColor"/>
        </svg>
      ),
    },
    {
      name: "Froens",
      mark: (
        <svg viewBox="0 0 200 40" height="28" style={{ display: "block" }}>
          <path d="M6 12 Q10 4 18 8 Q26 12 24 22 Q22 30 14 30 Q6 28 6 20 Z" fill="#E85A3C"/>
          <path d="M18 10 Q20 14 18 18" stroke="#fff" strokeWidth="1.5" fill="none" strokeLinecap="round"/>
          <text x="38" y="28" fontFamily="Inter, system-ui, sans-serif" fontSize="22" fontWeight="800" fill="currentColor" letterSpacing="-0.02em">Froens</text>
        </svg>
      ),
    },
    {
      name: "Duoc UC",
      mark: (
        <svg viewBox="0 0 220 40" height="28" style={{ display: "block" }}>
          <rect x="0" y="6" width="36" height="28" rx="2" fill="#002F5F"/>
          <text x="18" y="26" fontFamily="Inter, system-ui, sans-serif" fontSize="16" fontWeight="800" fill="#fff" textAnchor="middle" letterSpacing="0.02em">UC</text>
          <text x="46" y="22" fontFamily="Inter, system-ui, sans-serif" fontSize="18" fontWeight="700" fill="currentColor" letterSpacing="0.04em">DUOC</text>
          <text x="46" y="35" fontFamily="Inter, system-ui, sans-serif" fontSize="9" fontWeight="500" fill="currentColor" letterSpacing="0.15em">UNIVERSIDAD CATÓLICA</text>
        </svg>
      ),
    },
    {
      name: "Tika",
      mark: (
        <svg viewBox="0 0 160 40" height="28" style={{ display: "block" }}>
          <path d="M6 32 L14 8 L22 32 M8 22 L20 22" stroke="#D4A34E" strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
          <text x="32" y="30" fontFamily="Instrument Serif, Georgia, serif" fontSize="28" fill="currentColor" letterSpacing="0.02em">tika</text>
          <circle cx="28" cy="12" r="2" fill="#D4A34E"/>
        </svg>
      ),
    },
  ];

  return (
    <section style={{ padding: "96px 0", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)" }}>
      <div className="container-wide">
        <div className="clients-grid">
          <div>
            <div className="eyebrow"><span className="dot"/>Clientes</div>
            <h2 className="display-2 serif" style={{ marginTop: 16 }}>
              <em className="italic">500+ empresas</em><br/>
              ya operan con Wasabil.
            </h2>
            <p className="lede" style={{ marginTop: 20, maxWidth: "42ch" }}>
              Desde fintechs reguladas hasta universidades, e-commerce y estudios profesionales. Todos resolvieron lo mismo — el dolor tributario — para enfocarse en lo que importa.
            </p>
            <div style={{ display: "flex", gap: 32, marginTop: 32, alignItems: "center" }}>
              <div>
                <div className="serif" style={{ fontSize: 32, lineHeight: 1 }}>$2.4B</div>
                <div className="caption" style={{ marginTop: 6 }}>Facturado por clientes</div>
              </div>
              <div style={{ width: 1, height: 36, background: "var(--rule)" }}/>
              <div>
                <div className="serif" style={{ fontSize: 32, lineHeight: 1 }}>8M+</div>
                <div className="caption" style={{ marginTop: 6 }}>Documentos emitidos</div>
              </div>
            </div>
          </div>
          <div className="clients-logos-grid" style={{ background: "var(--rule)", border: "1px solid var(--rule)", borderRadius: 12, overflow: "hidden" }}>
            {clients.map((c, i) => (
              <div key={c.name} style={{
                background: "var(--paper)",
                padding: "44px 32px",
                display: "grid",
                placeItems: "center",
                color: "var(--ink)",
                minHeight: 120,
                gridColumn: i === 4 ? "1 / -1" : "auto",
              }}>
                <div style={{ opacity: 0.9 }}>{c.mark}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HomePage });