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

function PageYhteystiedot() {
  const [sent, setSent] = useS3(false);
  const [sending, setSending] = useS3(false);
  const [submitError, setSubmitError] = useS3(null);
  const [errors, setErrors] = useS3({});
  const [vals, setVals] = useS3({ name:"", company:"", email:"", phone:"", msg:"", consent:false });
  const setV = (k,v) => { setVals(s => ({...s,[k]:v})); setErrors(e => ({...e,[k]:null})); };

  // Lataa Calendly-widgetin script ja kuuntele varauksen success-eventti
  React.useEffect(() => {
    if (!document.querySelector('script[src*="calendly.com/assets/external/widget.js"]')) {
      const s = document.createElement("script");
      s.src = "https://assets.calendly.com/assets/external/widget.js";
      s.async = true;
      document.body.appendChild(s);
    }
    if (!document.querySelector('link[href*="calendly.com/assets/external/widget.css"]')) {
      const l = document.createElement("link");
      l.rel = "stylesheet";
      l.href = "https://assets.calendly.com/assets/external/widget.css";
      document.head.appendChild(l);
    }
    const handler = (e) => {
      if (e.data && typeof e.data.event === "string" && e.data.event.indexOf("calendly") === 0) {
        if (e.data.event === "calendly.event_scheduled") {
          if (typeof window.amTrack === "function") window.amTrack("calendar_book", { source: "contact_page" });
        }
      }
    };
    window.addEventListener("message", handler);
    return () => window.removeEventListener("message", handler);
  }, []);

  const onSubmit = async (e) => {
    e.preventDefault();
    const errs = {};
    if (!vals.name.trim()) errs.name = "Anna nimesi.";
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(vals.email)) errs.email = "Tarkista sähköpostiosoite.";
    if (!vals.msg.trim() || vals.msg.trim().length < 10) errs.msg = "Kerro lyhyesti tilanteestasi (vähintään 10 merkkiä).";
    if (!vals.consent) errs.consent = "Suostumus tarvitaan tietojen käsittelyyn.";
    if (Object.keys(errs).length) {
      setErrors(errs);
      // focus first error
      setTimeout(() => {
        const firstKey = Object.keys(errs)[0];
        const el = document.querySelector(`[name="${firstKey}"], [data-err-for="${firstKey}"]`);
        if (el && el.focus) el.focus();
      }, 0);
      return;
    }

    setSending(true);
    setSubmitError(null);
    try {
      const formData = new FormData();
      formData.append("name", vals.name);
      formData.append("company", vals.company);
      formData.append("email", vals.email);
      formData.append("phone", vals.phone);
      formData.append("msg", vals.msg);
      formData.append("timestamp", new Date().toISOString());
      const res = await fetch("https://formspree.io/f/xvzlqyvv", {
        method: "POST",
        body: formData,
        headers: { "Accept": "application/json" },
      });
      if (!res.ok) throw new Error("Formspree status " + res.status);
      setSent(true);
      if (typeof window.amTrack === "function") window.amTrack("form_submit", { form: "contact", company: vals.company || null });
    } catch (err) {
      console.error("Yhteydenoton lähetys epäonnistui:", err);
      setSubmitError("Lähetys epäonnistui. Yritä uudelleen tai lähetä viesti suoraan osoitteeseen asiakaspalvelu@arvomeklarit.fi.");
      setSending(false);
    }
  };
  return (<>
    <SiteHeader />
    <Breadcrumbs items={[{label:"Etusivu",href:"Etusivu.html"},{label:"Yhteystiedot",href:"#"}]} />
    <PageHero eyebrow="Yhteystiedot" title="Soita, lähetä viesti tai varaa aika kalenterista." intro="30 minuutin keskustelu on veloitukseton ja vie askeleen lähemmäs päätöstä — suuntaan tai toiseen." />

    <section className="section" style={{paddingTop:0,paddingBottom:0}}><div className="container">
      <ul className="kpi-strip" aria-label="Tunnusluvut">
        <li><span className="tnum kpi-num">Yli 10 v</span><span className="kpi-label">Arvomeklareiden toiminta-aika</span></li>
        <li><span className="tnum kpi-num">Yli 5 v</span><span className="kpi-label">Keskimääräinen asiakassuhteen pituus</span></li>
        <li><span className="tnum kpi-num">~50 v</span><span className="kpi-label">Perustajien yhteenlaskettu kokemus</span></li>
      </ul>
    </div></section>

    {/* Calendly */}
    <section className="section" id="kalenteri" style={{paddingTop:0}}><div className="container">
      <SectionHead eyebrow="Varaa aika" title="Varaa 30 minuutin keskustelu" lead="Käymme yrityksesi tilanteen läpi ja kerromme rehellisesti, voimmeko tuoda lisäarvoa." />
      <div className="cal-card">
        <div
          className="calendly-inline-widget"
          data-url="https://calendly.com/mattinotkola?hide_gdpr_banner=1&primary_color=c9a050"
          style={{minWidth:"320px",height:"720px"}}
        />
        <noscript>
          <p className="cal-fallback">
            Selaimessasi ei ole JavaScriptiä käytössä. Avaa kalenteri suoraan:{" "}
            <a href="https://calendly.com/mattinotkola" target="_blank" rel="noopener">calendly.com/mattinotkola</a>
          </p>
        </noscript>
      </div>
    </div></section>

    {/* Two-column: form + direct contact */}
    <section className="section alt-bg"><div className="container">
      <div className="contact-grid">
        <div>
          <SectionHead eyebrow="Lomake" title="Lähetä viesti" lead="Vastaamme arkisin 24 tunnin kuluessa." />
          {sent ? (
            <div className="form-ok" role="status" aria-live="polite">
              <strong>Kiitos!</strong>
              <p>Viesti vastaanotettu. Olemme yhteydessä 24 tunnin kuluessa.</p>
            </div>
          ) : (
            <form className="cform" onSubmit={onSubmit} noValidate aria-describedby="cform-intro">
              <p id="cform-intro" className="sr-only">Tähdellä * merkityt kentät ovat pakollisia.</p>
              <div className="frow">
                <label>Nimi *
                  <input type="text" name="name" autoComplete="name" required value={vals.name} onChange={e=>setV("name",e.target.value)} aria-invalid={!!errors.name} aria-describedby={errors.name?"err-name":undefined} />
                  {errors.name && <span id="err-name" className="finput-err" role="alert">{errors.name}</span>}
                </label>
                <label>Yritys
                  <input type="text" name="company" autoComplete="organization" value={vals.company} onChange={e=>setV("company",e.target.value)} />
                </label>
              </div>
              <div className="frow">
                <label>Sähköposti *
                  <input type="email" name="email" autoComplete="email" required value={vals.email} onChange={e=>setV("email",e.target.value)} aria-invalid={!!errors.email} aria-describedby={errors.email?"err-email":undefined} />
                  {errors.email && <span id="err-email" className="finput-err" role="alert">{errors.email}</span>}
                </label>
                <label>Puhelin
                  <input type="tel" name="phone" autoComplete="tel" value={vals.phone} onChange={e=>setV("phone",e.target.value)} />
                </label>
              </div>
              <label>Viesti *
                <textarea name="msg" required rows="5" placeholder="Kerro lyhyesti tilanteesta — esim. mitä vakuutuksia, montako työntekijää, milloin kilpailutus on viimeksi tehty." value={vals.msg} onChange={e=>setV("msg",e.target.value)} aria-invalid={!!errors.msg} aria-describedby={errors.msg?"err-msg":undefined} />
                {errors.msg && <span id="err-msg" className="finput-err" role="alert">{errors.msg}</span>}
              </label>
              <label className="fcheck">
                <input type="checkbox" name="consent" required checked={vals.consent} onChange={e=>setV("consent",e.target.checked)} aria-invalid={!!errors.consent} aria-describedby={errors.consent?"err-consent":undefined} data-err-for="consent" />
                <span>Hyväksyn <a href="Tietosuoja.html">tietosuojaselosteen</a> ja annan luvan käsitellä tietojani yhteydenottoa varten.</span>
              </label>
              {errors.consent && <span id="err-consent" className="finput-err" role="alert">{errors.consent}</span>}
              {submitError && <span className="finput-err finput-err-block" role="alert">{submitError}</span>}
              <button type="submit" className="btn btn-primary" disabled={sending}>{sending ? "Lähetetään…" : "Lähetä viesti →"}</button>
            </form>
          )}
        </div>
        <div>
          <SectionHead eyebrow="Yhteystiedot" title="Yhteystiedot palveluittain" lead="Yksi sähköpostiosoite riittää — viestit ohjataan oikealle tiimille. Kiireellisissä asioissa soita meille." />
          <div className="service-contacts">
            <article className="svc-card">
              <h4>Asiakaspalvelu</h4>
              <p className="svc-desc">Yleinen yhteydenotto, ajanvaraus, kysymykset palvelusta.</p>
              <a href="tel:+358102742750" className="svc-line tnum">+358 10 274 2750 (Kauniainen)</a>
              <a href="tel:+358102742754" className="svc-line tnum">+358 10 274 2754 (Helsinki)</a>
              <a href="mailto:asiakaspalvelu@arvomeklarit.fi" className="svc-line">asiakaspalvelu@arvomeklarit.fi</a>
            </article>
            <article className="svc-card">
              <h4>Vakuutusten kilpailutus</h4>
              <p className="svc-desc">Tarjouspyynnöt ja kilpailutusprosessit.</p>
              <a href="mailto:asiakaspalvelu@arvomeklarit.fi" className="svc-line">asiakaspalvelu@arvomeklarit.fi</a>
            </article>
            <article className="svc-card">
              <h4>Vahinkojen hoito</h4>
              <p className="svc-desc">Korvausneuvottelut ja vahinkoilmoitukset.</p>
              <a href="mailto:asiakaspalvelu@arvomeklarit.fi" className="svc-line">asiakaspalvelu@arvomeklarit.fi</a>
            </article>
            <article className="svc-card">
              <h4>Lakimiespalvelut</h4>
              <p className="svc-desc">Vakuutusoikeudelliset kysymykset ja juridinen neuvonta.</p>
              <a href="mailto:asiakaspalvelu@arvomeklarit.fi" className="svc-line">asiakaspalvelu@arvomeklarit.fi</a>
            </article>
          </div>

          <div className="sla-box">
            <h4>Aukioloajat</h4>
            <p>Ma–Pe · 9.00–16.00</p>
            <h4>Vastausaika</h4>
            <p>Sähköposteihin vastataan arkisin 24 tunnin kuluessa. Kiireellisissä vahinkotilanteissa soita meille.</p>
          </div>
        </div>
      </div>
    </div></section>

    {/* Tiimi */}
    <section className="section"><div className="container">
      <SectionHead eyebrow="Tiimi" title="Tiimimme johto" />
      <div className="direct-people">
          <article className="direct-card">
            <div className="direct-photo"><img src="assets/matti-notkola.png" alt="Matti Notkola" /></div>
            <div className="direct-body">
              <h3>Matti Notkola</h3>
              <p className="direct-role">CEO, Partner</p>
              <a href="tel:+358440663011" className="direct-line tnum">+358 (0) 440 663 011</a>
              <a href="mailto:matti.notkola@arvomeklarit.fi" className="direct-line">matti.notkola@arvomeklarit.fi</a>
              <a href="Matti Notkola.html" className="direct-line direct-profile">Lue lisää &rarr;</a>
            </div>
          </article>
          <article className="direct-card">
            <div className="direct-photo"><img src="assets/jari-salmi.png" alt="Jari Salmi" /></div>
            <div className="direct-body">
              <h3>Jari Salmi</h3>
              <p className="direct-role">COB & Partner</p>
              <a href="tel:+358505669160" className="direct-line tnum">+358 (0) 505 669 160</a>
              <a href="mailto:jari.salmi@arvomeklarit.fi" className="direct-line">jari.salmi@arvomeklarit.fi</a>
              <a href="Jari Salmi.html" className="direct-line direct-profile">Lue lisää &rarr;</a>
            </div>
          </article>
      </div>
    </div></section>

    {/* Offices + maps */}
    <section className="section"><div className="container">
      <SectionHead eyebrow="Toimistot" title="Kauniainen ja Helsinki" lead="Tapaamme mielellämme kasvokkain — molemmat toimistot ovat hyvien yhteyksien päässä." />
      <div className="off-grid">
        {[
          {
            kind: "Pääkonttori · Kauniainen",
            street: "Vanha Turuntie 14 B 1",
            zip: "02700",
            city: "Kauniainen",
            phone: "+358 10 274 2750",
            phoneTel: "+358102742750",
            photo: undefined,
            transit: <><strong>Junalla:</strong> Kauniainen-asema, 5 min kävely.<br/><strong>Autolla:</strong> Vieraspysäköinti talon edessä.</>,
            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",
          },
          {
            kind: "Helsingin toimisto",
            street: "Lampputie 12 C",
            zip: "00750",
            city: "Helsinki",
            phone: "+358 10 274 2754",
            phoneTel: "+358102742754",
            // TODO-MARIA: Lisää valokuva Helsingin toimistosta polkuun assets/office-helsinki.jpg.
            // Aikaisempi tiedosto puuttui (404). Kun kuva on paikallaan, vaihda photo: undefined → "assets/office-helsinki.jpg".
            photo: undefined,
            transit: <><strong>Bussilla:</strong> Lähimmät HSL-pysäkit Lampputiellä.<br/><strong>Autolla:</strong> Pysäköinti kadulla.</>,
            mapSrc: "https://www.openstreetmap.org/export/embed.html?bbox=25.0104%2C60.2767%2C25.0244%2C60.2847&layer=mapnik&marker=60.2807%2C25.0174",
            mapLink: "https://www.google.com/maps/dir/?api=1&destination=Lampputie+12+C%2C+00750+Helsinki",
          },
        ].map((o) => (
          <article key={o.kind} className="off-card" itemScope itemType="https://schema.org/LocalBusiness">
            <h3 itemProp="name">{o.kind}</h3>
            {o.photo && (
              <div className="off-photo">
                <img src={o.photo} alt={`Arvomeklarit, ${o.kind.replace("Pääkonttori · ","")} — toimisto`} loading="lazy" />
              </div>
            )}
            <div className="off-map">
              <iframe
                src={o.mapSrc}
                title={`${o.kind} — kartta`}
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                allowFullScreen=""
              />
            </div>
            <address itemProp="address" itemScope itemType="https://schema.org/PostalAddress">
              <span itemProp="streetAddress">{o.street}</span><br/>
              <span itemProp="postalCode">{o.zip}</span> <span itemProp="addressLocality">{o.city}</span>
            </address>
            <a href={`tel:${o.phoneTel}`} className="tnum">{o.phone}</a>
            <a href={o.mapLink} target="_blank" rel="noopener" className="off-dir">Reittiohjeet <span aria-hidden="true">→</span></a>
            <p className="off-transit">{o.transit}</p>
          </article>
        ))}
      </div>
    </div></section>

    {/* Yritystiedot ja valvonta */}
    <section className="section" style={{background:"var(--bg-2)"}}><div className="container">
      <SectionHead eyebrow="Yritystiedot" title="Yhtiö ja valvova viranomainen" lead="Vakuutusmeklaritoiminta on luvanvaraista ja Finanssivalvonnan valvomaa. Tässä viralliset tiedot." />
      <div className="biz-grid">
        <dl className="biz-dl">
          <div className="biz-row"><dt>Toiminimi</dt><dd>Arvomeklarit Oy</dd></div>
          <div className="biz-row"><dt>Y-tunnus</dt><dd className="tnum">2658755-9</dd></div>
          <div className="biz-row"><dt>Käyntiosoite</dt><dd>Vanha Turuntie 14 B 1, 02700 Kauniainen</dd></div>
          <div className="biz-row"><dt>Verkkosivu</dt><dd><a href="https://arvomeklarit.fi/">arvomeklarit.fi</a></dd></div>
          <div className="biz-row"><dt>Sähköposti</dt><dd><a href="mailto:asiakaspalvelu@arvomeklarit.fi">asiakaspalvelu@arvomeklarit.fi</a></dd></div>
        </dl>
        <dl className="biz-dl">
          <div className="biz-row"><dt>Toimilupa</dt><dd>Vakuutusmeklariyhtiö</dd></div>
          <div className="biz-row"><dt>Rekisteri</dt><dd>Vakuutusedustajarekisteri</dd></div>
          <div className="biz-row"><dt>Rekisteröity</dt><dd className="tnum">21.3.2017</dd></div>
          <div className="biz-row"><dt>Valvova viranomainen</dt><dd>Finanssivalvonta</dd></div>
          <div className="biz-row"><dt>Tarkista rekisteröinti</dt><dd><a href="https://www.finanssivalvonta.fi/rekisterit/vakuutusedustajat/" target="_blank" rel="noopener">finanssivalvonta.fi/rekisterit/vakuutusedustajat ↗</a></dd></div>
        </dl>
      </div>
      <p className="biz-note">Vakuutusmeklarin palkkion maksaa asiakas — emme saa palkkioita tai provisioita vakuutusyhtiöiltä. Tämä turvaa puolueettomuuden.</p>
    </div></section>

    <SiteFooter />

    <script type="application/ld+json" dangerouslySetInnerHTML={{__html: JSON.stringify({
      "@context": "https://schema.org",
      "@graph": [
        {"@type":"LocalBusiness","@id":"https://arvomeklarit.fi/#kauniainen","name":"Arvomeklarit Oy — Kauniainen","image":"https://arvomeklarit.fi/og.png","telephone":"+358102742750","email":"asiakaspalvelu@arvomeklarit.fi","address":{"@type":"PostalAddress","streetAddress":"Vanha Turuntie 14 B 1","postalCode":"02700","addressLocality":"Kauniainen","addressCountry":"FI"},"openingHours":"Mo-Fr 09:00-16:00","priceRange":"€€"},
        {"@type":"LocalBusiness","@id":"https://arvomeklarit.fi/#helsinki","name":"Arvomeklarit Oy — Helsinki","telephone":"+358102742754","address":{"@type":"PostalAddress","streetAddress":"Lampputie 12 C","postalCode":"00750","addressLocality":"Helsinki","addressCountry":"FI"},"openingHours":"Mo-Fr 09:00-16:00","priceRange":"€€"}
      ]
    })}} />

    <style>{`
      .kpi-strip{list-style:none;padding:24px 0;margin:0 auto;max-width:880px;display:grid;grid-template-columns:1fr;gap:20px;text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
      @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(32px,3.5vw,42px);color:var(--gold);letter-spacing:-.02em;line-height:1}
      .kpi-label{font-size:14px;color:var(--ink-2);max-width:24ch;margin:0 auto}
      .cal-card{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:24px;max-width:1080px}
      .cal-fallback{padding:24px;text-align:center;color:var(--ink-2);font-size:15px}
      .cal-fallback a{color:var(--gold);font-weight:500;border-bottom:1px solid var(--gold)}

      .contact-grid{display:grid;grid-template-columns:1fr;gap:48px}
      @media(min-width:960px){.contact-grid{grid-template-columns:1.05fr 1fr;gap:64px}}
      .cform{display:flex;flex-direction:column;gap:18px;max-width:560px}
      .cform .frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
      @media(max-width:560px){.cform .frow{grid-template-columns:1fr}}
      .cform label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink-2);font-weight:500;letter-spacing:.04em;text-transform:uppercase}
      .cform input,.cform textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:12px 14px;transition:border-color var(--t);text-transform:none;letter-spacing:0;font-weight:400;font-family:var(--sans)}
      .cform input:focus,.cform textarea:focus{outline:none;border-color:var(--gold)}
      .fcheck{flex-direction:row !important;align-items:flex-start;gap:10px !important;text-transform:none !important;letter-spacing:0 !important;font-weight:400 !important;font-size:14px !important;color:var(--ink-2) !important;line-height:1.5}
      .fcheck input{width:auto;margin-top:3px}
      .fcheck a{color:var(--gold);border-bottom:1px solid var(--gold)}
      .form-ok{background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--green);border-radius:4px;padding:24px 28px;max-width:560px}
      .form-ok strong{display:block;font-family:var(--serif);font-size:20px;color:var(--green);margin-bottom:6px}
      .form-ok p{margin:0;color:var(--ink-2);font-size:15px}
      .finput-err{font-size:13px;color:#B91C1C;font-weight:500;margin-top:4px;text-transform:none;letter-spacing:0}
      .finput-err-block{display:block;padding:12px 14px;background:rgba(185,28,28,.06);border:1px solid rgba(185,28,28,.25);border-radius:6px;line-height:1.5}
      .cform input[aria-invalid="true"],.cform textarea[aria-invalid="true"]{border-color:#B91C1C}
      .cform .btn-primary[disabled]{opacity:.6;cursor:not-allowed}

      @media(min-width:960px){.contact-grid > div{display:flex;flex-direction:column}.contact-grid .sla-box{margin-top:auto}}
      .direct-people{display:grid;grid-template-columns:1fr;gap:24px;margin:0 auto;max-width:1080px}
      @media(min-width:720px){.direct-people{grid-template-columns:1fr 1fr;gap:32px}}
      .direct-card{display:grid;grid-template-columns:1fr;gap:20px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:24px;transition:border-color var(--t),box-shadow var(--t)}
      @media(min-width:560px){.direct-card{grid-template-columns:180px 1fr;gap:28px;padding:28px;align-items:start}}
      .direct-card:hover{border-color:rgba(201,160,80,.45);box-shadow:0 18px 40px -28px rgba(31,41,55,.25)}
      .direct-photo{width:100%;max-width:200px;aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:var(--bg-2)}
      .direct-photo img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(0.15) contrast(1.02);transition:filter var(--t),transform var(--t)}
      .direct-card:hover .direct-photo img{filter:none;transform:scale(1.02)}
      .direct-body{display:flex;flex-direction:column;min-width:0}
      .direct-card h3{font-size:24px;margin:0 0 4px;letter-spacing:-.015em;line-height:1.2}
      .direct-role{font-size:13px;color:var(--gold);font-weight:500;letter-spacing:.04em;text-transform:uppercase;margin:0 0 18px;line-height:1.3}
      .direct-line{display:block;font-size:15px;color:var(--ink);margin:6px 0;transition:color var(--t);word-break:break-word}
      .direct-line:hover{color:var(--gold)}
      .direct-profile{color:var(--gold);font-weight:500;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
      .service-contacts{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:32px}
      @media(min-width:560px){.service-contacts{grid-template-columns:1fr 1fr}}
      .svc-card{background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:4px;padding:18px 20px}
      .svc-card h4{font-family:var(--sans);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);font-weight:600;margin:0 0 6px}
      .svc-desc{font-size:13px;color:var(--ink-2);margin:0 0 10px;line-height:1.5}
      .svc-line{display:block;font-size:14px;color:var(--ink);margin:2px 0;transition:color var(--t);font-family:var(--sans);font-weight:500}
      .svc-line:hover{color:var(--gold)}
      .leaders-title{font-family:var(--serif);font-weight:600;font-size:22px;margin:8px 0 16px;letter-spacing:-.015em}
      .sla-box{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:24px 28px}
      .sla-box h4{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin:0 0 6px;font-family:var(--sans);font-weight:600}
      .sla-box h4:not(:first-child){margin-top:18px}
      .sla-box p{margin:0;font-size:15px;color:var(--ink);line-height:1.55}

      .off-grid{display:grid;grid-template-columns:1fr;gap:32px}
      @media(min-width:880px){.off-grid{grid-template-columns:1fr 1fr;gap:40px}}
      .off-card{background:var(--bg);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;padding:28px 28px 24px}
      .off-card h3{font-size:20px;margin-bottom:16px}
      .off-map{position:relative;width:calc(100% + 56px);margin:0 -28px 20px;height:280px;background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
      .off-map iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.85) contrast(.95)}
      .off-photo{width:calc(100% + 56px);margin:0 -28px 0;height:220px;overflow:hidden;border-top:1px solid var(--line)}
      .off-photo img{width:100%;height:100%;object-fit:cover;display:block}
      .off-photo + .off-map{margin-top:0;border-top:0}
      .off-card address{font-style:normal;font-size:15px;color:var(--ink-2);line-height:1.6;margin-bottom:10px}
      .off-card>a[href^="tel:"]{font-family:var(--serif);font-weight:600;color:var(--ink);font-size:17px;transition:color var(--t);display:inline-block}
      .off-card>a[href^="tel:"]:hover{color:var(--gold)}
      .off-dir{display:inline-flex;align-items:center;gap:6px;color:var(--gold);font-size:14px;font-weight:500;margin-top:10px;padding-bottom:2px;border-bottom:1px solid rgba(201,160,80,.4);align-self:flex-start;transition:gap var(--t),border-color var(--t)}
      .off-dir:hover{border-color:var(--gold);gap:10px}
      .off-transit{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-2);line-height:1.6}
      .off-transit strong{color:var(--ink);font-weight:600}
      @media(max-width:560px){.off-map{height:220px}}

      .biz-grid{display:grid;grid-template-columns:1fr;gap:32px;max-width:1080px;margin:0 auto}
      @media(min-width:760px){.biz-grid{grid-template-columns:1fr 1fr;gap:40px}}
      .biz-dl{margin:0;padding:0}
      .biz-row{display:grid;grid-template-columns:1fr;gap:4px;padding:14px 0;border-bottom:1px solid var(--line)}
      @media(min-width:520px){.biz-row{grid-template-columns:180px 1fr;gap:16px;align-items:baseline}}
      .biz-row:first-child{padding-top:0}
      .biz-row dt{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);font-weight:500;margin:0}
      .biz-row dd{margin:0;font-size:16px;color:var(--ink);line-height:1.5}
      .biz-row dd a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line);transition:text-decoration-color var(--t),color var(--t)}
      .biz-row dd a:hover{color:var(--gold);text-decoration-color:var(--gold)}
      .biz-note{max-width:720px;margin:40px auto 0;padding:20px 24px;background:var(--bg-2);border-left:3px solid var(--gold);font-size:15px;line-height:1.6;color:var(--ink-2);font-style:italic}
      .off-map{position:relative;aspect-ratio:1/1;border:1px solid var(--line);border-radius:10px;overflow:hidden;min-height:280px}
      .map-svg{width:100%;height:100%;display:block}
      .off-map-cap{display:none}
    `}</style>
  </>);
}

function PageAsiakastarinat() {
  const cases = [
    { id: "kuljetus-oy", industry: "Kuljetus", size: "12 MEUR", title: "12 MEUR kuljetusyritys, jolla 26 % säästö", excerpt: "Erittäin suuri kalustomäärä, ehdot päivittämättä neljään vuoteen. Kilpailutus toi nykyaikaiset ehdot ja merkittävän säästön.", saving: "26 %", figure: "−42 000 €/v", quote: "Soitin Matille perjantaina, ja kahdessa kuukaudessa olimme kunnossa.", author: "Toimitusjohtaja, kuljetusala" },
    { id: "rakennus-oy", industry: "Rakennus", size: "18 MEUR", title: "Rakennusliike, jonka vastuuvakuutus oli alimitoitettu", excerpt: "Olemassa oleva turva ei kattanut hankkeita kokoluokassa, jossa yritys jo toimi. Korjasimme katon ja löysimme silti säästöä.", saving: "18 %", figure: "−24 500 €/v", quote: "Vasta kilpailutuksen jälkeen tajusin, kuinka altis olin ollut.", author: "Talousjohtaja, rakennusala" },
    { id: "tuotanto-oy", industry: "Tuotanto", size: "8 MEUR", title: "Tuotantoyritys: korvauspäätös 4× alkuperäistä isompi", excerpt: "Vesivahinko aiheutti tuotantokatkoksen. Vakuutusyhtiön ensitarjous kattoi vain pintavauriot — neuvottelimme keskeytyksenkin mukaan korvaukseen.", saving: "4×", figure: "+186 000 €", quote: "Kahden viikon päästä korvauspäätös oli pöydällä — paljon parempi kuin oma alkuperäinen arviomme.", author: "Toimitusjohtaja, teollisuus" },
    { id: "ict-oy", industry: "ICT", size: "6 MEUR", title: "ICT-konsulttiyrityksen 31 % säästö", excerpt: "Ohjelmistoyritys oli vakuutettu \"asiantuntijatariffilla\" ilman kybervakuutuksen päivitystä. Kilpailutus toi 31 % säästön ja oikein mitoitetun kybervakuutuksen.", saving: "31 %", figure: "−38 000 €/v", quote: "En tiennyt, että SaaS-asiakaskannan vahingot voi rajata pois. Nyt ne ovat kannassa.", author: "CTO, ohjelmistoyritys" },
    { id: "suunnittelu-oy", industry: "Suunnittelu", size: "2,5 MEUR", title: "Arkkitehtitoimiston 24 % säästö ja runoff käyttöön", excerpt: "Vastuuvakuutus 500 000 € — mitoitettu liikevaihdon mukaan, ei suurimman kohteen mukaan. 10 vuoden vastuuaika ei kattanut runoff-jaksoa.", saving: "24 %", figure: "−18 200 €/v", quote: "Ymmärsin vasta kilpailutuksen kautta, että vastuuvakuutuksessa kohteen koko on määräävämpi kuin liikevaihto.", author: "Osakas, arkkitehtitoimisto" },
    { id: "finanssi-oy", industry: "Finanssi", size: "45 MEUR", title: "Kiinteistösijoitusyhtiö: D&O-vastuun nosto puoleen hintaan", excerpt: "Hallituksen vastuuvakuutus oli laajennettu nopeasti yhtiön kasvun mukana — ehtokokonaisuus oli ristiriitainen. Avoin kilpailutus puolitti hinnan.", saving: "52 %", figure: "−54 000 €/v", quote: "Hallituksena halusimme itse tietää, mitä ostamme — ei vain, mitä maksetaan.", author: "Hallituksen puheenjohtaja, kiinteistösijoitus" },
  ];
  const industries = ["Kaikki", "Kuljetus", "Rakennus", "Tuotanto", "ICT", "Suunnittelu", "Finanssi"];
  const [filter, setFilter] = useS3("Kaikki");
  const visible = cases.filter(c => filter === "Kaikki" || c.industry === filter);

  return (<>
    <SiteHeader activeTop="tarinat" />
    <Breadcrumbs items={[{label:"Etusivu",href:"Etusivu.html"},{label:"Asiakastarinat",href:"#"}]} />
    <PageHero eyebrow="Asiakastarinat" title="Konkreettisia tuloksia, anonymisoidusti." intro="Kuusi esimerkkiä siitä, mitä olemme tehneet asiakkaidemme kanssa. Yritysten nimet on poistettu — vakuutustiedot ovat luottamuksellisia." />

    <section className="section" style={{paddingTop:0}}><div className="container">
      <div className="filter-bar">
        <span className="filter-label">Toimiala</span>
        <div className="filter-chips">
          {industries.map(i => (
            <button key={i} className={"chip"+(filter===i?" is-on":"")} onClick={()=>setFilter(i)}>{i}</button>
          ))}
        </div>
      </div>

      <div className="story-grid">
        {visible.map(c => (
          <article key={c.id} className="story-card">
            <div className="story-thumb" aria-hidden="true">
              <div className="story-thumb-grid">
                <span className="story-figure tnum">{c.figure}</span>
                <span className="story-saving">{c.saving} säästö</span>
              </div>
            </div>
            <div className="story-body">
              <div className="story-meta">
                <span className="story-tag">{c.industry}</span>
                <span className="story-size">{c.size} liikevaihto</span>
              </div>
              <h3>{c.title}</h3>
              <p>{c.excerpt}</p>
              <a href={`#case-${c.id}`} onClick={(e)=>{e.preventDefault();const el=document.getElementById("case-"+c.id);if(el){const y=el.getBoundingClientRect().top+window.pageYOffset-80;window.scrollTo({top:y,behavior:"smooth"});history.replaceState(null,"","#case-"+c.id);}}} className="story-link">Lue koko tarina →</a>
            </div>
          </article>
        ))}
      </div>
      {visible.length === 0 && <p style={{color:"var(--ink-2)",padding:"40px 0"}}>Ei tarinoita toimialalta "{filter}".</p>}

      <p className="case-disclaimer">
        Esimerkit perustuvat asiakaskuntamme keskimääräisiin tuloksiin.
        Yksittäisten yritysten nimet on muutettu vakuutusalan
        luottamuksellisuusvaatimusten mukaisesti.
      </p>
    </div></section>

    {/* Detail templates */}
    {cases.map(c => (
      <section key={c.id} id={"case-"+c.id} className="section alt-bg" style={{borderTop:"1px solid var(--line)"}}>
        <div className="container">
          <p className="eyebrow">{c.industry} · {c.size} liikevaihto</p>
          <h2 style={{maxWidth:"22ch",marginTop:8,marginBottom:48}}>{c.title}</h2>
          <div className="case-detail">
            <article className="case-block"><h3>Lähtötilanne</h3><p>Asiakas oli kasvanut nopeasti, mutta vakuutusturva oli pysynyt muutaman vuoden takaisella tasolla. Vakuutusyhtiö ei ollut käynyt asiakkaan luona pitkään aikaan, ja ehdot eivät vastanneet nykyistä toimintaa.</p></article>
            <article className="case-block"><h3>Ratkaisu</h3><p>Teimme kartoituksen, dokumentoimme nykyiset ehdot ja kilpailutimme kokonaisuuden viidellä vakuutusyhtiöllä. Vertailimme tarjouksia ehtotaso-vertailutaulukolla — emme pelkästään hintatasolla.</p></article>
            <article className="case-block case-result"><h3>Tulos</h3><p><strong className="tnum" style={{fontSize:"32px",color:"var(--gold)",fontFamily:"var(--serif)",display:"block",marginBottom:8}}>{c.figure}</strong>{c.saving} säästö vuodessa turvasta tinkimättä. Lisäksi vastuuvakuutuksen taso nostettiin vastaamaan todellista riskitasoa.</p></article>
          </div>
          <figure className="case-quote">
            <span className="case-quote-mark" aria-hidden="true">“</span>
            <blockquote>{c.quote}</blockquote>
            <figcaption>— {c.author}</figcaption>
          </figure>
          <p className="case-disclaimer">
            Tämä esimerkki perustuu asiakaskuntamme keskimääräisiin tuloksiin.
            Yrityksen nimi on muutettu vakuutusalan luottamuksellisuusvaatimusten mukaisesti.
          </p>
        </div>
      </section>
    ))}

    <section className="section">
      <div className="container">
        <div className="oppaat-promo">
          <div className="oppaat-promo-head">
            <p className="eyebrow">Veloituksettomat oppaat</p>
            <h2>Haluatko ymmärtää itse, mitä kannattaa kysyä?</h2>
            <p className="lead">Kokosimme keskeisimmät asiat kolmeen veloituksettomaan oppaaseen. Lataa, lue, hyödynnä — ilman myyntipuhetta.</p>
          </div>
          <ul className="oppaat-promo-list" role="list">
            <li><a href="Oppaat.html#valintaopas"><span className="opp-num tnum">01</span><div><h3>Vakuutusmeklarin valintaopas</h3><p>12-sivuinen PDF — 10 kysymystä, hinnoittelumallit, punaiset liput.</p></div><span className="opp-arrow" aria-hidden="true">→</span></a></li>
            <li><a href="Oppaat.html#vahinkochecklist"><span className="opp-num tnum">02</span><div><h3>Vahinkotilanteen tarkistuslista</h3><p>Tulostettava A4 — ensimmäiset 24 tuntia, dokumentit, ilmoituspohja.</p></div><span className="opp-arrow" aria-hidden="true">→</span></a></li>
            <li><a href="Oppaat.html#kartoitus"><span className="opp-num tnum">03</span><div><h3>Vakuutuskartoituksen 5-vaiheinen prosessi</h3><p>Sähköpostisarja — toista itse tai pyydä meiltä apua.</p></div><span className="opp-arrow" aria-hidden="true">→</span></a></li>
          </ul>
        </div>
      </div>
    </section>

    <PageCTA title="Voisiko sinun tarinasi olla seuraava?" body="30 minuutin veloitukseton kartoitus. Käymme yrityksesi tilanteen läpi ja kerromme, onko säästöpotentiaalia." />
    <SiteFooter />

    <style>{`
      .filter-bar{display:flex;flex-wrap:wrap;gap:16px;align-items:center;padding:20px 0 32px;border-bottom:1px solid var(--line);margin-bottom:48px}
      .filter-label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);font-weight:500}
      .filter-chips{display:flex;flex-wrap:wrap;gap:8px}
      .chip{padding:8px 16px;font-size:14px;background:var(--bg);border:1px solid var(--line);border-radius:999px;color:var(--ink-2);transition:all var(--t)}
      .chip:hover{border-color:var(--gold);color:var(--ink)}
      .chip.is-on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
      .story-grid{display:grid;grid-template-columns:1fr;gap:24px}
      @media(min-width:880px){.story-grid{grid-template-columns:repeat(3,1fr);gap:24px}}
      .story-card{background:var(--bg);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
      .story-card:hover{transform:translateY(-3px);box-shadow:0 16px 32px -20px rgba(31,41,55,.18);border-color:rgba(201,160,80,.4)}
      .story-thumb{aspect-ratio:16/10;background:linear-gradient(135deg,var(--blue) 0%,#16306e 100%);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
      .story-thumb::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent 0 24px,rgba(255,255,255,.03) 24px 25px)}
      .story-thumb-grid{position:relative;text-align:center;padding:24px}
      .story-figure{display:block;font-family:var(--serif);font-weight:600;font-size:42px;color:var(--gold);letter-spacing:-.02em}
      .story-saving{display:block;margin-top:6px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)}
      .story-body{padding:24px 28px 28px;display:flex;flex-direction:column;flex:1}
      .story-meta{display:flex;gap:12px;align-items:center;font-size:12px;margin-bottom:12px}
      .story-tag{background:rgba(201,160,80,.12);color:var(--gold);padding:4px 10px;border-radius:999px;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
      .story-size{color:var(--ink-2);letter-spacing:.04em;text-transform:uppercase}
      .story-card h3{font-size:20px;line-height:1.3;margin-bottom:12px}
      .story-card p{color:var(--ink-2);font-size:15px;line-height:1.6;margin:0 0 18px;flex:1}
      .story-link{align-self:flex-start;color:var(--gold);font-weight:500;font-size:14px;border-bottom:1px solid var(--gold);padding-bottom:2px;transition:gap var(--t)}

      .case-detail{display:grid;grid-template-columns:1fr;gap:24px;max-width:1080px;margin-bottom:48px}
      @media(min-width:880px){.case-detail{grid-template-columns:repeat(3,1fr)}}
      .case-block{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:32px 28px}
      .case-block h3{font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-family:var(--sans);font-weight:600;margin:0 0 14px}
      .case-block p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.7}
      .case-block.case-result{background:var(--blue);color:#fff;border:0}
      .case-block.case-result h3{color:rgba(255,255,255,.7)}
      .case-block.case-result p{color:rgba(255,255,255,.85)}
      .case-quote{position:relative;max-width:880px;margin:0;padding:32px 32px 32px 72px;background:var(--bg);border:1px solid var(--line);border-radius:10px}
      .case-quote-mark{position:absolute;left:28px;top:16px;font-family:var(--serif);font-size:64px;line-height:1;color:var(--gold);opacity:.7}
      .case-quote blockquote{margin:0 0 14px;font-family:var(--serif);font-size:clamp(20px,1.8vw,24px);line-height:1.4;color:var(--ink)}
      .case-quote figcaption{font-size:14px;color:var(--ink-2)}
      .case-disclaimer{margin:32px 0 0;padding:18px 0 0;border-top:1px solid var(--line);font-size:12px;line-height:1.55;color:#6B7280;font-style:italic;max-width:64ch}

      .oppaat-promo{max-width:960px}
      .oppaat-promo-head{margin-bottom:40px}
      .oppaat-promo-head h2{margin:8px 0 16px;max-width:22ch}
      .oppaat-promo-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
      .oppaat-promo-list li{border-bottom:1px solid var(--line)}
      .oppaat-promo-list a{display:grid;grid-template-columns:48px 1fr auto;gap:24px;align-items:center;padding:24px 0;transition:padding var(--t),background var(--t)}
      .oppaat-promo-list a:hover{padding-left:16px;padding-right:16px;background:linear-gradient(90deg,rgba(201,160,80,.04),transparent)}
      .opp-num{font-family:var(--serif);font-size:20px;color:var(--gold);font-weight:600}
      .oppaat-promo-list h3{font-size:20px;margin:0 0 4px}
      .oppaat-promo-list p{margin:0;color:var(--ink-2);font-size:15px}
      .opp-arrow{color:var(--ink-2);font-size:18px;transition:color var(--t),transform var(--t)}
      .oppaat-promo-list a:hover .opp-arrow{color:var(--gold);transform:translateX(4px)}
      @media(max-width:720px){.oppaat-promo-list a{grid-template-columns:36px 1fr;gap:16px}.opp-arrow{display:none}}
    `}</style>
  </>);
}

function LegalPage({ kind }) {
  const isPriv = kind === "privacy";
  const title = isPriv ? "Tietosuojaseloste" : "Käyttöehdot";
  const intro = isPriv
    ? "Arvomeklarit Oy käsittelee henkilötietoja EU:n yleisen tietosuoja-asetuksen (GDPR) mukaisesti. Tämä seloste kertoo, mitä tietoja keräämme, miksi ja miten."
    : "Nämä käyttöehdot koskevat arvomeklarit.fi-verkkosivuston käyttöä. Käyttämällä sivustoa hyväksyt nämä ehdot.";
  const sections = isPriv ? [
    { h: "1. Rekisterinpitäjä", b: "Arvomeklarit Oy (Y-tunnus 2658755-9), Vanha Turuntie 14 B 1, 02700 Kauniainen. Yhtiö on merkitty Finanssivalvonnan ylläpitämään vakuutusedustajarekisteriin (rekisteröity 21.3.2017). Yhteyshenkilö tietosuoja-asioissa: asiakaspalvelu@arvomeklarit.fi." },
    { h: "2. Käsittelyn tarkoitus", b: "Käsittelemme henkilötietoja vakuutusmeklaripalvelun toteuttamiseksi: tarjousten pyytäminen, sopimusten valmistelu, vahinkoneuvottelut, asiakasviestintä ja lakisääteiset velvoitteet." },
    { h: "3. Käsiteltävät tiedot", b: "Yhteystiedot (nimi, sähköposti, puhelin, yritys), yritystiedot (toimiala, henkilöstön määrä, liikevaihto), vakuutustiedot kilpailutuksen ja hoidon yhteydessä, vahinkohistoria sekä viestihistoria." },
    { h: "4. Tietolähteet", b: "Tiedot kerätään pääasiassa asiakkaalta itseltään. Vakuutustiedot voivat tulla vakuutusyhtiöiltä asiakkaan kirjallisella valtakirjalla. Yritystiedot voivat tulla julkisista lähteistä (PRH, YTJ)." },
    { h: "5. Säilytysaika", b: "Asiakassuhteen aikana ja 10 vuotta sen päättymisen jälkeen — meklareita koskeva kirjanpito- ja arkistointivelvoite. Yhteydenottolomakkeen kautta tulleet viestit säilytetään 24 kuukautta." },
    { h: "6. Tietojen luovutus", b: "Tietoja luovutetaan vakuutusyhtiöille kilpailutuksen yhteydessä — vain kirjallisella valtakirjalla. Lakisääteisesti tietoja voidaan luovuttaa Finanssivalvonnalle. Emme myy tai vuokraa tietoja kolmansille osapuolille." },
    { h: "7. Rekisteröidyn oikeudet", b: "Sinulla on oikeus tarkastaa tietosi, oikaista virheelliset tiedot, pyytää tietojen poistoa (lakisääteisten säilytysvelvoitteiden rajoissa), rajoittaa käsittelyä ja siirtää tiedot. Pyynnöt: asiakaspalvelu@arvomeklarit.fi." },
    { h: "8. Evästeet", b: "Sivusto käyttää välttämättömiä evästeitä toiminnan varmistamiseksi sekä analytiikkaevästeitä (Google Analytics) liikenteen mittaamiseen. Voit hallinoida evästeasetuksia evästesuostumuspaneelin kautta." },
    { h: "9. Tietoturva", b: "Henkilötietoja käsitellään luottamuksellisesti. Tiedot säilytetään suojatuissa järjestelmissä, joihin pääsy on rajattu nimettyihin henkilöihin. Sähköposti salataan TLS:llä." },
    { h: "10. Valitusoikeus", b: "Jos koet, että käsittelemme tietojasi tietosuojalainsäädännön vastaisesti, voit tehdä valituksen Tietosuojavaltuutetun toimistolle (tietosuoja.fi)." },
  ] : [
    { h: "1. Sivuston ylläpitäjä", b: "Arvomeklarit Oy (Y-tunnus 2658755-9), Vanha Turuntie 14 B 1, 02700 Kauniainen." },
    { h: "2. Sivuston tarkoitus", b: "Sivusto on tarkoitettu Arvomeklarit Oy:n palveluiden esittelyyn. Sivuston sisältö on yleistä tietoa eikä korvaa henkilökohtaista neuvontaa." },
    { h: "3. Tekijänoikeudet", b: "Sivuston sisältö (tekstit, kuvat, logo) on Arvomeklarit Oy:n omaisuutta. Sisällön kopioiminen tai käyttäminen ilman lupaa on kielletty." },
    { h: "4. Vastuu sisällöstä", b: "Pyrimme varmistamaan, että sivuston tiedot ovat ajantasaisia ja oikeellisia. Emme kuitenkaan vastaa virheellisistä tiedoista aiheutuvista vahingoista. Aina tarkista tieto henkilökohtaisesti." },
    { h: "5. Linkit kolmannen osapuolen sivustoille", b: "Sivusto voi sisältää linkkejä muille sivustoille. Emme vastaa muiden sivustojen sisällöstä tai tietosuojakäytännöistä." },
    { h: "6. Yhteydenottolomake", b: "Yhteydenottolomakkeen kautta lähetettyjä tietoja käsitellään tietosuojaselosteen mukaisesti. Lomake ei ole tarkoitettu kiireellisten vahinkoasioiden hoitoon — soita suoraan." },
    { h: "7. Sovellettava laki", b: "Näihin käyttöehtoihin sovelletaan Suomen lakia. Mahdolliset erimielisyydet ratkaistaan ensisijaisesti neuvottelemalla, toissijaisesti Helsingin käräjäoikeudessa." },
    { h: "8. Käyttöehtojen muutokset", b: "Pidätämme oikeuden muuttaa näitä käyttöehtoja. Muutokset tulevat voimaan, kun ne on julkaistu sivustolla." },
  ];
  return (<>
    <SiteHeader />
    <Breadcrumbs items={[{label:"Etusivu",href:"Etusivu.html"},{label:title,href:"#"}]} />
    <PageHero eyebrow="Juridiset" title={title} intro={intro} />
    <section className="section" style={{paddingTop:0}}><div className="container">
      <div className="legal-meta">
        <p><strong>Voimassa:</strong> 1.11.2025 alkaen · <strong>Päivitetty:</strong> 1.11.2025</p>
        <p className="legal-stub"><em>⚑ Juristin tarkistettavissa — alustava versio.</em></p>
      </div>
      <div className="legal-content">
        {sections.map((s,i)=>(
          <section key={i} className="legal-sec">
            <h2>{s.h}</h2>
            <p>{s.b}</p>
          </section>
        ))}
      </div>
    </div></section>
    <PageCTA title="Kysymyksiä tietosuojasta tai käyttöehdoista?" body="Vastaamme mielellämme. Lähetä viesti asiakaspalvelu@arvomeklarit.fi tai soita." />
    <SiteFooter />
    <style>{`
      .legal-meta{max-width:760px;padding:0 0 32px;border-bottom:1px solid var(--line);margin-bottom:40px}
      .legal-meta p{margin:0 0 4px;font-size:14px;color:var(--ink-2)}
      .legal-stub{font-size:13px !important;color:var(--gold) !important;margin-top:8px !important}
      .legal-content{max-width:760px}
      .legal-sec{padding:28px 0;border-top:1px solid var(--line)}
      .legal-sec:first-child{border-top:0;padding-top:0}
      .legal-sec h2{font-size:22px;margin-bottom:14px}
      .legal-sec p{font-size:16px;line-height:1.75;color:var(--ink-2);margin:0}
    `}</style>
  </>);
}

function PageTietosuoja() { return <LegalPage kind="privacy" />; }
function PageKayttoehdot() { return <LegalPage kind="terms" />; }

window.PageYhteystiedot = PageYhteystiedot;
window.PageAsiakastarinat = PageAsiakastarinat;
window.PageTietosuoja = PageTietosuoja;
window.PageKayttoehdot = PageKayttoehdot;