// atrevida-extras.jsx
// Extra content for the final atrevida page: Services definitions,
// About (Álvaro), Blog, expanded FAQ. Plus VariantAtrevidaFinal wrapper
// that re-orders existing VA_* + new VAX_* sections.

// ── Extended data ────────────────────────────────────────────────────────────

const SERVICES_DEFS = [
  {
    q: "¿Qué es Visual IA?",
    a: "Visual IA es una agencia española de optimización para asistentes de IA (AIO — AI Optimization). Trabajamos la presencia online de PYMEs de servicios para que aparezcan como recomendación cuando un cliente potencial pregunta a ChatGPT, Perplexity, Google AI, Copilot, Claude o Gemini sobre su sector. Founder-led desde Valencia.",
  },
  {
    q: "¿En qué se diferencia del SEO tradicional?",
    a: "El SEO optimiza para que Google muestre tu web en una lista de 10 enlaces azules. La optimización para IA (AIO) trabaja para que un modelo de lenguaje te elija como recomendación cuando alguien hace una pregunta. El SEO compite por clicks; el AIO compite por menciones. Distintos canales, distintas reglas, distintos formatos de contenido.",
  },
  {
    q: "¿Qué entregamos exactamente?",
    a: "Un audit inicial de 8 páginas con tu visibilidad en ChatGPT, Perplexity, Google AI y Copilot, un mapa de competidores que aparecen donde tú no, y 3 acciones prioritarias. Si continúas con el plan Core: schema markup técnico, contenido mensual optimizado para IA, construcción de red de citas, y un dashboard semanal con tu visibilidad real medida.",
  },
  {
    q: "¿Para quién es Visual IA?",
    a: "Para negocios de servicios con búsqueda local o por especialidad en España: asesorías fiscales, clínicas dentales y médicas, despachos de abogados, arquitectos, consultores, agencias inmobiliarias, fisioterapeutas. Si tus clientes potenciales pueden preguntarle a una IA por un negocio como el tuyo, puedes optimizar tu aparición.",
  },
];

const ABOUT_ALVARO = {
  intro: "Soy Álvaro Beltrán y fundé Visual IA después de cinco años trabajando en producto y operaciones en algunas de las fintech más visibles de Europa.",
  bio: [
    "Pasé por ABN AMRO, DEGIRO y Bitvavo. Vi de cerca cómo los productos digitales ganan o pierden la pelea por la atención del usuario. Y vi una verdad incómoda: la atención ya no se gana en Google.",
    "Cuando alguien necesita un asesor, un abogado o una clínica en 2026, lo primero que hace cada vez más es preguntar a una IA. Si tu negocio no está estructurado para que ese modelo te entienda y te recomiende, no existes para ese cliente. Ni siquiera entras en la conversación.",
    "Por eso Visual IA. Aplicamos lo que aprendí en fintech — rigor técnico, métricas reales, procesos repetibles — al problema concreto que tienen las PYMEs españolas hoy: ser invisibles para los asistentes de IA que ya están decidiendo quién atiende a quién.",
  ],
  cv: [
    { years: "2024 →", company: "Visual IA", role: "Fundador" },
    { years: "2022–24", company: "Bitvavo", role: "Senior Product · Crypto exchange · NL" },
    { years: "2020–22", company: "DEGIRO",  role: "Operations Lead · Broker EU · NL"     },
    { years: "2018–20", company: "ABN AMRO", role: "Digital Banking · NL"                 },
  ],
  knowsAbout: [
    "AI Optimization (AIO)", "Posicionamiento en ChatGPT", "Perplexity", "Google AI Overview",
    "Schema markup JSON-LD", "Local SEO", "Fintech", "Producto digital",
  ],
};

const BLOG = [
  {
    featured: true,
    slug: "aparecer-chatgpt-asesoria-fiscal-valencia",
    cat: "Guía sectorial",
    title: "Cómo aparecer en ChatGPT cuando alguien busca un asesor fiscal en Valencia",
    excerpt: "Análisis paso a paso de cómo una asesoría local pasó de invisible a primera recomendación en 6 semanas. Con las 7 acciones concretas que aplicamos.",
    read: "12 min",
    date: "12 may 2026",
  },
  {
    slug: "posicionamiento-ia-clinicas-dentales-espana",
    cat: "Sector salud",
    title: "Posicionamiento en IA para clínicas dentales: la guía 2026",
    excerpt: "Qué buscan tus pacientes en ChatGPT, qué señales lee la IA, y cómo estructurar tu ficha para que te recomiende.",
    read: "9 min",
    date: "05 may 2026",
  },
  {
    slug: "schema-markup-ia-pymes-espana",
    cat: "Técnico",
    title: "Schema markup para que la IA entienda tu negocio — con ejemplos",
    excerpt: "El JSON-LD mínimo que necesita cualquier PYME local. Plantillas listas para copiar.",
    read: "11 min",
    date: "28 abr 2026",
  },
  {
    slug: "perplexity-recomendaciones-pymes",
    cat: "Plataformas",
    title: "Por qué Perplexity recomienda a tu competencia y no a ti",
    excerpt: "Cómo funciona el motor de citas de Perplexity y qué señales priorizan sus recomendaciones.",
    read: "8 min",
    date: "21 abr 2026",
  },
  {
    slug: "google-ai-overview-negocios-locales",
    cat: "Plataformas",
    title: "Google AI Overview: qué cambia para tu negocio local",
    excerpt: "El recuadro azul que aparece arriba de los resultados ya está decidiendo a quién recomendar. Aquí cómo entrar.",
    read: "7 min",
    date: "14 abr 2026",
  },
  {
    slug: "aio-vs-seo-diferencias-practicas",
    cat: "Fundamentos",
    title: "AIO vs SEO: las 7 diferencias prácticas que tu agencia no te cuenta",
    excerpt: "Misma web, dos juegos distintos. Por qué el SEO clásico ya no basta y dónde están las nuevas reglas.",
    read: "10 min",
    date: "07 abr 2026",
  },
];

// ── Extended FAQ (15 questions) ─────────────────────────────────────────────
const FAQ_EXTENDED = [
  {
    q: "¿Qué es exactamente AIO (AI Optimization)?",
    a: "AIO es el conjunto de técnicas que hacen que los asistentes de IA — ChatGPT, Perplexity, Google AI Overview, Claude, Gemini, Copilot — recomienden tu negocio cuando un usuario les hace una pregunta. Es a la IA generativa lo que el SEO fue al motor de búsqueda en 2008.",
  },
  {
    q: "¿Esto es lo mismo que el SEO que ya tengo contratado?",
    a: "No. El SEO tradicional optimiza para que Google te muestre en sus resultados clásicos. AIO trabaja para que los asistentes te recomienden directamente cuando alguien pregunta en lenguaje natural. Son canales distintos con reglas distintas; la mayoría de agencias SEO aún no saben trabajar el segundo.",
  },
  {
    q: "¿Cómo mido si mi negocio aparece en ChatGPT?",
    a: "Hacemos preguntas reales que harían tus clientes a cada asistente — variando ciudad, sector y especialidad — y registramos qué aparece. Es un test ciego que repetimos cada semana. En el dashboard ves la curva de visibilidad de tu negocio en el tiempo.",
  },
  {
    q: "¿En cuánto tiempo veré resultados?",
    a: "El audit en 48 horas. Los primeros cambios de visibilidad en IA son detectables en 2–4 semanas, dependiendo del sector y la competencia local. No prometemos magia — prometemos diagnóstico honesto y un plan realista con métricas reales.",
  },
  {
    q: "¿Tenéis casos de éxito en mi sector?",
    a: "Hasta hoy hemos trabajado con asesorías fiscales, clínicas dentales, agencias inmobiliarias, despachos de abogados, fisioterapias y consultoras. En la llamada de 30 min te enseñamos casos concretos del sector más cercano al tuyo.",
  },
  {
    q: "¿Trabajáis con autónomos individuales o solo con empresas?",
    a: "Trabajamos con ambos siempre que el negocio dependa de búsquedas por especialidad. Un fiscal autónomo, una fisioterapeuta o un arquitecto individual son perfiles habituales en el plan Starter o Core.",
  },
  {
    q: "¿Qué pasa si no soy técnico ni tengo un equipo de marketing?",
    a: "Es lo más habitual. En los planes Core y Growth lo implementamos todo nosotros — schema markup, contenido, citas, dashboards. Tú apruebas y revisas. La parte técnica no la tocas si no quieres.",
  },
  {
    q: "¿Necesito cambiar mi web o contratar algo más?",
    a: "No necesariamente. Muchas recomendaciones no requieren tocar el código de tu web. Algunas son tan simples como actualizar tu ficha de Google Business o añadir una sección de preguntas frecuentes bien estructurada.",
  },
  {
    q: "¿Hay un compromiso mínimo en los planes mensuales?",
    a: "No. Los planes Core y Growth son mensuales sin permanencia. Si dejas de ver valor, cancelas. Solo te pedimos 30 días de aviso por cortesía operativa.",
  },
  {
    q: "¿Los €300 del audit se descuentan si contrato el plan Core?",
    a: "Sí. Si decides continuar con Core (€600/mes) en los 7 días siguientes a la entrega del audit, los €300 se aplican como primer mes parcial. Si no continúas, los €300 son la única factura — sin trucos.",
  },
  {
    q: "¿En qué países operáis?",
    a: "Visual IA opera en España, 100% en español. Los modelos de IA tienen reglas distintas por idioma y región, y nuestra ventaja es estar especializados en el español peninsular y latinoamericano.",
  },
  {
    q: "¿Qué asistentes de IA cubrís exactamente?",
    a: "En todos los planes: ChatGPT, Perplexity, Google AI Overview y Copilot. En el plan Growth añadimos Claude, Gemini, You.com y Brave Search Summarizer, hasta 8+ plataformas.",
  },
  {
    q: "¿Hablo directamente contigo o con un comercial?",
    a: "Conmigo, Álvaro, en todos los puntos clave: descubrimiento, entrega del audit, revisión estratégica mensual. Visual IA es founder-led por convicción — la atención personal es parte del producto.",
  },
  {
    q: "¿Funciona para cualquier tipo de negocio?",
    a: "Funciona especialmente bien para servicios con búsqueda local o por especialidad: abogados, asesores fiscales, clínicas, arquitectos, consultores, inmobiliarias, fisioterapeutas. Si alguien puede buscarte en una IA, puedes optimizar tu aparición.",
  },
  {
    q: "¿Qué pasa con el RGPD y los datos de mi negocio?",
    a: "Solo trabajamos con datos públicos de tu negocio — los mismos que ya están indexados por buscadores. No accedemos a información sensible ni de tus clientes. Todo lo documentamos en un acuerdo de servicio claro.",
  },
];

// ── Components ───────────────────────────────────────────────────────────────

// What is Visual IA — services / definitions (AI-extractable structured Q&A)
function VAX_ServicesDefs() {
  return (
    <section style={{
      padding: "calc(112px * var(--d)) calc(48px * var(--d))",
      background: "var(--paper)",
      position: "relative",
    }}>
      <div style={{ position: "absolute", top: 40, right: 60 }}>
        <VA_Sticker rotate={3} color="var(--ink)" textColor="var(--paper)">§ 02 — ¿Qué es Visual IA?</VA_Sticker>
      </div>

      <h2 className="serif" style={{ fontSize: "clamp(56px, 6vw, 96px)", lineHeight: 0.92, letterSpacing: "-0.03em", marginBottom: 56, marginTop: 32, maxWidth: 1000 }}>
        Las preguntas <span className="serif-it" style={{ color: "var(--accent)" }}>directas</span><br />
        — con respuestas <span style={{ position: "relative", display: "inline-block" }}>
          directas.
          <svg style={{ position: "absolute", left: -6, right: -6, bottom: "-0.08em", width: "108%", height: 12, color: "var(--accent)" }} viewBox="0 0 200 12" preserveAspectRatio="none">
            <path d="M2 7 C 40 2, 80 11, 120 6 S 180 1, 198 8" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
          </svg>
        </span>
      </h2>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "calc(20px * var(--d))" }} itemScope itemType="https://schema.org/Service">
        <meta itemProp="serviceType" content="AI Optimization (AIO)" />
        <meta itemProp="provider" content="Visual IA" />
        {SERVICES_DEFS.map((it, i) => (
          <article key={i} style={{
            padding: "calc(32px * var(--d))",
            border: "2px solid var(--ink)",
            background: i === 0 ? "var(--accent)" : "var(--paper-2)",
            color: i === 0 ? "#fff" : "var(--ink)",
            position: "relative",
          }}>
            <div style={{ display: "flex", alignItems: "baseline", gap: 14, marginBottom: 16 }}>
              <span className="serif-it" style={{ fontSize: 48, color: i === 0 ? "rgba(255,255,255,0.85)" : "var(--accent)", lineHeight: 0.8, letterSpacing: "-0.04em" }}>
                {String(i+1).padStart(2,"0")}
              </span>
              <h3 className="serif" style={{ fontSize: 28, lineHeight: 1.15, letterSpacing: "-0.015em" }}>{it.q}</h3>
            </div>
            <p style={{ fontSize: 15.5, lineHeight: 1.65, color: i === 0 ? "rgba(255,255,255,0.95)" : "var(--ink-2)" }}>
              {it.a}
            </p>
          </article>
        ))}
      </div>

      {/* Quick comparison strip: SEO vs AIO — single CSS grid so columns align across header + body */}
      <div style={{
        marginTop: 56,
        border: "2px solid var(--ink)",
        background: "var(--paper)",
        display: "grid",
        gridTemplateColumns: "240px 1fr 1fr",
      }}>
        {/* Header row */}
        <div style={{ padding: "calc(20px * var(--d))", borderBottom: "2px solid var(--ink)" }}></div>
        <div style={{ padding: "calc(20px * var(--d))", borderLeft: "2px solid var(--ink)", borderBottom: "2px solid var(--ink)" }}>
          <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", color: "var(--muted)" }}>SISTEMA ANTERIOR</div>
          <div className="serif" style={{ fontSize: 28, lineHeight: 1, marginTop: 4 }}>SEO clásico</div>
        </div>
        <div style={{ padding: "calc(20px * var(--d))", borderLeft: "2px solid var(--ink)", borderBottom: "2px solid var(--ink)", background: "var(--accent)", color: "#fff" }}>
          <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", opacity: 0.9 }}>SISTEMA NUEVO</div>
          <div className="serif-it" style={{ fontSize: 28, lineHeight: 1, marginTop: 4 }}>AIO · Visual IA</div>
        </div>

        {/* Data rows */}
        {[
          ["Compite por…", "clicks en una lista", "menciones en una recomendación"],
          ["Métrica clave", "posición en la SERP", "tasa de aparición en la IA"],
          ["Formato del contenido", "palabras clave + backlinks", "preguntas + respuestas estructuradas"],
          ["Tiempo a primer resultado", "3–9 meses", "2–4 semanas"],
          ["Compite con…", "otros 10 enlaces azules", "2–4 marcas recomendadas, no más"],
        ].map((row, i, all) => {
          const last = i === all.length - 1;
          return (
            <React.Fragment key={i}>
              <div className="mono" style={{
                padding: "calc(18px * var(--d))",
                fontSize: 13, color: "var(--muted)",
                borderBottom: last ? "none" : "1px solid var(--line)",
              }}>
                {row[0].toUpperCase()}
              </div>
              <div style={{
                padding: "calc(18px * var(--d))",
                borderLeft: "2px solid var(--ink)",
                borderBottom: last ? "none" : "1px solid var(--line)",
                fontSize: 16, lineHeight: 1.45, color: "var(--ink-2)",
              }}>
                {row[1]}
              </div>
              <div style={{
                padding: "calc(18px * var(--d))",
                borderLeft: "2px solid var(--ink)",
                borderBottom: last ? "none" : "1px solid var(--line)",
                fontSize: 16, lineHeight: 1.45, color: "var(--ink)",
                background: "var(--accent-soft)", fontWeight: 500,
              }}>
                {row[2]}
              </div>
            </React.Fragment>
          );
        })}
      </div>
    </section>
  );
}

// About Álvaro — founder authority
function VAX_About() {
  return (
    <section style={{
      padding: "calc(112px * var(--d)) calc(48px * var(--d))",
      background: "var(--paper-2)",
      position: "relative", overflow: "hidden",
    }} itemScope itemType="https://schema.org/Person">
      <meta itemProp="name" content="Álvaro Beltrán" />
      <meta itemProp="jobTitle" content="Fundador de Visual IA" />
      <meta itemProp="worksFor" content="Visual IA" />

      <div className="serif-it" style={{
        position: "absolute", top: 40, right: -20,
        fontSize: 280, color: "rgba(196,74,31,0.08)",
        lineHeight: 0.85, letterSpacing: "-0.05em",
        pointerEvents: "none",
      }}>Álvaro.</div>

      <div style={{ position: "relative", display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: "calc(56px * var(--d))", alignItems: "start" }}>
        {/* Left: photo + CV chronology */}
        <div>
          <VA_Sticker rotate={-3} style={{ marginBottom: 24 }}>§ 06 — Sobre el fundador</VA_Sticker>
          <div style={{ position: "relative", marginBottom: 32 }}>
            <ThreeBlob size={130} style={{
              position: "absolute", top: -34, right: -34,
              opacity: 0.95, zIndex: 1, pointerEvents: "none",
            }} />
            <div style={{
              aspectRatio: "4/5",
              border: "2px solid var(--ink)",
              background: "var(--paper)",
              overflow: "hidden",
              transform: "rotate(-1.5deg)",
              position: "relative", zIndex: 2,
              boxShadow: "8px 8px 0 var(--accent)",
            }}>
              <img src={FOUNDER.photo} alt="Álvaro Beltrán, fundador de Visual IA" itemProp="image" style={{
                width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 28%",
                filter: "contrast(1.06)",
              }} />
            </div>
          </div>

          {/* CV chronology */}
          <div style={{ border: "2px solid var(--ink)", background: "var(--paper)" }}>
            <div className="mono" style={{ padding: "12px 18px", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", borderBottom: "2px solid var(--ink)", background: "var(--ink)", color: "var(--paper)" }}>
              CV abreviado · 5+ años fintech EU
            </div>
            {ABOUT_ALVARO.cv.map((row, i) => (
              <div key={i} style={{
                display: "grid", gridTemplateColumns: "auto 1fr",
                gap: 16, padding: "14px 18px",
                borderBottom: i < ABOUT_ALVARO.cv.length - 1 ? "1px solid var(--line)" : "none",
                background: i === 0 ? "var(--accent-soft)" : "transparent",
              }}>
                <span className="mono" style={{ fontSize: 12, color: i === 0 ? "var(--accent)" : "var(--muted)", whiteSpace: "nowrap", paddingTop: 2 }} itemProp={i > 0 ? "alumniOf" : null}>
                  {row.years}
                </span>
                <div>
                  <div className="serif" style={{ fontSize: 18, lineHeight: 1.1, letterSpacing: "-0.01em" }}>{row.company}</div>
                  <div style={{ fontSize: 12, color: "var(--ink-2)", marginTop: 2 }}>{row.role}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Right: long-form bio */}
        <div>
          <h2 className="serif" style={{ fontSize: "clamp(48px, 5.5vw, 80px)", lineHeight: 0.95, letterSpacing: "-0.03em", marginBottom: 28 }}>
            Cinco años viendo<br />
            cómo se gana — y<br />
            se pierde — <span className="serif-it" style={{ color: "var(--accent)" }}>la atención</span>.
          </h2>
          <p className="serif-it" style={{ fontSize: 26, lineHeight: 1.4, color: "var(--ink)", marginBottom: 28 }} itemProp="description">
            "{ABOUT_ALVARO.intro}"
          </p>
          {ABOUT_ALVARO.bio.map((p, i) => (
            <p key={i} style={{ fontSize: 17, lineHeight: 1.7, color: "var(--ink-2)", marginBottom: 18 }}>{p}</p>
          ))}

          {/* Knows about — for AI extraction */}
          <div style={{ marginTop: 36, paddingTop: 28, borderTop: "1px dashed var(--line)" }}>
            <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--accent)", marginBottom: 14 }}>
              ▸ Especialidades
            </div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
              {ABOUT_ALVARO.knowsAbout.map((k) => (
                <span key={k} itemProp="knowsAbout" style={{
                  fontSize: 12, padding: "6px 12px",
                  border: "1.5px solid var(--ink)",
                  fontFamily: "var(--mono)",
                  letterSpacing: "0.04em",
                }}>{k}</span>
              ))}
            </div>
          </div>

          <div style={{ display: "flex", gap: 20, alignItems: "center", marginTop: 36 }}>
            <a href="#" className="btn btn-ink btn-arrow">Reservar 30 min con Álvaro</a>
            <a href="https://linkedin.com" itemProp="sameAs" style={{ fontSize: 14, color: "var(--ink-2)", textDecoration: "none", borderBottom: "1px solid var(--ink-2)", paddingBottom: 2 }}>
              LinkedIn ↗
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// Blog section — featured + grid, semantic URL slugs surfaced
function VAX_Blog() {
  const [featured, ...rest] = BLOG;
  return (
    <section style={{
      padding: "calc(112px * var(--d)) calc(48px * var(--d))",
      background: "var(--paper)",
      position: "relative", borderTop: "2px solid var(--ink)",
    }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr auto", alignItems: "baseline", marginBottom: 56, gap: 32 }}>
        <div>
          <VA_Sticker rotate={2} style={{ marginBottom: 24 }}>§ 09 — Diario</VA_Sticker>
          <h2 className="serif" style={{ fontSize: "clamp(56px, 6vw, 96px)", lineHeight: 0.92, letterSpacing: "-0.03em" }}>
            Aprende cómo <span className="serif-it" style={{ color: "var(--accent)" }}>te ve la IA</span>.
          </h2>
        </div>
        <a href="#" className="serif-it" style={{ fontSize: 22, color: "var(--ink)", textDecoration: "none", borderBottom: "2px solid var(--ink)", whiteSpace: "nowrap" }}>
          Ver todos los artículos →
        </a>
      </div>

      {/* Featured article */}
      <a href={`/${featured.slug}`} style={{
        textDecoration: "none", color: "inherit",
        display: "grid", gridTemplateColumns: "1.2fr 1fr",
        gap: "calc(40px * var(--d))",
        border: "2px solid var(--ink)",
        padding: "calc(32px * var(--d))",
        background: "var(--paper-2)",
        marginBottom: 36,
        position: "relative",
      }}>
        <VA_Sticker rotate={-4} color="var(--accent)" textColor="#fff" style={{
          position: "absolute", top: -16, left: 24, fontSize: 12,
        }}>
          ★ Destacado
        </VA_Sticker>
        <div>
          <div style={{ display: "flex", gap: 12, marginBottom: 18, alignItems: "center" }}>
            <span className="mono" style={{ fontSize: 11, color: "var(--accent)", letterSpacing: "0.14em", textTransform: "uppercase", padding: "4px 10px", border: "1.5px solid var(--accent)" }}>
              {featured.cat}
            </span>
            <span className="mono" style={{ fontSize: 11, color: "var(--muted)", letterSpacing: "0.1em" }}>{featured.date} · {featured.read} de lectura</span>
          </div>
          <h3 className="serif" style={{ fontSize: "clamp(36px, 4.2vw, 60px)", lineHeight: 1, letterSpacing: "-0.025em", marginBottom: 20, color: "var(--ink)" }}>
            {featured.title}
          </h3>
          <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--ink-2)", marginBottom: 24 }}>
            {featured.excerpt}
          </p>
          <div className="mono" style={{ fontSize: 11, color: "var(--muted)", letterSpacing: "0.08em" }}>
            visualia.es/<span style={{ color: "var(--accent)" }}>{featured.slug}</span>
          </div>
        </div>
        <div style={{
          aspectRatio: "1/1", position: "relative",
          background: "var(--accent)", color: "#fff",
          padding: "calc(32px * var(--d))",
          display: "flex", flexDirection: "column", justifyContent: "space-between",
          border: "2px solid var(--ink)",
        }}>
          <div className="serif-it" style={{ fontSize: 96, lineHeight: 1, color: "rgba(255,255,255,0.4)" }}>01</div>
          <div>
            <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", opacity: 0.8, marginBottom: 10 }}>EJEMPLO REAL</div>
            <div className="serif" style={{ fontSize: 30, lineHeight: 1.05, marginBottom: 12 }}>
              <span className="serif-it">"Asesoría fiscal</span><br />
              <span className="serif-it">Valencia"</span>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 12, alignItems: "baseline" }}>
              <span className="mono" style={{ fontSize: 11, opacity: 0.7 }}>antes</span>
              <span style={{ height: 1, background: "rgba(255,255,255,0.3)" }}></span>
              <span className="serif" style={{ fontSize: 22, textDecoration: "line-through" }}>—</span>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 12, alignItems: "baseline", marginTop: 6 }}>
              <span className="mono" style={{ fontSize: 11, opacity: 0.9 }}>después</span>
              <span style={{ height: 1, background: "rgba(255,255,255,0.5)" }}></span>
              <span className="serif" style={{ fontSize: 28 }}>#1</span>
            </div>
          </div>
        </div>
      </a>

      {/* Grid of other articles */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "calc(20px * var(--d))" }}>
        {rest.map((post, i) => (
          <a key={post.slug} href={`/${post.slug}`} style={{
            textDecoration: "none", color: "inherit",
            border: "1.5px solid var(--ink)", padding: "calc(26px * var(--d))",
            background: "var(--paper-2)",
            display: "flex", flexDirection: "column", minHeight: 280,
            transition: "transform .15s, box-shadow .15s",
            transform: `rotate(${[(-0.6),(0.4),(-0.3),(0.2),(0)][i] || 0}deg)`,
          }}>
            <div style={{ display: "flex", gap: 10, marginBottom: 16, alignItems: "center" }}>
              <span className="mono" style={{ fontSize: 10, color: "var(--accent)", letterSpacing: "0.14em", textTransform: "uppercase" }}>
                {post.cat}
              </span>
              <span className="mono" style={{ fontSize: 10, color: "var(--muted)" }}>· {post.read}</span>
            </div>
            <h3 className="serif" style={{ fontSize: 22, lineHeight: 1.2, letterSpacing: "-0.015em", marginBottom: 12, color: "var(--ink)" }}>
              {post.title}
            </h3>
            <p style={{ fontSize: 14, lineHeight: 1.6, color: "var(--ink-2)", marginBottom: 16 }}>
              {post.excerpt}
            </p>
            <div className="mono" style={{ fontSize: 10, color: "var(--muted)", marginTop: "auto", letterSpacing: "0.06em", paddingTop: 14, borderTop: "1px dashed var(--line)" }}>
              /{post.slug}
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}

// Expanded FAQ section (overrides VA_FAQ) — 15 questions, FAQPage schema
function VAX_FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section style={{ padding: "calc(112px * var(--d)) calc(48px * var(--d))", background: "var(--paper)" }} itemScope itemType="https://schema.org/FAQPage">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: "calc(64px * var(--d))", alignItems: "start" }}>
        <div style={{ position: "sticky", top: 40 }}>
          <VA_Sticker rotate={3} style={{ marginBottom: 24 }}>§ 10 — 15 preguntas</VA_Sticker>
          <h2 className="serif" style={{ fontSize: "clamp(48px, 5.5vw, 84px)", lineHeight: 0.92, letterSpacing: "-0.03em", marginBottom: 24 }}>
            Lo que nos<br /><span className="serif-it" style={{ color: "var(--accent)" }}>preguntan</span><br />antes de empezar.
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.65, color: "var(--ink-2)", marginBottom: 24, maxWidth: 360 }}>
            Las 15 preguntas más frecuentes — las mismas que la gente le hace a ChatGPT cuando busca un servicio como el nuestro. Si no encuentras la tuya, escríbeme.
          </p>
          <a href="mailto:hola@visualia.es" className="serif-it" style={{ fontSize: 20, color: "var(--accent)", textDecoration: "none", borderBottom: "2px solid var(--accent)" }}>
            hola@visualia.es
          </a>
        </div>
        <div>
          {FAQ_EXTENDED.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i}
                itemScope itemProp="mainEntity" itemType="https://schema.org/Question"
                style={{ borderTop: i === 0 ? "2px solid var(--ink)" : "1px solid var(--line)", padding: "calc(20px * var(--d)) 0" }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                  background: "transparent", border: "none", padding: 0, width: "100%",
                  display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 18, alignItems: "baseline",
                  textAlign: "left", cursor: "pointer",
                }}>
                  <span className="serif-it" style={{ fontSize: 24, color: "var(--accent)", lineHeight: 0.9 }}>
                    {String(i+1).padStart(2,"0")}
                  </span>
                  <span itemProp="name" className="serif" style={{ fontSize: 21, lineHeight: 1.3, color: "var(--ink)" }}>{f.q}</span>
                  <span className="serif" style={{ color: "var(--accent)", fontSize: 28, lineHeight: 0.8 }}>{isOpen ? "−" : "+"}</span>
                </button>
                <div itemScope itemProp="acceptedAnswer" itemType="https://schema.org/Answer" style={{ display: isOpen ? "block" : "none" }}>
                  <p itemProp="text" style={{ fontSize: 16, lineHeight: 1.75, color: "var(--ink-2)", marginTop: 14, marginLeft: 38, maxWidth: 680 }}>
                    {f.a}
                  </p>
                </div>
                {/* Hidden answer text so JSON-LD always has it, even when closed */}
                {!isOpen && (
                  <span style={{ display: "none" }} itemScope itemProp="acceptedAnswer" itemType="https://schema.org/Answer">
                    <span itemProp="text">{f.a}</span>
                  </span>
                )}
              </div>
            );
          })}
          <div style={{ borderTop: "2px solid var(--ink)" }}></div>
        </div>
      </div>
    </section>
  );
}

// ── Final assembled page ────────────────────────────────────────────────────
function VariantAtrevidaFinal() {
  return (
    <div style={{ background: "var(--paper)", position: "relative", overflow: "hidden", width: "100%", minHeight: "100%" }}>
      <div className="paper-texture"></div>
      <div style={{ position: "relative" }}>
        <VA_Nav />
        <VA_Hero />
        <VA_Logos />
        <VA_Problem />
        <VAX_ServicesDefs />
        <VA_Benefits />
        <VA_Tiers />
        <VA_Demo />
        <VAX_About />
        <VA_Calendar />
        <VA_Testimonials />
        <VAX_Blog />
        <VAX_FAQ />
        <VA_CTA />
        <VA_Footer />
      </div>
    </div>
  );
}

Object.assign(window, {
  SERVICES_DEFS, ABOUT_ALVARO, BLOG, FAQ_EXTENDED,
  VAX_ServicesDefs, VAX_About, VAX_Blog, VAX_FAQ,
  VariantAtrevidaFinal,
});
