---
/**
 * `/contact/` — build step 8. Spec: docs/01 §`/contact/`, docs/05-backend-spec.md.
 *
 * ⚠️ **THE FORM USES NO JAVASCRIPT, AND THAT IS NOT A CONSTRAINT WORKED AROUND —
 * IT IS THE DESIGN.** A plain `<form method="post">` to a same-origin path; the
 * handler answers `303 See Other` to `/contact/received/`. So it works with
 * script disabled, cannot double-submit on refresh, and never shows the visitor a
 * raw JSON response. `backend/intake/handler.mjs` carries the reasoning in full.
 *
 * Consequences that shape the markup:
 *  - **Validation errors land on `/contact/could-not-send/`**, because a static
 *    page cannot read a query string without script. In practice the browser's
 *    own `required` / `type="email"` / `maxlength` handling catches the real
 *    cases and announces them natively, which is what `docs/05`'s
 *    "errors announced with `role="alert"`" asks for; a server rejection is
 *    almost always a bot, and a bot gets the success page (see the handler).
 *  - **No booking embed — R6.** Parked by Pouya 2026-08-26. `docs/01` asks for a
 *    "reserved slot for an embed", so the slot is `CONTACT.bookingUrl` being
 *    `null`: nothing renders, and when a URL exists the block appears without a
 *    rebuild of this page. **Nothing on this page mentions booking**, because a
 *    page that says "book a call" with no way to book it is worse than one that
 *    says to email.
 *
 * ⚠️ **THE RESPONSE-TIME SENTENCE IS A PUBLIC COMMITMENT (§4, Q27) AND MUST READ
 * IDENTICALLY HERE, IN THE CONFIRMATION EMAIL, AND IN ANY BIO.** It is rendered
 * from `CONTACT.responseTime`; the handler takes the same string from its
 * environment. Never retype it, and never soften it to "usually".
 *
 * ⚠️ **`NO_RETAINER_NOTICE` AND `CONSENT_TEXT` BOTH SHIP, AND THAT IS NOT
 * DUPLICATION.** `docs/01` requires the page to carry the notice; `docs/05`
 * requires the consent the inquirer TICKS to carry it too. One is a statement the
 * page makes, the other is a thing the inquirer agrees to. Neither is retyped.
 *
 * ⚠️ **NO PHONE NUMBER — Q3. §4 verifies "no public phone number".** Render
 * `CONTACT.phoneFallback` wherever a number would go rather than leaving the slot
 * visually empty.
 */
import BaseLayout from '../layouts/BaseLayout.astro';
import Button from '../components/Button.astro';
import Undertaking from '../components/Undertaking.astro';
import ContactBand from '../components/ContactBand.astro';
import Eyebrow from '../components/Eyebrow.astro';
import SectionHeading from '../components/SectionHeading.astro';
import { getImage } from 'astro:assets';
import ogDefault from '../assets/og-portrait.jpg';
import { pageGraph } from '../data/schema';
import {
  CONDUCT_UNDERTAKINGS,
  CONTACT,
  NO_RETAINER_NOTICE,
} from '../data/site';
import {
  CONSENT_TEXT,
  DECOY_CHECKBOX_FIELD,
  HONEYPOT_FIELD,
  INTAKE_ACTION,
  INTAKE_FIELDS,
} from '../data/intake';

const ldImage = await getImage({
  src: ogDefault,
  format: 'jpeg',
  width: 1200,
  height: 630,
});

/* No `Service` node. `/contact/` offers nothing — it is the way in to what the
   other pages offer, and a `Service` here would duplicate an `@id` that already
   resolves on `/mediation/`. Person alone, the `/practice/` and `/process/`
   shape. No `BreadcrumbList`: one hop from the root, no visible trail. */
const graph = pageGraph(new URL(ldImage.src, Astro.site).href);

const hintId = (name: string) => `${name}-hint`;
---

<BaseLayout
  title="Contact · Request a Consultation · Pouya Lajevardi"
  description="Request a confidential intake call about a mediation, arbitration or med-arb appointment in Ontario. Inquiries are answered within two business days."
  jsonLd={graph}
>
  {/* ---- 1. Hero -------------------------------------------------------- */}
  <section class="section hero">
    <div class="wrap">
      <Eyebrow dot>Contact</Eyebrow>
      <h1 class="display hero-h">Start with a confidential call.</h1>
      <p class="hero-lede">
        The first step is a scheduled call to scope the matter, identify the
        parties, and run conflicts. Send the form below, or email me directly.
      </p>
      <dl class="direct">
        <div>
          <dt>Email</dt>
          <dd><a href={`mailto:${CONTACT.email}`}>{CONTACT.email}</a></dd>
        </div>
        <div>
          <dt>Phone</dt>
          {
            /* Q3: no public number. The fallback fills the slot rather than
              leaving a labelled row visually empty. */
          }
          <dd>{CONTACT.phoneFallback}</dd>
        </div>
        <div>
          <dt>Location</dt>
          <dd>{CONTACT.location}</dd>
        </div>
        <div>
          <dt>Response</dt>
          <dd>{CONTACT.responseTime}</dd>
        </div>
      </dl>
    </div>
  </section>

  {/* ---- 2. What an inquiry does and does not do ------------------------ */}
  <section class="section section-inverse reveal">
    <div class="wrap">
      <div class="section-head">
        <SectionHeading eyebrow="Before you write" level={2}>
          <span slot="heading">What an inquiry is, and what it is not.</span>
        </SectionHeading>
      </div>
      <div class="prose">
        <p class="statement">{NO_RETAINER_NOTICE}</p>
        <p>I ask for the other parties and their counsel for one reason.</p>
        {
          /* RENDERED FROM `CONDUCT_UNDERTAKINGS`, NEVER TYPED — undertaking (g).
            ⚠️ THIS PAGE HAND-TYPED THE SAME PROPOSITION AS *"I cannot accept an
            appointment before conflicts are checked"* UNTIL 2026-09-04, and it
            survived the change set that struck the identical sentence from
            `/legal/privacy/` — one file swept, its sibling missed, which is the
            shape R8 exists for. §4 row (g) lists BOTH surfaces. */
        }
        <Undertaking>{CONDUCT_UNDERTAKINGS.conflictsCheck}</Undertaking>
        <p>
          That check needs names, and the call above is where it happens. Please
          keep the summary short and leave privileged or confidential detail out
          of it — the call is for that.
        </p>
        <p>
          What is collected, where it is stored, how long it is kept, and how to
          have it deleted are set out in the <a href="/legal/privacy/"
            >privacy policy</a
          >.
        </p>
      </div>
    </div>
  </section>

  {/* ---- 3. The intake form -------------------------------------------- */}
  <section class="section reveal">
    <div class="wrap">
      <div class="section-head">
        <SectionHeading
          eyebrow="Intake"
          level={2}
          lede="Required fields are marked. Nothing here is a retainer or an appointment."
        >
          <span slot="heading">Tell me about the matter.</span>
        </SectionHeading>
      </div>

      {
        /* `novalidate` IS DELIBERATELY ABSENT. The browser's own validation is
          the only client-side validation on this page, and with no script it is
          also the only thing that can announce an error inline — which is what
          `docs/05`'s `role="alert"` item is really asking for. The Lambda
          re-validates everything regardless; see `src/data/intake.ts`. */
      }
      <form class="intake" method="post" action={INTAKE_ACTION}>
        {
          INTAKE_FIELDS.map((field) => (
            <div class={`field field-${field.type}`}>
              {field.type === 'radio' ? (
                <fieldset>
                  <legend>{field.label}</legend>
                  <div class="radios">
                    {field.options?.map((option) => (
                      <label class="radio">
                        {/* No default selection. `preferredContact` is
                            optional, and pre-checking "Email" would submit a
                            preference the inquirer never expressed. */}
                        <input type="radio" name={field.name} value={option} />
                        <span>{option}</span>
                      </label>
                    ))}
                  </div>
                </fieldset>
              ) : (
                <>
                  <label for={field.name}>
                    {field.label}
                    {field.required && (
                      <>
                        {' '}
                        <span class="req" aria-hidden="true">
                          *
                        </span>
                        <span class="visually-hidden">(required)</span>
                      </>
                    )}
                  </label>

                  {field.type === 'select' ? (
                    <select
                      id={field.name}
                      name={field.name}
                      required={field.required || undefined}
                      aria-describedby={
                        field.hint ? hintId(field.name) : undefined
                      }
                    >
                      {/* An empty first option, so a required select cannot be
                          satisfied by whichever value happened to be first. */}
                      <option value="">Choose one</option>
                      {field.options?.map((option) => (
                        <option value={option}>{option}</option>
                      ))}
                    </select>
                  ) : field.type === 'textarea' ? (
                    <textarea
                      id={field.name}
                      name={field.name}
                      rows="6"
                      maxlength={field.max}
                      required={field.required || undefined}
                      aria-describedby={
                        field.hint ? hintId(field.name) : undefined
                      }
                    />
                  ) : (
                    <input
                      type={field.type}
                      id={field.name}
                      name={field.name}
                      maxlength={field.max}
                      autocomplete={field.autocomplete}
                      required={field.required || undefined}
                      aria-describedby={
                        field.hint ? hintId(field.name) : undefined
                      }
                    />
                  )}

                  {field.hint && (
                    <p class="hint" id={hintId(field.name)}>
                      {field.hint}
                    </p>
                  )}
                </>
              )}
            </div>
          ))
        }

        {
          /* THE HONEYPOT. Hidden from sighted users by `display: none` on the
            wrapper, from assistive technology by `aria-hidden`, and from the
            keyboard by `tabindex="-1"` — all three, because any one alone leaves
            a real visitor able to reach a field that silently discards their
            inquiry. `autocomplete="off"` matters more here than anywhere else on
            the form: a browser that helpfully fills a plausible-looking field
            would make a human look like a bot. */
        }
        {
          /* `hidden` ADDED 2026-09-04, for the reason spelled out on the decoy
            below: a class-only rule leaves this field on screen wherever author
            styles do not apply, and a visitor who fills it loses their inquiry
            behind a success page. */
        }
        <div class="honeypot" hidden aria-hidden="true">
          <label for={HONEYPOT_FIELD}>Company website</label>
          <input
            type="text"
            id={HONEYPOT_FIELD}
            name={HONEYPOT_FIELD}
            tabindex="-1"
            autocomplete="off"
          />
        </div>

        {
          /* ⚠️ THE PRIVACY LINK MUST STAY OUT OF THIS LABEL. Two reasons, both
            about the one REQUIRED control on the form: a focusable element
            inside a `<label>` for another control behaves inconsistently across
            engines, and the checkbox's accessible name becomes the whole
            paragraph plus "Privacy policy link" — re-announced on every
            validation failure. The consent wording itself must be verbatim from
            `CONSENT_TEXT`, so it stays in the label; the link is DESCRIBED
            instead, via `aria-describedby`. */
        }
        <div class="field field-consent">
          <label class="consent">
            <input
              type="checkbox"
              name="consent"
              value="on"
              required
              aria-describedby="consent-privacy"
            />
            <span>{CONSENT_TEXT}</span>
          </label>
          <p class="consent-note" id="consent-privacy">
            How that information is handled, and how to have it deleted: <a
              href="/legal/privacy/">privacy policy</a
            >.
          </p>
        </div>

        {
          /* THE SECOND HONEYPOT — a decoy CHECKBOX. The mechanism, and the
            limits of what the observed spam supports, are in `src/data/intake.ts`
            and are not restated here. Four properties of the MARKUP, each of
            which is what stops this field costing a real inquiry:

              · its own CLASS NAME, not `.honeypot` — one selector must not
                match both traps. They share a declaration block below, which is
                presentation; what matters is that `.honeypot` does not select
                this one;
              · placed after the consent block, not beside the other honeypot;
              · `hidden` as well as the CSS rule, so it stays hidden where
                author styles do not apply;
              · a label that tells a human not to tick it. With `hidden` in
                place a human essentially cannot see it, so this is the last
                line rather than the first — and it costs almost nothing,
                because the PLAUSIBLE NAME is what a bot matches on and the name
                is unchanged.

            ⚠️ NO `required`, AND NO `checked`. An unchecked box sends nothing,
            so absence is the pass — and the handler tests for a NON-EMPTY value,
            so an empty one passes too. */
        }
        <div class="optin-decoy" hidden aria-hidden="true">
          <label for={DECOY_CHECKBOX_FIELD}>Leave this box unticked.</label>
          <input
            type="checkbox"
            id={DECOY_CHECKBOX_FIELD}
            name={DECOY_CHECKBOX_FIELD}
            value="on"
            tabindex="-1"
            autocomplete="off"
          />
        </div>

        {
          /* ⚠️ `<Button type="submit">`, NOT a hand-written `<button class="btn">`.
            `.btn` and `.btn-primary` are SCOPED TO `Button.astro`, so a raw
            button carrying those class names compiles against this page's cid,
            matches nothing, and renders as an unstyled default button — the
            parent-scope trap `CLAUDE.md` records, arrived at from the other
            direction. The first version of this file did exactly that.
            AND IT IS WRAPPED IN A DIV THIS PAGE OWNS, for the same rule read
            forwards: `.submit` on `<Button>` itself would compile to
            `.submit[cid-of-this-page]` and never match the rendered element. */
        }
        <div class="submit">
          <Button type="submit">Send the inquiry</Button>
        </div>
      </form>
    </div>
  </section>

  <ContactBand />
</BaseLayout>

<style>
  .hero {
    padding-block-start: var(--space-9);
  }
  .hero-h {
    margin-block: var(--space-4) var(--space-5);
    font-size: var(--text-6xl);
  }
  .hero-lede {
    max-inline-size: 58ch;
    font-size: var(--text-lg);
    line-height: var(--leading-body);
    color: var(--text-secondary);
  }

  /* The direct-contact block. A `<dl>` because each row is genuinely a term and
     its value, which is what gives the labels their semantics without spending a
     heading level on them. */
  .direct {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    gap: var(--space-5);
    margin-block-start: var(--space-8);
  }
  /* `--text-eyebrow`, not `--text-2xs`: these `<dt>`s are label text on the page
     that collects inquiries, so they move with the `<label>`s below rather than
     sitting a step behind them. Pouya's ruling, 2026-08-31. */
  .direct dt {
    font-family: var(--font-mono);
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--text-meta);
  }
  .direct dd {
    margin-block-start: var(--space-2);
    font-size: var(--text-base);
    line-height: var(--leading-snug);
    /* The email address has no break opportunity and overflowed at a 200% default
       font size. It must stay selectable and correct, so it breaks rather than
       being truncated. `docs/02` §Reflow carries the measurement. */
    overflow-wrap: anywhere;
  }

  /* The no-retainer sentence, set larger than the paragraphs under it. On an
     inverse ground it inherits cream (16.81:1) from `.section-inverse`. */
  .statement {
    font-size: var(--text-lg);
    line-height: var(--leading-body);
  }

  /* --- The form -------------------------------------------------------- */

  .intake {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    gap: var(--space-5) var(--space-6);
    max-inline-size: 56rem;
  }
  /* The two long fields span the whole form rather than sitting in a column
     20rem wide. `1 / -1` works at every column count the auto-fit produces. */
  .field-textarea,
  .field-consent,
  .submit {
    grid-column: 1 / -1;
  }

  .field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  /* NOT the `.eyebrow` class, deliberately: `--text-secondary` (11.75:1) rather
     than `.eyebrow`'s `--text-meta` (5.47:1), because a form label is operative
     text. Everything else matches it, `font-weight` included — without that these
     rendered at 400 under a `p.eyebrow` of the same size and colour.
     `overflow-wrap` because at a 200% default font size "Firm or organisation"
     ran 38px outside its own box at 320px: `docs/02` §Reflow, instrument
     finding 2. */
  label,
  legend {
    font-family: var(--font-mono);
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
  }
  /* Maroon on cream is 12.29:1, so the asterisk is legible — but it is
     `aria-hidden` and paired with a visually-hidden "(required)", because
     colour and a glyph must never be the only carrier of meaning (docs/02). */
  .req {
    color: var(--accent);
  }

  input,
  select,
  textarea {
    inline-size: 100%;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-sans);
    /* 1rem, not smaller. iOS Safari zooms the viewport on focus for any font
       size under 16px, which on a form this long throws the layout sideways. */
    font-size: var(--text-base);
    line-height: var(--leading-snug);
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    /* 44px minimum target (WCAG 2.5.8) comes from the padding plus this
       line-height; measured rather than set with a fixed height, so a longer
       label or a zoomed root does not crush it. */
  }
  textarea {
    resize: vertical;
    line-height: var(--leading-body);
  }
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: var(--focus-offset);
  }

  .hint {
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--text-meta);
  }

  fieldset {
    padding: 0;
    border: none;
  }
  .radios {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-block-start: var(--space-2);
  }
  .radio,
  .consent {
    display: flex;
    gap: var(--space-3);
    /* The label text next to a control is sentence case and normal size — the
       mono uppercase treatment above is for the field's own name, and applying
       it to a paragraph of consent text would be unreadable. */
    font-family: var(--font-sans);
    font-size: var(--text-base);
    letter-spacing: var(--tracking-normal);
    text-transform: none;
    line-height: var(--leading-body);
    color: var(--text-secondary);
  }
  /* 44px IS THE FLOOR (`docs/02` §Accessibility floor) and this row was 25.6px:
     an 18.4px control plus one line of body text, with no `::after { inset: 0 }`
     overlay to enlarge it. `min-block-size` rather than padding, so the label
     grows to the floor and no further — padding would push the two radios apart
     at every width. */
  .radio {
    align-items: center;
    min-block-size: 44px;
  }
  .consent {
    align-items: flex-start;
    max-inline-size: var(--width-prose);
  }
  /* Indented to the label's text column so it reads as belonging to the
     checkbox — 1.15rem control plus the flex gap. */
  .consent-note {
    margin-block-start: var(--space-3);
    margin-inline-start: calc(1.15rem + var(--space-3));
    max-inline-size: var(--width-prose);
    font-size: var(--text-sm);
    line-height: var(--leading-body);
    color: var(--text-meta);
  }
  .radio input,
  .consent input {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    flex: none;
    padding: 0;
    /* The checkbox sits on the first line of its own label text rather than at
       the top of the box, which is where `flex-start` alone would put it. */
    margin-block-start: 0.25em;
    accent-color: var(--accent);
  }

  /* THE HONEYPOT. `display: none` is what keeps it out of the layout AND out of
     the accessibility tree; `aria-hidden` on the wrapper and `tabindex="-1"` on
     the input are belt and braces for the case where a future stylesheet
     un-hides it. Do not swap this for `visibility` or an off-screen position:
     an off-screen input is still focusable and still announced. */
  .honeypot,
  .optin-decoy {
    display: none;
  }

  .submit {
    justify-self: start;
  }
</style>