/* global React, Icon, Button, Eyebrow, Badge, Droplets, Container */

const SP = {
  blue:   '#234FE8',
  sky:    '#4FA8E5',
  deep:   '#0E2A99',
  bg:     'var(--sub-academy-bg)',
  light:  '#E8EFFE',
};

// ============================================================
// HERO
// ============================================================
function SpHero({ onCta }) {
  return (
    <section id="top" style={{
      position: 'relative', overflow: 'hidden',
      background: `radial-gradient(85% 65% at 50% 0%, ${SP.bg} 0%, var(--ink-0) 70%)`,
    }}>
      <Droplets style={{ right: -60, top: 60 }} color={SP.light} opacity={0.7} size={240} />
      <Droplets style={{ left: -100, bottom: -60 }} color={SP.sky} opacity={0.18} size={300} />
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'radial-gradient(circle at 1px 1px, rgba(14,42,153,0.05) 1px, transparent 0)',
        backgroundSize: '32px 32px',
        maskImage: 'radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent)',
        WebkitMaskImage: 'radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent)',
      }} />

      <Container style={{ padding: '72px 32px 96px', position: 'relative' }}>
        {/* Breadcrumb */}
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          fontFamily: 'var(--font-mono)', fontSize: 11.5,
          color: 'var(--fg3)', letterSpacing: '0.02em',
          marginBottom: 26,
        }}>
          <a href="/" style={{ color: 'var(--fg3)' }}>frsko.com</a>
          <span style={{ opacity: 0.5 }}>/</span>
          <a href="/ia" style={{ color: 'var(--fg3)' }}>ia</a>
          <span style={{ opacity: 0.5 }}>/</span>
          <span style={{ color: SP.blue, fontWeight: 600 }}>seo-pulse</span>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 56,
          alignItems: 'start',
        }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 22, flexWrap: 'wrap' }}>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '5px 12px', borderRadius: 999,
                background: '#fff', border: `1px solid ${SP.blue}`,
                fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
                textTransform: 'uppercase', color: SP.blue,
              }}>
                <Icon name="search" size={12} />
                SEO Pulse · Auditoría IA
              </div>
              <span style={{
                display: 'inline-flex', alignItems: 'center', gap: 5,
                fontSize: 10.5, fontWeight: 700, letterSpacing: '0.08em',
                textTransform: 'uppercase',
                padding: '4px 10px', borderRadius: 999,
                background: 'var(--yellow-50)', color: 'var(--yellow-800)',
              }}>
                <Icon name="sparkles" size={11} />
                Empieza aquí
              </span>
            </div>

            <h1 style={{
              fontFamily: 'var(--font-heading)', fontWeight: 700,
              fontSize: 'clamp(38px, 5.2vw, 70px)',
              lineHeight: 1.02, letterSpacing: '-0.035em',
              margin: '0 0 24px', color: 'var(--fg1)',
            }}>
              Tu empresa aparece en Google.<br/>
              <span style={{ color: SP.blue, fontStyle: 'italic' }}>¿Aparece cuando alguien<br/>le pregunta a ChatGPT?</span>
            </h1>

            <p style={{
              fontSize: 'clamp(17px, 1.4vw, 20px)', lineHeight: 1.55,
              color: 'var(--fg2)', maxWidth: 580, margin: '0 0 32px',
            }}>
              SEO Pulse es la auditoría que revisa tu presencia en buscadores tradicionales <strong style={{ color: 'var(--fg1)', fontWeight: 600 }}>Y</strong> en motores de inteligencia artificial — el canal de búsqueda que ya le roba visitas a Google y que la mayoría de las empresas ignora completamente.
            </p>

            <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap', marginBottom: 32 }}>
              <Button variant="cta" size="lg" icon="arrow-right" onClick={onCta}>
                Solicitar auditoría SEO Pulse
              </Button>
              <Button variant="ghost" size="lg" icon="arrow-down-right" onClick={() => {
                document.getElementById('cobertura')?.scrollIntoView({ behavior: 'smooth' });
              }}>
                Ver qué cubre
              </Button>
            </div>

            {/* Trust line */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 18, color: 'var(--fg3)', fontSize: 13.5, flexWrap: 'wrap' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <Icon name="check" size={14} stroke={2} style={{ color: SP.blue }} /> SEO técnico + AEO
              </div>
              <div style={{ width: 4, height: 4, borderRadius: 999, background: 'var(--ink-300)' }} />
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <Icon name="check" size={14} stroke={2} style={{ color: SP.blue }} /> 7–28 días
              </div>
              <div style={{ width: 4, height: 4, borderRadius: 999, background: 'var(--ink-300)' }} />
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <Icon name="check" size={14} stroke={2} style={{ color: SP.blue }} /> Plan accionable 90d
              </div>
            </div>
          </div>

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

function SearchTabs() {
  const [tab, setTab] = React.useState('ai');

  return (
    <div style={{
      background: '#fff',
      border: '1px solid var(--border)',
      borderRadius: 24,
      boxShadow: 'var(--shadow-lg)',
      overflow: 'hidden',
      position: 'relative',
    }}>
      {/* Tabs */}
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr',
        borderBottom: '1px solid var(--border)',
      }}>
        <TabBtn active={tab === 'google'} onClick={() => setTab('google')} label="Google" sub="El de antes" icon="search" colorActive="var(--ink-800)" />
        <TabBtn active={tab === 'ai'}     onClick={() => setTab('ai')}     label="ChatGPT" sub="El que crece" icon="sparkles" colorActive={SP.blue} />
      </div>

      {/* Query bar */}
      <div style={{
        padding: '12px 18px',
        background: 'var(--ink-25)',
        borderBottom: '1px solid var(--border)',
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <Icon name="search" size={14} style={{ color: 'var(--fg3)' }} />
        <span style={{
          fontFamily: 'var(--font-mono)', fontSize: 12.5,
          color: 'var(--fg2)', flex: 1,
        }}>"¿Cuáles son las mejores agencias de marketing en México?"</span>
      </div>

      {/* Content */}
      {tab === 'google' ? <GoogleResults /> : <AiResults />}

      {/* Footer hint */}
      <div style={{
        padding: '12px 18px',
        background: tab === 'ai' ? SP.bg : 'var(--ink-25)',
        borderTop: '1px solid var(--border)',
        fontSize: 12,
        color: tab === 'ai' ? SP.blue : 'var(--fg3)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <Icon name="sparkles" size={13} />
          {tab === 'ai' ? 'SEO Pulse te dice cómo aparecer en estas respuestas.' : 'Y si la búsqueda pasa al panel siguiente…'}
        </span>
        <span style={{ fontWeight: 600 }}>
          {tab === 'ai' ? 'Auditar mi presencia →' : 'Ver ChatGPT →'}
        </span>
      </div>
    </div>
  );
}

function TabBtn({ active, onClick, label, sub, icon, colorActive }) {
  return (
    <button onClick={onClick} style={{
      padding: '14px 16px',
      background: active ? '#fff' : 'var(--ink-25)',
      border: 0, cursor: 'pointer',
      borderBottom: active ? `2px solid ${colorActive}` : '2px solid transparent',
      display: 'flex', alignItems: 'center', gap: 12,
      textAlign: 'left',
      fontFamily: 'var(--font-body)',
      transition: 'all var(--dur-base) var(--ease-out)',
    }}>
      <div style={{
        width: 34, height: 34, borderRadius: 10,
        background: active ? (colorActive === SP.blue ? SP.bg : 'var(--ink-100)') : 'var(--ink-100)',
        color: active ? colorActive : 'var(--ink-500)',
        display: 'grid', placeItems: 'center',
      }}>
        <Icon name={icon} size={17} />
      </div>
      <div>
        <div style={{
          fontFamily: 'var(--font-heading)', fontWeight: 600,
          fontSize: 14, color: active ? colorActive : 'var(--fg2)',
          letterSpacing: '-0.005em', lineHeight: 1,
        }}>{label}</div>
        <div style={{ fontSize: 10.5, color: 'var(--fg3)', marginTop: 3, fontFamily: 'var(--font-mono)', letterSpacing: '0.04em' }}>{sub}</div>
      </div>
    </button>
  );
}

function GoogleResults() {
  const results = [
    { title: 'Las 10 mejores agencias de marketing en México - 2025', site: 'topagencias.mx', desc: 'Ranking actualizado de las agencias más recomendadas...' },
    { title: 'Lista oficial de agencias certificadas - AMAI', site: 'amai.org.mx', desc: 'Directorio de agencias acreditadas por la AMAI...' },
    { title: 'Comparativa: precios y servicios de agencias en CDMX', site: 'marketing-cdmx.com', desc: 'Guía con precios promedio por servicio...' },
  ];
  return (
    <div style={{ padding: '18px 18px 8px' }}>
      {results.map((r, i) => (
        <div key={i} style={{
          padding: '10px 0',
          borderBottom: i < results.length - 1 ? '1px solid var(--border)' : 'none',
          animation: `spIn 400ms var(--ease-out) ${i * 80}ms both`,
        }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-500)' }}>{r.site}</div>
          <div style={{
            fontSize: 14, fontWeight: 500,
            color: '#1A0DAB', marginTop: 2, marginBottom: 3,
            lineHeight: 1.3,
          }}>{r.title}</div>
          <div style={{ fontSize: 12, color: 'var(--fg3)', lineHeight: 1.4 }}>{r.desc}</div>
        </div>
      ))}
      <div style={{
        marginTop: 4, padding: '10px 0',
        fontFamily: 'var(--font-mono)', fontSize: 11,
        color: 'var(--fg3)',
        display: 'flex', justifyContent: 'space-between',
      }}>
        <span>10 resultados · 0.42s</span>
        <span>Página 1 de 142</span>
      </div>

      <style>{`
        @keyframes spIn {
          from { opacity: 0; transform: translateY(4px); }
          to { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </div>
  );
}

function AiResults() {
  return (
    <div style={{ padding: '20px 20px 6px' }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 8,
        marginBottom: 14,
      }}>
        <div style={{
          width: 24, height: 24, borderRadius: 999,
          background: `linear-gradient(135deg, ${SP.blue}, ${SP.sky})`,
          color: '#fff',
          display: 'grid', placeItems: 'center',
        }}>
          <Icon name="sparkles" size={12} />
        </div>
        <span style={{
          fontFamily: 'var(--font-mono)', fontSize: 11,
          color: 'var(--fg3)', letterSpacing: '0.04em',
        }}>Respuesta generada · 1.4s</span>
      </div>

      <p style={{
        fontSize: 13.5, lineHeight: 1.55,
        color: 'var(--fg1)', margin: '0 0 12px',
        animation: 'spIn 500ms var(--ease-out) both',
      }}>
        Para empresas en México que buscan integrar IA en sus estrategias de marketing, hay algunas opciones que destacan por su enfoque y resultados:
      </p>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 14 }}>
        <AiCitation n="1" name="FRSKO Marketing" tag="agencia · IA aplicada" highlight delay={100} />
        <AiCitation n="2" name="Competidor A" tag="performance · paid" delay={200} />
        <AiCitation n="3" name="Competidor B" tag="branding · digital" delay={300} />
        <AiCitation n="4" name="Competidor C" tag="content · social" delay={400} />
      </div>

      <p style={{
        fontFamily: 'var(--font-mono)', fontSize: 10.5,
        color: 'var(--fg3)', margin: 0,
        paddingTop: 10, borderTop: '1px solid var(--border)',
        animation: 'spIn 500ms var(--ease-out) 500ms both',
      }}>
        Fuentes citadas: <span style={{ color: SP.blue, fontWeight: 600 }}>frsko.com</span>, sitios de industria, perfiles de equipo y reseñas verificadas.
      </p>
    </div>
  );
}

function AiCitation({ n, name, tag, highlight, delay = 0 }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10,
      padding: '8px 12px',
      border: highlight ? `1px solid ${SP.blue}` : '1px solid var(--border)',
      background: highlight ? SP.bg : '#fff',
      borderRadius: 12,
      animation: `spIn 500ms var(--ease-out) ${delay}ms both`,
      position: 'relative',
    }}>
      <div style={{
        width: 22, height: 22, borderRadius: 6,
        background: highlight ? SP.blue : 'var(--ink-100)',
        color: highlight ? '#fff' : 'var(--ink-600)',
        display: 'grid', placeItems: 'center',
        fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 700,
      }}>{n}</div>
      <div style={{ flex: 1 }}>
        <span style={{
          fontSize: 13, fontWeight: highlight ? 700 : 500,
          color: highlight ? SP.deep : 'var(--fg1)',
        }}>{name}</span>
        <span style={{
          fontFamily: 'var(--font-mono)', fontSize: 10.5,
          color: 'var(--fg3)', marginLeft: 10, letterSpacing: '0.02em',
        }}>{tag}</span>
      </div>
      {highlight && (
        <span style={{
          fontSize: 10, fontWeight: 700, letterSpacing: '0.08em',
          textTransform: 'uppercase', color: SP.blue,
          padding: '2px 6px', borderRadius: 4,
          background: '#fff', border: `1px solid ${SP.blue}`,
        }}>Citada</span>
      )}
    </div>
  );
}

// ============================================================
// PROBLEM
// ============================================================
function SpProblem() {
  return (
    <section style={{ background: '#fff', borderTop: '1px solid var(--border)' }}>
      <Container style={{ padding: '96px 32px' }}>
        <div style={{ maxWidth: 1080, margin: '0 auto' }}>
          <Eyebrow>El problema</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-heading)', fontWeight: 700,
            fontSize: 'clamp(30px, 4vw, 56px)',
            lineHeight: 1.05, letterSpacing: '-0.035em',
            margin: '18px 0 40px', color: 'var(--fg1)',
            maxWidth: 980, textWrap: 'pretty',
          }}>
            El SEO cambió.<br/>
            La mayoría de las agencias todavía te vende el de <span style={{
              background: `linear-gradient(180deg, transparent 60%, ${SP.bg} 60%)`,
              padding: '0 6px',
              color: SP.deep, fontStyle: 'italic',
            }}>2019</span>.
          </h2>

          <div style={{
            display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 48,
            alignItems: 'start',
          }}>
            <div>
              <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--fg2)', margin: '0 0 18px' }}>
                Durante años, aparecer bien en Google era suficiente. Hoy no lo es.
              </p>
              <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--fg2)', margin: '0 0 18px' }}>
                Cada vez más personas buscan información preguntándole directamente a <strong style={{ color: 'var(--fg1)', fontWeight: 600 }}>ChatGPT, Perplexity, Claude o Gemini</strong>. Cuando alguien le pregunta a una IA "cuál es la mejor agencia de marketing en México" o "cómo elijo una inmobiliaria en Guadalajara", esa IA responde con fuentes que ella considera autorizadas.
              </p>
              <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--fg2)', margin: '0 0 18px' }}>
                ¿Aparece tu empresa entre esas fuentes? ¿Sabes siquiera cómo verificarlo?
              </p>
              <p style={{
                fontSize: 22, lineHeight: 1.3, color: SP.blue,
                fontWeight: 700, fontStyle: 'italic',
                margin: 0, fontFamily: 'var(--font-heading)',
                letterSpacing: '-0.02em',
              }}>
                SEO Pulse es la auditoría que responde esa pregunta.
              </p>
            </div>

            {/* Era comparison */}
            <div style={{
              display: 'flex', flexDirection: 'column', gap: 14,
            }}>
              <EraRow year="2010–2019" label="SEO 1.0 — keywords y backlinks" intensity={100} color="var(--ink-300)" />
              <EraRow year="2020–2023" label="SEO 2.0 — intención y E-E-A-T" intensity={80} color="var(--ink-500)" />
              <EraRow year="2024+" label="SEO 3.0 — AI Search Optimization" intensity={60} color={SP.blue} active />
              <div style={{
                marginTop: 8,
                padding: '14px 16px',
                background: SP.bg,
                borderRadius: 14,
                borderLeft: `3px solid ${SP.blue}`,
                fontSize: 13.5, lineHeight: 1.5,
                color: SP.deep,
              }}>
                <strong style={{ fontWeight: 700 }}>El 5% de las empresas mexicanas</strong> trabaja AEO activamente. El otro 95% está construyendo para un buscador que ya empezó a perder relevancia.
              </div>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

function EraRow({ year, label, intensity, color, active }) {
  return (
    <div style={{
      padding: '14px 18px',
      border: active ? `1px solid ${SP.blue}` : '1px solid var(--border)',
      background: active ? SP.bg : '#fff',
      borderRadius: 14,
      display: 'grid', gridTemplateColumns: '92px 1fr', gap: 16,
      alignItems: 'center',
    }}>
      <div style={{
        fontFamily: 'var(--font-mono)', fontSize: 11,
        fontWeight: 600, color: active ? SP.blue : 'var(--fg3)',
        letterSpacing: '0.04em',
      }}>{year}</div>
      <div>
        <div style={{
          fontSize: 14, fontWeight: 600,
          color: active ? SP.deep : 'var(--fg1)',
          marginBottom: 6,
        }}>{label}</div>
        <div style={{ height: 4, background: 'rgba(0,0,0,0.05)', borderRadius: 999, overflow: 'hidden' }}>
          <div style={{
            width: `${intensity}%`, height: '100%',
            background: color, borderRadius: 999,
          }} />
        </div>
      </div>
    </div>
  );
}

// ============================================================
// COVERAGE — 2 modules
// ============================================================
function SpModules() {
  const seo = [
    { icon: 'zap',      h: 'Técnico',        d: 'Velocidad, indexación, arquitectura, datos estructurados, Core Web Vitals' },
    { icon: 'message',  h: 'Contenido',      d: 'Relevancia semántica, cobertura de keywords, intención de búsqueda' },
    { icon: 'chart',    h: 'Autoridad',      d: 'Perfil de backlinks, dominios de referencia, oportunidades de link building' },
    { icon: 'target',   h: 'Competitivo',    d: 'Dónde te ganan tus principales competidores y por qué' },
    { icon: 'home',     h: 'Local',          d: 'Google Business Profile, maps, búsquedas locales (si aplica)' },
  ];
  const aeo = [
    { icon: 'sparkles', h: 'Cómo te describen las IAs', d: 'Evaluamos cómo ChatGPT, Perplexity, Gemini y Claude describen tu empresa, productos e industria' },
    { icon: 'search',   h: 'Qué fuentes citan',          d: 'Identificamos qué webs, papers y autores las IAs usan para responder sobre tu categoría' },
    { icon: 'compass',  h: 'Mapa de brechas',            d: 'Detectamos temas donde hay consultas pero tu empresa no aparece como referencia' },
    { icon: 'clipboard',h: 'Plan de contenido AEO',      d: 'Estructura, formato y frecuencia recomendados para ser citado por motores de IA' },
  ];

  return (
    <section id="cobertura" style={{ background: 'var(--ink-25)', position: 'relative', overflow: 'hidden' }}>
      <Droplets style={{ right: -120, top: 80 }} color={SP.light} opacity={0.5} size={300} />
      <Container style={{ padding: '96px 32px', position: 'relative' }}>
        <div style={{ maxWidth: 760, marginBottom: 56 }}>
          <Eyebrow>Qué cubre la auditoría</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-heading)', fontWeight: 700,
            fontSize: 'clamp(30px, 3.6vw, 48px)',
            lineHeight: 1.05, letterSpacing: '-0.03em',
            margin: '14px 0 18px', color: 'var(--fg1)',
          }}>
            Dos análisis en uno.<br/>
            <span style={{ color: SP.blue, fontStyle: 'italic' }}>Ninguna otra agencia en México los hace juntos.</span>
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, alignItems: 'stretch' }}>
          {/* Module 1 */}
          <ModuleCard
            num="01"
            tag="EL ESTÁNDAR"
            title="SEO Técnico y de Contenido"
            subtitle="Lo que todas las agencias buenas deberían hacer."
            items={seo}
            dark={false}
          />
          {/* Module 2 */}
          <ModuleCard
            num="02"
            tag="EL DIFERENCIAL"
            title="AI Search Optimization"
            subtitle="Lo que nadie más en México te está dando."
            items={aeo}
            dark={true}
          />
        </div>
      </Container>
    </section>
  );
}

function ModuleCard({ num, tag, title, subtitle, items, dark }) {
  return (
    <div style={{
      background: dark
        ? `linear-gradient(180deg, ${SP.deep} 0%, #051A6B 100%)`
        : '#fff',
      color: dark ? '#fff' : 'var(--fg1)',
      border: dark ? `1px solid ${SP.blue}` : '1px solid var(--border)',
      borderRadius: 28,
      padding: '36px 36px',
      position: 'relative',
      overflow: 'hidden',
      display: 'flex', flexDirection: 'column',
    }}>
      {dark && (
        <Droplets style={{ right: -60, top: -40 }} color={SP.sky} opacity={0.25} size={200} />
      )}
      <div style={{ position: 'relative' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 22 }}>
          <span style={{
            fontFamily: 'var(--font-mono)', fontSize: 11,
            fontWeight: 700, letterSpacing: '0.14em',
            color: dark ? SP.sky : SP.blue,
          }}>{tag}</span>
          <span style={{
            fontFamily: 'var(--font-heading)', fontWeight: 700,
            fontSize: 28, letterSpacing: '-0.03em',
            color: dark ? 'rgba(255,255,255,0.3)' : 'var(--ink-200)',
          }}>{num}</span>
        </div>

        <h3 style={{
          fontFamily: 'var(--font-heading)', fontWeight: 700,
          fontSize: 'clamp(24px, 2.6vw, 32px)',
          letterSpacing: '-0.025em',
          margin: '0 0 8px',
          color: dark ? '#fff' : 'var(--fg1)',
          lineHeight: 1.1,
        }}>{title}</h3>
        <p style={{
          fontSize: 14.5, lineHeight: 1.5,
          color: dark ? SP.sky : SP.blue,
          fontStyle: 'italic',
          margin: '0 0 24px',
        }}>{subtitle}</p>

        <ul style={{
          listStyle: 'none', padding: 0, margin: 0,
          display: 'flex', flexDirection: 'column', gap: 14,
        }}>
          {items.map((it, i) => (
            <li key={i} style={{
              display: 'flex', gap: 14, alignItems: 'flex-start',
              paddingBottom: 14,
              borderBottom: i < items.length - 1
                ? (dark ? '1px solid rgba(255,255,255,0.08)' : '1px solid var(--border)')
                : 'none',
            }}>
              <div style={{
                width: 36, height: 36, borderRadius: 10,
                background: dark ? 'rgba(79,168,229,0.16)' : SP.bg,
                color: dark ? SP.sky : SP.blue,
                display: 'grid', placeItems: 'center', flexShrink: 0,
              }}>
                <Icon name={it.icon} size={17} />
              </div>
              <div>
                <div style={{
                  fontFamily: 'var(--font-heading)', fontWeight: 600,
                  fontSize: 15.5, letterSpacing: '-0.01em',
                  marginBottom: 4,
                  color: dark ? '#fff' : 'var(--fg1)',
                }}>{it.h}</div>
                <div style={{
                  fontSize: 13.5, lineHeight: 1.45,
                  color: dark ? 'rgba(255,255,255,0.7)' : 'var(--fg2)',
                }}>{it.d}</div>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

// ============================================================
// WHY AEO MATTERS — Stats
// ============================================================
function SpWhyNow() {
  return (
    <section style={{ background: '#fff', position: 'relative', overflow: 'hidden' }}>
      <Container style={{ padding: '96px 32px' }}>
        <div style={{ maxWidth: 1080, margin: '0 auto' }}>
          <Eyebrow>Por qué importa ahora</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-heading)', fontWeight: 700,
            fontSize: 'clamp(30px, 4vw, 56px)',
            lineHeight: 1.05, letterSpacing: '-0.035em',
            margin: '18px 0 24px', color: 'var(--fg1)',
            maxWidth: 980,
          }}>
            Las personas que usan IA para buscar son exactamente <span style={{ color: SP.blue, fontStyle: 'italic' }}>las que tu empresa quiere como clientes</span>.
          </h2>
          <p style={{
            fontSize: 17, lineHeight: 1.65, color: 'var(--fg2)',
            margin: '0 0 48px', maxWidth: 880,
          }}>
            Los usuarios de estas herramientas tienden a ser profesionales con poder de decisión, alto nivel educativo y mayor disposición a pagar. Cuando una de estas personas pregunta <strong style={{ color: 'var(--fg1)', fontWeight: 600 }}>"¿cuál es la mejor agencia de marketing digital en México para una empresa de tecnología?"</strong>, la IA responde con nombres. Si el tuyo no está, el de tu competencia sí lo estará.
          </p>

          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
            gap: 16,
          }}>
            <StatCard
              value="100M+"
              label="usuarios mensuales de Perplexity"
              meta="Y crece 30% trimestre a trimestre"
              icon="users"
            />
            <StatCard
              value="100M+"
              label="búsquedas diarias a ChatGPT"
              meta="Más que muchos motores tradicionales"
              icon="search"
            />
            <StatCard
              value="5%"
              label="de empresas MX trabaja AEO activamente"
              meta="La ventana de oportunidad sigue abierta"
              icon="zap"
              highlight
            />
          </div>
        </div>
      </Container>
    </section>
  );
}

function StatCard({ value, label, meta, icon, highlight }) {
  return (
    <div style={{
      background: highlight
        ? `linear-gradient(160deg, ${SP.blue} 0%, ${SP.deep} 100%)`
        : 'var(--ink-25)',
      color: highlight ? '#fff' : 'var(--fg1)',
      border: highlight ? `1px solid ${SP.blue}` : '1px solid var(--border)',
      borderRadius: 24,
      padding: '32px 28px',
      display: 'flex', flexDirection: 'column',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        width: 44, height: 44, borderRadius: 12,
        background: highlight ? 'rgba(255,255,255,0.14)' : SP.bg,
        color: highlight ? '#fff' : SP.blue,
        display: 'grid', placeItems: 'center',
        marginBottom: 18,
      }}>
        <Icon name={icon} size={20} />
      </div>
      <div style={{
        fontFamily: 'var(--font-heading)', fontWeight: 700,
        fontSize: 'clamp(48px, 6vw, 76px)',
        lineHeight: 0.92, letterSpacing: '-0.04em',
        color: highlight ? '#fff' : SP.blue,
        marginBottom: 12,
      }}>{value}</div>
      <div style={{
        fontSize: 15, fontWeight: 600, lineHeight: 1.3,
        color: highlight ? '#fff' : 'var(--fg1)',
        marginBottom: 8,
        letterSpacing: '-0.005em',
      }}>{label}</div>
      <div style={{
        fontFamily: 'var(--font-mono)', fontSize: 11.5,
        color: highlight ? 'rgba(255,255,255,0.7)' : 'var(--fg3)',
        letterSpacing: '0.02em',
      }}>{meta}</div>
    </div>
  );
}

Object.assign(window, { SpHero, SpProblem, SpModules, SpWhyNow });