<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <meta name="description" content="Experience 1000 unique animated windmills in a revolutionary immersive gallery. Each windmill tells a story through mesmerizing animations and vibrant designs.">
    <meta name="keywords" content="windmills, animated SVG, art gallery, interactive experience, digital art, renewable energy art">
    <meta name="author" content="Windmill Gallery">
    <meta property="og:title" content="Windmill Symphony - 1000 Animated Dreams">
    <meta property="og:description" content="Immerse yourself in a revolutionary gallery of 1000 unique animated windmills">
    <meta property="og:type" content="website">
    <meta property="og:image" content="./icons/icon-512x512.png">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="theme-color" content="#0a0e27">
    <link rel="manifest" href="manifest.json">
    <link rel="apple-touch-icon" href="./icons/icon-192x192.png">
    <title>Windmill Symphony - 1000 Animated Dreams</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav class="quantum-nav" role="navigation" aria-label="Main navigation">
        <div class="nav-particles"></div>
        <div class="nav-content">
            <h1 class="logo-text">Windmill Symphony</h1>
            <div class="nav-controls">
                <button class="theme-toggle" aria-label="Toggle theme">
                    <span class="theme-icon"></span>
                </button>
                <button class="view-toggle" aria-label="Toggle view">
                    <span class="view-icon"></span>
                </button>
                <button class="sound-toggle" aria-label="Toggle sound">
                    <span class="sound-icon"></span>
                </button>
            </div>
        </div>
    </nav>

    <header class="hero-section">
        <div class="hero-backdrop"></div>
        <div class="hero-content">
            <h2 class="hero-title">
                <span class="glitch-text" data-text="1000 Windmills">1000 Windmills</span>
                <span class="subtitle">Each One a Universe</span>
            </h2>
            <div class="hero-stats">
                <div class="stat-card">
                    <span class="stat-number" data-target="1000">0</span>
                    <span class="stat-label">Unique Windmills</span>
                </div>
                <div class="stat-card">
                    <span class="stat-number" data-target="∞">∞</span>
                    <span class="stat-label">Animations</span>
                </div>
                <div class="stat-card">
                    <span class="stat-number" data-target="100">0</span>
                    <span class="stat-label">% Renewable</span>
                </div>
            </div>
        </div>
        <div class="scroll-indicator">
            <div class="scroll-wheel"></div>
        </div>
    </header>

    <main class="gallery-container" role="main">
        <div class="filter-panel">
            <div class="filter-header">
                <h3>Explore Dimensions</h3>
                <button class="filter-reset" aria-label="Reset filters">Reset</button>
            </div>
            <div class="filter-options">
                <button class="filter-btn active" data-filter="all">All Realms</button>
                <button class="filter-btn" data-filter="cosmic">Cosmic</button>
                <button class="filter-btn" data-filter="nature">Nature</button>
                <button class="filter-btn" data-filter="abstract">Abstract</button>
                <button class="filter-btn" data-filter="steampunk">Steampunk</button>
                <button class="filter-btn" data-filter="digital">Digital</button>
                <button class="filter-btn" data-filter="ocean">Ocean</button>
                <button class="filter-btn" data-filter="desert">Desert</button>
                <button class="filter-btn" data-filter="fantasy">Fantasy</button>
            </div>
        </div>

        <div class="search-container">
            <input type="search" class="search-input" placeholder="Search windmills by number, theme, or color..." aria-label="Search windmills">
            <div class="search-suggestions"></div>
        </div>

        <div class="gallery-grid" id="windmill-gallery" role="region" aria-label="Windmill gallery">
            <!-- Windmills will be dynamically generated here -->
        </div>

        <div class="loading-indicator" id="loader">
            <div class="loader-windmill">
                <svg viewBox="0 0 100 100">
                    <circle cx="50" cy="50" r="3" fill="#fff"/>
                    <g class="loader-blades">
                        <path d="M50,47 L50,20 Q45,15 40,20 L50,47" fill="#3498db"/>
                        <path d="M50,47 L75,35 Q80,30 75,25 L50,47" fill="#e74c3c"/>
                        <path d="M50,47 L75,65 Q80,70 75,75 L50,47" fill="#f39c12"/>
                        <path d="M50,47 L25,65 Q20,70 25,75 L50,47" fill="#2ecc71"/>
                    </g>
                </svg>
            </div>
            <p class="loader-text">Generating windmills...</p>
        </div>
    </main>

    <div class="modal" id="windmill-modal" role="dialog" aria-modal="true" aria-labelledby="modal-title">
        <div class="modal-content">
            <button class="modal-close" aria-label="Close modal">&times;</button>
            <div class="modal-windmill"></div>
            <div class="modal-info">
                <h3 id="modal-title"></h3>
                <p class="modal-description"></p>
                <div class="modal-actions">
                    <button class="action-btn download-btn">Download SVG</button>
                    <button class="action-btn share-btn">Share</button>
                    <button class="action-btn favorite-btn">Favorite</button>
                </div>
            </div>
        </div>
    </div>

    <footer class="footer">
        <div class="footer-content">
            <p class="footer-text">Windmill Symphony © 2025 | Powered by Imagination & Renewable Energy</p>
            <div class="social-links">
                <a href="#" aria-label="Share on Twitter">🐦</a>
                <a href="#" aria-label="Share on Facebook">📘</a>
                <a href="#" aria-label="Share on Instagram">📷</a>
            </div>
        </div>
    </footer>

    <div class="cursor-trail"></div>
    <canvas id="particle-canvas"></canvas>

    <script src="windmill-generator.js"></script>
    <script src="app.js"></script>
</body>
</html>