<?= $this->extend('layout/template'); ?>

<?= $this->section('content'); ?>
<section class="relative min-h-[60vh] flex items-center overflow-hidden py-20 bg-[#BA290D]">

    <div class="absolute inset-0 z-0">
        <img src="<?= !empty($settings['about_hero_img']) ? base_url('uploads/about/' . $settings['about_hero_img']) : base_url('assets/img/gb_hero/about.jpg') ?>"
            alt="About Background" class="w-full h-full object-cover">
        <div class="absolute inset-0 bg-black/40"></div>
    </div>

    <div class="container mx-auto px-4 md:px-12 relative z-10 pt-25">
        <div class="w-full md:w-1/2 text-white">
            <h4 class="font-bold tracking-[0.3em] uppercase text-sm mb-4 text-orange-400">
                <?= esc($settings['about_hero_kicker'] ?? "We're on a mission") ?>
            </h4>
            <h1 class="text-5xl md:text-7xl font-black uppercase leading-[0.9] tracking-tighter mb-6">
                ABOUT US -<br>
            </h1>
            <p class="text-lg md:text-xl font-medium max-w-lg mb-8 text-gray-100 opacity-90 leading-relaxed">
                <?= nl2br(esc($settings['about_hero_desc'] ?? "Good for your taste buds. Good for your soul. Kami hadir untuk mengubah cara Anda menikmati hidangan otentik dengan kualitas bahan terbaik setiap harinya.")) ?>
            </p>
        </div>
    </div>

    <div class="absolute top-0 right-0 opacity-20 pointer-events-none z-10">
        <svg width="400" height="400" viewBox="0 0 200 200" fill="white">
            <path d="M40,20 Q60,10 80,20 T120,20" stroke="white" stroke-width="2" fill="none" />
        </svg>
    </div>
</section>

<section class="py-4 bg-[#a11c12] border-b border-[#BA290D]/10">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">

            <div class="flex flex-col items-center">
                <span
                    class="text-4xl md:text-5xl font-black text-[#ffff] mb-1"><?= number_format($total_pelanggan, 0, ',', '.'); ?>+</span>
                <span
                    class="text-[10px] text-[#ffff] md:text-xxs uppercase tracking-[0.2em] font-bold text-[#075939]/70">Pelanggan
                    Puas</span>
            </div>

            <div class="flex flex-col items-center">
                <span class="text-4xl md:text-5xl font-black text-[#ffff] mb-1"><?= $total_cabang; ?></span>
                <span
                    class="text-[10px] md:text-xxs text-[#ffff] uppercase tracking-[0.2em] font-bold text-[#075939]/70">Cabang
                    Nasional</span>
            </div>

            <div class="flex flex-col items-center">
                <span class="text-4xl md:text-5xl font-black text-[#ffff] mb-1"><?= $total_menu; ?></span>
                <span
                    class="text-[10px] md:text-xxs text-[#ffff] uppercase tracking-[0.2em] font-bold text-[#075939]/70">Varian
                    Menu</span>
            </div>

            <div class="flex flex-col items-center">
                <span class="text-4xl md:text-5xl font-black text-[#ffff] mb-1">
                    <?= esc($settings['about_rating'] ?? "4.9/5") ?>
                </span>
                <span
                    class="text-[10px] md:text-xxs text-[#ffff] uppercase tracking-[0.2em] font-bold text-[#075939]/70">Rating
                    Google</span>
            </div>

        </div>
    </div>
</section>

<section id="story" class="pt-30 pb-3 bg-[#FFF9F2]">
    <div class="container mx-auto px-4 md:px-12">
        <div class="text-center mb-30">
            <h2 class="text-4xl md:text-6xl font-black text-[#BA290D] uppercase tracking-tighter mb-4">So, Why Our
                Kitchen?</h2>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <?php 
            // Ambil data fitur dari database, atau gunakan default jika kosong
            $features = isset($settings['about_features']) ? json_decode($settings['about_features'], true) : []; 
            if(empty($features)) {
                // Default fallback jika admin belum pernah menyeting
                $features = [
                    ['title' => 'Dibuat dengan Hati', 'desc' => 'Setiap hidangan disiapkan secara manual dengan penuh cinta.'],
                    ['title' => 'Bahan Fresh', 'desc' => 'Kami menggunakan 100% bahan segar dari petani lokal.'],
                    ['title' => 'Pelayanan Cepat', 'desc' => 'Hidangan tiba dalam waktu kurang dari 20 menit.'],
                    ['title' => 'Higienis & Aman', 'desc' => 'Standar kebersihan yang ketat untuk menjamin keamanan.']
                ];
            }

            // Kumpulan 4 Icon SVG yang Anda miliki
            $svgIcons = [
                '<svg class="w-16 h-16 text-[#BA290D]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>',
                '<svg class="w-16 h-16 text-[#BA290D]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364-6.364l-.707.707M6.343 17.657l-.707.707m12.728 0l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707-.707"></path></svg>',
                '<svg class="w-16 h-16 text-[#BA290D]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>',
                '<svg class="w-16 h-16 text-[#BA290D]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path></svg>'
            ];

            foreach($features as $index => $feat):
                // Gunakan SVG berdasarkan urutan (kalau lebih dari 4, akan mengulang dari 0)
                $icon = $svgIcons[$index % 4];
            ?>
            <div class="flex flex-col items-center text-center group">
                <div class="mb-6 transform group-hover:scale-110 transition-transform">
                    <?= $icon ?>
                </div>
                <h3 class="text-lg font-black text-[#075939] uppercase mb-3 tracking-wide"><?= esc($feat['title']) ?></h3>
                <p class="text-gray-600 text-sm leading-relaxed"><?= esc($feat['desc']) ?></p>
            </div>
            <?php endforeach; ?>
        </div>

        <div class="mt-20 grid grid-cols-2 md:grid-cols-4 gap-0 border-t-2 border-[#BA290D]" id="tab-navigation">
            <button data-target="story"
                class="tab-btn py-6 font-black uppercase tracking-widest text-sm bg-[#BA290D] text-white transition-colors">Our
                Story</button>
            <button data-target="mission"
                class="tab-btn py-6 font-black uppercase tracking-widest text-sm text-[#BA290D] border-x border-[#BA290D] hover:bg-[#BA290D] hover:text-white transition-colors bg-transparent">Our
                Mission</button>
            <button data-target="reviews"
                class="tab-btn py-6 font-black uppercase tracking-widest text-sm text-[#BA290D] border-r border-[#BA290D] hover:bg-[#BA290D] hover:text-white transition-colors bg-transparent">Whats
                People Says</button>
            <button data-target="faq"
                class="tab-btn py-6 font-black uppercase tracking-widest text-sm text-[#BA290D] hover:bg-[#BA290D] hover:text-white transition-colors bg-transparent">FAQ</button>
        </div>
    </div>
</section>

<section id="content-story" class="tab-content py-20 bg-white overflow-hidden block">
    <div class="container mx-auto px-4 md:px-12">
        <div class="flex flex-col md:flex-row items-center gap-12">

            <div class="w-full md:w-1/2 relative">
                <div class="absolute -top-4 -left-4 w-24 h-24 bg-[#BA290D]/10 rounded-full blur-2xl"></div>
                <div
                    class="absolute -bottom-6 -right-6 w-full h-full border-2 border-[#BA290D] rounded-2xl translate-x-4 translate-y-4 -z-10">
                </div>

                <div class="rounded-2xl overflow-hidden shadow-2xl ring-8 ring-white">
                    <img src="<?= !empty($settings['about_story_img']) ? base_url('uploads/about/' . $settings['about_story_img']) : base_url('assets/img/gb_others/abt.jpg') ?>"
                        alt="About Our Restaurant"
                        class="w-full h-[400px] object-cover hover:scale-105 transition-transform duration-500">
                </div>

                <div
                    class="absolute -bottom-4 -left-4 bg-[#075939] text-white p-6 rounded-xl shadow-xl hidden md:block">
                    <span
                        class="block text-3xl font-bold italic"><?= esc($settings['about_story_years'] ?? "10+") ?></span>
                    <span class="text-xs uppercase tracking-widest font-medium">Years</span>
                </div>
            </div>

            <div class="w-full md:w-1/2 flex flex-col gap-6">
                <div>
                    <h4 class="text-[#BA290D] font-bold tracking-[0.2em] uppercase text-sm mb-2">Our Story</h4>
                    <h2
                        class="text-4xl md:text-5xl font-extrabold text-[#075939] leading-tight uppercase tracking-tight">
                        <?= esc($settings['about_story_title'] ?? "Authentic Taste, Modern Touch.") ?>
                    </h2>
                </div>

                <div class="space-y-4 text-gray-600 leading-relaxed">
                    <p>
                        <?= nl2br(esc($settings['about_story_text'] ?? "Berawal dari kecintaan kami terhadap kuliner otentik, kami hadir untuk menyajikan hidangan dengan cita rasa terbaik...")) ?>
                    </p>
                </div>
            </div>

        </div>
    </div>
</section>

<section id="content-mission" class="tab-content hidden py-20 bg-white border-t border-gray-100">
    <div class="container mx-auto px-4 md:px-12">
        <div class="text-center mb-16">
            <h4 class="text-[#BA290D] font-bold tracking-[0.2em] uppercase text-sm mb-2">The Core of Our Kitchen</h4>
            <h2 class="text-4xl md:text-5xl font-black text-[#075939] uppercase tracking-tighter">Visi & Misi Kami</h2>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12">

            <div
                class="bg-[#FFF9F2] p-10 rounded-3xl shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-[#BA290D]/10 relative overflow-hidden group hover:-translate-y-2 transition-transform duration-300">
                <div class="flex items-center gap-5 mb-6">
                    <div
                        class="w-16 h-16 rounded-2xl bg-[#BA290D] text-white flex items-center justify-center rotate-3 group-hover:rotate-0 transition-transform duration-300">
                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        </svg>
                    </div>
                    <h3 class="text-3xl font-black text-[#075939] uppercase tracking-tight">Visi</h3>
                </div>
                <p class="text-gray-600 leading-relaxed text-lg font-medium">
                    <?= nl2br(esc($settings['about_visi'] ?? "Menjadi destinasi kuliner pilihan utama...")) ?>
                </p>
            </div>

            <div
                class="bg-white p-10 rounded-3xl shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-[#075939]/10 relative overflow-hidden group hover:-translate-y-2 transition-transform duration-300">
                <div class="flex items-center gap-5 mb-6">
                    <div
                        class="w-16 h-16 rounded-2xl bg-[#075939] text-white flex items-center justify-center -rotate-3 group-hover:rotate-0 transition-transform duration-300">
                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                        </svg>
                    </div>
                    <h3 class="text-3xl font-black text-[#BA290D] uppercase tracking-tight">Misi</h3>
                </div>

                <ul class="text-gray-600 leading-relaxed text-lg space-y-4 font-medium">
                    <?php
                    $misiText = $settings['about_misi'] ?? "Menyajikan bahan segar.\nPelayanan cepat.\nMendukung petani lokal.";
                    $misiArray = explode("\n", trim($misiText));
                    foreach ($misiArray as $misi):
                        if (trim($misi) !== ''):
                            ?>
                            <li class="flex items-start gap-3">
                                <svg class="w-6 h-6 text-[#BA290D] shrink-0 mt-1" fill="none" stroke="currentColor"
                                    viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7">
                                    </path>
                                </svg>
                                <?= esc(trim($misi)) ?>
                            </li>
                        <?php
                        endif;
                    endforeach;
                    ?>
                </ul>
            </div>

        </div>
    </div>
</section>

<section id="content-reviews" class="tab-content hidden py-20 bg-[#FFF9F2]">
    <div class="container mx-auto px-4 md:px-12">
        <div class="text-center mb-12">
            <h4 class="text-[#BA290D] font-bold tracking-[0.2em] uppercase text-sm mb-2">Testimonials</h4>
            <h2 class="text-4xl md:text-5xl font-black text-[#075939] uppercase tracking-tighter">What People Say</h2>
        </div>
        
        <div class="max-w-5xl mx-auto bg-white p-4 md:p-8 rounded-3xl shadow-sm border border-[#BA290D]/5">
            <script src="https://elfsightcdn.com/platform.js" async></script>
            <div class="elfsight-app-f882b04d-9006-42b0-a68e-58f3cb5b63ff" data-elfsight-app-lazy></div>
        </div>
    </div>
</section>

<section id="content-faq" class="tab-content hidden py-24 bg-white">
    <div class="container mx-auto px-4 max-w-3xl text-center">
        <h2 class="text-5xl font-black text-[#075939] uppercase tracking-tighter mb-4">FAQs</h2>
        <p class="text-gray-500 mb-12">Dari bahan hingga pengiriman, ini adalah hal yang paling sering ditanyakan pelanggan kami.</p>

        <div class="text-left space-y-4">
            <?php 
            $faqs = isset($settings['about_faqs']) ? json_decode($settings['about_faqs'], true) : []; 
            if(empty($faqs)) {
                // Fallback default jika kosong
                $faqs = [
                    ['question' => 'Seberapa segar bahan yang digunakan?', 'answer' => 'Sangat segar! Semua menu dimasak di hari yang sama.'],
                    ['question' => 'Berapa lama waktu pengirimannya?', 'answer' => 'Waktu pengiriman standar kami adalah 30-45 menit.']
                ];
            }

            foreach($faqs as $index => $faq):
            ?>
            <div class="border-b border-gray-200 pb-4">
                <button class="faq-btn w-full flex justify-between items-center py-4 text-left group">
                    <span class="text-lg font-black text-[#075939] uppercase tracking-tight group-hover:text-[#BA290D] transition-colors">
                        <?= esc($faq['question']) ?>
                    </span>
                    <span class="faq-icon w-8 h-8 rounded-full border border-[#BA290D] text-[#BA290D] flex items-center justify-center font-bold transition-all">+</span>
                </button>
                <div class="faq-answer text-gray-600 leading-relaxed text-sm hidden mt-2">
                    <?= nl2br(esc($faq['answer'])) ?>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>


<!--<section class="py-16 bg-gray-50">-->
<!--    <div class="container mx-auto px-4 md:px-12 text-center">-->
<!--        <h2 class="text-3xl font-black text-[#075939] uppercase mb-8">Kunjungi Dapur Kami</h2>-->
<!--        <div class="rounded-2xl overflow-hidden shadow-lg border-4 border-white">-->
<!--            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3952.6653677333984!2d110.3824258!3d-7.8251978!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e7a570891927ad7%3A0x5ed7027c74bad360!2sMie%20Nyinyir%20Sorogenen!5e0!3m2!1sid!2sid!4v1777190942427!5m2!1sid!2sid" -->
<!--                class="w-full h-[450px]" -->
<!--                style="border:0;" -->
<!--                allowfullscreen="" -->
<!--                loading="lazy" -->
<!--                referrerpolicy="no-referrer-when-downgrade">-->
<!--            </iframe>-->
<!--        </div>-->
<!--    </div>-->
<!--</section>-->
<?= $this->endSection(); ?>