// Top nav — Datakor wordmark, anchor links, language toggle, phone CTA.
// Bilingual labels via useLang().

const { useState: useNavState, useEffect: useNavEffect } = React;

const NAV_COPY = {
  tr: {
    cozumler:  'Çözümler',
    yedekleme: 'Yedekleme',
    yonetilen: 'Yönetilen IT',
    pdks:      'PDKS & CCTV',
    ekip:      'Ekip',
    tanitim:   'Tanıtım Al',
    iletisim:  'İletişim',
    home:      'Datakor ana sayfa',
    menuOpen:  'Menüyü aç',
    menuClose: 'Menüyü kapat',
    breadcrumb: 'Bilgim Grup',
  },
  en: {
    cozumler:  'Solutions',
    yedekleme: 'Backup',
    yonetilen: 'Managed IT',
    pdks:      'PDKS & CCTV',
    ekip:      'Team',
    tanitim:   'Get Brochure',
    iletisim:  'Contact',
    home:      'Datakor home',
    menuOpen:  'Open menu',
    menuClose: 'Close menu',
    breadcrumb: 'Bilgim Group',
  },
};

function LangToggle({ compact = false }) {
  const { lang, setLang } = useLang();
  return (
    <div role="group" aria-label="Language" style={{
      display: 'inline-flex', alignItems: 'center',
      padding: 2, borderRadius: 999,
      background: 'var(--surface)', border: '1px solid var(--line)',
      boxShadow: 'var(--shadow-1)',
    }}>
      {['tr', 'en'].map(l => (
        <button key={l} onClick={() => setLang(l)}
          aria-pressed={lang === l}
          aria-label={l === 'tr' ? 'Türkçe' : 'English'}
          style={{
            border: 0, cursor: 'pointer',
            padding: compact ? '5px 11px' : '6px 13px',
            fontFamily: 'var(--sans)', fontWeight: 800,
            fontSize: 12, letterSpacing: '0.06em',
            textTransform: 'uppercase',
            borderRadius: 999,
            background: lang === l ? 'var(--brand)' : 'transparent',
            color: lang === l ? '#fff' : 'var(--ink-2)',
            transition: 'all 160ms var(--ease)',
          }}>
          {l.toUpperCase()}
        </button>
      ))}
    </div>
  );
}

function TopNav() {
  const { lang } = useLang();
  const t = pick(NAV_COPY, lang);
  const [scrolled, setScrolled] = useNavState(false);
  const [open, setOpen] = useNavState(false);

  useNavEffect(() => {
    const on = () => setScrolled(window.scrollY > 8);
    on();
    window.addEventListener('scroll', on, { passive: true });
    return () => window.removeEventListener('scroll', on);
  }, []);

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

  const links = [
    { href: '#cozumler',  label: t.cozumler  },
    { href: '#yedekleme', label: t.yedekleme },
    { href: '#yonetilen', label: t.yonetilen },
    { href: '#pdks',      label: t.pdks      },
    { href: '#ekip',      label: t.ekip      },
    { href: '#tanitim',   label: t.tanitim   },
    { href: '#iletisim',  label: t.iletisim  },
  ];

  return (
    <>
      <header role="banner" style={{
        position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
        background: scrolled ? 'rgba(247,248,251,0.88)' : 'rgba(247,248,251,0.5)',
        backdropFilter: 'blur(16px) saturate(140%)',
        WebkitBackdropFilter: 'blur(16px) saturate(140%)',
        borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
        transition: 'all 220ms var(--ease)',
      }}>
        {/* Breadcrumb micro-line — "Bilgim Grup → Datakor" — SEO + brand context */}
        <div data-dk="nav-stripe" style={{
          background: 'var(--navy)',
          padding: '6px 0',
          fontSize: 11.5,
          fontFamily: 'var(--sans)',
          letterSpacing: '0.04em',
          color: 'rgba(255,255,255,0.78)',
          textAlign: 'center',
        }}>
          <a href="https://www.bilgim.com.tr/" style={{
            color: 'rgba(255,255,255,0.88)',
            textDecoration: 'none', fontWeight: 600,
          }}>{t.breadcrumb}</a>
          <span style={{ margin: '0 8px', opacity: 0.5 }}>›</span>
          <span style={{ fontWeight: 700, color: '#fff' }}>Datakor</span>
        </div>

        <div className="wrap" style={{
          padding: '14px 32px',
          display: 'flex', alignItems: 'center', gap: 22,
        }}>
          <a href="#" aria-label={t.home} style={{ display: 'flex', textDecoration: 'none' }}>
            <DatakorWordmark size="md" />
          </a>

          <nav className="dk-nav-links" aria-label={t.cozumler} style={{
            display: 'flex', gap: 2, marginLeft: 14, flex: 1,
          }}>
            {links.map(l => (
              <a key={l.href} href={l.href} style={{
                fontFamily: 'var(--sans)', fontWeight: 600, fontSize: 14,
                color: 'var(--ink-2)', textDecoration: 'none',
                padding: '8px 12px', borderRadius: 8,
                transition: 'all 160ms var(--ease)',
                whiteSpace: 'nowrap',
              }}
                onMouseEnter={e => { e.currentTarget.style.background = 'var(--surface)'; e.currentTarget.style.color = 'var(--ink)'; }}
                onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--ink-2)'; }}
              >{l.label}</a>
            ))}
          </nav>

          <LangToggle />

          <a href={`tel:${DK_CONTACT.phoneIntl}`} className="btn btn-phone dk-nav-phone"
             style={{ padding: '10px 16px', fontSize: 14 }}
             aria-label={`Telefon ${DK_CONTACT.phone}`}>
            <PhoneIcon size={14} />
            <span style={{ fontFamily: 'var(--display)', fontWeight: 800, letterSpacing: '0.02em' }}>
              {DK_CONTACT.phone}
            </span>
          </a>

          <button className="dk-nav-burger" aria-label={t.menuOpen} onClick={() => setOpen(true)} style={{
            display: 'none',
            background: 'var(--surface)', border: '1px solid var(--line)',
            width: 42, height: 42, borderRadius: 10,
            alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
            color: 'var(--ink)', fontSize: 18,
          }}>☰</button>
        </div>
      </header>

      {open && (
        <div role="dialog" aria-modal="true" style={{
          position: 'fixed', inset: 0, zIndex: 120,
          background: 'var(--bg)',
          padding: '20px 24px',
          display: 'flex', flexDirection: 'column', gap: 16,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <DatakorWordmark size="md" />
            <button aria-label={t.menuClose} onClick={() => setOpen(false)} style={{
              background: 'var(--surface)', border: '1px solid var(--line)',
              width: 42, height: 42, borderRadius: 10,
              cursor: 'pointer', fontSize: 18, color: 'var(--ink)',
            }}>×</button>
          </div>
          <nav style={{ display: 'flex', flexDirection: 'column', gap: 2, marginTop: 12 }}>
            {links.map(l => (
              <a key={l.href} href={l.href} onClick={() => setOpen(false)} style={{
                fontFamily: 'var(--display)', fontWeight: 700, fontSize: 22,
                color: 'var(--ink)', textDecoration: 'none',
                padding: '16px 0', borderBottom: '1px solid var(--line)',
              }}>{l.label}</a>
            ))}
          </nav>
          <div style={{ marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: 12 }}>
            <LangToggle />
            <a href={`tel:${DK_CONTACT.phoneIntl}`} className="btn btn-primary"
               style={{ justifyContent: 'center', padding: '18px 22px', fontSize: 17 }}>
              <PhoneIcon size={18} /> {DK_CONTACT.phone}
            </a>
          </div>
        </div>
      )}

      <style>{`
        @media (max-width: 1100px) {
          .dk-nav-links { display: none !important; }
        }
        @media (max-width: 900px) {
          .dk-nav-phone span:last-child { display: none; }
          .dk-nav-phone { padding: 10px 14px !important; }
        }
        @media (max-width: 600px) {
          .dk-nav-phone { display: none !important; }
          .dk-nav-burger { display: inline-flex !important; }
        }
      `}</style>
    </>
  );
}

Object.assign(window, { TopNav, LangToggle });