@extends('layouts.public')

@section('content')
    <!-- === HERO SECTION === -->
    <section id="hero" class="bg-amartha-bg pt-24 md:pt-32">
        <div class="container mx-auto px-6">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 text-center md:text-left mb-10 md:mb-0">
                    <h1 class="text-4xl lg:text-5xl font-extrabold text-amartha-purple leading-tight mb-4">{{ $texts['hero_title'] ?? '' }}</h1>
                    <p class="text-lg text-amartha-grey max-w-md mx-auto md:mx-0 mb-8">{{ $texts['hero_subtitle'] ?? '' }}</p>
                    <a href="#kontak" class="bg-amartha-purple text-white px-8 py-3 rounded-lg font-semibold hover:bg-amartha-purple-light">{{ $texts['hero_cta'] ?? '' }}</a>
                     <div class="mt-8">
                        <p class="mb-4 text-amartha-grey font-semibold">{{ $texts['hero_download_title'] ?? '' }}</p>
                        <!-- Link download bisa dibuat dinamis juga jika perlu -->
                    </div>
                </div>
                <div class="md:w-1/2">
                    <img src="{{ asset('storage/' . ($images['hero_image']->path ?? '')) }}" alt="Hero Image" class="w-full h-auto">
                </div>
            </div>
        </div>
    </section>

    <!-- === PRODUK SECTION === -->
    <section id="produk" class="py-20 bg-white">
        <div class="container mx-auto px-6">
             <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
                <div class="lg:col-span-1">
                    <h2 class="text-3xl font-bold mb-6">{{ $texts['produk_title'] ?? '' }}</h2>
                    <div id="product-tabs" class="space-y-4">
                        <button onclick="switchProductTab('lending')" data-tab="lending" class="product-tab active w-full text-left p-4 text-lg text-amartha-grey">{{ $texts['produk_tab_1'] ?? '' }}</button>
                        <button onclick="switchProductTab('paylater')" data-tab="paylater" class="product-tab w-full text-left p-4 text-lg text-amartha-grey">{{ $texts['produk_tab_2'] ?? '' }}</button>
                        <button onclick="switchProductTab('agen')" data-tab="agen" class="product-tab w-full text-left p-4 text-lg text-amartha-grey">{{ $texts['produk_tab_3'] ?? '' }}</button>
                    </div>
                </div>
                <div class="lg:col-span-2 relative">
                    <!-- Konten Produk 1 -->
                    <div id="product-content-lending" class="product-content-panel bg-amartha-bg p-8 rounded-3xl">
                        <h3 class="font-bold text-xl">{{ $texts['produk_1_title'] ?? '' }}</h3>
                        <p class="text-amartha-grey">{{ $texts['produk_1_desc'] ?? '' }}</p>
                        <div class="border-t border-slate-200 my-6"></div>
                        <div class="space-y-4">{!! $texts['produk_1_list'] ?? '' !!}</div>
                    </div>
                    <!-- Tambahkan panel produk lainnya dengan pola yang sama -->
                </div>
             </div>
        </div>
    </section>

    <!-- === PENGHARGAAN SECTION === -->
    <section id="penghargaan" class="py-20 bg-white overflow-hidden">
        <div class="container mx-auto px-6">
            <div class="mb-12">
                <div class="inline-block border-l-4 border-amartha-purple pl-4">
                    <h2 class="text-3xl font-bold text-amartha-purple text-left">{{ $texts['penghargaan_title'] ?? '' }}</h2>
                </div>
            </div>
            <div class="horizontal-scroll flex items-center overflow-x-auto py-4 -mx-6 px-6 space-x-12">
                @forelse ($awards as $award)
                    <div class="flex-shrink-0">
                        <img src="{{ asset('storage/' . $award->image_path) }}" alt="{{ $award->title }}" class="h-14 md:h-16 transition-transform duration-300 hover:scale-110">
                    </div>
                @empty
                    <p class="text-amartha-grey">{{ $texts['penghargaan_empty'] ?? 'Belum ada penghargaan.' }}</p>
                @endforelse
            </div>
        </div>
    </section>

    <!-- ... (Sisa section lainnya diubah menjadi dinamis dengan pola yang sama) ... -->
@endsection