{% extends "base.html" %}

{% block content %}
<!-- Page Header -->
<section class="section-full" style="background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)); color: white; padding: 4rem 5vw 6rem 5vw;">
    <div class="container text-center">
        <h1 style="color: white; margin-bottom: 1rem;">Tentang PantunGen</h1>
        <p style="color: rgba(255,255,255,0.8); font-size: 1.125rem; max-width: 600px; margin: 0 auto;">Menggabungkan tradisi dan inovasi masa depan melalui kecerdasan buatan.</p>
    </div>
</section>

<div class="container mb-4" style="margin-top: -3rem; position: relative; z-index: 10;">
    <div class="card mb-4 fade-in" style="animation-delay: 0.1s;">
        <div style="display: flex; gap: 4rem; align-items: center; flex-wrap: wrap;">
            <div style="flex: 1.5; min-width: 300px;">
                <h2 class="mb-3">Tujuan Kami</h2>
                <p class="text-muted mb-3" style="font-size: 1.125rem; line-height: 1.8;">PantunGen dikembangkan untuk membantu membuat pantun tematik berbahasa Indonesia dengan lebih mudah sekaligus mendukung pelestarian budaya pantun melalui teknologi NLP. Sistem ini menggunakan model IndoGPT yang telah di-fine-tune pada dataset pantun Indonesia untuk menghasilkan pantun sesuai tema yang diberikan.</p>
                <p class="text-muted" style="font-size: 1.125rem; line-height: 1.8;">Pantun yang dihasilkan tetap mengikuti kaidah pantun, seperti pola rima a-b-a-b, keterkaitan antara sampiran dan isi, serta jumlah suku kata yang sesuai, sehingga hasilnya tetap menarik dan mudah dipahami.</p>
            </div>
            <div style="flex: 1; min-width: 300px; text-align: center;">
                <div style="width: 250px; height: 250px; background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.2)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto;">
                    <i class="fa-solid fa-seedling" style="font-size: 8rem; color: var(--color-success); filter: drop-shadow(0 10px 15px rgba(16, 185, 129, 0.3));"></i>
                </div>
            </div>
        </div>
    </div>

    <div class="card mb-4 fade-in" style="animation-delay: 0.2s;">
        <h2 class="mb-4 text-center">Bagaimana Model Ini Bekerja?</h2>
        
        <div style="display: flex; gap: 3rem; flex-wrap: wrap; justify-content: center;">
            <div style="flex: 1; min-width: 250px; text-align: center; padding: 1.5rem; background: var(--color-surface); border-radius: var(--radius-lg);">
                <div style="width: 80px; height: 80px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; box-shadow: var(--shadow-md);">
                    <i class="fa-solid fa-database" style="font-size: 2rem; color: var(--color-primary);"></i>
                </div>
                <h4 style="margin-bottom: 1rem;">1. Pengumpulan Data</h4>
                <p class="text-muted mt-1" style="font-size: 1rem; line-height: 1.6;">Ribuan pantun tradisional dan modern dikumpulkan, dibersihkan, dan dianotasi untuk membentuk korpus yang solid.</p>
            </div>
            
            <div style="flex: 1; min-width: 250px; text-align: center; padding: 1.5rem; background: var(--color-surface); border-radius: var(--radius-lg);">
                <div style="width: 80px; height: 80px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; box-shadow: var(--shadow-md);">
                    <i class="fa-solid fa-brain" style="font-size: 2rem; color: var(--color-accent);"></i>
                </div>
                <h4 style="margin-bottom: 1rem;">2. Fine-Tuning Model</h4>
                <p class="text-muted mt-1" style="font-size: 1rem; line-height: 1.6;">Model IndoGPT dilatih secara khusus untuk memahami konstrain suku kata dan pola rima a-b-a-b.</p>
            </div>
            
            <div style="flex: 1; min-width: 250px; text-align: center; padding: 1.5rem; background: var(--color-surface); border-radius: var(--radius-lg);">
                <div style="width: 80px; height: 80px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; box-shadow: var(--shadow-md);">
                    <i class="fa-solid fa-gears" style="font-size: 2rem; color: var(--color-warning);"></i>
                </div>
                <h4 style="margin-bottom: 1rem;">3. Evaluasi Metrik</h4>
                <p class="text-muted mt-1" style="font-size: 1rem; line-height: 1.6;">Performa divalidasi menggunakan metrik standar serta penilaian linguistik untuk memastikan kealamian bahasa.</p>
            </div>
        </div>
    </div>

    <div class="card mb-4 fade-in" style="animation-delay: 0.3s; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); color: white; border: none; box-shadow: 0 20px 25px -5px rgba(79, 70, 229, 0.4);">
        <h2 class="mb-4 text-center" style="color: white;">Alur Penggunaan</h2>
        <div style="display: flex; gap: 1rem; justify-content: space-between; align-items: center; flex-wrap: wrap;">
            <div class="text-center" style="flex: 1;">
                <div style="width: 64px; height: 64px; background: rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; backdrop-filter: blur(4px);">
                    <i class="fa-solid fa-keyboard" style="font-size: 1.5rem;"></i>
                </div>
                <p style="font-weight: 600; font-size: 1.1rem; color: rgba(255,255,255,0.9);">Input Tema</p>
            </div>
            <i class="fa-solid fa-chevron-right" style="opacity: 0.5; font-size: 1.5rem;"></i>
            <div class="text-center" style="flex: 1;">
                <div style="width: 64px; height: 64px; background: rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; backdrop-filter: blur(4px);">
                    <i class="fa-solid fa-sliders" style="font-size: 1.5rem;"></i>
                </div>
                <p style="font-weight: 600; font-size: 1.1rem; color: rgba(255,255,255,0.9);">Atur Gaya</p>
            </div>
            <i class="fa-solid fa-chevron-right" style="opacity: 0.5; font-size: 1.5rem;"></i>
            <div class="text-center" style="flex: 1;">
                <div style="width: 64px; height: 64px; background: rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; backdrop-filter: blur(4px);">
                    <i class="fa-solid fa-microchip" style="font-size: 1.5rem;"></i>
                </div>
                <p style="font-weight: 600; font-size: 1.1rem; color: rgba(255,255,255,0.9);">Generasi Pantun</p>
            </div>
            <i class="fa-solid fa-chevron-right" style="opacity: 0.5; font-size: 1.5rem;"></i>
            <div class="text-center" style="flex: 1;">
                <div style="width: 64px; height: 64px; background: rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; backdrop-filter: blur(4px);">
                    <i class="fa-solid fa-scroll" style="font-size: 1.5rem;"></i>
                </div>
                <p style="font-weight: 600; font-size: 1.1rem; color: rgba(255,255,255,0.9);">Pantun Selesai</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}