@php
$services = $services ?? [
    [
        'icon' => 'fas fa-laptop-code',
        'title' => 'Web Development',
        'description' => 'Custom websites tailored to your business needs',
        'link' => '#'
    ],
    [
        'icon' => 'fas fa-mobile-alt',
        'title' => 'Mobile Solutions',
        'description' => 'Responsive designs that work on all devices',
        'link' => '#'
    ],
    [
        'icon' => 'fas fa-cogs',
        'title' => 'System Integration',
        'description' => 'Seamless integration with your existing systems',
        'link' => '#'
    ],
    [
        'icon' => 'fas fa-headset',
        'title' => '24/7 Support',
        'description' => 'Round-the-clock assistance when you need it',
        'link' => '#'
    ]
];
@endphp

<section class="services-section py-5">
    <div class="container">
        <div class="row align-items-center mb-5">
            <div class="col-lg-6" data-aos="fade-right">
                <h2 class="section-title">{{ $servicesTitle ?? 'Our Services' }}</h2>
                <p class="section-description mb-4">{{ $servicesDescription ?? 'We offer comprehensive solutions designed to help your business thrive in the digital age.' }}</p>
                @if(isset($servicesButton))
                <a href="{{ $servicesButtonLink ?? '#' }}" class="btn btn-primary">
                    {{ $servicesButton }}
                    <i class="fas fa-arrow-right ms-2"></i>
                </a>
                @endif
            </div>
            <div class="col-lg-6">
                <div class="row g-4">
                    @foreach($services as $service)
                    <div class="col-md-6" data-aos="fade-up" data-aos-delay="{{ $loop->index * 100 }}">
                        <div class="service-card">
                            <div class="service-icon">
                                <i class="{{ $service['icon'] }}"></i>
                            </div>
                            <h4 class="service-title">{{ $service['title'] }}</h4>
                            <p class="service-description">{{ $service['description'] }}</p>
                            @if($service['link'] !== '#')
                            <a href="{{ $service['link'] }}" class="service-link">
                                Learn more <i class="fas fa-chevron-right"></i>
                            </a>
                            @endif
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>

<style>
.services-section {
    background: white;
}

.section-description {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.8;
}

.service-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    height: 100%;
    transition: all 0.3s ease;
    border: 2px solid #f0f0f0;
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.service-card:hover::before {
    transform: scaleX(1);
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 102, 255, 0.15);
    border-color: var(--primary-color);
}

.service-icon {
    width: 60px;
    height: 60px;
    background: rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.service-icon i {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.service-card:hover .service-icon {
    background: var(--gradient-primary);
}

.service-card:hover .service-icon i {
    color: white;
}

.service-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--dark-color);
    margin-bottom: 0.75rem;
}

.service-description {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.service-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.service-link:hover {
    color: var(--secondary-color);
}
</style>