'use client';

import { CONTACT_INFO, COMPANY_INFO } from '@/config/contact';
import { MapPin, Phone, Mail } from 'lucide-react';
import Image from 'next/image';
import Hr from '../Hr';

const Footer = () => {
    return (
        <>
            <Hr />
            <footer className="relative z-10 bg-white dark:bg-gray-dark pt-6 lg:pt-10 overflow-hidden">
                {/* Footer Background - Bottom Left */}
                <div className="absolute inset-0 z-0">
                    <Image
                        src="/images/banner/Footer-bg.png"
                        alt="Footer Background"
                        fill
                        className="object-cover"
                        quality={100}
                    />
                </div>

                <div className="container mx-auto flex flex-wrap justify-between gap-8 px-4 mb-10 relative z-10">
                    <div className="w-full md:w-1/2 lg:w-1/3">
                        <h3 className="font-semibold mb-2">
                            <span className='font-bold text-red-600'>{COMPANY_INFO.nameParts.first}</span> {COMPANY_INFO.nameParts.second}
                        </h3>
                        <p className="mb-4">
                            {COMPANY_INFO.description}
                        </p>
                        <ul className="space-y-2 mb-4">
                            <li className="flex items-center gap-2">
                                <MapPin size={20} className="text-red-500" />
                                <span>
                                    <strong>Địa chỉ:</strong> {CONTACT_INFO.address.short}
                                </span>
                            </li>
                            <li className="flex items-center gap-2">
                                <Phone size={20} className="text-red-500" />
                                <span>
                                    <strong>Hotline:</strong> <a href={CONTACT_INFO.phone.href} className="hover:text-red-500">{CONTACT_INFO.phone.display}</a>
                                </span>
                            </li>
                            <li className="flex items-center gap-2">
                                <Mail size={20} className="text-red-500" />
                                <span>
                                    <strong>Email:</strong> <a href={CONTACT_INFO.email.href} className="hover:text-red-500">{CONTACT_INFO.email.display}</a>
                                </span>
                            </li>
                        </ul>

                        <p className="font-semibold mb-2">Liên hệ với chúng tôi:</p>
                        <div className="flex gap-4">
                            <a href={`https://wa.me/84${CONTACT_INFO.phone.raw}`} target="_blank" rel="noopener noreferrer" aria-label="WhatsApp">
                                <Image src="/images/footer/whatsapp.png" alt="WhatsApp" width={28} height={28} />
                            </a>
                            <a href={CONTACT_INFO.social.facebook} target="_blank" rel="noopener noreferrer" aria-label="Facebook">
                                <Image src="/images/footer/facebook.png" alt="Facebook" width={28} height={28} />
                            </a>
                            <a href={`https://zalo.me/${CONTACT_INFO.phone.raw}`} aria-label="Zalo" target="_blank" rel="noopener noreferrer">
                                <Image src="/images/footer/zalo.png" alt="Zalo" width={28} height={28} />
                            </a>
                        </div>
                    </div>

                        <div className="w-full md:w-1/2 lg:w-1/4">
                            <h3 className="font-semibold text-lg mb-4 text-red-600">Dịch vụ</h3>
                            <ul className="space-y-2">
                                <li><a href="#" className="hover:text-red-500">Sản xuất video ngắn</a></li>
                                <li><a href="#" className="hover:text-red-500">Chụp ảnh</a></li>
                                <li><a href="#" className="hover:text-red-500">Quay video</a></li>
                                <li><a href="#" className="hover:text-red-500">Dựng & chỉnh sửa video</a></li>
                                <li><a href="#" className="hover:text-red-500">Livestream sự kiện</a></li>
                            </ul>   
                        </div>

                        <div className="w-full md:w-full lg:w-1/3">
                        <h3 className="font-semibold text-lg mb-4 text-red-600">Theo dõi chúng tôi</h3>
                        <iframe
                            src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FVlogmedia27&tabs=timeline&width=280&height=350&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=false&locale=vi_VN"
                            width="100%"
                            height="200"
                            style={{ border: 'none', overflow: 'hidden' }}
                            allowFullScreen={true}
                            allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
                            loading="lazy"
                            title="Facebook Page V_LOG MEDIA"
                        />
                    </div>
                </div>
                <div className="absolute right-0 top-14 z-[5]">
                    <svg
                        width="55"
                        height="99"
                        viewBox="0 0 55 99"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <circle opacity="0.8" cx="49.5" cy="49.5" r="49.5" fill="#EF4444" />
                        <mask
                        id="mask0_94:899"
                        style={{ maskType: "alpha" }}
                        maskUnits="userSpaceOnUse"
                        x="0"
                        y="0"
                        width="99"
                        height="99"
                        >
                        <circle opacity="0.8" cx="49.5" cy="49.5" r="49.5" fill="#EF4444" />
                        </mask>
                        <g mask="url(#mask0_94:899)">
                        <circle
                            opacity="0.8"
                            cx="49.5"
                            cy="49.5"
                            r="49.5"
                            fill="url(#paint0_radial_94:899)"
                        />
                        <g opacity="0.8" filter="url(#filter0_f_94:899)">
                            {/* highlight đổi sang đỏ nhạt */}
                            <circle cx="53.8676" cy="26.2061" r="20.3824" fill="#FF7F7F" />
                        </g>
                        </g>
                        <defs>
                        <filter
                            id="filter0_f_94:899"
                            x="12.4852"
                            y="-15.1763"
                            width="82.7646"
                            height="82.7646"
                            filterUnits="userSpaceOnUse"
                            colorInterpolationFilters="sRGB"
                        >
                            <feFlood floodOpacity="0" result="BackgroundImageFix" />
                            <feBlend
                            mode="normal"
                            in="SourceGraphic"
                            in2="BackgroundImageFix"
                            result="shape"
                            />
                            <feGaussianBlur
                            stdDeviation="10.5"
                            result="effect1_foregroundBlur_94:899"
                            />
                        </filter>
                        <radialGradient
                            id="paint0_radial_94:899"
                            cx="0"
                            cy="0"
                            r="1"
                            gradientUnits="userSpaceOnUse"
                            gradientTransform="translate(49.5 49.5) rotate(90) scale(53.1397)"
                        >
                            <stop stopColor="#EF4444" stopOpacity="0.47" />
                            <stop offset="1" stopColor="#EF4444" stopOpacity="0" />
                        </radialGradient>
                        </defs>
                    </svg>
                </div>

                <div className="absolute bottom-24 left-0 z-[5]">
                    <svg
                        width="79"
                        height="94"
                        viewBox="0 0 79 94"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <rect
                        opacity="0.3"
                        x="-41"
                        y="26.9426"
                        width="66.6675"
                        height="66.6675"
                        transform="rotate(-22.9007 -41 26.9426)"
                        fill="url(#paint0_linear_94:889)"
                        />
                        <rect
                        x="-41"
                        y="26.9426"
                        width="66.6675"
                        height="66.6675"
                        transform="rotate(-22.9007 -41 26.9426)"
                        stroke="url(#paint1_linear_94:889)"
                        strokeWidth="0.7"
                        />
                        <path
                        opacity="0.3"
                        d="M50.5215 7.42229L20.325 1.14771L46.2077 62.3249L77.1885 68.2073L50.5215 7.42229Z"
                        fill="url(#paint2_linear_94:889)"
                        />
                        <path
                        d="M50.5215 7.42229L20.325 1.14771L46.2077 62.3249L76.7963 68.2073L50.5215 7.42229Z"
                        stroke="url(#paint3_linear_94:889)"
                        strokeWidth="0.7"
                        />
                        <path
                        opacity="0.3"
                        d="M17.9721 93.3057L-14.9695 88.2076L46.2077 62.325L77.1885 68.2074L17.9721 93.3057Z"
                        fill="url(#paint4_linear_94:889)"
                        />
                        <path
                        d="M17.972 93.3057L-14.1852 88.2076L46.2077 62.325L77.1884 68.2074L17.972 93.3057Z"
                        stroke="url(#paint5_linear_94:889)"
                        strokeWidth="0.7"
                        />
                        <defs>
                        <linearGradient
                            id="paint0_linear_94:889"
                            x1="-41"
                            y1="21.8445"
                            x2="36.9671"
                            y2="59.8878"
                            gradientUnits="userSpaceOnUse"
                        >
                            <stop stopColor="#EF4444" stopOpacity="0.62" />
                            <stop offset="1" stopColor="#EF4444" stopOpacity="0" />
                        </linearGradient>
                        <linearGradient
                            id="paint1_linear_94:889"
                            x1="25.6675"
                            y1="95.9631"
                            x2="-42.9608"
                            y2="20.668"
                            gradientUnits="userSpaceOnUse"
                        >
                            <stop stopColor="#EF4444" stopOpacity="0" />
                            <stop offset="1" stopColor="#EF4444" stopOpacity="0.51" />
                        </linearGradient>
                        <linearGradient
                            id="paint2_linear_94:889"
                            x1="20.325"
                            y1="-3.98039"
                            x2="90.6248"
                            y2="25.1062"
                            gradientUnits="userSpaceOnUse"
                        >
                            <stop stopColor="#EF4444" stopOpacity="0.62" />
                            <stop offset="1" stopColor="#EF4444" stopOpacity="0" />
                        </linearGradient>
                        <linearGradient
                            id="paint3_linear_94:889"
                            x1="18.3642"
                            y1="-1.59742"
                            x2="113.9"
                            y2="80.6826"
                            gradientUnits="userSpaceOnUse"
                        >
                            <stop stopColor="#EF4444" stopOpacity="0" />
                            <stop offset="1" stopColor="#EF4444" stopOpacity="0.51" />
                        </linearGradient>
                        <linearGradient
                            id="paint4_linear_94:889"
                            x1="61.1098"
                            y1="62.3249"
                            x2="-8.82468"
                            y2="58.2156"
                            gradientUnits="userSpaceOnUse"
                        >
                            <stop stopColor="#EF4444" stopOpacity="0.62" />
                            <stop offset="1" stopColor="#EF4444" stopOpacity="0" />
                        </linearGradient>
                        <linearGradient
                            id="paint5_linear_94:889"
                            x1="65.4236"
                            y1="65.0701"
                            x2="24.0178"
                            y2="41.6598"
                            gradientUnits="userSpaceOnUse"
                        >
                            <stop stopColor="#EF4444" stopOpacity="0" />
                            <stop offset="1" stopColor="#EF4444" stopOpacity="0.51" />
                        </linearGradient>
                        </defs>
                    </svg>
                </div>
            </footer>
        </>
    );
};

export default Footer;
