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

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

{% block body_class %}font-body antialiased{% endblock %}

{% block extra_styles %}
<style>
    body { background: #0c0e1a; color: #e2e8f0; }
    .aug-hero {
        background: linear-gradient(135deg,
            var(--brand-primary, #4F46E5) 0%,
            var(--brand-secondary, #7C3AED) 40%,
            var(--brand-accent, #06B6D4) 100%);
        position: relative; overflow: hidden;
    }
    .aug-hero::before {
        content: ''; position: absolute; inset: 0;
        background:
            radial-gradient(ellipse 80% 60% at 20% 80%, rgba(255,255,255,0.06), transparent),
            radial-gradient(ellipse 60% 50% at 80% 20%, rgba(255,255,255,0.04), transparent);
        pointer-events: none;
    }
    .aug-hero::after {
        content: ''; position: absolute; inset: 0;
        background-image: radial-gradient(circle at 25% 25%, rgba(255,255,255,0.08) 1px, transparent 1px);
        background-size: 32px 32px; opacity: 0.5; pointer-events: none;
    }
    .glass-pill {
        backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.15);
        background: rgba(255,255,255,0.08);
    }
    .embed-wrap {
        background: #fff; border-radius: 16px; overflow: hidden;
        box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 25px 80px -12px rgba(0,0,0,0.6),
            0 0 40px -8px rgba(var(--brand-primary-rgb, 79,70,229),0.1);
    }
    .tool-link-card {
        background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
        border: 1px solid rgba(255,255,255,0.08); border-radius: 16px;
        padding: 24px; text-decoration: none; display: block;
        transition: all 0.35s cubic-bezier(0.4,0,0.2,1); position: relative; overflow: hidden;
    }
    .tool-link-card::before {
        content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
        background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary)); opacity: 0;
        transition: opacity 0.3s;
    }
    .tool-link-card:hover {
        border-color: rgba(255,255,255,0.15); transform: translateY(-4px);
        box-shadow: 0 20px 60px -15px rgba(0,0,0,0.5);
    }
    .tool-link-card:hover::before { opacity: 1; }
    .section-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); }
</style>
{% endblock %}

{% block body %}
<nav style="position:sticky;top:0;z-index:50;background:rgba(12,14,26,0.85);backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid rgba(255,255,255,0.06)">
    <div style="max-width:72rem;margin:0 auto;padding:14px 24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px">
        <a href="../index.html" style="display:flex;align-items:center;gap:10px;text-decoration:none">
            <span style="width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:0.75rem;font-weight:900;background:linear-gradient(135deg, var(--brand-primary), var(--brand-secondary))">{{ brand_name[0] | upper }}</span>
            <span style="font-size:1rem;font-weight:700;color:rgba(255,255,255,0.9)">{{ brand_name }}</span>
        </a>
        <div style="display:flex;align-items:center;gap:20px;font-size:0.875rem">
            <a href="../index.html" style="color:rgba(255,255,255,0.5);text-decoration:none;font-weight:500">&larr; Back to Site</a>
        </div>
    </div>
</nav>

<section class="aug-hero" style="padding:64px 24px 80px;text-align:center">
    <div style="position:relative;z-index:10;max-width:56rem;margin:0 auto">
        <div class="glass-pill" style="display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:9999px;font-size:0.7rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.9);margin-bottom:24px">Interactive Tool</div>
        <h1 style="font-size:clamp(1.75rem,5vw,3rem);font-weight:900;color:#fff;margin:0 0 16px;line-height:1.15">{{ aug_title }}</h1>
        {% if aug_desc %}
        <p style="color:rgba(255,255,255,0.6);max-width:40rem;margin:0 auto;font-size:1rem;line-height:1.7">{{ aug_desc }}</p>
        {% endif %}
    </div>
</section>

<div style="max-width:64rem;margin:-32px auto 0;padding:0 24px 80px;position:relative;z-index:20">
    <div class="embed-wrap">
        {{ content | safe }}
    </div>

    {% if other_augments %}
    <div style="margin-top:80px">
        <div class="section-divider" style="margin-bottom:48px"></div>
        <div style="display:flex;align-items:center;gap:12px;margin-bottom:32px">
            <div style="width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, var(--brand-primary), var(--brand-secondary))">
                <svg style="width:20px;height:20px;color:#fff" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"/></svg>
            </div>
            <div>
                <div style="font-size:1.1rem;font-weight:700;color:#fff">More Tools</div>
                <div style="font-size:0.875rem;color:rgba(255,255,255,0.4)">Explore other interactive tools for {{ brand_name }}</div>
            </div>
        </div>
        <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px">
            {% for other in other_augments %}
            <a href="{{ other.slug }}.html" class="tool-link-card">
                <div style="display:flex;align-items:start;gap:16px">
                    <div style="width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));opacity:0.85">
                        <svg style="width:20px;height:20px;color:#fff" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                    </div>
                    <div style="flex:1;min-width:0">
                        <div style="font-weight:700;color:#fff;margin-bottom:6px;font-size:0.95rem">{{ other.title }}</div>
                        <div style="color:rgba(255,255,255,0.4);font-size:0.8rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden">{{ other.description or 'Interactive tool' }}</div>
                    </div>
                </div>
            </a>
            {% endfor %}
        </div>
    </div>
    {% endif %}
</div>

<footer style="border-top:1px solid rgba(255,255,255,0.04);padding:40px 24px;background:rgba(8,10,20,0.8);text-align:center">
    <div style="width:40px;height:40px;margin:0 auto 12px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:0.875rem;font-weight:900;background:linear-gradient(135deg, var(--brand-primary), var(--brand-secondary))">{{ brand_name[0] | upper }}</div>
    <p style="font-size:0.875rem;font-weight:700;color:rgba(255,255,255,0.7);margin:0 0 4px">{{ brand_name }}</p>
    <p style="font-size:0.75rem;color:rgba(255,255,255,0.3);margin:0">{{ tagline }}</p>
</footer>
{% endblock %}