{% extends "base.html" %}

{% block title %}{{ page_title }}{% endblock %}

{% block content %}
<section class="hero-section hero-bento-section">
  <div class="container position-relative">
    <div class="row align-items-center g-5">
      <div class="col-xl-7 col-lg-8">
        <span class="eyebrow">Future-facing news magazine</span>
        <h1 class="display-title">Startup, tech, and general news in a living editorial grid.</h1>
        <p class="hero-copy">Signal now mixes startup/tech reporting with broader world, business, policy, and culture coverage—surfaced through dynamic tiles, fast search, RSS ingestion, and your in-house CMS.</p>
        <form method="get" action="{% url 'article_list' %}" class="signal-search mt-4">
          <div class="row g-3 align-items-end">
            <div class="col-md-7">
              <label class="form-label small text-uppercase text-secondary-emphasis" for="id_q">Search</label>
              {{ filter_form.q }}
            </div>
            <div class="col-md-3">
              <label class="form-label small text-uppercase text-secondary-emphasis" for="id_topic">Topic</label>
              {{ filter_form.topic }}
            </div>
            <div class="col-md-2 d-grid">
              <button class="btn btn-signal btn-lg" type="submit">Explore</button>
            </div>
          </div>
        </form>
        <div class="hero-metrics row row-cols-2 row-cols-md-4 g-3 mt-4">
          <div class="col"><div class="metric-card"><span>{{ story_count }}</span><small>Published stories</small></div></div>
          <div class="col"><div class="metric-card"><span>{{ topics|length }}</span><small>Topic lanes</small></div></div>
          <div class="col"><div class="metric-card"><span>{{ sources|length }}</span><small>Live feeds</small></div></div>
          <div class="col"><div class="metric-card"><span>24/7</span><small>Editorial motion</small></div></div>
        </div>
      </div>
      <div class="col-xl-5 col-lg-4">
        <div class="hero-panel glass-panel signal-deck-panel drift-card" data-drift="14">
          <div class="signal-deck-topline">
            <span class="panel-kicker">Front page brief</span>
            {% if last_updated %}<span class="deck-timestamp">Updated {{ last_updated.published_at|date:"M d" }}</span>{% endif %}
          </div>
          {% if featured_story %}
          <a class="feature-link" href="{{ featured_story.get_absolute_url }}">
            <h2>{{ featured_story.title }}</h2>
            <p>{{ featured_story.excerpt|default:featured_story.content|truncatechars:155 }}</p>
          </a>
          <div class="story-meta">
            <span>{{ featured_story.topic.name|default:"News" }}</span>
            <span>{% if featured_story.source %}{{ featured_story.source.name }}{% else %}Signal Desk{% endif %}</span>
            <span>{{ featured_story.published_at|date:"M d, Y" }}</span>
          </div>
          <div class="deck-orbits" aria-hidden="true">
            <span class="deck-orbit orbit-one"></span>
            <span class="deck-orbit orbit-two"></span>
            <span class="deck-orbit orbit-three"></span>
          </div>
          {% else %}
          <h2>No stories yet</h2>
          <p>Connect RSS feeds or publish an original story to bring this front page to life.</p>
          <a class="btn btn-signal mt-3" href="{% url 'article_submit' %}">Publish the first story</a>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section-block py-4">
  <div class="container">
    <div class="section-heading d-flex flex-column flex-lg-row justify-content-between align-items-lg-end gap-3 mb-4">
      <div>
        <span class="eyebrow">Topic radar</span>
        <h2>Jump between focused beats and broader news lanes.</h2>
      </div>
      <a class="text-link" href="{% url 'article_list' %}">See all stories</a>
    </div>
    <div class="topic-rail topic-rail-wide">
      {% for topic in topics %}
      <a href="{% url 'article_list' %}?topic={{ topic.slug }}" class="topic-pill" style="--topic-accent: {{ topic.accent_color|default:'#00c2a8' }};">
        <span class="topic-dot"></span>
        {{ topic.name }}
      </a>
      {% empty %}
      <p class="empty-copy mb-0">Create topics in the admin to organize the newsroom.</p>
      {% endfor %}
    </div>
  </div>
</section>

<section class="section-block pb-5">
  <div class="container">
    <div class="section-heading d-flex flex-column flex-lg-row justify-content-between align-items-lg-end gap-3 mb-4">
      <div>
        <span class="eyebrow">Bento front page</span>
        <h2>Unbalanced tiles that feel like they are gently in motion.</h2>
      </div>
      <p class="filter-summary mb-0">A mixed editorial surface for RSS imports, original pieces, and source modules.</p>
    </div>

    <div class="bento-grid" id="news-bento-grid">
      {% if featured_story %}
      <article class="glass-panel bento-card bento-feature drift-card" data-drift="18">
        <div class="bento-card-copy">
          <div class="story-meta mb-3">
            <span>{{ featured_story.topic.name|default:"News" }}</span>
            <span>{% if featured_story.source %}{{ featured_story.source.name }}{% else %}Signal Original{% endif %}</span>
          </div>
          <span class="bento-label">Featured signal</span>
          <h3><a href="{{ featured_story.get_absolute_url }}">{{ featured_story.title }}</a></h3>
          <p>{{ featured_story.excerpt|default:featured_story.content|truncatechars:200 }}</p>
          <div class="story-footer mt-auto">
            <span>{{ featured_story.published_at|date:"M d, Y" }}</span>
            <span>{{ featured_story.author_name|default:"Editorial desk" }}</span>
          </div>
        </div>
        <div class="bento-visual">
          {% if featured_story.image_url %}
          <img src="{{ featured_story.image_url }}" alt="{{ featured_story.title }}" width="960" height="720">
          {% else %}
          <div class="shape-stack" aria-hidden="true">
            <span class="shape cube"></span>
            <span class="shape sphere"></span>
            <span class="shape ring"></span>
          </div>
          {% endif %}
        </div>
      </article>
      {% endif %}

      {% for story in spotlight_stories %}
      <article class="glass-panel bento-card {% cycle 'bento-wide' 'bento-tall' 'bento-compact' 'bento-compact accent-secondary' 'bento-wide accent-primary' 'bento-tall accent-secondary' %} drift-card" data-drift="{{ forloop.counter|add:8 }}">
        <div class="bento-card-copy">
          <div class="story-meta mb-3">
            <span>{{ story.topic.name|default:"News" }}</span>
            <span>{% if story.source %}{{ story.source.name }}{% else %}Signal Original{% endif %}</span>
          </div>
          <h3><a href="{{ story.get_absolute_url }}">{{ story.title }}</a></h3>
          <p>{{ story.excerpt|default:story.content|truncatechars:125 }}</p>
          <div class="story-footer mt-auto">
            <span>{{ story.published_at|date:"M d" }}</span>
            <span>{{ story.author_name|default:"Editorial" }}</span>
          </div>
        </div>
      </article>
      {% empty %}
      <div class="glass-panel p-4">
        <h3 class="h4">No feed items yet</h3>
        <p class="mb-0">The grid is ready. Add RSS sources in admin and the next refresh will populate the tiles.</p>
      </div>
      {% endfor %}

      <aside class="glass-panel bento-card bento-sidebar drift-card" data-drift="10">
        <span class="eyebrow">Live sources</span>
        <ul class="source-list mb-0">
          {% for source in sources %}
          <li>
            <strong>{{ source.name }}</strong>
            <span>{{ source.description|default:"RSS source connected" }}</span>
          </li>
          {% empty %}
          <li><strong>No sources configured.</strong><span>Add feed URLs in Django admin.</span></li>
          {% endfor %}
        </ul>
      </aside>

      <aside class="glass-panel bento-card bento-editor drift-card" data-drift="12">
        <span class="eyebrow">CMS workflow</span>
        <h3>Publish an original analysis beside imported headlines.</h3>
        <p>Use the editor flow for founder notes, explainers, newsletters, or daily front-page curation.</p>
        <div class="d-flex flex-wrap gap-3 mt-auto">
          <a class="btn btn-signal" href="{% url 'article_submit' %}">Write a story</a>
          <a class="btn btn-outline-light" href="/admin/">Open admin</a>
        </div>
      </aside>

      {% if original_story %}
      <article class="glass-panel bento-card bento-original accent-primary drift-card" data-drift="16">
        <span class="eyebrow">Original feature</span>
        <h3><a href="{{ original_story.get_absolute_url }}">{{ original_story.title }}</a></h3>
        <p>{{ original_story.excerpt|truncatechars:145 }}</p>
        <div class="story-footer mt-auto">
          <span>{{ original_story.published_at|date:"M d" }}</span>
          <span>{{ original_story.author_name|default:"Signal Desk" }}</span>
        </div>
      </article>
      {% endif %}
    </div>
  </div>
</section>
{% endblock %}