{% extends 'public_frontend/base.html' %}
{% load static i18n %}
{% block title %}{% trans "Home" %}{% endblock %}

{% block content %}
<div class="grid gap-12 md:gap-16">
  {# Hero Section #}
  <section id="hero" class="bg-white rounded-lg shadow-md p-6 md:p-8 text-center">
    <h1 class="text-3xl md:text-4xl font-bold mb-2">{% trans "Streamline Your Factory's Recycling" %}</h1>
    <p class="text-gray-600 max-w-2xl mx-auto mb-6">{% trans "We partner with businesses like yours to manage scrap materials efficiently. Browse listings, request a pickup, and turn your waste into a resource." %}</p>
    <div class="flex gap-3 justify-center">
      <a href="{% url 'public_frontend:pickup_request' %}" class="btn-primary">{% trans "Request a Pickup" %}</a>
      <a href="#listings" class="btn-outline">{% trans "Browse Listings" %}</a>
    </div>
  </section>

  {# Services Section #}
  {% if services %}
  <section id="services">
    <div class="flex items-center justify-between mb-3">
      <h2 class="text-2xl font-semibold">{% trans "Our Services" %}</h2>
    </div>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
      {% for s in services %}
        <a href="{% url 'public_frontend:service_detail' s.pk %}" class="block p-4 bg-white rounded-lg shadow-md hover:bg-gray-50 transition flex items-start gap-4">
          <img src="{% static 'service_icons/' %}{{ s.image_name }}" alt="{{ s.title }} icon" class="w-12 h-12 object-contain"/>
          <div>
            <div class="font-medium">{{ s.get_title_display }}</div>
            <div class="text-sm text-gray-600">{{ s.description }}</div>
          </div>
        </a>
      {% endfor %}
    </div>
  </section>
  {% endif %}

  {# Materials Section #}
  <section id="materials">
    <div class="flex items-center justify-between mb-3">
      <h2 class="text-2xl font-semibold">{% trans "Materials We Accept" %}</h2>
      <a href="{% url 'public_frontend:materials_list' %}" class="text-blue-700 hover:underline">{% trans "View all" %}</a>
    </div>
    <div class="bg-white rounded-lg shadow-md p-4">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            {% for m in materials %}
                <div class="p-2 text-center">
                    <p class="font-medium">{{ m.name }}</p>
                    <p class="text-sm text-gray-500">{{ m.category.name }}</p>
                </div>
            {% empty %}
                <p class="text-gray-500 col-span-full">{% trans "No materials published." %}</p>
            {% endfor %}
        </div>
    </div>
  </section>

  {# Open Listings Section #}
  <section id="listings">
    <div class="flex items-center justify-between mb-3">
      <h2 class="text-2xl font-semibold">{% trans "Open Listings" %}</h2>
      <a href="{% url 'public_frontend:listings_list' %}" class="text-blue-700 hover:underline">{% trans "Browse all" %}</a>
    </div>
    <div class="grid md:grid-cols-3 gap-4">
      {% for l in listings %}
        <a href="{% url 'public_frontend:listing_detail' l.id %}" class="block p-4 border rounded bg-white hover:bg-gray-50 transition">
          <div class="text-sm text-gray-500">{% trans "Ends" %} {{ l.ends_at|default:'—' }}</div>
          <div class="font-medium">{{ l.title }}</div>
          <div class="text-sm text-gray-600 line-clamp-2">{{ l.description|truncatechars:120 }}</div>
        </a>
      {% empty %}
        <div class="text-gray-500 p-4 bg-white rounded-lg shadow-md col-span-full">{% trans "No public listings at the moment." %}</div>
      {% endfor %}
    </div>
  </section>

  {# Pickup Request Section removed; use dedicated page instead #}

  {# Blog Section #}
  <section id="blog">
    <div class="flex items-center justify-between mb-3">
      <h2 class="text-2xl font-semibold">{% trans "Industry Insights" %}</h2>
      <a href="{% url 'public_frontend:blog_list' %}" class="text-blue-700 hover:underline">{% trans "View all" %}</a>
    </div>
    <div class="grid md:grid-cols-3 gap-4">
      {% for p in posts %}
        <a href="{% url 'public_frontend:blog_detail' p.slug %}" class="block p-4 border rounded bg-white hover:bg-gray-50 transition">
          <div class="text-sm text-gray-500">{{ p.published_at|date:'M j, Y' }}</div>
          <div class="font-medium">{{ p.title }}</div>
          <div class="text-sm text-gray-600 line-clamp-2">{{ p.excerpt|default:p.content|striptags|truncatechars:120 }}</div>
        </a>
      {% empty %}
        <div class="text-gray-500 p-4 bg-white rounded-lg shadow-md col-span-full">{% trans "No posts yet." %}</div>
      {% endfor %}
    </div>
  </section>

  {# Contact Section #}
  <section id="contact">
    <h2 class="text-2xl font-semibold mb-3">{% trans "Contact Us" %}</h2>
    <form method="post" action="{% url 'public_frontend:contact' %}" class="bg-white rounded-lg shadow-md p-4 grid gap-4">
      {% csrf_token %}
      <div class="grid md:grid-cols-2 gap-4">
        <div>
          <label class="block text-sm font-medium mb-1">{% trans "Name" %}</label>
          <input type="text" name="name" value="{{ contact_form.name.value|default:'' }}" required class="w-full border rounded px-3 py-2">
        </div>
        <div>
          <label class="block text-sm font-medium mb-1">{% trans "Email" %}</label>
          <input type="email" name="email" value="{{ contact_form.email.value|default:'' }}" required class="w-full border rounded px-3 py-2">
        </div>
      </div>
      <div>
        <label class="block text-sm font-medium mb-1">{% trans "Subject" %}</label>
        <input type="text" name="subject" value="{{ contact_form.subject.value|default:'' }}" class="w-full border rounded px-3 py-2">
      </div>
      <div>
        <label class="block text-sm font-medium mb-1">{% trans "Message" %}</label>
        <textarea name="message" rows="5" class="w-full border rounded px-3 py-2">{{ contact_form.message.value|default:'' }}</textarea>
      </div>
      <div>
        <button class="btn-primary" type="submit">{% trans "Send Message" %}</button>
      </div>
    </form>
  </section>
</div>

<style>
  html {
    scroll-behavior: smooth;
  }
  .btn-primary { background:#1d4ed8; color:white; padding:.625rem 1rem; border-radius:.375rem; font-weight:500; transition: background-color 0.2s; }
  .btn-primary:hover { background:#1e40af; }
  .btn-outline { border:1px solid #cbd5e1; padding:.625rem 1rem; border-radius:.375rem; font-weight:500; transition: background-color 0.2s, border-color 0.2s; }
  .btn-outline:hover { background-color: #f8fafc; border-color: #94a3b8; }
  section { scroll-margin-top: 80px; } /* Offset for fixed header */
</style>
{% endblock %}
