@extends('layouts.frontend')

@section('title', 'About - Tirumalarao Naidu')
@section('meta_description', 'Learn about Tirumalarao Naidu, a technology executive and data engineering leader with 19+ years of experience.')

@section('content')
<!-- Hero Section -->
<section class="pt-32 pb-16 bg-gradient-to-b from-gray-50 to-white dark:from-gray-900 dark:to-gray-900">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
            <p class="text-primary-500 font-medium mb-4">ABOUT ME</p>
            <h1 class="font-display text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mb-6">
                Technology Executive & Data Leader
            </h1>
            <p class="text-lg text-gray-600 dark:text-gray-400 max-w-3xl mx-auto">
                19+ years of transforming enterprises through innovative technology solutions
            </p>
        </div>
    </div>
</section>

<!-- Main Content -->
<section class="py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
            <!-- Sidebar -->
            <div class="lg:col-span-1">
                <div class="sticky top-24">
                    <!-- Profile Card -->
                    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm p-6 mb-6">
                        <div class="w-32 h-32 rounded-full overflow-hidden mx-auto mb-4 border-4 border-primary-100 dark:border-primary-900">
                            <img src="{{ asset('images/profile.png') }}" alt="Tirumalarao Naidu" class="w-full h-full object-cover">
                        </div>
                        <h3 class="text-xl font-semibold text-gray-900 dark:text-white text-center mb-1">Tirumalarao Naidu</h3>
                        <p class="text-gray-500 dark:text-gray-400 text-center text-sm mb-4">Manager, Customer Technology Data</p>
                        
                        <div class="flex justify-center space-x-3 mb-6">
                            <a href="{{ App\Models\Setting::get('social_linkedin', '#') }}" target="_blank" class="w-9 h-9 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-gray-600 dark:text-gray-400 hover:bg-primary-500 hover:text-white transition-colors">
                                <i class="fab fa-linkedin-in"></i>
                            </a>
                            <a href="{{ App\Models\Setting::get('social_twitter', '#') }}" target="_blank" class="w-9 h-9 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-gray-600 dark:text-gray-400 hover:bg-primary-500 hover:text-white transition-colors">
                                <i class="fab fa-x-twitter"></i>
                            </a>
                        </div>
                        
                        <a href="{{ route('resume.download') }}" class="block w-full px-4 py-2 bg-primary-500 hover:bg-primary-600 text-white text-center font-medium rounded-lg transition-colors">
                            <i class="fas fa-download mr-2"></i> Download Resume
                        </a>
                    </div>
                    
                    <!-- Quick Stats -->
                    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm p-6">
                        <h4 class="font-semibold text-gray-900 dark:text-white mb-4">Quick Facts</h4>
                        <ul class="space-y-3 text-sm">
                            <li class="flex items-start">
                                <i class="fas fa-map-marker-alt text-primary-500 mt-1 mr-3"></i>
                                <span class="text-gray-600 dark:text-gray-400">Atlanta, Georgia, USA</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-briefcase text-primary-500 mt-1 mr-3"></i>
                                <span class="text-gray-600 dark:text-gray-400">MARTA - Metropolitan Atlanta Rapid Transit Authority</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-graduation-cap text-primary-500 mt-1 mr-3"></i>
                                <span class="text-gray-600 dark:text-gray-400">MBA - Henley Business School</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-globe text-primary-500 mt-1 mr-3"></i>
                                <span class="text-gray-600 dark:text-gray-400">USA, South Africa, India</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <!-- Main Content -->
            <div class="lg:col-span-2">
                @if($page)
                <div class="prose prose-lg dark:prose-invert max-w-none">
                    {!! $page->content !!}
                </div>
                @else
                <div class="prose prose-lg dark:prose-invert max-w-none">
                    <h2>About Tirumalarao Naidu</h2>
                    <p>I am an internationally recognized technology executive and data engineering leader with over 19 years of distinguished experience across the U.S., South Africa, and India.</p>
                    
                    <h3>Current Role</h3>
                    <p>Currently serving as the Manager of Customer Technology Data at MARTA (Metropolitan Atlanta Rapid Transit Authority), I spearhead regionally critical data systems that enhance equitable access to public transportation for millions.</p>
                    
                    <h3>Expertise</h3>
                    <ul>
                        <li>Data Engineering & Architecture</li>
                        <li>Cloud Infrastructure (AWS, Azure, GCP)</li>
                        <li>Enterprise Digital Transformation</li>
                        <li>Public Transit Technology Systems</li>
                        <li>AI/ML Integration</li>
                        <li>Agile & Scaled Agile Leadership</li>
                    </ul>
                </div>
                @endif
                
                <!-- Certifications -->
                <div class="mt-12">
                    <h3 class="font-display text-2xl font-bold text-gray-900 dark:text-white mb-6">Certifications</h3>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div class="flex items-center p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
                            <i class="fas fa-certificate text-primary-500 mr-3"></i>
                            <span class="text-gray-700 dark:text-gray-300 text-sm">Microsoft Azure AI Fundamentals</span>
                        </div>
                        <div class="flex items-center p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
                            <i class="fas fa-certificate text-primary-500 mr-3"></i>
                            <span class="text-gray-700 dark:text-gray-300 text-sm">Oracle Certified Java Programmer</span>
                        </div>
                        <div class="flex items-center p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
                            <i class="fas fa-certificate text-primary-500 mr-3"></i>
                            <span class="text-gray-700 dark:text-gray-300 text-sm">Leading Scaled SAFe Agile (4.5)</span>
                        </div>
                        <div class="flex items-center p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
                            <i class="fas fa-certificate text-primary-500 mr-3"></i>
                            <span class="text-gray-700 dark:text-gray-300 text-sm">Six Sigma Green Belt</span>
                        </div>
                    </div>
                </div>
                
                <!-- Memberships -->
                <div class="mt-12">
                    <h3 class="font-display text-2xl font-bold text-gray-900 dark:text-white mb-6">Professional Memberships</h3>
                    <div class="flex flex-wrap gap-4">
                        <span class="px-4 py-2 bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 rounded-full text-sm font-medium">IEEE (Senior Member)</span>
                        <span class="px-4 py-2 bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 rounded-full text-sm font-medium">IET (Fellow)</span>
                        <span class="px-4 py-2 bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 rounded-full text-sm font-medium">IITPSA</span>
                        <span class="px-4 py-2 bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 rounded-full text-sm font-medium">APTA</span>
                        <span class="px-4 py-2 bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 rounded-full text-sm font-medium">MobilityData</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection