'use client';

import Image from 'next/image';
import Link from 'next/link';

export default function Footer() {
    return (
        <footer
            className="relative w-full text-white overflow-hidden footer-component"
            style={{
                backgroundColor: '#292d36',
                color: '#cbcbcb',
                paddingTop: '75px',
                position: 'relative',
                zIndex: 0
            }}
        >
            {/* MAIN FOOTER */}
            <div className="relative mx-auto max-w-[1200px] px-[20px] pb-[60px] footer-main" style={{ zIndex: 1 }}>
                {/* BACKGROUND WATERMARK */}
                <div
                    className="absolute pointer-events-none footer-watermark"
                    style={{
                        backgroundImage: 'url(/logo-outline.png)',
                        backgroundSize: '300px auto',
                        backgroundPosition: 'center center',
                        backgroundRepeat: 'no-repeat',
                        opacity: 0.80,
                        zIndex: 0,
                        top: '50%',
                        left: '50%',
                        transform: 'translate(-50%, -50%)',
                        width: '100%',
                        height: '100%'
                    }}
                />

                <div className="grid grid-cols-4 gap-x-[80px] gap-y-[40px] footer-grid" style={{ position: 'relative', zIndex: 1 }}>

                    {/* LOGO + DIVIDER + SOCIAL */}
                    <div className="flex flex-col footer-logo-section">
                        <Image
                            src="/Nyra-logo.png"
                            alt="Nyra Leadership Consulting"
                            width={200}
                            height={70}
                            className="mb-[40px] footer-logo"
                        />
                        <div
                            className="w-full mb-[40px] footer-divider"
                            style={{ height: '1px', backgroundColor: '#5A5D68' }}
                        />
                        <div className="flex gap-[20px] items-center footer-social">
                            <Link href="https://linkedin.com" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" className="transition-opacity hover:opacity-70">
                                <svg width="32" height="32" viewBox="0 0 24 24" style={{ fill: '#FFFFFF' }}>
                                    <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6z" />
                                    <rect x="2" y="9" width="4" height="12" />
                                    <circle cx="4" cy="4" r="2" />
                                </svg>
                            </Link>
                            <Link href="https://instagram.com" target="_blank" rel="noopener noreferrer" aria-label="Instagram" className="transition-opacity hover:opacity-70">
                                <svg width="32" height="32" viewBox="0 0 24 24" style={{ fill: 'none', stroke: '#FFFFFF', strokeWidth: '2' }}>
                                    <rect x="2" y="2" width="20" height="20" rx="5" />
                                    <circle cx="12" cy="12" r="4" />
                                    <circle cx="18" cy="6" r="1" style={{ fill: '#FFFFFF' }} />
                                </svg>
                            </Link>
                            <Link href="https://twitter.com" target="_blank" rel="noopener noreferrer" aria-label="Twitter" className="transition-opacity hover:opacity-70">
                                <svg width="32" height="32" viewBox="0 0 24 24" style={{ fill: '#FFFFFF' }}>
                                    <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53A4.48 4.48 0 0 0 12 8v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5A7.72 7.72 0 0 0 23 3z" />
                                </svg>
                            </Link>
                            <Link href="https://youtube.com" target="_blank" rel="noopener noreferrer" aria-label="YouTube" className="transition-opacity hover:opacity-70">
                                <svg width="32" height="32" viewBox="0 0 24 24" style={{ fill: '#FFFFFF' }}>
                                    <path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 12a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58z" />
                                    <polygon points="10 15 15 12 10 9" style={{ fill: '#292d36' }} />
                                </svg>
                            </Link>
                        </div>
                    </div>

                    {/* QUICK LINKS 1 */}
                    <div className="footer-links-section">
                        <h3 className="mb-[30px] uppercase footer-heading" style={{ fontSize: '16px', fontWeight: 800, letterSpacing: '0.08em', color: '#9FA1A8' }}>
                            QUICK LINKS
                        </h3>
                        <nav className="space-y-[8px]">
                            {[
                                { label: 'Home', href: '/' },
                                { label: 'About Us', href: '/about-us' },
                                { label: 'Offerings', href: '/offerings' },
                                { label: 'Clients', href: '/clients' },
                                { label: 'Privacy and Refund Policy', href: '/privacy-policy' },
                            ].map(({ label, href }) => (
                                <div key={href}>
                                    <Link href={href} className="transition-colors footer-link"
                                        style={{ fontSize: '15px', color: '#C8C9CC', textDecoration: 'none' }}
                                        onMouseEnter={(e) => e.currentTarget.style.color = '#FFFFFF'}
                                        onMouseLeave={(e) => e.currentTarget.style.color = '#C8C9CC'}
                                    >{label}</Link>
                                </div>
                            ))}
                        </nav>
                    </div>

                    {/* QUICK LINKS 2 */}
                    <div className="footer-links-section">
                        <h3 className="mb-[30px] uppercase footer-heading" style={{ fontSize: '16px', fontWeight: 800, letterSpacing: '0.08em', color: '#9FA1A8' }}>
                            QUICK LINKS
                        </h3>
                        <nav className="space-y-[8px]">
                            {[
                                { label: 'Masterclass', href: '/offerings/masterclass' },
                                { label: 'Case Studies', href: '/case-studies' },
                                { label: 'Testimonials', href: '/clients/testimonials' },
                                { label: 'Contact Us', href: '/contact' },
                                { label: 'Terms & Conditions', href: '/terms' },
                            ].map(({ label, href }) => (
                                <div key={href}>
                                    <Link href={href} className="transition-colors footer-link"
                                        style={{ fontSize: '15px', color: '#C8C9CC', textDecoration: 'none' }}
                                        onMouseEnter={(e) => e.currentTarget.style.color = '#FFFFFF'}
                                        onMouseLeave={(e) => e.currentTarget.style.color = '#C8C9CC'}
                                    >{label}</Link>
                                </div>
                            ))}
                        </nav>
                    </div>

                    {/* NEED HELP */}
                    <div className="footer-links-section footer-help" style={{ marginLeft: '-20px' }}>
                        <h3 className="mb-[30px] uppercase footer-heading" style={{ fontSize: '16px', fontWeight: 800, letterSpacing: '0.08em', color: '#9FA1A8' }}>
                            NEED HELP?
                        </h3>
                        <div className="space-y-[12px] footer-contact" style={{ fontSize: '16px', color: '#C8C9CC' }}>
                            <p>+91 9082773406</p>
                            <a href="mailto:connect@nyraleadership.com" style={{ color: '#C8C9CC', textDecoration: 'none' }}
                                onMouseEnter={(e) => e.currentTarget.style.color = '#FFFFFF'}
                                onMouseLeave={(e) => e.currentTarget.style.color = '#C8C9CC'}
                            >connect@nyraleadership.com</a>
                        </div>
                    </div>

                </div>
            </div>

            {/* BOTTOM BAR */}
            <div className="py-[18px]" style={{ backgroundColor: '#B74273', position: 'relative', zIndex: 1 }}>
                <div className="mx-auto max-w-[1200px] px-[20px] footer-bottom-container">
                    <p className="text-left footer-copyright" style={{ fontSize: '14px', color: '#FFFFFF', fontWeight: 300 }}>
                        © 2022 Nyraleadership |{' '}
                        <Link href="/privacy-policy" style={{ color: '#FFFFFF', textDecoration: 'none' }}
                            onMouseEnter={(e) => e.currentTarget.style.opacity = '0.8'}
                            onMouseLeave={(e) => e.currentTarget.style.opacity = '1'}
                        >Privacy Policy</Link>{' '}|{' '}
                        <Link href="/contact" style={{ color: '#FFFFFF', textDecoration: 'none' }}
                            onMouseEnter={(e) => e.currentTarget.style.opacity = '0.8'}
                            onMouseLeave={(e) => e.currentTarget.style.opacity = '1'}
                        >Contact Us</Link>
                    </p>
                </div>
            </div>

            <style jsx>{`
                /* ── Mobile ── */
                @media (max-width: 767px) {
                    .footer-component { padding-top: 36px !important; }
                    .footer-main { padding-left: 24px !important; padding-right: 24px !important; padding-bottom: 30px !important; }
                    .footer-watermark { display: none !important; }
                    .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
                    .footer-logo-section { align-items: flex-start !important; }
                    .footer-logo { width: 140px !important; height: auto !important; margin-bottom: 20px !important; }
                    .footer-divider { margin-bottom: 20px !important; }
                    .footer-social { justify-content: flex-start !important; gap: 16px !important; }
                    .footer-social svg { width: 26px !important; height: 26px !important; }
                    .footer-links-section { text-align: left !important; padding-right: 8px !important; }
                    .footer-heading { margin-bottom: 16px !important; font-size: 14px !important; }
                    .footer-link { font-size: 14px !important; display: inline-block; max-width: 100%; }
                    .footer-help { margin-left: 0 !important; padding-right: 12px !important; }
                    .footer-help .footer-contact { font-size: 14px !important; }
                    .footer-help .footer-contact p { word-break: break-word; overflow-wrap: break-word; max-width: 100%; hyphens: auto; }
                    .footer-bottom-container { padding-left: 24px !important; padding-right: 24px !important; }
                    .footer-copyright { text-align: left !important; font-size: 12px !important; line-height: 1.5 !important; word-break: break-word; }

                    /* Sitemap on mobile: smaller text, tighter wrapping */
                    .footer-sitemap-wrap { padding: 12px 0 !important; }
                    .footer-sitemap-link { font-size: 11px !important; }
                    .footer-sitemap-row { row-gap: 6px; }
                }

                @media (max-width: 480px) {
                    .footer-component { padding-top: 30px !important; }
                    .footer-logo { width: 120px !important; }
                    .footer-help .footer-contact { font-size: 13px !important; }
                    .footer-copyright { font-size: 11px !important; }
                    .footer-sitemap-link { font-size: 10px !important; }
                }

                @media (max-width: 360px) {
                    .footer-help .footer-contact { font-size: 12px !important; }
                    .footer-heading { font-size: 13px !important; }
                    .footer-link { font-size: 13px !important; }
                }
            `}</style>
        </footer>
    );
}