@extends('layouts.app')

@section('title', 
    (\App\Models\Setting::get('site_name') ?: 'My Website') 
    . ' - ' 
    . (\App\Models\Setting::get('seo_about_title') ?: 'About Us')
)

@section('content')
<!-- Hero Section -->
<section class="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden bg-[#0c2340]">
    <div class="absolute inset-0 opacity-20 bg-[url('https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=1600&h=800&fit=crop')] bg-cover bg-center mix-blend-overlay"></div>
    <div class="absolute inset-0 bg-gradient-to-t from-[#f5f1ea] via-transparent to-transparent"></div>
    
    <div class="container mx-auto px-4 relative z-10 text-center">
        <span class="inline-block text-[#c9a84c] font-bold tracking-[0.2em] uppercase text-sm mb-4">Our Story</span>
        <h1 class="font-serif text-5xl lg:text-7xl text-white mb-6 leading-tight">
            Discover the World <br/><span class="text-[#c9a84c] italic">With Us</span>
        </h1>
    </div>
</section>

<!-- Content Section -->
<section class="py-20 bg-[#f5f1ea]">
    <div class="container mx-auto px-4 max-w-5xl">
        <div class="grid md:grid-cols-2 gap-12 items-center">
            <div>
                <h2 class="font-serif text-4xl text-[#0c2340] mb-6">Passionate about Travel, Dedicated to You.</h2>
                <p class="text-[#0c2340]/70 mb-4 leading-relaxed">
                    {{ $settings['site_description'] ?? 'We believe that travel is the ultimate catalyst for personal growth. Our team of expert travelers carefully curates each journey to provide you with the most authentic, immersive, and unforgettable experiences.' }}
                </p>
                <p class="text-[#0c2340]/70 leading-relaxed mb-8">
                    Since our founding, we have helped thousands of travelers explore the hidden gems of our world. We prioritize your comfort, safety, and joy at every step of your journey.
                </p>
                <div class="flex items-center gap-6">
                    <div class="text-center">
                        <div class="font-serif text-3xl text-[#c9a84c]">{{ $settings['stats_travelers'] ?? '5000+' }}</div>
                        <div class="text-xs uppercase tracking-widest text-[#0c2340]/60 mt-1">Happy Travelers</div>
                    </div>
                    <div class="text-center">
                        <div class="font-serif text-3xl text-[#c9a84c]">{{ $settings['stats_destinations'] ?? '50+' }}</div>
                        <div class="text-xs uppercase tracking-widest text-[#0c2340]/60 mt-1">Destinations</div>
                    </div>
                </div>
            </div>
            <div class="relative">
                <div class="absolute inset-0 bg-[#c9a84c] rounded-3xl transform translate-x-4 translate-y-4 opacity-50"></div>
                <img src="https://images.unsplash.com/photo-1522199755839-a2bacb67c546?w=800&h=1000&fit=crop" class="relative rounded-3xl shadow-xl w-full object-cover h-[500px]" alt="Travel team">
            </div>
        </div>
    </div>
</section>
@endsection