@extends('frontend::layouts.app')

@section('title', 'About Us - WBU - World Buddhist University')

@php
    $news = [
        [
            'id' => '1',
            'title' => 'WBU Announces New Partnership with Asian Universities',
            'date' => 'January 10, 2026',
            'image' => '/images/news-partnership.jpg',
        ],
        [
            'id' => '2',
            'title' => 'Buddhist Scholars Gather for Annual Meeting',
            'date' => 'January 8, 2026',
            'image' => '/images/news-scholars.jpg',
        ],
        [
            'id' => '3',
            'title' => 'New Online Course Platform Launched',
            'date' => 'January 5, 2026',
            'image' => '/images/news-online.jpg',
        ],
        [
            'id' => '4',
            'title' => 'International Buddhist Education Summit 2026',
            'date' => 'January 3, 2026',
            'image' => '/images/news-summit.jpg',
        ],
    ];
@endphp

@section('content')
    <section id="page-title" class="gradient-green">
        <div class="container">
            <div class="page-title">
                <h1>About Us</h1>
            </div>
            <div class="breadcrumb">
                <ul>
                    <li><a href="{{ route('frontend.index') }}">Home</a></li>
                    <li class="active"><a href="#">About Us</a></li>
                </ul>
            </div>
        </div>
    </section>

    <!-- Overview Section -->
    <section class="relative" style="background: linear-gradient(to bottom right, #0f172a, #1e293b, #0f172a); padding-top: 100px; padding-bottom: 100px;">
        <div class="absolute inset-0 bg-cover bg-center opacity-30" style="background-image: url('/images/screenshot-202569-01-28-20at-2010.png');"></div>
        <div class="relative mx-auto max-w-4xl px-6 lg:px-8 text-center">
            <h2 class="text-4xl md:text-5xl font-bold text-white mb-6">OVERVIEW</h2>
            <p class="text-white/90 leading-relaxed mb-4 text-lg">
                The World Buddhist University (WBU) serves as a global coordinating body for Buddhist education,
                connecting universities and institutes worldwide. As a university without walls, we bridge geographical
                boundaries to promote Buddhist teachings and cultural exchange.
            </p>
            <p class="text-white/90 leading-relaxed mb-8 text-lg">
                Through collaboration with the World Fellowship of Buddhists (WFB) and its regional centres, we advance
                Buddhist education in the context of globalization while preserving traditional wisdom.
            </p>
            <!-- <a href="#details"
                                class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium h-10 rounded-md px-6 bg-primary text-primary-foreground hover:bg-primary/90 transition-all">
                                View More
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                    class="ml-2 h-4 w-4">
                                    <path d="M5 12h14"></path>
                                    <path d="m12 5 7 7-7 7"></path>
                                </svg>
                            </a> -->
            <div class="item-center">
                <a class="a-btn btn-bg" href="#details" aria-label="Learn more about the connection ">
                    <span class="a-btn__text">View More </span>
                </a>
            </div>

        </div>
    </section>

    <!-- About World Buddhist University Section (Hidden) -->
    <section id="details" class="hidden py-16 md:py-24 bg-background">
        <div class="mx-auto max-w-7xl px-6 lg:px-8">
            <div class="max-w-3xl mx-auto text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-6">About World Buddhist University</h2>
                <p class="text-muted-foreground leading-relaxed mb-4">
                    The World Buddhist University (WBU) was established to coordinate among all Buddhist universities,
                    educational institutes, and the WFB Regional Centres where Buddhism is taught and disseminated through
                    the context of globalization.
                </p>
                <p class="text-muted-foreground leading-relaxed">
                    As part of the WFB family of organizations, the University maintains close working relationships with
                    other WFB headquarters and its regional centres, programmes, commissions, funds and convention
                    secretariats.
                </p>
            </div>

            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
                <div class="bg-background border border-border rounded-lg p-6 text-center hover:shadow-md transition-shadow">
                    <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-7 w-7 text-primary">
                            <path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"></path>
                            <path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"></path>
                            <path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"></path>
                            <path d="M10 6h4"></path>
                            <path d="M10 10h4"></path>
                            <path d="M10 14h4"></path>
                            <path d="M10 18h4"></path>
                        </svg>
                    </div>
                    <h3 class="font-semibold text-foreground mb-2">University Without Walls</h3>
                    <p class="text-sm text-muted-foreground leading-relaxed">
                        WBU operates as a virtual university, connecting Buddhist scholars and institutions across the globe
                        without physical boundaries.
                    </p>
                </div>

                <div class="bg-background border border-border rounded-lg p-6 text-center hover:shadow-md transition-shadow">
                    <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-7 w-7 text-primary">
                            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
                            <circle cx="9" cy="7" r="4"></circle>
                            <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
                            <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                        </svg>
                    </div>
                    <h3 class="font-semibold text-foreground mb-2">WBU Council</h3>
                    <p class="text-sm text-muted-foreground leading-relaxed">
                        The WBU Council serves as the governing board, composed of 17-25 members serving in their individual
                        capacity.
                    </p>
                </div>

                <div class="bg-background border border-border rounded-lg p-6 text-center hover:shadow-md transition-shadow">
                    <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-7 w-7 text-primary">
                            <circle cx="12" cy="12" r="10"></circle>
                            <circle cx="12" cy="12" r="6"></circle>
                            <circle cx="12" cy="12" r="2"></circle>
                        </svg>
                    </div>
                    <h3 class="font-semibold text-foreground mb-2">Our Mission</h3>
                    <p class="text-sm text-muted-foreground leading-relaxed">
                        To develop WBU as the virtual Buddhist universities centre, promoting Buddhist education and
                        cultural
                        exchange worldwide.
                    </p>
                </div>

                <div class="bg-background border border-border rounded-lg p-6 text-center hover:shadow-md transition-shadow">
                    <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-7 w-7 text-primary">
                            <circle cx="12" cy="12" r="10"></circle>
                            <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path>
                            <path d="M2 12h20"></path>
                        </svg>
                    </div>
                    <h3 class="font-semibold text-foreground mb-2">Global Network</h3>
                    <p class="text-sm text-muted-foreground leading-relaxed">
                        Working closely with WFB headquarters and regional centres, programmes, commissions, and convention
                        secretariats.
                    </p>
                </div>
            </div>

            <div class="mt-20">
                <h3 class="text-2xl md:text-3xl font-bold text-foreground mb-6 text-center">How WBU is Organized</h3>
                <div class="max-w-3xl mx-auto">
                    <div class="bg-secondary rounded-lg p-8">
                        <div class="space-y-6">
                            <div>
                                <h4 class="font-semibold text-foreground mb-2">Management Group</h4>
                                <p class="text-sm text-muted-foreground leading-relaxed">
                                    The Management Group is a forum of senior WBU personnel that considers policy
                                    development, strategy,
                                    planning, and other priority issues.
                                </p>
                            </div>
                            <div>
                                <h4 class="font-semibold text-foreground mb-2">Office of the Rector</h4>
                                <p class="text-sm text-muted-foreground leading-relaxed">
                                    The Office of the Rector oversees the day-to-day operations and coordinates with various
                                    stakeholders
                                    to achieve the university's objectives.
                                </p>
                            </div>
                            <div>
                                <h4 class="font-semibold text-foreground mb-2">Finance</h4>
                                <p class="text-sm text-muted-foreground leading-relaxed">
                                    The WB University's financial support comes entirely from voluntary contributions and
                                    donations from
                                    supporters worldwide.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- WBU History Section -->
    <section class="bg-gray-50" style="padding-top: 100px; padding-bottom: 100px;">
        <div class="mx-auto max-w-7xl px-6 lg:px-8">
            <div class="grid md:grid-cols-2 gap-12 items-center">
                <div class="relative h-[400px] rounded-2xl overflow-hidden bg-gradient-to-br from-gray-200 to-gray-300">
                    <img src="{{ asset('assets/frontend/images/about-history.jpg') }}" alt="WBU History" class="object-cover w-full h-full" loading="lazy" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                    <div class="hidden absolute inset-0 items-center justify-center bg-gradient-to-br from-gray-200 to-gray-300">
                        <span class="text-muted-foreground">WBU History</span>
                    </div>
                </div>
                <div>
                    <h2 class="text-4xl md:text-5xl font-bold text-foreground mb-6">OUR HISTORY</h2>
                    <p class="text-muted-foreground leading-relaxed mb-4">
                        The first initiative to establish the World Buddhist University came from the vision of creating a
                        global
                        network of Buddhist education that transcends geographical boundaries. Founded through the
                        cooperation of
                        Buddhist scholars and institutions worldwide, WBU has grown into a pivotal organization in Buddhist
                        education.
                    </p>
                    <p class="text-muted-foreground leading-relaxed mb-6">
                        The WBU Charter was amended by the 29th General Conference of the WFB and the 11th Meeting of the
                        WBU Council,
                        establishing the framework for its operations. The emblem of the World Buddhist University consists
                        of the
                        triratna symbol inside the shield, representing the Three Jewels of Buddhism.
                    </p>
                    <button class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium h-10 rounded-md px-6 bg-primary text-primary-foreground hover:bg-primary/90 transition-all">
                        View More
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ml-2 h-4 w-4">
                            <path d="M5 12h14"></path>
                            <path d="m12 5 7 7-7 7"></path>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </section>

    <!-- Our Culture Section -->
    <section class="bg-white" style="padding-top: 100px; padding-bottom: 100px;">
        <div class="mx-auto max-w-7xl px-6 lg:px-8">
            <div class="grid md:grid-cols-2 gap-12 items-center">
                <div class="order-2 md:order-1">
                    <h2 class="text-4xl md:text-5xl font-bold text-foreground mb-6">OUR CULTURE</h2>
                    <p class="text-muted-foreground leading-relaxed mb-4">
                        At WBU, we foster a culture of collaboration, wisdom, and compassionate learning. Our community
                        brings together
                        scholars, practitioners, and students from diverse Buddhist traditions, creating a rich tapestry of
                        perspectives
                        and experiences.
                    </p>
                    <p class="text-muted-foreground leading-relaxed mb-6">
                        We embrace innovation while honoring tradition, utilizing modern technology to preserve and
                        disseminate ancient
                        wisdom. Our culture values inclusivity, academic excellence, and the practical application of
                        Buddhist principles
                        in contemporary life.
                    </p>
                    <button class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium h-10 rounded-md px-6 bg-primary text-primary-foreground hover:bg-primary/90 transition-all">
                        We're hiring
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ml-2 h-4 w-4">
                            <path d="M5 12h14"></path>
                            <path d="m12 5 7 7-7 7"></path>
                        </svg>
                    </button>
                </div>
                <div class="relative h-[400px] rounded-2xl overflow-hidden bg-gradient-to-br from-gray-200 to-gray-300 order-1 md:order-2">
                    <img src="{{ asset('assets/frontend/images/about-culture.jpg') }}" alt="WBU Culture" class="object-cover w-full h-full" loading="lazy" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                    <div class="hidden absolute inset-0 items-center justify-center bg-gradient-to-br from-gray-200 to-gray-300">
                        <span class="text-muted-foreground">WBU Culture</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Us Section -->
    <section class="bg-gray-50" style="padding-top: 100px; padding-bottom: 100px;">
        <div class="mx-auto max-w-7xl px-6 lg:px-8">
            <div class="grid md:grid-cols-2 gap-12 items-center">
                <div class="relative h-[400px] rounded-2xl overflow-hidden bg-gradient-to-br from-gray-200 to-gray-300">
                    <img src="{{ asset('assets/frontend/images/about-contact.jpg') }}" alt="Contact WBU" class="object-cover w-full h-full" loading="lazy" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                    <div class="hidden absolute inset-0 items-center justify-center bg-gradient-to-br from-gray-200 to-gray-300">
                        <span class="text-muted-foreground">Contact WBU</span>
                    </div>
                </div>
                <div>
                    <h2 class="text-4xl md:text-5xl font-bold text-foreground mb-6">CONTACT US</h2>
                    <p class="text-muted-foreground leading-relaxed mb-4">
                        We welcome inquiries from Buddhist institutions, scholars, students, and supporters worldwide.
                        Whether you're
                        interested in partnership opportunities, academic programs, or learning more about our mission, our
                        team is here
                        to assist you.
                    </p>
                    <p class="text-muted-foreground leading-relaxed mb-6">
                        Reach out to us to discover how you can be part of the global Buddhist education network. Together,
                        we can advance
                        Buddhist wisdom and create positive change in the world through education and cultural exchange.
                    </p>
                    <a href="{{ url('/contact') }}" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium h-10 rounded-md px-6 bg-primary text-primary-foreground hover:bg-primary/90 transition-all">
                        Contact us
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ml-2 h-4 w-4">
                            <path d="M5 12h14"></path>
                            <path d="m12 5 7 7-7 7"></path>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Latest News Section -->
    <section class="py-16 md:py-24 bg-secondary">
        <div class="mx-auto max-w-7xl px-6 lg:px-8">
            <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-12 text-center">Latest News</h2>
            <div class="relative">
                <div class="flex gap-6 overflow-x-auto scrollbar-hide pb-4 -mx-6 px-6 snap-x snap-mandatory" style="scrollbar-width: none;">
                    @foreach ($news as $item)
                        <div class="min-w-[280px] md:min-w-[300px] snap-start">
                            <a class="group block h-full" href="{{ url('/news/' . $item['id']) }}">
                                <article class="bg-background rounded-lg overflow-hidden shadow-sm border border-border hover:shadow-md transition-shadow h-full flex flex-col">
                                    <div class="relative h-48 overflow-hidden">
                                        <img src="{{ asset('assets/frontend' . $item['image']) }}" alt="{{ $item['title'] }}" class="object-cover w-full h-full group-hover:scale-105 transition-transform duration-300" loading="lazy" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                                        <div class="hidden absolute inset-0 items-center justify-center bg-accent">
                                            <span class="text-muted-foreground text-sm">{{ $item['title'] }}</span>
                                        </div>
                                    </div>
                                    <div class="p-4 flex flex-col flex-grow">
                                        <h3 class="font-semibold text-foreground group-hover:text-primary transition-colors line-clamp-2 mb-2 flex-grow">
                                            {{ $item['title'] }}
                                        </h3>
                                        <div class="flex items-center text-sm text-muted-foreground">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 mr-1">
                                                <path d="M8 2v4"></path>
                                                <path d="M16 2v4"></path>
                                                <rect width="18" height="18" x="3" y="4" rx="2"></rect>
                                                <path d="M3 10h18"></path>
                                            </svg>
                                            {{ $item['date'] }}
                                        </div>
                                    </div>
                                </article>
                            </a>
                        </div>
                    @endforeach
                </div>
                <div class="hidden md:flex absolute -left-4 top-1/2 -translate-y-1/2">
                    <button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all bg-secondary text-secondary-foreground hover:bg-secondary/80 w-9 h-9 shadow-md" onclick="this.closest('.relative').querySelector('.overflow-x-auto').scrollBy({left: -320, behavior: 'smooth'})">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5">
                            <path d="m15 18-6-6 6-6"></path>
                        </svg>
                        <span class="sr-only">{{ __('frontend::common.scroll_left') }}</span>
                    </button>
                </div>
                <div class="hidden md:flex absolute -right-4 top-1/2 -translate-y-1/2">
                    <button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all bg-secondary text-secondary-foreground hover:bg-secondary/80 w-9 h-9 shadow-md" onclick="this.closest('.relative').querySelector('.overflow-x-auto').scrollBy({left: 320, behavior: 'smooth'})">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5">
                            <path d="m9 18 6-6-6-6"></path>
                        </svg>
                        <span class="sr-only">{{ __('frontend::common.scroll_right') }}</span>
                    </button>
                </div>
            </div>
            <div class="flex justify-center mt-8">
                <a href="{{ url('/news') }}" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all h-10 rounded-md px-6 bg-primary text-primary-foreground hover:bg-primary/90">
                    View More
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ml-2 h-4 w-4">
                        <path d="M5 12h14"></path>
                        <path d="m12 5 7 7-7 7"></path>
                    </svg>
                </a>
            </div>
        </div>
    </section>
@endsection