// Wasabil — About page
function AboutPage() {
  return (
    <>
      <Nav current="about" />
      <section style={{ padding: "88px 0 48px", borderBottom: "1px solid var(--rule)", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", right: -20, top: 40, transform: "rotate(-6deg)", opacity: 0.95, pointerEvents: "none" }}>
          <Mascot pose="bttf" size={220} />
        </div>
        <div className="container-wide" style={{ position: "relative" }}>
          <div className="eyebrow"><span className="dot"/>Nosotros</div>
          <h1 className="display-1 serif" style={{ marginTop: 20, maxWidth: "20ch" }}>
            Construimos la infraestructura financiera de <em className="italic">LatAm moderna.</em>
          </h1>
          <p className="lede" style={{ marginTop: 24, maxWidth: "58ch" }}>
            Empezamos resolviendo un dolor propio: emitir facturas de compra una por una a Google. Hoy, 500+ empresas usan Wasabil para sacarse de encima su operación tributaria.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="container-wide">
          <div style={{ maxWidth: "72ch", margin: "0 auto" }}>
            <div className="serif" style={{ fontSize: 30, lineHeight: 1.3, letterSpacing: "-0.01em", color: "var(--ink-2)" }}>
              <p style={{ margin: "0 0 28px" }}>Wasabil nació de una frustración concreta: éramos los fundadores de un eCommerce, y cada mes perdíamos horas emitiendo facturas de compra para declarar gastos en Google Ads, Shopify y Meta.</p>
              <p style={{ margin: "0 0 28px" }}>Al analizarlo con distancia, vimos que no era un problema nuestro — era un problema de <em className="italic">todas</em> las empresas digitales del país. Y lo era porque el SII exige una operación manual que nadie quiere hacer.</p>
              <p style={{ margin: "0 0 28px" }}>Hoy, lo que partió como un automatizador de gastos extranjeros se convirtió en la plataforma tributaria que usan eCommerce serios, fintechs y empresas de servicios para dejar de pelearse con el SII.</p>
              <p style={{ margin: 0, fontStyle: "italic", color: "var(--ink)" }}>Y recién estamos empezando.</p>
            </div>
            <div style={{ marginTop: 48, paddingTop: 32, borderTop: "1px solid var(--rule)" }}>
              <div className="caption">Benjamín Pérez Pereira · CEO & Co-founder</div>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--bg-2)", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", right: 48, top: 48, opacity: 0.9, pointerEvents: "none" }}>
          <Mascot pose="zen" size={140} />
        </div>
        <div className="container-wide" style={{ position: "relative" }}>
          <div className="eyebrow"><span className="dot"/>Principios</div>
          <h2 className="display-2 serif" style={{ marginTop: 16, maxWidth: "20ch" }}>
            Cómo construimos.
          </h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, marginTop: 64 }}>
            {[
              ["01", "Simple gana", "Si no se entiende en 10 segundos, no sirve. Los problemas tributarios son lo suficientemente complejos — nuestro software no tiene que serlo."],
              ["02", "Auto por defecto", "Todo lo que pueda pasar sin intervención humana, pasa sin intervención humana. La interfaz aparece solo cuando hay que decidir."],
              ["03", "AI-first, no AI-washed", "El MCP no es un plugin, es parte del core. Nuestros clientes ya operan Wasabil desde Claude. Esa es la dirección."],
              ["04", "Velocidad > perfección", "Enviamos cambios todos los días. Si algo se rompe, lo arreglamos en horas. Preferimos corregir rápido que tardar en decidir."],
              ["05", "Respeto al contador", "No queremos reemplazar al contador. Queremos que deje de hacer trabajo que debería hacer una máquina, y vuelva a ser estratégico."],
              ["06", "Transparencia radical", "Precios claros. Changelog público. Si subimos el precio, te avisamos con 90 días. Si cagamos, lo decimos."],
            ].map(([n, t, d], i) => (
              <div key={i} style={{ padding: 32, background: "var(--paper)", border: "1px solid var(--rule)", borderRadius: 12, minHeight: 200 }}>
                <div className="mono caption">{n}</div>
                <div className="serif" style={{ fontSize: 22, marginTop: 10, letterSpacing: "-0.01em" }}>{t}</div>
                <div style={{ fontSize: 14, color: "var(--ink-2)", lineHeight: 1.55, marginTop: 12 }}>{d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Evolution of the mascot */}
      <section className="section" style={{ borderTop: "1px solid var(--rule)" }}>
        <div className="container-wide">
          <div className="section-title">
            <div>
              <div className="eyebrow"><span className="dot"/>Mascota</div>
              <h2 className="display-2 serif" style={{ marginTop: 16 }}>Te presentamos a <em className="italic">Wasabilito.</em></h2>
            </div>
            <p className="lede" style={{ maxWidth: "42ch" }}>
              Nació de un huevo en 2023. Hoy factura, declara IVA y conversa con Claude. Mañana, quién sabe.
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 20, marginTop: 56 }}>
            {[
              { pose: "egg", year: "2023 · Q1", label: "Origen" },
              { pose: "baby", year: "2023 · Q3", label: "Primeros clientes" },
              { pose: "explain", year: "2024", label: "Lanzamos MCP" },
              { pose: "clap", year: "2025", label: "500+ empresas" },
              { pose: "king", year: "2026 →", label: "Infraestructura" },
            ].map((s, i) => (
              <div key={i} style={{ textAlign: "center" }}>
                <div style={{ aspectRatio: "1", background: "var(--bg-2)", border: "1px solid var(--rule)", borderRadius: 16, display: "grid", placeItems: "center", padding: 20 }}>
                  <Mascot pose={s.pose} size={120} />
                </div>
                <div className="mono caption" style={{ marginTop: 14 }}>{s.year}</div>
                <div style={{ fontSize: 14, marginTop: 6, fontWeight: 500 }}>{s.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container-wide">
          <div className="eyebrow"><span className="dot"/>Equipo</div>
          <h2 className="display-2 serif" style={{ marginTop: 16 }}>Un equipo pequeño. <em className="italic">Obsesionado.</em></h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32, marginTop: 64 }}>
            {[
              { n: "Benjamín Pérez", r: "CEO · Co-founder", src: "assets/team/benjamin.png" },
              { n: "Ignacio Domeyko", r: "CFO & CSM · Co-founder", src: "assets/team/ignacio.png" },
              { n: "Fernando Cordoni", r: "CTO · Founding Team", src: "assets/team/fernando.png" },
            ].map((p, i) => (
              <figure key={i} style={{ margin: 0, textAlign: "center" }}>
                <div style={{ width: "100%", aspectRatio: "1", maxWidth: 280, margin: "0 auto", borderRadius: "50%", overflow: "hidden", background: "var(--bg-2)", border: "1px solid var(--rule)" }}>
                  <img src={p.src} alt={p.n} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>
                </div>
                <figcaption style={{ marginTop: 22 }}>
                  <div className="serif" style={{ fontSize: 22, letterSpacing: "-0.01em" }}>{p.n}</div>
                  <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 6, fontFamily: "var(--mono)", letterSpacing: "0.04em", textTransform: "uppercase" }}>{p.r}</div>
                </figcaption>
              </figure>
            ))}
          </div>

          {/* Backed by */}
          <div style={{ marginTop: 96, padding: "56px 56px", background: "var(--paper)", border: "1px solid var(--rule)", borderRadius: 16, display: "grid", gridTemplateColumns: "1fr 1fr", alignItems: "center", gap: 56 }}>
            <div>
              <div className="caption">Con el respaldo de</div>
              <img src="assets/clients/gux.webp" alt="Gux Technologies" style={{ height: 48, width: "auto", marginTop: 16, display: "block" }}/>
              <div style={{ fontSize: 15, color: "var(--ink-2)", marginTop: 24, lineHeight: 1.6, maxWidth: "44ch" }}>
                La infraestructura y el equipo técnico que nos permite operar con la confiabilidad que exigen las empresas más serias de Chile.
              </div>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
              {[
                { n: "Pablo González", r: "Co-founder, Gux", src: "assets/team/pablo.png" },
                { n: "Sergio Peña y Lillo", r: "Co-founder, Gux", src: "assets/team/sergio.png" },
              ].map((p, i) => (
                <figure key={i} style={{ margin: 0, textAlign: "center" }}>
                  <div style={{ width: "100%", aspectRatio: "1", maxWidth: 180, margin: "0 auto", borderRadius: "50%", overflow: "hidden", background: "var(--bg-2)", border: "1px solid var(--rule)" }}>
                    <img src={p.src} alt={p.n} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>
                  </div>
                  <figcaption style={{ marginTop: 16 }}>
                    <div className="serif" style={{ fontSize: 17, letterSpacing: "-0.01em" }}>{p.n}</div>
                    <div style={{ fontSize: 11, color: "var(--muted)", marginTop: 4, fontFamily: "var(--mono)", letterSpacing: "0.04em", textTransform: "uppercase" }}>{p.r}</div>
                  </figcaption>
                </figure>
              ))}
            </div>
          </div>
        </div>
      </section>

      <CtaBand />
      <Footer />
    </>
  );
}

Object.assign(window, { AboutPage });