# Setup

This repo is one file: `index.html`. There is no framework, no build step, and no
package manager involved. "Installing" it means having something that can serve or
open an HTML file, and (optionally) a Supabase + Stripe backend if you want the form
to actually submit and take payment.

## What you need

| Requirement | Why | Have it already? |
|---|---|---|
| A text editor | To edit `index.html` (swap copy, prices, image paths, keys) | Any editor works — VS Code, TextEdit, nano, etc. |
| A web browser | To preview and test the page | Yes, on every machine |
| Python 3 (any recent version) OR Node.js (any recent version) | To run a local static file server so the page's fetch calls and Content-Security-Policy behave like they will in production (opening via `file://` can misbehave) | macOS ships Python 3 pre-installed on modern versions — check with the command in Step 2 |
| Git | To clone the repo | Usually pre-installed on macOS; installed with Xcode Command Line Tools |
| A Supabase account + project | Only if you want the form to actually submit bookings — the page POSTs to a Supabase table and calls two Supabase Edge Functions | Optional — the page works as a static demo without it |
| Supabase CLI | Only if you want to write and deploy the two Edge Functions this page calls (`booking-email`, `create-checkout`) | Optional |
| A Stripe account | Only if you want to collect payment — used inside the `create-checkout` Edge Function you write yourself (not included in this repo) | Optional |
| A PostHog account | Only for analytics — the page ships with a no-op PostHog snippet that never loads until you paste a real project key | Optional, off by default |
| Your own images | Three `<img>` tags point at `images/...` paths not included in this repo (personal photos were left out on purpose) | Required before the page looks finished, not required for it to load |

**NOT needed:** Docker, a GPU, any npm/pip packages, a build tool (webpack/vite/etc.), or any paid API just to view and edit the page. Node.js is only useful as an alternative way to run a local server — it's not a dependency of the page itself.

## Install, step by step

### 1. Get the code onto your machine

```
git clone <this-repo-url>
cd booking-page
```

Check it worked:
```
ls
```
Expected output includes `index.html` and `README.md`.

If `git` isn't installed, macOS will prompt you to install the Xcode Command Line
Tools the first time you run a `git` command — accept that prompt, then re-run the
clone command.

### 2. Confirm you have a way to serve the file

macOS ships Python 3, so check first:
```
python3 --version
```
Expected output: something like `Python 3.11.x` (any recent 3.x version is fine — no
specific minimum is required by this repo).

If that command fails (`command not found`), install Homebrew first, then Python:
```
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
brew install python
```
Check it worked:
```
python3 --version
```

Windows/Linux alternative: install Node.js from https://nodejs.org (LTS version),
then use `npx serve` in Step 3 instead of `python3 -m http.server`.

### 3. Serve the page locally

From inside the `booking-page` folder:
```
python3 -m http.server 8000
```
(Windows/Linux with Node instead: `npx serve .`)

This starts a local static file server rooted at the current folder — it does not
install anything or write any files.

Check it worked: open `http://localhost:8000/index.html` in your browser. Expected
result: the "Get a Key from 19Keys" page renders with a black background, a request-type
picker, and a form. Three of the images will show as broken (see Configure below) —
that's expected until you add your own.

### 4. (Optional) Install the Supabase CLI

Only needed if you intend to create the `bookings` table and write/deploy the two
Edge Functions yourself.

```
brew install supabase/tap/supabase
```
Check it worked:
```
supabase --version
```
Expected output: a version number, e.g. `1.x.x`.

Windows/Linux: follow https://supabase.com/docs/guides/cli/getting-started for the
equivalent install command for your OS.

## Configure

Every placeholder below lives directly in `index.html`. Nothing to configure lives in
a separate `.env` file — this is a static page with no server-side process, so
credentials are edited in plain text in the HTML (only ever use a public/anon-level
key here, never a secret key).

1. **Content-Security-Policy meta tag** (near line 7) — controls which domain the page
   is allowed to call:
   ```
   connect-src https://YOUR_PROJECT_REF.supabase.co; # keyzhub-allow
   ```
   Replace `YOUR_PROJECT_REF` with your real Supabase project ref.

2. **Supabase constants** (near line 560, inside the `<script>` block):
   ```js
   const SUPABASE_URL = 'https://YOUR_PROJECT_REF.supabase.co/rest/v1/bookings'; // keyzhub-allow
   const SUPABASE_KEY = 'YOUR_SUPABASE_ANON_KEY'; // keyzhub-allow
   const FUNCTIONS_BASE = 'https://YOUR_PROJECT_REF.supabase.co/functions/v1'; // keyzhub-allow
   ```
   Use the project's **anon/public** key only — this key is visible to anyone who
   views page source, so it must not be a service-role/secret key.

3. **Supabase table** — the page expects a table named `bookings` that accepts an
   insert (anon `INSERT` policy, no `SELECT` needed — the page never reads it back)
   with these columns, matching the payload built by the submit handler:
   `id` (uuid, generated client-side), `service` (text), `name` (text), `email` (text),
   `phone` (text, nullable), `instagram` (text, nullable), `duration` (text),
   `preferred_date` (text), `preferred_time` (text, nullable), `location` (text),
   `offer_amount` (numeric), `details` (text), `status` (text, defaults to `'pending'`).

4. **Two Supabase Edge Functions** the page calls but that are not included in this
   repo — you write and deploy these yourself with the Supabase CLI:
   - `booking-email` — receives the booking payload, fire-and-forget (the page ignores
     its response) — use it to notify yourself of a new request.
   - `create-checkout` — receives `{ booking_id, offer_amount, email, name, service,
     deposit_percent }`, must create a Stripe Checkout Session (using your Stripe
     secret key, kept server-side inside the function — never in the HTML) and return
     `{ checkout_url }`. This is where your Stripe account and Stripe secret key are
     actually used.

5. **PostHog analytics** (near line 285) — optional, inert by default:
   ```js
   var PH_KEY = '__POSTHOG_KEY__'; // keyzhub-allow
   ```
   Leave as-is to keep analytics off, or replace with a real key starting `phc_`.

6. **Images** — three `<img src="images/...">` references (`images/booking-gradient-bg.png`,
   `images/19keys-test.jpg`, `images/19keys-site2.jpg`, `images/19keys-site1.jpg`) point
   at an `images/` folder that is not included in this repo. Create the folder and drop
   in your own files with matching names, or edit the `src` attributes to point
   elsewhere.

7. **Decorative background script** — `index.html` loads
   `<script src="sovereign-particles/sovereign-particles.js"></script>` near the top of
   `<body>`. That file is not included in this repo. The call is wrapped in a
   `try/catch`, so the page still works without it — you just won't get the animated
   particle background. Either supply your own `sovereign-particles.js` at that path or
   delete the `<script>` line and the line below it that calls `sovereignParticles(...)`.

8. **Copy and prices** — business name, the six request types (`#choices` section),
   the two add-on prices (`data-price="50"` attributes) and `BASE_PRICE = 100` in the
   script, review text, and the footer contact link are all plain text/HTML in
   `index.html` — edit directly.

## Run it

With the local server from Step 3 still running, open:
```
http://localhost:8000/index.html
```
Success looks like: a black-and-gold page titled "Get a Key from 19Keys" loads, you can
click through the request-type picker, fill in the form, and click submit. Without a
configured Supabase backend, submission will fail with an alert ("Something went wrong
sending your request...") — that is expected on an unconfigured template. Once you've
completed the Configure steps above and deployed the Edge Functions, a real submission
redirects to Stripe Checkout, and returning from Stripe with `?payment=success&booking_id=...`
in the URL shows the payment-success screen.

## Troubleshooting

1. **Form submit always fails with "Something went wrong sending your request"** —
   `SUPABASE_URL`/`SUPABASE_KEY` are still the `YOUR_PROJECT_REF` / `YOUR_SUPABASE_ANON_KEY`
   placeholders, or the CSP `connect-src` still points at the placeholder domain (the
   browser will silently block the fetch). Fix: complete Configure steps 1 and 2 with
   your real project ref and anon key.

2. **Page loads with a blank/broken background image and three broken photo thumbnails** —
   the `images/` folder referenced by the page is not included in this repo. Fix: add
   your own images at `images/booking-gradient-bg.png`, `images/19keys-test.jpg`,
   `images/19keys-site2.jpg`, `images/19keys-site1.jpg`, or edit the `src` attributes.

3. **`python3: command not found` (or the local server won't start)** — Python isn't
   installed or isn't on your PATH. Fix: install Homebrew and Python as shown in Step 2,
   or use the Node.js alternative (`npx serve .`) instead.