{% 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>
    .mag-toc-btn { position: fixed; top: 24px; right: 24px; z-index: 50; padding: 10px 24px; border-radius: 9999px; font-size: 0.875rem; font-weight: 600; cursor: pointer; border: none; color: white; background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)); box-shadow: 0 4px 24px rgba(var(--brand-primary-rgb), 0.3); transition: all 0.3s ease; }
    .mag-toc-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(var(--brand-primary-rgb), 0.4); }
    .mag-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity 0.4s ease; display: flex; align-items: center; justify-content: center; }
    .mag-overlay.open { opacity: 1; pointer-events: all; }
    .mag-overlay-content { background: white; border-radius: 24px; padding: 48px; max-width: 480px; width: 90%; transform: scale(0.9) translateY(20px); transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1); }
    .mag-overlay.open .mag-overlay-content { transform: scale(1) translateY(0); }
    .mag-hero-clip { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 85%); }
    .mag-hero-text-clip { clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%); }
    .drop-cap::first-letter { float: left; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 4.5rem; font-weight: 800; line-height: 0.8; margin-right: 12px; margin-top: 6px; color: var(--brand-primary); }
    .pull-quote { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.75rem; font-weight: 700; font-style: italic; line-height: 1.3; color: var(--brand-primary); border-left: 4px solid var(--brand-secondary); padding-left: 24px; margin: 48px 0; }
    .horiz-scroll { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 16px; }
    .horiz-scroll::-webkit-scrollbar { height: 4px; }
    .horiz-scroll::-webkit-scrollbar-track { background: rgba(var(--brand-primary-rgb), 0.05); border-radius: 4px; }
    .horiz-scroll::-webkit-scrollbar-thumb { background: rgba(var(--brand-primary-rgb), 0.2); border-radius: 4px; }
    .horiz-scroll > * { scroll-snap-align: start; flex-shrink: 0; }
    .masonry-grid { columns: 1; gap: 24px; }
    @media (min-width: 768px) { .masonry-grid { columns: 2; } }
    @media (min-width: 1024px) { .masonry-grid { columns: 3; } }
    .masonry-grid > * { break-inside: avoid; margin-bottom: 24px; }
</style>

<button class="mag-toc-btn" onclick="document.getElementById('tocOverlay').classList.add('open')">☰ Contents</button>

<div class="mag-overlay" id="tocOverlay" onclick="if(event.target===this)this.classList.remove('open')">
    <div class="mag-overlay-content depth-xl">
        <h3 class="font-display text-2xl font-extrabold mb-6 gradient-text">{{ brand_name }}</h3>
        <nav class="space-y-3">
            <a href="#hero" onclick="document.getElementById('tocOverlay').classList.remove('open')" class="block py-2 text-gray-600 hover:text-gray-900 font-medium transition-colors border-b border-gray-100">Home</a>
            {% if about %}<a href="#about" onclick="document.getElementById('tocOverlay').classList.remove('open')" class="block py-2 text-gray-600 hover:text-gray-900 font-medium transition-colors border-b border-gray-100">About</a>{% endif %}
            {% if features %}<a href="#features" onclick="document.getElementById('tocOverlay').classList.remove('open')" class="block py-2 text-gray-600 hover:text-gray-900 font-medium transition-colors border-b border-gray-100">Features</a>{% endif %}
            {% if faq %}<a href="#faq" onclick="document.getElementById('tocOverlay').classList.remove('open')" class="block py-2 text-gray-600 hover:text-gray-900 font-medium transition-colors border-b border-gray-100">FAQ</a>{% endif %}
            {% if augments %}<a href="#tools" onclick="document.getElementById('tocOverlay').classList.remove('open')" class="block py-2 text-gray-600 hover:text-gray-900 font-medium transition-colors border-b border-gray-100">Tools</a>{% endif %}
            <a href="admin.html" class="block py-2 text-gray-500 hover:text-gray-900 text-sm transition-colors">⚙ Admin</a>
        </nav>
    </div>
</div>

<section id="hero" class="relative min-h-screen grid grid-cols-1 md:grid-cols-5 overflow-hidden">
    <div class="md:col-span-3 relative min-h-[50vh] md:min-h-screen mag-hero-clip" 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-r from-black/40 to-black/20"></div>{% endif %}
        <div class="absolute inset-0 texture-noise"></div>
        {% if niche %}
        <div class="absolute top-8 left-8 z-10">
            <span class="glass rounded-full px-4 py-2 text-sm font-semibold text-white/90">{{ niche }}</span>
        </div>
        {% endif %}
    </div>
    <div class="md:col-span-2 flex items-center bg-white relative md:mag-hero-text-clip">
        <div class="px-8 md:px-12 py-16 md:py-24 max-w-lg">
            <h1 class="font-display text-4xl md:text-6xl lg:text-7xl font-extrabold mb-6 leading-[1.05] tracking-tight text-gray-900" style="opacity:0; animation: magFade 0.9s 0.2s ease-out forwards;">{{ headline }}</h1>
            {% if subheadline %}<p class="text-lg md:text-xl text-gray-500 font-light mb-6 leading-relaxed" style="opacity:0; animation: magFade 0.9s 0.4s ease-out forwards;">{{ subheadline }}</p>{% endif %}
            {% if hero_body %}<p class="text-gray-400 mb-8" style="opacity:0; animation: magFade 0.9s 0.55s ease-out forwards;">{{ hero_body }}</p>{% endif %}
            <div style="opacity:0; animation: magFade 0.9s 0.7s ease-out forwards;">
                <a href="#cta" class="inline-flex items-center gap-2 px-8 py-4 rounded-2xl font-bold text-white depth-lg hover:-translate-y-0.5 transition-all" style="background:linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));">{{ cta_text }}</a>
            </div>
        </div>
    </div>
    <style>@keyframes magFade { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }</style>
</section>

{% if about %}
<section id="about" class="py-24 md:py-32 px-6 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-6 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-5xl md:text-7xl font-extrabold text-gray-900 mb-8 leading-tight">{{ about_title }}</h2>
        <p class="text-lg text-gray-600 leading-relaxed drop-cap">{{ about }}</p>
    </div>
</section>
<div class="divider-gradient"></div>
{% endif %}

{% if testimonials and testimonials|length > 0 %}
<div class="py-12 px-6 max-w-4xl mx-auto">
    <div class="pull-quote reveal">&ldquo;{{ testimonials[0].quote }}&rdquo;<span class="block text-sm font-normal text-gray-400 mt-3 not-italic">— {{ testimonials[0].name }}</span></div>
</div>
{% endif %}

{% if features %}
<section id="features" class="py-24 px-6 bg-gradient-to-b from-gray-50 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-5xl md:text-7xl 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="masonry-grid stagger">
            {% for f in features %}
            <div class="group bg-white rounded-2xl p-8 card-3d depth-sm hover:depth-lg glow-ring texture-noise overflow-hidden {% if loop.index0 % 3 == 0 %}pt-12{% endif %}">
                <div class="text-4xl mb-5">{{ f.icon_emoji }}</div>
                <h3 class="font-display text-xl font-bold text-gray-900 mb-3">{{ f.title }}</h3>
                <p class="text-gray-500 leading-relaxed">{{ f.description }}</p>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
<div class="divider-gradient"></div>
{% endif %}

{% if testimonials and testimonials|length > 1 %}
<div class="py-12 px-6 max-w-4xl mx-auto">
    <div class="pull-quote reveal">&ldquo;{{ testimonials[1].quote }}&rdquo;<span class="block text-sm font-normal text-gray-400 mt-3 not-italic">— {{ testimonials[1].name }}</span></div>
</div>
{% endif %}

{% if testimonials %}
<section id="testimonials" 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">
            <h2 class="font-display text-5xl md:text-7xl font-extrabold text-gray-900">Voices</h2>
        </div>
        <div class="grid md:grid-cols-2 gap-8 stagger">
            {% for t in testimonials %}
            <div class="relative bg-white rounded-2xl p-8 depth-sm hover:depth-md glow-ring transition-shadow">
                <div class="font-display text-5xl opacity-10 absolute top-4 left-6" 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-6 relative bg-gray-50">
    <div class="max-w-2xl mx-auto">
        <div class="text-center mb-16 reveal">
            <h2 class="font-display text-5xl md:text-7xl font-extrabold text-gray-900">FAQ</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-6 relative bg-white">
    <div class="max-w-6xl mx-auto">
        <div class="mb-12 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-5xl md:text-7xl font-extrabold text-gray-900">Tools</h2>
        </div>
        <div class="horiz-scroll">
            {% for aug in augments %}
            <a href="tools/{{ aug.slug }}.html" class="group block w-72 bg-gray-50 rounded-2xl p-6 card-3d depth-sm hover:depth-lg glow-ring no-underline flex-shrink-0">
                <div class="w-12 h-12 rounded-xl flex items-center justify-center text-white text-xl mb-4" style="background:linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));">⚡</div>
                <div class="font-bold text-gray-900 mb-2">{{ aug.title }}</div>
                <div class="text-sm text-gray-500 leading-relaxed">{{ aug.description[:120] }}{% if aug.description|length > 120 %}...{% endif %}</div>
            </a>
            {% endfor %}
        </div>
    </div>
</section>
<div class="divider-gradient"></div>
{% endif %}

<section id="cta" class="relative py-32 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="relative z-10 max-w-3xl mx-auto reveal">
        <h2 class="font-display text-4xl md:text-6xl 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 }}</a>
    </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 %}

{% block scripts_extra %}
<script>
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') document.getElementById('tocOverlay').classList.remove('open');
});
</script>
{% endblock %}