/* global React, LineIcon */

function CalculatorPromo() {
  return (
    <section className="calc section" id="laskuri" aria-labelledby="calc-title">
      <div className="container calc-grid">
        <div className="calc-text">
          <p className="eyebrow">Säästölaskuri</p>
          <h2 id="calc-title">Paljonko sinun yrityksesi voisi säästää?</h2>
          <p className="lead">
            Vastaa neljään kysymykseen. Saat heti arvion vakuutusmaksusi säästöpotentiaalista —
            ilman yhteystietoja.
          </p>
          <a href="Saastolaskuri.html" className="btn btn-primary calc-btn">
            Aloita laskuri <LineIcon name="arrow" size={16} />
          </a>
          <p className="calc-note">Vie noin 90 sekuntia. Tulos näkyy heti — ei sähköposteja, ei seurantaa.</p>
        </div>

        <a href="Saastolaskuri.html" className="calc-mockup-link" aria-label="Avaa säästölaskuri ja aloita laskenta">
          <div className="calc-mockup" aria-hidden="true">
            <div className="calc-mockup-inner">
              <div className="calc-mockup-head">
                <span className="calc-mockup-step">Vaihe 2 / 4</span>
                <div className="calc-mockup-progress">
                  <span style={{ width: "50%" }} />
                </div>
              </div>

              <p className="calc-mockup-q">Yrityksesi liikevaihto?</p>

              <div className="calc-mockup-options">
                {["Alle 3 M€", "3–10 M€", "10–30 M€", "Yli 30 M€"].map((opt, i) => (
                  <div key={opt} className={"calc-mockup-opt" + (i === 1 ? " is-active" : "")}>
                    <span className="calc-mockup-radio" />
                    {opt}
                  </div>
                ))}
              </div>

              <div className="calc-mockup-result">
                <div className="calc-mockup-result-row">
                  <span>Säästöpotentiaali</span>
                  <span className="tnum calc-mockup-result-num">15 000 – 35 000 €/v</span>
                </div>
                <div className="calc-mockup-bar">
                  <span style={{ width: "62%" }} />
                </div>
              </div>
              <span className="calc-mockup-cta">
                Avaa laskuri <LineIcon name="arrow" size={14} />
              </span>
            </div>
            <div className="calc-mockup-shadow" aria-hidden="true" />
          </div>
        </a>
      </div>
    </section>
  );
}

window.CalculatorPromo = CalculatorPromo;

if (!document.getElementById("calc-css")) {
  const s = document.createElement("style");
  s.id = "calc-css";
  s.textContent = `
    .calc {
      background: var(--bg-2);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }
    .calc-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 56px;
      align-items: center;
    }
    @media (min-width: 960px) {
      .calc-grid { grid-template-columns: 1fr 1fr; gap: 80px; }
    }

    .calc-text { max-width: 560px; }
    .calc-text h2 { margin-top: 8px; }
    .calc-text .lead { margin-top: 20px; color: var(--ink-2); }
    .calc-btn { margin-top: 32px; }
    .calc-note { margin-top: 18px; color: var(--ink-2); font-size: 14px; }

    .calc-mockup-link {
      display: block;
      text-decoration: none;
      color: inherit;
      transition: transform var(--t);
    }
    .calc-mockup-link:hover { transform: translateY(-2px); }
    .calc-mockup-link:hover .calc-mockup-inner {
      box-shadow: 0 32px 56px -28px rgba(31, 41, 55, .35);
      border-color: rgba(201, 160, 80, .5);
    }
    .calc-mockup-link:hover .calc-mockup-cta { color: var(--gold); }
    .calc-mockup-link:hover .calc-mockup-cta .arrow { transform: translateX(3px); }
    .calc-mockup-link:focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 6px;
      border-radius: 14px;
    }
    .calc-mockup-cta {
      display: inline-flex; align-items: center; gap: 6px;
      margin-top: 20px;
      font-size: 13px;
      font-weight: 600;
      color: var(--blue);
      letter-spacing: 0.02em;
    }
    .calc-mockup-cta .arrow { transition: transform var(--t); }
    .calc-mockup {
      position: relative;
    }
    .calc-mockup-inner {
      position: relative;
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 28px;
      z-index: 2;
      box-shadow: 0 24px 48px -28px rgba(31, 41, 55, .25);
    }
    .calc-mockup-shadow {
      position: absolute;
      inset: 16px -16px -16px 16px;
      background: rgba(184, 146, 74, .08);
      border-radius: 12px;
      z-index: 1;
    }
    .calc-mockup-head {
      display: flex; align-items: center; gap: 16px;
      margin-bottom: 24px;
    }
    .calc-mockup-step {
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-2);
      white-space: nowrap;
    }
    .calc-mockup-progress {
      flex: 1; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden;
    }
    .calc-mockup-progress span {
      display: block; height: 100%;
      background: var(--gold);
      border-radius: 2px;
      transition: width 600ms ease-out;
    }
    .calc-mockup-q {
      font-family: var(--serif);
      font-weight: 600;
      font-size: 22px;
      margin: 0 0 20px;
      color: var(--ink);
    }
    .calc-mockup-options {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .calc-mockup-opt {
      display: flex; align-items: center; gap: 10px;
      padding: 14px 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      font-size: 14px;
      color: var(--ink);
      background: var(--bg);
    }
    .calc-mockup-opt.is-active {
      border-color: var(--blue);
      background: rgba(30, 58, 138, .04);
    }
    .calc-mockup-radio {
      width: 14px; height: 14px;
      border-radius: 50%;
      border: 1.5px solid var(--ink-2);
      position: relative;
      flex-shrink: 0;
    }
    .calc-mockup-opt.is-active .calc-mockup-radio {
      border-color: var(--blue);
    }
    .calc-mockup-opt.is-active .calc-mockup-radio::after {
      content: ""; position: absolute; inset: 3px;
      background: var(--blue); border-radius: 50%;
    }

    .calc-mockup-result {
      margin-top: 24px;
      padding-top: 20px;
      border-top: 1px solid var(--line);
    }
    .calc-mockup-result-row {
      display: flex; align-items: baseline; justify-content: space-between;
      font-size: 14px;
      color: var(--ink-2);
      margin-bottom: 10px;
    }
    .calc-mockup-result-num {
      font-family: var(--serif);
      font-weight: 600;
      font-size: 18px;
      color: var(--green);
    }
    .calc-mockup-bar {
      height: 6px; background: var(--line); border-radius: 3px; overflow: hidden;
    }
    .calc-mockup-bar span {
      display: block; height: 100%;
      background: linear-gradient(90deg, var(--gold), var(--green));
      border-radius: 3px;
    }
  `;
  document.head.appendChild(s);
}