@extends('layouts.site')
@section('title', \App\Models\SiteSetting::get('advertisers_meta_title', 'Advertisers & Sponsors - Faith & Future Summit'))
@section('meta_description', \App\Models\SiteSetting::get('advertisers_meta_description', 'Sponsorship opportunities for Faith & Future Summit.'))
@section('breadcrumbs', '[{"name":"Advertisers & Sponsors"}]')

@section('content')
<section class="max-w-container-max mx-auto px-margin-mobile py-stack-xl">
  <div class="text-center reveal mb-16">
    <span class="text-primary font-label-caps tracking-widest block mb-4 uppercase">Partner With Us</span>
    <x-heading key="advertisers_heading" tag="h1" default="Advertisers &amp; Sponsors" class="font-headline-lg text-white mb-4" />
    <p class="font-body-lg text-on-surface-variant max-w-2xl mx-auto">Connect with a high-impact audience of scholars, leaders, and decision-makers through curated sponsorship packages.</p>
  </div>

  <div class="grid md:grid-cols-2 max-w-3xl mx-auto gap-gutter">
    <div class="reveal rounded-2xl border border-border-subtle bg-surface-elevation-1 p-8 hover:border-primary/40 transition-all group flex flex-col">
      <div class="w-14 h-14 rounded-xl bg-surface-container flex items-center justify-center mb-6 group-hover:bg-primary/10 transition-colors">
        <span class="material-symbols-outlined text-3xl text-muted group-hover:text-primary">trophy</span>
      </div>
      <h3 class="font-bold text-xl text-white mb-2">Silver Package</h3>
      <p class="text-primary font-display-xl text-3xl mb-6">$500</p>
      <ul class="space-y-3 mb-8 text-on-surface-variant text-sm">
        <li class="flex items-start gap-2"><span class="material-symbols-outlined text-primary text-base">check_circle</span>Logo on event website</li>
        <li class="flex items-start gap-2"><span class="material-symbols-outlined text-primary text-base">check_circle</span>Social media mention</li>
        <li class="flex items-start gap-2"><span class="material-symbols-outlined text-primary text-base">check_circle</span>Digital brochure inclusion</li>
        <li class="flex items-start gap-2"><span class="material-symbols-outlined text-primary text-base">check_circle</span>1 complimentary pass</li>
      </ul>
      <button onclick="openPartnerPopup('Silver')" class="w-full py-3 border border-border-subtle text-white rounded-xl font-bold hover:bg-primary hover:border-primary transition-all mt-auto">Get Silver</button>
    </div>

    <div class="reveal rounded-2xl border-2 border-primary/40 bg-surface-elevation-1 p-8 hover:border-primary transition-all group scale-[1.03] relative flex flex-col" style="transition-delay:100ms;">
      <span class="absolute -top-3 left-1/2 -translate-x-1/2 bg-primary text-white px-4 py-0.5 rounded-full text-xs font-bold uppercase tracking-widest">Popular</span>
      <div class="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center mb-6 group-hover:bg-primary/20 transition-colors">
        <span class="material-symbols-outlined text-3xl text-primary">verified</span>
      </div>
      <h3 class="font-bold text-xl text-white mb-2">Gold Package</h3>
      <p class="text-primary font-display-xl text-3xl mb-6">$1,500</p>
      <ul class="space-y-3 mb-8 text-on-surface-variant text-sm">
        <li class="flex items-start gap-2"><span class="material-symbols-outlined text-primary text-base">check_circle</span>Everything in Silver</li>
        <li class="flex items-start gap-2"><span class="material-symbols-outlined text-primary text-base">check_circle</span>Banner placement at venue</li>
        <li class="flex items-start gap-2"><span class="material-symbols-outlined text-primary text-base">check_circle</span>Dedicated email blast</li>
        <li class="flex items-start gap-2"><span class="material-symbols-outlined text-primary text-base">check_circle</span>3 complimentary passes</li>
        <li class="flex items-start gap-2"><span class="material-symbols-outlined text-primary text-base">check_circle</span>Speaking slot (5 min)</li>
      </ul>
      <button onclick="openPartnerPopup('Gold')" class="w-full py-3 bg-primary text-white rounded-xl font-bold hover:shadow-[0_0_20px_rgba(37,99,255,0.4)] transition-all mt-auto">Get Gold</button>
    </div>
  </div>

  <div class="reveal text-center mt-16 p-10 rounded-3xl bg-surface-elevation-1 border border-border-subtle">
    <h3 class="font-headline-lg text-2xl text-white mb-4">Custom Partnership</h3>
    <p class="text-on-surface-variant max-w-lg mx-auto mb-6">Looking for something tailored? Let us design a partnership package that fits your organization's unique goals.</p>
    <a href="{{ route('contact') }}" class="inline-flex items-center gap-2 bg-primary text-white px-8 py-4 rounded-xl font-bold hover:shadow-[0_0_20px_rgba(37,99,255,0.4)] transition-all">Contact Us</a>
  </div>
</section>
@endsection