// Final CTA + Footer.
function FinalCta() {
  const { Button } = window.OltraSystemsDesignSystem_36063f;
  const { ArrowRight } = window;
  return (
    <section id="cta" data-screen-label="final-cta" style={{ background: "#0d1117", position: "relative", overflow: "hidden" }}>
      {/* GitHub-style neon glow behind the CTA */}
      <div className="gh-glow gh-glow--blue" style={{ width: 640, height: 640, top: "50%", left: "50%", transform: "translate(-50%,-42%)" }} />
      <div className="gh-glow gh-glow--purple" style={{ width: 420, height: 420, top: "-140px", right: "4%", opacity: 0.7 }} />
      <div className="gh-glow gh-glow--green" style={{ width: 340, height: 340, bottom: "-160px", left: "8%", opacity: 0.6 }} />
      <div className="gh-beam" style={{ position: "absolute", top: 0, left: "8%", right: "8%" }} />
      <div style={{ maxWidth: "760px", margin: "0 auto", padding: "clamp(4rem,8vw,7rem) 1.5rem", textAlign: "center", position: "relative", zIndex: 1 }}>
        <window.Reveal>
          <img src={window.assetUrl("markWhite")} alt="" style={{ height: 44, width: "auto", margin: "0 auto 2rem", display: "block", opacity: 0.9 }} />
          <h2 style={{ margin: 0, fontSize: "clamp(2rem,4.5vw,3.25rem)", fontWeight: 800, lineHeight: 1.08, letterSpacing: "-0.03em", color: "#f0f6fc" }}>
            Empieza por saber <span className="gh-gradient-text">cuánto estás perdiendo</span>.
          </h2>
          <p style={{ margin: "1.5rem auto 0", maxWidth: "40rem", fontSize: "1.125rem", lineHeight: 1.6, color: "#c9d1d9" }}>
            El Diagnóstico Express de Fugas Dentales es gratis y te muestra exactamente dónde pierdes pacientes, tiempo y dinero. Sin compromisos. Sin humo.
          </p>
          <div style={{ marginTop: "2.25rem" }}>
            <Button variant="primary" size="lg" href={window.CALENDLY} target="_blank" rel="noopener noreferrer" iconRight={<ArrowRight size={18} />}>Solicitar Diagnóstico Express — Gratis</Button>
          </div>
          <p style={{ margin: "1.25rem 0 0", fontSize: "0.875rem", color: "#8b949e" }}>
            Resultado en 48–72h · Loom personalizado · Mini informe accionable
          </p>
        </window.Reveal>
      </div>
    </section>
  );
}

function Footer() {
  const { Instagram } = window;
  return (
    <footer style={{ background: "#0d1117", borderTop: "1px solid rgba(110,118,129,0.1)", padding: "3.5rem 1.5rem 2.5rem" }}>
      <div style={{ maxWidth: "1200px", margin: "0 auto" }}>
        <div className="foot-grid" style={{ display: "flex", flexWrap: "wrap", justifyContent: "space-between", gap: "2rem", paddingBottom: "2.5rem", borderBottom: "1px solid rgba(110,118,129,0.1)" }}>
          <div style={{ maxWidth: "22rem" }}>
            <img src={window.assetUrl("logoWhite")} alt="Oltra Systems" style={{ height: 24, width: "auto", marginBottom: "1rem" }} />
            <p style={{ margin: 0, fontSize: "0.9375rem", color: "#8b949e", lineHeight: 1.5 }}>Más pacientes. Menos caos operativo.</p>
          </div>
          <div style={{ display: "flex", gap: "3.5rem", flexWrap: "wrap" }}>
            <div>
              <div style={{ fontSize: "0.75rem", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: "#8b949e", marginBottom: "0.875rem" }}>Contacto</div>
              <a href="mailto:contacto@oltrasystems.com" style={{ display: "block", fontSize: "0.9375rem", color: "#c9d1d9", textDecoration: "none", marginBottom: "0.5rem" }}>contacto@oltrasystems.com</a>
              <a href="https://oltrasystems.com" style={{ display: "block", fontSize: "0.9375rem", color: "#c9d1d9", textDecoration: "none" }}>oltrasystems.com</a>
            </div>
            <div>
              <div style={{ fontSize: "0.75rem", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: "#8b949e", marginBottom: "0.875rem" }}>Social</div>
              <a href="#" style={{ display: "inline-flex", alignItems: "center", gap: "0.5rem", fontSize: "0.9375rem", color: "#c9d1d9", textDecoration: "none" }}>
                <Instagram size={17} /> Instagram
              </a>
            </div>
          </div>
        </div>
        <div style={{ paddingTop: "1.75rem", fontSize: "0.8125rem", color: "#8b949e" }}>
          © 2025 Oltra Systems. Todos los derechos reservados.
        </div>
      </div>
    </footer>
  );
}
window.FinalCta = FinalCta;
window.Footer = Footer;