---
import {
    ADDRESS,
    CONTACT_EMAIL,
    getContactLink,
    getPhoneNumber,
    navLinks,
} from "@/lib/constants";
import { cn } from "@/lib/utils";
import Logo from "../atoms/logo";
import Title from "../atoms/title";
import MaxWidthWrapper from "../other/max.width.wrapper";
import { cn } from "@/lib/utils";
import Logo from "../atoms/logo";
import Title from "../atoms/title";
import MaxWidthWrapper from "../other/max.width.wrapper";

const { page, variant = "lime" } = Astro.props;

const bgGradient =
    variant === "lime"
        ? "from-blue-800 to-blue-950"
        : "from-blue-900 to-blue-950";

const phoneNumber = getPhoneNumber(page);
const contactLink = getContactLink(page);
---

<div class={cn("bg-linear-to-b mt-24", bgGradient)}>
    <MaxWidthWrapper
        id="footer"
        className="grid place-items-center w-full py-24"
    >
        <footer aria-labelledby="footer-heading" class="w-full">
            <h2 id="footer-heading" class="sr-only">Footer</h2>
            <div class="mx-auto max-w-7xl px-2">
                <div class="flex flex-col justify-between lg:flex-row gap-12">
                    <div class="flex flex-col gap-8">
                        <a href="/">
                            <Logo />
                        </a>
                        <p class="text-md leading-6 text-blue-50">
                            <span>{ADDRESS}</span>
                        </p>
                        <p class="text-md leading-6 text-blue-50">
                            <a
                                href={contactLink}
                                class="text-blue-50 hover:text-blue-100"
                            >
                                {phoneNumber}
                            </a>
                        </p>
                        <p class="text-md leading-6 text-blue-50">
                            <a
                                href={`mailto:${CONTACT_EMAIL}`}
                                class="text-blue-50 hover:text-blue-100"
                            >
                                {CONTACT_EMAIL}
                            </a>
                        </p>
                    </div>
                    <div class="md:mt-0 flex flex-col md:items-end gap-6">
                        <Title size="h3" title="SiteMap" color="white" />

                        <div class="flex flex-col gap-4 md:items-end">
                            {
                                navLinks.map((item) => (
                                    <a
                                        href={item.href}
                                        class="leading-6 text-gray-50 hover:text-gray-100"
                                    >
                                        {item.label}
                                    </a>
                                ))
                            }
                        </div>
                    </div>
                </div>
                <div
                    class="mt-16 border-t border-blue-50/10 pt-8 sm:mt-20 lg:mt-24"
                >
                    <p class="text-xs leading-5 text-blue-50">
                        &copy; 2025 Super Revive. All rights reserved.
                    </p>
                </div>
            </div>
        </footer>
    </MaxWidthWrapper>
</div>
