Website-Generation-Request (1)/src/components/navigation.tsx

"use client";

import React, { useState } from "react";
import Link from "next/link";
import { Menu, X, ChevronDown } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

export const Navigation = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen);
  };

  const productSeries = [
    { name: "All Products", href: "/products" },
    { name: "Ceramic Series", href: "/products/ceramic" },
    { name: "Carbon Series", href: "/products/carbon" },
    { name: "Premium Series", href: "/products/premium" },
    { name: "Professional Series", href: "/products/professional" },
  ];

  return (
    <nav className="bg-black border-b border-gray-800 sticky top-0 z-50 backdrop-blur-md">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16">
          {/* Logo/Brand */}
          <div className="flex-shrink-0">
            <Link href="/" className="flex items-center space-x-2">
              <span style={{width: '160px', height:'48px', display: 'inline-block'}}>
                <img src="/logo.svg" alt="Ceramic Shield Logo" style={{width:'160px', height:'48px', objectFit:'contain', display:'block'}} />
              </span>
            </Link>
          </div>

          {/* Desktop Navigation */}
          <div className="hidden md:block">
            <div className="ml-10 flex items-baseline space-x-8">
              <Link
                href="/"
                className="text-white hover:text-red-600 px-3 py-2 text-sm font-medium transition-colors duration-200"
              >
                Home
              </Link>

              {/* Products Dropdown */}
              <DropdownMenu>
                <DropdownMenuTrigger className="text-white hover:text-red-600 px-3 py-2 text-sm font-medium transition-colors duration-200 flex items-center space-x-1">
                  <span>Products</span>
                  <ChevronDown className="w-4 h-4" />
                </DropdownMenuTrigger>
                <DropdownMenuContent className="bg-gray-900 border-gray-700 mt-2 min-w-[200px]">
                  {productSeries.map((series) => (
                    <DropdownMenuItem key={series.href} className="focus:bg-gray-800">
                      <Link
                        href={series.href}
                        className="w-full text-white hover:text-red-600 transition-colors duration-200"
                      >
                        {series.name}
                      </Link>
                    </DropdownMenuItem>
                  ))}
                </DropdownMenuContent>
              </DropdownMenu>

              <Link
                href="/about"
                className="text-white hover:text-red-600 px-3 py-2 text-sm font-medium transition-colors duration-200"
              >
                About
              </Link>

              <Link
                href="/contact"
                className="text-white hover:text-red-600 px-3 py-2 text-sm font-medium transition-colors duration-200"
              >
                Contact
              </Link>
            </div>
          </div>

          {/* CTA Button */}
          <div className="hidden md:block">
            <Button
              variant="default"
              className="bg-red-600 hover:bg-red-700 text-white px-6 py-2 transition-colors duration-200"
              asChild
            >
              <Link href="/contact">Get Quote</Link>
            </Button>
          </div>

          {/* Mobile menu button */}
          <div className="md:hidden">
            <Button
              variant="ghost"
              size="icon"
              onClick={toggleMenu}
              className="text-white hover:text-red-600 hover:bg-gray-800"
            >
              {isMenuOpen ? (
                <X className="h-6 w-6" />
              ) : (
                <Menu className="h-6 w-6" />
              )}
            </Button>
          </div>
        </div>

        {/* Mobile Navigation Menu */}
        {isMenuOpen && (
          <div className="md:hidden border-t border-gray-800">
            <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
              <Link
                href="/"
                className="text-white hover:text-red-600 hover:bg-gray-800 block px-3 py-2 text-base font-medium transition-colors duration-200"
                onClick={() => setIsMenuOpen(false)}
              >
                Home
              </Link>

              {/* Mobile Products Section */}
              <div className="space-y-1">
                <div className="text-white px-3 py-2 text-base font-medium border-b border-gray-700">
                  Products
                </div>
                {productSeries.map((series) => (
                  <Link
                    key={series.href}
                    href={series.href}
                    className="text-gray-300 hover:text-red-600 hover:bg-gray-800 block px-6 py-2 text-sm font-medium transition-colors duration-200"
                    onClick={() => setIsMenuOpen(false)}
                  >
                    {series.name}
                  </Link>
                ))}
              </div>

              <Link
                href="/about"
                className="text-white hover:text-red-600 hover:bg-gray-800 block px-3 py-2 text-base font-medium transition-colors duration-200"
                onClick={() => setIsMenuOpen(false)}
              >
                About
              </Link>

              <Link
                href="/contact"
                className="text-white hover:text-red-600 hover:bg-gray-800 block px-3 py-2 text-base font-medium transition-colors duration-200"
                onClick={() => setIsMenuOpen(false)}
              >
                Contact
              </Link>

              <div className="pt-4 pb-2">
                <Button
                  variant="default"
                  className="bg-red-600 hover:bg-red-700 text-white w-full transition-colors duration-200"
                  asChild
                >
                  <Link href="/contact" onClick={() => setIsMenuOpen(false)}>
                    Get Quote
                  </Link>
                </Button>
              </div>
            </div>
          </div>
        )}
      </div>
    </nav>
  );
};