/* Anís Bakery — intro, nav, hero. Bilingual via (t, lang) props. */
(function () {
const DS = window.AnSBakeryDesignSystem_4623ee;
const { Button, Chip, Badge, ProductCard, PriceRow, SocialButton, SectionTitle } = DS;
const C = window.ANIS_CONTACT;
const waLink = (name, t) => `https://wa.me/${C.waNumber}?text=${encodeURIComponent(t.waHi(name))}`;
const openWA = (name, t) => window.open(waLink(name, t), "_blank");

/* ----------------------------------------------------------------
   INTRO — clean silent clip, gold star-anise mark floated on a soft
   glow. Entering triggers a premium dissolve: the intro blurs + scales
   away while the bakery rises underneath.
----------------------------------------------------------------- */
function IntroVideo({ onEnter, t }) {
  const vref = React.useRef(null);
  const [leaving, setLeaving] = React.useState(false);
  const enter = React.useCallback(() => {
    if (leaving) return;
    setLeaving(true);
    setTimeout(onEnter, 1050);
  }, [onEnter, leaving]);

  React.useEffect(() => {
    const v = vref.current;
    if (v) { v.play().catch(() => {}); v.onended = enter; }
    const safety = setTimeout(enter, 6400);
    return () => clearTimeout(safety);
  }, [enter]);

  return (
    <div className={"anis-intro" + (leaving ? " is-leaving" : "")} onClick={enter}>
      <video ref={vref} muted playsInline preload="auto" src="assets/video/intro.mp4" className="anis-intro__video" />
      <div className="anis-intro__vignette" />
      <div className="anis-intro__plate" aria-hidden="true" />
      <img src="assets/logo/logo-transparent.png" alt="Anís Bakery" className="anis-intro__logo" />
      <button onClick={(e) => { e.stopPropagation(); enter(); }} className="anis-intro__skip">{t.skip} ›</button>
    </div>
  );
}

/* ---------------------------------------------------------------- NAV */
function SiteNav({ t, lang, setLang }) {
  const [solid, setSolid] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setSolid(window.scrollY > 40);
    window.addEventListener("scroll", onScroll);
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const jump = (id) => document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
  return (
    <header className={"anis-nav" + (solid ? " is-solid" : "")}>
      <div className="anis-nav__inner">
        <div className="anis-nav__brand" onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}>
          <img src="assets/logo/logo-orange.jpg" alt="Anís Bakery" />
          <span>Anís Bakery</span>
        </div>
        <nav className="anis-nav__links">
          <button onClick={() => jump("menu")}>{t.navMenu}</button>
          <button onClick={() => jump("proceso")}>{t.navProc}</button>
          <button onClick={() => jump("about")}>{t.navAbout}</button>
          <button onClick={() => jump("precios")}>{t.navPrices}</button>
        </nav>
        <div className="anis-nav__right">
          <LangToggle lang={lang} setLang={setLang} />
          <div className="anis-nav__order"><SocialButton network="whatsapp" label={t.navOrder} href={waLink(null, t)} /></div>
        </div>
      </div>
    </header>
  );
}

function LangToggle({ lang, setLang }) {
  return (
    <div className="anis-lang" role="group" aria-label="Language">
      <span className={"anis-lang__slider " + (lang === "en" ? "right" : "left")} />
      <button className={lang === "es" ? "on" : ""} onClick={() => setLang("es")}>ES</button>
      <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
    </div>
  );
}

/* ------------------------------------------------- ROTATING SEAL STAMP */
function Seal({ size = 132 }) {
  return (
    <div className="anis-seal" style={{ width: size, height: size }} aria-hidden="true">
      <img src="assets/logo/logo-transparent.png" alt="" className="anis-seal__mark" />
    </div>
  );
}

/* -------------------------------------------------------- MARQUEE BAND */
function Marquee({ lang }) {
  const words = lang === "en"
    ? ["Treat yourself always", "Cheesecake", "Walnut Kuchen", "Lemon Pie", "Made by hand", "Hojarasca", "Small batch", "Chocolate Cake"]
    : ["Prémiate siempre", "Cheesecake", "Kuchen de Nuez", "Pie de Limón", "Hecho a mano", "Hojarasca", "En lotes pequeños", "Torta de Chocolate"];
  const run = words.concat(words);
  return (
    <div className="anis-marquee" aria-hidden="true">
      <div className="anis-marquee__track">
        {run.map((w, i) => (
          <span key={i} className="anis-marquee__item">{w}<i className="anis-marquee__star">✦</i></span>
        ))}
      </div>
    </div>
  );
}

/* ---------------------------------------------------------------- HERO */
function Hero({ t }) {
  const jump = (id) => document.getElementById(id)?.scrollIntoView({ behavior: "smooth" });
  const [tilt, setTilt] = React.useState({ x: 0, y: 0 });
  const onMove = (e) => {
    const r = e.currentTarget.getBoundingClientRect();
    setTilt({ x: ((e.clientX - r.left) / r.width - 0.5) * 10, y: ((e.clientY - r.top) / r.height - 0.5) * -10 });
  };
  return (
    <section id="top" className="anis-hero">
      <div className="anis-hero__grid">
        <div className="anis-hero__copy anis-rise">
          <span className="anis-eyebrow"><i>✦</i> {t.heroBadge}</span>
          <h1 className="anis-hero__title">
            {t.heroTitleA} <span className="hi">{t.heroTitleHi}</span> {t.heroTitleB}
          </h1>
          <p className="anis-hero__text">{t.heroText}</p>
          <div className="anis-hero__cta">
            <Button variant="primary" size="lg" onClick={() => jump("menu")}>{t.heroMenu}</Button>
            <button className="anis-textlink" onClick={() => openWA(null, t)}>{t.heroOrder} <span>→</span></button>
          </div>
          <div className="anis-hero__stats">
            <div><b>{t.stat1}</b><small>{t.stat1s}</small></div>
            <div><b>{t.stat2}</b><small>{t.stat2s}</small></div>
            <div><b>{t.stat3}</b><small>{t.stat3s}</small></div>
          </div>
        </div>
        <div className="anis-hero__media" onMouseMove={onMove} onMouseLeave={() => setTilt({ x: 0, y: 0 })}>
          <div className="anis-hero__blob" />
          <div className="anis-hero__frame" style={{ transform: `perspective(1000px) rotateY(${tilt.x}deg) rotateX(${tilt.y}deg)` }}>
            <img src="assets/products/cheesecake-frutilla.jpg" alt="Cheesecake de frutilla" />
          </div>
          <div className="anis-hero__seal-wrap"><Seal /></div>
          <p className="anis-hero__tag">{t.heroTag}</p>
        </div>
      </div>
    </section>
  );
}

window.AnisSections = { IntroVideo, SiteNav, Hero, Marquee, Seal, openWA, waLink, C };
})();