@extends('layouts.app')

@section('title', 'Layanan Kami - Sundcode Nusantara')

@section('content')
    <header class="services-hero-section relative overflow-hidden" style="padding-top: 180px; padding-bottom: 80px; display: flex; align-items: center; justify-content: center; text-align: center;">
        <div class="hero-glow"></div>
        <div class="grid-overlay"></div>
        <div class="container relative z-10">
            <div style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
                <span class="section-tag animate-fade-in" style="margin-bottom: 20px; display: inline-flex; align-items: center; gap: 8px;">
                    <span style="font-size: 1.2rem;">🚀</span> Professional Services
                </span>
                <h1 class="hero-title text-gradient animate-slide-up" style="margin-bottom: 24px; font-size: clamp(2.5rem, 5vw, 4rem); letter-spacing: -0.02em; width: 100%;">
                    Solusi Teknologi Terintegrasi
                </h1>
                <p class="section-subtitle animate-slide-up" style="animation-delay: 0.1s; max-width: 700px; line-height: 1.8; opacity: 0.8; font-size: 1.15rem; margin: 0 auto;">
                    Kami menghadirkan keahlian teknis tingkat enterprise untuk membantu percepatan transformasi digital bisnis Anda melalui inovasi berkelanjutan.
                </p>
            </div>
        </div>
    </header>

    <section class="services-page py-24 relative overflow-hidden">
        <div class="container">
            <!-- Menggunakan class services-grid yang sudah ada di style.css -->
            <div class="services-grid">
                @foreach($services as $service)
                <div class="service-card glass p-8 flex flex-col items-start group hover-lift animate-slide-up" style="animation-delay: {{ 0.1 * ($loop->index + 1) }}s; text-align: left;">
                    <div class="feature-icon-box mb-6 group-hover:scale-110 group-hover:rotate-3 transition-all duration-500">
                        <img src="{{ asset($service->icon) }}" alt="{{ $service->title }}" class="w-6 h-6 brightness-0 invert">
                    </div>
                    <h3 class="text-2xl font-bold mb-3 group-hover:text-primary transition-colors duration-300" style="font-size: 1.5rem; line-height: 1.2;">{{ $service->title }}</h3>
                    <p class="text-base opacity-70 mb-8 leading-relaxed line-clamp-3" style="font-size: 0.95rem;">{{ $service->description }}</p>
                    
                    <div class="mt-auto w-full pt-6 border-t border-white/5">
                        <a href="{{ route('service.detail', $service->slug) }}" class="flex items-center justify-between text-sm font-semibold group/link" style="display: flex; justify-content: space-between; align-items: center; text-decoration: none; width: 100%;">
                            <span class="group-hover/link:text-primary transition-colors">Pelajari Selengkapnya</span>
                            <div class="w-10 h-10 rounded-full border border-white/10 flex items-center justify-center group-hover/link:border-primary group-hover/link:bg-primary/10 transition-all duration-300" style="width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center;">
                                <span class="group-hover/link:translate-x-0.5 transition-transform">→</span>
                            </div>
                        </a>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        
        <!-- Decorative Elements -->
        <div class="absolute top-0 left-0 w-full h-full pointer-events-none z-0">
            <div class="absolute top-1/4 -left-24 w-96 h-96 bg-primary/10 rounded-full blur-3xl"></div>
            <div class="absolute bottom-1/4 -right-24 w-96 h-96 bg-accent/10 rounded-full blur-3xl"></div>
        </div>
    </section>

    @include('components.cta')
@endsection

@push('styles')
<style>
    /* Mengatur grid secara manual karena style.css mungkin memiliki settingan berbeda */
    .services-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        margin-top: 20px;
    }

    @media (max-width: 1024px) {
        .services-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 768px) {
        .services-grid {
            grid-template-columns: 1fr;
        }
    }

    .grid-overlay {
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), 
                          linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
        background-size: 50px 50px;
        mask-image: radial-gradient(ellipse at center, black, transparent 80%);
        pointer-events: none;
    }

    .service-card {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        backdrop-filter: blur(10px);
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 40px;
        transition: all 0.4s ease;
    }

    .hover-lift:hover {
        transform: translateY(-12px);
        border-color: #6366F1;
        background: rgba(255, 255, 255, 0.05);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    }

    .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;  
        overflow: hidden;
    }

    .animate-slide-up {
        animation: slideUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
        opacity: 0;
    }

    @keyframes slideUp {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .animate-fade-in {
        animation: fadeIn 1s ease-out forwards;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .hero-title {
        font-size: 3.5rem;
        font-weight: 800;
        line-height: 1.1;
    }

    @media (max-width: 768px) {
        .hero-title {
            font-size: 2.5rem;
        }
    }
</style>
@endpush