/* global React, SiteHeader, Breadcrumbs, PageHero, SectionHead, MiniStory, PageCTA, SiteFooter */
const { useState: useS1 } = React;

function PageTietoaMeista() {
  // Kolmiosainen tarina: chapter "M" = Matin käännekohta, "J" = Jarin tausta, "P" = kolme lupausta.
  const story = [
    { c: "M", t: "Olin meklariyhtiössä toista vuotta, kun istuin asiakkaani — keskisuuren teollisuusyrityksen talousjohtajan — kanssa kahvilla yhden kvartaalitarkistuksen jälkeen." },
    { c: "M", t: "Hän kysyi minulta sivulauseessa: \u201CMatti, jäätkö sinä meidän asiakaspäälliköksi vai tuleeko teillä joku vaihto?\u201D", quote: true },
    { c: "M", t: "Pysähdyin. Olin ehtinyt huomata saman ilmiön sisältä: meklariyhtiössä asiakaspäällikkö vaihtuu helposti — joku saa ylennyksen, joku siirtyy isompaan asiakkaaseen, joku lähtee talosta. Asiakas joutuu aloittamaan alusta uuden ihmisen kanssa, selittämään yrityksensä tilanteen jälleen, rakentamaan luottamuksen uudestaan." },
    { c: "M", t: "Talousjohtaja ei sanonut sitä ääneen. Mutta kysymyksen takana oli väsymys siihen mahdollisuuteen." },
    { c: "M", t: "Mietin sitä koko paluumatkan. Sinä asiakkaana ansaitset neuvonantajan, joka on paikalla viiden, kymmenen, viidentoista vuoden päästäkin. Joka muistaa yrityksesi tilanteen ulkoa, tuntee henkilökuntasi nimet, tietää, miksi viime vuonna tehtiin tämä päätös.", emphasize: true },

    { c: "J", t: "Jari oli päätynyt samaan johtopäätökseen omalla tahollaan." },
    { c: "J", t: "Hän oli ollut yli kaksikymmentä vuotta suomalaisessa vakuutusyhtiössä — pidempi sisältä-näkymä alaan kuin useimmilla ehtii kertyä koko uransa aikana. Hän oli nähnyt sisältä, miten yhtiöt rakentavat tarjouksia, miten asiakassuhteet hoidetaan ja miten vaihtuvuus vaikuttaa asiakkaan kokemukseen." },
    { c: "J", t: "Hänelläkin oli oma hetki, jolloin hän tajusi haluavansa rakentaa suoremman, henkilökohtaisemman mallin." },
    { c: "J", t: "Tutustuimme samassa meklariyhtiössä, jonka rakenne ei vastannut sitä, mitä asiakkaat oikeasti tarvitsivat. Huomasimme nopeasti, että puhumme samaa kieltä: vakuutus on bisneskysymys, ei vakuutuskysymys, ja asiakkaan paras palvelu syntyy, kun yksi ihminen vastaa siitä alusta loppuun." },
    { c: "J", t: "Suoritimme molemmat vakuutusmeklaritutkinnot, ja yli kymmenen vuotta sitten perustimme Arvomeklarit Oy:n." },
  ];
  const promises = [
    {
      n: "Ensimmäinen",
      t: "100 % suomalainen, omistajavetoinen meklari.",
      b: "Useimmat Suomessa toimivat meklariyhtiöt ovat osa kansainvälisiä konserneja, joiden päätökset tehdään Tukholmassa, Lontoossa tai New Yorkissa. Me halusimme tehdä päätökset suomalaisten asiakkaiden ehdoilla — kahdesta toimistosta, Kauniaisissa ja Helsingissä.",
    },
    {
      n: "Toinen",
      t: "Omistajat ovat ne henkilöt, joiden kanssa työskentelet.",
      b: "Et puhu asiakaspäällikön kanssa, jota tukee taustalla joku toinen. Sinun yhteyshenkilösi on Matti tai Jari — sama ihminen ensitapaamisesta vahinkotilanteeseen viiden vuoden päästä.",
    },
    {
      n: "Kolmas",
      t: "Aiempi taustamme käytössä sinun eduksesi.",
      b: "Yhdessä meillä on noin 50 vuotta kokemusta vakuutusalalta — Jari yli 30 vuotta vakuutusyhtiöiden ja meklarialan sisällä ja Matti yli 15 vuotta neljästä eri näkökulmasta. Tunnemme hinnoittelulogiikan, neuvotteluvarat ja ehtokirjaimet rivien välistä.",
    },
  ];
  const team = [
    {
      name: "Matti Notkola",
      role: "CEO, Partner",
      img: "assets/matti-notkola.png",
      lede: "Vakuutus on bisneskysymys, ei vakuutuskysymys.",
      bioParas: [
        "Olen viettänyt yli 15 vuotta vakuutusalalla useasta näkökulmasta. Vakuutusyhtiössä, kahdessa meklariyhtiössä ja asianajotoimistossa kansainvälisten yritysten parissa ja nyt yli kymmenen vuotta oman meklariyrityksen vetäjänä.",
        "Yhdessä Jarin kanssa olemme käyttäneet noin 50 vuotta vakuutusalalla — Jari yli 30 vuotta vakuutusyhtiöiden ja meklarialan sisällä ja minä yli 15 vuotta neljästä eri näkökulmasta. Tunnemme hinnoittelulogiikan, neuvotteluvarat ja ehtokirjaimet rivien välistä, ja käytämme tietämystä sinun eduksesi.",
        "Asiakkaani ovat 30 työntekijän rakennusliikkeitä ja 500 hengen logistiikkayrityksiä, pörssiyhtiöitä ja perheyrityksiä. Yhteistä on yksi: he haluavat keskustella liikevoitosta, eivät vain vakuutuksista. Siinä minä olen vahvimmillani.",
      ],
      specialties: [
        "Vastuuvakuutukset (toiminnan vastuu, johdon vastuu, D&O)",
        "Keskeytysvakuutukset",
        "Kuljetus- ja logistiikkavakuutukset",
        "Henkilöstövakuutukset (työtapaturmat, ryhmäsairauskulu)",
      ],
      qualifications: "Broker, M.Sc (Econ.), Finanssivalvonnan rekisterissä",
      email: "matti.notkola@arvomeklarit.fi",
      phone: "+358 (0) 440 663 011",
      li: "https://linkedin.com/in/matti-notkola-a8188b12",
      liLabel: "linkedin.com/in/matti-notkola-a8188b12",
      profile: "Matti Notkola.html",
    },
    {
      name: "Jari Salmi",
      role: "COB & Partner",
      img: "assets/jari-salmi.png",
      lede: "Hyvä vakuutuspäätös tehdään hyvällä tiedolla — ei kiireellä.",
      bioParas: [
        "Yli 30 vuoden ura vakuutusalalla, sekä vakuutusyhtiössä että meklarina. Aiempi taustani vakuutusyhtiössä antaa harvinaisen näkökulman — tunnen yhtiöiden hinnoittelulogiikan ja neuvotteluvarat sisältä.",
        "Erikoistumisalueitani ovat rakennusala, ICT ja hallinnon vastuukysymykset — aloja, joilla virhe vakuutusehdoissa voi tulla todella kalliiksi vasta vuosien päästä.",
      ],
      specialties: [
        "Rakennusalan vastuuvakuutukset",
        "ICT- ja kybervakuutukset",
        "Hallinnon vastuu (D&O)",
        "Vakuutusten kansainväliset järjestelyt",
      ],
      qualifications: "Broker, YVTS, TVEAT 2025 (Turvallisuusalan erikoisammattitutkinto), JET, Finanssivalvonnan rekisterissä",
      email: "jari.salmi@arvomeklarit.fi",
      phone: "+358 (0) 505 669 160",
      li: "https://www.linkedin.com/in/jari-salmi-4b449443/",
      liLabel: "linkedin.com/in/jari-salmi-4b449443",
      profile: "Jari Salmi.html",
    },
  ];
  const values = [
    { t: "Rehellisyys", b: "Sanomme suoraan, mitä näemme. Jos emme näe arvoa, sanomme sen — emme keksi syitä, joiden takia kannattaisi tehdä yhteistyötä." },
    { t: "Jatkuvuus", b: "Asiakkaamme pysyvät meillä keskimäärin yli viisi vuotta. Tämä on harvinaista alalla, ja se ei tapahdu sattumalta." },
    { t: "Kokemus ja jatkuvuus", b: "Noin 50 vuoden yhteenlaskettu kokemus, asiakkaita pörssiyhtiöistä perheyrityksiin. Saman ihmisen kanssa läpi vuosien." },
  ];
  const certs = [
    { t: "Finanssivalvonta", b: "Vakuutusedustajarekisteri. Auktorisoitu vakuutusmeklariyhtiö." },
    { t: "Helsingin seudun kauppakamari", b: "Jäsen — paikallisen elinkeinoelämän verkostossa mukana." },
    { t: "100 % suomalainen omistajuus", b: "Riippumaton yhtiö ilman ulkomaalaisia tai vakuutusyhtiösidonnaisia omistajia." },
    { t: "Vastuuvakuutus", b: "Lakisääteinen vastuuvakuutus 1 564 610 € / vahinko, 2 315 610 € / vuosi — ylittää lain vähimmäisvaatimuksen." },
  ];
  const stats = [
    { n: "Yli 10 v", l: "Arvomeklareiden toiminta-aika" },
    { n: "Yli 5 v", l: "Keskimääräinen asiakassuhteen pituus" },
    { n: "~50 v", l: "Perustajien yhteenlaskettu kokemus" },
  ];
  return (<>
    <SiteHeader />
    <Breadcrumbs items={[{label:"Etusivu",href:"Etusivu.html"},{label:"Tietoa meistä",href:"#"}]} />
    <PageHero eyebrow="Tietoa meistä" title="Yli kymmenen vuotta sitten päätimme rakentaa meklariyhtiön toisin." intro="Suomalaisten vakuutusmeklareiden tarina — Matti ja Jari sekä se, mitä Arvomeklarit yrityksenä on." />
    <section className="section"><div className="container">
      <SectionHead eyebrow="Tarina" title="Miksi perustimme Arvomeklarit" />
      <div className="story-prose story-prose-v2">
        {/* Osa 1: Matin käännekohta */}
        {story.filter(p => p.c === "M").map((p,i)=>(
          p.quote
            ? <blockquote key={"M"+i} className="story-quote">{p.t}</blockquote>
            : <p key={"M"+i} className={p.emphasize ? "story-emphasis" : undefined}>{p.t}</p>
        ))}

        <div className="story-divider" aria-hidden="true"><span /></div>

        {/* Osa 2: Jarin tausta ja yhdistyminen */}
        {story.filter(p => p.c === "J").map((p,i)=>(
          <p key={"J"+i}>{p.t}</p>
        ))}

        <div className="story-divider" aria-hidden="true"><span /></div>

        {/* Osa 3: Kolme rakenteellista lupausta */}
        <p className="story-lead">Halusimme rakentaa kolme asiaa toisin.</p>
      </div>

      <ol className="promise-list" aria-label="Kolme rakenteellista lupausta">
        {promises.map((pr, i) => (
          <li key={i} className="promise-item">
            <span className="promise-num" aria-hidden="true">{pr.n}</span>
            <div className="promise-body">
              <h3 className="promise-title">{pr.t}</h3>
              <p className="promise-desc">{pr.b}</p>
            </div>
          </li>
        ))}
      </ol>

      <div className="story-prose story-prose-v2">
        <p className="story-emphasis">Sinä päätät, mikä on sinulle paras turva. Me näytämme vaihtoehdot, joita sinun on muuten vaikea löytää — ja olemme paikalla viiden vuoden päästäkin selittämässä, miksi tämä päätös tehtiin.</p>
      </div>
    </div></section>
    <section className="section alt-bg"><div className="container">
      <ul className="kpi-strip" aria-label="Tunnusluvut">
        {stats.map((s,i)=>(
          <li key={i}>
            <span className="kpi-num tnum">{s.n}</span>
            <span className="kpi-label">{s.l}</span>
          </li>
        ))}
      </ul>
      <SectionHead eyebrow="Johto" title="Keitä me olemme" lead="Henkilökohtainen palvelu yrityksenne avainhenkilöille. Asiakaspalvelutiimimme tukee päivittäisessä asiakassuhteessa." />
      <div className="team-grid">{team.map((p,i)=>(
        <article key={i} className="team-card" itemScope itemType="https://schema.org/Person">
          <div className="team-photo"><img src={p.img} alt={p.name} itemProp="image" /></div>
          <div className="team-body">
            <h3 itemProp="name">{p.name}</h3>
            <p className="team-role" itemProp="jobTitle">{p.role}</p>
            <blockquote className="team-lede">{p.lede}</blockquote>
            <div className="team-bio">{p.bioParas.map((para,j)=>(
              <p key={j}>{para}</p>
            ))}</div>
            <h4 className="team-subhead">Erikoisalueet</h4>
            <ul className="team-bullets">{p.specialties.map((b,j)=><li key={j}>{b}</li>)}</ul>
            <h4 className="team-subhead">Pätevyys</h4>
            <p className="team-quals">{p.qualifications}</p>
            <h4 className="team-subhead">Tavoitettavissa</h4>
            <ul className="team-contact-list">
              <li><a href={"tel:"+p.phone.replace(/\s|\(|\)/g,"")} className="tnum" itemProp="telephone">{p.phone}</a></li>
              <li><a href={"mailto:"+p.email} itemProp="email">{p.email}</a></li>
              <li><a href={p.li} itemProp="sameAs" target="_blank" rel="noopener noreferrer">LinkedIn: {p.liLabel}</a></li>
            </ul>
            <div className="team-actions">
              <a href="Yhteystiedot.html#kalenteri" className="btn-primary team-book-cta">Varaa veloitukseton kartoitus</a>
              <a href={p.profile} className="team-profile-link">Lue lisää <span aria-hidden="true">→</span></a>
            </div>
          </div>
        </article>
      ))}</div>
    </div></section>
    <section className="section"><div className="container">
      <SectionHead eyebrow="Arvot" title="Arvomme" />
      <div className="vals-grid">{values.map((v,i)=>(
        <article key={i} className="val-card">
          <span className="val-num tnum">{String(i+1).padStart(2,"0")}</span>
          <h3>{v.t}</h3><p>{v.b}</p>
        </article>
      ))}</div>
    </div></section>
    <section className="section alt-bg"><div className="container">
      <SectionHead eyebrow="Toimistot" title="Kauniainen ja Helsinki" lead="Tapaamme mielellämme kasvokkain — toimistoissamme tai etänä." />
      <div className="office-grid">
        {[
          {
            title: "Kauniaisten toimisto",
            address: "Vanha Turuntie 14 B 1, 02700 Kauniainen",
            phone: "+358 (0) 10 274 2750",
            phoneTel: "+358102742750",
            // OSM bbox: ~Vanha Turuntie 14 B 1
            mapSrc: "https://www.openstreetmap.org/export/embed.html?bbox=24.7235%2C60.2080%2C24.7335%2C60.2140&layer=mapnik&marker=60.2110%2C24.7280",
            mapLink: "https://www.google.com/maps/dir/?api=1&destination=Vanha+Turuntie+14%2C+02700+Kauniainen",
          },
          {
            title: "Helsingin toimisto",
            address: "Lampputie 12 C, 00750 Helsinki",
            phone: "+358 (0) 10 274 2754",
            phoneTel: "+358102742754",
            mapSrc: "https://www.openstreetmap.org/export/embed.html?bbox=25.0080%2C60.2240%2C25.0180%2C60.2300&layer=mapnik&marker=60.2270%2C25.0130",
            mapLink: "https://www.google.com/maps/dir/?api=1&destination=Lampputie+12+C%2C+00750+Helsinki",
          },
        ].map((o) => (
          <article key={o.title} className="office-card">
            <h3 className="office-title">{o.title}</h3>
            <div className="office-map">
              <iframe
                src={o.mapSrc}
                title={`${o.title} — kartta`}
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                allowFullScreen=""
              />
            </div>
            <div className="office-meta">
              <p className="office-addr"><strong>{o.address}</strong></p>
              <p className="office-phone"><a href={`tel:${o.phoneTel}`} className="tnum">{o.phone}</a></p>
              <a href={o.mapLink} target="_blank" rel="noopener" className="office-dir">
                Reittiohjeet <span aria-hidden="true">→</span>
              </a>
            </div>
          </article>
        ))}
      </div>
    </div></section>
    <section className="section"><div className="container">
      <SectionHead eyebrow="Sertifikaatit" title="Rekisteröinnit ja sertifikaatit" />
      <div className="cert-grid">{certs.map((c,i)=>(
        <article key={i} className="cert-card"><h3>{c.t}</h3><p>{c.b}</p></article>
      ))}</div>
      <div className="badge-row" aria-label="Kumppanuudet ja luokitukset">
        <figure className="badge-card">
          <img src="assets/badge-luotettava-kumppani.png" alt="Luotettava Kumppani — Vastuu Group" loading="lazy" />
        </figure>
        <figure className="badge-card">
          <img src="assets/badge-luottokelpoinen.png" alt="Luottokelpoinen — AA-Rating" loading="lazy" />
        </figure>
        <figure className="badge-card">
          <img src="assets/badge-yrittajat-2024.png" alt="Yrittäjät — Jäsenyritys 2024" loading="lazy" />
        </figure>
        <figure className="badge-card">
          <img src="assets/badge-united-global-brokers.png" alt="United Global Brokers — Online Network" loading="lazy" />
        </figure>
      </div>
    </div></section>
    <PageCTA title="Tutustutaanko?" body="Veloitukseton 30 minuutin kartoitus — kasvokkain Helsingissä tai etänä." />
    <SiteFooter />
    <style>{`
      .story-prose{max-width:680px}
      .story-prose p{margin:0 0 1.4em;font-size:18px;line-height:1.75;color:var(--ink);text-wrap:pretty}
      .story-prose p.story-emphasis{font-family:var(--serif);font-style:italic;font-size:24px;line-height:1.4;color:var(--ink);padding:8px 0 8px 24px;border-left:3px solid var(--gold);margin:24px 0 32px}
      .story-prose p.story-lead{font-family:var(--serif);font-size:22px;line-height:1.5;color:var(--ink);margin:8px 0 0;font-weight:500}
      .story-prose .story-quote{font-family:var(--serif);font-size:26px;line-height:1.45;color:var(--ink);margin:16px 0 28px;padding:0 0 0 32px;border-left:0;font-style:italic;font-weight:400;letter-spacing:-0.005em}
      @media(min-width:720px){.story-prose .story-quote{font-size:30px;padding-left:40px;margin:20px 0 36px}}
      .story-divider{display:flex;align-items:center;justify-content:center;margin:48px 0;max-width:680px}
      .story-divider span{display:block;width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 1px var(--gold)}
      .story-divider::before,.story-divider::after{content:"";flex:1;height:1px;background:var(--line)}
      .story-divider::before{margin-right:18px}
      .story-divider::after{margin-left:18px}
      .promise-list{list-style:none;padding:0;margin:24px 0 8px;display:grid;grid-template-columns:1fr;gap:24px;max-width:880px;counter-reset:promise}
      @media(min-width:880px){.promise-list{gap:28px}}
      .promise-item{display:grid;grid-template-columns:auto 1fr;gap:24px;background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:4px;padding:28px 32px;align-items:start}
      @media(max-width:639px){.promise-item{grid-template-columns:1fr;gap:12px;padding:24px}}
      .promise-num{font-family:var(--serif);font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);padding-top:4px;white-space:nowrap}
      .promise-title{font-family:var(--serif);font-size:22px;line-height:1.3;margin:0 0 10px;color:var(--ink);letter-spacing:-0.01em}
      .promise-desc{margin:0;color:var(--ink-2);font-size:16px;line-height:1.7;text-wrap:pretty}
      .kpi-strip{list-style:none;padding:0;margin:0 0 64px;display:grid;grid-template-columns:1fr;gap:24px;text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:32px 0}
      @media(min-width:720px){.kpi-strip{grid-template-columns:repeat(3,1fr);gap:32px}}
      .kpi-strip li{display:flex;flex-direction:column;gap:6px}
      .kpi-num{font-family:var(--serif);font-weight:600;font-size:clamp(36px,4vw,48px);color:var(--gold);letter-spacing:-.02em;line-height:1}
      .kpi-label{font-size:14px;color:var(--ink-2);max-width:22ch;margin:0 auto}
      .team-grid{display:grid;grid-template-columns:1fr;gap:24px}@media(min-width:880px){.team-grid{grid-template-columns:1fr 1fr;gap:32px}}
      .team-card{background:var(--bg);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
      .team-photo{aspect-ratio:4/3;background:var(--bg-2);overflow:hidden}.team-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
      .team-body{padding:32px 32px 36px}.team-card h3{font-size:26px;margin-bottom:6px;letter-spacing:-.015em}
      .team-role{font-size:13px;color:var(--gold);font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin:0 0 22px}
      .team-lede{font-family:var(--serif);font-style:italic;font-size:24px;line-height:1.35;color:var(--ink);margin:0 0 24px;padding-left:18px;border-left:3px solid var(--gold);quotes:"\\201C" "\\201D"}
      .team-lede::before{content:open-quote}.team-lede::after{content:close-quote}
      .team-bio{margin:0 0 24px}
      .team-bio p{font-size:15px;line-height:1.7;color:var(--ink-2);margin:0 0 14px}
      .team-bio p:last-child{margin-bottom:0}
      .team-subhead{font-size:11px;font-weight:600;color:var(--ink);letter-spacing:.1em;text-transform:uppercase;margin:0 0 12px;padding-top:18px;border-top:1px solid var(--line)}
      .team-bullets{list-style:none;padding:0;margin:0 0 4px;display:flex;flex-direction:column;gap:8px}
      .team-bullets li{font-size:14px;color:var(--ink-2);line-height:1.5;padding-left:16px;position:relative}
      .team-bullets li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:1px;background:var(--gold)}
      .team-quals{font-size:14px;color:var(--ink-2);line-height:1.55;margin:0}
      .team-contact-list{list-style:none;padding:0;margin:0 0 4px;display:flex;flex-direction:column;gap:6px;font-size:14px}
      .team-contact-list a{color:var(--ink);transition:color var(--t)}.team-contact-list a:hover{color:var(--gold)}
      .team-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:24px}
      .team-book-cta{font-size:13px;padding:10px 16px;letter-spacing:.04em}
      .team-profile-link{display:inline-flex;align-items:center;gap:8px;color:var(--gold);font-weight:500;font-size:14px;transition:color var(--t)}
      .team-profile-link span{display:inline-block;transition:transform var(--t)}
      .team-profile-link:hover{color:var(--ink)}
      .team-profile-link:hover span{transform:translateX(3px)}
      .badge-row{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:48px;padding-top:48px;border-top:1px solid var(--line)}
      @media(min-width:880px){.badge-row{grid-template-columns:repeat(4,1fr);gap:32px}}
      .badge-card{margin:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
      .badge-card img{height:96px;width:auto;max-width:100%;object-fit:contain}
      .vals-grid{display:grid;grid-template-columns:1fr;gap:20px}@media(min-width:800px){.vals-grid{grid-template-columns:repeat(3,1fr);gap:24px}}
      .val-card{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:32px 28px}
      .val-num{display:block;font-family:var(--serif);font-size:18px;font-weight:600;color:var(--gold);margin-bottom:14px}
      .val-card h3{font-size:22px;margin-bottom:10px}.val-card p{color:var(--ink-2);font-size:15px;line-height:1.65;margin:0}
      .office-grid{display:grid;grid-template-columns:1fr;gap:24px}@media(min-width:880px){.office-grid{grid-template-columns:1fr 1fr;gap:32px}}
      .office-card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow var(--t),transform var(--t)}
      .office-card:hover{box-shadow:0 12px 32px -12px rgba(20,30,50,0.12);transform:translateY(-2px)}
      .office-title{margin:0;padding:20px 24px 12px;font-family:var(--serif);font-weight:500;font-size:22px;color:var(--ink);letter-spacing:-0.01em}
      .office-map{position:relative;width:100%;height:300px;background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
      .office-map iframe{width:100%;height:100%;border:0;display:block;filter:saturate(0.8) contrast(0.95)}
      .office-meta{padding:20px 24px 22px;display:flex;flex-direction:column;gap:8px}
      .office-addr{margin:0;font-size:15px;color:var(--ink);line-height:1.5}
      .office-phone{margin:0;font-size:15px}
      .office-phone a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid transparent;transition:border-color var(--t),color var(--t)}
      .office-phone a:hover{color:var(--ink);border-bottom-color:var(--gold)}
      .office-dir{margin-top:6px;font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;align-self:flex-start;border-bottom:1px solid transparent;transition:border-color var(--t)}
      .office-dir:hover,.office-dir:focus-visible{border-bottom-color:var(--gold)}
      .cert-grid{display:grid;grid-template-columns:1fr;gap:16px}@media(min-width:720px){.cert-grid{grid-template-columns:repeat(2,1fr);gap:20px}}
      .cert-card{background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:4px;padding:24px 28px}
      .cert-card h3{font-size:18px;margin-bottom:8px}.cert-card p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.6}
    `}</style>
  </>);
}

function PageHinnoittelu() {
  const reasons = [
    { t: "Miksi kilpailutus on tulosvastuullinen?", b: "Koska se asettaa intressimme samaan suuntaan sinun kanssasi. Jos emme onnistu, et maksa. Tämä motivoi meitä tekemään työn parhaalla mahdollisella tavalla — ei tyytymään ensimmäiseen löytöön." },
    { t: "Miksi hoito on kiinteähintainen?", b: "Koska hoitovaiheessa työn määrää on vaikea ennustaa. Yhtenä vuonna voi olla iso muutostilanne, toisena rauhallisempi. Kiinteä hinta tarkoittaa, että saat saman palvelun molempina vuosina — eikä kumpikaan meistä mieti, mitä laskutamme." },
    { t: "Mikä erottaa meidät kilpailijoista?", b: "Useat suomalaiset meklarit laskuttavat tietyn prosentin (yleensä 50–60 %) löydetystä säästöstä. Tämä motivoi meklaria löytämään mahdollisimman ison säästön — myös ehtoja heikentämällä. Mallimme ei tee tätä." },
  ];
  const tiers = [
    { size: "Pieni yritys", rev: "3–10 MEUR liikevaihto", k: "1 500–4 000 €", h: "1 000–4 000 €/v + alv", note: "Kilpailutuksen palkkio vain, jos säästö löytyy." },
    { size: "Keskisuuri yritys", rev: "10–30 MEUR liikevaihto", k: "4 000–12 000 €", h: "4 000–10 000 €/v + alv", note: "Sama riskinjako, suurempi vakuutuskokonaisuus." },
    { size: "Suuri yritys", rev: "30+ MEUR liikevaihto", k: "Tarjous tapauskohtaisesti", h: "Sopimuspohjainen", note: "Pörssiyhtiöt ja perheyritysten kasvuvaihe — räätälöity yhteistyömalli." },
  ];
  const faq = [
    { q: "Saatteko provisiota vakuutusyhtiöiltä?", a: "Emme. Suomen laki kieltää vakuutusmeklareilta minkäänlaiset palkkiot tai provisiot vakuutusyhtiöiltä. Tämä on kirjattu lakiin vakuutusten tarjoamisesta. Kaikki tulomme tulee asiakkailta." },
    { q: "Mitä jos kilpailutus ei tuo säästöä?", a: "Et maksa mitään. Tämä on 100 % säästötakuumme. Tämä koskee tilanteita, joissa olemme tehneet kilpailutuksen normaaliin tapaan — emme tilanteita, joissa asiakas peruuttaa prosessin kesken." },
    { q: "Voiko hoitopalkkio nousta sopimuskauden aikana?", a: "Ei. Sovittu hoitopalkkio pysyy vähintään 12 kuukauden ajan. Sopimuksen jatkossa voimme yhdessä keskustella, vastaako hinta edelleen palvelun laajuutta — kumpaankin suuntaan." },
    { q: "Mikä on minimisopimuksen pituus?", a: "Hoitopalvelussa 12 kuukautta. Tämä siksi, että ensimmäinen vuosi sisältää eniten työtä — uuden asiakkaan tutustumisvaihe ja prosessien kuntoonsaaminen." },
  ];
  return (<>
    <SiteHeader activeTop="palvelut" />
    <Breadcrumbs items={[{label:"Etusivu",href:"Etusivu.html"},{label:"Palvelut",href:"Etusivu.html#palvelut"},{label:"Hinnoittelu",href:"#"}]} />
    <PageHero eyebrow="Hinnoittelu" title="Hinnoittelu, jota ei tarvitse arvuutella." intro="Vakuutusmeklarialalla hinnoittelu on usein mustaa laatikkoa. Meillä se ei ole." />
    <section className="section"><div className="container">
      <SectionHead eyebrow="Hybridimalli" title="Kaksi palvelua, kaksi hinnoittelumallia" lead="Palvelumme jakautuvat kahteen — kilpailutukseen ja jatkuvaan hoitoon. Hinnoittelu eroaa, koska tehtävät eroavat." />
      <div className="hyb-grid">
        <article className="hyb-card">
          <p className="hyb-tag">Kilpailutus</p>
          <h3>Säästötakuu</h3>
          <p className="hyb-lead">Jos säästöä ei synny, et maksa kilpailutuksesta mitään.</p>
          <p>Kilpailutuksen palkkio määräytyy syntyvän säästön mukaan. Palkkiomalli sovitaan etukäteen — yleensä se on osuus säästöstä, esimerkiksi 50/50-jako asiakkaan ja Arvomeklareiden välillä. Tarkka malli kerrotaan ennen sopimusta, ja kaikki on läpinäkyvää.</p>
          <p>Malli sopii molemmille: jos onnistumme, molemmat hyötyvät. Hoitovaiheessa siirrytään kiinteään vuosihintaan — silloin et koskaan maksa enemmän siksi, että teemme työn paremmin.</p>
        </article>
        <article className="hyb-card">
          <p className="hyb-tag">Hoito</p>
          <h3>Kiinteä vuosihinta</h3>
          <p className="hyb-lead">Hoitovaiheessa hinta on kiinteä vuosihinta, joka sovitaan etukäteen.</p>
          <p>Ei prosenttipalkkioita, ei yllätyslaskuja. Tämä on tärkeää kahdesta syystä: budjetointisi pysyy ennustettavana, ja motivaationamme ei ole "löytää lisäkuluja" laskuun. Hinta sovitaan kerran, ja se pysyy.</p>
        </article>
      </div>
    </div></section>
    <section className="section alt-bg"><div className="container">
      <SectionHead eyebrow="Miksi näin" title="Miksi tämä malli?" />
      <div className="reasons">{reasons.map((r,i)=>(
        <article key={i} className="reason"><h3>{r.t}</h3><p>{r.b}</p></article>
      ))}</div>
    </div></section>
    <section className="section"><div className="container">
      <SectionHead eyebrow="Esimerkit" title="Esimerkkejä hinnoittelusta" lead="Tarkka hinta riippuu yrityksesi koosta ja vakuutusten määrästä. Alla suuntaa-antavia tasoja." />
      <div className="tiers">{tiers.map((t,i)=>(
        <article key={i} className="tier">
          <div className="tier-head"><h3>{t.size}</h3><p className="tier-rev">{t.rev}</p></div>
          <dl className="tier-rows">
            <div><dt>Kilpailutus</dt><dd className="tnum">{t.k}</dd></div>
            <div><dt>Hoito</dt><dd className="tnum">{t.h}</dd></div>
          </dl>
          <p className="tier-note">{t.note}</p>
        </article>
      ))}</div>
      <p className="tiers-foot">Hinnat suuntaa-antavia. Tarkka tarjous tehdään aina yrityksesi tilanteen pohjalta.</p>
    </div></section>
    <section className="section alt-bg"><div className="container">
      <SectionHead eyebrow="Usein kysyttyä" title="Hinnoittelu" />
      <FAQ items={faq} schemaId="faq-hinnoittelu" />
    </div></section>
    <PageCTA title="Kysy tarkka hinta tilanteeseesi" body="30 minuutin veloitukseton kartoitus. Selitämme hinnoittelumme yksityiskohtaisesti yrityksesi tilanteen pohjalta." />
    <SiteFooter />
    <style>{`
      .hyb-grid{display:grid;grid-template-columns:1fr;gap:24px}@media(min-width:880px){.hyb-grid{grid-template-columns:1fr 1fr}}
      .hyb-card{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:36px 32px}
      .hyb-tag{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:500;margin:0 0 12px}
      .hyb-card h3{font-size:28px;margin-bottom:16px}.hyb-lead{font-family:var(--serif);font-size:18px;color:var(--ink);margin-bottom:16px;font-weight:500}
      .hyb-card p{color:var(--ink-2);font-size:15px;line-height:1.7}
      .reasons{display:grid;grid-template-columns:1fr;gap:20px;max-width:880px}
      .reason{background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:4px;padding:24px 28px}
      .reason h3{font-size:20px;margin-bottom:8px}.reason p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.7}
      .tiers{display:grid;grid-template-columns:1fr;gap:20px;max-width:1180px}@media(min-width:720px){.tiers{grid-template-columns:repeat(3,1fr);gap:24px}}
      .tier{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:32px}
      .tier-head{padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:20px}
      .tier h3{font-size:22px;margin-bottom:6px}.tier-rev{font-size:14px;color:var(--ink-2);margin:0}
      .tier-rows{display:flex;flex-direction:column;gap:14px;margin:0 0 20px}
      .tier-rows>div{display:flex;justify-content:space-between;align-items:baseline}
      .tier-rows dt{font-size:13px;color:var(--ink-2);letter-spacing:.04em;text-transform:uppercase;margin:0}
      .tier-rows dd{font-family:var(--serif);font-weight:600;font-size:20px;color:var(--ink);margin:0}
      .tier-note{font-size:13px;color:var(--ink-2);margin:0;font-style:italic;line-height:1.5}
      .tiers-foot{margin-top:20px;font-size:13px;color:var(--ink-2);font-style:italic}
    `}</style>
  </>);
}

function PageUKK() {
  const items = [
    { q: "Mitä vakuutusmeklari maksaa?", a: "Hinnoittelumallimme on hybridi: kilpailutuksesta maksat vain, jos säästät — palkkio määräytyy syntyvän säästön mukaan, ja malli sovitaan etukäteen (esim. 50/50-jako asiakkaan ja Arvomeklareiden välillä). Hoitovaiheessa hinta on kiinteä vuosihinta, joka ei kasva sen mukaan, miten paljon työtä teemme. Tarkka hinta riippuu yrityksesi koosta — pk-yritykselle tyypillisesti 1 000–10 000 €/v hoidosta, kilpailutuksesta vain säästöjen mukaan.", l: { t: "Lue lisää hinnoittelustamme", h: "Hinnoittelu.html" } },
    { q: "Onko vakuutusmeklaritoiminta luvanvaraista?", a: "Kyllä. Suomessa vakuutusmeklaritoiminta on luvanvaraista ja Finanssivalvonnan valvomaa. Arvomeklarit Oy (Y-tunnus 2658755-9) on merkitty Finanssivalvonnan ylläpitämään vakuutusedustajarekisteriin 21.3.2017. Toiminnasta vastaava johto on suorittanut tutkinnon, ja yhtiöllä on lakisääteinen vastuuvakuutus. Voit tarkistaa rekisteröinnin osoitteesta finanssivalvonta.fi/rekisterit/vakuutusedustajat.", l: { t: "Yritystiedot ja yhteystiedot", h: "Yhteystiedot.html" } },
    { q: "Mitä eroa on vakuutusmeklarilla ja vakuutusyhtiön myyjällä?", a: "Vakuutusmeklari on puolueeton — hänellä on käytössään kaikki vakuutusyhtiöt, eikä laissa sallita palkkioita vakuutusyhtiöiltä. Vakuutusyhtiön myyjä myy vain oman yhtiönsä tuotteita ja saa palkkionsa vakuutusyhtiöltä. Meklari edustaa sinua, myyjä edustaa vakuutusyhtiötä." },
    { q: "Kuinka kauan kilpailutus kestää?", a: "Tyypillisesti 5–8 viikkoa kartoituksesta uuden vakuutusturvan voimaantuloon: kartoitus 30 min, tarjouspyynnön valmistelu 1 viikko, tarjousten kerääminen 2–3 viikkoa, vertailu ja päätös 1 viikko, siirtymä 2–4 viikkoa." },
    { q: "Joudunko vaihtamaan vakuutusyhtiötä, jos otan teidät meklariksi?", a: "Et välttämättä. Joskus paras lopputulos on neuvotella nykyisen yhtiön kanssa paremmat ehdot. Suositus perustuu siihen, mikä on sinulle paras kokonaisuus — ei siihen, että vaihto näyttäisi näyttävältä." },
    { q: "Mitä jos meille sattuu vahinko — kuka hoitaa korvausneuvottelun?", a: "Hoitoasiakkaillemme me hoidamme korvausneuvottelut puolestasi. Otat yhteyttä, me kerromme, mitä dokumentoida, teemme ilmoituksen ja neuvottelemme korvauksen. Et tyydy vakuutusyhtiön ensitarjoukseen, vaan saat sen, mitä sinulle vakuutusehtojen mukaan kuuluu." },
    { q: "Voinko vaihtaa takaisin suoraan vakuutusyhtiöön, jos en ole tyytyväinen?", a: "Kyllä. Hoitosopimus on irtisanottavissa kuuden kuukauden irtisanomisajalla 12 kk:n minimisopimuksen jälkeen. Voit jatkaa suoraan vakuutusyhtiön kanssa — vakuutuksia ei tarvitse vaihtaa." },
    { q: "Saatteko provisioita vakuutusyhtiöiltä?", a: "Emme. Suomen laki vakuutusten tarjoamisesta kieltää vakuutusmeklareilta minkäänlaiset palkkiot tai provisiot vakuutusyhtiöiltä. Tämä takaa puolueettomuutemme — saat aidosti parhaan tarjouksen." },
    { q: "Mitä vakuutuksia kilpailutatte?", a: "Yritysvakuutuksia kokonaisuutena: omaisuusvakuutukset, toiminnan ja tuotevastuu, johdon vastuu, kybervakuutus, henkilövakuutukset (työtapaturma, ryhmäsairauskulu), kalustovakuutukset, kuljetusvakuutukset. Emme kilpailuta yksityishenkilöiden vakuutuksia." },
    { q: "Mihin perustuu väite, että säästöt ovat tyypillisesti 10–35 %?", a: "Asiakaskokemustemme haarukka. Yksittäisen asiakkaan säästö voi olla suurempi tai pienempi — riippuu siitä, kuinka kauan vakuutuksia ei ole kilpailutettu, kuinka iso yritys on ja millainen vahinkohistoria yrityksellä on. Asiakastarinoissa on konkreettisia esimerkkejä yksittäisistä kilpailutuksista." },
    { q: "Sopiiko palvelunne pienelle yritykselle?", a: "Palvelemme yrityksiä pörssiyhtiöistä perheyrityksiin. Asiakkaisiimme kuuluu kuljetus-, rakennus-, tuotanto-, ICT- ja suunnittelualan yrityksiä — pienistä keskisuuriin. Pienemmälle yritykselle kerromme rehellisesti, jos meklaripalvelu ei ole taloudellisesti kannattava — vakuutusten yhteismäärä voi olla niin pieni, että suora yhteys vakuutusyhtiöön riittää." },
    { q: "Mitä tapahtuu, jos säästöä ei löydy kilpailutuksessa?", a: "Et maksa mitään. Tämä on 100 % säästötakuumme. Tämä koskee normaaleja kilpailutusprosesseja — ei tilanteita, joissa asiakas peruuttaa prosessin kesken tai joissa vakuutuksia on vaikeasti kilpailutettavissa erityissyistä." },
    { q: "Pidättekö vakuutustietomme luottamuksellisina?", a: "Kyllä. Meitä sitoo vakuutusmeklareiden salassapitovelvoite, ja olemme sitoutuneet GDPR:n mukaiseen tietojen käsittelyyn. Asiakkaiden vakuutustietoja ei jaeta kolmansille osapuolille muuta kuin kirjallisella valtakirjalla — esimerkiksi vakuutusyhtiön kanssa kilpailutusta tehdessä." },
  ];
  const [q, setQ] = useS1("");
  const [open, setOpen] = useS1(0);
  const filtered = items.map((it,i)=>({...it,idx:i})).filter(it => !q || it.q.toLowerCase().includes(q.toLowerCase()) || it.a.toLowerCase().includes(q.toLowerCase()));
  return (<>
    <SiteHeader />
    <Breadcrumbs items={[{label:"Etusivu",href:"Etusivu.html"},{label:"Usein kysyttyä",href:"#"}]} />
    <PageHero eyebrow="UKK" title="Usein kysyttyä" intro="13 yleisintä kysymystä, joita meiltä kysytään. Jokaiseen lyhyt vastaus." />
    <section className="section" style={{paddingTop:0}}><div className="container">
      <div className="ukk-search">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true"><circle cx="11" cy="11" r="6"/><path d="M20 20l-4.3-4.3"/></svg>
        <input type="search" value={q} onChange={e=>setQ(e.target.value)} placeholder="Etsi kysymys tai avainsana…" aria-label="Hae kysymyksistä" />
      </div>
      <ul className="faq" role="list" style={{maxWidth:"none",marginTop:32}}>
        {filtered.length === 0 && <li style={{padding:"32px 0",color:"var(--ink-2)"}}>Ei osumia hakusanalle "{q}".</li>}
        {filtered.map((it) => {
          const isOpen = open === it.idx;
          return (
            <li key={it.idx} className={"faq-item"+(isOpen?" is-open":"")}>
              <button className="faq-q" aria-expanded={isOpen} onClick={()=>setOpen(isOpen?-1:it.idx)}>
                <span><span className="ukk-num tnum">{String(it.idx+1).padStart(2,"0")}</span>{it.q}</span>
                <span className="faq-icon" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M6 8l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg></span>
              </button>
              {isOpen && <div className="faq-a"><p>{it.a}</p>{it.l && <a href={it.l.h} className="ukk-link">{it.l.t} →</a>}</div>}
            </li>
          );
        })}
      </ul>
    </div></section>
    <PageCTA title="Onko kysymys, johon emme vastanneet?" body="Soita suoraan tai varaa 30 minuutin keskustelu kalenterista." />
    <SiteFooter />
    <script type="application/ld+json" dangerouslySetInnerHTML={{__html: JSON.stringify({"@context":"https://schema.org","@type":"FAQPage","mainEntity":items.map(it=>({"@type":"Question","name":it.q,"acceptedAnswer":{"@type":"Answer","text":it.a}}))})}} />
    <style>{`
      .ukk-search{display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:14px 18px;max-width:560px;color:var(--ink-2);transition:border-color var(--t)}
      .ukk-search:focus-within{border-color:var(--gold)}
      .ukk-search input{flex:1;font:inherit;border:0;background:none;outline:none;color:var(--ink);font-size:16px}
      .ukk-num{font-family:var(--serif);color:var(--gold);margin-right:14px;font-weight:600}
      .ukk-link{display:inline-block;margin-top:12px;color:var(--gold);font-weight:500;border-bottom:1px solid var(--gold);padding-bottom:2px}
    `}</style>
  </>);
}

window.PageTietoaMeista = PageTietoaMeista;
window.PageHinnoittelu = PageHinnoittelu;
window.PageUKK = PageUKK;