/* global React, SiteHeader, Breadcrumbs, PageHero, SectionHead, SituationCards, CheckList, PricingNote, MiniStory, FAQ, PageCTA, SiteFooter */

function PageHoito() {
  const fits = [
    "Vakuutusten hallinto vie liikaa aikaa muulta työltä",
    "Yrityksesi muuttuu — kasvaa, fuusioituu, ottaa käyttöön uusia toimintoja",
    "Et halua olla riippuvainen siitä, että muistat itse seurata vakuutusehtojen muutoksia",
    "Haluat asiantuntijan käytettäväksi vahinkotilanteissa, kun ei ole aikaa oppia uusia asioita",
    "Haluat budjetoinnin selkeäksi — kiinteä vuosihinta, ei yllätyslaskuja",
  ];

  const includes = [
    { title: "Jatkuva valvonta", body: "Seuraamme vakuutusehtojesi muutokset, hintamuutokset ja markkinakehityksen. Saat ilmoituksen, jos jotain merkittävää muuttuu — emme vain laskun lopussa." },
    { title: "Vuosittainen tarkistus", body: "Käymme yrityksesi tilanteen ja vakuutukset läpi kerran vuodessa. Päivitämme turvan vastaamaan muuttunutta tilannetta." },
    { title: "Asiantuntijan käyttöön", body: "Kun yrityksessäsi tapahtuu jotain — uusi työntekijä, uusi sopimus, uusi liiketoiminta — saat soiton vastaukseksi 4 tunnin sisällä arkipäivinä. Ei jonotusta puhelinvaihteessa." },
    { title: "Vahinkojen hoito", body: "Vahinkotilanteessa hoidamme korvausneuvottelut puolestasi. Saat sen, mitä sinulle vakuutusehtojen mukaan kuuluu." },
    { title: "Dokumentaatio", body: "Kaikki vakuutuksiin liittyvät dokumentit yhdessä paikassa. Helpotat hallitusraportointia ja tarkastuksia." },
    { title: "Yksi yhteyshenkilö", body: "Sama ihminen — Matti tai Jari — hoitaa asiakkuuttasi alusta loppuun. Et joudu selittämään tilannetta uudelleen joka tapaamisessa." },
  ];

  return (
    <>
      <SiteHeader activeTop="palvelut" />
      <Breadcrumbs items={[
        { label: "Etusivu", href: "Etusivu.html" },
        { label: "Palvelut", href: "Etusivu.html#palvelut" },
        { label: "Vakuutusten hoito", href: "#" },
      ]} />
      <PageHero
        eyebrow="Palvelu — hoito"
        title="Vakuutusten hoito"
        intro="Yrityksesi oma vakuutustiimi — pysyy, vaikka vakuutusyhtiöt vaihtuisivat. Kiinteä vuosihinta, ei yllätyksiä."
        ctaLabel="Varaa keskustelu hoitopalvelusta"
      />

      <section className="section">
        <div className="container">
          <SectionHead eyebrow="Milloin sopii" title="Milloin hoitopalvelu kannattaa" lead="Hoitopalvelu sopii sinulle, jos:" />
          <CheckList items={fits} />
        </div>
      </section>

      <section className="section alt-bg">
        <div className="container">
          <SectionHead eyebrow="Sisältö" title="Mitä hoitopalvelu sisältää" />
          <div className="incl-grid">
            {includes.map((it, i) => (
              <article key={i} className="incl-card">
                <span className="incl-num tnum">{String(i + 1).padStart(2, "0")}</span>
                <h3>{it.title}</h3>
                <p>{it.body}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHead eyebrow="Hinnoittelu" title="Hinnoittelu — kiinteä vuosihinta" />
          <PricingNote
            title="Ennustettava budjetti"
            body={`<p>Kiinteä vuosihinta, joka perustuu yrityksesi kokoon ja vakuutusten määrään. <strong>Ei prosenttipalkkioita, ei yllätyslaskuja.</strong></p><p>Tyypillinen vuosihinta pk-yritykselle on <strong>1 000–10 000 €/v</strong> riippuen koosta. Tarkka hinta sovitaan etukäteen — ennen kuin allekirjoitat mitään.</p>`}
          />
        </div>
      </section>

      <section className="section alt-bg">
        <div className="container">
          <SectionHead eyebrow="Asiakaskokemus" title="Vahinkotilanteen jälkeen" />
          <MiniStory
            quote="Vahinkotilanteessa minun ei tarvinnut tehdä yhtään mitään muuta kuin soittaa Matille. Kahden viikon päästä korvauspäätös oli pöydällä — paljon parempi kuin oma alkuperäinen arviomme."
            author="Toimitusjohtaja"
            meta="Hoitoasiakas"
          />
        </div>
      </section>

      <PageCTA
        title="Keskustellaan, sopiiko hoitopalvelu sinulle"
        body="30 minuutin veloitukseton keskustelu. Käymme yrityksesi tilanteen läpi ja kerromme, mikä olisi sinulle paras palvelutaso."
      />
      <SiteFooter />

      <style>{`
        .incl-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
        @media (min-width: 720px) { .incl-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
        @media (min-width: 1080px) { .incl-grid { grid-template-columns: repeat(3, 1fr); } }
        .incl-card { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 28px 24px; transition: border-color var(--t); }
        .incl-card:hover { border-color: rgba(201,160,80,.4); }
        .incl-num { display: inline-block; font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--gold); margin-bottom: 14px; letter-spacing: -0.01em; }
        .incl-card h3 { font-size: 19px; margin-bottom: 10px; }
        .incl-card p { color: var(--ink-2); font-size: 15px; line-height: 1.6; margin: 0; }
      `}</style>
    </>
  );
}

window.PageHoito = PageHoito;