@extends('layouts.app')

@section('title', 'الرئيسية - ' . ($siteSettings['site_name'] ?? ''))

@section('content')
<section class="hero hero-home" style="--hero-bg: url('{{ asset('images/hero.jpg') }}');">
    <div class="hero-overlay" aria-hidden="true"></div>
    <div class="container hero-content">
        <div class="hero-logo">
            <x-site-logo size="lg" :loading="'eager'" />
        </div>
        @include('components.ornament')
        <h1 class="title-calligraphy">{{ $siteSettings['hero_title'] ?? 'عشيرة آل حمد اليسارية' }}</h1>
        @include('components.divider')
        <p class="slogan title-calligraphy-alt">{{ $siteSettings['hero_subtitle'] ?? 'نبت أصلنا .. ويُحفظ نسبنا .. ويبقى اسمنا' }}</p>
        <p>{{ $siteSettings['hero_description'] ?? '' }}</p>
    </div>
</section>

<section class="search-section">
    <div class="container">
        <div class="search-box glass-card">
            <h2><i class="fa-solid fa-magnifying-glass icon-gold"></i> البحث في العشيرة</h2>
            <p>ابحث عن اسم شخص لمعرفة نسبه وتسلسله</p>
            <form class="search-form" action="{{ route('search') }}" method="GET">
                <input type="text" name="q" placeholder="أدخل الاسم الرباعي أو الجزء منه" data-live-search data-results="home-search-results">
                <button type="submit" class="btn-primary"><i class="fa-solid fa-magnifying-glass"></i> بحث</button>
            </form>
            <div id="home-search-results"></div>
        </div>
    </div>
</section>

<section class="section">
    <div class="container">
        <h2 class="section-title title-calligraphy">أقسام الموقع</h2>
        @include('components.divider')
        <div class="cards-grid">
            <div class="feature-card glass-card">
                <div class="icon-wrap"><i class="fa-solid fa-people-group"></i></div>
                <h3>عن العشيرة</h3>
                <p>تعرف على تاريخ العشيرة وأصولها وقيمها الأصيلة في النجف الأشرف.</p>
                <a href="{{ route('about') }}" class="btn-outline"><i class="fa-solid fa-arrow-left"></i> عرض المزيد</a>
            </div>
            <div class="feature-card glass-card">
                <div class="icon-wrap"><i class="fa-solid fa-sitemap"></i></div>
                <h3>شجرة النسب</h3>
                <p>استكشف شجرة النسب التفاعلية واطلع على فروع العشيرة وأنسابها.</p>
                <a href="{{ route('family-tree') }}" class="btn-outline"><i class="fa-solid fa-arrow-left"></i> عرض المزيد</a>
            </div>
            <div class="feature-card glass-card">
                <div class="icon-wrap"><i class="fa-solid fa-scroll"></i></div>
                <h3>التوثيق والمصادر</h3>
                <p>اطلع على الوثائق والمخطوطات والمصادر التاريخية الموثقة.</p>
                <a href="{{ route('documents') }}" class="btn-outline"><i class="fa-solid fa-arrow-left"></i> عرض المزيد</a>
            </div>
            <div class="feature-card glass-card">
                <div class="icon-wrap"><i class="fa-solid fa-calendar-days"></i></div>
                <h3>الأخبار والمناسبات</h3>
                <p>تابع آخر أخبار العشيرة ومناسباتها وفعالياتها.</p>
                <a href="{{ route('news.index') }}" class="btn-outline"><i class="fa-solid fa-arrow-left"></i> عرض المزيد</a>
            </div>
        </div>
    </div>
</section>

<section class="about-banner">
    <div class="container about-banner-inner">
        <div>
            <h2 class="title-calligraphy">{{ $aboutSnippet->title ?? 'نبذة عن العشيرة' }}</h2>
            @include('components.divider')
            <div class="about-text">{!! $aboutSnippet->content ?? '<p>عشيرة آل حمد اليسارية من عشائر اليسار الطائية في النجف الأشرف.</p>' !!}</div>
            <a href="{{ route('about') }}" class="btn-primary" style="margin-top:1rem;"><i class="fa-solid fa-book-open"></i> اقرأ المزيد</a>
        </div>
        <div class="logo-circle">
            <div class="logo-ring" aria-hidden="true"></div>
            <x-site-logo size="xl" :loading="'eager'" />
        </div>
    </div>
</section>
@endsection