@extends('layouts.app')

@section('title', 'Contact Us')

@section('content')
@php
    $heroImg = collect(app(\App\Services\Catalog::class)->collections())->pluck('image')->filter()->first();
    $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="M21 6c-.7.4-1.4.6-2.2.7a3.8 3.8 0 001.7-2.1c-.8.5-1.6.8-2.5 1a3.9 3.9 0 00-6.7 3.5A11 11 0 014 5.100a3.900 3.900 0 001.200 5.200c-.6 0-1.200-.2-1.700-.5 0 1.900 1.300 3.500 3.100 3.900-.6.200-1.200.2-1.700.1a3.900 3.900 0 003.600 2.700A7.900 7.900 0 013 18.200 11 11 0 009 20c7 0 11-6 10.800-11.200.8-.6 1.500-1.300 2.200-2.200z"/>',
        '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;
@endphp

<section class="sh-hero"@if ($heroImg) style="background-image:url('{{ $heroImg }}')"@endif>
  <div class="sh-hero-in">
    <h1>Contact Us</h1>
    <nav class="sh-crumb"><a href="{{ route('home') }}">Home</a><i></i><span>Contact Us</span></nav>
  </div>
</section>

<section class="ct-info container">
  <div class="ct-col">
    <h3>Call us</h3>
    <p>Questions about an order, sizing or anything else? Call or message us, we reply within one working day.</p>
    @if ($company->phone_number)<a href="tel:{{ preg_replace('/[^0-9+]/', '', $company->phone_number) }}" class="ct-big">{{ $company->phone_number }}</a>@endif
  </div>
  <div class="ct-col">
    <h3>Email us</h3>
    <p>Send us an email and our team will get back to you as soon as possible.</p>
    @if ($company->company_email)<a href="mailto:{{ $company->company_email }}" class="ct-big">{{ $company->company_email }}</a>@endif
  </div>
  <div class="ct-col">
    <h3>Visit us</h3>
    @if ($company->full_address)<p>{{ $company->full_address }}</p>@endif
    @if ($company->hours)<p class="ct-big">{{ $company->hours }}</p>@endif
  </div>
  <div class="ct-col">
    <h3>Social media</h3>
    <div class="ct-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>
  </div>
</section>

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

<section class="ct-form container">
  <h2>Get in touch</h2>
  <form id="contactForm" data-ajax action="{{ route('contact.send') }}" method="POST" novalidate>
    <div class="ct-two">
      <label class="ct-f"><input name="name" placeholder="Your Name" autocomplete="name"><small class="ferr"></small></label>
      <label class="ct-f"><input type="email" name="email" placeholder="Your Email" autocomplete="email"><small class="ferr"></small></label>
    </div>
    <label class="ct-f"><input type="tel" name="phone" placeholder="Phone Number" autocomplete="tel"><small class="ferr"></small></label>
    <label class="ct-f"><textarea name="message" rows="4" placeholder="Your Message"></textarea><small class="ferr"></small></label>
    <input type="text" name="website" tabindex="-1" autocomplete="off" style="position:absolute;left:-9999px" aria-hidden="true">
    <button class="btn">Send message</button>
  </form>
</section>
@endsection