@extends('layouts.app')
@section('title', 'Contact Us — Paytell Company Limited')

@section('content')
<section style="background:var(--blue-900);padding:56px 0 48px;border-bottom:1px solid rgba(255,255,255,0.12);">
    <div class="wrap">
        <p style="font-size:12.5px;color:rgba(255,255,255,0.55);margin-bottom:14px;">Home › Contact</p>
        <h1 style="font-family:'Barlow Semi Condensed';font-weight:700;font-size:38px;color:#fff;line-height:1.1;max-width:680px;margin-bottom:14px;">Get in touch.</h1>
        <p style="font-size:15.5px;color:rgba(255,255,255,0.75);max-width:580px;">Whether it's a machinery quote, construction enquiry or a real estate question — our team is ready to help.</p>
    </div>
</section>

<section class="section">
  <div class="wrap">
    <div style="display:grid;grid-template-columns:1.1fr 0.9fr;gap:64px;">
      <div>
        <div class="eyebrow">Send us a message</div>
        <h2 style="font-size:28px;margin-bottom:20px;">We'll respond within 24 hours.</h2>
        <form id="contact-form" style="display:flex;flex-direction:column;gap:16px;">
          @csrf
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
            <div><label style="font-size:12.5px;font-weight:600;letter-spacing:0.3px;display:block;margin-bottom:6px;color:var(--ink);">Full name</label><input type="text" name="name" placeholder="Your name" style="width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:3px;font-family:Inter,sans-serif;font-size:14px;" required></div>
            <div><label style="font-size:12.5px;font-weight:600;letter-spacing:0.3px;display:block;margin-bottom:6px;color:var(--ink);">Company</label><input type="text" name="company" placeholder="Company name" style="width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:3px;font-family:Inter,sans-serif;font-size:14px;"></div>
          </div>
          <div><label style="font-size:12.5px;font-weight:600;letter-spacing:0.3px;display:block;margin-bottom:6px;color:var(--ink);">Email</label><input type="email" name="email" placeholder="your@email.com" style="width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:3px;font-family:Inter,sans-serif;font-size:14px;" required></div>
          <div><label style="font-size:12.5px;font-weight:600;letter-spacing:0.3px;display:block;margin-bottom:6px;color:var(--ink);">Phone</label><input type="tel" name="phone" placeholder="+233 ..." style="width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:3px;font-family:Inter,sans-serif;font-size:14px;"></div>
          <div>
            <label style="font-size:12.5px;font-weight:600;letter-spacing:0.3px;display:block;margin-bottom:6px;color:var(--ink);">Service interested in</label>
            <select name="service_interested" style="width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:3px;font-family:Inter,sans-serif;font-size:14px;color:var(--ink);">
              <option value="">Select a service</option>
              <option value="Heavy duty machinery — buy">Heavy duty machinery — buy</option>
              <option value="Heavy duty machinery — hire">Heavy duty machinery — hire</option>
              <option value="Equipment servicing &amp; parts">Equipment servicing &amp; parts</option>
              <option value="Civil engineering">Civil engineering</option>
              <option value="Road construction">Road construction</option>
              <option value="Quarry services">Quarry services</option>
              <option value="Real estate &amp; land">Real estate &amp; land</option>
              <option value="Forex bureau">Forex bureau</option>
              <option value="Other / general enquiry">Other / general enquiry</option>
            </select>
          </div>
          <div><label style="font-size:12.5px;font-weight:600;letter-spacing:0.3px;display:block;margin-bottom:6px;color:var(--ink);">Message</label><textarea name="message" rows="5" placeholder="Describe your project or enquiry..." style="width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:3px;font-family:Inter,sans-serif;font-size:14px;resize:vertical;" required></textarea></div>
          <button type="submit" class="cta-btn" style="align-self:flex-start;cursor:pointer;border:none;">Send enquiry</button>
        </form>
      </div>
      
      <div>
        <div style="background:var(--blue-900);border-radius:4px;padding:30px;margin-bottom:20px;">
          <div class="eyebrow" style="color:#F0AAB4;">Head office</div>
          <h4 style="color:#fff;font-size:18px;margin-bottom:10px;">{!! nl2br(e($settings['address'] ?? "Tweneboah House\nEast Legon, Accra")) !!}</h4>
          <p style="color:rgba(255,255,255,0.72);font-size:14px;line-height:1.7;">{!! nl2br(e($settings['office_hours'] ?? "Monday – Saturday\n8:00 am – 6:00 pm")) !!}</p>
        </div>
        
        <div style="background:var(--paper-alt);border:1px solid var(--line);border-radius:4px;padding:26px;display:flex;flex-direction:column;gap:14px;">
          <div style="display:flex;align-items:flex-start;gap:12px;">
            <svg style="width:16px;height:16px;fill:var(--crimson-600);flex:none;margin-top:2px;" viewBox="0 0 24 24"><path d="M6.6 10.8c1.4 2.7 3.5 4.9 6.2 6.2l2.1-2.1c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1v3.4c0 .6-.4 1-1 1C10.6 20.7 3.3 13.4 3.3 4.5c0-.6.4-1 1-1h3.4c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z"/></svg>
            <div><p style="font-size:13px;font-weight:600;margin-bottom:2px;">Phone</p><p style="font-size:14.5px;color:var(--steel);">{{ $settings['phone'] ?? '+233 244 271 418' }}</p></div>
          </div>
          <div style="display:flex;align-items:flex-start;gap:12px;">
            <svg style="width:16px;height:16px;fill:var(--crimson-600);flex:none;margin-top:2px;" viewBox="0 0 24 24"><path d="M3 5.5h18a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-11a1 1 0 0 1 1-1zm.8 1.8v.1l7.7 5.6a1 1 0 0 0 1 0l7.7-5.6v-.1H3.8zm16.4 1.6-6.6 4.8a2.5 2.5 0 0 1-2.9 0L2.8 8.9v8.1h17.4z"/></svg>
            <div><p style="font-size:13px;font-weight:600;margin-bottom:2px;">Email</p><p style="font-size:14.5px;color:var(--steel);">{{ $settings['email'] ?? 'info@paytellcompanylimited.com' }}</p></div>
          </div>
          <div style="display:flex;align-items:flex-start;gap:12px;">
            <svg style="width:16px;height:16px;fill:var(--crimson-600);flex:none;margin-top:2px;" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5.2 6.1 11.3 6.4 11.6a.8.8 0 0 0 1.2 0C12.9 20.3 19 14.2 19 9a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z"/></svg>
            <div><p style="font-size:13px;font-weight:600;margin-bottom:2px;">Address</p><p style="font-size:14.5px;color:var(--steel);">{!! nl2br(e($settings['address'] ?? "Tweneboah House, East Legon\nAccra, Ghana")) !!}</p></div>
          </div>
        </div>
      </div>
      
    </div>
  </div>
</section>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
document.getElementById('contact-form').addEventListener('submit', function(e) {
    e.preventDefault();
    const btn = this.querySelector('button[type="submit"]');
    const oldText = btn.innerText;
    btn.innerText = 'Sending...';
    btn.disabled = true;

    fetch('{{ route("contact.submit") }}', {
        method: 'POST',
        headers: {
            'Accept': 'application/json'
        },
        body: new FormData(this)
    })
    .then(res => res.json())
    .then(data => {
        btn.innerText = oldText;
        btn.disabled = false;
        if(data.success) {
            Swal.fire('Sent!', data.message, 'success');
            this.reset();
        } else {
            Swal.fire('Error', 'Something went wrong.', 'error');
        }
    })
    .catch(err => {
        btn.innerText = oldText;
        btn.disabled = false;
        Swal.fire('Error', 'Failed to send message. Please try again.', 'error');
    });
});
</script>
@endpush
@endsection