{% extends "base.html" %}
{% block title %}{{ settings.site_name }} | Home{% endblock %}

{% block content %}

<!-- HERO -->
{% set bg_video = (settings.home_background_video_path and url_for('static', filename=settings.home_background_video_path)) or settings.home_background_video_url %}
<section class="hero"
  {% if not bg_video and settings.home_background_path %}
  style="background-image: linear-gradient(120deg, rgba(11,37,69,.88), rgba(11,37,69,.55)), url('{{ url_for('static', filename=settings.home_background_path) }}');"
  {% endif %}>
  {% if bg_video %}
    {% set vinfo = bg_video | video_embed %}
    <div class="hero-video-wrap">
      {% if vinfo.kind == 'direct' %}
        <video autoplay muted loop playsinline>
          <source src="{{ vinfo.embed_src }}">
        </video>
      {% else %}
        <iframe src="{{ vinfo.embed_src }}" allow="autoplay; encrypted-media" frameborder="0"></iframe>
      {% endif %}
      <div class="hero-video-overlay"></div>
    </div>
  {% endif %}
  <div class="container hero-inner">
    <div class="hero-text">
      <p class="eyebrow">Advocates &amp; Legal Consultants</p>
      <h1>{{ settings.home_headline }}</h1>
      <p class="hero-desc">{{ settings.home_description }}</p>
      <a href="{{ url_for('main.connect') }}" class="btn btn-primary">Connect Us</a>
    </div>
    <div class="hero-photo">
      {% if settings.home_photo_path %}
        <img src="{{ url_for('static', filename=settings.home_photo_path) }}" alt="Pashupati Legal Services">
      {% else %}
        <div class="hero-photo-placeholder">Photo</div>
      {% endif %}
    </div>
  </div>
</section>

<!-- AREAS OF PRACTICE -->
<section class="section practice-section">
  <div class="container">
    <div class="practice-header">
      <div>
        <p class="eyebrow">What We Do</p>
        <h2 class="section-title">Areas of Practice</h2>
      </div>
      <div class="slider-controls">
        <button class="slider-btn prev-btn" id="practice-prev" aria-label="Scroll left">
          <svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
        </button>
        <button class="slider-btn next-btn" id="practice-next" aria-label="Scroll right">
          <svg viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
        </button>
      </div>
    </div>

    <div class="practice-slider-wrapper">
      <div class="practice-slider" id="practice-slider">
        {% for area in practice_areas %}
        <div class="practice-card">
          <div class="practice-card-image">
            {% if area.image_path %}
              <img src="{{ url_for('static', filename=area.image_path) }}" alt="{{ area.title }}">
            {% else %}
              <div class="practice-image-placeholder">
                <svg viewBox="0 0 24 24"><path d="M12 2 3 6v2h18V6l-9-4zM5 10v8H3v2h18v-2h-2v-8h-2v8h-3v-8h-2v8H9v-8H7v8H5v-8z"/></svg>
              </div>
            {% endif %}
          </div>
          <div class="practice-card-content">
            <h3>{{ area.title }}</h3>
            <p>{{ area.description }}</p>
            <a href="{{ url_for('main.connect') }}" class="card-link">Consult Advocates &rarr;</a>
          </div>
        </div>
        {% else %}
        <!-- Default sample practice area cards -->
        <div class="practice-card">
          <div class="practice-card-image">
            <div class="practice-image-placeholder">
              <svg viewBox="0 0 24 24"><path d="M12 2 3 6v2h18V6l-9-4zM5 10v8H3v2h18v-2h-2v-8h-2v8h-3v-8h-2v8H9v-8H7v8H5v-8z"/></svg>
            </div>
          </div>
          <div class="practice-card-content">
            <h3>Industrial Case</h3>
            <p>Guidance on labor, factory, employment contracts and industrial-relations disputes.</p>
            <a href="{{ url_for('main.connect') }}" class="card-link">Consult Advocates &rarr;</a>
          </div>
        </div>

        <div class="practice-card">
          <div class="practice-card-image">
            <div class="practice-image-placeholder">
              <svg viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
            </div>
          </div>
          <div class="practice-card-content">
            <h3>Divorce &amp; Family Case</h3>
            <p>Compassionate, discreet handling of family, alimony, custody and divorce legal matters.</p>
            <a href="{{ url_for('main.connect') }}" class="card-link">Consult Advocates &rarr;</a>
          </div>
        </div>

        <div class="practice-card">
          <div class="practice-card-image">
            <div class="practice-image-placeholder">
              <svg viewBox="0 0 24 24"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-5.45 9-12V5l-9-4z"/></svg>
            </div>
          </div>
          <div class="practice-card-content">
            <h3>Criminal &amp; Defense Case</h3>
            <p>Rigorous criminal defense in high-stakes litigation, assault and serious defense cases.</p>
            <a href="{{ url_for('main.connect') }}" class="card-link">Consult Advocates &rarr;</a>
          </div>
        </div>

        <div class="practice-card">
          <div class="practice-card-image">
            <div class="practice-image-placeholder">
              <svg viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
            </div>
          </div>
          <div class="practice-card-content">
            <h3>Property &amp; Land Case</h3>
            <p>Land ownership, tenancy, real-estate title disputes and property inheritance resolution.</p>
            <a href="{{ url_for('main.connect') }}" class="card-link">Consult Advocates &rarr;</a>
          </div>
        </div>

        <div class="practice-card">
          <div class="practice-card-image">
            <div class="practice-image-placeholder">
              <svg viewBox="0 0 24 24"><path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10z"/></svg>
            </div>
          </div>
          <div class="practice-card-content">
            <h3>Corporate &amp; Commercial</h3>
            <p>Company formation, tax compliance, cross-border commercial litigation and contract advisory.</p>
            <a href="{{ url_for('main.connect') }}" class="card-link">Consult Advocates &rarr;</a>
          </div>
        </div>

        <div class="practice-card">
          <div class="practice-card-image">
            <div class="practice-image-placeholder">
              <svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
            </div>
          </div>
          <div class="practice-card-content">
            <h3>Civil Litigation</h3>
            <p>Contractual breaches, tort claims, recovery suits and general civil court litigation support.</p>
            <a href="{{ url_for('main.connect') }}" class="card-link">Consult Advocates &rarr;</a>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
</section>

<!-- TRUSTED PARTNERS -->
<section class="section partners-section">
  <div class="container">
    <div class="partners-header">
      <div>
        <p class="eyebrow">Who We Work With</p>
        <h2 class="section-title">Trusted Partners</h2>
      </div>
      <div class="slider-controls">
        <button class="slider-btn prev-btn" id="partners-prev" aria-label="Scroll left">
          <svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
        </button>
        <button class="slider-btn next-btn" id="partners-next" aria-label="Scroll right">
          <svg viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
        </button>
      </div>
    </div>

    <div class="partners-slider-wrapper">
      <div class="partners-slider" id="partners-slider">
        {% for p in partners %}
        <div class="partner-logo-card">
          <img src="{{ url_for('static', filename=p.logo_path) }}" alt="{{ p.name }}">
        </div>
        {% else %}
        <!-- Default sample partner cards -->
        <div class="partner-logo-card">
          <div class="partner-badge">
            <svg viewBox="0 0 24 24"><path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10z"/></svg>
            <span>Partner 1</span>
          </div>
        </div>
        <div class="partner-logo-card">
          <div class="partner-badge">
            <svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
            <span>Partner 2</span>
          </div>
        </div>
        <div class="partner-logo-card">
          <div class="partner-badge">
            <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
            <span>Partner 3</span>
          </div>
        </div>
        <div class="partner-logo-card">
          <div class="partner-badge">
            <svg viewBox="0 0 24 24"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-5.45 9-12V5l-9-4z"/></svg>
            <span>Partner 4</span>
          </div>
        </div>
        <div class="partner-logo-card">
          <div class="partner-badge">
            <svg viewBox="0 0 24 24"><path d="M12 2 3 6v2h18V6l-9-4zM5 10v8H3v2h18v-2h-2v-8h-2v8h-3v-8h-2v8H9v-8H7v8H5v-8z"/></svg>
            <span>Partner 5</span>
          </div>
        </div>
        <div class="partner-logo-card">
          <div class="partner-badge">
            <svg viewBox="0 0 24 24"><path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z"/></svg>
            <span>Partner 6</span>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
</section>

<!-- CONTACT FORM -->
<section class="section contact-section" id="contact">
  <div class="container contact-grid">
    <div class="contact-info">
      <p class="eyebrow">Get In Touch</p>
      <h2 class="section-title">Send Us a Message</h2>
      <p>Have a legal question or need representation? Reach out and our team will respond promptly.</p>
      <ul class="contact-meta">
        <li>
          <div class="meta-icon"><svg viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg></div>
          <div class="meta-text"><strong>Address</strong><span>{{ settings.address }}</span></div>
        </li>
        <li>
          <div class="meta-icon"><svg viewBox="0 0 24 24"><path d="M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.5.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.9 21 3 13.1 3 3.9c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.5.1.3 0 .7-.2 1L6.6 10.8z"/></svg></div>
          <div class="meta-text"><strong>Phone</strong><span><a href="tel:{{ settings.phone }}">{{ settings.phone }}</a></span></div>
        </li>
        <li>
          <div class="meta-icon"><svg viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg></div>
          <div class="meta-text"><strong>Email</strong><span><a href="mailto:{{ settings.email }}">{{ settings.email }}</a></span></div>
        </li>
      </ul>
    </div>
    <form class="contact-form connect-form-card" method="POST" action="{{ url_for('main.contact_home') }}">
      <div class="form-row">
        <div class="form-group">
          <label>Your Name <span class="required">*</span></label>
          <input type="text" name="name" placeholder="John Doe" required>
        </div>
        <div class="form-group">
          <label>Your Email <span class="required">*</span></label>
          <input type="email" name="email" placeholder="john@example.com" required>
        </div>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label>Phone Number</label>
          <input type="tel" name="phone" placeholder="+977-9800000000">
        </div>
        <div class="form-group">
          <label>Subject</label>
          <input type="text" name="subject" placeholder="Subject">
        </div>
      </div>
      <div class="form-group">
        <label>Your Message <span class="required">*</span></label>
        <textarea name="message" rows="5" placeholder="Your message here..." required></textarea>
      </div>
      <button type="submit" class="btn btn-primary submit-btn">
        <span>Send Message</span>
        <svg viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
      </button>
    </form>
  </div>
</section>

{% endblock %}