---
import Icon from "../Icon.astro";
import { type IconName } from "../../config/icons";
import { siteConfig } from "../../config/site";
import Section from "../Section.astro";

const features: {
    icon: IconName;
    variant: string;
    title: string;
    content: string;
}[] = [
    {
        icon: "bolt",
        ...siteConfig.whyUs.cards[0],
    },
    {
        icon: "slopfree",
        ...siteConfig.whyUs.cards[1],
    },
    {
        icon: "users",
        ...siteConfig.whyUs.cards[2],
    },
];

const variantStyles: Record<string, { bg: string; text: string }> = {
    primary: { bg: "bg-primary/10", text: "text-primary" },
    secondary: { bg: "bg-secondary/10", text: "text-secondary" },
    accent: { bg: "bg-accent/10", text: "text-accent" },
};
---

<Section id="about" title={siteConfig.whyUs.title} background="bg-base-200">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        {
            features.map((feature) => {
                const styles =
                    variantStyles[feature.variant] || variantStyles.primary;

                return (
                    <div class="group text-center p-8 rounded-2xl bg-base-200 border border-base-300/50 hover:border-primary/30 shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
                        <div
                            class:list={[
                                "w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300",
                                styles.bg,
                            ]}
                        >
                            <Icon
                                name={feature.icon}
                                class:list={["w-8 h-8", styles.text]}
                            />
                        </div>
                        <h3 class="text-xl font-bold text-base-content mb-3">
                            {feature.title}
                        </h3>
                        <p class="text-base-content/60 leading-relaxed">
                            {feature.content}
                        </p>
                    </div>
                );
            })
        }
    </div>

    <div
        class="mt-20 p-8 lg:p-12 rounded-2xl bg-linear-to-br from-neutral to-neutral/90"
    >
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-8">
            {
                siteConfig.whyUs.stats.map((stat) => (
                    <div class="text-center">
                        <div class="text-3xl lg:text-4xl font-bold text-neutral-content mb-2">
                            {stat.value}
                        </div>
                        <div class="text-neutral-content/60 text-sm font-medium">
                            {stat.label}
                        </div>
                    </div>
                ))
            }
        </div>
    </div>
</Section>