@extends('frontend.layouts.master')

@section('title', __('front.services.page_title') . ' - Novalynk')

@section('content')
<!-- Page Header -->
<section class="py-5 bg-light-custom">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto text-center" data-aos="fade-up">
                <h1 class="section-title">{{ __('front.services.page_title') }}</h1>
                <p class="section-subtitle mx-auto">{{ __('front.services.page_subtitle') }}</p>
            </div>
        </div>
    </div>
</section>

<!-- Services Grid -->
<section class="section-padding">
    <div class="container">
        <div class="row g-4">
            @foreach($services as $index => $service)
            <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="{{ $index * 100 }}">
                <div class="card-custom p-5 h-100">
                    <div style="width: 70px; height: 70px; background: linear-gradient(135deg, var(--light-blue), var(--white)); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem;">
                        <i class="{{ $service->icon ?? 'fa-solid fa-code' }}" style="font-size: 1.75rem; color: var(--primary-blue);"></i>
                    </div>
                    <h3 class="mb-3">{{ $service->name }}</h3>
                    <p style="color: var(--gray-600); margin-bottom: 1.5rem;">{{ $service->short_description }}</p>
                    <a href="{{ route('service.detail', $service->slug) }}" class="btn btn-primary-custom btn-sm">
                        {{ __('front.common.read_more') }} <i class="fa-solid fa-arrow-right ms-1"></i>
                    </a>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="cta-section section-padding">
    <div class="container">
        <div class="cta-content text-center">
            <h2 class="cta-title" data-aos="fade-up">{{ __('front.services.cta_title') }}</h2>
            <p class="cta-desc mx-auto" data-aos="fade-up">{{ __('front.services.cta_desc') }}</p>
            <a href="{{ route('contact') }}" class="btn btn-light btn-lg" data-aos="fade-up">
                {{ __('front.services.cta_button') }} <i class="fa-solid fa-arrow-right ms-2"></i>
            </a>
        </div>
    </div>
</section>
@endsection