@extends('layouts.app')

@section('title', 'About Us')

@push('styles')
<style>
    /* Dark mode styles */
    .dark .bg-white { background-color: #1f2937; }
    .dark .bg-gray-50 { background-color: #111827; }
    .dark .bg-gray { background-color: #1f2937; }
    .dark .bg-gray-900 { background-color: #030712; }
    .dark .text-gray-700 { color: #d1d5db; }
    .dark .text-gray-600 { color: #9ca3af; }
    .dark .text-gray-900 { color: #f9fafb; }
    .dark .text-white { color: #f9fafb; }
    .dark .border-gray-200 { border-color: #374151; }
    .dark .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3); }
    .dark .card { background-color: #1f2937; }
    
    /* Smooth scrolling */
    html {
        scroll-behavior: smooth;
    }
    
    /* Tab transition animation */
    .tab-content {
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }
    
    .tab-content.active {
        opacity: 1;
        transform: translateY(0);
    }
    
    /* Dark mode toggle */
    .dark-mode-toggle {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 999;
        background-color: #4f46e5;
        color: white;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
    }
    
    .dark-mode-toggle:hover {
        background-color: #3730a3;
        transform: scale(1.1);
    }
</style>
@endpush

@section('content')
<!-- Hero Section -->
<section class="relative py-32 bg-gradient-to-r from-primary to-secondary text-white overflow-hidden">
    <div class="absolute inset-0 bg-black opacity-20"></div>
    <div class="container mx-auto px-4 relative z-10">
        <div class="max-w-3xl">
            <h1 class="text-5xl md:text-6xl font-bold mb-6 leading-tight">About Our <span class="text-yellow-300">Company</span></h1>
            <p class="text-xl md:text-2xl opacity-90">We are a team of passionate professionals dedicated to delivering exceptional financial consulting services.</p>
        </div>
    </div>
    <div class="absolute bottom-0 right-0 w-64 h-64 bg-white opacity-5 rounded-full -mb-32 -mr-32"></div>
    <div class="absolute top-0 left-0 w-48 h-48 bg-white opacity-5 rounded-full -mt-24 -ml-24"></div>
</section>

<!-- Tab Navigation -->
<section class="py-6 bg-white dark:bg-gray-800 shadow-sm sticky top-0 z-50">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap justify-center md:justify-start">
            <button class="tab-btn px-6 py-3 font-semibold text-primary border-b-2 border-primary transition-colors duration-300" data-tab="who-we-are">
                WHO WE ARE
            </button>
            <button class="tab-btn px-6 py-3 font-semibold text-gray-600 dark:text-gray-300 border-b-2 border-transparent hover:text-primary transition-colors duration-300" data-tab="why-choose-us">
                WHY CHOOSE US
            </button>
            <button class="tab-btn px-6 py-3 font-semibold text-gray-600 dark:text-gray-300 border-b-2 border-transparent hover:text-primary transition-colors duration-300" data-tab="meet-our-team">
                MEET OUR TEAM
            </button>
        </div>
    </div>
</section>

<!-- Tab Content -->
<section class="py-16 bg-gray-50 dark:bg-gray-900" id="tab-content-section">
    <div class="container mx-auto px-4">
        <!-- WHO WE ARE Tab Content -->
        <div id="who-we-are" class="tab-content">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
                <div class="relative">
                    <div class="absolute -top-6 -left-6 w-24 h-24 bg-primary rounded-lg opacity-20"></div>
                    <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-secondary rounded-lg opacity-20"></div>
                    <img src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80" alt="Our Office" class="rounded-lg shadow-xl relative z-10">
                </div>
                <div>
                    <div class="mb-4">
                        <span class="text-primary font-semibold uppercase tracking-wider">Our Story</span>
                    </div>
                    <h2 class="text-3xl md:text-4xl font-bold mb-6">Who We Are</h2>
                    <p class="text-gray-700 dark:text-gray-300 mb-6">
                        Founded in 2010, TLP 5 has grown from a small financial advisory firm to one of the most respected consulting companies in the region. Our journey began with a simple mission: to provide high-quality, personalized financial advice to individuals and businesses.
                    </p>
                    <p class="text-gray-700 dark:text-gray-300 mb-6">
                        Over the years, we have expanded our services and built a team of experienced professionals who are passionate about helping clients achieve their financial goals. Our commitment to excellence and client satisfaction has been the driving force behind our success.
                    </p>
                    <div class="flex items-center space-x-4">
                        <div class="flex -space-x-2">
                            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80" alt="Team" class="w-10 h-10 rounded-full border-2 border-white">
                            <img src="https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80" alt="Team" class="w-10 h-10 rounded-full border-2 border-white">
                            <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80" alt="Team" class="w-10 h-10 rounded-full border-2 border-white">
                            <img src="https://images.unsplash.com/photo-1489424731084-a5d8b219a5bb?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80" alt="Team" class="w-10 h-10 rounded-full border-2 border-white">
                        </div>
                        <div>
                            <p class="font-semibold">50+ Team Members</p>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Dedicated Professionals</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- WHY CHOOSE US Tab Content -->
        <div id="why-choose-us" class="tab-content hidden">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
                <div>
                    <div class="mb-4">
                        <span class="text-primary font-semibold uppercase tracking-wider">Our Advantages</span>
                    </div>
                    <h2 class="text-3xl md:text-4xl font-bold mb-6">Why Choose Us</h2>
                    <p class="text-gray-700 dark:text-gray-300 mb-6">
                        At TLP 5, we distinguish ourselves through our unwavering commitment to excellence, deep industry knowledge, and personalized approach to financial consulting.
                    </p>
                    
                    <div class="space-y-6">
                        <div class="flex items-start">
                            <div class="flex-shrink-0 mt-1">
                                <div class="w-10 h-10 bg-primary rounded-full flex items-center justify-center">
                                    <i class="fas fa-check text-white"></i>
                                </div>
                            </div>
                            <div class="ml-4">
                                <h3 class="text-xl font-semibold mb-2">Expert Team</h3>
                                <p class="text-gray-700 dark:text-gray-300">Our professionals have years of experience and deep expertise in financial consulting.</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="flex-shrink-0 mt-1">
                                <div class="w-10 h-10 bg-primary rounded-full flex items-center justify-center">
                                    <i class="fas fa-check text-white"></i>
                                </div>
                            </div>
                            <div class="ml-4">
                                <h3 class="text-xl font-semibold mb-2">Personalized Approach</h3>
                                <p class="text-gray-700 dark:text-gray-300">We tailor our services to meet your specific needs and financial goals.</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="flex-shrink-0 mt-1">
                                <div class="w-10 h-10 bg-primary rounded-full flex items-center justify-center">
                                    <i class="fas fa-check text-white"></i>
                                </div>
                            </div>
                            <div class="ml-4">
                                <h3 class="text-xl font-semibold mb-2">Proven Track Record</h3>
                                <p class="text-gray-700 dark:text-gray-300">We have a history of helping clients achieve their financial objectives.</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="flex-shrink-0 mt-1">
                                <div class="w-10 h-10 bg-primary rounded-full flex items-center justify-center">
                                    <i class="fas fa-check text-white"></i>
                                </div>
                            </div>
                            <div class="ml-4">
                                <h3 class="text-xl font-semibold mb-2">Comprehensive Services</h3>
                                <p class="text-gray-700 dark:text-gray-300">We offer a wide range of financial consulting services under one roof.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="relative">
                    <div class="absolute -top-6 -right-6 w-24 h-24 bg-secondary rounded-lg opacity-20"></div>
                    <div class="absolute -bottom-6 -left-6 w-32 h-32 bg-primary rounded-lg opacity-20"></div>
                    <img src="https://images.unsplash.com/photo-1554224154-260646ae8b0e?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80" alt="Why Choose Us" class="rounded-lg shadow-xl relative z-10">
                </div>
            </div>
        </div>

        <!-- MEET OUR TEAM Tab Content -->
        <div id="meet-our-team" class="tab-content hidden">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">Meet Our Team</h2>
                <p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">Our team consists of experienced and dedicated professionals who are committed to providing the best financial consulting services.</p>
                <div class="w-20 h-1 bg-primary mx-auto mt-4"></div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
                    <div class="p-6">
                        <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80" alt="Team Member" class="w-32 h-32 rounded-full object-cover mx-auto mb-4">
                        <h3 class="text-lg font-semibold text-center">John Smith</h3>
                        <p class="text-gray-600 dark:text-gray-400 text-center mb-4">CEO & Founder</p>
                        <div class="flex justify-center space-x-3">
                            <a href="#" class="text-gray-400 hover:text-primary"><i class="fab fa-linkedin"></i></a>
                            <a href="#" class="text-gray-400 hover:text-primary"><i class="fab fa-twitter"></i></a>
                            <a href="#" class="text-gray-400 hover:text-primary"><i class="fas fa-envelope"></i></a>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
                    <div class="p-6">
                        <img src="https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80" alt="Team Member" class="w-32 h-32 rounded-full object-cover mx-auto mb-4">
                        <h3 class="text-lg font-semibold text-center">Sarah Johnson</h3>
                        <p class="text-gray-600 dark:text-gray-400 text-center mb-4">Chief Financial Advisor</p>
                        <div class="flex justify-center space-x-3">
                            <a href="#" class="text-gray-400 hover:text-primary"><i class="fab fa-linkedin"></i></a>
                            <a href="#" class="text-gray-400 hover:text-primary"><i class="fab fa-twitter"></i></a>
                            <a href="#" class="text-gray-400 hover:text-primary"><i class="fas fa-envelope"></i></a>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
                    <div class="p-6">
                        <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80" alt="Team Member" class="w-32 h-32 rounded-full object-cover mx-auto mb-4">
                        <h3 class="text-lg font-semibold text-center">Michael Brown</h3>
                        <p class="text-gray-600 dark:text-gray-400 text-center mb-4">Investment Strategist</p>
                        <div class="flex justify-center space-x-3">
                            <a href="#" class="text-gray-400 hover:text-primary"><i class="fab fa-linkedin"></i></a>
                            <a href="#" class="text-gray-400 hover:text-primary"><i class="fab fa-twitter"></i></a>
                            <a href="#" class="text-gray-400 hover:text-primary"><i class="fas fa-envelope"></i></a>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
                    <div class="p-6">
                        <img src="https://images.unsplash.com/photo-1489424731084-a5d8b219a5bb?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80" alt="Team Member" class="w-32 h-32 rounded-full object-cover mx-auto mb-4">
                        <h3 class="text-lg font-semibold text-center">Emily Davis</h3>
                        <p class="text-gray-600 dark:text-gray-400 text-center mb-4">Risk Management Specialist</p>
                        <div class="flex justify-center space-x-3">
                            <a href="#" class="text-gray-400 hover:text-primary"><i class="fab fa-linkedin"></i></a>
                            <a href="#" class="text-gray-400 hover:text-primary"><i class="fab fa-twitter"></i></a>
                            <a href="#" class="text-gray-400 hover:text-primary"><i class="fas fa-envelope"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Mission & Vision Section -->
<section class="py-20 bg-white dark:bg-gray-800">
    <div class="container mx-auto px-4">
        <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold mb-4">Our Mission & Vision</h2>
            <div class="w-20 h-1 bg-primary mx-auto"></div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
            <div class="bg-gray-50 dark:bg-gray-700 p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300">
                <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mb-6">
                    <i class="fas fa-bullseye text-white text-2xl"></i>
                </div>
                <h3 class="text-2xl font-bold mb-4">Our Mission</h3>
                <p class="text-gray-700 dark:text-gray-300">
                    To provide exceptional financial consulting services that empower our clients to make informed decisions, achieve their financial goals, and secure their financial future.
                </p>
            </div>
            <div class="bg-gray-50 dark:bg-gray-700 p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300">
                <div class="w-16 h-16 bg-secondary rounded-full flex items-center justify-center mb-6">
                    <i class="fas fa-eye text-white text-2xl"></i>
                </div>
                <h3 class="text-2xl font-bold mb-4">Our Vision</h3>
                <p class="text-gray-700 dark:text-gray-300">
                    To be the most trusted financial consulting firm, recognized for our expertise, integrity, and commitment to client success.
                </p>
            </div>
        </div>
    </div>
</section>

<!-- Values Section -->
<section class="py-20 bg-gray-50 dark:bg-gray-900">
    <div class="container mx-auto px-4">
        <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold mb-4">Our Core Values</h2>
            <p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">The principles that guide our work and define our culture</p>
            <div class="w-20 h-1 bg-primary mx-auto mt-4"></div>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg text-center hover:shadow-xl transition-shadow duration-300">
                <div class="w-20 h-20 bg-primary rounded-full flex items-center justify-center mx-auto mb-6">
                    <i class="fas fa-handshake text-white text-3xl"></i>
                </div>
                <h3 class="text-xl font-semibold mb-3">Integrity</h3>
                <p class="text-gray-700 dark:text-gray-300">We conduct our business with the highest ethical standards and transparency.</p>
            </div>
            
            <div class="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg text-center hover:shadow-xl transition-shadow duration-300">
                <div class="w-20 h-20 bg-primary rounded-full flex items-center justify-center mx-auto mb-6">
                    <i class="fas fa-lightbulb text-white text-3xl"></i>
                </div>
                <h3 class="text-xl font-semibold mb-3">Excellence</h3>
                <p class="text-gray-700 dark:text-gray-300">We strive for excellence in everything we do, from advice to service.</p>
            </div>
            
            <div class="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg text-center hover:shadow-xl transition-shadow duration-300">
                <div class="w-20 h-20 bg-primary rounded-full flex items-center justify-center mx-auto mb-6">
                    <i class="fas fa-users text-white text-3xl"></i>
                </div>
                <h3 class="text-xl font-semibold mb-3">Client-Centric</h3>
                <p class="text-gray-700 dark:text-gray-300">Our clients' success is our success, and we put their needs first.</p>
            </div>
        </div>
    </div>
</section>

<!-- Stats Section -->
<section class="py-20">
    <div class="container mx-auto px-4">
        <div class="bg-gradient-to-r from-primary to-secondary rounded-2xl p-12 text-white">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center">
                <div>
                    <div class="text-4xl md:text-5xl font-bold mb-2">500+</div>
                    <div class="text-xl">Happy Clients</div>
                </div>
                <div>
                    <div class="text-4xl md:text-5xl font-bold mb-2">12</div>
                    <div class="text-xl">Years Experience</div>
                </div>
                <div>
                    <div class="text-4xl md:text-5xl font-bold mb-2">50+</div>
                    <div class="text-xl">Team Members</div>
                </div>
                <div>
                    <div class="text-4xl md:text-5xl font-bold mb-2">98%</div>
                    <div class="text-xl">Client Satisfaction</div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="py-20 bg-gray-900 dark:bg-black text-white">
    <div class="container mx-auto px-4 text-center">
        <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Work With Us?</h2>
        <p class="text-xl max-w-2xl mx-auto mb-10 text-gray-300">Contact us today to learn how our team can help you achieve your financial goals.</p>
        <div class="flex flex-col sm:flex-row justify-center gap-4">
            <a href="{{ route('contact') }}" class="px-8 py-3 bg-primary hover:bg-primary-dark text-white font-semibold rounded-lg transition duration-300">
                Get In Touch
            </a>
            <a href="{{ route('services') }}" class="px-8 py-3 bg-transparent border-2 border-white hover:bg-white hover:text-gray-900 text-white font-semibold rounded-lg transition duration-300">
                Our Services
            </a>
        </div>
    </div>
</section>

<!-- Dark Mode Toggle Button -->
<div class="dark-mode-toggle" id="dark-mode-toggle">
    <i class="fas fa-moon" id="dark-mode-icon"></i>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const tabBtns = document.querySelectorAll('.tab-btn');
        const tabContents = document.querySelectorAll('.tab-content');
        const tabContentSection = document.getElementById('tab-content-section');
        
        // Tab functionality with smooth scroll
        tabBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                // Remove active class from all buttons
                tabBtns.forEach(b => {
                    b.classList.remove('text-primary', 'border-primary');
                    b.classList.add('text-gray-600', 'border-transparent');
                });
                
                // Add active class to clicked button
                btn.classList.remove('text-gray-600', 'border-transparent');
                btn.classList.add('text-primary', 'border-primary');
                
                // Hide all tab contents
                tabContents.forEach(content => {
                    content.classList.add('hidden');
                    content.classList.remove('active');
                });
                
                // Show selected tab content with animation
                const tabId = btn.getAttribute('data-tab');
                const selectedTab = document.getElementById(tabId);
                selectedTab.classList.remove('hidden');
                
                // Scroll to tab content section
                tabContentSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
                
                // Trigger animation after a small delay
                setTimeout(() => {
                    selectedTab.classList.add('active');
                }, 100);
            });
        });
        
        // Dark mode functionality
        const darkModeToggle = document.getElementById('dark-mode-toggle');
        const darkModeIcon = document.getElementById('dark-mode-icon');
        const htmlElement = document.documentElement;
        
        // Check for saved dark mode preference or respect OS preference
        const currentTheme = localStorage.getItem('theme') || 
                          (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
        
        if (currentTheme === 'dark') {
            htmlElement.classList.add('dark');
            darkModeIcon.classList.remove('fa-moon');
            darkModeIcon.classList.add('fa-sun');
        }
        
        darkModeToggle.addEventListener('click', () => {
            htmlElement.classList.toggle('dark');
            
            if (htmlElement.classList.contains('dark')) {
                darkModeIcon.classList.remove('fa-moon');
                darkModeIcon.classList.add('fa-sun');
                localStorage.setItem('theme', 'dark');
            } else {
                darkModeIcon.classList.remove('fa-sun');
                darkModeIcon.classList.add('fa-moon');
                localStorage.setItem('theme', 'light');
            }
        });
    });
</script>
@endsection