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

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

// ============================================================
// PLANS
// ============================================================
function SpPlans() {
  const plans = [
    {
      name: 'Lite',
      audience: 'PYME o primera auditoría',
      time: '7–10 días',
      modules: { tech: true, aeo: 'Básico (5 consultas)' },
      features: [
        'Reporte técnico SEO (20–30 págs)',
        'Análisis básico AI Search (5 consultas clave)',
        'Plan de acción a 90 días',
      ],
      cta: 'Empezar con Lite',
    },
    {
      name: 'Pro',
      audience: 'Empresa mediana con inversión en contenido',
      time: '2–3 semanas',
      modules: { tech: true, aeo: 'Completo (20+ consultas)' },
      features: [
        'Todo lo del Lite',
        'AI Search completo (20+ consultas)',
        'Competitivo profundo (5 competidores)',
        'Sesión ejecutiva con Q&A',
        'Plan de contenido SEO + AEO a 6 meses',
      ],
      cta: 'Probar Pro',
      featured: true,
    },
    {
      name: 'Enterprise',
      audience: 'Marcas nacionales o multi-línea',
      time: '3–4 semanas',
      modules: { tech: true, aeo: 'Multi-dominio' },
      features: [
        'Todo lo del Pro',
        'Auditoría multi-dominio o multi-site',
        'Taller interno con marketing',
        'Seguimiento implementación 90 días',
        'Reauditoría de verificación incluida',
      ],
      cta: 'Hablar con ventas',
    },
  ];

  return (
    <section style={{ background: 'var(--ink-25)', position: 'relative', overflow: 'hidden' }}>
      <Droplets style={{ left: -100, top: 60 }} color={SP2.sky} opacity={0.18} size={280} />
      <Container style={{ padding: '96px 32px', position: 'relative' }}>
        <div style={{ maxWidth: 760, marginBottom: 56 }}>
          <Eyebrow>Los planes</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)',
          }}>
            Elige según el tamaño de tu operación.
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--fg2)', margin: 0 }}>
            Tres niveles. La auditoría es un trabajo finito — no es retainer.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, alignItems: 'stretch' }}>
          {plans.map(p => <SpPlanCard key={p.name} p={p} />)}
        </div>

        <p style={{
          fontFamily: 'var(--font-mono)', fontSize: 11.5,
          color: 'var(--fg3)', textAlign: 'center',
          marginTop: 28, marginBottom: 0,
        }}>
          <span style={{ color: SP2.blue, fontWeight: 600 }}>// </span>
          Precios bajo solicitud. La auditoría se factura como entregable único.
        </p>
      </Container>
    </section>
  );
}

function SpPlanCard({ p }) {
  const isF = p.featured;
  return (
    <div style={{
      background: isF
        ? `linear-gradient(180deg, ${SP2.deep} 0%, #051A6B 100%)`
        : '#fff',
      color: isF ? '#fff' : 'var(--fg1)',
      border: isF ? `2px solid ${SP2.sky}` : '1px solid var(--border)',
      borderRadius: 28,
      padding: '32px 32px 28px',
      position: 'relative',
      display: 'flex', flexDirection: 'column',
      transform: isF ? 'translateY(-8px)' : '',
      boxShadow: isF ? `0 30px 60px -20px rgba(35,79,232,0.4)` : 'var(--shadow-xs)',
    }}>
      {isF && (
        <div style={{
          position: 'absolute', top: -14, left: '50%',
          transform: 'translateX(-50%)',
          padding: '6px 14px',
          background: SP2.sky, color: SP2.deep,
          fontSize: 11, fontWeight: 700, letterSpacing: '0.1em',
          textTransform: 'uppercase',
          borderRadius: 999,
          boxShadow: '0 8px 16px rgba(35,79,232,0.3)',
        }}>Recomendado</div>
      )}

      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        marginBottom: 16,
      }}>
        <h3 style={{
          fontFamily: 'var(--font-heading)', fontWeight: 700,
          fontSize: 30, letterSpacing: '-0.03em',
          margin: 0, color: isF ? '#fff' : 'var(--fg1)',
        }}>{p.name}</h3>
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 11,
          padding: '4px 10px', borderRadius: 999,
          background: isF ? 'rgba(255,255,255,0.12)' : SP2.bg,
          color: isF ? '#fff' : SP2.blue,
          letterSpacing: '0.04em',
        }}>{p.time}</div>
      </div>

      <div style={{
        fontSize: 13.5, color: isF ? 'rgba(255,255,255,0.7)' : 'var(--fg3)',
        marginBottom: 24,
      }}>{p.audience}</div>

      {/* Module badges */}
      <div style={{
        paddingBottom: 22, marginBottom: 22,
        borderBottom: isF ? '1px solid rgba(255,255,255,0.14)' : '1px solid var(--border)',
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10,
      }}>
        <div style={{
          padding: '10px 12px',
          background: isF ? 'rgba(255,255,255,0.06)' : 'var(--ink-25)',
          borderRadius: 10,
        }}>
          <div style={{
            fontSize: 9.5, fontWeight: 700, letterSpacing: '0.1em',
            textTransform: 'uppercase',
            color: isF ? SP2.sky : SP2.blue, marginBottom: 4,
          }}>Módulo 01</div>
          <div style={{ fontSize: 12.5, fontWeight: 500, color: isF ? '#fff' : 'var(--fg1)' }}>SEO completo</div>
        </div>
        <div style={{
          padding: '10px 12px',
          background: isF ? 'rgba(255,255,255,0.06)' : 'var(--ink-25)',
          borderRadius: 10,
        }}>
          <div style={{
            fontSize: 9.5, fontWeight: 700, letterSpacing: '0.1em',
            textTransform: 'uppercase',
            color: isF ? SP2.sky : SP2.blue, marginBottom: 4,
          }}>Módulo 02 AEO</div>
          <div style={{ fontSize: 12.5, fontWeight: 500, color: isF ? '#fff' : 'var(--fg1)' }}>{p.modules.aeo}</div>
        </div>
      </div>

      <ul style={{
        listStyle: 'none', padding: 0, margin: '0 0 28px',
        display: 'flex', flexDirection: 'column', gap: 10, flex: 1,
      }}>
        {p.features.map(f => (
          <li key={f} style={{
            display: 'flex', alignItems: 'flex-start', gap: 10,
            fontSize: 14.5, lineHeight: 1.4,
            color: isF ? 'rgba(255,255,255,0.92)' : 'var(--fg1)',
          }}>
            <Icon name="check" size={15} stroke={2.4}
              style={{ color: isF ? SP2.sky : SP2.blue, marginTop: 3, flexShrink: 0 }} />
            <span>{f}</span>
          </li>
        ))}
      </ul>

      <Button variant={isF ? 'cta' : 'ghost'} size="md" icon="arrow-right"
        style={{ width: '100%', justifyContent: 'center' }}>
        {p.cta}
      </Button>
    </div>
  );
}

// ============================================================
// PUNTO DE ENTRADA — Pathway diagram
// ============================================================
function SpEntryPoint() {
  const paths = [
    { name: 'NeuroCopy Lab', sub: 'Si tu problema es conversión',  icon: 'brain',  bg: 'var(--sub-neuro-bg)',   color: '#5C147F' },
    { name: 'Content Studio AI', sub: 'Si necesitas ejecutar el plan', icon: 'film',   bg: 'var(--sub-interactive-bg)', color: '#D88812' },
    { name: 'Lead Engine AI',     sub: 'Si tu cuello es pipeline B2B',  icon: 'target', bg: 'var(--sub-leadgen-bg)',  color: '#007A85' },
  ];

  return (
    <section style={{
      background: '#fff', position: 'relative', overflow: 'hidden',
    }}>
      <Container style={{ padding: '96px 32px', position: 'relative' }}>
        <div style={{ maxWidth: 760, marginBottom: 56, textAlign: 'center', margin: '0 auto 56px' }}>
          <Eyebrow>SEO Pulse como punto de entrada</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)',
          }}>
            La auditoría que <span style={{ color: SP2.blue, fontStyle: 'italic' }}>abre la conversación correcta</span>.
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--fg2)', margin: 0 }}>
            La mayoría de los clientes de FRSKO llegan primero con SEO Pulse. Es el diagnóstico que pone sobre la mesa el mapa completo. A partir de ahí, cada empresa toma un camino diferente.
          </p>
        </div>

        {/* Diagram */}
        <div style={{
          maxWidth: 1080, margin: '0 auto',
          position: 'relative',
        }}>
          {/* Central hub */}
          <div style={{
            margin: '0 auto 56px',
            maxWidth: 420,
            background: `linear-gradient(135deg, ${SP2.blue} 0%, ${SP2.sky} 100%)`,
            color: '#fff',
            borderRadius: 24,
            padding: '24px 28px',
            display: 'flex', alignItems: 'center', gap: 18,
            position: 'relative',
            boxShadow: '0 20px 40px -15px rgba(35,79,232,0.5)',
          }}>
            <div style={{
              width: 56, height: 56, borderRadius: 14,
              background: 'rgba(255,255,255,0.18)',
              border: '1px solid rgba(255,255,255,0.3)',
              display: 'grid', placeItems: 'center',
              flexShrink: 0,
            }}>
              <Icon name="search" size={26} />
            </div>
            <div>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 10.5,
                letterSpacing: '0.12em', textTransform: 'uppercase',
                color: 'rgba(255,255,255,0.75)', marginBottom: 4,
              }}>Punto de entrada</div>
              <div style={{
                fontFamily: 'var(--font-heading)', fontWeight: 700,
                fontSize: 22, letterSpacing: '-0.02em',
              }}>SEO Pulse — Auditoría IA</div>
            </div>
          </div>

          {/* Connecting lines + 3 outcomes */}
          <div style={{
            position: 'relative',
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18,
          }}>
            {/* Branch lines drawn via SVG */}
            <svg aria-hidden style={{
              position: 'absolute',
              top: -56, left: 0, right: 0, height: 56,
              width: '100%', pointerEvents: 'none',
            }} viewBox="0 0 100 30" preserveAspectRatio="none">
              <path d="M 50 0 Q 50 12 17 28" stroke={SP2.sky} strokeWidth="0.3" strokeDasharray="0.8 0.8" fill="none" />
              <path d="M 50 0 L 50 30" stroke={SP2.sky} strokeWidth="0.3" strokeDasharray="0.8 0.8" fill="none" />
              <path d="M 50 0 Q 50 12 83 28" stroke={SP2.sky} strokeWidth="0.3" strokeDasharray="0.8 0.8" fill="none" />
            </svg>

            {paths.map((p, i) => (
              <div key={p.name} style={{
                background: '#fff',
                border: '1px solid var(--border)',
                borderRadius: 22,
                padding: '24px 24px',
                textAlign: 'center',
                transition: 'all var(--dur-base) var(--ease-out)',
                cursor: 'pointer',
              }}
                onMouseEnter={e => { e.currentTarget.style.borderColor = p.color; e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = 'var(--shadow-md)'; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = ''; }}>
                <div style={{
                  width: 52, height: 52, borderRadius: 14,
                  background: p.bg, color: p.color,
                  display: 'grid', placeItems: 'center',
                  margin: '0 auto 14px',
                }}>
                  <Icon name={p.icon} size={24} stroke={1.6} />
                </div>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 10.5,
                  color: 'var(--fg3)', letterSpacing: '0.08em',
                  textTransform: 'uppercase', marginBottom: 8,
                }}>{p.sub}</div>
                <div style={{
                  fontFamily: 'var(--font-heading)', fontWeight: 700,
                  fontSize: 19, letterSpacing: '-0.02em',
                  color: 'var(--fg1)', marginBottom: 10,
                  lineHeight: 1.2,
                }}>{p.name}</div>
                <div style={{
                  display: 'inline-flex', alignItems: 'center', gap: 5,
                  fontSize: 12.5, fontWeight: 600,
                  color: p.color,
                }}>
                  Continuar ahí <Icon name="arrow-right" size={13} />
                </div>
              </div>
            ))}
          </div>

          <p style={{
            textAlign: 'center', marginTop: 36,
            fontSize: 16, lineHeight: 1.5, color: 'var(--fg2)',
            fontStyle: 'italic',
          }}>
            La auditoría te dice <strong style={{ color: SP2.blue, fontWeight: 700, fontStyle: 'normal' }}>adónde ir primero</strong>.
          </p>
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// FAQ
// ============================================================
function SpFaq() {
  const faqs = [
    {
      q: '¿La auditoría incluye implementación?',
      a: 'No. La auditoría entrega el diagnóstico y el plan. La implementación puede ser con tu equipo interno, con FRSKO como retainer o con tu proveedor de desarrollo web. Lo aclaramos desde el inicio.',
    },
    {
      q: '¿Cuánto tarda la auditoría?',
      a: 'El plan Lite tarda entre 7 y 10 días hábiles. Pro y Enterprise, entre 2 y 4 semanas según el volumen de páginas y competidores a analizar.',
    },
    {
      q: '¿Cada cuánto necesito hacer una auditoría?',
      a: 'La recomendación es una vez al año como diagnóstico completo, con revisiones trimestrales de los indicadores clave. Los algoritmos y los modelos de IA se actualizan constantemente.',
    },
    {
      q: '¿En qué se diferencia de una auditoría SEO normal?',
      a: 'Una auditoría SEO normal analiza tu rendimiento en Google. SEO Pulse también analiza tu presencia en ChatGPT, Perplexity y Gemini — que hoy representan una porción creciente de las búsquedas con intención comercial.',
    },
    {
      q: '¿Funciona para empresas que solo operan localmente?',
      a: 'Sí, especialmente bien. El SEO local tiene oportunidades enormes en México y el AI Search Optimization para búsquedas locales está prácticamente vacío de competencia.',
    },
  ];
  const [open, setOpen] = React.useState(0);

  return (
    <section style={{ background: 'var(--ink-25)' }}>
      <Container style={{ padding: '96px 32px', maxWidth: 960 }}>
        <div style={{ marginBottom: 48, textAlign: 'center' }}>
          <Eyebrow>Preguntas frecuentes</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-heading)', fontWeight: 700,
            fontSize: 'clamp(30px, 3.6vw, 48px)',
            lineHeight: 1.05, letterSpacing: '-0.03em',
            margin: '14px 0 0', color: 'var(--fg1)',
          }}>
            Lo que pregunta todo CMO antes de auditarse.
          </h2>
        </div>

        <div style={{
          background: '#fff',
          border: '1px solid var(--border)',
          borderRadius: 24,
          overflow: 'hidden',
        }}>
          {faqs.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={f.q} style={{
                borderBottom: i < faqs.length - 1 ? '1px solid var(--border)' : 'none',
              }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                  width: '100%',
                  padding: '22px 28px',
                  background: isOpen ? SP2.bg : '#fff',
                  border: 0, cursor: 'pointer',
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
                  textAlign: 'left',
                  fontFamily: 'var(--font-body)',
                  transition: 'background var(--dur-base) var(--ease-out)',
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                    <span style={{
                      fontFamily: 'var(--font-mono)', fontSize: 11.5,
                      color: isOpen ? SP2.blue : 'var(--fg3)',
                      letterSpacing: '0.04em', minWidth: 28,
                    }}>{String(i + 1).padStart(2, '0')}</span>
                    <span style={{
                      fontSize: 17, fontWeight: 600,
                      color: 'var(--fg1)', letterSpacing: '-0.005em',
                    }}>{f.q}</span>
                  </div>
                  <div style={{
                    width: 32, height: 32, borderRadius: 999,
                    background: isOpen
                      ? `linear-gradient(135deg, ${SP2.blue} 0%, ${SP2.sky} 100%)`
                      : 'var(--ink-50)',
                    color: isOpen ? '#fff' : 'var(--fg2)',
                    display: 'grid', placeItems: 'center',
                    transition: 'all var(--dur-base) var(--ease-out)',
                    transform: isOpen ? 'rotate(45deg)' : '',
                    flexShrink: 0,
                  }}>
                    <Icon name="arrow-right" size={14} style={{ transform: 'rotate(-45deg)' }} />
                  </div>
                </button>
                {isOpen && (
                  <div style={{
                    padding: '0 28px 24px 72px',
                    background: SP2.bg,
                    animation: 'spFaqIn 280ms var(--ease-out)',
                  }}>
                    <p style={{ fontSize: 15.5, lineHeight: 1.65, color: 'var(--fg1)', margin: 0, maxWidth: 720 }}>
                      {f.a}
                    </p>
                  </div>
                )}
              </div>
            );
          })}
        </div>

        <style>{`
          @keyframes spFaqIn {
            from { opacity: 0; transform: translateY(-4px); }
            to { opacity: 1; transform: translateY(0); }
          }
        `}</style>
      </Container>
    </section>
  );
}

// ============================================================
// FINAL CTA — Pruébalo ahora mismo
// ============================================================
function SpFinalCta({ onCta }) {
  const [copied, setCopied] = React.useState(false);
  const prompt = '¿Cuáles son las mejores opciones de [tu industria] en México? Necesito una lista con criterios de selección.';

  const copy = () => {
    navigator.clipboard?.writeText(prompt).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 1800);
    });
  };

  return (
    <section style={{
      background: `linear-gradient(160deg, ${SP2.deep} 0%, #051A6B 100%)`,
      color: '#fff', position: 'relative', overflow: 'hidden',
    }}>
      <Droplets style={{ right: -100, top: -60 }} color={SP2.sky} opacity={0.3} size={320} />
      <Droplets style={{ left: -120, bottom: -100 }} color={SP2.blue} opacity={0.4} size={360} />

      <Container style={{ padding: '96px 32px', position: 'relative' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64,
          alignItems: 'center',
        }}>
          <div>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '5px 12px', borderRadius: 999,
              background: 'rgba(79,168,229,0.14)',
              border: `1px solid ${SP2.sky}`,
              fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
              textTransform: 'uppercase', color: SP2.sky,
              marginBottom: 22,
            }}>
              <Icon name="zap" size={12} /> Pruébalo ahora mismo
            </div>

            <h2 style={{
              fontFamily: 'var(--font-heading)', fontWeight: 700,
              fontSize: 'clamp(32px, 4.4vw, 60px)',
              lineHeight: 1.02, letterSpacing: '-0.035em',
              margin: '0 0 24px', color: '#fff',
            }}>
              ¿Aparece tu empresa<br/>
              cuando alguien le pregunta<br/>
              <span style={{ color: SP2.sky, fontStyle: 'italic' }}>a una IA sobre tu industria?</span>
            </h2>

            <p style={{
              fontSize: 18, lineHeight: 1.6,
              color: 'rgba(255,255,255,0.82)',
              margin: '0 0 32px', maxWidth: 540,
            }}>
              Abre ChatGPT o Perplexity y prueba la consulta de la derecha. Si tu empresa <strong style={{ color: '#fff', fontWeight: 600 }}>no aparece</strong>, SEO Pulse te dice por qué y cómo cambiar eso.
            </p>

            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <Button variant="cta" size="lg" icon="arrow-right" onClick={onCta}>
                Solicitar auditoría SEO Pulse
              </Button>
              <Button variant="inverse" size="lg" icon="arrow-right" onClick={onCta}>
                Ver planes y precios
              </Button>
            </div>
          </div>

          {/* Prompt card */}
          <div style={{
            background: 'rgba(255,255,255,0.04)',
            border: `1px solid ${SP2.sky}`,
            borderRadius: 28, padding: '24px 24px',
            backdropFilter: 'blur(8px)',
            position: 'relative',
          }}>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 11.5,
              color: SP2.sky, letterSpacing: '0.04em',
              marginBottom: 14, display: 'flex', alignItems: 'center', gap: 6,
            }}>
              <Icon name="sparkles" size={12} />
              Prompt para probar en ChatGPT / Perplexity
            </div>

            <div style={{
              background: 'rgba(0,0,0,0.3)',
              border: '1px solid rgba(79,168,229,0.3)',
              borderRadius: 16,
              padding: '20px 22px',
              fontFamily: 'var(--font-mono)', fontSize: 13.5,
              color: '#fff', lineHeight: 1.55,
              marginBottom: 14,
            }}>
              ¿Cuáles son las mejores opciones de <span style={{
                background: 'rgba(79,168,229,0.25)',
                color: SP2.sky,
                padding: '1px 6px',
                borderRadius: 4,
              }}>[tu industria]</span> en México? Necesito una lista con criterios de selección.
            </div>

            <button onClick={copy} style={{
              width: '100%',
              padding: '12px 18px',
              background: copied ? '#22A06B' : SP2.sky,
              color: copied ? '#fff' : SP2.deep,
              border: 0, borderRadius: 14,
              cursor: 'pointer',
              fontFamily: 'var(--font-body)',
              fontSize: 14, fontWeight: 600,
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
              transition: 'all var(--dur-base) var(--ease-out)',
            }}>
              {copied ? (
                <>
                  <Icon name="check" size={16} stroke={2.4} />
                  Copiado al portapapeles
                </>
              ) : (
                <>
                  <Icon name="clipboard" size={16} />
                  Copiar prompt
                </>
              )}
            </button>

            <div style={{
              marginTop: 18, paddingTop: 16,
              borderTop: '1px solid rgba(255,255,255,0.1)',
              display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10,
            }}>
              <a href="https://chat.openai.com" target="_blank" rel="noopener noreferrer" style={{
                padding: '10px 14px',
                background: 'rgba(255,255,255,0.06)',
                border: '1px solid rgba(255,255,255,0.14)',
                borderRadius: 12,
                fontSize: 13, fontWeight: 600,
                color: '#fff',
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
                textDecoration: 'none',
              }}>
                ChatGPT
                <Icon name="arrow-up-right" size={13} />
              </a>
              <a href="https://perplexity.ai" target="_blank" rel="noopener noreferrer" style={{
                padding: '10px 14px',
                background: 'rgba(255,255,255,0.06)',
                border: '1px solid rgba(255,255,255,0.14)',
                borderRadius: 12,
                fontSize: 13, fontWeight: 600,
                color: '#fff',
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
                textDecoration: 'none',
              }}>
                Perplexity
                <Icon name="arrow-up-right" size={13} />
              </a>
            </div>

            <p style={{
              marginTop: 16, marginBottom: 0,
              fontFamily: 'var(--font-mono)', fontSize: 10.5,
              color: 'rgba(255,255,255,0.55)', lineHeight: 1.5,
            }}>
              <span style={{ color: SP2.sky }}>// </span>
              Sustituye <strong style={{ color: SP2.sky, fontWeight: 600 }}>[tu industria]</strong> por la tuya. Cuenta cuántas marcas salen en la respuesta. Después busca la tuya.
            </p>
          </div>
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { SpPlans, SpEntryPoint, SpFaq, SpFinalCta });
