import { Form } from '@inertiajs/react';
import { Mail, Phone } from 'lucide-react';
import InputError from '@/components/input-error';
import { cn } from '@/lib/utils';
import { subscribe } from '@/routes/newsletter';
import { quickLinks } from './data';
import ZozTripLogo from './zoztrip-logo';

function FacebookIcon() {
    return (
        <svg viewBox="0 0 24 24" className="size-4 fill-current">
            <path d="M14 8V6.5c0-.8.2-1.5 1.5-1.5H17V2h-2.6C11.6 2 11 3.9 11 5.9V8H9v3h2v11h3V11h2.6l.4-3h-3z" />
        </svg>
    );
}

function InstagramIcon() {
    return (
        <svg
            viewBox="0 0 24 24"
            className="size-4 fill-none stroke-current stroke-2"
        >
            <rect x="3" y="3" width="18" height="18" rx="5" />
            <circle cx="12" cy="12" r="4" />
            <circle cx="17.5" cy="6.5" r="0.5" className="fill-current" />
        </svg>
    );
}

function LinkedInIcon() {
    return (
        <svg viewBox="0 0 24 24" className="size-4 fill-current">
            <path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.5h4V21H3V9.5zm7 0h3.8v1.6h.1c.5-1 1.8-2 3.8-2 4 0 4.8 2.6 4.8 6V21h-4v-5.1c0-1.2 0-2.8-1.7-2.8s-2 1.3-2 2.7V21h-4V9.5z" />
        </svg>
    );
}

function YouTubeIcon() {
    return (
        <svg viewBox="0 0 24 24" className="size-4 fill-current">
            <path d="M23 7.2a3 3 0 0 0-2.1-2.1C19 4.6 12 4.6 12 4.6s-7 0-8.9.5A3 3 0 0 0 1 7.2 31 31 0 0 0 .5 12a31 31 0 0 0 .5 4.8 3 3 0 0 0 2.1 2.1c1.9.5 8.9.5 8.9.5s7 0 8.9-.5a3 3 0 0 0 2.1-2.1 31 31 0 0 0 .5-4.8 31 31 0 0 0-.5-4.8zM9.8 15.1V8.9l5.7 3.1-5.7 3.1z" />
        </svg>
    );
}

const socials = [
    { label: 'Facebook', icon: FacebookIcon },
    { label: 'Instagram', icon: InstagramIcon },
    { label: 'LinkedIn', icon: LinkedInIcon },
    { label: 'YouTube', icon: YouTubeIcon },
];

export default function SiteFooter({ className }: { className?: string }) {
    return (
        <footer className={cn('bg-white dark:bg-navy', className)}>
            <div className="mx-auto grid max-w-6xl gap-12 px-4 pt-16 pb-10 sm:px-6 lg:grid-cols-[1.4fr_1fr_1fr]">
                <div>
                    <ZozTripLogo className="dark:brightness-0 dark:invert" />
                    <p className="mt-6 max-w-xs text-sm text-navy/80 dark:text-white/90">
                        Reliable airport shuttles, executive point-to-point
                        transit, holiday retreats, and chauffeur reservations
                        globally.
                    </p>

                    <div className="mt-6 flex gap-6 text-navy dark:gap-3">
                        {socials.map(({ label, icon: Icon }) => (
                            <a
                                key={label}
                                href="#"
                                aria-label={label}
                                className="transition-colors hover:text-gold-dark dark:flex dark:size-10 dark:items-center dark:justify-center dark:rounded-full dark:bg-white dark:hover:bg-gold dark:hover:text-white"
                            >
                                <Icon />
                            </a>
                        ))}
                    </div>

                    <h4 className="mt-8 text-sm font-semibold text-navy dark:text-white">
                        Apply To Newsletter
                    </h4>
                    <Form
                        {...subscribe.form()}
                        errorBag="newsletter"
                        options={{ preserveScroll: true }}
                        resetOnSuccess
                        className="mt-4 max-w-sm"
                    >
                        {({ processing, errors }) => (
                            <>
                                <div className="flex min-w-0 flex-col gap-3 sm:flex-row">
                                    <input
                                        type="email"
                                        name="email"
                                        required
                                        aria-label="Email address"
                                        placeholder="Email address"
                                        className="min-w-0 w-full flex-1 rounded-md border border-navy/15 bg-transparent px-3 py-2.5 text-sm outline-none placeholder:text-gray-400 focus:border-gold dark:border-white/20 dark:text-white"
                                    />
                                    <button
                                        type="submit"
                                        disabled={processing}
                                        className="w-full shrink-0 rounded-md bg-navy px-5 py-2.5 text-xs font-medium text-white transition-colors hover:bg-navy-light disabled:opacity-70 sm:w-auto dark:bg-gold dark:hover:bg-gold-dark"
                                    >
                                        {processing ? 'Sending…' : 'Submit'}
                                    </button>
                                </div>
                                <InputError
                                    message={errors.email}
                                    className="mt-2 text-xs"
                                />
                            </>
                        )}
                    </Form>
                </div>

                <div className="lg:pt-24">
                    <h4 className="text-sm font-semibold text-navy dark:text-white">
                        Quick Links
                    </h4>
                    <ul className="mt-5 space-y-4 text-xs text-navy/80 dark:text-white/80">
                        {quickLinks.map((link) => (
                            <li key={link}>
                                <a href="#" className="hover:text-gold-dark">
                                    {link}
                                </a>
                            </li>
                        ))}
                    </ul>
                </div>

                <div className="lg:pt-24">
                    <h4 className="text-sm font-semibold text-navy dark:text-white">
                        Other Resources
                    </h4>
                    <ul className="mt-5 space-y-4 text-xs text-navy/80 dark:text-white/80">
                        <li className="flex items-center gap-2">
                            <Phone className="size-3.5" />
                            1-800-VOYAGE-GO
                        </li>
                        <li className="flex items-center gap-2">
                            <Mail className="size-3.5" />
                            dispatch@voyagetransit.com
                        </li>
                        <li className="pl-5.5">
                            <a href="#" className="hover:text-gold-dark">
                                Passenger Bill of Rights
                            </a>
                        </li>
                        <li className="pl-5.5">
                            <a href="#" className="hover:text-gold-dark">
                                Lost &amp; Found Registry
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

            <div className="mx-auto flex max-w-6xl flex-col gap-2 border-t border-navy/10 px-4 py-6 text-xs text-navy/70 sm:flex-row sm:justify-between sm:px-6 dark:border-white/10 dark:text-white/70">
                <p>
                    © {new Date().getFullYear()} Zoztrip. All rights reserved.
                </p>
                <p>
                    <a href="#" className="hover:text-gold-dark">
                        Privacy Policy
                    </a>
                    {' - '}
                    <a href="#" className="hover:text-gold-dark">
                        Terms &amp; Conditions
                    </a>
                </p>
            </div>
        </footer>
    );
}