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

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

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

{% block body %}
<style>
    .split-section { display: grid; grid-template-columns: 1fr 1fr; min-height: 50vh; }
    @media (max-width: 768px) { .split-section { grid-template-columns: 1fr; } }
    .split-hero { min-height: 100vh; }
    .split-nav { position: absolute; top: 0; left: 0; right: 0; z-index: 50; padding: 20px; display: flex; justify-content: center; }
    .split-nav-pills { display: inline-flex; gap: 4px; padding: 4px; border-radius: 9999px; background: rgba(255,255,255,0.15); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
    .split-nav-pill { padding: 8px 20px; border-radius: 9999px; font-size: 0.8rem; font-weight: 600; color: white; transition: all 0.3s ease; text-decoration: none; }
    .split-nav-pill:hover { background: rgba(255,255,255,0.2); }
    .split-geo { position: relative; overflow: hidden; }
    .split-geo::before { content: ''; position: absolute; width: 180px; height: 180px; border-radius: 50%; border: 2px solid rgba(var(--brand-primary-rgb), 0.1); top: -40px; right: -40px; pointer-events: none; }
    .split-geo::after { content: ''; position: absolute; width: 0; height: 0; border-left: 60px solid transparent; border-right: 60px solid transparent; border-bottom: 100px solid rgba(var(--brand-secondary-rgb), 0.04); bottom: -20px; left: 20px; pointer-events: none; }
    .split-carousel { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 8px 0; }
    .split-carousel::-webkit-scrollbar { height: 4px; }
    .split-carousel::-webkit-scrollbar-thumb { background: rgba(var(--brand-primary-rgb), 0.2); border-radius: 4px; }
    .split-carousel > * { scroll-snap-align: center; flex-shrink: 0; width: 85%; max-width: 400px; }
    @keyframes splitFadeUp { from { opacity:0; transform:translateY(28px); filter:blur(4px); } to { opacity:1; transform:translateY(0); filter:blur(0); } }
    .split-decor-circle { position: absolute; border-radius: 50%; border: 2px solid rgba(var(--brand-primary-rgb), 0.08); pointer-events: none; }
    .split-decor-tri { position: absolute; width: 0; height: 0; pointer-events: none; }
</style>

<section class="split-section split-hero relative overflow-hidden">
    <div class="split-nav">
        <div class="split-nav-pills">
            <a href="#about" class="split-nav-pill">About</a>
            {% if features %}<a href="#features" class="split-nav-pill">Features</a>{% endif %}
            {% if faq %}<a href="#faq" class="split-nav-pill">FAQ</a>{% endif %}
            {% if augments %}<a href="#tools" class="split-nav-pill">Tools</a>{% endif %}
            <a href="admin.html" class="split-nav-pill">⚙</a>
        </div>
    </div>

    <div class="flex items-center justify-center px-8 md:px-16 py-24 relative" 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="split-decor-circle" style="width:300px;height:300px;bottom:-100px;right:-80px;border-color:rgba(255,255,255,0.1);"></div>
        <div class="relative z-10 text-white max-w-lg">
            {% if niche %}
            <div class="inline-flex items-center gap-2.5 glass rounded-full px-5 py-2.5 mb-8" style="animation: splitFadeUp 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">{{ niche }}</span>
            </div>
            {% endif %}
            <h1 class="font-display text-4xl md:text-6xl font-extrabold mb-6 leading-[1.05]" style="opacity:0; animation: splitFadeUp 0.9s 0.15s ease-out forwards;">{{ headline }}</h1>
            {% if subheadline %}<p class="text-lg text-white/80 font-light mb-4 leading-relaxed" style="opacity:0; animation: splitFadeUp 0.9s 0.3s ease-out forwards;">{{ subheadline }}</p>{% endif %}
            {% if hero_body %}<p class="text-white/60 mb-8" style="opacity:0; animation: splitFadeUp 0.9s 0.45s ease-out forwards;">{{ hero_body }}</p>{% endif %}
            <div style="opacity:0; animation: splitFadeUp 0.9s 0.6s ease-out forwards;">
                <a href="#cta" class="inline-flex items-center gap-2 bg-white px-8 py-4 rounded-2xl font-bold text-base depth-lg hover:-translate-y-0.5 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>
        </div>
    </div>

    <div class="relative hidden md:block" style="{% if hero_bg_image %}background-image:url('{{ hero_bg_image }}');background-size:cover;background-position:center;{% else %}background:linear-gradient(180deg, #f8fafc, #e2e8f0);{% endif %}">
        {% if not hero_bg_image %}
        <div class="absolute inset-0 texture-mesh"></div>
        <div class="absolute inset-0 flex items-center justify-center">
            <div class="font-display text-[12rem] font-extrabold opacity-[0.03]" style="color:var(--brand-primary);">{{ brand_name[0] if brand_name else 'A' }}</div>
        </div>
        {% endif %}
    </div>
</section>

{% if about %}
<section id="about" class="split-section split-geo relative">
    <div class="flex items-center px-8 md:px-16 py-20 bg-white">
        <div class="max-w-lg 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);">About</span>
            <h2 class="font-display text-3xl md:text-5xl font-extrabold text-gray-900 mb-6">{{ about_title }}</h2>
            <p class="text-lg text-gray-600 leading-relaxed">{{ about }}</p>
        </div>
    </div>
    <div class="hidden md:flex items-center justify-center relative" style="background:rgba(var(--brand-primary-rgb),0.03);">
        <div class="absolute inset-0 texture-mesh"></div>
        {% if about_image %}
        <img src="{{ about_image }}" alt="About" class="w-3/4 rounded-2xl depth-lg relative z-10">
        {% else %}
        <div class="relative z-10 text-center">
            <div class="w-32 h-32 mx-auto rounded-3xl flex items-center justify-center mb-4 depth-lg" style="background:linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));">
                <span class="text-5xl text-white font-display font-extrabold">{{ brand_name[0] if brand_name else 'A' }}</span>
            </div>
            <p class="font-display font-bold text-gray-400 text-sm tracking-widest uppercase">{{ brand_name }}</p>
        </div>
        {% endif %}
    </div>
</section>
<div class="divider-gradient"></div>
{% endif %}

{% if features %}
<section id="features" class="py-24 px-6 bg-gradient-to-b from-gray-50 to-white relative split-geo">
    <div class="max-w-6xl mx-auto">
        <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-5xl 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="space-y-4 stagger">
            {% for f in features %}
            <div class="flex flex-col md:flex-row items-center gap-6 bg-white rounded-2xl p-6 md:p-8 card-3d depth-sm hover:depth-lg glow-ring {{ 'md:flex-row-reverse' if loop.index0 % 2 != 0 else '' }}">
                <div class="w-16 h-16 rounded-2xl flex items-center justify-center flex-shrink-0 text-3xl" style="background:linear-gradient(135deg, rgba(var(--brand-primary-rgb),0.1), rgba(var(--brand-secondary-rgb),0.05));">{{ f.icon_emoji }}</div>
                <div class="flex-1 {{ 'text-right' if loop.index0 % 2 != 0 else '' }} text-center md:text-left">
                    <h3 class="font-display text-xl font-bold text-gray-900 mb-2">{{ f.title }}</h3>
                    <p class="text-gray-500 leading-relaxed">{{ f.description }}</p>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
<div class="divider-gradient"></div>
{% endif %}

{% if testimonials %}
<section class="py-24 px-6 bg-gradient-to-br from-amber-50/40 via-white to-orange-50/30 relative">
    <div class="max-w-6xl mx-auto">
        <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-5xl font-extrabold text-gray-900">What People Say</h2>
        </div>
        <div class="split-carousel px-4">
            {% for t in testimonials %}
            <div class="bg-white rounded-2xl p-8 depth-sm glow-ring">
                <div class="font-display text-4xl opacity-10 mb-2" style="color:var(--brand-primary);">&ldquo;</div>
                <p class="text-gray-600 italic leading-relaxed mb-6">{{ t.quote }}</p>
                <div class="flex items-center gap-3 pt-4 border-t border-gray-100">
                    <div class="w-10 h-10 rounded-full flex items-center justify-center text-white font-bold text-sm" style="background:linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));">{{ 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 %}

{% if faq %}
<section id="faq" class="split-section split-geo relative">
    <div class="flex items-start px-8 md:px-16 py-20 bg-gradient-to-b from-gray-50 to-white">
        <div class="w-full max-w-lg">
            <div class="mb-10 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</h2>
            </div>
            <div class="space-y-3 stagger">
                {% for item in faq %}
                <details class="group bg-white rounded-xl depth-sm hover:depth-md transition-shadow overflow-hidden glow-ring">
                    <summary class="flex items-center justify-between gap-4 px-6 py-4 cursor-pointer font-semibold text-gray-900 select-none text-sm"><span>{{ item.question }}</span><svg class="w-4 h-4 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-6 pb-5 text-gray-600 leading-relaxed text-sm border-t border-gray-100 pt-3">{{ item.answer }}</div>
                </details>
                {% endfor %}
            </div>
        </div>
    </div>
    <div class="hidden md:flex items-center justify-center relative" style="background:rgba(var(--brand-primary-rgb),0.03);">
        <div class="absolute inset-0 texture-mesh"></div>
        <div class="relative z-10">
            <div class="split-decor-circle" style="width:200px;height:200px;top:20%;left:10%;border-color:rgba(var(--brand-primary-rgb),0.1);"></div>
            <div class="split-decor-circle" style="width:120px;height:120px;bottom:20%;right:15%;border-color:rgba(var(--brand-secondary-rgb),0.08);"></div>
            <div class="text-center">
                <div class="text-8xl mb-4">❓</div>
                <p class="font-display text-lg font-bold gradient-text">Got Questions?</p>
                <p class="text-sm text-gray-400 mt-2">We've got answers</p>
            </div>
        </div>
    </div>
</section>
<div class="divider-gradient"></div>
{% endif %}

{% if augments %}
<section id="tools" class="py-24 px-6 bg-gradient-to-b from-white to-gray-50 relative split-geo">
    <div class="max-w-4xl mx-auto">
        <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-primary-rgb),0.08);">Resources</span>
            <h2 class="font-display text-3xl md:text-5xl font-extrabold text-gray-900 mb-4">Tools &amp; Resources</h2>
        </div>
        <div class="grid md:grid-cols-2 gap-5 stagger">
            {% for aug in augments %}
            <a href="tools/{{ aug.slug }}.html" class="group flex items-start gap-5 bg-white rounded-2xl p-6 card-3d depth-sm hover:depth-lg glow-ring no-underline">
                <div class="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0 text-white text-xl" style="background:linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));">⚡</div>
                <div class="flex-1 min-w-0">
                    <div class="font-bold text-gray-900 mb-1">{{ 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>
            </a>
            {% endfor %}
        </div>
    </div>
</section>
<div class="divider-gradient"></div>
{% endif %}

<section id="cta" class="split-section relative overflow-hidden">
    <div class="flex items-center justify-center px-8 md:px-16 py-20 text-white relative" 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="split-decor-circle" style="width:250px;height:250px;top:-80px;left:-60px;border-color:rgba(255,255,255,0.1);"></div>
        <div class="relative z-10 max-w-lg text-center md:text-left reveal">
            <h2 class="font-display text-3xl md:text-5xl font-extrabold mb-5">Ready to Get Started?</h2>
            <p class="text-white/80 mb-8">{{ subheadline }}</p>
            <a href="#" class="inline-flex items-center gap-2 bg-white px-10 py-4 rounded-2xl font-bold text-base depth-xl hover:-translate-y-1 transition-all" style="color:var(--brand-primary);">{{ cta_text }}</a>
        </div>
    </div>
    <div class="hidden md:flex items-center justify-center relative bg-gray-950">
        <div class="absolute inset-0 texture-mesh opacity-50"></div>
        <div class="relative z-10 text-center text-white">
            <div class="font-display text-[8rem] font-extrabold opacity-10 gradient-text">→</div>
        </div>
    </div>
</section>

<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 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 %}