@extends("frontend.layouts.app")

@section("title")
    About Us - {{ app_name() }}
@endsection

@section("content")
<div class="container mx-auto px-6 py-12">

    <!-- Hero Section -->
    <div class="relative bg-cover bg-center rounded-xl shadow-xl text-white p-16 mb-12" style="background-image: url('{{asset('/images/browse-ban.jpeg')}}');">
        <div class="absolute inset-0 bg-black bg-opacity-50 rounded-xl"></div>
        <div class="relative z-10 text-center">
            <h1 class="text-4xl md:text-5xl font-bold">Empowering You With Trusted Brokers</h1>
            <p class="mt-4 text-lg md:text-xl text-gray-200 max-w-3xl mx-auto">
                Whether you're buying your first home or investing in property — we connect you with verified, experienced brokers who care.
            </p>
        </div>
    </div>

    <!-- Our Story Section -->
    <div class="grid md:grid-cols-2 gap-12 items-center">
        <div>
            <h2 class="text-3xl font-semibold mb-4 text-gray-800">Our Story</h2>
            <p class="text-gray-600 leading-relaxed">
                Brokeroos was built on the belief that everyone deserves access to expert, trustworthy loan advisors.
                Our platform bridges the gap between borrowers and verified brokers—helping you make confident decisions.
            </p>
        </div>
        <div>
            <img src="{{asset('/images/banner-img.png')}}" alt="Our Team" class="rounded-xl shadow-lg">
        </div>
    </div>

    <!-- Mission & Vision Section -->
    <div class="grid md:grid-cols-2 gap-6 mt-16">
        <div class="bg-white rounded-xl shadow-md p-8">
            <h3 class="text-xl font-bold text-red-600 mb-2">Our Mission</h3>
            <p class="text-gray-700">
                To simplify the loan discovery process by offering a transparent, secure, and trusted platform for finding the best-fit brokers.
            </p>
        </div>
        <div class="bg-white rounded-xl shadow-md p-8">
            <h3 class="text-xl font-bold text-red-600 mb-2">Our Vision</h3>
            <p class="text-gray-700">
                To become India’s most reliable broker-matching ecosystem where technology meets trust.
            </p>
        </div>
    </div>

    <!-- Why Choose Us Section -->
    <div class="mt-20 text-center">
        <h2 class="text-3xl font-semibold mb-6">Why Choose Brokeroos?</h2>
        <div class="grid md:grid-cols-4 gap-6">
            @foreach([
                ['icon' => 'fa-user-check', 'title' => 'Verified Experts', 'desc' => 'Every broker is vetted and background-checked.'],
                ['icon' => 'fa-shield-alt', 'title' => 'Transparent Pricing', 'desc' => 'What you see is what you get — no hidden fees.'],
                ['icon' => 'fa-search-location', 'title' => 'Smart Matching', 'desc' => 'Match with brokers based on your exact needs.'],
                ['icon' => 'fa-headset', 'title' => 'Dedicated Support', 'desc' => 'We guide you every step of the way.']
            ] as $feature)
            <div class="bg-white p-6 rounded-xl shadow-md">
                <div class="text-red-600 text-3xl mb-4">
                    <i class="fas {{ $feature['icon'] }}"></i>
                </div>
                <h4 class="text-lg font-semibold mb-2">{{ $feature['title'] }}</h4>
                <p class="text-gray-600">{{ $feature['desc'] }}</p>
            </div>
            @endforeach
        </div>
    </div>

    <!-- CTA -->
    <div class="text-center mt-20">
        <a href="{{ route('find.broker') }}" class="bg-red-600 hover:bg-red-700 text-white text-lg px-8 py-4 rounded-xl shadow-lg transition-all duration-300">
            Find a Trusted Broker Now
        </a>
    </div>

</div>
@endsection