AWSCLOUD/components/Navbar.tsx

'use client';

import { useState } from 'react';

interface NavbarProps {
    currentLang: string;
    currentContent: any;
    handleLanguageChange: (lang: string) => void;
}

export default function Navbar({ currentLang, currentContent, handleLanguageChange }: NavbarProps) {
    const [isMenuOpen, setIsMenuOpen] = useState(false);

    return (
        <>
            {/* Top Bar */}
            <div className="bg-gray-800 border-b border-gray-700 py-2">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="flex justify-between items-center">
                        <div className="flex items-center space-x-4">
                            <span className="text-sm text-gray-300">Services</span>
                            <span className="text-gray-500">|</span>
                            <span className="text-sm text-gray-300">AWS Services / Keywords</span>
                        </div>
                        <div className="flex items-center space-x-4">
                            <div className="flex items-center space-x-2">
                                <input
                                    type="text"
                                    placeholder="Search"
                                    className="bg-gray-700 text-white border border-gray-600 rounded px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                                />
                                <button className="bg-blue-600 hover:bg-blue-700 px-3 py-1 rounded text-sm">
                                    Search
                                </button>
                            </div>
                            <div className="flex items-center space-x-2">
                                <a href="#" className="text-gray-400 hover:text-white">
                                    <svg
                                        className="w-4 h-4"
                                        fill="currentColor"
                                        viewBox="0 0 24 24"
                                    >
                                        <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
                                    </svg>
                                </a>
                                <span className="text-gray-400">0</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {/* Navigation */}
            <nav className="bg-white text-gray-900 border-b border-gray-200">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="flex justify-between items-center h-16">
                        <div className="flex items-center">
                            {/* Logo */}
                            <div className="flex-shrink-0">
                                <div className="w-10 h-10 bg-orange-500 rounded flex items-center justify-center mr-3">
                                    <svg
                                        className="w-6 h-6 text-white"
                                        fill="currentColor"
                                        viewBox="0 0 24 24"
                                    >
                                        <path d="M18.5 2h-13C4.67 2 4 2.67 4 3.5v17c0 .83.67 1.5 1.5 1.5h13c.83 0 1.5-.67 1.5-1.5v-17c0-.83-.67-1.5-1.5-1.5zM18 20H6V4h12v16zM8 6h8v2H8V6zm0 3h8v2H8V9zm0 3h5v2H8v-2z" />
                                    </svg>
                                </div>
                            </div>
                            <div className="text-xl font-bold text-gray-800">
                                <div className="flex items-center">
                                    <span className="text-orange-500">AWS</span>
                                    <span className="ml-2">CLOUD</span>
                                </div>
                                <div className="text-sm text-gray-600">SERVICES PARTNER</div>
                            </div>

                            {/* Desktop Navigation */}
                            <div className="hidden md:block">
                                <div className="ml-10 flex items-baseline space-x-8">
                                    <a
                                        href={`/${currentLang}`}
                                        className="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium"
                                    >
                                        {currentContent.nav.applications}
                                    </a>
                                    <a
                                        href={`/${currentLang}/products`}
                                        className="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium"
                                    >
                                        {currentContent.nav.product}
                                    </a>
                                    <a
                                        href={`/${currentLang}/solutions`}
                                        className="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium"
                                    >
                                        {currentContent.nav.industries}
                                    </a>
                                    <a
                                        href={`/${currentLang}/contact`}
                                        className="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium"
                                    >
                                        {currentContent.nav.sds}
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div className="flex items-center space-x-4">
                            {/* Language Selector & CTA */}
                            <div className="hidden md:flex items-center space-x-4">
                                <button className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm font-medium transition-colors">
                                    {currentContent.hero.cta}
                                </button>
                                <div className="flex items-center space-x-2">
                                    <select
                                        value={currentLang}
                                        onChange={(e) => handleLanguageChange(e.target.value)}
                                        className="bg-white text-gray-700 border border-gray-300 rounded px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                                    >
                                        <option value="en">EN</option>
                                        <option value="zh-CN">中文</option>
                                        <option value="zh-TW">繁體</option>
                                        <option value="ko">한국어</option>
                                        <option value="ja">日本語</option>
                                    </select>
                                </div>
                            </div>

                            {/* Mobile menu button */}
                            <div className="md:hidden">
                                <button
                                    onClick={() => setIsMenuOpen(!isMenuOpen)}
                                    className="text-gray-700 hover:text-blue-600 focus:outline-none focus:text-blue-600"
                                >
                                    <svg
                                        className="h-6 w-6"
                                        fill="none"
                                        viewBox="0 0 24 24"
                                        stroke="currentColor"
                                    >
                                        <path
                                            strokeLinecap="round"
                                            strokeLinejoin="round"
                                            strokeWidth={2}
                                            d="M4 6h16M4 12h16M4 18h16"
                                        />
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                {/* Mobile Navigation */}
                {isMenuOpen && (
                    <div className="md:hidden">
                        <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white border-t border-gray-200">
                            <a
                                href={`/${currentLang}`}
                                className="text-gray-700 hover:text-blue-600 block px-3 py-2 text-base font-medium"
                            >
                                {currentContent.nav.applications}
                            </a>
                            <a
                                href={`/${currentLang}/products`}
                                className="text-gray-700 hover:text-blue-600 block px-3 py-2 text-base font-medium"
                            >
                                {currentContent.nav.product}
                            </a>
                            <a
                                href={`/${currentLang}/solutions`}
                                className="text-gray-700 hover:text-blue-600 block px-3 py-2 text-base font-medium"
                            >
                                {currentContent.nav.industries}
                            </a>
                            <a
                                href={`/${currentLang}/contact`}
                                className="text-gray-700 hover:text-blue-600 block px-3 py-2 text-base font-medium"
                            >
                                {currentContent.nav.sds}
                            </a>
                        </div>
                    </div>
                )}
            </nav>
        </>
    );
}