'use client';

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

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

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

            <Link href="/">
              <Image
                src="/assets/images/footerlogo.png"
                alt="Logo"
                width={120}
                height={40}
              />
            </Link>

            <ul className="ux-nav">
              <li><Link href="/work">Work</Link></li>
              <li><Link href="/services">Services</Link></li>
              <li><Link href="/about">About</Link></li>
              <li><Link href="/process">Process</Link></li>

              {/* ⚠️ FIX */}
              <li className="ux-nav-cta">
                <Link href="/start_project">Start a Project</Link>
              </li>
            </ul>

            {/* TOGGLE BUTTON */}
            <div
              className="ux-menu"
              onClick={() => setOpen(!open)}
            >
              <Image
                className="icon open-icon"
                src="/assets/images/menutoggle.svg"
                alt="menu"
                width={30}
                height={30}
              />
            </div>

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

      {/* RIGHT PANEL */}
      <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>
    </>
  );
}