import Link from 'next/link';
import React from 'react';

const Footer = ({ logo = '/assets/img/home/footer/footer-logo-black.webp', containerClass = 'vl-footer1-section-area', topSpace = false }) => {
    const currentYear = new Date().getFullYear();

    const companyLinks = [
        { label: 'Home', link: '#home' },
        { label: 'About Us', link: '#about' },
        { label: 'Portfolio', link: '#portfolio' },
        { label: 'Faq', link: '#faq' },
        { label: 'Contact', link: '/pages/contact' },
    ];

    const serviceLinks = [
        { label: 'Website Development', link: '#services' },
    ];

    const socialLinks = [
        { icon: 'fa-facebook-f', link: 'https://www.facebook.com/metatroncubecanada', bg: '#0866ff' },
        { icon: 'fa-instagram', link: 'https://www.instagram.com/metatron_digitalagency', bg: '#d62976' },
        { icon: 'fa-x-twitter', link: 'https://x.com/MetatroncubeDA', bg: '#000' },
        { icon: 'fa-linkedin-in', link: 'https://www.linkedin.com/company/metatroncube-software-solutions/posts/?feedView=all', bg: '#0077b5' },
        { icon: 'fa-youtube', link: 'https://www.youtube.com/@metatron_digitalagency', bg: '#ff0000' },
    ];

    return (
        <div
            className={`${containerClass} sp8 position-relative`}
            style={{
                backgroundImage: 'url(/assets/img/home/footer/footer.webp)',
                backgroundPosition: 'center',
                backgroundRepeat: 'no-repeat',
                backgroundSize: 'cover',
                overflow: 'hidden',
            }}
        >
            {/* Light overlay to ensure text readability */}
            <div style={{ position: 'absolute', inset: 0, background: 'rgba(255,255,255,0.7)', zIndex: 0 }} />

            {topSpace && (
                <>
                    <div className="space100"></div>
                    <div className="space50"></div>
                </>
            )}
            <div className="container position-relative" style={{ zIndex: 1 }}>
                <div className="row">
                    {/* Column 1: Logo & Description */}
                    <div className="col-lg-4 col-md-6">
                        <div className="footer-logo1">
                            <img src={logo} alt="MetatronCube Logo" style={{ maxWidth: '200px' }} />
                            <div className="space24"></div>
                            <p style={{ color: '#1a1f2b', lineHeight: '1.7' }}>
                                We build secure, scalable, high-performance mobile apps that drive growth and deliver real business results.
                            </p>
                            <div className="space24"></div>
                            <div className="footer-socials d-flex gap-3">
                                {socialLinks.map((social, idx) => (
                                    <a
                                        key={idx}
                                        id={`footer-social-${social.icon}`}
                                        href={social.link}
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        className="social-icon-box"
                                        style={{
                                            width: '40px',
                                            height: '40px',
                                            borderRadius: '50%',
                                            background: social.bg || '#3779b9',
                                            display: 'flex',
                                            alignItems: 'center',
                                            justifyContent: 'center',
                                            color: '#fff',
                                            transition: 'transform 0.3s'
                                        }}
                                        onMouseEnter={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.transform = 'translateY(-5px)'; }}
                                        onMouseLeave={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.transform = 'translateY(0)'; }}
                                    >
                                        <i className={`fa-brands ${social.icon}`}></i>
                                    </a>
                                ))}
                            </div>
                        </div>
                    </div>

                    {/* Column 2: Company */}
                    <div className="col-lg-2 col-md-6">
                        <div className="space30 d-md-none d-block"></div>
                        <div className="vl-footer-widget list-style-none">
                            <h3 style={{ color: '#1a1f2b', fontSize: '24px', fontWeight: 700, marginBottom: '30px', position: 'relative' }}>
                                Company
                                <span style={{ position: 'absolute', bottom: '-10px', left: 0, width: '40px', height: '2px', background: '#3779b9' }}></span>
                            </h3>
                            <ul className="p-0 m-0" style={{ listStyle: 'none' }}>
                                {companyLinks.map((item, idx) => (
                                    <li key={idx} style={{ marginBottom: '15px' }}>
                                        <Link
                                            href={item.link}
                                            style={{ color: '#1a1f2b', textDecoration: 'none', transition: 'color 0.3s' }}
                                            onMouseEnter={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#3779b9'; }}
                                            onMouseLeave={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#1a1f2b'; }}
                                        >
                                            {item.label}
                                        </Link>
                                    </li>
                                ))}
                            </ul>
                        </div>
                    </div>

                    {/* Column 3: Services */}
                    <div className="col-lg-3 col-md-6">
                        <div className="space30 d-lg-none d-block"></div>
                        <div className="vl-footer-widget list-style-none">
                            <h3 style={{ color: '#1a1f2b', fontSize: '24px', fontWeight: 700, marginBottom: '30px', position: 'relative' }}>
                                Services
                                <span style={{ position: 'absolute', bottom: '-10px', left: 0, width: '40px', height: '2px', background: '#3779b9' }}></span>
                            </h3>
                            <ul className="p-0 m-0" style={{ listStyle: 'none' }}>
                                {serviceLinks.map((item, idx) => (
                                    <li key={idx} style={{ marginBottom: '15px' }}>
                                        <Link
                                            href={item.link}
                                            style={{ color: '#1a1f2b', textDecoration: 'none', transition: 'color 0.3s' }}
                                            onMouseEnter={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#3779b9'; }}
                                            onMouseLeave={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#1a1f2b'; }}
                                        >
                                            {item.label}
                                        </Link>
                                    </li>
                                ))}
                            </ul>
                        </div>
                    </div>

                    {/* Column 4: Newsletter */}
                    {/* Column 4: Location */}
                    <div className="col-lg-3 col-md-6">
                        <div className="space30 d-lg-none d-block"></div>
                        <div className="vl-footer-widget location-widget">
                            <h3 style={{ color: '#1a1f2b', fontSize: '24px', fontWeight: 700, marginBottom: '30px', position: 'relative' }}>
                                Get In Touch
                                <span style={{ position: 'absolute', bottom: '-10px', left: 0, width: '40px', height: '2px', background: '#3779b9' }}></span>
                            </h3>
                            <div className="contact-list d-flex flex-column gap-3">
                                {/* Email */}
                                <div className="contact-item d-flex align-items-center gap-3">
                                    <div className="contact-icon" style={{ color: '#3779b9', fontSize: '18px', width: '20px' }}>
                                        <i className="fa-solid fa-envelope"></i>
                                    </div>
                                    <div className="contact-text">
                                        <a href="mailto:info@metatroncubesolutions.com" style={{ color: '#1a1f2b', fontSize: '16px', fontWeight: 500, textDecoration: 'none', transition: 'color 0.3s' }} onMouseEnter={(e) => e.currentTarget.style.color = '#3779b9'} onMouseLeave={(e) => e.currentTarget.style.color = '#1a1f2b'}>
                                            info@metatroncubesolutions.com
                                        </a>
                                    </div>
                                </div>

                                {/* Location */}
                                <div className="contact-item d-flex align-items-start gap-3">
                                    <div className="contact-icon" style={{ color: '#3779b9', fontSize: '18px', width: '20px' }}>
                                        <i className="fa-solid fa-location-dot"></i>
                                    </div>
                                    <div className="contact-text">
                                        <p style={{ color: '#1a1f2b', fontSize: '16px', fontWeight: 500, margin: 0 }}>
                                            Waterloo, Ontario Canada
                                        </p>
                                    </div>
                                </div>

                                {/* Phone */}
                                <div className="contact-item d-flex align-items-center gap-3">
                                    <div className="contact-icon" style={{ color: '#3779b9', fontSize: '18px', width: '20px' }}>
                                        <i className="fa-solid fa-phone"></i>
                                    </div>
                                    <div className="contact-text">
                                        <a href="tel:+1-647-679-7651" style={{ color: '#1a1f2b', fontSize: '16px', fontWeight: 500, textDecoration: 'none', transition: 'color 0.3s' }} onMouseEnter={(e) => e.currentTarget.style.color = '#3779b9'} onMouseLeave={(e) => e.currentTarget.style.color = '#1a1f2b'}>
                                            +1-647-679-7651
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="space60"></div>
                <div className="row align-items-center">
                    <div className="col-lg-12 col-md-12">
                        <div className="vl-copyright-area">
                            <p style={{ color: '#1a1f2b', margin: 0 }}>© Copyright {currentYear} - <a href="https://metatroncubesolutions.com/" target="_blank" rel="noopener noreferrer" style={{ color: '#3779b9', fontWeight: 700, textDecoration: 'none' }}>MetatronCube</a>. All Right Reserved</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Footer;