@extends('layouts.app')

@section('title', 'Sejarah Sekolah – SD Negeri 4 Keling')

@section('content')
    {{-- Page Hero --}}
    <div
        class="sd-page-hero"
        style="
            background:
                linear-gradient(90deg, rgba(0, 0, 0, .65), rgba(0, 0, 0, .30), rgba(0, 0, 0, .05)),
                url('{{ isset($heroImages['sejarah']) ? $heroImages['sejarah']->url : asset('images/buatsejarah.jpeg') }}');
            background-size: cover;
            background-position: center;
        "
    >
        <div class="sd-page-hero-inner">
            <p class="sd-page-breadcrumb">
                <a href="{{ route('home') }}">Beranda</a>
                &nbsp;/&nbsp;
                <a href="#">Profil Sekolah</a>
                &nbsp;/&nbsp;
                <span>Sejarah Sekolah</span>
            </p>

            <h1 class="sd-page-title">Sejarah Sekolah</h1>
            <p class="sd-page-subtitle">Perjalanan panjang SD Negeri 4 Keling sejak berdiri hingga kini</p>
            <div class="sd-page-accent"></div>
        </div>
    </div>

    {{-- Content --}}
    <div class="sd-page-body">
        <div class="sd-sejarah-layout sd-reveal">
            <div class="sd-sejarah-foto">
                <img src="{{ !empty($sejarah->gambar) ? (str_starts_with($sejarah->gambar,'http') ? $sejarah->gambar : asset($sejarah->gambar)) : asset('images/sejarah.jpg') }}" alt="Gedung Sekolah">
            </div>

            <div class="sd-sejarah-text">
                <p style="font-size:.92rem;font-weight:300;color:var(--teks-abu);line-height:1.95;white-space:pre-line">
                    {{ $sejarah->konten ?? 'SD Negeri 4 Keling berdiri sebagai wujud komitmen dalam menghadirkan akses pendidikan dasar yang berkualitas bagi anak-anak di sekitar Kecamatan Keling, Kabupaten Jepara, Jawa Tengah.' }}
                </p>
            </div>
        </div>

        {{-- Dua kolom: Latar Belakang + Pencapaian --}}
        @if(!empty($sejarah->latar_belakang) || !empty($sejarah->pencapaian))
        <div class="sd-sejarah-grid sd-reveal">
            @if(!empty($sejarah->latar_belakang))
            <div class="sd-inner-card" style="margin-bottom: 0;">
                <h3 class="sd-inner-section-title">Latar Belakang Pendirian</h3>
                <p style="white-space:pre-line">{{ $sejarah->latar_belakang }}</p>
            </div>
            @endif

            @if(!empty($sejarah->pencapaian))
            <div class="sd-inner-card" style="margin-bottom: 0;">
                <h3 class="sd-inner-section-title">Pencapaian Utama</h3>
                <p style="white-space:pre-line">{{ $sejarah->pencapaian }}</p>
            </div>
            @endif
        </div>
        @endif
    </div>
@endsection