/* global React */
const { useState, useEffect } = React;

const CC_APP_STORE = 'https://apps.apple.com/us/app/the-cloud-closet/id6748420685';

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

  const items = [
    { label: 'About',     href: '#cc-about' },
    { label: 'App',       href: '#cc-app' },
    { label: 'Community', href: '#cc-community' },
    { label: 'Reviews',   href: '#cc-reviews' },
  ];

  useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  const close = () => setOpen(false);

  return (
    <>
      <nav className="cc-nav">
        <div className="cc-nav-left">
          {items.map((i) => (
            <a key={i.label} className="cc-nav-link" href={i.href}>{i.label}</a>
          ))}
        </div>

        <a className="cc-nav-center" href="#" aria-label="Cloud Closet home">
          <img src="assets/logo-symbol.png" alt="Cloud Closet" />
        </a>

        <div className="cc-nav-right">
          {/* Desktop text link */}
          <a className="cc-nav-link" href={CC_APP_STORE} target="_blank" rel="noopener noreferrer">Join</a>

          {/* Mobile solid download CTA (hidden on desktop via CSS) */}
          <a className="cc-btn cc-btn-solid cc-btn-sm cc-nav-download-btn"
             href={CC_APP_STORE} target="_blank" rel="noopener noreferrer">
            Download
          </a>

          {/* Hamburger (hidden on desktop via CSS) */}
          <button
            className="cc-nav-hamburger"
            aria-label={open ? 'Close menu' : 'Open menu'}
            aria-expanded={open}
            onClick={() => setOpen((o) => !o)}
          >
            <span className={`cc-hamburger-icon ${open ? 'is-open' : ''}`}>
              <span /><span /><span />
            </span>
          </button>
        </div>
      </nav>

      {/* Mobile slide-in menu */}
      <div
        className={`cc-nav-mobile-menu ${open ? 'is-open' : ''}`}
        aria-hidden={!open}
        role="dialog"
        aria-modal="true"
      >
        <div className="cc-nav-mobile-inner">
          {items.map((i) => (
            <a key={i.label} className="cc-nav-mobile-link" href={i.href} onClick={close}>
              {i.label}
            </a>
          ))}
          <a
            className="cc-btn cc-btn-solid cc-nav-mobile-cta"
            href={CC_APP_STORE}
            target="_blank"
            rel="noopener noreferrer"
            onClick={close}
          >
            Download the App
          </a>
        </div>
      </div>
    </>
  );
}

window.TopNav = TopNav;