{% extends 'base.html' %}
{% load static %}

{% block title %}منار التحفيظ - الرئيسية{% endblock %}

{% block head %}
<style>
  .hero-section {
    background: linear-gradient(135deg, rgba(0, 77, 64, 0.8), rgba(253, 251, 246, 0.5));
    padding: 100px 0;
    color: white;
  }
  .hero-section h1 {
    font-size: 3.5rem;
    font-weight: 700;
    color: white;
  }
  .hero-section .lead {
    font-size: 1.5rem;
  }
  .section {
    padding: 60px 0;
  }
  .teacher-card {
    border: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
</style>
{% endblock %}

{% block content %}
<div class="hero-section text-center">
  <div class="container">
    <h1>أنر دربك بحفظ كتاب الله</h1>
    <p class="lead">انضم إلينا في رحلة إيمانية لتعلم وحفظ القرآن الكريم مع نخبة من المعلمين المهرة.</p>
    <a href="#" class="btn btn-secondary btn-lg">اكتشف برامجنا</a>
  </div>
</div>

<section id="about-snippet" class="section bg-white">
  <div class="container">
    <div class="row">
      <div class="col-md-8 offset-md-2 text-center">
        <h2>عن منار التحفيظ</h2>
        <p class="lead">نحن مؤسسة تعليمية تهدف إلى تيسير تعلم القرآن الكريم وحفظه لجميع الأعمار حول العالم، باستخدام أساليب تفاعلية ومنهجية مبتكرة.</p>
        <a href="/about" class="btn btn-primary">اعرف المزيد</a>
      </div>
    </div>
  </div>
</section>

<section id="teachers-preview" class="section">
  <div class="container">
    <div class="row mb-4">
      <div class="col text-center">
        <h2>نخبة من المعلمين</h2>
      </div>
    </div>
    <div class="row">
      <div class="col-md-4">
        <div class="card teacher-card text-center p-3">
          <img src="https://i.pravatar.cc/150?img=1" class="rounded-circle mx-auto" alt="Teacher">
          <div class="card-body">
            <h5 class="card-title">الشيخ أحمد المصري</h5>
            <p class="card-text">إجازة في القراءات العشر</p>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card teacher-card text-center p-3">
          <img src="https://i.pravatar.cc/150?img=2" class="rounded-circle mx-auto" alt="Teacher">
          <div class="card-body">
            <h5 class="card-title">الأستاذة فاطمة الهاشمي</h5>
            <p class="card-text">خبرة 10 سنوات في تعليم الأطفال</p>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card teacher-card text-center p-3">
          <img src="https://i.pravatar.cc/150?img=3" class="rounded-circle mx-auto" alt="Teacher">
          <div class="card-body">
            <h5 class="card-title">الدكتور يوسف عبد الرحمن</h5>
            <p class="card-text">متخصص في علوم التجويد</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}
