@extends('frontend.layouts.app')

@section('content')
<section class="relative py-24 bg-gradient-to-b from-black to-[#0f0f0f] text-center">
    <div class="max-w-5xl mx-auto px-6">
        <p class="text-red-500 uppercase tracking-[0.4em] mb-4">Biography</p>
        <h1 class="text-6xl md:text-8xl font-extrabold">Stonebwoy Bio</h1>
        <p class="text-gray-400 mt-6 text-lg leading-8 max-w-3xl mx-auto">
            The journey, milestones and musical rise behind a globally respected Ghanaian artist.
        </p>
    </div>
</section>

<section class="max-w-5xl mx-auto px-6 py-18">
    <div class="rounded-[2rem] border border-red-950 bg-[#101010] p-8 md:p-12 shadow-2xl">
        <div class="prose prose-invert max-w-none text-gray-200 leading-8 text-lg">
            {!! $page->content !!}
        </div>
    </div>
</section>

<section class="max-w-7xl mx-auto px-6 pb-20">
    <div class="grid md:grid-cols-4 gap-6">
        <div class="rounded-[2rem] bg-[#111] border border-red-950 p-7 text-center">
            <p class="text-gray-500 uppercase text-xs tracking-[0.3em]">Origin</p>
            <h3 class="text-3xl mt-3 font-bold">Ghana</h3>
        </div>
        <div class="rounded-[2rem] bg-[#111] border border-red-950 p-7 text-center">
            <p class="text-gray-500 uppercase text-xs tracking-[0.3em]">Genre</p>
            <h3 class="text-3xl mt-3 font-bold">Afro-Dancehall</h3>
        </div>
        <div class="rounded-[2rem] bg-[#111] border border-red-950 p-7 text-center">
            <p class="text-gray-500 uppercase text-xs tracking-[0.3em]">Presence</p>
            <h3 class="text-3xl mt-3 font-bold">Global</h3>
        </div>
        <div class="rounded-[2rem] bg-[#111] border border-red-950 p-7 text-center">
            <p class="text-gray-500 uppercase text-xs tracking-[0.3em]">Legacy</p>
            <h3 class="text-3xl mt-3 font-bold">Iconic</h3>
        </div>
    </div>
</section>
@endsection