/* Anís Bakery — menu, about, prices, footer. Bilingual via (t, lang). */
(function () {
const DS = window.AnSBakeryDesignSystem_4623ee;
const { Button, Chip, Badge, ProductCard, PriceRow, SocialButton, SectionTitle } = DS;
const { openWA, waLink, C } = window.AnisSections;

/* Reveal-on-scroll wrapper */
function Reveal({ children, delay = 0 }) {
  const ref = React.useRef(null);
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setShow(true); io.disconnect(); } }, { threshold: 0.15 });
    io.observe(el); return () => io.disconnect();
  }, []);
  return <div ref={ref} className={"anis-reveal" + (show ? " in" : "")} style={{ transitionDelay: delay + "ms" }}>{children}</div>;
}

/* ---------------------------------------------------------------- MENU */
function MenuSection({ t, lang }) {
  const cats = [["all", t.catAll], ["tortas", t.catTortas], ["cheesecakes", t.catCheesecakes], ["dulces", t.catDulces]];
  const [cat, setCat] = React.useState("all");
  const items = window.ANIS_DATA.products.filter(p => cat === "all" || p.cat === cat);
  return (
    <section id="menu" className="anis-section">
      <div className="anis-section__head">
        <SectionTitle kicker={t.menuKicker} serif={t.menuSerif} script={t.menuScript} />
        <div className="anis-chips">
          {cats.map(([id, label]) => <Chip key={id} active={cat === id} onClick={() => setCat(id)}>{label}</Chip>)}
        </div>
      </div>
      <div className="anis-grid">
        {items.map((p, i) => (
          <Reveal key={p.id} delay={(i % 3) * 90}>
            <ProductCard image={p.image} name={p.name} description={p.desc[lang]}
              price={p.price} priceWhole={p.priceWhole}
              badge={p.badge ? { text: p.badge[lang], tone: p.badge.tone } : null}
              onOrder={() => openWA(p.name, t)} />
          </Reveal>
        ))}
      </div>
    </section>
  );
}

/* -------------------------------------------------- PROCESS (drag reveal) */
function ProcessSection({ t, lang }) {
  const items = window.ANIS_DATA.reveal;
  const [idx, setIdx] = React.useState(0);
  const [pos, setPos] = React.useState(6);           // doneness 0 (raw, left) .. 100 (baked, right)
  const [hint, setHint] = React.useState(true);
  const [drag, setDrag] = React.useState(false);
  const frameRef = React.useRef(null);
  const dragging = React.useRef(false);
  const item = items[idx];

  const setFromClientX = (clientX) => {
    const el = frameRef.current; if (!el) return;
    const r = el.getBoundingClientRect();
    let p = ((clientX - r.left) / r.width) * 100;
    p = Math.max(0, Math.min(100, p));
    if (p > 95) p = 100;      // snap to fully baked (right)
    if (p < 5) p = 0;         // snap to fully raw (left)
    setPos(p);
  };
  React.useEffect(() => {
    const move = (e) => { if (!dragging.current) return; e.preventDefault(); setFromClientX(e.touches ? e.touches[0].clientX : e.clientX); };
    const up = () => { dragging.current = false; setDrag(false); };
    window.addEventListener("mousemove", move); window.addEventListener("mouseup", up);
    window.addEventListener("touchmove", move, { passive: false }); window.addEventListener("touchend", up);
    return () => { window.removeEventListener("mousemove", move); window.removeEventListener("mouseup", up);
      window.removeEventListener("touchmove", move); window.removeEventListener("touchend", up); };
  }, []);
  const start = (e) => { dragging.current = true; setDrag(true); setHint(false); setFromClientX(e.touches ? e.touches[0].clientX : e.clientX); };
  const pickItem = (i) => { setIdx(i); setPos(6); setHint(true); };

  return (
    <section id="proceso" className="anis-reveal-sec">
      <div className="anis-reveal-sec__heat" aria-hidden="true" />
      <div className="anis-reveal-sec__inner">
        <div className="anis-reveal-sec__head">
          <SectionTitle kicker={t.procKicker} serif={t.procSerif} script={t.procScript} align="left" />
          <p className="anis-reveal-sec__lead">{item[lang]}</p>
        </div>

        <div className={"anis-ba" + (drag ? " dragging" : "")} ref={frameRef} onMouseDown={start} onTouchStart={start}
          style={{ "--done": pos / 100 }}>
          <img className="raw" src={item.before} alt={item[lang] + " raw"} draggable="false" />
          <img className="baked" src={item.after} alt={item[lang]} draggable="false" style={{ opacity: pos / 100 }} />
          <span className="bloom" style={{ opacity: 0.12 + (pos / 100) * 0.8 }} />
          <span className="heat" style={{ opacity: 0.15 + (pos / 100) * 0.85 }} />
          <span className="steam s1" style={{ opacity: Math.max(0, (pos - 55) / 45) }} />
          <span className="steam s2" style={{ opacity: Math.max(0, (pos - 62) / 38) }} />
          <span className="steam s3" style={{ opacity: Math.max(0, (pos - 70) / 30) }} />

          <span className="tag tag--before" style={{ opacity: 1 - (pos / 100) * 0.6 }}>🥣 {t.revealBefore}</span>
          <span className="tag tag--after" style={{ opacity: 0.4 + (pos / 100) * 0.6 }}>✨ {t.revealAfter}</span>
          <span className="meter">{pos >= 100 ? "✨ 100% " + t.revealMeter : "🔥 " + Math.round(pos) + "% " + t.revealMeter}</span>

          <div className="bake-ends"><span>{t.revealBefore}</span><span>{t.revealAfter}</span></div>
          <div className="bake-track">
            <span className="fill" style={{ width: pos + "%" }} />
            <span className="knob" style={{ left: pos + "%" }} aria-hidden="true">{pos >= 100 ? "🍰" : "🔥"}</span>
          </div>
          <span className={"drag-hint" + (hint ? "" : " gone")}>{t.revealDrag} →</span>
        </div>

        <div className="anis-reveal-sec__thumbs">
          {items.map((it, i) => (
            <button key={it.id} className={i === idx ? "on" : ""} onClick={() => pickItem(i)} aria-label={it[lang]}>
              <img src={it.after} alt={it[lang]} />
              <span>{it[lang]}</span>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------------------------------------------------------- ABOUT */
function AboutSection({ t }) {
  return (
    <section id="about" className="anis-about">
      <div className="anis-about__inner">
        <Reveal>
          <div className="anis-about__photo">
            <img src="assets/products/torta-hojarasca.jpg" alt="Torta hojarasca" />
          </div>
        </Reveal>
        <div className="anis-about__copy">
          <SectionTitle kicker={t.aboutKicker} serif={t.aboutSerif} script={t.aboutScript} align="left" onDark />
          <p>{t.aboutText}</p>
          <div className="anis-about__tags">
            <Badge tone="pride" icon="∞">{t.tagNeuro}</Badge>
            <Badge tone="insta" icon="📷">{C.instagramHandle}</Badge>
            <Badge tone="soft">{t.tagRegion} 🇨🇱</Badge>
          </div>
          <p className="anis-about__quote">{t.heroTag}</p>
          <SocialButton network="instagram" label={t.aboutFollow} href={C.instagram} />
        </div>
      </div>
    </section>
  );
}

/* ---------------------------------------------------------------- PRICES */
function PricesSection({ t, lang }) {
  return (
    <section id="precios" className="anis-prices">
      <div className="anis-prices__inner">
        <div className="anis-prices__aside">
          <SectionTitle kicker={t.pricesKicker} serif={t.pricesSerif} script={t.pricesScript} align="left" />
          <p>{t.pricesText}</p>
          <div className="anis-prices__legend">
            <span>· {t.perUnit}</span><span>· {t.perWhole}</span>
          </div>
          <Button variant="primary" icon="🎂" onClick={() => openWA(null, t)}>{t.pricesOrder}</Button>
        </div>
        <div className="anis-prices__list">
          {window.ANIS_DATA.priceList.map((p, i) => (
            <Reveal key={i} delay={i * 45}>
              <PriceRow name={p[lang]} price={p.price} priceWhole={p.priceWhole} index={i} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------------------------------------------------------- FOOTER */
function OrderFooter({ t }) {
  return (
    <footer className="anis-foot">
      <div className="anis-foot__inner">
        <img className="anis-foot__logo" src="assets/logo/logo-transparent.png" alt="Anís Bakery" />
        <SectionTitle serif={t.footSerif} script={t.footScript} onDark />
        <p>{t.footText}</p>
        <div className="anis-foot__btns">
          <SocialButton network="whatsapp" label={C.waDisplay} href={waLink(null, t)} />
          <SocialButton network="instagram" href={C.instagram} />
          <a className="anis-foot__email" href={"mailto:" + C.email}>✉ {t.footEmail}</a>
        </div>
        <div className="anis-foot__rule" />
        <p className="anis-foot__note">© {new Date().getFullYear()} {t.footNote} ∞🌈</p>
      </div>
    </footer>
  );
}

window.AnisSections2 = { MenuSection, ProcessSection, AboutSection, PricesSection, OrderFooter };
})();