// Navigation — real JK Media logo (large), creative DE/PL toggle, prominent WhatsApp
const { useState, useEffect } = React;

// Shared viewport hook — exposed on window for reuse by other components
function useIsMobile(maxWidth = 768) {
  const [m, setM] = useState(() =>
    typeof window !== 'undefined' && window.matchMedia(`(max-width: ${maxWidth}px)`).matches
  );
  useEffect(() => {
    const mq = window.matchMedia(`(max-width: ${maxWidth}px)`);
    const on = () => setM(mq.matches);
    mq.addEventListener('change', on);
    return () => mq.removeEventListener('change', on);
  }, [maxWidth]);
  return m;
}
window.useIsMobile = useIsMobile;

function Nav({ lang, setLang }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const isMobile = useIsMobile();
  const waUrl = `https://wa.me/4917645186612?text=${encodeURIComponent(
    lang === 'de'
      ? 'Hi Kamil, ich interessiere mich für ein Projekt mit JK Media. Kannst du dich bitte kurz bei mir melden? Danke!'
      : 'Hej Kamil, mam pomysł na projekt — odezwij się, jak będziesz miał chwilę. Dzięki!'
  )}`;

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

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

  // Close drawer when going back to desktop
  useEffect(() => { if (!isMobile) setMenuOpen(false); }, [isMobile]);

  const t = (de, pl) => lang === 'de' ? de : pl;

  const links = [
    ['#services', t('Leistungen','Usługi')],
    ['#packages',  t('Pakete','Pakiety')],
    ['#process',   t('Prozess','Proces')],
    ['#team',      t('Team','Zespół')]
  ];

  const navHeight = isMobile ? 64 : 84;

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, height: navHeight, zIndex: 100,
      background: scrolled ? 'rgba(10,10,10,.94)' : 'rgba(10,10,10,.72)',
      backdropFilter: 'blur(24px)', WebkitBackdropFilter: 'blur(24px)',
      borderBottom: scrolled ? '1px solid rgba(212,175,55,.18)' : '1px solid rgba(212,175,55,.06)',
      boxShadow: scrolled ? '0 12px 40px rgba(0,0,0,.5)' : 'none',
      transition: 'all .3s cubic-bezier(.16,1,.3,1)',
      display: 'flex', alignItems: 'center'
    }}>
      <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>

        {/* Logo mark + real wordmark from the brand logo */}
        <a href="#hero" style={{ display: 'flex', alignItems: 'center', gap: isMobile ? 8 : 12, height: isMobile ? 56 : 72, textDecoration: 'none' }}>
          <img src="assets/jk-media-logo-mark.png" alt="" style={{
            height: isMobile ? 40 : 56, width: 'auto', display: 'block',
            filter: 'drop-shadow(0 4px 14px rgba(212,175,55,.32))'
          }}/>
          <img src="assets/jk-media-wordmark.png" alt="JK Media" style={{
            height: isMobile ? 26 : 38, width: 'auto', display: 'block',
            filter: 'drop-shadow(0 2px 10px rgba(212,175,55,.25))'
          }}/>
        </a>

        {isMobile ? (
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <LangToggle lang={lang} setLang={setLang} compact/>
            <button
              onClick={() => setMenuOpen(v => !v)}
              aria-label={menuOpen ? 'Menü schließen' : 'Menü öffnen'}
              aria-expanded={menuOpen}
              style={{
                width: 44, height: 44, borderRadius: 12,
                border: '1px solid rgba(212,175,55,.25)',
                background: menuOpen ? 'rgba(212,175,55,.12)' : 'rgba(212,175,55,.04)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                transition: 'all .25s ease'
              }}>
              <div style={{ position: 'relative', width: 20, height: 14 }}>
                <span style={{
                  position: 'absolute', left: 0, right: 0, top: menuOpen ? 6 : 0,
                  height: 2, borderRadius: 2, background: 'var(--gold)',
                  transform: menuOpen ? 'rotate(45deg)' : 'none',
                  transition: 'all .3s cubic-bezier(.2,.9,.3,1)'
                }}/>
                <span style={{
                  position: 'absolute', left: 0, right: 0, top: 6,
                  height: 2, borderRadius: 2, background: 'var(--gold)',
                  opacity: menuOpen ? 0 : 1,
                  transition: 'opacity .2s'
                }}/>
                <span style={{
                  position: 'absolute', left: 0, right: 0, top: menuOpen ? 6 : 12,
                  height: 2, borderRadius: 2, background: 'var(--gold)',
                  transform: menuOpen ? 'rotate(-45deg)' : 'none',
                  transition: 'all .3s cubic-bezier(.2,.9,.3,1)'
                }}/>
              </div>
            </button>
          </div>
        ) : (
          <ul style={{ display: 'flex', gap: 36, alignItems: 'center' }}>
            {links.map(([h,l]) => (
              <li key={h}><a href={h} style={{ fontSize: 13, color: 'var(--text-2)', transition: 'color .2s', fontFamily: 'var(--font-body)', fontWeight: 500 }} onMouseEnter={e=>e.target.style.color='var(--gold)'} onMouseLeave={e=>e.target.style.color='var(--text-2)'}>{l}</a></li>
            ))}

            {/* Creative lang toggle — flag-drop with sliding gold rail */}
            <li>
              <LangToggle lang={lang} setLang={setLang}/>
            </li>

            {/* WhatsApp — prominent green */}
            <li>
              <a href={waUrl} style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '11px 18px', borderRadius: 50,
                background: 'linear-gradient(135deg,#25D366,#128C7E)',
                color: '#fff',
                fontFamily: 'var(--font-display)', fontSize: 14, fontWeight: 600, letterSpacing: '.01em',
                boxShadow: '0 6px 20px rgba(37,211,102,.35), inset 0 1px 0 rgba(255,255,255,.15)',
                transition: 'all .3s cubic-bezier(.16,1,.3,1)'
              }}
              onMouseEnter={e=>{e.currentTarget.style.transform='translateY(-2px)';e.currentTarget.style.boxShadow='0 12px 28px rgba(37,211,102,.5), inset 0 1px 0 rgba(255,255,255,.2)'}}
              onMouseLeave={e=>{e.currentTarget.style.transform='translateY(0)';e.currentTarget.style.boxShadow='0 6px 20px rgba(37,211,102,.35), inset 0 1px 0 rgba(255,255,255,.15)'}}
              >
                <svg width="18" height="18" viewBox="0 0 24 24" fill="#fff"><path d="M20.5 3.5A11.8 11.8 0 0 0 12 0C5.4 0 .1 5.4.1 12c0 2.1.6 4.2 1.6 6L0 24l6.2-1.6c1.7.9 3.7 1.4 5.8 1.4 6.6 0 12-5.4 12-12 0-3.2-1.3-6.2-3.5-8.3zM12 21.8c-1.8 0-3.6-.5-5.1-1.4l-.4-.2-3.7 1 1-3.6-.2-.4A9.8 9.8 0 0 1 2.2 12c0-5.4 4.4-9.8 9.8-9.8s9.8 4.4 9.8 9.8-4.4 9.8-9.8 9.8zm5.4-7.4c-.3-.2-1.8-.9-2-1s-.5-.1-.7.2-.8 1-.9 1.2-.3.2-.5.1c-.9-.4-1.8-1-2.5-1.8-.6-.7-1.1-1.6-1.5-2.4-.1-.3 0-.4.1-.5.1-.1.3-.3.4-.5s.2-.3.3-.5c.1-.2 0-.3 0-.5s-.7-1.6-.9-2.2c-.2-.5-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5 4.5.7.3 1.2.5 1.7.6.7.2 1.3.2 1.8.1.6-.1 1.8-.7 2-1.4s.2-1.3.2-1.4c-.1-.1-.3-.2-.6-.3z"/></svg>
                <span>WhatsApp</span>
              </a>
            </li>
          </ul>
        )}
      </div>

      {/* Mobile drawer — slides down from under the nav */}
      {isMobile && (
        <>
          <div
            onClick={() => setMenuOpen(false)}
            style={{
              position: 'fixed', inset: 0, top: navHeight,
              background: 'rgba(0,0,0,.65)',
              backdropFilter: 'blur(4px)',
              opacity: menuOpen ? 1 : 0,
              pointerEvents: menuOpen ? 'auto' : 'none',
              transition: 'opacity .3s ease',
              zIndex: 90
            }}
          />
          <div style={{
            position: 'fixed', top: navHeight, left: 0, right: 0,
            background: 'linear-gradient(180deg, rgba(15,13,8,.98), rgba(10,10,10,.98))',
            borderBottom: '1px solid rgba(212,175,55,.18)',
            transform: menuOpen ? 'translateY(0)' : 'translateY(-12px)',
            opacity: menuOpen ? 1 : 0,
            pointerEvents: menuOpen ? 'auto' : 'none',
            transition: 'transform .35s cubic-bezier(.2,.9,.3,1), opacity .3s ease',
            padding: '24px 32px 32px',
            display: 'flex', flexDirection: 'column', gap: 4,
            boxShadow: '0 24px 48px rgba(0,0,0,.5)',
            zIndex: 95
          }}>
            {links.map(([h, l], i) => (
              <a key={h} href={h} onClick={() => setMenuOpen(false)} style={{
                padding: '16px 4px',
                fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600,
                color: 'var(--text)', letterSpacing: '-0.01em',
                borderBottom: '1px solid rgba(212,175,55,.08)',
                transform: menuOpen ? 'translateY(0)' : 'translateY(-8px)',
                opacity: menuOpen ? 1 : 0,
                transition: `transform .4s ${0.05 + i * 0.04}s cubic-bezier(.2,.9,.3,1), opacity .4s ${0.05 + i * 0.04}s`,
                display: 'flex', justifyContent: 'space-between', alignItems: 'center'
              }}>
                {l}
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="rgba(212,175,55,.5)" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>
                </svg>
              </a>
            ))}
            <a
              href={waUrl}
              onClick={() => setMenuOpen(false)}
              style={{
                marginTop: 18,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
                padding: '16px 20px', borderRadius: 12,
                background: 'linear-gradient(135deg,#25D366,#128C7E)',
                color: '#fff',
                fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 600,
                boxShadow: '0 8px 24px rgba(37,211,102,.4), inset 0 1px 0 rgba(255,255,255,.2)',
                transform: menuOpen ? 'translateY(0)' : 'translateY(-8px)',
                opacity: menuOpen ? 1 : 0,
                transition: `transform .4s ${0.05 + links.length * 0.04}s cubic-bezier(.2,.9,.3,1), opacity .4s ${0.05 + links.length * 0.04}s`
              }}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="#fff"><path d="M20.5 3.5A11.8 11.8 0 0 0 12 0C5.4 0 .1 5.4.1 12c0 2.1.6 4.2 1.6 6L0 24l6.2-1.6c1.7.9 3.7 1.4 5.8 1.4 6.6 0 12-5.4 12-12 0-3.2-1.3-6.2-3.5-8.3zM12 21.8c-1.8 0-3.6-.5-5.1-1.4l-.4-.2-3.7 1 1-3.6-.2-.4A9.8 9.8 0 0 1 2.2 12c0-5.4 4.4-9.8 9.8-9.8s9.8 4.4 9.8 9.8-4.4 9.8-9.8 9.8zm5.4-7.4c-.3-.2-1.8-.9-2-1s-.5-.1-.7.2-.8 1-.9 1.2-.3.2-.5.1c-.9-.4-1.8-1-2.5-1.8-.6-.7-1.1-1.6-1.5-2.4-.1-.3 0-.4.1-.5.1-.1.3-.3.4-.5s.2-.3.3-.5c.1-.2 0-.3 0-.5s-.7-1.6-.9-2.2c-.2-.5-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5 4.5.7.3 1.2.5 1.7.6.7.2 1.3.2 1.8.1.6-.1 1.8-.7 2-1.4s.2-1.3.2-1.4c-.1-.1-.3-.2-.6-.3z"/></svg>
              WhatsApp &nbsp;·&nbsp; {t('Sofort schreiben','Napisz teraz')}
            </a>
          </div>
        </>
      )}
    </nav>
  );
}

function LangToggle({ lang, setLang, compact = false }) {
  return (
    <div style={{
      position: 'relative',
      display: 'flex',
      padding: 3,
      borderRadius: 50,
      border: '1px solid rgba(212,175,55,.22)',
      background: 'rgba(212,175,55,.04)',
      fontFamily: 'var(--font-mono)',
      overflow: 'hidden'
    }}>
      {/* Sliding gold pill */}
      <div style={{
        position: 'absolute',
        top: 3, bottom: 3, left: lang === 'de' ? 3 : '50%', width: 'calc(50% - 3px)',
        background: 'linear-gradient(180deg,#F0D060,#D4AF37)',
        borderRadius: 50,
        transition: 'left .4s cubic-bezier(.16,1,.3,1)',
        boxShadow: '0 2px 8px rgba(212,175,55,.4), inset 0 1px 0 rgba(255,255,255,.3)'
      }}/>
      {['de','pl'].map(l => (
        <button key={l} onClick={()=>setLang(l)} style={{
          position: 'relative', zIndex: 2,
          padding: compact ? '5px 10px' : '6px 14px',
          fontSize: compact ? 10 : 11, fontWeight: 700, letterSpacing: '.12em', textTransform: 'uppercase',
          color: lang===l ? '#0A0A0A' : 'var(--text-3)',
          transition: 'color .3s',
          display: 'flex', alignItems: 'center', gap: compact ? 4 : 6
        }}>
          {/* Real flag — horizontal stripes in a rounded rectangle */}
          {l === 'de' ? (
            <svg width={compact ? 14 : 18} height={compact ? 10 : 12} viewBox="0 0 5 3" style={{ borderRadius: 2, boxShadow: lang===l ? 'inset 0 0 0 .5px rgba(0,0,0,.3)' : 'inset 0 0 0 .5px rgba(255,255,255,.15)', display: 'block' }}>
              <rect width="5" height="1" y="0" fill="#000"/>
              <rect width="5" height="1" y="1" fill="#DD0000"/>
              <rect width="5" height="1" y="2" fill="#FFCE00"/>
            </svg>
          ) : (
            <svg width={compact ? 14 : 18} height={compact ? 10 : 12} viewBox="0 0 5 3" style={{ borderRadius: 2, boxShadow: lang===l ? 'inset 0 0 0 .5px rgba(0,0,0,.3)' : 'inset 0 0 0 .5px rgba(255,255,255,.2)', display: 'block' }}>
              <rect width="5" height="1.5" y="0" fill="#fff"/>
              <rect width="5" height="1.5" y="1.5" fill="#DC143C"/>
            </svg>
          )}
          {l.toUpperCase()}
        </button>
      ))}
    </div>
  );
}

window.Nav = Nav;
