@extends('layouts.public')

@section('content')

    <!-- === HERO SECTION (REVISED V3 - MOBILE CENTERED) === -->
	{{-- PERBAIKAN: Menyesuaikan tinggi dan padding untuk meniru efek "zoom out 80%" --}}
	<section id="hero" class="relative bg-gray-200 min-h-screen flex items-center justify-center md:justify-start">
		<!-- Background Image -->
		<div class="absolute inset-0 z-0">
			<img src="{{ isset($images['hero_image']) ? asset('storage/' . $images['hero_image']->path) : 'https://placehold.co/1920x1080/F9F7FB/333333?text=Background' }}" 
				 alt="{{ $images['hero_image']->alt_text ?? 'Hero Background' }}" 
				 class="w-full h-full object-cover">
		</div>
		
		<!-- Content Container -->
		{{-- PERBAIKAN: Menggunakan padding vertikal responsif, lebih kecil di mobile (py-16) dan lebih besar di desktop (md:py-24) --}}
		<div class="relative z-10 container mx-auto px-6 py-12 md:py-20">
			<!-- Text Content with responsive adjustments -->
			<div class="w-full max-w-md md:max-w-lg lg:max-w-xl bg-amartha-dark/80 backdrop-blur-sm text-white p-8 md:p-12 rounded-2xl shadow-2xl mx-auto md:mx-0">
				<h1 class="text-3xl md:text-4xl lg:text-5xl font-extrabold leading-tight mb-4 text-center md:text-left">{{ $texts['hero_title'] ?? '' }}</h1>
				<p class="text-md md:text-lg text-gray-300 mb-8 text-center md:text-left">{{ $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 smooth-transition inline-block w-full md:w-auto text-center">{{ $texts['hero_cta'] ?? '' }}</a>
				 <div class="mt-8">
					<p class="mb-4 text-gray-300 font-semibold text-center md:text-left">{{ $texts['hero_download_title'] ?? '' }}</p>
					<div class="flex items-center space-x-4 justify-center md:justify-start">
						<a href="https://play.google.com/store/apps/details?id=com.amarthaplus.amarthabeyond&hl=id" target="_blank" class="w-36 hover:opacity-90 smooth-transition">
							<img alt="Download on Google Play" src="https://amartha.com/assets/illustration/logo-google.svg">
						</a>
						<a href="https://apps.apple.com/id/app/amarthafin/id6446885044?l=id" target="_blank" class="w-36 hover:opacity-90 smooth-transition">
							<img alt="Download on the App Store" src="https://amartha.com/assets/illustration/logo-appstore.svg">
						</a>
					</div>
				</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">
						<div class="flex items-start space-x-4 mb-4">
							<!-- UBAH BAGIAN INI -->
							<img src="{{ isset($images['produk_1_icon']) ? asset('storage/' . $images['produk_1_icon']->path) : 'https://placehold.co/64x64/F9F7FB/4D2A86?text=Icon' }}" class="h-12 w-12">
							<!-- AKHIR PERUBAHAN -->
							<div>
								<h3 class="font-bold text-xl">{{ $texts['produk_1_title'] ?? '' }}</h3>
								<p class="text-amartha-grey">{{ $texts['produk_1_desc'] ?? '' }}</p>
							</div>
						</div>
						<div class="border-t border-slate-200 my-6"></div>
						<div class="space-y-4">{!! $texts['produk_1_list'] ?? '' !!}</div>
					</div>
					<!-- Konten Produk 2 -->
					<div id="product-content-paylater" class="product-content-panel hidden bg-amartha-bg p-8 rounded-3xl">
						 <div class="flex items-start space-x-4 mb-4">
							<!-- UBAH BAGIAN INI -->
							<img src="{{ isset($images['produk_2_icon']) ? asset('storage/' . $images['produk_2_icon']->path) : 'https://placehold.co/64x64/F9F7FB/4D2A86?text=Icon' }}" class="h-12 w-12">
							<!-- AKHIR PERUBAHAN -->
							<div>
								<h3 class="font-bold text-xl">{{ $texts['produk_2_title'] ?? '' }}</h3>
								<p class="text-amartha-grey">{{ $texts['produk_2_desc'] ?? '' }}</p>
							</div>
						</div>
						<div class="border-t border-slate-200 my-6"></div>
						<div class="space-y-4">{!! $texts['produk_2_list'] ?? '' !!}</div>
					</div>
					<!-- Konten Produk 3 -->
					<div id="product-content-agen" class="product-content-panel hidden bg-amartha-bg p-8 rounded-3xl">
						 <div class="flex items-start space-x-4 mb-4">
							<!-- UBAH BAGIAN INI -->
							<img src="{{ isset($images['produk_3_icon']) ? asset('storage/' . $images['produk_3_icon']->path) : 'https://placehold.co/64x64/F9F7FB/4D2A86?text=Icon' }}" class="h-12 w-12">
							<!-- AKHIR PERUBAHAN -->
							<div>
								<h3 class="font-bold text-xl">{{ $texts['produk_3_title'] ?? '' }}</h3>
								<p class="text-amartha-grey">{{ $texts['produk_3_desc'] ?? '' }}</p>
							</div>
						</div>
						<div class="border-t border-slate-200 my-6"></div>
						<div class="space-y-4">{!! $texts['produk_3_list'] ?? '' !!}</div>
					</div>
                </div>
             </div>
        </div>
    </section>

	
	<!-- === COMPANY OVERVIEW SECTION === -->
	<section id="tentang" class="py-20 bg-amartha-bg">
		<div class="container mx-auto px-6">
			<div class="relative">
				<img src="{{ isset($images['about_us_background']) ? asset('storage/' . $images['about_us_background']->path) : 'https://technopartner.id/img/amartha/1200x500-latarbelakangkami.gif' }}" class="w-full h-[500px] object-cover rounded-3xl">
				<div class="absolute inset-0 bg-black/30 rounded-3xl"></div>
				
				<!-- Mobile-specific improvements while keeping desktop intact -->
				<div class="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 w-11/12 max-w-2xl 
							md:left-16 md:translate-x-0 
							bg-white/90 backdrop-blur-sm p-6 md:p-8 rounded-2xl shadow-lg
							min-h-fit">
					<div class="border-l-2 border-amartha-purple pl-4">
						<h2 class="text-3xl font-bold text-amartha-purple mb-4">
							{{ $texts['tentang_awf_title'] ?? '' }}
						</h2>
						<p class="text-amartha-grey leading-relaxed">
							{{ $texts['tentang_awf_desc'] ?? '' }}
						</p>
					</div>
				</div>
			</div>
		</div>
	</section>
	
	
    
    <!-- === HOLDING OVERVIEW SECTION === -->
	<section id="holding-overview" class="py-20 bg-white">
		<div class="container mx-auto px-6">
			{{-- PERBAIKAN: Mengubah 'grid' menjadi 'flex' dengan 'flex-col' untuk mobile dan 'md:flex-row' untuk desktop --}}
			<div class="flex flex-col md:flex-row gap-12 items-center">
				 {{-- PERBAIKAN: Menghapus 'md:order-2' karena urutan flex sudah benar secara default --}}
				 <div class="w-full md:w-1/2">
					<img src="{{ isset($images['holding_overview_image']) ? asset('storage/' . $images['holding_overview_image']->path) : 'https://technopartner.id/img/amartha/800x600-tentang-amartha.gif' }}" alt="{{ $images['holding_overview_image']->alt_text ?? 'Tentang Amartha Group' }}" class="rounded-lg shadow-lg w-full">
				</div>
				{{-- PERBAIKAN: Menghapus 'md:order-1' dan menambahkan lebar 'w-full md:w-1/2' --}}
				<div class="w-full md:w-1/2">
					<h2 class="text-3xl font-bold text-amartha-purple mb-4">{{ $texts['tentang_holding_title'] ?? '' }}</h2>
					<p class="text-amartha-grey leading-relaxed">{{ $texts['tentang_holding_desc'] ?? '' }}</p>
				</div>
			</div>
		</div>
	</section>

	<!-- === KEY MANAGEMENT SECTION (REVISED WITH MODAL FIX & NEW DESIGN) === -->
	<section 
		id="struktur" 
		class="py-20 bg-amartha-bg" 
		x-data="{ 
			open: false, 
			selectedId: null,
			managements: {{ json_encode($managements, JSON_HEX_QUOT | JSON_HEX_APOS) }},
			get selectedPerson() {
				if (!this.selectedId) return null;
				return this.managements.find(m => m.id === this.selectedId);
			}
		}"
	>
		<div class="container mx-auto px-6">
			<div class="text-center mb-12">
				<h2 class="text-3xl font-bold text-amartha-purple">{{ $texts['struktur_title'] ?? 'Key Management' }}</h2>
			</div>
			
			@if($managements->isNotEmpty())
				<div class="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8">
					@foreach ($managements as $person)
						<div 
							@click="open = true; selectedId = {{ $person->id }}"
							class="cursor-pointer group text-center"
						>
							<div class="relative w-full aspect-[3/4] mb-4 rounded-lg shadow-lg overflow-hidden transition-transform duration-300 group-hover:scale-105">
								<img src="{{ asset('storage/' . $person->photo_path) }}" 
									 onerror="this.onerror=null;this.src='https://placehold.co/300x400/F9F7FB/333333?text=Foto';"
									 alt="Foto {{ $person->name }}" 
									 {{-- PERBAIKAN: Mengubah posisi crop ke atas --}}
									 class="w-full h-full object-cover object-top">
							</div>
							<h3 class="text-md font-bold text-amartha-purple">{{ $person->name }}</h3>
							<p class="text-sm text-amartha-grey">
								{{ app()->getLocale() == 'id' ? $person->position_id : $person->position_en }}
							</p>
						</div>
					@endforeach
				</div>
			@else
				<p class="text-center text-amartha-grey">Data manajemen akan segera tersedia.</p>
			@endif
		</div>

		<!-- Modal Pop-up (Desain Baru & Fungsionalitas Ditingkatkan) -->
		<template x-if="open && selectedPerson">
			<div 
				 x-transition:enter="ease-out duration-300"
				 x-transition:enter-start="opacity-0"
				 x-transition:enter-end="opacity-100"
				 x-transition:leave="ease-in duration-200"
				 x-transition:leave-start="opacity-100"
				 x-transition:leave-end="opacity-0"
				 class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-60 backdrop-blur-sm p-4"
				 @click.self="open = false"
				 >
				<div 
					x-show="open"
					x-transition:enter="ease-out duration-300"
					x-transition:enter-start="opacity-0 scale-95"
					x-transition:enter-end="opacity-100 scale-100"
					class="relative bg-white rounded-lg shadow-xl w-full max-w-4xl flex flex-col md:flex-row overflow-hidden"
					style="max-height: 90vh;"
				>
					{{-- Image Column --}}
					<div class="w-full md:w-2/5 flex-shrink-0 bg-gray-200">
						 <img :src="'{{ asset('storage') }}/' + selectedPerson.photo_path" 
							  :alt="'Foto ' + selectedPerson.name"
							  {{-- PERBAIKAN: Mengubah posisi crop ke atas --}}
							  class="w-full h-64 md:h-full object-cover object-top">
					</div>

					{{-- Details Column --}}
					<div class="relative w-full md:w-3/5 p-8 lg:p-12 flex-grow overflow-y-auto">
						{{-- Close Button --}}
						<button @click="open = false" class="absolute top-4 right-4 text-gray-400 hover:text-amartha-purple text-2xl z-10">
							<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
						</button>
						
						<div class="border-l-4 border-amartha-purple pl-6">
							<h3 class="text-3xl font-bold text-amartha-purple" x-text="selectedPerson.name"></h3>
							<p class="text-md text-amartha-grey font-semibold mb-6" x-text="app.getLocale() == 'id' ? selectedPerson.position_id : selectedPerson.position_en"></p>
						</div>
						
						{{-- Description --}}
						<div class="prose max-w-none text-sm text-amartha-dark leading-relaxed mt-6" x-html="app.getLocale() == 'id' ? selectedPerson.description_id : selectedPerson.description_en"></div>
					</div>
				</div>
			</div>
		</template>
	</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 yang ditambahkan.' }}</p>
                @endforelse
            </div>
        </div>
    </section>

    <!-- === KEUNGGULAN (USP) SECTION === -->
    <section id="keunggulan" class="py-20 bg-amartha-bg">
		<div class="container mx-auto px-6">
			<div class="text-center mb-12">
				<h2 class="text-3xl font-bold text-amartha-purple">{{ $texts['usp_title'] ?? '' }}</h2>
			</div>
			<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
				<!-- USP Card 1 -->
				<div class="bg-white p-6 rounded-3xl shadow-lg text-center">
					<div class="mb-4 inline-block p-4 bg-purple-100 rounded-2xl">
						<img src="{{ isset($images['usp_1_icon']) ? asset('storage/' . $images['usp_1_icon']->path) : 'https://placehold.co/48x48/E9D5FF/4D2A86?text=Icon' }}" class="w-12 h-12">
					</div>
					<h3 class="font-bold text-lg mb-2">{{ $texts['usp_1_title'] ?? '' }}</h3>
					<p class="text-amartha-grey text-sm">{{ $texts['usp_1_desc'] ?? '' }}</p>
				</div>
				 <!-- USP Card 2 -->
				<div class="bg-white p-6 rounded-3xl shadow-lg text-center">
					<div class="mb-4 inline-block p-4 bg-purple-100 rounded-2xl">
						<img src="{{ isset($images['usp_2_icon']) ? asset('storage/' . $images['usp_2_icon']->path) : 'https://placehold.co/48x48/E9D5FF/4D2A86?text=Icon' }}" class="w-12 h-12">
					</div>
					<h3 class="font-bold text-lg mb-2">{{ $texts['usp_2_title'] ?? '' }}</h3>
					<p class="text-amartha-grey text-sm">{{ $texts['usp_2_desc'] ?? '' }}</p>
				</div>
				 <!-- USP Card 3 -->
				<div class="bg-white p-6 rounded-3xl shadow-lg text-center">
					<div class="mb-4 inline-block p-4 bg-purple-100 rounded-2xl">
					   <img src="{{ isset($images['usp_3_icon']) ? asset('storage/' . $images['usp_3_icon']->path) : 'https://placehold.co/48x48/E9D5FF/4D2A86?text=Icon' }}" class="w-12 h-12">
					</div>
					<h3 class="font-bold text-lg mb-2">{{ $texts['usp_3_title'] ?? '' }}</h3>
					<p class="text-amartha-grey text-sm">{{ $texts['usp_3_desc'] ?? '' }}</p>
				</div>
				 <!-- USP Card 4 -->
				<div class="bg-white p-6 rounded-3xl shadow-lg text-center">
					<div class="mb-4 inline-block p-4 bg-purple-100 rounded-2xl">
						<img src="{{ isset($images['usp_4_icon']) ? asset('storage/' . $images['usp_4_icon']->path) : 'https://placehold.co/48x48/E9D5FF/4D2A86?text=Icon' }}" class="w-12 h-12">
					</div>
					<h3 class="font-bold text-lg mb-2">{{ $texts['usp_4_title'] ?? '' }}</h3>
					<p class="text-amartha-grey text-sm">{{ $texts['usp_4_desc'] ?? '' }}</p>
				</div>
			</div>
		</div>
	</section>

    <!-- === PROSES SECTION === -->
    <section id="proses" class="py-20 bg-white">
        <div class="container mx-auto px-6">
            <div class="grid md:grid-cols-2 gap-12 items-center">
                <div class="flex justify-center">
                    <img src="{{ isset($images['proses_aplikasi_image']) ? asset('storage/' . $images['proses_aplikasi_image']->path) : 'https://technopartner.id/img/amartha/aplikasi.png' }}" alt="{{ $images['proses_aplikasi_image']->alt_text ?? 'Tampilan Aplikasi AFIN' }}" class="max-w-xs w-full h-auto rounded-3xl">
                </div>
                <div>
                    <h2 class="text-3xl font-bold text-amartha-purple mb-8">{{ $texts['proses_title'] ?? '' }}</h2>
                    <div class="space-y-6">
                        <div>
                            <h3 class="font-bold text-xl mb-2">{{ $texts['proses_1_title'] ?? '' }}</h3>
                            <p class="text-amartha-grey">{{ $texts['proses_1_desc'] ?? '' }}</p>
                        </div>
                        <div>
                            <h3 class="font-bold text-xl mb-2">{{ $texts['proses_2_title'] ?? '' }}</h3>
                            <p class="text-amartha-grey">{{ $texts['proses_2_desc'] ?? '' }}</p>
                        </div>
                         <div>
                            <h3 class="font-bold text-xl mb-2">{{ $texts['proses_3_title'] ?? '' }}</h3>
                            <p class="text-amartha-grey">{{ $texts['proses_3_desc'] ?? '' }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- === KOMITMEN SECTION === -->
    <section id="komitmen" class="py-20 bg-amartha-bg">
		<div class="container mx-auto px-6">
			<div class="text-center mb-12">
				<h2 class="text-3xl font-bold text-amartha-purple">{{ $texts['komitmen_title'] ?? '' }}</h2>
			</div>
			<div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-10">
				<div class="flex items-start space-x-4 p-4">
					<div class="flex-shrink-0">
						<div class="flex items-center justify-center h-12 w-12 rounded-full bg-purple-100 text-amartha-purple">
							<img src="{{ isset($images['komitmen_1_icon']) ? asset('storage/' . $images['komitmen_1_icon']->path) : 'https://placehold.co/48x48/E9D5FF/4D2A86?text=Icon' }}" class="h-12 w-12">
						</div>
					</div>
					<div>
						<p class="text-amartha-grey">{{ $texts['komitmen_1_desc'] ?? '' }}</p>
					</div>
				</div>
				<div class="flex items-start space-x-4 p-4">
					<div class="flex-shrink-0">
						<div class="flex items-center justify-center h-12 w-12 rounded-full bg-purple-100 text-amartha-purple">
							<img src="{{ isset($images['komitmen_2_icon']) ? asset('storage/' . $images['komitmen_2_icon']->path) : 'https://placehold.co/48x48/E9D5FF/4D2A86?text=Icon' }}" class="h-12 w-12">
						</div>
					</div>
					<div>
						<p class="text-amartha-grey">{{ $texts['komitmen_2_desc'] ?? '' }}</p>
					</div>
				</div>
			</div>
		</div>
	</section>

	<!-- === KONTAK SECTION (AJAX FORM) === -->
    <section id="kontak" class="py-20 bg-amartha-bg" x-data="contactForm()">
        <div class="container mx-auto px-6">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-amartha-purple">{{ $texts['kontak_title'] ?? 'Kontak' }}</h2>
            </div>

            <div x-show="successMessage" x-transition class="max-w-4xl mx-auto text-center" style="display: none;">
                <div class="mb-4 p-6 bg-green-100 text-green-800 rounded-lg shadow-md inline-block">
                    <h3 class="text-lg font-semibold mb-2">Terima Kasih!</h3>
                    <p x-text="successMessage"></p>
                    <button @click="resetForm" class="mt-4 inline-block text-sm text-amartha-purple hover:underline">Kirim pesan lagi.</button>
                </div>
            </div>

            <form @submit.prevent="submitForm" x-show="!successMessage" class="max-w-4xl mx-auto" novalidate>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div>
                        <input type="text" name="name" placeholder="Nama" x-model="formData.name" :class="{ 'border-red-500': errors.name, 'border-gray-300': !errors.name }" class="w-full p-3 border rounded-lg" required>
                        <p x-show="errors.name" x-text="errors.name ? errors.name[0] : ''" class="text-red-500 text-xs mt-1"></p>
                    </div>
                    <div>
                        <input type="email" name="email" placeholder="Email" x-model="formData.email" :class="{ 'border-red-500': errors.email, 'border-gray-300': !errors.email }" class="w-full p-3 border rounded-lg" required>
                        <p x-show="errors.email" x-text="errors.email ? errors.email[0] : ''" class="text-red-500 text-xs mt-1"></p>
                    </div>
                </div>

                <div class="mb-6">
                    <input type="tel" name="phone_number" placeholder="Nomor Telepon (Opsional)" x-model="formData.phone_number" :class="{ 'border-red-500': errors.phone_number, 'border-gray-300': !errors.phone_number }" class="w-full p-3 border rounded-lg">
                    <p x-show="errors.phone_number" x-text="errors.phone_number ? errors.phone_number[0] : ''" class="text-red-500 text-xs mt-1"></p>
                </div>

                <div class="mb-6">
                    <input type="text" name="subject" placeholder="Subjek" x-model="formData.subject" :class="{ 'border-red-500': errors.subject, 'border-gray-300': !errors.subject }" class="w-full p-3 border rounded-lg" required>
                    <p x-show="errors.subject" x-text="errors.subject ? errors.subject[0] : ''" class="text-red-500 text-xs mt-1"></p>
                </div>
                <div class="mb-6">
                    <textarea name="message" placeholder="Pesan" rows="6" x-model="formData.message" :class="{ 'border-red-500': errors.message, 'border-gray-300': !errors.message }" class="w-full p-3 border rounded-lg" required></textarea>
                    <p x-show="errors.message" x-text="errors.message ? errors.message[0] : ''" class="text-red-500 text-xs mt-1"></p>
                </div>
                
                {{-- Error messages for captcha and general errors --}}
                <p x-show="errors['g-recaptcha-response']" x-text="errors['g-recaptcha-response'] ? errors['g-recaptcha-response'][0] : ''" class="text-red-500 text-xs mt-1 text-center mb-4"></p>
                <p x-show="errors.general" x-text="errors.general" class="text-red-500 text-xs mt-1 text-center mb-4"></p>

                <div class="text-center">
                    <button type="submit" :disabled="submitting" class="bg-amartha-purple text-white font-bold py-3 px-8 rounded-full hover:bg-amartha-dark-purple transition duration-300 disabled:opacity-50">
                        <span x-show="!submitting">Kirim Pesan</span>
                        <span x-show="submitting" style="display: none;">
                            <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white inline-block" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                            </svg>
                            Mengirim...
                        </span>
                    </button>
                </div>
            </form>
        </div>
    </section>

    {{-- Load reCAPTCHA API --}}
    <script src="https://www.google.com/recaptcha/api.js?render={{ config('services.recaptcha.site_key') }}"></script>
    <script>
        function contactForm() {
            return {
                formData: { name: '', email: '', phone_number: '', subject: '', message: '' },
                submitting: false,
                successMessage: '',
                errors: {},
                resetForm() {
                    this.formData = { name: '', email: '', phone_number: '', subject: '', message: '' };
                    this.successMessage = '';
                    this.errors = {};
                },
                submitForm() {
                    this.submitting = true;
                    this.errors = {};
                    this.successMessage = '';

                    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

                    // --- FIX: Re-integrated reCAPTCHA v3 execution ---
                    grecaptcha.ready(() => {
                        grecaptcha.execute('{{ config('services.recaptcha.site_key') }}', { action: 'contact_form' }).then((token) => {
                            
                            // Combine form data with the reCAPTCHA token
                            const payload = {
                                ...this.formData,
                                'g-recaptcha-response': token
                            };

                            fetch('{{ route('contact.store') }}', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-Requested-With': 'XMLHttpRequest',
                                    'Accept': 'application/json',
                                    'X-CSRF-TOKEN': csrfToken
                                },
                                body: JSON.stringify(payload) // Send the combined payload
                            })
                            .then(response => {
                                if (!response.ok) {
                                    if (response.status === 422) {
                                        return response.json().then(data => {
                                            this.errors = data.errors;
                                            throw new Error('Validation failed');
                                        });
                                    }
                                    throw new Error('Server error: ' + response.status);
                                }
                                return response.json();
                            })
                            .then(data => {
                                this.successMessage = data.message;
                                this.formData = { name: '', email: '', phone_number: '', subject: '', message: '' }; // Reset form on success
                            })
                            .catch(error => {
                                console.error('Submission error:', error);
                                if (error.message !== 'Validation failed') {
                                   this.errors.general = 'Terjadi kesalahan saat mengirim pesan. Silakan coba lagi.';
                                }
                            })
                            .finally(() => {
                                this.submitting = false;
                            });
                        });
                    });
                }
            }
        }
    </script>

@endsection