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

const packages1 = [
    {
        title: "Fiber Connect",
        price: "44.99",
        description:
            "$34.99 for first year with autopay enrollment and paperless billing.",
        features: [
            "Up to 300 Mbps symmetrical speeds",
            "Perfect for multi-device households",
            "Smart WiFi network management",
            "Zero data limitations",
            "Free security essentials package",
        ],
        aos: {
            "data-aos": "fade-up",
            "data-aos-duration": "400",
        },
    },
    {
        title: "Fiber Select",
        price: "64.99",
        description:
            "$45.99 for first year with autopay enrollment and paperless billing.",
        features: [
            "Up to 500 Mbps symmetrical speeds",
            "$75 service credit (terms apply)",
            "Ideal for streaming, gaming & remote work",
            "Advanced whole-home WiFi coverage",
            "Premium network security features",
        ],
        aos: {
            "data-aos": "fade-up",
            "data-aos-duration": "600",
        },
        isMostPopular: true,
    },
    {
        title: "Fiber Premier",
        price: "84.99",
        description:
            "$69.99 for first year with autopay enrollment and paperless billing.",
        features: [
            "Up to 1 Gbps symmetrical speeds",
            "$225 service credit (terms apply)",
            "Ultimate performance for demanding households",
            "WiFi 6 equipment with extended coverage",
            "Premium tech support with priority scheduling",
        ],
        aos: {
            "data-aos": "fade-up",
            "data-aos-duration": "800",
        },
    },
];
---

<div class="grid place-items-center w-full gap-8 text-center">
    <Title title="Power your home with the best in Fiber Internet." 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="amber" ctaLink={CONTACT_LINK} />
            ))
        }
    </div>
</div>
