// sections.jsx — All non-hero sections.

const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React;

// IntersectionObserver-based reveal hook
function useReveal() {
  const ref = useRefS(null);
  useEffectS(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return ref;
}

// ─── Inline icons (thin stroke) ────────────────────────────────────────────
const I = {
  pen: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...p}><path d="M3 21l3-1 12-12-2-2L4 18l-1 3z"/><path d="M14 6l4 4"/></svg>,
  steel: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...p}><rect x="3" y="6" width="18" height="12"/><line x1="3" y1="10" x2="21" y2="10"/><line x1="3" y1="14" x2="21" y2="14"/></svg>,
  loop: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...p}><path d="M12 4a8 8 0 1 1-7.5 5"/><polyline points="4.5 4 4.5 9 9.5 9"/></svg>,
  block: (p) => <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="0.8" {...p}><path d="M8 14l12-6 12 6v12l-12 6-12-6V14z"/><path d="M8 14l12 6 12-6"/><path d="M20 20v12"/></svg>,
  laser: (p) => <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="0.8" {...p}><path d="M6 8l28 24"/><path d="M20 4v8"/><path d="M28 8l4 4"/><circle cx="20" cy="32" r="3"/><path d="M14 36h12"/></svg>,
  mold: (p) => <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="0.8" {...p}><rect x="6" y="10" width="13" height="22"/><rect x="21" y="10" width="13" height="22"/><path d="M16 18v6"/><path d="M24 18v6"/></svg>,
  preform: (p) => <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="0.8" {...p}><rect x="17" y="6" width="6" height="4"/><path d="M17 10c-1 4 0 18 3 24c3-6 4-20 3-24"/></svg>,
  blow: (p) => <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="0.8" {...p}><path d="M14 6h12v6c0 6-2 14-6 22c-4-8-6-16-6-22V6z"/><path d="M20 6v8"/><path d="M20 18l-2 4M20 18l2 4M20 22v6"/></svg>,
  family: (p) => <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="0.8" {...p}><path d="M5 34V18l3-3v19"/><path d="M13 34V14l3-2v22"/><path d="M21 34V10l3-1v25"/><path d="M29 34V14l3 2v18"/></svg>,
};

// ─── Pillars ─────────────────────────────────────────────────────────────
function Pillars({ T }) {
  const r = useReveal();
  return (
    <section id="pillars" ref={r} className="reveal">
      <div className="container">
        <div className="section-head">
          <div className="num">{T.sec_what_num}</div>
          <h2>{T.sec_what_h}</h2>
        </div>
        <div className="pillars">
          <div className="pillar">
            <div className="num">001</div>
            <div className="icon"><I.pen/></div>
            <h3>{T.pillar1_h}</h3>
            <p>{T.pillar1_p}</p>
          </div>
          <div className="pillar">
            <div className="num">002</div>
            <div className="icon"><I.steel/></div>
            <h3>{T.pillar2_h}</h3>
            <p>{T.pillar2_p}</p>
          </div>
          <div className="pillar">
            <div className="num">003</div>
            <div className="icon"><I.loop/></div>
            <h3>{T.pillar3_h}</h3>
            <p>{T.pillar3_p}</p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Process ─────────────────────────────────────────────────────────────
function Process({ T }) {
  const r = useReveal();
  const steps = [
    { lab: "01 / " + T.step1_h.toUpperCase(), ico: <I.block/>, h: T.step1_h, p: T.step1_p },
    { lab: "02 / " + T.step2_h.toUpperCase(), ico: <I.laser/>, h: T.step2_h, p: T.step2_p },
    { lab: "03 / " + T.step3_h.toUpperCase(), ico: <I.mold/>,  h: T.step3_h, p: T.step3_p },
    { lab: "04 / " + T.step4_h.toUpperCase(), ico: <I.preform/>, h: T.step4_h, p: T.step4_p },
    { lab: "05 / " + T.step5_h.toUpperCase(), ico: <I.blow/>,  h: T.step5_h, p: T.step5_p },
    { lab: "06 / " + T.step6_h.toUpperCase(), ico: <I.family/>, h: T.step6_h, p: T.step6_p },
  ];
  return (
    <section id="process" ref={r} className="reveal process">
      <div className="container">
        <div className="section-head">
          <div className="num">{T.sec_process_num}</div>
          <h2>{T.sec_process_h}</h2>
        </div>
        <div className="steps">
          {steps.map((s, i) => (
            <div className="step" key={i}>
              <div className="lab">{s.lab}</div>
              <div className="ico">{s.ico}</div>
              <h4>{s.h}</h4>
              <p>{s.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Workshop (editorial archive viewer) ─────────────────────────────────
function Workshop({ T, lang }) {
  const r = useReveal();
  const [active, setActive] = useStateS(0);
  const [fade, setFade] = useStateS(false);
  const [stripOpen, setStripOpen] = useStateS(false);

  const items = [
    { src: "assets/kalip-01.jpg", code: "BK-001", t: T.ws1_t, c: T.ws1_c, steel: T.ws1_steel, cav: T.ws1_cav, tol: T.ws1_tol, finish: T.ws1_finish },
    { src: "assets/kalip-02.jpg", code: "BK-002", t: T.ws2_t, c: T.ws2_c, steel: T.ws2_steel, cav: T.ws2_cav, tol: T.ws2_tol, finish: T.ws2_finish },
    { src: "assets/kalip-03.jpg", code: "BK-003", t: T.ws3_t, c: T.ws3_c, steel: T.ws3_steel, cav: T.ws3_cav, tol: T.ws3_tol, finish: T.ws3_finish },
    { src: "assets/kalip-04.jpg", code: "BK-004", t: T.ws4_t, c: T.ws4_c, steel: T.ws4_steel, cav: T.ws4_cav, tol: T.ws4_tol, finish: T.ws4_finish },
    { src: "assets/kalip-05.jpg", code: "BK-005", t: T.ws5_t, c: T.ws5_c, steel: T.ws5_steel, cav: T.ws5_cav, tol: T.ws5_tol, finish: T.ws5_finish },
    { src: "assets/kalip-06.jpg", code: "BK-006", t: T.ws6_t, c: T.ws6_c, steel: T.ws6_steel, cav: T.ws6_cav, tol: T.ws6_tol, finish: T.ws6_finish },
    { src: "assets/kalip-07.jpg", code: "BK-007", t: T.ws7_t, c: T.ws7_c, steel: T.ws7_steel, cav: T.ws7_cav, tol: T.ws7_tol, finish: T.ws7_finish },
    { src: "assets/kalip-08.jpg", code: "BK-008", t: T.ws8_t, c: T.ws8_c, steel: T.ws8_steel, cav: T.ws8_cav, tol: T.ws8_tol, finish: T.ws8_finish },
    { src: "assets/kalip-09.jpg", code: "BK-009", t: T.ws9_t, c: T.ws9_c, steel: T.ws9_steel, cav: T.ws9_cav, tol: T.ws9_tol, finish: T.ws9_finish },
    { src: "assets/kalip-10.jpg", code: "BK-010", t: T.ws10_t, c: T.ws10_c, steel: T.ws10_steel, cav: T.ws10_cav, tol: T.ws10_tol, finish: T.ws10_finish },
    { src: "assets/kalip-11.jpg", code: "BK-011", t: T.ws11_t, c: T.ws11_c, steel: T.ws11_steel, cav: T.ws11_cav, tol: T.ws11_tol, finish: T.ws11_finish },
    { src: "assets/kalip-12.jpg", code: "BK-012", t: T.ws12_t, c: T.ws12_c, steel: T.ws12_steel, cav: T.ws12_cav, tol: T.ws12_tol, finish: T.ws12_finish },
    { src: "assets/kalip-13.jpg", code: "BK-013", t: T.ws13_t, c: T.ws13_c, steel: T.ws13_steel, cav: T.ws13_cav, tol: T.ws13_tol, finish: T.ws13_finish },
    { src: "assets/kalip-14.jpg", code: "BK-014", t: T.ws14_t, c: T.ws14_c, steel: T.ws14_steel, cav: T.ws14_cav, tol: T.ws14_tol, finish: T.ws14_finish },
    { src: "assets/kalip-15.jpg", code: "BK-015", t: T.ws15_t, c: T.ws15_c, steel: T.ws15_steel, cav: T.ws15_cav, tol: T.ws15_tol, finish: T.ws15_finish },
    { src: "assets/kalip-16.jpg", code: "BK-016", t: T.ws16_t, c: T.ws16_c, steel: T.ws16_steel, cav: T.ws16_cav, tol: T.ws16_tol, finish: T.ws16_finish },
    { src: "assets/kalip-17.jpg", code: "BK-017", t: T.ws17_t, c: T.ws17_c, steel: T.ws17_steel, cav: T.ws17_cav, tol: T.ws17_tol, finish: T.ws17_finish },
    { src: "assets/kalip-18.jpg", code: "BK-018", t: T.ws18_t, c: T.ws18_c, steel: T.ws18_steel, cav: T.ws18_cav, tol: T.ws18_tol, finish: T.ws18_finish },
    { src: "assets/kalip-19.jpg", code: "BK-019", t: T.ws19_t, c: T.ws19_c, steel: T.ws19_steel, cav: T.ws19_cav, tol: T.ws19_tol, finish: T.ws19_finish },
    { src: "assets/kalip-20.jpg", code: "BK-020", t: T.ws20_t, c: T.ws20_c, steel: T.ws20_steel, cav: T.ws20_cav, tol: T.ws20_tol, finish: T.ws20_finish },
    { src: "assets/kalip-21.jpg", code: "BK-021", t: T.ws21_t, c: T.ws21_c, steel: T.ws21_steel, cav: T.ws21_cav, tol: T.ws21_tol, finish: T.ws21_finish },
    { src: "assets/kalip-22.jpg", code: "BK-022", t: T.ws22_t, c: T.ws22_c, steel: T.ws22_steel, cav: T.ws22_cav, tol: T.ws22_tol, finish: T.ws22_finish },
    { src: "assets/kalip-23.jpg", code: "BK-023", t: T.ws23_t, c: T.ws23_c, steel: T.ws23_steel, cav: T.ws23_cav, tol: T.ws23_tol, finish: T.ws23_finish },
    { src: "assets/kalip-24.jpg", code: "BK-024", t: T.ws24_t, c: T.ws24_c, steel: T.ws24_steel, cav: T.ws24_cav, tol: T.ws24_tol, finish: T.ws24_finish },
    { src: "assets/kalip-25.jpg", code: "BK-025", t: T.ws25_t, c: T.ws25_c, steel: T.ws25_steel, cav: T.ws25_cav, tol: T.ws25_tol, finish: T.ws25_finish },
    { src: "assets/kalip-26.jpg", code: "BK-026", t: T.ws26_t, c: T.ws26_c, steel: T.ws26_steel, cav: T.ws26_cav, tol: T.ws26_tol, finish: T.ws26_finish },
    { src: "assets/kalip-27.jpg", code: "BK-027", t: T.ws27_t, c: T.ws27_c, steel: T.ws27_steel, cav: T.ws27_cav, tol: T.ws27_tol, finish: T.ws27_finish },
  ];

  const cur = items[active];
  const select = (i) => {
    if (i === active) return;
    setFade(true);
    setTimeout(() => { setActive(i); setFade(false); }, 220);
  };
  const prev = () => select((active - 1 + items.length) % items.length);
  const next = () => select((active + 1) % items.length);

  useEffectS(() => {
    const onKey = (e) => {
      if (e.key === "ArrowLeft") prev();
      else if (e.key === "ArrowRight") next();
    };
    const sec = r.current;
    if (!sec) return;
    let inView = false;
    const io = new IntersectionObserver((entries) => {
      inView = entries[0].isIntersecting;
    }, { threshold: 0.25 });
    io.observe(sec);
    const handler = (e) => { if (inView) onKey(e); };
    window.addEventListener("keydown", handler);
    return () => { window.removeEventListener("keydown", handler); io.disconnect(); };
  }, [active]);

  return (
    <section id="workshop" ref={r} className="reveal workshop">
      <div className="container">
        <div className="section-head">
          <div className="num">{T.sec_workshop_num}</div>
          <h2>{T.sec_workshop_h}</h2>
        </div>
        <p className="ws-intro">{T.sec_workshop_sub}</p>

        <div className="ws-stage">
          {/* Featured image */}
          <div className="ws-feature">
            <div className={"ws-feature-img" + (fade ? " fade" : "")} style={{backgroundImage: `url(${cur.src})`}}></div>
            <div className="ws-cross tl"></div>
            <div className="ws-cross tr"></div>
            <div className="ws-cross bl"></div>
            <div className="ws-cross br"></div>
            <div className="ws-hud">
              <span className="ws-status"><span className="ws-dot"></span>{T.ws_status} · {cur.code}</span>
              <span>{T.ws_meta_loc}</span>
            </div>
            <button className="ws-nav ws-nav-prev" onClick={prev} aria-label="Previous">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M15 4l-8 8 8 8"/></svg>
            </button>
            <button className="ws-nav ws-nav-next" onClick={next} aria-label="Next">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M9 4l8 8-8 8"/></svg>
            </button>
            <div className="ws-counter">
              <span className="n">{String(active+1).padStart(2,"0")}</span>
              <span className="sep">/</span>
              <span className="tot">{String(items.length).padStart(2,"0")}</span>
            </div>
          </div>

          {/* Spec plate */}
          <div className="ws-plate">
            <div className="ws-plate-head">
              <span className="ws-plate-code">{cur.code}</span>
              <span>{T.ws_archive} · {T.ws_meta_date}</span>
            </div>
            <h3 className="ws-plate-title">{cur.t}</h3>
            <p className="ws-plate-c">{cur.c}</p>
            <div className="ws-plate-specs">
              <div className="ws-plate-row"><span className="k">{T.ws_steel}</span><span className="v">{cur.steel}</span></div>
              <div className="ws-plate-row"><span className="k">{T.ws_cavity}</span><span className="v">{cur.cav}</span></div>
              <div className="ws-plate-row"><span className="k">{T.ws_tol}</span><span className="v">{cur.tol}</span></div>
              <div className="ws-plate-row"><span className="k">{T.ws_finish}</span><span className="v">{cur.finish}</span></div>
            </div>
            <div className="ws-engrave">
              <span>BLK · {cur.code}</span>
              <span className="v">{T.ws_meta_loc}</span>
            </div>
          </div>
        </div>

        {/* Foot bar — toggle + hint */}
        <div className="ws-foot">
          <button className="ws-toggle" onClick={() => setStripOpen(!stripOpen)} aria-expanded={stripOpen}>
            <span className={"ws-toggle-icon" + (stripOpen ? " open" : "")}>
              <span></span><span></span>
            </span>
            <span>{stripOpen ? (T.ws_archive_close || (lang === "tr" ? "Arşivi gizle" : "Hide archive")) : (T.ws_archive_open || (lang === "tr" ? "Tüm arşivi göster" : "Show full archive"))}</span>
            <span className="ws-toggle-count">{String(items.length).padStart(2,"0")}</span>
          </button>
          <span className="ws-foot-hint">{lang === "tr" ? "← → ile gez" : "← → to browse"}</span>
        </div>

        {/* Index strip — collapsible */}
        <div className={"ws-strip-wrap" + (stripOpen ? " open" : "")}>
          <div className="ws-strip">
            {items.map((it, i) => (
              <button
                key={it.code}
                className={"ws-thumb" + (i === active ? " active" : "")}
                onClick={() => select(i)}
                aria-label={it.t}
                tabIndex={stripOpen ? 0 : -1}
              >
                <div className="ws-thumb-head">
                  <span className="n">{String(i+1).padStart(2,"0")}</span>
                  <span>{it.code.split("-")[1]}</span>
                </div>
                <div className="ws-thumb-img" style={{backgroundImage: `url(${it.src})`}}></div>
                <div className="ws-thumb-name">{it.t}</div>
                <div className="ws-thumb-bar"></div>
              </button>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Family ──────────────────────────────────────────────────────────────
function Family({ T, lang, accent }) {
  const r = useReveal();
  const [open, setOpen] = useStateS(null);
  const [hover, setHover] = useStateS(null);
  return (
    <section id="family" ref={r} className="reveal family">
      <div className="container">
        <div className="section-head" style={{flexDirection:"column", alignItems:"flex-start", gap:18, marginBottom:70}}>
          <div style={{display:"flex", alignItems:"baseline", gap:18}}>
            <div className="num">{T.sec_family_num}</div>
            <h2>{T.sec_family_h}</h2>
          </div>
          <p style={{margin:"0", color:"var(--text-dim)", fontSize:16, maxWidth:600, marginLeft:"auto", marginRight:0, marginTop:-30}}>{T.sec_family_sub}</p>
        </div>
        <div className="family-grid">
          {window.BOTTLES.map((b, i) => {
            const glbUrl = b.glb;
            return (
            <React.Fragment key={b.code}>
              <div
                className="fam-card"
                onClick={() => setOpen(open === b.code ? null : b.code)}
                onMouseEnter={() => setHover(b.code)}
                onMouseLeave={() => setHover(null)}
                style={{cursor:"pointer"}}
              >
                <div className="fam-svg">
                  {glbUrl
                    ? <window.FamilyBottle3D url={glbUrl} accent={accent} hovered={hover === b.code}/>
                    : <window.Bottle name={b.key} accent={accent}/>}
                </div>
                <div className="fam-meta">
                  <div className="fam-code">{b.code}</div>
                  <div className="fam-name">{b.name[lang]}</div>
                  <div className="fam-fam">{b.fam[lang]}</div>
                  <div className="fam-spec">
                    <span><span>VOL</span><span>{b.vol}</span></span>
                    <span><span>H</span><span>{b.h}</span></span>
                    <span><span>W</span><span>{b.w}</span></span>
                  </div>
                </div>
              </div>
            </React.Fragment>
            );
          })}
          {open && (
            <div className={"fam-detail open"}>
              {(() => {
                const b = window.BOTTLES.find(x => x.code === open);
                return (
                  <div className="fam-detail-inner">
                    <div>
                      <div className="lab">{b.code} · {b.fam[lang]}</div>
                      <h3>{b.name[lang]}</h3>
                      <p>{lang === "tr"
                        ? `Çelik bloktan türemiş bu üye, ailenin ${b.fam[lang].toLowerCase()} kolundan geliyor. Aynı kavite mantığı, farklı orana taşınmış. Kalıp parça ayırma çizgisi gövde merkezinde, ${b.h} yüksekliğinde, ${b.w} ağırlığında bir formdur.`
                        : `Descended from the same steel block, this member belongs to the family's ${b.fam[lang].toLowerCase()} branch. Same cavity logic, different proportion. Parting line through the body centre. ${b.h} tall, ${b.w} dry weight.`}
                      </p>
                    </div>
                    <div className="fam-spec-grid">
                      <div className="row"><span className="k">{lang==="tr"?"Hacim":"Volume"}</span><span className="v">{b.vol}</span></div>
                      <div className="row"><span className="k">{lang==="tr"?"Yükseklik":"Height"}</span><span className="v">{b.h}</span></div>
                      <div className="row"><span className="k">{lang==="tr"?"Ağırlık":"Weight"}</span><span className="v">{b.w}</span></div>
                      <div className="row"><span className="k">{lang==="tr"?"Boyun":"Neck"}</span><span className="v">24/410</span></div>
                      <div className="row"><span className="k">{lang==="tr"?"Malzeme":"Material"}</span><span className="v">PET / PETG</span></div>
                      <div className="row"><span className="k">{lang==="tr"?"MOQ":"MOQ"}</span><span className="v">5,000</span></div>
                    </div>
                  </div>
                );
              })()}
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

// ─── Factory ─────────────────────────────────────────────────────────────
function Factory({ T }) {
  const r = useReveal();
  const stats = [
    { k: T.fact_k1, v: T.fact_v1 },
    { k: T.fact_k2, v: T.fact_v2 },
    { k: T.fact_k3, v: T.fact_v3, em: true },
    { k: T.fact_k4, v: T.fact_v4 },
    { k: T.fact_k5, v: T.fact_v5 },
  ];
  return (
    <section id="factory" ref={r} className="reveal">
      <div className="container">
        <div className="section-head">
          <div className="num">{T.sec_factory_num}</div>
          <h2>{T.sec_factory_h}</h2>
        </div>
        <div className="fact">
          <p>{T.fact_p}</p>
          <div className="fact-stats">
            {stats.map((s, i) => (
              <div className="fact-stat" key={i}>
                <div className="k">{s.k}</div>
                <div className="v">{s.em ? <em>{s.v}</em> : s.v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Contact ─────────────────────────────────────────────────────────────
function Contact({ T }) {
  const r = useReveal();
  const [sent, setSent] = useStateS(false);
  const [vals, setVals] = useStateS({ name:"", email:"", company:"", proj:"" });
  const submit = (e) => {
    e.preventDefault();
    setSent(true);
  };
  return (
    <section id="contact" ref={r} className="reveal">
      <div className="container">
        <div className="section-head">
          <div className="num">{T.sec_contact_num}</div>
          <h2>{T.sec_contact_h}</h2>
        </div>
        <div className="contact-grid">
          <form className="form" onSubmit={submit}>
            <div className="field">
              <label>{T.f_name}</label>
              <input type="text" placeholder={T.f_name_ph} value={vals.name} onChange={e=>setVals({...vals, name:e.target.value})}/>
            </div>
            <div className="field">
              <label>{T.f_email}</label>
              <input type="email" placeholder={T.f_email_ph} value={vals.email} onChange={e=>setVals({...vals, email:e.target.value})}/>
            </div>
            <div className="field">
              <label>{T.f_company}</label>
              <input type="text" placeholder={T.f_company_ph} value={vals.company} onChange={e=>setVals({...vals, company:e.target.value})}/>
            </div>
            <div className="field">
              <label>{T.f_proj}</label>
              <textarea placeholder={T.f_proj_ph} value={vals.proj} onChange={e=>setVals({...vals, proj:e.target.value})}/>
            </div>
            <div className="form-submit">
              {sent
                ? <div className="form-thanks">{T.f_thanks}</div>
                : <button type="submit" className="submit-btn">{T.f_send}<span className="arr">→</span></button>}
            </div>
          </form>

          <div className="contact-info">
            <div className="ci-block"><div className="k">{T.ci_addr_k}</div><div className="v">{T.ci_addr_v}</div></div>
            <div className="ci-block"><div className="k">{T.ci_phone_k}</div><div className="v">{T.ci_phone_v}</div></div>
            <div className="ci-block"><div className="k">{T.ci_mail_k}</div><div className="v"><a href={`mailto:${T.ci_mail_v}`}>{T.ci_mail_v}</a></div></div>
            <div className="ci-block"><div className="k">{T.ci_hours_k}</div><div className="v small">{T.ci_hours_v}</div></div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Pillars, Process, Workshop, Family, Factory, Contact });