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

function Nav({ ctaMode, submitUrl, ticketsUrl, showMarquee }) {
  const items = [
    { id: 'programm', label: 'Programm' },
    { id: 'jury', label: 'Jury' },
    { id: 'editionen', label: 'Vergangene Editionen' },
    { id: 'mission', label: 'Über uns' },
    { id: 'richtlinien', label: 'Richtlinien' },
  ];
  const [scrolled, setScrolled] = useStateNav(false);
  const [drawerOpen, setDrawerOpen] = useStateNav(false);

  useEffectNav(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // Lock body scroll when drawer is open
  useEffectNav(() => {
    document.body.style.overflow = drawerOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [drawerOpen]);

  const isSubmit = ctaMode === 'submit';
  const ctaHref = isSubmit ? submitUrl : ticketsUrl;
  const ctaLabel = isSubmit ? 'Film einreichen' : 'Tickets sichern';
  const ctaSub = isSubmit ? 'Deadline 28.06.' : '25.–27. Aug';

  const onNav = (e, id) => {
    e.preventDefault();
    setDrawerOpen(false);
    const el = document.getElementById(id);
    if (el) {
      window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: 'smooth' });
    } else if (id === 'top') {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }
  };

  return (
    <>
      {/* Mobile drawer overlay */}
      <div className={`ah-drawer${drawerOpen ? ' open' : ''}`} aria-hidden={!drawerOpen}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 40 }}>
          <a href="#top" onClick={(e) => onNav(e, 'top')} style={{
            display: 'flex', alignItems: 'center', gap: 12,
            color: 'var(--ah-cream)', textDecoration: 'none',
          }}>
            <img src="assets/logo.png" alt="After Hours" width="40" height="40"
                 style={{ display: 'block', objectFit: 'contain', filter: 'brightness(0) invert(1)' }} />
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 20 }}>After Hours</span>
          </a>
          <button onClick={() => setDrawerOpen(false)} aria-label="Menü schließen"
                  style={{
                    background: 'none', border: '2px solid var(--ah-cream)',
                    color: 'var(--ah-cream)', width: 44, height: 44,
                    cursor: 'pointer', fontSize: 20, display: 'flex',
                    alignItems: 'center', justifyContent: 'center',
                  }}>✕</button>
        </div>
        <nav style={{ display: 'flex', flexDirection: 'column', gap: 0, flex: 1 }}>
          {items.map(i => (
            <a key={i.id} href={`#${i.id}`} onClick={(e) => onNav(e, i.id)}
               style={{
                 fontFamily: 'var(--font-display)', fontSize: 'clamp(32px,8vw,52px)',
                 lineHeight: 1.05, letterSpacing: '-0.02em',
                 color: 'var(--ah-cream)', textDecoration: 'none',
                 padding: '12px 0', borderBottom: '1px solid rgba(239,233,214,.15)',
                 transition: 'color .12s',
               }}
               onMouseEnter={e => e.currentTarget.style.color = 'var(--ah-orange)'}
               onMouseLeave={e => e.currentTarget.style.color = 'var(--ah-cream)'}
            >{i.label}</a>
          ))}
          <a href="/blog/"
             style={{
               fontFamily: 'var(--font-display)', fontSize: 'clamp(32px,8vw,52px)',
               lineHeight: 1.05, letterSpacing: '-0.02em',
               color: 'var(--ah-cream)', textDecoration: 'none',
               padding: '12px 0', borderBottom: '1px solid rgba(239,233,214,.15)',
               transition: 'color .12s',
             }}
             onMouseEnter={e => e.currentTarget.style.color = 'var(--ah-orange)'}
             onMouseLeave={e => e.currentTarget.style.color = 'var(--ah-cream)'}
          >Journal</a>
        </nav>
        <div style={{ marginTop: 32 }}>
          <a href={ctaHref} target="_blank" rel="noopener noreferrer"
             className="ah-btn" style={{ width: '100%', justifyContent: 'center', fontSize: 16 }}>
            {ctaLabel} →
          </a>
        </div>
      </div>

      {/* Sticky nav bar */}
      <div style={{
        position: 'sticky', top: 0, zIndex: 80,
        background: 'var(--ah-cream)',
        borderBottom: '2px solid var(--ah-ink)',
        transition: 'box-shadow .2s',
        boxShadow: scrolled ? '0 4px 0 var(--ah-ink)' : 'none',
      }}>
        <nav style={{
          display: 'grid',
          gridTemplateColumns: 'auto 1fr auto',
          alignItems: 'center', gap: 24,
          padding: '14px 28px',
          fontFamily: 'var(--font-body)',
        }}>
          {/* LEFT — logo */}
          <a href="#top" onClick={(e) => onNav(e, 'top')}
             style={{
               display: 'inline-flex', alignItems: 'center', gap: 14,
               color: 'var(--ah-ink)', textDecoration: 'none',
             }}>
            <img src="assets/logo.png" alt="After Hours Filmfestival" width="48" height="48"
                 style={{ display: 'block', objectFit: 'contain' }} />
            <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1, gap: 3 }}>
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 22, letterSpacing: '-0.01em' }}>After Hours</span>
              <span style={{
                fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '.22em',
                textTransform: 'uppercase', opacity: .75,
              }}>Filmfestival · AH26</span>
            </div>
          </a>

          {/* CENTER — desktop nav links */}
          <ul className="ah-hide-mobile" style={{
            display: 'flex', gap: 2, listStyle: 'none', margin: 0, padding: 0,
            justifySelf: 'center',
          }}>
            {items.map(i => (
              <li key={i.id}>
                <a href={`#${i.id}`} onClick={(e) => onNav(e, i.id)} className="ah-nav-link">{i.label}</a>
              </li>
            ))}
            <li>
              <a href="/blog/" className="ah-nav-link">Journal</a>
            </li>
          </ul>

          {/* RIGHT — CTA + hamburger */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, justifySelf: 'end' }}>
            <a href={ctaHref} target="_blank" rel="noopener noreferrer"
               className="ah-btn"
               style={{ padding: '10px 16px', fontSize: 14, alignItems: 'center', gap: 12 }}>
              <span style={{
                display: 'inline-flex', flexDirection: 'column', alignItems: 'flex-start', lineHeight: 1.05,
              }}>
                <span>{ctaLabel}</span>
                <span style={{
                  fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '.12em',
                  opacity: .8, fontWeight: 400,
                }}>{ctaSub}</span>
              </span>
              <span aria-hidden style={{
                display: 'inline-flex', width: 22, height: 22, alignItems: 'center', justifyContent: 'center',
                background: 'var(--ah-cream)', color: 'var(--ah-blue)', fontSize: 14, fontWeight: 800,
              }}>→</span>
            </a>

            {/* Hamburger — mobile only */}
            <button
              onClick={() => setDrawerOpen(true)}
              aria-label="Menü öffnen"
              aria-expanded={drawerOpen}
              style={{
                display: 'none',
                background: 'none', border: '2px solid var(--ah-ink)',
                width: 44, height: 44, cursor: 'pointer',
                flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 5,
                padding: 0,
              }}
              className="ah-hamburger"
            >
              <span style={{ display: 'block', width: 18, height: 2, background: 'var(--ah-ink)' }} />
              <span style={{ display: 'block', width: 18, height: 2, background: 'var(--ah-ink)' }} />
              <span style={{ display: 'block', width: 18, height: 2, background: 'var(--ah-ink)' }} />
            </button>
          </div>
        </nav>

        {showMarquee && (
          <div style={{
            background: 'var(--ah-ink)', color: 'var(--ah-cream)',
            padding: '7px 0', overflow: 'hidden',
            borderTop: '2px solid var(--ah-ink)',
          }}>
            <div className="ah-marquee-track" style={{
              fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '.22em',
              textTransform: 'uppercase',
            }}>
              {Array.from({ length: 2 }).map((_, k) => (
                <React.Fragment key={k}>
                  <span>★ 25–27 August 2026 ★ Savoy Kino Hamburg ★</span>
                  <span>{isSubmit ? 'Einreichungen offen — Deadline 28. Juni' : 'Tickets ab sofort erhältlich'}</span>
                  <span>★ Save the Date ★ AH26 ★</span>
                  <span>Workshops · Talks · Screening · Afterparty</span>
                  <span>★ Independent Short Films ★</span>
                  <span>Made by filmmakers, for filmmakers</span>
                </React.Fragment>
              ))}
            </div>
          </div>
        )}
      </div>

      {/* Hamburger show rule — injected once */}
      <style>{`
        @media (max-width: 880px) {
          .ah-hamburger { display: flex !important; }
        }
      `}</style>
    </>
  );
}

window.Nav = Nav;