<script>
    import './Services.css'

    const services = [
        {
            id: 1,
            title: 'Consulenza',
            description: 'Supporto strategico per la crescita della tua azienda',
            icon: '💼'
        },
        {
            id: 2,
            title: 'Sviluppo Web',
            description: 'Siti e applicazioni web moderne e performanti',
            icon: '🚀'
        },
        {
            id: 3,
            title: 'Analisi Dati',
            description: 'Insights approfonditi dai tuoi dati aziendali',
            icon: '📊'
        },
        {
            id: 4,
            title: 'Cloud Solutions',
            description: 'Migrazione e gestione dell\'infrastruttura cloud',
            icon: '☁️'
        }
    ]
</script>

<section class="services">
    <div class="services-container">
        <h2>I Nostri Servizi</h2>
        <div class="services-grid">
            {#each services as service (service.id)}
                <div class="service-card">
                    <div class="icon">{service.icon}</div>
                    <h3>{service.title}</h3>
                    <p>{service.description}</p>
                </div>
            {/each}
        </div>
    </div>
</section>