@extends('layouts.app')

@section('title', 'Home')

@section('content')
<!-- Hero Slider Section -->
<section id="home" class="relative min-h-[70vh] md:min-h-screen flex items-center justify-center overflow-hidden pt-16 md:pt-0">
    <!-- Background dengan pink gradient dan geometric pattern -->
    <div class="absolute inset-0 hero-gradient">
        <div class="absolute inset-0 opacity-30 geometric-pattern"></div>
        
        <!-- Wave Shape di bagian bawah -->
        <div class="absolute bottom-0 left-0 w-full">
            <svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 120L60 110C120 100 240 80 360 70C480 60 600 60 720 65C840 70 960 80 1080 85C1200 90 1320 90 1380 90L1440 90V120H1380C1320 120 1200 120 1080 120C960 120 840 120 720 120C600 120 480 120 360 120C240 120 120 120 60 120H0V120Z" fill="currentColor" class="text-gray-100 dark:text-gray-800"/>
            </svg>
        </div>
    </div>
    
    <!-- Slider Container -->
    <div class="relative z-10 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="slider-container overflow-hidden">
            <div class="slider-wrapper flex transition-transform duration-500 ease-in-out">
                <!-- Slide 1 -->
                <div class="slide min-w-full">
                    <div class="text-left animate-fadeInUp">
                        <p class="text-sm md:text-lg lg:text-xl font-medium text-white uppercase tracking-widest mb-3 md:mb-6">
                            {{ trans('messages.financial_advisory') }}
                        </p>
                        <h1 class="text-2xl md:text-4xl lg:text-5xl xl:text-6xl font-bold mb-4 md:mb-8 leading-tight text-white">
                            {{ trans('messages.hero_title') }}
                        </h1>
                        <p class="text-base md:text-lg lg:text-xl mb-6 md:mb-12 text-white opacity-90 max-w-3xl">
                            {{ trans('messages.hero_description') }}
                        </p>
                        <div class="text-left">
                            <a href="{{ route('services') }}" class="btn btn-white text-sm md:text-base animate-pulse">
                                {{ trans('messages.our_services') }}
                                <i class="fas fa-arrow-right ml-2"></i>
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- Slide 2 -->
                <div class="slide min-w-full">
                    <div class="text-left animate-fadeInUp">
                        <p class="text-sm md:text-lg lg:text-xl font-medium text-white uppercase tracking-widest mb-3 md:mb-6">
                            {{ trans('messages.investment_planning') }}
                        </p>
                        <h1 class="text-2xl md:text-4xl lg:text-5xl xl:text-6xl font-bold mb-4 md:mb-8 leading-tight text-white">
                            {{ trans('messages.slide2_title') }}
                        </h1>
                        <p class="text-base md:text-lg lg:text-xl mb-6 md:mb-12 text-white opacity-90 max-w-3xl">
                            {{ trans('messages.slide2_description') }}
                        </p>
                        <div class="text-left">
                            <a href="{{ route('services') }}" class="btn btn-white text-sm md:text-base animate-pulse">
                                {{ trans('messages.our_services') }}
                                <i class="fas fa-chart-line ml-2"></i>
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- Slide 3 -->
                <div class="slide min-w-full">
                    <div class="text-left animate-fadeInUp">
                        <p class="text-sm md:text-lg lg:text-xl font-medium text-white uppercase tracking-widest mb-3 md:mb-6">
                            {{ trans('messages.retirement_planning') }}
                        </p>
                        <h1 class="text-2xl md:text-4xl lg:text-5xl xl:text-6xl font-bold mb-4 md:mb-8 leading-tight text-white">
                            {{ trans('messages.slide3_title') }}
                        </h1>
                        <p class="text-base md:text-lg lg:text-xl mb-6 md:mb-12 text-white opacity-90 max-w-3xl">
                            {{ trans('messages.slide3_description') }}
                        </p>
                        <div class="text-left">
                            <a href="{{ route('services') }}" class="btn btn-white text-sm md:text-base animate-pulse">
                                {{ trans('messages.our_services') }}
                                <i class="fas fa-piggy-bank ml-2"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Slider Navigation -->
        <div class="flex justify-center mt-6 md:mt-8 space-x-2">
            <button class="slider-dot w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-75 transition-all duration-300 focus:outline-none" data-slide="0"></button>
            <button class="slider-dot w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-75 transition-all duration-300 focus:outline-none" data-slide="1"></button>
            <button class="slider-dot w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-75 transition-all duration-300 focus:outline-none" data-slide="2"></button>
        </div>
    </div>
    
    <!-- Scroll Indicator -->
    <div class="absolute bottom-6 md:bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
        <a href="#company-overview" class="text-white">
            <i class="fas fa-chevron-down text-xl md:text-2xl"></i>
        </a>
    </div>
</section>

<!-- Company Overview Section -->
<section id="company-overview" class="company-overview py-12 md:py-16 lg:py-20 bg-white dark:bg-gray-800">
    <div class="container mx-auto px-4 md:px-6 grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12">
        <!-- Kiri: Company Overview -->
        <div class="over1">
            <h2 class="text-sm md:text-base text-gray-600 dark:text-gray-300 uppercase tracking-wider mb-2">{{ trans('messages.company_overview') }}</h2>
            <p class="text-xl md:text-2xl lg:text-3xl font-semibold text-gray-800 dark:text-white mb-4 md:mb-6">
                {{ trans('messages.company_description') }}
            </p>
            <a href="{{ route('about') }}" class="inline-block text-sm md:text-base text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors border-b border-transparent hover:border-gray-700 dark:hover:border-gray-300">
                {{ trans('messages.about_us') }}
            </a>
        </div>

        <!-- Kanan: Who We Are + Services -->
        <div class="over3">
            <!-- WHO WE ARE -->
            <div class="flex items-center mb-4">
                <span class="text-sm md:text-base text-gray-600 dark:text-gray-300">{{ trans('messages.who_we_are') }}</span>
                <span class="text-sm md:text-base text-gray-600 dark:text-gray-300 ml-1">&rsaquo;</span>
            </div>

            <!-- Paragraf -->
            <p class="text-sm md:text-base text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">
                {{ trans('messages.who_we_are_text') }}
            </p>

            <!-- Garis merah -->
            <hr class="border-red-600 dark:border-red-500 mb-6">

            <!-- Services List -->
            <div class="space-y-3">
                <div class="py-1">
                    <a href="{{ route('services') }}" class="text-sm md:text-base text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors flex items-center">
                        {{ trans('messages.assurance_service') }} <span class="ml-1">&rsaquo;</span>
                    </a>
                </div>
                <div class="py-1">
                    <a href="{{ route('services') }}" class="text-sm md:text-base text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors flex items-center">
                        {{ trans('messages.non_assurance_service') }} <span class="ml-1">&rsaquo;</span>
                    </a>
                </div>
                <div class="py-1">
                    <a href="{{ route('services') }}" class="text-sm md:text-base text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors flex items-center">
                        {{ trans('messages.deal_advisory') }} <span class="ml-1">&rsaquo;</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- WHY CHOOSE US + MEET THE PARTNER -->
<section class="relative py-16 md:py-20 lg:py-28">
    <!-- Background image + red overlay -->
    <div class="absolute inset-0">
        <img src="/images/office-bg.jpg" alt="bg" class="w-full h-full object-cover opacity-40">
        <div class="absolute inset-0 bg-red-800" style="mix-blend-mode:multiply;"></div>
    </div>

    <div class="relative z-10 container mx-auto px-4 md:px-6">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 md:gap-12 items-start">
            <!-- Left: large quote -->
            <div class="lg:col-span-6 flex items-start lg:items-center">
                <blockquote class="text-white max-w-xl mx-auto lg:mx-0" style="font-family: Georgia, 'Times New Roman', serif;">
                    <p class="text-xl md:text-2xl lg:text-3xl xl:text-4xl leading-tight font-semibold">
                        "{{ trans('messages.quote') }}"
                    </p>
                </blockquote>
            </div>

            <!-- Right: Why Choose Us card -->
            <div class="lg:col-span-6 flex justify-center lg:justify-end">
                <div class="w-full max-w-md bg-transparent text-white">
                    <!-- small decorative logo on top -->
                    <div class="mb-4">
                        <div class="w-12 h-12 md:w-14 md:h-14 rounded bg-white bg-opacity-10 flex items-center justify-center">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" class="text-white">
                                <path d="M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-14z" stroke="white" stroke-width="0.8" opacity="0.9"/>
                            </svg>
                        </div>
                    </div>

                    <h3 class="text-2xl md:text-3xl font-serif font-semibold mb-4">{{ trans('messages.why_choose_us') }}</h3>

                    <p class="text-sm md:text-base leading-relaxed text-white/90 mb-6">
                        {{ trans('messages.why_choose_us_text') }}
                    </p>

                    <a href="{{ route('about') }}" class="inline-flex items-center bg-white text-red-800 font-semibold px-4 py-2 rounded shadow hover:shadow-md transition text-sm md:text-base">
                        {{ trans('messages.learn_more') }}
                        <svg class="ml-3" width="14" height="14" viewBox="0 0 24 24" fill="none">
                            <path d="M5 12h14M13 5l6 7-6 7" stroke="#B91C1C" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </a>
                </div>
            </div>
        </div>

        <!-- Partner card with slider -->
        <div class="relative mt-12 lg:mt-16">
            <div class="relative lg:absolute lg:left-6 lg:-translate-y-12 z-20">
                <!-- Name + arrows -->
                <div class="flex items-center text-white mb-4">
                    <h4 class="text-lg md:text-xl font-bold mr-4">{{ trans('messages.team_members') }}</h4>
                    <div class="flex items-center space-x-2 opacity-90">
                        <button id="prev-partner" class="w-8 h-8 rounded-full border border-white/60 flex items-center justify-center hover:bg-white/10 transition">
                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none">
                                <path d="M15 18l-6-6 6-6" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </button>
                        <button id="next-partner" class="w-8 h-8 rounded-full border border-white/60 flex items-center justify-center hover:bg-white/10 transition">
                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none">
                                <path d="M9 6l6 6-6 6" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </button>
                    </div>
                </div>

                <!-- Slider Container -->
                <div class="partner-slider-container overflow-hidden w-full max-w-full md:max-w-2xl lg:w-[32rem]">
                    <div class="partner-slider-wrapper flex transition-transform duration-500 ease-in-out">
                        <!-- Partner 1 - Jimy Abadi -->
                        <div class="partner-slide min-w-full">
                            <div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl overflow-hidden">
                                <div class="flex flex-col md:flex-row">
                                    <!-- Image top di mobile, left di desktop -->
                                    <div class="w-full h-48 md:w-36 md:h-36 lg:w-40 lg:h-40 relative">
                                        <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Jimy Abadi" class="w-full h-full object-cover">
                                    </div>

                                    <!-- Text content -->
                                    <div class="p-5 md:p-6 flex-1">
                                        <span class="text-xs text-red-700 dark:text-red-400 uppercase font-semibold tracking-wider">{{ trans('messages.team_behind_success') }}</span>
                                        <h5 class="mt-2 text-lg md:text-xl font-serif font-semibold text-gray-800 dark:text-white">{{ trans('messages.partner_name') }}</h5>
                                        <p class="mt-3 text-sm text-gray-600 dark:text-gray-300 leading-relaxed text-justify">
                                            {{ trans('messages.partner_description') }}
                                        </p>

                                        <a href="{{ route('about') }}" class="inline-block mt-4 text-red-700 dark:text-red-400 font-semibold text-sm hover:text-red-800 dark:hover:text-red-300 transition-colors">
                                            {{ trans('messages.learn_more') }} →
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Partner 2 - Sarah Johnson -->
                        <div class="partner-slide min-w-full">
                            <div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl overflow-hidden">
                                <div class="flex flex-col md:flex-row">
                                    <div class="w-full h-48 md:w-36 md:h-36 lg:w-40 lg:h-40 relative">
                                        <img src="https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-4.0.3&auto=format&fit=crop&w=687&q=80" alt="Sarah Johnson" class="w-full h-full object-cover">
                                    </div>

                                    <div class="p-5 md:p-6 flex-1">
                                        <span class="text-xs text-red-700 dark:text-red-400 uppercase font-semibold tracking-wider">{{ trans('messages.senior_advisor') }}</span>
                                        <h5 class="mt-2 text-lg md:text-xl font-serif font-semibold text-gray-800 dark:text-white">Sarah Johnson</h5>
                                        <p class="mt-3 text-sm text-gray-600 dark:text-gray-300 leading-relaxed text-justify">
                                            Sarah memiliki pengalaman lebih dari 8 tahun di bidang konsultasi keuangan dan perencanaan investasi. Sebelum bergabung dengan TLP 5, ia bekerja di perusahaan konsultasi finansial terkemuka dan memiliki sertifikasi CFP (Certified Financial Planner).
                                        </p>

                                        <a href="{{ route('about') }}" class="inline-block mt-4 text-red-700 dark:text-red-400 font-semibold text-sm hover:text-red-800 dark:hover:text-red-300 transition-colors">
                                            {{ trans('messages.learn_more') }} →
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Partner 3 - Michael Chen -->
                        <div class="partner-slide min-w-full">
                            <div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl overflow-hidden">
                                <div class="flex flex-col md:flex-row">
                                    <div class="w-full h-48 md:w-36 md:h-36 lg:w-40 lg:h-40 relative">
                                        <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&auto=format&fit=crop&w=687&q=80" alt="Michael Chen" class="w-full h-full object-cover">
                                    </div>

                                    <div class="p-5 md:p-6 flex-1">
                                        <span class="text-xs text-red-700 dark:text-red-400 uppercase font-semibold tracking-wider">{{ trans('messages.tax_specialist') }}</span>
                                        <h5 class="mt-2 text-lg md:text-xl font-serif font-semibold text-gray-800 dark:text-white">Michael Chen</h5>
                                        <p class="mt-3 text-sm text-gray-600 dark:text-gray-300 leading-relaxed text-justify">
                                            Michael adalah spesialis perpajakan dengan pengalaman 12 tahun. Beliau ahli dalam perencanaan pajak strategis untuk perusahaan dan individu, serta memiliki sertifikasi CPA dan pengalaman bekerja di Big Four accounting firm.
                                        </p>

                                        <a href="{{ route('about') }}" class="inline-block mt-4 text-red-700 dark:text-red-400 font-semibold text-sm hover:text-red-800 dark:hover:text-red-300 transition-colors">
                                            {{ trans('messages.learn_more') }} →
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Partner 4 - Lisa Rodriguez -->
                        <div class="partner-slide min-w-full">
                            <div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl overflow-hidden">
                                <div class="flex flex-col md:flex-row">
                                    <div class="w-full h-48 md:w-36 md:h-36 lg:w-40 lg:h-40 relative">
                                        <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&auto=format&fit=crop&w=687&q=80" alt="Lisa Rodriguez" class="w-full h-full object-cover">
                                    </div>

                                    <div class="p-5 md:p-6 flex-1">
                                        <span class="text-xs text-red-700 dark:text-red-400 uppercase font-semibold tracking-wider">{{ trans('messages.audit_director') }}</span>
                                        <h5 class="mt-2 text-lg md:text-xl font-serif font-semibold text-gray-800 dark:text-white">Lisa Rodriguez</h5>
                                        <p class="mt-3 text-sm text-gray-600 dark:text-gray-300 leading-relaxed text-justify">
                                            Lisa memimpin departemen audit dengan pengalaman 15 tahun di bidang assurance services. Beliau memiliki keahlian dalam audit internal, compliance, dan risk management untuk berbagai industri termasuk manufaktur, retail, dan teknologi.
                                        </p>

                                        <a href="{{ route('about') }}" class="inline-block mt-4 text-red-700 dark:text-red-400 font-semibold text-sm hover:text-red-800 dark:hover:text-red-300 transition-colors">
                                            {{ trans('messages.learn_more') }} →
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Slider Dots Indicator -->
                <div class="flex justify-center mt-4 space-x-2">
                    <button class="partner-dot w-2 h-2 rounded-full bg-white bg-opacity-50 hover:bg-opacity-75 transition-all duration-300 focus:outline-none" data-slide="0"></button>
                    <button class="partner-dot w-2 h-2 rounded-full bg-white bg-opacity-50 hover:bg-opacity-75 transition-all duration-300 focus:outline-none" data-slide="1"></button>
                    <button class="partner-dot w-2 h-2 rounded-full bg-white bg-opacity-50 hover:bg-opacity-75 transition-all duration-300 focus:outline-none" data-slide="2"></button>
                    <button class="partner-dot w-2 h-2 rounded-full bg-white bg-opacity-50 hover:bg-opacity-75 transition-all duration-300 focus:outline-none" data-slide="3"></button>
                </div>
            </div>
        </div>

        <!-- Increased spacer to prevent overlap with next section -->
        <div class="h-32 md:h-48 lg:h-64"></div>
    </div>
</section>

<!-- FAQ Section -->
<section id="faq-section" class="py-16 md:py-20 bg-gray-50 dark:bg-gray-900">
    <div class="container mx-auto px-4 md:px-6">
        <div class="text-center mb-12 md:mb-16">
            <h2 class="text-2xl md:text-3xl lg:text-4xl font-bold mb-4 text-gray-800 dark:text-white">{{ trans('messages.faq_title') }}</h2>
            <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto text-sm md:text-base">{{ trans('messages.faq_description') }}</p>
        </div>

        <div class="max-w-3xl mx-auto">
            <!-- Item 1 -->
            <div class="faq-item bg-white dark:bg-gray-800 rounded-lg shadow-sm mb-4 overflow-hidden">
                <div class="faq-question p-4 md:p-5 cursor-pointer flex justify-between items-center bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
                    <span class="font-medium text-gray-800 dark:text-white text-sm md:text-base">{{ trans('messages.faq_q1') }}</span>
                    <span class="chevron text-gray-500 dark:text-gray-300 transition-transform duration-300">⌄</span>
                </div>
                <div class="faq-answer max-h-0 overflow-hidden transition-all duration-300">
                    <div class="p-4 md:p-5 text-gray-600 dark:text-gray-300 text-sm md:text-base">
                        <p>{{ trans('messages.faq_a1') }}</p>
                    </div>
                </div>
            </div>

            <!-- Item 2 -->
            <div class="faq-item bg-white dark:bg-gray-800 rounded-lg shadow-sm mb-4 overflow-hidden">
                <div class="faq-question p-4 md:p-5 cursor-pointer flex justify-between items-center bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
                    <span class="font-medium text-gray-800 dark:text-white text-sm md:text-base">{{ trans('messages.faq_q2') }}</span>
                    <span class="chevron text-gray-500 dark:text-gray-300 transition-transform duration-300">⌄</span>
                </div>
                <div class="faq-answer max-h-0 overflow-hidden transition-all duration-300">
                    <div class="p-4 md:p-5 text-gray-600 dark:text-gray-300 text-sm md:text-base">
                        <p>{{ trans('messages.faq_a2') }}</p>
                    </div>
                </div>
            </div>

            <!-- Item 3 -->
            <div class="faq-item bg-white dark:bg-gray-800 rounded-lg shadow-sm mb-4 overflow-hidden">
                <div class="faq-question p-4 md:p-5 cursor-pointer flex justify-between items-center bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
                    <span class="font-medium text-gray-800 dark:text-white text-sm md:text-base">{{ trans('messages.faq_q3') }}</span>
                    <span class="chevron text-gray-500 dark:text-gray-300 transition-transform duration-300">⌄</span>
                </div>
                <div class="faq-answer max-h-0 overflow-hidden transition-all duration-300">
                    <div class="p-4 md:p-5 text-gray-600 dark:text-gray-300 text-sm md:text-base">
                        <p>{{ trans('messages.faq_a3') }}</p>
                    </div>
                </div>
            </div>

            <!-- Item 4 -->
            <div class="faq-item bg-white dark:bg-gray-800 rounded-lg shadow-sm mb-4 overflow-hidden">
                <div class="faq-question p-4 md:p-5 cursor-pointer flex justify-between items-center bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
                    <span class="font-medium text-gray-800 dark:text-white text-sm md:text-base">{{ trans('messages.faq_q4') }}</span>
                    <span class="chevron text-gray-500 dark:text-gray-300 transition-transform duration-300">⌄</span>
                </div>
                <div class="faq-answer max-h-0 overflow-hidden transition-all duration-300">
                    <div class="p-4 md:p-5 text-gray-600 dark:text-gray-300 text-sm md:text-base">
                        <p>{{ trans('messages.faq_a4') }}</p>
                    </div>
                </div>
            </div>

            <!-- Item 5 -->
            <div class="faq-item bg-white dark:bg-gray-800 rounded-lg shadow-sm mb-4 overflow-hidden">
                <div class="faq-question p-4 md:p-5 cursor-pointer flex justify-between items-center bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
                    <span class="font-medium text-gray-800 dark:text-white text-sm md:text-base">{{ trans('messages.faq_q5') }}</span>
                    <span class="chevron text-gray-500 dark:text-gray-300 transition-transform duration-300">⌄</span>
                </div>
                <div class="faq-answer max-h-0 overflow-hidden transition-all duration-300">
                    <div class="p-4 md:p-5 text-gray-600 dark:text-gray-300 text-sm md:text-base">
                        <p>{{ trans('messages.faq_a5') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="cta-section relative overflow-hidden">
    <!-- Background image -->
    <div class="cta-bg"></div>

    <!-- Grey overlay content -->
    <div class="cta-content">
        <div class="cta-text text-left md:text-left">
            <h3>{{ trans('messages.get_in_touch') }}</h3>
            <h2>{{ trans('messages.grow_business') }}</h2>
            <p>{{ trans('messages.contact_welcome') }}</p>
            <p class="contact">{{ trans('messages.phone') }}<br>{{ trans('messages.email') }}</p>
        </div>
        <a href="#contact" class="cta-btn">{{ trans('messages.get_in_touch_btn') }}</a>
    </div>

    <!-- Quote bar -->
    <div class="quote-bar">
        "{{ trans('messages.quote_bar') }}"
    </div>
</section>

<!-- Quick Preview Section -->
<section class="py-16 md:py-20 lg:py-24 bg-gray-100 dark:bg-gray-800">
    <div class="container mx-auto px-4">
        <div class="text-center mb-12 md:mb-16">
            <h2 class="text-2xl md:text-3xl lg:text-4xl font-bold mb-4 text-gray-800 dark:text-white">{{ trans('messages.services_title') }}</h2>
            <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto text-sm md:text-base">{{ trans('messages.services_description') }}</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
            <div class="service-card p-6 bg-white dark:bg-gray-700 rounded-lg shadow-sm">
                <div class="w-16 h-16 md:w-20 md:h-20 bg-pink-100 dark:bg-pink-900/30 rounded-full flex items-center justify-center mx-auto mb-6">
                    <i class="fas fa-chart-line text-2xl md:text-3xl text-primary dark:text-pink-400"></i>
                </div>
                <h3 class="text-lg md:text-xl font-semibold mb-4 text-gray-800 dark:text-white">{{ trans('messages.financial_advisory_title') }}</h3>
                <p class="text-gray-600 dark:text-gray-300 text-sm md:text-base">{{ trans('messages.financial_advisory_text') }}</p>
                <a href="{{ route('services') }}" class="text-primary dark:text-pink-400 font-medium mt-4 inline-block text-sm md:text-base">
                    {{ trans('messages.learn_more_service') }} <i class="fas fa-arrow-right ml-1"></i>
                </a>
            </div>
            
            <div class="service-card p-6 bg-white dark:bg-gray-700 rounded-lg shadow-sm">
                <div class="w-16 h-16 md:w-20 md:h-20 bg-pink-100 dark:bg-pink-900/30 rounded-full flex items-center justify-center mx-auto mb-6">
                    <i class="fas fa-briefcase text-2xl md:text-3xl text-primary dark:text-pink-400"></i>
                </div>
                <h3 class="text-lg md:text-xl font-semibold mb-4 text-gray-800 dark:text-white">{{ trans('messages.investment_planning_title') }}</h3>
                <p class="text-gray-600 dark:text-gray-300 text-sm md:text-base">{{ trans('messages.investment_planning_text') }}</p>
                <a href="{{ route('services') }}" class="text-primary dark:text-pink-400 font-medium mt-4 inline-block text-sm md:text-base">
                    {{ trans('messages.learn_more_service') }} <i class="fas fa-arrow-right ml-1"></i>
                </a>
            </div>
            
            <div class="service-card p-6 bg-white dark:bg-gray-700 rounded-lg shadow-sm">
                <div class="w-16 h-16 md:w-20 md:h-20 bg-pink-100 dark:bg-pink-900/30 rounded-full flex items-center justify-center mx-auto mb-6">
                    <i class="fas fa-piggy-bank text-2xl md:text-3xl text-primary dark:text-pink-400"></i>
                </div>
                <h3 class="text-lg md:text-xl font-semibold mb-4 text-gray-800 dark:text-white">{{ trans('messages.retirement_planning_title') }}</h3>
                <p class="text-gray-600 dark:text-gray-300 text-sm md:text-base">{{ trans('messages.retirement_planning_text') }}</p>
                <a href="{{ route('services') }}" class="text-primary dark:text-pink-400 font-medium mt-4 inline-block text-sm md:text-base">
                    {{ trans('messages.learn_more_service') }} <i class="fas fa-arrow-right ml-1"></i>
                </a>
            </div>
        </div>
        
        <div class="text-center mt-8 md:mt-12">
            <a href="{{ route('services') }}" class="btn btn-primary text-sm md:text-base">
                {{ trans('messages.view_all_services') }}
            </a>
        </div>
    </div>
</section>

<!-- Testimonial Preview -->
<section class="py-16 md:py-20 lg:py-24 bg-gray-50 dark:bg-gray-900">
    <div class="container mx-auto px-4">
        <div class="text-center mb-12 md:mb-16">
            <h2 class="text-2xl md:text-3xl lg:text-4xl font-bold mb-4 text-gray-800 dark:text-white">{{ trans('messages.testimonials_title') }}</h2>
            <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto text-sm md:text-base">{{ trans('messages.testimonials_description') }}</p>
        </div>
        
        <div class="max-w-4xl mx-auto">
            <div class="card p-6 md:p-8 bg-white dark:bg-gray-800 rounded-lg shadow-sm">
                <div class="flex flex-col sm:flex-row items-center mb-6">
                    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client" class="w-16 h-16 rounded-full object-cover mb-4 sm:mb-0 sm:mr-4">
                    <div class="text-center sm:text-left">
                        <h4 class="font-semibold text-lg text-gray-800 dark:text-white">{{ trans('messages.client_name') }}</h4>
                        <div class="text-yellow-400 mt-1">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                        </div>
                    </div>
                </div>
                <p class="text-gray-600 dark:text-gray-300 italic text-sm md:text-base">{{ trans('messages.client_testimonial') }}</p>
            </div>
        </div>
        
        <div class="text-center mt-8 md:mt-12">
            <a href="{{ route('testimonials') }}" class="btn btn-primary text-sm md:text-base">
                {{ trans('messages.view_all_testimonials') }}
            </a>
        </div>
    </div>
</section>

<!-- Portfolio Preview -->
<section class="py-16 md:py-20 lg:py-24 bg-gray-100 dark:bg-gray-800">
    <div class="container mx-auto px-4">
        <div class="text-center mb-12 md:mb-16">
            <h2 class="text-2xl md:text-3xl lg:text-4xl font-bold mb-4 text-gray-800 dark:text-white">{{ trans('messages.portfolio_title') }}</h2>
            <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto text-sm md:text-base">{{ trans('messages.portfolio_description') }}</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
            <div class="card group bg-white dark:bg-gray-700 rounded-lg shadow-sm overflow-hidden">
                <div class="relative overflow-hidden h-48 md:h-56 lg:h-64">
                    <img src="https://images.unsplash.com/photo-1554224155-6726b3ff858f?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Project" class="w-full h-full object-cover group-hover:scale-110 transition duration-500">
                    <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition duration-300 flex items-center justify-center">
                        <a href="{{ route('portfolio') }}" class="btn btn-white text-sm">
                            {{ trans('messages.view_details') }}
                        </a>
                    </div>
                </div>
                <div class="p-4 md:p-6">
                    <span class="text-xs md:text-sm text-primary dark:text-pink-400 font-semibold">{{ trans('messages.financial_planning') }}</span>
                    <h3 class="text-lg md:text-xl font-semibold mt-2 mb-3 text-gray-800 dark:text-white">{{ trans('messages.portfolio_title_1') }}</h3>
                    <p class="text-gray-600 dark:text-gray-300 text-sm md:text-base">{{ trans('messages.portfolio_text_1') }}</p>
                </div>
            </div>
            
            <div class="card group bg-white dark:bg-gray-700 rounded-lg shadow-sm overflow-hidden">
                <div class="relative overflow-hidden h-48 md:h-56 lg:h-64">
                    <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Project" class="w-full h-full object-cover group-hover:scale-110 transition duration-500">
                    <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition duration-300 flex items-center justify-center">
                        <a href="{{ route('portfolio') }}" class="btn btn-white text-sm">
                            {{ trans('messages.view_details') }}
                        </a>
                    </div>
                </div>
                <div class="p-4 md:p-6">
                    <span class="text-xs md:text-sm text-primary dark:text-pink-400 font-semibold">{{ trans('messages.investment_advisory') }}</span>
                    <h3 class="text-lg md:text-xl font-semibold mt-2 mb-3 text-gray-800 dark:text-white">{{ trans('messages.portfolio_title_2') }}</h3>
                    <p class="text-gray-600 dark:text-gray-300 text-sm md:text-base">{{ trans('messages.portfolio_text_2') }}</p>
                </div>
            </div>
            
            <div class="card group bg-white dark:bg-gray-700 rounded-lg shadow-sm overflow-hidden">
                <div class="relative overflow-hidden h-48 md:h-56 lg:h-64">
                    <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Project" class="w-full h-full object-cover group-hover:scale-110 transition duration-500">
                    <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition duration-300 flex items-center justify-center">
                        <a href="{{ route('portfolio') }}" class="btn btn-white text-sm">
                            {{ trans('messages.view_details') }}
                        </a>
                    </div>
                </div>
                <div class="p-4 md:p-6">
                    <span class="text-xs md:text-sm text-primary dark:text-pink-400 font-semibold">{{ trans('messages.risk_management') }}</span>
                    <h3 class="text-lg md:text-xl font-semibold mt-2 mb-3 text-gray-800 dark:text-white">{{ trans('messages.portfolio_title_3') }}</h3>
                    <p class="text-gray-600 dark:text-gray-300 text-sm md:text-base">{{ trans('messages.portfolio_text_3') }}</p>
                </div>
            </div>
        </div>
        
        <div class="text-center mt-8 md:mt-12">
            <a href="{{ route('portfolio') }}" class="btn btn-primary text-sm md:text-base">
                {{ trans('messages.view_all_portfolio') }}
            </a>
        </div>
    </div>
</section>

<style>
    /* FAQ Accordion Styles */
    .faq-item.active .faq-answer {
        max-height: 500px;
    }
    
    .faq-item.active .chevron {
        transform: rotate(180deg);
    }
    
    /* CTA Section Styles */
.cta-section { 
    position: relative; 
    overflow: hidden; 
}

.cta-bg { 
    background: url('https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') no-repeat center center/cover; 
    height: 500px; 
    filter: brightness(0.7); 
}

/* Grey box overlay */
.cta-content { 
    background: rgba(153, 153, 153, 0.95); 
    display: flex; 
    flex-direction: column;
    align-items: flex-start; /* Ubah dari center ke flex-start untuk rata kiri */
    padding: 40px 20px;
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    text-align: left; /* Pastikan text-align left */
}

.cta-text h3 { 
    margin: 0; 
    font-size: 18px; 
    font-weight: 400; 
    color: #fff; 
}

.cta-text h2 { 
    margin: 10px 0; 
    font-size: 24px; 
    font-weight: bold; 
    color: #fff; 
    line-height: 1.4; 
}

.cta-text p { 
    margin: 5px 0 15px; 
    font-size: 15px; 
    color: #f1f1f1; 
}

.cta-text .contact { 
    margin: 0; 
    font-size: 15px; 
    color: #fff; 
}

.cta-btn { 
    background: #b50000; 
    color: #fff; 
    padding: 14px 28px; 
    text-decoration: none; 
    border-radius: 3px; 
    font-size: 15px; 
    font-weight: bold; 
    transition: background 0.3s; 
    margin-top: 15px;
    align-self: flex-start; /* Tombol juga rata kiri */
}

.cta-btn:hover { 
    background: #8a0000; 
}

/* Red quote bar */
.quote-bar { 
    background: #b50000; 
    text-align: center; 
    padding: 20px; 
    font-size: 16px; 
    font-style: italic; 
    font-weight: 500; 
    color: white;
}

/* Dark mode adjustments */
.dark .cta-content {
    background: rgba(60, 60, 60, 0.95);
}

.dark .quote-bar {
    background: #9b0000;
}

/* Responsive adjustments */
@media (min-width: 768px) {
    .cta-content {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 50px 60px;
        text-align: left;
    }
    
    .cta-btn {
        margin-top: 0;
        align-self: center; /* Di desktop tombol kembali ke center */
    }
    
    .cta-text h2 {
        font-size: 30px;
    }
    
    .quote-bar {
        font-size: 18px;
        padding: 25px;
    }
    }

    @media (min-width: 1024px) {
        .cta-bg {
            height: 550px;
        }
    }
    
    /* Dark mode adjustments */
    .dark .cta-content {
        background: rgba(60, 60, 60, 0.95);
    }
    
    .dark .quote-bar {
        background: #9b0000;
    }
    
    /* Responsive adjustments */
    @media (min-width: 768px) {
        .cta-content {
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding: 50px 60px;
            text-align: left;
        }
        
        .cta-btn {
            margin-top: 0;
        }
        
        .cta-text h2 {
            font-size: 30px;
        }
        
        .quote-bar {
            font-size: 18px;
            padding: 25px;
        }
    }
    
    @media (min-width: 1024px) {
        .cta-bg {
            height: 550px;
        }
    }
    
    /* Additional responsive spacing */
    @media (max-width: 767px) {
        .service-card, .card {
            padding: 1.5rem;
        }
        
        .faq-question, .faq-answer > div {
            padding: 1rem;
        }
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // FAQ Accordion
        const faqItems = document.querySelectorAll('.faq-item');
        
        faqItems.forEach(item => {
            const question = item.querySelector('.faq-question');
            
            question.addEventListener('click', () => {
                // Close all other items
                faqItems.forEach(i => {
                    if (i !== item) {
                        i.classList.remove('active');
                    }
                });
                
                // Toggle current item
                item.classList.toggle('active');
            });
        });
        
        // Slider Functionality
        const sliderWrapper = document.querySelector('.slider-wrapper');
        const slides = document.querySelectorAll('.slide');
        const dots = document.querySelectorAll('.slider-dot');
        
        let currentSlide = 0;
        const totalSlides = slides.length;
        
        // Set initial active dot
        if (dots.length > 0) {
            dots[0].classList.add('bg-opacity-100');
        }
        
        // Function to go to a specific slide
        function goToSlide(slideIndex) {
            if (slideIndex < 0) slideIndex = totalSlides - 1;
            if (slideIndex >= totalSlides) slideIndex = 0;
            
            sliderWrapper.style.transform = `translateX(-${slideIndex * 100}%)`;
            
            // Update dots
            dots.forEach(dot => dot.classList.remove('bg-opacity-100'));
            if (dots[slideIndex]) {
                dots[slideIndex].classList.add('bg-opacity-100');
            }
            
            currentSlide = slideIndex;
        }
        
        // Event listeners for dots navigation
        dots.forEach((dot, index) => {
            dot.addEventListener('click', () => goToSlide(index));
        });
        
        // Auto-slide every 5 seconds
        setInterval(() => {
            goToSlide(currentSlide + 1);
        }, 5000);
    });

    // Partner Slider Functionality
document.addEventListener('DOMContentLoaded', function() {
    // ... kode slider hero yang sudah ada ...
    
    // Partner Slider
    const partnerSliderWrapper = document.querySelector('.partner-slider-wrapper');
    const partnerSlides = document.querySelectorAll('.partner-slide');
    const partnerDots = document.querySelectorAll('.partner-dot');
    const prevPartnerBtn = document.getElementById('prev-partner');
    const nextPartnerBtn = document.getElementById('next-partner');
    
    let currentPartnerSlide = 0;
    const totalPartnerSlides = partnerSlides.length;
    
    // Set initial active dot
    if (partnerDots.length > 0) {
        partnerDots[0].classList.add('bg-opacity-100');
        partnerDots[0].classList.remove('bg-opacity-50');
    }
    
    // Function to go to a specific partner slide
    function goToPartnerSlide(slideIndex) {
        if (slideIndex < 0) slideIndex = totalPartnerSlides - 1;
        if (slideIndex >= totalPartnerSlides) slideIndex = 0;
        
        partnerSliderWrapper.style.transform = `translateX(-${slideIndex * 100}%)`;
        
        // Update dots
        partnerDots.forEach(dot => {
            dot.classList.remove('bg-opacity-100');
            dot.classList.add('bg-opacity-50');
        });
        if (partnerDots[slideIndex]) {
            partnerDots[slideIndex].classList.add('bg-opacity-100');
            partnerDots[slideIndex].classList.remove('bg-opacity-50');
        }
        
        currentPartnerSlide = slideIndex;
    }
    
    // Event listeners for partner slider navigation
    if (prevPartnerBtn) {
        prevPartnerBtn.addEventListener('click', () => goToPartnerSlide(currentPartnerSlide - 1));
    }
    
    if (nextPartnerBtn) {
        nextPartnerBtn.addEventListener('click', () => goToPartnerSlide(currentPartnerSlide + 1));
    }
    
    // Event listeners for dots navigation
    partnerDots.forEach((dot, index) => {
        dot.addEventListener('click', () => goToPartnerSlide(index));
    });
    
    // Auto-slide partner every 8 seconds
    setInterval(() => {
        goToPartnerSlide(currentPartnerSlide + 1);
    }, 8000);
    
    // ... kode FAQ accordion yang sudah ada ...
});
</script>
@endsection