'use client';

import { useState } from 'react';
import Image from 'next/image';
import Link from 'next/link';

export default function Navbar() {
  const [open, setOpen] = useState(false);
  const [openSub, setOpenSub] = useState<string | null>(null);

  return (
    <header
      style={{
        height: 90,
        position: 'fixed',
        zIndex: 9999,
        width: '100vw',
        overflow: 'hidden',
        top: 0,
      }}
    >
      <nav
        style={{
          height: 90,
          position: 'fixed',
          top: 0,
          zIndex: 999,
          width: '100%',
          backgroundColor: '#fff',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          paddingLeft: 0,
          paddingRight: 16,
          paddingTop: 0,
          paddingBottom: 3,
        }}
      >
        {/* Skewed white strip */}
        <div
          style={{
            position: 'absolute',
            backgroundColor: 'white',
            width: '110%',
            height: 120,
            top: -20,
            transform: 'skewX(20deg) scaleY(0.86)',
            left: -25,
            zIndex: 0,
          }}
        />

        {/* Logo – no skew */}
        <Link
          href="/"
          style={{
            position: 'absolute',
            top: 0,
            left: 20,
            display: 'flex',
            alignItems: 'center',
            height: 90,
            zIndex: 1,
          }}
        >
          <Image
            src="/img/bitsia-logo-orange.svg"
            alt="Bitsia IT Solutions"
            width={150}
            height={62}
            priority
            style={{ maxWidth: '45vw', height: 'auto' }}
          />
        </Link>

        {/* Hamburger button */}
        <button
          onClick={() => setOpen(true)}
          aria-label="Open navigation"
          style={{
            marginLeft: 'auto',
            background: 'none',
            border: 0,
            cursor: 'pointer',
            padding: '8px 6px',
            position: 'relative',
            zIndex: 1,
            display: 'flex',
            flexDirection: 'column',
            gap: 6,
          }}
        >
          <span
            style={{
              display: 'block',
              width: 20,
              height: 3,
              backgroundColor: '#45130f',
              borderRadius: 2,
            }}
          />
          <span
            style={{
              display: 'block',
              width: 17,
              height: 3,
              backgroundColor: '#45130f',
              borderRadius: 2,
            }}
          />
        </button>
      </nav>

      {/* Sidebar drawer */}
      <div
        style={{
          position: 'fixed',
          top: 0,
          right: open ? 0 : -400,
          width: '100%',
          maxWidth: 360,
          height: '100vh',
          backgroundColor: '#d85218',
          zIndex: 99999,
          transition: 'right 0.3s ease-in-out',
          display: 'flex',
          flexDirection: 'column',
          color: '#fff',
          fontWeight: 'bold',
          overflow: 'hidden',
        }}
      >
        {/* Close row */}
        <div
          onClick={() => setOpen(false)}
          className="nav-close-row"
          style={{
            cursor: 'pointer',
            height: 90,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'flex-end',
          }}
        >
          <svg
            className="nav-close-x"
            width="18"
            height="18"
            viewBox="0 0 18 18"
            fill="none"
            style={{ marginRight: 10, flexShrink: 0 }}
          >
            <line x1="2" y1="2" x2="16" y2="16" stroke="white" strokeWidth="2" strokeLinecap="round"/>
            <line x1="16" y1="2" x2="2" y2="16" stroke="white" strokeWidth="2" strokeLinecap="round"/>
          </svg>
          <span
            style={{
              letterSpacing: '1.7px',
              fontSize: '0.625em',
              fontWeight: 300,
              marginRight: 36,
            }}
          >
            NAVIGATE TO
          </span>
        </div>

        {/* Nav links */}
        <ul
          style={{
            listStyle: 'none',
            padding: 0,
            margin: '12px 0 0 0',
            flex: 1,
          }}
        >
          {/* Services with submenu */}
          <li style={{ position: 'relative' }}>
            <button
              onClick={() => setOpenSub(openSub === 'services' ? null : 'services')}
              style={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'flex-end',
                width: '100%',
                background: 'none',
                border: 0,
                cursor: 'pointer',
                textAlign: 'right',
                fontSize: '1.75em',
                color: '#fff',
                fontWeight: 600,
                padding: '5px 36px 5px 0',
                gap: 10,
              }}
            >
              Services
              <svg
                width="12"
                height="12"
                viewBox="0 0 12 12"
                fill="white"
                style={{
                  transition: 'transform 0.2s',
                  transform: openSub === 'services' ? 'rotate(180deg)' : 'rotate(0deg)',
                  flexShrink: 0,
                }}
              >
                <path d="M6 8L1 3h10z" />
              </svg>
            </button>
            {/* Submenu */}
            <ul
              style={{
                listStyle: 'none',
                padding: 0,
                margin: 0,
                maxHeight: openSub === 'services' ? 200 : 0,
                overflow: 'hidden',
                transition: 'max-height 0.25s ease-in-out',
              }}
            >
              {[
                { label: 'Web Development', slide: 0 },
                { label: 'Graphic Design', slide: 1 },
                { label: 'Internet Marketing', slide: 2 },
              ].map((sub) => (
                <li key={sub.label}>
                  <a
                    href="#services"
                    onClick={() => {
                      setOpen(false);
                      setOpenSub(null);
                      window.dispatchEvent(
                        new CustomEvent('services:activate', { detail: { slide: sub.slide } })
                      );
                    }}
                    style={{
                      display: 'block',
                      textAlign: 'right',
                      fontSize: '1.15em',
                      color: 'rgba(255,255,255,0.75)',
                      fontWeight: 400,
                      padding: '4px 36px 4px 0',
                      textDecoration: 'none',
                    }}
                  >
                    {sub.label}
                  </a>
                </li>
              ))}
            </ul>
          </li>

          {[
            { label: 'Track Record', href: '#track-record' },
            { label: 'AI', href: '#ai' },
            { label: 'FAQ', href: '#faq' },
            { label: 'Clients', href: '#clients' },
          ].map((item) => (
            <li key={item.label} style={{ position: 'relative' }}>
              <Link
                href={item.href}
                onClick={() => setOpen(false)}
                style={{
                  display: 'block',
                  textAlign: 'right',
                  fontSize: '1.75em',
                  color: '#fff',
                  fontWeight: 600,
                  padding: '5px 36px 5px 0',
                  textDecoration: 'none',
                }}
              >
                {item.label}
              </Link>
            </li>
          ))}

          {/* Separator line */}
          <li style={{ position: 'relative', minHeight: 25, marginRight: 10 }}>
            <span
              style={{
                position: 'absolute',
                background: '#fff',
                width: 68,
                height: 1,
                right: 26,
                bottom: 0,
              }}
            />
          </li>

          <li>
            <Link
              href="#contact-us"
              onClick={() => setOpen(false)}
              style={{
                display: 'block',
                textAlign: 'right',
                fontSize: '1.75em',
                color: '#fff',
                fontWeight: 600,
                padding: '5px 36px 5px 0',
                textDecoration: 'none',
              }}
            >
              Contact us
            </Link>
          </li>
        </ul>

        {/* Social container at bottom */}
        <div
          style={{
            position: 'absolute',
            width: '100%',
            left: 0,
            bottom: 0,
          }}
        >
          <div
            style={{
              letterSpacing: '1.7px',
              fontSize: '0.625em',
              fontWeight: 300,
              textAlign: 'right',
              marginRight: 36,
              marginLeft: 'auto',
              width: '70%',
              paddingBottom: 24,
            }}
          >
            <div style={{ marginBottom: 12 }}>FOLLOW US</div>
            <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 12 }}>
              <Link href="#" aria-label="Twitter">
                <svg width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75.86 61.39" fill="white">
                  <path d="M75.86,7.27a31.46,31.46,0,0,1-8.94,2.44,15.57,15.57,0,0,0,6.84-8.58A31.15,31.15,0,0,1,63.88,4.9,15.58,15.58,0,0,0,37,15.5a15.78,15.78,0,0,0,.4,3.53A44.3,44.3,0,0,1,5.28,2.84,15.46,15.46,0,0,0,10.1,23.53a15.57,15.57,0,0,1-7-1.94v.19A15.52,15.52,0,0,0,15.53,37a15.78,15.78,0,0,1-4.1.54,14.93,14.93,0,0,1-2.93-.28A15.56,15.56,0,0,0,23,48,31.29,31.29,0,0,1,3.71,54.64,30.42,30.42,0,0,1,0,54.42a44.18,44.18,0,0,0,23.86,7c28.63,0,44.28-23.62,44.28-44.1,0-.66,0-1.34,0-2A31.8,31.8,0,0,0,75.86,7.27Z" />
                </svg>
              </Link>
              <Link href="#" aria-label="LinkedIn">
                <svg width="21" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45" fill="white">
                  <path d="M41.67,0H3.32A3.28,3.28,0,0,0,0,3.24V41.75A3.28,3.28,0,0,0,3.32,45H41.67A3.29,3.29,0,0,0,45,41.75V3.24A3.28,3.28,0,0,0,41.67,0ZM13.35,38.35H6.67V16.87h6.68ZM10,13.93a3.87,3.87,0,1,1,3.87-3.87A3.87,3.87,0,0,1,10,13.93ZM38.35,38.35H31.68V27.9c0-2.49-.05-5.69-3.47-5.69s-4,2.71-4,5.51V38.35H17.53V16.87h6.4v2.94H24a7,7,0,0,1,6.32-3.47c6.76,0,8,4.44,8,10.23Z" />
                </svg>
              </Link>
            </div>
          </div>
        </div>
      </div>

      {/* Backdrop click-outside */}
      {open && (
        <div
          onClick={() => setOpen(false)}
          style={{
            position: 'fixed',
            inset: 0,
            zIndex: 9998,
          }}
        />
      )}
    </header>
  );
}