@extends('layouts.frontend')
@section('title', 'Sejarah')

@section('content')
<section class="page-hero">
    <div class="wrap-container">
        <div class="crumb">
            <a href="{{ route('home') }}"><i class="bi bi-house"></i> Beranda</a>
            <i class="bi bi-chevron-right"></i>
            <a href="{{ route('home') }}"><i class="bi bi-ui-checks-grid"></i> Profil</a>
            <i class="bi bi-chevron-right"></i>
            <span class="active">Sejarah</span>
        </div>
        <h1>Sejarah Dusun Jlegongan</h1>
        <p>Perjalanan panjang dusun dari masa leluhur hingga menjadi harmonis seperti sekarang.</p>
    </div>
</section>

<section class="section">
    <div class="wrap-container">
        <div class="row g-5 justify-content-center">
            <div class="col-lg-11">

                @if($sejarah)

                {{-- ===============================================================
                     FOTO FULL 16:9 COVER (TANPA OVERLAY JUDUL!)
                     =============================================================== --}}
                <div class="mb-4 w-100 overflow-hidden"
                     style="border-radius: 20px;
                            border: 1px solid rgba(226,232,240,.9);
                            box-shadow: 0 12px 30px -10px rgba(15,23,42,.15), 0 4px 10px -4px rgba(15,23,42,.06);
                            background: #0f172a;">

                    @if($sejarah->image)

                    <div style="width: 100%;
                                aspect-ratio: 16 / 9;
                                overflow: hidden;
                                background:
                                    linear-gradient(
                                        135deg,
                                        rgba(16,185,129,.08) 0%,
                                        rgba(59,130,246,.08) 100%
                                    );">

                        <img src="{{ asset('storage/' . ltrim($sejarah->image, '/')) }}"
                             alt="{{ $sejarah->title }}"
                             loading="lazy"
                             class="w-100 h-100 d-block"
                             style="object-fit: cover;
                                    transition: transform .55s cubic-bezier(.4,0,.2,1);"
                             onerror="
                                this.parentElement.innerHTML =
                                    '<div class=\'d-flex flex-column align-items-center justify-content-center text-white text-center px-4 py-5 w-100 h-100\' style=\'background:linear-gradient(135deg,#065f46 0%,#047857 50%,#059669 100%);\'>' +
                                    '<i class=\'bi bi-book-half\' style=\'font-size:96px;\'></i>' +
                                    '<h1 class=\'fw-bold mb-1 mt-4\' style=\'font-size:clamp(1.8rem, 4vw, 2.8rem);\'>{{ addslashes($sejarah->title) }}</h1>' +
                                    '<p class=\'opacity-90 mb-0 fs-5\'>Sejarah yang patut dikenang</p>' +
                                    '</div>';
                                this.remove();
                             "
                             onmouseover="this.style.transform='scale(1.05)'"
                             onmouseout="this.style.transform='scale(1)'">

                    </div>

                    @else

                    <div class="d-flex flex-column align-items-center justify-content-center text-white text-center px-4 py-5"
                         style="aspect-ratio: 16/9;
                                background:
                                    linear-gradient(
                                        135deg,
                                        #065f46 0%,
                                        #047857 50%,
                                        #059669 100%
                                    );">

                        <i class="bi bi-book-half" style="font-size:100px;"></i>

                        <h1 class="fw-bold mb-2 mt-4" style="font-size: clamp(1.8rem, 4vw, 2.8rem);">
                            {{ $sejarah->title }}
                        </h1>

                        <p class="opacity-90 mb-0" style="font-size: 1.05rem;">
                            Sejarah yang patut dikenang
                        </p>

                    </div>

                    @endif

                </div>


                {{-- ===============================================================
                     JUDUL BESAR — DI BAWAH FOTO (sesuai request user)
                     =============================================================== --}}
                <div class="mb-5 ps-2">

                    <span class="d-inline-flex align-items-center gap-2 px-3 py-1 mb-3 rounded-pill"
                          style="background: rgba(16,185,129,.12);
                                 color: #047857;
                                 font-size: .76rem;
                                 font-weight: 750;
                                 letter-spacing: .3px;">
                        <i class="bi bi-book"></i>
                        PROFIL DUSUN
                    </span>

                    <h1 class="fw-bold mb-2"
                        style="font-size: clamp(2rem, 4.6vw, 3.1rem);
                               line-height: 1.12;
                               color: #0f172a;
                               letter-spacing: -.02em;">
                        {{ $sejarah->title }}
                    </h1>

                </div>


                {{-- ===============================================================
                     KONTEN UTAMA (Deskripsi dari Admin — TANPA PARAGRAF LEAD BESAR!)
                     =============================================================== --}}
                <div class="content-body"
                     style="font-size: 1.02rem;
                            line-height: 1.95;
                            color: #334155;">

                    @if($sejarah->description)
                        {!! nl2br(e($sejarah->description)) !!}
                    @endif

                </div>

                @else

                <div class="alert alert-info rounded-4 d-flex gap-3 align-items-start">
                    <i class="bi bi-info-circle fs-3 flex-shrink-0"></i>
                    <div>
                        <h6 class="fw-bold mb-1">Informasi belum tersedia</h6>
                        <p class="mb-0 small">Sejarah Dusun Jlegongan akan segera ditambahkan oleh admin. Silakan kembali lagi nanti.</p>
                    </div>
                </div>

                @endif

            </div>
        </div>
    </div>
</section>
@endsection