"use client";

import {useState} from "react";
import Link from "next/link";
import {Roboto} from "next/font/google";

const inter = Roboto({weight: '400', subsets: ["latin"]});

export default function Header() {
    const [isSidebarOpen, setIsSidebarOpen] = useState(false);

    const toggleSidebar = () => {
        setIsSidebarOpen(!isSidebarOpen);
    };

    return (
        <div className={inter.className}>
            <div className="p-4">
                <header
                    className={`p-4 bg-white/45 text-gray-700 w-full backdrop-blur-md shadow-xl rounded-2xl transition-transform ${isSidebarOpen ? 'transform -translate-y-full' : ''}`}>
                    <nav className="flex justify-between items-center mx-auto">
                        <h1 className="text-xl md:text-2xl">Dennis Konkol</h1>
                        <button
                            className="md:hidden text-gray-700 hover:text-gray-900"
                            onClick={toggleSidebar}
                        >
                            <svg
                                className="w-6 h-6"
                                fill="none"
                                stroke="currentColor"
                                viewBox="0 0 24 24"
                                xmlns="http://www.w3.org/2000/svg"
                            >
                                <path
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    strokeWidth="2"
                                    d="M4 6h16M4 12h16M4 18h16"
                                />
                            </svg>
                        </button>
                        <div className="hidden md:flex space-x-4 md:space-x-6">
                            <Link href="#projects">
                                <button
                                    className="relative px-4 py-2 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group">
                <span
                    className="inline-flex items-center group-hover:transform group-hover:-translate-x-2 transition-transform">
                  Projects
                  <svg
                      className="ml-1 w-6 h-6 opacity-0 group-hover:opacity-100 transition-opacity"
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                  >
                    <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M3 8.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C4.52 5 5.08 5 6.2 5h3.475c.489 0 .733 0 .963.055.204.05.4.13.579.24.201.123.374.296.72.642l.126.126c.346.346.519.519.72.642.18.11.375.19.579.24.23.055.474.055.963.055H17.8c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C21 8.52 21 9.08 21 10.2v5.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C19.48 19 18.92 19 17.8 19H6.2c-1.12 0-1.68 0-2.108-.218a2 2 0 0 1-.874-.874C3 17.48 3 16.92 3 15.8V8.2Z"
                    />
                  </svg>
                </span>
                                </button>
                            </Link>
                            <Link href="#contact">
                                <button
                                    className="relative px-4 py-2 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group">
                <span
                    className="inline-flex items-center group-hover:transform group-hover:-translate-x-2 transition-transform">
                  Contact
                  <svg
                      className="ml-1 w-6 h-6 opacity-0 group-hover:opacity-100 transition-opacity"
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                  >
                    <path
                        d="M22 12.27v4.37a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7.36a2 2 0 0 1 2-2h6.76"
                        style={{
                            strokeLinejoin: "bevel",
                            fillRule: "evenodd",
                            fill: "none",
                            strokeLinecap: "round",
                            strokeWidth: "1.5px",
                        }}
                    />
                    <path
                        d="M19.3 4.25a1 1 0 0 0-1.42 0l-6 6h0l-.1 3a.21.21 0 0 0 .23.22l3-.1h0l6-6A1 1 0 0 0 21 6Z"
                        style={{
                            strokeLinejoin: "round",
                            fill: "none",
                            strokeLinecap: "round",
                            strokeWidth: "1.5px",
                        }}
                    />
                  </svg>
                </span>
                                </button>
                            </Link>
                            <Link href="#about">
                                <button
                                    className="relative px-4 py-2 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group">
                <span
                    className="inline-flex items-center group-hover:transform group-hover:-translate-x-2 transition-transform">
                  About
                  <svg
                      className="ml-1 w-6 h-6 opacity-0 group-hover:opacity-100 transition-opacity"
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                  >
                    <path
                        fillRule="evenodd"
                        d="M10 7.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5Z"
                        clipRule="evenodd"
                    />
                    <path
                        fillRule="evenodd"
                        d="M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v4a2 2 0 0 1-1.052 1.761C18.908 16.611 15.884 19.5 12 19.5c-3.884 0-6.908-2.889-7.948-6.739A2 2 0 0 1 3 11V7Zm2-1h14a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-3.335a1 1 0 0 1-.284-.041l-2.529-.75a2.999 2.999 0 0 0-1.704 0l-2.529.75a1 1 0 0 1-.284.041H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1Zm.166 7C6.23 16.256 8.834 18.5 12 18.5c3.166 0 5.77-2.244 6.834-5.5h-3.169c-.192 0-.384-.028-.568-.082l-2.529-.75c-.37-.11-.765-.11-1.136 0l-2.529.75a2.002 2.002 0 0 1-.568.082H5.166Z"
                        clipRule="evenodd"
                    />
                    <path
                        fillRule="evenodd"
                        d="M10 14.5a.5.5 0 0 1 .5.5v.003l.003.01c.004.009.014.027.036.053a.86.86 0 0 0 .27.194c.28.14.7.24 1.191.24.492 0 .912-.1 1.19-.24a.86.86 0 0 0 .271-.194.214.214 0 0 0 .039-.063V15a.5.5 0 0 1 1 0c0 .568-.447.947-.862 1.154-.445.223-1.025.346-1.638.346s-1.193-.123-1.638-.346C9.947 15.947 9.5 15.568 9.5 15a.5.5 0 0 1 .5-.5Z"
                        clipRule="evenodd"
                    />
                  </svg>
                </span>
                                </button>
                            </Link>
                        </div>
                    </nav>
                </header>

                <div
                    className={`fixed inset-0 bg-black bg-opacity-50 transition-opacity ${isSidebarOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}
                    onClick={toggleSidebar}
                ></div>

                <div
                    className={`fixed top-0 right-0 h-full bg-white w-1/3 transform transition-transform flex flex-col ${isSidebarOpen ? 'translate-x-0' : 'translate-x-full'}`}
                >
                    <button
                        className="absolute top-4 right-4 text-gray-700 hover:text-gray-900"
                        onClick={toggleSidebar}
                    >
                        <svg
                            className="w-6 h-6"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <path
                                strokeLinecap="round"
                                strokeLinejoin="round"
                                strokeWidth="2"
                                d="M6 18L18 6M6 6l12 12"
                            />
                        </svg>
                    </button>
                    <div className="pt-8 space-y-4 flex-grow">
                        <Link href="#projects">
                            <button
                                className="w-full px-4 py-2 pt-8 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group">
                                Projects
                            </button>
                        </Link>
                        <Link href="#contact">
                            <button
                                className="w-full px-4 py-2 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group">
                                Contact
                            </button>
                        </Link>
                        <Link href="#about">
                            <button
                                className="w-full px-4 py-2 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group">
                                About
                            </button>
                        </Link>
                    </div>
                    <h6 className="text-center text-xs text-gray-500 p-4">© 2025 Dennis</h6>
                </div>
            </div>
        </div>
    );
}