Contact Desk & Study Session Inquiries

Inquire about 1-on-1 architecture workshops, validator setup clinics, custom team syllabi, or general research inquiries.

<div x-data="{
  formData: {
    name: '',
    email: '',
    sessionType: '',
    format: 'Virtual Interactive Session',
    message: ''
  },
  errors: {},
  isSubmitting: false,
  submitStatus: null,
  submitMessage: '',
  validate() {
    this.errors = {};
    if (!this.formData.name.trim()) {
      this.errors.name = 'Please provide your full name.';
    }
    if (!this.formData.email.trim()) {
      this.errors.email = 'Please provide your email address.';
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.formData.email)) {
      this.errors.email = 'Please provide a valid email address.';
    }
    if (!this.formData.message.trim() || this.formData.message.trim().length < 15) {
      this.errors.message = 'Please provide a brief message of at least 15 characters outlining your inquiry.';
    }
    return Object.keys(this.errors).length === 0;
  },
  async handleSubmit() {
    if (!this.validate()) return;
    this.isSubmitting = true;
    this.submitStatus = null;

    try {
      const res = await fetch('/api/mock.json', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(this.formData)
      });
      if (res.ok) {
        const data = await res.json();
        this.submitStatus = 'success';
        this.submitMessage = data.message || 'Your inquiry has been received. Our research desk will follow up within 24 business hours.';
        this.formData = { name: '', email: '', sessionType: '', format: 'Virtual Interactive Session', message: '' };
      } else {
        this.submitStatus = 'error';
        this.submitMessage = 'There was a problem submitting your inquiry. Please try again or reach out directly via email.';
      }
    } catch (err) {
      this.submitStatus = 'error';
      this.submitMessage = 'Network connection issue. Please verify your connection or email contact@appaxispoint.click directly.';
    } finally {
      this.isSubmitting = false;
    }
  }
}">

  <template x-if="submitStatus === 'success'">
    <div class="form-alert-success">
      <strong style="display: block; font-size: 1.1rem; margin-bottom: 0.35rem;">Inquiry Submitted Successfully</strong>
      <p x-text="submitMessage" style="margin-bottom: 0; font-size: 0.95rem;"></p>
    </div>
  </template>

  <template x-if="submitStatus === 'error'">
    <div class="form-alert-error">
      <strong style="display: block; font-size: 1.1rem; margin-bottom: 0.35rem;">Submission Notice</strong>
      <p x-text="submitMessage" style="margin-bottom: 0; font-size: 0.95rem;"></p>
    </div>
  </template>

  <form @submit.prevent="handleSubmit" novalidate>
    <div class="form-group">
      <label class="form-label" for="contact-name">Full Name *</label>
      <input type="text" id="contact-name" class="form-input" x-model="formData.name" placeholder="e.g. Alex Chen" :aria-invalid="errors.name ? 'true' : 'false'">
      <template x-if="errors.name">
        <div class="form-feedback-error" x-text="errors.name"></div>
      </template>
    </div>

    <div class="form-group">
      <label class="form-label" for="contact-email">Email Address *</label>
      <input type="email" id="contact-email" class="form-input" x-model="formData.email" placeholder="e.g. alex@company.com" :aria-invalid="errors.email ? 'true' : 'false'">
      <template x-if="errors.email">
        <div class="form-feedback-error" x-text="errors.email"></div>
      </template>
    </div>

    <div class="form-group">
      <label class="form-label" for="contact-session">Selected Study Track / Topic</label>
      <select id="contact-session" class="form-select" x-model="formData.sessionType">
        <option value="">-- Select a Session or Topic (Optional) --</option>
        <option value="Protocol Architecture Workshop">1-on-1 Protocol Architecture Workshop (4 hrs)</option>
        <option value="Validator Infrastructure Clinic">Validator Node Infrastructure & Telemetry Clinic (3 hrs)</option>
        <option value="Web3 Ecosystem Advisory">Web3 Ecosystem & Integration Advisory (2.5 hrs)</option>
        <option value="Wallet & Security Coaching">Wallet & Key Security Coaching (2 hrs)</option>
        <option value="Custom Team Syllabus">Custom Team Syllabus & Training Cohort</option>
        <option value="General Technical Inquiry">General Technical / Academic Inquiry</option>
      </select>
    </div>

    <div class="form-group">
      <label class="form-label" for="contact-format">Preferred Delivery Mode</label>
      <select id="contact-format" class="form-select" x-model="formData.format">
        <option value="Virtual Interactive Session">Virtual Interactive Session (Encrypted Video)</option>
        <option value="Bangkok Study Facility">In-Person at Bangkok Study Desk (Office 8, 24 Example Road)</option>
      </select>
    </div>

    <div class="form-group">
      <label class="form-label" for="contact-message">Technical Background & Inquiries *</label>
      <textarea id="contact-message" class="form-textarea" x-model="formData.message" placeholder="Please describe your current background, languages used, and specific questions or challenges you would like covered in the session." :aria-invalid="errors.message ? 'true' : 'false'"></textarea>
      <template x-if="errors.message">
        <div class="form-feedback-error" x-text="errors.message"></div>
      </template>
    </div>

    <button type="submit" class="btn btn-primary btn-lg" style="width: 100%;" :disabled="isSubmitting">
      <span x-show="!isSubmitting">Submit Session Inquiry</span>
      <span x-show="isSubmitting" style="display: none;">Sending Inquiry...</span>
    </button>
  </form>
</div>

<div class="card-glass" style="margin-bottom: 1.5rem; padding: 1.5rem;">
  <h3 style="font-size: 1.1rem; color: var(--accent-green); margin-bottom: 0.75rem;">Research Facility Address</h3>
  <p style="margin-bottom: 0; color: var(--text-secondary); line-height: 1.7;">
    <strong>Dime Starter Library Co., Ltd.</strong><br>
    Office 8, 24 Example Road, Bangkok 00000<br>
    Kingdom of Thailand
  </p>
</div>

<div class="card-glass" style="margin-bottom: 1.5rem; padding: 1.5rem;">
  <h3 style="font-size: 1.1rem; color: var(--accent-cyan); margin-bottom: 0.75rem;">Direct Telephone & Email</h3>
  <p style="margin-bottom: 0.5rem; color: var(--text-secondary);">
    <strong>Telephone:</strong> <span style="font-family: var(--font-mono);">+66 2 000 2180</span>
  </p>
  <p style="margin-bottom: 0; color: var(--text-secondary);">
    <strong>Email:</strong> <a href="mailto:contact@appaxispoint.click">contact@appaxispoint.click</a>
  </p>
</div>

<div class="card-glass" style="padding: 1.5rem;">
  <h3 style="font-size: 1.1rem; color: var(--text-primary); margin-bottom: 0.75rem;">Operating Commitments</h3>
  <ul style="color: var(--text-muted); font-size: 0.875rem; padding-left: 1.25rem; margin-bottom: 0; line-height: 1.6;">
    <li>24-hour response turnaround on business days.</li>
    <li>Strict confidentiality regarding proprietary architecture briefs.</li>
    <li>Objective educational guidance with zero promotional bias.</li>
  </ul>
</div>