@extends('layouts.user')

@section('title', 'Layanan Kami - CV. Amelia Langgeng Jaya')

@section('content')

{{-- 1. Hero Section --}}
<div class="relative h-[300px] md:h-[400px] flex items-center justify-center overflow-hidden">
    <img src="{{ asset('images/cor-crown.jpeg') }}" 
         class="absolute inset-0 w-full h-full object-cover" 
         alt="Layanan CV Amelia Langgeng Jaya">
    
    <div class="absolute inset-0 bg-black/40"></div> 
    
    <div class="relative z-10 text-center">
        <h1 class="text-white text-4xl md:text-5xl font-bold tracking-tight drop-shadow-lg">Layanan Kami</h1>
    </div>
</div>

{{-- 2. Deskripsi & Grid Layanan --}}
<section class="py-16 bg-white">
    <div class="container mx-auto px-6">
        
        <div class="flex items-center gap-2 mb-4">
            <div class="w-10 h-[2px] bg-[#ff6b2b]"></div>
            <span class="text-[#001040] font-bold uppercase tracking-wider text-sm">Layanan Kami</span>
        </div>

        <h2 class="text-3xl md:text-4xl font-bold text-[#001040] mb-12 leading-tight">
            <span class="text-[#ff6b2b]">Solusi Profesional</span> <br>
            untuk Setiap Kebutuhan Proyek
        </h2>

        <div class="grid md:grid-cols-2 gap-8 max-w-6xl">
            @forelse($layanan as $item)
            <div class="bg-[#001040] p-10 shadow-xl border-b-4 border-[#ff6b2b] flex flex-col h-full hover:bg-[#001a57] transition-all duration-300 transform hover:-translate-y-1 group">
                <h3 class="text-white text-xl font-bold mb-6 min-h-[50px] border-b border-white/10 pb-4 uppercase tracking-tight">
                    {{ $item->nama_layanan }}
                </h3>
                
                <p class="text-blue-100 text-sm leading-relaxed mb-4 flex-grow italic opacity-80 group-hover:opacity-100 transition-opacity">
                    {!! nl2br(e($item->deskripsi_layanan)) !!}
                </p>
                
                {{-- Bagian Detail Service & Arrow sudah dihapus agar lebih bersih --}}
            </div>
            @empty
            <div class="col-span-full py-20 text-center bg-slate-50 rounded-xl border-2 border-dashed border-slate-200">
                <p class="text-slate-500 italic">Belum ada data layanan yang tersedia saat ini.</p>
            </div>
            @endforelse
        </div>
    </div>
</section>

{{-- 3. CTA Section --}}
<section class="py-12 bg-slate-50 border-t border-slate-200">
    <div class="container mx-auto px-6 text-center">
        <p class="text-[#001040] font-semibold mb-6">Butuh informasi lebih detail mengenai layanan kami?</p>
        <a href="{{ route('kontak') }}" class="inline-block bg-[#ff6b2b] hover:bg-orange-600 text-white px-12 py-4 font-bold uppercase tracking-widest transition-all shadow-lg active:scale-95">
            Hubungi Kami
        </a>
    </div>
</section>

@endsection