<?php
// =========================================================================
// api_bot/docs_model.php - DOKUMENTASI MODEL & MODE XIEQA LLM
// =========================================================================
session_start();
if (!isset($_SESSION['user_id'])) {
    header("Location: ../index.php");
    exit;
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dokumentasi Mesin - Xieqa LLM</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <style>
        body { background-color: #f0f4f9; font-family: 'Inter', sans-serif; }
        .card-premium { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.04); transition: transform 0.2s; }
        .card-premium:hover { transform: translateY(-5px); }
        .icon-box { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 24px; margin-bottom: 15px; }
        .bg-go { background-color: #e8f0fe; color: #1a73e8; }
        .bg-gq { background-color: #fce8e6; color: #d93025; }
        .bg-hybrid { background-color: #e6f4ea; color: #1e8e3e; }
        .use-case-box { border-left: 4px solid #1a73e8; background: #f8fafc; padding: 15px; border-radius: 0 12px 12px 0; margin-top: 10px; }
    </style>
</head>
<body>
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                
                <div class="d-flex align-items-center justify-content-between mb-5">
                    <div>
                        <h2 class="fw-bold m-0 text-dark"><i class="bi bi-book-half text-primary me-2"></i> Dokumentasi Model & Mode</h2>
                        <p class="text-muted mt-1 mb-0">Panduan memilih spesifikasi mesin yang tepat untuk project Anda.</p>
                    </div>
                    <a href="index.php" class="btn btn-white border rounded-pill fw-bold text-secondary shadow-sm px-4">Kembali ke Portal</a>
                </div>

                <h4 class="fw-bold text-dark mb-3"><i class="bi bi-cpu-fill text-warning me-2"></i> 1. Pilihan Mesin Utama (Engine)</h4>
                <div class="row g-4 mb-5">
                    <div class="col-md-4">
                        <div class="card-premium p-4 h-100">
                            <div class="icon-box bg-go"><i class="bi bi-lightning-charge-fill"></i></div>
                            <h5 class="fw-bold">XieqaLLM-Go</h5>
                            <span class="badge bg-primary mb-3">High Speed Context</span>
                            <p class="text-secondary small">Mesin dengan arsitektur memori ekstensif. Sangat tangguh dalam mengingat rentetan teks yang sangat panjang, memproses dokumen raksasa, dan menghasilkan narasi dengan kecepatan luar biasa tinggi.</p>
                            <hr>
                            <p class="small fw-bold mb-1">Cocok untuk:</p>
                            <ul class="small text-muted ps-3">
                                <li>Generator Artikel / Makalah</li>
                                <li>Pembuat RPP / Modul Ajar Panjang</li>
                                <li>Meringkas Dokumen Besar</li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card-premium p-4 h-100">
                            <div class="icon-box bg-gq"><i class="bi bi-diagram-3-fill"></i></div>
                            <h5 class="fw-bold">XieqaLLM-GQ</h5>
                            <span class="badge bg-danger mb-3">High Logic & Reasoning</span>
                            <p class="text-secondary small">Mesin dengan arsitektur pemrosesan logika tingkat tinggi. Sangat cerdas dalam memecahkan masalah sistematis, patuh pada aturan instruksi ketat, dan ahli dalam berbagai bahasa pemrograman.</p>
                            <hr>
                            <p class="small fw-bold mb-1">Cocok untuk:</p>
                            <ul class="small text-muted ps-3">
                                <li>Asisten Koding (PHP, Python, JS)</li>
                                <li>Pemecah Soal Matematika/Fisika</li>
                                <li>Logika Internet of Things (IoT)</li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card-premium p-4 h-100">
                            <div class="icon-box bg-hybrid"><i class="bi bi-shield-check"></i></div>
                            <h5 class="fw-bold">XieqaLLM-HIBRYT</h5>
                            <span class="badge bg-success mb-3">Anti-Down Fallback</span>
                            <p class="text-secondary small">Memadukan kedua kekuatan mesin. Sistem akan memprioritaskan model High Speed (Go), namun jika lalu lintas server sibuk, koneksi akan otomatis dioper ke model High Logic (GQ) dalam hitungan milidetik.</p>
                            <hr>
                            <p class="small fw-bold mb-1">Cocok untuk:</p>
                            <ul class="small text-muted ps-3">
                                <li>Aplikasi Komersial / Bisnis</li>
                                <li>Layanan Customer Service 24/7</li>
                                <li>Project yang butuh 100% Uptime</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <h4 class="fw-bold text-dark mb-3"><i class="bi bi-chat-right-quote-fill text-info me-2"></i> 2. Pilihan Mode (Gaya Bahasa)</h4>
                <div class="card-premium p-4 mb-5">
                    <div class="row g-4">
                        <div class="col-md-6">
                            <h6 class="fw-bold text-dark">🚀 Mode Cepat</h6>
                            <p class="text-muted small">AI diinstruksikan untuk tidak berbasa-basi. Langsung memberikan jawaban singkat, padat, dan ke intinya tanpa kalimat pengantar.</p>
                        </div>
                        <div class="col-md-6">
                            <h6 class="fw-bold text-dark">🧠 Mode Penalaran</h6>
                            <p class="text-muted small">AI dipaksa untuk berpikir lambat (Step-by-step). Jawaban akan diurai secara logis, analitis, dan mendalam sebelum memberikan kesimpulan akhir.</p>
                        </div>
                        <div class="col-md-6">
                            <h6 class="fw-bold text-dark">💼 Mode Pro</h6>
                            <p class="text-muted small">Jawaban akan disusun secara sangat terstruktur (menggunakan poin-poin/tabel), menggunakan bahasa formal, dan standar baku profesional.</p>
                        </div>
                        <div class="col-md-6">
                            <h6 class="fw-bold text-dark">🌿 All Mode (Natural)</h6>
                            <p class="text-muted small">AI dibebaskan dari segala aturan paksaan gaya bahasa. Ia akan merespons layaknya manusia cerdas yang sedang mengobrol natural sesuai dengan konteks pertanyaan.</p>
                        </div>
                    </div>
                </div>

                <h4 class="fw-bold text-dark mb-3"><i class="bi bi-lightbulb-fill text-warning me-2"></i> 3. Rekomendasi Racikan Project</h4>
                <div class="row g-4 mb-5">
                    <div class="col-md-6">
                        <div class="use-case-box">
                            <h6 class="fw-bold text-primary mb-1">Bot WhatsApp CS Sekolah</h6>
                            <p class="small text-dark mb-1">Racikan: <b>XieqaLLM-HIBRYT + Mode Cepat</b></p>
                            <p class="small text-muted m-0">Alasan: CS butuh kecepatan tanggap yang tinggi, dan jawaban harus singkat agar tidak memenuhi layar HP orang tua siswa. Fitur Hybrid menjamin bot selalu aktif 24 jam.</p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="use-case-box" style="border-color: #d93025;">
                            <h6 class="fw-bold text-danger mb-1">Asisten Belajar Matematika/Koding</h6>
                            <p class="small text-dark mb-1">Racikan: <b>XieqaLLM-GQ + Mode Penalaran</b></p>
                            <p class="small text-muted m-0">Alasan: Mesin GQ sangat kuat dilogika. Ditambah mode Penalaran, AI akan menjelaskan cara mendapatkan jawaban dari rumus atau baris kode tersebut *step-by-step*.</p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="use-case-box" style="border-color: #1e8e3e;">
                            <h6 class="fw-bold text-success mb-1">Generator RPP / Modul Ajar</h6>
                            <p class="small text-dark mb-1">Racikan: <b>XieqaLLM-Go + Mode Pro</b></p>
                            <p class="small text-muted m-0">Alasan: Pembuatan RPP butuh pemahaman konteks panjang. Mesin Go sanggup menelannya, dan Mode Pro memastikan hasil akhir tersusun rapi secara profesional.</p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="use-case-box" style="border-color: #fbbc04;">
                            <h6 class="fw-bold text-warning mb-1">Smart Home IoT (Voice Command)</h6>
                            <p class="small text-dark mb-1">Racikan: <b>XieqaLLM-Go + All Mode</b></p>
                            <p class="small text-muted m-0">Alasan: Saat berbicara dengan asisten rumah pitar seperti "Nyalakan lampu kamar", kita ingin AI merespons secara natural layaknya manusia, tanpa terikat format baku atau tabel.</p>
                        </div>
                    </div>
                </div>

                <div class="text-center mt-5 pt-4 border-top">
                    <p class="text-muted small fw-bold mb-0">&copy; <?= date('Y') ?> XIEQA AI Dev Sikawarsito. All Rights Reserved.</p>
                </div>

            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>