@extends('layouts.frontend')

@section('title', 'About Us - Trade Plus Education')

@section('content')

<!-- Hero Section -->
<section class="bg-gradient-to-r from-blue-900 to-blue-700 text-white py-20">
    <div class="container mx-auto px-4">
        <h1 class="text-4xl lg:text-5xl font-bold mb-4 text-center">About Trade Plus Education</h1>
        <p class="text-xl text-center text-blue-100 max-w-3xl mx-auto">
            Your trusted partner in international education for over 10 years
        </p>
    </div>
</section>

<!-- Our Story -->
<section class="py-20 bg-white">
    <div class="container mx-auto px-4">
        <div class="grid lg:grid-cols-2 gap-12 items-center">
            <div>
                <h2 class="text-4xl font-bold text-gray-900 mb-6">Our Story</h2>
                <p class="text-lg text-gray-700 mb-4 leading-relaxed">
                    Trade Plus Education was founded with a mission to make international education accessible to
                    Bangladeshi students. We believe that every student deserves the opportunity to pursue quality
                    education abroad.
                </p>
                <p class="text-lg text-gray-700 mb-4 leading-relaxed">
                    Over the past decade, we've helped more than 1,000 students achieve their dreams of studying in
                    prestigious universities across Korea, USA, Germany, and Australia.
                </p>
                <p class="text-lg text-gray-700 leading-relaxed">
                    Our team of experienced counselors provides personalized guidance throughout your educational
                    journey, from choosing the right university to settling in your new country.
                </p>
            </div>
            <div>
                <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=800&h=600&fit=crop"
                    alt="Students" class="rounded-2xl shadow-2xl">
            </div>
        </div>
    </div>
</section>

<!-- Mission & Vision -->
<section class="py-20 bg-gray-50">
    <div class="container mx-auto px-4">
        <div class="grid md:grid-cols-2 gap-8">
            <div class="bg-white rounded-2xl shadow-xl p-8">
                <div class="text-blue-600 text-5xl mb-4"><i class="fas fa-bullseye"></i></div>
                <h3 class="text-3xl font-bold text-gray-900 mb-4">Our Mission</h3>
                <p class="text-lg text-gray-700 leading-relaxed">
                    To empower Bangladeshi students with world-class education opportunities and provide comprehensive
                    support throughout their international education journey.
                </p>
            </div>
            <div class="bg-white rounded-2xl shadow-xl p-8">
                <div class="text-blue-600 text-5xl mb-4"><i class="fas fa-eye"></i></div>
                <h3 class="text-3xl font-bold text-gray-900 mb-4">Our Vision</h3>
                <p class="text-lg text-gray-700 leading-relaxed">
                    To be the most trusted and reliable international education consultancy in Bangladesh, known for our
                    integrity, expertise, and student success rates.
                </p>
            </div>
        </div>
    </div>
</section>

<!-- Why Choose Us -->
<section class="py-20 bg-white">
    <div class="container mx-auto px-4">
        <h2 class="text-4xl font-bold text-center text-gray-900 mb-12">Why Choose Us?</h2>
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            <div class="text-center p-6">
                <div class="bg-blue-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-user-graduate text-3xl text-blue-600"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">Expert Counselors</h3>
                <p class="text-gray-600">10+ years of experience in international education consulting</p>
            </div>
            <div class="text-center p-6">
                <div class="bg-blue-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-check-circle text-3xl text-blue-600"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">High Success Rate</h3>
                <p class="text-gray-600">95% visa approval rate with 1000+ successful placements</p>
            </div>
            <div class="text-center p-6">
                <div class="bg-blue-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-handshake text-3xl text-blue-600"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">Personalized Service</h3>
                <p class="text-gray-600">One-on-one counseling tailored to your goals and needs</p>
            </div>
            <div class="text-center p-6">
                <div class="bg-blue-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-university text-3xl text-blue-600"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">50+ Partner Universities</h3>
                <p class="text-gray-600">Strong relationships with top universities worldwide</p>
            </div>
            <div class="text-center p-6">
                <div class="bg-blue-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-language text-3xl text-blue-600"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">Language Training</h3>
                <p class="text-gray-600">Professional Korean & English language courses</p>
            </div>
            <div class="text-center p-6">
                <div class="bg-blue-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-headset text-3xl text-blue-600"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">24/7 Support</h3>
                <p class="text-gray-600">Continuous support even after you reach your destination</p>
            </div>
        </div>
    </div>
</section>

<!-- Stats Section -->
<section class="py-20 bg-gradient-to-r from-blue-900 to-blue-700 text-white">
    <div class="container mx-auto px-4">
        <div class="grid md:grid-cols-4 gap-8 text-center">
            <div>
                <div class="text-5xl font-bold mb-2">1000+</div>
                <div class="text-blue-200 text-lg">Students Placed</div>
            </div>
            <div>
                <div class="text-5xl font-bold mb-2">50+</div>
                <div class="text-blue-200 text-lg">Partner Universities</div>
            </div>
            <div>
                <div class="text-5xl font-bold mb-2">95%</div>
                <div class="text-blue-200 text-lg">Visa Success Rate</div>
            </div>
            <div>
                <div class="text-5xl font-bold mb-2">10+</div>
                <div class="text-blue-200 text-lg">Years Experience</div>
            </div>
        </div>
    </div>
</section>

<!-- CTA -->
<section class="py-20 bg-white">
    <div class="container mx-auto px-4 text-center">
        <h2 class="text-4xl font-bold text-gray-900 mb-6">Ready to Start Your Journey?</h2>
        <p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
            Book a free consultation with our expert counselors today
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <a href="{{ route('apply') }}"
                class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-lg font-semibold text-lg transition">
                Apply Now
            </a>
            <a href="{{ route('contact') }}"
                class="bg-gray-200 hover:bg-gray-300 text-gray-900 px-8 py-4 rounded-lg font-semibold text-lg transition">
                Contact Us
            </a>
        </div>
    </div>
</section>

@endsection