@extends('layouts.app')
@section('title', 'Services')

@section('content')
<header class="page-hero">
    <div class="container" data-aos="fade-up">
        <div class="crumb">Home — Services</div>
        <h1>Our Disciplines</h1>
        <p class="mt-3 mb-0">Beauty Pageant · Fashion Show · Award Show · Film Making</p>
    </div>
</header>

{{-- Four pillars, full editorial rows --}}
<section>
    @foreach($pillars as $i => $p)
    <div class="pillar-row {{ $i % 2 ? 'flip' : '' }}">
        <div class="container-fluid px-0">
            <div class="grid">
                <div class="media" data-aos="{{ $i % 2 ? 'fade-left' : 'fade-right' }}">
                    <img src="{{ asset($p['image']) }}" alt="{{ $p['title'] }}"
                         onerror="this.outerHTML='<div class=\'ph\' style=\'position:absolute;inset:0\'>{{ $p['title'] }}</div>'">
                </div>
                <div class="body" data-aos="{{ $i % 2 ? 'fade-right' : 'fade-left' }}">
                    <div class="no">{{ $p['no'] }}</div>
                    <div class="ptag">{{ $p['tag'] }}</div>
                    <h3>{{ $p['title'] }}</h3>
                    <p>{{ $p['text'] }}</p>
                    <ul class="feats">
                        @foreach($p['features'] as $f)<li>{{ $f }}</li>@endforeach
                    </ul>
                    <a href="{{ route('registration.create') }}" class="link-gold">Register For This <i class="bi bi-arrow-right"></i></a>
                </div>
            </div>
        </div>
    </div>
    @endforeach
</section>

<section class="pb-5 pt-5">
    <div class="container">
        <div class="cta-banner" data-aos="zoom-in">
            <h2 class="h-lg mb-3" style="color:#fff">Ready To Be Discovered?</h2>
            <a href="{{ route('registration.create') }}" class="btn btn-gold">Register For An Audition</a>
        </div>
    </div>
</section>
@endsection
