'use client';

// Company information, quick links, social links, and contact details.

import {commerceCopy} from '@/data/commerce';
import Link from 'next/link';
import {PhoneOutlined, EnvironmentOutlined} from '@ant-design/icons';
import {useLanguage} from '@/app/context/LanguageContext';

export default function Footer() {
    const {t, locale} = useLanguage();
    const c = t.contactInfo;

    return (
        <footer id="contact" className="relative border-t border-subtle bg-elevated">
            <div className="max-w-6xl mx-auto px-6 md:px-16 py-14 grid md:grid-cols-3 gap-10 text-center md:text-start">
                <div>
                    <h3 className="text-primary font-bold text-lg mb-3">{t.footer.aboutLabel}</h3>
                    <p className="text-secondary text-sm leading-7">{t.footer.aboutText}</p>
                    <div className="flex flex-col gap-2 mt-4">
                        {c.socialLinks.map(link => (
                            <a
                                key={link.id}
                                href={link.href}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="text-brand-400 hover:text-brand-300 text-sm transition-colors"
                            >
                                {link.label}
                            </a>
                        ))}
                    </div>
                </div>

                <div>
                    <h3 className="text-primary font-bold text-lg mb-3">{t.footer.quickLinks}</h3>
                    <ul className="flex flex-col gap-2 text-sm text-secondary">
                        <li>
                            <Link href="/#hero" className="hover:text-brand-400">
                                {t.nav.home}
                            </Link>
                        </li>
                        <li>
                            <Link href="/products" className="hover:text-brand-400">
                                {commerceCopy[locale].allProducts}
                            </Link>
                        </li>
                        <li>
                            <Link href="/#about" className="hover:text-brand-400">
                                {t.nav.about}
                            </Link>
                        </li>
                        <li>
                            <Link href="/#locations" className="hover:text-brand-400">
                                {t.nav.locations}
                            </Link>
                        </li>
                    </ul>
                </div>

                <div>
                    <h3 className="text-primary font-bold text-lg mb-3">{t.footer.contactTitle}</h3>
                    <div className="flex flex-col gap-4 text-sm text-secondary">
                        <a
                            href={`tel:${c.orderPhoneHref}`}
                            className="flex items-center justify-center md:justify-start gap-2 hover:text-brand-400 transition-colors"
                            dir="ltr"
                        >
                            <PhoneOutlined />
                            <span>{c.orderPhone}</span>
                        </a>

                        <div className="flex items-start justify-center md:justify-start gap-2">
                            <EnvironmentOutlined className="mt-0.5 shrink-0" />
                            <div className="text-start">
                                <p className="text-primary-90 font-semibold mb-1">{t.footer.salesLabel}</p>
                                <p className="leading-7">{c.salesOfficeAddress}</p>
                            </div>
                        </div>

                        <div className="flex items-start justify-center md:justify-start gap-2">
                            <EnvironmentOutlined className="mt-0.5 shrink-0" />
                            <div className="text-start">
                                <p className="text-primary-90 font-semibold mb-1">{t.footer.factoryLabel}</p>
                                <p className="leading-7">{c.factoryAddress}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="border-t border-subtle py-5 text-center text-xs text-secondary">
                © {new Date().getFullYear()} {t.footer.aboutLabel}. {t.footer.rights}
            </div>
        </footer>
    );
}