---
import PricingCard from "@/components/molecules/pricing.card.astro";
import Title from "@/components/atoms/title";
import { CONTACT_LINK } from "@/lib/constants";

const packages1 = [
    {
        title: "Triple Play Essential",
        price: "89.97",
        description:
            "Perfect entry-level bundle featuring all your entertainment essentials.",
        features: [
            "125+ Channels with local programming",
            "Internet speeds up to 300 Mbps",
            "Unlimited nationwide calling with 28 premium features",
            "Free Spectrum TV app access",
            "HD programming included at no extra cost",
        ],
        aos: {
            "data-aos": "fade-up",
            "data-aos-duration": "400",
        },
    },
    {
        title: "Triple Play Select Plus",
        price: "119.97",
        description:
            "Enhanced entertainment package with upgraded speeds and programming.",
        features: [
            "175+ Channels including popular entertainment networks",
            "Internet speeds up to 500 Mbps",
            "Unlimited calling to U.S., Canada, and Mexico",
            "Cloud DVR service included",
            "Advanced WiFi network management",
        ],
        aos: {
            "data-aos": "fade-up",
            "data-aos-duration": "600",
        },
        isMostPopular: true,
    },
    {
        title: "Triple Play Premium",
        price: "139.97",
        description:
            "Ultimate connectivity suite with premium entertainment and maximum speed.",
        features: [
            "200+ Channels with premium movie networks",
            "Internet speeds up to 1 Gbps (where available)",
            "Unlimited international calling to 70+ destinations",
            "Enhanced security suite with identity protection",
            "Priority customer support and installation",
        ],
        aos: {
            "data-aos": "fade-up",
            "data-aos-duration": "800",
        },
    },
];
---

<div class="grid place-items-center w-full gap-8 text-center">
    <Title
        title="Bundle and save with an unbeatable offer on Spectrum services! "
        size="h1"
    />

    <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="lime" ctaLink={CONTACT_LINK} />
            ))
        }
    </div>
</div>
