@extends('layouts.app')

@section('title', 'Book a demo — SmartCubz')
@section('description', "Book a free 30-minute SmartCubz demo. Pick a time that works and we'll walk you through the admin portal and parent app, set up with your own programs and fees.")

@section('content')
<main>
  <!-- ===== Booking hero ===== -->
  <section class="book-hero">
    <div class="hero-bg" aria-hidden="true">
      <span class="orb orb-1"></span>
      <span class="orb orb-2"></span>
    </div>
    <div class="wrap" style="position:relative;z-index:1">
      <span class="eyebrow-pill"><span class="spark">✦</span> Free 30-minute walkthrough</span>
      <h1 style="margin-top:18px">Book your SmartCubz demo</h1>
      <p class="lead">Pick a time that suits you. We'll give you a live tour of the admin portal and the
        parent app set up with your own programs, fees and reports and answer every question.</p>
      <div class="book-perks">
        <span><i>🗓️</i> Choose any open slot</span>
        <span><i>👀</i> Live admin + parent app tour</span>
        <span><i>🔒</i> No credit card, no commitment</span>
      </div>
    </div>
  </section>

  <!-- ===== Cal.com embed ===== -->
  <section class="book-wrap">
    <div class="wrap">
      <div class="cal-card">
        <div id="cal-inline">
          <div class="cal-fallback">
            Loading the scheduler…<br><br>
            If it doesn't appear, email us at <a href="mailto:hello@smartcubz.com">hello@smartcubz.com</a>
            and we'll set up a time.
          </div>
        </div>
      </div>
    </div>
  </section>
</main>
@endsection

@push('scripts')
<!-- ===== Cal.com inline embed (link comes from CALCOM_LINK in .env) ===== -->
<script type="text/javascript">
  (function (C, A, L) {
    let p = function (a, ar) { a.q.push(ar); };
    let d = C.document;
    C.Cal = C.Cal || function () {
      let cal = C.Cal; let ar = arguments;
      if (!cal.loaded) { cal.ns = {}; cal.q = cal.q || []; d.head.appendChild(d.createElement("script")).src = A; cal.loaded = true; }
      if (ar[0] === L) {
        const api = function () { p(api, arguments); };
        const namespace = ar[1];
        api.q = api.q || [];
        if (typeof namespace === "string") { cal.ns[namespace] = cal.ns[namespace] || api; p(cal.ns[namespace], ar); p(cal, ["initNamespace", namespace]); }
        else p(cal, ar);
        return;
      }
      p(cal, ar);
    };
  })(window, "https://app.cal.com/embed/embed.js", "init");

  Cal("init", "demo", { origin: "https://cal.com" });
  Cal.ns.demo("inline", {
    elementOrSelector: "#cal-inline",
    config: { layout: "month_view" },
    calLink: @json(config('smartcubz.calcom_link'))
  });
  Cal.ns.demo("ui", {
    cssVarsPerTheme: { light: { "cal-brand": "#9C1FB8" } },
    hideEventTypeDetails: false,
    layout: "month_view"
  });
</script>
@endpush