@extends('layouts.app')
@section('title', 'About Us — De Eventa')

@section('content')
<div class="pt-20">

<section class="py-20 bg-dark-800 text-center">
    <div class="max-w-4xl mx-auto px-4">
        <p class="section-subtitle">Our Story</p>
        <h1 class="section-title mb-4">About De Eventa</h1>
        <div class="gold-divider"></div>
    </div>
</section>

<section class="py-20 bg-dark-900">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center mb-20">
            <div>
                <p class="section-subtitle">Who We Are</p>
                <h2 class="font-serif text-3xl text-white font-bold mb-6">
                    Premium Event Management<br>Since Day One
                </h2>
                <p class="text-dark-200 leading-relaxed mb-4">
                    De Eventa was born from a passion for creating extraordinary moments.
                    We believe every event — big or small — deserves world-class planning
                    and flawless execution.
                </p>
                <p class="text-dark-200 leading-relaxed">
                    Our team of experienced event professionals brings creativity, dedication,
                    and precision to every project. From intimate gatherings to grand celebrations,
                    we handle every detail so you can be fully present.
                </p>
            </div>
            <div class="grid grid-cols-2 gap-4">
                @foreach(['500+ Events','8+ Years','1000+ Clients','5★ Rating'] as $stat)
                <div class="card-dark p-6 text-center">
                    <p class="font-serif text-3xl text-gold-500 font-bold">{{ explode(' ',$stat)[0] }}</p>
                    <p class="text-dark-300 text-sm mt-1">{{ implode(' ', array_slice(explode(' ',$stat), 1)) }}</p>
                </div>
                @endforeach
            </div>
        </div>

        <div class="text-center">
            <a href="{{ route('services') }}#booking-form" class="btn-gold">Start Planning</a>
        </div>
    </div>
</section>

</div>
@endsection