<x-conference-layout>
    <x-slot name="title">{{ $conference['title'] }} - Registration Fees</x-slot>

    <!-- Hero Section -->
    <x-conference-inner-hero
    pageTitle="Registration Fees"
    label="Registration"
    subtitle="Choose the registration plan that suits your participation type. All plans include access to all conference sessions."
/>

    <!-- Main Content Area uses the light styling from original template -->
    <section class="py-24 bg-gray-50 border-b border-gray-200 relative text-gray-900"
        x-data="{ showPaymentModal: false }">
        <div
            class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-5 pointer-events-none">
        </div>

        <div class="relative z-10 max-w-7xl mx-auto px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-16">

                <!-- Left Column: Main Content -->
                <div class="lg:col-span-2">
                    <span
                        class="text-orange-600 font-bold tracking-widest uppercase text-xs mb-2 block">Investment</span>
                    <h2 class="text-4xl md:text-5xl font-bold font-serif mb-10 text-gray-900">Registration Fees</h2>

                    <p class="text-lg text-gray-600 leading-relaxed mb-10">
                        Detailed breakdown of participation categories. Choose the plan that suits your presentation
                        style and needs best. All fees are in EURO.
                    </p>

                    <!-- Dark Pricing Grid (Matches home.blade.php aesthetics) -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
                        <!-- Card 1 -->
                        <div
                            class="relative group p-8 rounded-2xl border border-gray-200 bg-white hover:border-orange-300 transition-all duration-300 flex flex-col h-full hover:shadow-lg hover:-translate-y-2">
                            <div
                                class="absolute inset-0 bg-gradient-to-b from-orange-50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-2xl">
                            </div>

                            <h3
                                class="text-xl font-bold mb-6 text-gray-900 group-hover:text-orange-600 transition-colors">
                                Delegate Presenter / Author (Oral)
                            </h3>

                            <div class="space-y-4 mb-8 flex-grow">
                                <div class="flex justify-between items-end border-b border-dashed border-gray-200 pb-2">
                                    <span class="text-gray-500 text-sm">Regular Fee</span>
                                    <span class="text-3xl font-bold text-gray-900">290 <span
                                            class="text-lg text-gray-500">EUR</span></span>
                                </div>
                                <p class="text-sm text-gray-500 italic">Early bird 10% reduction available.</p>
                            </div>
                        </div>

                        <!-- Card 2 -->
                        <div
                            class="relative group p-8 rounded-2xl border border-gray-200 bg-white hover:border-green-300 transition-all duration-300 flex flex-col h-full hover:shadow-lg hover:-translate-y-2">
                            <div
                                class="absolute inset-0 bg-gradient-to-b from-green-50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-2xl">
                            </div>

                            <h3
                                class="text-xl font-bold mb-6 text-gray-900 group-hover:text-green-600 transition-colors">
                                Delegate Student Presenter (Oral)
                            </h3>

                            <div class="space-y-4 mb-8 flex-grow">
                                <div class="flex justify-between items-end border-b border-dashed border-gray-200 pb-2">
                                    <span class="text-gray-500 text-sm">Regular Fee</span>
                                    <span class="text-3xl font-bold text-gray-900">260 <span
                                            class="text-lg text-gray-500">EUR</span></span>
                                </div>
                                <p class="text-sm text-gray-500 italic">Early bird 10% reduction available.</p>
                            </div>
                        </div>

                        <!-- Card 3 -->
                        <div
                            class="relative group p-8 rounded-2xl border border-gray-200 bg-white hover:border-blue-300 transition-all duration-300 flex flex-col h-full hover:shadow-lg hover:-translate-y-2">
                            <div
                                class="absolute inset-0 bg-gradient-to-b from-blue-50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-2xl">
                            </div>

                            <h3
                                class="text-xl font-bold mb-6 text-gray-900 group-hover:text-blue-600 transition-colors">
                                Virtual Delegate
                            </h3>

                            <div class="space-y-4 mb-8 flex-grow">
                                <div class="flex justify-between items-end border-b border-dashed border-gray-200 pb-2">
                                    <span class="text-gray-500 text-sm">Regular Fee</span>
                                    <span class="text-3xl font-bold text-gray-900">230 <span
                                            class="text-lg text-gray-500">EUR</span></span>
                                </div>
                                <p class="text-sm text-gray-500 italic">Early bird 10% reduction available.</p>
                            </div>
                        </div>

                        <!-- Card 4 -->
                        <div
                            class="relative group p-8 rounded-2xl border border-gray-200 bg-white hover:border-gray-300 transition-all duration-300 flex flex-col h-full hover:shadow-lg hover:-translate-y-2">
                            <h3 class="text-xl font-bold mb-6 text-gray-900 transition-colors">
                                Accompanying Person / Listener
                            </h3>

                            <div class="space-y-4 mb-8 flex-grow">
                                <div class="flex justify-between items-end border-b border-dashed border-gray-200 pb-2">
                                    <span class="text-gray-500 text-sm">Regular Fee</span>
                                    <span class="text-3xl font-bold text-gray-900">260 <span
                                            class="text-lg text-gray-500">EUR</span></span>
                                </div>
                                <p class="text-sm text-gray-500 italic">Early bird 10% reduction available.</p>
                            </div>
                        </div>

                        <!-- Card 5 -->
                        <div
                            class="relative group p-8 rounded-2xl border border-gray-200 bg-white hover:border-gray-300 transition-all duration-300 flex flex-col h-full hover:shadow-lg hover:-translate-y-2 md:col-span-2">
                            <h3 class="text-xl font-bold mb-6 text-gray-900 transition-colors">
                                E-Poster / Additional Paper
                            </h3>

                            <div
                                class="flex flex-col md:flex-row justify-between items-start md:items-end border-b border-dashed border-gray-200 pb-2 mb-8">
                                <span class="text-gray-500 text-sm mb-2 md:mb-0">Per extra submission</span>
                                <span class="text-3xl font-bold text-gray-900">175 <span
                                        class="text-lg text-gray-500">EUR</span></span>
                            </div>
                        </div>
                    </div>

                    <!-- Note Box -->
                    <div class="bg-white rounded-2xl p-8 border border-gray-200 shadow-sm relative overflow-hidden">
                        <div class="absolute top-0 left-0 w-1 h-full bg-orange-500"></div>
                        <h4 class="font-bold text-gray-900 mb-6 flex items-center gap-2 text-lg">
                            <i class="fas fa-info-circle text-orange-500"></i> Included in Registration
                        </h4>

                        <p class="mb-6 text-gray-700 leading-relaxed text-sm">
                            Participants who register by the Early Bird Date will benefit from the *Early Bird Rate (10%
                            reduction in the registration fee). Regular fees apply thereafter.
                        </p>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-gray-600 mb-8">
                            <div class="flex items-start gap-3">
                                <i class="fas fa-check-circle text-green-500 mt-0.5"></i>
                                <span>Paper Presentation & Technical programs.</span>
                            </div>
                            <div class="flex items-start gap-3">
                                <i class="fas fa-check-circle text-green-500 mt-0.5"></i>
                                <span>Certificate for presentation/participation.</span>
                            </div>
                            <div class="flex items-start gap-3">
                                <i class="fas fa-check-circle text-green-500 mt-0.5"></i>
                                <span>Proceedings Book (DOI & ISBN).</span>
                            </div>
                            <div class="flex items-start gap-3">
                                <i class="fas fa-check-circle text-green-500 mt-0.5"></i>
                                <span>Full Paper DOI.</span>
                            </div>
                            <div class="flex items-start gap-3 md:col-span-2">
                                <i class="fas fa-check-circle text-green-500 mt-0.5"></i>
                                <span>Journal publish: GARI International Journal OR Selection of Other Journals as well
                                    as GARI Digital Library.</span>
                            </div>
                            <div class="flex items-start gap-3 md:col-span-2">
                                <i class="fas fa-coffee text-orange-500 mt-0.5"></i>
                                <span>02 Coffee breaks, Lunch, Networking opportunities for in-person Delegates.</span>
                            </div>
                        </div>

                        <div class="pt-6 border-t border-gray-200 space-y-4">
                            <p class="text-sm text-gray-700">
                                <strong class="text-gray-900">Virtual:</strong> After the event, we post the Print
                                Certificate & Proceedings*, and Live or Record Present via our Platform.
                            </p>
                            <p class="text-xs text-gray-500 italic">
                                Does Not include any personal expenses (air ticket, meals, accommodation, etc) related
                                to conference in-person/virtual participation.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Right Column: Sidebar -->
                <div class="lg:col-span-1 space-y-8 tracking-tight">

                    <!-- Modern Payment Details Button linking to Alpine Modal -->
                    <button @click="showPaymentModal = true"
                        class="w-full bg-gradient-to-r from-blue-900 to-indigo-900 text-white rounded-2xl p-6 border border-blue-500/30 shadow-2xl relative overflow-hidden group hover:border-blue-400 transition-all text-left flex items-center justify-between">
                        <div
                            class="absolute inset-0 bg-blue-500/10 opacity-0 group-hover:opacity-100 transition-opacity">
                        </div>
                        <span class="text-xl font-bold tracking-wide relative z-10 flex items-center gap-3">
                            <i class="fas fa-credit-card text-blue-400 text-2xl"></i> View Payment Details
                        </span>
                        <i
                            class="fas fa-arrow-right relative z-10 text-blue-400 group-hover:translate-x-1 transition-transform"></i>
                    </button>

                    <!-- Important Dates Sidebar Widget (Dark Theme) -->
                    @if(isset($conference['important_dates']) && is_array($conference['important_dates']))
                        <div class="bg-gray-900 text-white rounded-2xl p-8 shadow-2xl relative overflow-hidden">
                            <div
                                class="absolute top-0 right-0 w-32 h-32 bg-orange-500/20 rounded-full blur-3xl -mr-10 -mt-10">
                            </div>

                            <h3 class="text-2xl font-bold font-serif mb-8 border-b border-gray-700 pb-4">Important Dates
                            </h3>

                            <div class="space-y-6">
                                @foreach((array)$conference['important_dates'] as $date)
                                    <div class="group">
                                        <p
                                            class="text-xs text-gray-400 font-bold uppercase tracking-wider mb-1 group-hover:text-orange-400 transition-colors">
                                            {{ $date['label'] }}
                                        </p>
                                        <p class="text-lg font-bold text-white">{{ $date['date'] }}</p>
                                    </div>
                                @endforeach
                            </div>

                            <a href="#register"
                                class="mt-10 w-full block py-4 bg-orange-600 hover:bg-orange-700 text-white font-bold text-center rounded-lg transition-all shadow-lg hover:shadow-orange-500/20">
                                Submit Abstract
                            </a>
                        </div>
                    @else
                        <!-- Fallback Hardcoded Sidebar matching original template content -->
                        <div class="bg-gray-900 text-white rounded-2xl p-8 shadow-2xl relative overflow-hidden">
                            <div
                                class="absolute top-0 right-0 w-32 h-32 bg-orange-500/20 rounded-full blur-3xl -mr-10 -mt-10">
                            </div>

                            <h3 class="text-2xl font-bold font-serif mb-8 border-b border-gray-700 pb-4">Important Dates
                            </h3>

                            <div class="space-y-6">
                                <div class="group">
                                    <p
                                        class="text-xs text-gray-400 font-bold uppercase tracking-wider mb-1 group-hover:text-orange-400 transition-colors">
                                        Paper/Abstract submission deadline
                                    </p>
                                    <p class="text-lg font-bold text-white">22nd February 2026</p>
                                </div>
                                <div class="group">
                                    <p
                                        class="text-xs text-gray-400 font-bold uppercase tracking-wider mb-1 group-hover:text-orange-400 transition-colors">
                                        Notification of acceptance
                                    </p>
                                    <p class="text-lg font-bold text-white">Within 07 Days (+/-3)</p>
                                </div>
                                <div class="group">
                                    <p
                                        class="text-xs text-gray-400 font-bold uppercase tracking-wider mb-1 group-hover:text-orange-400 transition-colors">
                                        Full paper submission deadline
                                    </p>
                                    <p class="text-lg font-bold text-white">13th March 2026</p>
                                </div>
                                <div class="group">
                                    <p
                                        class="text-xs text-gray-400 font-bold uppercase tracking-wider mb-1 group-hover:text-orange-400 transition-colors">
                                        Registration Deadline
                                    </p>
                                    <p class="text-lg font-bold text-white">6th March 2026</p>
                                </div>
                                <div class="group">
                                    <p
                                        class="text-xs text-gray-400 font-bold uppercase tracking-wider mb-1 group-hover:text-orange-400 transition-colors">
                                        Conference Date
                                    </p>
                                    <p class="text-lg font-bold text-white">
                                        {{ $conference['date'] ?? '21, 22 Mar 2026' }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    @endif

                    <!-- Note Widget -->
                    <div class="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm relative overflow-hidden">
                        <div class="absolute top-0 left-0 w-1 h-full bg-yellow-400"></div>
                        <h4 class="font-bold text-gray-900 mb-3 flex items-center gap-2">
                            <i class="fas fa-sticky-note text-yellow-500"></i> Note
                        </h4>
                        <p class="text-sm text-gray-700 leading-relaxed">Early Notification of Acceptance for
                            Abstract/Papers submitted before the deadline will be provided on a rolling basis
                            (within 21 days on a FIFO basis)</p>
                    </div>

                    <!-- Side Quick Links -->
                    <div class="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm">
                        <h3
                            class="font-bold text-gray-900 uppercase tracking-wider text-sm mb-4 pb-2 border-b border-gray-100 flex items-center justify-between">
                            Quick Links <i class="fas fa-link text-gray-400"></i>
                        </h3>
                        <div class="space-y-1">
                            <a href="#"
                                class="flex items-center gap-3 px-3 py-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded-lg transition-colors group">
                                <i class="fas fa-angle-right text-gray-400 group-hover:text-orange-500"></i>
                                Participation Opportunities
                            </a>
                            <a href="{{ route('conference.abstract-submission', ['slug' => $conference['slug']]) }}"
                                class="flex items-center gap-3 px-3 py-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded-lg transition-colors group">
                                <i class="fas fa-angle-right text-gray-400 group-hover:text-orange-500"></i> Abstract /
                                Paper Submission
                            </a>
                            <a href="#"
                                class="flex items-center gap-3 px-3 py-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded-lg transition-colors group">
                                <i class="fas fa-angle-right text-gray-400 group-hover:text-orange-500"></i> Abstract /
                                Full Paper Guidelines
                            </a>
                            <a href="{{ route('conference.show', ['slug' => $conference['slug']]) }}#scopes"
                                class="flex items-center gap-3 px-3 py-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded-lg transition-colors group">
                                <i class="fas fa-angle-right text-gray-400 group-hover:text-orange-500"></i> Scope
                            </a>
                            <a href="{{ route('conference.show', ['slug' => $conference['slug']]) }}#schedule"
                                class="flex items-center gap-3 px-3 py-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded-lg transition-colors group">
                                <i class="fas fa-angle-right text-gray-400 group-hover:text-orange-500"></i> Program
                                Schedule
                            </a>
                        </div>
                    </div>

                </div> <!-- Closes Right Column -->
            </div>
        </div>

        <!-- Alpine Payment Modal -->
        <div x-show="showPaymentModal" style="display: none;" class="fixed inset-0 z-50 overflow-y-auto"
            aria-labelledby="modal-title" role="dialog" aria-modal="true">

            <!-- Background Overlay -->
            <div x-show="showPaymentModal" x-transition:enter="ease-out duration-300"
                x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
                x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0"
                class="fixed inset-0 bg-black bg-opacity-75 backdrop-blur-sm transition-opacity"
                @click="showPaymentModal = false"></div>

            <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
                <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
                    <div x-show="showPaymentModal" x-transition:enter="ease-out duration-300"
                        x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                        x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                        x-transition:leave="ease-in duration-200"
                        x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                        x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                        class="relative transform overflow-hidden rounded-2xl bg-white border border-gray-100 text-left shadow-2xl transition-all sm:my-8 sm:w-full sm:max-w-xl text-gray-900">

                        <!-- Modal Content -->
                        <div class="px-6 py-6 sm:p-8">
                            <div class="absolute top-0 right-0 pt-4 pr-4">
                                <button type="button" @click="showPaymentModal = false"
                                    class="rounded-full bg-gray-100 p-2 text-gray-500 hover:text-gray-900 hover:bg-gray-200 outline-none transition-colors">
                                    <span class="sr-only">Close</span>
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>

                            <div class="sm:flex sm:items-start">
                                <div
                                    class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
                                    <i class="fas fa-university text-blue-600"></i>
                                </div>
                                <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left w-full">
                                    <h3 class="text-xl font-bold leading-6 text-gray-900 mb-4" id="modal-title">Payment
                                        Details</h3>
                                    <div class="mt-2 text-gray-600">
                                        <p class="mb-4 text-sm leading-relaxed">Please ensure all payments are completed
                                            before the registration deadline. Bank transfer details and alternative
                                            payment options are listed below.</p>

                                        <!-- Mock Bank Details -->
                                        <div
                                            class="bg-gray-50 p-4 rounded-xl border border-gray-200 space-y-3 font-mono text-sm mb-6">
                                            <div class="flex justify-between border-b border-gray-200 pb-2">
                                                <span class="text-gray-500">Bank Name</span>
                                                <span class="text-gray-900 text-right">Global Academic Bank</span>
                                            </div>
                                            <div class="flex justify-between border-b border-gray-200 pb-2">
                                                <span class="text-gray-500">Account Name</span>
                                                <span class="text-gray-900 text-right">GARI Institute</span>
                                            </div>
                                            <div class="flex justify-between border-b border-gray-200 pb-2">
                                                <span class="text-gray-500">Account No.</span>
                                                <span class="text-gray-900 font-bold text-right tracking-widest">1234
                                                    5678
                                                    9012</span>
                                            </div>
                                            <div class="flex justify-between">
                                                <span class="text-gray-500">SWIFT/BIC</span>
                                                <span class="text-gray-900 text-right">GARIUS33</span>
                                            </div>
                                        </div>

                                        <p class="text-xs text-orange-600 italic">
                                            Please indicate your name and paper ID in the transfer reference.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="bg-gray-50 px-4 py-4 sm:flex sm:flex-row-reverse sm:px-8 border-t border-gray-200">
                            <button type="button"
                                class="inline-flex w-full justify-center rounded-lg bg-blue-600 px-6 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 transition-colors sm:ml-3 sm:w-auto">
                                Pay Online Now
                            </button>
                            <button type="button" @click="showPaymentModal = false"
                                class="mt-3 inline-flex w-full justify-center rounded-lg bg-white border border-gray-300 px-6 py-2.5 text-sm font-semibold text-gray-700 shadow-sm hover:bg-gray-50 transition-colors sm:mt-0 sm:w-auto">
                                Cancel
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

</x-conference-layout>