/* global React, LineIcon */

const SERVICES = [
  {
    icon: "search",
    title: "Vakuutusten kilpailutus",
    body: "Käymme nykyiset vakuutuksesi läpi puolueettomasti. Kilpailutamme markkinat ja löydämme paremmat ehdot. Maksat vain, jos säästät.",
    href: "Vakuutusten Kilpailutus.html",
    pricing: "Maksat vain, jos säästät",
  },
  {
    icon: "shield",
    title: "Vakuutusten hoito",
    body: "Hoidamme yrityksesi vakuutuksia jatkuvasti. Päivitämme turvan, kun tilanne muuttuu, ja valvomme ehtomuutoksia. Tiedät aina mitä maksat — kiinteä vuosihinta.",
    href: "Vakuutusten Hoito.html",
    pricing: "Kiinteä vuosihinta",
  },
  {
    icon: "lifebuoy",
    title: "Vahinkojen hoito",
    body: "Vahinkotilanteessa hoidamme korvausneuvottelut puolestasi — emme tyydy vakuutusyhtiön ensitarjoukseen, vaan varmistamme että saat sen, mikä sinulle kuuluu.",
    href: "Vahinkojen Hoito.html",
    pricing: "Sisältyy hoitoasiakkaille",
  },
];

function Services() {
  return (
    <section className="services section" id="palvelut" aria-labelledby="services-title">
      <div className="container">
        <div className="services-head">
          <p className="eyebrow">Palvelut</p>
          <h2 id="services-title">Mitä teemme</h2>
          <p className="lead">Kolme palvelua, joista valitset tarpeesi mukaan.</p>
        </div>

        <div className="services-grid">
          {SERVICES.map((s) => (
            <a key={s.title} href={s.href} className="service-card">
              <div className="service-icon" aria-hidden="true">
                <LineIcon name={s.icon} size={28} />
              </div>
              <h3 className="service-title">{s.title}</h3>
              <p className="service-body">{s.body}</p>
              <div className="service-foot">
                <span className="service-pricing">{s.pricing}</span>
                <span className="service-link">
                  Lue lisää <LineIcon name="arrow" size={14} />
                </span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Services = Services;

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

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

    .service-card {
      display: flex; flex-direction: column;
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 36px 32px;
      color: var(--ink);
      box-shadow: 0 1px 0 rgba(31, 41, 55, .02);
      transition: transform var(--t), box-shadow var(--t), border-color var(--t);
      min-height: 320px;
    }
    .service-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 40px -20px rgba(31, 41, 55, .25);
      border-color: rgba(31, 41, 55, .15);
    }
    .service-icon {
      color: var(--blue);
      margin-bottom: 28px;
    }
    .service-title { font-size: 24px; margin-bottom: 14px; }
    .service-body { color: var(--ink-2); flex: 1; font-size: 16px; line-height: 1.65; }
    .service-foot {
      margin-top: 28px;
      display: flex; align-items: center; justify-content: space-between;
      gap: 12px;
      padding-top: 20px;
      border-top: 1px solid var(--line);
    }
    .service-pricing {
      font-size: 13px;
      color: var(--gold);
      font-weight: 500;
      letter-spacing: 0.02em;
    }
    .service-link {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 14px; font-weight: 500;
      color: var(--ink);
    }
    .service-card:hover .service-link .arrow { transform: translateX(3px); }
  `;
  document.head.appendChild(s);
}