import React from 'react'
import Image from 'next/image';
import Link from 'next/link';
import { FaLinkedin, FaInstagram, FaFacebook } from "react-icons/fa";
import { CiHeart } from "react-icons/ci";

export default function Footer({ className = "" }) {
    return (
        <>
            <footer className={`bg-gray-100 w-full p-6 md:p-8 lg:p-12 text-black-500 text-sm md:text-base transition-all ${className}`}>
                <div>
                    {/* نیمه بالا */}
                    <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-12 border-b-2 border-gray-300 pb-8 md:pb-12'>
                        {/* بخش لوگو */}
                        <div className='space-y-4'>
                            <Image
                                src="/KafehJoo.svg"
                                alt="KafehJoo Logo Default"
                                width={57}
                                height={49.34}
                                className="hover:scale-110 transition-transform"
                            />
                            <p className='text-sm md:text-base leading-relaxed'>ما عاشق کافه‌گردی‌ایم! اینجا رو ساختیم تا هر کسی بتونه راحت کافه‌های شهرشو پیدا کنه، منو ببینه و تجربه‌هاشو با بقیه به اشتراک بذاره</p>
                        </div>
                        {/* بخش لینک‌ها */}
                        <div className='hidden md:block'>
                            <p className='font-bold mb-4 text-primary-500'>دسترسی سریع</p>
                            <ul className='space-y-2'>
                                <li><Link href="/" className='hover:text-primary-500 transition-colors'>خانه</Link></li>
                                <li><Link href="/blog" className='hover:text-primary-500 transition-colors'>بلاگ</Link></li>
                                <li><Link href="/contact_us" className='hover:text-primary-500 transition-colors'>تماس با ما</Link></li>
                                <li><Link href="/about_us" className='hover:text-primary-500 transition-colors'>درباره‌ی ما</Link></li>
                            </ul>
                        </div>
                        {/* بخش خبرنامه و شبکه‌های اجتماعی */}
                        <div className='space-y-4'>
                            <p className='font-bold text-primary-500'>خبرنامه</p>
                            <input
                                type="email"
                                placeholder='example@gmail.com'
                                className='rounded-lg bg-white border-2 border-gray-300 w-full text-right px-3 py-2 focus:border-primary-500 focus:outline-none transition-colors'
                            />
                            <div className='flex flex-row-reverse gap-4 pt-2'>
                                <FaInstagram className='text-lg cursor-pointer hover:text-primary-500 hover:scale-125 transition-all' />
                                <FaFacebook className='text-lg cursor-pointer hover:text-primary-500 hover:scale-125 transition-all' />
                                <FaLinkedin className='text-lg cursor-pointer hover:text-primary-500 hover:scale-125 transition-all' />
                            </div>
                        </div>
                    </div>
                    {/* نیمه پایین */}
                    <div className='flex flex-col md:flex-row justify-between items-center gap-4 pt-6 md:pt-8 text-xs md:text-sm'>
                        <div className='flex flex-col md:flex-row justify-center items-center gap-4 md:gap-6'>
                            <Link href="/privacy" className='hover:text-primary-500 transition-colors'>حریم خصوصی</Link>
                            <p className='hidden md:block text-gray-400'>|</p>
                            <Link href="/terms" className='hover:text-primary-500 transition-colors'>قوانین و مقررات</Link>
                        </div>
                        <div className='flex justify-center items-center gap-1'>
                            <p>همه حقوق محفوظ است – 2025 CafeFinder</p>
                            <CiHeart className='text-primary-500' />
                        </div>
                    </div>
                </div>
            </footer>
        </>
    )
}