/* global React */
function ResourcesPromo() {
  return (
    <section className="resources section" aria-labelledby="resources-title">
      <div className="container">
        <div className="resources-head">
          <p className="eyebrow">Veloituksettomat oppaat</p>
          <h2 id="resources-title">Lue ensin, päätä sitten.</h2>
          <p className="lead">Kolme pk-yrittäjälle suunnattua opasta — lataa, lue, hyödynnä. Ei myyntipuhetta — emme ota yhteyttä, ellet itse pyydä.</p>
        </div>

        <ul className="resources-list" role="list">
          <li>
            <a href="Oppaat.html#valintaopas">
              <span className="rsc-num tnum">01</span>
              <div className="rsc-text">
                <h3>Vakuutusmeklarin valintaopas</h3>
                <p>12-sivuinen PDF — 10 kysymystä, hinnoittelumallit, punaiset liput.</p>
              </div>
              <span className="rsc-arrow" aria-hidden="true">→</span>
            </a>
          </li>
          <li>
            <a href="Oppaat.html#vahinkochecklist">
              <span className="rsc-num tnum">02</span>
              <div className="rsc-text">
                <h3>Vahinkotilanteen tarkistuslista</h3>
                <p>Tulostettava A4 — ensimmäiset 24 tuntia, dokumentit, ilmoituspohja.</p>
              </div>
              <span className="rsc-arrow" aria-hidden="true">→</span>
            </a>
          </li>
          <li>
            <a href="Oppaat.html#kartoitus">
              <span className="rsc-num tnum">03</span>
              <div className="rsc-text">
                <h3>Vakuutuskartoituksen 5-vaiheinen prosessi</h3>
                <p>Sähköpostisarja — toista itse tai anna meidän hoitaa.</p>
              </div>
              <span className="rsc-arrow" aria-hidden="true">→</span>
            </a>
          </li>
        </ul>

        <a href="Oppaat.html" className="resources-all linkish">
          Selaa kaikki oppaat <span className="arrow">→</span>
        </a>
      </div>
    </section>
  );
}

window.ResourcesPromo = ResourcesPromo;

if (!document.getElementById("rsc-promo-css")) {
  const s = document.createElement("style");
  s.id = "rsc-promo-css";
  s.textContent = `
    .resources { background: var(--bg-2); }
    .resources-head { max-width: 760px; margin-bottom: 48px; }
    .resources-head h2 { margin-top: 8px; max-width: 22ch; }
    .resources-head .lead { margin-top: 20px; max-width: 56ch; color: var(--ink-2); }

    .resources-list { list-style: none; padding: 0; margin: 0 0 32px; border-top: 1px solid var(--line); max-width: 980px; }
    .resources-list li { border-bottom: 1px solid var(--line); }
    .resources-list a { display: grid; grid-template-columns: 56px 1fr auto; gap: 24px; align-items: center; padding: 28px 0; transition: padding var(--t), background var(--t); }
    .resources-list a:hover { padding-left: 16px; padding-right: 16px; background: linear-gradient(90deg, rgba(201,160,80,.04), transparent); }
    .rsc-num { font-family: var(--serif); font-size: 22px; color: var(--gold); font-weight: 600; align-self: center; }
    .rsc-text h3 { font-size: 22px; margin: 0 0 6px; }
    .rsc-text p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
    .rsc-arrow { color: var(--ink-2); font-size: 20px; align-self: center; transition: color var(--t), transform var(--t); }
    .resources-list a:hover .rsc-arrow { color: var(--gold); transform: translateX(4px); }

    .resources-all { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; }

    @media (max-width: 720px) {
      .resources-list a { grid-template-columns: 36px 1fr; gap: 16px; }
      .rsc-arrow { display: none; }
      .rsc-text h3 { font-size: 18px; }
    }
  `;
  document.head.appendChild(s);
}