@extends('layouts.website')

@section('title', $settings->site_name ?? config('app.name'))
@section('header-class', '')

@push('styles')
<style>
.banner.banner-01 {
    margin: 0 !important;
}
.banner.banner-01 #main-slider {
    width: 100%;
}
.banner.banner-01 #main-slider.swiper-container {
    overflow: hidden !important;
}
.banner.banner-01 #main-slider .swiper-slide {
    padding: 0 !important;
    height: auto !important;
    display: flex;
    align-items: stretch;
    width: 100%;
}
.banner-01 #main-slider .swiper-button-prev,
.banner-01 #main-slider .swiper-button-next {
    color: #fff;
}
.banner-01 #main-slider .swiper-button-prev:after,
.banner-01 #main-slider .swiper-button-next:after {
    color: #fff;
}
.banner-01 #main-slider .swiper-pagination-bullet {
    background: rgba(255, 255, 255, .6);
    opacity: 1;
}
.banner-01 #main-slider .swiper-pagination-bullet-active {
    background: #fff;
}
.banner-01 #main-slider .swiper-slide img {
    width: 100%;
    height: auto;
    min-height: auto;
    max-height: 800px;
    object-fit: ;
    object-position: center center;
    display: block;
}

/* ── Hero: large tablet (992px – 1199px) ── */
@media (max-width: 1199.98px) {
    .banner-01 #main-slider .swiper-slide img {
        height: auto;
        max-height: 680px;
    }
}

/* ── Hero: tablet portrait (768px – 991px) ── */
@media (max-width: 991.98px) {
    .banner-01 #main-slider .swiper-slide img {
        height: auto;
        min-height: auto;
        max-height: 560px;
        object-fit: ;
    }
}

/* ── Hero: large phones (576px – 767px) ── */
@media (max-width: 767.98px) {
    .banner-01 #main-slider .swiper-slide img {
        height: auto;
        min-height: auto;
        max-height: 460px;
        object-fit: ;
        object-position: center 30%;
    }
    .banner-01 #main-slider .swiper-button-prev,
    .banner-01 #main-slider .swiper-button-next {
        --swiper-navigation-size: 28px;
    }
      .swiper-wrapper {
 
    height: 250px!important;
}
}

/* ── Hero: small phones (< 576px) ── */
@media (max-width: 575.98px) {
    .banner-01 #main-slider .swiper-slide img {
        height: auto;
        min-height: auto;
        max-height: 380px;
        object-fit: ;
        object-position: center 30%;
    }
    .banner-01 #main-slider .swiper-button-prev,
    .banner-01 #main-slider .swiper-button-next {
        display: none;
    }
    .banner-01 #main-slider .swiper-pagination {
        bottom: 8px;
    }
  .swiper-wrapper {
 
    height: 200px!important;
}

  .swiper-slide {
 
    /* height: 100px!important; */
}

}

/* ── Upcoming Event Banner Strip ── */
.upcoming-event-strip {
    position: relative;
    background-image: url('{{ asset('website/images/home-01/bg-01.jpg') }}');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.upcoming-event-overlay {
    background: linear-gradient(135deg, rgba(10,10,20,.82) 0%, rgba(140,20,20,.75) 100%);
    padding: 90px 0;
}
.upcoming-event-content { max-width: 780px; margin: 0 auto; }
.upcoming-label {
    display: inline-block;
    border: 1px solid rgba(255,255,255,.45);
    color: rgba(255,255,255,.85);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .3rem 1.1rem;
    border-radius: 2rem;
    margin-bottom: 1.1rem;
}
.upcoming-title {
    color: #fff;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: .85rem;
}
.upcoming-meta {
    color: rgba(255,255,255,.75);
    font-size: 1rem;
    margin-bottom: 1.1rem;
    letter-spacing: .02em;
}
.upcoming-desc {
    color: rgba(255,255,255,.82);
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 2rem;
}
.upcoming-btn {
    background: #fff;
    color: var(--pgs_primary_color, #c0392b);
    font-weight: 700;
    font-size: .95rem;
    padding: .65rem 2.2rem;
    border-radius: .35rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    border: 2px solid #fff;
    transition: background .25s, color .25s;
}
.upcoming-btn:hover {
    background: transparent;
    color: #fff;
}
.video-thumb-wrap { position: relative; overflow: hidden; border-radius: .5rem; }
.video-thumb-wrap img { transition: transform .4s; }
.video-thumb-wrap:hover img { transform: scale(1.06); }
.video-thumb-wrap .play-btn {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 58px; height: 58px; border-radius: 50%;
    background: rgba(255,255,255,.2); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.2rem; transition: background .3s;
    pointer-events: none;
}
.video-thumb-wrap:hover .play-btn { background: rgba(255,255,255,.35); }
.sport-card { transition: border-color .25s, background .25s; }
.sport-card:hover { border-color: var(--pgs_primary_color, #c0392b) !important; background: rgba(255,255,255,.1) !important; }

.sport-card-wrap {
    cursor: pointer;
    border-radius: .55rem;
    overflow: hidden;
    border: none;
    background: var(--pgs_primary_color, #c0392b);
    transition: transform .3s ease, box-shadow .3s ease;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.sport-card-wrap:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 14px 36px rgba(0,0,0,.45);
}
.sport-card-wrap .sport-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.sport-card-wrap:hover .sport-img {
    transform: scale(1.06);
}
.sport-card-wrap .sport-img-wrap {
    overflow: hidden;
}

/* ── Responsive: Tablet landscape (992px and below) ── */
@media (max-width: 991.98px) {
    .space-ptb { padding-top: 60px !important; padding-bottom: 60px !important; }
    h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem) !important; }
    .sport-card-wrap .sport-img { height: 160px; }
    .gallery-img { height: 195px !important; }
    .video-thumb-wrap { height: 200px !important; }
    .section-title.mb-5 { margin-bottom: 2rem !important; }
}

/* ── Responsive: Tablet portrait / large phones (768px and below) ── */
@media (max-width: 767.98px) {
    .space-ptb { padding-top: 48px !important; padding-bottom: 48px !important; }
    h2 { font-size: clamp(1.5rem, 4.5vw, 2rem) !important; }
    .about.space-ptb .row { --bs-gutter-y: 1.5rem; --bs-gutter-x: 1rem; }
    .about-img img { max-height: 240px !important; }
    .section-title .sub-title { font-size: .75rem; letter-spacing: 1.5px; }
    .gallery-img { height: 175px !important; }
    .video-thumb-wrap { height: 185px !important; }
    .sport-card-wrap .sport-img { height: 150px; }
}

/* ── Responsive: Small phones (576px and below) ── */
@media (max-width: 575.98px) {
    .space-ptb { padding-top: 36px !important; padding-bottom: 36px !important; }
    h2 { font-size: clamp(1.3rem, 6vw, 1.75rem) !important; }
    .section-title .sub-title { font-size: .7rem; letter-spacing: 1px; }
    /* About */
    .about-img img { max-height: 180px !important; }
    /* Sports */
    .sport-card-wrap .sport-img { height: 135px; }
    /* Photo gallery */
    .gallery-img { height: 145px !important; }
    /* Video gallery */
    .video-thumb-wrap { height: 165px !important; }
    /* Upcoming strip */
    .upcoming-event-strip { background-attachment: scroll; }
    .upcoming-event-overlay { padding: 36px 0; }
    .upcoming-title { font-size: clamp(1.3rem, 6vw, 1.9rem); }
    .upcoming-desc { font-size: .88rem; line-height: 1.6; }
}

</style>
@endpush

{{-- ═══════════════════════════════════ HERO BANNER ═══════════════════════════ --}}
@section('hero')
<section class="banner banner-01">
  <div id="main-slider" class="swiper-container">
    <div class="swiper-wrapper">
      @forelse($banners as $banner)
        @php
                    $slideUrl = $banner->bg_image_path
                            ? asset('storage/' . $banner->bg_image_path)
                            : ($banner->image_path ? asset('storage/' . $banner->image_path) : asset('website/images/home-01/banner-bg.jpg'));
        @endphp
                <div class="swiper-slide">
                    <img src="{{ $slideUrl }}" alt="" class="img-fluid w-100">
        </div>
      @empty
                <div class="swiper-slide">
                    <img src="{{ asset('website/images/home-01/banner-bg.jpg') }}" alt="" class="img-fluid w-100">
        </div>
      @endforelse
    </div>
        <div class="swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide"></div>
        <div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide"></div>
        <div class="swiper-pagination"></div>
  </div>
</section>
@endsection

@section('content')

{{-- ═══════════════════════════════════ ABOUT ═════════════════════════════════ --}}
<section class="space-ptb about justify-text">
    <div class="container">
        <div class="row align-items-center g-4 g-lg-5">
            <div class="col-12 col-lg-5">
                @if($settings && $settings->logo_path)
                    <div class="about-img text-center">
                        <img class="img-fluid rounded zoom image-effect" src="{{ asset('storage/' . $settings->logo_path) }}"
                             alt="{{ $settings->site_name ?? 'FISEC INDIA' }}" style="max-height:320px;">
                    </div>
                @else
                    <div class="about-img">
                        <img class="img-fluid" src="{{ asset('website/images/home-01/about.jpg') }}" alt="About">
                    </div>
                @endif
            </div>
            <div class="col-12 col-lg-7">
                <div class="section-title mb-4">
                    <span class="sub-title text-primary text-uppercase fw-bold" style="letter-spacing:2px;">Who We Are</span>
                    <h2 class="mt-2">{{ $settings->site_name ?? 'FISEC INDIA' }}</h2>
                    {{-- @if($settings && $settings->header_text)
                        <p class="text-white mt-3">{{ $settings->header_text }}</p>
                    @endif --}}
                    @if($settings && $settings->about_us)
                        <p class="text-white">{{ Str::limit($settings->about_us, 400) }}</p>
                    @endif
                </div>
                <div class="d-flex flex-wrap gap-3 mt-4">
                    {{-- <a class="btn btn-primary" href="{{ route('site.overview') }}">Read Full Overview</a> --}}
                    <a class="btn btn-primary" href="{{ route('site.about.fisec-india') }}">About FISEC India</a>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- ═══════════════════════════════════ SPORTS ════════════════════════════════ --}}
@if($sports->isNotEmpty())
<section class="space-ptb" style="background:rgba(255,255,255,.04);">
    <div class="container">
        <div class="section-title text-center mb-5">
            {{-- <span class="sub-title text-primary text-uppercase fw-bold" style="letter-spacing:2px;">What We Play</span> --}}
            <h2 class="mt-2">Sports at FISEC Games</h2>
        </div>
        <div class="row g-4 justify-content-center">

               @forelse($sports as $sp)
                @php $cover = $sp->images->first(); @endphp
                <div class="col-12 col-sm-6 col-lg-4">
                    <div class="sport-card-wrap">
                           <a href="{{ route('site.budapest.sport', $sp) }}">
                        <div class="sport-img-wrap">
                            @switch($sp->id)
                                @case(1)
                                     <img src="{{ asset('website/images/sports-cover/ath.jpeg') }}" class="sport-img" alt="{{ $sp->name }}" loading="lazy">
                                    @break
                                @case(2)
                                     <img src="{{ asset('website/images/sports-cover/bb.jpeg') }}" class="sport-img" alt="{{ $sp->name }}" loading="lazy">
                                    @break
                                 @case(3)
                                     <img src="{{ asset('website/images/sports-cover/f.jpeg') }}" class="sport-img" alt="{{ $sp->name }}" loading="lazy">
                                    @break
                                     @case(4)
                                     <img src="{{ asset('website/images/sports-cover/swimming.jpeg') }}" class="sport-img" alt="{{ $sp->name }}" loading="lazy">
                                    @break
                                     @case(5)
                                     <img src="{{ asset('website/images/sports-cover/tt.jpeg') }}" class="sport-img" alt="{{ $sp->name }}" loading="lazy">
                                    @break
                                     @case(6)
                                     <img src="{{ asset('website/images/sports-cover/vb.jpeg') }}" class="sport-img" alt="{{ $sp->name }}" loading="lazy">
                                    @break
                                @default
                                    
                            @endswitch
                        </div>
                        </a> 
                        {{-- <h5 class="sport-card-title">{{ $sp->name }}</h5> --}}
                    </div>
                </div>
            @empty
                <div class="col-12">
                    <p class="text-white-50">Sports will appear here after you add them.</p>
                </div>
            @endforelse

            {{-- @foreach($sports as $sport) --}}
                {{-- <div class="col-6 col-md-4 col-lg-3">
                    <a href="{{ route('site.budapest.sport', $sport->slug) }}" class="text-decoration-none">
                        <div class="sport-card text-center p-4 rounded h-100"
                             style="background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);">
                            <div class="mb-3">
                                <span class="text-primary" style="font-size:2.4rem;">
                                    <i class="{{ $sport->icon_class ?? 'fas fa-running' }}"></i>
                                </span>
                            </div>
                            <h6 class="text-white mb-1 fw-semibold">{{ $sport->name }}</h6>
                            @if($sport->short_description)
                                <p class="text-white-50 small mb-0">{{ Str::limit($sport->short_description, 60) }}</p>
                            @endif
                        </div>
                    </a>
                </div>
            @endforeach --}}
        </div>
        <div class="text-center mt-5">
            <a href="{{ route('site.budapest.sports') }}" class="btn btn-outline-light px-5">View All Sports</a>
        </div>
    </div>
</section>
@endif

<section class="space-ptb" style="background-image:url('{{ asset('website/images/upcoming-event.jpeg') }}'); background-size:cover; background-position:center;">
    <div class="container">
        <div class="row align-items-center justify-content-center">
            <div class="col-12 col-md-10 col-lg-8 text-center text-md-start">
                <div class="section-title">
                    <span class="sub-title text-white text-uppercase fw-bold" style="letter-spacing:2px;">Upcoming Event</span>
                    <h2 class="mt-2">FISEC Games — Budapest 2026</h2>
                    <p class="text-white">{{ Str::limit("FISEC India is proud to represent the nation at this prestigious international school sports event recognised by the International Olympic Committee. Join us as we compete, connect, and celebrate the spirit of youth sport on the world stage", 400) }}</p>
                </div>
                <div class="d-flex flex-wrap gap-3 mt-4 justify-content-center justify-content-md-start">
                    <a class="btn btn-primary" href="{{ route('site.budapest.index') }}">Read More</a>
                </div>
            </div>
        </div>
    </div>
</section> 
{{-- ═══════════════════════════════════ BUDAPEST 2026 CTA — BANNER STRIP ═══════ --}}
{{-- <section class="upcoming-event-strip">
    <div class="upcoming-event-overlay">
        <div class="container">
            <div class="upcoming-event-content text-center">
                <span class="upcoming-label"> 2nd Upcoming Event</span>
                <h2 class="upcoming-title">FISEC Games — Budapest 2026</h2>
                <p class="upcoming-meta">13<sup>th</sup> July – 19<sup>th</sup> July 2026 &nbsp;&bull;&nbsp; Budapest, Hungary &nbsp;&bull;&nbsp; 76<sup>th</sup> FISEC-FICEP Games</p>
                <p class="upcoming-desc">FISEC India is proud to represent the nation at this prestigious international school sports event recognised by the International Olympic Committee. Join us as we compete, connect, and celebrate the spirit of youth sport on the world stage.</p>
                <a href="{{ route('site.budapest.index') }}" class="btn upcoming-btn">Read More</a>
            </div>
        </div>
    </div>
</section>  --}}



{{-- ═══════════════════════════════════ PHOTO GALLERY ════════════════════════ --}}
@if($albums->isNotEmpty())
<section class="space-ptb">
    <div class="container">
        <div class="section-title text-center mb-5">
            <span class="sub-title text-primary text-uppercase fw-bold" style="letter-spacing:2px;">Memories</span>
            <h2 class="mt-2">Photo Gallery</h2>
        </div>
        <div class="row g-4">
            @foreach($albums as $album)
                @php $cover = $album->images->first(); @endphp
                <div class="col-12 col-sm-6 col-lg-3">
                    <a href="{{ route('site.gallery.album', $album) }}" class="text-decoration-none d-block">
                        <div class="gallery-img rounded overflow-hidden position-relative" style="height:clamp(150px,40vw,220px);">
                            @if($cover)
                                <img src="{{ asset('storage/' . $cover->image_path) }}"
                                     alt="{{ $album->title ?: $album->year }}"
                                     style="width:100%;height:100%;object-fit:cover;transition:transform .4s;">
                            @else
                                <div class="w-100 h-100 d-flex align-items-center justify-content-center"
                                     style="background:rgba(255,255,255,.06);">
                                    <i class="fas fa-image fa-3x text-white-50"></i>
                                </div>
                            @endif
                            <div class="position-absolute bottom-0 start-0 end-0 p-3"
                                 style="background:linear-gradient(transparent,rgba(0,0,0,.75));">
                                <h6 class="text-white mb-0 fw-semibold">{{ $album->title ?: 'Album' }}</h6>
                                <small class="text-primary fw-bold">{{ $album->year }}</small>
                            </div>
                        </div>
                    </a>
                </div>
            @endforeach
        </div>
        <div class="text-center mt-5">
            <a href="{{ route('site.gallery.photos') }}" class="btn btn-primary px-5">View All Photos</a>
        </div>
    </div>
</section>
@endif

{{-- ═══════════════════════════════════ VIDEO GALLERY ════════════════════════ --}}
@if($videos->isNotEmpty())
<section class="space-ptb" style="background:rgba(255,255,255,.04);">
    <div class="container">
        <div class="section-title text-center mb-5">
            <span class="sub-title text-primary text-uppercase fw-bold" style="letter-spacing:2px;">Watch</span>
            <h2 class="mt-2">Video Gallery</h2>
        </div>
        <div class="row g-4 justify-content-center">
            @foreach($videos as $video)
                @php
                    $url = (string) $video->youtube_url;
                    if (preg_match('~[?&]v=([^&]+)~', $url, $m))      { $vid = $m[1]; }
                    elseif (preg_match('~youtu\.be/([^?&/]+)~', $url, $m)) { $vid = $m[1]; }
                    elseif (preg_match('~/embed/([^?&/]+)~', $url, $m))    { $vid = $m[1]; }
                    else { $vid = null; }
                    $thumb    = $vid ? 'https://img.youtube.com/vi/' . $vid . '/hqdefault.jpg' : asset('website/images/home-01/video-bg.jpg');
                    $embedUrl = $vid ? 'https://www.youtube.com/embed/' . $vid . '?autoplay=1&rel=0' : $url;
                @endphp
                <div class="col-12 col-sm-6 col-lg-4">
                    <div class="video-thumb-wrap rounded overflow-hidden" style="height:clamp(150px,40vw,220px);cursor:pointer;"
                         data-bs-toggle="modal" data-bs-target="#homeVideoModal"
                         data-embed="{{ $embedUrl }}" data-title="{{ $video->title }}">
                        <img src="{{ $thumb }}" alt="{{ $video->title }}"
                             style="width:100%;height:100%;object-fit:cover;">
                        <div class="play-btn">
                            <i class="fas fa-play"></i>
                        </div>
                    </div>
                    <h6 class="text-white mt-2 mb-0">{{ $video->title }}</h6>
                </div>
            @endforeach
        </div>
        <div class="text-center mt-5">
            <a href="{{ route('site.gallery.videos') }}" class="btn btn-primary px-5">View All Videos</a>
        </div>
    </div>
</section>

{{-- Video Modal --}}
<div class="modal fade" id="homeVideoModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content bg-light border-0">
            <div class="modal-header border-0 pb-0">
                <div>
                    <small class="text-primary fw-bold text-uppercase" style="letter-spacing:1px;">Video</small>
                    <h5 class="text-white mb-0" id="homeVideoTitle"></h5>
                </div>
                <button type="button" class="btn-close btn-close-white ms-auto" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body pt-2">
                <div class="ratio ratio-16x9">
                    <iframe id="homeVideoIframe" src="" allowfullscreen
                            allow="autoplay; encrypted-media" frameborder="0"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>
@endif

{{-- ═══════════════════════════════════ CONTACT CTA ═══════════════════════════ --}}
@if($settings && ($settings->address || $settings->email || $settings->contact_no))
<section class="space-ptb">
    <div class="container">
        <div class="section-title text-center mb-5">
            <span class="sub-title text-primary text-uppercase fw-bold" style="letter-spacing:2px;">Reach Us</span>
            <h2 class="mt-2">Get In Touch</h2>
        </div>
        <div class="row g-4 justify-content-center text-center">
            @if($settings->contact_no)
                <div class="col-12 col-md-4">
                    <div class="p-4 rounded h-100" style="background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);">
                        <span style="display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;border:2px solid var(--pgs_primary_color,#c0392b);" class="mb-3">
                            <i class="fas fa-phone-alt fa-lg text-primary"></i>
                        </span>
                        <h6 class="text-white fw-semibold">Phone</h6>
                        <p class="text-white-50 mb-0">{{ $settings->contact_no }}</p>
                    </div>
                </div>
            @endif
            @if($settings->email)
                <div class="col-12 col-md-4">
                    <div class="p-4 rounded h-100" style="background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);">
                        <span style="display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;border:2px solid var(--pgs_primary_color,#c0392b);" class="mb-3">
                            <i class="fas fa-envelope fa-lg text-primary"></i>
                        </span>
                        <h6 class="text-white fw-semibold">Email</h6>
                        <p class="text-white-50 mb-0">{{ $settings->email }}</p>
                    </div>
                </div>
            @endif
            @if($settings->address)
                <div class="col-12 col-md-4">
                    <div class="p-4 rounded h-100" style="background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);">
                        <span style="display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;border:2px solid var(--pgs_primary_color,#c0392b);" class="mb-3">
                            <i class="fas fa-map-marker-alt fa-lg text-primary"></i>
                        </span>
                        <h6 class="text-white fw-semibold">Address</h6>
                        <p class="text-white-50 mb-0">{{ $settings->address }}</p>
                    </div>
                </div>
            @endif
        </div>
        <div class="text-center mt-5">
            <a href="{{ route('site.contact') }}" class="btn btn-primary px-5">Contact Us</a>
        </div>
    </div>
</section>
@endif

@endsection

@push('scripts')
<script>
(function ($) {
    // Video modal
    $('#homeVideoModal').on('show.bs.modal', function (e) {
        var trigger = $(e.relatedTarget);
        $('#homeVideoIframe').attr('src', trigger.data('embed'));
        $('#homeVideoTitle').text(trigger.data('title') || '');
    }).on('hidden.bs.modal', function () {
        $('#homeVideoIframe').attr('src', '');
    });

    // Gallery image hover zoom
    $('.gallery-img').on('mouseenter', function () {
        $(this).find('img').css('transform', 'scale(1.07)');
    }).on('mouseleave', function () {
        $(this).find('img').css('transform', 'scale(1)');
    });
})(jQuery);
</script>
@endpush