<%- include('../layouts/header') %>

<div class="container" style="padding-top: 4rem; padding-bottom: 6rem; max-width: 900px;">
  <span class="subheading">Personal Concierge</span>
  <h1 class="heading-xl" style="margin-top: 0.5rem; margin-bottom: 1.5rem;">Connect with Our Atelier</h1>
  <p style="color: var(--text-muted); font-size: 1.15rem; line-height: 1.7; margin-bottom: 3rem;">
    Whether you are seeking tailoring advice for custom measurements, requesting bulk fabric swatches, or inquiring about an active order, our atelier consultants are ready to assist.
  </p>

  <div style="display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; background: #FFF; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 3rem; box-shadow: var(--shadow-sm);">
    <div>
      <h2 class="heading-md" style="margin-bottom: 1.5rem;">Direct Channels</h2>
      
      <div style="display: flex; flex-direction: column; gap: 1.5rem;">
        <div style="display: flex; gap: 1rem; align-items: flex-start;">
          <div style="font-size: 1.5rem;">💬</div>
          <div>
            <div style="font-weight: 700; text-transform: uppercase; font-size: 0.82rem; letter-spacing: 0.05em; color: var(--accent-gold);">WhatsApp Concierge</div>
            <div style="margin-top: 0.25rem; font-size: 1rem;"><%= (settings && settings.contact_phone) ? settings.contact_phone : '+91 98765 43210' %></div>
            <p style="font-size: 0.85rem; color: var(--text-muted); margin-top: 0.25rem;">Fastest response for sizing, swatch photos, and order status.</p>
            <a href="https://wa.me/<%= (settings && settings.whatsapp_number) ? settings.whatsapp_number : '919876543210' %>?text=Hello%20Atelier%20Nina%20Weaves,%20I%20have%20an%20inquiry." target="_blank" class="btn btn-whatsapp btn-sm" style="margin-top: 0.75rem;">
              Chat on WhatsApp
            </a>
          </div>
        </div>

        <div style="display: flex; gap: 1rem; align-items: flex-start;">
          <div style="font-size: 1.5rem;">✉️</div>
          <div>
            <div style="font-weight: 700; text-transform: uppercase; font-size: 0.82rem; letter-spacing: 0.05em; color: var(--accent-gold);">Email Correspondence</div>
            <div style="margin-top: 0.25rem; font-size: 1rem;"><a href="mailto:<%= (settings && settings.contact_email) ? settings.contact_email : 'contact@nestbeans.com' %>"><%= (settings && settings.contact_email) ? settings.contact_email : 'contact@nestbeans.com' %></a></div>
            <p style="font-size: 0.85rem; color: var(--text-muted); margin-top: 0.25rem;">For corporate commissions, bespoke studio visits, and press inquiries.</p>
          </div>
        </div>

        <div style="display: flex; gap: 1rem; align-items: flex-start;">
          <div style="font-size: 1.5rem;">📍</div>
          <div>
            <div style="font-weight: 700; text-transform: uppercase; font-size: 0.82rem; letter-spacing: 0.05em; color: var(--accent-gold);">Atelier Location</div>
            <div style="margin-top: 0.25rem; font-size: 0.95rem; line-height: 1.6; color: var(--text-main);">
              <%= (settings && settings.contact_address) ? settings.contact_address : 'Nestbeans Atelier, Heritage Quarter, Mumbai 400001, India' %>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div style="background: var(--bg-secondary); border-radius: var(--radius-sm); padding: 2rem; border: 1px solid var(--border-subtle); display: flex; flex-direction: column; justify-content: center;">
      <h3 style="font-size: 1.25rem; margin-bottom: 1rem;">Consultation Hours</h3>
      <p style="font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 1rem;">
        Monday – Saturday<br>
        <strong>10:00 AM – 7:00 PM IST</strong>
      </p>
      <p style="font-size: 0.85rem; color: var(--text-muted); line-height: 1.5;">
        Inquiries received outside atelier hours will be personally attended to on the following business morning.
      </p>
    </div>
  </div>
</div>

<%- include('../layouts/footer') %>
