@php

    $about = App\Models\AboutUs::first();
    $mission = $about->additional_sections;
    $gallery = App\Models\Gallery::first();

@endphp
<div class="mission-vision-row">
    @foreach ($mission as $section)
        <div class="mission-vision-box">
            <div class="mission-vision-title">{{ $section['title'] }}</div>
            <div>{{ $section['description'] }}</div>
        </div>
    @endforeach
</div>
<div class="angled-divider-gallery"></div>
<div class="gallery-section">
    <div class="gallery-title">
        <h2>{{ $gallery->title ?? 'GALLERY' }}</h2>
    </div>

    @if ($gallery && $gallery->images && count($gallery->images) > 0)
        @php
            $images = collect($gallery->images);
            $totalImages = count($images);
            $galleryCount = $home->gallery_count; // Fixed to 5 for the new layout
            $displayImages = $images->take($galleryCount);
        @endphp

        <div class="gallery-grid-container">
            @foreach ($displayImages as $index => $image)
                <div class="gallery-item gallery-item-{{ $index + 1 }}">
                    <img src="{{ asset('storage/' . $image['image']) }}" alt="Gallery Image {{ $index + 1 }}">
                </div>
            @endforeach
        </div>

        @if ($totalImages > $galleryCount)
            <div class="see-more-container">
                <a href="{{ route('gallery') }}" class="see-more-btn">See More</a>
            </div>
        @endif
    @endif
</div>

<style>
    .mission-vision-row {
        z-index: 2;
        margin: 0 auto;
        max-width: 1000px;
        display: flex;
        gap: 48px;

        justify-content: center;
    }

    .mission-vision-box {
        flex: 1;
        background: #fafbfc;
        border: 1px solid #e6e6e6;
        padding: 38px 28px 32px 28px;
        text-align: center;
        min-width: 240px;
        min-height: 120px;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
        transition: transform 0.3s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .mission-vision-title {
        color: #f7a600;
        font-weight: 700;
        margin-bottom: 18px;
        font-size: 1.35rem;
        letter-spacing: 0.5px;
        text-align: center;
    }

    .mission-vision-box div:last-child {
        color: #444;
        font-size: 1.05rem;
        line-height: 1.7;
        text-align: center;
    }

    .mission-vision-box:hover {
        transform: translateY(-3px);
    }

    .angled-divider-gallery {
        margin-top: -10%;
        width: 100%;
        height: 200px;
        /* Adjust height as needed */
        background: #004675;
        clip-path: polygon(0 100%, 100% 0,100% 100% );
    }

    .gallery-section {
        background-color: #004675;
        padding: 40px 0;
        color: #fff;
    }

    .gallery-title {
        text-align: center;
        margin-bottom: 30px;
    }

    .gallery-title h2 {
        font-size: 2rem;
        font-weight: bold;
        color: #FFA500;
        display: inline-block;
        position: relative;
        text-transform: uppercase;
    }

    .gallery-title h2::before {
        content: '';
        position: absolute;
        left: -35px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        background-color: #00365a;
        border-radius: 50%;
    }

    .gallery-grid-container {
        display: grid;
        /* max-width: 1200px; */
        margin: 0 auto;
        gap: 10px;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 250px);
    }

    .gallery-item {
        overflow: hidden;
        position: relative;
    }

    .gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

    .gallery-item:hover img {
        transform: scale(1.1);
    }

    .gallery-item-1 {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
    }

    .gallery-item-2 {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
    }

    .gallery-item-3 {
        grid-column: 4 / 5;
        grid-row: 1 / 2;
    }

    .gallery-item-4 {
        grid-column: 1 / 3;
        grid-row: 2 / 3;
    }

    .gallery-item-5 {
        grid-column: 3 / 4;
        grid-row: 2 / 3;
    }

    .gallery-item-6 {
        grid-column: 4 / 5;
        grid-row: 2 / 3;
    }
    .see-more-container {
        text-align: center;
        margin-top: 30px;
    }

    .see-more-btn {
        background-color: #F3881B;
        color: #fafbfc;
        padding: 10px 30px;
        text-decoration: none;
        font-weight: bold;
        border-radius: 5px;
        transition: background-color 0.3s ease;
    }

    .see-more-btn:hover {
        background-color: #e69500;
    }


  /* Enhanced responsive styles */
    @media (max-width: 1200px) {
        .mission-vision-row {
            max-width: 900px;
            gap: 40px;
        }
        .mission-vision-box {
            padding: 32px 24px 28px 24px;
            min-width: 220px;
        }
        .mission-vision-title {
            font-size: 1.25rem;
            margin-bottom: 16px;
        }
        .mission-vision-box div:last-child {
            font-size: 1rem;
        }
        .angled-divider-gallery {
            height: 180px;
        }
        .gallery-section {
            padding: 35px 0;
        }
        .gallery-title h2 {
            font-size: 1.8rem;
        }
        .gallery-title h2::before {
            width: 18px;
            height: 18px;
            left: -30px;
        }
        .gallery-grid-container {
            grid-template-rows: repeat(2, 220px);
        }
    }

    @media (max-width: 992px) {
        .mission-vision-row {
            max-width: 800px;
            gap: 30px;
        }
        .mission-vision-box {
            padding: 28px 20px 24px 20px;
            min-width: 200px;
        }
        .mission-vision-title {
            font-size: 1.2rem;
            margin-bottom: 14px;
        }
        .mission-vision-box div:last-child {
            font-size: 0.95rem;
        }
        .angled-divider-gallery {
            height: 160px;
        }
        .gallery-section {
            padding: 30px 0;
        }
        .gallery-title h2 {
            font-size: 1.6rem;
        }
        .gallery-title h2::before {
            width: 16px;
            height: 16px;
            left: -25px;
        }
        .gallery-grid-container {
            grid-template-rows: repeat(2, 200px);
        }
    }

    @media (max-width: 768px) {
        .mission-vision-row {
            flex-direction: column;
            gap: 20px;
            max-width: 600px;
        }
        .mission-vision-box {
            padding: 24px 16px 20px 16px;
            min-width: auto;
        }
        .mission-vision-title {
            font-size: 1.1rem;
            margin-bottom: 12px;
        }
        .mission-vision-box div:last-child {
            font-size: 0.9rem;
        }
        .angled-divider-gallery {
            height: 120px;
        }
        .gallery-section {
            padding: 25px 0;
        }
        .gallery-title h2 {
            font-size: 1.4rem;
        }
        .gallery-title h2::before {
            width: 14px;
            height: 14px;
            left: -20px;
        }
        .gallery-grid-container {
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(3, 180px);
            gap: 8px;
        }
        .gallery-item-1 {
            grid-column: 1 / 3;
            grid-row: 1 / 2;
        }
        .gallery-item-2 {
            grid-column: 1 / 2;
            grid-row: 2 / 3;
        }
        .gallery-item-3 {
            grid-column: 2 / 3;
            grid-row: 2 / 3;
        }
        .gallery-item-4 {
            grid-column: 1 / 2;
            grid-row: 3 / 4;
        }
        .gallery-item-5 {
            grid-column: 2 / 3;
            grid-row: 3 / 4;
        }
        .gallery-item-6 {
            display: none;
        }
        .see-more-container {
            margin-top: 25px;
        }
        .see-more-btn {
            padding: 8px 25px;
            font-size: 0.9rem;
        }
    }

    @media (max-width: 600px) {
        .mission-vision-row {
            gap: 16px;
            max-width: 500px;
        }
        .mission-vision-box {
            padding: 20px 14px 16px 14px;
        }
        .mission-vision-title {
            font-size: 1rem;
            margin-bottom: 10px;
        }
        .mission-vision-box div:last-child {
            font-size: 0.85rem;
        }
        .angled-divider-gallery {
            height: 100px;
        }
        .gallery-section {
            padding: 20px 0;
        }
        .gallery-title h2 {
            font-size: 1.2rem;
        }
        .gallery-title h2::before {
            width: 12px;
            height: 12px;
            left: -18px;
        }
        .gallery-grid-container {
            grid-template-rows: repeat(3, 150px);
            gap: 6px;
        }
        .see-more-container {
            margin-top: 20px;
        }
        .see-more-btn {
            padding: 7px 20px;
            font-size: 0.85rem;
        }
    }

    @media (max-width: 480px) {
        .mission-vision-row {
            gap: 12px;
            max-width: 400px;
        }
        .mission-vision-box {
            padding: 16px 12px 12px 12px;
        }
        .mission-vision-title {
            font-size: 0.95rem;
            margin-bottom: 8px;
        }
        .mission-vision-box div:last-child {
            font-size: 0.8rem;
        }
        .angled-divider-gallery {
            height: 80px;
        }
        .gallery-section {
            padding: 15px 0;
        }
        .gallery-title h2 {
            font-size: 1.1rem;
        }
        .gallery-title h2::before {
            width: 10px;
            height: 10px;
            left: -15px;
        }
        .gallery-grid-container {
            grid-template-rows: repeat(3, 120px);
            gap: 5px;
        }
        .see-more-container {
            margin-top: 15px;
        }
        .see-more-btn {
            padding: 6px 18px;
            font-size: 0.8rem;
        }
    }

    @media (max-width: 360px) {
        .mission-vision-row {
            gap: 10px;
            max-width: 320px;
        }
        .mission-vision-box {
            padding: 14px 10px 10px 10px;
        }
        .mission-vision-title {
            font-size: 0.9rem;
            margin-bottom: 6px;
        }
        .mission-vision-box div:last-child {
            font-size: 0.75rem;
        }
        .angled-divider-gallery {
            height: 60px;
        }
        .gallery-section {
            padding: 12px 0;
        }
        .gallery-title h2 {
            font-size: 1rem;
        }
        .gallery-title h2::before {
            width: 8px;
            height: 8px;
            left: -12px;
        }
        .gallery-grid-container {
            grid-template-rows: repeat(3, 100px);
            gap: 4px;
        }
        .see-more-container {
            margin-top: 12px;
        }
        .see-more-btn {
            padding: 5px 15px;
            font-size: 0.75rem;
        }
    }
</style>