// Final CTA and footer
function FinalCTA() {
  return (
    <section id="cta">
      <div className="final-cta">
        <div className="inner">
          <div style={{display:'flex', justifyContent:'center'}}>
            <div className="eyebrow" style={{background:'rgba(91,227,227,0.12)', borderColor:'rgba(91,227,227,0.2)', color:'#5BE3E3'}}>
              <span className="dot" style={{background:'#5BE3E3', boxShadow:'0 0 0 4px rgba(91,227,227,0.2)'}}/>
              Demo personalizada · 30 min
            </div>
          </div>
          <h2 style={{marginTop:22}}>Moderniza tu clínica dental hoy</h2>
          <p>Hablamos con tu equipo, configuramos un entorno de prueba con tus datos y te enseñamos exactamente cómo DentiaCloud encaja en tu día a día.</p>
          <div style={{display:'flex', gap:12, justifyContent:'center', marginTop:36, flexWrap:'wrap'}}>
            <a className="btn btn-grad btn-lg" href="#">Agenda una demo <I.Arrow size={14}/></a>
            <a className="btn btn-lg" href="#" style={{background:'rgba(255,255,255,0.08)', border:'1px solid rgba(255,255,255,0.18)', color:'#fff', backdropFilter:'blur(10px)'}}>Hablar con ventas</a>
          </div>
          <div style={{display:'flex', gap:32, justifyContent:'center', marginTop:36, fontSize:13, color:'rgba(255,255,255,0.65)', flexWrap:'wrap'}}>
            <div style={{display:'flex', alignItems:'center', gap:8}}><I.CheckSm size={10}/>14 días de prueba gratuita</div>
            <div style={{display:'flex', alignItems:'center', gap:8}}><I.CheckSm size={10}/>Sin tarjeta de crédito</div>
            <div style={{display:'flex', alignItems:'center', gap:8}}><I.CheckSm size={10}/>Migración incluida</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <div className="container">
        <div className="footer-grid">
          <div className="foot-col">
            <div className="brand" style={{marginBottom:16}}>
              <div className="brand-mark"><I.Logo size={16}/></div>
              <span>DentiaCloud</span>
            </div>
            <p style={{fontSize:14, maxWidth:300}}>
              La plataforma todo-en-uno para clínicas dentales modernas. Diseñada en Madrid, para España y Europa.
            </p>
            <div className="foot-social" style={{marginTop:20}}>
              <a href="#" aria-label="Twitter"><I.Twitter/></a>
              <a href="#" aria-label="LinkedIn"><I.LinkedIn/></a>
              <a href="#" aria-label="Instagram"><I.Insta/></a>
              <a href="#" aria-label="YouTube"><I.YT/></a>
            </div>
          </div>

          <div className="foot-col">
            <h4>Producto</h4>
            <a href="#features">Agenda</a>
            <a href="#features">Pacientes</a>
            <a href="#features">Facturación</a>
            <a href="#features">WhatsApp</a>
            <a href="#features">Multi-clínica</a>
            <a href="#features">API</a>
          </div>
          <div className="foot-col">
            <h4>Empresa</h4>
            <a href="#">Sobre nosotros</a>
            <a href="#testi">Clientes</a>
            <a href="#">Blog</a>
            <a href="#">Empleo</a>
            <a href="#">Partners</a>
            <a href="#">Contacto</a>
          </div>
          <div className="foot-col">
            <h4>Recursos</h4>
            <a href="#">Centro de ayuda</a>
            <a href="#">Academia</a>
            <a href="#">Migración</a>
            <a href="#">Roadmap</a>
            <a href="#">Estado del sistema</a>
            <a href="#">Changelog</a>
          </div>
          <div className="foot-col">
            <h4>Legal</h4>
            <a href="#">Términos</a>
            <a href="#">Privacidad</a>
            <a href="#">RGPD</a>
            <a href="#">Aviso legal</a>
            <a href="#">Cookies</a>
            <a href="#">Seguridad</a>
          </div>
        </div>

        <div className="foot-meta">
          <div>© 2026 DentiaCloud SL · Calle Velázquez 17, 3º · 28001 Madrid · CIF B-99342021</div>
          <div className="row gap-16">
            <div style={{display:'flex', alignItems:'center', gap:8}}><span style={{width:8, height:8, borderRadius:'50%', background:'var(--green)', boxShadow:'0 0 0 3px rgba(22,165,113,0.2)'}}/>Todos los sistemas operativos</div>
            <div>ES · 🇪🇸</div>
          </div>
        </div>
      </div>
    </footer>
  );
}

window.FinalCTA = FinalCTA;
window.Footer = Footer;