<?php declare(strict_types=1);
$page_title       = 'Contact | Big Breath';
$page_description = 'Inquire about keynotes, corporate wellness programs, private sessions, retreats, or any Big Breath service. Every conversation starts here.';
$page_canonical   = 'https://bigbreath.co/contact/';
require __DIR__ . '/../components/_header.php';
?>

<section class="bb-section" style="padding-top:calc(var(--pad-section) + 4rem);">
  <div class="bb-container">
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--s-16);align-items:start;">

      <div class="bb-reveal">
        <span class="bb-label" style="margin-bottom:var(--s-6);">Contact</span>
        <h1 class="bb-display" style="margin-bottom:var(--s-8);">Every practice begins with a single breath. Every engagement begins with a conversation.</h1>
        <p class="bb-body" style="margin-bottom:var(--s-10);">Whether you are an individual seeking transformation or an organization ready to invest in human performance, reach out. Big Joe reviews every inquiry personally. Response time is typically two business days.</p>
        <hr class="bb-rule">
        <p style="font-size:var(--t-xs);letter-spacing:.15em;text-transform:uppercase;color:var(--bb-ink);margin-bottom:var(--s-2);">Email</p>
        <a href="mailto:hello@bigbreath.co" style="font-size:var(--t-lg);color:var(--bb-terracotta);font-weight:var(--w-light);">hello@bigbreath.co</a>
      </div>

      <div class="bb-reveal">
        <form action="/api/contact.php" method="POST" style="display:flex;flex-direction:column;gap:var(--s-8);">
          <div>
            <label style="font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--bb-ink);display:block;margin-bottom:var(--s-2);">Name</label>
            <input type="text" name="name" required autocomplete="name"
              style="width:100%;background:transparent;border:0;border-bottom:1px solid var(--bb-line);font-family:inherit;font-size:var(--t-base);color:var(--bb-charcoal);padding:var(--s-3) 0;outline:none;">
          </div>
          <div>
            <label style="font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--bb-ink);display:block;margin-bottom:var(--s-2);">Email</label>
            <input type="email" name="email" required autocomplete="email"
              style="width:100%;background:transparent;border:0;border-bottom:1px solid var(--bb-line);font-family:inherit;font-size:var(--t-base);color:var(--bb-charcoal);padding:var(--s-3) 0;outline:none;">
          </div>
          <div>
            <label style="font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--bb-ink);display:block;margin-bottom:var(--s-2);">Message</label>
            <textarea name="message" required rows="5"
              style="width:100%;background:transparent;border:0;border-bottom:1px solid var(--bb-line);font-family:inherit;font-size:var(--t-base);color:var(--bb-charcoal);padding:var(--s-3) 0;outline:none;resize:vertical;"></textarea>
          </div>
          <button type="submit" class="bb-btn" style="align-self:flex-start;">Send Inquiry</button>
        </form>
      </div>

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

<?php require __DIR__ . '/../components/_footer.php'; ?>
