/* ===================== 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">
        {split && (
          <div className="hero__media" style={{position:"relative"}}>
            <img src="/images/hero-ikkunanpesu.webp" alt="Ikkunanpesu Seinäjoella" 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">Yli 50 <span>asiakasta Seinäjoella</span></div>
            </div>
          </div>
        )}
        <div className="hero__copy">
          <h1 className="hero__title">Kirkkaat ikkunat<br/><span className="hl">helposti.</span></h1>
          {t.showRating && (
            <div className="chip hero__rating">
              <span className="stars">{"★★★★★"}</span>
              <b style={{fontWeight:800}}>Yli 50</b>
              <span className="muted" style={{fontWeight:600}}>tyytyväistä asiakasta Seinäjoella</span>
            </div>
          )}
          <p className="hero__lead">Ammattitaitoista ikkunanpesua Seinäjoella. Hoidamme kotisi tai yrityksesi ikkunat raidattoman kirkkaiksi — sinä vain nautit paremmasta valosta ja näkymästä.</p>
          <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__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__pay">
            <Ic.wallet style={{width:15,height:15,color:"var(--muted)",flexShrink:0}}/>
            <span>{D.payment.note} {D.payment.methods.join(" · ")}.</span>
          </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>
  );
}

/* ---------- PESIJÄT (team showcase) ---------- */
function PesijatSection() {
  return (
    <section className="section" id="pesijat">
      <div className="wrap">
        <div className="sec-head sec-head--center">
          <div className="eyebrow">Pesijät</div>
          <h2 className="sec-title">Tutustu pesijöihimme</h2>
        </div>
        <div className="pesijat-grid">
          {D.pesijat.map((p) => (
            <article className="pesija-card" key={p.name}>
              {p.photo ? (
                <img className="pesija-card__photo" src={p.photo} alt={p.name} loading="lazy"/>
              ) : (
                <div className="pesija-card__photo" style={{background:`linear-gradient(150deg, ${p.color}, color-mix(in oklab, ${p.color} 55%, #1a1a1a))`}}>
                  {p.initial}
                </div>
              )}
              <div className="pesija-card__body">
                <div className="pesija-card__role">Pesijä</div>
                <h3 className="pesija-card__name">{p.name}</h3>
                <p className="pesija-card__desc">Osa Lasisen pesijätiimiä — pesee ikkunasi huolella ja raidattomaksi Seinäjoen alueella.</p>
                {p.ytunnus && <div className="pesija-card__ytunnus">Y-tunnus: {p.ytunnus}</div>}
              </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 SJK Pesut</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>
  );
}

/* ---------- 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 ---------- */
/* ===================== PAGES ===================== */
function Etusivu({ go, t }) {
  return (<>
    <Hero go={go} t={t}/>
    <TrustBar/>
    <PesijatSection/>
    <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 Seinäjoen 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.webp" 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 PesijatPage({ go }) {
  return (<>
    <PesijatSection/>
    <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ä kohteen postinumero ja valitse ikkunat laskurissa — hinta näkyy heti. Toimimme Seinäjoen alueella, eikä hintaan lisätä matkustuskuluja.
          </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.phone/></span>
            <div><b>Puhelin</b><span><a href={D.phoneHref} style={{color:"inherit"}}>{D.phone}</a></span></div>
          </div>
          <div className="contact-list__item card" style={{padding:"18px 22px"}}>
            <span className="contact-list__ic"><Ic.mail/></span>
            <div><b>Sähköposti</b><span><a href={`mailto:${D.email}`} style={{color:"inherit"}}>{D.email}</a></span></div>
          </div>
          <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}. {D.payment.note}</span></div>
          </div>
        </div>
      </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 Seinäjoen 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, PesijatPage, YhteystiedotPage, ArvosteluPage });