/* ──────────────────────────────────────────────────────────────────────
   Shared chrome: Logo, NavBar, Footer.
   Each page (home, erstgespraech, impressum, datenschutz) loads this
   first, then its own page script which mounts <App /> via React.
   ────────────────────────────────────────────────────────────────────── */

function Logo() {
  return (
    <a href="index.html" className="logo" aria-label="Adviceworx Wedding">
      <span className="logo-mark" aria-hidden="true"></span>
      <span className="logo-stack">
        <span className="logo-text">Adviceworx</span>
        <span className="logo-sub">Wedding</span>
      </span>
    </a>
  );
}

/**
 * Anchor click handler.
 * If the target element exists on the current page, scroll smoothly instead
 * of letting the browser navigate to "index.html#…" (which would reload).
 * If not, fall through to normal navigation (e.g. from /impressum.html).
 */
function handleAnchorClick(e) {
  const href = e.currentTarget.getAttribute("href") || "";
  const hashIndex = href.indexOf("#");
  if (hashIndex === -1) return;
  const hash = href.slice(hashIndex + 1);
  if (!hash) return;
  const target = document.getElementById(hash);
  if (!target) return;
  e.preventDefault();
  target.scrollIntoView({ behavior: "smooth", block: "start" });
  history.replaceState(null, "", "#" + hash);
}

/**
 * NavBar
 * - `lockedOnLight`: subpages have no dark hero, so the navbar should
 *   start (and stay) in the dark-text / light-glass variant.
 * - On the home page we observe #hero and flip the data-attr when it
 *   leaves view.
 */
function NavBar({ lockedOnLight = false }) {
  const [onLight, setOnLight] = React.useState(lockedOnLight);

  React.useEffect(() => {
    if (lockedOnLight) return undefined;
    const heroEl = document.getElementById("hero");
    if (!heroEl) {
      setOnLight(true);
      return undefined;
    }
    const io = new IntersectionObserver(
      ([entry]) => setOnLight(entry.intersectionRatio < 0.15),
      { threshold: [0, 0.15, 0.3, 0.6, 1] }
    );
    io.observe(heroEl);
    return () => io.disconnect();
  }, [lockedOnLight]);

  return (
    <div className="nav-wrap" data-on-light={onLight ? "true" : "false"}>
      <header className="nav">
        <Logo />
        <nav className="nav-links">
          <a href="index.html#vorteile" onClick={handleAnchorClick}>Vorteile</a>
          <a href="index.html#ablauf" onClick={handleAnchorClick}>Ablauf</a>
          <a href="index.html#faq" onClick={handleAnchorClick}>Häufige Fragen</a>
        </nav>
        <a href="erstgespraech.html" className="nav-cta">
          Erstgespräch <span className="arr" aria-hidden="true">→</span>
        </a>
      </header>
    </div>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div className="footer-brand">
            <Logo />
            <p>
              Wir gestalten digitale Hochzeits­einladungen, die sich anfühlen wie
              ein gut gestaltetes Magazin — und Organisation einfach mitbringen.
            </p>
          </div>

          <div>
            <h5>Angebot</h5>
            <ul>
              <li><a href="index.html#vorteile" onClick={handleAnchorClick}>Vorteile</a></li>
              <li><a href="index.html#ablauf" onClick={handleAnchorClick}>Ablauf</a></li>
              <li><a href="erstgespraech.html">Custom Design</a></li>
            </ul>
          </div>

          <div>
            <h5>Kontakt</h5>
            <ul>
              <li><a href="mailto:wedding@adviceworx.de">wedding@adviceworx.de</a></li>
              <li><a href="erstgespraech.html">Erstgespräch buchen</a></li>
              <li><a href="index.html#faq" onClick={handleAnchorClick}>Häufige Fragen</a></li>
            </ul>
          </div>

          <div>
            <h5>Rechtliches</h5>
            <ul>
              <li><a href="impressum.html">Impressum</a></li>
              <li><a href="datenschutz.html">Datenschutz</a></li>
            </ul>
          </div>
        </div>

        <div className="footer-bottom">
          <span>© 2026 Adviceworx · Made with care in Germany</span>
          <span>Hochzeitseinladungen</span>
        </div>
      </div>
    </footer>
  );
}

// Expose for sibling page scripts (each <script type="text/babel"> gets its
// own scope after Babel transpiles — globals are the bridge).
Object.assign(window, { Logo, NavBar, Footer, handleAnchorClick });