'use client'

import { Target, CheckCircle, Shield, Briefcase, Headphones, TrendingUp } from 'lucide-react'
import { useContent } from '@/components/layout/content-provider'

const icons = [Target, CheckCircle, Shield, Briefcase, Headphones, TrendingUp]

export default function FeaturesIconGrid() {
    const content = useContent()
    const { featuresIconGrid } = content.pages.home

    return (
        <section className="py-12 md:py-16 lg:py-20 border-t border-border/50">
            <div className="mx-auto max-w-5xl space-y-6 px-6 md:space-y-10">
                <div className="relative z-10 mx-auto max-w-xl space-y-4 text-center md:space-y-6">
                    <h2 className="text-heading-2 text-balance font-semibold">{featuresIconGrid.heading}</h2>
                    <p className="text-body leading-relaxed text-muted-foreground">{featuresIconGrid.description}</p>
                </div>

                <div className="relative mx-auto grid max-w-4xl divide-x divide-y border border-border dark:border-primary/20 dark:divide-primary/10 *:p-12 sm:grid-cols-2 lg:grid-cols-3 *:transition-colors *:hover:bg-primary/5 dark:*:hover:bg-primary/5">
                    {featuresIconGrid.items.map((item, index) => {
                        const Icon = icons[index] ?? Target
                        return (
                            <div key={index} className="space-y-3">
                                <div className="flex items-center gap-2">
                                    <Icon className="size-4 text-primary dark:text-primary" />
                                    <h4 className="text-heading-5 font-medium">{item}</h4>
                                </div>
                            </div>
                        )
                    })}
                </div>
            </div>
        </section>
    )
}