import type { MarketingRouteName } from '@frontend/content/marketing-routes';
import { marketingRoute } from '@frontend/lib/marketing-route';
import { Link, usePage } from '@inertiajs/react';

type FooterLink = {
    readonly label: string;
    readonly routeName: MarketingRouteName;
    readonly slug?: string;
};

type FooterSocialLink = {
    readonly href: string;
    readonly iconClass: string;
    readonly label: string;
};

type FooterData = {
    readonly contactEyebrow: string;
    readonly heading: string;
    readonly logo: string;
    readonly blurb: string;
    readonly socialLinks: readonly FooterSocialLink[];
    readonly quickLinks: readonly FooterLink[];
    readonly serviceLinks: readonly FooterLink[];
    readonly phones: readonly string[];
    readonly address: string;
    readonly email: string;
    readonly copyrightBrand: string;
} | null;

export function Footer() {
    const year = new Date().getFullYear();
    const { props } = usePage<{ footer?: FooterData }>();
    const footer = props.footer;

    if (!footer) {
        return <footer className="bg-secondary"></footer>;
    }

    return (
        <footer className="bg-secondary">
            <div className="border-bottom border-color-light-white">
                <div className="container pt-2-9 pt-lg-6 pt-xl-11 pb-1-9 pb-md-2-9">
                    <div className="d-md-flex justify-content-between align-items-center">
                        <div className="heading-animation animation-style2">
                            <div className="title-style01">
                                <div className="mb-2">
                                    <i className="fa-solid fa-asterisk text-white rotate"></i>
                                    <span className="sub-title primary">{footer.contactEyebrow}</span>
                                </div>
                                <h2 className="title-font display-2 font-weight-800 text-uppercase lh-1 ls-minus-2px text-white mb-0">{footer.heading}</h2>
                            </div>
                        </div>
                        <div className="d-none d-md-block">
                            <Link href={marketingRoute('contact')} className="circle-btn circle-hover border-color-light-white text-white ms-auto">
                                <span className="btn-text text-white">Contact Us</span>
                                <i className="btn-dot"></i>
                            </Link>
                        </div>
                    </div>
                </div>
            </div>
            <div className="border-bottom border-color-light-white">
                <div className="container py-2-9 py-md-6 py-lg-8 py-xl-10">
                    <div className="row justify-content-between mt-n2-9">
                        <div className="col-sm-6 col-lg-4 col-xxl-5 mt-2-9">
                            <div className="footer-logo text-center text-md-start mx-auto mx-lg-0 mb-4">
                                <Link href={marketingRoute('home')}>
                                    <img src={footer.logo} alt="" title="" />
                                </Link>
                            </div>
                            <p className="text-white opacity8 w-lg-70 w-xxl-50 mb-1-6">{footer.blurb}</p>
                            <ul className="social-icon-style2 list-unstyled mb-0">
                                {footer.socialLinks.map((s) => (
                                    <li key={s.href + s.label}>
                                        <a href={s.href} aria-label={s.label}>
                                            <i className={s.iconClass}></i>
                                        </a>
                                    </li>
                                ))}
                            </ul>
                        </div>
                        <div className="col-sm-6 col-lg-2 mt-2-9">
                            <div>
                                <h3 className="text-white h5 font-weight-800 text-uppercase pb-4 border-bottom border-color-light-white mb-4">Quick Links</h3>
                                <ul className="list-unstyled mb-0">
                                    {footer.quickLinks.map((link) => (
                                        <li className="mb-3" key={link.label}>
                                            <Link href={marketingRoute(link.routeName)} className="text-white text-primary-hover opacity7">
                                                {link.label}
                                            </Link>
                                        </li>
                                    ))}
                                </ul>
                            </div>
                        </div>
                        <div className="col-sm-6 col-lg-3 mt-2-9">
                            <div className="ps-xxl-4">
                                <h3 className="text-white h5 font-weight-800 text-uppercase pb-4 border-bottom border-color-light-white mb-4">Services</h3>
                                <ul className="list-unstyled mb-0">
                                    {footer.serviceLinks.map((link) => (
                                        <li className="mb-3" key={link.label}>
                                            <Link
                                                href={
                                                    link.slug
                                                        ? marketingRoute('services.show', { service: link.slug })
                                                        : marketingRoute(link.routeName)
                                                }
                                                className="text-white text-primary-hover opacity7"
                                            >
                                                {link.label}
                                            </Link>
                                        </li>
                                    ))}
                                </ul>
                            </div>
                        </div>
                        <div className="col-sm-6 col-lg-3 col-xxl-2 mt-2-9">
                            <div>
                                <h3 className="text-white h5 font-weight-800 text-uppercase pb-4 border-bottom border-color-light-white mb-4">Contact Us</h3>
                                <ul className="list-unstyled mb-0">
                                    {footer.phones.map((phone) => (
                                        <li className="mb-3" key={phone}>
                                            <a href={`tel:${phone}`} className="text-white opacity7 text-primary-hover">
                                                {phone}
                                            </a>
                                        </li>
                                    ))}
                                    {footer.address ? <li className="mb-3 text-white opacity7">{footer.address}</li> : null}
                                    {footer.email ? (
                                        <li>
                                            <a href={`mailto:${footer.email}`} className="text-white opacity7 text-primary-hover">
                                                {footer.email}
                                            </a>
                                        </li>
                                    ) : null}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="container py-4">
                <div className="d-md-flex justify-content-between align-items-center">
                    <p className="text-center text-md-start mb-0 text-white">
                        &copy; <span>{year}</span> {footer.copyrightBrand}.
                    </p>
                </div>
            </div>
        </footer>
    );
}