<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Sleek | The Art of Downloading</title>
    <link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon.png') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>

<body>
    <!-- Background Ambient Glows -->
    <div class="ambient-glow glow-1"></div>
    <div class="ambient-glow glow-2"></div>

    <div class="wrapper intro-wrapper wide-wrapper">
        <!-- Navbar (Minimal) -->
        <nav class="intro-nav fade-in-up">
            <span class="brand">Sleek</span>
            <a href="/" class="btn-nav">App 실행 <i class="fas fa-arrow-right"></i></a>
        </nav>

        <!-- Hero Section -->
        <section class="intro-hero fade-in-up" style="animation-delay: 0.1s;">
            <div class="badge-container">
                <span class="badge">Architecture v2.0</span>
            </div>
            <h1 class="logo-large">Pure. Potent.<br>Permanent.</h1>
            <p class="hero-subtitle">The last media archiver designed<br>for the uncompromising perfectionist.</p>

            <div class="hero-actions">
                <a href="/" class="btn btn-primary btn-hero">Start Archiving</a>
                <a href="#manifesto" class="btn btn-text">Read Philosophy</a>
            </div>
        </section>

        <!-- Philosophy / Manifesto -->
        <section id="manifesto" class="manifesto-section scroll-reveal">
            <h2>The No-Nonsense Philosophy</h2>
            <div class="manifesto-grid">
                <div class="manifesto-item">
                    <span class="number">01</span>
                    <h3>Zero Distraction</h3>
                    <p>우리는 버튼 하나, 픽셀 하나까지 질문을 던졌습니다. "이게 정말 필요한가?"<br>그 결과, 오직 다운로드라는 본질만 남았습니다.</p>
                </div>
                <div class="manifesto-item">
                    <span class="number">02</span>
                    <h3>Zero Dependency</h3>
                    <p>당신의 데이터는 클라우드를 거치지 않습니다.<br>모든 과정은 당신의 기기 안에서, 당신의 통제 하에 완벽하게 종료됩니다.</p>
                </div>
                <div class="manifesto-item">
                    <span class="number">03</span>
                    <h3>Zero Compromise</h3>
                    <p>8K 원본 화질? 무손실 오디오? 타협하지 마세요.<br>Sleek은 플랫폼이 허용하는 최대치의 퀄리티를 기어코 찾아냅니다.</p>
                </div>
            </div>
        </section>

        <!-- Dynamic Terminal/Tech Section -->
        <section class="tech-showcase scroll-reveal">
            <div class="glass-panel terminal-window">
                <div class="terminal-header">
                    <div class="dots">
                        <span></span><span></span><span></span>
                    </div>
                    <div class="terminal-title">sleek_core_engine.py</div>
                </div>
                <div class="terminal-body">
                    <div class="code-line"><span class="c-pink">import</span> yt_dlp</div>
                    <div class="code-line"><span class="c-pink">class</span> <span class="c-blue">SleekEngine</span>:
                    </div>
                    <div class="code-line indent">def <span class="c-yellow">extract_best</span>(url):</div>
                    <div class="code-line indent-2"><span class="c-comment"># Force highest bitrate audio & video</span>
                    </div>
                    <div class="code-line indent-2">return <span class="c-green">"8K_HDR_60FPS"</span></div>
                    <br>
                    <div class="code-line"><span class="c-gray">>> System Ready.</span></div>
                    <div class="code-line"><span class="c-gray">>> Waiting for input...</span><span
                            class="cursor">_</span></div>
                </div>
            </div>
            <div class="tech-desc">
                <h3>Powered by Python</h3>
                <p>Sleek의 아름다운 유리 표면 아래에는<br>강력한 <strong>Python 엔진</strong>이 박동하고 있습니다.<br>전 세계 개발자들이 검증한 yt-dlp
                    라이브러리를<br>가장 우아한 형태로 제어하세요.</p>
            </div>
        </section>

        <!-- Features Grid Reimagined -->
        <section class="features-mosaic scroll-reveal">
            <div class="mosaic-card glass-panel highlight-card">
                <i class="fas fa-magic mosaic-icon"></i>
                <h3>Smart<br>Automation</h3>
                <p>경로 자동 저장<br>최적 포맷 자동 감지</p>
            </div>
            <div class="mosaic-card glass-panel">
                <i class="fas fa-palette mosaic-icon"></i>
                <h3>Adaptive<br>Theming</h3>
                <p>시스템 테마 연동<br>다크/라이트 모드</p>
            </div>
            <div class="mosaic-card glass-panel">
                <i class="fas fa-tachometer-alt mosaic-icon"></i>
                <h3>Blazing<br>Fast</h3>
                <p>비동기 스트림 처리<br>지연 없는 반응 속도</p>
            </div>
            <div class="mosaic-card glass-panel">
                <i class="fas fa-lock mosaic-icon"></i>
                <h3>Secure<br>Core</h3>
                <p>외부 서버 통신 없음<br>로컬 데이터 처리</p>
            </div>
        </section>



        <footer class="intro-footer scroll-reveal">
            <h2 class="footer-cta">Archiving Simplified.</h2>
            <a href="/" class="btn btn-primary btn-hero">Open Sleek</a>
            <p class="copyright">© 2026 RheeWorks. Crafted with passion.</p>
        </footer>
    </div>

    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
    <script>
        // Intro specific animations
        document.addEventListener('DOMContentLoaded', () => {
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('visible');
                    }
                });
            }, { threshold: 0.1 });

            document.querySelectorAll('.scroll-reveal').forEach(el => observer.observe(el));
        });
    </script>
</body>

</html>