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

{% block content %}

{% set about_header_img = (settings.about_header_image_path and url_for('static', filename=settings.about_header_image_path)) or settings.about_header_image_url %}
<section class="page-hero {{ 'has-image' if about_header_img }}" {% if about_header_img %}style="background-image:url('{{ about_header_img }}');"{% endif %}>
  <div class="container">
    <p class="eyebrow">About Us</p>
    <h1>Who We Are</h1>
  </div>
</section>

<section class="section about-section">
  <div class="container about-grid">
    <div class="about-photo">
      {% if settings.about_photo_path %}
        <img src="{{ url_for('static', filename=settings.about_photo_path) }}" alt="About Pashupati Legal Services">
      {% else %}
        <div class="hero-photo-placeholder">Photo</div>
      {% endif %}
    </div>
    <div class="about-text">
      <p class="eyebrow">Our Story</p>
      <h2 class="section-title">{{ settings.site_name }}</h2>
      <p>{{ settings.about_description }}</p>
    </div>
  </div>
</section>

{% set md_photo = (settings.md_photo_path and url_for('static', filename=settings.md_photo_path)) or settings.md_photo_url %}
{% if settings.md_message %}
<section class="section md-section">
  <div class="container">
    <div class="md-grid">
      <div class="md-photo">
        {% if md_photo %}
          <img src="{{ md_photo }}" alt="{{ settings.md_name }}">
        {% else %}
          <div class="hero-photo-placeholder">Photo</div>
        {% endif %}
      </div>
      <div class="md-text">
        <p class="eyebrow">A Message From Our Leadership</p>
        <div class="md-quote-mark">&ldquo;</div>
        <p class="md-message">{{ settings.md_message }}</p>
        {% if settings.md_name %}<p class="md-name">{{ settings.md_name }}</p>{% endif %}
        {% if settings.md_title %}<p class="md-title">{{ settings.md_title }}</p>{% endif %}
      </div>
    </div>
  </div>
</section>
{% endif %}

<section class="section values-section">
  <div class="container">
    <p class="eyebrow center">What Drives Us</p>
    <h2 class="section-title center">Our Values</h2>
    <div class="values-grid">
      {% for v in values %}
      <div class="value-card">
        <div class="value-icon">
          <svg viewBox="0 0 24 24"><path d="M12 2 3 7v6c0 5.2 3.8 9.8 9 11 5.2-1.2 9-5.8 9-11V7l-9-5z"/></svg>
        </div>
        <h3>{{ v.title }}</h3>
        <p>{{ v.description }}</p>
      </div>
      {% else %}
      <div class="value-card"><h3>Integrity</h3><p>We uphold the highest ethical standards in every case we handle.</p></div>
      <div class="value-card"><h3>Excellence</h3><p>We pursue thorough, well-researched and effective legal strategies.</p></div>
      <div class="value-card"><h3>Commitment</h3><p>We stand by our clients from consultation through resolution.</p></div>
      {% endfor %}
    </div>
  </div>
</section>

{% endblock %}