// Navigation — sticky, glassmorphic after scroll
const { Menu: IconMenuC, Close: IconCloseC, Sun: IconSunC, Moon: IconMoonC, ArrowUpRight: IconArrowUpRightC } = window.Icons;

// ──────────────────────────────────────────────────────────
// LOGO — Cardefi monogram + wordmark
// The mark: a confident geometric "C" built from a heavy outer
// stroke and a precise inner counter-arc, with a single warm
// terminal dot at the opening — reads as engineering precision.
// ──────────────────────────────────────────────────────────
function LogoMark({ size = 40, animated = false }) {
  const gid = `cdf-mark-${animated ? 'a' : 's'}`;
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" fill="none" aria-hidden="true" className="shrink-0">
      <defs>
        <linearGradient id={gid} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#3B82F6" />
          <stop offset="55%" stopColor="#8B5CF6" />
          <stop offset="100%" stopColor="#22D3EE" />
        </linearGradient>
        <linearGradient id={`${gid}-stroke`} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="currentColor" stopOpacity="0.95" />
          <stop offset="100%" stopColor="currentColor" stopOpacity="0.78" />
        </linearGradient>
      </defs>

      {/* Outer ring — faint, gives the mark presence */}
      <circle cx="24" cy="24" r="22" stroke="currentColor" strokeWidth="0.6" opacity="0.14" fill="none" />

      {/* The C — heavy, confident, slightly under 3/4 turn */}
      <path
        d="M 37.5 14.2 A 16 16 0 1 0 37.5 33.8"
        stroke={`url(#${gid}-stroke)`}
        strokeWidth="5"
        strokeLinecap="round"
        fill="none"
      />

      {/* Inner counter-arc — adds depth, suggests an engineered system */}
      <path
        d="M 33 17.5 A 10 10 0 1 0 33 30.5"
        stroke="currentColor"
        strokeWidth="1"
        strokeLinecap="round"
        opacity="0.28"
        fill="none"
      />

      {/* Terminal dot — gradient accent at the opening */}
      <circle cx="36" cy="24" r="6" fill={`url(#${gid})`} opacity="0.18" />
      <circle cx="36" cy="24" r="3.2" fill={`url(#${gid})`} />
    </svg>
  );
}

function Logo({ size = 40 }) {
  return (
    <a href="#top" className="flex items-center gap-3.5 group" aria-label="Cardefi Solutions home">
      <LogoMark size={size} />
      <div className="flex items-center gap-3 leading-none">
        <span
          className="font-display text-[20px] font-semibold tracking-[-0.025em]"
          style={{color: 'var(--ink)'}}
        >
          Cardefi
        </span>
        <span className="h-5 w-px" style={{background: 'var(--hairline)'}} aria-hidden="true"></span>
        <span
          className="font-mono text-[10px] uppercase tracking-[0.32em] pt-[2px]"
          style={{color: 'var(--muted)'}}
        >
          Solutions
        </span>
      </div>
    </a>
  );
}

function Nav() {
  const scrolled = useScrolled(60);
  const [theme, setTheme] = useTheme();
  const [open, setOpen] = useState(false);

  const links = [
    { label: 'Services', href: '#services' },
    { label: 'Work', href: '#work' },
    { label: 'Approach', href: '#approach' },
    { label: 'Consulting', href: '#consulting' },
    { label: 'Industries', href: '#industries' },
    { label: 'Contact', href: '#contact' },
  ];

  return (
    <header
      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
        scrolled ? 'nav-glass border-b' : 'border-b border-transparent'
      }`}
      style={scrolled ? {} : { background: 'transparent' }}
    >
      <div className="max-w-[1280px] mx-auto px-6 lg:px-10 h-[76px] flex items-center justify-between">
        <Logo size={38} />

        <nav className="hidden lg:flex items-center gap-1" aria-label="Primary">
          {links.map(l => (
            <a
              key={l.href}
              href={l.href}
              className="px-3.5 py-2 text-[13.5px] rounded-full transition-colors"
              style={{ color: 'var(--muted)' }}
              onMouseEnter={(e) => e.currentTarget.style.color = 'var(--ink)'}
              onMouseLeave={(e) => e.currentTarget.style.color = 'var(--muted)'}
            >
              {l.label}
            </a>
          ))}
        </nav>

        <div className="flex items-center gap-2">
          <button
            onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
            className="w-9 h-9 rounded-full flex items-center justify-center transition-colors"
            style={{ color: 'var(--muted)' }}
            onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--ink)'; e.currentTarget.style.background = 'var(--surface-2)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--muted)'; e.currentTarget.style.background = 'transparent'; }}
            aria-label={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
          >
            {theme === 'dark' ? <IconSunC size={16} /> : <IconMoonC size={16} />}
          </button>
          <a href="#contact" className="hidden sm:inline-flex btn-primary !py-2.5 !px-5 !text-[13px]">
            Book a consultation
            <IconArrowUpRightC size={14} />
          </a>
          <button
            className="lg:hidden w-9 h-9 rounded-full flex items-center justify-center"
            style={{ color: 'var(--ink)' }}
            onClick={() => setOpen(!open)}
            aria-label="Toggle menu"
            aria-expanded={open}
          >
            {open ? <IconCloseC size={18} /> : <IconMenuC size={18} />}
          </button>
        </div>
      </div>

      {open && (
        <div className="lg:hidden nav-glass border-t" style={{borderColor: 'var(--border)'}}>
          <nav className="px-6 py-5 flex flex-col gap-1" aria-label="Mobile">
            {links.map(l => (
              <a key={l.href} href={l.href} onClick={() => setOpen(false)}
                 className="px-3 py-3 text-[15px] rounded-lg"
                 style={{color: 'var(--ink)'}}>
                {l.label}
              </a>
            ))}
            <a href="#contact" onClick={() => setOpen(false)} className="btn-primary mt-2 justify-center">
              Book a consultation <IconArrowUpRightC size={14} />
            </a>
          </nav>
        </div>
      )}
    </header>
  );
}

window.Nav = Nav;
window.Logo = Logo;
window.LogoMark = LogoMark;