# Booking Page — "Request a Key"

**Requirements:** just a browser and a text editor to preview/edit; a local static server, Supabase project, and Stripe account are optional and only needed to make the form actually submit and take payment — full walkthrough in [SETUP.md](SETUP.md).

A single-file, Cameo-style video-request booking page. Black-and-gold, mobile-first,
built with a Chivo Mono / Space Mono / Doto type system. Visitors pick a request type,
fill in details, add optional upgrades, and submit — the page is wired to POST straight
to a Supabase table and kick off a Stripe checkout via a Supabase Edge Function.

## What's in the box

- `index.html` — the entire page. No build step, no framework, no dependencies beyond
  two external services you plug in yourself:
  - Google Fonts (Chivo Mono, Space Mono, Doto) loaded via `<link>` tags
  - A Supabase REST endpoint + Edge Functions for submitting the booking and creating
    a Stripe Checkout session
- Optional analytics hook for PostHog (disabled by default — see below)

The page includes:
- A profile header, sample-clip strip, scarcity/social-proof line, and a live-activity
  ticker (the ticker text is hardcoded sample copy — replace it)
- A 6-option request-type picker that expands into a details form
- Two optional add-ons (priced) and a running total
- Client-side form validation
- Three end states: request-submitted fallback, payment-success, payment-cancelled

## Quickstart

1. Open `index.html` in a browser. It renders and is fully interactive with no backend —
   form submission will fail gracefully until you connect the pieces below.
2. Swap the copy: business name, request types (`#choices`), prices (`data-price`,
   `BASE_PRICE` in the script), reviews, footer contact link.
3. Swap the images: the `<img>` tags point at `images/...` paths that are not included
   in this template (personal photos were intentionally left out). Drop in your own and
   update the `src` attributes.
4. Wire up submission (optional — the form works as a static page without this):
   - Create a Supabase project with a `bookings` table matching the `payload` object in
     the submit handler (`id`, `service`, `name`, `email`, `phone`, `instagram`,
     `duration`, `preferred_date`, `preferred_time`, `location`, `offer_amount`,
     `details`, `status`).
   - Replace `YOUR_PROJECT_REF` and `YOUR_SUPABASE_ANON_KEY` (both marked
     `keyzhub-allow` in the file) with your real project ref and anon key. There are
     three places: the CSP `<meta>` tag near the top, and `SUPABASE_URL` /
     `SUPABASE_KEY` / `FUNCTIONS_BASE` in the script near the bottom.
   - Write two Supabase Edge Functions the page already calls:
     - `booking-email` — fire-and-forget notification on new booking
     - `create-checkout` — creates a Stripe Checkout Session and returns
       `{ checkout_url }`
   - On successful Stripe checkout, redirect back to this page with
     `?payment=success&booking_id=...` (or `?payment=cancelled&booking_id=...`) — the
     page already handles both query params on load.
5. (Optional) Analytics: the page has a no-op PostHog snippet. It stays inert until you
   replace `__POSTHOG_KEY__` with a real `phc_...` project key.
6. Deploy anywhere that serves static files — Vercel, Netlify, GitHub Pages, S3, etc.
   There's nothing to build.

## Make it your own

This is a template, not a live integration — nothing will submit successfully until you
connect your own Supabase project and Edge Functions. Everything else (copy, prices,
request types, images, contact links) is yours to replace.