@extends('frontend.layouts.app')

@section('content')
<section class="relative min-h-[55vh] flex items-center justify-center overflow-hidden">
    <div class="absolute inset-0 bg-gradient-to-r from-black via-black/85 to-red-950/40"></div>
    <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1501386761578-eac5c94b800a?q=80&w=1600&auto=format&fit=crop')] bg-cover bg-center opacity-25"></div>

    <div class="relative max-w-6xl mx-auto px-6 py-24 text-center">
        <p class="text-red-500 uppercase tracking-[0.4em] mb-4">About</p>
        <h1 class="text-6xl md:text-8xl font-extrabold">The Movement. The Voice. The Legacy.</h1>
        <p class="text-gray-300 max-w-3xl mx-auto mt-6 text-lg leading-8">
            Explore the story, energy and creative path behind one of Ghana’s most recognizable musical forces.
        </p>
    </div>
</section>

<section class="max-w-7xl mx-auto px-6 py-20 grid lg:grid-cols-2 gap-14 items-center">
    <div>
        <div class="rounded-[2rem] overflow-hidden border border-red-900 shadow-2xl">
            <div class="min-h-[520px] bg-gradient-to-br from-red-900 via-black to-black flex items-center justify-center text-gray-500 text-xl">
                Artist Image / About Banner
            </div>
        </div>
    </div>

    <div>
        <p class="text-red-500 uppercase tracking-[0.35em] mb-3">Who is Stonebwoy</p>
        <h2 class="text-5xl md:text-6xl font-extrabold mb-6">A Global Ghanaian Sound</h2>

        <div class="text-gray-300 text-lg leading-9 space-y-5">
            {!! $page->content !!}
        </div>
    </div>
</section>

<section class="max-w-7xl mx-auto px-6 pb-20">
    <div class="grid md:grid-cols-3 gap-8">
        <div class="rounded-[2rem] border border-red-950 bg-[#101010] p-8">
            <p class="text-red-500 text-sm uppercase tracking-[0.3em] mb-3">Music Identity</p>
            <h3 class="text-3xl font-bold mb-4">Afro-Dancehall Authority</h3>
            <p class="text-gray-400 leading-8">
                Powerful rhythms, rooted storytelling and global crossover sound with unmistakable stage energy.
            </p>
        </div>

        <div class="rounded-[2rem] border border-red-950 bg-[#101010] p-8">
            <p class="text-red-500 text-sm uppercase tracking-[0.3em] mb-3">Performance</p>
            <h3 class="text-3xl font-bold mb-4">World-Class Live Presence</h3>
            <p class="text-gray-400 leading-8">
                Built for major stages, intimate moments and unforgettable crowd connection across continents.
            </p>
        </div>

        <div class="rounded-[2rem] border border-red-950 bg-[#101010] p-8">
            <p class="text-red-500 text-sm uppercase tracking-[0.3em] mb-3">Influence</p>
            <h3 class="text-3xl font-bold mb-4">Culture Beyond Music</h3>
            <p class="text-gray-400 leading-8">
                An artist brand that extends into identity, movement, inspiration and African creative excellence.
            </p>
        </div>
    </div>
</section>
@endsection