import { ChecklistItem } from "../../app/_components/home/ChecklistItem";
import { Section } from "../../app/_components/home/Section";
import { CenteredTitle } from "../../app/_components/home/CenteredTitle";
import { FeatureBlock } from "../../app/_components/home/FeatureBlock";
import { CheckIcon } from "../../app/_components/home/icons";
import { HeroSection } from "../../app/_components/home/Hero";
 
<div className="transition-colors duration-300">
    <main>
        {/* Bagian 1: Siaran Langsung */}
        <HeroSection lang={props.params.lang} />
 
        {/* Bagian 2: Perpustakaan Video dan Alur Kerja */}
        <Section className="py-20 lg:py-28 bg-[#FEF0D8] dark:bg-slate-900/50">
            <CenteredTitle>Perpustakaan Video Anda dalam Satu Tempat</CenteredTitle>
            <div className="text-center max-w-3xl mx-auto mt-4">
                <p className="text-lg text-slate-600 dark:text-slate-400">
                    Manajemen perpustakaan video Anda dengan mudah menggunakan platform yang kuat dan intuitif. Dari unggahan dan pengkodean hingga berbagi dan distribusi global.
                </p>
            </div>
            <div className="mt-12">
                <img src="/images/home/video-workflow1.png" alt="Alur Kerja Pengolahan Video" className="mx-auto" />
            </div>
            <div className="ui-container mt-12 max-w-6xl mx-auto">
                <div className="ui-container-inner">
                    <img src="/images/home/library.png" alt="Antarmuka Perpustakaan Video dengan Opsi Berbagi" className={"shadow-2xl"}/>
                </div>
            </div>
        </Section>
 
        {/* Bagian 6: Pengkodean dan Pemacu */}
        <Section className="py-20 lg:py-28">
            <CenteredTitle>Pengkodean Lanjutan dan Pengiriman</CenteredTitle>
            <FeatureBlock
                title="Optimasi untuk Kinerja"
                description="Mesin kami secara otomatis memisahkan trek audio dan teks, menghasilkan pratinjau timeline, dan mendukung codec modern untuk kompresi dan kualitas yang lebih baik."
                videoUrl="https://codecanyon-cdn.snapencode.com/encoding.mp4"
                imagePosition="left"
            >
                <ChecklistItem icon={<CheckIcon />} title="Dukungan Codec Modern">Gunakan baik H.264 untuk kompatibilitas universal dan H.265 (HEVC) untuk kompresi yang lebih baik.</ChecklistItem>
                <ChecklistItem icon={<CheckIcon />} title="Pemacu Hardware">Manfaatkan kekuatan penuh perangkat keras dengan dukungan NVIDIA, VAAPI, dan CPU untuk pemrosesan yang sangat cepat.</ChecklistItem>
                <ChecklistItem icon={<CheckIcon />} title="Transkripsi dan Teks Kapasitas AI">Buat dan edit transkrip dengan model Whisper secara langsung di perangkat Anda.</ChecklistItem>
            </FeatureBlock>
        </Section>
 
        {/* Bagian 4: Player */}
        <Section className="py-20 lg:py-28">
            <CenteredTitle>Player yang Menempatkan Merek Anda Pertama</CenteredTitle>
            <div className="ui-container mt-12 max-w-4xl mx-auto">
                <div className="ui-container-inner">
                    <img src="/images/home/player.png" alt="Player dengan Logo dan Tema yang Dibuat Khusus" />
                </div>
            </div>
            <FeatureBlock
                title="Pengaturan Player yang Lengkap"
                imageContent={<img src="/images/home/player-options.png" alt="Antarmuka Pengaturan Layout dan Tema Player" />}
                imagePosition="left"
            >
                <ChecklistItem icon={<CheckIcon />} title="Logo Merek dan Warna UI">Upload logo khusus dan pilih warna utama untuk tombol dan kontrol.</ChecklistItem>
                <ChecklistItem icon={<CheckIcon />} title="Bahasa Default">Pilih bahasa audio dan teks subtitle default untuk pengalaman pengguna yang lebih baik.</ChecklistItem>
                <ChecklistItem icon={<CheckIcon />} title="Mode Latensi Rendah">Tunggu untuk mengurangi delay pemutaran video untuk konten waktu yang sensitif.</ChecklistItem>
            </FeatureBlock>
        </Section>
 
 
 
        {/* Bagian 5: CMS dan Keamanan */}
        <Section className={"py-20 lg:py-28"}>
            <CenteredTitle>CMS Kepala yang Nyata untuk Video</CenteredTitle>
            <FeatureBlock
                title="Struktur Konten"
                description="Buat template data struktural untuk konten Anda, jauh melampaui hanya judul dan deskripsi. Dapat diakses secara instan melalui JSON API yang aman dan developer-friendly."
                imageContent={
                    <div className="space-y-4">
                        <img src="/images/home/metadata.png" alt="Antarmuka Editor Metadata Kepala" />
                    </div>
                }
                imagePosition="right"
            >
                <ChecklistItem icon={<CheckIcon />} title="Schemas Metadata yang Dibuat Khusus">Desain template yang dapat digunakan kembali untuk Film, Produk, atau E-Learning.</ChecklistItem>
                <ChecklistItem icon={<CheckIcon />} title="Jenis Bidang yang Lebih Baik">Buat skema dengan teks, bidang teks panjang, unggahan gambar, dropdown, tanggal, dan lainnya.</ChecklistItem>
                <ChecklistItem icon={<CheckIcon />} title="Kapasitas Konten API yang Kuat">Setiap bidang metadata khusus dapat diakses secara instan melalui JSON API.</ChecklistItem>
            </FeatureBlock>
        </Section>
 
 
        {/* Bagian 3: API dan Analitik */}
        <Section className={"py-20 lg:py-28 "}>
            <CenteredTitle>Insight yang Dapat Diambil dan Analitik untuk Semua</CenteredTitle>
            <FeatureBlock
                title="Platform Developer Pertama"
                description="Buat pengalaman depan kustom, aplikasi seluler, atau alur kerja otomatis kompleks di atas mesin Snapencode."
                imageContent={<img src="/images/home/api.png" alt="API dan Respons JSON" />}
                imagePosition="right"
            >
                <ChecklistItem icon={<CheckIcon />} title="API-First Design">
                    Pahami penonton dengan data tentang lokasi geografis, jenis perangkat, dan penggunaan browser.
                </ChecklistItem>
                <ChecklistItem icon={<CheckIcon />} title="Manajemen Kunci API yang Aman">
                    Buat dan manfaatkan beberapa kunci API untuk aplikasi atau integrasi yang berbeda.
                </ChecklistItem>
                <ChecklistItem icon={<CheckIcon />} title="Analitik Rinci">
                    Dapatkan gambaran umum tentang kinerja perpustakaan video Anda, termasuk video teratas dan penonton.
                </ChecklistItem>
            </FeatureBlock>
        </Section>
 
    </main>
</div>