{% extends "base.html" %}
{% load static %}

{% block title %}Home{% endblock %}
{% block meta_description %}Radiuma — A Powerful Workflow Generator for Standardized Radiomics Analysis and Medical Image Visualization.{% endblock %}

{% block content %}

<section class="hero" aria-labelledby="hero-heading">
  <div class="hero-blobs" aria-hidden="true">
    <div class="blob blob--1"></div>
    <div class="blob blob--2"></div>
    <div class="blob blob--3"></div>
    <img src="{% static 'images/blob-blue-1.svg' %}" class="blob-img blob-img--hero-left" alt="" />
    <img src="{% static 'images/abstract-shapes.svg' %}" class="blob-img blob-img--hero-right" alt="" />
  </div>
  <div class="container hero-content">
    <div class="hero-text">
      {% if hero %}
        {% if hero.badge %}<div class="hero-badge">{{ hero.badge }}</div>{% endif %}
        {% if hero.title or hero.title_highlight %}
        <h1 class="hero-title" id="hero-heading">
          {% if hero.title %}{{ hero.title }}{% endif %}
          {% if hero.title and hero.title_highlight %}<br />{% endif %}
          {% if hero.title_highlight %}<span class="gradient-text">{{ hero.title_highlight }}</span>{% endif %}
        </h1>
        {% endif %}
        {% if hero.subtitle %}<p class="hero-subtitle">{{ hero.subtitle }}</p>{% endif %}
        {% if hero.description %}<p class="hero-description">{{ hero.description }}</p>{% endif %}
        {% if hero.primary_cta_text or hero.secondary_cta_text %}
        <div class="hero-actions">
          {% if hero.primary_cta_text %}<a href="{{ hero.primary_cta_url }}" class="btn-primary">{{ hero.primary_cta_text }}</a>{% endif %}
          {% if hero.secondary_cta_text %}<a href="{{ hero.secondary_cta_url }}" class="btn-ghost">{{ hero.secondary_cta_text }}</a>{% endif %}
        </div>
        {% endif %}
      {% endif %}
    </div>
    {% if hero and hero.image or not hero %}
    <div class="hero-app-preview fade-in">
      <div class="hero-app-preview-glow" aria-hidden="true"></div>
      {% if hero and hero.image %}
      <img src="{{ hero.image.url }}" alt="{{ hero.image_alt }}" loading="eager" />
      {% elif not hero %}
      <img src="{% static 'images/screenshot-1.jpg' %}" alt="Radiuma application — main workflow view" loading="eager" />
      {% endif %}
    </div>
    {% endif %}
  </div>
</section>

{% for section in homepage_sections %}

  {% if 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 %}
        <h2 class="section-title" id="features-heading-{{ section.pk }}">{{ section.title }}</h2>
        {% if section.description %}<p class="section-desc">{{ section.description }}</p>{% endif %}
      </div>
      <div class="features-grid">
        {% for item in section.items.all %}
        <div class="feature-card glass-card fade-in">
          {% 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>
        </div>
        {% 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 %}
        <h2 class="section-title" id="screenshots-heading-{{ section.pk }}">{{ section.title }}</h2>
        {% if section.description %}<p class="section-desc">{{ section.description }}</p>{% endif %}
      </div>
      <div class="screenshots-grid">
        <div class="screenshot-item fade-in">
          <img src="{% static 'images/screenshot-2.jpg' %}" alt="Radiuma full workflow interface" loading="lazy" />
        </div>
        <div class="screenshot-item fade-in">
          <img src="{% static 'images/screenshot-3.png' %}" alt="Radiuma panel view" loading="lazy" />
        </div>
        <div class="screenshot-item fade-in">
          <img src="{% static 'images/screenshot-5.png' %}" alt="Radiuma segmentation view" loading="lazy" />
        </div>
        <div class="screenshot-item fade-in">
          <img src="{% static 'images/screenshot-8.jpg' %}" alt="Radiuma radiomics results" loading="lazy" />
        </div>
      </div>
    </div>
  </section>

  {% elif section.section_type == "products" %}
  {% if sub_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 %}
        <h2 class="section-title" id="products-heading-{{ section.pk }}">{{ section.title }}</h2>
        {% if section.description %}<p class="section-desc">{{ section.description }}</p>{% endif %}
      </div>
      <div class="products-grid">
        {% for product in sub_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">
            {% if product.logo %}
            <img src="{{ product.logo.url }}" alt="" class="product-card-logo" aria-hidden="true" loading="lazy" />
            {% endif %}
            <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 == "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 %}
        <h2 class="section-title" id="problems-heading-{{ section.pk }}">{{ section.title }}</h2>
        {% if section.description %}<p class="section-desc">{{ section.description }}</p>{% endif %}
      </div>
      <div class="problems-grid">
        {% for item in section.items.all %}
        <div class="problem-item glass-card fade-in">
          {% 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>
        </div>
        {% 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 %}
        <h2 class="section-title" id="supporters-heading-{{ section.pk }}">{{ section.title }}</h2>
        {% if section.description %}<p class="section-desc">{{ section.description }}</p>{% endif %}
      </div>
      <div class="supporters-grid">
        {% for item in section.items.all %}
        <div class="supporter-card glass-card fade-in">
          {% if item.image %}
          <div class="supporter-logo">
            <img src="{{ item.image.url }}" alt="{{ 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>
        </div>
        {% endfor %}
      </div>
    </div>
  </section>

  {% 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 %}
          <h2 class="section-title" id="about-strip-heading-{{ section.pk }}">{{ section.title }}</h2>
          {% if section.description %}<p class="about-strip-text">{{ section.description }}</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>

  {% endif %}
{% endfor %}

{% endblock %}