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

{% block content %}

{% set connect_header_img = (settings.connect_header_image_path and url_for('static', filename=settings.connect_header_image_path)) or settings.connect_header_image_url %}
<section class="page-hero {{ 'has-image' if connect_header_img }}" {% if connect_header_img %}style="background-image:url('{{ connect_header_img }}');"{% endif %}>
  <div class="container">
    <p class="eyebrow">Get In Touch</p>
    <h1>Connect With Us</h1>
    <p class="page-hero-sub">Our team of experienced advocates is ready to assist you. Reach out today for confidential legal advice.</p>
  </div>
</section>

<section class="section connect-section">
  <div class="container">
    
    <div class="connect-cards-grid">
      <div class="connect-card">
        <div class="connect-card-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="connect-card-body">
          <h3>Our Office</h3>
          <p>{{ settings.address }}</p>
        </div>
      </div>

      <div class="connect-card">
        <div class="connect-card-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="connect-card-body">
          <h3>Call Us</h3>
          <p><a href="tel:{{ settings.phone }}">{{ settings.phone }}</a></p>
        </div>
      </div>

      <div class="connect-card">
        <div class="connect-card-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="connect-card-body">
          <h3>Email Us</h3>
          <p><a href="mailto:{{ settings.email }}">{{ settings.email }}</a></p>
        </div>
      </div>

      <div class="connect-card">
        <div class="connect-card-icon">
          <svg viewBox="0 0 24 24"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg>
        </div>
        <div class="connect-card-body">
          <h3>Office Hours</h3>
          <p>{{ settings.office_hours }}</p>
        </div>
      </div>
    </div>

    <div class="connect-grid main-connect-wrap">

      <div class="connect-left-col">
        <div class="map-card">
          <div class="map-header">
            <h3>Find Us on Map</h3>
          </div>
          <div class="map-embed">
            <iframe
              src="{{ settings.map_embed_url or 'https://www.google.com/maps?q=Kathmandu,Nepal&output=embed' }}"
              width="100%" height="320" style="border:0;" allowfullscreen="" loading="lazy">
            </iframe>
          </div>
        </div>

        <div class="social-connect-box">
          <h3>Connect via Social Media</h3>
          <div class="connect-socials">
            {% if settings.facebook_url %}
            <a href="{{ settings.facebook_url }}" target="_blank" rel="noopener" class="social-btn fb-btn">
              <svg viewBox="0 0 24 24"><path d="M22 12a10 10 0 1 0-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.4h-1.2c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.4v7A10 10 0 0 0 22 12z"/></svg>
              <span>Facebook</span>
            </a>
            {% endif %}
            {% if settings.instagram_url %}
            <a href="{{ settings.instagram_url }}" target="_blank" rel="noopener" class="social-btn insta-btn">
              <svg viewBox="0 0 24 24"><path d="M12 2c2.7 0 3.1 0 4.1.1 1.1 0 1.8.2 2.5.5.7.3 1.2.6 1.7 1.1.5.5.9 1 1.1 1.7.3.7.4 1.4.5 2.5.1 1 .1 1.4.1 4.1s0 3.1-.1 4.1c0 1.1-.2 1.8-.5 2.5-.3.7-.6 1.2-1.1 1.7-.5.5-1 .9-1.7 1.1-.7.3-1.4.4-2.5.5-1 .1-1.4.1-4.1.1s-3.1 0-4.1-.1c-1.1 0-1.8-.2-2.5-.5-.7-.3-1.2-.6-1.7-1.1-.5-.5-.9-1-1.1-1.7-.3-.7-.4-1.4-.5-2.5C2 15.1 2 14.7 2 12s0-3.1.1-4.1c0-1.1.2-1.8.5-2.5.3-.7.6-1.2 1.1-1.7.5-.5 1-.9 1.7-1.1.7-.3 1.4-.4 2.5-.5C8.9 2 9.3 2 12 2zm0 1.8c-2.6 0-3 0-4 .1-.9 0-1.4.2-1.7.3-.4.2-.7.3-1 .6-.3.3-.5.6-.6 1-.1.3-.3.8-.3 1.7-.1 1-.1 1.4-.1 4s0 3 .1 4c0 .9.2 1.4.3 1.7.2.4.3.7.6 1 .3.3.6.5 1 .6.3.1.8.3 1.7.3 1 .1 1.4.1 4 .1s3 0 4-.1c.9 0 1.4-.2 1.7-.3.4-.2.7-.3 1-.6.3-.3.5-.6.6-1 .1-.3.3-.8.3-1.7.1-1 .1-1.4.1-4s0-3-.1-4c0-.9-.2-1.4-.3-1.7-.2-.4-.3-.7-.6-1-.3-.3-.6-.5-1-.6-.3-.1-.8-.3-1.7-.3-1-.1-1.4-.1-4-.1zM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 1.8a3.2 3.2 0 1 0 0 6.4 3.2 3.2 0 0 0 0-6.4zm5.2-2.1a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4z"/></svg>
              <span>Instagram</span>
            </a>
            {% endif %}
          </div>
        </div>
      </div>

      <div class="connect-form-card">
        <form class="contact-form connect-form" method="POST" action="{{ url_for('main.connect') }}">
          <div class="form-header">
            <h2 class="section-title">Send a Direct Message</h2>
            <p>Fill in your details below and our legal experts will get back to you promptly.</p>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label>Full Name <span class="required">*</span></label>
              <input type="text" name="name" placeholder="John Doe" required>
            </div>
            <div class="form-group">
              <label>Email Address <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="Legal Consultation Inquiry">
            </div>
          </div>
          <div class="form-group">
            <label>Your Message <span class="required">*</span></label>
            <textarea name="message" rows="5" placeholder="Please describe your legal case or question..." 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>

    </div>

  </div>
</section>

{% endblock %}