@extends('frontend.layouts.app')

@section('title', __('lang.fp_nav_contact'))

@section('content')
    <section class="fp-page-header">
        <div class="container text-center py-5">
            <span class="fp-hero-eyebrow"><i class="bi bi-headset"></i> {{ __('lang.fp_contact_eyebrow') }}</span>
            <h1 class="fp-hero-title display-6 mt-3 mb-0">{{ __('lang.fp_contact_title') }}</h1>
        </div>
    </section>

    <section class="container py-5">
        @if ($contact->body_ar)
            <p class="text-muted text-center col-lg-7 mx-auto mb-5">{{ $contact->body_ar }}</p>
        @endif

        <div class="row g-4 justify-content-center mb-5">
            @if ($contact->phone)
                <div class="col-sm-6 col-lg-3">
                    <a href="tel:{{ $contact->phone }}" class="fp-stat-card d-block text-decoration-none">
                        <div class="fp-stat-icon"><i class="bi bi-telephone-fill"></i></div>
                        <div class="fw-bold mb-1">{{ __('lang.fp_contact_phone') }}</div>
                        <div class="text-muted small" dir="ltr">{{ $contact->phone }}</div>
                    </a>
                </div>
            @endif

            @if ($contact->whatsapp)
                <div class="col-sm-6 col-lg-3">
                    <a href="https://wa.me/{{ preg_replace('/\D/', '', $contact->whatsapp) }}" target="_blank" class="fp-stat-card d-block text-decoration-none">
                        <div class="fp-stat-icon"><i class="bi bi-whatsapp"></i></div>
                        <div class="fw-bold mb-1">{{ __('lang.whatsapp') }}</div>
                        <div class="text-muted small" dir="ltr">{{ $contact->whatsapp }}</div>
                    </a>
                </div>
            @endif

            @if ($contact->email)
                <div class="col-sm-6 col-lg-3">
                    <a href="mailto:{{ $contact->email }}" class="fp-stat-card d-block text-decoration-none">
                        <div class="fp-stat-icon"><i class="bi bi-envelope-fill"></i></div>
                        <div class="fw-bold mb-1">{{ __('lang.fp_contact_email') }}</div>
                        <div class="text-muted small">{{ $contact->email }}</div>
                    </a>
                </div>
            @endif

            @if ($contact->address_ar)
                <div class="col-sm-6 col-lg-3">
                    <div class="fp-stat-card">
                        <div class="fp-stat-icon"><i class="bi bi-geo-alt-fill"></i></div>
                        <div class="fw-bold mb-1">{{ __('lang.fp_contact_address') }}</div>
                        <div class="text-muted small">{{ $contact->address_ar }}</div>
                    </div>
                </div>
            @endif
        </div>

        @if ($contact->facebook_url || $contact->instagram_url || $contact->twitter_url)
            <div class="d-flex justify-content-center gap-2">
                @if ($contact->facebook_url)
                    <a href="{{ $contact->facebook_url }}" target="_blank" class="fp-icon-btn" aria-label="Facebook"><i class="bi bi-facebook"></i></a>
                @endif
                @if ($contact->instagram_url)
                    <a href="{{ $contact->instagram_url }}" target="_blank" class="fp-icon-btn" aria-label="Instagram"><i class="bi bi-instagram"></i></a>
                @endif
                @if ($contact->twitter_url)
                    <a href="{{ $contact->twitter_url }}" target="_blank" class="fp-icon-btn" aria-label="X"><i class="bi bi-twitter-x"></i></a>
                @endif
            </div>
        @endif
    </section>
@endsection