/* global React, SiteHeader, Breadcrumbs, PageCTA, SiteFooter */
const { useState: useSL, useMemo: useML } = React;

const TOIMIALAT = [
  { id: "kuljetus",  label: "Kuljetus ja logistiikka", min: 20, max: 35 },
  { id: "rakennus",  label: "Rakennusala",             min: 22, max: 32 },
  { id: "tuotanto",  label: "Teollisuus / tuotanto",   min: 18, max: 28 },
  { id: "ict",       label: "ICT ja ohjelmistot",      min: 15, max: 25 },
  { id: "suunnittelu", label: "Suunnittelu ja konsultointi", min: 12, max: 22 },
  { id: "muu",       label: "Muu toimiala",            min: 15, max: 30 },
];
const LIIKEVAIHTO = [
  { id: "u1",   label: "Alle 1 M€",      mid: 0.5 },
  { id: "1-3",  label: "1–3 M€",         mid: 2 },
  { id: "3-10", label: "3–10 M€",        mid: 6.5 },
  { id: "10-30",label: "10–30 M€",       mid: 20 },
  { id: "y30",  label: "Yli 30 M€",      mid: 40 },
];
const HENKILOSTO = [
  { id: "u10",   label: "Alle 10",  mid: 6 },
  { id: "10-30", label: "10–30",    mid: 20 },
  { id: "30-100",label: "30–100",   mid: 60 },
  { id: "y100",  label: "Yli 100",  mid: 150 },
];

function PageSaastolaskuri() {
  const [step, setStep] = useSL(0);
  const [data, setData] = useSL({ toimiala: "", liikevaihto: "", henkilosto: "", maksut: "", nimi: "", email: "", puhelin: "", yritys: "", rooli: "", suostumus: false });
  const [errors, setErrors] = useSL({});
  const [submitted, setSubmitted] = useSL(false);

  const set = (k, v) => { setData(d => ({...d, [k]: v})); setErrors(e => ({...e, [k]: null})); };

  const totalSteps = 5;
  const progress = submitted ? 100 : ((step) / totalSteps) * 100;

  const validate = () => {
    const e = {};
    if (step === 0 && !data.toimiala) e.toimiala = "Valitse toimiala.";
    if (step === 1 && !data.liikevaihto) e.liikevaihto = "Valitse liikevaihtoluokka.";
    if (step === 2 && !data.henkilosto) e.henkilosto = "Valitse henkilömäärä.";
    if (step === 3) {
      const n = parseFloat((data.maksut+"").replace(/\s|€|,/g, "."));
      if (!data.maksut || isNaN(n) || n <= 0) e.maksut = "Anna nykyiset vakuutusmaksut euroina.";
      else if (n < 1000) e.maksut = "Tarkista summa — vaikuttaa hyvin pieneltä.";
    }
    if (step === 4) {
      if (!data.nimi.trim()) e.nimi = "Nimi on pakollinen.";
      if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(data.email)) e.email = "Tarkista sähköpostiosoite.";
      if (!data.suostumus) e.suostumus = "Suostumus tarvitaan tietojen käsittelyyn.";
    }
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const next = () => { if (validate()) setStep(s => Math.min(s+1, totalSteps-1)); };
  const back = () => setStep(s => Math.max(s-1, 0));
  const submit = () => { if (validate()) { setSubmitted(true); window.dataLayer && window.dataLayer.push({event:"saastolaskuri_complete", toimiala: data.toimiala}); } };

  const result = useML(() => {
    const ti = TOIMIALAT.find(t => t.id === data.toimiala);
    const maksut = parseFloat((data.maksut+"").replace(/\s|€|,/g, "."));
    if (!ti || isNaN(maksut)) return null;
    const lo = Math.round(maksut * (ti.min/100));
    const hi = Math.round(maksut * (ti.max/100));
    return { ti, maksut, lo, hi };
  }, [data.toimiala, data.maksut]);

  const fmt = (n) => Math.round(n).toLocaleString("fi-FI").replace(/,/g, " ");

  return (<>
    <SiteHeader />
    <Breadcrumbs items={[{label:"Etusivu",href:"Etusivu.html"},{label:"Säästölaskuri",href:"#"}]} />

    <section className="phero" aria-labelledby="sl-h">
      <div className="container phero-inner">
        <p className="eyebrow">Säästölaskuri</p>
        <h1 id="sl-h">Arvio säästöpotentiaalista — 2 minuutissa.</h1>
        <p className="lead phero-lead">Vastaa viiteen kysymykseen, niin saat toimialakohtaisen säästöarvion. Tarkka luku selviää aina henkilökohtaisessa kartoituksessa — tämä on suuntaa-antava.</p>
      </div>
      <div className="phero-shape" aria-hidden="true">
        <svg viewBox="0 0 600 600" preserveAspectRatio="xMaxYMax slice">
          <defs>
            <radialGradient id="slpg" cx="100%" cy="100%" r="80%">
              <stop offset="0%" stopColor="#C9A050" stopOpacity="0.16" />
              <stop offset="60%" stopColor="#C9A050" stopOpacity="0.05" />
              <stop offset="100%" stopColor="#C9A050" stopOpacity="0" />
            </radialGradient>
          </defs>
          <circle cx="600" cy="600" r="540" fill="url(#slpg)" />
          <circle cx="600" cy="600" r="380" fill="none" stroke="#C9A050" strokeWidth="0.5" strokeOpacity="0.22" />
        </svg>
      </div>
    </section>

    <section className="section" style={{paddingTop:"32px"}}><div className="container">
      <div className="sl-frame" role="region" aria-label="Säästölaskuri">
        {/* Progress */}
        <div className="sl-progress" aria-hidden="true">
          <div className="sl-progress-bar" style={{width: progress+"%"}} />
        </div>
        <div className="sl-progress-meta">
          <span className="sl-progress-step">{submitted ? "Valmis" : `Vaihe ${step+1} / ${totalSteps}`}</span>
          <span className="sl-progress-pct tnum">{Math.round(progress)} %</span>
        </div>

        {!submitted ? (
          <form className="sl-form" onSubmit={(e)=>{e.preventDefault(); step === totalSteps-1 ? submit() : next();}} noValidate>
            {step === 0 && (
              <div className="sl-step">
                <h2>Mikä on toimialasi?</h2>
                <p className="sl-help">Tämä määrittää säästöarvion vaihteluvälin — eri toimialoilla on erilainen säästöpotentiaali vakuutusmaksuissa.</p>
                <div className="sl-radios" role="radiogroup" aria-label="Toimiala">
                  {TOIMIALAT.map(t => (
                    <label key={t.id} className={"sl-radio"+(data.toimiala===t.id?" is-on":"")}>
                      <input type="radio" name="toimiala" value={t.id} checked={data.toimiala===t.id} onChange={()=>set("toimiala", t.id)} />
                      <span className="sl-radio-label">{t.label}</span>
                      <span className="sl-radio-tag tnum">{t.min}–{t.max} %</span>
                    </label>
                  ))}
                </div>
                {errors.toimiala && <p className="sl-err" role="alert">{errors.toimiala}</p>}
              </div>
            )}

            {step === 1 && (
              <div className="sl-step">
                <h2>Mikä on yrityksesi liikevaihto?</h2>
                <p className="sl-help">Käytämme tietoa antaaksemme realistisen säästöalueen.</p>
                <div className="sl-tiles" role="radiogroup" aria-label="Liikevaihto">
                  {LIIKEVAIHTO.map(l => (
                    <button type="button" key={l.id} role="radio" aria-checked={data.liikevaihto===l.id} className={"sl-tile"+(data.liikevaihto===l.id?" is-on":"")} onClick={()=>set("liikevaihto", l.id)}>{l.label}</button>
                  ))}
                </div>
                {errors.liikevaihto && <p className="sl-err" role="alert">{errors.liikevaihto}</p>}
              </div>
            )}

            {step === 2 && (
              <div className="sl-step">
                <h2>Henkilömäärä?</h2>
                <p className="sl-help">Henkilöstön koko vaikuttaa työtapaturma- ja henkilövakuutusten hintaan.</p>
                <div className="sl-tiles sl-tiles-4" role="radiogroup" aria-label="Henkilöstö">
                  {HENKILOSTO.map(h => (
                    <button type="button" key={h.id} role="radio" aria-checked={data.henkilosto===h.id} className={"sl-tile"+(data.henkilosto===h.id?" is-on":"")} onClick={()=>set("henkilosto", h.id)}>{h.label}</button>
                  ))}
                </div>
                {errors.henkilosto && <p className="sl-err" role="alert">{errors.henkilosto}</p>}
              </div>
            )}

            {step === 3 && (
              <div className="sl-step">
                <h2>Nykyiset vakuutusmaksut yhteensä?</h2>
                <p className="sl-help">Karkea arvio riittää. Käytämme tätä laskeaksemme euromääräisen säästöpotentiaalin.</p>
                <label className="sl-input-label" htmlFor="sl-maksut">Vakuutusmaksut yhteensä vuodessa (€)</label>
                <div className="sl-input-wrap">
                  <input
                    id="sl-maksut"
                    type="text"
                    inputMode="numeric"
                    autoComplete="off"
                    placeholder="esim. 24 000"
                    value={data.maksut}
                    onChange={e => set("maksut", e.target.value.replace(/[^\d\s.,]/g, ""))}
                    aria-invalid={!!errors.maksut}
                    aria-describedby={errors.maksut ? "sl-err-maksut" : "sl-help-maksut"}
                  />
                  <span className="sl-input-suffix" aria-hidden="true">€/vuosi</span>
                </div>
                {!errors.maksut && <p id="sl-help-maksut" className="sl-input-help">Nykyinen vakuutusyhtiön kokonaislaskutus vuodessa (sis. alv).</p>}
                {errors.maksut && <p id="sl-err-maksut" className="sl-err" role="alert">{errors.maksut}</p>}
              </div>
            )}

            {step === 4 && (
              <div className="sl-step">
                <h2>Mihin lähetämme arvion?</h2>
                <p className="sl-help">Saat tuloksen heti tällä sivulla. Yhteystiedot käytetään vain henkilökohtaiseen yhteydenottoon — emme lähetä uutiskirjeitä.</p>
                <div className="sl-grid">
                  <label>Nimi *<input type="text" autoComplete="name" value={data.nimi} onChange={e=>set("nimi",e.target.value)} aria-invalid={!!errors.nimi} aria-describedby={errors.nimi?"sl-err-nimi":undefined} /></label>
                  <label>Yritys<input type="text" autoComplete="organization" value={data.yritys} onChange={e=>set("yritys",e.target.value)} /></label>
                  <label>Sähköposti *<input type="email" autoComplete="email" value={data.email} onChange={e=>set("email",e.target.value)} aria-invalid={!!errors.email} aria-describedby={errors.email?"sl-err-email":undefined} /></label>
                  <label>Puhelin<input type="tel" autoComplete="tel" value={data.puhelin} onChange={e=>set("puhelin",e.target.value)} /></label>
                  <label className="sl-grid-full">Rooli yrityksessä<input type="text" autoComplete="organization-title" placeholder="esim. Toimitusjohtaja, Talousjohtaja, Yrittäjä" value={data.rooli} onChange={e=>set("rooli",e.target.value)} /></label>
                </div>
                {errors.nimi && <p id="sl-err-nimi" className="sl-err" role="alert">{errors.nimi}</p>}
                {errors.email && <p id="sl-err-email" className="sl-err" role="alert">{errors.email}</p>}
                <label className="sl-consent">
                  <input type="checkbox" checked={data.suostumus} onChange={e=>set("suostumus",e.target.checked)} aria-invalid={!!errors.suostumus} aria-describedby={errors.suostumus?"sl-err-sus":undefined} />
                  <span>Hyväksyn <a href="Tietosuoja.html">tietosuojaselosteen</a> ja annan luvan käsitellä tietojani arvion lähettämistä ja yhteydenottoa varten.</span>
                </label>
                {errors.suostumus && <p id="sl-err-sus" className="sl-err" role="alert">{errors.suostumus}</p>}
              </div>
            )}

            <div className="sl-actions">
              {step > 0 && <button type="button" className="btn btn-ghost" onClick={back}>← Takaisin</button>}
              {step < totalSteps-1 && <button type="submit" className="btn btn-primary sl-next">Jatka →</button>}
              {step === totalSteps-1 && <button type="submit" className="btn btn-gold sl-next">Näytä arvio →</button>}
            </div>
          </form>
        ) : (
          <div className="sl-result" role="region" aria-live="polite">
            <p className="eyebrow" style={{color:"var(--gold)"}}>Säästöarvio</p>
            <h2>Toimialasi pk-yritykset säästävät tyypillisesti <span className="sl-result-pct tnum">{result.ti.min}–{result.ti.max} %</span> vakuutusmaksuissa.</h2>

            <div className="sl-result-num">
              <p className="sl-result-eyebrow">Sinun nykyisillä maksuillasi tämä tarkoittaisi karkeasti</p>
              <p className="sl-result-big tnum">{fmt(result.lo)}–{fmt(result.hi)} €</p>
              <p className="sl-result-sub">säästöä vuodessa · turvasta tinkimättä</p>
            </div>

            <ul className="sl-result-meta">
              <li><span className="sl-meta-k">Toimiala</span><span>{result.ti.label}</span></li>
              <li><span className="sl-meta-k">Nykyiset maksut</span><span className="tnum">{fmt(result.maksut)} €/v</span></li>
              <li><span className="sl-meta-k">Säästöalue</span><span className="tnum">{result.ti.min}–{result.ti.max} %</span></li>
            </ul>

            <div className="sl-result-cta">
              <h3>Tarkka säästö selviää 30 minuutin kartoituksessa</h3>
              <p>Kun käymme yrityksesi tilanteen läpi henkilökohtaisesti, saat täsmällisen luvun — veloituksetonta arviota varten emme tarvitse vakuutuspapereita.</p>
              <a href="Yhteystiedot.html" className="btn btn-gold">Varaa veloitukseton kartoitus →</a>
            </div>

            <p className="sl-disclaimer"><strong>Huom:</strong> Arvio perustuu toimialan keskimääräisiin säästöprosentteihin asiakkaidemme aineistosta. Yksittäisen yrityksen säästö voi olla suurempi tai pienempi — riippuu mm. siitä, kuinka kauan vakuutuksia ei ole kilpailutettu, vahinkohistoriasta ja toiminnan luonteesta.</p>

            <button type="button" className="btn btn-ghost" onClick={()=>{setSubmitted(false); setStep(0);}}>← Aloita alusta</button>
          </div>
        )}
      </div>
    </div></section>

    <PageCTA title="Haluatko tarkan luvun? Veloituksetta, ei sitoumusta." body="30 minuutin kartoitus. Käymme yrityksesi tilanteen läpi ja kerromme, mitä säästöjä realistisesti voisimme löytää." />
    <SiteFooter />

    <style>{`
      .phero h1{max-width:18ch}

      .sl-frame{max-width:760px;margin:0 auto;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:40px clamp(24px,4vw,48px) 48px;position:relative}
      .sl-progress{height:3px;background:var(--bg-2);border-radius:2px;overflow:hidden;margin-bottom:14px}
      .sl-progress-bar{height:100%;background:var(--gold);transition:width .35s cubic-bezier(.4,0,.2,1)}
      .sl-progress-meta{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:36px}
      .sl-progress-step{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);font-weight:500}
      .sl-progress-pct{font-family:var(--serif);font-weight:600;color:var(--gold);font-size:14px}

      .sl-step h2{font-size:clamp(24px,2.6vw,32px);margin-bottom:8px;line-height:1.2}
      .sl-help{color:var(--ink-2);font-size:15px;line-height:1.6;margin:0 0 28px;max-width:540px}

      .sl-radios{display:flex;flex-direction:column;gap:8px}
      .sl-radio{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:16px 18px;border:1px solid var(--line);border-radius:8px;background:var(--bg);cursor:pointer;transition:all var(--t)}
      .sl-radio:hover{border-color:rgba(201,160,80,.5);background:#FBF8F2}
      .sl-radio.is-on{border-color:var(--gold);background:rgba(201,160,80,.06);box-shadow:0 0 0 1px var(--gold) inset}
      .sl-radio input[type="radio"]{appearance:none;width:18px;height:18px;border:1.5px solid var(--ink-2);border-radius:50%;position:relative;cursor:pointer;transition:border-color var(--t)}
      .sl-radio.is-on input[type="radio"]{border-color:var(--gold)}
      .sl-radio.is-on input[type="radio"]::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--gold)}
      .sl-radio-label{font-size:16px;color:var(--ink);font-weight:500}
      .sl-radio-tag{font-family:var(--serif);font-size:14px;color:var(--ink-2);font-weight:500}
      .sl-radio.is-on .sl-radio-tag{color:var(--gold)}

      .sl-tiles{display:grid;grid-template-columns:1fr;gap:10px}
      @media(min-width:640px){.sl-tiles{grid-template-columns:repeat(5,1fr);gap:8px}}
      .sl-tiles-4{}
      @media(min-width:640px){.sl-tiles-4{grid-template-columns:repeat(4,1fr)}}
      .sl-tile{padding:18px 14px;border:1px solid var(--line);border-radius:8px;background:var(--bg);font-size:15px;font-weight:500;color:var(--ink);cursor:pointer;transition:all var(--t);text-align:center}
      .sl-tile:hover{border-color:rgba(201,160,80,.5);background:#FBF8F2}
      .sl-tile.is-on{border-color:var(--gold);background:rgba(201,160,80,.08);color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}

      .sl-input-label{display:block;font-size:13px;color:var(--ink-2);font-weight:500;letter-spacing:.04em;text-transform:uppercase;margin-bottom:8px}
      .sl-input-wrap{position:relative;max-width:360px}
      .sl-input-wrap input{font:inherit;font-family:var(--serif);font-size:28px;font-weight:600;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:16px 100px 16px 18px;width:100%;transition:border-color var(--t);font-feature-settings:"tnum" 1,"lnum" 1}
      .sl-input-wrap input:focus{outline:none;border-color:var(--gold)}
      .sl-input-suffix{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:14px;color:var(--ink-2);font-weight:500}
      .sl-input-help{margin-top:8px;font-size:13px;color:var(--ink-2);font-style:italic}

      .sl-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
      @media(max-width:560px){.sl-grid{grid-template-columns:1fr}}
      .sl-grid-full{grid-column:1/-1}
      .sl-grid label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink-2);font-weight:500;letter-spacing:.04em;text-transform:uppercase}
      .sl-grid input{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)}
      .sl-grid input:focus{outline:none;border-color:var(--gold)}
      .sl-grid input[aria-invalid="true"]{border-color:#B91C1C}

      .sl-consent{display:flex;align-items:flex-start;gap:10px;margin-top:20px;font-size:14px;color:var(--ink-2);line-height:1.5}
      .sl-consent input{margin-top:3px;flex-shrink:0;width:18px;height:18px;cursor:pointer}
      .sl-consent a{color:var(--gold);border-bottom:1px solid var(--gold)}

      .sl-err{margin:8px 0 0;color:#B91C1C;font-size:13px;font-weight:500}

      .sl-actions{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}
      .sl-actions .btn-ghost{margin-right:auto}
      .sl-next{margin-left:auto}

      /* Result */
      .sl-result h2{font-size:clamp(22px,2.4vw,28px);line-height:1.3;margin:6px 0 32px;max-width:24ch}
      .sl-result-pct{color:var(--gold)}
      .sl-result-num{padding:32px 36px;background:var(--blue);color:#fff;border-radius:10px;margin-bottom:32px;text-align:center;position:relative;overflow:hidden}
      .sl-result-num::before{content:"";position:absolute;right:-60px;bottom:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(201,160,80,.2) 0%,transparent 70%);pointer-events:none}
      .sl-result-eyebrow{position:relative;font-size:13px;color:rgba(255,255,255,.65);letter-spacing:.04em;text-transform:uppercase;margin:0 0 12px;font-weight:500}
      .sl-result-big{position:relative;font-family:var(--serif);font-weight:600;font-size:clamp(36px,5vw,52px);line-height:1.05;color:var(--gold);margin:0;letter-spacing:-.02em}
      .sl-result-sub{position:relative;font-family:var(--serif);font-size:16px;color:rgba(255,255,255,.85);margin:12px 0 0;font-style:italic}

      .sl-result-meta{list-style:none;padding:0;margin:0 0 32px;display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
      .sl-result-meta li{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
      .sl-result-meta li:last-child{border-bottom:0}
      .sl-meta-k{font-size:13px;color:var(--ink-2);letter-spacing:.04em;text-transform:uppercase;font-weight:500}
      .sl-result-meta li>span:last-child{font-family:var(--serif);font-weight:600;color:var(--ink);font-size:16px}

      .sl-result-cta{padding:32px 36px;background:rgba(201,160,80,.08);border:1px solid rgba(201,160,80,.3);border-radius:10px;margin-bottom:24px}
      .sl-result-cta h3{font-size:22px;margin-bottom:10px}
      .sl-result-cta p{margin:0 0 20px;font-size:15px;color:var(--ink);line-height:1.6}
      .sl-disclaimer{font-size:13px;color:var(--ink-2);font-style:italic;line-height:1.6;margin:24px 0;padding:16px 20px;background:var(--bg-2);border-radius:6px;border-left:2px solid var(--line)}
      .sl-disclaimer strong{color:var(--ink);font-weight:600;font-style:normal}
    `}</style>
  </>);
}

window.PageSaastolaskuri = PageSaastolaskuri;