---
import {
    ADDRESS,
    CONTACT_EMAIL,
    getContactLink,
    getPhoneNumber,
    navLinks,
} from "@/lib/constants";
import { cn } from "@/lib/utils";
import Logo from "../atoms/logo";
import SpectrumAuthorizedResellerLogo from "../atoms/spectrum-authorized-reseller-logo";
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"
                                onclick="if (typeof gtag_report_conversion === 'function') { gtag_report_conversion(); }"
                            >
                                {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">
                        <div>
                            <SpectrumAuthorizedResellerLogo client:load />
                        </div>

                        <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"
                >
                    <div class="flex flex-col gap-8">
                        <p class="text-xs leading-5 text-blue-50">
                            &copy; 2025 Super Revive. All rights reserved.
                        </p>
                        <div
                            class="flex flex-col lg:flex-row gap-8 lg:gap-12 lg:justify-between"
                        >
                            <!-- Left Column - Spectrum Disclosure -->
                            <div
                                class="text-xs leading-5 text-blue-50/80 space-y-1 flex-1"
                            >
                                <p class="mt-2">
                                    This website is not operated by Spectrum.
                                </p>
                                <p>
                                    Spectrum websites are subject to the
                                    Spectrum Privacy Policy available at
                                    <a href="https://www.spectrum.com">
                                        Spectrum's website
                                    </a>
                                </p>
                                <p class="mt-2">
                                    The name Spectrum and the pathways logo are
                                    trademarks of Spectrum.
                                </p>
                                <p>
                                    Innovative Business Solutions is an
                                    authorized sales agent of Spectrum.
                                </p>
                            </div>

                            <!-- Right Column - IBS Information -->
                            <div
                                class="text-xs leading-5 text-blue-50/80 space-y-3 flex-1 lg:text-right lg:items-end lg:flex lg:flex-col"
                            >
                                <img
                                    src="/ibs.png"
                                    alt="Innovative Business Solutions"
                                    class="h-12 w-auto object-contain lg:ml-auto"
                                />
                                <p>
                                    Innovative Business Solutions is an
                                    authorized retailer of Spectrum and can be
                                    contacted at
                                    <a
                                        href="https://www.innovative-business.net/"
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        class="text-blue-300 hover:text-blue-200 underline"
                                    >
                                        https://www.innovative-business.net/
                                    </a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    </MaxWidthWrapper>
</div>
