@extends('layouts.app')

@section('title', 'Contact Us')
@section('description', 'Get in touch with ' . $company->name . ': visit us, call us or send a message.')

@section('content')
@php
    $icons = [
        'facebook' => '<path d="M14 8h3V4h-3a4 4 0 00-4 4v3H7v4h3v6h4v-6h3l1-4h-4V8z"/>',
        'instagram' => '<rect x="4" y="4" width="16" height="16" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17" cy="7" r=".5"/>',
        'twitter' => '<path d="M4 4l16 16M20 4L4 20"/>',
        'linkedin' => '<rect x="4" y="9" width="3.500" height="11"/><circle cx="5.700" cy="5.300" r="1.800"/><path d="M10 9h3.300v1.600c.6-1.100 1.900-1.900 3.500-1.900 3 0 3.700 2 3.700 4.600V20H17v-5.500c0-1.300-.2-2.400-1.700-2.400s-1.800 1.100-1.800 2.400V20H10z"/>',
    ];
    $whatsapp = $company->whatsapp_url;
    $phone = trim((string) $company->phone_number);
    $mail = trim((string) $company->company_email);
@endphp
<div class="fq-band">
  <div class="container">
    <nav class="pb-crumb" aria-label="Breadcrumb"><a href="{{ route('home') }}">Home</a><i>/</i><span>Contact us</span></nav>
  </div>
</div>

<main>
  <section class="container ctx">
    <form class="ctx-form" id="contactForm" data-ajax action="{{ route('contact.send') }}" method="POST" novalidate>
      <h1 class="sr-only">Contact us</h1>
      <label class="field ctx-f"><span>Name:</span><input name="name" autocomplete="name" maxlength="100"><small class="ferr"></small></label>
      <label class="field ctx-f"><span>Email:</span><input type="email" name="email" autocomplete="email" maxlength="150"><small class="ferr"></small></label>
      <label class="field ctx-f"><span>Phone number:</span><input type="tel" name="phone" autocomplete="tel" maxlength="20"><small class="ferr"></small></label>
      <label class="field ctx-f"><span>Message:</span><textarea name="message" rows="3" maxlength="3000"></textarea><small class="ferr"></small></label>
      <input type="text" name="website" class="hp" tabindex="-1" autocomplete="off" aria-hidden="true">
      <button class="btn">Send now</button>
    </form>

    <div class="ctx-info">
      <h2>Keep In Touch with Us</h2>
      <p>Questions about an order, sizing or anything else? Send us a message or reach out directly &mdash; we reply within one working day.</p>

      @if ($company->full_address)
        <h3>Visit us:</h3><p>{{ $company->full_address }}</p>
      @endif
      @if ($mail !== '')
        <h3>Email us:</h3><p><a href="mailto:{{ $mail }}">{{ $mail }}</a></p>
      @endif
      @if ($phone !== '')
        <h3>Call us:</h3><p><a href="tel:{{ preg_replace('/[^0-9+]/', '', $phone) }}">{{ $phone }}</a></p>
      @endif
      @if ($company->hours)
        <h3>We are open:</h3><p>{{ $company->hours }}</p>
      @endif

      @if ($company->socials() || $whatsapp)
      <h3>Follow us:</h3>
      <div class="ctx-social">
        @foreach ($company->socials() as $key => $url)
          <a href="{{ $url }}" target="_blank" rel="noopener" aria-label="{{ ucfirst($key) }}"><svg viewBox="0 0 24 24">{!! $icons[$key] ?? '' !!}</svg></a>
        @endforeach
        @if ($whatsapp)
          <a href="{{ $whatsapp }}" target="_blank" rel="noopener" aria-label="WhatsApp"><svg viewBox="0 0 24 24"><path d="M4 20l1.200-4.100A8 8 0 1 1 8.200 18.800z"/><path d="M9 9c0 3 3 6 6 6l1-1.500-2-1-1 .8c-1-.5-1.700-1.200-2.200-2.200l.8-1-1-2z"/></svg></a>
        @endif
      </div>
      @endif
    </div>
  </section>

  @if ($company->map_embed_url)
  <section class="container ctx-mapwrap">
    <iframe class="ctx-map" src="{{ $company->map_embed_url }}" loading="lazy" referrerpolicy="no-referrer-when-downgrade" title="Map"></iframe>
  </section>
  @endif
</main>
@endsection