@extends('layouts.shell')
@section('title', 'Ayat & Hadis Hari Ini')
@section('meta_description', 'Ayat Al-Quran dan hadis pilihan hari ini, lengkap dengan terjemahan Indonesia — Quran Review.')

@section('content')
<header class="mb-6 text-center">
    <span class="mx-auto mb-3 grid h-14 w-14 place-items-center rounded-2xl bg-primary/10"><x-icon name="sparkles" class="w-7 h-7 text-primary"/></span>
    <h1 class="text-h1">Inspirasi Hari Ini</h1>
    <p class="text-body text-muted mt-1">{{ now()->translatedFormat('l, d F Y') }}</p>
</header>

{{-- Ayat --}}
<div class="card surface-pattern relative overflow-hidden mb-5">
    <div class="border-b border-outline/60 px-5 py-3"><span class="text-label text-primary">Ayat Al-Quran</span></div>
    <div class="relative p-6 text-center">
        @if(!empty($verse['arabic']))
        <p dir="rtl" class="font-arabic text-3xl leading-loose text-ink">{{ $verse['arabic'] }}</p>
        @endif
        <p class="mt-4 text-body-lg text-muted italic prose-body mx-auto">"{{ $verse['translation'] ?? '' }}"</p>
        <p class="mt-3 chip-primary inline-flex">{{ $verse['ref'] ?? '' }}</p>
    </div>
</div>

{{-- Hadis --}}
<div class="card relative overflow-hidden mb-6">
    <div class="border-b border-outline/60 px-5 py-3"><span class="text-label text-secondary">Hadis Pilihan</span></div>
    <div class="p-6 text-center">
        @if(!empty($hadith['arabic']))
        <p dir="rtl" class="font-arabic text-2xl leading-loose text-ink mb-4">{{ $hadith['arabic'] }}</p>
        @endif
        <p class="text-h3 leading-snug prose-body mx-auto">"{{ $hadith['text'] }}"</p>
        <p class="mt-3 text-body font-semibold text-secondary">{{ $hadith['source'] }}</p>
    </div>
</div>

<div class="flex gap-2">
    <a href="{{ route('prayer.index') }}" class="btn-outline flex-1"><x-icon name="mosque" class="w-5 h-5"/> Jadwal Sholat</a>
    <a href="{{ route('articles.index') }}" class="btn-outline flex-1"><x-icon name="book" class="w-5 h-5"/> Artikel</a>
</div>

@guest
<div class="card mt-6 p-5 text-center">
    <p class="text-body text-muted">Jelajahi kajian, kelas, & event Islami lengkap.</p>
    <a href="{{ route('membership.index') }}" class="btn-filled mt-3">Jadi Member</a>
</div>
@endguest
@endsection