'use client';

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

export default function Header() {
  const [open, setOpen] = useState(false);
  const [navOpen, setNavOpen] = useState(false);

  useEffect(() => {
    const lock = open || navOpen;
    document.body.style.overflow = lock ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open, navOpen]);

  const closeAll = () => { setOpen(false); setNavOpen(false); };

  return (
    <>
      <header className="ux-header">
        <div className="container">
          <div className="ux-navbar">

            <Link href="/" className="ux-brand" onClick={closeAll}>
              <Image
                src="/assets/images/footerlogo.png"
                alt="Logo"
                width={120}
                height={40}
                priority
              />
            </Link>

            <ul className={`ux-nav ${navOpen ? 'is-open' : ''}`}>
              <li><Link href="/work" onClick={closeAll}>Work</Link></li>
              <li><Link href="/services" onClick={closeAll}>Services</Link></li>
              <li><Link href="/about" onClick={closeAll}>About</Link></li>
              <li><Link href="/process" onClick={closeAll}>Process</Link></li>

              <li className="ux-nav-cta">
                <Link href="/start_project" onClick={closeAll}>Start a Project</Link>
              </li>
            </ul>

            <div className="ux-header-actions">
              <button
                type="button"
                className={`ux-hamburger ${navOpen ? 'is-active' : ''}`}
                aria-label="Toggle navigation"
                aria-expanded={navOpen}
                onClick={() => { setNavOpen(!navOpen); setOpen(false); }}
              >
                <span></span><span></span><span></span>
              </button>

              <button
                type="button"
                className={`ux-menu ${open ? 'active' : ''}`}
                aria-label="Toggle contact panel"
                aria-expanded={open}
                onClick={() => { setOpen(!open); setNavOpen(false); }}
              >
                <Image
                  className="icon open-icon"
                  src="/assets/images/menutoggle.svg"
                  alt=""
                  width={30}
                  height={30}
                />
                <Image
                  className="icon close-icon"
                  src="/assets/images/closetoggle.svg"
                  alt=""
                  width={30}
                  height={30}
                />
              </button>
            </div>

          </div>
        </div>
      </header>

      <div
        className={`ux-overlay ${(open || navOpen) ? 'active' : ''}`}
        onClick={closeAll}
        aria-hidden="true"
      />

      <div className={`contact-panel ${open ? 'active' : ''}`}>
        <h4>
          <Image src="/assets/images/hello.svg" alt="hello" width={24} height={24} />
          Say hello!
        </h4>

        <div className="images">
          <Image src="/assets/images/popup1.png" alt="" width={80} height={80} />
          <Image src="/assets/images/popup2.png" alt="" width={80} height={80} />
          <Image src="/assets/images/popup3.png" alt="" width={80} height={80} />
        </div>

        <p>
          <Image src="/assets/images/location.svg" alt="location" width={18} height={18} />
          <span>410 Sandtown, California 94001, USA</span>
        </p>

        <p>
          <Image src="/assets/images/email.svg" alt="email" width={18} height={18} />
          <span> info@example.com</span>
        </p>
      </div>
    </>
  );
}