@extends('layouts.app')
@section('title','Kontak - OneDesignSpot, OneDesign')
@section('meta_description', 'Hubungi OneDesign untuk kebutuhan digital printing & web design. Alamat: Jl. Sudirman No. 123, Jakarta. WA: 0812-3456-7890. Email: hello@onedesign.id. Buka Senin-Sabtu 08:00-17:00 WIB.')
@section('canonical_url', route('contact.index'))
@section('og_type', 'website')
@section('og_title', 'Kontak - OneDesignSpot, OneDesign')
@section('og_description', 'Hubungi OneDesign untuk kebutuhan digital printing & web design. Alamat: Jl. Sudirman No. 123, Jakarta. WA: 0812-3456-7890. Email: hello@onedesign.id. Buka Senin-Sabtu 08:00-17:00 WIB.')
@section('og_image', asset('images/og-contact.jpg'))
@section('twitter_card', 'summary_large_image')
@section('twitter_title', 'Kontak - OneDesignSpot, OneDesign')
@section('twitter_description', 'Hubungi OneDesign untuk kebutuhan digital printing & web design. Alamat: Jl. Sudirman No. 123, Jakarta.')
@section('twitter_image', asset('images/twitter-contact.jpg'))
@section('content')
<div class="bg-light py-4"><div class="container"><h1 class="fw-bold mb-1">{{ $globalSettings['contact_title'] ?? 'Hubungi Kami' }}</h1><p class="text-muted mb-0">{{ $globalSettings['contact_subtitle'] ?? 'Kami siap membantu kebutuhan printing & web design Anda.' }}</p></div></div>
<div class="container py-4">
  <div class="row g-4">
    <div class="col-lg-5">
      <div class="card border-0 shadow-sm p-4 h-100">
        <h5 class="fw-bold">Info Kontak</h5>
        <ul class="list-unstyled small">
          <li class="mb-3"><i class="bi bi-geo-alt text-primary me-2"></i>{{ $globalSettings['site_address'] }}</li>
          <li class="mb-3"><i class="bi bi-telephone text-primary me-2"></i>{{ $globalSettings['site_phone'] }} / WA: {{ $globalSettings['site_whatsapp'] }}</li>
          <li class="mb-3"><i class="bi bi-envelope text-primary me-2"></i>{{ $globalSettings['site_email'] }}</li>
        </ul>
        <div class="bg-light rounded-3 p-3">
          <h6 class="fw-bold small">Jam Operasional</h6>
          <p class="small text-muted mb-0">{!! nl2br(e($globalSettings['contact_hours'] ?? "Senin - Sabtu: 08.00 - 17.00 WIB\nMinggu: Tutup")) !!}</p>
        </div>
      </div>
    </div>
    <div class="col-lg-7">
      <div class="card border-0 shadow-sm p-4">
        <h5 class="fw-bold mb-3">Kirim Pesan</h5>
        <form method="POST" action="{{ route('contact.store') }}">@csrf
          <div class="row g-3">
            <div class="col-md-6"><label class="form-label">Nama *</label><input name="name" value="{{ old('name') }}" class="form-control @error('name') is-invalid @enderror" required>@error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror</div>
            <div class="col-md-6"><label class="form-label">Email *</label><input name="email" type="email" value="{{ old('email') }}" class="form-control @error('email') is-invalid @enderror" required>@error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror</div>
            <div class="col-md-6"><label class="form-label">Telepon</label><input name="phone" value="{{ old('phone') }}" class="form-control"></div>
            <div class="col-md-6"><label class="form-label">Subjek</label><input name="subject" value="{{ old('subject') }}" class="form-control"></div>
            <div class="col-12"><label class="form-label">Pesan *</label><textarea name="message" rows="5" class="form-control @error('message') is-invalid @enderror" required>{{ old('message') }}</textarea>@error('message')<div class="invalid-feedback">{{ $message }}</div>@enderror</div>
            <div class="col-12"><button class="btn btn-primary px-4">Kirim Pesan <i class="bi bi-send ms-1"></i></button></div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Full Width Map Section -->
<section class="py-4 mb-4">
  <div class="container-fluid px-0">
    <div class="ratio ratio-16x9" style="max-height: 500px;">
      <iframe 
        src="{{ $globalSettings['contact_map_url'] ?? 'https://maps.google.com/maps?q=Jakarta&t=&z=13&ie=UTF8&iwloc=&output=embed' }}" 
        frameborder="0" 
        style="border:0; width: 100%; height: 100%;" 
        allowfullscreen 
        loading="lazy"
        referrerpolicy="no-referrer-when-downgrade">
      </iframe>
    </div>
  </div>
</section>

<!-- CTA Section -->
<section class="py-4 bg-dark text-white mb-4">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-8"><h3 class="fw-bold text-white">Siap Memulai Proyek Anda?</h3><p class="opacity-75 mb-0">Konsultasi gratis, estimasi harga transparan, pengerjaan cepat.</p></div>
      <div class="col-lg-4 text-lg-end mt-3 mt-lg-0">
        @if($globalSettings['online_order_enabled'] ?? true)
        <a href="{{ route('order.create') }}" class="btn btn-primary btn-lg px-4">Pesan Sekarang</a>
        @else
        <a href="https://wa.me/{{ $globalSettings['site_whatsapp'] }}" target="_blank" class="btn btn-success btn-lg px-4"><i class="bi bi-whatsapp me-1"></i> Chat WhatsApp</a>
        @endif
      </div>
    </div>
  </div>
</section>
@endsection