@extends('layouts.app')

@section('title', 'Resources & Contact')

@section('content')
    <!-- Hero Section -->
    <section class="relative bg-gradient-to-b from-teflin-blue via-teflin-blue-light to-gray-50 overflow-hidden py-20">
        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h1 class="font-serif text-4xl sm:text-5xl lg:text-6xl text-white mb-6 italic">Resources & Contact</h1>
            <p class="text-white/90 text-lg max-w-2xl mx-auto">Download templates, find answers to common questions, and get
                in touch with our team.</p>
        </div>
    </section>

    <!-- Downloads Section -->
    <section class="py-16 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center gap-3 mb-8">
                <svg class="w-6 h-6 text-teflin-blue" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                </svg>
                <h2 class="font-serif text-2xl text-gray-900 italic">Downloads</h2>
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                <!-- Abstract Template -->
                @forelse ($downloads as $download)
                    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
                        <div class="w-12 h-12 bg-teflin-blue/10 rounded-xl flex items-center justify-center mb-4">
                            <svg class="w-6 h-6 text-teflin-blue" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                            </svg>
                        </div>
                        <h3 class="font-serif text-lg text-gray-900 mb-2 italic">{{ $download->title }}</h3>
                        @if ($download->description)
                            <p class="text-gray-500 text-sm mb-4">{{ $download->description }}</p>
                        @endif
                        <a href="{{ route('download', $download->id) }}"
                            class="inline-flex items-center gap-2 px-4 py-2 border border-gray-200 text-teflin-blue text-sm font-medium rounded-lg hover:border-teflin-blue transition">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                            </svg>
                            Download
                        </a>
                    </div>
                @empty
                    <p class="text-gray-500 text-sm mb-4">No downloads found</p>
                @endforelse
            </div>
        </div>
    </section>

    <!-- FAQ Section -->
    <section class="py-16 bg-white">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <h2 class="font-serif text-3xl text-gray-900 text-center mb-10 italic">Frequently Asked Questions</h2>

            <div class="space-y-4" x-data="{ openFaq: null }">
                @forelse($faqs as $index => $faq)
                    <div class="bg-gray-50 rounded-xl overflow-hidden">
                        <button @click="openFaq = openFaq === {{ $index }} ? null : {{ $index }}"
                            class="w-full flex items-center justify-between p-5 text-left">
                            <span class="font-medium text-gray-900">{{ $faq->question }}</span>
                            <svg class="w-5 h-5 text-gray-400 transition-transform"
                                :class="{ 'rotate-180': openFaq === {{ $index }} }" fill="none"
                                stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                            </svg>
                        </button>
                        <div x-show="openFaq === {{ $index }}" x-collapse class="px-5 pb-5">
                            <p class="text-gray-600">{!! $faq->answer !!}</p>
                        </div>
                    </div>
                @empty
                    <!-- FAQ Item 1 -->
                    <div class="bg-gray-50 rounded-xl overflow-hidden">
                        <button @click="openFaq = openFaq === 1 ? null : 1"
                            class="w-full flex items-center justify-between p-5 text-left">
                            <span class="font-medium text-gray-900">How do I submit my abstract?</span>
                            <svg class="w-5 h-5 text-gray-400 transition-transform" :class="{ 'rotate-180': openFaq === 1 }"
                                fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                            </svg>
                        </button>
                        <div x-show="openFaq === 1" x-collapse class="px-5 pb-5">
                            <p class="text-gray-600">You can submit your abstract through our online submission portal.
                                Click on "Submit Abstract" in the navigation menu, fill out the required information, and
                                upload your abstract file following the provided template.</p>
                        </div>
                    </div>

                    <!-- FAQ Item 2 -->
                    <div class="bg-gray-50 rounded-xl overflow-hidden">
                        <button @click="openFaq = openFaq === 2 ? null : 2"
                            class="w-full flex items-center justify-between p-5 text-left">
                            <span class="font-medium text-gray-900">What is the word limit for abstracts?</span>
                            <svg class="w-5 h-5 text-gray-400 transition-transform" :class="{ 'rotate-180': openFaq === 2 }"
                                fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                            </svg>
                        </button>
                        <div x-show="openFaq === 2" x-collapse class="px-5 pb-5">
                            <p class="text-gray-600">Abstracts should be between 250-300 words. Please ensure your abstract
                                includes the title, objectives, methodology, findings, and conclusions of your research.</p>
                        </div>
                    </div>

                    <!-- FAQ Item 3 -->
                    <div class="bg-gray-50 rounded-xl overflow-hidden">
                        <button @click="openFaq = openFaq === 3 ? null : 3"
                            class="w-full flex items-center justify-between p-5 text-left">
                            <span class="font-medium text-gray-900">Can I present virtually?</span>
                            <svg class="w-5 h-5 text-gray-400 transition-transform" :class="{ 'rotate-180': openFaq === 3 }"
                                fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                            </svg>
                        </button>
                        <div x-show="openFaq === 3" x-collapse class="px-5 pb-5">
                            <p class="text-gray-600">Yes, we offer virtual presentation options for participants who cannot
                                attend in person. Please indicate your preference during registration.</p>
                        </div>
                    </div>

                    <!-- FAQ Item 4 -->
                    <div class="bg-gray-50 rounded-xl overflow-hidden">
                        <button @click="openFaq = openFaq === 4 ? null : 4"
                            class="w-full flex items-center justify-between p-5 text-left">
                            <span class="font-medium text-gray-900">What is the refund policy?</span>
                            <svg class="w-5 h-5 text-gray-400 transition-transform"
                                :class="{ 'rotate-180': openFaq === 4 }" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M19 9l-7 7-7-7" />
                            </svg>
                        </button>
                        <div x-show="openFaq === 4" x-collapse class="px-5 pb-5">
                            <p class="text-gray-600">Cancellations made before August 1, 2025 will receive a 50% refund.
                                Unfortunately, no refunds can be processed after this date.</p>
                        </div>
                    </div>

                    <!-- FAQ Item 5 -->
                    <div class="bg-gray-50 rounded-xl overflow-hidden">
                        <button @click="openFaq = openFaq === 5 ? null : 5"
                            class="w-full flex items-center justify-between p-5 text-left">
                            <span class="font-medium text-gray-900">Will proceedings be published?</span>
                            <svg class="w-5 h-5 text-gray-400 transition-transform"
                                :class="{ 'rotate-180': openFaq === 5 }" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M19 9l-7 7-7-7" />
                            </svg>
                        </button>
                        <div x-show="openFaq === 5" x-collapse class="px-5 pb-5">
                            <p class="text-gray-600">Yes, accepted papers will be published in conference proceedings with
                                ISBN. Selected papers may also be recommended for publication in Scopus-indexed or
                                SINTA-indexed journals.</p>
                        </div>
                    </div>

                    <!-- FAQ Item 6 -->
                    <div class="bg-gray-50 rounded-xl overflow-hidden">
                        <button @click="openFaq = openFaq === 6 ? null : 6"
                            class="w-full flex items-center justify-between p-5 text-left">
                            <span class="font-medium text-gray-900">Is there a dress code for the conference?</span>
                            <svg class="w-5 h-5 text-gray-400 transition-transform"
                                :class="{ 'rotate-180': openFaq === 6 }" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M19 9l-7 7-7-7" />
                            </svg>
                        </button>
                        <div x-show="openFaq === 6" x-collapse class="px-5 pb-5">
                            <p class="text-gray-600">Business casual attire is recommended for all conference sessions. For
                                the gala dinner, smart casual or formal attire is preferred.</p>
                        </div>
                    </div>
                @endforelse
            </div>
        </div>
    </section>

    <!-- Get in Touch Section -->
    {{-- <section class="py-16 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
                <!-- Contact Form -->
                <div>
                    <h2 class="font-serif text-3xl text-gray-900 mb-2 italic">Get in Touch</h2>
                    <p class="text-gray-600 mb-8">Have a question? Fill out the form below and our team will get back to
                        you within 48 hours.</p>

                    @if (session('success'))
                        <div class="mb-6 p-4 bg-green-50 border border-green-200 text-green-700 rounded-lg">
                            {{ session('success') }}
                        </div>
                    @endif

                    @if ($errors->any())
                        <div class="mb-6 p-4 bg-red-50 border border-red-200 text-red-700 rounded-lg">
                            <ul class="list-disc list-inside space-y-1">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form action="{{ route('contact.store') }}" method="POST" class="space-y-5">
                        @csrf

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">First Name</label>
                                <input type="text" name="first_name" value="{{ old('first_name') }}"
                                    placeholder="John"
                                    class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-teflin-blue focus:border-teflin-blue">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Last Name</label>
                                <input type="text" name="last_name" value="{{ old('last_name') }}" placeholder="Doe"
                                    class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-teflin-blue focus:border-teflin-blue">
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                            <input type="email" name="email" value="{{ old('email') }}"
                                placeholder="john@example.com" required
                                class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-teflin-blue focus:border-teflin-blue">
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Subject</label>
                            <input type="text" name="subject" value="{{ old('subject') }}"
                                placeholder="How can we help?" required
                                class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-teflin-blue focus:border-teflin-blue">
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Message</label>
                            <textarea name="message" rows="4" placeholder="Your message..." required
                                class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-teflin-blue focus:border-teflin-blue resize-none">{{ old('message') }}</textarea>
                        </div>

                        <button type="submit"
                            class="inline-flex items-center gap-2 px-6 py-3 bg-teflin-blue text-white font-semibold rounded-lg hover:bg-teflin-blue-dark transition">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
                            </svg>
                            Send Message
                        </button>
                    </form>
                </div>

                <!-- Contact Information -->
                <div>
                    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-8 mb-8">
                        <h3 class="font-serif text-xl text-gray-900 mb-6 italic">Contact Information</h3>

                        <div class="space-y-6">
                            <div class="flex items-start gap-4">
                                <div
                                    class="w-10 h-10 bg-teflin-blue/10 rounded-lg flex items-center justify-center flex-shrink-0">
                                    <svg class="w-5 h-5 text-teflin-blue" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-semibold text-gray-900">Email</h4>
                                    <p class="text-gray-600">teflin2025@uinjkt.ac.id</p>
                                </div>
                            </div>

                            <div class="flex items-start gap-4">
                                <div
                                    class="w-10 h-10 bg-teflin-blue/10 rounded-lg flex items-center justify-center flex-shrink-0">
                                    <svg class="w-5 h-5 text-teflin-blue" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-semibold text-gray-900">Phone</h4>
                                    <p class="text-gray-600">+62 21 7401925</p>
                                    <p class="text-gray-600">+62 812 3456 7890 (WhatsApp)</p>
                                </div>
                            </div>

                            <div class="flex items-start gap-4">
                                <div
                                    class="w-10 h-10 bg-teflin-blue/10 rounded-lg flex items-center justify-center flex-shrink-0">
                                    <svg class="w-5 h-5 text-teflin-blue" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-semibold text-gray-900">Address</h4>
                                    <p class="text-gray-600">Faculty of Educational Sciences</p>
                                    <p class="text-gray-600">UIN Syarif Hidayatullah Jakarta</p>
                                    <p class="text-gray-600">Jl. Ir H. Juanda No.95, Ciputat</p>
                                    <p class="text-gray-600">Tangerang Selatan, Banten 15412</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Follow Us -->
                    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-8">
                        <h3 class="font-serif text-xl text-gray-900 mb-6 italic">Follow Us</h3>
                        <div class="flex items-center gap-4">
                            <a href="#"
                                class="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center text-gray-600 hover:bg-teflin-blue hover:text-white transition">
                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                    <path
                                        d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
                                </svg>
                            </a>
                            <a href="#"
                                class="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center text-gray-600 hover:bg-teflin-blue hover:text-white transition">
                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                    <path
                                        d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
                                </svg>
                            </a>
                            <a href="#"
                                class="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center text-gray-600 hover:bg-teflin-blue hover:text-white transition">
                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                    <path
                                        d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" />
                                </svg>
                            </a>
                            <a href="#"
                                class="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center text-gray-600 hover:bg-teflin-blue hover:text-white transition">
                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                    <path
                                        d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section> --}}
@endsection
