@extends('layouts.app')

@section('title', 'होम')

@section('content')

    {{-- HERO --}}
    <section class="hero" id="city">
        <div class="hero__slider" id="heroSlider">
            @forelse ($heroSlides as $index => $slide)
                <div class="hero__slide {{ $index === 0 ? 'is-active' : '' }}">
                    <img src="{{ $slide->image ? asset($slide->image) : asset('images/images.jpg') }}" alt=""
                        class="hero__slide-img" onerror="this.onerror=null;this.src='{{ asset('images/images.jpg') }}';">
                </div>
            @empty

                <div class="hero__slide is-active">
                    <img src="{{ asset('images/images.jpg') }}" alt="" class="hero__slide-img">
                </div>
            @endforelse
            <div class="hero__overlay"></div>
        </div>

        <button class="hero__nav hero__nav--prev" id="heroPrev" aria-label="पिछली स्लाइड">&#10094;</button>
        <button class="hero__nav hero__nav--next" id="heroNext" aria-label="अगली स्लाइड">&#10095;</button>
    </section>

    <div class="wrap">

        {{-- HIGHLIGHTS: SCROLLING NOTICES + INTRO --}}
        <section class="highlights">
            <div class="marquee-board">
                <div class="marquee-board__header">
                    <span aria-hidden="true">📢</span> महत्वपूर्ण सूचनाएँ
                </div>
                <div class="marquee-board__viewport">
                    <ul class="marquee-board__track">
                        {{-- List do baar likha gaya hai taaki scroll seamless loop kare --}}
                        {{-- @foreach ($notices as $item)
                        <li>{{ $item->text }}</li>
                        @endforeach --}}
                        @foreach ($notices as $item)
                            <li>{{ $item->text }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>

            <div class="intro-card">
                <div class="intro-card__header">नगर पंचायत चुनार</div>
                <div class="intro-card__body">
                    <h4>{{ $intro->title ?? 'परिचय: हम कौन हैं?' }}</h4>
                    <p>{{ $intro->body ?? '' }}</p>

                    <a href="#" class="link-more">और पढ़ें &rarr;</a>
                </div>
            </div>
        </section>


        {{-- OFFICIALS STRIP --}}
        <section class="officials">

            {{-- मुख्यमंत्री --}}
            <article class="official-card">
    <div class="official-card__portrait">
        <img src="{{ optional($officials['cm'] ?? null)->image
            ? asset($officials['cm']->image)
            : asset('images/images.jpg') }}"
            alt="{{ optional($officials['cm'] ?? null)->name ?? 'श्री योगी आदित्यनाथ' }}">
    </div>

    <h3>
        {{ optional($officials['cm'] ?? null)->name ?? 'श्री योगी आदित्यनाथ' }}
    </h3>

    <p class="official-card__role">
        {{ optional($officials['cm'] ?? null)->role ?? 'माननीय मुख्यमंत्री, उत्तर प्रदेश' }}
    </p>
</article>

            {{-- शहरी विकास मंत्री --}}
           <article class="official-card">
    <div class="official-card__portrait">
        <img src="{{ optional($officials['minister'] ?? null)->image
            ? asset($officials['minister']->image)
            : asset('images/images.jpg') }}"
            alt="{{ optional($officials['minister'] ?? null)->name ?? 'श्री सुरेश कुमार खन्ना' }}">
    </div>

    <h3>
        {{ optional($officials['minister'] ?? null)->name ?? 'श्री सुरेश कुमार खन्ना' }}
    </h3>

    <p class="official-card__role">
        {{ optional($officials['minister'] ?? null)->role ?? 'माननीय शहरी विकास मंत्री' }}
    </p>
</article>

            {{-- अध्यक्ष --}}
           <article class="official-card">
    <div class="official-card__portrait">
        <img src="{{ optional($officials['chairman'] ?? null)->image
            ? asset($officials['chairman']->image)
            : asset('images/images.jpg') }}"
            alt="{{ optional($officials['chairman'] ?? null)->name ?? 'अध्यक्ष' }}">
    </div>

    <h3>
        {{ optional($officials['chairman'] ?? null)->name ?? 'अध्यक्ष' }}
    </h3>

    <p class="official-card__role">
        {{ optional($officials['chairman'] ?? null)->role ?? 'नगर पालिका परिषद, चुनार' }}
    </p>
</article>
            {{-- अधिशाषी अधिकारी --}}
            <article class="official-card">
    <div class="official-card__portrait">
        <img src="{{ optional($officials['eo'] ?? null)->image
            ? asset($officials['eo']->image)
            : asset('images/images.jpg') }}"
            alt="{{ optional($officials['eo'] ?? null)->name ?? 'अधिशाषी अधिकारी' }}">
    </div>

    <h3>
        {{ optional($officials['eo'] ?? null)->name ?? 'अधिशाषी अधिकारी' }}
    </h3>

    <p class="official-card__role">
        {{ optional($officials['eo'] ?? null)->role ?? 'नगर पालिका परिषद, चुनार' }}
    </p>
</article>

        </section>

        {{-- ABOUT --}}
        <section class="about" id="about">
            <div class="about__mark">1.</div>
            <div class="about__body">
                <h2>{{ $about->heading ?? 'परिचय: हम कौन हैं?' }}</h2>
                <p>{{ $about->body1 ?? '' }}</p>
                <p>{{ $about->body2 ?? '' }}</p>
                <a href="#" class="link-more">पूरा विवरण पढ़ें &rarr;</a>
            </div>
            <div class="about__media">
                <img src="{{ !empty($about->image) ? asset('storage/' . $about->image) : asset('images/nppauraiya.jpg') }}"
                    alt="नगर पालिका परिषद चुनार">
            </div>
        </section>

        {{-- MESSAGES --}}
        <section class="messages" id="departments">

            {{-- अध्यक्ष जी का संदेश --}}
            <article class="message-card">
                <div class="message-card__head">

                    <div class="message-card__portrait">
                        <img src="{{ optional($messages['chairman'] ?? null)->image ? asset('storage/' . $messages['chairman']->image) : asset('images/images.jpg') }}"
                            alt="अध्यक्ष जी">
                    </div>

                    <div>
                        <h3>{{ optional($messages['chairman'] ?? null)->name ?? 'अध्यक्ष जी का संदेश' }}</h3>
                        <p class="message-card__role">
                            {{ optional($messages['chairman'] ?? null)->role ?? 'नगर पालिका परिषद, चुनार' }}</p>
                    </div>
                </div>

                <p>{{ optional($messages['chairman'] ?? null)->content }}</p>

                <a href="#" class="link-more">और पढ़ें &rarr;</a>
            </article>


            {{-- अधिशाषी अधिकारी का संदेश --}}
            <article class="message-card">
                <div class="message-card__head">

                    <div class="message-card__portrait">
                        <img src="{{ optional($messages['eo'] ?? null)->image ? asset('storage/' . $messages['eo']->image) : asset('images/images.jpg') }}"
                            alt="अधिशाषी अधिकारी">
                    </div>

                    <div>
                        <h3>{{ optional($messages['eo'] ?? null)->name ?? 'अधिशाषी अधिकारी का संदेश' }}</h3>
                        <p class="message-card__role">
                            {{ optional($messages['eo'] ?? null)->role ?? 'नगर पालिका परिषद, चुनार' }}</p>
                    </div>
                </div>

                <p>{{ optional($messages['eo'] ?? null)->content }}</p>

                <a href="#" class="link-more">और पढ़ें &rarr;</a>
            </article>

        </section>



    </div>

@endsection