@extends('layouts.app')

@section('admin_content') 

    <!-- Banner Section -->
    <div class="row mainbanner"
        style="background: url('{{ asset('assets/img/testimonials-bg.jpg') }}') no-repeat center center; background-size: cover;">
        <div class="text-center text-white py-5" style="background: rgba(0,0,0,0.55);">
            <h1 class="fw-bold text-white">About Us</h1>
            <p class="fs-5 mt-2 text-white">Know more about our mission and work</p>
        </div>
    </div>

    <!-- About Content Section -->
    <div class="container my-5">
        @if ($about)
            <div class="row align-items-center g-4">
                <!-- Image Column -->
                @if ($about->thumbnail)
                    <div class="col-12 col-md-5 text-center">
                        <img src="{{ $about->thumbnail }}" alt="{{ $about->title }}" class="img-fluid rounded-4 shadow-lg"
                            style="max-height: 380px; object-fit: cover;">
                    </div>
                @endif
                <!-- Text Column -->
                <div class="col-12 col-md-7">
                    <h2 class="fw-bold mb-3 text-center text-md-start">{{ $about->title }}</h2>
                    <p class="text-muted fs-5 text-center text-md-start">
                        {{ $about->content }}
                    </p>

                    <!-- Buttons -->
                    {{-- <div class="d-flex flex-wrap justify-content-center justify-content-md-start gap-3 mt-4">
                        @if ($about->button1)
                            <a href="{{ $about->button1 }}"
                                class="btn btn-primary btn-lg rounded-pill px-4 hoverZoom"></a>
                        @endif
                        @if ($about->button2)
                            <a href="{{ $about->button2 }}"
                                class="btn btn-outline-dark btn-lg rounded-pill px-4 hoverZoom"></a>
                        @endif
                    </div> --}}
                </div>
            </div>
        @else
            <p class="text-center text-muted fs-4">No About Content Available</p>
        @endif
    </div>

    <div class="container-fluid my-5 bg-light">
        <div class="container py-5 bg-light">
            @if ($about)
                <div class="row align-items-center g-4">
                    <!-- Text Column -->
                    <div class="col-12 col-md-7">
                        <h2 class="fw-bold mb-3 text-center text-md-start">{{ $about->title }}</h2>
                        <p class="text-muted fs-5 text-center text-md-start">
                            {{ $about->content }}
                        </p>
                    </div>

                    <!-- Image Column -->
                    @if ($about->thumbnail)
                        <div class="col-12 col-md-5 text-center">
                            <img src="{{ $about->thumbnail }}" alt="{{ $about->title }}"
                                class="img-fluid rounded-4 shadow-lg" style="max-height: 380px; object-fit: cover;">
                        </div>
                    @endif
                </div>
            @else
                <p class="text-center text-muted fs-4">No About Content Available</p>
            @endif
        </div>
    </div>

    <div class="container my-5">
        @if ($about)
            <div class="row align-items-center g-4">
                <!-- Image Column -->
                @if ($about->thumbnail)
                    <div class="col-12 col-md-5 text-center">
                        <img src="{{ $about->thumbnail }}" alt="{{ $about->title }}" class="img-fluid rounded-4 shadow-lg"
                            style="max-height: 380px; object-fit: cover;">
                    </div>
                @endif
                <!-- Text Column -->
                <div class="col-12 col-md-7">
                    <h2 class="fw-bold mb-3 text-center text-md-start">{{ $about->title }}</h2>
                    <p class="text-muted fs-5 text-center text-md-start">
                        {{ $about->content }}
                    </p>
                </div>
            </div>
        @else
            <p class="text-center text-muted fs-4">No About Content Available</p>
        @endif
    </div>

    <!-- Optional Sections (Team / Extra Info) -->
    @if ($about && $about->sections)
        <div class="container my-5">
            <div class="row g-4">
                @foreach ($about->sections as $section)
                    <div class="col-12 col-sm-6 col-md-4">
                        <div class="card border-0 shadow-sm p-3 text-center h-100 hoverZoom">
                            <div class="card-body">
                                <h5 class="fw-bold">{{ $section['heading'] ?? 'Section' }}</h5>
                                <p class="text-muted">{{ $section['content'] ?? '' }}</p>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @endif

    <!-- Hover Zoom CSS -->
    <style>
        .hoverZoom {
            transition: transform 0.4s ease-in-out;
        }

        .hoverZoom:hover {
            transform: scale(1.08);
        }

        img.hoverZoom:hover {
            transform: scale(1.12);
        }
    </style>

@endsection