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

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

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

{% block body %}
<style>
    .cine-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100; }
    .cine-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary)); transition: width 0.1s linear; }
    .cine-nav { position: fixed; top: -80px; left: 0; right: 0; z-index: 50; transition: top 0.5s cubic-bezier(0.34,1.56,0.64,1); }
    .cine-nav.visible { top: 0; }
    .scene { min-height: 80vh; position: relative; display: flex; align-items: center; overflow: hidden; }
    .cine-particles::before, .cine-particles::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
    .cine-particles::before { width: 300px; height: 300px; top: 20%; right: 10%; background: radial-gradient(circle, rgba(var(--brand-primary-rgb), 0.08) 0%, transparent 70%); animation: cineFloat 12s ease-in-out infinite; }
    .cine-particles::after { width: 200px; height: 200px; bottom: 15%; left: 15%; background: radial-gradient(circle, rgba(var(--brand-secondary-rgb), 0.06) 0%, transparent 70%); animation: cineFloat 15s ease-in-out infinite reverse; }
    @keyframes cineFloat { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(30px, -40px); } }
    .cine-dots { position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.03) 1px, transparent 0); background-size: 40px 40px; pointer-events: none; }
    .cine-testimonial { position: relative; overflow: hidden; height: 200px; }
    .cine-testimonial-item { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; opacity: 0; transition: opacity 1.5s ease; }
    .cine-testimonial-item.active { opacity: 1; }
    @keyframes cineFadeUp { from { opacity:0; transform:translateY(40px); filter:blur(6px); } to { opacity:1; transform:translateY(0); filter:blur(0); } }
</style>

<div class="cine-progress"><div class="cine-progress-bar" id="cineBar"></div></div>

<nav class="cine-nav glass-dark" id="cineNav">
    <div class="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center">
        <a href="#" class="font-display font-extrabold text-lg gradient-text">{{ brand_name }}</a>
        <div class="hidden md:flex items-center gap-6">
            {% if about %}<a href="#about" class="text-sm font-medium text-gray-400 hover:text-white transition-colors">About</a>{% endif %}
            {% if features %}<a href="#features" class="text-sm font-medium text-gray-400 hover:text-white transition-colors">Features</a>{% endif %}
            {% if faq %}<a href="#faq" class="text-sm font-medium text-gray-400 hover:text-white transition-colors">FAQ</a>{% endif %}
            <a href="admin.html" class="text-sm font-medium text-gray-400 hover:text-white transition-colors">⚙ 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" style="background:linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));">{{ cta_text }}</a>
        </div>
    </div>
</nav>

<section id="hero" class="relative min-h-screen flex items-center justify-center text-center overflow-hidden cine-particles" style="{% if hero_bg_image %}background-image:url('{{ hero_bg_image }}');background-size:cover;background-position:center;{% else %}background: radial-gradient(ellipse at center, rgba(var(--brand-primary-rgb),0.15) 0%, transparent 60%), linear-gradient(180deg, #0a0a0a 0%, #111827 100%);{% endif %}">
    {% if hero_bg_image %}<div class="absolute inset-0 bg-gradient-to-b from-black/80 via-black/60 to-gray-950"></div>{% endif %}
    <div class="cine-dots"></div>
    <div class="absolute inset-0 texture-noise"></div>
    <div class="relative z-10 max-w-5xl 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="opacity:0; animation: cineFadeUp 1s 0.2s 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 lg:text-8xl font-extrabold mb-6 leading-[1.02] tracking-tight" style="opacity:0; animation: cineFadeUp 1s 0.4s ease-out forwards;">{{ headline }}</h1>
        {% if subheadline %}<p class="text-xl md:text-2xl text-white/70 font-light max-w-2xl mx-auto mb-6" style="opacity:0; animation: cineFadeUp 1s 0.6s ease-out forwards;">{{ subheadline }}</p>{% endif %}
        {% if hero_body %}<p class="text-white/50 max-w-xl mx-auto mb-12" style="opacity:0; animation: cineFadeUp 1s 0.8s ease-out forwards;">{{ hero_body }}</p>{% endif %}
        <div style="opacity:0; animation: cineFadeUp 1s 1s ease-out forwards;">
            <a href="#cta" class="group inline-flex items-center gap-3 px-10 py-5 rounded-2xl font-bold text-lg text-white border border-white/20 hover:border-white/40 transition-all hover:-translate-y-1 depth-lg" style="background:linear-gradient(135deg, rgba(var(--brand-primary-rgb),0.3), rgba(var(--brand-secondary-rgb),0.3));">
                {{ cta_text }}
                <svg class="w-5 h-5 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>
        </div>
    </div>
    <div class="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
        <svg class="w-6 h-6 text-white/30" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg>
    </div>
</section>

{% if about %}
<section id="about" class="scene px-6 cine-particles" style="background: linear-gradient(180deg, #111827, #0f172a);">
    <div class="cine-dots"></div>
    <div class="max-w-3xl mx-auto text-center relative z-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.12);">About</span>
        <h2 class="font-display text-4xl md:text-6xl font-extrabold mb-8 leading-tight">{{ about_title }}</h2>
        <p class="text-lg text-gray-400 leading-relaxed">{{ about }}</p>
    </div>
</section>
{% endif %}

{% if features %}
<section id="features" class="py-24 md:py-32 px-6 relative" style="background: linear-gradient(180deg, #0f172a, #111827);">
    <div class="cine-dots"></div>
    <div class="max-w-6xl mx-auto relative z-10">
        <div class="text-center mb-20 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.12);">Features</span>
            <h2 class="font-display text-4xl md:text-6xl font-extrabold 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-8">
            {% for f in features %}
            <div class="reveal flex flex-col {{ 'md:flex-row' if loop.index0 % 2 == 0 else 'md:flex-row-reverse' }} items-center gap-8 glass rounded-3xl p-8 md:p-12 glow-ring">
                <div class="flex-shrink-0 w-20 h-20 rounded-2xl flex items-center justify-center text-4xl" style="background:linear-gradient(135deg, rgba(var(--brand-primary-rgb),0.2), rgba(var(--brand-secondary-rgb),0.1));">{{ f.icon_emoji }}</div>
                <div class="flex-1 text-center md:text-left">
                    <h3 class="font-display text-2xl font-bold mb-3">{{ f.title }}</h3>
                    <p class="text-gray-400 leading-relaxed">{{ f.description }}</p>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}

{% if testimonials %}
<section class="scene px-6 cine-particles" style="background: linear-gradient(180deg, #111827, #0a0a0a);">
    <div class="cine-dots"></div>
    <div class="max-w-3xl mx-auto text-center relative z-10">
        <span class="inline-flex items-center gap-1.5 text-xs font-bold tracking-[0.15em] uppercase mb-8 px-4 py-2 rounded-full text-amber-400 bg-amber-900/30">Testimonials</span>
        <div class="cine-testimonial" id="cineTestimonials">
            {% for t in testimonials %}
            <div class="cine-testimonial-item {{ 'active' if loop.index0 == 0 else '' }}">
                <div>
                    <p class="font-display text-2xl md:text-3xl font-semibold italic leading-relaxed mb-6 text-white/90">&ldquo;{{ t.quote }}&rdquo;</p>
                    <div class="text-gray-500">{{ t.name }}{% if t.role %} &middot; {{ t.role }}{% endif %}</div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}

{% if faq %}
<section id="faq" class="py-24 px-6 relative" style="background: linear-gradient(180deg, #0a0a0a, #111827);">
    <div class="max-w-2xl mx-auto relative z-10">
        <div class="text-center mb-16 reveal">
            <h2 class="font-display text-4xl md:text-6xl font-extrabold">FAQ</h2>
        </div>
        <div class="space-y-3 stagger">
            {% for item in faq %}
            <details class="group glass rounded-xl overflow-hidden glow-ring">
                <summary class="flex items-center justify-between gap-4 px-7 py-5 cursor-pointer font-semibold text-white select-none"><span>{{ item.question }}</span><svg class="w-5 h-5 text-gray-500 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-400 leading-relaxed text-[0.95rem] border-t border-white/5 pt-4">{{ item.answer }}</div>
            </details>
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}

{% if augments %}
<section id="tools" class="py-24 px-6 relative" style="background: linear-gradient(180deg, #111827, #0f172a);">
    <div class="max-w-4xl mx-auto relative z-10">
        <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.12);">Resources</span>
            <h2 class="font-display text-4xl md:text-6xl font-extrabold 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 glass rounded-2xl p-6 card-3d 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-white 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>
{% endif %}

<section id="cta" class="scene px-6 text-center cine-particles" style="background: linear-gradient(180deg, #0f172a, #0a0a0a);">
    <div class="cine-dots"></div>
    <div class="max-w-3xl mx-auto relative z-10 reveal">
        <h2 class="font-display text-4xl md:text-6xl font-extrabold mb-5">Ready to Get Started?</h2>
        <p class="text-lg text-gray-500 mb-10 max-w-xl mx-auto">{{ subheadline }}</p>
        <a href="#" class="inline-flex items-center gap-2 px-12 py-5 rounded-2xl font-bold text-lg text-white depth-xl hover:-translate-y-1 transition-all" style="background:linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));">{{ cta_text }}</a>
    </div>
</section>

<footer class="bg-black text-gray-500 py-16 px-6 border-t border-white/5">
    <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-700">&copy; {{ brand_name }} &bull; {{ domain }}</p>
    </div>
</footer>
{% endblock %}

{% block scripts_extra %}
<script>
(function(){
    const bar = document.getElementById('cineBar');
    const nav = document.getElementById('cineNav');
    const hero = document.getElementById('hero');
    window.addEventListener('scroll', function(){
        const h = document.documentElement;
        bar.style.width = ((h.scrollTop / (h.scrollHeight - h.clientHeight)) * 100) + '%';
        nav.classList.toggle('visible', window.scrollY > hero.offsetHeight - 100);
    });
    const items = document.querySelectorAll('.cine-testimonial-item');
    if (items.length > 1) {
        let idx = 0;
        setInterval(function(){
            items[idx].classList.remove('active');
            idx = (idx + 1) % items.length;
            items[idx].classList.add('active');
        }, 5000);
    }
})();
</script>
{% endblock %}