/* Pomona Berries — shared site chrome: Nav + Footer. Exports to window. */
(function () {
  const { useState, useEffect } = React;
  const C = window.POMONA.color;

  function Logo({ white, onClick }) {
    return (
      <img src={white ? ((window.__resources&&window.__resources.logoWhite)||'assets/pomona-logo-white.png') : ((window.__resources&&window.__resources.logo)||'assets/pomona-logo.png')}
        alt="Pomona Berries" style={{ height: 46, cursor: 'pointer' }} onClick={onClick} />
    );
  }

  function Nav({ route, go, lang, setLang, overHero }) {
    const [solid, setSolid] = useState(!overHero);
    const [menuOpen, setMenuOpen] = useState(false);
    useEffect(() => {
      if (!overHero) { setSolid(true); return; }
      setSolid(false);
      const sc = document.querySelector('.p-scroll');
      const el = sc || window;
      const onScroll = () => {
        const y = sc ? sc.scrollTop : window.scrollY;
        setSolid(y > 560);
      };
      el.addEventListener('scroll', onScroll);
      onScroll();
      return () => el.removeEventListener('scroll', onScroll);
    }, [overHero, route]);
    useEffect(() => { setMenuOpen(false); }, [route]);

    const t = window.POMONA.t[lang];
    const links = [
      ['home', t.nav.home], ['about', t.nav.about], ['products', t.nav.portfolio],
      ['pineberry', t.nav.pineberry], ['contact', t.nav.contact],
    ];
    const nav = (r, g) => { go(r, g); setMenuOpen(false); };
    const transparent = overHero && !solid && !menuOpen;
    return (
      <nav className={'p-nav' + (transparent ? ' on-hero' : '') + (menuOpen ? ' menu-open' : '')}>
        <Logo white={transparent} onClick={() => nav('home')} />
        <div className="p-nav-links">
          {links.map(([r, label]) => {
            const cls = [route === r ? 'active' : '', r === 'pineberry' ? 'pine' : ''].filter(Boolean).join(' ');
            if (r === 'products') {
              const g = window.PSITE.groups;
              const item = (gk) => (
                <a key={gk} onClick={() => nav('products', gk)}>
                  {g[gk][lang]}<span className="sdesc">{g[gk].sub[lang]}</span>
                </a>
              );
              return (
                <div className="p-navitem" key={r}>
                  <a className={cls} onClick={() => nav('products')}>
                    {label}
                    <svg className="chev" width="11" height="11" viewBox="0 0 11 11" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M2 4l3.5 3.5L9 4" /></svg>
                  </a>
                  <div className="p-submenu">
                    {item('core')}{item('dif')}{item('transf')}
                  </div>
                </div>
              );
            }
            return <a key={r} className={cls} onClick={() => nav(r)}>{label}</a>;
          })}
        </div>
        <div className="p-nav-right">
          <div className="p-lang">
            <button className={lang === 'es' ? 'on' : ''} onClick={() => setLang('es')}>ES</button>
            <button className={lang === 'en' ? 'on' : ''} onClick={() => setLang('en')}>EN</button>
          </div>
          <button className="p-nav-burger" aria-label="Menú" aria-expanded={menuOpen} onClick={() => setMenuOpen((o) => !o)}>
            <span></span><span></span><span></span>
          </button>
        </div>
      </nav>
    );
  }

  function Footer({ go, lang }) {
    const t = window.POMONA.t[lang];
    return (
      <footer className="p-foot">
        <div className="top">
          <div>
            <Logo onClick={() => go('home')} />
            <p className="ln" style={{ marginTop: 16 }}>{t.footer.tag}</p>
            <div className="social">
              <a href="https://www.instagram.com/pomonaberries" target="_blank" rel="noreferrer" title="Instagram">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg>
              </a>
              <a href="https://www.facebook.com/profile.php?id=61552606584903" target="_blank" rel="noreferrer" title="Facebook">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M14 9h3l.5-3H14V4.2c0-.9.3-1.5 1.6-1.5H17V.1C16.6 0 15.6 0 14.5 0 12 0 10.3 1.5 10.3 4.2V6H7.5v3h2.8v9H14V9z"/></svg>
              </a>
            </div>
          </div>
          <div className="cols">
            <div>
              <h5>{lang === 'es' ? 'Navegación' : 'Navigation'}</h5>
              <a onClick={() => go('about')}>{t.nav.about}</a>
              <a onClick={() => go('products')}>{t.nav.portfolio}</a>
              <a onClick={() => go('pineberry')}>{t.nav.pineberry}</a>
              <a onClick={() => go('contact')}>{t.nav.contact}</a>
            </div>
            <div>
              <h5>{t.contact.office}</h5>
              <p className="ln">{t.contact.address}</p>
              <a href={'tel:' + t.contact.phone.replace(/[^+\d]/g, '')}>{t.contact.phone}</a>
              <a href={'mailto:' + t.contact.mail}>{t.contact.mail}</a>
            </div>
          </div>
        </div>
        <div className="legal">
          <span>© {new Date().getFullYear()} Pomona Berries. {lang === 'es' ? 'Todos los derechos reservados.' : 'All rights reserved.'}</span>
          <span>{t.footer.city}</span>
        </div>
      </footer>
    );
  }

  // Reusable berry-lineup + reviews blocks shared by Home and other pages
  function specVal(v, lang) { return typeof v === 'string' ? v : v[lang]; }

  Object.assign(window, { PNav: Nav, PFooter: Footer, PLogo: Logo, pSpecVal: specVal });
})();