@extends('layouts.app')


@section('title', 'Nagar Panchayat Manjhanpur | Uttar Pradesh')

@section('content')

    {{-- ===== HERO BANNER ===== --}}
    <section id="top" class="hero">
        <div class="hero-slider" id="heroSlider">
            @foreach($sliders as $index => $slider)
                <div class="hero-bg" style="background-image: url('{{ asset($slider->image) }}')"></div>
            @endforeach
        </div>

        <div class="hero-dots">
            @foreach($sliders as $index => $slider)
                <span class="dot {{ $index === 0 ? 'active' : '' }}" data-index="{{ $index }}"></span>
            @endforeach
        </div>
    </section>


    <div class="welcome-strip">
        <div class="marquee-wrap">
            <span class="marquee">
                Welcome To Nagar Panchayat Manjhanpur |
                <img src="{{ asset('assets/image/new_red.gif') }}" alt="New"
                    style="height:18px;vertical-align:middle;margin:0 4px;">
                <span>Pay House Tax Online</span>
            </span>
        </div>
    </div>

    {{-- ===== ACTION STRIP (diagonal ribbon) ===== --}}
    <div class="action-strip">
        <a href="#" class="segment gold">
            <span class="icon-circle"><i class="fa-solid fa-file-lines" style="color:#e8543f;"></i></span>
            <span>FILE A COMPLAINT</span>
        </a>
        <a href="#" class="segment olive">
            <span>TRACK YOUR COMPLAINT</span>
            <span class="icon-circle"><i class="fa-solid fa-magnifying-glass" style="color:#4a5d23;"></i></span>
        </a>
        <a href="#" class="segment blue">
            <span>DEPARTMENT LOGIN</span>
            <span class="icon-circle"><i class="fa-solid fa-user" style="color:#2f6fb0;"></i></span>
        </a>
        <a href="#" class="segment maroon">
            <span>RTI ONLINE</span>
            <span class="icon-circle"><i class="fa-solid fa-scale-balanced" style="color:#914249;"></i></span>
        </a>
    </div>
    {{-- ===== LEADERS ===== --}}
    <section class="container my-5">
        <div class="leaders-scroller-wrap">
            <button class="scroll-btn scroll-btn-left" onclick="scrollLeaders(-1)">
                <i class="fa-solid fa-chevron-left"></i>
            </button>

            <div class="leaders-scroller" id="leadersScroller">
                @foreach ($leaders as $leader)
                    <div class="leader-slide d-flex" style="animation-delay: {{ $loop->index * 0.08 }}s">
                        <div class="leader-card h-100">
                            <div class="leader-photo">
                                <div class="flip-inner">
                                    <div class="flip-front">
                                        @if ($leader->photo)
                                            <img src="{{ asset($leader->photo) }}" alt="{{ $leader->name }}">
                                        @else
                                            <div class="leader-initial">{{ $leader->initial }}</div>
                                        @endif
                                    </div>
                                    <div class="flip-back">
                                        <span>{{ $leader->name }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="leader-name">{{ $leader->name }}</div>
                            <div class="leader-post">{{ $leader->post }}</div>
                        </div>
                    </div>
                @endforeach
            </div>

            <button class="scroll-btn scroll-btn-right" onclick="scrollLeaders(1)">
                <i class="fa-solid fa-chevron-right"></i>
            </button>
        </div>
    </section>

    {{-- ===== ABOUT SECTION ===== --}}
    <section class="container my-5">
        <h2 class="section-title">{{ $about->title ?? 'Nagar Panchayat' }}
            <span>{{ $about->highlight ?? 'Manjhanpur' }}</span>
        </h2>
        <div class="row g-3 align-items-center">
            <div class="col-md-3">
                @if($about && $about->image1)
                    <img src="{{ asset($about->image1) }}" class="img-fluid about-img" alt="Municipal office">
                @endif
            </div>
            <div class="col-md-6">
                <p class="about-text">
                    {{ $about->description ?? '' }}
                </p>
            </div>
            <div class="col-md-3">
                @if($about && $about->image2)
                    <img src="{{ asset($about->image2) }}" class="img-fluid about-img" alt="Cleanliness drive">
                @endif
            </div>
        </div>


    </section>



    <h2 class="mb-5 text-center fw-bold">Our Services</h2>
    {{-- ===== SERVICES ===== --}}
    <section class="services-band">
        <div class="container">
            <div class="row g-3 align-items-stretch">
                @foreach ($services as $service)
                    <div class="col-6 col-md-4 col-lg-2 d-flex">
                        <div class="service-card">
                            <i class="fa-solid {{ $service->icon }}"></i>
                            <span class="title">{{ $service->title }}</span>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    


    

@endsection