"use client";

import React, { useState } from "react";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Building2, Menu, X } from "lucide-react";

export function Header() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  return (
    <header className="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-navy-100">
      <nav className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="flex h-16 items-center justify-between">
          {/* Logo */}
          <Link href="/" className="flex items-center gap-2">
            <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-navy-800">
              <Building2 className="h-5 w-5 text-gold-400" />
            </div>
            <span className="text-xl font-bold text-navy-900">
              CRE<span className="text-gold-500">dispo</span>
            </span>
          </Link>

          {/* Desktop nav */}
          <div className="hidden md:flex items-center gap-8">
            <Link href="#features" className="text-sm font-medium text-navy-600 hover:text-navy-900 transition-colors">
              Features
            </Link>
            <Link href="#pricing" className="text-sm font-medium text-navy-600 hover:text-navy-900 transition-colors">
              Pricing
            </Link>
            <Link href="#how-it-works" className="text-sm font-medium text-navy-600 hover:text-navy-900 transition-colors">
              How It Works
            </Link>
          </div>

          {/* Desktop CTA */}
          <div className="hidden md:flex items-center gap-3">
            <Link href="/login">
              <Button variant="ghost" size="sm">
                Log In
              </Button>
            </Link>
            <Link href="/signup">
              <Button variant="gold" size="sm">
                Start Free Trial
              </Button>
            </Link>
          </div>

          {/* Mobile menu button — 44px touch target */}
          <button
            className="md:hidden flex items-center justify-center h-11 w-11 rounded-md text-navy-600 hover:bg-navy-100"
            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
          >
            {mobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
          </button>
        </div>

        {/* Mobile menu */}
        {mobileMenuOpen && (
          <div className="md:hidden pb-4 pt-2 border-t border-navy-100">
            <div className="flex flex-col gap-3">
              <Link
                href="#features"
                className="text-sm font-medium text-navy-600 hover:text-navy-900 px-3 py-2.5 min-h-[44px] flex items-center"
                onClick={() => setMobileMenuOpen(false)}
              >
                Features
              </Link>
              <Link
                href="#pricing"
                className="text-sm font-medium text-navy-600 hover:text-navy-900 px-3 py-2.5 min-h-[44px] flex items-center"
                onClick={() => setMobileMenuOpen(false)}
              >
                Pricing
              </Link>
              <Link
                href="#how-it-works"
                className="text-sm font-medium text-navy-600 hover:text-navy-900 px-3 py-2.5 min-h-[44px] flex items-center"
                onClick={() => setMobileMenuOpen(false)}
              >
                How It Works
              </Link>
              <div className="flex gap-2 pt-2">
                <Link href="/login" className="flex-1">
                  <Button variant="outline" className="w-full" size="sm">
                    Log In
                  </Button>
                </Link>
                <Link href="/signup" className="flex-1">
                  <Button variant="gold" className="w-full" size="sm">
                    Start Free Trial
                  </Button>
                </Link>
              </div>
            </div>
          </div>
        )}
      </nav>
    </header>
  );
}
