// Home page sections — pillars, stats, integrations, testimonials, FAQ, CTA
const { useState: uS, useEffect: uE, useRef: uR } = React;

// ============= HERO with 3 variants =============
function Hero({ variant = 'split' }) {
  if (variant === 'centered') return <HeroCentered />;
  if (variant === 'dark') return <HeroDark />;
  return <HeroSplit />;
}

function HeroSplit() {
  return (
    <section style={{ background: 'linear-gradient(180deg, #FBFCFD 0%, var(--surface-warm) 100%)', padding: '88px 24px 80px', overflow: 'hidden' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 56, alignItems: 'center' }} className="afer-hero-grid">
        <div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 14px', background: 'var(--brand-accent-soft)', color: 'var(--brand-accent-strong)', borderRadius: 999, fontSize: 13, fontWeight: 600, marginBottom: 24 }}>
            <Icon name="shield" size={14} /> Verifactu y Ley Antifraude listos
          </div>
          <h1 style={{ fontSize: 'clamp(44px, 6vw, 72px)', lineHeight: 1.02, letterSpacing: '-0.025em', margin: '0 0 20px', fontWeight: 700, color: 'var(--fg-strong)' }}>
            Tu gestión,<br /><span style={{ color: 'var(--brand-primary)' }}>optimizada</span>
          </h1>
          <p style={{ fontSize: 19, lineHeight: 1.55, color: 'var(--fg-default)', maxWidth: 520, margin: '0 0 32px' }}>
            Facturación, control horario e inteligencia artificial — todo en una sola plataforma para PYMEs y autónomos. Te liberamos de las tareas automatizables.
          </p>
          <div style={{ display: 'flex', gap: 12, marginBottom: 28, flexWrap: 'wrap' }}>
            <Button variant="primary" size="lg" onClick={openCalendly}>Solicita una demo <Icon name="arrow" size={16} color="#fff" /></Button>
            <Button variant="secondary" size="lg" href="/sign-up/">Empieza 7 días gratis</Button>
          </div>
          <div style={{ display: 'flex', gap: 24, fontSize: 13, color: 'var(--fg-muted)', flexWrap: 'wrap' }}>
            <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><Icon name="check" size={16} color="#16A34A" /> Sin tarjeta</span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><Icon name="check" size={16} color="#16A34A" /> Importamos tus datos</span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><Icon name="check" size={16} color="#16A34A" /> Soporte en español</span>
          </div>
        </div>
        <div style={{ position: 'relative' }}>
          <FacturacionMockup />
          <div style={{
            position: 'absolute', bottom: -24, left: -32,
            background: '#fff', padding: '12px 16px', borderRadius: 12,
            boxShadow: '0 16px 40px rgba(15,23,42,0.14)', border: '1px solid var(--border-default)',
            display: 'flex', alignItems: 'center', gap: 10, width: 240
          }}>
            <div style={{ width: 36, height: 36, borderRadius: 10, background: 'linear-gradient(135deg,#7C3AED,#3D6CF5)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name="sparkle" size={18} color="#fff" />
            </div>
            <div>
              <div style={{ fontSize: 13, fontWeight: 600 }}>IA al trabajo</div>
              <div style={{ fontSize: 11, color: 'var(--fg-muted)' }}>17 facturas conciliadas hoy</div>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) { .afer-hero-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>);

}

function HeroCentered() {
  return (
    <section style={{ background: 'linear-gradient(180deg, #FBFCFD 0%, var(--surface-warm) 100%)', padding: '88px 24px 0', overflow: 'hidden' }}>
      <div style={{ maxWidth: 880, margin: '0 auto', textAlign: 'center' }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 14px', background: 'var(--brand-accent-soft)', color: 'var(--brand-accent-strong)', borderRadius: 999, fontSize: 13, fontWeight: 600, marginBottom: 24 }}>
          <Icon name="shield" size={14} /> Verifactu y Ley Antifraude listos
        </div>
        <h1 style={{ fontSize: 'clamp(48px, 7vw, 84px)', lineHeight: 1, letterSpacing: '-0.03em', margin: '0 0 24px', fontWeight: 700, color: 'var(--fg-strong)' }}>
          Tu gestión, <span style={{ color: 'var(--brand-primary)' }}>optimizada</span>
        </h1>
        <p style={{ fontSize: 20, lineHeight: 1.55, color: 'var(--fg-default)', margin: '0 auto 36px', maxWidth: 640 }}>
          Facturación, control horario e inteligencia artificial — todo en una sola plataforma para PYMEs y autónomos.
        </p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginBottom: 56, flexWrap: 'wrap' }}>
          <Button variant="primary" size="lg" onClick={openCalendly}>Solicita una demo <Icon name="arrow" size={16} color="#fff" /></Button>
          <Button variant="secondary" size="lg" href="/sign-up/">Empieza 7 días gratis</Button>
        </div>
      </div>
      <div style={{ maxWidth: 1080, margin: '0 auto', position: 'relative' }}>
        <FacturacionMockup />
      </div>
    </section>);

}

function HeroDark() {
  return (
    <section style={{ background: 'linear-gradient(180deg, #0F172A 0%, #1B3FA0 100%)', padding: '88px 24px 80px', color: '#fff', overflow: 'hidden', position: 'relative' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at top right, rgba(61,108,245,0.25), transparent 60%)', pointerEvents: 'none' }} />
      <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 56, alignItems: 'center', position: 'relative' }} className="afer-hero-grid">
        <div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 14px', background: 'rgba(61,108,245,0.18)', color: '#9bb1e8', borderRadius: 999, fontSize: 13, fontWeight: 600, marginBottom: 24, border: '1px solid rgba(61,108,245,0.3)' }}>
            <Icon name="shield" size={14} /> Verifactu y Ley Antifraude listos
          </div>
          <h1 style={{ fontSize: 'clamp(44px, 6vw, 72px)', lineHeight: 1.02, letterSpacing: '-0.025em', margin: '0 0 20px', fontWeight: 700, color: '#fff' }}>
            Tu gestión,<br /><span style={{ background: 'linear-gradient(90deg, #3D6CF5, #9bb1e8)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>optimizada</span>
          </h1>
          <p style={{ fontSize: 19, lineHeight: 1.55, color: '#CBD5E1', maxWidth: 520, margin: '0 0 32px' }}>
            Facturación, control horario e inteligencia artificial — todo en una sola plataforma para PYMEs y autónomos.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <Button variant="primary" size="lg" onClick={openCalendly}>Solicita una demo <Icon name="arrow" size={16} color="#fff" /></Button>
            <a href="#demo-ia" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '14px 22px', background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.18)', color: '#fff', borderRadius: 10, fontWeight: 600, fontSize: 14, textDecoration: 'none', cursor: 'pointer' }}>
              Ver demo
            </a>
          </div>
        </div>
        <div style={{ position: 'relative' }}>
          <FacturacionMockup />
        </div>
      </div>
    </section>);

}

// ============= TRUST BAR =============
function TrustBar() {
  return (
    <section style={{ padding: '64px 24px', background: '#fff', borderTop: '1px solid var(--border-default)', borderBottom: '1px solid var(--border-default)' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center' }} className="afer-trust-grid">
          <div>
            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--brand-primary-strong)', letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 12 }}>CIENTOS DE PYMES Y AUTÓNOMOS

            </div>
            <h3 style={{ fontSize: 'clamp(24px, 2.6vw, 30px)', letterSpacing: '-0.02em', lineHeight: 1.2, margin: '0 0 14px' }}>
              Un SaaS pequeño con un acompañamiento cercano
            </h3>
            <p style={{ fontSize: 16, color: 'var(--fg-muted)', lineHeight: 1.6, margin: 0 }}>No somos el más grande, y eso es nuestro valor. Cada cliente tiene un interlocutor real que conoce su negocio. Te ayudamos a configurar Afer, te formamos y resolvemos dudas hablando con personas que te acompañan en todo momento.

            </p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }}>
            {[
            { i: 'users', t: 'Onboarding personalizado', d: 'Te ayudamos a poner en marcha Afer paso a paso.' },
            { i: 'message', t: 'Soporte por WhatsApp', d: 'Habla directamente con quien conoce tu cuenta.' },
            { i: 'help', t: 'Formación incluida', d: 'Sesiones en vivo y biblioteca Academy.' },
            { i: 'shield', t: 'Sin letra pequeña', d: 'Sin permanencia, sin sorpresas en la factura.' }].
            map((b) =>
            <div key={b.t} style={{ background: 'var(--surface-warm)', border: '1px solid var(--border-default)', borderRadius: 12, padding: 16 }}>
                <div style={{ width: 32, height: 32, borderRadius: 8, background: '#fff', color: 'var(--brand-primary-strong)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 10 }}>
                  <Icon name={b.i} size={16} color="var(--brand-primary-strong)" />
                </div>
                <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 2 }}>{b.t}</div>
                <div style={{ fontSize: 12, color: 'var(--fg-muted)', lineHeight: 1.5 }}>{b.d}</div>
              </div>
            )}
          </div>
        </div>
        <style>{`@media (max-width: 820px) { .afer-trust-grid { grid-template-columns: 1fr !important; } }`}</style>
      </Container>
    </section>);

}

// ============= 3 PILLARS =============
function Pillars() {
  const pillars = [
  { tag: 'Facturación', icon: 'file', color: '#1B3FA0', bg: '#E8EEFB',
    title: 'Factura sin pensar en la ley', desc: 'Verifactu, Ley Antifraude, presupuestos, cobros, conciliación bancaria. Pasa de presupuesto a factura en pocos clicks.',
    bullets: ['Verifactu y Ley Antifraude', 'Cobro con pasarela integrada', '15+ bancos conectados'],
    href: '/software-facturacion-cloud/' },
  { tag: 'Control horario', icon: 'clock', color: '#16A34A', bg: '#E7F6EC',
    title: 'Equipo bajo control, sin papeles', desc: 'Fichajes, vacaciones, contratos y nóminas. Cumple la normativa española de registro horario sin esfuerzo.',
    bullets: ['Fichaje móvil, web y kiosco', 'Vacaciones y bajas', 'Informes para Inspección'],
    href: '/software-control-horario/' },
  { tag: 'IA & OCR', icon: 'sparkle', color: '#7C3AED', bg: '#F1E8FB',
    title: 'Una IA que entiende tu negocio', desc: 'Escanea tickets, concilia movimientos bancarios y responde a tus preguntas en español. Aprende de tus datos.',
    bullets: ['OCR de tickets en segundos', 'Conciliación automática', 'Asistente conversacional'],
    href: '/erp-con-ia/' }];


  return (
    <Section label="Pilares" pad="120px 0" bg="#fff">
      <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 64px' }}>
        <Eyebrow>LOS 3 EJES</Eyebrow>
        <h2 style={{ fontSize: 48, letterSpacing: '-0.02em', lineHeight: 1.05, margin: '0 0 16px' }}>
          Tres herramientas, <span style={{ color: 'var(--brand-primary)' }}>una sola plataforma</span>
        </h2>
        <p style={{ fontSize: 18, color: 'var(--fg-muted)', lineHeight: 1.55 }}>
          Cada uno de tus desafíos tiene una solución pensada para hacerlo simple. Diseñadas para PYMEs y autónomos en España.
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }} className="afer-pillars-grid">
        {pillars.map((p, i) =>
        <Reveal key={p.tag} delay={i * 100}>
            <a href={p.href} style={{
            display: 'block', textDecoration: 'none', color: 'inherit',
            background: '#fff', border: '1px solid var(--border-default)', borderRadius: 16,
            padding: 28, height: '100%', position: 'relative', overflow: 'hidden',
            transition: 'transform 200ms cubic-bezier(0.2,0.8,0.2,1), box-shadow 200ms'
          }}
          onMouseEnter={(e) => {e.currentTarget.style.transform = 'translateY(-4px)';e.currentTarget.style.boxShadow = '0 16px 40px rgba(15,23,42,0.10)';}}
          onMouseLeave={(e) => {e.currentTarget.style.transform = 'translateY(0)';e.currentTarget.style.boxShadow = 'none';}}>
              <div style={{ width: 52, height: 52, borderRadius: 14, background: p.bg, color: p.color, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}>
                <Icon name={p.icon} size={26} color={p.color} />
              </div>
              <div style={{ fontSize: 12, fontWeight: 600, color: p.color, letterSpacing: '0.04em', marginBottom: 8 }}>{p.tag.toUpperCase()}</div>
              <h3 style={{ fontSize: 22, lineHeight: 1.2, margin: '0 0 12px', letterSpacing: '-0.015em' }}>{p.title}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--fg-muted)', margin: '0 0 20px' }}>{p.desc}</p>
              <div style={{ borderTop: '1px solid var(--border-default)', paddingTop: 16 }}>
                {p.bullets.map((b) =>
              <div key={b} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13, color: 'var(--fg-default)', padding: '5px 0' }}>
                    <Icon name="check" size={14} color={p.color} /> {b}
                  </div>
              )}
              </div>
              <div style={{ marginTop: 20, fontSize: 14, fontWeight: 600, color: p.color, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                Descubrir <Icon name="arrow" size={14} color={p.color} />
              </div>
            </a>
          </Reveal>
        )}
      </div>
      <style>{`@media (max-width: 880px) { .afer-pillars-grid { grid-template-columns: 1fr !important; } }`}</style>
    </Section>);

}

// ============= TABBED DEEP DIVE on the 3 pillars =============
function PillarTabs() {
  const [tab, setTab] = uS(0);
  const tabs = [
  { label: 'Facturación', icon: 'file', color: '#1B3FA0', href: '/software-facturacion-cloud/',
    title: 'De presupuesto a cobro, en pocos clicks',
    desc: 'Genera presupuestos, conviértelos en facturas con un click, envíalas y cóbralas — todo dentro de Afer. Cumplimiento Verifactu garantizado.',
    bullets: [
    'Plantillas con tu marca, IVA recargo y retenciones',
    'Envío y firma electrónica integrada',
    'Cobro con tarjeta, Bizum o transferencia',
    'Conciliación bancaria automática'],

    mockup: <FacturacionMockup /> },
  { label: 'Control horario', icon: 'clock', color: '#16A34A', href: '/software-control-horario/',
    title: 'Cumple la ley sin papeleos',
    desc: 'Fichajes desde móvil, web o kiosco. Vacaciones, bajas y contratos en un único panel. Informes listos para Inspección de Trabajo.',
    bullets: [
    'Fichaje con geolocalización y selfie',
    'Solicitud y aprobación de vacaciones',
    'Cuadrantes y turnos drag & drop',
    'Exportación a SILTRA y nóminas'],

    mockup: <HorarioMockup /> },
  { label: 'Inteligencia artificial', icon: 'sparkle', color: '#7C3AED', href: '/erp-con-ia/',
    title: 'Una IA entrenada en tu negocio',
    desc: 'Escanea tickets con la cámara, concilia movimientos bancarios sin intervención y pregunta a tus datos en lenguaje natural.',
    bullets: [
    'OCR de tickets, facturas y albaranes',
    'Conciliación bancaria con confianza visible',
    'Asistente conversacional en español',
    'Detección de gastos duplicados o anómalos'],

    mockup: <IAMockup /> }];

  const t = tabs[tab];

  return (
    <Section label="Detalle por eje" pad="120px 0" bg="var(--surface-warm)">
      <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 56px' }}>
        <Eyebrow>EXPLORA EN PROFUNDIDAD</Eyebrow>
        <h2 style={{ fontSize: 44, letterSpacing: '-0.02em', lineHeight: 1.05, margin: 0 }}>
          ¿Qué eje resuelve tu día a día?
        </h2>
      </div>

      {/* Tab strip */}
      <div style={{ display: 'flex', justifyContent: 'center', gap: 8, marginBottom: 40, flexWrap: 'wrap' }}>
        {tabs.map((tt, i) =>
        <button key={tt.label} onClick={() => setTab(i)} style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '12px 20px', borderRadius: 999, border: '1px solid',
          borderColor: tab === i ? tt.color : 'var(--border-default)',
          background: tab === i ? '#fff' : 'transparent',
          color: tab === i ? tt.color : 'var(--fg-default)',
          fontWeight: 600, fontSize: 14, cursor: 'pointer', fontFamily: 'inherit',
          boxShadow: tab === i ? '0 4px 12px rgba(15,23,42,0.06)' : 'none',
          transition: 'all 180ms'
        }}>
            <Icon name={tt.icon} size={16} color={tab === i ? tt.color : 'currentColor'} />
            {tt.label}
          </button>
        )}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 56, alignItems: 'center' }} className="afer-tabs-grid">
        <div key={tab} style={{ animation: 'aferFadeIn 400ms cubic-bezier(0.2,0.8,0.2,1) both' }}>
          <h3 style={{ fontSize: 36, letterSpacing: '-0.02em', lineHeight: 1.1, margin: '0 0 16px', color: 'var(--fg-strong)' }}>
            {t.title}
          </h3>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--fg-default)', margin: '0 0 24px' }}>{t.desc}</p>
          <div>
            {t.bullets.map((b) =>
            <div key={b} style={{ display: 'flex', alignItems: 'flex-start', gap: 12, padding: '8px 0', fontSize: 15, color: 'var(--fg-strong)' }}>
                <div style={{ marginTop: 2, width: 22, height: 22, flexShrink: 0, borderRadius: 999, background: t.color, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name="check" size={13} color="#fff" />
                </div>
                {b}
              </div>
            )}
          </div>
          <div style={{ marginTop: 28 }}>
            <Button variant="primary" href={t.href}>Explorar {t.label.toLowerCase()} <Icon name="arrow" size={14} color="#fff" /></Button>
          </div>
        </div>
        <div key={`m-${tab}`} style={{ animation: 'aferFadeIn 400ms cubic-bezier(0.2,0.8,0.2,1) both' }}>
          {t.mockup}
        </div>
      </div>
      <style>{`
        @keyframes aferFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
        @media (max-width: 920px) { .afer-tabs-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </Section>);

}

// ============= STATS =============
function Stats() {
  const stats = [
  { value: '2,7×', label: 'Productividad', desc: 'Aumento medio en equipos que pasan a Afer' },
  { value: '3×', label: 'Eficiencia', desc: 'En procesos administrativos y de cobro' },
  { value: '80%', label: 'Tiempo ahorrado', desc: 'En tareas de facturación y contabilidad' },
  { value: '<1 día', label: 'Onboarding', desc: 'Tu equipo operativo desde el primer día' }];

  return (
    <Section bg="var(--brand-primary)" pad="80px 0">
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }} className="afer-stats-grid">
        {stats.map((s) =>
        <div key={s.label} style={{ color: '#fff' }}>
            <div className="afer-tabular" style={{ fontSize: 64, fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1, marginBottom: 12, background: 'linear-gradient(180deg, #fff, #cdd9ff)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>
              {s.value}
            </div>
            <div style={{ fontSize: 16, fontWeight: 600, marginBottom: 4 }}>{s.label}</div>
            <div style={{ fontSize: 13, color: '#9bb1e8', lineHeight: 1.5 }}>{s.desc}</div>
          </div>
        )}
      </div>
      <style>{`@media (max-width: 760px) { .afer-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; } }`}</style>
    </Section>);

}

// ============= INTEGRATIONS =============
function Integrations() {
  const banks = ['BBVA', 'Santander', 'CaixaBank', 'Sabadell', 'ING', 'Bankinter', 'Kutxabank', 'Unicaja', 'Abanca'];
  const tools = ['SAGE', 'A3', 'Stripe', 'Holded', 'Microsoft 365', 'Google Workspace', 'Shopify', 'PrestaShop', 'WooCommerce'];
  return (
    <Section label="Integraciones" pad="120px 0" bg="#fff">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'center' }} className="afer-tabs-grid">
        <div>
          <Eyebrow>INTEGRACIONES</Eyebrow>
          <h2 style={{ fontSize: 42, letterSpacing: '-0.02em', lineHeight: 1.1, margin: '0 0 16px' }}>
            Tu stack, conectado
          </h2>
          <p style={{ fontSize: 17, color: 'var(--fg-muted)', lineHeight: 1.6, marginBottom: 24 }}>
            Conecta tu banco, tus canales de comunicación, tu tienda online. Las integraciones bancarias están supervisadas por el <strong style={{ color: 'var(--fg-strong)' }}>Banco de España</strong>.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14, color: 'var(--fg-strong)' }}>
              <Icon name="bank" size={18} color="#3D6CF5" /> 15+ bancos españoles
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14, color: 'var(--fg-strong)' }}>
              <Icon name="workflow" size={18} color="#3D6CF5" /> ERPs y software contable
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14, color: 'var(--fg-strong)' }}>
              <Icon name="package" size={18} color="#3D6CF5" /> E-commerce y pasarelas de pago
            </div>
          </div>
        </div>
        <div>
          <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--fg-muted)', letterSpacing: '0.04em', marginBottom: 12 }}>BANCOS</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginBottom: 28 }}>
            {banks.map((b) =>
            <div key={b} style={{ padding: '14px 12px', background: '#fff', border: '1px solid var(--border-default)', borderRadius: 10, textAlign: 'center', fontWeight: 700, fontSize: 13, color: 'var(--fg-strong)', letterSpacing: '-0.01em', transition: 'all 200ms' }}
            onMouseEnter={(e) => {e.currentTarget.style.borderColor = 'var(--brand-accent)';e.currentTarget.style.color = 'var(--brand-accent)';}}
            onMouseLeave={(e) => {e.currentTarget.style.borderColor = 'var(--border-default)';e.currentTarget.style.color = 'var(--fg-strong)';}}>
                {b}
              </div>
            )}
          </div>
          <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--fg-muted)', letterSpacing: '0.04em', marginBottom: 12 }}>HERRAMIENTAS Y ERP</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
            {tools.map((b) =>
            <div key={b} style={{ padding: '14px 12px', background: '#fff', border: '1px solid var(--border-default)', borderRadius: 10, textAlign: 'center', fontWeight: 700, fontSize: 13, color: 'var(--fg-strong)', letterSpacing: '-0.01em', transition: 'all 200ms' }}
            onMouseEnter={(e) => {e.currentTarget.style.borderColor = 'var(--brand-accent)';e.currentTarget.style.color = 'var(--brand-accent)';}}
            onMouseLeave={(e) => {e.currentTarget.style.borderColor = 'var(--border-default)';e.currentTarget.style.color = 'var(--fg-strong)';}}>
                {b}
              </div>
            )}
          </div>
        </div>
      </div>
    </Section>);

}

// ============= DEMO INTERACTIVA =============
function Testimonials() {
  const [tab, setTab] = uS(0);
  const [animKey, setAnimKey] = uS(0);

  const tabs = [
  {
    label: 'Facturación', icon: 'file', color: '#1B3FA0', bg: '#EEF2FF',
    headline: 'De presupuesto a factura en segundos',
    desc: 'Crea, envía y cobra. Verifactu incluido desde el primer día.',
    screen: () =>
    <div style={{ background: '#F8FAFC', borderRadius: 12, overflow: 'hidden', border: '1px solid var(--border-default)' }}>
          {/* Toolbar */}
          <div style={{ background: '#fff', borderBottom: '1px solid var(--border-default)', padding: '10px 16px', display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--fg-strong)' }}>Nueva factura</div>
            <div style={{ marginLeft: 'auto', display: 'flex', gap: 6 }}>
              <span style={{ padding: '4px 10px', borderRadius: 6, background: '#EEF2FF', color: '#1B3FA0', fontSize: 11, fontWeight: 600 }}>Borrador</span>
              <span style={{ padding: '4px 10px', borderRadius: 6, background: '#1B3FA0', color: '#fff', fontSize: 11, fontWeight: 600 }}>Enviar</span>
            </div>
          </div>
          <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 10 }}>
            {/* Cliente */}
            <div style={{ background: '#fff', borderRadius: 8, padding: '12px 14px', border: '1px solid var(--border-default)' }}>
              <div style={{ fontSize: 10, color: 'var(--fg-muted)', fontWeight: 600, letterSpacing: '0.06em', marginBottom: 4 }}>CLIENTE</div>
              <div style={{ fontSize: 14, fontWeight: 600 }}>Construcciones Llabrés, S.L.</div>
              <div style={{ fontSize: 12, color: 'var(--fg-muted)' }}>B-07123456 · Pollença, Mallorca</div>
            </div>
            {/* Líneas */}
            <div style={{ background: '#fff', borderRadius: 8, border: '1px solid var(--border-default)', overflow: 'hidden' }}>
              <div style={{ padding: '8px 14px', background: 'var(--surface-subtle)', display: 'grid', gridTemplateColumns: '1fr 60px 80px', gap: 8, fontSize: 10, fontWeight: 700, color: 'var(--fg-muted)', letterSpacing: '0.05em' }}>
                <span>CONCEPTO</span><span style={{ textAlign: 'right' }}>UIDS</span><span style={{ textAlign: 'right' }}>IMPORTE</span>
              </div>
              {[
          { c: 'Instalación eléctrica fase 1', u: '1', p: '3.200,00 €' },
          { c: 'Materiales y mano de obra', u: '1', p: '1.850,00 €' },
          { c: 'Desplazamiento', u: '4', p: '200,00 €' }].
          map((l, i) =>
          <div key={i} style={{ padding: '10px 14px', display: 'grid', gridTemplateColumns: '1fr 60px 80px', gap: 8, fontSize: 12, borderTop: '1px solid var(--border-default)' }}>
                  <span>{l.c}</span><span style={{ textAlign: 'right', color: 'var(--fg-muted)' }}>{l.u}</span><span style={{ textAlign: 'right', fontWeight: 600 }}>{l.p}</span>
                </div>
          )}
            </div>
            {/* Totales */}
            <div style={{ background: '#fff', borderRadius: 8, padding: '12px 14px', border: '1px solid var(--border-default)', display: 'flex', flexDirection: 'column', gap: 6 }}>
              {[['Base imponible', '5.250,00 €'], ['IVA 21%', '1.102,50 €']].map(([k, v]) =>
          <div key={k} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, color: 'var(--fg-muted)' }}>
                  <span>{k}</span><span>{v}</span>
                </div>
          )}
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 15, fontWeight: 700, paddingTop: 8, borderTop: '1px solid var(--border-default)', color: '#1B3FA0' }}>
                <span>TOTAL</span><span>6.352,50 €</span>
              </div>
            </div>
            {/* Verifactu badge */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 12px', background: '#F0FDF4', borderRadius: 8, border: '1px solid #BBF7D0' }}>
              <Icon name="shield" size={13} color="#16A34A" />
              <span style={{ fontSize: 12, color: '#16A34A', fontWeight: 600 }}>Verifactu · Hash generado · QR incluido</span>
            </div>
          </div>
        </div>

  },
  {
    label: 'Control horario', icon: 'clock', color: '#16A34A', bg: '#F0FDF4',
    headline: 'Tu equipo siempre controlado',
    desc: 'Fichajes desde WhatsApp, app o web. Cumplimiento RD 8/2019 automático.',
    screen: () =>
    <div style={{ background: '#F8FAFC', borderRadius: 12, overflow: 'hidden', border: '1px solid var(--border-default)' }}>
          <div style={{ background: '#fff', borderBottom: '1px solid var(--border-default)', padding: '10px 16px', display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{ fontSize: 13, fontWeight: 600 }}>Control horario · Hoy</div>
            <div style={{ marginLeft: 'auto', fontSize: 12, color: 'var(--fg-muted)' }}>Miércoles 7 mayo · 14:32</div>
          </div>
          <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 8 }}>
            {[
        { name: 'Joan Cànaves', entrada: '08:02', salida: '—', status: 'Trabajando', h: '6h 30m', color: '#16A34A' },
        { name: 'María García', entrada: '09:15', salida: '—', status: 'Trabajando', h: '5h 17m', color: '#16A34A' },
        { name: 'Pep Torrens', entrada: '07:45', salida: '13:30', status: 'Finalizado', h: '5h 45m', color: 'var(--fg-muted)' },
        { name: 'Laura Mas', entrada: '—', salida: '—', status: 'Sin fichar', h: '0h 00m', color: '#EF4444' },
        { name: 'Carlos Ruiz', entrada: '08:30', salida: '—', status: 'Trabajando', h: '6h 02m', color: '#16A34A' }].
        map((e, i) =>
        <div key={i} style={{ background: '#fff', borderRadius: 8, padding: '10px 14px', border: '1px solid var(--border-default)', display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 32, height: 32, borderRadius: '50%', background: e.color === '#EF4444' ? '#FEF2F2' : e.color === 'var(--fg-muted)' ? 'var(--surface-subtle)' : '#F0FDF4', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 700, color: e.color, flexShrink: 0 }}>
                  {e.name.split(' ').map((n) => n[0]).join('').slice(0, 2)}
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 2 }}>{e.name}</div>
                  <div style={{ fontSize: 11, color: 'var(--fg-muted)' }}>Entrada {e.entrada} · Salida {e.salida}</div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{ fontSize: 13, fontWeight: 700, color: e.color }}>{e.h}</div>
                  <div style={{ fontSize: 10, color: e.color, fontWeight: 600 }}>{e.status}</div>
                </div>
              </div>
        )}
            <div style={{ display: 'flex', gap: 8, marginTop: 4 }}>
              <div style={{ flex: 1, padding: '8px 12px', background: '#F0FDF4', borderRadius: 8, border: '1px solid #BBF7D0', fontSize: 12, color: '#16A34A', fontWeight: 600, textAlign: 'center' }}>
                4 activos · 1 sin fichar
              </div>
              <div style={{ padding: '8px 12px', background: '#fff', borderRadius: 8, border: '1px solid var(--border-default)', fontSize: 12, color: 'var(--fg-muted)', fontWeight: 600 }}>
                Exportar informe →
              </div>
            </div>
          </div>
        </div>

  },
  {
    label: 'Asistente IA', icon: 'sparkle', color: '#7C3AED', bg: '#F5F3FF',
    headline: 'Pregunta a tus datos en lenguaje natural',
    desc: 'La primera IA para PYMEs conectada en tiempo real a tu ERP.',
    screen: () =>
    <div style={{ background: '#F8FAFC', borderRadius: 12, overflow: 'hidden', border: '1px solid var(--border-default)' }}>
          <div style={{ background: '#fff', borderBottom: '1px solid var(--border-default)', padding: '10px 16px', display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{ width: 24, height: 24, borderRadius: 6, background: 'linear-gradient(135deg,#7C3AED,#3D6CF5)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name="sparkle" size={12} color="#fff" />
            </div>
            <div style={{ fontSize: 13, fontWeight: 600 }}>Asistente Afer</div>
            <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 4, fontSize: 11, color: '#16A34A', fontWeight: 600 }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#16A34A', display: 'inline-block' }}></span> En línea
            </div>
          </div>
          <div style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 10 }}>
            {[
        { role: 'user', text: '¿Cuánto he facturado este mes vs el anterior?' },
        { role: 'ai', text: 'Este mes llevas **38.420 €** en 47 facturas — un **+22%** respecto a abril (31.500 €). El sector que más creció fue Construcción (+4.200 €).' },
        { role: 'user', text: '¿Qué clientes me deben más de 30 días?' },
        { role: 'ai', text: 'Tienes **3 facturas vencidas** por **11.340 €**:\n• Estudio Berlanga · 4.800 € · 38 días\n• Ferretería Ruiz · 3.900 € · 45 días\n• Marina Sur · 2.640 € · 32 días' }].
        map((m, i) =>
        <div key={i} style={{
          padding: '10px 13px', borderRadius: 10, fontSize: 13, lineHeight: 1.55,
          background: m.role === 'user' ? 'var(--surface-subtle)' : '#F1E8FB',
          alignSelf: m.role === 'user' ? 'flex-end' : 'flex-start',
          maxWidth: '88%', whiteSpace: 'pre-wrap'
        }} dangerouslySetInnerHTML={{ __html: m.text.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>') }} />
        )}
            <div style={{ display: 'flex', gap: 8, padding: '8px 0' }}>
              <div style={{ flex: 1, padding: '9px 12px', background: '#fff', borderRadius: 8, border: '1px solid var(--border-default)', fontSize: 12, color: 'var(--fg-muted)' }}>Pregunta algo sobre tu negocio...</div>
              <div style={{ padding: '9px 12px', background: '#7C3AED', borderRadius: 8, display: 'flex', alignItems: 'center' }}>
                <Icon name="arrow" size={14} color="#fff" />
              </div>
            </div>
          </div>
        </div>

  }];


  const current = tabs[tab];

  return (
    <Section label="Demo interactiva" pad="120px 0" bg="var(--surface-subtle)">
      <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 56px' }}>
        <Eyebrow>{''}</Eyebrow>
        <h2 style={{ fontSize: 42, letterSpacing: '-0.02em', lineHeight: 1.1, margin: '0 0 16px' }}>Tu negocio merece las mismas herramientas que las grandes empresas</h2>
        <p style={{ fontSize: 18, color: 'var(--fg-muted)', margin: 0, lineHeight: 1.55 }}>Por fin, IA, automatización y control total al alcance de cualquier PYME española.</p>
      </div>

      {/* Tab selector */}
      <div style={{ display: 'flex', gap: 8, justifyContent: 'center', marginBottom: 48, flexWrap: 'wrap' }}>
        {tabs.map((t, i) =>
        <button key={i} onClick={() => {setTab(i);setAnimKey((k) => k + 1);}} style={{
          display: 'flex', alignItems: 'center', gap: 8, padding: '10px 20px',
          borderRadius: 10, border: `1.5px solid ${i === tab ? t.color : 'var(--border-default)'}`,
          background: i === tab ? t.bg : '#fff', color: i === tab ? t.color : 'var(--fg-muted)',
          fontWeight: i === tab ? 700 : 500, fontSize: 14, cursor: 'pointer', fontFamily: 'inherit',
          transition: 'all .2s'
        }}>
            <Icon name={t.icon} size={16} color={i === tab ? t.color : 'var(--fg-muted)'} />
            {t.label}
          </button>
        )}
      </div>

      {/* Panel */}
      <div style={{ maxWidth: 1080, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center' }} className="afer-pillars-grid">
        <div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '5px 12px', background: current.bg, borderRadius: 999, fontSize: 12, fontWeight: 700, color: current.color, letterSpacing: '0.04em', marginBottom: 20 }}>
            <Icon name={current.icon} size={12} color={current.color} /> {current.label.toUpperCase()}
          </div>
          <h3 style={{ fontSize: 'clamp(24px,3vw,34px)', fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.2, margin: '0 0 16px' }}>
            {current.headline}
          </h3>
          <p style={{ fontSize: 16, color: 'var(--fg-muted)', lineHeight: 1.65, marginBottom: 28 }}>
            {current.desc}
          </p>
          <div style={{ display: 'flex', gap: 10 }}>
            <Button variant="primary" style={{ background: current.color }} href="/sign-up/">Probar gratis</Button>
            <Button variant="secondary" onClick={openCalendly}>Ver demo</Button>
          </div>
        </div>
        <div key={animKey} style={{ animation: 'fadeUp .35s ease both' }}>
          {current.screen()}
        </div>
      </div>

      <style>{`
        @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
        @media (max-width: 720px) { .afer-pillars-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </Section>);
}

// ============= PRICING TEASER =============
function PricingTeaser() {
  const tiers = [
  { name: 'Lite', price: '30', tag: 'Para autónomos', features: ['250 facturas al año', '1 usuario incluido', 'Verifactu y AEAT', 'Soporte telefónico'] },
  { name: 'Standard', price: '40', tag: 'Para pequeñas empresas', features: ['1.500 facturas al año', '3 usuarios incluidos', 'Verifactu y AEAT', 'Soporte telefónico', 'Enlace contable'] },
  { name: 'Advanced', price: '80', tag: 'El más popular', popular: true, features: ['Facturas ilimitadas', '5 usuarios incluidos', 'Control horario incluido', 'Bancos sincronizados ilimitados', 'TPV y partes de trabajo'] },
  { name: 'Premium', price: '160', tag: 'Empresas a medida', features: ['Facturas ilimitadas', '10 usuarios incluidos', 'IA predictiva y análisis', 'Desarrollos a medida', 'Sync tienda online'] }];

  return (
    <Section label="Pricing" pad="120px 0" bg="#fff">
      <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 56px' }}>
        <Eyebrow>PRECIOS</Eyebrow>
        <h2 style={{ fontSize: 44, letterSpacing: '-0.02em', lineHeight: 1.05, margin: '0 0 16px' }}>
          Empieza por <span style={{ color: 'var(--brand-primary)' }}>30€/mes</span>
        </h2>
        <p style={{ fontSize: 18, color: 'var(--fg-muted)' }}>
          Sin permanencia. <strong><a href="/programa-facturacion-certificado-adaptado-verifactu/" style={{ color: 'var(--brand-accent)' }}>Adaptado a Verifactu</a>.</strong> 7 días gratis.
        </p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, maxWidth: 1280, margin: '0 auto' }} className="afer-pillars-grid">
        {tiers.map((t) =>
        <div key={t.name} style={{
          background: t.popular ? 'var(--brand-primary)' : '#fff',
          color: t.popular ? '#fff' : 'inherit',
          padding: 32, borderRadius: 16,
          border: t.popular ? 'none' : '1px solid var(--border-default)',
          position: 'relative', boxShadow: t.popular ? '0 16px 40px rgba(27,63,160,0.25)' : 'none'
        }}>
            {t.popular &&
          <div style={{ position: 'absolute', top: -12, right: 24, padding: '4px 12px', background: 'var(--brand-accent)', color: '#fff', fontSize: 11, fontWeight: 700, borderRadius: 999, letterSpacing: '0.04em' }}>
                MÁS POPULAR
              </div>
          }
            <div style={{ fontSize: 13, fontWeight: 600, color: t.popular ? '#9bb1e8' : 'var(--brand-accent)', marginBottom: 6, letterSpacing: '0.04em' }}>{t.name.toUpperCase()}</div>
            <div style={{ fontSize: 13, color: t.popular ? '#cdd9ff' : 'var(--fg-muted)', marginBottom: 16 }}>{t.tag}</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginBottom: 24 }}>
              <span style={{ fontSize: 14, fontWeight: 600 }}>desde</span>
              <span className="afer-tabular" style={{ fontSize: 56, fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1 }}>{t.price}€</span>
              <span style={{ fontSize: 14, color: t.popular ? '#cdd9ff' : 'var(--fg-muted)' }}>/mes</span>
            </div>
            <Button variant={t.popular ? 'secondary' : 'primary'} style={{ width: '100%', justifyContent: 'center', display: 'flex', boxSizing: 'border-box' }} href="/sign-up/">
              {t.popular ? 'Empieza ahora' : 'Probar gratis'}
            </Button>
            <div style={{ marginTop: 24, paddingTop: 20, borderTop: t.popular ? '1px solid rgba(255,255,255,0.15)' : '1px solid var(--border-default)' }}>
              {t.features.map((f) =>
            <div key={f} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 0', fontSize: 14 }}>
                  <Icon name="check" size={14} color={t.popular ? '#86EFAC' : '#16A34A'} /> {f}
                </div>
            )}
            </div>
          </div>
        )}
      </div>
      <div style={{ textAlign: 'center', marginTop: 40 }}>
        <a href="/precios/" style={{ fontSize: 15, fontWeight: 600, color: 'var(--brand-accent)', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          Comparar planes en detalle <Icon name="arrow" size={14} />
        </a>
      </div>
    </Section>);

}

// ============= FAQ =============
function FAQ() {
  const items = [
  { q: '¿Afer cumple con Verifactu y la Ley Antifraude?', a: 'Sí. Afer está homologada y cumple con todos los requisitos de Verifactu, la Ley Antifraude y la normativa de la AEAT desde el primer día.' },
  { q: '¿Puedo importar mis datos de otra herramienta?', a: 'Por supuesto. Importamos tus clientes, productos, facturas y movimientos desde Excel, A3, Holded, Sage y otros sistemas. El equipo de onboarding lo hace por ti.' },
  { q: '¿El control horario sirve para Inspección de Trabajo?', a: 'Sí. Generamos los informes en el formato exacto que pide Inspección y guardamos los registros durante 4 años, conforme a la normativa española.' },
  { q: '¿Puedo conectar mi banco?', a: 'Conectamos con más de 15 bancos españoles a través de una infraestructura supervisada por el Banco de España. El proceso es seguro y dura menos de 2 minutos.' },
  { q: '¿Afer está adaptado a Verifactu?', a: 'Sí. Afer es un programa de facturación certificado, adaptado a Verifactu y la Ley Antifraude desde el primer día. Cada factura se firma y envía a la AEAT en tiempo real, sin que tengas que hacer nada.' },
  { q: '¿Necesito conocimientos técnicos para usar Afer?', a: 'No. Está diseñada para PYMEs y autónomos: si sabes usar el correo, sabes usar Afer. Además, importamos tus datos y te formamos en una sesión.' }];

  const [open, setOpen] = uS(0);
  return (
    <Section label="FAQ" pad="120px 0" bg="#fff">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64 }} className="afer-tabs-grid">
        <div>
          <Eyebrow>PREGUNTAS FRECUENTES</Eyebrow>
          <h2 style={{ fontSize: 42, letterSpacing: '-0.02em', lineHeight: 1.1, margin: '0 0 16px' }}>
            Resolvemos tus dudas
          </h2>
          <p style={{ fontSize: 16, color: 'var(--fg-muted)', lineHeight: 1.6, marginBottom: 24 }}>
            ¿No encuentras la respuesta? Habla con un especialista.
          </p>
          <Button variant="secondary" onClick={openCalendly}><Icon name="users" size={14} /> Hablar con ventas</Button>
        </div>
        <div>
          {items.map((it, i) =>
          <div key={i} style={{
            borderBottom: '1px solid var(--border-default)',
            padding: '20px 0'
          }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{
              width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              background: 'transparent', border: 0, padding: 0, cursor: 'pointer', textAlign: 'left',
              fontFamily: 'inherit', color: 'var(--fg-strong)'
            }}>
                <span style={{ fontSize: 17, fontWeight: 600 }}>{it.q}</span>
                <span style={{ flexShrink: 0, marginLeft: 16, color: 'var(--fg-muted)', transform: open === i ? 'rotate(45deg)' : 'rotate(0)', transition: 'transform 200ms' }}>
                  <Icon name="plus" size={20} />
                </span>
              </button>
              <div style={{
              maxHeight: open === i ? 200 : 0, overflow: 'hidden',
              transition: 'max-height 300ms cubic-bezier(0.2,0.8,0.2,1), margin-top 200ms',
              marginTop: open === i ? 12 : 0
            }}>
                <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--fg-muted)', margin: 0 }}>{it.a}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </Section>);

}

// ============= CTA =============
function FinalCTA() {
  return (
    <section style={{ padding: '0 24px', marginBottom: -1 }}>
      <div style={{ maxWidth: 1200, borderRadius: 24, background: 'linear-gradient(135deg, #1B3FA0 0%, #3D6CF5 100%)', color: '#fff', textAlign: 'center', position: 'relative', overflow: 'hidden', padding: "80px 56px", margin: "0 auto 80px" }}>
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at top right, rgba(255,255,255,0.2), transparent 50%)', margin: "0px 0px 50px" }} />
        <div style={{ position: 'relative' }}>
          <h2 style={{ fontSize: 'clamp(36px, 5vw, 56px)', letterSpacing: '-0.02em', lineHeight: 1.05, margin: '0 0 16px', color: '#fff', fontWeight: 700 }}>
            Tu gestión, optimizada.<br />Empieza hoy.
          </h2>
          <p style={{ fontSize: 18, color: '#cdd9ff', maxWidth: 560, margin: '0 auto 32px', lineHeight: 1.55 }}>
            Prueba 7 días gratis · Sin compromiso, sin limitaciones y sin facilitar datos de pago.
          </p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <a href="/sign-up/" style={{ padding: '16px 28px', background: '#fff', color: 'var(--brand-primary)', borderRadius: 10, border: 0, fontWeight: 700, fontSize: 16, cursor: 'pointer', fontFamily: 'inherit', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
              Empezar ahora <Icon name="arrow" size={16} color="var(--brand-primary)" />
            </a>
            <a href="#" onClick={openCalendly} style={{ padding: '16px 28px', background: 'rgba(255,255,255,0.1)', color: '#fff', borderRadius: 10, border: '1px solid rgba(255,255,255,0.25)', fontWeight: 600, fontSize: 16, cursor: 'pointer', fontFamily: 'inherit', textDecoration: 'none' }}>
              Solicitar demo
            </a>
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, { Hero, TrustBar, Pillars, PillarTabs, Stats, Integrations, Testimonials, PricingTeaser, FAQ, FinalCTA });