'use client'

import {
    Globe,
    Briefcase,
    Building2,
    Landmark,
    Lightbulb,
    PiggyBank,
    Users
} from 'lucide-react'

export function SpecialServicesSection() {
    const items = [
        {
            title: 'Grenzgängerberatung',
            desc: 'Spezialisierte Beratung für grenzüberschreitende Einkommen und Arbeitsverhältnisse.',
            icon: <Globe className="w-8 h-8 text-primary"/>,
        },
        {
            title: 'Beratung von Existenzgründern',
            desc: 'Von der Geschäftsidee über den Businessplan bis zur steuerlichen Erfassung.',
            icon: <Briefcase className="w-8 h-8 text-primary"/>,
        },
        {
            title: 'Immobilienkaufberatung',
            desc: 'Begleitung beim Immobilienkauf – steuerliche Optimierung inklusive.',
            icon: <Building2 className="w-8 h-8 text-primary"/>,
        },
        {
            title: 'Begleitung bei Bankgesprächen',
            desc: 'Vorbereitung und Teilnahme an Finanzierungsgesprächen mit Ihrer Bank.',
            icon: <Landmark className="w-8 h-8 text-primary"/>,
        },
        {
            title: 'Steuergestaltung und -planung',
            desc: 'Vorausschauende Steueroptimierung für Unternehmen und Privatpersonen.',
            icon: <Lightbulb className="w-8 h-8 text-primary"/>,
        },
        {
            title: 'Betriebsprüfung begleiten',
            desc: 'Strategische Vorbereitung und persönliche Begleitung von Außenprüfungen.',
            icon: <Users className="w-8 h-8 text-primary"/>,
        },
        {
            title: 'Vererben & Schenken',
            desc: 'Steuerliche Gestaltung und Begleitung von Vermögensübertragungen.',
            icon: <PiggyBank className="w-8 h-8 text-primary"/>,
        },
    ]

    return (
        <section id="special-services" className="py-20 px-6 bg-muted/50 text-center">
            <h2 className="text-3xl font-bold mb-12">Spezialleistungen</h2>
            <div className="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto text-left">
                {items.map(({title, desc, icon}) => (
                    <div
                        key={title}
                        className="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition"
                    >
                        <div className="mb-4 flex justify-center">{icon}</div>
                        <h3 className="text-xl font-semibold mb-2 text-center">{title}</h3>
                        <p className="text-sm text-muted-foreground text-center">{desc}</p>
                    </div>
                ))}
            </div>
        </section>
    )
}