{% extends "base.html" %}

{% block title %}Staticle - Modern Blog with HTMX{% endblock %}

{% block content %}
<!-- ヒーローセクション -->
<section class="text-center py-24 bg-gradient-to-br from-blue-50 via-white to-purple-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 -mx-4 sm:-mx-6 lg:-mx-8 px-4 sm:px-6 lg:px-8">
    <div class="max-w-4xl mx-auto">
        <!-- メインキャッチコピー -->
        <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold text-gray-900 dark:text-white mb-8 leading-tight">
            <span class="block mb-2">AIとペン先から</span>
            <span class="text-primary-600 dark:text-primary-400">未来のWebを紡ぐ</span>
        </h1>
        
        <!-- サブタイトル -->
        <p class="text-lg md:text-xl text-gray-600 dark:text-gray-300 mb-4 max-w-3xl mx-auto">
            思考の跡が、デジタルの美を際立たせる
        </p>
        
        
        <!-- 技術説明 -->
        <p class="text-base md:text-lg text-gray-600 dark:text-gray-300 mb-10 max-w-2xl mx-auto">
            Modern blog built with HTMX, Flask, and TailwindCSS.<br>
            Fast, interactive, and developer-friendly.
        </p>
        
        <!-- CTAボタン -->
        <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
            <a href="/blog" 
               class="inline-flex items-center bg-primary-600 hover:bg-primary-700 text-white font-semibold py-4 px-8 rounded-xl transition-all duration-200 transform hover:scale-105 shadow-lg hover:shadow-xl">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
                </svg>
                記事を読む
            </a>
            <a href="#about" 
               class="inline-flex items-center border-2 border-gray-300 dark:border-gray-600 hover:border-primary-600 dark:hover:border-primary-400 text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 font-semibold py-4 px-8 rounded-xl transition-all duration-200 transform hover:scale-105">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                もっと知る
            </a>
        </div>
    </div>
</section>

<!-- 最新記事プレビュー -->
<section class="py-16">
    <div class="text-center mb-12">
        <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">Latest Posts</h2>
        <p class="text-gray-600 dark:text-gray-300">Stay updated with our latest articles and insights</p>
    </div>
    
    <!-- HTMX で最新記事を読み込み -->
    <div hx-get="/htmx/posts?limit=3" 
         hx-trigger="load" 
         hx-indicator="#loading" 
         class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        <!-- ローディング表示 -->
        <div id="loading" class="col-span-full text-center py-8">
            <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600 mx-auto"></div>
            <p class="mt-2 text-gray-500">Loading posts...</p>
        </div>
    </div>
</section>

<!-- 特徴セクション -->
<section id="about" class="py-16 bg-white dark:bg-gray-800 -mx-4 sm:-mx-6 lg:-mx-8 px-4 sm:px-6 lg:px-8">
    <div class="max-w-4xl mx-auto">
        <div class="text-center mb-12">
            <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">Why Staticle?</h2>
            <p class="text-gray-600 dark:text-gray-300">Built with modern technologies for optimal performance</p>
        </div>
        
        <!-- 統計情報 -->
        {% if stats %}
        <div class="grid gap-6 md:grid-cols-4 mb-12">
            <div class="text-center p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                <div class="text-2xl font-bold text-primary-600 mb-1">{{ stats.total_posts }}</div>
                <div class="text-sm text-gray-600 dark:text-gray-300">記事</div>
            </div>
            <div class="text-center p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                <div class="text-2xl font-bold text-primary-600 mb-1">{{ stats.categories }}</div>
                <div class="text-sm text-gray-600 dark:text-gray-300">カテゴリ</div>
            </div>
            <div class="text-center p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                <div class="text-2xl font-bold text-primary-600 mb-1">{{ stats.tags }}</div>
                <div class="text-sm text-gray-600 dark:text-gray-300">タグ</div>
            </div>
            <div class="text-center p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                <div class="text-2xl font-bold text-primary-600 mb-1">∞</div>
                <div class="text-sm text-gray-600 dark:text-gray-300">可能性</div>
            </div>
        </div>
        {% endif %}
        
        <div class="grid gap-8 md:grid-cols-3">
            <div class="text-center">
                <div class="bg-primary-100 dark:bg-primary-900 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                    <svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                    </svg>
                </div>
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Lightning Fast</h3>
                <p class="text-gray-600 dark:text-gray-300">HTMX provides lightning-fast interactions without the complexity of SPA frameworks</p>
            </div>
            
            <div class="text-center">
                <div class="bg-primary-100 dark:bg-primary-900 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                    <svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
                    </svg>
                </div>
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Developer Friendly</h3>
                <p class="text-gray-600 dark:text-gray-300">Flask backend with simple and reliable architecture</p>
            </div>
            
            <div class="text-center">
                <div class="bg-primary-100 dark:bg-primary-900 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                    <svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                    </svg>
                </div>
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Modern Design</h3>
                <p class="text-gray-600 dark:text-gray-300">Beautiful, responsive design with TailwindCSS and dark mode support</p>
            </div>
        </div>
    </div>
</section>
{% endblock %}