@extends('layouts.app')
@section('content')
<div class="pt-24">
<div class="relative py-20 px-4 bg-gradient-to-br from-dark-brown to-deep-green bengali-pattern text-center">
    <h1 class="font-playfair text-5xl text-cream font-bold mb-3" data-aos="fade-up">About Shalik Restaurant</h1>
    <div class="section-divider mt-4"></div>
</div>

<div class="max-w-7xl mx-auto px-4 py-16">
    {{-- Mission --}}
    <div class="grid lg:grid-cols-2 gap-16 items-center mb-20">
        <div data-aos="fade-right">
            <p class="text-gold text-sm tracking-widest uppercase mb-3">Our Mission</p>
            <h2 class="font-playfair text-4xl text-cream font-bold mb-6">Preserving the Soul of Bengali Cuisine</h2>
            <p class="text-cream/70 leading-relaxed mb-5">
                At Shalik Restaurant, every dish is a love letter to Bangladesh — its rivers, its soil, its people.
                We believe authentic food is not just sustenance; it is culture, memory, and identity on a plate.
            </p>
            <p class="text-cream/70 leading-relaxed mb-5 font-bangla text-lg">
                "রান্না শুধু পেট ভরানোর জন্য নয়, এটি আত্মার খোরাক।"
            </p>
            <p class="text-cream/70 leading-relaxed">
                Our chefs draw from generations of family recipes, using locally sourced ingredients, traditional spices,
                and time-honored cooking techniques to bring you the most authentic Bengali dining experience.
            </p>
        </div>
        <div class="glass-card p-10 text-center relative overflow-hidden" data-aos="fade-left">
            <div class="absolute inset-0 bengali-pattern"></div>
            <div class="relative">
                <div class="text-gold font-playfair text-8xl opacity-20 absolute -top-4 -left-2">"</div>
                <p class="font-playfair text-cream text-2xl italic leading-relaxed">
                    "Where tradition meets modern luxury, and every meal tells a Bengali story."
                </p>
                <div class="mt-6 text-gold/60 text-sm">— Founder, Shalik Restaurant</div>
            </div>
        </div>
    </div>

    {{-- Stats --}}
    <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-20">
        @foreach([['12+','Years of Heritage'],['50,000+','Satisfied Guests'],['120+','Menu Items'],['3','Locations']] as [$n,$l])
        <div class="glass-card p-8 text-center" data-aos="fade-up" data-aos-delay="{{ $loop->index*100 }}">
            <div class="font-playfair text-gold text-5xl font-bold mb-2">{{ $n }}</div>
            <div class="text-cream/60 text-sm">{{ $l }}</div>
        </div>
        @endforeach
    </div>

    {{-- Values --}}
    <div class="mb-20">
        <div class="text-center mb-12" data-aos="fade-up">
            <h2 class="font-playfair text-4xl text-cream font-bold">Our Core Values</h2>
            <div class="section-divider mt-4"></div>
        </div>
        <div class="grid md:grid-cols-3 gap-8">
            @foreach([
                ['fas fa-leaf','Freshness First','Every ingredient is hand-selected daily from trusted local suppliers ensuring uncompromising freshness.'],
                ['fas fa-heart','Cooked with Love','Our chefs bring passion and heritage to every dish, following recipes perfected over generations.'],
                ['fas fa-users','Community & Culture','We are more than a restaurant — a gathering place celebrating Bengali culture and togetherness.'],
            ] as [$icon,$title,$desc])
            <div class="glass-card p-8 text-center" data-aos="fade-up" data-aos-delay="{{ $loop->index*150 }}">
                <div class="w-16 h-16 rounded-full bg-gold/20 flex items-center justify-center mx-auto mb-5">
                    <i class="{{ $icon }} text-gold text-2xl"></i>
                </div>
                <h3 class="font-playfair text-cream text-xl font-semibold mb-3">{{ $title }}</h3>
                <p class="text-cream/60 text-sm leading-relaxed">{{ $desc }}</p>
            </div>
            @endforeach
        </div>
    </div>
</div>
</div>
@endsection