// App — History-API router with dynamic meta tags

const ROUTES = {
  home:       '/',
  projects:   '/projekte',
  studio:     '/studio',
  services:   '/leistungen',
  contact:    '/kontakt',
  impressum:  '/impressum',
  datenschutz:'/datenschutz',
};

const BASE = 'https://www.feinplaner.de';

function pathToRoute(path) {
  if (path === '/' || path === '') return 'home';
  if (path.startsWith('/projekte/')) return 'project/' + path.slice('/projekte/'.length);
  if (path === '/projekte') return 'projects';
  if (path === '/studio')   return 'studio';
  if (path === '/leistungen') return 'services';
  if (path === '/kontakt')  return 'contact';
  if (path === '/impressum') return 'impressum';
  if (path === '/datenschutz') return 'datenschutz';
  return 'home';
}

function routeToPath(r) {
  if (r.startsWith('project/')) return '/projekte/' + r.slice('project/'.length);
  return ROUTES[r] || '/';
}

function setMeta(route) {
  const defaults = {
    title: 'Architekt Stuttgart – feinplaner · Timo Pietschmann',
    desc:  'Freier Architekt Stuttgart: Timo Pietschmann · feinplaner. Neubau, Sanierung, Innenarchitektur aus einer Hand. HOAI-Leistungsphasen 1–9, Stuttgart und Region.',
    img:   BASE + '/assets/photos/foyer-eg-03.webp',
    url:   BASE + '/',
  };

  let meta = { ...defaults };

  if (route === 'projects') {
    meta = { ...defaults,
      title: 'Architekt Stuttgart – Projekte | feinplaner',
      desc:  'Architekturprojekte von feinplaner Stuttgart: Wohnungsbau, öffentliche Bauten, Gewerbe und Wettbewerbe. Arbeiten von Freiem Architekt Timo Pietschmann.',
      url:   BASE + '/projekte',
    };
  } else if (route === 'studio') {
    meta = { ...defaults,
      title: 'Architekt Stuttgart – Büro | feinplaner · Timo Pietschmann',
      desc:  'Timo Pietschmann – Freier Architekt in Stuttgart. Mitglied Architektenkammer Baden-Württemberg. feinplaner: Werdegang, Haltung und Netzwerk.',
      img:   BASE + '/assets/photos/timo-portrait-neu.webp',
      url:   BASE + '/studio',
    };
  } else if (route === 'services') {
    meta = { ...defaults,
      title: 'Architekt Stuttgart – Leistungen HOAI | feinplaner',
      desc:  'Alle neun HOAI-Leistungsphasen aus einer Hand · Architekt Stuttgart. Neubau, Bauen im Bestand, Innenarchitektur und Beratung – Timo Pietschmann.',
      url:   BASE + '/leistungen',
    };
  } else if (route === 'contact') {
    meta = { ...defaults,
      title: 'Architekt Stuttgart – Kontakt | feinplaner',
      desc:  'Kontakt zu feinplaner – Timo Pietschmann, Freier Architekt Stuttgart. Mörikestraße 12A, 70178 Stuttgart. Erstgespräch kostenlos und unverbindlich.',
      url:   BASE + '/kontakt',
    };
  } else if (route.startsWith('project/')) {
    const slug = route.slice('project/'.length);
    const project = (window.feinData?.PROJECTS || []).find(p => p.slug === slug);
    if (project) {
      const titleText = project.title.map(p => typeof p === 'string' ? p : p.ital).join('');
      meta = { ...defaults,
        title: titleText + ' — feinplaner',
        desc:  project.narrative?.[0] || defaults.desc,
        img:   project.cover || defaults.img,
        url:   BASE + '/projekte/' + slug,
      };
    }
  }

  document.title = meta.title;
  setTag('name', 'description', meta.desc);
  setTag('property', 'og:title', meta.title);
  setTag('property', 'og:description', meta.desc);
  setTag('property', 'og:image', meta.img);
  setTag('property', 'og:url', meta.url);
  setTag('name', 'twitter:title', meta.title);
  setTag('name', 'twitter:description', meta.desc);
  setTag('name', 'twitter:image', meta.img);
  const canon = document.querySelector('link[rel="canonical"]');
  if (canon) canon.setAttribute('href', meta.url);

  // FAQPage schema is only valid on the homepage — disable it for other routes
  const faqEl = document.getElementById('faq-schema');
  if (faqEl) faqEl.setAttribute('type', route === 'home' ? 'application/ld+json' : 'text/plain');
}

function setTag(attr, key, val) {
  let el = document.querySelector(`meta[${attr}="${key}"]`);
  if (!el) { el = document.createElement('meta'); el.setAttribute(attr, key); document.head.appendChild(el); }
  el.setAttribute('content', val);
}

function App() {
  const [route, setRoute] = React.useState(() => pathToRoute(window.location.pathname));

  React.useEffect(() => {
    const onPop = () => { const r = pathToRoute(window.location.pathname); setRoute(r); setMeta(r); };
    window.addEventListener('popstate', onPop);
    setMeta(route);
    return () => window.removeEventListener('popstate', onPop);
  }, []);

  const navigate = (r) => {
    const path = routeToPath(r);
    window.history.pushState({}, '', path);
    setRoute(r);
    setMeta(r);
    window.scrollTo(0, 0);
  };

  if (route.startsWith('project/')) {
    const slug = route.slice('project/'.length);
    return <ProjectPage navigate={navigate} slug={slug} />;
  }
  if (route === 'projects')    return <ProjectsPage navigate={navigate} />;
  if (route === 'studio')      return <StudioPage navigate={navigate} />;
  if (route === 'services')    return <ServicesPage navigate={navigate} />;
  if (route === 'contact')     return <ContactPage navigate={navigate} />;
  if (route === 'impressum')   return <ImpressumPage navigate={navigate} />;
  if (route === 'datenschutz') return <DatenschutzPage navigate={navigate} />;
  return <HomePage navigate={navigate} />;
}

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