@extends('layouts.app')

@section('title','Beranda')

@section('content')
<section
    class="relative my-4
           max-w-screen-2xl sm:mx-2 xl:mx-auto
           h-[420px] sm:h-[500px] lg:h-[600px]
           overflow-hidden rounded-2xl">

    {{-- Background Image --}}
    <div
        class="absolute inset-0 bg-cover bg-center"
        style="background-image: url('{{ asset('images/banner1.JPG') }}')">
    </div>

    {{-- Overlay --}}
    <div
        class="absolute inset-0 bg-gradient-to-r
               from-emerald-950/90
               via-emerald-900/80
               to-emerald-800/60">
    </div>

    {{-- Content --}}
    <div
        class="relative z-10 h-full
               flex items-center justify-center
               px-4 sm:px-6 text-center">

        <div class="max-w-md sm:max-w-xl lg:max-w-3xl">
            <img src="{{ asset('images/awrad-icon.png') }}" class="h-10 sm:h-12 md:h-24 mx-auto mb-6 drop-shadow-lg" alt="Logo Pondok">

            <span
                class="inline-block mb-3 px-4 py-1 rounded-full
                       bg-white/10 text-emerald-200
                       text-xs sm:text-sm">
                Selamat Datang di
            </span>

            <h1
                class="text-2xl sm:text-4xl lg:text-5xl
                       font-bold text-white leading-tight">
                Awrad Annajiyah
            </h1>

            <p
                class="mt-4 text-emerald-100
                       text-sm sm:text-base lg:text-lg
                       leading-relaxed">
                Kumpulan wirid dan kitab yang diamalkan para santri,
                disusun rapi agar mudah dibaca, diamalkan,
                dan dipelajari oleh masyarakat luas.
            </p>

            <div
                class="mt-6 sm:mt-8
                       flex flex-col sm:flex-row
                       justify-center gap-3 sm:gap-4">

                <a href="{{ route('wirid.index') }}"
                   class="px-6 sm:px-8 py-3
                          rounded-xl bg-emerald-500 text-white
                          text-sm sm:text-base
                          hover:bg-emerald-600 transition">
                    Baca Wirid
                </a>

                <a href="{{ route('kitab.index') }}"
                   class="px-6 sm:px-8 py-3
                          rounded-xl border border-white/40
                          text-white text-sm sm:text-base
                          hover:bg-white/10 transition">
                    Baca Kitab
                </a>

            </div>

        </div>
    </div>
</section>

{{-- ================= FITUR SECTION ================= --}}
<section class="py-14 sm:py-20 bg-white">
    <div class="max-w-7xl mx-auto px-4">

        {{-- Heading --}}
        <div class="text-center mb-10 sm:mb-14">
            <h2 class="text-2xl sm:text-3xl font-bold text-slate-800">
                Fitur Utama
            </h2>
            <p class="mt-3 sm:mt-4 text-sm sm:text-base text-slate-500">
                Dirancang sederhana agar fokus pada ilmu dan amal
            </p>
        </div>

        {{-- Grid --}}
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">

            {{-- Card 1 --}}
            <div class="rounded-2xl border bg-slate-50 p-6 sm:p-8
                        hover:shadow-lg transition">
                <div class="w-10 h-10 sm:w-12 sm:h-12
                            flex items-center justify-center
                            rounded-xl bg-emerald-100
                            text-emerald-600 mb-5 sm:mb-6">
                    <i class="fa-solid fa-hands-praying text-lg sm:text-xl"></i>
                </div>
                <h3 class="font-semibold text-base sm:text-lg mb-2">
                    Kumpulan Wirid
                </h3>
                <p class="text-slate-600 text-sm leading-relaxed">
                    Wirid-wirid pilihan yang diamalkan para santri,
                    tersusun rapi dan mudah dibaca.
                </p>
            </div>

            {{-- Card 2 --}}
            <div class="rounded-2xl border bg-slate-50 p-6 sm:p-8
                        hover:shadow-lg transition">
                <div class="w-10 h-10 sm:w-12 sm:h-12
                            flex items-center justify-center
                            rounded-xl bg-emerald-100
                            text-emerald-600 mb-5 sm:mb-6">
                    <i class="fa-solid fa-book-quran text-lg sm:text-xl"></i>
                </div>
                <h3 class="font-semibold text-base sm:text-lg mb-2">
                    Kitab PDF
                </h3>
                <p class="text-slate-600 text-sm leading-relaxed">
                    Kitab-kitab berformat PDF, makna pego dan terjemahan,
                    siap dipelajari kapan saja.
                </p>
            </div>

            {{-- Card 3 --}}
            <div class="rounded-2xl border bg-slate-50 p-6 sm:p-8
                        hover:shadow-lg transition">
                <div class="w-10 h-10 sm:w-12 sm:h-12
                            flex items-center justify-center
                            rounded-xl bg-emerald-100
                            text-emerald-600 mb-5 sm:mb-6">
                    <i class="fa-solid fa-layer-group text-lg sm:text-xl"></i>
                </div>
                <h3 class="font-semibold text-base sm:text-lg mb-2">
                    Tersusun & Terstruktur
                </h3>
                <p class="text-slate-600 text-sm leading-relaxed">
                    Konten dikelompokkan berdasarkan kategori
                    agar mudah dicari dan dipahami.
                </p>
            </div>

        </div>
    </div>
</section>

{{-- ================= MANFAAT SECTION ================= --}}
<section class="py-20 bg-slate-50">
    <div class="max-w-6xl mx-auto px-4">

        <div class="grid md:grid-cols-2 gap-12 items-center">

            <div>
                <h2 class="text-3xl font-bold text-slate-800">
                    Untuk Santri & Ummah
                </h2>
                <p class="mt-6 text-slate-600 leading-relaxed">
                    Awrad Annajiyah hadir sebagai media digital
                    untuk menjaga amalan, memperluas manfaat ilmu,
                    dan memudahkan masyarakat mengakses wirid
                    serta kitab klasik dengan lebih praktis.
                </p>

                <ul class="mt-6 space-y-3 text-slate-600">
                    <li class="flex items-center gap-3">
                        <i class="fa-solid fa-check text-emerald-600"></i>
                        Mudah diakses dari mana saja
                    </li>
                    <li class="flex items-center gap-3">
                        <i class="fa-solid fa-check text-emerald-600"></i>
                        Tampilan bersih & nyaman dibaca
                    </li>
                    <li class="flex items-center gap-3">
                        <i class="fa-solid fa-check text-emerald-600"></i>
                        Fokus pada keberkahan & manfaat
                    </li>
                </ul>
            </div>

            <div class="relative">
                <div class="rounded-3xl bg-white p-10 shadow-xl">
                    <div class="text-center">
                        <i class="fa-solid fa-mosque text-emerald-600 text-5xl mb-6"></i>
                        <p class="text-slate-700 font-medium">
                            “Ilmu yang diamalkan akan menjaga pemiliknya,
                            dan amalan yang istiqomah akan menenangkan hati.”
                        </p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>


{{-- ================= CTA SECTION ================= --}}
<section class="py-20 bg-emerald-600 text-white text-center rounded-xl mb-6">
    <div class="max-w-4xl mx-auto px-4">
        <h2 class="text-3xl font-bold">
            Mulai Membaca & Mengamalkan
        </h2>
        <p class="mt-4 text-emerald-100">
            Semoga setiap huruf yang dibaca menjadi keberkahan
        </p>

        <div class="mt-8 flex justify-center gap-4">
            <a href="{{ route('wirid.index') }}"
               class="px-8 py-3 rounded-xl bg-white text-emerald-700 font-semibold
                      hover:bg-emerald-50 transition">
                Wirid
            </a>
            <a href="{{ route('kitab.index') }}"
               class="px-8 py-3 rounded-xl border border-white/40
                      hover:bg-white/10 transition">
                Kitab
            </a>
        </div>
    </div>
</section>

@endsection