@extends('layouts.app')

@section('title', 'Welcome to Skedwise Academy')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
    <!-- Hero Section -->
    <div class="text-center max-w-4xl mx-auto mb-20 mt-10">
        <h1 class="text-4xl md:text-6xl font-semibold text-secondary mb-6 leading-tight">
            Elevate Your Learning with <span class="text-primary">Skedwise</span> Academy
        </h1>
        <p class="text-xl md:text-2xl text-gray-600 mb-10">
            A seamless academic platform offering comprehensive courses, dedicated workshops, and real-time progress tracking.
        </p>
        <div class="flex justify-center space-x-4">
            @if (!Session::has('academy_username'))
                <a href="{{ route('login') }}" class="px-8 py-4 bg-primary text-white font-semibold text-lg rounded-md hover:bg-primary-hover shadow-lg hover:shadow-xl transition-all duration-300">
                    Get Started Now
                </a>
            @else
                <a href="{{ route('dashboard') }}" class="px-8 py-4 bg-primary text-white font-semibold text-lg rounded-md hover:bg-primary-hover shadow-lg hover:shadow-xl transition-all duration-300">
                    Go to Dashboard
                </a>
            @endif
        </div>
    </div>

    <!-- Skedwise 2.0 Integration Section -->
    <div class="mb-20 rounded-2xl p-10">
        <div class="text-center mb-8">
            <h2 class="text-3xl font-bold text-secondary mb-4">Now Powered by Skedwise 2.0</h2>
            <p class="text-lg text-gray-600 max-w-3xl mx-auto">
                Skedwise Academy is fully integrated with Skedwise 2.0, our next-generation scheduling and business management platform. Experience seamless synchronization between your learning journey and your professional workflow.
            </p>
        </div>
        <div class="grid md:grid-cols-3 gap-6">
            <div class="bg-white p-6 rounded-xl shadow-sm text-center">
                <div class="w-14 h-14 mx-auto mb-4 bg-primary/10 rounded-full flex items-center justify-center">
                    <svg class="w-7 h-7 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                    </svg>
                </div>
                <h3 class="text-lg font-bold text-secondary mb-2">Real-Time Sync</h3>
                <p class="text-gray-600 text-sm">Your course progress and certificates sync instantly with your Skedwise 2.0 dashboard.</p>
            </div>
            <div class="bg-white p-6 rounded-xl shadow-sm text-center">
                <div class="w-14 h-14 mx-auto mb-4 bg-primary/10 rounded-full flex items-center justify-center">
                    <svg class="w-7 h-7 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                    </svg>
                </div>
                <h3 class="text-lg font-bold text-secondary mb-2">Single Sign-On</h3>
                <p class="text-gray-600 text-sm">One login for both platforms. Access your academy courses directly from Skedwise 2.0.</p>
            </div>
            <div class="bg-white p-6 rounded-xl shadow-sm text-center">
                <div class="w-14 h-14 mx-auto mb-4 bg-primary/10 rounded-full flex items-center justify-center">
                    <svg class="w-7 h-7 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/>
                    </svg>
                </div>
                <h3 class="text-lg font-bold text-secondary mb-2">Certified Badges</h3>
                <p class="text-gray-600 text-sm">Earn verified certificates that appear on your Skedwise 2.0 professional profile.</p>
            </div>
        </div>
    </div>

    <!-- Course Description Section -->
    <div class="mb-20">
        <h2 class="text-3xl font-bold text-center text-secondary mb-12">Everything You Need to Succeed</h2>
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            <div class="p-6 bg-white rounded-xl shadow-sm border border-gray-100 flex items-start space-x-4">
                <div class="p-3 bg-blue-50 text-primary rounded-lg text-2xl">📺</div>
                <div>
                    <h3 class="text-lg font-bold text-secondary mb-2">Video Lessons</h3>
                    <p class="text-gray-600 text-sm">Engaging high-quality video content to help you understand complex concepts visually.</p>
                </div>
            </div>
            <div class="p-6 bg-white rounded-xl shadow-sm border border-gray-100 flex items-start space-x-4">
                <div class="p-3 bg-green-50 text-green-600 rounded-lg text-2xl">📝</div>
                <div>
                    <h3 class="text-lg font-bold text-secondary mb-2">Interactive Quizzes</h3>
                    <p class="text-gray-600 text-sm">Test your knowledge immediately after learning with automated assessments and grading.</p>
                </div>
            </div>
            <div class="p-6 bg-white rounded-xl shadow-sm border border-gray-100 flex items-start space-x-4">
                <div class="p-3 bg-purple-50 text-purple-600 rounded-lg text-2xl">📖</div>
                <div>
                    <h3 class="text-lg font-bold text-secondary mb-2">Text Lessons</h3>
                    <p class="text-gray-600 text-sm">Deep-dive reading materials structured carefully for comprehensive reading.</p>
                </div>
            </div>
            <div class="p-6 bg-white rounded-xl shadow-sm border border-gray-100 flex items-start space-x-4">
                <div class="p-3 bg-yellow-50 text-yellow-600 rounded-lg text-2xl">✏️</div>
                <div>
                    <h3 class="text-lg font-bold text-secondary mb-2">Assignments</h3>
                    <p class="text-gray-600 text-sm">Submit your practical work for instructor review and receive personalized feedback.</p>
                </div>
            </div>
            <div class="p-6 bg-white rounded-xl shadow-sm border border-gray-100 flex items-start space-x-4">
                <div class="p-3 bg-red-50 text-red-600 rounded-lg text-2xl">🔗</div>
                <div>
                    <h3 class="text-lg font-bold text-secondary mb-2">Shared Materials</h3>
                    <p class="text-gray-600 text-sm">Access links, presentations, and resources shared directly by your instructors.</p>
                </div>
            </div>
            <div class="p-6 bg-white rounded-xl shadow-sm border border-gray-100 flex items-start space-x-4">
                <div class="p-3 bg-teal-50 text-teal-600 rounded-lg text-2xl">📎</div>
                <div>
                    <h3 class="text-lg font-bold text-secondary mb-2">Documents</h3>
                    <p class="text-gray-600 text-sm">Download necessary templates, PDFs, and vital documentation right from your dashboard.</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Pricing CTA Section -->
    <div class="bg-gray-50 rounded-2xl p-10 text-center border border-gray-200 mb-10">
        <h2 class="text-3xl font-bold mb-4 text-secondary">Start Your Learning Journey Today</h2>
        <p class="text-lg text-gray-600 max-w-2xl mx-auto mb-8">
            Join thousands of students enhancing their skills. Choose the perfect course and get instant access to premium study materials.
        </p>
        <div class="bg-white p-8 rounded-xl shadow-md max-w-md mx-auto border border-primary">
            <h3 class="text-2xl font-bold text-secondary mb-2">All Access Pass</h3>
            <div class="text-4xl font-extrabold text-primary mb-4">₨ 25,000</div>
            <ul class="text-left space-y-3 mb-8 text-gray-600">
                <li class="flex items-center"><svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg> Complete Course Access</li>
                <li class="flex items-center"><svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg> Verified Certificates</li>
                <li class="flex items-center"><svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg> Dedicated Support</li>
            </ul>
            <button type="button" onclick="openContactModal()" class="block w-full px-6 py-3 bg-primary text-white font-semibold rounded-md hover:bg-primary-hover transition-colors">
                Contact Us
            </button>
        </div>
    </div>
</div>

<!-- Contact Modal -->
<div id="contactModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden p-4">
    <div class="bg-white rounded-2xl max-w-md w-full p-6 transform transition-all">
        <div class="flex justify-between items-center mb-6">
            <h3 class="text-xl font-bold text-secondary">Contact Us</h3>
            <button onclick="closeContactModal()" class="text-gray-400 hover:text-gray-600">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>
        <form id="contactForm" onsubmit="submitContactForm(event)">
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Name</label>
                    <input type="text" name="name" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition" placeholder="Your name">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                    <input type="email" name="email" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition" placeholder="your@email.com">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Message</label>
                    <textarea name="message" required rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition resize-none" placeholder="How can we help you?"></textarea>
                </div>
                <button type="submit" id="contactSubmitBtn" class="w-full px-6 py-3 bg-primary text-white font-semibold rounded-lg hover:bg-primary-hover transition-colors">
                    Send Message
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function openContactModal() {
        document.getElementById('contactModal').classList.remove('hidden');
    }

    function closeContactModal() {
        document.getElementById('contactModal').classList.add('hidden');
    }

    // Close modal on backdrop click
    document.getElementById('contactModal').addEventListener('click', function(e) {
        if (e.target === this) closeContactModal();
    });

    async function submitContactForm(event) {
        event.preventDefault();
        const form = document.getElementById('contactForm');
        const btn = document.getElementById('contactSubmitBtn');
        const formData = new FormData(form);
        const data = Object.fromEntries(formData.entries());

        btn.disabled = true;
        btn.innerHTML = 'Sending...';

        try {
            const response = await fetch('{{ route('contact') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
                },
                body: JSON.stringify(data)
            });

            const result = await response.json();

            if (result.success) {
                const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary').trim() || '#2563EB';
                Swal.fire({
                    title: 'Message Sent!',
                    text: 'We have received your inquiry and will get back to you soon.',
                    icon: 'success',
                    confirmButtonText: 'OK',
                    confirmButtonColor: primaryColor,
                });
                form.reset();
                closeContactModal();
            } else {
                throw new Error(result.message || 'Failed to send message');
            }
        } catch (err) {
            console.error(err);
            Swal.fire({
                title: 'Error',
                text: err.message || 'Failed to send message. Please try again.',
                icon: 'error',
                confirmButtonText: 'OK',
                confirmButtonColor: '#DC2626',
            });
        } finally {
            btn.disabled = false;
            btn.innerHTML = 'Send Message';
        }
    }
</script>
@endpush