import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { about, artOfWeaving, contact, faq, home, product } from '@/routes';
import logo from '@asset/img/logo/soorya.png';
import { SiFacebook, SiInstagram } from '@icons-pack/react-simple-icons';
import { Link } from '@inertiajs/react';
import { MoveRight } from 'lucide-react';

export default function Footer() {
    return (
        <footer className="bg-primary">
            <div className="mx-auto grid max-w-screen-2xl grid-cols-4 gap-8 px-12 py-8 max-md:grid-cols-1 max-md:grid-rows-4 max-md:px-6">
                <div className="flex flex-col gap-4">
                    <img src={logo} alt="Soorya Carpet Logo" className="w-32" />
                    <div className="flex flex-col gap-4 text-sm text-white">
                        <p>
                            A beautiful home deserves beautiful carpets Since
                            1974, crafting the finest handmade Nepalese carpets
                        </p>
                        <ul>
                            <li>Soorya Carpet Industries</li>
                            <li>Address: Thapathali, Kathmandu</li>
                            <li>Phone: [+977-1] 4780923, 4783003</li>
                            <li>Email: sooryacarpets@gmail.com</li>
                        </ul>
                    </div>
                </div>
                <div className="flex flex-col gap-6">
                    <p className="text-lg font-medium text-white">Quick Link</p>
                    <ul className="flex flex-col gap-1 text-sm">
                        <li>
                            <Link href={home()} className="text-neutral-300">
                                Home
                            </Link>
                        </li>
                        <li>
                            <Link href={contact()} className="text-neutral-300">
                                Contact US
                            </Link>
                        </li>
                        <li>
                            <Link href={about()} className="text-neutral-300">
                                About Us
                            </Link>
                        </li>
                        <li>
                            <Link
                                href={artOfWeaving()}
                                className="text-neutral-300"
                            >
                                Art of Weaving
                            </Link>
                        </li>
                        <li>
                            <Link href={product()} className="text-neutral-300">
                                Products
                            </Link>
                        </li>
                        <li>
                            <Link href={home()} className="text-neutral-300">
                                Bespoke Design
                            </Link>
                        </li>
                        <li>
                            <Link href={home()} className="text-neutral-300">
                                Design Gallery / E-Catalog
                            </Link>
                        </li>
                        <li>
                            <Link href={faq()} className="text-neutral-300">
                                FAQ
                            </Link>
                        </li>
                    </ul>
                </div>
                <div>
                    <p className="text-lg font-medium text-white">
                        Certifications & Trust Badges
                    </p>
                </div>
                <div>
                    <div className="flex flex-col gap-6">
                        <form className="flex flex-col gap-2">
                            <Label className="text-lg font-medium text-white">
                                Newsletter/Updates
                            </Label>
                            <div className="flex items-center gap-2 max-sm:flex-col">
                                <Input
                                    id="newsletter"
                                    placeholder="Email Address"
                                    className="bg-white"
                                />
                                <Button
                                    variant={'outline'}
                                    className="bg-transparent text-white max-sm:w-full"
                                >
                                    Subscribe <MoveRight />
                                </Button>
                            </div>
                        </form>
                        <div className="flex flex-col gap-2">
                            <p className="text-base font-medium text-white">
                                Legal
                            </p>
                            <ul className="flex flex-col gap-1 text-sm text-neutral-300">
                                <li>
                                    <Link href="privacy-policy">
                                        Privacy Policy
                                    </Link>
                                </li>
                                <li>
                                    <Link href="terms-and-condition">
                                        Terms & Conditions Return
                                    </Link>
                                </li>
                                <li>
                                    <Link href={faq()}>
                                        Policy (from FAQ)Privacy Policy (from
                                        FAQ)
                                    </Link>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <hr className="mx-auto my-4 max-w-screen-2xl border-neutral-500 px-12" />
            <div className="max-auto flex max-w-screen-2xl items-center justify-between px-12 py-4 max-md:flex-col max-md:gap-4 max-md:px-6">
                <p className="text-xs text-white">
                    &copy; {new Date().getFullYear()} Soorya Carpet Industries.
                    All rights reserved.
                </p>
                <ul className="flex items-center gap-4">
                    <li>
                        <Link
                            href="https://www.facebook.com/sooryacarpet/?locale=ne_NP"
                            target="_blank"
                        >
                            <SiFacebook color="#d4d4d4" size={16} />
                        </Link>
                    </li>
                    <li>
                        <Link
                            href="https://www.instagram.com/kaleen_carpet/"
                            target="_blank"
                        >
                            <SiInstagram color="#d4d4d4" size={16} />
                        </Link>
                    </li>
                </ul>
            </div>
        </footer>
    );
}