// Site chrome — Header, Footer, CTA strip
// Real architect: Timo Pietschmann · Mörikestr. 12A, 70178 Stuttgart · feinplaner.de

const NAV = [
  ['home', 'Start'],
  ['projects', 'Projekte'],
  ['services', 'Leistungen'],
  ['studio', 'Büro'],
  ['contact', 'Kontakt']
];

function Header({ route, navigate, transparent, dark }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 80);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);
  const useTransparent = transparent && !scrolled && !menuOpen;
  const go = (key) => { setMenuOpen(false); navigate(key); };
  return (
    <>
      <header className={`hdr ${useTransparent ? 'transparent' : 'solid'} ${dark && useTransparent ? 'dark' : ''}`}>
        <div className="inner">
          <div className="mark" onClick={() => go('home')}>
            <img src={window.__resources.logoWeiss} alt="feinplaner" />
          </div>
          <nav>
            {NAV.slice(1).map(([key, label]) => (
              <a key={key} className={route.startsWith(key) ? 'active' : ''} onClick={() => go(key)}>{label}</a>
            ))}
            <a className="cta-mini" onClick={() => go('contact')}>Anfragen</a>
          </nav>
          <button className={`burger ${menuOpen ? 'open' : ''}`} onClick={() => setMenuOpen(o => !o)} aria-label="Menü">
            <span /><span /><span />
          </button>
        </div>
      </header>
      {menuOpen && (
        <div className="mobile-nav">
          <nav>
            {NAV.slice(1).map(([key, label]) => (
              <a key={key} className={route.startsWith(key) ? 'active' : ''} onClick={() => go(key)}>{label}</a>
            ))}
          </nav>
          <div className="mobile-nav__cta">
            <button className="btn" onClick={() => go('contact')}>Anfragen <span className="arrow">→</span></button>
          </div>
        </div>
      )}
    </>
  );
}

function CtaStrip({ navigate }) {
  return (
    <section className="cta-strip">
      <div className="inner">
        <h2>
          Sie haben ein <span className="ital">Grundstück</span>,<br />
          ein <span className="b">Bauvorhaben</span> oder eine Idee?
        </h2>
        <button className="btn" onClick={() => navigate('contact')}>
          Erstgespräch vereinbaren <span className="arrow">→</span>
        </button>
      </div>
    </section>
  );
}

function Footer({ navigate }) {
  return (
    <footer className="ftr">
      <div className="ftr__top">
        <div className="ftr__sig">
          <img className="logo" src={window.__resources.logoWeiss} alt="feinplaner" />
          <span className="ital" style={{ fontSize: 'clamp(16px, 1.4vw, 22px)', fontWeight: 200, letterSpacing: '0.02em', color: 'rgba(255,255,255,0.78)' }}>Ganzheitliche Architektur aus einer Hand. In allen Maßstäben.</span>
        </div>
        <div className="ftr__contact">
          <div>
            <h5>Studio</h5>
            <p>feinplaner – Timo Pietschmann, M.A.<br />Freier Architekt<br />Mörikestraße 12A<br />70178 Stuttgart</p>
          </div>
          <div>
            <h5>Kontakt</h5>
            <p>
              <a href="mailto:info@feinplaner.de">info@feinplaner.de</a><br />
              <a href="tel:+4971199311607">0711 / 993 116 07</a><br />
              www.feinplaner.de
            </p>
          </div>
        </div>
      </div>
      <div className="ftr__cols">
        <div className="ftr__col">
          <h5>Studio</h5>
          <a onClick={() => navigate('studio')}>Über mich</a>
          <a onClick={() => navigate('studio')}>Werdegang</a>
          <a onClick={() => navigate('studio')}>Netzwerk</a>
          <a onClick={() => navigate('studio')}>Lehre</a>
        </div>
        <div className="ftr__col">
          <h5>Arbeit</h5>
          <a onClick={() => navigate('projects')}>Alle Projekte</a>
          <a onClick={() => navigate('projects')}>Wohnen</a>
          <a onClick={() => navigate('projects')}>Öffentlich</a>
          <a onClick={() => navigate('projects')}>Wettbewerb</a>
        </div>
        <div className="ftr__col">
          <h5>Leistungen</h5>
          <a onClick={() => navigate('services')}>HOAI 1–9</a>
          <a onClick={() => navigate('services')}>Bauen im Bestand</a>
          <a onClick={() => navigate('services')}>Innenarchitektur</a>
          <a onClick={() => navigate('services')}>Beratung</a>
        </div>
        <div className="ftr__col">
          <h5>Folgen</h5>
          <a href="https://www.instagram.com/feinplaner.architektur/" target="_blank" rel="noopener noreferrer">Instagram</a>
          <a href="https://www.linkedin.com/company/architekturb%C3%BCro-feinplaner/" target="_blank" rel="noopener noreferrer">LinkedIn</a>
          <a href="https://www.feinplaner.de" onClick={(e) => { e.preventDefault(); navigate('home'); }}>feinplaner.de</a>
        </div>
      </div>
      <div className="ftr__bottom">
        <span>© 2026 feinplaner — Timo Pietschmann · Freier Architekt</span>
        <span style={{ display: 'flex', gap: 24 }}>
          <a onClick={() => navigate('impressum')} style={{cursor:'pointer'}}>Impressum</a>
          <a onClick={() => navigate('datenschutz')} style={{cursor:'pointer'}}>Datenschutz</a>
          <a>AGB</a>
        </span>
      </div>
    </footer>
  );
}

Object.assign(window, { Header, Footer, CtaStrip });