/* ============================================================
   UI primitives — Nav, Footer, Reveal, icons
   ============================================================ */
const { useState, useEffect, useRef } = React;

/* ---------- Scroll reveal ---------- */
function Reveal({ children, delay, as, className, ...rest }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((ents) => {
      ents.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const Tag = as || "div";
  return <Tag ref={ref} className={"reveal" + (delay ? " d" + delay : "") + (className ? " " + className : "")} {...rest}>{children}</Tag>;
}

/* ---------- Icons ---------- */
const Ico = {
  arrow: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" {...p}><path d="M5 12h14M13 6l6 6-6 6"/></svg>,
  check: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M5 12.5l4.5 4.5L19 7"/></svg>,
  cam: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><rect x="3" y="6.5" width="18" height="13" rx="2"/><circle cx="12" cy="13" r="3.4"/><path d="M8 6.5l1.5-2.5h5L16 6.5"/></svg>,
  wa: (p) => <svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M12 2a10 10 0 00-8.5 15.2L2 22l4.9-1.4A10 10 0 1012 2zm0 18.2a8.2 8.2 0 01-4.2-1.2l-.3-.2-2.9.8.8-2.8-.2-.3A8.2 8.2 0 1112 20.2zm4.6-6.1c-.25-.13-1.47-.73-1.7-.8-.23-.1-.4-.13-.56.12s-.64.8-.79.97c-.14.16-.29.18-.54.06a6.7 6.7 0 01-2-1.23 7.4 7.4 0 01-1.36-1.7c-.14-.25 0-.38.11-.5.11-.12.25-.29.37-.43.13-.14.17-.25.26-.41.08-.17.04-.31-.02-.44-.06-.12-.56-1.35-.77-1.85-.2-.48-.4-.41-.56-.42h-.48a.92.92 0 00-.67.31 2.8 2.8 0 00-.87 2.08c0 1.23.89 2.41 1.02 2.58.13.17 1.76 2.69 4.27 3.77.6.26 1.06.41 1.42.53.6.19 1.14.16 1.57.1.48-.07 1.47-.6 1.68-1.18.2-.58.2-1.07.14-1.18-.06-.1-.22-.16-.47-.28z"/></svg>,
  ig: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.3" cy="6.7" r="1" fill="currentColor" stroke="none"/></svg>,
  fb: (p) => <svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M14 9V7c0-1 .3-1.5 1.6-1.5H17V2.2C16.6 2.1 15.6 2 14.5 2 11.9 2 10.3 3.6 10.3 6.4V9H8v3.2h2.3V22H14v-9.8h2.7l.4-3.2H14z"/></svg>,
  in: (p) => <svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M6.94 5a1.94 1.94 0 11-3.88 0 1.94 1.94 0 013.88 0zM3.3 8.4h3.28V22H3.3V8.4zM9.4 8.4h3.14v1.86h.05c.44-.83 1.5-1.7 3.1-1.7 3.32 0 3.93 2.18 3.93 5v8.44h-3.27v-7.5c0-1.78-.03-4.08-2.48-4.08-2.49 0-2.87 1.94-2.87 3.95V22H9.4V8.4z"/></svg>,
  x: (p) => <svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M17.5 3h3.2l-7 8 8.2 10.9h-6.4l-5-6.6-5.8 6.6H1.5l7.5-8.6L1.1 3h6.6l4.5 6 5.3-6zm-1.1 17h1.8L7.3 4.8H5.4L16.4 20z"/></svg>,
  pin: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><path d="M12 21s7-6.3 7-11a7 7 0 10-14 0c0 4.7 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/></svg>,
  mail: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3.5 6.5 12 13l8.5-6.5"/></svg>,
  phone: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><path d="M6.5 3.5h3l1.5 4-2 1.5a12 12 0 005 5l1.5-2 4 1.5v3a2 2 0 01-2 2A16 16 0 014.5 5.5a2 2 0 012-2z"/></svg>,
};

/* ---------- Cinematic image with caption ---------- */
function Img({ src, label, className, ratio, style }) {
  const [loaded, setLoaded] = useState(false);
  return (
    <div className={"ph " + (className || "")} style={{ aspectRatio: ratio || undefined, ...style }}>
      <img src={src} alt={label || ""} loading="lazy"
        onLoad={() => setLoaded(true)}
        style={{ position:"absolute", inset:0, width:"100%", height:"100%", objectFit:"cover",
                 opacity: loaded ? 1 : 0, transition:"opacity .7s ease" }} />
      {label && <span className="ph-label">{Ico.cam({})}{label}</span>}
    </div>
  );
}

/* ---------- Top navigation ---------- */
function Nav({ view, go, lang, setLang, t }) {
  const [solid, setSolid] = useState(false);
  const [menu, setMenu] = useState(false);
  useEffect(() => {
    const on = () => setSolid(window.scrollY > 40);
    on(); window.addEventListener("scroll", on);
    return () => window.removeEventListener("scroll", on);
  }, []);
  const items = [["collection", t.collection], ["experiences", t.experiences], ["events", t.events], ["story", t.story], ["press", t.press], ["blog", t.blog], ["visit", t.visit]];
  const nav = (v) => { go(v); setMenu(false); };
  return (
    <React.Fragment>
      <header className={"nav" + (solid ? " nav--solid" : "")}>
        <div className="brand" onClick={() => nav("home")}>
          <span className="brand-mark"></span>
          <span className="brand-txt"><b>Goldvarg</b><span>Collection Museum</span></span>
        </div>
        <nav className="nav-links">
          {items.map(([v, label]) => (
            <a key={v} className={"nav-link" + (view === v ? " active" : "")} onClick={() => nav(v)}>{label}</a>
          ))}
        </nav>
        <div className="nav-right">
          <div className="lang">
            <button className={lang === "es" ? "on" : ""} onClick={() => setLang("es")}>ES</button>
            <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
          </div>
          <button className="btn btn--gold" style={{ padding:"11px 20px" }} onClick={() => window.__gcBook()}>{t.bookShort}</button>
          <button className="burger" aria-label="Menu" onClick={() => setMenu(!menu)}>
            <span></span><span></span><span></span>
          </button>
        </div>
      </header>
      <div className={"mnav" + (menu ? " open" : "")}>
        {items.map(([v, label]) => (
          <a key={v} className={view === v ? "active" : ""} onClick={() => nav(v)}>{label}</a>
        ))}
        <a className={view === "contact" ? "active" : ""} onClick={() => nav("contact")}>{t.contact}</a>
        <div className="mnav-foot">
          <div className="lang">
            <button className={lang === "es" ? "on" : ""} onClick={() => setLang("es")}>ES</button>
            <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
          </div>
          <button className="btn btn--gold" onClick={() => { setMenu(false); window.__gcBook(); }}>{t.book}</button>
        </div>
      </div>

      <div className="book-bar">
        <span className="book-bar-txt">{lang === "es" ? "Visitá el museo" : "Visit the museum"}</span>
        <button className="btn btn--gold" onClick={() => window.__gcBook()}>{t.book}</button>
      </div>
    </React.Fragment>
  );
}

/* ---------- Trust / credentials marquee ---------- */
function TrustBar({ d }) {
  const row = d.items;
  return (
    <div className="trustbar" aria-label="credentials">
      <div className="trust-track">
        {[0, 1].map((dup) => (
          <div className="trust-seq" key={dup} aria-hidden={dup === 1}>
            {row.map((it, k) => (
              <span className="trust-item" key={k}>
                {it.stars && <span className="trust-stars">★★★★★</span>}
                {it.label}
                <span className="trust-sep">✦</span>
              </span>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------- Newsletter capture ---------- */
function Newsletter({ n }) {
  const [email, setEmail] = useState("");
  const [done, setDone] = useState(false);
  const submit = (e) => { e.preventDefault(); if (/\S+@\S+\.\S+/.test(email)) setDone(true); };
  return (
    <div className="newsletter">
      <div className="newsletter-l">
        <h4>{n.title}</h4>
        <p>{n.body}</p>
      </div>
      {done ? (
        <p className="newsletter-done">{Ico.check({ width:18, height:18 })} {n.success}</p>
      ) : (
        <form className="newsletter-form" onSubmit={submit}>
          <input type="email" required placeholder={n.placeholder} value={email} onChange={(e) => setEmail(e.target.value)} aria-label={n.placeholder} />
          <button type="submit" className="btn btn--gold">{n.button}</button>
        </form>
      )}
    </div>
  );
}

/* ---------- Floating WhatsApp ---------- */
function WaFloat({ w }) {
  return (
    <a className="wa-float" href={"https://wa.me/" + w.num + "?text=" + encodeURIComponent(w.msg)}
       target="_blank" rel="noopener" aria-label={w.label} title={w.label}>
      {Ico.wa({ width:28, height:28 })}
      <span className="wa-float-lbl">{w.label}</span>
    </a>
  );
}

/* ---------- Footer ---------- */
function Footer({ go, f, n }) {
  return (
    <footer className="footer">
      <div className="wrap">
        {n && <Newsletter n={n} />}
        <div className="foot-top">
          <div className="foot-brand">
            <div className="brand">
              <span className="brand-mark"></span>
              <span className="brand-txt"><b>Goldvarg</b><span>Collection Museum</span></span>
            </div>
            <p>{f.tagline}</p>
            <div className="socials" style={{ marginTop:24 }}>
              <a href="https://www.instagram.com/sergio_goldvarg_museum/" target="_blank" rel="noopener" aria-label="Instagram">{Ico.ig({})}</a>
              <a href="https://www.facebook.com/groups/1437957606970992" target="_blank" rel="noopener" aria-label="Facebook">{Ico.fb({})}</a>
              <a href="https://x.com/SergioGoldvarg" target="_blank" rel="noopener" aria-label="X">{Ico.x({})}</a>
              <a href="https://www.linkedin.com/in/sergio-goldvarg-90325511/" target="_blank" rel="noopener" aria-label="LinkedIn">{Ico.in({})}</a>
            </div>
          </div>
          <div className="foot-col">
            <h5>{f.explore}</h5>
            {f.exploreLinks.map(([label, v]) => <a key={v} onClick={() => go(v)}>{label}</a>)}
          </div>
          <div className="foot-col">
            <h5>{f.visit}</h5>
            <p dangerouslySetInnerHTML={{ __html: f.address }} />
            <p style={{ color:"var(--gold)" }}>{f.hours}</p>
          </div>
          <div className="foot-col">
            <h5>{f.contact}</h5>
            <a href="tel:+19548172196">+1 (954) 817-2196</a>
            <a href="mailto:info@goldvargcollection.com">info@goldvargcollection.com</a>
            <a href="https://www.goldvargcollection.com" target="_blank" rel="noopener">goldvargcollection.com</a>
          </div>
        </div>
        <div className="foot-bottom">
          <p className="disclaimer">{f.disclaimer}</p>
          <button className="btn btn--outline" onClick={() => window.__gcBook()}>{f.book}</button>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Reveal, Ico, Img, Nav, Footer, TrustBar, Newsletter, WaFloat });