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

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

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

{% block body %}
<style>
    .sidebar { width: 280px; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; background: rgba(var(--brand-primary-rgb), 0.06); backdrop-filter: blur(28px) saturate(200%); -webkit-backdrop-filter: blur(28px) saturate(200%); border-right: 1px solid rgba(var(--brand-primary-rgb), 0.1); transition: width 0.4s cubic-bezier(0.34,1.56,0.64,1), transform 0.4s cubic-bezier(0.34,1.56,0.64,1); overflow: hidden; }
    .sidebar-nav-item { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 24px; font-size: 0.875rem; font-weight: 500; color: rgba(0,0,0,0.55); transition: all 0.3s ease; border-left: 3px solid transparent; }
    .sidebar-nav-item:hover, .sidebar-nav-item.active { color: var(--brand-primary); background: rgba(var(--brand-primary-rgb), 0.06); border-left-color: var(--brand-primary); }
    .sidebar-nav-item .nav-icon { width: 20px; text-align: center; flex-shrink: 0; }
    .main-content { margin-left: 280px; transition: margin-left 0.4s cubic-bezier(0.34,1.56,0.64,1); }
    .sidebar-toggle { display: none; position: fixed; top: 16px; left: 16px; z-index: 60; width: 44px; height: 44px; border-radius: 12px; border: none; cursor: pointer; background: rgba(var(--brand-primary-rgb), 0.1); backdrop-filter: blur(12px); color: var(--brand-primary); }
    @media (max-width: 768px) {
        .sidebar { width: 64px; transform: translateX(-64px); }
        .sidebar.open { transform: translateX(0); width: 280px; }
        .sidebar:not(.open) .nav-label, .sidebar:not(.open) .sidebar-brand-text, .sidebar:not(.open) .sidebar-footer-text { display: none; }
        .sidebar:not(.open) .sidebar-nav-item { justify-content: center; padding: 12px 0; border-left: none; }
        .main-content { margin-left: 0; }
        .sidebar-toggle { display: flex; align-items: center; justify-content: center; }
    }
    .scroll-progress { position: fixed; top: 0; left: 280px; right: 0; height: 3px; z-index: 100; background: rgba(var(--brand-primary-rgb), 0.1); }
    .scroll-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary)); transition: width 0.1s linear; }
    @media (max-width: 768px) { .scroll-progress { left: 0; } }
</style>

<div class="scroll-progress"><div class="scroll-progress-bar" id="scrollBar"></div></div>

<button class="sidebar-toggle" id="sidebarToggle" onclick="document.getElementById('sidebar').classList.toggle('open')">
    <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>

<aside class="sidebar" id="sidebar">
    <div class="p-6 mb-4">
        {% if logo_image %}
        <img src="{{ logo_image }}" alt="{{ brand_name }}" class="h-8 mb-3">
        {% endif %}
        <a href="#" class="font-display font-extrabold text-lg gradient-text tracking-tight sidebar-brand-text">{{ brand_name }}</a>
    </div>
    <nav class="flex-1 space-y-1 px-2">
        <a href="#hero" class="sidebar-nav-item active" data-section="hero"><span class="nav-icon">🏠</span><span class="nav-label">Home</span></a>
        {% if about %}<a href="#about" class="sidebar-nav-item" data-section="about"><span class="nav-icon">📋</span><span class="nav-label">About</span></a>{% endif %}
        {% if features %}<a href="#features" class="sidebar-nav-item" data-section="features"><span class="nav-icon">✨</span><span class="nav-label">Features</span></a>{% endif %}
        {% if testimonials %}<a href="#testimonials" class="sidebar-nav-item" data-section="testimonials"><span class="nav-icon">💬</span><span class="nav-label">Testimonials</span></a>{% endif %}
        {% if faq %}<a href="#faq" class="sidebar-nav-item" data-section="faq"><span class="nav-icon">❓</span><span class="nav-label">FAQ</span></a>{% endif %}
        {% if augments %}<a href="#tools" class="sidebar-nav-item" data-section="tools"><span class="nav-icon">🔧</span><span class="nav-label">Tools</span></a>{% endif %}
        <a href="admin.html" class="sidebar-nav-item"><span class="nav-icon">⚙️</span><span class="nav-label">Admin</span></a>
    </nav>
    <div class="p-6 mt-auto border-t border-black/5 sidebar-footer-text">
        <p class="text-xs text-gray-400">&copy; {{ brand_name }}</p>
        <p class="text-xs text-gray-300 mt-1">{{ domain }}</p>
    </div>
</aside>

<div class="main-content">
    <section id="hero" class="relative min-h-screen flex items-center justify-center text-white overflow-hidden" 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-20"></div>
        <div class="relative z-10 max-w-4xl mx-auto px-8 py-24 text-center">
            {% if niche %}
            <div class="inline-flex items-center gap-2.5 glass rounded-full px-5 py-2.5 mb-8" style="animation: sidebarFadeUp 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: sidebarFadeUp 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: sidebarFadeUp 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: sidebarFadeUp 0.9s 0.4s ease-out forwards;">{{ hero_body }}</p>{% endif %}
            <div class="flex flex-wrap gap-4 justify-center" style="opacity:0; animation: sidebarFadeUp 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 sidebarFadeUp { from { opacity:0; transform:translateY(28px); filter:blur(4px); } to { opacity:1; transform:translateY(0); filter:blur(0); } }</style>
    </section>

    {% if about %}
    <section id="about" class="py-24 px-8 texture-mesh relative">
        <div class="max-w-3xl mx-auto 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>
    </section>
    <div class="divider-gradient"></div>
    {% endif %}

    {% if features %}
    <section id="features" class="py-24 px-8 bg-gradient-to-b from-gray-50/80 to-white 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" 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="grid md:grid-cols-2 lg:grid-cols-3 gap-6 stagger">
                {% for f in features %}
                <div class="group relative bg-white rounded-2xl p-8 card-3d depth-sm hover:depth-lg glow-ring texture-noise overflow-hidden">
                    <div class="absolute top-0 left-0 right-0 h-1 rounded-t-2xl" style="background:linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)); opacity:0.6;"></div>
                    <div class="relative z-10">
                        <div class="text-3xl mb-4">{{ f.icon_emoji }}</div>
                        <h3 class="font-display text-lg font-bold text-gray-900 mb-2">{{ 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 %}

    {% if testimonials %}
    <section id="testimonials" class="py-24 px-8 bg-gradient-to-br from-amber-50/50 via-orange-50/30 to-white relative texture-mesh">
        <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-4xl font-extrabold text-gray-900">What People Say</h2>
            </div>
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 stagger">
                {% for t in testimonials %}
                <div class="relative bg-white rounded-2xl p-8 depth-sm hover:depth-md transition-shadow glow-ring">
                    <div class="absolute top-5 left-7 font-display text-5xl opacity-10" 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">
                        <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="py-24 px-8 bg-gradient-to-b from-gray-50/60 to-blue-50/30 relative">
        <div class="max-w-2xl 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);">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 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-7 py-5 cursor-pointer font-semibold text-gray-900 select-none">
                        <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 border-gray-100 pt-4">{{ item.answer }}</div>
                </details>
                {% endfor %}
            </div>
        </div>
    </section>
    <div class="divider-gradient"></div>
    {% endif %}

    {% if augments %}
    <section id="tools" class="py-24 px-8 bg-gradient-to-b from-white to-gray-50/50 relative">
        <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-4xl 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="relative py-28 px-8 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="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 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 class="bg-gray-950 text-gray-400 py-16 px-8">
        <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>
</div>
{% endblock %}

{% block scripts_extra %}
<script>
(function(){
    const bar = document.getElementById('scrollBar');
    const sections = document.querySelectorAll('section[id]');
    const navItems = document.querySelectorAll('.sidebar-nav-item[data-section]');
    window.addEventListener('scroll', function(){
        const h = document.documentElement;
        const pct = (h.scrollTop / (h.scrollHeight - h.clientHeight)) * 100;
        bar.style.width = pct + '%';
        let current = '';
        sections.forEach(s => { if (s.offsetTop - 200 <= window.scrollY) current = s.id; });
        navItems.forEach(item => {
            item.classList.toggle('active', item.dataset.section === current);
        });
    });
})();
</script>
{% endblock %}