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

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

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

{% block body %}
<nav class="sticky top-0 z-50 glass-light border-b border-white/20">
    <div class="max-w-6xl mx-auto px-6 py-3.5 flex justify-between items-center">
        <a href="#" class="font-display font-extrabold text-xl gradient-text tracking-tight">{{ brand_name }}</a>
        <div class="hidden md:flex items-center gap-6">
            <a href="#about" class="text-sm font-medium text-gray-500 hover:text-gray-900 transition-colors">About</a>
            {% if features %}<a href="#features" class="text-sm font-medium text-gray-500 hover:text-gray-900 transition-colors">Features</a>{% endif %}
            {% if pricing_tiers %}<a href="#pricing" class="text-sm font-medium text-gray-500 hover:text-gray-900 transition-colors">Pricing</a>{% endif %}
            {% if faq %}<a href="#faq" class="text-sm font-medium text-gray-500 hover:text-gray-900 transition-colors">FAQ</a>{% endif %}
            {% if augments %}<a href="#tools" class="text-sm font-medium text-gray-500 hover:text-gray-900 transition-colors">Tools</a>{% endif %}
            <a href="admin.html" class="text-sm font-medium text-gray-500 hover:text-gray-900 transition-colors">&#9881; Admin</a>
            <a href="#cta" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl text-sm font-bold text-white btn-premium depth-sm hover:depth-md transition-all" style="background:linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));">{{ cta_text }}</a>
        </div>
        <button onclick="document.getElementById('mobile-menu').classList.toggle('hidden')" class="md:hidden p-2 rounded-lg hover:bg-gray-100">
            <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="M4 6h16M4 12h16M4 18h16"/></svg>
        </button>
    </div>
    <div id="mobile-menu" class="hidden md:hidden px-6 pb-4 space-y-2">
        <a href="#about" class="block py-2 text-sm text-gray-600">About</a>
        {% if features %}<a href="#features" class="block py-2 text-sm text-gray-600">Features</a>{% endif %}
        {% if pricing_tiers %}<a href="#pricing" class="block py-2 text-sm text-gray-600">Pricing</a>{% endif %}
        {% if faq %}<a href="#faq" class="block py-2 text-sm text-gray-600">FAQ</a>{% endif %}
        {% if augments %}<a href="#tools" class="block py-2 text-sm text-gray-600">Tools</a>{% endif %}
        <a href="admin.html" class="block py-2 text-sm text-gray-600">&#9881; Admin</a>
    </div>
</nav>

{# ═══ HERO ═══ #}
<section class="relative min-h-[85vh] flex items-center justify-center text-center text-white overflow-hidden noise-hero" 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-gradient-to-br from-black/70 via-black/50 to-black/30"></div>
    {% endif %}
    <div class="absolute inset-0 texture-noise"></div>
    <div class="absolute inset-0 texture-grid opacity-30"></div>
    <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[800px] rounded-full opacity-20" style="background:radial-gradient(circle, rgba(255,255,255,0.15), transparent 70%);"></div>

    <div class="relative z-10 max-w-4xl mx-auto px-6 py-24">
        {% if niche %}
        <div class="inline-flex items-center gap-2.5 glass rounded-full px-5 py-2.5 mb-8" style="animation: fadeUp 0.8s ease-out forwards;">
            <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
            <span class="text-sm font-semibold text-white/90 tracking-wide">{{ niche }}</span>
        </div>
        {% endif %}
        <h1 class="font-display text-5xl md:text-7xl font-extrabold mb-6 leading-[1.05] tracking-tight" style="opacity:0; animation: fadeUp 0.9s 0.1s ease-out forwards;">{{ headline }}</h1>
        {% if subheadline %}
        <p class="text-xl md:text-2xl text-white/80 font-light max-w-2xl mx-auto mb-4 leading-relaxed" style="opacity:0; animation: fadeUp 0.9s 0.25s ease-out forwards;">{{ subheadline }}</p>
        {% endif %}
        {% if hero_body %}
        <p class="text-base md:text-lg text-white/65 max-w-xl mx-auto mb-10" style="opacity:0; animation: fadeUp 0.9s 0.4s ease-out forwards;">{{ hero_body }}</p>
        {% endif %}
        <div class="flex flex-wrap gap-4 justify-center" style="opacity:0; animation: fadeUp 0.9s 0.55s ease-out forwards;">
            <a href="#cta" class="group inline-flex items-center gap-2 bg-white text-gray-900 px-8 py-4 rounded-2xl font-bold text-base depth-lg hover:depth-xl transition-all hover:-translate-y-0.5" style="color:var(--brand-primary);">
                {{ cta_text }}
                <svg class="w-4 h-4 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
            </a>
            <a href="#about" class="inline-flex items-center gap-2 glass text-white px-8 py-4 rounded-2xl font-semibold text-base hover:bg-white/15 transition-all">
                Learn More
            </a>
        </div>
    </div>

    <style>
        @keyframes fadeUp { from { opacity: 0; transform: translateY(28px); filter: blur(4px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
    </style>
</section>

<div class="divider-gradient"></div>

{# ═══ ABOUT ═══ #}
{% if about %}
<section id="about" class="py-24 px-6 atmo-mesh atmo-orbs relative">
    <div class="max-w-3xl mx-auto text-center reveal section-wrap">
        <span class="inline-flex items-center gap-1.5 text-xs font-bold tracking-[0.15em] uppercase mb-5 px-4 py-2 rounded-full" style="color:var(--brand-primary); background:rgba(var(--brand-primary-rgb),0.08);">About</span>
        <h2 class="font-display text-3xl md:text-4xl font-extrabold text-gray-900 mb-6">{{ about_title }}</h2>
        {% if about_image %}
        <div class="mb-8 rounded-2xl overflow-hidden card-elevated mx-auto max-w-lg">
            <img src="{{ about_image }}" alt="{{ about_title }}" class="w-full h-auto" loading="lazy">
        </div>
        {% endif %}
        <p class="text-lg text-gray-600 leading-relaxed body-lg">{{ about }}</p>
    </div>
</section>
<div class="divider-gradient"></div>
{% endif %}

{# ═══ FEATURES ═══ #}
{% if features %}
<section id="features" class="py-24 px-6 relative bg-dots atmo-aurora" style="background-color:var(--surface-1);">
    <div class="max-w-6xl mx-auto section-wrap">
        <div class="text-center mb-16 reveal">
            <span class="inline-flex items-center gap-1.5 text-xs font-bold tracking-[0.15em] uppercase mb-5 px-4 py-2 rounded-full" style="color:var(--brand-primary); background:rgba(var(--brand-primary-rgb),0.08);">Features</span>
            <h2 class="font-display text-3xl md:text-4xl font-extrabold text-gray-900 mb-4">What We Offer</h2>
            {% if offer %}<p class="text-gray-500 max-w-2xl mx-auto text-lg">{{ offer }}</p>{% endif %}
        </div>
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-7 stagger">
            {% for f in features %}
            <div class="group card-floating accent-bar-top p-8 refraction">
                <div class="relative z-10">
                    <div class="w-14 h-14 rounded-2xl flex items-center justify-center mb-5 inner-highlight" style="background:rgba(var(--brand-primary-rgb),0.08);border:1px solid rgba(var(--brand-primary-rgb),0.15);color:var(--brand-primary);box-shadow:0 4px 12px -2px rgba(var(--brand-primary-rgb),0.15);">{{ f.icon_svg|safe }}</div>
                    <h3 class="font-display text-lg font-bold text-gray-900 mb-3">{{ f.title }}</h3>
                    <p class="text-gray-500 text-[0.95rem] leading-relaxed">{{ f.description }}</p>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
<div class="divider-gradient"></div>
{% endif %}

{# ═══ HOW IT WORKS ═══ #}
{% if how_it_works_steps %}
<section class="py-24 px-6 relative bg-diagonal-lines atmo-mesh" style="background-color:#ffffff;">
    <div class="max-w-4xl mx-auto section-wrap">
        <div class="text-center mb-16 reveal">
            <span class="inline-flex items-center gap-1.5 text-xs font-bold tracking-[0.15em] uppercase mb-5 px-4 py-2 rounded-full" style="color:var(--brand-primary); background:rgba(var(--brand-primary-rgb),0.08);">Process</span>
            <h2 class="font-display text-3xl md:text-4xl font-extrabold text-gray-900 mb-4">{{ how_it_works_title or 'How It Works' }}</h2>
            {% if how_it_works_subtitle %}<p class="text-gray-500 max-w-xl mx-auto text-lg">{{ how_it_works_subtitle }}</p>{% endif %}
        </div>
        <div class="space-y-5 stagger">
            {% for step in how_it_works_steps %}
            <div class="card-elevated p-7 flex items-start gap-6">
                <div class="step-badge flex-shrink-0 mt-1">{{ loop.index }}</div>
                <div class="flex-1 min-w-0">
                    <h3 class="font-display text-lg font-bold text-gray-900 mb-2">{{ step.title }}</h3>
                    <p class="text-gray-500 leading-relaxed text-[0.95rem]">{{ step.description }}</p>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
<div class="divider-gradient"></div>
{% endif %}

{# ═══ PRICING ═══ #}
{% if pricing_tiers %}
<section id="pricing" class="py-24 px-6 relative atmo-orbs bg-crosshatch" style="background-color:var(--surface-1);">
    <div class="max-w-5xl mx-auto section-wrap">
        <div class="text-center mb-16 reveal">
            <span class="inline-flex items-center gap-1.5 text-xs font-bold tracking-[0.15em] uppercase mb-5 px-4 py-2 rounded-full" style="color:var(--brand-primary); background:rgba(var(--brand-primary-rgb),0.08);">Pricing</span>
            <h2 class="font-display text-3xl md:text-4xl font-extrabold text-gray-900 mb-4">{{ pricing_title or 'Choose Your Plan' }}</h2>
            {% if pricing_subtitle %}<p class="text-gray-500 max-w-xl mx-auto text-lg">{{ pricing_subtitle }}</p>{% endif %}
        </div>
        <div class="grid md:grid-cols-{{ pricing_tiers|length }} gap-6 items-start stagger">
            {% for tier in pricing_tiers %}
            {% set is_featured = tier.featured or (pricing_tiers|length == 3 and loop.index == 2) or (pricing_tiers|length == 2 and loop.index == 2) %}
            <div class="{% if is_featured %}card-hero pricing-featured{% else %}card-elevated{% endif %} p-8 text-center relative">
                {% if is_featured %}
                <div class="absolute -top-4 left-1/2 -translate-x-1/2 z-10">
                    <span class="inline-flex items-center gap-1.5 px-4 py-1.5 rounded-full text-xs font-bold text-white tracking-wide" style="background:linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)); box-shadow: 0 4px 12px -2px var(--shadow-color);">
                        &#11088; Most Popular
                    </span>
                </div>
                {% endif %}
                <div class="{% if is_featured %}pt-4{% endif %}">
                    <h3 class="font-display text-xl font-bold text-gray-900 mb-2">{{ tier.name }}</h3>
                    <div class="mb-4">
                        <span class="stat-number">{{ tier.price }}</span>
                        {% if tier.period %}<span class="text-gray-400 text-sm font-medium">/{{ tier.period }}</span>{% endif %}
                    </div>
                    {% if tier.description %}
                    <p class="text-gray-500 text-sm leading-relaxed mb-6">{{ tier.description }}</p>
                    {% endif %}
                    {% if tier.features %}
                    <ul class="text-left space-y-3 mb-8">
                        {% for feat in tier.features %}
                        <li class="flex items-start gap-3">
                            <span class="w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5 text-xs text-white" style="background:linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));">&#10003;</span>
                            <span class="text-gray-600 text-sm leading-relaxed">{{ feat }}</span>
                        </li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                    <a href="#cta" class="{% if is_featured %}btn-premium text-white{% else %}text-gray-700 border-2{% endif %} inline-block w-full py-3.5 rounded-xl font-bold text-sm transition-all hover:-translate-y-0.5" style="{% if is_featured %}background:linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));{% else %}border-color:rgba(var(--brand-primary-rgb),0.2); color:var(--brand-primary);{% endif %}">
                        {{ tier.cta or 'Get Started' }}
                    </a>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
<div class="divider-gradient"></div>
{% endif %}

{# ═══ COMPARISON TABLE ═══ #}
{% if comparison_table and comparison_table.headers %}
<section class="py-24 px-6 relative bg-circuit" style="background-color:#ffffff;">
    <div class="max-w-4xl mx-auto section-wrap">
        <div class="text-center mb-16 reveal">
            <span class="inline-flex items-center gap-1.5 text-xs font-bold tracking-[0.15em] uppercase mb-5 px-4 py-2 rounded-full" style="color:var(--brand-primary); background:rgba(var(--brand-primary-rgb),0.08);">Compare</span>
            <h2 class="font-display text-3xl md:text-4xl font-extrabold text-gray-900 mb-4">{{ comparison_title or 'How We Compare' }}</h2>
        </div>
        <div class="card-elevated overflow-hidden reveal">
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr style="background:linear-gradient(135deg, rgba(var(--brand-primary-rgb),0.06), rgba(var(--brand-secondary-rgb),0.04));">
                            {% for header in comparison_table.headers %}
                            <th class="px-6 py-4 text-left font-display font-bold text-gray-900 {% if loop.first %}{% else %}text-center{% endif %}">{{ header }}</th>
                            {% endfor %}
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in comparison_table.rows %}
                        <tr class="border-t border-gray-100 hover:bg-gray-50/50 transition-colors">
                            {% for cell in row %}
                            <td class="px-6 py-4 {% if loop.first %}font-medium text-gray-900{% else %}text-center text-gray-600{% endif %}">
                                {% if cell == true or cell == 'true' or cell == '✓' %}
                                <span class="inline-flex w-6 h-6 rounded-full items-center justify-center text-white text-xs" style="background:linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));">&#10003;</span>
                                {% elif cell == false or cell == 'false' or cell == '✗' %}
                                <span class="inline-flex w-6 h-6 rounded-full items-center justify-center bg-gray-200 text-gray-400 text-xs">&#10007;</span>
                                {% else %}
                                {{ cell }}
                                {% endif %}
                            </td>
                            {% endfor %}
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>
<div class="divider-gradient"></div>
{% endif %}

{# ═══ TESTIMONIALS ═══ #}
{% if testimonials %}
<section class="py-24 px-6 relative atmo-orbs bg-honeycomb">
    <div class="max-w-6xl mx-auto section-wrap">
        <div class="text-center mb-16 reveal">
            <span class="inline-flex items-center gap-1.5 text-xs font-bold tracking-[0.15em] uppercase mb-5 px-4 py-2 rounded-full text-amber-700 bg-amber-100/80">Testimonials</span>
            <h2 class="font-display text-3xl md:text-4xl font-extrabold text-gray-900">What People Say</h2>
        </div>
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-7 stagger">
            {% for t in testimonials %}
            <div class="card-glass-luxe p-8 relative">
                <div class="absolute top-5 left-7 font-display text-6xl opacity-[0.07] leading-none" style="color:var(--brand-primary);">&ldquo;</div>
                <p class="text-gray-600 italic leading-relaxed mb-6 pt-4 relative z-10">{{ t.quote }}</p>
                <div class="flex items-center gap-3 relative z-10">
                    <div class="w-11 h-11 rounded-full flex items-center justify-center text-white font-bold text-sm inner-highlight" style="background:linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)); box-shadow: 0 4px 12px -2px var(--shadow-color);">{{ t.name[0] if t.name else 'A' }}</div>
                    <div>
                        <div class="font-semibold text-gray-900 text-sm">{{ t.name }}</div>
                        {% if t.role %}<div class="text-gray-400 text-xs">{{ t.role }}</div>{% endif %}
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
<div class="divider-gradient"></div>
{% endif %}

{# ═══ FAQ ═══ #}
{% if faq %}
<section id="faq" class="py-24 px-6 relative bg-dots-fine atmo-mesh" style="background-color:var(--surface-1);">
    <div class="max-w-2xl mx-auto section-wrap">
        <div class="text-center mb-16 reveal">
            <span class="inline-flex items-center gap-1.5 text-xs font-bold tracking-[0.15em] uppercase mb-5 px-4 py-2 rounded-full" style="color:var(--brand-primary); background:rgba(var(--brand-primary-rgb),0.08);">FAQ</span>
            <h2 class="font-display text-3xl md:text-4xl font-extrabold text-gray-900">Frequently Asked Questions</h2>
        </div>
        <div class="space-y-3 stagger">
            {% for item in faq %}
            <details class="group card-compact overflow-hidden">
                <summary class="flex items-center justify-between gap-4 px-7 py-5 cursor-pointer font-semibold text-gray-900 select-none hover:bg-gray-50/50 transition-colors">
                    <span>{{ item.question }}</span>
                    <svg class="w-5 h-5 text-gray-400 transition-transform duration-300 group-open:rotate-180 flex-shrink-0" 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-7 pb-6 text-gray-600 leading-relaxed text-[0.95rem] border-t pt-4" style="border-color:rgba(var(--brand-primary-rgb),0.08);">{{ item.answer }}</div>
            </details>
            {% endfor %}
        </div>
    </div>
</section>
<div class="divider-gradient"></div>
{% endif %}

{# ═══ TOOLS / AUGMENTS ═══ #}
{% if augments %}
<section id="tools" class="py-24 px-6 relative bg-diagonal-lines atmo-aurora" style="background-color:#ffffff;">
    <div class="max-w-4xl mx-auto section-wrap">
        <div class="text-center mb-16 reveal">
            <span class="inline-flex items-center gap-1.5 text-xs font-bold tracking-[0.15em] uppercase mb-5 px-4 py-2 rounded-full" style="color:var(--brand-accent); background:rgba(var(--brand-accent-rgb),0.08);">Resources</span>
            <h2 class="font-display text-3xl md:text-4xl font-extrabold text-gray-900 mb-4">Tools &amp; Resources</h2>
            <p class="text-gray-500 max-w-xl mx-auto">Interactive tools to help you get the most out of your business.</p>
        </div>
        <div class="grid md:grid-cols-2 gap-6 stagger">
            {% for aug in augments %}
            <a href="tools/{{ aug.slug }}.html" class="group card-elevated p-6 flex items-start gap-5 no-underline">
                <div class="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0 text-white text-xl inner-highlight" style="background:linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)); box-shadow: 0 4px 12px -2px var(--shadow-color);">&#9889;</div>
                <div class="flex-1 min-w-0">
                    <div class="font-bold text-gray-900 mb-1 group-hover:gradient-text transition-colors">{{ aug.title }}</div>
                    <div class="text-sm text-gray-500 leading-relaxed line-clamp-2">{{ aug.description[:140] }}{% if aug.description|length > 140 %}...{% endif %}</div>
                </div>
                <svg class="w-5 h-5 text-gray-300 flex-shrink-0 mt-1 group-hover:text-gray-500 transition-all group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
            </a>
            {% endfor %}
        </div>
    </div>
</section>
<div class="divider-gradient"></div>
{% endif %}

{# ═══ CTA ═══ #}
<section id="cta" class="relative py-28 px-6 text-white text-center overflow-hidden" style="background:linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));">
    <div class="absolute inset-0 texture-noise"></div>
    <div class="absolute inset-0 texture-grid opacity-20"></div>
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] rounded-full opacity-15" style="background:radial-gradient(circle, rgba(255,255,255,0.2), transparent 70%);"></div>
    <div class="relative z-10 max-w-3xl mx-auto reveal">
        <h2 class="font-display text-3xl md:text-5xl font-extrabold mb-5">Ready to Get Started?</h2>
        <p class="text-lg text-white/80 mb-10 max-w-xl mx-auto">{{ subheadline }}</p>
        <a href="#" class="inline-flex items-center gap-2 bg-white px-10 py-4 rounded-2xl font-bold text-base btn-premium depth-xl hover:-translate-y-1 transition-all" style="color:var(--brand-primary);">
            {{ cta_text }}
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
        </a>
    </div>
</section>

{# ═══ FOOTER ═══ #}
<footer class="bg-gray-950 text-gray-400 py-16 px-6">
    <div class="max-w-6xl mx-auto text-center">
        <p class="font-display text-xl font-bold text-white mb-2">{{ brand_name }}</p>
        <p class="text-sm mb-8">{{ tagline }}</p>
        <div class="flex justify-center gap-6 mb-8 text-sm">
            <a href="#about" class="hover:text-white transition-colors">About</a>
            {% if features %}<a href="#features" class="hover:text-white transition-colors">Features</a>{% endif %}
            {% if pricing_tiers %}<a href="#pricing" class="hover:text-white transition-colors">Pricing</a>{% endif %}
            {% if faq %}<a href="#faq" class="hover:text-white transition-colors">FAQ</a>{% endif %}
            <a href="admin.html" class="hover:text-white transition-colors">Admin</a>
        </div>
        <div class="h-px bg-gray-800 mb-8"></div>
        <p class="text-xs text-gray-600">&copy; {{ brand_name }} &bull; {{ domain }}</p>
    </div>
</footer>
{% endblock %}