// Top nav — light corporate, sticky, mobile-aware

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

const BilgimWordmark = ({ size = 'md', inverse = false }) => {
  const ms = size === 'lg' ? 38 : size === 'sm' ? 22 : 28;
  const ss = size === 'lg' ? 11 : size === 'sm' ? 8.5 : 9.5;
  const main = inverse ? '#fff' : 'var(--ink)';
  const accent = 'var(--c-adaplanet)';
  const sub = inverse ? 'rgba(255,255,255,0.7)' : 'var(--muted)';
  return (
    <div aria-label="Bilgim Kurumsal Hizmetler" style={{ display: 'flex', flexDirection: 'column', gap: 2, lineHeight: 1 }}>
      <div style={{
        fontFamily: 'var(--display)', fontWeight: 800,
        fontSize: ms, color: main, letterSpacing: '-0.025em', lineHeight: 1,
      }}>
        Bilgim<span style={{ color: accent }}>.</span>
      </div>
      <div style={{
        fontFamily: 'var(--sans)', fontWeight: 700,
        fontSize: ss, color: sub, letterSpacing: '0.18em',
        textTransform: 'uppercase', lineHeight: 1,
      }}>
        Kurumsal Hizmetler
      </div>
    </div>
  );
};

const NAV_LINKS = [
  { href: '#markalarimiz', label: 'Markalarımız' },
  { href: '#hizmetler',    label: 'Hizmetler'    },
  { href: '#bolgeler',     label: 'Bölgeler'     },
  { href: '#sss',          label: 'SSS'          },
  { href: '#tanitim',      label: 'Tanıtım Al'   },
  { href: '#iletisim',     label: 'İletişim'     },
];

function TopNav() {
  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]);

  return (
    <>
      <header style={{
        position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
        background: scrolled ? 'rgba(250,250,247,0.88)' : 'rgba(250,250,247,0.55)',
        backdropFilter: 'blur(16px) saturate(140%)',
        WebkitBackdropFilter: 'blur(16px) saturate(140%)',
        borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
        transition: 'all 220ms var(--ease)',
      }}>
        <div className="wrap" style={{
          padding: '14px 32px',
          display: 'flex', alignItems: 'center', gap: 28,
        }}>
          <a href="#" style={{ display: 'flex', textDecoration: 'none' }} aria-label="Bilgim ana sayfa">
            <BilgimWordmark />
          </a>

          <nav className="nav-links" style={{
            display: 'flex', gap: 4, marginLeft: 18,
          }}>
            {NAV_LINKS.map(l => (
              <a key={l.href} href={l.href} style={{
                fontFamily: 'var(--sans)', fontWeight: 600, fontSize: 14.5,
                color: 'var(--ink-2)', textDecoration: 'none',
                padding: '8px 14px', borderRadius: 8,
                transition: 'all 160ms var(--ease)',
              }}
              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>

          <div style={{ flex: 1 }} />

          <a href="tel:+902647771188" className="btn btn-phone nav-phone" style={{ padding: '10px 18px', fontSize: 14 }}>
            <span aria-hidden style={{ fontSize: 14 }}>☎</span>
            <span style={{ fontFamily: 'var(--display)', fontWeight: 800, letterSpacing: '0.02em' }}>0264 777 11 88</span>
          </a>

          <button className="nav-burger" aria-label="Menüyü aç" 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 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' }}>
            <BilgimWordmark size="md" />
            <button aria-label="Menüyü kapat" 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 }}>
            {NAV_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>
          <a href="tel:+902647771188" className="btn btn-primary" style={{ marginTop: 'auto', justifyContent: 'center', padding: '18px 22px', fontSize: 17 }}>
            <span>☎</span> 0264 777 11 88
          </a>
        </div>
      )}

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

Object.assign(window, { TopNav, BilgimWordmark, NAV_LINKS });