{{ define "main" }}
<!-- Modern Homepage -->
<div class="min-h-screen bg-white">
    
    <!-- Hero Section -->
    <section class="gradient-bg py-12 md:py-16 lg:py-20">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="max-w-4xl mx-auto text-center">
                <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6">
                    {{ .Site.Title }}
                </h1>
                <p class="text-xl text-gray-700 mb-8">
                    {{ .Site.Params.description | default "Exploring technology's impact on work and life" }}
                </p>
                
                <!-- Tags -->
                <div class="flex flex-wrap justify-center gap-3 mb-10">
                    {{ $categories := .Site.Taxonomies.categories }}
                    {{ if $categories }}
                        {{ $categoryList := slice }}
                        {{ range $name, $taxonomy := $categories }}
                            {{ range $taxonomy }}
                                {{ $categoryList = $categoryList | append . }}
                            {{ end }}
                        {{ end }}
                        {{ range first 5 $categoryList }}
                        <span class="tag bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded-full">
                            {{ .Page.Title }}
                        </span>
                        {{ end }}
                    {{ else }}
                        <span class="tag bg-gray-100 text-gray-600 text-sm font-medium px-3 py-1 rounded-full">
                            General
                        </span>
                    {{ end }}
                </div>
                
                <!-- Newsletter Signup -->
                <form class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto">
                    <input type="email" 
                           placeholder="Your email address" 
                           class="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <button type="submit" 
                            class="btn-primary px-6 py-3 rounded-lg font-medium">
                        Get Updates
                    </button>
                </form>
            </div>
        </div>
    </section>

    <!-- Featured Articles -->
    <section class="py-12 md:py-16">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <h2 class="text-3xl font-bold text-gray-900 mb-10 text-center">Featured Articles</h2>
            
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
                {{ range first 2 (where .Site.RegularPages "Params.featured" true) }}
                <div class="bg-white rounded-xl overflow-hidden shadow-lg article-card">
                    <div class="featured-article">
                        {{ if .Params.featured_image }}
                        <img src="{{ .Params.featured_image }}" alt="{{ .Title }}" class="w-full h-64 object-cover">
                        {{ else }}
                        <img src="https://images.unsplash.com/photo-1677442135135-416f8aa26a5b?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="{{ .Title }}" class="w-full h-64 object-cover">
                        {{ end }}
                    </div>
                    <div class="p-6">
                        <div class="flex flex-wrap gap-2 mb-4">
                            {{ range first 2 (default (slice) .Params.categories) }}
                            <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded">{{ . }}</span>
                            {{ end }}
                        </div>
                        <h3 class="text-xl font-bold text-gray-900 mb-3">
                            <a href="{{ .Permalink }}" class="hover:text-blue-600">{{ .Title }}</a>
                        </h3>
                        <p class="text-gray-600 mb-4">{{ .Summary | truncate 150 }}</p>
                        <div class="flex items-center justify-between">
                            <div class="flex items-center text-sm text-gray-500">
                                <span>{{ .Params.author | default "Tech Team" }}</span>
                                <span class="mx-2">•</span>
                                <span>{{ .Date.Format "Jan 2, 2006" }}</span>
                            </div>
                            <a href="{{ .Permalink }}" class="text-blue-600 hover:text-blue-800 font-medium text-sm">Read more →</a>
                        </div>
                    </div>
                </div>
                {{ end }}
            </div>
            
            <div class="text-center">
                <a href="/articles" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium">
                    View all articles
                    <i class="fas fa-arrow-right ml-2"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- Latest Articles -->
    <section class="py-12 md:py-16 bg-gray-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <h2 class="text-3xl font-bold text-gray-900 mb-10 text-center">Latest Articles</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
                {{ range first 6 .Paginator.Pages }}
                <div class="bg-white rounded-xl overflow-hidden shadow-md article-card">
                    {{ if .Params.featured_image }}
                    <img src="{{ .Params.featured_image }}" alt="{{ .Title }}" class="w-full h-48 object-cover">
                    {{ else }}
                    <img src="https://images.unsplash.com/photo-1581091226033-d5c48150dbaa?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="{{ .Title }}" class="w-full h-48 object-cover">
                    {{ end }}
                    <div class="p-6">
                        <div class="flex flex-wrap gap-2 mb-3">
                            {{ range first 1 (default (slice) .Params.categories) }}
                            <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded">{{ . }}</span>
                            {{ end }}
                        </div>
                        <h3 class="text-lg font-bold text-gray-900 mb-3">
                            <a href="{{ .Permalink }}" class="hover:text-blue-600">{{ .Title }}</a>
                        </h3>
                        <p class="text-gray-600 text-sm mb-4">{{ .Summary | truncate 100 }}</p>
                        <div class="flex items-center justify-between text-sm text-gray-500">
                            <span>{{ .Date.Format "Jan 2, 2006" }}</span>
                            <span>{{ .ReadingTime }} min read</span>
                        </div>
                    </div>
                </div>
                {{ end }}
            </div>
            
            <!-- Pagination -->
            {{ if gt .Paginator.TotalPages 1 }}
            <div class="text-center">
                <nav class="flex justify-center items-center space-x-2">
                    {{ if .Paginator.HasPrev }}
                    <a href="{{ .Paginator.Prev.URL }}" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                        Previous
                    </a>
                    {{ end }}
                    
                    {{ range .Paginator.Pagers }}
                    {{ if eq . $.Paginator }}
                    <span class="px-4 py-2 bg-blue-600 text-white rounded-lg">{{ .PageNumber }}</span>
                    {{ else }}
                    <a href="{{ .URL }}" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300">{{ .PageNumber }}</a>
                    {{ end }}
                    {{ end }}
                    
                    {{ if .Paginator.HasNext }}
                    <a href="{{ .Paginator.Next.URL }}" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                        Next
                    </a>
                    {{ end }}
                </nav>
            </div>
            {{ end }}
        </div>
    </section>

    <!-- Popular Topics -->
    <section class="py-12 md:py-16">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <h2 class="text-3xl font-bold text-gray-900 mb-10 text-center">Explore Topics</h2>
            
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-12">
                {{ $categories := .Site.Taxonomies.categories }}
                {{ if $categories }}
                    {{ $categoryList := slice }}
                    {{ range $name, $taxonomy := $categories }}
                        {{ range $taxonomy }}
                            {{ $categoryList = $categoryList | append . }}
                        {{ end }}
                    {{ end }}
                    {{ range $categoryList }}
                    <a href="/{{ .Page.Slug }}" class="flex flex-col items-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow">
                        <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-3">
                            <i class="fas fa-tag text-blue-600 text-xl"></i>
                        </div>
                        <span class="text-sm font-medium text-gray-900">{{ .Page.Title }}</span>
                    </a>
                    {{ end }}
                {{ else }}
                    <div class="col-span-full text-center py-8">
                        <p class="text-gray-500">No categories available yet.</p>
                    </div>
                {{ end }}
            </div>
            
            <div class="text-center">
                <a href="/topics" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium">
                    Browse all topics
                    <i class="fas fa-arrow-right ml-2"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- Newsletter Section -->
    <section class="py-12 md:py-16 bg-blue-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="max-w-3xl mx-auto text-center">
                <h2 class="text-3xl font-bold text-gray-900 mb-4">Stay Updated</h2>
                <p class="text-gray-700 mb-6">Join our newsletter and get the latest insights on technology and the future of work delivered to your inbox.</p>
                <form class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto">
                    <input type="email" 
                           placeholder="Your email address" 
                           class="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <button type="submit" 
                            class="btn-primary px-6 py-3 rounded-lg font-medium">
                        Subscribe
                    </button>
                </form>
                <p class="text-sm text-gray-500 mt-4">No spam. Unsubscribe at any time.</p>
            </div>
        </div>
    </section>
</div>
{{ end }}