SocialBuddyMarketingWebsite/components/Navbar.tsx

'use client';

import Link from 'next/link';
import { useState, useEffect } from 'react';
import styles from './Navbar.module.css';

export default function Navbar() {
    const [isScrolled, setIsScrolled] = useState(false);
    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
    const [isMobileFeaturesOpen, setIsMobileFeaturesOpen] = useState(false);
    const [isMobileChannelsOpen, setIsMobileChannelsOpen] = useState(false);

    useEffect(() => {
        const handleScroll = () => {
            setIsScrolled(window.scrollY > 20);
        };

        handleScroll();
        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);

    useEffect(() => {
        if (isMobileMenuOpen) {
            document.body.style.overflow = 'hidden';
        } else {
            document.body.style.overflow = 'unset';
        }
    }, [isMobileMenuOpen]);

    const navLinks = [
        { href: '/', label: 'Home' },
        {
            href: '/features',
            label: 'Features',
            // dropdown: [
            //     { href: '/features/publish', label: 'Publishing' },
            //     { href: '/features/analyze', label: 'Analytics' },
            //     { href: '/features/engage', label: 'Engagement' },
            //     { href: '/features/create', label: 'Create' },
            //     { href: '/features/start-page', label: 'Start Page' },
            //     { href: '/features/ai-assistant', label: 'AI Assistant' },
            // ]
        },
        {
            href: '#',
            label: 'Channels',
            dropdown: [
                // { href: '/channels/facebook', label: 'Facebook' },
                { href: '/channels/instagram', label: 'Instagram' },
                // { href: '/channels/youtube', label: 'YouTube' },
                // { href: '/channels/linkedin', label: 'LinkedIn' },
                // { href: '/channels/twitter', label: 'Twitter (X)' },
                // { href: '/channels/tiktok', label: 'TikTok' },
                // { href: '/channels/pinterest', label: 'Pinterest' },
            ]
        },
        { href: '/pricing', label: 'Pricing' },
        // { href: '/about', label: 'About' },
        // { href: '/careers', label: 'Careers' },
        { href: '/resources', label: 'Resources' },
        // { href: '/contact', label: 'Contact' },
    ];

    return (
        <nav className={`${styles.navbar} ${isScrolled ? styles.scrolled : ''} ${isMobileMenuOpen ? styles.mobileOpen : ''}`}>
            <div className="container">
                <div className={styles.navContent}>
                    {/* Logo */}
                    <Link href="/" className={styles.logo}>
                        <img src="/logo.png" alt="SocialBuddy Logo" style={{ height: '45px', width: 'auto' }} />
                        <span className={styles.logoText}><span className="gradient-text"></span></span>
                    </Link>

                    {/* Desktop Navigation */}
                    <div className={styles.navLinks}>
                        {navLinks.map((link) => (
                            <div key={link.label} className={styles.navItem}>
                                <Link href={link.href} className={styles.navLink}>
                                    {link.label}
                                </Link>
                                {link.dropdown && (
                                    <div className={styles.dropdownMenu}>
                                        {link.dropdown.map((subLink) => (
                                            <Link key={subLink.href} href={subLink.href} className={styles.dropdownItem}>
                                                {subLink.label}
                                            </Link>
                                        ))}
                                    </div>
                                )}
                            </div>
                        ))}
                    </div>

                    {/* CTA Buttons */}
                    <div className={styles.navActions}>
                        <a href="https://app.socialbuddy.co/login" className={styles.loginBtn}>
                            Login
                        </a>
                        <a href="https://app.socialbuddy.co/signup" className="btn btn-primary">
                            Get Started
                        </a>
                    </div>

                    {/* Mobile Menu Button */}
                    <button
                        className={styles.mobileMenuBtn}
                        onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
                        aria-label="Toggle menu"
                    >
                        <span className={`${styles.hamburger} ${isMobileMenuOpen ? styles.open : ''}`}></span>
                    </button>
                </div>

                {/* Mobile Menu */}
                {isMobileMenuOpen && (
                    <div className={styles.mobileMenu}>
                        {navLinks.map((link) => (
                            <div key={link.label}>
                                {link.dropdown ? (
                                    <>
                                        <div
                                            className={styles.mobileNavLink}
                                            onClick={() => {
                                                if (link.label === 'Features') setIsMobileFeaturesOpen(!isMobileFeaturesOpen);
                                                if (link.label === 'Channels') setIsMobileChannelsOpen(!isMobileChannelsOpen);
                                            }}
                                            style={{ cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
                                        >
                                            {link.label}
                                            <span>
                                                {(link.label === 'Features' && isMobileFeaturesOpen) || (link.label === 'Channels' && isMobileChannelsOpen) ? '−' : '+'}
                                            </span>
                                        </div>
                                        {((link.label === 'Features' && isMobileFeaturesOpen) || (link.label === 'Channels' && isMobileChannelsOpen)) && (
                                            <div style={{ marginLeft: '1rem', borderLeft: '1px solid var(--border-color)', display: 'flex', flexDirection: 'column' }}>
                                                {link.dropdown.map((subLink) => (
                                                    <Link
                                                        key={subLink.href}
                                                        href={subLink.href}
                                                        className={styles.mobileNavLink}
                                                        onClick={() => setIsMobileMenuOpen(false)}
                                                        style={{ borderBottom: 'none', paddingLeft: '1rem', fontSize: '0.95rem' }}
                                                    >
                                                        {subLink.label}
                                                    </Link>
                                                ))}
                                            </div>
                                        )}
                                    </>
                                ) : (
                                    <Link
                                        href={link.href}
                                        className={styles.mobileNavLink}
                                        onClick={() => setIsMobileMenuOpen(false)}
                                    >
                                        {link.label}
                                    </Link>
                                )}
                            </div>
                        ))}
                        <div className={styles.mobileActions}>
                            <a href="https://app.socialbuddy.co/login" className={styles.loginBtn}>
                                Login
                            </a>
                            <a href="https://app.socialbuddy.co/signup" className="btn btn-primary">
                                Get Started
                            </a>
                        </div>
                    </div>
                )}
            </div>
        </nav>
    );
}