{% extends 'base.html' %}
{% block title %}Learning Courses | Try English{% endblock %}
{% block content %}
<!-- Hero Section -->
<div class="w-full bg-gradient-to-r from-green-100 via-green-50 to-white py-12 mb-8">
  <div class="max-w-4xl mx-auto text-center">
    <h1 class="text-4xl md:text-5xl font-extrabold text-green-900 mb-4">Explore Learning Courses</h1>
    <p class="text-lg md:text-xl text-green-700 mb-6">Advance your English with comprehensive learning courses designed for deep understanding and skill-building.</p>
    <div class="flex justify-center gap-4 flex-wrap">
      <a href="{{ url_for('auth.signup') }}" class="btn btn-accent btn-lg px-8 py-3 text-lg shadow-lg hover:scale-105 transition">Sign Up to Enroll</a>
    </div>
  </div>
</div>
<!-- Courses Grid -->
<div class="max-w-6xl mx-auto px-4 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
  {% for course in courses %}
    <div class="bg-white rounded-2xl shadow-lg hover:shadow-2xl transition p-6 flex flex-col items-center text-center border border-green-100">
      <div class="w-16 h-16 rounded-full bg-green-50 flex items-center justify-center mb-4 shadow overflow-hidden">
        <img src="{{ url_for('static', filename='images/lgu.png') }}" alt="LGU Logo" class="w-12 h-12 object-contain" />
      </div>
      <h2 class="text-xl font-bold text-green-900 mb-2">{{ course.title }}</h2>
      <p class="text-green-700 mb-4 min-h-[48px]">{{ course.description }}</p>
      <div class="flex items-center justify-center gap-2 mb-4">
        <span class="text-yellow-400"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i></span>
        <span class="text-sm text-green-400">4.9/5</span>
      </div>
      <a href="{{ url_for('auth.signup', course_id='learn_' ~ course.id) }}" class="btn btn-primary w-full py-2 mt-auto">Enroll Now</a>
    </div>
  {% else %}
    <div class="col-span-full text-center text-gray-400">No learning courses available at the moment.</div>
  {% endfor %}
</div>
{% endblock %}