@extends('layouts.app')

@section('title', 'About Frantyapp - Corporate Real Estate')

@section('content')
<div class="bg-black text-white py-16 border-b border-neutral-800">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center max-w-3xl">
        <span class="text-xs font-bold uppercase tracking-[0.3em] text-gray-400 block">Corporate Overview</span>
        <div class="w-12 h-[2px] bg-brand-blue mx-auto mt-2 mb-3"></div>
        <h1 class="font-serif-heading font-extrabold text-4xl sm:text-5xl mt-2">Redefining Real Estate Excellence</h1>
        <p class="text-gray-400 text-sm sm:text-base mt-2 font-light">Combining market intelligence, legal title verification, and corporate integrity across Nigeria.</p>
    </div>
</div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        
        <div class="border border-gray-200 p-8 bg-white space-y-4">
            <span class="text-[10px] font-bold uppercase tracking-widest text-brand-blue block">Mission</span>
            <h3 class="font-serif-heading font-bold text-2xl text-black">Title Verification and Security</h3>
            <p class="text-gray-600 text-xs leading-relaxed font-light">
                To eliminate title risk by verifying C of O, Governor's Consent, and Gazette status for every property before client acquisition.
            </p>
        </div>

        <div class="border border-gray-200 p-8 bg-white space-y-4">
            <span class="text-[10px] font-bold uppercase tracking-widest text-brand-blue block">Vision</span>
            <h3 class="font-serif-heading font-bold text-2xl text-black">Institutional Integrity</h3>
            <p class="text-gray-600 text-xs leading-relaxed font-light">
                To serve as West Africa's premier luxury broker and real estate advisory firm for high-net-worth investors and corporations.
            </p>
        </div>

        <div class="border border-gray-200 p-8 bg-white space-y-4">
            <span class="text-[10px] font-bold uppercase tracking-widest text-brand-blue block">Values</span>
            <h3 class="font-serif-heading font-bold text-2xl text-black">Core Pillars</h3>
            <p class="text-gray-600 text-xs leading-relaxed font-light">
                Absolute Transparency, Legal Rigor, Diligence, Client Wealth Preservation, and Premium Urban Property Development.
            </p>
        </div>

    </div>
</div>

<!-- Team Roster -->
<section class="py-16 bg-brand-light border-t border-gray-200">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center max-w-2xl mx-auto mb-14">
            <span class="text-xs font-bold uppercase tracking-[0.25em] text-gray-400">Leadership</span>
            <h2 class="font-serif-heading font-extrabold text-3xl sm:text-4xl text-black mt-2">Frantyapp Executive Roster</h2>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
            @foreach($agents as $agent)
                <div class="border border-gray-200 p-6 text-center flex flex-col items-center bg-white">
                    <img src="{{ asset($agent->photo) }}" alt="{{ $agent->name }}" class="w-28 h-28 rounded-none object-cover border border-gray-300 shadow-sm mb-4">
                    <h3 class="font-serif-heading font-bold text-xl text-black">{{ $agent->name }}</h3>
                    <span class="text-[10px] font-bold uppercase tracking-wider text-gray-500 mt-1 block">{{ $agent->title }}</span>
                    <p class="text-gray-500 text-xs mt-3 line-clamp-3 leading-relaxed font-light">
                        {{ $agent->bio }}
                    </p>
                </div>
            @endforeach
        </div>
    </div>
</section>
@endsection
