// =============================================================================
// Astovia · Shell DE (Nav, Footer, Router) — Deutsch
// =============================================================================

const PAGES = [
{ id: 'home',           label: 'Start',          num: '00' },
{ id: 'about',          label: 'Über uns',        num: '01', anchor: 'about' },
{ id: 'advisory',       label: 'Advisory',        num: '02' },
{ id: 'interim',        label: 'Interim',         num: '03' },
{ id: 'transformation', label: 'Transformation',  num: '04' },
{ id: 'contact',        label: 'Kontakt',         num: '05' }];

const ALL_PAGES = PAGES;
const VALID_ROUTES = ['home','about','advisory','interim','transformation','contact','impressum','datenschutz'];

function useHashRoute() {
  const getRaw = () => (window.location.hash || '').replace(/^#\/?/, '').trim();
  const get = () => {
    const h = getRaw();
    if (h === 'about') return 'home';
    return VALID_ROUTES.includes(h) ? h : 'home';
  };
  const getSelected = () => {
    const h = getRaw();
    return VALID_ROUTES.includes(h) ? h : 'home';
  };
  const [route, setRoute] = React.useState(get);
  const [selected, setSelected] = React.useState(getSelected);
  const scrollToAbout = () => {
    requestAnimationFrame(() => {
      const el = document.getElementById('about');
      if (el) {
        const top = el.getBoundingClientRect().top + window.scrollY - 64;
        window.scrollTo({ top, behavior: 'smooth' });
      }
    });
  };
  React.useEffect(() => {
    const onHash = () => {
      const raw = getRaw();
      setSelected(getSelected());
      if (raw === 'about') {
        setRoute('home');
        setTimeout(scrollToAbout, 60);
      } else {
        setRoute(get());
        window.scrollTo({ top: 0, behavior: 'auto' });
      }
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  const go = (id) => {
    if (id === 'about') {
      if (window.location.hash === '#/about') {
        scrollToAbout();
      } else {
        window.location.hash = '#/about';
      }
      return;
    }
    window.location.hash = '#/' + id;
  };
  return [route, go, selected];
}

function Nav({ route, go, selected }) {
  const active = selected || route;
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {setOpen(false);}, [active]);
  return (
    <nav className="nav" data-screen-label="Nav">
      <div className="container nav-inner">
        <div className="nav-left">
          <a className="nav-brand" onClick={() => go('home')}>
            <img src="../assets/logo-wordmark.png" alt="Astovia" style={{ height: '2.4em' }} />
            <span className="nav-scope"></span>
          </a>
        </div>
        <div className="nav-links">
          {PAGES.map((p) =>
          <a key={p.id} className={'nav-link' + (active === p.id ? ' active' : '')} onClick={() => go(p.id)}>
              {p.label}
            </a>
          )}
        </div>
        <div className="nav-right">
          <a className="nav-lang" href="../index.html" title="Switch to English">EN ▾</a>
          <button className="nav-menu-btn" aria-label="Menü" onClick={() => setOpen((o) => !o)}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
              {open ? <path d="M6 6 L18 18 M18 6 L6 18" /> :
              <React.Fragment>
                  <path d="M3 7h18" /><path d="M3 12h18" /><path d="M3 17h18" />
                </React.Fragment>
              }
            </svg>
          </button>
        </div>
      </div>
      <div className={'container nav-mobile' + (open ? ' open' : '')}>
        {PAGES.map((p) =>
        <a key={p.id} onClick={() => go(p.id)}>
            <span>{p.label}</span>
            <span className="num">{p.num}</span>
          </a>
        )}
        <div className="nav-mobile-status">
          <a href="../index.html" style={{ textDecoration: 'none', color: 'inherit' }}>EN ▾</a>
        </div>
      </div>
    </nav>);
}

function Footer({ go }) {
  return (
    <footer className="footer" data-screen-label="Footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <img src="../assets/logo-wordmark.png" alt="Astovia" />
            <p></p>
          </div>
          <div>
            <h4></h4>
            <ul>
              <li onClick={() => go('advisory')}></li>
              <li onClick={() => go('interim')}></li>
              <li onClick={() => go('transformation')}></li>
            </ul>
          </div>
          <div>
            <h4></h4>
            <ul>
              <li onClick={() => go('about')}></li>
              <li onClick={() => go('about')}></li>
              <li></li>
            </ul>
          </div>
          <div>
            <h4></h4>
            <ul>
              <li onClick={() => go('contact')}></li>
              <li onClick={() => go('contact')}></li>
              <li></li>
            </ul>
          </div>
        </div>
        <div className="footer-legal">
          <span style={{ display: 'flex', gap: 24, flexWrap: 'wrap', alignItems: 'center' }}>
            <span>© 2026 Astovia. Alle Rechte vorbehalten.</span>
            <a onClick={() => go('impressum')} style={{ cursor: 'pointer' }}>Impressum</a>
            <a onClick={() => go('datenschutz')} style={{ cursor: 'pointer' }}>Datenschutzerklärung</a>
          </span>
          <span style={{ display: 'flex', gap: 28, flexWrap: 'wrap' }}>
            <a></a>
            <a></a>
            <a onClick={() => go('contact')}></a>
          </span>
        </div>
      </div>
    </footer>);
}

Object.assign(window, { PAGES, useHashRoute, Nav, Footer });