@extends('layouts.app')

@section('title', 'About Us — '.config('site.full_name'))
@section('meta_description', 'Learn about our MARA-registered team and our mission to make education and migration in Australia simple, honest and successful.')

@section('content')

<x-page-hero
    title="Your trusted partner for"
    accent="education & migration"
    crumb="About Us"
    subtitle="We are a team of registered migration agents and education counsellors dedicated to turning your Australian dream into a confident, well-planned reality." />

{{-- Story --}}
<section class="container-x grid items-center gap-14 py-20 lg:grid-cols-2 md:py-24">
    <div class="reveal relative">
        <div class="grid grid-cols-2 gap-4">
            <div class="aspect-3/4 rounded-3xl bg-gradient-to-br from-brand-500 to-brand-800"></div>
            <div class="mt-8 aspect-3/4 rounded-3xl bg-gradient-to-br from-sky-300 to-sky-600"></div>
        </div>
        <div class="absolute inset-x-0 -bottom-6 mx-auto w-max rounded-2xl border border-slate-100 bg-white px-6 py-4 shadow-xl">
            <p class="text-center text-sm font-semibold text-slate-500"><span class="font-serif text-2xl text-brand-700">MARA</span> registered &amp; regulated</p>
        </div>
    </div>
    <div class="reveal">
        <x-eyebrow>Our story</x-eyebrow>
        <h2 class="mt-4 text-3xl font-bold leading-tight text-ink md:text-4xl">Guiding people to a <span class="accent">brighter future</span> in Australia</h2>
        <p class="mt-5 leading-relaxed text-slate-500">
            {{ config('site.name') }} was founded on a simple belief: navigating study and migration shouldn't feel overwhelming. Over 15 years we've grown into a full-service education and migration practice, helping thousands of students and families find their place in Australia.
        </p>
        <p class="mt-4 leading-relaxed text-slate-500">
            From your first enquiry to your visa grant — and often long after — we stay by your side with honest advice, meticulous paperwork and genuine care.
        </p>
        <div class="mt-8 grid grid-cols-3 gap-6">
            @foreach ([['4K+','Students'],['9K+','Visas'],['80+','Partners']] as $s)
                <div>
                    <p class="font-serif text-3xl font-semibold text-brand-700">{{ $s[0] }}</p>
                    <p class="mt-1 text-sm text-slate-400">{{ $s[1] }}</p>
                </div>
            @endforeach
        </div>
    </div>
</section>

{{-- Mission / Vision / Values --}}
<section class="bg-slate-50/70 py-20 md:py-24">
    <div class="container-x">
        <div class="reveal mx-auto max-w-2xl text-center">
            <x-eyebrow class="justify-center">What drives us</x-eyebrow>
            <h2 class="mt-4 text-3xl font-bold text-ink md:text-4xl">Mission, vision &amp; <span class="accent">values</span></h2>
        </div>
        <div class="mt-14 grid gap-6 md:grid-cols-3">
            @php
                $mvv = [
                    ['t'=>'Our Mission','d'=>'To provide honest, expert guidance that makes education and migration accessible, transparent and stress-free for everyone.','i'=>'M12 2l2.4 7.4H22l-6 4.6 2.3 7.4L12 17l-6.3 4.4L8 14 2 9.4h7.6z'],
                    ['t'=>'Our Vision','d'=>'To be Australia\'s most trusted one-stop education and migration partner, known for integrity and outcomes.','i'=>'M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z'],
                    ['t'=>'Our Values','d'=>'Integrity, empathy and excellence guide every case we take on — no false promises, ever.','i'=>'M12 2 4 6v6c0 5 3.4 8.5 8 10 4.6-1.5 8-5 8-10V6z'],
                ];
            @endphp
            @foreach ($mvv as $m)
                <div class="reveal rounded-3xl border border-slate-100 bg-white p-8 shadow-sm">
                    <span class="grid h-14 w-14 place-items-center rounded-2xl bg-brand-600 text-white shadow-lg shadow-brand-600/25">
                        <svg class="h-7 w-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="{{ $m['i'] }}"/></svg>
                    </span>
                    <h3 class="mt-6 text-xl font-bold text-ink">{{ $m['t'] }}</h3>
                    <p class="mt-3 leading-relaxed text-slate-500">{{ $m['d'] }}</p>
                </div>
            @endforeach
        </div>
    </div>
</section>

{{-- Why choose us / features --}}
<section class="container-x py-20 md:py-24">
    <div class="grid items-center gap-14 lg:grid-cols-2">
        <div class="reveal">
            <x-eyebrow>The {{ config('site.name') }} difference</x-eyebrow>
            <h2 class="mt-4 text-3xl font-bold leading-tight text-ink md:text-4xl">Why families choose to <span class="accent">work with us</span></h2>
            <div class="mt-8 space-y-6">
                @php
                    $feat = [
                        ['t'=>'Registered & regulated','d'=>'Every case is overseen by MARA-registered migration agents you can verify.'],
                        ['t'=>'One team, one roof','d'=>'Course selection, visas and migration handled together — no hand-offs, no gaps.'],
                        ['t'=>'Transparent pricing','d'=>'Clear quotes upfront. You always know what you\'re paying for and why.'],
                        ['t'=>'Real, ongoing support','d'=>'We stay reachable long after lodgement, through every follow-up and renewal.'],
                    ];
                @endphp
                @foreach ($feat as $f)
                    <div class="flex gap-5">
                        <span class="grid h-12 w-12 shrink-0 place-items-center rounded-2xl bg-brand-50 text-brand-600">
                            <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                        </span>
                        <div>
                            <h3 class="text-lg font-bold text-ink">{{ $f['t'] }}</h3>
                            <p class="mt-1 text-slate-500">{{ $f['d'] }}</p>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
        <div class="reveal relative">
            <div class="overflow-hidden rounded-4xl bg-gradient-to-br from-ink via-brand-800 to-brand-600 p-10 text-white">
                <svg class="h-12 w-12 text-brand-300" viewBox="0 0 24 24" fill="currentColor"><path d="M9.6 4.8C6 4.8 3 7.8 3 11.4c0 3.6 3 6.6 6.6 6.6.4 0 .8 0 1.2-.1-.8 1-2 1.7-3.6 2.1a.6.6 0 0 0 .2 1.2c4.8-.6 8.4-4.5 8.4-9.3v-.5c0-3.6-3-6.6-6.6-6.6Zm0 0"/></svg>
                <blockquote class="mt-6 text-xl font-medium leading-relaxed">Our promise is simple — we treat your future with the same care we'd give our own family. No shortcuts. No false hope. Just the right plan, done properly.</blockquote>
                <div class="mt-8 flex items-center gap-3 border-t border-white/15 pt-6">
                    <span class="grid h-12 w-12 place-items-center rounded-full bg-white/10 font-bold">SA</span>
                    <div><p class="font-bold">The {{ config('site.name') }} Team</p><p class="text-sm text-brand-200">Registered Migration Agents</p></div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- Team --}}
<section class="bg-slate-50/70 py-20 md:py-24">
    <div class="container-x">
        <div class="reveal mx-auto max-w-2xl text-center">
            <x-eyebrow class="justify-center">Meet the team</x-eyebrow>
            <h2 class="mt-4 text-3xl font-bold text-ink md:text-4xl">The people behind your <span class="accent">success</span></h2>
        </div>
        <div class="mt-14 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
            @foreach ($team as $t)
                <div class="reveal group overflow-hidden rounded-3xl border border-slate-100 bg-white shadow-sm">
                    <div class="aspect-4/5 bg-gradient-to-br {{ $t->gradient }}">
                        @if ($t->photoUrl())
                            <img src="{{ $t->photoUrl() }}" alt="{{ $t->name }}" class="h-full w-full object-cover">
                        @endif
                    </div>
                    <div class="p-5">
                        <h3 class="text-lg font-bold text-ink">{{ $t->name }}</h3>
                        <p class="text-sm text-brand-600">{{ $t->role }}</p>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>

<x-cta-band />

@endsection
