// Chrome.jsx — TopNav (with mobile drawer) + Footer + shared primitives
const { useState, useEffect } = React;

// Resolve assets that may be inlined by the standalone bundler.
const R = (typeof window !== 'undefined' && window.__resources) || {};
const LOGO_DARK = R.logoDark || 'assets/logo-dark.png';
const LOGO_LIGHT = R.logoLight || 'assets/logo-light.png';

const NAV_LINKS = [
{ id: 'home', label: 'Startseite', num: '01' },
{ id: 'leistungen', label: 'Leistungen', num: '02' },
{ id: 'ueber', label: 'Über mich', num: '03' },
{ id: 'kontakt', label: 'Kontakt', num: '04' }];


function TopNav({ current, onNav }) {
  const [open, setOpen] = useState(false);

  // Lock scroll while drawer open
  useEffect(() => {
    if (open) {
      const prev = document.body.style.overflow;
      document.body.style.overflow = 'hidden';
      return () => {document.body.style.overflow = prev;};
    }
  }, [open]);

  // Esc closes drawer
  useEffect(() => {
    if (!open) return;
    const onKey = (e) => {if (e.key === 'Escape') setOpen(false);};
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open]);

  const go = (id) => {onNav(id);setOpen(false);};

  return (
    <React.Fragment>
      <nav className="topnav">
        <div className="container">
          <div className="topnav-inner">
            <button className="brand-wm" onClick={() => go('home')} aria-label="Massagué Consulting — Startseite">
              <img src={LOGO_DARK} alt="Ricardo Massagué Consulting" className="brand-logo" />
            </button>

            <div className="nav-links">
              {NAV_LINKS.map((l) =>
              <button
                key={l.id}
                className={"nav-link " + (current === l.id ? 'active' : '')}
                onClick={() => onNav(l.id)}>
                
                  {l.label}
                </button>
              )}
            </div>

            <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
              <button className="btn btn-on-dark-ghost nav-cta-desktop" onClick={() => onNav('kontakt')}>
                Zum Kontaktformular
              </button>
              <button
                className={"nav-burger " + (open ? 'open' : '')}
                onClick={() => setOpen((o) => !o)}
                aria-label={open ? 'Menü schließen' : 'Menü öffnen'}
                aria-expanded={open}>
                
                <span></span><span></span><span></span>
              </button>
            </div>
          </div>
        </div>
      </nav>

      <div className={"drawer-backdrop " + (open ? 'open' : '')} onClick={() => setOpen(false)} />
      <aside className={"drawer " + (open ? 'open' : '')} aria-hidden={!open}>
        <div className="drawer-head">
          <div className="brand-wm">
            <img src={LOGO_LIGHT} alt="Ricardo Massagué Consulting" className="brand-logo in-drawer" />
          </div>
          <button
            className="nav-burger open"
            onClick={() => setOpen(false)}
            aria-label="Menü schließen">
            <span></span><span></span><span></span></button>
        </div>
        <div className="drawer-body">
          {NAV_LINKS.map((l) =>
          <button
            key={l.id}
            className={"drawer-link " + (current === l.id ? 'active' : '')}
            onClick={() => go(l.id)}>
            
              <span>{l.label}</span>
              <span className="num">{l.num}</span>
            </button>
          )}
        </div>
        <div className="drawer-foot">
          <span className="meta">Kontakt</span>
          <a className="contact-line" href="mailto:ricardo@massague-consulting.de">ricardo@massague-consulting.de</a>
          <span className="meta">Stuttgart</span>
        </div>
      </aside>
    </React.Fragment>);

}

function Footer({ onNav }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <img src={LOGO_DARK} alt="Ricardo Massagué Consulting" className="brand-logo in-footer" />
            <p>


            </p>
          </div>
          <div className="footer-col">
            <h4>Leistungen</h4>
            <ul>
              <li><button onClick={() => onNav('leistungen')}>Strategie</button></li>
              <li><button onClick={() => onNav('leistungen')}>Transformation </button></li>
              <li><button onClick={() => onNav('leistungen')}>Performance </button></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Praxis</h4>
            <ul>
              <li><button onClick={() => onNav('ueber')}>Über mich</button></li>
              <li><button onClick={() => onNav('kontakt')}>Kontakt</button></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Kontakt</h4>
            <ul>
              <li><a href="mailto:ricardo@massague-consulting.de">kontakt@massague-consulting.de</a></li>
              <li><a href="tel:+4912345674567">+49 177 3356684</a></li>
              <li><a>Stuttgart, Germany</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-fine">
          <span>© 2026 Ricardo Massagué Consulting</span>
          <span>
            <button onClick={() => onNav('impressum')} style={{ background: 'none', border: 'none', color: 'inherit', cursor: 'pointer', font: 'inherit', letterSpacing: 'inherit', textTransform: 'inherit', padding: 0 }}>Impressum</button>
          </span>
        </div>
      </div>
    </footer>);

}

// Decorative parenthesis device for hero
function ParenDevice() {
  return (
    <svg className="hero-paren" viewBox="0 0 200 240" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" aria-hidden="true">
      <path d="M 60 20 Q 10 120 60 220" />
      <path d="M 140 20 Q 190 120 140 220" />
    </svg>);

}

// Inline arrow used in gilt-links
function Arrow() {
  return (
    <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round">
      <path d="M 1 6 L 11 6 M 7 2 L 11 6 L 7 10" />
    </svg>);

}

// Contact CTA band — reused on home + leistungen + ueber
function ContactBand({ onNav }) {
  return (
    <section className="contact-band">
      <ParenDevice />
      <div className="container">
        <div className="inner">
          <h2>
            Bereit für eine Entscheidung,
            <br />
            <em>die hält?</em>
          </h2>
          <div className="right">
            <p className="lead on-dark">Ein erstes Gespräch ist immer vertraulich und unverbindlich. Üblich sind 30 Minuten.


            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <button className="btn btn-on-dark" onClick={() => onNav('kontakt')}>
                Gespräch anfragen <Arrow />
              </button>
              <a className="btn btn-on-dark-ghost" href="mailto:ricardo@massague-consulting.de">KONTAKT@MASSAGUE-CONSULTING.DE

              </a>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, { TopNav, Footer, ParenDevice, Arrow, ContactBand, NAV_LINKS });