// ─────────────────────────────────────────────────────────────
// Industries — tabs
// ─────────────────────────────────────────────────────────────
function Industries() {
  const inds = [
    { id: 'moda',      glyph: '👗', label: 'Moda y Ropa',
      agents: ['Marketing', 'Inventario', 'Diseño Web', 'Logística'],
      task: 'Generar 12 posts mensuales con catálogo nuevo y enviar a aprobación.',
      result: 'Aumento del 38% en alcance orgánico en los primeros 60 días.' },
    { id: 'comida',    glyph: '🍕', label: 'Alimentos y Bebidas',
      agents: ['Marketing', 'Atención', 'Logística', 'Inventario'],
      task: 'Programar promociones por horario y coordinar repartos en zona.',
      result: 'Ticket promedio +24% y tiempo de respuesta en chat ≈ 1 min.' },
    { id: 'tech',      glyph: '💻', label: 'Software y Tecnología',
      agents: ['Marketing', 'Investigación', 'Analítica', 'Atención'],
      task: 'Detectar competidores nuevos y redactar comparativas SEO semanales.',
      result: 'Posicionamiento en top-3 para 14 keywords técnicas long-tail.' },
    { id: 'hogar',     glyph: '🏠', label: 'Hogar y Decoración',
      agents: ['Marketing', 'Inventario', 'Diseño Web'],
      task: 'Enriquecer 400 productos con descripciones SEO y fotos optimizadas.',
      result: 'CTR de fichas de producto subió de 1.8% a 4.2%.' },
    { id: 'belleza',   glyph: '💄', label: 'Belleza y Cuidado',
      agents: ['Marketing', 'Atención', 'Analítica'],
      task: 'Personalizar recomendaciones por tipo de piel y enviar al cliente.',
      result: 'Conversión en email +52% versus campañas masivas previas.' },
    { id: 'educacion', glyph: '📚', label: 'Educación y Cursos',
      agents: ['Marketing', 'Atención', 'Diseño Web', 'Analítica'],
      task: 'Crear secuencias de email post-inscripción con seguimiento por cohorte.',
      result: 'Tasa de finalización de cursos del 31% al 58%.' },
  ];
  const [active, setActive] = React.useState(inds[0].id);
  const cur = inds.find(i => i.id === active);
  return (
    <section className="section" id="casos-uso" data-screen-label="Casos de uso">
      <div className="container">
        <div style={{ textAlign:'center', marginBottom: 40 }}>
          <div className="eyebrow"><span className="dot"/> Casos de uso</div>
          <h2 className="h-section" style={{ marginTop: 14 }}>Para cualquier tipo de negocio.</h2>
        </div>

        <div style={{
          display:'flex', flexWrap:'wrap', gap: 8, justifyContent:'center', marginBottom: 28,
        }}>
          {inds.map(i => (
            <button key={i.id} onClick={()=>setActive(i.id)} style={{
              padding:'10px 16px', borderRadius: 999,
              background: active === i.id ? 'var(--brand-primary)' : '#fff',
              color: active === i.id ? '#fff' : 'var(--ink)',
              border: '1px solid ' + (active === i.id ? 'var(--brand-primary)' : 'var(--line-strong)'),
              fontSize: 14, fontWeight: 600,
              transition: 'all .15s',
              display:'inline-flex', alignItems:'center', gap: 8,
            }}>
              <span style={{ fontSize: 16 }}>{i.glyph}</span>{i.label}
            </button>
          ))}
        </div>

        <div className="card" style={{
          padding: 0, borderRadius: 22, overflow:'hidden',
          display:'grid', gridTemplateColumns:'minmax(0, 1fr) minmax(0, 1.2fr)',
        }}>
          <div style={{
            background: 'var(--bg-subtle)',
            padding: 36,
            display:'flex', flexDirection:'column', justifyContent:'center', gap: 16,
            minHeight: 320,
          }}>
            <div style={{ fontSize: 72, lineHeight: 1, marginBottom: 4 }}>{cur.glyph}</div>
            <h3 style={{ fontSize: 26, letterSpacing:'-0.02em' }}>{cur.label}</h3>
            <p className="text-muted" style={{ fontSize: 14 }}>
              Tu Director General activa automáticamente los colaboradores correctos para tu industria. Tú apruebas, ellos ejecutan.
            </p>
          </div>
          <div style={{ padding: 36, display:'flex', flexDirection:'column', gap: 22 }}>
            <div>
              <div style={{ fontSize: 11, fontWeight: 700, color:'var(--ink-mute)', textTransform:'uppercase', letterSpacing:'.08em', marginBottom: 10 }}>
                Colaboradores activados
              </div>
              <div style={{ display:'flex', flexWrap:'wrap', gap: 6 }}>
                {cur.agents.map(a => (
                  <span key={a} style={{
                    fontSize: 12.5, fontWeight: 600,
                    background:'color-mix(in oklab, var(--brand-secondary), white 90%)',
                    color:'var(--brand-primary)',
                    padding:'5px 11px', borderRadius: 999,
                  }}>{a}</span>
                ))}
              </div>
            </div>
            <div>
              <div style={{ fontSize: 11, fontWeight: 700, color:'var(--ink-mute)', textTransform:'uppercase', letterSpacing:'.08em', marginBottom: 8 }}>
                Tarea automatizada
              </div>
              <p style={{ fontSize: 15.5, lineHeight: 1.5 }}>{cur.task}</p>
            </div>
            <div>
              <div style={{ fontSize: 11, fontWeight: 700, color:'var(--success)', textTransform:'uppercase', letterSpacing:'.08em', marginBottom: 6 }}>
                Resultado típico
              </div>
              <p style={{ fontSize: 15.5, fontWeight: 600, color:'var(--brand-primary)', lineHeight: 1.4 }}>{cur.result}</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Comparison
// ─────────────────────────────────────────────────────────────
function Comparison({ theme }) {
  const rows = [
    ['Equipo completo de especialistas', 'yes', 'no', 'yes-exp', 'no'],
    ['Comunicación entre áreas',         'yes', 'no', 'yes',     'no'],
    ['Disponible 24/7',                  'yes', 'yes','no',      'partial'],
    ['Aprende de tu negocio',            'yes', 'no', 'yes',     'no'],
    ['Costo mensual accesible',          'yes', 'yes','no',      'partial'],
    ['Todo integrado',                   'yes', 'no', 'partial', 'no'],
  ];
  const cols = [theme.brandName, 'Chatbot básico', 'Contratar equipo', 'Herramientas separadas'];
  const cell = (k) => {
    if (k === 'yes')     return <span style={{ color:'var(--success)' }}><Icon.check/></span>;
    if (k === 'yes-exp') return <span style={{ color:'var(--success)' }}><span style={{ display:'inline-flex', alignItems:'center', gap: 4 }}><Icon.check/> <span style={{ fontSize: 11, color:'var(--ink-mute)', fontWeight: 500 }}>costoso</span></span></span>;
    if (k === 'partial') return <span style={{ color:'var(--warn)' }}><Icon.alert/></span>;
    return <span style={{ color:'var(--ink-mute)', opacity:.5 }}><Icon.x/></span>;
  };
  return (
    <section className="section hex-pattern subtle" data-screen-label="Comparativa">
      <div className="container">
        <div style={{ textAlign:'center', marginBottom: 40 }}>
          <div className="eyebrow"><span className="dot"/> Comparativa</div>
          <h2 className="h-section" style={{ marginTop: 14 }}>No es otro chatbot. Es tu empresa completa.</h2>
        </div>
        <div style={{
          background:'#fff', borderRadius: 22, padding: 8, border:'1px solid var(--line)',
          boxShadow: 'var(--shadow-sm)', overflowX:'auto',
        }}>
          <table style={{
            width:'100%', borderCollapse: 'separate', borderSpacing: 0,
            minWidth: 720,
          }}>
            <thead>
              <tr>
                <th style={{ padding: '18px 20px', textAlign:'left', fontWeight: 500, fontSize: 13, color:'var(--ink-mute)' }}>Característica</th>
                {cols.map((c, i) => (
                  <th key={c} style={{
                    padding: '18px 16px', textAlign:'center',
                    fontWeight: 700, fontSize: 14,
                    color: i === 0 ? 'var(--brand-primary)' : 'var(--ink)',
                    background: i === 0 ? 'color-mix(in oklab, var(--brand-primary), white 94%)' : 'transparent',
                    borderRadius: i === 0 ? '14px 14px 0 0' : 0,
                    position:'relative',
                  }}>
                    {i === 0 && (
                      <div style={{
                        position:'absolute', top: -10, left:'50%', transform:'translateX(-50%)',
                        background: 'var(--brand-accent)', color:'#fff',
                        fontSize: 10, fontWeight: 700, padding:'3px 9px', borderRadius: 999,
                        textTransform:'uppercase', letterSpacing:'.06em',
                      }}>Recomendado</div>
                    )}
                    {c}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {rows.map((r, ri) => (
                <tr key={ri} style={{ borderTop:'1px solid var(--line)' }}>
                  <td style={{ padding:'14px 20px', fontSize: 14, fontWeight: 500, borderTop:'1px solid var(--line)' }}>{r[0]}</td>
                  {r.slice(1).map((v, ci) => (
                    <td key={ci} style={{
                      padding:'14px 16px', textAlign:'center', borderTop:'1px solid var(--line)',
                      background: ci === 0 ? 'color-mix(in oklab, var(--brand-primary), white 96%)' : 'transparent',
                    }}>{cell(v)}</td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Testimonials
// ─────────────────────────────────────────────────────────────
function Testimonials({ theme }) {
  const items = [
    { name: 'María Ortiz',    biz: 'Boutique Lina · Moda',         color: '#7C3AED', initial: 'M',
      quote: 'Dejé de pasar mis noches respondiendo Instagram. Mi colaborador de atención lo hace mejor que yo y los clientes lo aman.' },
    { name: 'Diego Velasco',  biz: 'Tostadora Cumbres · Café',     color: theme.accent, initial: 'D',
      quote: 'Configuré la tienda en una tarde. A los tres días tenía 7 pedidos sin haber hecho una sola publicación a mano.' },
    { name: 'Sofía Aranda',   biz: 'Pixel Studio · Tecnología',    color: theme.secondary, initial: 'S',
      quote: 'Es como tener un equipo de 8 personas por menos que un freelancer. Y nunca se enferman ni piden vacaciones.' },
  ];
  return (
    <section className="section" data-screen-label="Testimonios">
      <div className="container">
        <div style={{ textAlign:'center', marginBottom: 48 }}>
          <div className="eyebrow"><span className="dot"/> Early adopters</div>
          <h2 className="h-section" style={{ marginTop: 14 }}>Lo que dicen nuestros primeros usuarios.</h2>
        </div>
        <div className="grid" style={{ gridTemplateColumns:'repeat(auto-fit, minmax(280px, 1fr))' }}>
          {items.map((t, i) => (
            <div key={i} className="card" style={{ display:'flex', flexDirection:'column', gap: 18 }}>
              <div style={{ display:'flex', gap: 2, color:'var(--brand-accent)' }}>
                {[0,1,2,3,4].map(s => (
                  <svg key={s} width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.9 6.9 7.1.6-5.4 4.7 1.6 7-6.2-3.8L5.8 21l1.6-7L2 9.5l7.1-.6L12 2z"/></svg>
                ))}
              </div>
              <p style={{ fontSize: 16.5, lineHeight: 1.5, color:'var(--ink)' }}>
                <span style={{ color:'var(--brand-primary)', fontWeight: 700 }}>“</span>
                {t.quote}
                <span style={{ color:'var(--brand-primary)', fontWeight: 700 }}>”</span>
              </p>
              <div style={{ display:'flex', alignItems:'center', gap: 12, marginTop: 'auto' }}>
                <div style={{
                  width: 40, height: 40, borderRadius: 999,
                  background: t.color, color:'#fff',
                  display:'flex', alignItems:'center', justifyContent:'center',
                  fontWeight: 700, fontSize: 16,
                }}>{t.initial}</div>
                <div>
                  <div style={{ fontWeight: 600, fontSize: 14 }}>{t.name}</div>
                  <div style={{ fontSize: 12.5, color:'var(--ink-mute)' }}>{t.biz}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Pricing
// ─────────────────────────────────────────────────────────────
function Pricing() {
  const plans = [
    { name:'Gratis', price:'$0', per:'/mes', cta:'Empieza gratis', highlight: false,
      includes: ['Director General + 2 colaboradores', 'Tienda básica con subdominio', 'Tokens iniciales incluidos', 'Soporte por chat'] },
    { name:'Profesional', price:'Próximamente', per:'', cta:'Avísame cuando salga', highlight: true,
      includes: ['Colaboradores ilimitados', 'Dominio propio + app móvil', 'Soporte prioritario', 'Personalización white-label total'] },
    { name:'Tokens adicionales', price:'Por consumo', per:'', cta:'Ver detalles', highlight: false,
      includes: ['Para cualquier plan', 'Sin compromiso mensual', 'Compras a partir de $5', 'Tarifa transparente por uso'] },
  ];
  return (
    <section className="section hex-pattern subtle" id="precios" data-screen-label="Precios">
      <div className="container">
        <div style={{ textAlign:'center', marginBottom: 48 }}>
          <div className="eyebrow"><span className="dot"/> Precios</div>
          <h2 className="h-section" style={{ marginTop: 14 }}>Empieza gratis. Crece cuando quieras.</h2>
        </div>
        <div className="grid" style={{ gridTemplateColumns:'repeat(auto-fit, minmax(280px, 1fr))', alignItems:'stretch' }}>
          {plans.map((p, i) => (
            <div key={i} className="card" style={{
              padding: 28,
              border: p.highlight ? '1.5px solid var(--brand-primary)' : '1px solid var(--line)',
              background: p.highlight ? 'linear-gradient(180deg, color-mix(in oklab, var(--brand-primary), white 96%), #fff)' : '#fff',
              position:'relative',
              boxShadow: p.highlight ? 'var(--shadow)' : 'var(--shadow-sm)',
              display:'flex', flexDirection:'column', gap: 14,
            }}>
              {p.highlight && (
                <span style={{
                  position:'absolute', top: -12, left: 28,
                  background:'var(--brand-accent)', color:'#fff',
                  fontSize: 10.5, fontWeight: 700, padding:'4px 10px', borderRadius: 999,
                  textTransform:'uppercase', letterSpacing:'.06em',
                }}>Próximamente</span>
              )}
              <h3 className="h-card" style={{ fontSize: 20 }}>{p.name}</h3>
              <div style={{ display:'flex', alignItems:'baseline', gap: 6 }}>
                <span style={{ fontSize: 36, fontWeight: 800, letterSpacing:'-0.03em', color:'var(--brand-primary)' }}>{p.price}</span>
                <span style={{ color:'var(--ink-mute)' }}>{p.per}</span>
              </div>
              <ul style={{ listStyle:'none', padding: 0, margin: 0, display:'flex', flexDirection:'column', gap: 10 }}>
                {p.includes.map(it => (
                  <li key={it} style={{ display:'flex', gap: 8, fontSize: 14 }}>
                    <span style={{ color:'var(--brand-secondary)', flexShrink: 0, marginTop: 2 }}><Icon.check/></span>{it}
                  </li>
                ))}
              </ul>
              <a href="#registro" className={p.highlight ? 'btn btn-primary' : 'btn btn-outline'} style={{ justifyContent:'center', marginTop: 6 }}>
                {p.cta} <Icon.arrow/>
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// FAQ — accordion
// ─────────────────────────────────────────────────────────────
function FAQ() {
  const q = [
    ['¿Necesito saber de tecnología para usar AI Company?',
     'No. Si sabes describir tu negocio, ya sabes usarlo. La configuración inicial son preguntas en lenguaje natural — sin código, sin integraciones manuales.'],
    ['¿Qué pasa si un colaborador comete un error?',
     'Por defecto cualquier acción crítica (publicación, gasto, respuesta a cliente) pasa por tu aprobación. Puedes ajustar el nivel de autonomía de cada colaborador por separado.'],
    ['¿Los colaboradores pueden publicar en mis redes sin que yo lo apruebe?',
     'Solo si tú lo permites. Por defecto siempre pasan por aprobación; puedes activar autonomía total cuando ya confías en cada uno.'],
    ['¿Cómo protegen mis datos y los de mis clientes?',
     'Cifrado en tránsito y en reposo, aislamiento por cliente, y un colaborador de Seguridad dedicado que monitorea accesos las 24 horas. Cumplimos GDPR.'],
    ['¿Puedo agregar agentes que no están en la lista?',
     'Sí. Tu Director General puede contratar nuevos colaboradores especializados sobre la marcha — finanzas, recursos humanos, lo que tu negocio necesite.'],
    ['¿En qué idiomas opera el sistema?',
     'Español, inglés y portugués hoy. Otros idiomas en hoja de ruta. Cada colaborador puede atender en varios idiomas simultáneamente.'],
    ['¿Cómo se diferencia de contratar un asistente virtual?',
     'Un asistente virtual hace tareas. AI Company opera tu empresa: 9 especialistas que se coordinan entre sí, no una sola persona apagando incendios.'],
    ['¿Qué tan rápido puedo tener mi tienda lista?',
     'En la mayoría de los casos, en un día. Tu Director recopila la información esencial, contrata a los colaboradores y arma una tienda funcional con tus productos.'],
  ];
  const printing = typeof document !== 'undefined' && document.body.classList.contains('printing');
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section" data-screen-label="FAQ">
      <div className="container" style={{ maxWidth: 880 }}>
        <div style={{ textAlign:'center', marginBottom: 40 }}>
          <div className="eyebrow"><span className="dot"/> FAQ</div>
          <h2 className="h-section" style={{ marginTop: 14 }}>Preguntas frecuentes.</h2>
        </div>
        <div style={{ display:'flex', flexDirection:'column', gap: 10 }}>
          {q.map(([question, answer], i) => {
            const isOpen = printing || open === i;
            return (
              <div key={i} style={{
                border:'1px solid var(--line)', borderRadius: 14, overflow:'hidden',
                background:'#fff',
                boxShadow: isOpen ? 'var(--shadow-sm)' : 'none',
                transition: 'box-shadow .2s',
              }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                  width:'100%', textAlign:'left',
                  padding:'18px 22px',
                  display:'flex', alignItems:'center', justifyContent:'space-between', gap: 16,
                  fontSize: 16, fontWeight: 600,
                }}>
                  <span>{question}</span>
                  <span style={{
                    transition:'transform .25s',
                    transform: isOpen ? 'rotate(180deg)' : 'rotate(0)',
                    color:'var(--brand-primary)', flexShrink: 0,
                  }}><Icon.chevron/></span>
                </button>
                <div style={{
                  maxHeight: isOpen ? (printing ? 'none' : 220) : 0,
                  overflow:'hidden', transition: 'max-height .35s ease',
                }}>
                  <div style={{ padding:'0 22px 20px', color:'var(--ink-soft)', fontSize: 15, lineHeight: 1.55 }}>
                    {answer}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// CTA Final
// ─────────────────────────────────────────────────────────────
function CTAFinal() {
  return (
    <section className="section hex-pattern" data-screen-label="CTA Final" style={{ color:'#fff', textAlign:'center', paddingBlock: 96 }}>
      <div className="container" style={{ maxWidth: 760 }}>
        <h2 className="h-section" style={{ color:'#fff', fontSize: 'clamp(28px, 4vw, 48px)' }}>
          Tu competencia ya está automatizando. <br/>
          <span style={{ color:'var(--brand-accent)' }}>¿Tú cuándo empiezas?</span>
        </h2>
        <p className="lead" style={{ color:'rgba(255,255,255,.78)', margin:'18px auto 30px' }}>
          Únete a los primeros negocios en tener un equipo de IA trabajando para ellos.
        </p>
        <a href="#registro" className="btn btn-primary btn-lg" style={{ padding:'18px 32px', fontSize: 17 }}>
          Crear mi empresa con IA — Es gratis <Icon.arrow/>
        </a>
        <div style={{ marginTop: 16, fontSize: 12, color:'rgba(255,255,255,.55)' }}>
          Sin tarjeta · Sin permanencia · Cancela cuando quieras
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Footer
// ─────────────────────────────────────────────────────────────
function SiteFooter({ theme }) {
  const cols = [
    { title: 'Producto', items: ['Cómo funciona', 'Colaboradores', 'Precios', 'Demo', 'Casos de uso'] },
    { title: 'Empresa',  items: ['Sobre nosotros', 'Blog', 'Contacto', 'Prensa', 'Carreras'] },
    { title: 'Legal',    items: ['Privacidad', 'Términos', 'Cookies', 'Seguridad', 'GDPR'] },
  ];
  return (
    <footer style={{ background:'#0A1428', color:'rgba(255,255,255,.7)', padding:'56px 0 24px' }} data-screen-label="Footer">
      <div className="container">
        <div style={{ display:'grid', gridTemplateColumns:'minmax(0, 2fr) repeat(3, minmax(0, 1fr))', gap: 40 }}>
          <div>
            <div className="brand" style={{ color:'#fff' }}>
              <span className="glyph"/>
              <span className="name">{theme.brandName}</span>
            </div>
            <p style={{ marginTop: 16, fontSize: 13.5, maxWidth: '32ch', color:'rgba(255,255,255,.65)' }}>
              Plataforma SaaS para convertir cualquier negocio en una empresa autónoma operada por colaboradores de IA.
            </p>
            <div style={{ marginTop: 16, display:'flex', gap: 10 }}>
              {['IG','X','LI','YT'].map(s => (
                <a key={s} href="#" style={{
                  width: 34, height: 34, borderRadius: 8,
                  background:'rgba(255,255,255,.06)', border:'1px solid rgba(255,255,255,.08)',
                  display:'inline-flex', alignItems:'center', justifyContent:'center',
                  fontSize: 11, fontWeight: 600, color:'#fff',
                }}>{s}</a>
              ))}
            </div>
          </div>
          {cols.map(c => (
            <div key={c.title}>
              <div style={{ fontSize: 12, fontWeight: 700, color:'#fff', textTransform:'uppercase', letterSpacing:'.08em', marginBottom: 14 }}>{c.title}</div>
              <ul style={{ listStyle:'none', padding: 0, margin: 0, display:'flex', flexDirection:'column', gap: 10 }}>
                {c.items.map(it => (
                  <li key={it}><a href="#" style={{ fontSize: 13.5, color:'rgba(255,255,255,.7)' }}>{it}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 40, padding: '16px 20px',
          background:'rgba(232,98,10,.1)', border:'1px solid rgba(232,98,10,.2)',
          borderRadius: 12, color:'rgba(255,255,255,.85)', fontSize: 13, lineHeight: 1.5,
          display:'flex', alignItems:'center', gap: 12, flexWrap:'wrap',
        }}>
          <span style={{
            background:'var(--brand-accent)', color:'#fff',
            padding:'4px 10px', borderRadius: 999,
            fontSize: 11, fontWeight: 700, letterSpacing:'.06em', textTransform:'uppercase',
            display:'inline-flex', alignItems:'center', gap: 6, flexShrink: 0,
          }}>
            <span className="pulse-dot"/> Operado por AI Company
          </span>
          <span>
            Este sitio es operado por AI Company. Nuestros propios colaboradores gestionan el contenido, las campañas y la atención al cliente de esta página. <a href="#" style={{ color:'var(--brand-accent)', fontWeight: 600 }}>Léelo aquí →</a>
          </span>
        </div>

        <div style={{
          marginTop: 28, paddingTop: 24, borderTop:'1px solid rgba(255,255,255,.08)',
          display:'flex', justifyContent:'space-between', alignItems:'center', gap: 16,
          fontSize: 12.5, color:'rgba(255,255,255,.5)', flexWrap:'wrap',
        }}>
          <span>© 2026 AI Company. Todos los derechos reservados.</span>
          <span>Hecho con colaboradores IA · Disponible en ES · EN · PT</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Industries, Comparison, Testimonials, Pricing, FAQ, CTAFinal, SiteFooter });