/* Shared site shell — Logo, subpage Nav, Footer. Lang-aware (window.LANG = 'en' | 'es').
   Links use absolute root paths so the same file works at / (EN) and /es/ (ES).
   Note: ES homepage does not exist yet, so homepage links (logo, nav anchors, "For")
   point at the EN home for now. When /es/index.html is built, set HP = P below. */

const LANG = (typeof window !== 'undefined' && window.LANG) || 'en';
const P  = LANG === 'es' ? '/es' : '';   // service-page prefix
const HP = LANG === 'es' ? '/es' : '';   // homepage prefix (ES home now exists)
const MAIL = 'mailto:hello@talicense.com';

/* EN/ES versions of the current page, for the language switcher.
   Handles the resources (EN) <-> recursos (ES) path segment. */
const langHrefs = () => {
  const path = (typeof window !== 'undefined' && window.location.pathname) || '/index.html';
  const isES = /^\/es(\/|$)/.test(path);
  let enPath = isES ? path.replace(/^\/es/, '') : path;
  if (enPath === '' || enPath === '/') enPath = '/index.html';
  enPath = enPath.replace('/recursos', '/resources');   // normalize to EN segment
  const esPath = enPath.replace('/resources', '/recursos');
  return { en: enPath, es: '/es' + esPath };
};

const LangSwitch = () => {
  const { en, es } = langHrefs();
  return (
    <div className="lang-switch">
      <a href={en} className={LANG === 'en' ? 'active' : ''}>EN</a>
      <a href={es} className={LANG === 'es' ? 'active' : ''}>ES</a>
    </div>
  );
};

const STR = {
  en: {
    nav: [['What we do', '#what'], ['Who we serve', '#serve'], ['Problem', '#problem'], ['Proof', '#proof']],
    servicesH: 'Services', forH: 'For', contactH: 'Contact',
    tagline: <>AI likeness rights infrastructure. <em>Built for the people who own the face.</em></>,
    brandDesc: 'Rights infrastructure for talent agencies, estates, rights organizations, studios and brands.',
    services: [['Protect a Likeness', '/protect.html'], ['License a Likeness', '/license.html'], ['Evidence Packages', '/evidence.html'], ['Smart Contract API', '/api.html']],
    aud: ['Talent Agencies', 'Estates of Performers', 'Rights Organizations', 'Studios & Brands'],
    contact: [['Contact us', MAIL], ['Press inquiries', MAIL + '?subject=Press%20inquiry'], ['Legal partnerships', MAIL + '?subject=Legal%20partnership'], ['Schedule intake call', MAIL + '?subject=Schedule%20an%20intake%20call']],
    rights: 'All rights reserved',
  },
  es: {
    nav: [['Qué hacemos', '#what'], ['Para quién', '#serve'], ['El problema', '#problem'], ['Pruebas', '#proof']],
    servicesH: 'Servicios', forH: 'Para', contactH: 'Contacto',
    tagline: <>Infraestructura de derechos de imagen con IA. <em>Hecha para quienes son dueños de su rostro.</em></>,
    brandDesc: 'Infraestructura de derechos para agencias de talento, herederos, organizaciones de gestión, estudios y marcas.',
    services: [['Proteger una imagen', '/protect.html'], ['Licenciar una imagen', '/license.html'], ['Paquetes de prueba', '/evidence.html'], ['API de contratos', '/api.html']],
    aud: ['Agencias de talento', 'Herederos de artistas', 'Organizaciones de gestión de derechos', 'Estudios y marcas'],
    contact: [['Contáctanos', MAIL], ['Prensa', MAIL + '?subject=Consulta%20de%20prensa'], ['Alianzas legales', MAIL + '?subject=Alianza%20legal'], ['Agendar una llamada', MAIL + '?subject=Agendar%20una%20llamada']],
    rights: 'Todos los derechos reservados',
  },
};
const L = STR[LANG];
const home = HP + '/index.html';
const resourcesHref = LANG === 'es' ? '/es/recursos.html' : '/resources.html';
const resourcesLabel = LANG === 'es' ? 'Recursos' : 'Resources';

const Logo = () => (
  <div className="logo">
    <span style={{color: 'var(--hot)'}}>TALI</span><span style={{color: 'var(--accent)'}}>CENSE</span>
  </div>
);

const SiteNav = () => {
  const [open, setOpen] = React.useState(false);
  return (
    <nav className="nav">
      <div className="nav-inner">
        <div className="nav-bar nav-bar-sub">
          <a href={home} className="nav-logo-link"><Logo /></a>
          <div className="nav-links">
            {L.nav.map(([label, anchor]) => (
              <a key={anchor} href={home + anchor}>{label}</a>
            ))}
            <a href={resourcesHref}>{resourcesLabel}</a>
          </div>
          <div className="nav-right">
            <LangSwitch />
            <button className="nav-toggle" aria-label="Menu" aria-expanded={open} onClick={() => setOpen(!open)}>
              <span/><span/><span/>
            </button>
          </div>
        </div>
        {open && (
          <div className="nav-menu">
            {L.nav.map(([label, anchor]) => (
              <a key={anchor} href={home + anchor} onClick={() => setOpen(false)}>{label}</a>
            ))}
            <a href={resourcesHref} onClick={() => setOpen(false)}>{resourcesLabel}</a>
          </div>
        )}
      </div>
    </nav>
  );
};

const SiteFooter = () => (
  <footer className="footer">
    <div className="container">
      <div className="footer-tagline">{L.tagline}</div>
      <div className="footer-top">
        <div className="footer-brand">
          <a href={home} className="nav-logo-link"><Logo /></a>
          <p style={{marginTop: 22, fontSize: 14, lineHeight: 1.65}}>{L.brandDesc}</p>
        </div>
        <div className="footer-col">
          <h5>{L.servicesH}</h5>
          <ul>
            {L.services.map(([label, path]) => (
              <li key={path}><a href={P + path}>{label}</a></li>
            ))}
          </ul>
        </div>
        <div className="footer-col">
          <h5>{L.forH}</h5>
          <ul>
            {L.aud.map((label) => (
              <li key={label}><a href={home + '#serve'}>{label}</a></li>
            ))}
          </ul>
        </div>
        <div className="footer-col">
          <h5>{L.contactH}</h5>
          <ul>
            {L.contact.map(([label, href]) => (
              <li key={label}><a href={href}>{label}</a></li>
            ))}
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <div>© 2026 talicense · {L.rights}</div>
        <div>BLOCKCHAIN CERTIFIED · L2 ANCHORED</div>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Logo, SiteNav, SiteFooter, LangSwitch });