// Closing scene. The CTA owns the last full screen and dissolves into the footer:
// the rendered field carries the horizon, and one light seam joins them.
const FC_DOTS = [[14, 26, 0], [26, 62, 1.4], [42, 18, 2.6], [63, 70, 0.8], [78, 34, 3.2], [88, 58, 2]];

function FinalCta() {
  return (
    <section className="fc" id="contacto">
      <span className="fc-plate" />
      {FC_DOTS.map(([l, t, d]) => (
        <span className="fc-dot" key={l + '-' + t} style={{ left: l + '%', top: t + '%', animationDelay: d + 's' }} />
      ))}
      <div className="lp-wrap fc-inner">
        <span className="fc-eyebrow">Siguiente paso</span>
        <h2 className="fc-h">
          Si existe un <em>proceso repetitivo</em><br />
          dentro de tu empresa,<br />
          probablemente puede <em>funcionar mejor.</em>
        </h2>
        <p className="fc-sub">
          Cuéntanos qué está consumiendo tiempo, dinero o capacidad operativa.<br />
          Nosotros identificamos qué automatizar, integrar o construir.
        </p>
        <div className="fc-actions">
          <a className="fc-btn" href="#contacto">
            <span className="eg-icon fc-spark">auto_awesome</span>
            Analicemos tu operación.
            <span className="eg-icon fc-arrow">north_east</span>
          </a>
          <a className="fc-btn2" href="mailto:hola@estebanguzman.com">
            <span className="eg-icon">mail</span>Escribir directamente
          </a>
        </div>
        <div className="fc-status">
          <span><i style={{ color: 'var(--ion-400)' }} />Diagnóstico inicial de 45 min</span>
          <span><i style={{ color: 'var(--signal-400)' }} />Sin compromiso</span>
          <span><i style={{ color: 'var(--flux-400)' }} />Respuesta en 24 h</span>
        </div>
      </div>
      <span className="fc-seam" />
    </section>
  );
}

Object.assign(window, { FinalCta });