/* ===================== Page sections & pages ===================== */

/* ---------- HERO ---------- */
function Hero({ go, t }) {
  const split = t.heroLayout !== "centered";
  return (
    <section className={`hero ${split ? "hero--split" : "hero--center"}`}>
      <div className="wrap hero__inner">
        <div className="hero__copy">
          {t.showRating && (
            <div className="chip hero__rating">
              <span className="stars">{"★★★★★"}</span>
              <b style={{fontWeight:800}}>Lähes 100</b>
              <span className="muted" style={{fontWeight:600}}>tyytyväistä asiakasta Oulussa</span>
            </div>
          )}
          <h1 className="hero__title">Kirkkaat ikkunat<br/><span className="hl">vaivatta.</span></h1>
          <p className="hero__lead">Laadukasta ja ammattitaitoista ikkunanpesua Oulun alueella. Saamme kotisi tai yrityksesi ikkunat kirkkaiksi ja puhtaiksi — jotta valo pääsee sisään ja maisemia on kiva katsella.</p>
          <div className="hero__cta">
            <button className="btn btn--primary btn--lg" onClick={()=>go("hintalaskuri")}><Ic.euro style={{width:19,height:19}}/> Laske ikkunanpesun hinta</button>
          </div>
          <div className="hero__points">
            {["Kotitalousvähennys 35 %","Ei arvonlisäveroa","Joustavat aikataulut"].map(p=>(
              <span key={p}><Ic.check style={{color:"var(--brand)",width:17,height:17}}/> {p}</span>
            ))}
          </div>
          <div className="hero__pay">
            <Ic.wallet style={{width:15,height:15,color:"var(--muted)",flexShrink:0}}/>
            <span>{D.payment.methods.join(" · ")} · {D.payment.business}</span>
          </div>
        </div>
        {split && (
          <div className="hero__media">
            <img src="/images/pesijat-header.png" alt="Pesijät työssä" className="hero__img" style={{width:"100%",height:460,objectFit:"cover",borderRadius:18,display:"block"}} loading="eager"/>
            <div className="hero__float card">
              <div className="hero__floatTop"><Ic.spark style={{color:"var(--brand)"}}/> Tyytyväiset asiakkaat</div>
              <div className="hero__floatNum">~100 <span>asiakasta Oulussa</span></div>
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

/* ---------- TRUST BAR ---------- */
function TrustBar() {
  return (
    <section className="trustbar">
      <div className="wrap trustbar__grid">
        {D.stats.map((s,i)=>(
          <div className="tstat" key={i}>
            <div className="tstat__num"><CountUp value={s.value} decimals={s.decimals||0} prefix={s.prefix||""} suffix={s.suffix||""}/></div>
            <div className="tstat__label">{s.label}</div>
            <div className="tstat__sub">{s.sub}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------- SERVICES ---------- */
function Services({ go }) {
  return (
    <section className="section" id="palvelut">
      <div className="wrap">
        <div className="sec-head">
          <div>
            <div className="eyebrow">Palvelut</div>
            <h2 className="sec-title">Valitse sinulle sopiva pesu</h2>
          </div>
          <p className="lead" style={{maxWidth:440}}>Normaali ikkunanpesu sisältää kaikkien ikkunapintojen pesun sekä tarvittaessa välien pyyhinnän. Sälekaihtimien pyyhintä 3 € / kpl lisäpalveluna.</p>
        </div>
        <div className="svc-grid">
          {D.services.map((s,i)=>(
            <article className="svc card" key={s.id}>
              <img src="/images/ikkunat-auki.png" alt={s.title} style={{width:"100%",height:180,objectFit:"cover",objectPosition:`${i*50}% center`,borderRadius:"12px 12px 0 0",display:"block"}} loading="lazy"/>
              <div className="svc__body">
                {s.tag && <span className="svc__tag">{s.tag}</span>}
                <h3>{s.title}</h3>
                <p className="muted">{s.desc}</p>
                <button className="svc__link" onClick={()=>go("ikkunanpesu")}>Lue lisää <Ic.arrow/></button>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- REASONS ---------- */
function Reasons() {
  return (
    <section className="section section--soft">
      <div className="wrap">
        <div className="sec-head sec-head--center">
          <div className="eyebrow">Miksi Lasinen</div>
          <h2 className="sec-title">Kuusi syytä valita meidät</h2>
        </div>
        <div className="reason-grid">
          {D.reasons.map((r,i)=>(
            <div className="reason" key={i}>
              <span className="reason__ic"><Ic.check/></span>
              <h4>{r.t}</h4>
              <p className="muted">{r.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- REVIEWS ---------- */
function Reviews() {
  const doubled = [...D.reviews, ...D.reviews];
  return (
    <section className="section" style={{paddingBottom:0}}>
      <div className="wrap">
        <div className="rev-bar card">
          <div className="rev-bar__l"><span className="stars" style={{fontSize:18}}>{"★★★★★"}</span> <b>5 / 5</b></div>
          <div className="rev-bar__score">Kaikki arvostelut 5 tähteä</div>
        </div>
      </div>
      <div className="rev-marquee">
        <div className="rev-track">
          {doubled.map((r, i) => (
            <article className="rev card rev--mq" key={i}>
              <header className="rev__head">
                <span className="rev__av" style={{background:r.c}}>{r.i}</span>
                <div className="rev__name">{r.n}</div>
              </header>
              <div className="stars">{"★★★★★"}</div>
              <p className="rev__text">{r.t}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- HOW IT WORKS ---------- */
function Steps({ go }) {
  const steps = [
    { n:"1", t:"Laske hinta", d:"Valitse ikkunatyypit ja määrät laskurista — hinta näkyy heti." },
    { n:"2", t:"Soita suoraan", d:"Heti kun olet valinnut ikkunat, soittonumero ilmestyy laskuriin. Soita — sovitaan aika." },
    { n:"3", t:"Nauti näkymistä", d:"Pesemme ikkunasi raidattomaksi ja nautit kirkkaista näkymistä vaivatta." },
  ];
  return (
    <section className="section section--soft">
      <div className="wrap">
        <div className="sec-head sec-head--center">
          <div className="eyebrow">Näin se toimii</div>
          <h2 className="sec-title">Tilauksesta kirkkaisiin ikkunoihin</h2>
        </div>
        <div className="steps">
          {steps.map((s,i)=>(
            <div className="step-card" key={i}>
              <span className="step-card__n">{s.n}</span>
              <h4>{s.t}</h4>
              <p className="muted">{s.d}</p>
            </div>
          ))}
        </div>
        <div className="center" style={{marginTop:38}}>
          <button className="btn btn--primary btn--lg" onClick={()=>go("hintalaskuri")}>Aloita laskurista <Ic.arrow/></button>
        </div>
      </div>
    </section>
  );
}

/* ---------- FAQ ---------- */
function Faq({ go }) {
  const [open, setOpen] = useState(0);
  return (
    <section className="section">
      <div className="wrap faq-wrap">
        <div className="faq-aside">
          <div className="eyebrow">UKK</div>
          <h2 className="sec-title">Usein kysyttyä</h2>
          <p className="lead" style={{marginTop:14}}>Hinta määräytyy ikkunoiden lukumäärän ja tyyppien mukaan. Näe oma hintasi heti laskurissa.</p>
          <button className="btn btn--primary" style={{marginTop:22}} onClick={()=>go("hintalaskuri")}><Ic.euro/> Laske hinta</button>
        </div>
        <div className="acc faq-acc">
          {D.faqs.map((f,i)=>(
            <div className={`acc__item ${open===i?"open":""}`} key={i}>
              <button className="acc__head" onClick={()=>setOpen(open===i?-1:i)}>
                {f.q}<span className="acc__icon"><Ic.plus/></span>
              </button>
              <div className="acc__body" style={{maxHeight: open===i ? 460 : 0}}>
                <div>{f.a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- CTA BAND ---------- */
function CtaBand({ go }) {
  return (
    <section className="ctaband">
      <div className="wrap ctaband__inner">
        <div>
          <h2>Valmis kirkkaisiin ikkunoihin?</h2>
          <p>Laske hinta laskurissa — soittonumero ilmestyy kun olet valinnut ikkunat.</p>
          <p className="ctaband__pay"><Ic.wallet style={{width:14,height:14,verticalAlign:"middle",marginRight:5}}/>{D.payment.methods.join(" · ")} · {D.payment.business}</p>
        </div>
        <div className="ctaband__btns">
          <button className="btn btn--white btn--lg" onClick={()=>go("hintalaskuri")}>Laske hinta <Ic.arrow/></button>
        </div>
      </div>
    </section>
  );
}

/* ---------- BEFORE / AFTER SLIDER ---------- */
function BeforeAfterSlider() {
  const [pos, setPos] = useState(50);
  const ref = useRef(null);
  const dragging = useRef(false);

  const moveTo = (clientX) => {
    const r = ref.current?.getBoundingClientRect();
    if (!r) return;
    setPos(Math.max(2, Math.min(98, (clientX - r.left) / r.width * 100)));
  };

  useEffect(() => {
    const stop = () => { dragging.current = false; };
    window.addEventListener("mouseup", stop);
    window.addEventListener("touchend", stop);
    return () => { window.removeEventListener("mouseup", stop); window.removeEventListener("touchend", stop); };
  }, []);

  const layer = (xPos, clip) => ({
    position: "absolute", inset: 0,
    backgroundImage: "url('/images/ennen-jalkeen.png')",
    backgroundRepeat: "no-repeat",
    backgroundSize: "200% auto",
    backgroundPosition: `${xPos} center`,
    ...(clip ? { clipPath: `inset(0 ${100 - pos}% 0 0)` } : {}),
  });

  return (
    <div ref={ref}
      style={{ position:"relative", overflow:"hidden", borderRadius:16, height:460, maxWidth:860, margin:"0 auto", cursor:"ew-resize", userSelect:"none", touchAction:"none", boxShadow:"0 6px 32px rgba(0,0,0,.10)" }}
      onMouseDown={(e) => { dragging.current = true; moveTo(e.clientX); }}
      onMouseMove={(e) => { if (dragging.current) moveTo(e.clientX); }}
      onTouchStart={(e) => { dragging.current = true; moveTo(e.touches[0].clientX); }}
      onTouchMove={(e) => { moveTo(e.touches[0].clientX); }}>

      {/* After — right half of composite image */}
      <div style={layer("100%", false)} />
      {/* Before — left half, clipped to slider position */}
      <div style={layer("0%", true)} />

      {/* Labels */}
      <div style={{ position:"absolute", top:16, left:16, background:"rgba(0,0,0,.55)", color:"#fff", fontSize:13, fontWeight:700, padding:"5px 14px", borderRadius:20, pointerEvents:"none", opacity: pos > 8 ? 1 : 0, transition:"opacity .2s" }}>Ennen</div>
      <div style={{ position:"absolute", top:16, right:16, background:"rgba(37,99,235,.85)", color:"#fff", fontSize:13, fontWeight:700, padding:"5px 14px", borderRadius:20, pointerEvents:"none", opacity: pos < 92 ? 1 : 0, transition:"opacity .2s" }}>Jälkeen</div>

      {/* Divider + handle */}
      <div style={{ position:"absolute", top:0, bottom:0, left:`${pos}%`, width:2, background:"rgba(255,255,255,.95)", transform:"translateX(-50%)", pointerEvents:"none", boxShadow:"0 0 10px rgba(0,0,0,.25)" }}>
        <div style={{ position:"absolute", top:"50%", left:"50%", transform:"translate(-50%,-50%)", width:46, height:46, borderRadius:"50%", background:"#fff", boxShadow:"0 2px 18px rgba(0,0,0,.22)", display:"flex", alignItems:"center", justifyContent:"center" }}>
          <svg width="22" height="14" viewBox="0 0 22 14" fill="none">
            <path d="M7 7H1M1 7L4 4M1 7L4 10" stroke="var(--brand)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
            <path d="M15 7H21M21 7L18 4M21 7L18 10" stroke="var(--brand)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
      </div>
    </div>
  );
}

function BeforeAfter() {
  return (
    <section className="section section--soft">
      <div className="wrap">
        <div className="sec-head sec-head--center">
          <div className="eyebrow">Tulokset</div>
          <h2 className="sec-title">Näin se muuttuu</h2>
          <p className="lead" style={{maxWidth:480,marginTop:6}}>Vedä slideria ja katso kuinka ammattimainen pesu muuttaa ikkunat.</p>
        </div>
        <BeforeAfterSlider/>
        <p style={{textAlign:"center",fontSize:13,color:"var(--muted)",marginTop:12}}>← Vedä slideria →</p>
      </div>
    </section>
  );
}

/* ===================== PAGES ===================== */
function Etusivu({ go, t }) {
  return (<>
    <Hero go={go} t={t}/>
    <TrustBar/>
    <Services go={go}/>
    <BeforeAfter/>
    <Reviews/>
    <Reasons/>
    <Steps go={go}/>
    <Faq go={go}/>
    <CtaBand go={go}/>
  </>);
}

function IkkunanpesuPage({ go }) {
  const feats = [
    { ic:"spark", t:"Raidaton lopputulos", d:"Käymme jokaisen pinnan huolella läpi — ei kalkkiraitoja eikä pölyä." },
    { ic:"window", t:"Sinun tarpeesi mukaan", d:"Pesemme kaikki pinnat välyksineen, vain ulkopinnat tai ulko- ja sisäpinnat." },
    { ic:"shield", t:"Myös korkeat ikkunat", d:"Suuret ja korkeat ikkunat hoituvat jatkovarsilla ja tikkailla turvallisesti." },
    { ic:"wallet", t:"Kotitalousvähennys", d:"Vuonna 2026 saat 35 % hinnasta takaisin verotuksessa. Hintoihin ei lisätä ALV:tä." },
  ];
  return (<>
    <section className="page-hero">
      <div className="wrap page-hero__inner">
        <div>
          <div className="eyebrow">Palvelu</div>
          <h1 className="page-hero__title">Ikkunanpesu</h1>
          <p className="lead" style={{maxWidth:520, marginTop:16}}>Anna ikkunoidesi pesu ammattilaisten huoleksi ja nauti kirkkaista näkymistä. Hoidamme kodit ja yritykset Oulun alueella.</p>
          <div className="hero__cta" style={{marginTop:26}}>
            <button className="btn btn--primary btn--lg" onClick={()=>go("hintalaskuri")}><Ic.euro style={{width:19,height:19}}/> Laske hinta</button>
          </div>
        </div>
        <img src="/images/ennen-jalkeen-teksteilla.png" alt="Ikkunanpesu ennen ja jälkeen" style={{width:"100%",maxWidth:480,height:360,objectFit:"cover",borderRadius:16,display:"block"}} loading="lazy"/>
      </div>
    </section>
    <section className="section">
      <div className="wrap">
        <div className="feat-grid">
          {feats.map((f,i)=>(
            <div className="feat card" key={i}>
              <span className="feat__ic">{Ic[f.ic]()}</span>
              <h3>{f.t}</h3>
              <p className="muted">{f.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
    <section className="section section--soft">
      <div className="wrap">
        <div className="sec-head sec-head--center">
          <div className="eyebrow">Mitä pesu sisältää</div>
          <h2 className="sec-title">Valitse pesutapa tarpeesi mukaan</h2>
          <p className="lead" style={{maxWidth:560,marginTop:6}}>Normaali ikkunanpesu sisältää kaikkien ikkunapintojen pesun sekä tarvittaessa ikkunoiden välien pyyhinnän. Sälekaihtimien pyyhintä 3 € / kpl lisäpalveluna — ei saatavilla pelkässä ulkopesusta.</p>
        </div>
        <div className="reason-grid">
          {D.services.map((s)=>(
            <div className="reason" key={s.id}>
              <span className="reason__ic"><Ic.window/></span>
              <h4>{s.title}</h4>
              <p className="muted">{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
    <Reasons/>
    <Steps go={go}/>
    <Faq go={go}/>
    <CtaBand go={go}/>
  </>);
}

function MeistaPage({ go }) {
  const values = [
    { ic:"spark", t:"Huolellisuus", d:"Käymme jokaisen pinnan läpi ja varmistamme, ettei jää raitoja tai pölyä." },
    { ic:"clock", t:"Asiakaslähtöisyys", d:"Otamme toiveesi aina huomioon ja joustamme aikataulussa sinun mukaasi." },
    { ic:"wallet", t:"Reilu hinta", d:"Selkeät hinnat ilman arvonlisäveroa — ja kotitalousvähennys päälle." },
  ];
  return (<>
    <section className="page-hero">
      <div className="wrap page-hero__inner">
        <div>
          <div className="eyebrow">Meistä</div>
          <h1 className="page-hero__title">Kaksi nuorta yrittäjää Oulusta</h1>
          <p className="lead" style={{maxWidth:520, marginTop:16}}>Olemme kaksi nuorta ja innokasta yrittäjää Oulusta. Yrittäjyytemme alkoi alkukesästä 2024, kun piti keksiä kesäksi tekemistä. Aloitimme kaikenlaisilla piha- ja aputöillä, ja sittemmin intohimo ohjasi meidät ikkunanpesun pariin.</p>
          <p className="lead" style={{maxWidth:520, marginTop:14}}>Pesemme ikkunoita jo toista vuotta ja takana on lähes 100 tyytyväistä asiakasta. Palvelemme asiakaslähtöisesti ja otamme asiakkaan toiveet aina huomioon.</p>
        </div>
        <img src="/images/tiimi.png" alt="Lasinen — Henri ja Severi" style={{width:"100%",maxWidth:480,height:340,objectFit:"cover",borderRadius:16,display:"block"}} loading="lazy"/>
      </div>
    </section>
    <section className="section section--soft">
      <div className="wrap">
        <div className="sec-head sec-head--center">
          <div className="eyebrow">Arvomme</div>
          <h2 className="sec-title">Mihin sitoudumme</h2>
        </div>
        <div className="steps">
          {values.map((v,i)=>(
            <div className="step-card" key={i}>
              <span className="feat__ic" style={{marginBottom:14}}>{Ic[v.ic]()}</span>
              <h4>{v.t}</h4>
              <p className="muted">{v.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
    <section className="section">
      <div className="wrap">
        <div className="sec-head sec-head--center">
          <div className="eyebrow">Tekijät</div>
          <h2 className="sec-title">Kaksi yrittäjää Oulusta</h2>
        </div>
        <div className="reason-grid" style={{maxWidth:760, margin:"0 auto", gridTemplateColumns:"repeat(2, 1fr)"}}>
          {D.people.map((p)=>(
            <div className="reason" key={p.email} style={{display:"flex",flexDirection:"column",gap:6}}>
              <div style={{display:"flex",alignItems:"center",gap:14,marginBottom:6}}>
                <span className="rev__av" style={{background:p.color}}>{p.initial}</span>
                <h4 style={{margin:0}}>{p.name}</h4>
              </div>
              <p className="muted" style={{fontSize:14}}>Yrittäjä · Oulun alue</p>
              <span className="muted" style={{fontSize:13.5,marginTop:4}}>Y-tunnus: {p.ytunnus}</span>
            </div>
          ))}
        </div>

      </div>
    </section>
    <Reviews/>
    <CtaBand go={go}/>
  </>);
}

function YhteystiedotPage({ go }) {
  return (<>
    <section className="page-hero">
      <div className="wrap">
        <div style={{maxWidth:560}}>
          <div className="eyebrow">Yhteystiedot</div>
          <h1 className="page-hero__title">Laske hinta, soita suoraan</h1>
          <p className="lead" style={{maxWidth:480, marginTop:16}}>
            Syötä osoitteesi ja valitse ikkunat laskurissa — hinta matkustuskuluineen näkyy heti. Toimimme Oulussa ja lähialueella, 15 km säteellä ilmaiseksi. Muualtakin saa tilata — matkustuskulut 0,50 €/km rajan yli.
          </p>
          <div className="hero__cta" style={{marginTop:26}}>
            <button className="btn btn--primary btn--lg" onClick={()=>go("hintalaskuri")}><Ic.euro style={{width:19,height:19}}/> Avaa hintalaskuri</button>
          </div>
        </div>
      </div>
    </section>
    <section className="section section--soft">
      <div className="wrap" style={{maxWidth:520,margin:"0 auto"}}>
        <div style={{display:"flex",flexDirection:"column",gap:12}}>
          <div className="contact-list__item card" style={{padding:"18px 22px"}}>
            <span className="contact-list__ic"><Ic.pin/></span>
            <div><b>Toiminta-alue</b><span>{D.area}</span></div>
          </div>
          <div className="contact-list__item card" style={{padding:"18px 22px"}}>
            <span className="contact-list__ic"><Ic.wallet/></span>
            <div><b>Maksutavat</b><span>{D.payment.methods.join(", ")} · {D.payment.business}</span></div>
          </div>
        </div>
        <p className="muted" style={{marginTop:20,fontSize:13,textAlign:"center"}}>Y-tunnukset: {D.people.map(p=>p.ytunnus).join(" · ")}</p>
      </div>
    </section>
  </>);
}

/* ---------- ARVOSTELU PAGE ---------- */
function ArvosteluPage({ go }) {
  const [form, setForm]     = React.useState({ name: "", rating: 5, text: "" });
  const [sent, setSent]     = React.useState(false);
  const [saving, setSaving] = React.useState(false);
  const [error, setError]   = React.useState("");
  const [reviews, setReviews]   = React.useState([]);
  const [rvLoad, setRvLoad]     = React.useState(true);

  React.useEffect(() => {
    fetch("/api/review")
      .then(r => r.json())
      .then(d => { setReviews(Array.isArray(d) ? d : []); })
      .catch(() => {})
      .finally(() => setRvLoad(false));
  }, [sent]);

  const submit = async (e) => {
    e.preventDefault();
    if (!form.name.trim() || !form.text.trim()) { setError("Täytä kaikki kentät."); return; }
    setSaving(true); setError("");
    try {
      const r = await fetch("/api/review", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name: form.name, rating: form.rating, text: form.text }),
      });
      if (r.status === 201) { setSent(true); }
      else { const d = await r.json(); setError(d.error || "Jokin meni pieleen."); }
    } catch { setError("Verkkovirhe. Yritä uudelleen."); }
    finally { setSaving(false); }
  };

  const starBtns = [1,2,3,4,5].map(n => (
    <button key={n} type="button"
      style={{fontSize:30,cursor:"pointer",background:"none",border:"none",
              color:n<=form.rating?"#f59e0b":"#dce3ee",padding:"0 3px",lineHeight:1}}
      onClick={()=>setForm(f=>({...f,rating:n}))}>★</button>
  ));

  const inputStyle = {
    width:"100%",border:"1.5px solid #dce3ee",borderRadius:10,
    padding:"11px 14px",fontSize:15,fontFamily:"inherit",outline:"none",boxSizing:"border-box",
  };

  return (<>
    <section className="page-hero">
      <div className="wrap">
        <div style={{maxWidth:560}}>
          <div className="eyebrow">Arvostelut</div>
          <h1 className="page-hero__title">Kirjoita arvostelu</h1>
          <p className="lead" style={{maxWidth:480, marginTop:14}}>
            Kokemuksesi auttaa muita Oulun asukkaita löytämään meidät. Kiitos!
          </p>
        </div>
      </div>
    </section>
    <section className="section">
      <div className="wrap" style={{maxWidth:560,margin:"0 auto"}}>

        {sent ? (
          <div className="card" style={{textAlign:"center",padding:"44px 32px"}}>
            <div style={{fontSize:44,marginBottom:14}}>🌟</div>
            <h2 style={{marginBottom:10}}>Kiitos arvosteustasi!</h2>
            <p className="muted">Arvosteusi tarkistetaan ennen julkaisua. Kiitos kun autoit meitä kasvamaan!</p>
            <button className="btn btn--primary" style={{marginTop:24}} onClick={()=>go("etusivu")}>Etusivulle</button>
          </div>
        ) : (
          <div className="card" style={{padding:"28px 30px"}}>
            <form onSubmit={submit}>
              <div style={{marginBottom:18}}>
                <label style={{display:"block",fontWeight:700,marginBottom:7,fontSize:14}}>Nimesi</label>
                <input style={inputStyle} placeholder="Etunimi tai nimimerkki"
                  value={form.name} maxLength={80}
                  onChange={e=>setForm(f=>({...f,name:e.target.value}))}/>
              </div>
              <div style={{marginBottom:18}}>
                <label style={{display:"block",fontWeight:700,marginBottom:8,fontSize:14}}>Tähdet</label>
                <div style={{display:"flex",gap:2}}>{starBtns}</div>
              </div>
              <div style={{marginBottom:20}}>
                <label style={{display:"block",fontWeight:700,marginBottom:7,fontSize:14}}>Kokemuksesi</label>
                <textarea style={{...inputStyle,minHeight:110,resize:"vertical"}}
                  placeholder="Kerro kokemuksestasi — mitä pestiin, miten palvelu sujui..."
                  value={form.text} maxLength={1000}
                  onChange={e=>setForm(f=>({...f,text:e.target.value}))}/>
              </div>
              {error && <p style={{color:"#b91c1c",fontSize:13,marginBottom:12}}>{error}</p>}
              <button className="btn btn--primary btn--lg" style={{width:"100%"}} disabled={saving}>
                {saving ? "Lähetetään..." : "Lähetä arvostelu ★"}
              </button>
            </form>
          </div>
        )}

        {!rvLoad && reviews.length > 0 && (
          <div style={{marginTop:38}}>
            <h3 style={{fontWeight:800,marginBottom:18,fontSize:18}}>Muiden kokemuksia</h3>
            <div style={{display:"flex",flexDirection:"column",gap:14}}>
              {reviews.map(r=>(
                <div key={r.id} className="card" style={{padding:"16px 20px"}}>
                  <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:8}}>
                    <b style={{fontSize:15}}>{r.name}</b>
                    <span style={{color:"#f59e0b",fontSize:18,letterSpacing:1}}>
                      {"★".repeat(r.rating)}{"☆".repeat(5-r.rating)}
                    </span>
                  </div>
                  <p style={{fontSize:14,color:"#374151",lineHeight:1.6,margin:0}}>{r.text}</p>
                  <p style={{fontSize:12,color:"#9ca3af",marginTop:8,marginBottom:0}}>
                    {new Date(r.created_at).toLocaleDateString("fi-FI")}
                  </p>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </section>
  </>);
}

Object.assign(window, { Etusivu, IkkunanpesuPage, MeistaPage, YhteystiedotPage, ArvosteluPage });