"use client";

import { useState } from "react";
import Link from "next/link";
import ThemeToggle from "@/components/ThemeToggle";

const navItems = [
    { href: "#features", label: "Recursos" },
    { href: "#pricing", label: "Preços" },
    { href: "#contact", label: "Contato" },
];

export default function Header() {
    const [isMobileOpen, setIsMobileOpen] = useState(false);

    const toggleMobileMenu = () => setIsMobileOpen((prev) => !prev);
    const closeMobileMenu = () => setIsMobileOpen(false);

    return (
        <header className="fixed inset-x-0 top-0 z-50 border-b border-zinc-200/70 dark:border-zinc-800/70 bg-white/90 dark:bg-zinc-950/80 backdrop-blur-xl shadow-sm transition-colors">
            <div className="max-w-7xl mx-auto px-6 lg:px-8">
                <div className="flex items-center justify-between py-4">
                    <Link href="#" className="flex items-center gap-2" onClick={closeMobileMenu}>
                        <div className="w-8 h-8 bg-brand rounded-lg flex items-center justify-center">
                            <span className="text-white font-bold text-sm">A</span>
                        </div>
                        <span className="font-heading font-bold text-xl text-zinc-900 dark:text-white transition-colors">aggios</span>
                    </Link>

                    <nav className="hidden md:flex items-center gap-6 lg:gap-8 text-sm font-medium relative">
                        {navItems.map((item) => (
                            <a key={item.href} href={item.href} className="text-zinc-600 dark:text-zinc-400 hover:text-brand-gradient transition-all">
                                {item.label}
                            </a>
                        ))}
                        <div className="relative group">
                            <button className="flex items-center gap-1 text-zinc-600 dark:text-zinc-400 hover:text-brand-gradient transition-all">
                                Soluções
                                <i className="ri-arrow-down-s-line text-sm group-hover:rotate-180 transition-transform duration-300" />
                            </button>

                            {/* Full-width mega menu */}
                            <div className="invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-all duration-300 ease-out fixed left-0 right-0 top-full mt-0 border-t border-zinc-200/70 dark:border-zinc-800/70 bg-white/95 dark:bg-zinc-950/95 backdrop-blur-2xl shadow-2xl">
                                <div className="max-w-7xl mx-auto px-6 lg:px-8 py-12">
                                    <div className="grid grid-cols-2 lg:grid-cols-3 gap-6 animate-fadeInUp">
                                        {[
                                            { href: '/solucoes/crm', icon: 'ri-customer-service-2-line', title: 'CRM Inteligente', desc: 'Funis, negociações e visão 360° de clientes.' },
                                            { href: '/solucoes/erp', icon: 'ri-database-2-line', title: 'ERP Financeiro', desc: 'Fluxo de caixa, bancos e conciliação automática.' },
                                            { href: '/solucoes/projetos', icon: 'ri-trello-line', title: 'Gestão de Projetos', desc: 'Boards, sprints e status em tempo real.' },
                                            { href: '/solucoes/pagamentos', icon: 'ri-secure-payment-line', title: 'Gestão de Pagamentos', desc: 'Cobranças, split e gateways líderes.' },
                                            { href: '/solucoes/helpdesk', icon: 'ri-customer-service-line', title: 'Helpdesk 360°', desc: 'Tickets, SLAs e base de conhecimento.' },
                                            { href: '/solucoes/integracoes', icon: 'ri-share-forward-line', title: 'Integrações API', desc: 'Conexões com BI, contabilidade e apps internos.' },
                                            { href: '/solucoes/redes-sociais', icon: 'ri-share-line', title: 'Gestão de Redes Sociais', desc: 'Agende posts e gerencie múltiplas contas. 🚀 Em Breve', badge: true },
                                        ].map((item, index) => (
                                            <a
                                                key={item.href}
                                                href={item.href}
                                                className="group/item flex items-start gap-4 rounded-2xl p-5 text-left text-zinc-700 dark:text-zinc-200 hover:bg-zinc-100/70 dark:hover:bg-zinc-800/70 transition-all duration-200 hover:scale-[1.02] hover:shadow-lg"
                                                style={{ animationDelay: `${index * 50}ms` }}
                                            >
                                                <span className="mt-1 flex h-12 w-12 items-center justify-center rounded-2xl bg-brand text-white text-xl group-hover/item:scale-110 group-hover/item:rotate-3 transition-transform duration-200">
                                                    <i className={item.icon}></i>
                                                </span>
                                                <span className="flex-1">
                                                    <span className="block font-semibold text-lg text-zinc-900 dark:text-white mb-1 group-hover/item:text-brand-gradient transition-colors">{item.title}</span>
                                                    <span className="block text-sm text-zinc-500 dark:text-zinc-400 leading-relaxed">{item.desc}</span>
                                                </span>
                                            </a>
                                        ))}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </nav>

                    <div className="hidden md:flex items-center gap-4">
                        <ThemeToggle />
                        <Link href="http://dash.localhost/login" className="text-zinc-600 dark:text-zinc-400 hover:text-brand-gradient transition-all font-medium">
                            Entrar
                        </Link>
                        <Link href="http://dash.localhost/cadastro" className="px-6 py-2 bg-brand text-white font-semibold rounded-lg hover:opacity-90 transition-opacity shadow-lg">
                            Começar Grátis
                        </Link>
                    </div>

                    <div className="md:hidden flex items-center gap-4">
                        <ThemeToggle />
                        <button
                            onClick={toggleMobileMenu}
                            aria-label="Abrir menu"
                            className="w-11 h-11 rounded-2xl border border-zinc-200 dark:border-zinc-800 flex items-center justify-center text-2xl text-zinc-700 dark:text-zinc-200"
                        >
                            <i className={isMobileOpen ? "ri-close-line" : "ri-menu-line"}></i>
                        </button>
                    </div>
                </div>
            </div>

            <div
                className={`md:hidden fixed inset-x-4 top-20 rounded-3xl border border-zinc-200 dark:border-zinc-800 bg-white/95 dark:bg-zinc-950/95 backdrop-blur-2xl shadow-2xl p-6 transition-all duration-200 ${isMobileOpen ? "opacity-100 visible translate-y-0" : "opacity-0 invisible -translate-y-2"
                    }`}
            >
                <div className="space-y-4">
                    {navItems.map((item) => (
                        <a
                            key={item.href}
                            href={item.href}
                            onClick={closeMobileMenu}
                            className="flex items-center justify-between text-lg font-semibold text-zinc-900 dark:text-white"
                        >
                            {item.label}
                            <i className="ri-arrow-right-up-line text-xl text-zinc-400"></i>
                        </a>
                    ))}
                    <div className="pt-4 border-t border-zinc-200 dark:border-zinc-800">
                        <p className="text-sm uppercase tracking-[0.3em] text-zinc-500 mb-4">Soluções</p>
                        <div className="space-y-3">
                            {[
                                { href: '/solucoes/crm', title: 'CRM Inteligente' },
                                { href: '/solucoes/erp', title: 'ERP Financeiro' },
                                { href: '/solucoes/projetos', title: 'Gestão de Projetos' },
                                { href: '/solucoes/pagamentos', title: 'Gestão de Pagamentos' },
                                { href: '/solucoes/helpdesk', title: 'Helpdesk 360°' },
                                { href: '/solucoes/integracoes', title: 'Integrações API' },
                                { href: '/solucoes/redes-sociais', title: 'Gestão de Redes Sociais 🚀' },
                            ].map((item) => (
                                <a
                                    key={item.href}
                                    href={item.href}
                                    onClick={closeMobileMenu}
                                    className="flex items-center justify-between rounded-2xl border border-zinc-200 dark:border-zinc-800 px-4 py-3 text-zinc-700 dark:text-zinc-300"
                                >
                                    {item.title}
                                    <i className="ri-arrow-right-line"></i>
                                </a>
                            ))}
                        </div>
                    </div>
                    <div className="pt-4 space-y-3">
                        <Link
                            href="http://dash.localhost/login"
                            onClick={closeMobileMenu}
                            className="w-full px-5 py-3 rounded-2xl border border-zinc-200 dark:border-zinc-800 text-center font-semibold text-zinc-700 dark:text-zinc-200"
                        >
                            Entrar
                        </Link>
                        <Link
                            href="http://dash.localhost/cadastro"
                            onClick={closeMobileMenu}
                            className="w-full px-5 py-3 rounded-2xl bg-brand text-white font-semibold shadow-lg"
                        >
                            Começar Grátis
                        </Link>
                    </div>
                </div>
            </div>
        </header>
    );
}