@extends('layouts.site')
@section('title', \App\Models\SiteSetting::get('get_involved_meta_title', 'Get Involved - Faith & Future Summit'))
@section('meta_description', \App\Models\SiteSetting::get('get_involved_meta_description', 'Join Faith & Future Summit as a participant, volunteer, or partner.'))

@section('content')

{{-- Hero --}}
<section class="relative pt-28 pb-12 md:py-28 px-margin-mobile overflow-hidden">
  <div class="absolute inset-0 z-0">
    <div class="absolute -top-20 right-0 h-96 w-96 rounded-full bg-primary/5 blur-3xl"></div>
    <div class="absolute bottom-0 left-1/4 h-64 w-64 rounded-full bg-tertiary/5 blur-3xl"></div>
  </div>
  <div class="max-w-5xl mx-auto relative z-10">
    <div class="grid md:grid-cols-12 gap-8 items-center reveal">
      <div class="md:col-span-7 lg:col-span-8">
        <span class="text-primary font-label-caps tracking-widest block mb-4 uppercase">Participate</span>
        <x-heading key="hero_heading" tag="h1" default="Get Involved" class="font-display-xl text-white mb-6" />
        <p class="font-body-lg text-on-surface-variant max-w-lg mb-6">Join as a participant, volunteer, speaker nominee, media collaborator, or institutional collaborator. There's a place for everyone at FFS.</p>
        <div class="flex flex-wrap gap-3">
          @foreach(['Volunteer','Nominate','Collaborate'] as $pill)
          <span class="px-3 py-1.5 rounded-full text-xs font-bold tracking-widest uppercase border border-border-subtle bg-surface-elevation-1 text-on-surface-variant">{{ $pill }}</span>
          @endforeach
        </div>
        <div class="flex flex-wrap gap-4 mt-6">
          <a href="#form" class="bg-primary text-white px-6 py-3 rounded-xl font-bold text-sm hover:shadow-[0_0_20px_rgba(37,99,255,0.4)] transition-all">Submit Interest</a>
        </div>
      </div>
      <div class="md:col-span-5 lg:col-span-4">
        <div class="rounded-2xl bg-surface-elevation-1 border border-border-subtle p-10 text-center min-h-[280px] flex items-center justify-center">
          <div>
            <span class="material-symbols-outlined text-5xl text-primary/40 block mb-4">diversity_3</span>
            <p class="text-on-surface-variant text-sm">Community & Collaboration</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

{{-- Involvement Options --}}
<section class="max-w-5xl mx-auto px-margin-mobile pb-12 reveal">
  <x-heading key="involvement_heading" default="Involvement Options" class="font-headline-lg text-white mb-8" />
  <div class="grid md:grid-cols-3 gap-6">
    @foreach([['confirmation_number','Attend a Summit','Participate as an audience member in our upcoming or past summit editions.','Learn More'],['volunteer_activism','Volunteer','Contribute your time and skills to help bring the summit to life.','Apply to Volunteer'],['how_to_vote','Nominate a Speaker','Know someone whose work aligns with our mission? Nominate them as a speaker.','Submit Nomination'],['feed','Media Collaboration','Journalists and media outlets interested in covering the summit can apply.','Register Interest'],['domain_verification','Institutional Collaboration','Universities, research centers, and organizations can partner with FFS.','Partner With Us'],['notifications_active','Join Updates','Subscribe to stay informed about upcoming events, speakers, and registration.','Subscribe Now']] as $o)
    <div class="p-6 rounded-2xl bg-surface-elevation-1 border border-border-subtle hover:border-primary/30 transition-all group">
      <div class="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center mb-4 group-hover:bg-primary transition-colors"><span class="material-symbols-outlined text-primary group-hover:text-white">{{ $o[0] }}</span></div>
      <h3 class="font-bold text-white text-lg mb-2">{{ $o[1] }}</h3>
      <p class="text-on-surface-variant text-sm mb-4">{{ $o[2] }}</p>
      <a href="@if($loop->first){{ route('events.index') }}@elseif($loop->last){{ route('summit-updates') }}@elseif($loop->index===1){{ route('contact') }}@elseif($loop->index===2){{ route('speakers.index') }}@elseif($loop->index===3){{ route('contact') }}@else{{ route('contact') }}@endif" class="text-primary text-sm font-bold inline-flex items-center gap-1 group-hover:gap-2 transition-all">{{ $o[3] }} <span class="material-symbols-outlined text-sm">arrow_forward</span></a>
    </div>
    @endforeach
  </div>
</section>

{{-- Why Get Involved --}}
<section class="max-w-5xl mx-auto px-margin-mobile pb-12 reveal">
  <x-heading key="why_heading" default="Why Get Involved" class="font-headline-lg text-white mb-8" />
  <div class="grid md:grid-cols-2 gap-6">
    <div class="p-8 rounded-2xl bg-surface-elevation-1 border border-border-subtle hover:border-primary/30 transition-all group">
      <div class="w-14 h-14 rounded-2xl bg-primary/10 flex items-center justify-center mb-5 group-hover:bg-primary transition-colors"><span class="material-symbols-outlined text-2xl text-primary group-hover:text-white">diversity_3</span></div>
      <h3 class="font-headline-md text-xl text-white mb-3">Connect with Thought Leaders</h3>
      <p class="text-on-surface-variant leading-relaxed">Build meaningful networks with scholars, researchers, and visionaries from across the globe who are shaping the future of faith, ethics, and leadership.</p>
    </div>
    <div class="p-8 rounded-2xl bg-surface-elevation-1 border border-border-subtle hover:border-primary/30 transition-all group">
      <div class="w-14 h-14 rounded-2xl bg-primary/10 flex items-center justify-center mb-5 group-hover:bg-primary transition-colors"><span class="material-symbols-outlined text-2xl text-primary group-hover:text-white">forum</span></div>
      <h3 class="font-headline-md text-xl text-white mb-3">Support Meaningful Dialogue</h3>
      <p class="text-on-surface-variant leading-relaxed">Be part of future-focused conversations that bridge faith-informed scholarship with contemporary global challenges across technology, society, and human development.</p>
    </div>
  </div>
</section>

{{-- Interest Form --}}
<section id="form" class="max-w-3xl mx-auto px-margin-mobile pb-stack-xl reveal">
  <div class="rounded-3xl bg-surface-elevation-1 border border-border-subtle p-8 md:p-12">
    <x-heading key="form_heading" default="Interest Form" class="font-headline-lg text-white mb-2" />
    <p class="text-on-surface-variant mb-8">Interested in getting involved? Fill out the form below and our team will reach out to you.</p>
    <form class="space-y-5" onsubmit="event.preventDefault();alert('Thank you for your interest! We will contact you soon.');">
      <div class="grid sm:grid-cols-2 gap-4">
        <label class="block"><span class="text-sm text-on-surface-variant mb-1.5 block">Full Name *</span><input type="text" 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" placeholder="Abdullah Saeed"/></label>
        <label class="block"><span class="text-sm text-on-surface-variant mb-1.5 block">Email *</span><input type="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" placeholder="you@example.com"/></label>
      </div>
      <div class="grid sm:grid-cols-2 gap-4">
        <label class="block"><span class="text-sm text-on-surface-variant mb-1.5 block">Phone</span><input type="tel" 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" placeholder="+92 300 1234567"/></label>
        <label class="block"><span class="text-sm text-on-surface-variant mb-1.5 block">Interest Type *</span>
          <select 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">
            <option value="">Select...</option>
            <option>Attend a Summit</option>
            <option>Volunteer</option>
            <option>Nominate a Speaker</option>
            <option>Media Collaboration</option>
            <option>Institutional Collaboration</option>
            <option>Other</option>
          </select>
        </label>
      </div>
      <label class="block"><span class="text-sm text-on-surface-variant mb-1.5 block">Message / Details</span><textarea rows="4" 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" placeholder="Tell us about your interest or any specific questions..."></textarea></label>
      <button type="submit" class="w-full bg-primary text-white py-4 rounded-xl font-bold text-lg hover:shadow-[0_0_20px_rgba(37,99,255,0.4)] transition-all">Submit Interest</button>
    </form>
  </div>
</section>

@endsection