{% extends "base.html" %}

{% block content %}
<div class="max-w-7xl mx-auto">
  <!-- Hero Section -->
  <section class="text-center py-24">
    <h1 class="text-4xl md:text-6xl font-bold mb-4 bg-gradient-to-r from-gray-900 to-emerald-600 dark:from-white dark:to-emerald-400 bg-clip-text text-transparent">
      {{ site.config.title }}
    </h1>
    {% if site.config.extra.tagline %}
    <p class="text-xl md:text-2xl text-gray-600 dark:text-gray-300 mb-6">{{ site.config.extra.tagline }}</p>
    {% endif %}

    {% if home %}
    <p class="text-lg text-gray-500 dark:text-gray-400 max-w-2xl mx-auto mb-8 leading-relaxed">{{ home.content | striptags }}</p>
    {% endif %}

    {% set cta_text = site.config.extra.cta_text | default(value="") %}
    {% set cta_url = site.config.extra.cta_url | default(value="#") %}
    {% if cta_text %}
    <a href="{{ cta_url }}" class="inline-block bg-emerald-500 dark:bg-emerald-400 text-white dark:text-gray-900 px-8 py-4 rounded-lg font-semibold text-lg hover:-translate-y-0.5 hover:shadow-lg hover:shadow-emerald-500/30 dark:hover:shadow-emerald-400/30 transition-all">
      {{ cta_text }}
    </a>
    {% endif %}
  </section>

  <!-- Features Section -->
  {% if site.data.features %}
  <section class="py-20" id="features">
    <h2 class="text-3xl font-bold text-center mb-12 text-gray-900 dark:text-white">Features</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      {% for feature in site.data.features.items %}
      <div class="bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl p-8 text-center hover:border-emerald-500/50 dark:hover:border-emerald-400/50 transition-colors shadow-sm hover:shadow-md">
        <div class="text-4xl mb-4">
          {% if feature.icon == "zap" %}⚡{% endif %}
          {% if feature.icon == "shield" %}🛡️{% endif %}
          {% if feature.icon == "code" %}💻{% endif %}
          {% if feature.icon == "trending-up" %}📈{% endif %}
          {% if feature.icon == "activity" %}📊{% endif %}
          {% if feature.icon == "headphones" %}🎧{% endif %}
        </div>
        <h3 class="text-xl font-semibold mb-3 text-gray-900 dark:text-white">{{ feature.title }}</h3>
        <p class="text-gray-500 dark:text-gray-400 leading-relaxed">{{ feature.description }}</p>
      </div>
      {% endfor %}
    </div>
  </section>
  {% endif %}

  <!-- Testimonials Section -->
  {% if site.data.testimonials %}
  <section class="py-20" id="testimonials">
    <h2 class="text-3xl font-bold text-center mb-12 text-gray-900 dark:text-white">What People Say</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      {% for testimonial in site.data.testimonials.items %}
      <blockquote class="bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl p-8 shadow-sm">
        <p class="text-lg text-gray-600 dark:text-gray-300 leading-relaxed mb-6">"{{ testimonial.quote }}"</p>
        <footer class="flex flex-col gap-1">
          <strong class="text-gray-900 dark:text-white">{{ testimonial.author }}</strong>
          <span class="text-gray-500 dark:text-gray-400 text-sm">{{ testimonial.role }}</span>
        </footer>
      </blockquote>
      {% endfor %}
    </div>
  </section>
  {% endif %}

  <!-- Pricing Section -->
  {% if site.data.pricing %}
  <section class="py-20" id="pricing">
    <h2 class="text-3xl font-bold text-center mb-12 text-gray-900 dark:text-white">Pricing</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 items-start">
      {% for plan in site.data.pricing.plans %}
      <div class="bg-white dark:bg-white/5 border rounded-xl p-8 text-center relative shadow-sm {% if plan.featured %}border-emerald-500 dark:border-emerald-400 scale-105 shadow-lg{% else %}border-gray-200 dark:border-white/10{% endif %}">
        {% if plan.featured %}
        <span class="absolute -top-3 left-1/2 -translate-x-1/2 bg-emerald-500 dark:bg-emerald-400 text-white dark:text-gray-900 px-4 py-1 rounded-full text-xs font-semibold">
          Most Popular
        </span>
        {% endif %}
        <h3 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-white">{{ plan.name }}</h3>
        <div class="mb-4">
          <span class="text-5xl font-bold text-gray-900 dark:text-white">{{ plan.price }}</span>
          {% if plan.period %}<span class="text-gray-500 dark:text-gray-400">{{ plan.period }}</span>{% endif %}
        </div>
        <p class="text-gray-500 dark:text-gray-400 mb-6">{{ plan.description }}</p>
        <ul class="text-left mb-8 space-y-3">
          {% for feature in plan.features %}
          <li class="text-gray-600 dark:text-gray-300 border-b border-gray-100 dark:border-white/5 pb-3">
            <span class="text-emerald-500 dark:text-emerald-400 mr-2">✓</span>{{ feature }}
          </li>
          {% endfor %}
        </ul>
        <a href="#" class="block py-3 px-6 rounded-lg border transition-all {% if plan.featured %}bg-emerald-500 dark:bg-emerald-400 text-white dark:text-gray-900 border-emerald-500 dark:border-emerald-400 hover:bg-emerald-600 dark:hover:bg-emerald-300{% else %}border-gray-200 dark:border-white/20 text-gray-700 dark:text-white hover:bg-gray-50 dark:hover:bg-white/5 hover:border-gray-300 dark:hover:border-white/30{% endif %}">
          {{ plan.cta }}
        </a>
      </div>
      {% endfor %}
    </div>
  </section>
  {% endif %}

  <!-- Gallery Section -->
  {% if site.data.gallery %}
  <section class="py-20" id="gallery">
    <h2 class="text-3xl font-bold text-center mb-4 text-gray-900 dark:text-white">Live Examples</h2>
    <p class="text-center text-gray-500 dark:text-gray-400 mb-12 max-w-2xl mx-auto">Explore sites built with {{ site.config.title }}. Each example demonstrates a different use case.</p>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {% for item in site.data.gallery.items %}
      <a href="{{ item.url }}" class="group block bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl p-6 hover:border-emerald-500/50 dark:hover:border-emerald-400/50 hover:shadow-lg transition-all hover:-translate-y-1">
        <div class="flex items-center gap-3 mb-3">
          <div class="w-10 h-10 rounded-lg bg-emerald-100 dark:bg-emerald-500/20 flex items-center justify-center text-emerald-600 dark:text-emerald-400">
            {% if item.icon == "pencil" %}
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" /></svg>
            {% elif item.icon == "book" %}
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" /></svg>
            {% elif item.icon == "user" %}
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg>
            {% elif item.icon == "list" %}
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" /></svg>
            {% elif item.icon == "rocket" %}
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg>
            {% elif item.icon == "presentation" %}
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" /></svg>
            {% else %}
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
            {% endif %}
          </div>
          <h3 class="text-lg font-semibold text-gray-900 dark:text-white group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors">{{ item.title }}</h3>
        </div>
        <p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">{{ item.description }}</p>
      </a>
      {% endfor %}
    </div>
  </section>
  {% endif %}

</div>
{% endblock %}