/* global React, SiteHeader, Breadcrumbs, PageHero, SectionHead, CheckList, PricingNote, PageCTA, SiteFooter, LineIcon */

function PageVahinko() {
  const whens = [
    "Heti kun vahinko on tapahtunut — ennen kuin teet vahinkoilmoituksen vakuutusyhtiölle",
    "Kun korvauspäätös on tullut, mutta tunnet sen olevan liian pieni",
    "Kun vakuutusyhtiö hylkää korvausvaatimuksen ja epäilet hylkäyksen perusteita",
    "Kun tarvitset apua vahingon dokumentoinnissa ja todistusaineiston keräämisessä",
  ];

  const helps = [
    { title: "Vahingon dokumentointi", body: "Ohjaamme, mitä todistusaineistoa kerätä — ennen kuin tilanne on liian myöhäinen. Yksi yleisimmistä syistä korvauspäätöksen alentamiseen on puutteellinen dokumentointi." },
    { title: "Vahinkoilmoituksen tekeminen", body: "Vahinkoilmoituksen sanavalinnat vaikuttavat siihen, miten vakuutusyhtiö arvioi tilanteen. Autamme tekemään ilmoituksen niin, että se kuvaa tilanteen täsmällisesti." },
    { title: "Korvausneuvottelu", body: "Käymme korvausneuvottelut vakuutusyhtiön kanssa. Tunnemme heidän logiikkansa — olemme molemmat työskennelleet vakuutusyhtiössä aiemmin." },
    { title: "Oikaisuvaatimukset", body: "Jos korvauspäätös ei ole vakuutusehtojen mukainen, autamme oikaisuvaatimuksessa. Tarvittaessa viemme asian vakuutuslautakunnan käsittelyyn." },
  ];

  return (
    <>
      <SiteHeader activeTop="palvelut" />
      <Breadcrumbs items={[
        { label: "Etusivu", href: "Etusivu.html" },
        { label: "Palvelut", href: "Etusivu.html#palvelut" },
        { label: "Vahinkojen hoito", href: "#" },
      ]} />
      <PageHero
        eyebrow="Palvelu — vahinkojen hoito"
        title="Vahinkojen hoito"
        intro="Älä tyydy vakuutusyhtiön ensitarjoukseen. Hoidamme korvausneuvottelut puolestasi — saat sen, mitä sinulle vakuutusehtojen mukaan kuuluu."
        ctaLabel="Apua vahinkotilanteessa"
      />

      <section className="urgent-bar" aria-label="Kiireellinen vahinkotilanne">
        <div className="container urgent-inner">
          <div className="urgent-tag">
            <span className="urgent-dot" aria-hidden="true"></span>
            <span>Kiireellinen tilanne?</span>
          </div>
          <div className="urgent-nums">
            <a href="tel:+358440663011" className="urgent-num">
              <span className="urgent-loc">Matti Notkola</span>
              <span className="urgent-tel tnum">+358 (0) 440 663 011</span>
            </a>
            <a href="tel:+358505669160" className="urgent-num">
              <span className="urgent-loc">Jari Salmi</span>
              <span className="urgent-tel tnum">+358 (0) 505 669 160</span>
            </a>
          </div>
          <p className="urgent-note">Yhdistämme suoraan Matille tai Jarille. Ei jonotusta.</p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHead eyebrow="Milloin yhteyttä" title="Milloin meihin kannattaa ottaa yhteyttä" />
          <CheckList items={whens} />
        </div>
      </section>

      <section className="section alt-bg">
        <div className="container">
          <SectionHead eyebrow="Apu" title="Miten autamme" lead="Neljä vaihetta korvausneuvottelussa, joissa meklarista on hyötyä." />
          <div className="help-list">
            {helps.map((h, i) => (
              <article key={i} className="help-item">
                <div className="help-num"><span className="tnum">{String(i + 1).padStart(2, "0")}</span></div>
                <div>
                  <h3>{h.title}</h3>
                  <p>{h.body}</p>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHead eyebrow="Hinnoittelu" title="Hinnoittelu" />
          <PricingNote
            title="Hoitoasiakkaille sisältyy"
            body={`<p><strong>Hoitopalveluasiakkaillemme vahinkojen hoito sisältyy kiinteään vuosihintaan</strong> — ilman lisäveloituksia.</p><p>Erillispalveluna sovimme palkkion etukäteen vahingon laajuuden ja työn arvioidun määrän mukaan.</p>`}
          />
        </div>
      </section>

      <PageCTA
        title="Vahinko sattui? Hoidetaan se yhdessä."
        body="Soita, ennen kuin teet vahinkoilmoituksen — ensimmäiset askeleet ratkaisevat usein lopputuloksen."
      />
      <SiteFooter />

      <style>{`
        .urgent-bar { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 28px 0; }
        .urgent-inner { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center; }
        @media (min-width: 880px) { .urgent-inner { grid-template-columns: auto 1fr auto; gap: 32px; } }
        .urgent-tag { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
        .urgent-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(201,160,80,.18); }
        .urgent-nums { display: flex; flex-wrap: wrap; gap: 28px; }
        .urgent-num { display: flex; flex-direction: column; gap: 2px; transition: color var(--t); }
        .urgent-num:hover { color: var(--gold); }
        .urgent-loc { font-size: 12px; color: var(--ink-2); letter-spacing: 0.06em; text-transform: uppercase; }
        .urgent-tel { font-family: var(--serif); font-weight: 600; font-size: 20px; color: inherit; letter-spacing: -0.01em; }
        .urgent-note { font-size: 14px; color: var(--ink-2); margin: 0; }

        .help-list { display: grid; grid-template-columns: 1fr; gap: 0; max-width: 880px; }
        .help-item { display: grid; grid-template-columns: 64px 1fr; gap: 28px; padding: 32px 0; border-top: 1px solid var(--line); }
        .help-item:first-child { border-top: 0; padding-top: 8px; }
        .help-num { width: 56px; height: 56px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line); color: var(--gold); font-family: var(--serif); font-weight: 600; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .help-item h3 { font-size: 22px; margin-bottom: 10px; }
        .help-item p { color: var(--ink-2); font-size: 16px; line-height: 1.7; margin: 0; max-width: 640px; }
        @media (max-width: 720px) { .help-item { grid-template-columns: 44px 1fr; gap: 16px; padding: 24px 0; } .help-num { width: 40px; height: 40px; font-size: 14px; } }
      `}</style>
    </>
  );
}

window.PageVahinko = PageVahinko;
