// analogy.jsx — The car analogy

function Analogy() {
  return (
    <section className="section" id="analogia">
      <div className="analogy">
        <div>
          <span className="eyebrow">La analogía</span>
          <h2 className="display h2" style={{ marginTop: 22 }}>
            Nadie maneja un auto<br/>
            <span style={{ color: 'var(--primary)' }}>sin hacerle servicio.</span>
          </h2>
          <p className="lead" style={{ marginTop: 22 }}>
            Tu web es exactamente igual. La compraste o la mandaste a hacer, sí. Pero <strong style={{ color: 'var(--text)' }}>una web no es un proyecto terminado</strong> — es un sistema vivo que requiere mantenimiento continuo.
          </p>
          <p className="lead" style={{ marginTop: 16 }}>
            Cuando contratas WP Guardian no estás contratando "actualizaciones". Estás contratando tres cosas:
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 28 }}>
            <Pillar k="01" title="Continuidad operativa" body="Tu sitio sigue funcionando. Punto." />
            <Pillar k="02" title="Prevención" body="No esperamos al problema — lo detenemos antes." />
            <Pillar k="03" title="Tranquilidad" body="Tú te ocupas de tu negocio. Nosotros, del sitio." />
          </div>
        </div>

        <div className="analogy-visual">
          <div className="mono" style={{ fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--text-dim)', marginBottom: 22 }}>
            Auto · Web — Mismo principio
          </div>

          {[
            { auto: 'Cambio de aceite cada 5,000 km', web: 'Actualizaciones de core, plugins y themes' },
            { auto: 'Revisión técnica anual', web: 'Auditoría de vulnerabilidades y entorno' },
            { auto: 'Llanta de repuesto en la maletera', web: 'Backups verificados que sí funcionan' },
            { auto: 'Alarma y seguro contra robo', web: 'Firewall, anti-malware y monitoreo 24/7' },
          ].map((p, i) => (
            <div className="compare-row" key={i}>
              <div className="compare-side compare-bad">
                <div className="mono" style={{ fontSize: 9.5, color: 'var(--text-dim)', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 6 }}>Auto</div>
                {p.auto}
              </div>
              <div className="compare-vs">⇄</div>
              <div className="compare-side compare-good">
                <div className="mono" style={{ fontSize: 9.5, color: 'var(--ok)', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 6 }}>Web</div>
                {p.web}
              </div>
            </div>
          ))}

          <div style={{ marginTop: 28, padding: '18px 22px', borderRadius: 12, background: 'rgba(30,156,255,0.08)', border: '1px solid rgba(30,156,255,0.25)' }}>
            <div className="mono" style={{ fontSize: 11, color: 'var(--primary)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 4 }}>
              Diferencia clave
            </div>
            <div style={{ fontSize: 14, color: 'var(--text)', lineHeight: 1.5 }}>
              El auto avisa con un ruido. La web no avisa nada — hasta que ya está caída.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Pillar({ k, title, body }) {
  return (
    <div style={{ display: 'flex', gap: 16, alignItems: 'flex-start', padding: '14px 0', borderTop: '1px solid var(--border)' }}>
      <div className="mono" style={{ color: 'var(--primary)', fontSize: 12, fontWeight: 600, paddingTop: 2 }}>{k}</div>
      <div>
        <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 800, fontSize: 20, textTransform: 'uppercase', letterSpacing: '-0.005em' }}>
          {title}
        </div>
        <div style={{ fontSize: 14, color: 'var(--text-muted)', marginTop: 4 }}>{body}</div>
      </div>
    </div>
  );
}

Object.assign(window, { Analogy });