@extends('frontend.layouts.app')

@section('content')
    <!-- Hero Section -->
    <section class="bg-gradient-to-r from-primary-800 to-primary-600 py-16 lg:py-24">
        <div class="container">
            <div class="max-w-3xl mx-auto text-center text-white">
                <h1 class="text-4xl lg:text-5xl font-bold mb-6">About Kashi Housing</h1>
                <p class="text-xl text-white/80">
                    Your trusted partner for verified, broker-free real estate in Varanasi and beyond.
                </p>
            </div>
        </div>
    </section>

    <!-- Our Story -->
    <section class="section bg-white">
        <div class="container">
            <div class="lg:flex items-center gap-16">
                <div class="lg:w-1/2 mb-8 lg:mb-0">
                    <img src="https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=600&h=400&fit=crop"
                        alt="Kashi Housing Team" class="rounded-2xl shadow-xl w-full">
                </div>
                <div class="lg:w-1/2">
                    <span
                        class="inline-block px-4 py-1.5 bg-primary-100 text-primary-700 rounded-full text-sm font-semibold mb-4">Our
                        Story</span>
                    <h2 class="text-3xl font-bold text-gray-900 mb-6">Building Trust in Real Estate Since 2020</h2>
                    <p class="text-gray-600 mb-4">
                        Kashi Housing was founded with a simple mission: to make property buying, selling, and renting
                        transparent, hassle-free, and broker-free in the holy city of Varanasi.
                    </p>
                    <p class="text-gray-600 mb-4">
                        We understand the challenges people face in the traditional real estate market – from hidden
                        commissions to unreliable property information. That's why we created a platform where every listing
                        is verified, every price is transparent, and every transaction is secure.
                    </p>
                    <p class="text-gray-600">
                        Today, we've helped hundreds of families find their dream homes and thousands of investors make
                        smart property decisions. Our team of local experts knows Varanasi inside out, and we're committed
                        to providing personalized service to every customer.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Our Values -->
    <section class="section bg-gray-50">
        <div class="container">
            <div class="max-w-3xl mx-auto text-center mb-12">
                <span
                    class="inline-block px-4 py-1.5 bg-secondary-100 text-secondary-700 rounded-full text-sm font-semibold mb-4">Our
                    Values</span>
                <h2 class="text-3xl font-bold text-gray-900 mb-4">What We Stand For</h2>
                <p class="text-gray-600">
                    Our core values guide everything we do, from listing verification to customer support.
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <div class="bg-white p-6 rounded-xl shadow-sm text-center">
                    <div class="w-16 h-16 bg-primary-100 rounded-xl flex items-center justify-center mx-auto mb-4">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-primary-600" fill="none"
                            viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                        </svg>
                    </div>
                    <h3 class="text-lg font-semibold mb-2">100% Verified</h3>
                    <p class="text-gray-500 text-sm">Every property is personally verified for ownership and documentation
                    </p>
                </div>

                <div class="bg-white p-6 rounded-xl shadow-sm text-center">
                    <div class="w-16 h-16 bg-secondary-100 rounded-xl flex items-center justify-center mx-auto mb-4">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-secondary-600" fill="none"
                            viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </div>
                    <h3 class="text-lg font-semibold mb-2">Zero Brokerage</h3>
                    <p class="text-gray-500 text-sm">No hidden fees, no commissions – deal directly with property owners</p>
                </div>

                <div class="bg-white p-6 rounded-xl shadow-sm text-center">
                    <div class="w-16 h-16 bg-accent-100 rounded-xl flex items-center justify-center mx-auto mb-4">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-accent-600" fill="none"
                            viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M13 10V3L4 14h7v7l9-11h-7z" />
                        </svg>
                    </div>
                    <h3 class="text-lg font-semibold mb-2">Fast & Easy</h3>
                    <p class="text-gray-500 text-sm">Streamlined process from property search to final documentation</p>
                </div>

                <div class="bg-white p-6 rounded-xl shadow-sm text-center">
                    <div class="w-16 h-16 bg-gray-100 rounded-xl flex items-center justify-center mx-auto mb-4">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-gray-600" fill="none"
                            viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                        </svg>
                    </div>
                    <h3 class="text-lg font-semibold mb-2">Local Expertise</h3>
                    <p class="text-gray-500 text-sm">Our team knows Varanasi and can guide you to the best locations</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Stats Section -->
    <section class="py-16 bg-gradient-to-r from-primary-800 to-primary-600">
        <div class="container">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center text-white">
                <div>
                    <p class="text-4xl lg:text-5xl font-bold mb-2">500+</p>
                    <p class="text-white/70">Properties Listed</p>
                </div>
                <div>
                    <p class="text-4xl lg:text-5xl font-bold mb-2">1000+</p>
                    <p class="text-white/70">Happy Customers</p>
                </div>
                <div>
                    <p class="text-4xl lg:text-5xl font-bold mb-2">4</p>
                    <p class="text-white/70">Cities Covered</p>
                </div>
                <div>
                    <p class="text-4xl lg:text-5xl font-bold mb-2">5+</p>
                    <p class="text-white/70">Years Experience</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Team Section -->
    <section class="section bg-white">
        <div class="container">
            <div class="max-w-3xl mx-auto text-center mb-12">
                <span
                    class="inline-block px-4 py-1.5 bg-primary-100 text-primary-700 rounded-full text-sm font-semibold mb-4">Our
                    Team</span>
                <h2 class="text-3xl font-bold text-gray-900 mb-4">Meet the Experts</h2>
                <p class="text-gray-600">
                    Our dedicated team of real estate professionals is here to help you every step of the way.
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
                @php
                    $team = [
                        [
                            'name' => 'Rahul Sharma',
                            'role' => 'Founder & CEO',
                            'image' =>
                                'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=300&h=300&fit=crop',
                        ],
                        [
                            'name' => 'Priya Singh',
                            'role' => 'Operations Head',
                            'image' =>
                                'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=300&h=300&fit=crop',
                        ],
                        [
                            'name' => 'Amit Kumar',
                            'role' => 'Property Expert',
                            'image' =>
                                'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=300&h=300&fit=crop',
                        ],
                    ];
                @endphp

                @foreach ($team as $member)
                    <div class="text-center">
                        <img src="{{ $member['image'] }}" alt="{{ $member['name'] }}"
                            class="w-32 h-32 rounded-full mx-auto mb-4 object-cover">
                        <h3 class="text-lg font-semibold text-gray-900">{{ $member['name'] }}</h3>
                        <p class="text-gray-500">{{ $member['role'] }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="section bg-gray-50">
        <div class="container">
            <div
                class="bg-gradient-to-r from-secondary-600 to-secondary-700 rounded-2xl p-8 lg:p-12 text-center text-white">
                <h2 class="text-3xl font-bold mb-4">Ready to Find Your Dream Property?</h2>
                <p class="text-white/80 mb-8 max-w-2xl mx-auto">
                    Whether you're buying, selling, or renting – we're here to help. Contact our team today for personalized
                    assistance.
                </p>
                <div class="flex flex-col sm:flex-row gap-4 justify-center">
                    <a href="{{ url('/contact') }}" class="btn btn-white btn-lg">
                        Contact Us
                    </a>
                    <a href="{{ url('/buy') }}"
                        class="btn btn-outline border-white text-white hover:bg-white hover:text-secondary-700 btn-lg">
                        Browse Properties
                    </a>
                </div>
            </div>
        </div>
    </section>
@endsection