/* global React, ReactDOM */
const { useState: useStateNav, useEffect: useEffectNav } = React;

function PrimaryNav({ logoSrc = 'assets/logo-green.png', current = '' }) {
  const [openDD, setOpenDD] = useStateNav(false);
  const [openMobile, setOpenMobile] = useStateNav(false);
  const [openMerk, setOpenMerk] = useStateNav(false);
  const is = (k) => current === k ? ' is-current' : '';

  // Lock body scroll when mobile menu or merkcheck popup is open
  useEffectNav(() => {
    document.body.style.overflow = (openMobile || openMerk) ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [openMobile, openMerk]);

  // Close merkcheck popup with Escape
  useEffectNav(() => {
    if (!openMerk) return;
    const onKey = (e) => { if (e.key === 'Escape') setOpenMerk(false); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [openMerk]);

  // Popup rendered straight onto <body> via a portal, so no animation layer
  // (transform/will-change) can break its fixed full-screen positioning.
  const merkPopup = window.ReactDOM.createPortal(
    <div className={`cs-merk-overlay${openMerk ? ' is-open' : ''}`}
         onClick={(e) => { if (e.target === e.currentTarget) setOpenMerk(false); }}
         aria-hidden={!openMerk}>
      <div className="cs-merk-modal" role="dialog" aria-modal="true" aria-label="Gratis merkcheck">
        <button className="cs-merk-close" onClick={() => setOpenMerk(false)} aria-label="Sluiten">&times;</button>
        <iframe className="cs-merk-frame" title="Gratis merkcheck"
                src={openMerk ? 'gratis-merkcheck.html' : 'about:blank'}></iframe>
      </div>
    </div>,
    document.body
  );

  return (
    <React.Fragment>
      <nav className="cs-nav">
        <a href="index.html" className="cs-nav-logo"><img src={logoSrc} alt="Caron Studio"/></a>

        <div className="cs-nav-right">
          <div className={`cs-nav-dropdown${openDD ? ' open' : ''}${is('diensten')}`}
               onMouseEnter={() => setOpenDD(true)}
               onMouseLeave={() => setOpenDD(false)}>
            <a href="diensten.html" className="cs-nav-link cs-nav-dropdown-trigger">
              Diensten <svg viewBox="0 0 10 10"><polyline points="2,3 5,7 8,3"/></svg>
            </a>
            <div className="cs-nav-dropdown-menu">
              <a href="diensten-website.html"><span className="dd-label">N°01</span>Website &amp; Webshop</a>
              <a href="diensten-vormgeving.html"><span className="dd-label">N°02</span>Vormgeving &amp; DTP</a>
              <a href="diensten-fotografie.html"><span className="dd-label">N°03</span>Professionele Fotografie</a>
            </div>
          </div>
          <a href="portfolio.html" className={`cs-nav-link${is('portfolio')}`}>Portfolio</a>
          <a href="over-mij.html" className={`cs-nav-link${is('over-mij')}`}>Over mij</a>
          <a href="contact.html" className={`cs-nav-link${is('contact')}`}>Contact</a>
          <a className="cs-nav-cta" style={{ cursor: 'pointer' }} onClick={() => setOpenMerk(true)}>
            <span>Gratis merkcheck</span><span className="arrow">→</span>
          </a>
        </div>

        <button
          className={`cs-burger${openMobile ? ' is-open' : ''}`}
          onClick={() => setOpenMobile(!openMobile)}
          aria-label="Menu"
          aria-expanded={openMobile}
        >
          <span></span><span></span><span></span>
        </button>

        <div className={`cs-mobile-panel${openMobile ? ' is-open' : ''}`} onClick={(e) => { if (e.target === e.currentTarget) setOpenMobile(false); }}>
          <div className="cs-mobile-inner">
            <a href="diensten.html" className={`cs-mobile-link${is('diensten')}`} onClick={() => setOpenMobile(false)}>Alle diensten</a>
            <a href="diensten-website.html" className="cs-mobile-link cs-mobile-sub" onClick={() => setOpenMobile(false)}>Website &amp; Webshop</a>
            <a href="diensten-vormgeving.html" className="cs-mobile-link cs-mobile-sub" onClick={() => setOpenMobile(false)}>Vormgeving &amp; DTP</a>
            <a href="diensten-fotografie.html" className="cs-mobile-link cs-mobile-sub" onClick={() => setOpenMobile(false)}>Professionele Fotografie</a>

            <div className="cs-mobile-divider"></div>

            <a href="portfolio.html" className={`cs-mobile-link${is('portfolio')}`} onClick={() => setOpenMobile(false)}>Portfolio</a>
            <a href="over-mij.html" className={`cs-mobile-link${is('over-mij')}`} onClick={() => setOpenMobile(false)}>Over mij</a>
            <a href="contact.html" className={`cs-mobile-link${is('contact')}`} onClick={() => setOpenMobile(false)}>Contact</a>

            <a className="cs-mobile-cta" style={{ cursor: 'pointer' }} onClick={() => { setOpenMobile(false); setOpenMerk(true); }}>
              <span>Gratis merkcheck</span><span className="arrow">→</span>
            </a>

            <div className="cs-mobile-meta">
              <a href="mailto:info@caronstudio.eu">info@caronstudio.eu</a>
              <a href="tel:0648228330">06 48 22 83 30</a>
            </div>
          </div>
        </div>
      </nav>

      {merkPopup}
    </React.Fragment>
  );
}

window.PrimaryNav = PrimaryNav;
