<x-conference-layout>
<x-slot name="title">Sponsors – {{ $conference['title'] ?? 'Conference' }}</x-slot>

    {{-- HERO --}}
    <x-conference-inner-hero
    pageTitle="Sponsors"
    label="Sponsors"
    subtitle="We thank our sponsors and supporters for their generous contribution to academic progress."
/>

<section class="bg-white">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">

        {{-- Intro --}}
        <div class="py-16 border-b border-gray-100">
            <p class="text-xl text-gray-600 font-light leading-relaxed max-w-3xl">
                The {{ $conference['logo_text'] ?? 'conference' }} is made possible through the generous support of our sponsors and partners. We are grateful to every organisation contributing to the advancement of academic and research excellence.
            </p>
        </div>

        {{-- Platinum --}}
        <div class="py-16 border-b border-gray-100">
            <div class="flex items-center gap-4 mb-10">
                <h2 class="text-2xl font-bold font-serif text-gray-900 whitespace-nowrap">Platinum Sponsors</h2>
                <div class="flex-1 h-px bg-gray-100"></div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                @foreach([1,2] as $i)
                <div class="flex items-center gap-7 p-8 border border-gray-100 rounded-2xl bg-gray-50 hover:shadow-lg hover:border-gray-200 transition-all duration-300 group">
                    <div class="w-20 h-20 shrink-0 rounded-xl bg-white border border-gray-200 flex items-center justify-center">
                        <i class="fas fa-building text-3xl text-gray-300 group-hover:text-gray-500 transition-colors"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold font-serif text-gray-900 mb-1 group-hover:text-orange-600 transition-colors">Platinum Sponsor {{ $i }}</h3>
                        <p class="text-sm text-gray-400 mb-3">Global Research & Innovation Group</p>
                        <span class="text-[10px] font-bold px-3 py-1 bg-gray-200 text-gray-600 rounded-full uppercase tracking-widest">Platinum Partner</span>
                    </div>
                </div>
                @endforeach
            </div>
        </div>

        {{-- Gold --}}
        <div class="py-16 border-b border-gray-100">
            <div class="flex items-center gap-4 mb-10">
                <h2 class="text-2xl font-bold font-serif text-gray-900 whitespace-nowrap">Gold Sponsors</h2>
                <div class="flex-1 h-px bg-gray-100"></div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
                @foreach([1,2,3] as $i)
                <div class="flex items-center gap-5 p-6 border border-gray-100 rounded-xl bg-white hover:shadow-md hover:border-amber-100 transition-all duration-300 group">
                    <div class="w-14 h-14 shrink-0 rounded-lg bg-amber-50 border border-amber-100 flex items-center justify-center">
                        <i class="fas fa-landmark text-xl text-amber-400 group-hover:text-amber-600 transition-colors"></i>
                    </div>
                    <div>
                        <h4 class="font-bold text-gray-900 text-sm mb-0.5 group-hover:text-amber-700 transition-colors">Gold Sponsor {{ $i }}</h4>
                        <p class="text-xs text-gray-400">International Research Fund</p>
                    </div>
                </div>
                @endforeach
            </div>
        </div>

        {{-- Silver & Bronze —  simple compact list --}}
        <div class="py-16 border-b border-gray-100">
            <div class="flex items-center gap-4 mb-10">
                <h2 class="text-2xl font-bold font-serif text-gray-900 whitespace-nowrap">Silver & Bronze Sponsors</h2>
                <div class="flex-1 h-px bg-gray-100"></div>
            </div>
            <div class="border border-gray-100 rounded-2xl overflow-hidden">
                @foreach([
                    ['Silver Sponsor 1','Academic Publishing House','Silver'],
                    ['Silver Sponsor 2','Technology Research Group','Silver'],
                    ['Silver Sponsor 3','National Education Foundation','Silver'],
                    ['Bronze Sponsor 1','Regional Business Council','Bronze'],
                    ['Bronze Sponsor 2','Science Media Network','Bronze'],
                    ['Bronze Sponsor 3','Open Research Initiative','Bronze'],
                ] as $i => $s)
                <div class="grid grid-cols-12 items-center {{ $i % 2 === 0 ? 'bg-white' : 'bg-gray-50' }} hover:bg-orange-50/30 transition-colors border-b border-gray-100 last:border-0">
                    <div class="col-span-1 px-5 py-4 flex items-center justify-center">
                        <div class="w-9 h-9 rounded-lg bg-gray-100 flex items-center justify-center">
                            <i class="fas fa-briefcase text-gray-400 text-xs"></i>
                        </div>
                    </div>
                    <div class="col-span-6 md:col-span-7 px-4 py-4">
                        <p class="font-bold text-gray-900 text-sm">{{ $s[0] }}</p>
                        <p class="text-xs text-gray-400">{{ $s[1] }}</p>
                    </div>
                    <div class="col-span-5 md:col-span-4 px-4 py-4 text-right">
                        <span class="text-[10px] font-bold px-3 py-1 {{ $s[2] === 'Silver' ? 'bg-slate-100 text-slate-500' : 'bg-orange-50 text-orange-600' }} rounded-full uppercase tracking-widest">{{ $s[2] }}</span>
                    </div>
                </div>
                @endforeach
            </div>
        </div>

        {{-- Become a Sponsor --}}
        <div class="py-16 border-b border-gray-100">
            <div class="bg-gray-950 rounded-2xl p-10 md:p-14 grid grid-cols-1 lg:grid-cols-2 gap-10 items-center">
                <div>
                    <p class="text-orange-400 text-xs font-bold tracking-widest uppercase mb-4">Sponsorship</p>
                    <h3 class="text-2xl font-bold font-serif text-white mb-4">Support the Next Generation of Research</h3>
                    <p class="text-gray-400 text-sm leading-relaxed mb-8">Sponsoring the conference connects your brand with hundreds of international scholars, academics, and industry professionals in a world-class academic setting.</p>
                    <a href="{{ route('conference.contact-us', $conference['slug']) }}" class="inline-flex items-center gap-3 px-8 py-4 bg-orange-500 hover:bg-orange-600 text-white font-bold text-sm rounded-xl transition-colors uppercase tracking-wide">
                        Request Sponsorship Pack <i class="fas fa-arrow-right text-xs"></i>
                    </a>
                </div>
                <div class="space-y-0 border border-white/10 rounded-xl overflow-hidden">
                    @foreach([
                        ['Platinum','Premier visibility, keynote naming rights, exclusive lounge'],
                        ['Gold','Prime branding, panel presence, featured website placement'],
                        ['Silver','Logo on proceedings, digital mentions, 2 registrations'],
                        ['Bronze','Brand acknowledgement and community recognition'],
                    ] as $i => $pkg)
                    <div class="flex items-center gap-4 px-6 py-4 {{ $i % 2 === 0 ? 'bg-white/5' : 'bg-white/10' }} border-b border-white/10 last:border-0">
                        <span class="text-xs font-black text-white w-16 shrink-0">{{ $pkg[0] }}</span>
                        <span class="text-sm text-gray-400 leading-snug">{{ $pkg[1] }}</span>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>

        {{-- Contact CTA --}}
        <div class="py-16">
            <div class="bg-gray-50 border border-gray-200 rounded-2xl p-10 md:p-14 flex flex-col md:flex-row items-center justify-between gap-8 relative overflow-hidden">
                <div class="absolute left-0 top-0 bottom-0 w-1 bg-orange-500 rounded-l-2xl"></div>
                <div class="md:max-w-xl">
                    <h3 class="text-2xl font-bold font-serif text-gray-900 mb-2">Have a question about sponsorship?</h3>
                    <p class="text-gray-500 text-sm leading-relaxed">Our sponsorship team is available to discuss bespoke packages and media partnership arrangements for your organisation.</p>
                </div>
                <a href="{{ route('conference.contact-us', $conference['slug']) }}" class="shrink-0 px-8 py-4 bg-gray-900 hover:bg-orange-600 text-white font-bold text-sm rounded-xl transition-colors uppercase tracking-wide">
                    Contact Us
                </a>
            </div>
        </div>

    </div>
</section>

</x-conference-layout>
