{% extends "standalone/base.html" %}

{% block title %}{{ brand_name }} - {{ tagline }}{% endblock %}

{% block body_class %}antialiased bg-white text-gray-900{% endblock %}

{% block body %}
<nav class="sticky top-0 z-50 bg-white/95 backdrop-blur border-b border-gray-200">
    <div class="max-w-5xl mx-auto px-6 py-3 flex justify-between items-center">
        <span class="font-bold text-lg gradient-text">{{ brand_name }}</span>
        <div class="hidden md:flex items-center gap-5 text-sm">
            <a href="#about" class="text-gray-500 hover:text-gray-900">About</a>
            {% if features %}<a href="#features" class="text-gray-500 hover:text-gray-900">Features</a>{% endif %}
            {% if faq %}<a href="#faq" class="text-gray-500 hover:text-gray-900">FAQ</a>{% endif %}
            {% if augments %}<a href="#tools" class="text-gray-500 hover:text-gray-900">Tools</a>{% endif %}
            <a href="admin.html" class="text-gray-500 hover:text-gray-900">&#9881; Admin</a>
            <a href="#cta" class="px-4 py-2 rounded-lg text-white text-sm font-semibold" style="background:var(--brand-primary);">{{ cta_text }}</a>
        </div>
    </div>
</nav>

<section class="relative min-h-[70vh] flex items-center justify-center text-center text-white" style="{% if hero_bg_image %}background-image:url('{{ hero_bg_image }}');background-size:cover;background-position:center;{% else %}background:linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));{% endif %}">
    {% if hero_bg_image %}<div class="absolute inset-0 bg-black/50"></div>{% endif %}
    <div class="relative z-10 max-w-3xl mx-auto px-6 py-20">
        {% if niche %}<span class="inline-block text-sm bg-white/15 px-4 py-1.5 rounded-full mb-6">{{ niche }}</span>{% endif %}
        <h1 class="text-4xl md:text-5xl font-extrabold mb-4 leading-tight">{{ headline }}</h1>
        {% if subheadline %}<p class="text-xl text-white/80 mb-4">{{ subheadline }}</p>{% endif %}
        {% if hero_body %}<p class="text-base text-white/65 max-w-lg mx-auto mb-8">{{ hero_body }}</p>{% endif %}
        <div class="flex gap-3 justify-center flex-wrap">
            <a href="#cta" class="bg-white px-6 py-3 rounded-lg font-bold" style="color:var(--brand-primary);">{{ cta_text }}</a>
            <a href="#about" class="bg-white/15 text-white px-6 py-3 rounded-lg font-semibold border border-white/25">Learn More</a>
        </div>
    </div>
</section>

{% if about %}
<section id="about" class="py-16 px-6">
    <div class="max-w-3xl mx-auto text-center">
        <h2 class="text-2xl font-bold mb-4">{{ about_title }}</h2>
        <p class="text-gray-600 leading-relaxed">{{ about }}</p>
    </div>
</section>
{% endif %}

{% if features %}
<section id="features" class="py-16 px-6 bg-gray-50">
    <div class="max-w-5xl mx-auto">
        <h2 class="text-2xl font-bold text-center mb-3">What We Offer</h2>
        {% if offer %}<p class="text-center text-gray-500 mb-10 max-w-xl mx-auto">{{ offer }}</p>{% endif %}
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-5">
            {% for f in features %}
            <div class="bg-white rounded-xl p-6 border border-gray-200 hover:shadow-md transition-shadow">
                <div class="text-2xl mb-3">{{ f.icon_emoji }}</div>
                <h3 class="font-bold text-gray-900 mb-1.5">{{ f.title }}</h3>
                <p class="text-sm text-gray-500 leading-relaxed">{{ f.description }}</p>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}

{% if testimonials %}
<section class="py-16 px-6">
    <div class="max-w-5xl mx-auto">
        <h2 class="text-2xl font-bold text-center mb-10">What People Say</h2>
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-5">
            {% for t in testimonials %}
            <div class="bg-white rounded-xl p-6 border border-gray-200">
                <p class="text-gray-600 italic mb-4 leading-relaxed">&ldquo;{{ t.quote }}&rdquo;</p>
                <div class="flex items-center gap-2">
                    <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold" style="background:var(--brand-primary);">{{ t.name[0] if t.name else 'A' }}</div>
                    <div><div class="font-semibold text-sm">{{ t.name }}</div>{% if t.role %}<div class="text-xs text-gray-400">{{ t.role }}</div>{% endif %}</div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}

{% if faq %}
<section id="faq" class="py-16 px-6 bg-gray-50">
    <div class="max-w-2xl mx-auto">
        <h2 class="text-2xl font-bold text-center mb-10">FAQ</h2>
        <div class="space-y-2">
            {% for item in faq %}
            <details class="bg-white rounded-lg border border-gray-200 group">
                <summary class="flex justify-between items-center px-5 py-4 cursor-pointer font-medium text-gray-900">{{ item.question }}<svg class="w-4 h-4 text-gray-400 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg></summary>
                <div class="px-5 pb-4 text-sm text-gray-600 leading-relaxed border-t border-gray-100 pt-3">{{ item.answer }}</div>
            </details>
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}

{% if augments %}
<section id="tools" class="py-16 px-6">
    <div class="max-w-4xl mx-auto">
        <h2 class="text-2xl font-bold text-center mb-10">Tools &amp; Resources</h2>
        <div class="grid md:grid-cols-2 gap-4">
            {% for aug in augments %}
            <a href="tools/{{ aug.slug }}.html" class="flex items-start gap-4 bg-white rounded-xl p-5 border border-gray-200 hover:shadow-md transition-shadow no-underline">
                <div class="w-10 h-10 rounded-lg flex items-center justify-center text-white flex-shrink-0" style="background:var(--brand-primary);">&#9889;</div>
                <div><div class="font-bold text-gray-900 mb-0.5">{{ aug.title }}</div><div class="text-xs text-gray-500">{{ aug.description[:100] }}{% if aug.description|length > 100 %}...{% endif %}</div></div>
            </a>
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}

<section id="cta" class="py-20 px-6 text-white text-center" style="background:linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));">
    <div class="max-w-2xl mx-auto">
        <h2 class="text-3xl font-extrabold mb-4">Ready to Get Started?</h2>
        <p class="text-white/80 mb-8">{{ subheadline }}</p>
        <a href="#" class="inline-block bg-white px-8 py-3 rounded-lg font-bold" style="color:var(--brand-primary);">{{ cta_text }}</a>
    </div>
</section>

<footer class="bg-gray-900 text-gray-400 py-10 px-6 text-center">
    <p class="font-bold text-white mb-1">{{ brand_name }}</p>
    <p class="text-sm mb-6">{{ tagline }}</p>
    <p class="text-xs text-gray-600">&copy; {{ brand_name }} &bull; {{ domain }}</p>
</footer>
{% endblock %}