// Shared header component for all pages
const Header = ({ active }) => {
  const links = [
    { href: "index.html", label: "Start", key: "start" },
    { href: "produkte.html", label: "Leistungen", key: "produkte" },
    { href: "referenzen.html", label: "Referenzen", key: "referenzen" },
    { href: "unternehmen.html", label: "Unternehmen", key: "unternehmen" },
    { href: "kontakt.html", label: "Kontakt", key: "kontakt" },
  ];
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    if (open) {
      document.body.style.overflow = "hidden";
      const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
      window.addEventListener("keydown", onKey);
      return () => { document.body.style.overflow = ""; window.removeEventListener("keydown", onKey); };
    }
  }, [open]);
  return (
    <>
    <header className="topbar" data-screen-label="Header">
      <div className="topbar-inner">
        <a href="index.html" className="logo">
          <img src="assets/brand/logo-black.png" alt="Tischlerei Göke GmbH" />
          <div className="logo-meta">
            EST. 1929<br/>Paderborn-Benhausen
          </div>
        </a>
        <nav className="nav">
          {links.map(l => (
            <a key={l.key} href={l.href} className={active === l.key ? "is-active" : ""}>{l.label}</a>
          ))}
        </nav>
        <div className="topbar-cta">
          <div className="contact-inline hide-mobile">
            <a href="tel:+4952526291" aria-label="Anrufen">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
              05252 6291
            </a>
            <a href="https://wa.me/4952526291" aria-label="WhatsApp">
              <svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-1.7-.8-2.8-1.5-3.9-3.5-.3-.5.3-.5.8-1.5.1-.2.1-.3 0-.5 0-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.3 5.2 4.6 1.9.8 2.7.9 3.6.7.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.2-.1-.4-.2-.7-.3z"/><path d="M12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.3 5L2 22l5.2-1.4c1.4.8 3.1 1.2 4.8 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18c-1.6 0-3.1-.4-4.4-1.2l-.3-.2-3 .8.8-3-.2-.3C4.2 14.9 3.8 13.5 3.8 12c0-4.5 3.7-8.2 8.2-8.2s8.2 3.7 8.2 8.2-3.7 8-8.2 8z"/></svg>
              WhatsApp
            </a>
          </div>
          <a href="kontakt.html" className="btn hide-mobile-cta">Beratung anfragen</a>
          <a href="tel:+4952526291" className="topbar-phone-mobile" aria-label="Anrufen 05252 6291">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
          </a>
          <button className="nav-toggle" aria-label={open ? "Menü schließen" : "Menü öffnen"} aria-expanded={open} onClick={() => setOpen(v => !v)}>
            <span className={"hamburger " + (open ? "is-open" : "")}>
              <span></span><span></span><span></span>
            </span>
          </button>
        </div>
      </div>
    </header>

    {/* Mobile drawer */}
    <div className={"nav-drawer " + (open ? "is-open" : "")} aria-hidden={!open}>
      <div className="nav-drawer-backdrop" onClick={() => setOpen(false)}></div>
      <aside className="nav-drawer-panel" role="dialog" aria-label="Hauptmenü">
        <div className="nav-drawer-head">
          <span className="nav-drawer-eyebrow">Menü</span>
          <button className="nav-drawer-close" aria-label="Menü schließen" onClick={() => setOpen(false)}>×</button>
        </div>
        <nav className="nav-drawer-links">
          {links.map((l, idx) => (
            <a key={l.key} href={l.href} className={active === l.key ? "is-active" : ""} onClick={() => setOpen(false)}>
              <span className="nav-drawer-num">{String(idx + 1).padStart(2, "0")}</span>
              <span className="nav-drawer-label">{l.label}</span>
            </a>
          ))}
        </nav>
        <div className="nav-drawer-cta">
          <a href="tel:+4952526291" className="nav-drawer-contact">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
            <div>
              <div className="nav-drawer-contact-label">Anrufen</div>
              <div className="nav-drawer-contact-value">05252 6291</div>
            </div>
          </a>
          <a href="https://wa.me/4952526291" className="nav-drawer-contact">
            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-1.7-.8-2.8-1.5-3.9-3.5-.3-.5.3-.5.8-1.5.1-.2.1-.3 0-.5 0-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.3 5.2 4.6 1.9.8 2.7.9 3.6.7.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.2-.1-.4-.2-.7-.3z"/><path d="M12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.3 5L2 22l5.2-1.4c1.4.8 3.1 1.2 4.8 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18c-1.6 0-3.1-.4-4.4-1.2l-.3-.2-3 .8.8-3-.2-.3C4.2 14.9 3.8 13.5 3.8 12c0-4.5 3.7-8.2 8.2-8.2s8.2 3.7 8.2 8.2-3.7 8-8.2 8z"/></svg>
            <div>
              <div className="nav-drawer-contact-label">WhatsApp</div>
              <div className="nav-drawer-contact-value">Nachricht schicken</div>
            </div>
          </a>
          <a href="kontakt.html" className="btn nav-drawer-btn" onClick={() => setOpen(false)}>Beratung anfragen</a>
        </div>
        <div className="nav-drawer-foot">
          Hainhöfen 2–6 · 33100 Paderborn-Benhausen<br/>
          Mo–Fr 7:00–16:00 Uhr
        </div>
      </aside>
    </div>
    </>
  );
};

const Footer = () => (
  <footer className="footer" data-screen-label="Footer">
    <div className="footer-inner">
      <div className="footer-grid">
        <div>
          <img src="assets/brand/logo-white.png" alt="Tischlerei Göke GmbH" className="footer-logo" />
          <div className="footer-display">
            Wir können<br/>
            <em style={{fontStyle:"italic"}}>Holz.</em>
          </div>
          <p style={{maxWidth:"36ch", opacity:0.75, fontSize:14, lineHeight:1.55}}>
            Seit 1929 fertigen wir Holzfenster, Haustüren, Klappläden und Wintergärten in Paderborn-Benhausen — Planung, Werkstatt und Montage aus einer Hand.
          </p>
        </div>
        <div>
          <h4>Leistungen</h4>
          <ul>
            <li><a href="produkte.html#fenster">Holzfenster</a></li>
            <li><a href="produkte.html#tueren">Haustüren</a></li>
            <li><a href="produkte.html#ueberdachungen">Überdachungen</a></li>
            <li><a href="produkte.html#winter">Wintergärten</a></li>
            <li><a href="produkte.html#klapp">Klappläden</a></li>
            <li><a href="produkte.html#glasaustausch">Glasaustausch</a></li>
          </ul>
        </div>
        <div>
          <h4>Kontakt</h4>
          <ul>
            <li>Hainhöfen 2–6</li>
            <li>33100 Paderborn-Benhausen</li>
            <li>&nbsp;</li>
            <li><a href="tel:+4952526291">+49 5252 6291</a></li>
            <li><a href="mailto:info@tischlerei-goeke.de">info@tischlerei-goeke.de</a></li>
            <li><a href="https://wa.me/4952526291">WhatsApp</a></li>
          </ul>
        </div>
        <div>
          <h4>Werkstatt</h4>
          <ul>
            <li>Mo–Fr 7:00–16:00 Uhr</li>
            <li>Termin nach Vereinbarung</li>
            <li>&nbsp;</li>
            <li><a href="unternehmen.html">Unternehmen</a></li>
            <li><a href="referenzen.html">Referenzen</a></li>
            <li><a href="#">Stellenangebote</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-meta">
        <span>© {new Date().getFullYear()} Tischlerei Göke GmbH · HRB 3735 Paderborn</span>
        <span>Impressum · Datenschutz · AGB</span>
      </div>
    </div>
  </footer>
);

// Reveal-on-scroll observer. Anything already above the viewport on load
// is marked .in immediately so deep-links / scroll-restoration don't leave
// blank cards above the fold.
const useReveal = () => {
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const vh = window.innerHeight;
    els.forEach(el => {
      const r = el.getBoundingClientRect();
      if (r.top < vh) el.classList.add("in");
    });
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { threshold: 0.08, rootMargin: "0px 0px -40px 0px" });
    els.forEach(el => { if (!el.classList.contains("in")) io.observe(el); });
    return () => io.disconnect();
  }, []);
};

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