---
import { cn } from "@/lib/utils";
import { Image } from "astro:assets";
import Title from "./atoms/title";
import MaxWidthWrapper from "./other/max.width.wrapper";

const stats = [
    { id: 0, title: "Customers Served", count: "3,500+" },
    { id: 1, title: "Average Savings", count: "$45/mo" },
    { id: 2, title: "Customer Satisfaction", count: "98%" },
];
---

<MaxWidthWrapper
    id="stats"
    className="grid h-full w-full grid-cols-1 place-items-center md:grid-cols-2 gap-20 lg:gap-8"
>
    <div
        class="flex flex-col gap-8"
        data-aos="fade-right"
        data-aos-durationn="400"
    >
        <div class="flex flex-col gap-2">
            <Title
                title="Helping Americans Get Better Spectrum Deals"
                color="primary"
                size="h2"
            />
        </div>

        <p>
            We've helped thousands of customers across the US get better deals
            on Spectrum services while taking the hassle out of billing. Our
            customers save an average of $45 per month and never worry about
            late payments.
        </p>

        <div
            class="grid grid-cols-1 sm:grid-cols-3 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-8"
        >
            {
                stats.map((stat) => (
                    <div
                        class={cn(
                            "flex flex-col items-start gap-2",
                            stat.id === 1 ? "md:ml-4" : "",
                        )}
                    >
                        <span class="text-4xl font-bold text-primary">
                            {stat.count}
                        </span>
                        <span class="text-lg font-medium">{stat.title}</span>
                    </div>
                ))
            }
        </div>
    </div>

    <Image
        src={"/assets/map-usa.jpeg"}
        alt="Service coverage across the US"
        class={"w-full h-full object-contain rounded-md max-w-lg lg:max-w-none"}
        width={500}
        height={500}
        data-aos="fade-up"
        data-aos-duration="500"
    />
</MaxWidthWrapper>
