/* global React, LineIcon */

function FinalCTA() {
  return (
    <section className="cta" id="cta" aria-labelledby="cta-title">
      <div className="container cta-grid">
        <div className="cta-text">
          <p className="eyebrow cta-eyebrow">Aloita</p>
          <h2 id="cta-title">Aloita vakuutuskartoitus tänään.</h2>
          <p className="cta-sub">30 minuuttia. Veloitukseton. Ei sitoumusta.</p>
          <p className="cta-body">
            Ensimmäisessä tapaamisessa käymme yrityksesi nykyisen vakuutusturvan läpi ja kerromme rehellisesti,
            mitä kannattaa muuttaa. Tästä eteenpäin etenet itse — tai me etenemme yhdessä.
          </p>
        </div>

        <div className="cta-actions">
          <a href="Yhteystiedot.html#kalenteri" className="btn btn-gold cta-primary">
            Varaa aika kalenterista <LineIcon name="arrow" size={16} />
          </a>
          <div className="cta-alts">
            <a href="tel:+358102742750" className="cta-alt">
              <LineIcon name="phone" size={18} />
              <span>
                <span className="cta-alt-label">Kauniainen</span>
                <span className="cta-alt-num">+358 (0) 10 274 2750</span>
              </span>
            </a>
            <a href="tel:+358102742754" className="cta-alt">
              <LineIcon name="phone" size={18} />
              <span>
                <span className="cta-alt-label">Helsinki</span>
                <span className="cta-alt-num">+358 (0) 10 274 2754</span>
              </span>
            </a>
            <a href="mailto:asiakaspalvelu@arvomeklarit.fi" className="cta-alt">
              <LineIcon name="whatsapp" size={18} />
              <span>
                <span className="cta-alt-label">Sähköposti</span>
                <span className="cta-alt-num">asiakaspalvelu@arvomeklarit.fi</span>
              </span>
            </a>
          </div>
        </div>
      </div>

      <div className="cta-corner" aria-hidden="true">
        <svg viewBox="0 0 600 600" preserveAspectRatio="xMaxYMax slice">
          <circle cx="600" cy="600" r="500" fill="none" stroke="#C9A050" strokeOpacity="0.18" strokeWidth="0.5" />
          <circle cx="600" cy="600" r="340" fill="none" stroke="#C9A050" strokeOpacity="0.14" strokeWidth="0.5" />
          <circle cx="600" cy="600" r="180" fill="none" stroke="#C9A050" strokeOpacity="0.1" strokeWidth="0.5" />
        </svg>
      </div>
    </section>
  );
}

window.FinalCTA = FinalCTA;

if (!document.getElementById("cta-css")) {
  const s = document.createElement("style");
  s.id = "cta-css";
  s.textContent = `
    .cta {
      position: relative;
      background: var(--blue);
      color: #fff;
      padding: clamp(72px, 10vw, 120px) 0;
      overflow: hidden;
    }
    .cta::before {
      content: "";
      position: absolute; inset: 0;
      background: radial-gradient(ellipse at top left, rgba(255, 255, 255, .04), transparent 60%);
      pointer-events: none;
    }
    .cta-grid {
      position: relative; z-index: 2;
      display: grid;
      grid-template-columns: 1fr;
      gap: 48px;
      align-items: end;
    }
    @media (min-width: 960px) {
      .cta-grid { grid-template-columns: 1.3fr 1fr; gap: 80px; }
    }

    .cta-eyebrow { color: rgba(255, 255, 255, .55); }
    .cta-text h2 {
      color: #fff;
      font-size: clamp(34px, 4.4vw, 48px);
      max-width: 16ch;
      margin-top: 8px;
    }
    .cta-sub {
      margin: 24px 0 20px;
      font-size: 19px;
      font-weight: 500;
      color: #fff;
    }
    .cta-body {
      color: rgba(255, 255, 255, .7);
      max-width: 560px;
      font-size: 16px;
      line-height: 1.65;
    }

    .cta-actions {
      display: flex; flex-direction: column;
      gap: 24px;
    }
    .cta-primary {
      align-self: flex-start;
      padding: 18px 32px;
      font-size: 17px;
    }
    .cta-alts {
      display: flex; flex-direction: column;
      gap: 16px;
      padding-top: 24px;
      border-top: 1px solid rgba(255, 255, 255, .12);
    }
    .cta-alt {
      display: inline-flex; align-items: center; gap: 14px;
      color: rgba(255, 255, 255, .85);
      transition: color var(--t);
    }
    .cta-alt:hover { color: #fff; }
    .cta-alt-label {
      display: block;
      font-size: 13px;
      color: rgba(255, 255, 255, .55);
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .cta-alt-num {
      display: block;
      font-family: var(--serif);
      font-weight: 600;
      font-size: 19px;
      letter-spacing: -0.01em;
      margin-top: 2px;
    }

    .cta-corner {
      position: absolute;
      right: -120px; bottom: -120px;
      width: min(600px, 55vw); height: min(600px, 55vw);
      pointer-events: none;
      opacity: .8;
    }
  `;
  document.head.appendChild(s);
}