{% extends "base.html" %}

{% block title %}Selamat Datang - Liputan6 Summarizer{% endblock %}

{% block extra_css %}
<style>
    .hero {
        background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
        border-radius: var(--border-radius);
        padding: 40px;
        box-shadow: var(--shadow);
    }
    .hero-badge {
        background: #fde68a;
        color: #9a3412;
        border-radius: 9999px;
        padding: 6px 12px;
        font-weight: 600;
        font-size: 0.85rem;
        display: inline-block;
    }
    .feature-icon {
        width: 56px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff7ed;
        border: 2px solid #fed7aa;
        border-radius: 12px;
        color: #ea580c;
        box-shadow: var(--shadow);
    }
    .logo-title {
        color: #ea580c;
        font-weight: 800;
    }
    .cta-card {
        background: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
        color: white;
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-lg);
        padding: 24px;
    }
    .brand-strip {
        border-top: 3px solid #f97316;
        border-bottom: 3px solid #f97316;
        background: white;
    }
</style>
{% endblock %}

{% block content %}
<div class="row align-items-center mb-4 hero">
    <div class="col-lg-7">
        <span class="hero-badge mb-2"><i class="fas fa-bolt me-1"></i>Ringkas Berita dengan Cepat</span>
        <h2 class="mt-2 mb-3">
            <span class="logo-title">Liputan6</span> Extractive Summarizer
        </h2>
        <p class="text-muted mb-3">Platform untuk merangkum berita dari Liputan6.com secara otomatis menggunakan teknik <em>Extractive Summarization</em>. Pilih kalimat-kalimat kunci dari artikel untuk membentuk ringkasan yang padat, akurat, dan mudah dipahami.</p>
        <div class="d-flex gap-2 mb-3">
            <span class="badge bg-warning text-dark"><i class="fas fa-newspaper me-1"></i>Berita Indonesia</span>
            <span class="badge bg-light text-dark border"><i class="fas fa-language me-1"></i>Bahasa Indonesia</span>
            <span class="badge bg-success"><i class="fas fa-robot me-1"></i>Machine Learning</span>
        </div>
        <div class="mt-3">
            <a href="{{ url_for('app_page') }}" class="btn btn-primary me-2">
                <i class="fas fa-play me-2"></i>Mulai Ringkas Berita
            </a>
            <a href="{{ url_for('analytics') }}" class="btn btn-outline-secondary">
                <i class="fas fa-chart-line me-2"></i>Lihat Analytics
            </a>
        </div>
    </div>
    <div class="col-lg-5">
        <div class="cta-card">
            <h5 class="mb-2"><i class="fas fa-info-circle me-2"></i>Tentang Aplikasi</h5>
            <p class="mb-2">Aplikasi ini mendukung beberapa algoritma:</p>
            <ul class="mb-0">
                <li><strong>TextRank</strong>: Graph-based ranking untuk memilih kalimat penting.</li>
                <li><strong>TF-IDF + Logistic Regression</strong>: Fitur statistik dengan klasifikasi kalimat.</li>
                <li><strong>BERT-based</strong>: Representasi kontekstual untuk pemilihan kalimat lebih akurat.</li>
            </ul>
        </div>
    </div>
    </div>

<div class="row mt-4">
    <div class="col-md-4 mb-3">
        <div class="d-flex align-items-start gap-3 p-3 bg-white rounded-3 shadow-sm">
            <div class="feature-icon"><i class="fas fa-bullseye"></i></div>
            <div>
                <h6>Akurat & Relevan</h6>
                <p class="text-muted mb-0">Memilih kalimat bernilai informasi tinggi langsung dari artikel asli.</p>
            </div>
        </div>
    </div>
    <div class="col-md-4 mb-3">
        <div class="d-flex align-items-start gap-3 p-3 bg-white rounded-3 shadow-sm">
            <div class="feature-icon"><i class="fas fa-tachometer-alt"></i></div>
            <div>
                <h6>Cepat Dipakai</h6>
                <p class="text-muted mb-0">Tempel URL atau teks, atur jumlah kalimat, dan dapatkan ringkasan.</p>
            </div>
        </div>
    </div>
    <div class="col-md-4 mb-3">
        <div class="d-flex align-items-start gap-3 p-3 bg-white rounded-3 shadow-sm">
            <div class="feature-icon"><i class="fas fa-exchange-alt"></i></div>
            <div>
                <h6>Fleksibel</h6>
                <p class="text-muted mb-0">Pilih model yang tersedia sesuai kebutuhan antara akurasi dan kecepatan.</p>
            </div>
        </div>
    </div>
</div>

<div class="brand-strip mt-4 p-3 text-center">
    <small class="text-muted"><i class="fas fa-shield-alt me-1"></i>Untuk penggunaan edukasi dan riset. Liputan6 adalah merek dari pemiliknya masing-masing.</small>
</div>
{% endblock %}