import Link from 'next/link';
import styles from './Footer.module.css';

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

    const footerLinks = {
        product: [
            { label: 'Features', href: '/features' },
            { label: 'Pricing', href: '/pricing' },
            { label: 'Documentation', href: '/docs' },
            { label: 'API', href: '/docs/api' },
        ],
        company: [
            { label: 'About Us', href: '/about' },
            { label: 'Blog', href: '/blog' },
            { 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: '𝕏', href: 'https://twitter.com', label: 'Twitter' },
        { icon: '📘', href: 'https://facebook.com', label: 'Facebook' },
        { icon: '📷', href: 'https://instagram.com', label: 'Instagram' },
        { icon: '💼', href: 'https://linkedin.com', label: 'LinkedIn' },
        { icon: '📺', 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}>
                            <span className={styles.logoIcon}>🚀</span>
                            <span className={styles.logoText}>Social<span className="gradient-text">Buddy</span></span>
                        </Link>
                        <p className={styles.brandDescription}>
                            Empowering businesses to manage their social media presence 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 */}
                <div className={styles.bottomBar}>
                    <p className={styles.copyright}>
                        © {currentYear} SocialBuddy. All rights reserved.
                    </p>
                    <div className={styles.badges}>
                        <span className={styles.badge}>🔒 Secure</span>
                        <span className={styles.badge}>⚡ Fast</span>
                        <span className={styles.badge}>🌍 Global</span>
                    </div>
                </div>
            </div>
        </footer>
    );
}