/* PLASTIFY · shared pages: Materiale, Produs detail, Cere oferta, Contact, Legale */
/* global React */
const { useState: useStateP, useMemo: useMemoP, useEffect: useEffectP } = React;

/* ─────────────────── MATERIALE ─────────────────── */
function MaterialePage() {
  const [cat, setCat] = useStateP("Toate");
  const [thick, setThick] = useStateP("Toate");
  const [color, setColor] = useStateP("Toate");
  const [sort, setSort] = useStateP("Implicit");
  const [view, setView] = useStateP("grid"); // grid | list
  const [search, setSearch] = useStateP("");

  const items = useMemoP(() => {
    let out = window.PLASTIFY_PRODUCTS.slice();
    if (cat !== "Toate") out = out.filter(p => p.cat === cat);
    if (thick !== "Toate") out = out.filter(p => p.grosime === thick);
    if (color !== "Toate") out = out.filter(p => (p.culoare || "").toLowerCase().includes(color.toLowerCase()));
    if (search) out = out.filter(p => (p.name + " " + p.subcat).toLowerCase().includes(search.toLowerCase()));
    if (sort === "Nume A-Z") out.sort((a,b) => a.name.localeCompare(b.name));
    if (sort === "Categorie") out.sort((a,b) => a.cat.localeCompare(b.cat));
    return out;
  }, [cat, thick, color, sort, search]);

  return (
    <div data-screen-label="Materiale">
      <PageHeading eyebrow="MATERIALE" title="Catalog complet."
        sub="Plăci PVC, plexiglass, policarbonat, accesorii și hardware signage. Tăiem la cota cerută. Stoc parțial Brașov, restul pe comandă fermă cu termen 5–10 zile." />
      <Breadcrumb items={[{ label: "Acasă", href: "#/" }, { label: "Materiale" }]} />

      <section style={{ padding: "48px 0 96px", background: "var(--bg-soft)" }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "260px 1fr", gap: 48 }}>
          {/* sidebar filters */}
          <aside className="materiale-side" style={{ position: "sticky", top: 100, alignSelf: "start" }}>
            <div style={{ marginBottom: 28 }}>
              <div style={{ position: "relative" }}>
                <i data-lucide="search" style={{ position: "absolute", left: 14, top: 12, width: 16, color: "var(--silver-700)" }}></i>
                <input className="field" placeholder="Caută material..." value={search}
                  onChange={e => setSearch(e.target.value)}
                  style={{ paddingLeft: 40 }} />
              </div>
            </div>

            <FilterGroup title="Categorie" options={window.PLASTIFY_CATS} value={cat} onChange={setCat} />
            <FilterGroup title="Grosime" options={window.PLASTIFY_THICKNESSES} value={thick} onChange={setThick} />
            <FilterGroup title="Culoare" options={window.PLASTIFY_COLORS} value={color} onChange={setColor} />

            <button className="btn btn-ghost-light btn-sm" style={{ marginTop: 12, width: "100%", justifyContent: "center" }}
              onClick={() => { setCat("Toate"); setThick("Toate"); setColor("Toate"); setSearch(""); setSort("Implicit"); }}>
              Resetează filtre
            </button>
          </aside>

          {/* results */}
          <div>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 24, gap: 16, flexWrap: "wrap" }}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--silver-700)", letterSpacing: "0.04em" }}>
                {items.length} {items.length === 1 ? "produs" : "produse"}
              </div>
              <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
                <select className="field" value={sort} onChange={e => setSort(e.target.value)}
                  style={{ width: "auto", paddingRight: 28 }}>
                  <option>Implicit</option>
                  <option>Nume A-Z</option>
                  <option>Categorie</option>
                </select>
                <div style={{ display: "flex", border: "1px solid var(--line-2)", borderRadius: 2 }}>
                  <button onClick={() => setView("grid")}
                    style={{ padding: "8px 12px", border: 0, background: view === "grid" ? "var(--ink-900)" : "transparent",
                      color: view === "grid" ? "#fff" : "var(--ink-900)", cursor: "pointer", display: "flex" }}
                    aria-label="Grid">
                    <i data-lucide="grid-3x3" style={{ width: 16 }}></i>
                  </button>
                  <button onClick={() => setView("list")}
                    style={{ padding: "8px 12px", border: 0, background: view === "list" ? "var(--ink-900)" : "transparent",
                      color: view === "list" ? "#fff" : "var(--ink-900)", cursor: "pointer", display: "flex" }}
                    aria-label="Listă">
                    <i data-lucide="list" style={{ width: 16 }}></i>
                  </button>
                </div>
              </div>
            </div>

            {items.length === 0 ? (
              <div style={{ padding: 64, textAlign: "center", border: "1px dashed var(--line-2)", borderRadius: 4 }}>
                <i data-lucide="search-x" style={{ width: 32, color: "var(--silver-500)" }}></i>
                <div style={{ marginTop: 16, fontFamily: "var(--font-display)", fontSize: 24, textTransform: "uppercase" }}>Niciun rezultat</div>
                <p style={{ color: "var(--silver-700)", marginTop: 8 }}>Încearcă să schimbi filtrele sau cere ofertă pentru ce cauți.</p>
                <a className="btn btn-primary btn-sm" href="#/cere-oferta" style={{ marginTop: 16 }}>Cere ofertă →</a>
              </div>
            ) : view === "grid" ? (
              <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))", gap: 16 }}>
                {items.map(p => <ProductCard key={p.id} p={p} />)}
              </div>
            ) : (
              <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                {items.map(p => <ProductCard key={p.id} p={p} layout="row" />)}
              </div>
            )}

            {/* CTA strip at bottom */}
            <div style={{ marginTop: 64, padding: 40, background: "var(--ink-900)", color: "#fff", borderRadius: 4, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24, flexWrap: "wrap" }}>
              <div>
                <div className="eyebrow eyebrow-dark">Nu găsești ce cauți?</div>
                <h3 style={{ marginTop: 8, color: "var(--silver-300)", fontFamily: "var(--font-display)", fontSize: 32, textTransform: "uppercase" }}>Cere o ofertă specifică.</h3>
              </div>
              <a className="btn btn-primary on-dark" href="#/cere-oferta">Trimite o cerere →</a>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function FilterGroup({ title, options, value, onChange }) {
  return (
    <div style={{ marginBottom: 24 }}>
      <div style={{ fontFamily: "var(--font-techno)", fontSize: 11, letterSpacing: "0.14em", color: "var(--ink-900)", marginBottom: 12 }}>{title.toUpperCase()}</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
        {options.map(o => (
          <label key={o} style={{ display: "flex", alignItems: "center", gap: 10, cursor: "pointer", padding: "6px 0", fontSize: 14, color: value === o ? "var(--ink-900)" : "var(--silver-700)" }}>
            <input type="radio" checked={value === o} onChange={() => onChange(o)}
              style={{ accentColor: "var(--gold-400)", margin: 0 }} />
            <span style={{ fontWeight: value === o ? 600 : 400 }}>{o}</span>
          </label>
        ))}
      </div>
    </div>
  );
}

/* ─────────────────── PRODUS DETAIL ─────────────────── */
function ProdusPage({ slug }) {
  const p = window.PLASTIFY_PRODUCTS.find(x => x.slug === slug);
  const [imgIdx, setImgIdx] = useStateP(0);
  if (!p) return <NotFoundPage what="produs" />;

  const related = window.PLASTIFY_PRODUCTS.filter(x => x.cat === p.cat && x.id !== p.id).slice(0, 4);

  return (
    <div data-screen-label="Detaliu produs">
      <Breadcrumb items={[
        { label: "Acasă", href: "#/" },
        { label: "Materiale", href: "#/materiale" },
        { label: p.cat },
        { label: p.name }
      ]} />

      <section style={{ padding: "48px 0 96px", background: "#fff" }}>
        <div className="container produs-grid" style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 64 }}>
          {/* gallery */}
          <div>
            <div style={{ background: "var(--silver-50)", aspectRatio: "1.05", display: "grid", placeItems: "center", padding: 48, borderRadius: 4 }}>
              <img src={`../assets/products/${p.gallery[imgIdx]}`} alt={p.name}
                style={{ maxWidth: "100%", maxHeight: "100%" }} />
            </div>
            <div style={{ display: "flex", gap: 12, marginTop: 16 }}>
              {p.gallery.map((g, i) => (
                <button key={i} onClick={() => setImgIdx(i)}
                  style={{ flex: 1, aspectRatio: "1", background: "var(--silver-50)",
                    border: imgIdx === i ? "2px solid var(--ink-900)" : "1px solid var(--line-1)",
                    borderRadius: 2, padding: 8, cursor: "pointer", display: "grid", placeItems: "center", overflow: "hidden" }}>
                  <img src={`../assets/products/${g}`} alt="" style={{ maxWidth: "100%", maxHeight: "100%" }}/>
                </button>
              ))}
            </div>
          </div>

          {/* info */}
          <div>
            <div className="eyebrow">{p.cat} · {p.subcat}</div>
            <h1 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(36px, 5vw, 64px)", textTransform: "uppercase", lineHeight: 1.05, margin: "16px 0 24px" }}>{p.name}</h1>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 14, color: "var(--silver-700)", letterSpacing: "0.04em", marginBottom: 24 }}>{p.spec}</div>
            <div style={{ display: "flex", alignItems: "baseline", gap: 16, marginBottom: 24 }}>
              <div style={{ fontFamily: "var(--font-techno)", fontSize: 28, color: "var(--ink-900)" }}>{p.price.toUpperCase()}</div>
              <span className="techno" style={{ fontSize: 11, color: "var(--gold-500)" }}>· tăiat la cota cerută</span>
            </div>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--ink-700)", marginBottom: 32 }}>{p.desc}</p>

            {/* spec table */}
            <div style={{ border: "1px solid var(--line-1)", borderRadius: 2, marginBottom: 32 }}>
              {[
                ["Categorie", p.cat],
                ["Sub-categorie", p.subcat],
                ["Grosime", p.grosime],
                ["Culoare", p.culoare],
                ["Dimensiune standard", p.dim],
                ["Greutate", p.greutate],
                ["Disponibilitate", p.stoc],
              ].map(([k, v]) => (
                <div key={k} style={{ display: "grid", gridTemplateColumns: "180px 1fr", padding: "12px 16px", borderBottom: "1px solid var(--line-1)", fontSize: 14 }}>
                  <span style={{ color: "var(--silver-700)", fontFamily: "var(--font-body)", fontWeight: 600, textTransform: "uppercase", fontSize: 11, letterSpacing: "0.08em", alignSelf: "center" }}>{k}</span>
                  <span style={{ fontFamily: "var(--font-mono)", color: "var(--ink-900)" }}>{v}</span>
                </div>
              ))}
            </div>

            {/* applications */}
            <div style={{ marginBottom: 32 }}>
              <div className="techno" style={{ fontSize: 11, letterSpacing: "0.14em", color: "var(--ink-900)", marginBottom: 12 }}>APLICAȚII TIPICE</div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                {p.apl.map(a => <span key={a} className="chip" style={{ cursor: "default" }}>{a}</span>)}
              </div>
            </div>

            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a className="btn btn-primary btn-lg" href={`#/cere-oferta?produs=${p.slug}`}>Cere ofertă →</a>
              <a className="btn btn-ghost-light btn-lg" href="#/materiale">Înapoi la catalog</a>
            </div>
          </div>
        </div>
      </section>

      {/* related */}
      {related.length > 0 && (
        <section style={{ padding: "64px 0 96px", background: "var(--bg-soft)" }}>
          <div className="container">
            <div className="eyebrow">Recomandate</div>
            <h2 style={{ marginTop: 8, marginBottom: 24, fontFamily: "var(--font-display)", fontSize: 36, textTransform: "uppercase" }}>Materiale similare</h2>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))", gap: 16 }}>
              {related.map(r => <ProductCard key={r.id} p={r} />)}
            </div>
          </div>
        </section>
      )}
    </div>
  );
}

/* ─────────────────── CERE OFERTA ─────────────────── */
function CereOfertaPage({ prefillSlug }) {
  const [step, setStep] = useStateP(1);
  const [submitted, setSubmitted] = useStateP(false);
  const [errors, setErrors] = useStateP({});
  const [form, setForm] = useStateP(() => ({
    tipClient: "Firmă", nume: "", firma: "", cui: "",
    email: "", telefon: "",
    produse: [], cantitate: "", dimensiuni: "", grosime: "",
    finisare: [], localitate: "", livrare: "Transport partener", urgent: false,
    mesaj: "", fisier: null, gdpr: false,
    produsSlug: prefillSlug || "",
  }));
  const set = (k, v) => setForm(s => ({ ...s, [k]: v }));

  useEffectP(() => {
    if (prefillSlug) {
      const p = window.PLASTIFY_PRODUCTS.find(x => x.slug === prefillSlug);
      if (p) setForm(s => ({ ...s, produse: [p.cat] }));
    }
  }, [prefillSlug]);

  const validateStep = (s) => {
    const e = {};
    if (s === 1) {
      if (!form.nume) e.nume = "Numele e obligatoriu.";
      if (!form.email) e.email = "Email-ul e obligatoriu.";
      else if (!/^\S+@\S+\.\S+$/.test(form.email)) e.email = "Email invalid.";
      if (form.tipClient === "Firmă" && !form.firma) e.firma = "Numele firmei e obligatoriu.";
    }
    if (s === 2) {
      if (form.produse.length === 0) e.produse = "Alege cel puțin o categorie.";
      if (!form.cantitate) e.cantitate = "Specifică o cantitate.";
    }
    if (s === 3) {
      if (!form.gdpr) e.gdpr = "Trebuie să accepți politica de confidențialitate.";
    }
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const next = () => { if (validateStep(step)) setStep(step + 1); };
  const back = () => setStep(Math.max(1, step - 1));
  const submit = (e) => { e.preventDefault(); if (validateStep(3)) setSubmitted(true); };

  if (submitted) {
    return (
      <div data-screen-label="Cere ofertă · trimis">
        <section style={{ padding: "180px 0 120px", background: "var(--ink-900)", color: "#fff", minHeight: "70vh", display: "grid", placeItems: "center" }}>
          <div className="container" style={{ maxWidth: 720, textAlign: "center" }}>
            <div style={{ width: 80, height: 80, margin: "0 auto", borderRadius: "50%", background: "var(--gold-400)", display: "grid", placeItems: "center", marginBottom: 24 }}>
              <i data-lucide="check" style={{ width: 36, color: "var(--ink-900)" }}></i>
            </div>
            <div className="eyebrow eyebrow-dark">CERERE TRIMISĂ</div>
            <h1 style={{ marginTop: 16, fontFamily: "var(--font-display)", fontSize: 56, textTransform: "uppercase", color: "var(--silver-300)", lineHeight: 1.05 }}>Mulțumim — revenim în 24h.</h1>
            <p style={{ fontSize: 18, color: "var(--silver-400)", lineHeight: 1.6, marginTop: 24 }}>
              Am primit cererea ta, {form.nume || "—"}. Un coleg din Brașov îți va trimite oferta scrisă pe <strong style={{ color: "#fff" }}>{form.email}</strong> în maxim 24 de ore lucrătoare.
            </p>
            <div style={{ marginTop: 32, display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
              <a className="btn btn-primary on-dark" href="#/">Înapoi acasă</a>
              <button className="btn btn-ghost-dark" onClick={() => { setSubmitted(false); setStep(1); }}>Trimite altă cerere</button>
            </div>
          </div>
        </section>
      </div>
    );
  }

  return (
    <div data-screen-label="Cere ofertă">
      <PageHeading eyebrow="CERE OFERTĂ" title="Trimite-ne detaliile."
        sub="Trei pași simpli. Fără cont, fără coș de cumpărături. Doar oamenii noștri și o ofertă scrisă pe email în 24h." />
      <Breadcrumb items={[{ label: "Acasă", href: "#/" }, { label: "Cere ofertă" }]} />

      <section style={{ padding: "48px 0 96px", background: "var(--bg-soft)" }}>
        <div className="container quote-grid" style={{ display: "grid", gridTemplateColumns: "1fr 320px", gap: 48 }}>
          <div style={{ background: "#fff", padding: 40, borderRadius: 4, boxShadow: "var(--shadow-1)" }}>
            <Stepper step={step} steps={["Date contact","Material","Trimite"]} />

            <form onSubmit={submit} style={{ marginTop: 32 }}>
              {step === 1 && (
                <div style={{ display: "grid", gap: 16 }}>
                  <div>
                    <label className="field-label">Tip client</label>
                    <div style={{ display: "flex", gap: 8 }}>
                      {["Firmă","Persoană fizică"].map(t => (
                        <button type="button" key={t}
                          className={`chip ${form.tipClient === t ? "active" : ""}`}
                          onClick={() => set("tipClient", t)}>{t}</button>
                      ))}
                    </div>
                  </div>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                    <div>
                      <label className="field-label">Nume complet *</label>
                      <input className={`field ${errors.nume ? "error" : ""}`} value={form.nume} onChange={e => set("nume", e.target.value)} />
                      {errors.nume && <div className="field-error">{errors.nume}</div>}
                    </div>
                    <div>
                      <label className="field-label">Telefon</label>
                      <input className="field" value={form.telefon} onChange={e => set("telefon", e.target.value)} placeholder="+40 ..."/>
                    </div>
                  </div>
                  <div>
                    <label className="field-label">Email *</label>
                    <input type="email" className={`field ${errors.email ? "error" : ""}`} value={form.email} onChange={e => set("email", e.target.value)} />
                    {errors.email && <div className="field-error">{errors.email}</div>}
                  </div>
                  {form.tipClient === "Firmă" && (
                    <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 16 }}>
                      <div>
                        <label className="field-label">Nume firmă *</label>
                        <input className={`field ${errors.firma ? "error" : ""}`} value={form.firma} onChange={e => set("firma", e.target.value)} />
                        {errors.firma && <div className="field-error">{errors.firma}</div>}
                      </div>
                      <div>
                        <label className="field-label">CUI (opțional)</label>
                        <input className="field" value={form.cui} onChange={e => set("cui", e.target.value)} placeholder="RO..."/>
                      </div>
                    </div>
                  )}
                </div>
              )}

              {step === 2 && (
                <div style={{ display: "grid", gap: 20 }}>
                  <div>
                    <label className="field-label">Categorie material * (poți alege mai multe)</label>
                    <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                      {["Plăci PVC","Plexiglass","Policarbonat","Accesorii signage","Altul"].map(c => (
                        <button type="button" key={c}
                          className={`chip ${form.produse.includes(c) ? "active" : ""}`}
                          onClick={() => set("produse", form.produse.includes(c) ? form.produse.filter(x => x !== c) : [...form.produse, c])}>{c}</button>
                      ))}
                    </div>
                    {errors.produse && <div className="field-error">{errors.produse}</div>}
                  </div>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                    <div>
                      <label className="field-label">Cantitate *</label>
                      <input className={`field ${errors.cantitate ? "error" : ""}`} placeholder="ex. 12 mp / 8 plăci" value={form.cantitate} onChange={e => set("cantitate", e.target.value)} />
                      {errors.cantitate && <div className="field-error">{errors.cantitate}</div>}
                    </div>
                    <div>
                      <label className="field-label">Grosime</label>
                      <select className="field" value={form.grosime} onChange={e => set("grosime", e.target.value)}>
                        <option value="">— alege —</option>
                        <option>3 mm</option><option>4 mm</option><option>5 mm</option><option>6 mm</option><option>Altă grosime</option>
                      </select>
                    </div>
                  </div>
                  <div>
                    <label className="field-label">Dimensiuni (LxL în mm)</label>
                    <input className="field" placeholder="ex. 2050 × 1250, sau cote la cerere" value={form.dimensiuni} onChange={e => set("dimensiuni", e.target.value)} />
                  </div>
                  <div>
                    <label className="field-label">Finisare (opțional)</label>
                    <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                      {["Tăiat la cotă","Frezat margini","Găuri pentru fixare","Polish margini"].map(f => (
                        <button type="button" key={f}
                          className={`chip ${form.finisare.includes(f) ? "active" : ""}`}
                          onClick={() => set("finisare", form.finisare.includes(f) ? form.finisare.filter(x => x !== f) : [...form.finisare, f])}>{f}</button>
                      ))}
                    </div>
                  </div>
                </div>
              )}

              {step === 3 && (
                <div style={{ display: "grid", gap: 20 }}>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                    <div>
                      <label className="field-label">Localitate de livrare</label>
                      <input className="field" placeholder="ex. București" value={form.localitate} onChange={e => set("localitate", e.target.value)} />
                    </div>
                    <div>
                      <label className="field-label">Mod livrare</label>
                      <select className="field" value={form.livrare} onChange={e => set("livrare", e.target.value)}>
                        <option>Transport partener</option>
                        <option>Ridicare din Brașov</option>
                        <option>Curier rapid</option>
                      </select>
                    </div>
                  </div>
                  <div>
                    <label className="field-label">Mesaj suplimentar</label>
                    <textarea className="field" style={{ minHeight: 100, resize: "vertical" }} placeholder="Termen, detalii proiect, întrebări tehnice..."
                      value={form.mesaj} onChange={e => set("mesaj", e.target.value)}></textarea>
                  </div>
                  <label style={{ display: "flex", alignItems: "center", gap: 10, cursor: "pointer", padding: "12px 14px", border: "1px solid var(--line-2)", borderRadius: 2, fontSize: 14 }}>
                    <input type="checkbox" checked={form.urgent} onChange={e => set("urgent", e.target.checked)} style={{ accentColor: "var(--gold-400)" }} />
                    <span>Cerere urgentă (răspuns prioritar în max. 4h lucrătoare)</span>
                  </label>
                  <div>
                    <label className="field-label">Atașează fișier (opțional)</label>
                    <div style={{ border: "1px dashed var(--line-2)", borderRadius: 2, padding: 24, textAlign: "center", cursor: "pointer", background: "var(--silver-50)" }}>
                      <i data-lucide="upload" style={{ width: 20, color: "var(--silver-700)" }}></i>
                      <div style={{ marginTop: 8, fontSize: 13, color: "var(--silver-700)" }}>{form.fisier ? form.fisier : "Adaugă schiță, plan sau referință (PDF, JPG, DXF — max 10 MB)"}</div>
                      <input type="file" style={{ display: "none" }} onChange={e => set("fisier", e.target.files[0]?.name || null)} />
                    </div>
                  </div>
                  <label style={{ display: "flex", alignItems: "flex-start", gap: 10, cursor: "pointer", fontSize: 13, color: "var(--ink-700)", lineHeight: 1.5 }}>
                    <input type="checkbox" checked={form.gdpr} onChange={e => set("gdpr", e.target.checked)} style={{ accentColor: "var(--gold-400)", marginTop: 2 }} />
                    <span>Sunt de acord ca datele mele să fie folosite pentru a primi oferta. Vezi <a href="#/legale/confidentialitate" style={{ textDecorationColor: "var(--gold-400)" }}>politica de confidențialitate</a>.</span>
                  </label>
                  {errors.gdpr && <div className="field-error">{errors.gdpr}</div>}
                </div>
              )}

              <div style={{ marginTop: 32, display: "flex", justifyContent: "space-between", borderTop: "1px solid var(--line-1)", paddingTop: 24 }}>
                <button type="button" className="btn btn-ghost-light" onClick={back} disabled={step === 1}
                  style={{ visibility: step === 1 ? "hidden" : "visible" }}>← Înapoi</button>
                {step < 3
                  ? <button type="button" className="btn btn-primary" onClick={next}>Continuă →</button>
                  : <button type="submit" className="btn btn-primary btn-lg">Trimite cererea →</button>}
              </div>
            </form>
          </div>

          {/* sidebar — what to expect */}
          <aside>
            <div style={{ background: "var(--ink-900)", color: "#fff", padding: 28, borderRadius: 4 }}>
              <div className="eyebrow eyebrow-dark">CE URMEAZĂ</div>
              <ol style={{ paddingLeft: 0, listStyle: "none", marginTop: 16 }}>
                {[
                  ["1","Primim cererea","Confirmăm pe email că am primit detaliile."],
                  ["2","Calculăm","Stabilim cantitate, debitare și termen."],
                  ["3","Trimitem ofertă","Ofertă scrisă pe email în max. 24h lucrătoare."],
                  ["4","Confirmi & livrăm","La OK, intrăm în producție și livrăm."],
                ].map(([n, t, d]) => (
                  <li key={n} style={{ display: "flex", gap: 16, padding: "14px 0", borderBottom: "1px solid rgba(255,255,255,0.08)" }}>
                    <span style={{ fontFamily: "var(--font-techno)", fontSize: 22, color: "var(--gold-400)", lineHeight: 1, minWidth: 24 }}>{n}</span>
                    <div>
                      <div style={{ fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 14, color: "var(--silver-300)", textTransform: "uppercase", letterSpacing: "0.04em" }}>{t}</div>
                      <div style={{ fontSize: 13, color: "var(--silver-400)", marginTop: 4, lineHeight: 1.5 }}>{d}</div>
                    </div>
                  </li>
                ))}
              </ol>
              <div style={{ marginTop: 20, paddingTop: 20, borderTop: "1px solid rgba(255,255,255,0.08)" }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--silver-400)", display: "flex", flexDirection: "column", gap: 8 }}>
                  <span><i data-lucide="phone" style={{ width: 14, marginRight: 8, verticalAlign: "middle" }}></i> +40 7XX XXX XXX</span>
                  <span><i data-lucide="mail" style={{ width: 14, marginRight: 8, verticalAlign: "middle" }}></i> office@aronplastify.eu</span>
                </div>
              </div>
            </div>
          </aside>
        </div>
      </section>
    </div>
  );
}

function Stepper({ step, steps }) {
  return (
    <div style={{ display: "flex", gap: 0 }}>
      {steps.map((s, i) => {
        const n = i + 1;
        const isActive = n === step;
        const isDone = n < step;
        return (
          <div key={s} style={{ flex: 1, display: "flex", alignItems: "center", gap: 12 }}>
            <div style={{
              width: 32, height: 32, borderRadius: "50%", display: "grid", placeItems: "center", flexShrink: 0,
              background: isActive ? "var(--gold-400)" : isDone ? "var(--ink-900)" : "var(--silver-100)",
              color: isActive || isDone ? (isActive ? "var(--ink-900)" : "#fff") : "var(--silver-700)",
              fontFamily: "var(--font-techno)", fontSize: 14,
              border: isActive ? "1px solid var(--gold-400)" : "0",
            }}>
              {isDone ? <i data-lucide="check" style={{ width: 16 }}></i> : n}
            </div>
            <span style={{ fontFamily: "var(--font-body)", fontSize: 12, fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase",
              color: isActive ? "var(--ink-900)" : isDone ? "var(--silver-700)" : "var(--silver-500)" }}>{s}</span>
            {i < steps.length - 1 && <div style={{ flex: 1, height: 1, background: isDone ? "var(--ink-900)" : "var(--line-2)" }}></div>}
          </div>
        );
      })}
    </div>
  );
}

/* ─────────────────── CONTACT ─────────────────── */
function ContactPage() {
  return (
    <div data-screen-label="Contact">
      <PageHeading eyebrow="CONTACT" title="Vorbește cu noi."
        sub="Suntem în Brașov. Răspundem la telefon, pe email, sau direct la depozit. Programare în avans pentru vizite." />
      <Breadcrumb items={[{ label: "Acasă", href: "#/" }, { label: "Contact" }]} />

      <section style={{ padding: "64px 0 48px", background: "#fff" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 24 }}>
            {[
              { icon: "phone", title: "Telefon", body: "+40 7XX XXX XXX", sub: "L–V · 09:00 – 17:30", href: "tel:+407" },
              { icon: "mail", title: "Email", body: "office@aronplastify.eu", sub: "Răspuns în max. 24h", href: "mailto:office@aronplastify.eu" },
              { icon: "map-pin", title: "Adresă", body: "Str. Industriilor 12, Brașov", sub: "Depozit + birou", href: null },
              { icon: "clock", title: "Program", body: "L – V · 09:00 – 17:30", sub: "Sâmbătă cu programare", href: null },
            ].map(c => (
              <div key={c.title} style={{ padding: 28, border: "1px solid var(--line-1)", borderRadius: 4, background: "#fff" }}>
                <i data-lucide={c.icon} style={{ width: 24, color: "var(--gold-400)" }}></i>
                <div className="techno" style={{ fontSize: 11, color: "var(--ink-900)", marginTop: 14, letterSpacing: "0.14em" }}>{c.title.toUpperCase()}</div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 16, color: "var(--ink-900)", marginTop: 6, fontWeight: 600 }}>
                  {c.href ? <a href={c.href} style={{ color: "var(--ink-900)", textDecoration: "none" }}>{c.body}</a> : c.body}
                </div>
                <div style={{ fontSize: 13, color: "var(--silver-700)", marginTop: 4 }}>{c.sub}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: "48px 0 96px", background: "#fff" }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 48 }}>
          {/* fake map */}
          <div style={{ background: "var(--silver-100)", aspectRatio: "16/10", borderRadius: 4, position: "relative", overflow: "hidden",
              backgroundImage: "linear-gradient(135deg, var(--silver-100) 0%, var(--silver-200) 100%)" }}>
            {/* pseudo-grid streets */}
            <svg width="100%" height="100%" style={{ position: "absolute", inset: 0, opacity: 0.4 }}>
              {Array.from({ length: 24 }).map((_, i) => (
                <line key={"v"+i} x1={i*40} y1={0} x2={i*40} y2="100%" stroke="rgba(0,0,0,0.06)" strokeWidth="1"/>
              ))}
              {Array.from({ length: 16 }).map((_, i) => (
                <line key={"h"+i} x1={0} y1={i*40} x2="100%" y2={i*40} stroke="rgba(0,0,0,0.06)" strokeWidth="1"/>
              ))}
              <line x1="0" y1="40%" x2="100%" y2="55%" stroke="rgba(0,0,0,0.18)" strokeWidth="3"/>
              <line x1="30%" y1="0" x2="45%" y2="100%" stroke="rgba(0,0,0,0.18)" strokeWidth="3"/>
              <line x1="60%" y1="0" x2="70%" y2="100%" stroke="rgba(0,0,0,0.12)" strokeWidth="2"/>
            </svg>
            <div style={{ position: "absolute", left: "42%", top: "48%", transform: "translate(-50%, -100%)", display: "flex", flexDirection: "column", alignItems: "center", gap: 4 }}>
              <div style={{ background: "var(--gold-400)", color: "var(--ink-900)", padding: "8px 14px", borderRadius: 2, fontFamily: "var(--font-techno)", fontSize: 11, letterSpacing: "0.14em", boxShadow: "var(--shadow-2)" }}>PLASTIFY</div>
              <div style={{ width: 0, height: 0, borderLeft: "6px solid transparent", borderRight: "6px solid transparent", borderTop: "10px solid var(--gold-400)" }}></div>
            </div>
            <div style={{ position: "absolute", right: 16, top: 16, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--silver-700)", background: "rgba(255,255,255,0.85)", padding: "4px 8px", borderRadius: 2 }}>BRAȘOV · 45.6427° N, 25.5887° E</div>
          </div>
          <div>
            <div className="eyebrow">DEPOZITUL</div>
            <h2 style={{ marginTop: 8, marginBottom: 16, fontFamily: "var(--font-display)", fontSize: 40, textTransform: "uppercase", lineHeight: 1.05 }}>Vino la noi în Brașov.</h2>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--ink-700)", marginBottom: 24 }}>
              Avem stoc fizic de plăci și accesorii la depozit. Pentru tăieri custom sau cantități mari, recomandăm o vizită programată — discutăm direct cu echipa de producție.
            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: 12, marginBottom: 24 }}>
              {[
                ["Vizite cu programare","De luni până vineri, între 10:00 și 16:00."],
                ["Ridicare comandă","La depozit, după confirmarea ofertei."],
                ["Consultanță tehnică","Pe loc sau telefonic, gratuită."],
              ].map(([t, d]) => (
                <div key={t} style={{ display: "flex", gap: 16, alignItems: "flex-start" }}>
                  <i data-lucide="check" style={{ width: 18, color: "var(--gold-500)", marginTop: 4 }}></i>
                  <div>
                    <div className="techno" style={{ fontSize: 11, color: "var(--ink-900)", letterSpacing: "0.14em" }}>{t.toUpperCase()}</div>
                    <div style={{ fontSize: 14, color: "var(--ink-700)", marginTop: 4 }}>{d}</div>
                  </div>
                </div>
              ))}
            </div>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a className="btn btn-primary" href="#/cere-oferta">Cere ofertă →</a>
              <a className="btn btn-ghost-light" href="tel:+407">Sună acum</a>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ─────────────────── LEGALE ─────────────────── */
function LegalePage({ section = "termeni" }) {
  const tabs = [
    { id: "termeni", label: "Termeni & Condiții", hash: "#/legale" },
    { id: "confidentialitate", label: "Confidențialitate (GDPR)", hash: "#/legale/confidentialitate" },
    { id: "cookies", label: "Politica cookies", hash: "#/legale/cookies" },
  ];
  const active = tabs.find(t => t.id === section) || tabs[0];

  return (
    <div data-screen-label="Pagini legale">
      <PageHeading eyebrow="LEGALE" title={active.label}
        sub="Document informativ. Pentru orice neclaritate, ne poți contacta la office@aronplastify.eu." />
      <Breadcrumb items={[{ label: "Acasă", href: "#/" }, { label: "Legale", href: "#/legale" }, { label: active.label }]} />

      <section style={{ padding: "48px 0 96px", background: "#fff" }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "240px 1fr", gap: 48 }}>
          <aside>
            <div className="techno" style={{ fontSize: 11, color: "var(--ink-900)", letterSpacing: "0.14em", marginBottom: 12 }}>SECȚIUNI</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
              {tabs.map(t => (
                <a key={t.id} href={t.hash}
                  style={{
                    padding: "10px 14px", textDecoration: "none", borderLeft: `2px solid ${t.id === active.id ? "var(--gold-400)" : "transparent"}`,
                    background: t.id === active.id ? "var(--silver-50)" : "transparent",
                    color: t.id === active.id ? "var(--ink-900)" : "var(--silver-700)",
                    fontWeight: t.id === active.id ? 600 : 400, fontSize: 14
                  }}>{t.label}</a>
              ))}
            </div>
          </aside>
          <article style={{ maxWidth: 720 }}>
            {section === "termeni" && <TermeniContent />}
            {section === "confidentialitate" && <GdprContent />}
            {section === "cookies" && <CookiesContent />}
          </article>
        </div>
      </section>
    </div>
  );
}

const LH = { fontFamily: "var(--font-display)", fontSize: 28, textTransform: "uppercase", marginTop: 36, marginBottom: 12, lineHeight: 1.1 };
const LP = { fontSize: 15, lineHeight: 1.7, color: "var(--ink-700)", marginBottom: 14 };

function TermeniContent() {
  return (
    <>
      <p style={{ ...LP, fontStyle: "italic", color: "var(--silver-700)" }}>Ultima actualizare: 28 aprilie 2026.</p>
      <p style={LP}><strong>1. Părțile.</strong> Prezentul site (aronplastify.eu) este operat de <strong>Aron Plastify SRL</strong>, cu sediul în Brașov, înregistrată la Registrul Comerțului sub nr. J00/000/2014, CUI RO00000000 ("Plastify", "noi"). Folosirea site-ului implică acceptarea acestor termeni.</p>

      <h2 style={LH}>2. Natura site-ului</h2>
      <p style={LP}>Site-ul are scop pur de prezentare. <strong>Nu este o platformă de comerț electronic.</strong> Catalogul afișat este orientativ; produsele se livrează exclusiv pe baza unei <em>oferte scrise</em> emise de noi, în urma unei cereri primite prin formularul de pe site, telefon sau email.</p>

      <h2 style={LH}>3. Cereri de ofertă și comenzi</h2>
      <p style={LP}>Cererea de ofertă nu reprezintă o comandă fermă și nu generează obligații pentru nicio parte. Comanda devine fermă doar după confirmarea în scris (email) a ofertei de către client și a termenilor de plată / livrare.</p>
      <p style={LP}>Termenul standard de răspuns la o cerere este de maxim 24 de ore lucrătoare.</p>

      <h2 style={LH}>4. Prețuri</h2>
      <p style={LP}>Prețurile afișate pe site (acolo unde apar) sunt informative, exprimate în lei, fără TVA, și pot varia în funcție de cantitate, dimensiuni custom, finisaje și disponibilitate. Prețul ferm este cel din oferta scrisă.</p>

      <h2 style={LH}>5. Livrare</h2>
      <p style={LP}>Livrăm în toată România prin transportator partener. Termenul mediu este de 48h pentru produsele aflate în stoc și 5–10 zile lucrătoare pentru produsele pe comandă fermă. Costul transportului se calculează separat.</p>

      <h2 style={LH}>6. Drepturi de proprietate</h2>
      <p style={LP}>Conținutul site-ului (texte, fotografii, logo-uri, layout) aparține Plastify și partenerilor săi. Reproducerea integrală sau parțială fără acord scris este interzisă.</p>

      <h2 style={LH}>7. Limitarea răspunderii</h2>
      <p style={LP}>Plastify nu răspunde pentru daune indirecte cauzate de folosirea informațiilor de pe site. Specificațiile tehnice sunt orientative — pentru aplicații critice (exterior, anti-vandal, alimentar), confirmă cerințele cu echipa noastră.</p>

      <h2 style={LH}>8. Modificări</h2>
      <p style={LP}>Plastify își rezervă dreptul de a actualiza acești termeni. Versiunea curentă este cea publicată pe site la data accesării.</p>

      <h2 style={LH}>9. Contact</h2>
      <p style={LP}>Pentru orice neclaritate: <a href="mailto:office@aronplastify.eu">office@aronplastify.eu</a> sau telefon +40 7XX XXX XXX.</p>
    </>
  );
}

function GdprContent() {
  return (
    <>
      <p style={{ ...LP, fontStyle: "italic", color: "var(--silver-700)" }}>Ultima actualizare: 28 aprilie 2026.</p>
      <p style={LP}><strong>Operator de date:</strong> Aron Plastify SRL, Brașov, CUI RO00000000.</p>

      <h2 style={LH}>Ce date colectăm</h2>
      <p style={LP}>Prin formularul de cerere ofertă colectăm: nume, email, telefon (opțional), denumire firmă & CUI (pentru clienții persoane juridice), localitate de livrare, detaliile cererii (produs, cantitate, dimensiuni, mesaj), eventuale fișiere atașate.</p>

      <h2 style={LH}>De ce le colectăm</h2>
      <p style={LP}>Strict pentru a putea răspunde la cererea ta cu o ofertă, a o emite, a livra produsele și a îndeplini obligațiile fiscale aferente. Nu folosim datele pentru profilare, marketing automat sau vânzare către terți.</p>

      <h2 style={LH}>Cât timp le păstrăm</h2>
      <p style={LP}>Cererile fără răspuns sau anulate: 12 luni. Comenzile finalizate: 10 ani (obligație fiscală). Datele pot fi șterse oricând la cererea ta, cu excepția celor pe care suntem obligați legal să le păstrăm.</p>

      <h2 style={LH}>Cu cine le împărtășim</h2>
      <p style={LP}>Doar cu transportatorul partener (pentru livrare) și cu autoritățile fiscale (la solicitare legală). Datele nu părăsesc Spațiul Economic European.</p>

      <h2 style={LH}>Drepturile tale (GDPR)</h2>
      <p style={LP}>Ai drept de acces, rectificare, ștergere, restricționare, portabilitate, opoziție și retragere a consimțământului. Le poți exercita scriind la <a href="mailto:office@aronplastify.eu">office@aronplastify.eu</a>. Ai și dreptul să te plângi la ANSPDCP (<a href="https://www.dataprotection.ro" target="_blank" rel="noopener">dataprotection.ro</a>).</p>

      <h2 style={LH}>Securitate</h2>
      <p style={LP}>Site-ul folosește HTTPS. Datele sunt stocate pe serverele Hostinger (Europa). Accesul intern este limitat la angajații autorizați.</p>
    </>
  );
}

function CookiesContent() {
  return (
    <>
      <p style={{ ...LP, fontStyle: "italic", color: "var(--silver-700)" }}>Ultima actualizare: 28 aprilie 2026.</p>
      <p style={LP}>Acest site folosește exclusiv <strong>cookie-uri tehnice strict necesare</strong> pentru funcționarea sa (sesiune, formulare). Nu folosim cookie-uri de tracking, advertising sau analitice ale unor terțe părți.</p>

      <h2 style={LH}>Cookie-uri folosite</h2>
      <div style={{ border: "1px solid var(--line-1)", borderRadius: 2, marginTop: 12 }}>
        {[
          ["plastify_session", "Sesiune", "Menține contextul de navigare", "Sesiune"],
          ["cookie_consent", "Consimțământ", "Reține preferințele tale legate de cookies", "12 luni"],
        ].map(([n, t, d, dur]) => (
          <div key={n} style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr 2fr 1fr", padding: 14, borderBottom: "1px solid var(--line-1)", fontSize: 13 }}>
            <code className="mono">{n}</code>
            <span>{t}</span>
            <span style={{ color: "var(--silver-700)" }}>{d}</span>
            <span className="mono">{dur}</span>
          </div>
        ))}
      </div>

      <h2 style={LH}>Control</h2>
      <p style={LP}>Poți șterge cookie-urile în orice moment din setările browserului. Nu folosim cookie-uri pentru advertising — nu primești reclame personalizate de la noi.</p>
    </>
  );
}

/* ─────────────────── 404 ─────────────────── */
function NotFoundPage({ what = "pagină" }) {
  return (
    <div data-screen-label="404">
      <section style={{ padding: "180px 0 120px", background: "var(--ink-900)", color: "#fff", minHeight: "70vh", display: "grid", placeItems: "center" }}>
        <div className="container" style={{ textAlign: "center", maxWidth: 640 }}>
          <div className="eyebrow eyebrow-dark">404 · {what.toUpperCase()} INEXISTENT</div>
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: 96, textTransform: "uppercase", color: "var(--silver-300)", margin: "16px 0", lineHeight: 1 }}>404</h1>
          <p style={{ fontSize: 18, color: "var(--silver-400)", lineHeight: 1.6 }}>Nu am găsit ce căutai. Poate ai un link vechi sau am mutat ceva.</p>
          <a className="btn btn-primary on-dark" href="#/" style={{ marginTop: 24 }}>Înapoi acasă →</a>
        </div>
      </section>
    </div>
  );
}

window.MaterialePage = MaterialePage;
window.ProdusPage = ProdusPage;
window.CereOfertaPage = CereOfertaPage;
window.ContactPage = ContactPage;
window.LegalePage = LegalePage;
window.NotFoundPage = NotFoundPage;