---
### ALL PAGES ###
layout: themes/[ site.theme.id ]/frontend/core/base

### PAGE CONFIG ###
# News voice throughout: a theme's frontmatter defaults are part of its
# identity (see docs/themes.md "Frontmatter defaults").
# Hero Section
hero:
  headline: "Contact the"
  headline_accent: "desk"
  subheadline: "Questions, tips, corrections — the {{ site.brand.name }} newsroom reads everything"

# Contact Methods Section
contact_methods:
  - title: "Email the newsroom"
    description: "Get a reply within 24 hours"
    icon: "envelope"
    value: "Email us"
    link: "#form"
  - title: "Send a tip"
    description: "Confidential — straight to our reporters"
    icon: "user-secret"
    value: "Share a tip"
    link: "#form"

# Contact Form Section
contact_form:
  superheadline:
    icon: "envelope"
    text: "The mailbag"
  headline: "Send us a"
  headline_accent: "message"
  subheadline: "Fill out the form below and we'll get back to you within 24 hours."

# Stats Section
stats:
  items:
    - number: "<15m"
      label: "Response time"
      icon: "clock"
      color: "primary"
    - number: "24/7"
      label: "Tips line"
      icon: "user-secret"
      color: "success"
    - number: "4.9"
      label: "Reader rating"
      icon: "star"
      color: "warning"
    - number: "50+"
      label: "Languages"
      icon: "globe"
      color: "info"

# Testimonials Section
testimonials:
  superheadline:
    icon: "megaphone"
    text: "From our readers"
  headline: "What our readers"
  headline_accent: "say"
  subheadline: "Hear from people who've written to the desk"
  items:
  - quote: "I flagged a typo at 7am and had a reply from an actual editor by 7:15."
    author: "Jessica Martinez"
    role: "Marketing Manager"
    company: "TechCorp"
    initial: "J"
  - quote: "Sent a tip on a Friday night. They ran the story — and protected the source."
    author: "David Thompson"
    role: "Product Designer"
    company: "StartupCo"
    initial: "D"
  - quote: "The rare publication that answers reader mail like it matters. Because to them it does."
    author: "Lisa Chen"
    role: "Developer"
    company: "InnovateLab"
    initial: "L"

# FAQs Section
faqs:
  superheadline:
    icon: "messages-question"
    text: "FAQs"
  headline: "Frequently asked"
  headline_accent: "questions"
  subheadline: "Everything you need to know about reaching the newsroom."
  items:
  - question: "How do I submit a news tip?"
    answer: "Use the form above and choose \"News tip\" as the subject — it routes straight to our reporters. We protect our sources and never publish identifying details without consent."
  - question: "How do I request a correction?"
    answer: "Choose \"Request a correction\" in the form and include a link to the story. We review every report, fix verified errors fast, and log them on our public corrections page."
  - question: "Can I republish your stories?"
    answer: "Often, yes! Choose \"Press & partnerships\" and tell us what you'd like to republish — we offer syndication arrangements for most of our reporting."
---

{% comment %}
  NEWSFLASH CONTACT
  Same data contract as the classy contact page, presented as "contact the
  desk": serif masthead opening, framed contact-method cards, the contact form
  (markup kept verbatim — FormManager wiring) inside a framed paper card,
  stroked-numeral support stats, and the FAQ accordion.
{% endcomment %}

<!-- Hero -->
<section class="pb-4">
  <div class="container text-center" data-lazy="@class animation-slide-up">
    <span class="kicker mb-3">Contact</span>
    <h1 class="display-4 my-3">
      {{ page.resolved.hero.headline }} <span class="text-accent">{{ page.resolved.hero.headline_accent }}</span>
    </h1>
    {% iftruthy page.resolved.hero.subheadline %}
      <p class="lead mb-0">{{ page.resolved.hero.subheadline }}</p>
    {% endiftruthy %}
  </div>
</section>

<!-- Contact Methods -->
<section class="pt-0">
  <div class="container">
    <div class="row g-4 justify-content-center">
      {% assign method_count = page.resolved.contact_methods | size %}

      <!-- Determine column classes based on number of contact methods -->
      {% if method_count == 1 %}
        {% assign col_classes = "col-12 col-md-8 col-lg-6 col-xl-5" %}
      {% elsif method_count == 2 %}
        {% assign col_classes = "col-12 col-md-6 col-lg-6 col-xl-5" %}
      {% elsif method_count == 3 %}
        {% assign col_classes = "col-12 col-md-6 col-lg-4" %}
      {% elsif method_count == 4 %}
        {% assign col_classes = "col-12 col-md-6 col-lg-6 col-xl-3" %}
      {% elsif method_count == 5 %}
        {% assign col_classes = "col-12 col-md-6 col-lg-4" %}
      {% else %}
        <!-- Fallback for 6+ methods -->
        {% assign col_classes = "col-12 col-md-6 col-lg-4 col-xl-3" %}
      {% endif %}

      {% for method in page.resolved.contact_methods %}
        <div class="{{ col_classes }}">
          <div class="card h-100 text-center p-4" data-lazy="@class animation-slide-up">
            <span class="feature-icon d-inline-flex align-items-center justify-content-center rounded-circle text-bg-primary mb-3 mx-auto">
              {% uj_icon method.icon %}
            </span>
            <h3 class="h5 mb-1">{{ method.title }}</h3>
            <p class="text-body-secondary mb-3">{{ method.description }}</p>
            <div>
              <a href="{{ method.link }}" class="btn btn-outline-dark btn-sm">{{ method.value }}</a>
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
</section>

<!-- Contact Form -->
<section id="form" class="pt-0">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8">
        <div class="card shadow" data-lazy="@class animation-slide-up">
          <div class="card-body p-4 p-md-5">
            <div class="text-center mb-4">
              {% iftruthy page.resolved.contact_form.superheadline.text %}
                <span class="kicker mb-2">
                  {% iftruthy page.resolved.contact_form.superheadline.icon %}
                    {% uj_icon page.resolved.contact_form.superheadline.icon, "me-1" %}
                  {% endiftruthy %}
                  {{ page.resolved.contact_form.superheadline.text }}
                </span>
              {% endiftruthy %}
              <h2 class="h3 mb-2">
                {{ page.resolved.contact_form.headline }}
                {% iftruthy page.resolved.contact_form.headline_accent %}
                  <span class="text-accent">{{ page.resolved.contact_form.headline_accent }}</span>
                {% endiftruthy %}
              </h2>
              {% iftruthy page.resolved.contact_form.subheadline %}
                <p class="text-body-secondary">{{ page.resolved.contact_form.subheadline }}</p>
              {% endiftruthy %}
            </div>

            <form id="contact-form" autocomplete="on" onsubmit="return false">
              <div class="row g-3 mb-4">
                <div class="col-md-6">
                  <label for="first_name" class="form-label fw-semibold">First name <span class="text-danger">*</span></label>
                  <input type="text" class="form-control form-control-lg" id="first_name" name="first_name"
                    placeholder="Enter your first name"
                    autocomplete="given-name"
                    minlength="2"
                    maxlength="50"
                    required>
                  <div class="invalid-feedback"></div>
                </div>
                <div class="col-md-6">
                  <label for="last_name" class="form-label fw-semibold">Last name <span class="text-danger">*</span></label>
                  <input type="text" class="form-control form-control-lg" id="last_name" name="last_name"
                    placeholder="Enter your last name"
                    autocomplete="family-name"
                    minlength="2"
                    maxlength="50"
                    required>
                  <div class="invalid-feedback"></div>
                </div>
              </div>

              <!-- Honeypot field (bot detection) -->
              <div class="form-group mb-3" style="display: none;" aria-hidden="true">
                <input type="text" class="form-control" name="honey" tabindex="-1" autocomplete="off">
              </div>

              <!-- Hidden auth field (auto-populated via bindings) -->
              <input type="hidden" aria-hidden="true" name="uid" data-wm-bind="@value auth.user.uid">

              <div class="mb-4">
                <label for="email" class="form-label fw-semibold">Email address <span class="text-danger">*</span></label>
                <input type="email" class="form-control form-control-lg" id="email" name="email"
                  placeholder="Enter your email address"
                  autocomplete="email"
                  data-wm-bind="@value auth.user.email"
                  required>
                <div class="invalid-feedback"></div>
              </div>

              <div class="mb-4">
                <label for="company" class="form-label fw-semibold">Company</label>
                <input type="text" class="form-control form-control-lg" id="company" name="company"
                  placeholder="Enter your company name (optional)"
                  autocomplete="organization"
                  maxlength="100">
              </div>

              <div class="mb-4">
                <label for="subject" class="form-label fw-semibold">Subject <span class="text-danger">*</span></label>
                <select class="form-select form-select-lg" id="subject" name="subject" required>
                  <option value="">Choose a topic...</option>
                  <option value="general">General inquiry</option>
                  <option value="tip">News tip</option>
                  <option value="correction">Request a correction</option>
                  <option value="partnership">Press & partnerships</option>
                  <option value="billing">Membership & billing</option>
                  <option value="other">Other</option>
                </select>
                <div class="invalid-feedback"></div>
              </div>

              <div class="mb-4">
                <label for="message" class="form-label fw-semibold">Message <span class="text-danger">*</span></label>
                <textarea class="form-control form-control-lg" id="message" name="message" rows="3"
                  placeholder="Tell us how we can help you..."
                  minlength="10"
                  maxlength="5000"
                  required></textarea>
                <div class="invalid-feedback"></div>
              </div>

              <div class="d-grid gap-2 d-md-flex justify-content-md-between align-items-center">
                <button type="submit" class="btn btn-primary btn-lg px-5">
                  {% uj_icon "paper-plane", "me-2" %}
                  Send message
                </button>
                <a href="{{ site.url }}" class="btn btn-link">
                  {% uj_icon "arrow-left", "me-1" %}
                  Back to home
                </a>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Stats -->
<section class="pt-0">
  <div class="container">
    <div class="section-head" data-lazy="@class animation-slide-up">
      <h2>The support desk</h2>
      <span class="rule"></span>
    </div>
    <div class="row text-center g-4">
      {% for stat in page.resolved.stats.items %}
        <div class="col-lg-3 col-md-6" data-lazy="@class animation-slide-up">
          <div class="stat-num">{{ stat.number }}</div>
          <div class="fw-bold">{% uj_icon stat.icon, "me-2 text-primary" %}{{ stat.label }}</div>
        </div>
      {% endfor %}
    </div>
  </div>
</section>

<!-- FAQ -->
<section class="pt-0">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8">
        <div class="section-head" data-lazy="@class animation-slide-up">
          {% iftruthy page.resolved.faqs.superheadline.text %}
            <h2>{{ page.resolved.faqs.superheadline.text }}</h2>
          {% endiftruthy %}
          <span class="rule"></span>
        </div>
        <header class="mb-4" data-lazy="@class animation-slide-up">
          <h2 class="h1 mb-2">
            {{ page.resolved.faqs.headline }}
            {% iftruthy page.resolved.faqs.headline_accent %}
              <span class="text-accent">{{ page.resolved.faqs.headline_accent }}</span>
            {% endiftruthy %}
          </h2>
          {% iftruthy page.resolved.faqs.subheadline %}
            <p class="lead mb-0">{{ page.resolved.faqs.subheadline }}</p>
          {% endiftruthy %}
        </header>

        {% if page.resolved.faqs.items %}
          <div class="accordion" id="contactFaqAccordion">
            {% for faq in page.resolved.faqs.items %}
              <div class="accordion-item mb-3" data-lazy="@class animation-slide-up">
                <h2 class="accordion-header">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#contactFaq{{ forloop.index }}" aria-expanded="false" aria-controls="contactFaq{{ forloop.index }}">
                    <span class="fw-bold">{{ faq.question }}</span>
                  </button>
                </h2>
                <div id="contactFaq{{ forloop.index }}" class="accordion-collapse collapse" data-bs-parent="#contactFaqAccordion">
                  <div class="accordion-body">{{ faq.answer }}</div>
                </div>
              </div>
            {% endfor %}
          </div>
        {% endif %}
      </div>
    </div>
  </div>
</section>

{{ content | uj_content_format }}