import Link from 'next/link';
import { Facebook, Instagram, Linkedin, Twitter, Youtube } from 'lucide-react';
import styles from './Footer.module.css';

export default function Footer() {
    const currentYear = new Date().getFullYear();

    const footerLinks = {
        product: [
            { label: 'Features', href: '#' },
            { label: 'Pricing', href: '/pricing' },
            { label: 'Documentation', href: '#' },
            { label: 'API', href: '#' },
        ],
        company: [
            { label: 'About Us', href: '/about' },
            { label: 'Blog', href: '/resources' },
            { label: 'Careers', href: '/careers' },
            { label: 'Contact', href: '/contact' },
        ],
        resources: [
            { label: 'Help Center', href: '/help' },
            { label: 'Community', href: '/community' },
            { label: 'Tutorials', href: '/tutorials' },
            { label: 'Status', href: '/status' },
        ],
        legal: [
            { label: 'Privacy Policy', href: '/privacy' },
            { label: 'Terms of Service', href: '/terms' },
            { label: 'Cookie Policy', href: '/cookies' },
            { label: 'GDPR', href: '/gdpr' },
        ],
    };

    const socialLinks = [
        { icon: <Twitter size={20} />, href: 'https://twitter.com', label: 'Twitter' },
        { icon: <Facebook size={20} />, href: 'https://facebook.com', label: 'Facebook' },
        { icon: <Instagram size={20} />, href: 'https://instagram.com', label: 'Instagram' },
        { icon: <Linkedin size={20} />, href: 'https://linkedin.com', label: 'LinkedIn' },
        { icon: <Youtube size={20} />, href: 'https://youtube.com', label: 'YouTube' },
    ];

    return (
        <footer className={styles.footer}>
            <div className="container">
                <div className={styles.footerContent}>
                    {/* Brand Section */}
                    <div className={styles.brandSection}>
                        <Link href="/" className={styles.logo}>
                            <img src="/logo.png" alt="SocialBuddy Logo" style={{ height: '45px', width: 'auto' }} />
                            <span className={styles.logoText}></span>
                        </Link>
                        <p className={styles.brandDescription}>
                            Empowering brands to streamline social media management, drive engagement, and grow with powerful tools and analytics.
                        </p>
                        <div className={styles.socialLinks}>
                            {socialLinks.map((social) => (
                                <a
                                    key={social.label}
                                    href={social.href}
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    className={styles.socialLink}
                                    aria-label={social.label}
                                >
                                    {social.icon}
                                </a>
                            ))}
                        </div>
                    </div>

                    {/* Links Sections */}
                    <div className={styles.linksGrid}>
                        <div className={styles.linkColumn}>
                            <h4 className={styles.columnTitle}>Product</h4>
                            {footerLinks.product.map((link) => (
                                <Link key={link.label} href={link.href} className={styles.footerLink}>
                                    {link.label}
                                </Link>
                            ))}
                        </div>

                        <div className={styles.linkColumn}>
                            <h4 className={styles.columnTitle}>Company</h4>
                            {footerLinks.company.map((link) => (
                                <Link key={link.label} href={link.href} className={styles.footerLink}>
                                    {link.label}
                                </Link>
                            ))}
                        </div>

                        <div className={styles.linkColumn}>
                            <h4 className={styles.columnTitle}>Resources</h4>
                            {footerLinks.resources.map((link) => (
                                <Link key={link.label} href={link.href} className={styles.footerLink}>
                                    {link.label}
                                </Link>
                            ))}
                        </div>

                        <div className={styles.linkColumn}>
                            <h4 className={styles.columnTitle}>Legal</h4>
                            {footerLinks.legal.map((link) => (
                                <Link key={link.label} href={link.href} className={styles.footerLink}>
                                    {link.label}
                                </Link>
                            ))}
                        </div>
                    </div>
                </div>

                {/* Bottom Bar */}
                {/* Bottom Bar */}
                <div className={styles.bottomBar}>
                    <p className={styles.copyright}>
                        © Copyright {currentYear} SocialBuddy | Powered by{' '}
                        <a
                            href="https://metatroncubesolutions.com/"
                            target="_blank"
                            rel="noopener noreferrer"
                            className={styles.poweredLink}
                        >
                            MetatronCube
                        </a>{' '}
                        All Rights Reserved
                    </p>
                </div>
            </div>
        </footer>
    );
}