/* global React, LineIcon */

const DIFFS = [
  {
    icon: "scales",
    label: "01",
    title: "Riskinjako",
    body: "Maksat kilpailutuksesta vain jos säästät. Hoitovaiheessa hinta on kiinteä. Et koskaan maksa enemmän siitä, että teemme työn paremmin.",
  },
  {
    icon: "thread",
    label: "02",
    title: "Jatkuvuus",
    body: "Sama ihminen — Matti tai Jari — alusta loppuun. Et joudu selittämään yrityksesi tilannetta uudelleen joka tapaamisessa. Asiakassuhteet ovat meillä keskimäärin yli 5 vuotta — moni jo yli kymmenen.",
  },
  {
    icon: "compass",
    label: "03",
    title: "Sisäpiirin näkemys",
    body: "Olemme molemmat työskennelleet aiemmin vakuutusyhtiöissä. Tunnemme heidän hinnoittelulogiikkansa ja neuvotteluvaransa. Tämä on harvinaista — ja arvokasta sinulle.",
  },
];

function Differentiators() {
  return (
    <section className="diffs section" aria-labelledby="diffs-title">
      <div className="container">
        <div className="diffs-head">
          <p className="eyebrow">Miksi me</p>
          <h2 id="diffs-title">Miksi Arvomeklarit?</h2>
          <p className="lead">Kolme asiaa, jotka erottavat meidät — ja jotka ovat asiakkaillemme tärkeitä.</p>
        </div>

        <div className="diffs-grid">
          {DIFFS.map((d) => (
            <article key={d.title} className="diff-card">
              <div className="diff-card-top">
                <div className="diff-icon" aria-hidden="true">
                  <LineIcon name={d.icon} size={32} />
                </div>
                <span className="diff-label tnum">{d.label}</span>
              </div>
              <h3 className="diff-title">{d.title}</h3>
              <p className="diff-body">{d.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Differentiators = Differentiators;

if (!document.getElementById("diffs-css")) {
  const s = document.createElement("style");
  s.id = "diffs-css";
  s.textContent = `
    .diffs-head { max-width: 720px; margin-bottom: 64px; }
    .diffs-head h2 { margin-top: 8px; }
    .diffs-head .lead { margin-top: 20px; color: var(--ink-2); }

    .diffs-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
    }
    @media (min-width: 800px) {
      .diffs-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
    }

    .diff-card {
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 32px 32px 36px;
      display: flex; flex-direction: column;
      transition: border-color var(--t), transform var(--t);
    }
    .diff-card:hover { border-color: rgba(184, 146, 74, .5); }

    .diff-card-top {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 32px;
    }
    .diff-icon {
      color: var(--gold);
      width: 56px; height: 56px;
      border-radius: 50%;
      background: rgba(184, 146, 74, .08);
      display: inline-flex; align-items: center; justify-content: center;
    }
    .diff-label {
      font-family: var(--serif);
      font-weight: 600;
      font-size: 22px;
      color: var(--ink-2);
      letter-spacing: -0.01em;
    }
    .diff-title { font-size: 24px; margin-bottom: 16px; }
    .diff-body { color: var(--ink-2); font-size: 16px; line-height: 1.65; }
  `;
  document.head.appendChild(s);
}