/* global React, LineIcon */

function CustomerStory() {
  return (
    <section className="story section" id="tarina" aria-labelledby="story-title">
      <div className="container">
        <div className="story-card">
          <div className="story-bar" aria-hidden="true" />

          <div className="story-content">
            <p className="eyebrow story-eyebrow">Asiakastarina · Premium Case</p>

            <blockquote className="story-quote">
              <span className="story-mark" aria-hidden="true">“</span>
              <p id="story-title">
                Olemme vaihtaneet talousjohtajaa kahdesti viiden vuoden aikana.
                Matti on pysynyt — siinä on jatkuvuutta, jota ei vakuutusyhtiöltä saa.
              </p>
            </blockquote>

            <div className="story-attr">
              <div className="story-avatar" aria-hidden="true">
                <span>TJ</span>
              </div>
              <div>
                <p className="story-name">Toimitusjohtaja</p>
                <p className="story-role">Pohjoismainen kuljetuskonserni · anonymisoitu</p>
              </div>
            </div>

            <div className="story-stats">
              <div className="story-stat">
                <div className="story-stat-num tnum">28 %</div>
                <div className="story-stat-label">Säästö vakuutusmaksuissa</div>
              </div>
              <div className="story-stat-divider" />
              <div className="story-stat">
                <div className="story-stat-num tnum">47 000 €</div>
                <div className="story-stat-label">Vuosittainen säästö</div>
              </div>
              <div className="story-stat-divider" />
              <div className="story-stat">
                <div className="story-stat-num tnum">5 v</div>
                <div className="story-stat-label">Yhteistyön kesto</div>
              </div>
            </div>

            <a href="Asiakastarinat.html#case-kuljetus-oy" className="linkish story-link">
              Lue koko tarina <LineIcon name="arrow" size={14} />
            </a>

            <p className="story-disclaimer">
              Esimerkit perustuvat asiakaskuntamme keskimääräisiin tuloksiin.
              Yksittäisten yritysten nimet on muutettu vakuutusalan
              luottamuksellisuusvaatimusten mukaisesti.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

window.CustomerStory = CustomerStory;

if (!document.getElementById("story-css")) {
  const s = document.createElement("style");
  s.id = "story-css";
  s.textContent = `
    .story { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .story-card {
      position: relative;
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 48px 40px 48px 56px;
      max-width: 980px;
      margin: 0 auto;
      box-shadow: 0 24px 48px -32px rgba(31, 41, 55, .2);
    }
    @media (min-width: 720px) {
      .story-card { padding: 64px 64px 56px 80px; }
    }

    .story-bar {
      position: absolute;
      left: 0; top: 32px; bottom: 32px;
      width: 3px;
      background: var(--gold);
      border-radius: 2px;
    }

    .story-eyebrow { color: var(--gold); margin-bottom: 28px; }

    .story-quote {
      margin: 0 0 32px;
      position: relative;
    }
    .story-mark {
      position: absolute;
      left: -8px; top: -32px;
      font-family: var(--serif);
      font-size: 88px;
      line-height: 1;
      color: var(--gold);
      opacity: .5;
    }
    .story-quote p {
      font-family: var(--serif);
      font-weight: 500;
      font-size: clamp(22px, 2.6vw, 30px);
      line-height: 1.35;
      letter-spacing: -0.015em;
      color: var(--ink);
      margin: 0;
      max-width: 720px;
    }

    .story-attr {
      display: flex; align-items: center; gap: 14px;
      margin-bottom: 40px;
    }
    .story-avatar {
      width: 44px; height: 44px;
      border-radius: 50%;
      background: var(--bg-2);
      border: 1px solid var(--line);
      display: inline-flex; align-items: center; justify-content: center;
      font-family: var(--serif);
      font-size: 14px;
      font-weight: 600;
      color: var(--ink-2);
    }
    .story-name { margin: 0; font-weight: 600; font-size: 15px; color: var(--ink); }
    .story-role { margin: 2px 0 0; font-size: 14px; color: var(--ink-2); }

    .story-stats {
      display: flex; flex-wrap: wrap; align-items: stretch;
      gap: 0;
      padding: 28px 0;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }
    .story-stat { flex: 1; min-width: 160px; padding: 4px 24px 4px 0; }
    .story-stat:first-child { padding-left: 0; }
    .story-stat-num {
      font-family: var(--serif);
      font-weight: 600;
      font-size: clamp(28px, 3.2vw, 36px);
      letter-spacing: -0.02em;
      color: var(--green);
    }
    .story-stat:nth-child(3) .story-stat-num,
    .story-stat:nth-child(5) .story-stat-num {
      color: var(--ink);
    }
    .story-stat-label {
      margin-top: 6px;
      font-size: 13px;
      color: var(--ink-2);
      letter-spacing: 0.02em;
    }
    .story-stat-divider {
      width: 1px; background: var(--line); margin: 0 24px 0 0;
    }
    @media (max-width: 720px) {
      .story-stat-divider { display: none; }
      .story-stat { padding: 8px 0; min-width: 140px; }
    }

    .story-link { margin-top: 32px; display: inline-flex; }

    .story-disclaimer {
      margin-top: 28px;
      padding-top: 20px;
      border-top: 1px solid var(--line);
      font-size: 12px;
      line-height: 1.55;
      color: #6B7280;
      font-style: italic;
      max-width: 56ch;
    }
  `;
  document.head.appendChild(s);
}