"use client";

import { useState } from "react";
import Image from "next/image";
import Link from "next/link";

const MENU_ITEMS = [
    { name: "About Us", href: "/about-us", subItems: ["Our Tribe"] },
    { name: "Assessments", href: "/assessments" },
    {
        name: "Offerings",
        href: "/offerings",
        subItems: [
            "Structured Leadership Development Journey",
            "Team Engagement Through Experiential Learning",
            "Communication Coaching",
            "Masterclass",
        ],
    },
    { name: "Case Studies", href: "/case-studies" },
    {
        name: "Clients",
        href: "/clients",
        subItems: ["Testimonials", "Videos"],
    },
    { name: "Blogs", href: "/blogs" },
    {
        name: "Contact Us",
        href: "/contact",
        subItems: ["My Account"],
    },
];

const SEARCH_LOGO_SUBITEMS = ["About LDGM", "Leadership Program", "LDGM Virtual"];

const getSubItemHref = (subItemName: string) => {
    const routes: { [key: string]: string } = {
        "Our Tribe": "/our-tribe",
        "Structured Leadership Development Journey": "/offerings/structured-leadership",
        "Team Engagement Through Experiential Learning": "/offerings/team-engagement",
        "Communication Coaching": "/offerings/communication-coaching",
        Masterclass: "/offerings/masterclass",
        Testimonials: "/clients/testimonials",
        Videos: "/clients/videos",
        "My Account": "/my-account",
        "About LDGM": "/about-ldgm",
        "Leadership Program": "/ldgm-leadership-program",
        "LDGM Virtual": "/ldgm-virtual",
    };
    return routes[subItemName] || "#";
};

export default function Header() {
    const [activeItem, setActiveItem] = useState<string | null>(null);
    const [isSearchHovered, setIsSearchHovered] = useState(false);
    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
    const [mobileExpandedItem, setMobileExpandedItem] = useState<string | null>(null);
    return (
        <>
            <header className="nyra-header">
                <div className="nyra-wrapper">

                    {/* COL 1 — LEFT LOGO */}
                    <div className="nyra-logo-col">
                        <Link href="/" className="nyra-logo-link">
                            <Image
                                src="/Nyra-logo-black.png"
                                alt="Nyra Leadership Consulting"
                                width={180}
                                height={50}
                                priority
                                className="nyra-logo"
                                style={{ background: "transparent" }}
                            />
                        </Link>
                    </div>

                    {/* COL 2 — NAV (centred) */}
                    <nav className="nyra-nav">
                        <ul className="nyra-nav-list">
                            {MENU_ITEMS.map((item) => {
                                const isActive = activeItem === item.name;
                                return (
                                    <li
                                        key={item.name}
                                        className="nyra-nav-item"
                                        onMouseEnter={() => setActiveItem(item.name)}
                                        onMouseLeave={() => setActiveItem(null)}
                                    >
                                        <Link
                                            href={item.href}
                                            className="nyra-nav-link"
                                            style={{ opacity: activeItem && !isActive ? 0.4 : 1 }}
                                        >
                                            {item.name}
                                        </Link>
                                        {item.subItems && isActive && (
                                            <div className="nyra-dropdown">
                                                {item.subItems.map((sub) => (
                                                    <Link key={sub} href={getSubItemHref(sub)} className="nyra-dropdown-link">
                                                        {sub}
                                                    </Link>
                                                ))}
                                            </div>
                                        )}
                                    </li>
                                );
                            })}
                        </ul>
                    </nav>

                    {/* COL 3 — RIGHT LOGO */}
                    <div
                        className="nyra-right-logo-col"
                        onMouseEnter={() => setIsSearchHovered(true)}
                        onMouseLeave={() => setIsSearchHovered(false)}
                    >
                        <Link href="/about-ldgm" className="nyra-logo-link">
                            <Image
                                src="/search-for-lost.png"
                                alt="Lost Dutchman's Gold Mine"
                                width={150}
                                height={75}
                                className="nyra-right-logo"
                                style={{ background: "transparent" }}
                            />
                        </Link>
                        {isSearchHovered && (
                            <div className="nyra-dropdown nyra-dropdown-right">
                                {SEARCH_LOGO_SUBITEMS.map((sub) => (
                                    <Link key={sub} href={getSubItemHref(sub)} className="nyra-dropdown-link">
                                        {sub}
                                    </Link>
                                ))}
                            </div>
                        )}
                    </div>

                    {/* HAMBURGER — mobile only */}
                    <button
                        className="nyra-hamburger"
                        onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
                        aria-label="Toggle menu"
                    >
                        <span className={isMobileMenuOpen ? "open" : ""} />
                        <span className={isMobileMenuOpen ? "open" : ""} />
                        <span className={isMobileMenuOpen ? "open" : ""} />
                    </button>

                </div>
            </header>

            {/* MOBILE BACKDROP */}
            {isMobileMenuOpen && (
                <div className="mobile-backdrop" onClick={() => setIsMobileMenuOpen(false)} />
            )}

            {/* MOBILE MENU */}
            <div className={`mobile-menu ${isMobileMenuOpen ? "open" : ""}`}>
                <div className="mobile-header">
                    <Image src="/Nyra-logo-black.png" alt="Nyra" width={120} height={40} style={{ width: "100px", height: "auto", flexShrink: 1, background: "transparent" }} />
                    <button onClick={() => setIsMobileMenuOpen(false)}>×</button>
                </div>
                <div className="mobile-content">
                    <div className="mobile-search">
                        <Link href="/about-ldgm" onClick={() => setIsMobileMenuOpen(false)} className="nyra-logo-link">
                            <Image src="/search-for-lost.png" alt="LDGM" width={160} height={80} style={{ width: "120px", height: "auto", margin: "0 auto 15px", background: "transparent" }} />
                        </Link>
                        {SEARCH_LOGO_SUBITEMS.map((sub) => (
                            <Link key={sub} href={getSubItemHref(sub)} onClick={() => setIsMobileMenuOpen(false)}>
                                {sub}
                            </Link>
                        ))}
                    </div>
                    <ul className="mobile-nav">
                        {MENU_ITEMS.map((item) => (
                            <li key={item.name}>
                                <div className="mobile-item">
                                    <Link href={item.href} onClick={() => !item.subItems && setIsMobileMenuOpen(false)}>
                                        {item.name}
                                    </Link>
                                    {item.subItems && (
                                        <button
                                            onClick={() =>
                                                setMobileExpandedItem(mobileExpandedItem === item.name ? null : item.name)
                                            }
                                            className={mobileExpandedItem === item.name ? "active" : ""}
                                        >
                                            ›
                                        </button>
                                    )}
                                </div>
                                {item.subItems && mobileExpandedItem === item.name && (
                                    <div className="mobile-submenu">
                                        {item.subItems.map((sub) => (
                                            <Link key={sub} href={getSubItemHref(sub)} onClick={() => setIsMobileMenuOpen(false)}>
                                                {sub}
                                            </Link>
                                        ))}
                                    </div>
                                )}
                            </li>
                        ))}
                    </ul>
                </div>
            </div>

            <style jsx global>{`
                *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
                html, body { overflow-x: hidden; width: 100%; }

                /* Full-bleed header */
                .nyra-header {
                    position: fixed;
                    top: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 100vw;
                    background: #ffffff;
                    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
                    z-index: 1000;
                }

                /* 3-column grid: logo | nav | right-logo */
                .nyra-wrapper {
                    max-width: 1400px;
                    margin: 0 auto;
                    padding: 0 2%;
                    height: 105px;
                    display: grid;
                    grid-template-columns: auto 1fr auto;
                    align-items: center;
                    gap: 16px;
                    width: 100%;
                }

                /* COL 1 — left logo */
                .nyra-logo-col { flex-shrink: 0; }
                .nyra-logo { width: 180px; height: auto; display: block; }

                /* Remove default blue outline / box from logo links */
                .nyra-logo-link {
                    display: inline-block;
                    line-height: 0;
                    background: transparent;
                    border: none;
                    outline: none;
                    text-decoration: none;
                    -webkit-tap-highlight-color: transparent;
                }

                /* COL 2 — nav centred in its column */
                .nyra-nav {
                    display: flex;
                    justify-content: center;
                    min-width: 0;
                }
                .nyra-nav-list {
                    display: flex;
                    list-style: none;
                    align-items: center;
                    flex-wrap: nowrap;
                    gap: 0;
                }
                .nyra-nav-item { position: relative; }
                .nyra-nav-link {
                    display: block;
                    padding: 8px 18px;
                    color: #333;
                    text-decoration: none;
                    font-size: 16px;
                    font-weight: normal;
                    white-space: nowrap;
                    transition: color 0.2s, opacity 0.2s;
                    font-family: Helvetica, Arial, sans-serif;
                }
                .nyra-nav-link:hover { color: #000; }

                /* COL 3 — right logo */
                .nyra-right-logo-col {
                    position: relative;
                    flex-shrink: 0;
                    width: 150px;
                    cursor: pointer;
                    background: transparent;
                }
                .nyra-right-logo { width: 100%; height: auto; display: block; }

                /* Hamburger — hidden on desktop */
                .nyra-hamburger { display: none; }

                /* Dropdowns */
                .nyra-dropdown {
                    position: absolute;
                    top: 100%;
                    left: 0;
                    margin-top: 2px;
                    background: #fff;
                    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
                    border-radius: 4px;
                    min-width: fit-content;
                    width: max-content;
                    padding: 8px 0;
                    z-index: 1001;
                }
                .nyra-dropdown-right { left: auto; right: 0; min-width: 200px; }
                .nyra-dropdown-link {
                    display: block;
                    padding: 8px 20px;
                    color: #666;
                    text-decoration: none;
                    font-size: 14px;
                    white-space: nowrap;
                    transition: all 0.15s;
                    font-family: Helvetica, Arial, sans-serif;
                }
                .nyra-dropdown-link:hover { color: #000; background: #f5f5f5; }

                /* Mobile hidden by default */
                .mobile-backdrop, .mobile-menu { display: none; }

                /* ── RESPONSIVE ── */

                @media (max-width: 1100px) {
                    .nyra-wrapper { height: 90px; gap: 12px; }
                    .nyra-logo { width: 160px; }
                }

                /* Switch to hamburger at 900px */
                @media (max-width: 900px) {
                    .nyra-wrapper {
                        grid-template-columns: auto 1fr auto;
                        height: 75px;
                        padding: 0 20px;
                        gap: 0;
                    }
                    /* Hide nav col and right logo col */
                    .nyra-nav { display: none; }
                    .nyra-right-logo-col { display: none; }

                    /* Show hamburger in col 3 */
                    .nyra-hamburger {
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;
                        width: 30px;
                        height: 24px;
                        background: transparent;
                        border: none;
                        cursor: pointer;
                        padding: 0;
                        justify-self: end;
                    }
                    .nyra-hamburger span {
                        width: 100%;
                        height: 3px;
                        background: #333;
                        border-radius: 2px;
                        transition: all 0.3s ease;
                        display: block;
                    }
                    .nyra-hamburger span.open:nth-child(1) { transform: translateY(10.5px) rotate(45deg); }
                    .nyra-hamburger span.open:nth-child(2) { opacity: 0; }
                    .nyra-hamburger span.open:nth-child(3) { transform: translateY(-10.5px) rotate(-45deg); }

                    .nyra-logo { width: 140px; }

                    /* Mobile backdrop & menu */
                    .mobile-backdrop {
                        display: block;
                        position: fixed;
                        inset: 0;
                        background: rgba(0,0,0,0.5);
                        z-index: 998;
                    }
                    .mobile-menu {
                        display: block;
                        position: fixed;
                        top: 0; right: 0; bottom: 0;
                        width: 85%;
                        max-width: 400px;
                        background: #ffffff;
                        z-index: 999;
                        overflow-y: auto;
                        transform: translateX(100%);
                        transition: transform 0.3s ease;
                        box-shadow: -2px 0 10px rgba(0,0,0,0.1);
                    }
                    .mobile-menu.open { transform: translateX(0); }

                    .mobile-header {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding: 12px 16px;
                        border-bottom: 1px solid #e5e5e5;
                        background: #f8f8f8;
                        overflow: hidden;
                        gap: 8px;
                    }
                    .mobile-header img {
                        max-width: 100px !important;
                        width: 100px !important;
                        height: auto !important;
                        flex-shrink: 1 !important;
                        object-fit: contain !important;
                        display: block !important;
                        background: transparent !important;
                    }
                    .mobile-header button {
                        background: none; border: none;
                        font-size: 28px; cursor: pointer;
                        color: #333; padding: 5px;
                    }
                    .mobile-content { padding: 0; }
                    .mobile-search {
                        padding: 20px 16px;
                        background: #fafafa;
                        border-bottom: 2px solid #f0f0f0;
                        text-align: center;
                        overflow: hidden;
                    }
                    .mobile-search img {
                        margin: 0 auto 15px !important;
                        display: block !important;
                        max-width: 120px !important;
                        width: 120px !important;
                        height: auto !important;
                        object-fit: contain !important;
                        background: transparent !important;
                    }
                    .mobile-search a {
                        display: block; padding: 12px 15px; margin: 5px 0;
                        background: #fff; border: 1px solid #e5e5e5;
                        border-radius: 6px; color: #555; text-decoration: none;
                        font-size: 14px; font-family: Helvetica, Arial, sans-serif;
                    }
                    .mobile-nav { list-style: none; padding: 10px 0; margin: 0; }
                    .mobile-nav > li { border-bottom: 1px solid #f0f0f0; }
                    .mobile-item {
                        display: flex; justify-content: space-between;
                        align-items: center; padding: 0 20px;
                    }
                    .mobile-item > a {
                        flex: 1; padding: 18px 0; color: #222;
                        text-decoration: none; font-size: 17px;
                        font-weight: 500; font-family: Helvetica, Arial, sans-serif;
                    }
                    .mobile-item button {
                        width: 36px; height: 36px; border-radius: 50%;
                        background: transparent; border: none;
                        font-size: 20px; cursor: pointer; color: #666; transition: all 0.2s;
                    }
                    .mobile-item button.active { background: #f0f0f0; transform: rotate(90deg); }
                    .mobile-submenu {
                        background: #f8f8f8;
                        padding: 10px 20px 15px 35px;
                        border-top: 1px solid #e5e5e5;
                    }
                    .mobile-submenu a {
                        display: block; padding: 12px 0; color: #555;
                        text-decoration: none; font-size: 15px;
                        font-family: Helvetica, Arial, sans-serif;
                    }
                }

                @media (max-width: 480px) {
                    .nyra-wrapper { height: 65px; }
                    .nyra-logo { width: 120px; }
                }
            `}</style>
        </>
    );
}