@extends('layouts.app')

@section('title', 'About Us - JobifyGarden')
@section('description', 'Learn about JobifyGarden, your trusted job aggregator platform connecting job seekers with opportunities from multiple sources.')
@section('canonical', route('about'))

@section('content')
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <!-- Header -->
    <div class="text-center mb-12">
        <h1 class="text-4xl font-bold text-gray-900 mb-4">About JobifyGarden</h1>
        <p class="text-xl text-gray-600">Your trusted job aggregator platform</p>
    </div>

    <!-- Content -->
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8 space-y-8">
        <!-- Mission Section -->
        <section>
            <h2 class="text-2xl font-semibold text-gray-900 mb-4">Our Mission</h2>
            <p class="text-gray-700 leading-relaxed">
                JobifyGarden was created with a simple mission: to make job searching easier and more efficient.
                We aggregate job listings from multiple trusted sources, bringing thousands of opportunities to
                one convenient platform. Whether you're looking for remote work, full-time positions, or freelance
                opportunities, we're here to help you find your next career move.
            </p>
        </section>

        <!-- What We Do Section -->
        <section>
            <h2 class="text-2xl font-semibold text-gray-900 mb-4">What We Do</h2>
            <p class="text-gray-700 leading-relaxed mb-4">
                JobifyGarden aggregates job listings from various free job APIs and job boards, providing you with:
            </p>
            <ul class="list-disc list-inside space-y-2 text-gray-700 ml-4">
                <li>Access to thousands of job listings from multiple sources</li>
                <li>Advanced search and filtering capabilities</li>
                <li>Real-time job updates from trusted platforms</li>
                <li>Remote and on-site job opportunities across various industries</li>
                <li>Easy-to-use interface for efficient job hunting</li>
            </ul>
        </section>

        <!-- Why Choose Us Section -->
        <section>
            <h2 class="text-2xl font-semibold text-gray-900 mb-4">Why Choose JobifyGarden</h2>
            <div class="grid md:grid-cols-2 gap-6">
                <div class="bg-emerald-50 p-6 rounded-lg">
                    <h3 class="font-semibold text-gray-900 mb-2">Comprehensive Coverage</h3>
                    <p class="text-gray-700 text-sm">We aggregate jobs from multiple sources, so you don't have to visit multiple websites.</p>
                </div>
                <div class="bg-emerald-50 p-6 rounded-lg">
                    <h3 class="font-semibold text-gray-900 mb-2">Always Up-to-Date</h3>
                    <p class="text-gray-700 text-sm">Our automated system regularly fetches new job listings to keep our database current.</p>
                </div>
                <div class="bg-emerald-50 p-6 rounded-lg">
                    <h3 class="font-semibold text-gray-900 mb-2">Smart Search</h3>
                    <p class="text-gray-700 text-sm">Advanced filtering options help you find exactly what you're looking for quickly.</p>
                </div>
                <div class="bg-emerald-50 p-6 rounded-lg">
                    <h3 class="font-semibold text-gray-900 mb-2">Free to Use</h3>
                    <p class="text-gray-700 text-sm">All features are completely free. No hidden fees or premium subscriptions required.</p>
                </div>
            </div>
        </section>

        <!-- Contact CTA -->
        <section class="bg-gray-50 p-6 rounded-lg text-center">
            <h2 class="text-xl font-semibold text-gray-900 mb-3">Have Questions?</h2>
            <p class="text-gray-700 mb-4">We'd love to hear from you.</p>
            <a href="{{ route('contact') }}" class="inline-block px-6 py-3 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-lg transition-colors duration-200">
                Contact Us
            </a>
        </section>
    </div>
</div>
@endsection