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

@section('content')
<header class="page-hero">
    <div class="container" data-aos="fade-up">
        <div class="crumb">Home — About</div>
        <h1>The House of Grace</h1>
    </div>
</header>

<section class="section">
    <div class="container">
        <div class="row align-items-center g-5">
            <div class="col-lg-5" data-aos="fade-right">
                <div class="intro-img">
                    <img src="{{ asset('images/founder-1.jpg') }}" alt="Deepanvita"
                         onerror="this.outerHTML='<div class=\'ph\' style=\'aspect-ratio:4/5\'>Founder Photo</div>'">
                    <span class="frame"></span>
                </div>
            </div>
            <div class="col-lg-6 offset-lg-1" data-aos="fade-left">
                <span class="label">Our Founder</span>
                <h2 class="h-lg mt-3 mb-4">Deepanvita</h2>
                <p>Deepanvita is an experienced fashion and modeling expert with a deep understanding of the glamour industry. A former <strong>Mrs. West Bengal</strong>, she specialises in talent grooming, personality development, ramp walk and professional modeling training.</p>
                <p class="mb-4">Her mission is to bring new and aspiring talent to national and international platforms — building confidence, presence and professionalism in every individual she mentors.</p>
                <div class="d-flex flex-wrap gap-2">
                    <span class="label" style="border:1px solid var(--line);padding:.5rem 1rem">Former Mrs. West Bengal</span>
                    <span class="label" style="border:1px solid var(--line);padding:.5rem 1rem">Modeling Training</span>
                    <span class="label" style="border:1px solid var(--line);padding:.5rem 1rem">Ramp & Grooming</span>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section bg-cream">
    <div class="container">
        <div class="row g-4 g-lg-5 align-items-stretch">
            <div class="col-md-6" data-aos="fade-up">
                <div class="p-4 p-lg-5 bg-paper h-100" style="border:1px solid var(--line)">
                    <i class="bi bi-bullseye fs-2 text-gold"></i>
                    <h3 class="h-md mt-3 mb-2">Our Mission</h3>
                    <p class="mb-0">To discover, nurture and elevate new talent — offering a professional pathway to the national and international stages of fashion, pageantry, awards and film.</p>
                </div>
            </div>
            <div class="col-md-6" data-aos="fade-up" data-aos-delay="100">
                <div class="p-4 p-lg-5 bg-paper h-100" style="border:1px solid var(--line)">
                    <i class="bi bi-eye fs-2 text-gold"></i>
                    <h3 class="h-md mt-3 mb-2">Our Vision</h3>
                    <p class="mb-0">To become a leading name in talent development — where elegance, style and confidence define every individual we represent and every event we create.</p>
                </div>
            </div>
        </div>
    </div>
</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 Now</a>
        </div>
    </div>
</section>
@endsection
