---
import MaxWidthWrapper from "./other/max.width.wrapper";
import GridPattern from "@/components/atoms/grid.pattern";
import Title from "@/components/atoms/title";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { CONTACT_LINK } from "@/lib/constants";
import { Image } from "astro:assets";
---

<div class="flex flex-col gap-8">
    <div
        class="min-h-screen h-full w-full bg-lime-900 pt-32 grid place-items-center pb-32 md:pb-0"
    >
        <GridPattern
            width={30}
            height={30}
            x={-1}
            y={-1}
            strokeDasharray={"4 2"}
            className={cn(
                "[mask-image:radial-gradient(80vw_circle_at_center,white,transparent)] z-0",
            )}
        />
        <MaxWidthWrapper
            className="grid h-full w-full grid-cols-1 place-items-center md:grid-cols-2 gap-20 lg:gap-8 pb-24 md:pb-0 z-10"
        >
            <div
                class="flex flex-col gap-8 w-full"
                data-aos="zoom-in"
                data-aos-duration="400"
            >
                <div
                    class="flex flex-col gap-2 self-center max-w-md md:max-w-none"
                >
                    <h6 class="font-semibold text-lime-400 text-lg">
                        NO CONTRACTS | 30-DAY MONEY-BACK GUARANTEE
                    </h6>
                    <Title
                        title="Get Spectrum Internet®, TV & Voice for the Best Price"
                        color="white"
                        size="h1"
                    />
                </div>
                <div class="flex flex-col sm:flex-row gap-4">
                    <a href={CONTACT_LINK}>
                        <Button
                            size={"lg"}
                            className="w-full sm:w-max"
                            variant="lime"
                        >
                            Call Now
                        </Button>
                    </a>
                    <a href={"/#packages"}>
                        <Button
                            size={"lg"}
                            className="w-full sm:w-max"
                            variant={"muted"}
                        >
                            View Packages
                        </Button>
                    </a>
                </div>
            </div>
            <Image
                src={"/assets/hero-image.png"}
                alt="Spectrum services illustration"
                class={"w-full h-full object-contain max-w-lg lg:max-w-none"}
                width={300}
                height={500}
                data-aos="fade-up"
                data-aos-duration="500"
            />
        </MaxWidthWrapper>
    </div>
</div>
