/* global React, LineIcon */

const INDUSTRIES = [
  { title: "Kuljetus", desc: "Kalustovakuutukset, lasti, toiminnan vastuu — kuljetusalan vakuutusten erityispiirteet hallussa.", href: "Kuljetusala.html" },
  { title: "Rakennus", desc: "Aliurakoinnin vastuukysymykset, työtapaturmat, takuu — rakennusalan riskit ovat omaa kategoriaansa.", href: "Rakennusala.html" },
  { title: "Tuotanto", desc: "Konekanta, keskeytysvakuutukset, ympäristövastuu — tuotantoyritykselle räätälöity turva.", href: "Tuotanto.html" },
  { title: "ICT ja konsultointi", desc: "Kybervakuutukset, hallinnon vastuu, tekijänoikeudet — modernit alat, modernit riskit.", href: "ICT.html" },
  { title: "Suunnittelu ja arkkitehtuuri", desc: "Suunnittelijan ammatillinen vastuu — korkea riski, jonka kattavuudessa rivien välit merkitsevät.", href: "Suunnittelu.html" },
  { title: "Finanssi ja kiinteistö", desc: "Hallituksen vastuuvakuutus, kiinteistö- ja sijoitustoiminnan riskit — alueet, joilla ehtokokonaisuus ratkaisee.", href: "Finanssi.html" },
];

function Industries() {
  return (
    <section className="industries section" id="toimialat" aria-labelledby="ind-title">
      <div className="container">
        <div className="industries-head">
          <p className="eyebrow">Toimialat</p>
          <h2 id="ind-title">Toimialakohtaista osaamista</h2>
          <p className="lead">Yli 10 vuoden kokemus eri toimialoilta. Tunnemme erityispiirteet.</p>
        </div>

        <ul className="industries-list" role="list">
          {INDUSTRIES.map((ind, i) => (
            <li key={ind.title}>
              <a href={ind.href} className="industry-row is-active">
                <span className="industry-num tnum">{String(i + 1).padStart(2, "0")}</span>
                <div className="industry-text">
                  <div className="industry-row-top">
                    <h3 className="industry-title">{ind.title}</h3>
                  </div>
                  <p className="industry-desc">{ind.desc}</p>
                </div>
                <span className="industry-arrow" aria-hidden="true">
                  <LineIcon name="arrow" size={18} />
                </span>
              </a>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

window.Industries = Industries;

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

    .industries-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }

    .industry-row {
      display: grid;
      grid-template-columns: 56px 1fr auto;
      align-items: start;
      gap: 24px;
      padding: 28px 0;
      border-bottom: 1px solid var(--line);
      color: var(--ink);
      transition: background var(--t), padding var(--t);
    }
    .industry-row.is-active:hover {
      background: linear-gradient(90deg, rgba(184, 146, 74, .04), transparent);
      padding-left: 16px; padding-right: 16px;
    }
    .industry-row.is-inactive { opacity: .6; }

    .industry-num {
      font-family: var(--serif);
      font-size: 22px;
      font-weight: 600;
      color: var(--gold);
      letter-spacing: -0.01em;
    }
    .industry-row-top {
      display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    }
    .industry-title { font-size: 24px; }
    .industry-tag {
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 4px 10px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--ink-2);
      background: var(--bg-2);
    }
    .industry-desc { margin: 8px 0 0; color: var(--ink-2); max-width: 640px; }

    .industry-arrow {
      align-self: center;
      color: var(--ink-2);
      transition: color var(--t), transform var(--t);
    }
    .industry-row.is-active:hover .industry-arrow {
      color: var(--ink);
      transform: translateX(4px);
    }

    @media (max-width: 720px) {
      .industry-row { grid-template-columns: 36px 1fr; gap: 16px; }
      .industry-arrow { display: none; }
    }
  `;
  document.head.appendChild(s);
}