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

    {{-- HERO --}}
    <x-conference-inner-hero
    pageTitle="Presentation Guidelines"
    label="Guidelines"
    subtitle="Access the presentation format requirements and technical instructions for your conference session."
/>

<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">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
                <div class="lg:col-span-2">
                    <p class="text-xl text-gray-600 font-light leading-relaxed">
                        Please review the guidelines specific to your presentation format. All presenters—whether in-person or virtual—are required to follow these requirements to ensure a smooth conference programme.
                    </p>
                </div>
                <div class="flex lg:justify-end items-start">
                    <a href="#"
                       class="inline-flex items-center gap-3 px-8 py-4 bg-gray-900 text-white text-sm font-bold rounded-xl hover:bg-orange-600 transition-colors tracking-wide">
                        Download Slide Template <i class="fas fa-download text-xs"></i>
                    </a>
                </div>
            </div>
        </div>

        {{-- Oral --}}
        <div class="py-16 border-b border-gray-100">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-16">
                <div>
                    <span class="text-xs font-bold text-orange-500 tracking-widest uppercase block mb-3">In-Person</span>
                    <h2 class="text-2xl font-bold font-serif text-gray-900 mb-4">Oral Presentation</h2>
                    <p class="text-gray-500 text-sm leading-relaxed">A timed talk delivered to the conference audience and expert panel, followed by a moderated question-and-answer session.</p>
                </div>
                <div class="lg:col-span-2 border border-gray-100 rounded-2xl overflow-hidden">
                    @foreach([
                        ['Duration','20 minutes presentation + 5 minutes Q&A'],
                        ['Equipment','LCD projector, podium microphone, and presentation laptop provided'],
                        ['Software','PowerPoint (.pptx) or PDF. Bring a backup on USB.'],
                        ['Slide Upload','Upload your file via the presenter portal at least 24 hours before your session'],
                        ['Arrival','Report to your session room at least 15 minutes before the session begins'],
                        ['Font Size','Use a minimum of 24pt for body text to ensure readability from the back of the room'],
                        ['Slides','Do not exceed 20 slides for a 20-minute presentation slot'],
                    ] as $i => $row)
                    <div class="grid grid-cols-1 md:grid-cols-3 {{ $i % 2 === 0 ? 'bg-white' : 'bg-gray-50' }} hover:bg-orange-50/30 transition-colors">
                        <div class="px-7 py-4 md:border-r border-gray-100"><p class="text-sm font-bold text-gray-900">{{ $row[0] }}</p></div>
                        <div class="px-7 py-4 md:col-span-2"><p class="text-sm text-gray-600 leading-relaxed">{{ $row[1] }}</p></div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>

        {{-- Poster --}}
        <div class="py-16 border-b border-gray-100">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-16">
                <div>
                    <span class="text-xs font-bold text-orange-500 tracking-widest uppercase block mb-3">In-Person</span>
                    <h2 class="text-2xl font-bold font-serif text-gray-900 mb-4">Poster Presentation</h2>
                    <p class="text-gray-500 text-sm leading-relaxed">Display your research in the dedicated exhibition area. Presenters are encouraged to remain by their poster throughout the session to engage with attendees.</p>
                </div>
                <div class="lg:col-span-2 border border-gray-100 rounded-2xl overflow-hidden">
                    @foreach([
                        ['Poster Size','A0 Portrait — 841 × 1189 mm'],
                        ['Printing','Presenter is responsible for printing and bringing the poster'],
                        ['Mounting','Display boards and mounting pins are provided on-site'],
                        ['Setup','Set up your poster before 08:30 on the morning of your session'],
                        ['Content','Include: title, all authors, abstract, method, results, conclusions'],
                        ['Visuals','Use clear charts and figures. Avoid dense paragraphs of text.'],
                    ] as $i => $row)
                    <div class="grid grid-cols-1 md:grid-cols-3 {{ $i % 2 === 0 ? 'bg-white' : 'bg-gray-50' }} hover:bg-orange-50/30 transition-colors">
                        <div class="px-7 py-4 md:border-r border-gray-100"><p class="text-sm font-bold text-gray-900">{{ $row[0] }}</p></div>
                        <div class="px-7 py-4 md:col-span-2"><p class="text-sm text-gray-600 leading-relaxed">{{ $row[1] }}</p></div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>

        {{-- Virtual --}}
        <div class="py-16 border-b border-gray-100">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-16">
                <div>
                    <span class="text-xs font-bold text-orange-500 tracking-widest uppercase block mb-3">Online</span>
                    <h2 class="text-2xl font-bold font-serif text-gray-900 mb-4">Virtual Presentation</h2>
                    <p class="text-gray-500 text-sm leading-relaxed">Remote presentations are conducted via Zoom. Virtual presenters receive the same certificate as in-person attendees and are fully part of the conference programme.</p>
                </div>
                <div class="lg:col-span-2 border border-gray-100 rounded-2xl overflow-hidden">
                    @foreach([
                        ['Platform','Zoom video conference — link sent 48 hours before your session'],
                        ['Duration','20 minutes + 5 minutes Q&A via Zoom chat'],
                        ['Camera','Camera must remain on throughout the presentation'],
                        ['Screen Share','Share your slides directly using Zoom screen share'],
                        ['Technical Check','Test microphone, camera, and internet connection at least one hour before your session'],
                        ['Recording','Your session may be recorded and shared with all registered attendees via the online platform'],
                    ] as $i => $row)
                    <div class="grid grid-cols-1 md:grid-cols-3 {{ $i % 2 === 0 ? 'bg-white' : 'bg-gray-50' }} hover:bg-orange-50/30 transition-colors">
                        <div class="px-7 py-4 md:border-r border-gray-100"><p class="text-sm font-bold text-gray-900">{{ $row[0] }}</p></div>
                        <div class="px-7 py-4 md:col-span-2"><p class="text-sm text-gray-600 leading-relaxed">{{ $row[1] }}</p></div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>

        {{-- 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 your presentation?</h3>
                    <p class="text-gray-500 text-sm leading-relaxed">Contact the conference secretariat for technical or logistical queries regarding your session slot.</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 Secretariat
                </a>
            </div>
        </div>

    </div>
</section>

</x-conference-layout>
