@extends('layouts.frontend')

@section('title', 'Tirumalarao Naidu - Technology Executive & Data Engineering Leader')

@section('content')
<!-- Hero Section -->
<section class="relative min-h-screen flex items-center hero-pattern bg-white dark:bg-gray-900">
    <div class="absolute inset-0 bg-gradient-to-br from-primary-50/50 to-transparent dark:from-primary-900/20 dark:to-transparent"></div>
    
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <!-- Content -->
            <div class="order-2 lg:order-1">
                <p class="text-primary-500 font-medium mb-4 tracking-wide">TECHNOLOGY EXECUTIVE</p>
                <h1 class="font-display text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-white mb-6 leading-tight">
                    Hi, I'm<br>
                    <span class="gradient-text">Tirumalarao Naidu</span>
                </h1>
                <p class="text-lg text-gray-600 dark:text-gray-400 mb-8 max-w-lg">
                    Data Engineering Leader with 19+ years of experience transforming enterprises through innovative technology solutions across transit, finance, and cloud infrastructure.
                </p>
                
                <!-- Stats -->
                <div class="grid grid-cols-3 gap-6 mb-8">
                    <div>
                        <div class="text-3xl font-bold text-gray-900 dark:text-white">19+</div>
                        <div class="text-sm text-gray-500 dark:text-gray-400">Years Experience</div>
                    </div>
                    <div>
                        <div class="text-3xl font-bold text-gray-900 dark:text-white">50+</div>
                        <div class="text-sm text-gray-500 dark:text-gray-400">Projects Delivered</div>
                    </div>
                    <div>
                        <div class="text-3xl font-bold text-gray-900 dark:text-white">3</div>
                        <div class="text-sm text-gray-500 dark:text-gray-400">Continents</div>
                    </div>
                </div>
                
                <!-- CTA Buttons -->
                <div class="flex flex-wrap gap-4">
                    <a href="{{ route('contact.index') }}" class="inline-flex items-center px-6 py-3 bg-primary-500 hover:bg-primary-600 text-white font-medium rounded-full transition-all hover:shadow-lg hover:shadow-primary-500/30">
                        Get in Touch <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                    <a href="{{ route('blog.index') }}" class="inline-flex items-center px-6 py-3 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-900 dark:text-white font-medium rounded-full transition-colors">
                        Read Blog <i class="fas fa-book-open ml-2"></i>
                    </a>
                </div>
                
                <!-- Social Links -->
                <div class="mt-10 flex items-center space-x-4">
                    <span class="text-sm text-gray-500 dark:text-gray-400">Connect:</span>
                    <a href="{{ App\Models\Setting::get('social_linkedin', '#') }}" target="_blank" class="text-gray-400 hover:text-primary-500 transition-colors">
                        <i class="fab fa-linkedin-in text-xl"></i>
                    </a>
                    <a href="{{ App\Models\Setting::get('social_facebook', '#') }}" target="_blank" class="text-gray-400 hover:text-primary-500 transition-colors">
                        <i class="fab fa-facebook-f text-xl"></i>
                    </a>
                    <a href="{{ App\Models\Setting::get('social_twitter', '#') }}" target="_blank" class="text-gray-400 hover:text-primary-500 transition-colors">
                        <i class="fab fa-x-twitter text-xl"></i>
                    </a>
                    <a href="{{ App\Models\Setting::get('social_instagram', '#') }}" target="_blank" class="text-gray-400 hover:text-primary-500 transition-colors">
                        <i class="fab fa-instagram text-xl"></i>
                    </a>
                </div>
            </div>
            
            <!-- Image -->
            <div class="order-1 lg:order-2 flex justify-center">
                <div class="relative">
                    <div class="absolute inset-0 bg-gradient-to-br from-primary-500 to-accent rounded-full blur-3xl opacity-20 scale-110"></div>
                    <div class="relative w-72 h-72 sm:w-96 sm:h-96 rounded-full overflow-hidden border-4 border-white dark:border-gray-800 shadow-2xl">
                        <img src="{{ asset('images/profile.png') }}" alt="Tirumalarao Naidu" class="w-full h-full object-cover">
                    </div>
                    <!-- Decorative Elements -->
                    <div class="absolute -top-4 -right-4 w-24 h-24 bg-accent/20 rounded-full"></div>
                    <div class="absolute -bottom-4 -left-4 w-32 h-32 bg-primary-500/20 rounded-full"></div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Scroll Indicator -->
    <div class="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
        <i class="fas fa-chevron-down text-gray-400 text-2xl"></i>
    </div>
</section>

<!-- Featured Posts Section -->
@if($featuredPosts->count() > 0)
<section class="py-20 bg-gray-50 dark:bg-gray-800/50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between mb-12">
            <div>
                <p class="text-primary-500 font-medium mb-2">FEATURED</p>
                <h2 class="font-display text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white">Latest Insights</h2>
            </div>
            <a href="{{ route('blog.index') }}" class="hidden sm:inline-flex items-center text-primary-500 hover:text-primary-600 font-medium">
                View All <i class="fas fa-arrow-right ml-2"></i>
            </a>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            @foreach($featuredPosts as $post)
            <article class="card-hover bg-white dark:bg-gray-900 rounded-2xl overflow-hidden shadow-sm">
                @if($post->featured_image)
                <img src="{{ asset('storage/' . $post->featured_image) }}" alt="{{ $post->title }}" class="w-full h-48 object-cover">
                @else
                <div class="w-full h-48 bg-gradient-to-br from-primary-500 to-primary-700 flex items-center justify-center">
                    <i class="fas fa-newspaper text-white text-4xl opacity-50"></i>
                </div>
                @endif
                
                <div class="p-6">
                    @if($post->category)
                    <span class="inline-block px-3 py-1 bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 text-xs font-medium rounded-full mb-3">
                        {{ $post->category->name }}
                    </span>
                    @endif
                    
                    <h3 class="font-display text-xl font-semibold text-gray-900 dark:text-white mb-3">
                        <a href="{{ route('blog.show', $post->slug) }}" class="hover:text-primary-500 transition-colors">
                            {{ $post->title }}
                        </a>
                    </h3>
                    
                    <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-2">
                        {{ $post->excerpt ?? Str::limit(strip_tags($post->content), 120) }}
                    </p>
                    
                    <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
                        <span>{{ $post->published_at->format('M d, Y') }}</span>
                        <span>{{ $post->reading_time }}</span>
                    </div>
                </div>
            </article>
            @endforeach
        </div>
        
        <div class="mt-10 text-center sm:hidden">
            <a href="{{ route('blog.index') }}" class="inline-flex items-center px-6 py-3 bg-primary-500 hover:bg-primary-600 text-white font-medium rounded-full transition-colors">
                View All Posts <i class="fas fa-arrow-right ml-2"></i>
            </a>
        </div>
    </div>
</section>
@endif

<!-- Expertise Section -->
<section class="py-20 bg-white dark:bg-gray-900">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <p class="text-primary-500 font-medium mb-2">EXPERTISE</p>
            <h2 class="font-display text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white">Areas of Specialization</h2>
        </div>
        
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- Data Engineering -->
            <div class="card-hover p-8 bg-gray-50 dark:bg-gray-800 rounded-2xl">
                <div class="w-14 h-14 bg-primary-500/10 rounded-xl flex items-center justify-center mb-6">
                    <i class="fas fa-database text-2xl text-primary-500"></i>
                </div>
                <h3 class="font-display text-xl font-semibold text-gray-900 dark:text-white mb-3">Data Engineering</h3>
                <p class="text-gray-600 dark:text-gray-400">Building scalable data pipelines, ETL processes, and real-time data systems using modern technologies.</p>
            </div>
            
            <!-- Cloud Architecture -->
            <div class="card-hover p-8 bg-gray-50 dark:bg-gray-800 rounded-2xl">
                <div class="w-14 h-14 bg-primary-500/10 rounded-xl flex items-center justify-center mb-6">
                    <i class="fas fa-cloud text-2xl text-primary-500"></i>
                </div>
                <h3 class="font-display text-xl font-semibold text-gray-900 dark:text-white mb-3">Cloud Architecture</h3>
                <p class="text-gray-600 dark:text-gray-400">Designing and implementing cloud-native solutions on AWS, Azure, and GCP for enterprise scale.</p>
            </div>
            
            <!-- Transit Technology -->
            <div class="card-hover p-8 bg-gray-50 dark:bg-gray-800 rounded-2xl">
                <div class="w-14 h-14 bg-primary-500/10 rounded-xl flex items-center justify-center mb-6">
                    <i class="fas fa-train text-2xl text-primary-500"></i>
                </div>
                <h3 class="font-display text-xl font-semibold text-gray-900 dark:text-white mb-3">Transit Technology</h3>
                <p class="text-gray-600 dark:text-gray-400">Leading GTFS/GTFS-RT implementations and real-time passenger information systems.</p>
            </div>
            
            <!-- Enterprise Architecture -->
            <div class="card-hover p-8 bg-gray-50 dark:bg-gray-800 rounded-2xl">
                <div class="w-14 h-14 bg-primary-500/10 rounded-xl flex items-center justify-center mb-6">
                    <i class="fas fa-sitemap text-2xl text-primary-500"></i>
                </div>
                <h3 class="font-display text-xl font-semibold text-gray-900 dark:text-white mb-3">Enterprise Architecture</h3>
                <p class="text-gray-600 dark:text-gray-400">Strategic IT planning and system design for large-scale digital transformation initiatives.</p>
            </div>
            
            <!-- AI Integration -->
            <div class="card-hover p-8 bg-gray-50 dark:bg-gray-800 rounded-2xl">
                <div class="w-14 h-14 bg-primary-500/10 rounded-xl flex items-center justify-center mb-6">
                    <i class="fas fa-brain text-2xl text-primary-500"></i>
                </div>
                <h3 class="font-display text-xl font-semibold text-gray-900 dark:text-white mb-3">AI & Machine Learning</h3>
                <p class="text-gray-600 dark:text-gray-400">Integrating AI/ML solutions for predictive analytics and intelligent automation.</p>
            </div>
            
            <!-- Leadership -->
            <div class="card-hover p-8 bg-gray-50 dark:bg-gray-800 rounded-2xl">
                <div class="w-14 h-14 bg-primary-500/10 rounded-xl flex items-center justify-center mb-6">
                    <i class="fas fa-users text-2xl text-primary-500"></i>
                </div>
                <h3 class="font-display text-xl font-semibold text-gray-900 dark:text-white mb-3">Technical Leadership</h3>
                <p class="text-gray-600 dark:text-gray-400">Leading cross-functional teams, mentoring engineers, and driving agile transformation.</p>
            </div>
        </div>
    </div>
</section>

<!-- Research Section -->
@if($recentResearch->count() > 0)
<section class="py-20 bg-gray-900 text-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between mb-12">
            <div>
                <p class="text-primary-400 font-medium mb-2">RESEARCH</p>
                <h2 class="font-display text-3xl sm:text-4xl font-bold">Publications & Papers</h2>
            </div>
            <a href="{{ route('research.index') }}" class="hidden sm:inline-flex items-center text-primary-400 hover:text-primary-300 font-medium">
                View All <i class="fas fa-arrow-right ml-2"></i>
            </a>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            @foreach($recentResearch as $publication)
            <a href="{{ route('research.show', $publication->slug) }}" class="card-hover block p-6 bg-gray-800 rounded-xl hover:bg-gray-750">
                <span class="inline-block px-3 py-1 bg-primary-500/20 text-primary-400 text-xs font-medium rounded-full mb-4 capitalize">
                    {{ $publication->type }}
                </span>
                <h3 class="font-display text-lg font-semibold mb-2 line-clamp-2">{{ $publication->title }}</h3>
                <p class="text-gray-400 text-sm mb-4 line-clamp-2">{{ $publication->abstract }}</p>
                <div class="text-sm text-gray-500">
                    {{ $publication->published_date?->format('M Y') }}
                </div>
            </a>
            @endforeach
        </div>
    </div>
</section>
@endif

<!-- CTA Section -->
<section class="py-20 bg-gradient-to-r from-primary-600 to-primary-800">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="font-display text-3xl sm:text-4xl font-bold text-white mb-6">Let's Build Something Amazing Together</h2>
        <p class="text-primary-100 text-lg mb-8 max-w-2xl mx-auto">Whether you need technical leadership, data engineering expertise, or strategic guidance, I'm here to help transform your vision into reality.</p>
        <a href="{{ route('contact.index') }}" class="inline-flex items-center px-8 py-4 bg-white text-primary-600 font-semibold rounded-full hover:shadow-lg transition-all">
            Start a Conversation <i class="fas fa-arrow-right ml-2"></i>
        </a>
    </div>
</section>
@endsection