{% extends 'base.html' %}
{% load wagtailimages_tags wagtailcore_tags %}
{% block title %}{{ page.title }} | No Hype AI{% endblock %}
{% block content %}

<!-- Page Header -->
<div class="py-8 md:py-12 border-b border-zinc-200 dark:border-zinc-800 mb-12">
  <h1 class="font-display font-black text-4xl md:text-6xl mb-4">{{ page.title }}</h1>
  {% if page.mission_statement %}
    <p class="text-xl md:text-2xl text-zinc-600 dark:text-zinc-400 font-medium max-w-2xl">{{ page.mission_statement }}</p>
  {% endif %}
</div>

<!-- Body -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12">
  <div class="lg:col-span-8 prose prose-lg dark:prose-invert max-w-none
    prose-headings:font-display prose-headings:font-bold
    prose-a:text-brand-cyan hover:prose-a:text-brand-pink prose-a:transition-colors prose-a:no-underline hover:prose-a:underline">
    {{ page.body|richtext }}
  </div>

  {% if page.featured_author %}
  <aside class="lg:col-span-4">
    <div class="bg-brand-surfaceLight dark:bg-brand-surfaceDark border border-zinc-200 dark:border-zinc-800 p-6 relative overflow-hidden">
      <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-brand-cyan to-brand-pink"></div>
      {% if page.featured_author.avatar %}
        <div class="w-20 h-20 mb-4 overflow-hidden border border-zinc-200 dark:border-zinc-800">
          {% image page.featured_author.avatar fill-80x80 class="w-full h-full object-cover" %}
        </div>
      {% else %}
        <div class="w-20 h-20 mb-4 bg-gradient-to-tr from-brand-cyan to-brand-pink"></div>
      {% endif %}
      <h2 class="font-display font-bold text-xl mb-1">{{ page.featured_author.name }}</h2>
      {% if page.featured_author.role %}<p class="font-mono text-xs text-zinc-500 mb-3">{{ page.featured_author.role }}</p>{% endif %}
      {% if page.featured_author.bio %}<p class="text-sm text-zinc-600 dark:text-zinc-400">{{ page.featured_author.bio }}</p>{% endif %}
    </div>
  </aside>
  {% endif %}
</div>
{% endblock %}