@extends('layouts.app')

@section('pageTitle', 'Kontak')
@section('pageDescription', 'Informasi kontak Kiostore untuk pertanyaan layanan dan bantuan transaksi.')

@section('content')
@php
    $siteName = \App\Models\Setting::getValue('site_name', config('app.name', 'Kiostore'));
    $contactEmail = trim(\App\Models\Setting::getValue('contact_email', ''));
    $contactWhatsappDisplay = trim(\App\Models\Setting::getValue('cs_whatsapp', ''));
    $contactWhatsapp = preg_replace('/[^0-9]/', '', $contactWhatsappDisplay);
    $contactAddress = trim(\App\Models\Setting::getValue('contact_address', ''));
    $operatorName = trim(\App\Models\Setting::getValue('operator_name', ''));
    $contactHours = trim(\App\Models\Setting::getValue('cs_hours', ''));
    $hasContactInfo = $contactEmail || $contactWhatsapp || $contactAddress || $operatorName || $contactHours;
@endphp
<article class="mx-auto flex w-full max-w-3xl flex-col gap-5 px-4 py-6 text-body">
    <header class="flex flex-col gap-2">
        <h1 class="text-title font-bold text-body">Kontak {{ $siteName }}</h1>
        <p class="leading-relaxed text-muted">
            Informasi kontak yang tersedia ditampilkan di bawah. Untuk bantuan transaksi, sertakan nomor invoice jika ada.
        </p>
    </header>

    @if($hasContactInfo)
    <dl class="grid gap-3 sm:grid-cols-2">
        @if($contactEmail)
        <div class="rounded-card border border-line bg-surface p-4">
            <dt class="font-semibold text-body">Email</dt>
            <dd class="mt-1 break-words text-muted">
                <a class="text-accent underline underline-offset-2" href="mailto:{{ $contactEmail }}">{{ $contactEmail }}</a>
            </dd>
        </div>
        @endif
        @if($contactWhatsapp)
        <div class="rounded-card border border-line bg-surface p-4">
            <dt class="font-semibold text-body">WhatsApp</dt>
            <dd class="mt-1 break-words text-muted">
                <a class="text-accent underline underline-offset-2" href="https://wa.me/{{ $contactWhatsapp }}" target="_blank" rel="noopener noreferrer">{{ $contactWhatsappDisplay }}</a>
            </dd>
        </div>
        @endif
        @if($contactHours)
        <div class="rounded-card border border-line bg-surface p-4">
            <dt class="font-semibold text-body">Jam Layanan / Balasan</dt>
            <dd class="mt-1 whitespace-pre-line break-words text-muted">{{ $contactHours }}</dd>
        </div>
        @endif
        @if($contactAddress)
        <div class="rounded-card border border-line bg-surface p-4">
            <dt class="font-semibold text-body">Alamat korespondensi</dt>
            <dd class="mt-1 whitespace-pre-line break-words text-muted">{{ $contactAddress }}</dd>
        </div>
        @endif
        @if($operatorName)
        <div class="rounded-card border border-line bg-surface p-4">
            <dt class="font-semibold text-body">Pengelola</dt>
            <dd class="mt-1 break-words text-muted">{{ $operatorName }}</dd>
        </div>
        @endif
    </dl>
    @else
        <p class="rounded-card border border-line bg-surface p-4 leading-relaxed text-muted">
            Informasi kontak belum tersedia.
        </p>
    @endif

    @auth
        <p class="leading-relaxed text-muted">
            Untuk masalah transaksi akun, Anda juga dapat <a class="font-semibold text-accent underline underline-offset-2" href="{{ route('support.index') }}">membuka tiket bantuan</a>.
        </p>
    @endauth
</article>
@endsection