@extends('layouts.app')

@section('content')
<div class="bg-indigo-700 text-white py-16 text-center">
    <h1 class="text-4xl font-bold">Welcome to CREATON</h1>
    <p class="mt-2 text-lg">Your gateway to smarter exams, blogs, and learning resources.</p>
    @guest
        <a href="{{ route('register') }}" class="mt-6 inline-block px-6 py-3 bg-white text-indigo-700 font-bold rounded">Register Now</a>
    @endguest
</div>

<div class="container mx-auto py-8">
    <h2 class="text-xl font-bold mb-4">Explore Popular Exams</h2>
    <div class="grid md:grid-cols-3 gap-6">
        @foreach($exams as $exam)
            <div class="border rounded-lg p-4">
                <h3 class="text-lg font-semibold">{{ $exam->title }}</h3>
                <p class="text-sm text-gray-600">{{ Str::limit($exam->instructions, 80) }}</p>
                <a href="{{ route('exams.show', $exam->id) }}" class="mt-2 inline-block text-indigo-600 font-medium">Take Exam</a>
            </div>
        @endforeach
    </div>
</div>

<!-- Google Ad Placeholder -->
<div class="container mx-auto my-10 text-center">
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="ca-pub-XXXXXX"
         data-ad-slot="YYYYYY"
         data-ad-format="auto"
         data-full-width-responsive="true"></ins>
    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
@endsection