@extends('layouts.site')
@section('title', 'Contact - Faith & Future Summit')
@section('breadcrumbs', '[{"name":"Contact"}]')

@section('content')
<section class="max-w-container-max mx-auto px-margin-mobile py-stack-xl">
  <div class="grid lg:grid-cols-2 gap-16">
    <div class="reveal">
      <span class="text-primary font-label-caps tracking-widest block mb-4 uppercase">Get In Touch</span>
      <h1 class="font-headline-lg text-headline-lg text-white mb-6">Contact Us</h1>
      <p class="text-on-surface-variant mb-8 leading-relaxed">For inquiries, partnerships, or academic collaboration, reach out to the FFS organizing team.</p>
      <div class="space-y-5">
        @if($email = \App\Models\SiteSetting::get('contact_email'))
        <div class="flex items-center gap-4">
          <div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center"><span class="material-symbols-outlined text-primary">mail</span></div>
          <div><p class="text-xs text-muted uppercase font-label-caps">Email</p><a href="mailto:{{ $email }}" class="text-white hover:text-primary transition-colors">{{ $email }}</a></div>
        </div>
        @endif
        @if($phone = \App\Models\SiteSetting::get('contact_phone'))
        <div class="flex items-center gap-4">
          <div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center"><span class="material-symbols-outlined text-primary">call</span></div>
          <div><p class="text-xs text-muted uppercase font-label-caps">Phone</p><a href="tel:{{ $phone }}" class="text-white hover:text-primary transition-colors">{{ $phone }}</a></div>
        </div>
        @endif
        @if($address = \App\Models\SiteSetting::get('contact_address'))
        <div class="flex items-center gap-4">
          <div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center"><span class="material-symbols-outlined text-primary">location_on</span></div>
          <div><p class="text-xs text-muted uppercase font-label-caps">Address</p><p class="text-white">{{ $address }}</p></div>
        </div>
        @endif
      </div>
    </div>
    <div class="reveal p-10 rounded-3xl bg-surface-elevation-1 border border-border-subtle">
      <form class="space-y-5" method="POST" action="">
        @csrf
        <div>
          <label class="block text-sm text-muted mb-1.5">Name</label>
          <input type="text" name="name" required class="w-full bg-surface-container text-white border border-border-subtle rounded-xl px-4 py-3 outline-none focus:border-primary transition-colors"/>
        </div>
        <div>
          <label class="block text-sm text-muted mb-1.5">Email</label>
          <input type="email" name="email" required class="w-full bg-surface-container text-white border border-border-subtle rounded-xl px-4 py-3 outline-none focus:border-primary transition-colors"/>
        </div>
        <div>
          <label class="block text-sm text-muted mb-1.5">Message</label>
          <textarea name="message" rows="5" required class="w-full bg-surface-container text-white border border-border-subtle rounded-xl px-4 py-3 outline-none focus:border-primary transition-colors"></textarea>
        </div>
        <button type="submit" class="bg-primary text-white px-8 py-3 rounded-xl font-bold hover:shadow-[0_0_20px_rgba(37,99,255,0.4)] transition-all w-full">Send Message</button>
      </form>
    </div>
  </div>
</section>

{{-- Location Block --}}
<section class="max-w-container-max mx-auto px-margin-mobile pb-stack-lg reveal">
  <div class="grid lg:grid-cols-2 gap-12 items-center rounded-3xl bg-surface-elevation-1 border border-border-subtle p-8 md:p-14">
    <div>
      <span class="text-primary font-label-caps tracking-widest block mb-4 uppercase">Find Us</span>
      <h2 class="font-headline-lg text-headline-lg text-white mb-4">Location Block</h2>
      <p class="text-on-surface-variant mb-6 leading-relaxed">Faith & Future Summit Secretariat, Al-Kawthar University, Gulshan-e-Iqbal, Karachi.</p>
      <div class="flex items-center gap-3">
        <div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center"><span class="material-symbols-outlined text-primary">location_on</span></div>
        <div>
          <p class="text-xs text-muted uppercase font-label-caps">Address</p>
          <p class="text-white text-sm">Al-Kawthar University, Gulshan-e-Iqbal, Karachi</p>
        </div>
      </div>
    </div>
    <div class="rounded-2xl overflow-hidden border border-border-subtle h-[300px] md:h-[400px]">
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3619.5!2d67.0802483!3d24.9056071!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3eb33fd4e9a50e21%3A0xd2e6ebd4be80de63!2sAl-Kawthar%20University!5e0!3m2!1sen!2s!4v1" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
    </div>
  </div>
</section>

{{-- FAQ Preview --}}
<section class="max-w-container-max mx-auto px-margin-mobile pb-stack-lg reveal">
  <div class="rounded-3xl bg-surface-elevation-1 border border-border-subtle p-8 md:p-14">
    <h2 class="font-headline-lg text-headline-lg text-white mb-3 text-center">Frequently Asked Questions</h2>
    <p class="text-on-surface-variant text-center max-w-2xl mx-auto mb-10">Quick answers to common queries. For more details, visit our full FAQ page.</p>
    <div class="grid sm:grid-cols-3 gap-4">
      <button onclick="openTicketPopup()" class="text-left p-6 rounded-2xl border border-border-subtle bg-surface-container cursor-pointer hover:border-primary/50 transition-all group">
        <span class="material-symbols-outlined text-primary text-2xl mb-3 block">confirmation_number</span>
        <h3 class="font-bold text-white text-sm group-hover:text-primary transition-colors mb-2">How do I get tickets?</h3>
        <p class="text-xs text-on-surface-variant leading-relaxed">Use the Get Tickets popup to register for the upcoming summit.</p>
      </button>
      <button onclick="document.querySelector('form').scrollIntoView({behavior:'smooth'})" class="text-left p-6 rounded-2xl border border-border-subtle bg-surface-container cursor-pointer hover:border-primary/50 transition-all group">
        <span class="material-symbols-outlined text-primary text-2xl mb-3 block">campaign</span>
        <h3 class="font-bold text-white text-sm group-hover:text-primary transition-colors mb-2">How can I contact the media team?</h3>
        <p class="text-xs text-on-surface-variant leading-relaxed">Use the contact form on this page to reach the media team.</p>
      </button>
      <button onclick="openPartnerPopup()" class="text-left p-6 rounded-2xl border border-border-subtle bg-surface-container cursor-pointer hover:border-primary/50 transition-all group">
        <span class="material-symbols-outlined text-primary text-2xl mb-3 block">handshake</span>
        <h3 class="font-bold text-white text-sm group-hover:text-primary transition-colors mb-2">Can I invite speakers?</h3>
        <p class="text-xs text-on-surface-variant leading-relaxed">Use the Partner popup to invite speakers for your events.</p>
      </button>
    </div>
    <div class="text-center mt-8">
      <a href="{{ url('/faq') }}" class="inline-flex items-center gap-2 text-primary font-bold hover:gap-3 transition-all text-sm">View All FAQs <span class="material-symbols-outlined text-sm">arrow_forward</span></a>
    </div>
  </div>
</section>

@endsection