"use client";

import { useState, useEffect } from "react";
import Link from "next/link";
import Image from "next/image";
import Sidebar from "@/components/Sidebar";

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

    useEffect(() => {
        const handleScroll = () => {
            setIsScrolled(window.scrollY > 50);
        };

        window.addEventListener("scroll", handleScroll);
        return () => window.removeEventListener("scroll", handleScroll);
    }, []);

    return (
        <>
            <header
                className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${isScrolled
                    ? "bg-white/80 dark:bg-black/80 backdrop-blur-md shadow-sm py-4"
                    : "bg-transparent py-6"
                    }`}
            >
                <div className="max-w-7xl mx-auto px-6 flex items-center justify-between">
                    <Link href="/" className="flex items-center gap-3 group">
                        <div className="relative w-10 h-10 overflow-hidden rounded-full bg-white/10 backdrop-blur-sm border border-white/20 shadow-sm group-hover:scale-105 transition-transform">
                            <Image
                                src="/logo.png"
                                alt="Sky and Soil Logo"
                                fill
                                className="object-contain p-1"
                            />
                        </div>
                        <span className={`text-2xl font-semibold tracking-tight group-hover:text-primary transition-colors ${isScrolled ? "text-foreground" : "text-white"
                            }`}>
                            Sky and Soil
                        </span>
                    </Link>

                    <div className="flex items-center gap-4">
                        <Link href="/contact">
                            <button className="hidden md:block px-5 py-2 text-sm font-medium text-white bg-primary rounded-full hover:bg-blue-600 transition-colors shadow-sm hover:shadow-md active:scale-95 transform duration-200">
                                Book a Visit
                            </button>
                        </Link>

                        <button
                            className={`p-2 -mr-2 transition-colors ${isScrolled ? "text-foreground" : "text-white"
                                }`}
                            onClick={() => setIsSidebarOpen(true)}
                        >
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
                                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
                            </svg>
                        </button>
                    </div>
                </div>
            </header>

            <Sidebar isOpen={isSidebarOpen} onClose={() => setIsSidebarOpen(false)} />
        </>
    );
}