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

@push('extra_head')
<title>{{ $division->title }} | Extensive Creativity Services Limited</title>
<meta name="description" content="{{ Str::limit($division->description, 150) }}">
@endpush

@php
    $services_list = array_map('trim', explode(',', $division->services));
    $related_projects = App\Models\PortfolioItem::latest()->take(2)->get();
@endphp

@section('content')
<main x-data>
    <!-- Division Hero -->
    <section class="relative pt-32 pb-20 bg-slate-50 overflow-hidden">
        <div class="container mx-auto px-6 relative z-10">
            <div class="max-w-3xl mx-auto text-center">
                <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-primary/10 text-brand-primary text-xs font-bold uppercase tracking-wider mb-6">
                    <div class="w-6 h-6 flex items-center justify-center text-brand-primary">
                        {!! App\Helpers\SvgHelper::sanitize($division->icon ?? '') !!}
                    </div>
                    Division
                </div>
                <h1 class="text-4xl md:text-6xl font-extrabold text-slate-900 mb-6 leading-tight">{{ $division->title }}</h1>
                <p class="text-lg text-slate-600 mb-8 max-w-2xl mx-auto leading-relaxed">
                    {{ $division->description }}
                </p>
            </div>
        </div>
    </section>

    <!-- Services -->
    <section class="py-24 bg-white">
        <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 Services</h2>
                <h3 class="text-3xl md:text-4xl font-bold text-slate-900">What We Offer</h3>
            </div>
            <div class="grid md:grid-cols-2 lg:grid-cols-2 gap-8 max-w-4xl mx-auto">
                @foreach ($services_list as $service)
                <div class="bg-slate-50/70 rounded-2xl p-8 border border-slate-100 hover:shadow-lg transition">
                    <h4 class="font-bold text-slate-900 text-lg mb-3">{{ $service }}</h4>
                    <p class="text-sm text-slate-500 leading-relaxed">Professional {{ strtolower($service) }} services tailored to your needs.</p>
                </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- Related Projects (Dynamic) -->
    @if ($related_projects->isNotEmpty())
    <section class="py-24 bg-slate-50">
        <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">Case Studies</h2>
                <h3 class="text-3xl md:text-4xl font-bold text-slate-900">Related Projects</h3>
            </div>
            <div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
                @foreach ($related_projects as $project)
                <a href="{{ route('portfolio.show', $project->id) }}" class="group relative rounded-2xl overflow-hidden cursor-pointer h-80 block">
                    <img src="{{ url($project->image_path) }}" alt="{{ $project->title }}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" loading="lazy">
                    <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">{{ $project->category }}</span>
                        <h3 class="text-xl font-bold text-white mb-2">{{ $project->title }}</h3>
                    </div>
                </a>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    <!-- CTA -->
    <section class="py-20 bg-brand-dark text-white">
        <div class="container mx-auto px-6 text-center reveal">
            <h2 class="text-3xl font-bold mb-6">Interested in Our {{ $division->title }} Services?</h2>
            <p class="text-slate-300 mb-8 max-w-2xl mx-auto">Contact us today to discuss how we can help with your specific requirements.</p>
            <a href="{{ route('contact') }}" class="inline-block px-8 py-4 bg-brand-primary text-white font-bold rounded-full hover:bg-brand-accent transition shadow-lg shadow-brand-primary/30 border border-white/10">Get a Quote</a>
        </div>
    </section>
</main>
@endsection
