@extends('layouts.site')
@section('title', 'About Epelcon')

@section('content')
    <section class="bg-slate-950 py-16 text-center text-white">
        <p class="text-xs font-bold uppercase tracking-[0.3em] text-gold-400">Our story</p>
        <h1 class="mt-2 font-serif text-4xl font-bold sm:text-5xl">About Epelcon Hospitality</h1>
        <p class="mx-auto mt-4 max-w-2xl px-4 text-slate-300">A luxury hospitality group and technology platform — hosting guests in Nigeria's most memorable properties, and powering the industry with the software that runs them.</p>
    </section>

    <section class="mx-auto max-w-4xl px-4 py-14 sm:px-6">
        <div class="prose prose-slate mx-auto max-w-none">
            <p class="text-lg leading-relaxed text-slate-700">Epelcon began as a single hotel in Abuja with a simple idea: every guest should feel their stay is a <em>celebration</em>. From that flagship property, we grew into a network of hotels and restaurants — and along the way, we built the technology that keeps hospitality effortless behind the scenes.</p>
            <p class="mt-4 leading-relaxed text-slate-600">Today Epelcon powers rooms, kitchens, bars, housekeeping teams, front desks, accountants and executive owners across dozens of properties on one intelligent platform. Our guests earn rewards that work at every location. Our partner hotels share bookings, referrals and best practice. And our team obsesses over one thing: hospitality that feels human, warm and unmistakably African-luxurious.</p>
        </div>

        <div class="mt-10 grid gap-5 sm:grid-cols-3">
            @foreach ([['💛', 'Warm hospitality', 'Every interaction, from booking to check-out, should feel personal.'], ['🌟', 'Uncompromising quality', 'Rooms, food, service — we sweat every detail.'], ['🚀', 'Tech that empowers', 'Owners and staff should have real-time control at their fingertips.']] as [$icon, $title, $body])
                <div class="rounded-3xl bg-white p-6 text-center shadow-sm ring-1 ring-slate-200">
                    <span class="text-4xl">{{ $icon }}</span>
                    <h3 class="mt-3 font-serif text-lg font-bold text-slate-900">{{ $title }}</h3>
                    <p class="mt-2 text-sm text-slate-600">{{ $body }}</p>
                </div>
            @endforeach
        </div>

        <div class="mt-12 rounded-3xl bg-gradient-to-br from-slate-950 to-indigo-900 p-10 text-center text-white">
            <h2 class="font-serif text-3xl font-bold">Come stay with us</h2>
            <p class="mx-auto mt-2 max-w-lg text-slate-300">The best way to understand Epelcon is to experience it. Book a room — the rest is our job.</p>
            <a href="{{ route('site.book') }}" class="mt-6 inline-block rounded-xl bg-gradient-to-r from-gold-400 to-gold-600 px-8 py-3.5 text-sm font-extrabold text-slate-950 hover:brightness-110">Book your stay →</a>
        </div>
    </section>
@endsection
