{% extends 'base.html' %}
{% load static humanize video_filters %}

{% block title %}{{ video.title }} — {{ site.site_name|default:"TDK Homes" }}{% endblock %}
{% block meta_description %}{{ video.description|clean_video_description|striptags|truncatechars:160 }}{% endblock %}

{% block content %}

{% if video.orientation == 'vertical' %}

{# ================================================================ #}
{#  VERTICAL (REEL) — two-column: video left, content right          #}
{# ================================================================ #}
<section style="background:#0F1B2D; padding: 3rem 0 4rem;">
  <div class="container" style="max-width:1100px;">
    <div class="row g-5">

      {# LEFT: Vertical player #}
      <div class="col-lg-5">
        <div class="vertical-video-wrapper sticky-lg-top" style="top:100px;">
          {% if video.embed_url %}
          <div class="vertical-video-embed">
            <iframe src="{{ video.embed_url }}"
                    title="{{ video.title }}"
                    allowfullscreen
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
            </iframe>
          </div>
          {% elif video.video_file %}
          <video controls class="vertical-video-file">
            <source src="{{ video.video_file.url }}">
          </video>
          {% else %}
          <div class="vertical-video-embed d-flex align-items-center justify-content-center" style="background:#1A2942;color:#B8C5D6;">
            <div class="text-center p-4">
              <i class="bi bi-play-circle display-3 mb-3 d-block" style="color:var(--primary);"></i>
              <p class="mb-0 small">Video unavailable. <a href="{% url 'core:contact' %}">Contact us.</a></p>
            </div>
          </div>
          {% endif %}

          {% with highlights=video.get_highlights_list %}
          {% if highlights %}
          <div class="reel-highlights mt-3">
            {% for item in highlights %}
            <div class="reel-highlight">
              <i class="bi {{ item.icon }}"></i>
              <span class="label">{{ item.label }}</span>
              <span class="value">{{ item.value }}</span>
            </div>
            {% endfor %}
          </div>
          {% endif %}
          {% endwith %}
        </div>
      </div>

      {# RIGHT: Meta + description + CTAs #}
      <div class="col-lg-7">
        <nav aria-label="breadcrumb" class="mb-3">
          <ol class="breadcrumb video-breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:home' %}">Home</a></li>
            <li class="breadcrumb-item"><a href="{% url 'videos:list' %}">Videos</a></li>
            <li class="breadcrumb-item active">{{ video.title|truncatechars:50 }}</li>
          </ol>
        </nav>

        <span class="video-category-badge">{{ video.get_category_display }}</span>
        <h1 style="color:#fff;font-family:'Playfair Display',serif;font-size:clamp(1.4rem,3vw,2.2rem);line-height:1.2;margin:.75rem 0 .5rem;">
          {{ video.title }}
        </h1>
        <p class="text-muted small mb-4">
          <i class="bi bi-calendar3 me-1"></i>{{ video.created_at|date:"M d, Y" }}
          {% if video.duration %}&nbsp;&middot;&nbsp;<i class="bi bi-clock me-1"></i>{{ video.duration }}{% endif %}
          &nbsp;&middot;&nbsp;<i class="bi bi-eye me-1"></i>{{ video.views_count|intcomma }} views
        </p>

        {% if video.description %}
        <div class="video-description mb-4">
          {{ video.description|clean_video_description|linebreaks }}
        </div>
        {% endif %}

        <div class="d-flex gap-2 flex-wrap">
          <a href="https://wa.me/{{ site.whatsapp_number|default:WHATSAPP_NUMBER }}?text=Hi%2C%20I%20saw%20your%20video%20%22{{ video.title|urlencode }}%22%20and%20I%27m%20interested.%20Please%20share%20more%20details."
             target="_blank"
             class="btn d-inline-flex align-items-center gap-2"
             style="background:#25d366;color:#fff;font-weight:700;border:none;padding:.7rem 1.4rem;">
            <i class="bi bi-whatsapp"></i>WhatsApp Us
          </a>
          <a href="tel:{{ site.phone|default:CONTACT_PHONE }}"
             class="btn btn-primary d-inline-flex align-items-center gap-2"
             style="padding:.7rem 1.4rem;">
            <i class="bi bi-telephone-fill"></i>{{ site.phone|default:CONTACT_PHONE }}
          </a>
          <a href="mailto:{{ site.email|default:CONTACT_EMAIL }}?subject=Enquiry%3A%20{{ video.title|urlencode }}"
             class="btn btn-outline-light d-inline-flex align-items-center gap-2"
             style="padding:.7rem 1.4rem;">
            <i class="bi bi-envelope-fill"></i>Email
          </a>
        </div>

        {% if site.address %}
        <p class="small mt-4 mb-0" style="color:#6c757d;">
          <i class="bi bi-geo-alt-fill me-1"></i>{{ site.address }}
        </p>
        {% endif %}
      </div>

    </div>
  </div>
</section>

{% else %}

{# ================================================================ #}
{#  HORIZONTAL — hero player on top, description + sidebar below     #}
{# ================================================================ #}
<div style="background:#060F1A; padding: 2.5rem 0 0;">
  <div class="container" style="max-width:1100px;">

    <nav aria-label="breadcrumb" class="mb-3">
      <ol class="breadcrumb video-breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'core:home' %}">Home</a></li>
        <li class="breadcrumb-item"><a href="{% url 'videos:list' %}">Videos</a></li>
        <li class="breadcrumb-item active">{{ video.title|truncatechars:60 }}</li>
      </ol>
    </nav>

    <span class="video-category-badge mb-3 d-inline-block">{{ video.get_category_display }}</span>
    <h1 style="color:#fff;font-family:'Playfair Display',serif;font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.2;margin-bottom:.6rem;">
      {{ video.title }}
    </h1>
    <p class="text-muted small mb-4">
      <i class="bi bi-calendar3 me-1"></i>{{ video.created_at|date:"M d, Y" }}
      {% if video.duration %}&nbsp;&middot;&nbsp;<i class="bi bi-clock me-1"></i>{{ video.duration }}{% endif %}
      &nbsp;&middot;&nbsp;<i class="bi bi-eye me-1"></i>{{ video.views_count|intcomma }} views
    </p>

    <div class="ratio ratio-16x9" style="border-radius:12px 12px 0 0;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.6);">
      {% if video.embed_url %}
        <iframe src="{{ video.embed_url }}"
                title="{{ video.title }}"
                allowfullscreen
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
        </iframe>
      {% elif video.video_file %}
        <video controls style="width:100%;height:100%;object-fit:cover;">
          <source src="{{ video.video_file.url }}">
        </video>
      {% else %}
        <div class="d-flex align-items-center justify-content-center" style="background:#1A2942;color:#B8C5D6;">
          <div class="text-center p-4">
            <i class="bi bi-play-circle display-3 mb-3 d-block" style="color:var(--primary);"></i>
            <p class="mb-0">Video unavailable. <a href="{% url 'core:contact' %}">Contact us to learn more.</a></p>
          </div>
        </div>
      {% endif %}
    </div>
  </div>
</div>

{# Highlight strip #}
{% with highlights=video.get_highlights_list %}
{% if highlights %}
<div style="background:#0A1422;border-top:1px solid #1A2942;border-bottom:1px solid #1A2942;padding:1.75rem 0;">
  <div class="container" style="max-width:1100px;">
    <div class="video-highlight-strip">
      {% for item in highlights %}
      <div class="highlight-item">
        <i class="bi {{ item.icon }}"></i>
        <div class="label">{{ item.label }}</div>
        <div class="value">{{ item.value }}</div>
      </div>
      {% endfor %}
    </div>
  </div>
</div>
{% endif %}
{% endwith %}

{# Two-column: description + CTA sidebar #}
<section style="padding:3.5rem 0;background:#0F1B2D;">
  <div class="container" style="max-width:1100px;">
    <div class="row g-5">

      <div class="col-lg-8">
        <h2 style="color:#fff;font-size:1.3rem;margin-bottom:1.5rem;padding-bottom:.75rem;border-bottom:1px solid #2A3854;">
          About This Video
        </h2>
        {% if video.description %}
        <div class="video-description">
          {{ video.description|clean_video_description|linebreaks }}
        </div>
        {% else %}
        <p class="text-muted">No description available.</p>
        {% endif %}
      </div>

      <div class="col-lg-4">
        <div class="video-cta-card">
          <h5 style="color:#fff;margin-bottom:1.25rem;font-size:1.1rem;">
            <i class="bi bi-lightning-charge-fill me-2" style="color:var(--accent);"></i>Interested? Take Action
          </h5>
          <a href="https://wa.me/{{ site.whatsapp_number|default:WHATSAPP_NUMBER }}?text=Hi%2C%20I%20saw%20your%20video%20%22{{ video.title|urlencode }}%22%20and%20I%27m%20interested.%20Please%20share%20more%20details."
             target="_blank"
             class="btn w-100 mb-3 d-flex align-items-center justify-content-center gap-2"
             style="background:#25d366;color:#fff;font-weight:700;border:none;padding:.85rem;border-radius:8px;">
            <i class="bi bi-whatsapp" style="font-size:1.2rem;"></i>WhatsApp Us
          </a>
          <a href="tel:{{ site.phone|default:CONTACT_PHONE }}"
             class="btn btn-outline-light w-100 mb-3 d-flex align-items-center justify-content-center gap-2"
             style="padding:.85rem;border-radius:8px;">
            <i class="bi bi-telephone-fill"></i>{{ site.phone|default:CONTACT_PHONE }}
          </a>
          <a href="mailto:{{ site.email|default:CONTACT_EMAIL }}?subject=Enquiry%3A%20{{ video.title|urlencode }}"
             class="btn btn-outline-light w-100 d-flex align-items-center justify-content-center gap-2"
             style="padding:.85rem;border-radius:8px;">
            <i class="bi bi-envelope-fill"></i>Send Email
          </a>
          {% if site.address %}
          <div class="mt-4 pt-3" style="border-top:1px solid rgba(255,255,255,.1);">
            <p class="small mb-1" style="color:#6c757d;"><i class="bi bi-geo-alt-fill me-1"></i>Office</p>
            <p class="small mb-0" style="color:#B8C5D6;line-height:1.5;">{{ site.address }}</p>
          </div>
          {% endif %}
          <div class="mt-4 pt-3" style="border-top:1px solid rgba(255,255,255,.1);">
            <a href="{% url 'videos:list' %}?category={{ video.category }}" class="small" style="color:var(--primary);">
              <i class="bi bi-collection-play me-1"></i>More {{ video.get_category_display }}
            </a>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>

{% endif %}{# end orientation check #}

{# ================================================================ #}
{#  FEATURED PROPERTIES (both orientations)                          #}
{# ================================================================ #}
{% if video.related_properties.exists %}
<section class="featured-properties-section">
  <div class="container">
    <h3 class="section-heading">Available Plots Featured in This Video</h3>
    <p class="text-muted mb-4">Click any listing to see full details and make an inquiry.</p>
    <div class="row g-4 reveal-stagger">
      {% for property in video.related_properties.all|slice:":6" %}
      <div class="col-md-6 col-lg-4">{% include 'partials/property_card.html' %}</div>
      {% endfor %}
    </div>
    {% if video.related_properties.count > 6 %}
    <div class="text-center mt-4">
      <a href="{% url 'properties:list' %}" class="btn btn-outline-primary">
        View All {{ video.related_properties.count }} Properties
      </a>
    </div>
    {% endif %}
  </div>
</section>
{% endif %}

{# ================================================================ #}
{#  CTA BANNER (both orientations)                                   #}
{# ================================================================ #}
<div class="video-cta-banner">
  <div class="container">
    <h2 style="font-size:clamp(1.5rem,3.5vw,2.4rem);margin-bottom:.75rem;color:#fff;">
      Ready to Secure Your Plot?
    </h2>
    <p style="opacity:.85;margin-bottom:2rem;font-size:1.05rem;color:#B8C5D6;">
      Limited plots available at pre-sale prices. Speak to our team today.
    </p>
    <div class="d-flex justify-content-center gap-3 flex-wrap">
      <a href="https://wa.me/{{ site.whatsapp_number|default:WHATSAPP_NUMBER }}"
         target="_blank"
         class="btn btn-lg d-inline-flex align-items-center gap-2"
         style="background:#25d366;color:#fff;font-weight:700;border:none;padding:.85rem 2rem;">
        <i class="bi bi-whatsapp"></i>WhatsApp Us
      </a>
      <a href="tel:{{ site.phone|default:CONTACT_PHONE }}"
         class="btn btn-outline-light btn-lg d-inline-flex align-items-center gap-2"
         style="padding:.85rem 2rem;">
        <i class="bi bi-telephone-fill"></i>{{ site.phone|default:CONTACT_PHONE }}
      </a>
    </div>
  </div>
</div>

{# ================================================================ #}
{#  MORE VIDEOS (both orientations)                                  #}
{# ================================================================ #}
{% if related %}
<section style="padding:4rem 0;background:#0F1B2D;">
  <div class="container">
    <div class="section-header mb-4">
      <h2 class="section-title" style="font-size:clamp(1.4rem,2.5vw,2rem);">More from TDK Homes</h2>
    </div>
    <div class="row g-4">
      {% for v in related %}
      <div class="col-md-4">
        <a href="{{ v.get_absolute_url }}" class="video-card">
          {% if v.thumbnail %}<img src="{{ v.thumbnail.url }}" alt="{{ v.title }}">
          {% else %}<div class="video-placeholder"><i class="bi bi-play-circle"></i></div>{% endif %}
          <div class="video-overlay"><i class="bi bi-play-fill"></i></div>
          <div class="video-info">
            <h6>{{ v.title }}</h6>
            <div class="d-flex align-items-center gap-2 mt-1">
              {% if v.duration %}<small>{{ v.duration }}</small>{% endif %}
              <span class="badge" style="font-size:.7rem;background:rgba(62,63,153,.75);color:#fff;">{{ v.get_category_display }}</span>
            </div>
          </div>
        </a>
      </div>
      {% endfor %}
    </div>
  </div>
</section>
{% endif %}

{% endblock %}