@extends('layouts.app')

@section('title', 'Contact — IZONE Africa × Magic City')

@section('content')

<section class="page-section">
    <div class="page-card">
        <div class="page-head">
            <h1>Contact Us</h1>
            <p>Talk to real people who know the gear — we usually reply within a few hours.</p>
        </div>

        <div class="contact-grid">
            <div class="contact-card">
                <span class="cc-ico">💬</span>
                <b>WhatsApp</b>
                <a href="https://wa.me/{{ $shop['contacts']['contact_whatsapp'] ?? '254743293995' }}">+{{ $shop['contacts']['contact_whatsapp'] ?? '254743293995' }}</a>
            </div>
            <div class="contact-card">
                <span class="cc-ico">📞</span>
                <b>Call</b>
                <span>{{ $shop['contacts']['contact_phone_1'] ?? '' }} · {{ $shop['contacts']['contact_phone_2'] ?? '' }}</span>
            </div>
            <div class="contact-card">
                <span class="cc-ico">📧</span>
                <b>Email</b>
                <a href="mailto:{{ $shop['contacts']['contact_email'] ?? 'info@izone.africa' }}">{{ $shop['contacts']['contact_email'] ?? 'info@izone.africa' }}</a>
            </div>
            <div class="contact-card">
                <span class="cc-ico">📍</span>
                <b>Address</b>
                <span>{{ $shop['contacts']['contact_address'] ?? 'Nairobi CBD' }}</span>
            </div>
        </div>

        <x-support.actions :whatsapp="$shop['contacts']['contact_whatsapp'] ?? '254743293995'" :email="$shop['contacts']['contact_email'] ?? 'info@izone.africa'" />

        <div class="contact-departments">
                <div class="cd-head">
                    <h2>💼 Contact a Department</h2>
                    <p>Reach the right team directly — every department is routed through the admin-managed contact center.</p>
                </div>
                <div class="cd-grid">
                    @forelse($shop['support_departments'] ?? [] as $department)
                        @php
                            $number = $department['wa'] ?? $department['whatsapp'] ?? null;
                        @endphp
                        @if($number)
                            <a class="cd-card" href="https://wa.me/{{ $number }}?text={{ urlencode('Hello IZONE Africa — ' . $department['name'] . ' enquiry.') }}" target="_blank" rel="noopener">
                                <span class="cd-ico">{{ $department['emoji'] ?? $department['icon'] }}</span>
                                <div class="cd-text">
                                    <b>{{ $department['name'] }}</b>
                                    <small>{{ $department['description'] ?? '' }}</small>
                                </div>
                                <span class="cd-arrow">→</span>
                            </a>
                        @else
                            <div class="cd-card">
                                <span class="cd-ico">{{ $department['emoji'] ?? $department['icon'] }}</span>
                                <div class="cd-text">
                                    <b>{{ $department['name'] }}</b>
                                    <small>{{ $department['description'] ?? '' }} — contact info pending in admin.</small>
                                </div>
                            </div>
                        @endif
                    @empty
                        <div class="deals-empty">
                            <div class="deals-empty-emoji">💬</div>
                            <div class="deals-empty-title">Departments coming soon</div>
                        </div>
                    @endforelse
                </div>
            </div>

        <x-support.booking :whatsapp="$shop['contacts']['contact_whatsapp'] ?? '254743293995'" :delivery-locations="$shop['delivery_locations'] ?? []" />
    </div>
</section>

@endsection