'use client';

import React, { useEffect, useState } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { usePathname } from 'next/navigation';

const NAV_LINKS = [
  { label: 'Home', href: '/' },
  { label: 'Robots', href: '/robots/' },
  { label: 'Brands', href: '/brands/' },
  { label: 'Industries', href: '/industries/' },
  { label: 'About', href: '/about/' },
  { label: 'Contact', href: '/contact/' },
  { label: 'Book Demo', href: '/book-demo/' },
];

export function Navbar() {
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  const pathname = usePathname() || '/';

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

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

  const isActive = (href: string) => {
    if (href === '/') return pathname === '/' || pathname === '';
    return pathname.startsWith(href.replace(/\/$/, ''));
  };

  return (
    <>
      <nav
        style={{
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          zIndex: 100,
          background: scrolled ? 'rgba(5, 5, 5, 0.78)' : 'linear-gradient(180deg, rgba(5, 5, 5,0.6), rgba(5, 5, 5,0))',
          backdropFilter: scrolled ? 'blur(18px)' : 'blur(8px)',
          WebkitBackdropFilter: scrolled ? 'blur(18px)' : 'blur(8px)',
          borderBottom: scrolled ? '1px solid rgba(39, 63, 148,0.14)' : '1px solid transparent',
          transition: 'all 0.35s cubic-bezier(0.16,1,0.3,1)',
        }}
      >
        <div
          style={{
            maxWidth: '1320px',
            margin: '0 auto',
            padding: scrolled ? '0.85rem clamp(1rem, 4vw, 2rem)' : '1.1rem clamp(1rem, 4vw, 2rem)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            gap: '1rem',
            transition: 'padding 0.3s ease',
          }}
        >
          <Link href="/" style={{ textDecoration: 'none', display: 'flex', alignItems: 'center', gap: '0.65rem', minWidth: 0 }} onClick={() => setMobileOpen(false)} aria-label="YS Lootah Robotics — Home">
            <span
              style={{
                position: 'relative',
                width: 40,
                height: 40,
                borderRadius: '50%',
                overflow: 'hidden',
                flex: 'none',
                boxShadow: '0 0 18px rgba(39, 63, 148, 0.35)',
                border: '1px solid rgba(39, 63, 148,0.4)',
              }}
            >
              <Image
                src="/images/brands/ys-lootah-robotics-logo.png"
                alt="YS Lootah Robotics logo"
                fill
                sizes="40px"
                style={{ objectFit: 'cover' }}
                priority
              />
            </span>
            <span style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
              <span style={{ fontSize: '0.95rem', fontWeight: 700, letterSpacing: '0.16em', color: '#ffffff', textTransform: 'uppercase' }}>
                YS Lootah
              </span>
              <span style={{ fontSize: '0.7rem', fontWeight: 500, letterSpacing: '0.32em', color: '#DEE0F0', textTransform: 'uppercase', marginTop: 3 }}>
                Robotics
              </span>
            </span>
          </Link>

          <div className="nav-desktop" style={{ alignItems: 'center', gap: '1.4rem' }}>
            {NAV_LINKS.map((l) => (
              <Link
                key={l.href}
                href={l.href}
                style={{
                  position: 'relative',
                  color: isActive(l.href) ? '#DEE0F0' : '#DEE0F0',
                  fontSize: '0.78rem',
                  fontWeight: 600,
                  textDecoration: 'none',
                  letterSpacing: '0.16em',
                  textTransform: 'uppercase',
                  transition: 'color 0.2s',
                  paddingBottom: 4,
                  borderBottom: isActive(l.href) ? '1px solid #DEE0F0' : '1px solid transparent',
                }}
              >
                {l.label}
              </Link>
            ))}
          </div>

          <div style={{ display: 'flex', alignItems: 'center', gap: '0.625rem' }}>
            <Link
              href="/configure/"
              className="nav-desktop-cta btn btn-primary"
              style={{ padding: '0.7rem 1.2rem', fontSize: '0.78rem' }}
            >
              Configure
            </Link>
            <button
              type="button"
              className="nav-mobile-toggle"
              aria-label={mobileOpen ? 'Close menu' : 'Open menu'}
              aria-expanded={mobileOpen}
              onClick={() => setMobileOpen((s) => !s)}
              style={{
                width: 42,
                height: 42,
                borderRadius: 12,
                border: '1px solid rgba(39, 63, 148,0.2)',
                background: 'rgba(15, 12, 8,0.6)',
                color: '#FBFBFD',
                cursor: 'pointer',
                display: 'none',
                alignItems: 'center',
                justifyContent: 'center',
                padding: 0,
              }}
            >
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                {mobileOpen ? <path d="M6 6l12 12M6 18L18 6" /> : <path d="M4 7h16M4 12h16M4 17h16" />}
              </svg>
            </button>
          </div>
        </div>
      </nav>

      <div
        role="dialog"
        aria-modal="true"
        aria-label="Mobile navigation"
        style={{
          position: 'fixed',
          inset: 0,
          zIndex: 99,
          background: 'rgba(5, 5, 5,0.96)',
          backdropFilter: 'blur(20px)',
          WebkitBackdropFilter: 'blur(20px)',
          transform: mobileOpen ? 'translateY(0)' : 'translateY(-12px)',
          opacity: mobileOpen ? 1 : 0,
          pointerEvents: mobileOpen ? 'auto' : 'none',
          transition: 'opacity 0.25s ease, transform 0.25s ease',
          padding: 'clamp(5rem, 14vw, 7rem) clamp(1.5rem, 5vw, 2rem) clamp(2rem, 6vw, 3rem)',
          display: 'flex',
          flexDirection: 'column',
          gap: '1rem',
          overflowY: 'auto',
        }}
      >
        {NAV_LINKS.map((l) => (
          <Link
            key={l.href}
            href={l.href}
            onClick={() => setMobileOpen(false)}
            style={{
              fontSize: '1.5rem',
              fontWeight: 500,
              color: isActive(l.href) ? '#DEE0F0' : '#FBFBFD',
              textDecoration: 'none',
              letterSpacing: '-0.01em',
              padding: '0.75rem 0',
              borderBottom: '1px solid rgba(39, 63, 148,0.12)',
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
            }}
          >
            <span>{l.label}</span>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <line x1="5" y1="12" x2="19" y2="12" />
              <polyline points="12 5 19 12 12 19" />
            </svg>
          </Link>
        ))}
        <Link
          href="/configure/"
          onClick={() => setMobileOpen(false)}
          className="btn btn-primary"
          style={{ marginTop: '1rem', justifyContent: 'center' }}
        >
          Configure your robot
        </Link>
        <Link
          href="/book-demo/"
          onClick={() => setMobileOpen(false)}
          className="btn btn-ghost"
          style={{ justifyContent: 'center' }}
        >
          Book a demo
        </Link>
      </div>

      <style jsx>{`
        .nav-desktop, .nav-desktop-cta { display: none !important; }
        .nav-mobile-toggle { display: inline-flex !important; }
        @media (min-width: 1080px) {
          .nav-desktop { display: flex !important; }
          .nav-desktop-cta { display: inline-flex !important; }
          .nav-mobile-toggle { display: none !important; }
        }
      `}</style>
    </>
  );
}
