{% load static %}

{% for section in sections %}

{% if section.section_type == "hero" %}
<section class="page-hero" aria-labelledby="page-hero-heading-{{ section.pk }}">
  <div class="page-hero-blobs" aria-hidden="true">
    <div class="blob blob--1"></div>
    <div class="blob blob--2"></div>
    <img src="{% static 'images/blob-blue-2.svg' %}" class="blob-img blob-img--page-hero" alt="" />
    <img src="{% static 'images/abstract-shapes-2.svg' %}" class="blob-img blob-img--page-corner" alt="" />
  </div>
  <div class="container">
    <div class="page-hero-content">
      {% if section.badge %}<div class="section-badge">{{ section.badge }}</div>{% endif %}
      {% if section.title %}<h1 class="page-hero-title" id="page-hero-heading-{{ section.pk }}">{{ section.title }}</h1>{% endif %}
      {% if section.subtitle %}<p class="page-hero-subtitle">{{ section.subtitle }}</p>{% endif %}
      {% if section.content %}<div class="rich-content page-hero-body" data-readmore="160">{{ section.rendered_content }}</div>{% endif %}
    </div>
    {% with items=section.items.all %}
    {% if items %}
    <div class="about-screenshots-grid about-hero-gallery">
      {% for item in items %}
      {% if item.image %}
      {% if item.is_featured %}
      {% include "partials/_linked_card_open.html" with url=item.url card_class="screenshot-item fade-in screenshot-item--featured" %}
      {% else %}
      {% include "partials/_linked_card_open.html" with url=item.url card_class="screenshot-item fade-in" %}
      {% endif %}
        <img src="{{ item.image.url }}" alt="{{ item.image_alt|default:item.title }}" loading="lazy" />
      {% include "partials/_linked_card_close.html" with url=item.url %}
      {% endif %}
      {% endfor %}
    </div>
    {% endif %}
    {% endwith %}
  </div>
</section>

{% elif section.section_type == "intro" %}
<section class="section" aria-labelledby="intro-{{ section.pk }}-heading">
  <div class="container">
    <div class="about-intro glass-card fade-in">
      <div class="about-intro-text">
        {% if section.title %}<h2 id="intro-{{ section.pk }}-heading">{{ section.title }}</h2>{% endif %}
        {% if section.content %}
        <div class="rich-content" data-readmore="200">{{ section.rendered_content }}</div>
        {% endif %}
      </div>
    </div>
    {% with items=section.items.all %}
    {% if items %}
    <div class="standards-grid" style="margin-top: 1.5rem;">
      {% for item in items %}
      {% if item.is_featured and item.image %}
      {% else %}
      {% include "partials/_standard_item_card.html" with item=item %}
      {% endif %}
      {% endfor %}
    </div>
    {% include "partials/_section_featured_screenshots.html" with items=items %}
    {% endif %}
    {% endwith %}
  </div>
</section>

{% elif section.section_type == "grid" %}
<section class="section" aria-labelledby="grid-{{ section.pk }}-heading">
  <div class="container">
    {% if section.badge or section.title %}
    <div class="section-header">
      {% if section.badge %}<div class="section-badge">{{ section.badge }}</div>{% endif %}
      {% if section.title %}<h2 class="section-title" id="grid-{{ section.pk }}-heading">{{ section.title }}</h2>{% endif %}
    </div>
    {% endif %}
    {% if section.content %}<div class="rich-content" data-readmore="200">{{ section.rendered_content }}</div>{% endif %}
    {% with items=section.items.all %}
    {% if items %}
    <div class="standards-grid">
      {% for item in items %}
      {% if item.is_featured and item.image %}
      {% else %}
      {% include "partials/_standard_item_card.html" with item=item %}
      {% endif %}
      {% endfor %}
    </div>
    {% include "partials/_section_featured_screenshots.html" with items=items %}
    {% endif %}
    {% endwith %}
  </div>
</section>

{% elif section.section_type == "history" %}
<section class="section" aria-labelledby="history-{{ section.pk }}-heading">
  <div class="container">
    <div class="history-block glass-card fade-in">
      {% with links=section.items.all %}
      <div class="history-content">
        {% if section.badge %}<div class="section-badge">{{ section.badge }}</div>{% endif %}
        {% if section.title %}<h2 id="history-{{ section.pk }}-heading">{{ section.title }}</h2>{% endif %}
        {% if section.content %}<div class="rich-content" data-readmore="200">{{ section.rendered_content }}</div>{% endif %}
        {% if links %}
        <div class="history-links">
          {% for link in links %}
          {% if link.url %}
          <a href="{{ link.url }}" class="btn-ghost" target="_blank" rel="noopener noreferrer">
            {% if link.icon %}<span class="history-link-icon" aria-hidden="true">{{ link.icon }}</span>{% endif %}
            {{ link.title }}
          </a>
          {% endif %}
          {% endfor %}
        </div>
        {% endif %}
      </div>
      <div class="history-visual" aria-hidden="true">
        <div class="history-blob history-blob--1"></div>
        <div class="history-blob history-blob--2"></div>
        {% for link in links %}
        {% if link.image %}
        <img src="{{ link.image.url }}" alt="{{ link.image_alt|default:link.title }}" class="history-visual-image" loading="lazy" />
        {% endif %}
        {% endfor %}
        {% if section.subtitle %}<div class="history-year">{{ section.subtitle }}</div>{% endif %}
      </div>
      {% endwith %}
    </div>
  </div>
</section>

{% elif section.section_type == "custom" %}
<section class="section" aria-labelledby="custom-{{ section.pk }}-heading">
  <div class="container">
    {% if section.badge or section.title %}
    <div class="section-header">
      {% if section.badge %}<div class="section-badge">{{ section.badge }}</div>{% endif %}
      {% if section.title %}<h2 class="section-title" id="custom-{{ section.pk }}-heading">{{ section.title }}</h2>{% endif %}
    </div>
    {% endif %}
    {% if section.content %}
    <div class="glass-card fade-in about-custom-card">
      <div class="rich-content" data-readmore="200">{{ section.rendered_content }}</div>
    </div>
    {% endif %}
    {% with items=section.items.all %}
    {% if items %}
    <div class="standards-grid" style="margin-top: 1.5rem;">
      {% for item in items %}
      {% if item.is_featured and item.image %}
      {% else %}
      {% include "partials/_standard_item_card.html" with item=item %}
      {% endif %}
      {% endfor %}
    </div>
    {% include "partials/_section_featured_screenshots.html" with items=items %}
    {% endif %}
    {% endwith %}
  </div>
</section>

{% elif section.section_type == "features" %}
<section class="section features-section" aria-labelledby="features-heading-{{ section.pk }}">
  <div class="container">
    <div class="section-header">
      {% if section.badge %}<div class="section-badge">{{ section.badge }}</div>{% endif %}
      {% if section.title %}<h2 class="section-title" id="features-heading-{{ section.pk }}">{{ section.title }}</h2>{% endif %}
      {% if section.description %}<p class="section-desc">{{ section.description }}</p>{% elif section.content %}<div class="rich-content section-desc">{{ section.rendered_content }}</div>{% endif %}
    </div>
    <div class="features-grid">
      {% for item in section.items.all %}
      {% include "partials/_linked_card_open.html" with url=item.url card_class="feature-card" %}
        {% if item.icon %}<div class="feature-icon" aria-hidden="true">{{ item.icon }}</div>{% endif %}
        <h3 class="feature-title">{{ item.title }}</h3>
        <p class="feature-desc" data-readmore="88">{{ item.content }}</p>
      {% include "partials/_linked_card_close.html" with url=item.url %}
      {% endfor %}
    </div>
  </div>
</section>

{% elif section.section_type == "screenshots" %}
<section class="section screenshots-section" aria-labelledby="screenshots-heading-{{ section.pk }}">
  <div class="container">
    <div class="section-header">
      {% if section.badge %}<div class="section-badge">{{ section.badge }}</div>{% endif %}
      {% if section.title %}<h2 class="section-title" id="screenshots-heading-{{ section.pk }}">{{ section.title }}</h2>{% endif %}
      {% if section.description %}<p class="section-desc">{{ section.description }}</p>{% elif section.content %}<div class="rich-content section-desc">{{ section.rendered_content }}</div>{% endif %}
    </div>
    <div class="screenshots-grid">
      {% for item in section.items.all %}
      {% if item.image %}
      {% include "partials/_linked_card_open.html" with url=item.url card_class="screenshot-item" %}
        <img src="{{ item.image.url }}" alt="{{ item.image_alt|default:item.title }}" loading="lazy" />
      {% include "partials/_linked_card_close.html" with url=item.url %}
      {% endif %}
      {% endfor %}
    </div>
  </div>
</section>

{% elif section.section_type == "projects" %}
<section class="section projects-showcase-section" aria-labelledby="projects-showcase-heading-{{ section.pk }}" data-projects-section>
  <div class="container">
    <div class="section-header section-header--center">
      {% if section.badge %}<div class="section-badge">{{ section.badge }}</div>{% endif %}
      {% if section.title or section.title_highlight %}
      <h2 class="section-title" id="projects-showcase-heading-{{ section.pk }}">
        {% if section.title %}{{ section.title }}{% endif %}
        {% if section.title_highlight %}<span class="gradient-text">{{ section.title_highlight }}</span>{% endif %}
      </h2>
      {% endif %}
      {% if section.description %}<p class="section-desc">{{ section.description }}</p>{% endif %}
    </div>
    <div class="projects-filter" role="tablist" aria-label="Filter projects">
      <button type="button" class="projects-filter-btn is-active" data-project-filter="all" role="tab" aria-selected="true">All</button>
      <button type="button" class="projects-filter-btn" data-project-filter="new" role="tab" aria-selected="false">New</button>
      <button type="button" class="projects-filter-btn" data-project-filter="ongoing" role="tab" aria-selected="false">Ongoing</button>
      <button type="button" class="projects-filter-btn" data-project-filter="done" role="tab" aria-selected="false">Done</button>
    </div>
    <div class="projects-showcase-grid">
      {% for item in section.items.all %}
      {% if item.url %}
      <a href="{{ item.url }}" class="project-card glass-card fade-in" data-project-status="{{ item.project_status|default:'all' }}"{% if item.url|slice:":4" == "http" %} target="_blank" rel="noopener noreferrer"{% endif %}>
      {% else %}
      <article class="project-card glass-card fade-in" data-project-status="{{ item.project_status|default:'all' }}">
      {% endif %}
        {% if item.image %}
        <div class="project-card-image">
          <img src="{{ item.image.url }}" alt="{{ item.image_alt|default:item.title }}" loading="lazy" />
        </div>
        {% endif %}
        <div class="project-card-body">
          {% if item.title %}<h3 class="project-card-title">{{ item.title }}</h3>{% endif %}
          {% if item.content %}<p class="project-card-desc" data-readmore="120">{{ item.content }}</p>{% endif %}
          {% if item.tag_list %}
          <ul class="project-card-tags" role="list">
            {% for tag in item.tag_list %}
            <li>{{ tag }}</li>
            {% endfor %}
          </ul>
          {% endif %}
        </div>
      {% if item.url %}
      </a>
      {% else %}
      </article>
      {% endif %}
      {% endfor %}
      {% if website_project_briefs %}
      {% for brief in website_project_briefs %}
      {% if brief.public_url %}
      <a href="{{ brief.public_url }}" class="project-card glass-card fade-in" data-project-status="{{ brief.public_project_status|default:'all' }}"{% if brief.public_url|slice:":4" == "http" %} target="_blank" rel="noopener noreferrer"{% endif %}>
      {% else %}
      <article class="project-card glass-card fade-in" data-project-status="{{ brief.public_project_status|default:'all' }}">
      {% endif %}
        {% if brief.public_image %}
        <div class="project-card-image">
          <img src="{{ brief.public_image.url }}" alt="{{ brief.public_display_title|default:brief.title }}" loading="lazy" />
        </div>
        {% endif %}
        <div class="project-card-body">
          {% if brief.public_display_title %}<h3 class="project-card-title">{{ brief.public_display_title }}</h3>{% endif %}
          {% if brief.public_display_summary %}
          <p class="project-card-desc" data-readmore="120">{{ brief.public_display_summary }}</p>
          {% endif %}
          {% if brief.public_budget_display or brief.public_deadline_display %}
          <p class="project-card-meta">
            {% if brief.public_budget_display %}<span>Budget: {{ brief.public_budget_display }}</span>{% endif %}
            {% if brief.public_deadline_display %}<span>Deadline: {{ brief.public_deadline_display }}</span>{% endif %}
          </p>
          {% endif %}
          {% if brief.public_tag_list %}
          <ul class="project-card-tags" role="list">
            {% for tag in brief.public_tag_list %}
            <li>{{ tag }}</li>
            {% endfor %}
          </ul>
          {% endif %}
          {% if brief.public_reference_link_list %}
          <ul class="project-card-links" role="list">
            {% for link in brief.public_reference_link_list %}
            <li><a href="{{ link }}" target="_blank" rel="noopener noreferrer">{{ link }}</a></li>
            {% endfor %}
          </ul>
          {% endif %}
          {% if brief.public_attachment_filename_list %}
          <ul class="project-card-attachments" role="list">
            {% for filename in brief.public_attachment_filename_list %}
            <li>{{ filename }}</li>
            {% endfor %}
          </ul>
          {% endif %}
        </div>
      {% if brief.public_url %}
      </a>
      {% else %}
      </article>
      {% endif %}
      {% endfor %}
      {% endif %}
    </div>
  </div>
</section>

{% elif section.section_type == "experience" %}
<section class="section experience-section" aria-labelledby="experience-heading-{{ section.pk }}">
  <div class="container">
    <div class="section-header section-header--center">
      {% if section.badge %}<div class="section-badge">{{ section.badge }}</div>{% endif %}
      {% if section.title or section.title_highlight %}
      <h2 class="section-title" id="experience-heading-{{ section.pk }}">
        {% if section.title %}<span class="gradient-text">{{ section.title }}</span>{% endif %}
        {% if section.title_highlight %} {{ section.title_highlight }}{% endif %}
      </h2>
      {% endif %}
      {% if section.description %}
      <div class="experience-intro">{{ section.description|linebreaksbr }}</div>
      {% endif %}
    </div>
    <div class="experience-grid">
      {% for item in section.items.all %}
      <article class="experience-card glass-card fade-in">
        {% if item.image %}
        <div class="experience-card-icon">
          <img src="{{ item.image.url }}" alt="" aria-hidden="true" loading="lazy" />
        </div>
        {% elif item.icon %}
        <div class="experience-card-icon experience-card-icon--text" aria-hidden="true">{{ item.icon }}</div>
        {% endif %}
        {% if item.title %}<h3 class="experience-card-title">{{ item.title }}</h3>{% endif %}
        {% if item.content %}<p class="experience-card-desc">{{ item.content }}</p>{% endif %}
      </article>
      {% endfor %}
    </div>
  </div>
</section>

{% elif section.section_type == "products" %}
{% if homepage_products %}
<section class="section products-section" aria-labelledby="products-heading-{{ section.pk }}">
  <div class="container">
    <div class="section-header">
      {% if section.badge %}<div class="section-badge">{{ section.badge }}</div>{% endif %}
      {% if section.title %}<h2 class="section-title" id="products-heading-{{ section.pk }}">{{ section.title }}</h2>{% endif %}
      {% if section.description %}<p class="section-desc">{{ section.description }}</p>{% elif section.content %}<div class="rich-content section-desc">{{ section.rendered_content }}</div>{% endif %}
    </div>
    <div class="products-grid">
      {% for product in homepage_products %}
      <a href="{{ product.get_absolute_url }}" class="product-card glass-card fade-in">
        {% if product.image %}
        <div class="product-card-image">
          <img src="{{ product.image.url }}" alt="{{ product.name }}" loading="lazy" />
        </div>
        {% endif %}
        <div class="product-card-body">
          <h3 class="product-card-title">{{ product.name }}</h3>
          <p class="product-card-desc" data-readmore="88">{{ product.short_description }}</p>
          <span class="product-card-link">
            Explore
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
              <path d="M3 8H13M13 8L9 4M13 8L9 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </span>
        </div>
      </a>
      {% endfor %}
    </div>
  </div>
</section>
{% endif %}

{% elif section.section_type == "about_strip" %}
<section class="section about-strip" aria-labelledby="about-strip-heading-{{ section.pk }}">
  <div class="container">
    <div class="about-strip-inner glass-card">
      <div class="about-strip-content">
        {% if section.badge %}<div class="section-badge">{{ section.badge }}</div>{% endif %}
        {% if section.title %}<h2 class="section-title" id="about-strip-heading-{{ section.pk }}">{{ section.title }}</h2>{% endif %}
        {% if section.description %}<p class="about-strip-text">{{ section.description }}</p>{% elif section.content %}<p class="about-strip-text">{{ section.rendered_content }}</p>{% endif %}
        {% if section.link_text and section.link_url %}
        <a href="{{ section.link_url }}" class="btn-primary">{{ section.link_text }}</a>
        {% endif %}
      </div>
      <div class="about-strip-blobs" aria-hidden="true">
        <div class="strip-blob strip-blob--1"></div>
        <div class="strip-blob strip-blob--2"></div>
      </div>
    </div>
  </div>
</section>

{% elif section.section_type == "products_catalog" %}
{% if homepage_products_catalog %}
<section class="section products-catalog-section" aria-labelledby="products-catalog-heading-{{ section.pk }}">
  <div class="container">
    <div class="section-header">
      {% if section.badge %}<div class="section-badge">{{ section.badge }}</div>{% endif %}
      {% if section.title %}<h2 class="section-title" id="products-catalog-heading-{{ section.pk }}">{{ section.title }}</h2>{% endif %}
      {% if section.description %}<p class="section-desc">{{ section.description }}</p>{% elif section.content %}<div class="rich-content section-desc">{{ section.rendered_content }}</div>{% endif %}
    </div>
    <div class="products-overview-grid">
      {% for product in homepage_products_catalog %}
      <div class="product-overview-card glass-card fade-in">
        {% if product.image %}
        <div class="product-overview-image">
          <img src="{{ product.image.url }}" alt="{{ product.name }}" loading="lazy" />
        </div>
        {% endif %}
        <div class="product-overview-body">
          <h3 class="product-overview-title">{{ product.name }}</h3>
          <p class="product-overview-short">{{ product.short_description }}</p>
          <p class="product-overview-desc" data-readmore="110">{{ product.description }}</p>
          <a href="{{ product.get_absolute_url }}" class="btn-primary">Explore {{ product.name }}</a>
        </div>
        {% if product.sub_products.all %}
        <div class="product-overview-subs">
          <h4 class="product-overview-subs-title">Modules</h4>
          <ul class="product-overview-subs-list" role="list">
            {% for sub in product.sub_products.all %}
            <li>
              <a href="{{ sub.get_absolute_url }}" class="sub-link-chip">
                {{ sub.name }}
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
                  <path d="M2.5 6H9.5M9.5 6L7 3.5M9.5 6L7 8.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </a>
            </li>
            {% endfor %}
          </ul>
        </div>
        {% endif %}
      </div>
      {% endfor %}
    </div>
  </div>
</section>
{% endif %}

{% elif section.section_type == "problems" %}
<section class="section problems-section" aria-labelledby="problems-heading-{{ section.pk }}">
  <div class="container">
    <div class="section-header">
      {% if section.badge %}<div class="section-badge">{{ section.badge }}</div>{% endif %}
      {% if section.title %}<h2 class="section-title" id="problems-heading-{{ section.pk }}">{{ section.title }}</h2>{% endif %}
      {% if section.description %}<p class="section-desc">{{ section.description }}</p>{% elif section.content %}<div class="rich-content section-desc">{{ section.rendered_content }}</div>{% endif %}
    </div>
    <div class="problems-grid">
      {% for item in section.items.all %}
      {% include "partials/_linked_card_open.html" with url=item.url card_class="problem-item" %}
        {% if item.icon %}<div class="problem-number" aria-hidden="true">{{ item.icon }}</div>{% endif %}
        <h3 class="problem-title">{{ item.title }}</h3>
        <p class="problem-desc" data-readmore="88">{{ item.content }}</p>
      {% include "partials/_linked_card_close.html" with url=item.url %}
      {% endfor %}
    </div>
  </div>
</section>

{% elif section.section_type == "supporters" %}
<section class="section supporters-section" aria-labelledby="supporters-heading-{{ section.pk }}">
  <div class="container">
    <div class="section-header">
      {% if section.badge %}<div class="section-badge">{{ section.badge }}</div>{% endif %}
      {% if section.title %}<h2 class="section-title" id="supporters-heading-{{ section.pk }}">{{ section.title }}</h2>{% endif %}
      {% if section.description %}<p class="section-desc">{{ section.description }}</p>{% elif section.content %}<div class="rich-content section-desc">{{ section.rendered_content }}</div>{% endif %}
    </div>
    <div class="supporters-grid">
      {% for item in section.items.all %}
      {% include "partials/_linked_card_open.html" with url=item.url card_class="supporter-card" %}
        {% if item.image %}
        <div class="supporter-logo">
          <img src="{{ item.image.url }}" alt="{{ item.image_alt|default:item.title }} logo" loading="lazy" />
        </div>
        {% endif %}
        <div class="supporter-body">
          <h3 class="supporter-name">{{ item.title }}</h3>
          {% if item.content %}<p class="supporter-desc">{{ item.content }}</p>{% endif %}
        </div>
      {% include "partials/_linked_card_close.html" with url=item.url %}
      {% endfor %}
    </div>
  </div>
</section>

{% elif section.section_type == "faq" %}
<section class="section" aria-labelledby="faq-section-{{ section.pk }}-heading">
  <div class="container">
    {% if section.badge or section.title %}
    <div class="section-header">
      {% if section.badge %}<div class="section-badge">{{ section.badge }}</div>{% endif %}
      {% if section.title %}<h2 class="section-title" id="faq-section-{{ section.pk }}-heading">{{ section.title }}</h2>{% endif %}
    </div>
    {% endif %}
    {% with items=section.items.all %}
    {% if items %}
    <div class="faq-list">
      {% for item in items %}
      {% if item.url %}
      {% include "partials/_linked_card_open.html" with url=item.url card_class="faq-item faq-item--link" %}
        <div class="faq-question">
          {{ item.title }}
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
            <path d="M3 8H13M13 8L9 4M13 8L9 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        {% if item.content %}<div class="rich-content faq-link-preview">{{ item.rendered_content }}</div>{% endif %}
      {% include "partials/_linked_card_close.html" with url=item.url %}
      {% else %}
      <div class="faq-item glass-card fade-in">
        <button
          type="button"
          class="faq-question"
          aria-expanded="false"
          aria-controls="faq-answer-{{ section.pk }}-{{ item.pk }}"
          id="faq-question-{{ section.pk }}-{{ item.pk }}"
        >
          {{ item.title }}
          <svg class="faq-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
            <path d="M5 8L10 13L15 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </button>
        <div
          class="faq-answer"
          id="faq-answer-{{ section.pk }}-{{ item.pk }}"
          role="region"
          aria-labelledby="faq-question-{{ section.pk }}-{{ item.pk }}"
          hidden
        >
          <div class="rich-content">{{ item.rendered_content }}</div>
        </div>
      </div>
      {% endif %}
      {% endfor %}
    </div>
    {% endif %}
    {% endwith %}
  </div>
</section>

{% elif section.section_type == "video" %}
{% include "partials/_video_section.html" with section=section %}

{% endif %}
{% empty %}
<section class="section">
  <div class="container">
    <p style="color: var(--text-secondary); text-align: center; padding: 4rem 0;">
      No content configured yet. Add sections in the admin panel.
    </p>
  </div>
</section>
{% endfor %}