---
import CallButton from "@/components/molecules/CallButton";
import PricingCard from "@/components/molecules/pricing.card.astro";
import { CONTACT_LINK } from "@/lib/constants";
import { cn } from "@/lib/utils";
import SectionHeading from "./atoms/section.heading";
import Title from "./atoms/title";
import MaxWidthWrapper from "./other/max.width.wrapper";

const packages1 = [
    {
        title: "Triple Play SELECT",
        price: "99.97",
        description: "Perfect for casual streaming and everyday entertainment.",
        features: [
            "125+ HD Channels",
            "Up to 300 Mbps Internet Speed",
            "FREE Spectrum TV® App",
            "FREE HD & 40,000+ On Demand titles",
            "FREE Internet modem & antivirus",
            "Unlimited nationwide calling",
            "28 premium calling features",
            "No data caps or speed throttling",
        ],
        aos: {
            "data-aos": "fade-up",
            "data-aos-duration": "400",
        },
    },
    {
        title: "Triple Play SILVER",
        price: "124.97",
        description:
            "Ideal for multi-device households and premium entertainment.",
        features: [
            "175+ HD Channels including HBO Max™",
            "Up to 500 Mbps Internet Speed",
            "FREE Spectrum TV® App with Cloud DVR",
            "FREE HD & 65,000+ On Demand titles",
            "Advanced WiFi router included",
            "Enhanced Internet security suite",
            "Unlimited nationwide & Mexico calling",
            "Priority customer support 24/7",
        ],
        aos: {
            "data-aos": "fade-up",
            "data-aos-duration": "600",
        },
        isMostPopular: true,
    },
    {
        title: "Triple Play GOLD",
        price: "144.97",
        description: "Ultimate entertainment package for power users.",
        features: [
            "200+ HD Channels + Premium Networks",
            "Up to 1 GIG Internet Speed",
            "FREE Spectrum TV® App with Extended DVR",
            "FREE HD & 85,000+ On Demand titles",
            "WiFi 6 router & range extender",
            "Premium security with parental controls",
            "Global unlimited calling to 30+ countries",
            "VIP technical support & installation",
        ],
        aos: {
            "data-aos": "fade-up",
            "data-aos-duration": "800",
        },
    },
];

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

const bgColor = variant === "blue" ? "bg-blue-50" : "bg-lime-50";
---

<div class={cn("w-full h-full py-32", bgColor)}>
    <MaxWidthWrapper id="packages" className="w-full space-y-20">
        <div class="grid place-items-center gap-2">
            <SectionHeading
                title="Choose the perfect plan for your home"
                subtitle="Our Packages"
            />
            <span class="text-gray-500">NO hidden fees. NO contracts.</span>
        </div>

        <div class="grid place-items-center w-full gap-8 text-center">
            <Title title="Internet Speeds" size="h2" color="primary" />

            <div
                class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-8"
            >
                {
                    packages1.map((item) => (
                        <PricingCard
                            {...item}
                            color={variant}
                            ctaLink={CONTACT_LINK}
                            page={page}
                        />
                    ))
                }
            </div>
        </div>

        <div class="grid place-items-center w-full gap-8 text-center">
            <Title
                title="Still not what you're looking for? Let's make you a package!"
                size="h2"
                color="primary"
            />

            <CallButton client:load variant={variant} page={page} />
        </div>
    </MaxWidthWrapper>
</div>
