@extends('layouts.app')

@section('title', 'Contact Us | Data Intellec')

@section('description', 'Talk to Data Intellec about a custom BI or AI build, Insight 360X, DecisionDesk AI, or a white-label partnership. One inbox, real people, a reply within one business day.')

@push('styles')
<link rel="stylesheet" href="/src/stylesheet/contact.css" />
@endpush

@section('content')
      <!-- ===================== CONTACT (mad-lib intro) ================== -->
      <section class="contact-hero-form">
        <div class="site_shell px-5 md:px-12 lg:px-16">
          <p class="cf-eyebrow"><span></span>Contact</p>

          <!-- TODO: wire action= to the real handler. Inert right now,
               so nothing is submitted anywhere. -->
          <form
            class="cf-form"
            action="{{ route('leads.store') }}"
            method="post"
            data-contact-form
            novalidate
          >
            @csrf
            <input type="hidden" name="source_page" value="contact" />
            <input type="hidden" name="source_form" value="contact-primary" />
            <input type="hidden" name="return_anchor" value="top" />
            <!-- Step 1 -->
            <div class="cf-step" data-step="1">
              <p class="cf-sentence">
                Hello, my name is
                <span class="cf-inline-field">
                  <input
                    type="text"
                    id="cf-name"
                    name="name"
                    autocomplete="name"
                    placeholder="Name*"
                    required
                  />
                </span>
                <span class="cf-inline-clause">
                  from
                  <span class="cf-inline-field cf-inline-field--muted">
                    <input
                      type="text"
                      id="cf-company"
                      name="company"
                      autocomplete="organization"
                      placeholder="Company / Website"
                    />
                  </span>
                </span>
              </p>

              <div class="cf-block">
                <p class="cf-label" id="cf-interest-label">
                  I&rsquo;m in need of <span class="cf-required">*</span>
                </p>

                <div
                  class="cf-options"
                  role="radiogroup"
                  aria-labelledby="cf-interest-label"
                >
                  <button
                    type="button"
                    class="cf-option"
                    role="radio"
                    aria-checked="false"
                    data-value="real-time-bi"
                  >
                    <span class="cf-option-check" aria-hidden="true">
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M5 13l4 4L19 7" />
                      </svg>
                    </span>
                    <span class="cf-option-title">Real-time BI</span>
                    <span class="cf-option-sub">Live dashboards, one number</span>
                  </button>

                  <button
                    type="button"
                    class="cf-option"
                    role="radio"
                    aria-checked="false"
                    data-value="ai-over-bi"
                  >
                    <span class="cf-option-check" aria-hidden="true">
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M5 13l4 4L19 7" />
                      </svg>
                    </span>
                    <span class="cf-option-title">AI over BI</span>
                    <span class="cf-option-sub">Explained variances, not raw charts</span>
                  </button>

                  <button
                    type="button"
                    class="cf-option"
                    role="radio"
                    aria-checked="false"
                    data-value="ai-agents"
                  >
                    <span class="cf-option-check" aria-hidden="true">
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M5 13l4 4L19 7" />
                      </svg>
                    </span>
                    <span class="cf-option-title">AI Agents</span>
                    <span class="cf-option-sub">Alerts and routine decisions</span>
                  </button>

                  <button
                    type="button"
                    class="cf-option"
                    role="radio"
                    aria-checked="false"
                    data-value="insight-360x"
                  >
                    <span class="cf-option-check" aria-hidden="true">
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M5 13l4 4L19 7" />
                      </svg>
                    </span>
                    <span class="cf-option-title">Insight 360X</span>
                    <span class="cf-option-sub">Unified Shopify analytics</span>
                  </button>

                  <button
                    type="button"
                    class="cf-option"
                    role="radio"
                    aria-checked="false"
                    data-value="decisiondesk-ai"
                  >
                    <span class="cf-option-check" aria-hidden="true">
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M5 13l4 4L19 7" />
                      </svg>
                    </span>
                    <span class="cf-option-title">DecisionDesk AI</span>
                    <span class="cf-option-sub">Ask about our other product</span>
                  </button>

                  <button
                    type="button"
                    class="cf-option"
                    role="radio"
                    aria-checked="false"
                    data-value="white-label"
                  >
                    <span class="cf-option-check" aria-hidden="true">
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M5 13l4 4L19 7" />
                      </svg>
                    </span>
                    <span class="cf-option-title">White-label partnership</span>
                    <span class="cf-option-sub">For IT and agency partners</span>
                  </button>
                </div>

                <input type="hidden" id="cf-interest" name="interest" required />
              </div>

              <div class="cf-block">
                <label class="cf-label" for="cf-description">
                  Here&rsquo;s what the project is about&hellip;
                </label>
                <textarea
                  id="cf-description"
                  name="description"
                  class="cf-textarea"
                  placeholder="Short description of the project"
                  rows="1"
                ></textarea>
              </div>

              <button type="button" class="cf-next" data-step-next>
                Next
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                  <path d="M5 12h14" />
                  <path d="m12 5 7 7-7 7" />
                </svg>
              </button>
            </div>

            <!-- Step 2 -->
            <div class="cf-step" data-step="2" hidden>
              <p class="cf-sentence">
                <span class="cf-inline-clause">
                  You can reach me at
                  <span class="cf-inline-field">
                    <input
                      type="email"
                      id="cf-email"
                      name="email"
                      autocomplete="email"
                      placeholder="you@company.com"
                      required
                    />
                  </span>
                </span>
              </p>

              <p class="cf-sentence cf-sentence--secondary">
                <span class="cf-inline-clause">
                  and call me at
                  <span class="cf-inline-field cf-inline-field--muted">
                    <input
                      type="tel"
                      id="cf-phone"
                      name="phone"
                      autocomplete="tel"
                      placeholder="Phone (optional)"
                    />
                  </span>
                </span>
              </p>

              <div class="cf-step-actions">
                <button type="button" class="cf-back" data-step-back>
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path d="M19 12H5" />
                    <path d="m12 19-7-7 7-7" />
                  </svg>
                  Back
                </button>

                <button type="submit" class="cf-submit">
                  Send message
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path d="M5 12h14" />
                    <path d="m12 5 7 7-7 7" />
                  </svg>
                </button>
              </div>
            </div>
          </form>

          <p class="cf-direct">
            Prefer to skip the form? Email
            <a href="mailto:hello@dataintellec.com">hello@dataintellec.com</a>
            or call
            <a href="tel:+910000000000">+91 00000 00000</a>.
          </p>

          <!-- TODO: replace with the real office address once confirmed. -->
          <div class="cf-meta">
            <p class="cf-meta-office">
              <span class="cf-meta-office-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
                  <circle cx="12" cy="10" r="3" />
                </svg>
              </span>
              <span>
                <strong>Office</strong>
                Street address line one, City, State 000000, India
              </span>
            </p>

            <!-- TODO: point href at the real Calendly (or similar) booking
                 link once the client sets one up. Inert placeholder for now. -->
            <a href="#" class="cf-meta-book">
              Prefer a fixed slot?
              <span>
                Book a call
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                  <path d="M5 12h14" />
                  <path d="m12 5 7 7-7 7" />
                </svg>
              </span>
            </a>
          </div>
        </div>
      </section>
      <!-- ==================== /CONTACT (mad-lib intro) =================== -->
@endsection

@push('scripts')
<script src="/src/scripts/contact-form.js"></script>
@endpush