// Wasabil — Blog page
function BlogPage() {
  const featured = {
    tag: "IA & MCP",
    title: "Conecta Wasabil con Claude y opera tu gestión tributaria conversando con la IA",
    excerpt: "Conecta Wasabil con Claude usando el protocolo MCP y opera tu gestión tributaria completa — facturas, IVA, renta — conversando directamente con la IA.",
    author: "Benjamín Pérez",
    initials: "BP",
    date: "24/04/2026",
    read: "9 min",
    url: "/recursos/conecta-wasabil-con-claude-y-opera-tu-gestion-tributaria-conversando-con-la-ia/",
  };
  const posts = [
    { tag: "Tributario", title: "¿Cómo configurar OpenAI para recuperar IVA frente al SII?", excerpt: "Configura correctamente OpenAI para recuperar IVA como crédito frente al SII. Guía paso a paso para que no pagues impuestos de más en tus gastos de ChatGPT y API.", author: "Benjamín Pérez", date: "12/11/2024", read: "7 min", img: "/assets/blog/como-configurar-openai-para-recuperar-iva-frente-al-sii.jpg", url: "/recursos/como-configurar-openai-para-recuperar-iva-frente-al-sii/" },
    { tag: "Tributario", title: "Configura Google Workspace para recuperar el IVA ante el SII en pocos pasos", excerpt: "Configura correctamente Google Workspace para que recuperes el IVA como crédito frente al SII.", author: "Benjamín Pérez", date: "05/08/2024", read: "6 min", img: "/assets/blog/como-configurar-google-workspace-para-recuperar-iva-frente-al-sii.jpg", url: "/recursos/como-configurar-google-workspace-para-recuperar-iva-frente-al-sii/" },
    { tag: "Tributario", title: "IVA en Servicios Digitales en Chile: qué es, cómo funciona y cómo gestionarlo", excerpt: "En febrero de 2020 se promulgó una reforma tributaria que introdujo el IVA a los servicios digitales de plataformas sin domicilio en Chile.", author: "Sergio Peña y Lillo", date: "19/07/2024", read: "10 min", img: "/assets/blog/iva-en-servicios-digitales.jpg", url: "/recursos/iva-en-servicios-digitales/" },
    { tag: "Tributario", title: "¿Cómo declarar las facturas de compra en el F29 del SII?", excerpt: "Para declarar tus gastos en servicios digitales y recuperar IVA correctamente, debes completar bien el F29. Acá te enseñamos cómo.", author: "Benjamín Pérez", date: "17/07/2024", read: "8 min", img: "/assets/blog/como-declarar-las-facturas-de-compra-en-el-f29-del-sii.jpg", url: "/recursos/como-declarar-las-facturas-de-compra-en-el-f29-del-sii/" },
    { tag: "Tributario", title: "Anular Factura de Compra: ¿cómo se hace en el SII?", excerpt: "La mayoría sabe cómo anular una factura electrónica, pero no todos saben cómo emitir una Nota de Crédito para anular una Factura de Compra. Guía paso a paso.", author: "Ignacio Domeyko", date: "14/07/2024", read: "7 min", img: "/assets/blog/anular-factura-de-compra-como-se-hace-sii-nota-de-credito.jpg", url: "/recursos/anular-factura-de-compra-como-se-hace-sii-nota-de-credito/" },
    { tag: "Tributario", title: "¿Cómo configurar AWS para recuperar IVA frente al SII?", excerpt: "Configura correctamente AWS o Amazon Web Services para no pagar IVA de más y recuperar el crédito al declarar el gasto frente al SII.", author: "Benjamín Pérez", date: "11/07/2024", read: "6 min", img: "/assets/blog/como-configurar-aws-recuperar-iva-sii.jpg", url: "/recursos/como-configurar-aws-recuperar-iva-sii/" },
    { tag: "Tributario", title: "Estado Peticiones Administrativas en el SII: ¿dónde ver su estado?", excerpt: "Más de alguna vez has hecho Peticiones Administrativas en el SII y no sabes en qué estado están. Acá te mostramos dónde revisarlas.", author: "Ignacio Domeyko", date: "08/07/2024", read: "5 min", img: "/assets/blog/estado-peticiones-administrativas-en-el-sii-donde-ver.jpg", url: "/recursos/estado-peticiones-administrativas-en-el-sii-donde-ver/" },
    { tag: "Tributario", title: "¿Cómo configurar Shopify para recuperar IVA frente al SII?", excerpt: "Tutorial para configurar correctamente Shopify y recuperar IVA al declarar el gasto en anuncios frente al SII.", author: "Benjamín Pérez", date: "07/07/2024", read: "6 min", img: "/assets/blog/como-configurar-shopify-para-recuperar-iva-frente-al-sii.jpg", url: "/recursos/como-configurar-shopify-para-recuperar-iva-frente-al-sii/" },
    { tag: "Tributario", title: "¿Cómo configurar Facebook Ads para recuperar IVA frente al SII?", excerpt: "Configura correctamente Facebook Ads para recuperar IVA y declarar correctamente tus gastos en Meta frente al SII.", author: "Benjamín Pérez", date: "06/07/2024", read: "6 min", img: "/assets/blog/configura-facebook-para-declarar-sii-iva.jpg", url: "/recursos/configura-facebook-para-declarar-sii-iva/" },
    { tag: "Tributario", title: "Cómo emitir facturas de compra para servicios digitales", excerpt: "Qué son las facturas de compra, cuándo se usan y cómo se emiten. Guía completa para servicios digitales extranjeros.", author: "Ignacio Domeyko", date: "05/07/2024", read: "8 min", img: "/assets/blog/facturas-de-compra-sii-servicios-digitales.jpg", url: "/recursos/facturas-de-compra-sii-servicios-digitales/" },
    { tag: "Tributario", title: "¿Cómo configurar Google Ads para recuperar IVA frente al SII?", excerpt: "Configura correctamente Google Ads para que no te cobre IVA, y lo pagues directamente al SII, donde podrás recuperarlo.", author: "Benjamín Pérez", date: "05/07/2024", read: "7 min", img: "/assets/blog/como-configurar-google-ads-para-recuperar-iva-frente-al-sii.jpg", url: "/recursos/como-configurar-google-ads-para-recuperar-iva-frente-al-sii/" },
  ];
  return (
    <>
      <Nav current="blog" />
      <section style={{ padding: "88px 0 48px" }}>
        <div className="container-wide">
          <div className="eyebrow"><span className="dot"/>Blog & recursos</div>
          <h1 className="display-1 serif" style={{ marginTop: 20, maxWidth: "18ch" }}>
            Lecturas para <em className="italic">operadores.</em>
          </h1>
          <p className="lede" style={{ marginTop: 24, maxWidth: "54ch" }}>
            Tributario, producto, historias de clientes. Sin fluff — escrito por personas que lo viven.
          </p>
        </div>
      </section>

      {/* Featured post */}
      <section style={{ paddingBottom: 96 }}>
        <div className="container-wide">
          <a href={featured.url} style={{ display: "block", border: "1px solid var(--rule)", borderRadius: 16, overflow: "hidden", background: "var(--paper)" }}>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr" }}>
              <div style={{ aspectRatio: "1/1", position: "relative", overflow: "hidden" }}>
                <img src="/assets/blog/conecta-wasabil-con-claude-y-opera-tu-gestion-tributaria-conversando-con-la-ia.jpg" alt={featured.title} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
                <div style={{ position: "absolute", inset: 0, background: "linear-gradient(135deg, rgba(10,10,12,0.55) 0%, rgba(10,10,12,0.25) 100%)" }} />
              </div>
              <div style={{ padding: 56, display: "flex", flexDirection: "column", justifyContent: "center" }}>
                <div style={{ display: "flex", gap: 12, alignItems: "center", marginBottom: 20 }}>
                  <span style={{ fontSize: 10, background: "var(--accent-wash)", color: "oklch(0.35 0.1 135)", padding: "4px 10px", borderRadius: 4, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase" }}>{featured.tag}</span>
                  <span className="caption">Destacado</span>
                </div>
                <h2 className="display-3 serif">{featured.title}</h2>
                <p style={{ fontSize: 16, color: "var(--ink-2)", lineHeight: 1.55, marginTop: 16 }}>{featured.excerpt}</p>
                <div style={{ display: "flex", alignItems: "center", gap: 14, marginTop: 32, paddingTop: 24, borderTop: "1px solid var(--rule)" }}>
                  <div style={{ width: 32, height: 32, borderRadius: "50%", background: "var(--ink)", color: "var(--bg)", display: "grid", placeItems: "center", fontSize: 12 }}>{featured.initials}</div>
                  <div>
                    <div style={{ fontSize: 13, fontWeight: 500 }}>{featured.author}</div>
                    <div style={{ fontSize: 11, color: "var(--muted)" }}>{featured.date} · {featured.read}</div>
                  </div>
                </div>
              </div>
            </div>
          </a>
        </div>
      </section>

      <section style={{ paddingBottom: 96 }}>
        <div className="container-wide">
          <div style={{ display: "flex", gap: 8, marginBottom: 32, flexWrap: "wrap" }}>
            {["Todos", "Tributario", "IVA", "SII", "Tutoriales"].map((t, i) => (
              <button key={t} style={{ padding: "8px 16px", fontSize: 13, border: "1px solid " + (i === 0 ? "var(--ink)" : "var(--rule)"), background: i === 0 ? "var(--ink)" : "transparent", color: i === 0 ? "var(--bg)" : "var(--ink-2)", borderRadius: 999, cursor: "pointer", fontFamily: "var(--sans)", fontWeight: 500 }}>{t}</button>
            ))}
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
            {posts.map((p, i) => (
              <a key={i} href={p.url} style={{ display: "block" }}>
                <div style={{ aspectRatio: "4/3", borderRadius: 12, border: "1px solid var(--rule)", position: "relative", overflow: "hidden", marginBottom: 20 }}>
                  <img src={p.img} alt={p.title} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", transition: "transform 300ms ease" }}
                    onMouseEnter={e => e.currentTarget.style.transform = "scale(1.04)"}
                    onMouseLeave={e => e.currentTarget.style.transform = "scale(1)"}
                  />
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center", marginBottom: 10 }}>
                  <span style={{ fontSize: 10, background: "var(--paper)", border: "1px solid var(--rule)", padding: "3px 8px", borderRadius: 4, fontWeight: 500, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--ink-2)" }}>{p.tag}</span>
                  <span className="caption">{p.date} · {p.read}</span>
                </div>
                <h3 className="serif" style={{ fontSize: 22, lineHeight: 1.2, letterSpacing: "-0.01em", marginBottom: 8 }}>{p.title}</h3>
                <p style={{ fontSize: 14, color: "var(--ink-2)", lineHeight: 1.5, margin: 0 }}>{p.excerpt}</p>
                <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--muted)", marginTop: 12, letterSpacing: "0.02em" }}>— {p.author}</div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* Newsletter */}
      <section style={{ padding: "72px 0", background: "var(--bg-2)", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", left: 40, bottom: -20, transform: "rotate(-8deg)", opacity: 0.9, pointerEvents: "none" }}>
          <Mascot pose="nimbus" size={140} />
        </div>
        <div style={{ position: "absolute", right: 60, top: 30, transform: "rotate(6deg)", opacity: 0.9, pointerEvents: "none" }}>
          <Mascot pose="rest" size={100} />
        </div>
        <div className="container" style={{ textAlign: "center", maxWidth: 680, position: "relative" }}>
          <div className="eyebrow"><span className="dot"/>Newsletter</div>
          <h2 className="display-3 serif" style={{ marginTop: 16 }}>Lo que escribimos, antes que todos.</h2>
          <p className="lede" style={{ marginTop: 16, margin: "16px auto 0" }}>
            Una vez al mes. Nada más. Sin promociones — solo cosas que valen la pena.
          </p>
          <form style={{ display: "flex", gap: 8, marginTop: 32, maxWidth: 440, margin: "32px auto 0" }} onSubmit={e => e.preventDefault()}>
            <input type="email" placeholder="tu@empresa.cl" style={{ flex: 1, padding: "12px 16px", fontSize: 14, border: "1px solid var(--rule-2)", background: "var(--paper)", borderRadius: 999, fontFamily: "var(--sans)" }}/>
            <button className="btn btn-primary" style={{ padding: "12px 20px" }}>Suscribir</button>
          </form>
        </div>
      </section>

      <Footer />
    </>
  );
}

Object.assign(window, { BlogPage });