@extends('layouts.site')
@section('title', \App\Models\SiteSetting::get('support_meta_title', 'Support - Faith & Future Summit'))
@section('meta_description', \App\Models\SiteSetting::get('support_meta_description', 'Support Faith & Future Summit through donations and partnerships.'))
@section('breadcrumbs', '[{"name":"Support"}]')

@section('content')
<section class="py-stack-xl px-margin-mobile bg-surface-container-lowest">
<div class="max-w-container-max mx-auto">
<div class="text-center mb-16 reveal">
<span class="text-primary font-label-caps tracking-widest block mb-4 uppercase">Impact</span>
<x-heading key="support_heading" tag="h1" default="Support The Cause" class="font-headline-lg text-white mb-4" />
<p class="font-body-lg text-on-surface-variant max-w-2xl mx-auto">{{ \App\Models\SiteSetting::get('support_description', 'Help us sustain a platform for transformative leadership.') }}</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter">
<div class="p-10 rounded-3xl bg-surface-elevation-1 border border-border-subtle hover:border-primary/50 transition-all group reveal">
<div class="w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center mb-8 group-hover:bg-primary transition-colors">
<span class="material-symbols-outlined text-primary group-hover:text-white text-3xl">volunteer_activism</span>
</div>
<h3 class="font-bold text-2xl text-white mb-4">Donation</h3>
<p class="text-on-surface-variant mb-8 text-sm leading-relaxed">Fuel our scholarship fund for emerging leaders. Every contribution directly impacts future ethical pioneers.</p>
<button class="w-full py-4 bg-primary text-white rounded-xl font-bold hover:shadow-[0_0_20px_rgba(37,99,255,0.4)] transition-all">Donate Now</button>
</div>
<div class="p-10 rounded-3xl bg-surface-elevation-1 border border-border-subtle hover:border-primary/50 transition-all group reveal" style="transition-delay: 100ms;">
<div class="w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center mb-8 group-hover:bg-primary transition-colors">
<span class="material-symbols-outlined text-primary group-hover:text-white text-3xl">handshake</span>
</div>
<h3 class="font-bold text-2xl text-white mb-4">Partner with Us</h3>
<p class="text-on-surface-variant mb-8 text-sm leading-relaxed">Align your organization with our mission. We offer deep integration and shared value partnerships.</p>
<button class="w-full py-4 bg-primary text-white rounded-xl font-bold hover:shadow-[0_0_20px_rgba(37,99,255,0.4)] transition-all">Become a Partner</button>
</div>
<div class="p-10 rounded-3xl bg-surface-elevation-1 border border-border-subtle hover:border-primary/50 transition-all group reveal" style="transition-delay: 200ms;">
<div class="w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center mb-8 group-hover:bg-primary transition-colors">
<span class="material-symbols-outlined text-primary group-hover:text-white text-3xl">workspace_premium</span>
</div>
<h3 class="font-bold text-2xl text-white mb-4">Advertisers / Sponsors</h3>
<p class="text-on-surface-variant mb-8 text-sm leading-relaxed">Connect with our high-impact audience through curated Silver and Gold packages.</p>
<button class="w-full py-4 bg-primary text-white rounded-xl font-bold hover:shadow-[0_0_20px_rgba(37,99,255,0.4)] transition-all">View Packages</button>
</div>
</div>
</div>
</section>
@endsection