/* global React, LineIcon */
function Hero() {
  return (
    <section className="hero" aria-labelledby="hero-title">
      <div className="container hero-grid">
        <div className="hero-text">
          <p className="eyebrow">Vakuutusmeklari yrityksille</p>
          <h1 id="hero-title">
            Vakuutusturva, joka oikeasti suojaa <span className="hero-accent">yrityksesi</span>.
          </h1>
          <p className="lead hero-lead">
            Suomalainen vakuutusmeklari yrityksille — pörssiyhtiöistä perheyrityksiin.
            Arvomeklarit Oy on toiminut yli 10 vuotta, ja perustajilla on yhteensä
            noin 50 vuotta kokemusta vakuutusalalta. Maksat kilpailutuksesta vain,
            jos säästät — säästöt ovat asiakkaillemme tyypillisesti 10–35 %.
          </p>
          <div className="hero-ctas">
            <a href="#cta" className="btn btn-primary">
              Varaa veloitukseton kartoitus
              <LineIcon name="arrow" size={16} />
            </a>
            <a href="#laskuri" className="btn btn-secondary">
              Laske säästöpotentiaalisi
            </a>
          </div>
          <div className="hero-meta">
            <span className="hero-meta-item">
              <span className="dot" /> Finanssivalvonnan rekisterissä
            </span>
            <span className="hero-meta-item">
              <span className="dot" /> Auktorisoitu vakuutusmeklariyhtiö
            </span>
            <span className="hero-meta-item">
              <span className="dot" /> 100 % suomalainen omistajuus
            </span>
          </div>
        </div>
      </div>

      {/* Subtle gold accent — quarter-circle bottom-right */}
      <div className="hero-accent-shape" aria-hidden="true">
        <svg viewBox="0 0 600 600" preserveAspectRatio="xMaxYMax slice">
          <defs>
            <radialGradient id="goldGlow" cx="100%" cy="100%" r="80%">
              <stop offset="0%" stopColor="#C9A050" stopOpacity="0.18" />
              <stop offset="60%" stopColor="#C9A050" stopOpacity="0.06" />
              <stop offset="100%" stopColor="#C9A050" stopOpacity="0" />
            </radialGradient>
          </defs>
          <circle cx="600" cy="600" r="540" fill="url(#goldGlow)" />
          <circle cx="600" cy="600" r="380" fill="none" stroke="#C9A050" strokeWidth="0.5" strokeOpacity="0.25" />
          <circle cx="600" cy="600" r="260" fill="none" stroke="#C9A050" strokeWidth="0.5" strokeOpacity="0.18" />
        </svg>
      </div>
    </section>
  );
}

window.Hero = Hero;

if (!document.getElementById("hero-css")) {
  const s = document.createElement("style");
  s.id = "hero-css";
  s.textContent = `
    .hero {
      position: relative;
      min-height: 80vh;
      display: flex;
      align-items: center;
      padding: 80px 0 96px;
      overflow: hidden;
    }
    .hero-grid {
      position: relative;
      z-index: 2;
    }
    .hero-text { max-width: 760px; }
    .hero-accent { color: var(--gold); font-style: italic; font-weight: 500; }
    .hero-lead { margin-top: 28px; max-width: 620px; }
    .hero-ctas {
      margin-top: 40px;
      display: flex; flex-wrap: wrap; gap: 14px;
    }
    .hero-meta {
      margin-top: 48px;
      display: flex; flex-wrap: wrap; gap: 24px;
      color: var(--ink-2);
      font-size: 14px;
    }
    .hero-meta-item { display: inline-flex; align-items: center; gap: 8px; }
    .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); display: inline-block; }

    .hero-accent-shape {
      position: absolute;
      right: -120px; bottom: -120px;
      width: min(720px, 60vw); height: min(720px, 60vw);
      pointer-events: none;
      opacity: .9;
    }
    @media (max-width: 720px) {
      .hero { min-height: auto; padding: 56px 0 80px; }
      .hero-accent-shape { right: -200px; bottom: -200px; opacity: .7; }
    }
  `;
  document.head.appendChild(s);
}