@extends('layouts.app')

@section('title', 'Our Services')

@section('content')
<!-- Hero Section -->
<section class="relative py-16 md:py-24 bg-gradient-to-br from-red-700 via-red-600 to-red-800 text-white overflow-hidden">
    <!-- Background Pattern -->
    <div class="absolute inset-0 opacity-10">
        <div class="absolute top-0 left-0 w-full h-full">
            <div class="absolute top-10 left-10 w-20 h-20 border border-white/30 rounded-full floating"></div>
            <div class="absolute bottom-20 right-20 w-32 h-32 border border-white/20 rounded-full floating" style="animation-delay: 2s;"></div>
            <div class="absolute top-1/3 right-1/4 w-16 h-16 border border-white/25 rounded-full floating" style="animation-delay: 4s;"></div>
        </div>
    </div>
    <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
    <div class="container mx-auto px-4 relative z-10 text-center max-w-3xl">
        <h1 class="text-4xl md:text-5xl font-bold mb-6">Our Services</h1>
        <p class="text-xl md:text-2xl opacity-90 leading-relaxed font-light">
            Comprehensive financial consulting services tailored to meet your unique needs and help you achieve your financial goals.
        </p>
    </div>
</section>

<!-- Practices Navigation -->
<section class="py-4 bg-white dark:bg-gray-800 sticky top-0 z-50 shadow-sm border-b border-gray-100 dark:border-gray-700">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap justify-center items-center gap-4 md:gap-8">
            @forelse($services as $index => $service)
                <a href="#service-{{ $service->id }}" 
                   class="service-nav-link relative px-3 py-3 text-sm md:text-base font-medium {{ $index === 0 ? 'service-nav-active' : 'text-gray-600 dark:text-gray-400' }} transition-all duration-300 hover:text-red-600 dark:hover:text-red-400 group">
                    <span class="relative z-10">{{ strtoupper($service->title) }}</span>
                    <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-red-600 dark:bg-red-500 transition-all duration-300 group-hover:w-full"></span>
                </a>
            @empty
                <span class="text-gray-500">No Services</span>
            @endforelse
        </div>
    </div>
</section>

<!-- What We Do Section -->
<section class="py-16 md:py-24 bg-gradient-to-b from-white to-gray-50 dark:from-gray-900 dark:to-gray-800 relative">
    <div class="container mx-auto px-4">
        <div class="text-center mb-16 md:mb-20">
            <h2 class="text-3xl md:text-4xl font-bold mb-4 text-gray-800 dark:text-white">What We Do</h2>
            <div class="w-20 h-1 bg-gradient-to-r from-red-600 to-red-500 mx-auto rounded-full mb-4"></div>
            <p class="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
                Discover our comprehensive range of professional services designed to meet your financial needs
            </p>
        </div>

        @forelse($services as $service)
        <div id="service-{{ $service->id }}" class="mb-8 scroll-mt-20">
            <div class="flex flex-col lg:flex-row bg-gray-200 rounded-lg overflow-hidden shadow-sm transition-all duration-500">
                
                <!-- Left: Image -->
                <div class="lg:w-1/3 bg-gray-100 flex items-center justify-center">
                    @if($service->image_url)
                        <img src="{{ $service->image_url }}" 
                             alt="{{ $service->title }}" 
                             class="w-full h-28 lg:h-40 object-cover">
                    @elseif(!empty($service->icon))
                        <div class="h-28 lg:h-40 w-full flex items-center justify-center bg-gradient-to-br from-red-500 to-red-700">
                            <i class="{{ $service->icon }} text-2xl text-white"></i>
                        </div>
                    @else
                        <div class="h-28 lg:h-40 w-full flex items-center justify-center bg-gradient-to-br from-red-500 to-red-700">
                            <i class="fas fa-cogs text-2xl text-white"></i>
                        </div>
                    @endif
                </div>

                <!-- Right: Content -->
                <div class="lg:w-2/3 p-4 flex flex-col justify-center relative bg-gray-200">
                    <!-- Icon -->
                    <div class="absolute top-3 right-3">
                        <div class="w-6 h-6 flex items-center justify-center rounded bg-white shadow text-red-600">
                            <i class="fas fa-handshake text-[10px]"></i>
                        </div>
                    </div>

                    <!-- Title -->
                    <h3 class="text-lg font-bold text-gray-900 mb-2">{{ $service->title }}</h3>
                    <p class="text-gray-800 leading-relaxed mb-4 text-sm">{{ $service->description }}</p>

                    <!-- Features (collapsible) -->
                    @if(!empty($service->features) && is_array($service->features))
                    <div class="service-features hidden max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
                        <ul class="space-y-1 mb-4 mt-2">
                            @foreach($service->features as $feature)
                                <li class="flex items-start space-x-2">
                                    <span class="w-4 h-4 flex items-center justify-center rounded-full bg-red-600 text-white text-[10px] mt-0.5">
                                        <i class="fas fa-check"></i>
                                    </span>
                                    <span class="text-gray-800 text-xs">
                                        {{ $feature['title'] ?? 'Feature Title' }}
                                        @if (!empty($feature['description']))
                                            <span class="block text-gray-600 text-[11px]">{{ $feature['description'] }}</span>
                                        @endif
                                    </span>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                    @endif

                    <!-- CTA -->
                    <button type="button" 
                            class="toggle-features inline-flex items-center font-semibold text-red-600 hover:text-red-700 transition text-xs">
                        LEARN MORE
                        <svg class="w-3 h-3 ml-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                                  d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
        @empty
            <div class="text-center py-12">
                <p class="text-gray-500">No services available.</p>
            </div>
        @endforelse
    </div>
</section>

<!-- CTA Section -->
<section class="py-16 md:py-24 bg-gradient-to-r from-red-700 via-red-600 to-red-800 text-white relative">
    <div class="container mx-auto px-4 text-center">
        <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Get Started?</h2>
        <p class="text-xl max-w-2xl mx-auto mb-10 opacity-90 font-light">
            Contact us today to schedule a consultation and learn how our services can benefit you.
        </p>
        <div class="flex flex-col sm:flex-row justify-center gap-4">
            <a href="{{ route('contact') }}" 
               class="inline-flex items-center bg-white text-red-600 font-semibold px-8 py-4 rounded-xl transition hover:-translate-y-1 hover:shadow-xl">
                Schedule a Consultation
            </a>
            <a href="{{ route('about') }}" 
               class="inline-flex items-center border-2 border-white/70 text-white font-medium px-8 py-4 rounded-xl transition hover:-translate-y-1 hover:bg-white/10">
                Learn More About Us
            </a>
        </div>
    </div>
</section>

<style>
    html { scroll-behavior: smooth; }
    .service-nav-active { color: #dc2626 !important; }
    .service-nav-active span:last-child { width: 100% !important; }
    .dark .service-nav-active { color: #f87171 !important; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } }
    .floating { animation: float 6s ease-in-out infinite; }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Navigation highlight on scroll
    const sections = document.querySelectorAll('div[id^="service-"]');
    const navLinks = document.querySelectorAll('.service-nav-link');
    function updateActiveNav() {
        let current = '';
        sections.forEach(section => {
            const sectionTop = section.offsetTop;
            const sectionHeight = section.clientHeight;
            if (scrollY >= (sectionTop - 150) && scrollY < (sectionTop + sectionHeight - 150)) {
                current = section.getAttribute('id');
            }
        });
        navLinks.forEach(link => {
            link.classList.remove('service-nav-active');
            if (link.getAttribute('href') === `#${current}`) {
                link.classList.add('service-nav-active');
            }
        });
    }
    window.addEventListener('scroll', updateActiveNav);

    // Smooth scroll
    navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const targetSection = document.querySelector(this.getAttribute('href'));
            if (targetSection) {
                window.scrollTo({ top: targetSection.offsetTop - 100, behavior: 'smooth' });
            }
        });
    });

    // Expand/collapse features
    document.querySelectorAll('.toggle-features').forEach(btn => {
        btn.addEventListener('click', function() {
            const parent = this.closest('.flex');
            const features = parent.querySelector('.service-features');
            if (!features) return;

            if (features.classList.contains('hidden')) {
                features.classList.remove('hidden');
                features.style.maxHeight = features.scrollHeight + "px";
                this.innerHTML = 'SHOW LESS <svg class="w-3 h-3 ml-1 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7-7 7"/></svg>';
            } else {
                features.style.maxHeight = "0px";
                setTimeout(() => features.classList.add('hidden'), 400);
                this.innerHTML = 'LEARN MORE <svg class="w-3 h-3 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7-7 7"/></svg>';
            }
        });
    });
});
</script>
@endsection