// variant-atrevida.jsx
// Bold provocative — oversized type, alternating ink/paper sections, 3D blob,
// hand-drawn marks, stickers. Founder photo bleeds into hero.

function VA_Sticker({ rotate = -4, color = "var(--accent)", textColor = "#fff", children, style }) {
  return (
    <span style={{
      display: "inline-block",
      background: color, color: textColor,
      fontFamily: "var(--mono)", fontSize: 11,
      padding: "6px 12px",
      letterSpacing: "0.12em", textTransform: "uppercase",
      transform: `rotate(${rotate}deg)`,
      boxShadow: "2px 2px 0 var(--ink)",
      ...style
    }}>{children}</span>);

}

function VA_Nav() {
  return (
    <nav style={{
      display: "flex", alignItems: "center", justifyContent: "space-between",
      padding: "calc(20px * var(--d)) calc(48px * var(--d))",
      background: "var(--paper)",
      borderBottom: "2px solid var(--ink)",
      position: "relative", zIndex: 5
    }}>
      <a href="#" style={{ textDecoration: "none", display: "flex", alignItems: "baseline", gap: 4 }}>
        <span className="serif" style={{ fontSize: 32, color: "var(--ink)", lineHeight: 1, letterSpacing: "-0.02em" }}>Visual</span>
        <span className="serif-it" style={{ fontSize: 32, color: "var(--accent)", lineHeight: 1 }}>IA</span>
        <span style={{ width: 8, height: 8, background: "var(--accent)", borderRadius: "50%", marginLeft: 4, marginBottom: 4 }}></span>
      </a>
      <ul style={{ listStyle: "none", display: "flex", gap: "calc(22px * var(--d))" }}>
        {["Servicios", "Sobre mí", "Demo", "Agenda", "Blog", "FAQ"].map((l) =>
        <li key={l}><a href="#" className="serif" style={{ fontSize: 16, color: "var(--ink)", textDecoration: "none" }}>{l}</a></li>
        )}
      </ul>
      <a href="#" className="btn btn-accent btn-arrow">Audit €300</a>
    </nav>);

}

function VA_Hero() {
  return (
    <section style={{
      position: "relative", overflow: "hidden",
      padding: "calc(56px * var(--d)) calc(48px * var(--d)) calc(64px * var(--d))",
      background: "var(--paper)",
      borderBottom: "2px solid var(--ink)"
    }}>
      {/* Background watermark */}
      <div className="serif-it" style={{
        position: "absolute", top: "55%", right: "-3%",
        fontSize: 480, color: "rgba(196,74,31,0.06)", lineHeight: 0.85,
        letterSpacing: "-0.05em",
        pointerEvents: "none", userSelect: "none",
        transform: "translateY(-50%)"
      }}>IA</div>

      <div style={{ position: "relative", display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: "calc(32px * var(--d))", alignItems: "start" }}>
        <div style={{ position: "relative" }}>
          {/* Stickers above headline */}
          <div style={{ display: "flex", gap: 12, marginBottom: 32, alignItems: "center" }}>
            <VA_Sticker rotate={-3}>Founder-led · 2026</VA_Sticker>
            <VA_Sticker rotate={2} color="var(--ink)" textColor="var(--paper)">100% español</VA_Sticker>
            <span className="mono" style={{ fontSize: 12, color: "var(--muted)", letterSpacing: "0.12em" }}></span>
          </div>

          <h1 className="serif" style={{
            fontSize: "clamp(96px, 11vw, 168px)", lineHeight: 0.88,
            letterSpacing: "-0.035em", color: "var(--ink)", marginBottom: 28
          }}>
            Tu&nbsp;competencia<br />
            <span className="serif-it">ya aparece en</span><br />
            <span style={{ position: "relative", display: "inline-block" }}>
              <span style={{ color: "var(--accent)" }}>ChatGPT.</span>
              <span style={{ position: "absolute", top: "-8%", left: "-4%", right: "-4%", bottom: "-8%", color: "var(--accent)" }}>
                <HandCircle stroke="currentColor" strokeWidth={4} rotate={-2} />
              </span>
            </span>
            <br />
            <span style={{ display: "inline-flex", alignItems: "baseline", gap: 24 }}>
              Tú,
              <span style={{
                background: "var(--ink)", color: "var(--paper)",
                padding: "0.05em 0.18em",
                transform: "rotate(-1.5deg)", display: "inline-block"
              }} className="serif-it">todavía no.</span>
            </span>
          </h1>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32, maxWidth: 720, marginTop: 32, marginBottom: 36 }}>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: "var(--ink-2)" }}>
              Optimizamos la presencia de tu negocio en los asistentes de IA — <strong style={{ color: "var(--ink)" }}>ChatGPT, Perplexity, Google AI</strong> — para que seas la primera recomendación cuando tu próximo cliente haga una pregunta.
            </p>
            <p className="serif-it" style={{ fontSize: 18, lineHeight: 1.55, color: "var(--ink)", paddingLeft: 20, borderLeft: "3px solid var(--accent)" }}>
              El SEO te coloca en una lista de resultados. La IA te coloca en una recomendación. Son juegos distintos.
            </p>
          </div>

          <div style={{ display: "flex", gap: 20, alignItems: "center", flexWrap: "wrap" }}>
            <a href="#" className="btn btn-accent btn-arrow" style={{ fontSize: 16, padding: "18px 28px" }}>Pide tu Audit · €300</a>
            <a href="#" style={{ color: "var(--ink)", fontSize: 15, textDecoration: "none", borderBottom: "2px solid var(--ink)", paddingBottom: 2 }}>¿Cómo funciona? ↓</a>
            <span className="mono" style={{ fontSize: 11, color: "var(--muted)", letterSpacing: "0.12em" }}>
              ENTREGA · 48H<br />SIN&nbsp;PERMANENCIA
            </span>
          </div>
        </div>

        {/* Photo + 3D blob composition */}
        <div style={{ position: "relative", marginTop: 40 }}>
          {/* 3D blob behind photo */}
          <div className="blob-3d" style={{
            position: "absolute", top: -40, right: -30,
            width: 200, height: 200,
            zIndex: 1
          }}></div>

          <VA_Sticker rotate={6} color="var(--ink)" textColor="var(--paper)" style={{
            position: "absolute", top: -20, left: -20, zIndex: 4, fontSize: 13, padding: "8px 16px"
          }}>
            Hola, soy Álvaro 👋
          </VA_Sticker>

          <div style={{
            position: "relative", zIndex: 2,
            aspectRatio: "4/5",
            border: "2px solid var(--ink)",
            background: "var(--paper-2)", overflow: "hidden",
            transform: "rotate(1.2deg)"
          }}>
            <img src={FOUNDER.photo} alt={FOUNDER.name} style={{
              width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 28%",
              filter: "contrast(1.08) saturate(0.95)"
            }} />
          </div>

          {/* Caption sticker */}
          <div style={{
            position: "absolute", bottom: -24, left: -18,
            background: "var(--paper)", border: "2px solid var(--ink)",
            padding: "12px 18px", zIndex: 4,
            transform: "rotate(-2deg)",
            boxShadow: "4px 4px 0 var(--accent)"
          }}>
            <div className="serif" style={{ fontSize: 22, lineHeight: 1 }}>{FOUNDER.name}</div>
            <div className="mono" style={{ fontSize: 10, color: "var(--muted)", letterSpacing: "0.14em", textTransform: "uppercase", marginTop: 4 }}>
              {FOUNDER.role}
            </div>
          </div>

          {/* Hand arrow pointing at photo */}
          <div style={{ position: "absolute", top: 20, left: -110, width: 130, height: 100, color: "var(--accent)", transform: "rotate(8deg)" }}>
            <HandArrow strokeWidth={2.6} />
            <div className="mono" style={{
              position: "absolute", top: -8, left: 8, fontSize: 11, color: "var(--accent)",
              letterSpacing: "0.08em", textTransform: "uppercase", transform: "rotate(-6deg)", whiteSpace: "nowrap"
            }}>
              te atiendo yo →
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function VA_Logos() {
  return (
    <section style={{
      background: "var(--ink)", color: "var(--paper)",
      padding: "calc(36px * var(--d)) calc(48px * var(--d))",
      borderBottom: "2px solid var(--ink)",
      display: "grid", gridTemplateColumns: "auto 1fr", gap: 56, alignItems: "center"
    }}>
      <div>
        <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 4, color: "rgb(208, 204, 204)" }}>
          ▸ Optimizamos en
        </div>
        <div className="serif-it" style={{ fontSize: 22, color: "var(--paper)" }}>todos a la vez.</div>
      </div>
      <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "space-between", alignItems: "center", gap: 24 }}>
        {AI_LOGOS.map((l, i) =>
        <span key={l} className="serif-it" style={{ ...{ color: i === 0 ? "var(--accent)" : "rgba(243,236,220,0.85)", fontSize: 32, letterSpacing: "-0.01em" }, color: "rgb(243, 236, 220)" }}>
            {l}{i < AI_LOGOS.length - 1 && <span style={{ marginLeft: 16, color: "rgba(243,236,220,0.3)" }}>·</span>}
          </span>
        )}
      </div>
    </section>);

}

function VA_Problem() {
  return (
    <section style={{ padding: "calc(112px * var(--d)) calc(48px * var(--d))", background: "var(--paper)", position: "relative" }}>
      <div style={{ position: "absolute", top: 40, right: 40 }}>
        <VA_Sticker rotate={3} color="var(--accent)" textColor="#fff">§ 01 — Problema</VA_Sticker>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: "calc(72px * var(--d))" }}>
        <div>
          <h2 className="serif" style={{ fontSize: "clamp(64px, 7vw, 112px)", lineHeight: 0.92, letterSpacing: "-0.03em", marginBottom: 36 }}>
            El SEO<br />
            <span className="serif-it" style={{ color: "var(--accent)" }}>que conoces</span><br />
            <span style={{ position: "relative", display: "inline-block" }}>
              no te ayuda
              <svg style={{ position: "absolute", left: -8, right: -8, bottom: "-0.1em", width: "108%", height: 12, color: "var(--accent)" }} viewBox="0 0 200 12" preserveAspectRatio="none">
                <path d="M2 6 C 40 0, 80 12, 120 5 S 180 0, 198 8" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
              </svg>
            </span><br />
            aquí.
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.65, color: "var(--ink-2)", marginBottom: 20, maxWidth: 620 }}>
            Cuando alguien busca un abogado, una clínica o una asesoría en 2026, no siempre llega a Google. Le pregunta directamente a un asistente de IA. Y el asistente decide quién recomienda — con reglas que <strong style={{ color: "var(--ink)" }}>no son las del SEO tradicional.</strong>
          </p>
          <p style={{ fontSize: 18, lineHeight: 1.65, color: "var(--ink-2)", maxWidth: 620 }}>
            La ventana es <span style={{ background: "var(--accent-soft)", padding: "2px 6px" }}>ahora</span>. Los negocios que entren primero en su sector serán los más difíciles de desbancar — como pasó con Google en 2008.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, alignSelf: "center" }}>
          {PROBLEM.stats.map((s, i) =>
          <div key={i} style={{
            padding: "calc(28px * var(--d)) calc(22px * var(--d))",
            background: i % 2 === 0 ? "var(--ink)" : "var(--accent)",
            color: i % 2 === 0 ? "var(--paper)" : "#fff",
            transform: `rotate(${[-1.5, 1, 1.2, -0.8][i]}deg)`,
            boxShadow: "4px 4px 0 var(--ink)"
          }}>
              <div className="serif" style={{ fontSize: 72, lineHeight: 0.9, letterSpacing: "-0.03em", marginBottom: 10 }}>{s.num}</div>
              <div style={{ fontSize: 13.5, lineHeight: 1.4, opacity: 0.9 }}>{s.label}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function VA_Benefits() {
  return (
    <section style={{ padding: "calc(112px * var(--d)) calc(48px * var(--d))", background: "var(--ink)", color: "var(--paper)", position: "relative", overflow: "hidden" }}>
      <div className="serif" style={{
        position: "absolute", top: -40, right: -20,
        fontSize: 260, color: "rgba(196,74,31,0.12)", lineHeight: 0.9,
        pointerEvents: "none"
      }}>05.</div>

      <div style={{ position: "relative", marginBottom: "calc(56px * var(--d))" }}>
        <VA_Sticker rotate={-3} color="var(--paper)" textColor="var(--ink)" style={{ marginBottom: 24 }}>
          § 02 — Lo que hacemos
        </VA_Sticker>
        <h2 className="serif" style={{ fontSize: "clamp(56px, 6vw, 96px)", lineHeight: 0.92, letterSpacing: "-0.03em", maxWidth: 920 }}>
          Cinco áreas. <span className="serif-it" style={{ color: "var(--accent)" }}>Un objetivo:</span><br />
          que te <span style={{ position: "relative", display: "inline-block" }}>
            recomienden
            <svg style={{ position: "absolute", left: -8, right: -8, 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>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 0, border: "1px solid rgba(243,236,220,0.18)", position: "relative" }}>
        {BENEFITS.map((b, i) =>
        <div key={b.n} style={{
          padding: "calc(32px * var(--d)) calc(20px * var(--d))",
          borderRight: i < 4 ? "1px solid rgba(243,236,220,0.18)" : "none",
          minHeight: 280, display: "flex", flexDirection: "column"
        }}>
            <div className="serif-it" style={{ fontSize: 80, color: "var(--accent)", lineHeight: 0.85, marginBottom: 18, letterSpacing: "-0.04em" }}>{b.n}</div>
            <div className="serif" style={{ fontSize: 22, lineHeight: 1.15, marginBottom: 12, color: "var(--paper)" }}>{b.title}</div>
            <div style={{ fontSize: 13.5, lineHeight: 1.6, color: "rgba(243,236,220,0.65)", marginTop: "auto" }}>{b.desc}</div>
          </div>
        )}
      </div>
    </section>);

}

function VA_Tiers() {
  return (
    <section style={{ padding: "calc(112px * var(--d)) calc(48px * var(--d))", background: "var(--paper)", position: "relative", backgroundColor: "rgb(255, 255, 255)" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr auto", alignItems: "end", marginBottom: "calc(56px * var(--d))" }}>
        <div>
          <VA_Sticker rotate={2} style={{ marginBottom: 24 }}>§ 03 — Planes</VA_Sticker>
          <h2 className="serif" style={{ fontSize: "clamp(56px, 6vw, 96px)", lineHeight: 0.92, letterSpacing: "-0.03em" }}>
            Empieza con un audit.<br />
            <span className="serif-it" style={{ color: "var(--accent)" }}>Sin compromiso.</span>
          </h2>
        </div>
        <p style={{ fontSize: 16, lineHeight: 1.65, color: "var(--ink-2)", maxWidth: 320, textAlign: "right" }}>
          Si el audit no te convence, no hay razón para continuar. <strong style={{ color: "var(--ink)" }}>Sin permanencia, sin trucos.</strong>
        </p>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "calc(24px * var(--d))" }}>
        {TIERS.map((tier, i) => {
          const featured = tier.featured;
          return (
            <div key={tier.name} style={{ ...{
                padding: "calc(40px * var(--d)) calc(32px * var(--d))",
                background: featured ? "var(--ink)" : "var(--paper)",
                color: featured ? "var(--paper)" : "var(--ink)",
                border: "2px solid var(--ink)",
                position: "relative",
                transform: featured ? "translateY(-12px)" : "none",
                boxShadow: featured ? "6px 6px 0 var(--accent)" : "4px 4px 0 var(--ink)", backgroundColor: "rgb(77, 107, 77)"
              }, color: "rgb(255, 215, 215)" }}>
              {featured &&
              <VA_Sticker rotate={-3} color="var(--accent)" textColor="#fff" style={{
                position: "absolute", top: -16, left: 20,
                fontSize: 12, padding: "8px 14px"
              }}>
                  Más popular ★
                </VA_Sticker>
              }
              <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 12, marginTop: featured ? 6 : 0, color: "rgb(0, 0, 0)" }}>
                {String(i + 1).padStart(2, "0")} · {tier.name}
              </div>
              <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginBottom: 16 }}>
                <div className="serif" style={{ fontSize: 84, lineHeight: 0.9, letterSpacing: "-0.04em" }}>{tier.price}</div>
                <div className="serif-it" style={{ fontSize: 18, color: featured ? "rgba(243,236,220,0.6)" : "var(--muted)" }}>{tier.priceSub}</div>
              </div>
              <p style={{ fontSize: 14.5, lineHeight: 1.55, marginBottom: 24, paddingBottom: 24, borderBottom: "1.5px dashed " + (featured ? "rgba(243,236,220,0.25)" : "var(--line)"), color: featured ? "rgba(243,236,220,0.8)" : "var(--ink-2)" }}>
                {tier.desc}
              </p>
              <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 10, marginBottom: 28 }}>
                {tier.features.map((f, j) =>
                <li key={j} style={{ display: "flex", gap: 12, fontSize: 13.5, lineHeight: 1.5 }}>
                    <span style={{ color: "var(--accent)", flexShrink: 0, fontWeight: 700 }}>✦</span>
                    <span>{f}</span>
                  </li>
                )}
              </ul>
              <a href="#" className={featured ? "btn btn-accent" : "btn btn-outline"} style={{
                width: "100%", justifyContent: "center",
                color: featured ? "#fff" : "var(--ink)",
                borderColor: featured ? "var(--accent)" : "var(--ink)"
              }}>
                {tier.cta} →
              </a>
            </div>);

        })}
      </div>
    </section>);

}

function VA_Demo() {
  const [state, setState] = React.useState("before");
  return (
    <section style={{ padding: "calc(112px * var(--d)) calc(48px * var(--d))", background: "var(--paper-2)", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", top: 40, right: 60 }}>
        <VA_Sticker rotate={4} color="var(--ink)" textColor="var(--paper)">§ 04 — Demo en vivo</VA_Sticker>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: "calc(64px * var(--d))", alignItems: "center" }}>
        <div>
          <h2 className="serif" style={{ fontSize: "clamp(56px, 6vw, 96px)", lineHeight: 0.92, letterSpacing: "-0.03em", marginBottom: 28 }}>
            Mira cómo te ve<br /><span className="serif-it" style={{ color: "var(--accent)" }}>ChatGPT</span> hoy.
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--ink-2)", marginBottom: 32 }}>
            Pulsa el botón — verás la diferencia entre <strong style={{ color: "var(--ink)" }}>antes</strong> y <strong style={{ color: "var(--accent)" }}>después</strong> de trabajar con nosotros, en la misma pregunta. Sin trucos.
          </p>
          <button onClick={() => setState(state === "before" ? "after" : "before")} className="btn btn-ink" style={{ fontSize: 15 }}>
            {state === "before" ? "↻ Aplicar Visual IA" : "↶ Volver al antes"}
          </button>
          <div className="mono" style={{ fontSize: 11, color: "var(--muted)", marginTop: 24, letterSpacing: "0.1em", maxWidth: 300 }}>
            ▸ EN UN AUDIT REAL HACEMOS ESTO CON 12 PREGUNTAS DISTINTAS DE TU SECTOR.
          </div>
        </div>

        <div style={{
          background: "var(--paper)", border: "2px solid var(--ink)",
          padding: "calc(28px * var(--d))",
          boxShadow: "8px 8px 0 var(--ink)",
          position: "relative"
        }}>
          {state === "before" &&
          <VA_Sticker rotate={-6} color="var(--accent)" textColor="#fff" style={{
            position: "absolute", top: -18, right: 24, fontSize: 12, padding: "8px 14px"
          }}>
              ¿Dónde estás tú?
            </VA_Sticker>
          }
          {state === "after" &&
          <VA_Sticker rotate={5} color="var(--ink)" textColor="var(--accent)" style={{
            position: "absolute", top: -18, right: 24, fontSize: 12, padding: "8px 14px"
          }}>
              Ahora sí ★
            </VA_Sticker>
          }
          <div style={{ display: "flex", alignItems: "center", gap: 14, paddingBottom: 18, borderBottom: "1px solid var(--line)", marginBottom: 18 }}>
            <div style={{ width: 36, height: 36, borderRadius: "50%", background: "var(--ink)", color: "var(--paper)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--mono)", fontSize: 12 }}>AI</div>
            <div>
              <div className="serif" style={{ fontSize: 18, lineHeight: 1 }}>ChatGPT-5</div>
              <div className="mono" style={{ fontSize: 10, color: "var(--muted)", marginTop: 2, letterSpacing: "0.1em" }}>RESPUESTA · {state.toUpperCase()}</div>
            </div>
          </div>
          <div className="serif-it" style={{ fontSize: 20, lineHeight: 1.4, color: "var(--ink)", padding: "18px 20px", background: "var(--paper-2)", marginBottom: 20, borderLeft: "4px solid var(--accent)" }}>
            "{DEMO_QUERY}"
          </div>
          <ol style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 8 }}>
            {state === "after" &&
            <li style={{ padding: "16px 18px", background: "var(--accent-soft)", border: "2px dashed var(--accent)", display: "flex", gap: 14, position: "relative" }}>
                <span className="serif" style={{ fontSize: 36, color: "var(--accent)", lineHeight: 0.9, letterSpacing: "-0.03em" }}>1.</span>
                <div>
                  <div style={{ fontWeight: 700, fontSize: 15, color: "var(--accent)" }}>
                    Beltrán & Co. — Asesoría Fiscal
                    <span className="mono" style={{ fontSize: 10, marginLeft: 10, padding: "3px 7px", background: "var(--accent)", color: "#fff", letterSpacing: "0.1em" }}>TÚ</span>
                  </div>
                  <div style={{ fontSize: 13, color: "var(--ink-2)", lineHeight: 1.55, marginTop: 4 }}>
                    Especialistas en autónomos en Valencia. Atención personal del fundador, fichas estructuradas para IA.
                  </div>
                </div>
              </li>
            }
            {DEMO_RESULTS.map((r, i) =>
            <li key={i} style={{ padding: "14px 16px", display: "flex", gap: 14, opacity: state === "after" ? 0.4 : 1, borderBottom: i < DEMO_RESULTS.length - 1 ? "1px solid var(--line)" : "none" }}>
                <span className="serif" style={{ fontSize: 30, color: "var(--ink-2)", lineHeight: 0.9 }}>{state === "after" ? i + 2 : i + 1}.</span>
                <div>
                  <div style={{ fontWeight: 600, fontSize: 14 }}>{r.name}</div>
                  <div style={{ fontSize: 13, color: "var(--ink-2)", lineHeight: 1.55, marginTop: 4 }}>{r.desc}</div>
                </div>
              </li>
            )}
            {state === "before" &&
            <li style={{ marginTop: 8, padding: "12px 16px", border: "1.5px dashed var(--accent)" }}>
                <span className="mono" style={{ fontSize: 12, color: "var(--accent)", letterSpacing: "0.08em", textTransform: "uppercase" }}>
                  ▸ Tu negocio: <span style={{ textDecoration: "line-through" }}>no aparece.</span> Estás invisible para esta consulta.
                </span>
              </li>
            }
          </ol>
        </div>
      </div>
    </section>);

}

function VA_Calendar() {
  const [day, setDay] = React.useState(3);
  const [slot, setSlot] = React.useState(null);
  const days = React.useMemo(() => buildCalendar(), []);
  return (
    <section style={{ padding: "calc(112px * var(--d)) calc(48px * var(--d))", background: "var(--paper)", position: "relative" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.5fr", gap: "calc(64px * var(--d))", alignItems: "start" }}>
        <div>
          <VA_Sticker rotate={-3} style={{ marginBottom: 24 }}>§ 05 — Agenda</VA_Sticker>
          <h2 className="serif" style={{ fontSize: "clamp(56px, 6vw, 96px)", lineHeight: 0.92, letterSpacing: "-0.03em", marginBottom: 28 }}>
            <span className="serif-it" style={{ color: "var(--accent)" }}>30 min.</span><br />
            Sin venta fria.
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--ink-2)", marginBottom: 28 }}>
            Hablamos de tu negocio, te enseño cómo te ve la IA en directo, y decidimos si tiene sentido seguir. <strong style={{ color: "var(--ink)" }}>Hablo yo, no un comercial.</strong>
          </p>
          <div style={{ position: "relative", padding: 18, paddingLeft: 92, border: "2px solid var(--ink)", background: "var(--paper-2)", transform: "rotate(-1deg)" }}>
            <img src={FOUNDER.photo} alt="" style={{ position: "absolute", left: 14, top: 14, width: 64, height: 64, borderRadius: "50%", objectFit: "cover", objectPosition: "center 25%", border: "2px solid var(--ink)" }} />
            <div className="serif" style={{ fontSize: 22, lineHeight: 1 }}>{FOUNDER.name}</div>
            <div className="serif-it" style={{ fontSize: 14, color: "var(--ink-2)", marginTop: 4 }}>{FOUNDER.role}</div>
            <div className="mono" style={{ fontSize: 10, color: "var(--muted)", marginTop: 8, letterSpacing: "0.12em" }}>AMSTERDAM· TE ATIENDO YO ✦</div>
          </div>
        </div>

        <div style={{ border: "2px solid var(--ink)", padding: "calc(28px * var(--d))", background: "var(--paper)", boxShadow: "6px 6px 0 var(--accent)" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 20, paddingBottom: 14, borderBottom: "1px solid var(--line)" }}>
            <span className="serif" style={{ fontSize: 24, letterSpacing: "-0.02em" }}>Mayo · Junio 2026</span>
            <span className="mono" style={{ fontSize: 11, color: "var(--muted)", letterSpacing: "0.1em" }}>HORARIO MADRID</span>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 4, marginBottom: 24 }}>
            {days.map((d, i) => {
              const active = i === day;
              return (
                <button key={i}
                disabled={!d.available}
                onClick={() => {setDay(i);setSlot(null);}}
                style={{
                  padding: "12px 4px",
                  background: active ? "var(--ink)" : "transparent",
                  color: active ? "var(--paper)" : d.available ? "var(--ink)" : "rgba(26,20,16,0.22)",
                  border: "1.5px solid " + (active ? "var(--ink)" : "var(--line)"),
                  cursor: d.available ? "pointer" : "not-allowed"
                }}>
                  <div className="mono" style={{ fontSize: 9, opacity: 0.7, letterSpacing: "0.1em" }}>{d.dayName}</div>
                  <div className="serif" style={{ fontSize: 26, lineHeight: 1, marginTop: 2, letterSpacing: "-0.02em" }}>{d.num}</div>
                </button>);

            })}
          </div>
          <div className="mono" style={{ fontSize: 11, color: "var(--muted)", marginBottom: 12, letterSpacing: "0.12em", textTransform: "uppercase" }}>
            ▸ Disponibles · {days[day].dayName} {days[day].num} {days[day].month}
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 8, marginBottom: 24 }}>
            {CAL_SLOTS.map((s) => {
              const active = slot === s;
              return (
                <button key={s} onClick={() => setSlot(s)} style={{
                  padding: "14px 6px",
                  background: active ? "var(--accent)" : "transparent",
                  color: active ? "#fff" : "var(--ink)",
                  border: "1.5px solid " + (active ? "var(--accent)" : "var(--line)"),
                  fontFamily: "var(--mono)", fontSize: 14, cursor: "pointer",
                  fontWeight: 500
                }}>{s}</button>);

            })}
          </div>
          <button disabled={slot === null} className="btn btn-accent btn-arrow" style={{
            width: "100%", justifyContent: "center",
            opacity: slot === null ? 0.35 : 1, cursor: slot === null ? "not-allowed" : "pointer",
            fontSize: 15, padding: "16px 24px"
          }}>
            {slot === null ? "Elige día y hora para reservar" : `Confirmar — ${days[day].num} ${days[day].month}, ${slot}`}
          </button>
        </div>
      </div>
    </section>);

}

function VA_Testimonials() {
  return (
    <section style={{ padding: "calc(112px * var(--d)) calc(48px * var(--d))", background: "var(--ink)", color: "var(--paper)", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", top: 40, left: 60 }}>
        <VA_Sticker rotate={-4} color="var(--paper)" textColor="var(--ink)">§ 06 — Voces</VA_Sticker>
      </div>

      <h2 className="serif" style={{ fontSize: "clamp(56px, 6vw, 96px)", lineHeight: 0.92, letterSpacing: "-0.03em", marginBottom: 64, marginTop: 32, textAlign: "center" }}>
        PYMEs que ya aparecen<br /><span className="serif-it" style={{ color: "var(--accent)" }}>donde antes no.</span>
      </h2>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "calc(24px * var(--d))" }}>
        {TESTIMONIALS.map((t, i) =>
        <div key={i} style={{
          background: "var(--paper)", color: "var(--ink)",
          padding: "calc(28px * var(--d))",
          border: "2px solid var(--paper)",
          transform: `rotate(${[-1.5, 0.8, -0.5][i]}deg)`,
          boxShadow: "6px 6px 0 var(--accent)"
        }}>
            <div className="serif-it" style={{ fontSize: 80, color: "var(--accent)", lineHeight: 0.5, marginBottom: 16 }}>“</div>
            <p style={{ fontSize: 15, lineHeight: 1.65, color: "var(--ink)", marginBottom: 24, fontWeight: 400 }}>{t.text}</p>
            <div style={{ display: "flex", alignItems: "center", gap: 12, paddingTop: 18, borderTop: "1px dashed var(--line)" }}>
              <div style={{ width: 40, height: 40, borderRadius: "50%", background: "var(--ink)", color: "var(--paper)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--mono)", fontSize: 12 }}>{t.initials}</div>
              <div>
                <div className="serif" style={{ fontSize: 17 }}>{t.name}</div>
                <div className="mono" style={{ fontSize: 10, color: "var(--muted)", letterSpacing: "0.1em", textTransform: "uppercase", marginTop: 2 }}>{t.role}</div>
              </div>
            </div>
          </div>
        )}
      </div>

      <div style={{
        display: "flex", justifyContent: "center", gap: "calc(64px * var(--d))",
        marginTop: 80, paddingTop: 48, borderTop: "1px dashed rgba(243,236,220,0.2)"
      }}>
        {[
        { n: "47+", l: "PYMEs auditadas" },
        { n: "12", l: "Sectores cubiertos" },
        { n: "48h", l: "Entrega garantizada" },
        { n: "94%", l: "Clientes que renuevan" }].
        map((c, i) =>
        <div key={i} style={{ textAlign: "center" }}>
            <div className="serif" style={{ fontSize: 72, lineHeight: 0.9, color: "var(--accent)", letterSpacing: "-0.04em" }}>{c.n}</div>
            <div className="mono" style={{ fontSize: 11, color: "rgba(243,236,220,0.6)", letterSpacing: "0.12em", textTransform: "uppercase", marginTop: 8 }}>{c.l}</div>
          </div>
        )}
      </div>
    </section>);

}

function VA_FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section style={{ padding: "calc(112px * var(--d)) calc(48px * var(--d))", background: "var(--paper)" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.5fr", gap: "calc(64px * var(--d))", alignItems: "start" }}>
        <div>
          <VA_Sticker rotate={3} style={{ marginBottom: 24 }}>§ 07 — 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 }}>
            Si no encuentras tu pregunta, escríbeme directamente. Respondo el mismo día — yo personalmente, no un bot.
          </p>
          <a href="mailto:hola@visualia.es" className="serif-it" style={{ fontSize: 22, color: "var(--accent)", textDecoration: "none", borderBottom: "2px solid var(--accent)" }}>
            hola@visualia.es
          </a>
        </div>
        <div>
          {FAQ.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ borderTop: i === 0 ? "2px solid var(--ink)" : "1px solid var(--line)", padding: "calc(22px * 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: 20, alignItems: "baseline",
                  textAlign: "left", cursor: "pointer"
                }}>
                  <span className="serif-it" style={{ fontSize: 28, color: "var(--accent)", lineHeight: 0.9 }}>0{i + 1}</span>
                  <span className="serif" style={{ fontSize: 24, lineHeight: 1.25, color: "var(--ink)" }}>{f.q}</span>
                  <span className="serif" style={{ color: "var(--accent)", fontSize: 32, lineHeight: 0.8 }}>{isOpen ? "−" : "+"}</span>
                </button>
                {isOpen &&
                <p style={{ fontSize: 16, lineHeight: 1.75, color: "var(--ink-2)", marginTop: 16, marginLeft: 38, maxWidth: 640 }}>{f.a}</p>
                }
              </div>);

          })}
          <div style={{ borderTop: "2px solid var(--ink)" }}></div>
        </div>
      </div>
    </section>);

}

function VA_CTA() {
  return (
    <section style={{
      padding: "calc(140px * var(--d)) calc(48px * var(--d))",
      background: "var(--accent)", color: "#fff",
      position: "relative", overflow: "hidden", textAlign: "center"
    }}>
      <div className="serif-it" style={{
        position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-50%)",
        fontSize: 520, color: "rgba(255,255,255,0.08)", lineHeight: 0.85,
        letterSpacing: "-0.05em", pointerEvents: "none"
      }}>IA.</div>

      {/* 3D blob accent */}
      <div className="blob-3d" style={{
        position: "absolute", bottom: 40, left: 40,
        width: 140, height: 140, opacity: 0.85
      }}></div>
      <div className="blob-3d" style={{
        position: "absolute", top: 40, right: 60,
        width: 90, height: 90, opacity: 0.7
      }}></div>

      <div style={{ position: "relative", maxWidth: 900, margin: "0 auto" }}>
        <VA_Sticker rotate={-3} color="var(--ink)" textColor="var(--paper)" style={{ marginBottom: 32, fontSize: 13 }}>
          ▸ Última página
        </VA_Sticker>
        <h2 className="serif" style={{ fontSize: "clamp(56px, 7vw, 120px)", lineHeight: 0.9, letterSpacing: "-0.035em", marginBottom: 32 }}>
          Comprueba ahora<br />
          si tu negocio<br />
          <span className="serif-it">existe</span> para la IA.
        </h2>
        <p style={{ fontSize: 18, lineHeight: 1.6, color: "rgba(255,255,255,0.85)", maxWidth: 520, margin: "0 auto 36px" }}>
          Audit completo entregado en 48h. Sin permanencia. 100% en español. Te atiendo yo.
        </p>
        <a href="#" className="btn btn-ink btn-arrow" style={{ fontSize: 17, padding: "20px 32px" }}>
          Pedir el Audit · €300
        </a>
        <p className="mono" style={{ fontSize: 11, color: "rgba(255,255,255,0.65)", marginTop: 28, letterSpacing: "0.12em", textTransform: "uppercase" }}>
          ✓ Los €300 se descuentan del Core · ✓ Sin contratos · ✓ Entrega en 48h
        </p>
      </div>
    </section>);

}

function VA_Footer() {
  return (
    <footer style={{
      padding: "calc(32px * var(--d)) calc(48px * var(--d))",
      background: "var(--ink)", color: "var(--paper)",
      display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 32, alignItems: "center"
    }}>
      <div style={{ display: "flex", alignItems: "baseline", gap: 4 }}>
        <span className="serif" style={{ fontSize: 24 }}>Visual</span>
        <span className="serif-it" style={{ fontSize: 24, color: "rgb(50, 110, 31)" }}>IA</span>
        <span style={{ width: 8, height: 8, background: "var(--accent)", borderRadius: "50%", marginLeft: 4, marginBottom: 4 }}></span>
      </div>
      <p className="mono" style={{ fontSize: 11, color: "rgba(243,236,220,0.6)", letterSpacing: "0.12em", textTransform: "uppercase", textAlign: "center" }}>
        © 2026 · Visual IA · Optimización para IA · Hecho a mano en Valencia
      </p>
      <div style={{ display: "flex", gap: 18 }}>
        <a href="#" style={{ fontSize: 13, color: "rgba(243,236,220,0.75)", textDecoration: "none" }}>LinkedIn</a>
        <a href="#" style={{ fontSize: 13, color: "rgba(243,236,220,0.75)", textDecoration: "none" }}>Privacidad</a>
        <a href="mailto:hola@visualia.es" style={{ fontSize: 13, color: "rgba(243,236,220,0.75)", textDecoration: "none" }}>Contacto</a>
      </div>
    </footer>);

}

function VariantAtrevida() {
  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 />
        <VA_Benefits />
        <VA_Tiers />
        <VA_Demo />
        <VA_Calendar />
        <VA_Testimonials />
        <VA_FAQ />
        <VA_CTA />
        <VA_Footer />
      </div>
    </div>);

}

Object.assign(window, {
  VariantAtrevida,
  VA_Sticker, VA_Nav, VA_Hero, VA_Logos, VA_Problem, VA_Benefits,
  VA_Tiers, VA_Demo, VA_Calendar, VA_Testimonials, VA_FAQ, VA_CTA, VA_Footer
});