@extends('layouts.app')
@php $active_page = 'home'; @endphp

@section('content')
<!-- Flash Message Toast -->
<div x-data="{ show: !sessionStorage.getItem('welcomeMessageShown') }" 
     x-show="show" 
     x-cloak 
     x-init="if (show) { sessionStorage.setItem('welcomeMessageShown', 'true'); setTimeout(() => show = false, 5000); }"
     x-transition:enter="transition ease-out duration-300"
     x-transition:enter-start="translate-y-4 opacity-0 scale-95"
     x-transition:enter-end="translate-y-0 opacity-100 scale-100"
     x-transition:leave="transition ease-in duration-300"
     x-transition:leave-start="opacity-100 scale-100"
     x-transition:leave-end="opacity-0 scale-95"
     class="fixed bottom-6 right-6 z-[100] flex items-center gap-4 px-6 py-4 rounded-2xl shadow-2xl backdrop-blur-md border max-w-sm w-full bg-slate-900/90 text-white border-white/10">
    
    <div class="flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center bg-white/10 text-xl">
        <span class="animate-wave origin-[70%_70%] inline-block">👋</span>
    </div>

    <div class="flex-1">
        <h4 class="font-bold text-sm mb-0.5">Welcome</h4>
        <p class="text-xs opacity-90 leading-relaxed">{{ $settings['welcome_message'] ?? 'Welcome to innovative scheme' }}</p>
    </div>

    <button @click="show = false" class="flex-shrink-0 transition-opacity hover:opacity-70 focus:outline-none ml-2">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
    </button>
</div>

<!-- Hero Section -->
<section id="home" class="relative min-h-screen flex items-center pt-20 bg-slate-50 overflow-hidden">
    <!-- Abstract Background -->
    <div class="absolute inset-0">
        <div class="absolute -top-[20%] -right-[10%] w-[70%] h-[70%] rounded-full bg-brand-primary/20 blur-3xl"
             :style="`transform: translateY(${scrollY * 0.2}px)`"></div>
        <div class="absolute top-[40%] -left-[10%] w-[50%] h-[50%] rounded-full bg-brand-accent/10 blur-3xl"
             :style="`transform: translateY(${scrollY * -0.1}px)`"></div>
        <div class="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20"></div>
    </div>
    
    <div class="container mx-auto px-6 relative z-10 grid lg:grid-cols-2 gap-12 items-center">
        <div class="text-left animate-fade-in-up">
            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-brand-accent text-xs font-bold uppercase tracking-wider mb-6">
                <span class="w-2 h-2 rounded-full bg-brand-accent animate-pulse"></span>
                {{ $settings['hero_tagline'] ?? 'Inventive Minds, Creative Solutions' }}
            </div>
            <h1 class="text-5xl md:text-7xl font-extrabold text-slate-900 mb-6 leading-tight">
                {!! $settings['hero_headline'] ?? 'Vision Meets <br><span class="inline-block overflow-hidden whitespace-nowrap border-r-4 border-brand-primary animate-typing text-transparent bg-clip-text bg-gradient-to-r from-brand-accent to-brand-primary align-bottom">Innovation.</span>' !!}
            </h1>
            <p class="text-lg text-slate-600 mb-8 max-w-lg leading-relaxed">
                {{ $settings['hero_subtext'] ?? 'We empower organizations to transform and grow sustainably in the modern digital economy.' }}
            </p>
            <div class="flex flex-wrap gap-4">
                <a href="#divisions" class="px-8 py-4 bg-brand-primary text-white rounded-full font-bold hover:bg-blue-600 transition shadow-lg shadow-blue-600/25">Our Services</a>
                <a href="{{ route('contact') }}" class="px-8 py-4 bg-brand-secondary text-white rounded-full font-bold hover:bg-orange-600 transition shadow-lg shadow-orange-500/30">Get in Touch</a>
            </div>
        </div>
        <!-- Hero Image/Graphic -->
        <div class="relative hidden lg:block">
            <div class="relative z-10 rounded-2xl overflow-hidden shadow-2xl border border-white/10 h-[600px]" 
                 x-data='{
                    activeSlide: 0,
                    slides: @json($slides->pluck("image_url")->map(fn($url) => str_starts_with($url, 'http') ? $url : asset($url))),
                    init() {
                        setInterval(() => {
                            if (this.slides.length > 0) {
                                this.activeSlide = (this.activeSlide + 1) % this.slides.length;
                            }
                        }, 5000);
                    }
                 }'>
                
                <template x-for="(slide, index) in slides" :key="index">
                    <img :src="slide" alt="Hero Slide" 
                         class="absolute inset-0 w-full h-full object-cover"
                         x-show="activeSlide === index"
                         x-transition:enter="transition ease-out duration-1000"
                         x-transition:enter-start="opacity-0 scale-105" x-transition:enter-end="opacity-100 scale-100"
                         x-transition:leave="transition ease-in duration-1000"
                         x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95">
                </template>

                <!-- Navigation Arrows -->
                <button @click="activeSlide = activeSlide === 0 ? slides.length - 1 : activeSlide - 1" class="absolute left-4 top-1/2 transform -translate-y-1/2 z-30 bg-black/20 hover:bg-black/40 text-white p-2 rounded-full backdrop-blur-sm transition border border-white/10">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
                </button>
                
                <button @click="activeSlide = (activeSlide + 1) % slides.length" class="absolute right-4 top-1/2 transform -translate-y-1/2 z-30 bg-black/20 hover:bg-black/40 text-white p-2 rounded-full backdrop-blur-sm transition border border-white/10">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
                </button>

                <!-- Floating Card -->
                <div class="absolute bottom-6 left-6 right-6 bg-white/90 backdrop-blur p-4 rounded-xl shadow-lg flex items-center gap-4 z-20">
                    <div class="bg-brand-primary/10 p-3 rounded-lg text-brand-primary">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                    </div>
                    <div>
                        <p class="text-xs text-slate-500 uppercase font-bold">Powering Growth</p>
                        <p class="text-slate-900 font-bold">Digital Transformation Experts</p>
                    </div>
                </div>
            </div>
            <!-- Decorative Elements -->
            <div class="absolute -z-10 top-10 -right-10 w-full h-full border-2 border-white/5 rounded-2xl"></div>
        </div>
    </div>
</section>

<!-- About Section -->
<section id="about" class="py-24 bg-white">
    <div class="container mx-auto px-6 reveal">
        <div class="flex flex-col lg:flex-row gap-16 items-center">
            <div class="lg:w-1/2 relative">
                <div class="grid grid-cols-2 gap-4">
                    <img src="https://images.unsplash.com/photo-1552664730-d307ca884978?auto=format&fit=crop&w=400&q=80" loading="lazy" class="rounded-2xl shadow-lg w-full h-64 object-cover mt-8" alt="Team Meeting">
                    <img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?auto=format&fit=crop&w=400&q=80" loading="lazy" class="rounded-2xl shadow-lg w-full h-64 object-cover" alt="Strategy Session">
                </div>
                <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-brand-dark text-white p-6 rounded-full shadow-xl text-center w-32 h-32 flex flex-col justify-center items-center border-4 border-white">
                    <span class="text-3xl font-bold">{{ $divisions->count() }}+</span>
                    <span class="text-xs uppercase tracking-wide">Divisions</span>
                </div>
            </div>
            <div class="lg:w-1/2">
                <h2 class="text-sm font-bold text-brand-primary uppercase tracking-widest mb-2">About ECS</h2>
                <h3 class="text-3xl md:text-4xl font-bold text-slate-900 mb-6">{{ $settings['about_heading'] ?? 'Integrated Solutions for a Complex World' }}</h3>
                <p class="text-slate-600 mb-6 leading-relaxed">
                    {!! nl2br(e($settings['about_text'] ?? '')) !!}
                </p>
                <div class="space-y-4">
                    <div class="flex items-start gap-4">
                        <div class="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center text-brand-primary shrink-0">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                        </div>
                        <div>
                            <h4 class="font-bold text-slate-900">Operational Excellence</h4>
                            <p class="text-sm text-slate-500">Streamlined processes for maximum efficiency.</p>
                        </div>
                    </div>
                    <div class="flex items-start gap-4">
                        <div class="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center text-brand-primary shrink-0">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                        </div>
                        <div>
                            <h4 class="font-bold text-slate-900">Innovation Driven</h4>
                            <p class="text-sm text-slate-500">Leveraging modern technology for sustainable growth.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Divisions (Cards) -->
<section id="divisions" class="py-24 bg-slate-50" x-data="divisions_data_provider">
    <div class="container mx-auto px-6 reveal">
        <div class="text-center max-w-2xl mx-auto mb-16">
            <h2 class="text-sm font-bold text-brand-primary uppercase tracking-widest mb-2">Our Expertise</h2>
            <h3 class="text-3xl md:text-4xl font-bold text-slate-900">Core Business Divisions</h3>
        </div>

        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            <template x-for="(div, index) in divisions" :key="index">
                <a :href="'{{ url('division') }}/' + div.id" class="group bg-white rounded-2xl p-8 shadow-sm hover:shadow-xl transition-all duration-300 cursor-pointer border border-slate-100 hover:-translate-y-1 relative overflow-hidden">
                    <div class="absolute top-0 right-0 w-24 h-24 bg-brand-primary/5 rounded-bl-full -mr-4 -mt-4 transition-all group-hover:bg-brand-primary/10"></div>
                    
                    <div class="w-14 h-14 rounded-xl bg-white border border-slate-100 shadow-sm flex items-center justify-center text-brand-primary mb-6 group-hover:scale-110 transition-transform relative z-10 p-3">
                        <div class="w-full h-full" x-html="div.icon"></div>
                    </div>
                    
                    <h4 class="text-lg font-bold text-slate-900 mb-3 group-hover:text-brand-primary transition-colors" x-text="div.title"></h4>
                    <p class="text-sm text-slate-500 leading-relaxed mb-6" x-text="div.desc"></p>
                    
                    <div class="flex items-center text-brand-primary text-sm font-bold">
                        <span>Explore</span>
                        <svg class="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
                    </div>
                </a>
            </template>
        </div>
    </div>

    <!-- Division Modal -->
    <div x-show="modalOpen" class="fixed inset-0 z-[60] overflow-y-auto" x-cloak>
        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
            <div x-show="modalOpen" x-transition.opacity class="fixed inset-0 bg-slate-900/80 backdrop-blur-sm transition-opacity" @click="modalOpen = false"></div>
            <span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>
            <div x-show="modalOpen" x-transition.scale class="inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg w-full relative">
                <button @click="modalOpen = false" class="absolute top-4 right-4 text-slate-400 hover:text-slate-600">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                </button>
                <div class="p-8">
                    <div class="w-12 h-12 rounded-lg bg-brand-primary/10 text-brand-primary flex items-center justify-center mb-4 p-2.5">
                        <div class="w-full h-full" x-html="activeDivision?.icon"></div>
                    </div>
                    <h3 class="text-2xl font-bold text-slate-900 mb-2" x-text="activeDivision?.title"></h3>
                    <p class="text-slate-600 mb-6" x-text="activeDivision?.desc"></p>
                    <div class="bg-slate-50 rounded-xl p-5">
                        <h4 class="font-bold text-xs uppercase text-slate-400 mb-3">Key Services</h4>
                        <ul class="space-y-2">
                            <template x-for="service in activeDivision?.services">
                                <li class="flex items-center text-sm text-slate-700">
                                    <svg class="w-4 h-4 text-brand-accent mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                                    <span x-text="service"></span>
                                </li>
                            </template>
                        </ul>
                    </div>
                </div>
                <div class="bg-slate-50 px-8 py-4 flex justify-end gap-3">
                    <button type="button" class="px-4 py-2 rounded-lg text-slate-600 hover:bg-slate-200 font-medium text-sm transition" @click="modalOpen = false">Close</button>
                    <a href="{{ route('contact') }}" class="px-4 py-2 rounded-lg bg-brand-primary text-white font-medium text-sm hover:bg-blue-600 transition shadow-lg shadow-blue-500/30">Request Quote</a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Portfolio (Grid) -->
<section id="portfolio" class="py-24 bg-white" x-data="portfolio" x-init="activeCategory = 'all'">
    <div class="container mx-auto px-6 reveal">
        <div class="flex flex-col md:flex-row justify-between items-end mb-12">
            <div>
                <h2 class="text-sm font-bold text-brand-primary uppercase tracking-widest mb-2">Portfolio</h2>
                <h3 class="text-3xl md:text-4xl font-bold text-slate-900">Featured Projects</h3>
            </div>
            <a href="{{ route('contact') }}" class="hidden md:inline-flex items-center font-bold text-brand-primary hover:text-brand-accent transition mt-4 md:mt-0">
                Start a Project <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
            </a>
        </div>

        <!-- Filter Bar -->
        <div class="flex flex-wrap gap-3 mb-10">
            <button @click="activeCategory = 'all'" :class="activeCategory === 'all' ? 'bg-brand-primary text-white border-brand-primary' : 'bg-white text-slate-600 border-slate-200 hover:border-brand-primary hover:text-brand-primary'" class="px-5 py-2 rounded-full border text-sm font-bold transition-all">All</button>
                @foreach($portfolio_items->pluck('portfolioCategory')->unique('id')->filter() as $cat)
                    <button @click="activeCategory = '{{ $cat->slug }}'"
                            :class="activeCategory === '{{ $cat->slug }}' ? 'bg-brand-primary text-white shadow-lg shadow-brand-primary/30' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'"
                            class="px-8 py-3 rounded-xl font-bold transition-all duration-300 transform hover:-translate-y-1">
                        {{ $cat->name }}
                    </button>
                @endforeach
        </div>

        <!-- Portfolio Grid -->
        <div class="grid md:grid-cols-3 gap-8">
            <template x-for="item in items" :key="item.title">
                <div x-show="activeCategory === 'all' || activeCategory === item.category" x-transition.scale.origin.center class="group relative rounded-2xl overflow-hidden cursor-pointer">
                    <img :src="item.imageUrl" :alt="item.title" loading="lazy" class="w-full h-80 object-cover transition-transform duration-700 group-hover:scale-105">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-90"></div>
                    <div class="absolute bottom-0 left-0 p-8 translate-y-4 group-hover:translate-y-0 transition duration-300">
                        <span class="text-brand-accent text-xs font-bold uppercase tracking-wider mb-2 block" x-text="item.category"></span>
                        <h3 class="text-xl font-bold text-white mb-2" x-text="item.title"></h3>
                        <p class="text-slate-300 text-sm opacity-0 group-hover:opacity-100 transition duration-300 delay-100 line-clamp-3" x-text="item.description"></p>
                        <button @click="activeItem = item; modalOpen = true" class="mt-4 inline-flex items-center text-brand-accent text-sm font-bold opacity-0 group-hover:opacity-100 transition duration-300 delay-200 hover:text-white">
                            Read More <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
                        </button>
                    </div>
                </div>
            </template>
        </div>

        <!-- Empty/Sparse Portfolio State -->
        <template x-if="items.length === 0">
            <div class="text-center py-16">
                <div class="w-16 h-16 mx-auto mb-6 rounded-full bg-brand-light flex items-center justify-center text-brand-primary">
                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
                </div>
                <h4 class="text-xl font-bold text-slate-900 mb-2">Portfolio Coming Soon</h4>
                <p class="text-slate-500 max-w-md mx-auto">We're curating our best work. In the meantime, <a href="{{ route('contact') }}" class="text-brand-primary font-bold hover:underline">contact us</a> to discuss your project.</p>
            </div>
        </template>

        <!-- Portfolio Modal -->
        <div x-show="modalOpen" class="fixed inset-0 z-[60] overflow-y-auto" x-cloak>
            <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
                <div x-show="modalOpen" x-transition.opacity class="fixed inset-0 bg-slate-900/80 backdrop-blur-sm transition-opacity" @click="modalOpen = false"></div>
                <span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>
                <div x-show="modalOpen" x-transition.scale class="inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl w-full relative">
                    <button @click="modalOpen = false" class="absolute top-4 right-4 z-10 p-2 bg-black/50 text-white rounded-full hover:bg-black/70 transition">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                    </button>
                    <div class="relative h-64 sm:h-80">
                        <img :src="activeItem?.imageUrl" :alt="activeItem?.title" class="w-full h-full object-cover">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                        <div class="absolute bottom-6 left-6 text-white">
                            <span class="text-brand-accent text-xs font-bold uppercase tracking-wider mb-2 block" x-text="activeItem?.category"></span>
                            <h3 class="text-3xl font-bold" x-text="activeItem?.title"></h3>
                        </div>
                    </div>
                    <div class="p-8">
                        <h4 class="font-bold text-slate-900 mb-4">Project Details</h4>
                        <p class="text-slate-600 leading-relaxed mb-6 whitespace-pre-line" x-text="activeItem?.description"></p>
                        <div class="bg-slate-50 rounded-xl p-5 border border-slate-100 flex justify-between items-center">
                            <div class="text-sm text-slate-500">Interested in a similar project?</div>
                            <a href="{{ route('contact') }}" class="px-6 py-2 rounded-lg bg-brand-primary text-white font-medium text-sm hover:bg-brand-accent transition shadow-lg shadow-brand-primary/30">Contact Us</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Testimonials Section -->
<section class="py-24 bg-slate-50">
    <div class="container mx-auto px-6 reveal">
        <div class="text-center max-w-3xl mx-auto mb-16">
            <h2 class="text-sm font-bold text-brand-primary uppercase tracking-widest mb-2">Testimonials</h2>
            <h3 class="text-3xl md:text-4xl font-bold text-slate-900">Trusted by Partners</h3>
        </div>
        <div class="grid md:grid-cols-3 gap-8">
            @if (count($testimonials) === 0)
                <p class="text-center col-span-3 text-slate-500">Testimonials coming soon.</p>
            @else
                @foreach ($testimonials as $testimonial)
                <div class="bg-white p-8 rounded-2xl shadow-sm border border-slate-100 relative hover:-translate-y-1 transition-transform duration-300">
                    <svg class="w-10 h-10 text-brand-primary/20 absolute top-6 left-6" fill="currentColor" viewBox="0 0 24 24"><path d="M14.017 21L14.017 18C14.017 16.8954 14.9124 16 16.017 16H19.017C19.5693 16 20.017 15.5523 20.017 15V9C20.017 8.44772 19.5693 8 19.017 8H15.017C14.4647 8 14.017 8.44772 14.017 9V11C14.017 11.5523 13.5693 12 13.017 12H12.017V5H22.017V15C22.017 18.3137 19.3307 21 16.017 21H14.017ZM5.0166 21L5.0166 18C5.0166 16.8954 5.91203 16 7.0166 16H10.0166C10.5689 16 11.0166 15.5523 11.0166 15V9C11.0166 8.44772 10.5689 8 10.0166 8H6.0166C5.4643 8 5.0166 8.44772 5.0166 9V11C5.0166 11.5523 4.56889 12 4.0166 12H3.0166V5H13.0166V15C13.0166 18.3137 10.3303 21 7.0166 21H5.0166Z"></path></svg>
                    <p class="text-slate-600 mb-6 relative z-10 pt-8 italic">"{{ $testimonial->content }}"</p>
                    <div>
                        <h4 class="font-bold text-sm text-slate-900">{{ $testimonial->client_name }}</h4>
                        <p class="text-xs text-slate-500">{{ $testimonial->client_role }}</p>
                    </div>
                </div>
                @endforeach
            @endif
        </div>
    </div>
</section>

<!-- FAQ Section -->
<section class="py-24 bg-white">
    <div class="container mx-auto px-6 max-w-3xl reveal">
        <div class="text-center mb-12">
            <h2 class="text-sm font-bold text-brand-primary uppercase tracking-widest mb-2">FAQ</h2>
            <h3 class="text-3xl font-bold text-slate-900">Frequently Asked Questions</h3>
        </div>
        <div class="space-y-4" x-data="{ active: null }">
            @if ($faqs->isEmpty())
                <p class="text-center text-slate-500">No FAQs available at the moment.</p>
            @else
                @foreach ($faqs as $index => $faq)
                <div class="border border-slate-200 rounded-xl overflow-hidden">
                    <button @click="active = active === {{ $index }} ? null : {{ $index }}" class="w-full flex justify-between items-center p-5 bg-slate-50 hover:bg-slate-100 transition text-left font-semibold text-slate-800">
                        <span>{{ $faq->question }}</span>
                        <svg class="w-5 h-5 transform transition-transform duration-300" :class="active === {{ $index }} ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                    </button>
                    <div x-show="active === {{ $index }}" x-collapse class="p-5 bg-white text-slate-600 text-sm leading-relaxed border-t border-slate-100">
                        {!! nl2br(e($faq->answer)) !!}
                    </div>
                </div>
                @endforeach
            @endif
        </div>
    </div>
</section>

<!-- Partners & Clients Section -->
@if($partners->isNotEmpty())
<section class="py-24 bg-slate-50 relative overflow-hidden">
    <div class="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-[0.03]"></div>
    <div class="container mx-auto px-6 relative z-10 reveal">
        <div class="text-center max-w-3xl mx-auto mb-16">
            <h2 class="text-sm font-bold text-brand-primary uppercase tracking-[0.2em] mb-3">Stronger Together</h2>
            <h3 class="text-3xl md:text-4xl font-extrabold text-slate-900 tracking-tight">Our Partners & <span class="text-transparent bg-clip-text bg-gradient-to-r from-brand-primary to-brand-secondary">Clients</span></h3>
            <div class="w-12 h-1 bg-brand-accent mx-auto mt-6 rounded-full opacity-50"></div>
        </div>
        
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6 md:gap-10">
            @foreach($partners as $partner)
                <div class="group bg-white rounded-2xl p-6 shadow-sm hover:shadow-xl hover:shadow-brand-primary/5 border border-slate-100 transition-all duration-500 flex items-center justify-center aspect-square hover:-translate-y-2">
                    @if($partner->website_url)
                        <a href="{{ $partner->website_url }}" target="_blank" rel="noopener noreferrer" class="w-full h-full flex items-center justify-center">
                    @endif
                    <img src="{{ asset($partner->logo_path) }}" 
                         alt="{{ $partner->name }}" 
                         title="{{ $partner->name }}"
                         class="max-w-full max-h-full object-contain filter grayscale group-hover:grayscale-0 group-hover:scale-110 transition-all duration-500 opacity-60 group-hover:opacity-100">
                    @if($partner->website_url)
                        </a>
                    @endif
                </div>
            @endforeach
        </div>
    </div>
</section>
@endif

<!-- Contact Info Section (Simplified) -->
<section id="contact" class="py-24 bg-brand-dark relative overflow-hidden">
    <div class="absolute top-0 right-0 w-1/2 h-full bg-brand-primary/5 skew-x-12"></div>
    
    <div class="container mx-auto px-6 relative z-10 reveal">
        <div class="max-w-4xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-sm font-bold text-brand-accent uppercase tracking-widest mb-2">Get In Touch</h2>
                <h3 class="text-4xl md:text-5xl font-bold text-white mb-6">Let's Build Something Great</h3>
                <p class="text-slate-400 text-lg max-w-2xl mx-auto">
                    Ready to discuss your next project? Our team of experts is standing by to provide the custom solutions you need.
                </p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <div class="bg-white/5 backdrop-blur-sm border border-white/10 p-10 rounded-3xl flex flex-col items-center text-center group hover:bg-white/10 transition-colors">
                    <div class="w-16 h-16 rounded-2xl bg-brand-accent/20 flex items-center justify-center text-brand-accent mb-6 group-hover:scale-110 transition-transform">
                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                    </div>
                    <h4 class="font-bold text-xl text-white mb-2">Our Headquarters</h4>
                    <p class="text-slate-400 leading-relaxed">{{ $settings['contact_address'] ?? 'Dar es Salaam, Tanzania' }}</p>
                </div>

                <div class="bg-white/5 backdrop-blur-sm border border-white/10 p-10 rounded-3xl flex flex-col items-center text-center group hover:bg-white/10 transition-colors">
                    <div class="w-16 h-16 rounded-2xl bg-brand-primary/20 flex items-center justify-center text-brand-primary mb-6 group-hover:scale-110 transition-transform">
                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
                    </div>
                    <h4 class="font-bold text-xl text-white mb-2">Email Address</h4>
                    <p class="text-slate-400 leading-relaxed">{{ $settings['contact_email'] ?? 'info@extensivecreativity.com' }}</p>
                </div>
            </div>

            <div class="text-center">
                <a href="{{ route('contact') }}" class="inline-flex items-center gap-3 px-10 py-5 bg-brand-primary text-white font-bold rounded-2xl hover:bg-brand-accent transition shadow-xl shadow-brand-primary/20">
                    Send us a Message
                    <svg class="w-5 h-5" 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>
                </a>
            </div>
        </div>
    </div>
</section>
@endsection

@push('extra_scripts')
@php
    $divisionsJson = $divisions->map(function($d) {
        return [
            'id' => $d->id,
            'title' => $d->title,
            'desc' => $d->description,
            'icon' => \App\Helpers\SvgHelper::sanitize($d->icon ?? ''),
            'services' => array_map('trim', explode(',', $d->services ?? ''))
        ];
    })->toArray();

    $portfolioJson = $portfolio_items->map(function($item) {
        return [
            'category' => $item->portfolioCategory->slug ?? 'all',
            'categoryName' => $item->portfolioCategory->name ?? 'Uncategorized',
            'title' => $item->title,
            'description' => $item->description,
            'imageUrl' => asset($item->image_path)
        ];
    })->toArray();
@endphp
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('divisions_data_provider', () => ({
            activeDivision: null,
            modalOpen: false,
            divisions: @json($divisionsJson)
        }));

        Alpine.data('portfolio', () => ({
            activeCategory: 'all',
            modalOpen: false,
            activeItem: null,
            items: @json($portfolioJson),
            get categories() {
                return [...new Set(this.items.map(i => i.category))];
            }
        }));
    });
</script>
@endpush
