@extends('frontend.layouts.main')
@section('title', 'Kontak — ' . ($seoSetting->site_name ?? 'PT Bumenjaya Praduta Abadi'))

@section('content')

{{-- PAGE HERO --}}
<div class="page-hero">
    <div class="container page-hero-inner">
        <nav aria-label="breadcrumb" class="mb-3">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('frontend.index') }}">Beranda</a></li>
                <li class="breadcrumb-item active">Kontak</li>
            </ol>
        </nav>
        <h1>Hubungi Kami</h1>
        <p>Kami siap membantu Anda menemukan program pelatihan yang tepat</p>
    </div>
</div>

{{-- QUICK CARDS --}}
<section style="padding:56px 0;background:var(--c-50);">
    <div class="container">
        <div class="row g-4">
            @php $cCards = [
                ['fas fa-phone-alt','#2563eb','#eff6ff','Telepon',$contactInfo->phone??'-','Senin–Jumat 08.00–17.00','tel:'.($contactInfo->phone??'#'),'Hubungi'],
                ['fas fa-envelope','#0d9488','#f0fdfa','Email',$contactInfo->email??'-','Respon 1×24 jam','mailto:'.($contactInfo->email??'#'),'Kirim Email'],
                ['fab fa-whatsapp','#16a34a','#dcfce7','WhatsApp',$contactInfo->phone??'-','Chat langsung','https://wa.me/'.preg_replace('/[^0-9]/','',$contactInfo->phone??''),'Chat'],
                ['fas fa-map-marker-alt','#d97706','#fffbeb','Alamat',Str::limit($contactInfo->address??'-',42),'Kunjungi kantor','#map','Lihat Peta'],
            ]; @endphp
            @foreach($cCards as $idx => $cc)
            <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="{{ $idx*70 }}">
                <div style="background:var(--white);border:1px solid var(--c-200);border-radius:var(--r-lg);padding:24px;text-align:center;height:100%;transition:var(--tr);"
                     onmouseenter="this.style.boxShadow='var(--sh-lg)';this.style.transform='translateY(-4px)'"
                     onmouseleave="this.style.boxShadow='';this.style.transform=''">
                    <div style="width:52px;height:52px;background:{{ $cc[2] }};border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;">
                        <i class="{{ $cc[0] }}" style="color:{{ $cc[1] }};font-size:1.2rem;"></i>
                    </div>
                    <h5 style="font-size:14px;font-weight:700;color:var(--c-900);margin-bottom:5px;">{{ $cc[3] }}</h5>
                    <p style="font-size:13px;color:var(--c-700);margin-bottom:3px;font-weight:500;">{{ $cc[4] }}</p>
                    <p style="font-size:12px;color:var(--c-400);margin-bottom:14px;">{{ $cc[5] }}</p>
                    <a href="{{ $cc[6] }}" {{ Str::startsWith($cc[6],'http')?'target="_blank"':'' }}
                       style="display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:{{ $cc[1] }};border:1.5px solid {{ $cc[1] }};padding:7px 16px;border-radius:var(--r-sm);transition:var(--tr);"
                       onmouseenter="this.style.background='{{ $cc[1] }}';this.style.color='#fff'"
                       onmouseleave="this.style.background='';this.style.color='{{ $cc[1] }}'">
                        {{ $cc[7] }} <i class="fas fa-arrow-right" style="font-size:10px;"></i>
                    </a>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>

{{-- MAIN CONTACT --}}
<section style="padding:80px 0;">
    <div class="container">
        <div class="row g-5">
            {{-- FORM --}}
            <div class="col-lg-7" data-aos="fade-right">
                <div class="eyebrow mb-2"><i class="fas fa-paper-plane" style="font-size:9px;"></i> Kirim Pesan</div>
                <h2 class="section-title mb-2">Ada Pertanyaan?</h2>
                <div class="accent-bar mb-3"></div>
                <p style="color:var(--c-500);font-size:14.5px;margin-bottom:24px;">Tim kami akan menghubungi Anda dalam 1×24 jam kerja.</p>

                <div style="background:var(--white);border:1px solid var(--c-200);border-radius:var(--r-xl);padding:32px;" id="formWrap">
                    <form id="contactForm">
                        @csrf
                        <div class="row g-4">
                            @php
                            $inputStyle = 'width:100%;padding:10px 13px;border:1px solid var(--c-200);border-radius:var(--r-md);font-size:14px;outline:none;font-family:var(--ff-body);transition:border-color .18s;';
                            $focusIn  = "this.style.borderColor='var(--c-blue)';this.style.boxShadow='0 0 0 3px rgba(37,99,235,.1)'";
                            $focusOut = "this.style.borderColor='var(--c-200)';this.style.boxShadow='none'";
                            @endphp
                            <div class="col-md-6">
                                <label style="font-size:12.5px;font-weight:600;color:var(--c-700);display:block;margin-bottom:5px;">Nama Lengkap <span style="color:var(--c-red);">*</span></label>
                                <input type="text" name="name" placeholder="Nama Anda" required style="{{ $inputStyle }}" onfocus="{{ $focusIn }}" onblur="{{ $focusOut }}">
                            </div>
                            <div class="col-md-6">
                                <label style="font-size:12.5px;font-weight:600;color:var(--c-700);display:block;margin-bottom:5px;">Email <span style="color:var(--c-red);">*</span></label>
                                <input type="email" name="email" placeholder="email@contoh.com" required style="{{ $inputStyle }}" onfocus="{{ $focusIn }}" onblur="{{ $focusOut }}">
                            </div>
                            <div class="col-md-6">
                                <label style="font-size:12.5px;font-weight:600;color:var(--c-700);display:block;margin-bottom:5px;">No. Telepon</label>
                                <input type="tel" name="phone" placeholder="08xx xxxx xxxx" style="{{ $inputStyle }}" onfocus="{{ $focusIn }}" onblur="{{ $focusOut }}">
                            </div>
                            <div class="col-md-6">
                                <label style="font-size:12.5px;font-weight:600;color:var(--c-700);display:block;margin-bottom:5px;">Program Diminati</label>
                                <select name="program" style="{{ $inputStyle }}background:white;cursor:pointer;" onfocus="{{ $focusIn }}" onblur="{{ $focusOut }}">
                                    <option value="">Pilih Program</option>
                                    <option>Web Development</option>
                                    <option>Digital Marketing</option>
                                    <option>Graphic Design</option>
                                    <option>Data Science</option>
                                    <option>Lainnya</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <label style="font-size:12.5px;font-weight:600;color:var(--c-700);display:block;margin-bottom:5px;">Pesan <span style="color:var(--c-red);">*</span></label>
                                <textarea name="message" rows="5" placeholder="Tulis pertanyaan Anda..." required
                                          style="{{ $inputStyle }}resize:none;" onfocus="{{ $focusIn }}" onblur="{{ $focusOut }}"></textarea>
                            </div>
                            <div class="col-12">
                                <button type="submit" id="submitBtn" class="btn-corp btn-blue w-100" style="justify-content:center;padding:13px 24px;font-size:14.5px;">
                                    <i class="fas fa-paper-plane"></i> Kirim Pesan
                                </button>
                            </div>
                        </div>
                    </form>
                    <div id="successAlert" class="d-none text-center" style="padding:24px 0;">
                        <div style="width:56px;height:56px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;">
                            <i class="fas fa-check" style="color:#16a34a;font-size:1.4rem;"></i>
                        </div>
                        <h4 style="font-size:1.05rem;color:var(--c-900);margin-bottom:6px;">Pesan Terkirim!</h4>
                        <p style="color:var(--c-500);font-size:13.5px;">Kami akan menghubungi Anda dalam 1×24 jam kerja.</p>
                    </div>
                </div>
            </div>

            {{-- INFO PANEL --}}
            <div class="col-lg-5" data-aos="fade-left">
                <div class="eyebrow mb-2"><i class="fas fa-info-circle" style="font-size:9px;"></i> Informasi</div>
                <h2 class="section-title mb-2">Detail Kontak</h2>
                <div class="accent-bar mb-4"></div>

                {{-- Address --}}
                <div style="background:var(--white);border:1px solid var(--c-200);border-radius:var(--r-lg);padding:18px;margin-bottom:10px;display:flex;gap:12px;align-items:flex-start;">
                    <div style="width:38px;height:38px;background:var(--c-blue-xs);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                        <i class="fas fa-map-marker-alt" style="color:var(--c-blue);font-size:13px;"></i>
                    </div>
                    <div>
                        <div style="font-size:11px;font-weight:700;color:var(--c-blue);text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px;">Alamat Kantor</div>
                        <div style="font-size:13.5px;color:var(--c-600);">{{ $contactInfo->address ?? '-' }}</div>
                    </div>
                </div>

                {{-- Hours --}}
                <div style="background:var(--white);border:1px solid var(--c-200);border-radius:var(--r-lg);padding:18px;margin-bottom:10px;">
                    <div style="display:flex;align-items:center;gap:10px;margin-bottom:12px;">
                        <div style="width:38px;height:38px;background:#dcfce7;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                            <i class="fas fa-clock" style="color:#16a34a;font-size:13px;"></i>
                        </div>
                        <span style="font-size:11px;font-weight:700;color:#16a34a;text-transform:uppercase;letter-spacing:.05em;">Jam Operasional</span>
                    </div>
                    @foreach([['Senin – Jumat','08.00 – 17.00','var(--c-900)'],['Sabtu','08.00 – 13.00','#d97706'],['Minggu','Tutup','#dc2626']] as $h)
                    <div style="display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--c-100);">
                        <span style="font-size:13px;color:var(--c-600);">{{ $h[0] }}</span>
                        <span style="font-size:13px;font-weight:700;color:{{ $h[2] }};">{{ $h[1] }}</span>
                    </div>
                    @endforeach
                </div>

                {{-- Social --}}
                <div style="background:var(--white);border:1px solid var(--c-200);border-radius:var(--r-lg);padding:18px;margin-bottom:10px;">
                    <div style="font-size:11px;font-weight:700;color:var(--c-400);text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;">Ikuti Kami</div>
                    <div class="d-flex gap-2 flex-wrap">
                        @if($contactInfo->facebook)
                        <a href="{{ $contactInfo->facebook }}" target="_blank"
                           style="display:flex;align-items:center;gap:5px;padding:7px 13px;border:1px solid var(--c-200);border-radius:var(--r-sm);font-size:12.5px;color:var(--c-600);font-weight:500;transition:var(--tr);"
                           onmouseenter="this.style.borderColor='#1877f2';this.style.color='#1877f2'" onmouseleave="this.style.borderColor='var(--c-200)';this.style.color='var(--c-600)'">
                            <i class="fab fa-facebook-f" style="color:#1877f2;"></i> Facebook
                        </a>
                        @endif
                        @if($contactInfo->instagram)
                        <a href="{{ $contactInfo->instagram }}" target="_blank"
                           style="display:flex;align-items:center;gap:5px;padding:7px 13px;border:1px solid var(--c-200);border-radius:var(--r-sm);font-size:12.5px;color:var(--c-600);font-weight:500;transition:var(--tr);"
                           onmouseenter="this.style.borderColor='#e1306c';this.style.color='#e1306c'" onmouseleave="this.style.borderColor='var(--c-200)';this.style.color='var(--c-600)'">
                            <i class="fab fa-instagram" style="color:#e1306c;"></i> Instagram
                        </a>
                        @endif
                        @if($contactInfo->youtube)
                        <a href="{{ $contactInfo->youtube }}" target="_blank"
                           style="display:flex;align-items:center;gap:5px;padding:7px 13px;border:1px solid var(--c-200);border-radius:var(--r-sm);font-size:12.5px;color:var(--c-600);font-weight:500;transition:var(--tr);"
                           onmouseenter="this.style.borderColor='#ff0000';this.style.color='#ff0000'" onmouseleave="this.style.borderColor='var(--c-200)';this.style.color='var(--c-600)'">
                            <i class="fab fa-youtube" style="color:#ff0000;"></i> YouTube
                        </a>
                        @endif
                    </div>
                </div>

                {{-- WhatsApp CTA --}}
                <div style="background:var(--c-navy);border-radius:var(--r-lg);padding:18px;">
                    <div style="font-size:13.5px;font-weight:700;color:#fff;margin-bottom:5px;">
                        <i class="fas fa-bolt me-2" style="color:#60a5fa;"></i>Butuh Bantuan Cepat?
                    </div>
                    <p style="font-size:12.5px;color:rgba(255,255,255,.55);margin-bottom:12px;">Chat WhatsApp untuk respons tercepat.</p>
                    <a href="https://wa.me/{{ preg_replace('/[^0-9]/','',$contactInfo->phone??'') }}" target="_blank"
                       class="btn-corp btn-white btn-corp-sm w-100" style="justify-content:center;">
                        <i class="fab fa-whatsapp" style="color:#25D366;font-size:15px;"></i> Chat WhatsApp
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- MAP --}}
<section id="map" style="padding:0 0 72px;">
    <div class="container">
        <div style="border:1px solid var(--c-200);border-radius:var(--r-xl);overflow:hidden;" data-aos="fade-up">
            @if(isset($contactInfo->map_embed) && $contactInfo->map_embed)
                <div style="height:360px;">{!! $contactInfo->map_embed !!}</div>
            @else
                <div style="height:280px;background:var(--c-50);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;">
                    <i class="fas fa-map-marked-alt" style="font-size:2.5rem;color:var(--c-200);"></i>
                    <p style="font-size:14px;color:var(--c-400);margin:0;">Peta lokasi belum dikonfigurasi</p>
                    <p style="font-size:13px;color:var(--c-500);margin:0;">{{ $contactInfo->address ?? '-' }}</p>
                </div>
            @endif
        </div>
    </div>
</section>

{{-- FAQ --}}
<section style="padding:72px 0;background:var(--c-50);">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-7">
                <div class="text-center mb-5" data-aos="fade-up">
                    <div class="eyebrow mx-auto" style="width:fit-content;"><i class="fas fa-question-circle" style="font-size:9px;"></i> FAQ</div>
                    <h2 class="section-title mt-2">Pertanyaan Umum</h2>
                </div>
                @php $faqs=[
                    ['Bagaimana cara mendaftar?','Daftar melalui formulir website, datang ke kantor, atau hubungi kami via WhatsApp. Tim kami akan memandu prosesnya.'],
                    ['Apakah ada cicilan biaya pelatihan?','Ya, kami menyediakan skema cicilan. Hubungi tim kami untuk informasi detail opsi pembayaran.'],
                    ['Berapa lama durasi pelatihan?','Durasi 3–6 bulan tergantung program, dengan jadwal pagi dan sore yang fleksibel.'],
                    ['Apakah sertifikat diakui nasional?','Ya, sertifikat kompetensi kami diakui oleh BNSP (Badan Nasional Sertifikasi Profesi).'],
                    ['Apakah ada bantuan penempatan kerja?','Ya, Career Center kami aktif menghubungkan lulusan dengan perusahaan mitra.'],
                ]; @endphp
                <div id="faqAcc">
                    @foreach($faqs as $idx => $faq)
                    <div style="background:var(--white);border:1px solid var(--c-200);border-radius:var(--r-lg);margin-bottom:8px;overflow:hidden;" data-aos="fade-up" data-aos-delay="{{ $idx*50 }}">
                        <button style="width:100%;text-align:left;padding:16px 18px;background:none;border:none;font-size:14px;font-weight:600;color:var(--c-900);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;font-family:var(--ff-body);"
                                data-bs-toggle="collapse" data-bs-target="#faq{{ $idx }}">
                            <span>{{ $faq[0] }}</span>
                            <i class="fas fa-chevron-down" style="font-size:11px;color:var(--c-400);transition:transform .28s;flex-shrink:0;"></i>
                        </button>
                        <div id="faq{{ $idx }}" class="collapse {{ $idx===0?'show':'' }}" data-bs-parent="#faqAcc">
                            <div style="padding:0 18px 16px;font-size:13.5px;color:var(--c-500);line-height:1.75;border-top:1px solid var(--c-100);">
                                {{ $faq[1] }}
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

@push('scripts')
<script>
document.getElementById('contactForm').addEventListener('submit',function(e){
    e.preventDefault();
    const btn=document.getElementById('submitBtn');
    btn.innerHTML='<i class="fas fa-spinner fa-spin"></i> Mengirim...';
    btn.disabled=true;
    setTimeout(()=>{
        document.getElementById('contactForm').classList.add('d-none');
        document.getElementById('successAlert').classList.remove('d-none');
    },1200);
});
document.querySelectorAll('[data-bs-toggle="collapse"]').forEach(btn=>{
    const icon=btn.querySelector('i.fa-chevron-down');
    const tgt=document.querySelector(btn.dataset.bsTarget);
    if(tgt&&icon){
        tgt.addEventListener('shown.bs.collapse',()=>{icon.style.transform='rotate(180deg)';},{once:false});
        tgt.addEventListener('hidden.bs.collapse',()=>{icon.style.transform='rotate(0deg)';},{once:false});
    }
});
</script>
@endpush