{% load intelligence_extras %}
{% comment %}
  Score Video Hook result panel. Mirrors the layout language of the
  score-packaging panel: brand-orange headline number on the upper
  left, then progressively-disclosed detail blocks separated by hairline
  rules. All tooltip primitives come from .intel-tooltip-* in
  playground.html's extra_head (NOT Tailwind utilities), see
  _panel_score_packaging.html commit messages for why.
{% endcomment %}
<div>
    {% comment %} Hero, overall score + archetype pills {% endcomment %}
    <div class="flex items-start justify-between gap-6">
        <div>
            <div class="flex items-center">
                <div class="text-xs uppercase tracking-wide text-stone-500">Overall hook score</div>
                <span class="intel-tooltip-trigger" tabindex="0" aria-describedby="vh-overall-tooltip">
                    <span class="intel-tooltip-icon" aria-hidden="true">?</span>
                    <span id="vh-overall-tooltip" role="tooltip" class="intel-tooltip" data-align="left">
                        Composite 0–100 score for the first ~6 seconds. Weighted
                        from clarity, specificity, tension, visual energy, and
                        pace. <strong>70+</strong> ships; <strong>40–70</strong>
                        is fixable; below 40 needs a structural rewrite.
                    </span>
                </span>
            </div>
            <div class="mt-2 text-7xl font-bold tabular-nums leading-none" style="color: var(--primary);">{{ result.overall_score }}</div>
            {% if result.delta_vs_niche_top is not None %}
            <div class="mt-2 text-xs"
                 style="color: {% if result.delta_vs_niche_top >= 0 %}var(--text-secondary){% else %}#b45309{% endif %};">
                {% if result.delta_vs_niche_top > 0 %}+{% endif %}{{ result.delta_vs_niche_top }} vs niche top performers
            </div>
            {% endif %}
        </div>

        <div class="text-right">
            <div class="text-xs uppercase tracking-wide text-stone-500 mb-2">Archetype</div>
            {% if result.primary_archetype %}
            <span class="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-semibold mb-1"
                  style="background: var(--primary-soft); color: var(--primary);">
                {{ result.primary_archetype|humanize_slug }}
            </span>
            {% endif %}
            {% if result.secondary_archetype %}
            <div>
                <span class="inline-flex items-center px-2 py-0.5 rounded-md text-[11px] font-medium bg-stone-100 text-stone-600 mt-1">
                    + {{ result.secondary_archetype|humanize_slug }}
                </span>
            </div>
            {% endif %}
        </div>
    </div>

    {% comment %}
      Sub-scores, 5 horizontal progress bars (clarity, specificity,
      tension, visual_energy, pace). Each value is 0–10.
    {% endcomment %}
    {% if result.scores %}
    <div class="mt-6 pt-5 border-t border-stone-100">
        <div class="text-xs uppercase tracking-wide text-stone-500 mb-3">Sub-scores</div>
        <div class="space-y-2.5">
            {% for key, value in result.scores.items %}
            <div class="grid grid-cols-[110px_1fr_28px] items-center gap-3">
                <div class="text-xs font-medium text-stone-700">{{ key|humanize_slug }}</div>
                <div class="h-1.5 rounded-full bg-stone-100 overflow-hidden">
                    <div class="h-full rounded-full"
                         style="width: {{ value|score_pct }}%; background: var(--primary);"></div>
                </div>
                <div class="text-xs font-mono tabular-nums text-stone-900 text-right">{{ value }}/10</div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    {% comment %} Transcript + visual summary {% endcomment %}
    {% if result.transcript %}
    <div class="mt-6 pt-5 border-t border-stone-100">
        <div class="text-xs uppercase tracking-wide text-stone-500 mb-2">Transcript</div>
        <blockquote class="border-l-2 border-stone-300 pl-3 text-sm text-stone-700 italic leading-relaxed">
            "{{ result.transcript }}"
        </blockquote>
    </div>
    {% endif %}

    {% if result.visual_summary %}
    <div class="mt-5">
        <div class="text-xs uppercase tracking-wide text-stone-500 mb-2">Visual</div>
        <p class="text-sm text-stone-700 leading-relaxed">{{ result.visual_summary }}</p>
    </div>
    {% endif %}

    {% comment %} Strengths + weaknesses {% endcomment %}
    {% if result.strengths %}
    <div class="mt-6 pt-5 border-t border-stone-100">
        <div class="flex items-center gap-2 mb-3">
            <span class="inline-flex w-4 h-4 items-center justify-center rounded-full bg-green-100 text-green-700">
                <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </span>
            <div class="text-xs uppercase tracking-wide text-stone-500">Strengths</div>
        </div>
        <ul class="space-y-2 text-sm text-stone-700">
            {% for item in result.strengths %}
            <li class="flex gap-2 leading-relaxed">
                <span class="text-green-500 flex-shrink-0 select-none">•</span>
                <span>{{ item }}</span>
            </li>
            {% endfor %}
        </ul>
    </div>
    {% endif %}

    {% if result.weaknesses %}
    <div class="mt-6 pt-5 border-t border-stone-100">
        <div class="flex items-center gap-2 mb-3">
            <span class="inline-flex w-4 h-4 items-center justify-center rounded-full bg-red-100 text-red-700">
                <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </span>
            <div class="text-xs uppercase tracking-wide text-stone-500">Weaknesses</div>
        </div>
        <ul class="space-y-2 text-sm text-stone-700">
            {% for item in result.weaknesses %}
            <li class="flex gap-2 leading-relaxed">
                <span class="text-red-500 flex-shrink-0 select-none">•</span>
                <span>{{ item }}</span>
            </li>
            {% endfor %}
        </ul>
    </div>
    {% endif %}

    {% comment %} Suggestions, orange-tinted callout (these are actionable) {% endcomment %}
    {% if result.suggestions %}
    <div class="mt-6 pt-5 border-t border-stone-100">
        <div class="rounded-xl border p-4"
             style="background: var(--primary-soft); border-color: var(--primary-muted);">
            <div class="flex items-center gap-2 mb-2.5">
                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: var(--primary);"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
                <div class="text-xs uppercase tracking-wide font-semibold" style="color: var(--primary);">Suggestions</div>
            </div>
            <ul class="space-y-2 text-sm text-stone-800">
                {% for item in result.suggestions %}
                <li class="flex gap-2 leading-relaxed">
                    <span class="flex-shrink-0 select-none" style="color: var(--primary);">→</span>
                    <span>{{ item }}</span>
                </li>
                {% endfor %}
            </ul>
        </div>
    </div>
    {% endif %}

    {% comment %} Key differences vs niche-top {% endcomment %}
    {% if result.key_differences_vs_top %}
    <div class="mt-6 pt-5 border-t border-stone-100">
        <div class="text-xs uppercase tracking-wide text-stone-500 mb-3">Key differences vs niche-top hooks</div>
        <ul class="space-y-2 text-sm text-stone-700">
            {% for item in result.key_differences_vs_top %}
            <li class="flex gap-2 leading-relaxed">
                <span class="text-stone-400 flex-shrink-0 select-none">•</span>
                <span>{{ item }}</span>
            </li>
            {% endfor %}
        </ul>
    </div>
    {% endif %}
</div>