/* VE GAMERZ — router, per-page SEO + JSON-LD, mount. */
const { SiteBackground, NavBar, Footer, Breadcrumbs, ROUTES } = window.VG;
const APP = window.VG_DATA;

const SCREENS = {
  home: () => window.HomeScreen,
  about: () => window.AboutScreen,
  videos: () => window.VideosScreen,
  membership: () => window.MembershipScreen,
  contact: () => window.ContactScreen
};
const LABELS = { home: 'Home', about: 'About', videos: 'Videos', membership: 'Membership', contact: 'Contact' };

function routeFromHash() {
  const h = (location.hash || '').replace(/^#\/?/, '').split('?')[0];
  return SCREENS[h] ? h : 'home';
}

function upsertMeta(sel, attr, key, content) {
  let el = document.head.querySelector(sel);
  if (!el) { el = document.createElement('meta'); el.setAttribute(attr, key); document.head.appendChild(el); }
  el.setAttribute('content', content);
}
function upsertLink(rel, href) {
  let el = document.head.querySelector('link[rel="' + rel + '"]');
  if (!el) { el = document.createElement('link'); el.setAttribute('rel', rel); document.head.appendChild(el); }
  el.setAttribute('href', href);
}

function applySEO(route) {
  const s = APP.SEO[route] || APP.SEO.home;
  const url = APP.SITE.url + (route === 'home' ? '/' : s.path);
  const ogImg = APP.SITE.url + '/assets/logo.jpg';
  document.title = s.title;
  upsertMeta('meta[name="description"]', 'name', 'description', s.description);
  upsertMeta('meta[name="keywords"]', 'name', 'keywords', APP.SITE.keywords);
  upsertLink('canonical', url);
  upsertMeta('meta[property="og:title"]', 'property', 'og:title', s.title);
  upsertMeta('meta[property="og:description"]', 'property', 'og:description', s.description);
  upsertMeta('meta[property="og:type"]', 'property', 'og:type', 'website');
  upsertMeta('meta[property="og:url"]', 'property', 'og:url', url);
  upsertMeta('meta[property="og:image"]', 'property', 'og:image', ogImg);
  upsertMeta('meta[property="og:site_name"]', 'property', 'og:site_name', APP.SITE.name);
  upsertMeta('meta[name="twitter:card"]', 'name', 'twitter:card', 'summary_large_image');
  upsertMeta('meta[name="twitter:title"]', 'name', 'twitter:title', s.title);
  upsertMeta('meta[name="twitter:description"]', 'name', 'twitter:description', s.description);
  upsertMeta('meta[name="twitter:image"]', 'name', 'twitter:image', ogImg);

  const crumbs = route === 'home' ? [{ n: 'Home', u: APP.SITE.url + '/' }] : [{ n: 'Home', u: APP.SITE.url + '/' }, { n: LABELS[route], u: url }];
  const graph = [
    { '@type': 'Organization', '@id': APP.SITE.url + '/#org', name: APP.SITE.name, url: APP.SITE.url + '/', logo: ogImg, slogan: APP.SITE.tagline, sameAs: [APP.YOUTUBE, APP.INSTAGRAM] },
    { '@type': 'Person', '@id': APP.SITE.url + '/#creator', name: APP.SITE.name, description: 'Gaming content creator and community builder.', url: APP.SITE.url + '/', sameAs: [APP.YOUTUBE, APP.INSTAGRAM] },
    { '@type': 'WebSite', '@id': APP.SITE.url + '/#website', name: APP.SITE.name, url: APP.SITE.url + '/', publisher: { '@id': APP.SITE.url + '/#org' } },
    { '@type': 'BreadcrumbList', itemListElement: crumbs.map((c, i) => ({ '@type': 'ListItem', position: i + 1, name: c.n, item: c.u })) }
  ];
  if (route === 'home' || route === 'videos') {
    const v = APP.VIDEOS.find(x => x.popular) || APP.VIDEOS[0];
    graph.push({ '@type': 'VideoObject', name: v.title, description: 'VE GAMERZ ' + v.category + ' gameplay.', thumbnailUrl: ogImg, uploadDate: '2026-01-01', contentUrl: v.href, embedUrl: v.href, publisher: { '@id': APP.SITE.url + '/#org' } });
  }
  let ld = document.getElementById('vg-ld');
  if (!ld) { ld = document.createElement('script'); ld.type = 'application/ld+json'; ld.id = 'vg-ld'; document.head.appendChild(ld); }
  ld.textContent = JSON.stringify({ '@context': 'https://schema.org', '@graph': graph });
}

function App() {
  const [route, setRoute] = React.useState(routeFromHash());
  React.useEffect(() => {
    const on = () => { setRoute(routeFromHash()); window.scrollTo({ top: 0, left: 0, behavior: 'auto' }); };
    window.addEventListener('hashchange', on);
    if (!location.hash) location.hash = '#/';
    return () => window.removeEventListener('hashchange', on);
  }, []);
  React.useEffect(() => { applySEO(route); }, [route]);
  const go = (id) => { if (id === route) { window.scrollTo({ top: 0, behavior: 'smooth' }); return; } location.hash = '#/' + (id === 'home' ? '' : id); };
  const Screen = SCREENS[route]();
  const trail = route === 'home' ? null : [{ id: 'home', label: 'Home' }, { id: route, label: LABELS[route] }];
  return (
    <React.Fragment>
      <SiteBackground />
      <NavBar route={route} go={go} />
      {trail ? <Breadcrumbs trail={trail} go={go} /> : null}
      {Screen ? <Screen /> : null}
      <Footer go={go} />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);