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

{{-- HERO --}}
<x-conference-inner-hero
    pageTitle="Abstract Guidelines"
    label="Guidelines"
    subtitle="Read our comprehensive abstract submission guidelines before preparing your manuscript."
/>

{{-- MAIN CONTENT --}}
<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">
                        Every abstract submitted to the {{ $conference['logo_text'] ?? 'conference' }} must satisfy the requirements outlined below. Non-compliant submissions are returned without review. Please read carefully before preparing your document.
                    </p>
                </div>
                <div class="flex lg:justify-end items-start">
                    <a href="{{ route('conference.abstract-submission', $conference['slug']) }}"
                       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">
                        Submit Abstract
                        <i class="fas fa-arrow-right text-xs"></i>
                    </a>
                </div>
            </div>
        </div>

        {{-- Requirements Table --}}
        <div class="py-16 border-b border-gray-100">
            <h2 class="text-2xl font-bold font-serif text-gray-900 mb-10">General Requirements</h2>
            <div class="space-y-0 border border-gray-100 rounded-2xl overflow-hidden">
                @foreach([
                    ['Word Count','250 – 300 words. No submissions shorter or longer will be accepted.'],
                    ['Language','English only. Submissions in other languages will not be reviewed.'],
                    ['File Format','Microsoft Word (.doc or .docx). PDF is not accepted at this stage.'],
                    ['Keywords','Include 4–5 specific keywords immediately below the abstract body.'],
                    ['Originality','Must be original, unpublished work not currently under review elsewhere.'],
                    ['Author Details','Include full name, institutional affiliation, and country for every author.'],
                ] as $i => $row)
                <div class="grid grid-cols-1 md:grid-cols-4 {{ $i % 2 === 0 ? 'bg-white' : 'bg-gray-50' }} hover:bg-orange-50/40 transition-colors">
                    <div class="px-8 py-5 md:border-r border-gray-100">
                        <p class="text-sm font-bold text-gray-900">{{ $row[0] }}</p>
                    </div>
                    <div class="px-8 py-5 md:col-span-3">
                        <p class="text-sm text-gray-600 leading-relaxed">{{ $row[1] }}</p>
                    </div>
                </div>
                @endforeach
            </div>
        </div>

        {{-- Structure --}}
        <div class="py-16 border-b border-gray-100">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-16">
                <div>
                    <h2 class="text-2xl font-bold font-serif text-gray-900 mb-4">Recommended Structure</h2>
                    <p class="text-gray-500 text-sm leading-relaxed">Your abstract should follow this six-part structure. Each section should be concise and focused.</p>
                </div>
                <div class="lg:col-span-2">
                    <ol class="space-y-8">
                        @foreach([
                            ['Background / Introduction','State the research problem and why it is significant.'],
                            ['Objectives','Define the aims and key research questions of your study.'],
                            ['Methodology','Describe the research approach, data collection, and analysis method.'],
                            ['Results & Findings','Summarise the key results and their statistical or thematic significance.'],
                            ['Conclusions','State the main conclusions and their practical or theoretical implications.'],
                            ['Keywords','List 4–5 precise terms that best characterise your work.'],
                        ] as $idx => $sec)
                        <li class="flex gap-6 items-start">
                            <span class="text-sm font-black text-orange-500 mt-0.5 w-6 shrink-0">{{ str_pad($idx+1, 2, '0', STR_PAD_LEFT) }}</span>
                            <div>
                                <p class="font-bold text-gray-900 mb-1">{{ $sec[0] }}</p>
                                <p class="text-sm text-gray-500 leading-relaxed">{{ $sec[1] }}</p>
                            </div>
                        </li>
                        @endforeach
                    </ol>
                </div>
            </div>
        </div>

        {{-- Quick Facts --}}
        <div class="py-16 border-b border-gray-100">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-px bg-gray-100 rounded-2xl overflow-hidden border border-gray-100">
                @foreach([
                    ['250–300', 'Word Limit'],
                    ['.docx', 'File Format'],
                    ['Double-Blind','Review Process'],
                    ['2–3 Weeks','Notification'],
                ] as $stat)
                <div class="bg-white px-8 py-10 text-center">
                    <p class="text-2xl font-black text-gray-900 mb-1">{{ $stat[0] }}</p>
                    <p class="text-xs text-gray-400 font-bold uppercase tracking-widest">{{ $stat[1] }}</p>
                </div>
                @endforeach
            </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">Ready to submit your abstract?</h3>
                    <p class="text-gray-500 text-sm leading-relaxed">Use our secure online submission portal. Ensure your document is formatted correctly before uploading.</p>
                </div>
                <div class="flex flex-col sm:flex-row gap-3 shrink-0">
                    <a href="{{ route('conference.abstract-submission', $conference['slug']) }}" class="px-8 py-4 bg-gray-900 hover:bg-orange-600 text-white font-bold text-sm rounded-xl transition-colors uppercase tracking-wide text-center">Submit Abstract</a>
                    <a href="{{ route('conference.full-paper-guidelines', $conference['slug']) }}" class="px-8 py-4 bg-white border-2 border-gray-200 hover:border-gray-300 text-gray-700 font-bold text-sm rounded-xl transition-colors uppercase tracking-wide text-center">Full Paper Guidelines</a>
                </div>
            </div>
        </div>

    </div>
</section>

</x-conference-layout>
