---
import { siteConfig } from "../../config/site";
import { Icon } from "astro-icon/components";
import Section from "../Section.astro";

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

<Section
    id="services"
    background="bg-base-100"
    title={siteConfig.services.title}
>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
        {
            siteConfig.services.cards.map((card) => {
                const styles =
                    variantStyles[card.variant] || variantStyles.primary;

                return (
                    <div class="group card bg-base-100 border border-base-300/50 hover:border-primary/30 shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
                        <div class="card-body p-8">
                            <div class="flex items-start gap-5">
                                <div
                                    class:list={[
                                        "shrink-0 w-14 h-14 rounded-xl flex items-center justify-center transition-transform duration-300 group-hover:scale-110",
                                        styles,
                                    ]}
                                >
                                    <Icon name={card.icon} class="w-6 h-6" />
                                </div>
                                <div class="flex-1 space-y-3">
                                    <h3 class="text-xl font-bold text-base-content group-hover:text-primary transition-colors">
                                        {card.title}
                                    </h3>
                                    <p class="text-base-content/60 leading-relaxed">
                                        {card.content}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                );
            })
        }
    </div>
</Section>