---
import MaxWidthWrapper from "./other/max.width.wrapper";
import Title from "./atoms/title";
import CheckCircleIcon from "@/components/atoms/check.circle.icon.astro";
import { Image } from "astro:assets";
import CallButton from "./molecules/CallButton";

const {
    variant = "lime",
    logo,
    title = "Why Choose Net Fundable?",
    description = "Experience superior connectivity and entertainment with comprehensive service packages. Whether you're streaming, working, or staying connected with loved ones, we've got you covered.",
    benefits = [
        "No Contracts Required",
        "30-Day Money-Back Guarantee",
        "24/7 Customer Support",
        "Free HD & Equipment",
    ],
    buttonText = "Get Started Today",
    page,
} = Astro.props;
---

<MaxWidthWrapper
    id="why-choose-us"
    className="grid h-full w-full grid-cols-1 place-items-center md:grid-cols-2 gap-20 lg:gap-8"
>
    <Image
        src={"/assets/about-image.png"}
        width={300}
        height={400}
        alt="Provider features"
        class={"w-full h-auto object-contain max-w-lg lg:max-w-none"}
        data-aos="fade-right"
        data-aos-duration="500"
    />
    <div
        class="flex flex-col gap-8"
        data-aos="fade-left"
        data-aos-duration="400"
    >
        <img
            src={logo}
            alt="Logo"
            class={"h-14 w-max object-contain md:h-16 lg:h-20"}
        />

        <div class="flex flex-col gap-2">
            <Title title={title} color="primary" size="h2" />
        </div>

        <p>
            {description}
        </p>

        <div class="grid grid-cols-1 w-full gap-2 md:gap-4">
            <div
                class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 gap-2"
            >
                <div
                    class="flex items-center gap-2"
                    data-aos="zoom-in"
                    data-aos-duration="500"
                >
                    <CheckCircleIcon />
                    <span class="text-sm md:text-base lg:text-lg font-medium">
                        {benefits[0]}
                    </span>
                </div>
                <div
                    class="flex items-center gap-2"
                    data-aos="zoom-in"
                    data-aos-duration="600"
                >
                    <CheckCircleIcon />
                    <span class="text-sm md:text-base lg:text-lg font-medium">
                        {benefits[1]}
                    </span>
                </div>
            </div>

            <div
                class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 gap-2"
            >
                <div
                    class="flex items-center gap-2"
                    data-aos="zoom-in"
                    data-aos-duration="700"
                >
                    <CheckCircleIcon />
                    <span class="text-sm md:text-base lg:text-lg font-medium">
                        {benefits[2]}
                    </span>
                </div>
                <div
                    class="flex items-center gap-2"
                    data-aos="zoom-in"
                    data-aos-duration="800"
                >
                    <CheckCircleIcon />
                    <span class="text-sm md:text-base lg:text-lg font-medium">
                        {benefits[3]}
                    </span>
                </div>
            </div>
        </div>

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