@extends('layouts.customer')

@section('title', $title)
@section('meta_description', $metaDescription)
@section('body_class', 'page-home')
@section('content')

{{-- ===== 1. HERO BANNER ===== --}}
@if ($hero)
<x-customer.page-header
    :bg-image="$hero->gambar ? img_src($hero->gambar) : null"
    height="700px">
    <div class="row py-4">
        <div class="col-lg-8 col-xl-6">
            <h1 class="hero-title mb-3">{!! $heroLang->tagline ?? '' !!}</h1>
            <div class="hero-desc mb-4">{!! $heroLang->deskripsi ?? '' !!}</div>
            <div class="d-flex gap-3 mb-4 flex-wrap">
                @foreach ($heroCtas as $cta)
                    @php
                        $rawLink = $cta->link ?: '#';
                        $isNewTab = !empty($cta->is_new_tab);
                        $href = \Illuminate\Support\Str::startsWith($rawLink, ['http://', 'https://', '#', 'mailto:', 'tel:'])
                                ? $rawLink
                                : url($rawLink);
                    @endphp
                    <a href="{{ $href }}"
                       @if ($isNewTab) target="_blank" rel="noopener noreferrer" @endif
                       class="btn btn-primary rounded-pill px-4 py-2 fw-bold">
                        {{ $cta->text }}
                    </a>
                @endforeach
            </div>
        </div>
    </div>

    <x-slot:footer>
        <div class="row">
            <div class="col-lg-8 col-xl-6">
                <div class="d-flex flex-wrap gap-4 hero-keywords">
                    @foreach ($heroKeywords as $kw)
                        <div class="d-flex align-items-center gap-2 small hero-keyword-item">
                            <i class="{{ $kw->icon ?: 'fas fa-check-circle' }}"></i>
                            <span>{{ $kw->text }}</span>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </x-slot:footer>
</x-customer.page-header>
@endif

{{-- ===== 2. KATEGORI ===== --}}
@if ($kategoris->isNotEmpty())
<section class="kategori-section pb-5" style="padding-top: 5rem;">
    <div class="container-fluid container-wide">
        <div class="row g-4">
            @foreach ($kategoris as $kat)
            <div class="col-md-4">
                <a href="{{ url('/kategori?kategori=' . $kat->idkategori) }}" class="text-decoration-none">
                    <div class="kategori-card rounded-4 overflow-hidden position-relative"
                         style="background-image: url('{{ $kat->gambar ? img_src($kat->gambar) : '' }}');">
                        <div class="kategori-overlay p-4 d-flex flex-column h-100">
                            <div>
                                <h4 class="text-white fw-bold mb-2">{{ $kat->nama }}</h4>
                                <p class="small mb-0 kategori-desc">{{ strip_tags($kat->deskripsi) }}</p>
                            </div>
                            <span class="text-white fw-semibold small mt-auto pt-3">
                                {{ __('nav.lihat_produk') }} <i class="fas fa-arrow-right ms-1"></i>
                            </span>
                        </div>
                    </div>
                </a>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ===== 3. PRODUK UNGGULAN ===== --}}
@if ($produkUnggulan->isNotEmpty())
<section class="produk-unggulan-section pt-5 pb-5 mb-5">
    <div class="container-fluid container-wide">
        <p class="section-eyebrow mb-4">{{ __('nav.produk_unggulan') }}</p>
        <div class="row g-4">
            @foreach ($produkUnggulan as $produk)
            <div class="col-6 col-md-4 col-lg-2">
                <x-customer.produk-card :produk="$produk" />
            </div>
            @endforeach
        </div>
        <div class="text-center mt-4">
            <a href="{{ url('/kategori') }}" class="btn btn-primary rounded-pill px-4">
                {{ __('nav.semua_produk') ?? 'Semua Produk' }}
            </a>
        </div>
    </div>
</section>
@endif

{{-- ===== 4. WHY US ===== --}}
@if ($whyus)
<section class="whyus-section pt-5 mt-5 mb-5">
    <div class="container-fluid container-wide">
        <div class="row align-items-center g-5">
            <div class="col-lg-6">
                <h2 class="fw-bold display-6 mb-3">{{ $whyusLang->judul ?? '' }}</h2>
                <div class="text-secondary">{!! $whyusLang->deskripsi ?? '' !!}</div>
            </div>
            <div class="col-lg-6 text-center">
                @if ($whyus->gambar)
                    <img src="{{ img_src($whyus->gambar) }}" alt="Intisolve" class="img-fluid" style="max-height: 320px;">
                @endif
            </div>
        </div>
    </div>
</section>
@endif

{{-- ===== 5. GALERI ===== --}}
@if ($galeri->isNotEmpty())
<section class="galeri-section galeri-spacing">
    <div class="container-fluid container-gallery">
        <div class="galeri-carousel-wrapper position-relative">

            <button type="button" class="galeri-nav galeri-nav-prev" aria-label="Sebelumnya">
                <i class="fas fa-chevron-left"></i>
            </button>

            <div class="galeri-strip d-flex gap-3 overflow-auto pb-2" id="galeriStrip">
                @foreach ($galeri as $foto)
                <div class="galeri-item flex-shrink-0">
                    @if ($foto->gambar)
                        <img src="{{ img_src($foto->gambar) }}" alt="Galeri {{ $foto->urutan }}" class="rounded-3">
                    @endif
                </div>
                @endforeach
            </div>

            <button type="button" class="galeri-nav galeri-nav-next" aria-label="Berikutnya">
                <i class="fas fa-chevron-right"></i>
            </button>

        </div>
    </div>
</section>
@endif

{{-- ===== 6. SPOTLIGHT ===== --}}
@if ($spotlight)
<section class="spotlight-section pt-5 pb-5 mt-5 mb-5">
    <div class="container-fluid container-wide">
        <div class="row align-items-stretch g-5">
         <div class="col-lg-6">
                <h2 class="fw-bold display-6 mb-3">{{ $spotlightLang->judul ?? '' }}</h2>
                   <div class="text-secondary mb-4">{!! $spotlightLang->deskripsi ?? '' !!}</div>
                @if ($spotlightLang && $spotlightLang->cta_text)
                    @php
                        $spotlightLink = $spotlight->cta_link ?: '#';
                        $spotlightIsNewTab = !empty($spotlight->is_new_tab);
                        $spotlightHref = \Illuminate\Support\Str::startsWith($spotlightLink, ['http://', 'https://', '#', 'mailto:', 'tel:'])
                                        ? $spotlightLink
                                        : url($spotlightLink);
                    @endphp
                    <a href="{{ $spotlightHref }}"
                        @if ($spotlightIsNewTab) target="_blank" rel="noopener noreferrer" @endif
                        class="btn btn-primary rounded-pill px-4 py-2 fw-bold">
                            {{ $spotlightLang->cta_text }}
                    </a>
                @endif
            </div>
            <div class="col-lg-6 spotlight-image-col">
                @if ($spotlight->gambar)
                    <div class="spotlight-image-box rounded-4 shadow-sm overflow-hidden">
                        <img src="{{ img_src($spotlight->gambar) }}" alt="{{ $spotlightLang->judul ?? '' }}">
                    </div>
                @endif
            </div>
        </div>
    </div>
</section>
@endif

{{-- ===== 7. MARKETPLACE ===== --}}
@if ($marketplace->isNotEmpty())
<section class="marketplace-section pt-5 pb-5 mt-5">
    <div class="container-fluid container-narrow">
        <div class="text-center mb-5">
            <h2 class="marketplace-title mb-2">{{ __('nav.marketplace') }}</h2>
            <p class="text-secondary">{{ __('nav.kunjungi_marketplace') }}</p>
        </div>
        <div class="marketplace-grid d-flex flex-wrap justify-content-center gap-4">
            @foreach ($marketplace as $mp)
                <a href="{{ $mp->link }}" target="_blank" rel="noopener noreferrer" class="text-decoration-none text-dark marketplace-item">
                    <div class="text-center">
                        @if ($mp->logo)
                            <img src="{{ img_src($mp->logo) }}" alt="{{ $mp->nama_platform }}" class="marketplace-logo mb-2">
                        @endif
                        <p class="small fw-semibold mb-0">{{ $mp->nama_platform }}</p>
                    </div>
                </a>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ===== 8. TESTIMONI ===== --}}
@if ($testimoni->isNotEmpty())
<section class="testimoni-section pt-5 pb-5 mb-5">
    <div class="container">
        <h2 class="text-center fw-bold fs-6 mb-5">{{ __('nav.testimoni') ?? 'Bagaimana Pendapat Mereka:' }}</h2>
        <div class="row g-4">
            @foreach ($testimoni as $t)
            <div class="col-md-4">
                <div class="testimoni-card bg-light rounded-4 p-4 h-100">
                    <p class="fw-semibold mb-1">&ldquo;{!! Str::limit(strip_tags($t->kutipan), 60) !!}&rdquo;</p>

                    @if (strlen(strip_tags($t->kutipan)) > 60)
                        <button type="button" class="btn btn-link btn-sm p-0 mb-3 text-decoration-none"
                            data-bs-toggle="modal" data-bs-target="#testimoniModal{{ $loop->index }}">
                            Baca Selengkapnya
                        </button>
                    @else
                        <div class="mb-3"></div>
                    @endif

                    <div class="d-flex align-items-center gap-3">
                        @if ($t->foto)
                            <img src="{{ img_src($t->foto) }}" alt="{{ $t->nama_author }}" class="rounded-circle" style="width:40px; height:40px; object-fit:cover;">
                        @else
                            <div class="rounded-circle bg-secondary" style="width:40px; height:40px;"></div>
                        @endif
                        <div>
                            <p class="fw-bold small mb-0">{{ $t->nama_author }}</p>
                            <p class="text-muted small mb-0">{{ $t->jabatan }}</p>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Modal isi lengkap --}}
            <div class="modal fade" id="testimoniModal{{ $loop->index }}" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h6 class="modal-title fw-bold mb-0">{{ $t->nama_author }}</h6>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="mb-3 testimoni-modal-content">{!! $t->kutipan !!}</div>
                            <div class="d-flex align-items-center gap-3">
                                @if ($t->foto)
                                    <img src="{{ img_src($t->foto) }}" alt="{{ $t->nama_author }}" class="rounded-circle" style="width:40px; height:40px; object-fit:cover;">
                                @else
                                    <div class="rounded-circle bg-secondary" style="width:40px; height:40px;"></div>
                                @endif
                                <div>
                                    <p class="fw-bold small mb-0">{{ $t->nama_author }}</p>
                                    <p class="text-muted small mb-0">{{ $t->jabatan }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif
@endsection

@section('meta_extra')
    {{-- Data kontak untuk popup floating (dipakai layout customer) --}}
    <meta name="wa-number" content="{{ $setting->whatsapp_number ?? '' }}">
@endsection
@push('js')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const strip = document.getElementById('galeriStrip');
        const btnPrev = document.querySelector('.galeri-nav-prev');
        const btnNext = document.querySelector('.galeri-nav-next');
        if (!strip || !btnPrev || !btnNext) return;
function scrollAmount() {
            const item = strip.querySelector('.galeri-item');
            return item ? item.offsetWidth * 2 + 24 : 300;
        }

        function updateNavState() {
            const maxScroll = strip.scrollWidth - strip.clientWidth;
            btnPrev.classList.toggle('is-hidden', strip.scrollLeft <= 5);
            btnNext.classList.toggle('is-hidden', strip.scrollLeft >= maxScroll - 5);
        }

        btnPrev.addEventListener('click', function () {
            strip.scrollBy({ left: -scrollAmount(), behavior: 'smooth' });
        });

        btnNext.addEventListener('click', function () {
            strip.scrollBy({ left: scrollAmount(), behavior: 'smooth' });
        });

        strip.addEventListener('scroll', updateNavState);
        window.addEventListener('resize', updateNavState);
        updateNavState();
    });
</script>
@endpush