/* ===== Big Rig screens ===== */
const { useState: useS } = React;

function PadPrice({ p, days }) {
  if (p && p.rentModel === 'addon') return <span className="price">rent +{BR.fmt(p.addonRate)}/day</span>;
  return <span className="price">rent {BR.fmt(BR.priceForDays(days || 3))} / {days || 3}d</span>;
}

// Bulk pad-rental discount advert — used across the rent flow
function BulkNote({ style }) {
  return (
    <div className="note" style={style}>
      📦 <b>Bulk pad discount</b> — rent <b>3–4 pads</b> for <b>10% off</b>, or <b>5+ pads</b> for <b>20% off</b>. Applies to pad rentals automatically.
    </div>
  );
}

// Hero date picker: tappable pick-up / drop-off fields that open an inline calendar.
function RentDatePicker({ a }) {
  const [open, setOpen] = useS(false);
  const dp = a.draftPeriod();
  const start = a.cal.selStart || (a.period && a.period.start);
  const end = a.cal.selEnd || (a.period && a.period.end);
  const onGo = () => { if (dp) a.confirmDates(); else if (a.period) a.go('book-pads'); else setOpen(true); };
  return (
    <React.Fragment>
      <div className="row" style={{ gap: 8 }}>
        <button className="field" style={{ textAlign: 'left', cursor: 'pointer' }} onClick={() => setOpen(o => !o)}>
          <div className="lab">Pick-up</div><div className="val">{start ? BR.fmtShort(start) : 'Select date'}</div>
        </button>
        <button className="field" style={{ textAlign: 'left', cursor: 'pointer' }} onClick={() => setOpen(o => !o)}>
          <div className="lab">Drop-off</div><div className="val">{end ? BR.fmtShort(end) : 'Select date'}</div>
        </button>
      </div>
      {open ? (
        <div className="col" style={{ gap: 9 }}>
          <Calendar month={a.cal.month} setMonth={a.cal.setMonth} start={a.cal.selStart} end={a.cal.selEnd} onPick={a.cal.pick} />
          {dp
            ? <span className="tag">{dp.days} DAYS · {BR.fmt(BR.priceForDays(dp.days))} / PAD</span>
            : <span className="muted mono" style={{ fontSize: 11 }}>Tap a pick-up day, then a drop-off day.</span>}
        </div>
      ) : null}
      <div className="row wrap" style={{ alignItems: 'center', gap: 10 }}>
        <button className="btn accent" onClick={onGo}>CHECK AVAILABILITY ▸</button>
        <span className="lowstock">BIG PADS — {BR.byId('bigpad').stock} LEFT</span>
      </div>
      <div className="mono muted" style={{ fontSize: 11 }}>from R450 / 3 days · per pad</div>
      <div className="bulk-pill">📦 BULK: 3–4 PADS −10% · 5+ PADS −20%</div>
    </React.Fragment>
  );
}

/* ---------------- HOME (split deck) ---------------- */
function Home({ a }) {
  const featured = BR.PRODUCTS;
  return (
    <div className="screen">
      <div className="split">
        <div className="half">
          <div className="kick">01 / RENT</div>
          <div className="h1">Crash pads,<br />by the day.</div>
          <Ph className="hero" src="img/crash-pads-hero.jpg" alt="Crash pads stacked in a field" />
          <RentDatePicker a={a} />
        </div>
        <div className="half" style={{ background: 'var(--panel2)' }}>
          <div className="kick">02 / SHOP</div>
          <div className="h1">Gear up<br />before you go.</div>
          <Ph className="hero" src="img/gear-hero.jpg" alt="Gear — merch and chalk flatlay" />
          <div className="chips">{['TEES', 'CHALK', 'PADS', 'CALZONE'].map(c => <span key={c} className="chip" onClick={() => a.go('shop')}>{c}</span>)}</div>
          <div><button className="btn" onClick={() => a.go('shop')}>ENTER SHOP ▸</button></div>
        </div>
      </div>
      <div className="pad maxw">
        <div className="row" style={{ justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12 }}><div className="h2">Featured kit</div><span className="kick">{featured.length} ITEMS</span></div>
        <div className="g5">
          {featured.map(p => (
            <div key={p.id} className="card click" onClick={() => a.openProduct(p.id)}>
              <Ph className="tall" label={'[ ' + p.name.toLowerCase() + ' ]'} />
              <div className="pname">{p.name}</div>
              {p.rentable ? <StockBadge stock={p.stock} /> : (p.limited ? <span className="lowstock">LIMITED · {p.stock} LEFT</span> : null)}
              <span className="price">{BR.fmt(p.buy)}</span>
            </div>
          ))}
        </div>
      </div>
      <div className="pad" style={{ background: 'var(--panel2)', borderTop: '2px solid var(--ink)' }}>
        <div className="maxw">
          <div className="h2" style={{ marginBottom: 12 }}>How it works</div>
          <div className="g3">
            {[['1 · Pick dates', 'Choose pick-up & drop-off.'], ['2 · Grab pads', 'Collect from the shed.'], ['3 · Send it', 'Return when you\'re done.']].map(([t, s], i) => (
              <div key={i} className="card" style={{ borderStyle: 'dashed' }}><Ph label="[ icon ]" /><div className="pname">{t}</div><div className="muted" style={{ fontSize: 13 }}>{s}</div></div>
            ))}
          </div>
        </div>
      </div>
      <Footer go={a.go} />
    </div>
  );
}

/* ---------------- SHOP ---------------- */
function Shop({ a }) {
  const list = BR.PRODUCTS.filter(p => BR.inCat(p, a.cat));
  const cards = list.map(p => (
    <div key={p.id} className="card click" onClick={() => a.openProduct(p.id)}>
      <Ph className="tall" label={'[ ' + p.name.toLowerCase() + ' ]'} />
      <div className="pname">{p.name}</div>
      {p.rentable ? <StockBadge stock={p.stock} /> : (p.limited ? <span className="lowstock">LIMITED · {p.stock} LEFT</span> : null)}
      <span className="price">{BR.fmt(p.buy)}</span>
    </div>
  ));
  return (
    <div className="screen">
      <div className="shop-chips chips">
        {BR.CATS.map(([k, l]) => <span key={k} className={'chip ' + (a.cat === k ? 'on' : '')} onClick={() => a.setCat(k)}>{l.toUpperCase()}</span>)}
      </div>
      <div className="shop">
        <aside>
          <div className="kick">CATEGORIES</div>
          {BR.CATS.map(([k, l]) => <div key={k} className={'chip ' + (a.cat === k ? 'on' : '')} onClick={() => a.setCat(k)}>{l.toUpperCase()}</div>)}
        </aside>
        <div className="grid-wrap">
          <div className="row" style={{ justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12 }}><div className="h2">Shop</div><span className="kick">{list.length} PRODUCTS</span></div>
          <div className="g4">{cards}</div>
        </div>
      </div>
      <Footer go={a.go} />
    </div>
  );
}

/* ---------------- PRODUCT DETAIL ---------------- */
function Product({ a }) {
  const p = a.product;
  const [qty, setQty] = useS(1);
  const isPad = p.rentable;
  const pairs = BR.PRODUCTS.filter(x => x.id !== p.id).slice(0, 3);

  return (
    <div className="screen">
      <div className="crumb"><span className="linkish" onClick={() => a.go('shop')}>shop</span> / {p.cat} / <b>{p.name}</b></div>
      <div className="row prod-cols" style={{ gap: 0, alignItems: 'stretch' }}>
        <div className="col" style={{ flex: 1.2, gap: 10, padding: 22, borderRight: '2px solid var(--ink)' }}>
          <Ph className="hero" style={{ minHeight: 300 }} label={'[ product hero — ' + p.name.toLowerCase() + ' ]'} />
          <div className="row" style={{ gap: 7 }}>{[1, 2, 3, 4].map(i => <Ph key={i} style={{ width: 54, minHeight: 48 }} label={'[' + i + ']'} />)}</div>
        </div>
        <div className="col" style={{ flex: 1, gap: 13, padding: 22 }}>
          <div className="kick">{isPad ? 'CRASH PAD' : (p.cat === 'chalk' ? 'CHALK' : 'APPAREL')}</div>
          <div className="h1">{p.name}</div>

          <div className="row" style={{ alignItems: 'center', gap: 12 }}>
            <div className="price" style={{ fontSize: 18 }}>{BR.fmt(p.buy)}</div>
            {isPad ? <StockBadge stock={p.stock} /> : (p.limited ? <span className="lowstock">LIMITED DROP · {p.stock} LEFT</span> : <span className="instock">in stock</span>)}
          </div>

          {isPad ? <div className="note">Buying outright. Want it just for a trip? Rent it by the day in the <span className="linkish" onClick={() => a.go('book-dates')}>rent section ▸</span></div> : null}

          <div className="row" style={{ gap: 10, alignItems: 'center' }}>
            <Qty value={qty} onChange={setQty} min={1} max={isPad ? Math.max(1, p.stock) : undefined} />
            <button className="btn accent" style={{ flex: 1 }} disabled={isPad && p.stock <= 0} onClick={() => { a.addBuy(p.id, qty); }}>ADD TO CART ▸</button>
          </div>

          <hr style={{ border: 'none', borderTop: '1.5px dashed var(--ph-line)', width: '100%' }} />
          <div className="kick">SPECS</div>
          <div>
            {p.dims ? <div className="spec"><span>DIMENSIONS</span><b>{p.dims}</b></div> : null}
            {p.thick ? <div className="spec"><span>THICKNESS</span><b>{p.thick}</b></div> : null}
            {p.fold ? <div className="spec"><span>FOLD</span><b>{p.fold}</b></div> : null}
            {p.foam ? <div className="spec"><span>FOAM</span><b>{p.foam}</b></div> : null}
            {p.weight ? <div className="spec"><span>WEIGHT</span><b>{p.weight}</b></div> : null}
            {p.cover ? <div className="spec"><span>COVER</span><b>{p.cover}</b></div> : null}
            {p.sizes ? <div className="spec"><span>SIZES</span><b>{p.sizes}</b></div> : null}
            {p.colour ? <div className="spec"><span>COLOUR</span><b>{p.colour}</b></div> : null}
            {p.fit ? <div className="spec"><span>FIT</span><b>{p.fit}</b></div> : null}
            {p.fill ? <div className="spec"><span>FILL</span><b>{p.fill}</b></div> : null}
          </div>
          <div className="muted" style={{ fontSize: 13 }}>{p.blurb}</div>
        </div>
      </div>
      <div className="pad" style={{ background: 'var(--panel2)', borderTop: '2px solid var(--ink)' }}>
        <div className="maxw">
          <div className="h2" style={{ marginBottom: 12 }}>Pairs well with</div>
          <div className="g3">
            {pairs.map(x => (
              <div key={x.id} className="card click" onClick={() => a.openProduct(x.id)}>
                <Ph className="tall" label={'[ ' + x.name.toLowerCase() + ' ]'} />
                <div className="pname">{x.name}</div>
                <span className="price">{BR.fmt(x.buy)}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
      <Footer go={a.go} />
    </div>
  );
}

/* ---------------- BOOKING: DATES ---------------- */
function BookDates({ a }) {
  const dp = a.draftPeriod();
  return (
    <div className="screen">
      <div className="pad" style={{ borderBottom: '2px solid var(--ink)' }}><Stepper active="dates" /></div>
      <div className="pad maxw col" style={{ gap: 14, maxWidth: 560 }}>
        <div className="kick">01 / WHEN DO YOU NEED PADS?</div>
        <div className="h2">Pick your rental dates.</div>
        <Calendar month={a.cal.month} setMonth={a.cal.setMonth} start={a.cal.selStart} end={a.cal.selEnd} onPick={a.cal.pick} />
        <div className="row" style={{ gap: 8 }}>
          <div className="field"><div className="lab">Pick-up</div><div className="val">{a.cal.selStart ? BR.fmtShort(a.cal.selStart) : 'tap a date'}</div></div>
          <div className="field"><div className="lab">Drop-off</div><div className="val">{a.cal.selEnd ? BR.fmtShort(a.cal.selEnd) : 'tap a date'}</div></div>
        </div>
        {dp ? <div className="row" style={{ alignItems: 'center', gap: 10 }}><span className="tag">{dp.days} DAYS · {BR.fmt(BR.priceForDays(dp.days))} / PAD</span><span className="muted" style={{ fontSize: 12 }}>pickup from the shed</span></div> : null}
        <div className="note">🔒 One rental period per order — every pad you add shares these dates.</div>
        <BulkNote />
        <button className="btn accent block" disabled={!dp} onClick={() => a.confirmDates()}>CONTINUE TO PADS ▸</button>
      </div>
      <Footer go={a.go} />
    </div>
  );
}

/* ---------------- BOOKING: PADS ---------------- */
function BookPads({ a }) {
  const pads = BR.PRODUCTS.filter(p => p.rentable);
  const days = a.period ? a.period.days : 3;
  const count = a.draftCount();
  const padCount = (a.draft.bigpad || 0) + (a.draft.smallpad || 0) + a.padsInCartForPeriod();
  return (
    <div className="screen">
      <div className="pad" style={{ borderBottom: '2px solid var(--ink)' }}><Stepper active="pads" /></div>
      <div className="banner">
        <span className="tag rent">📅 {BR.rangeLabel(a.period)} · {a.period ? a.period.days : 3} DAYS</span>
        <span className="muted" style={{ fontSize: 12 }}>{BR.fmt(BR.priceForDays(days))} / pad</span>
        <span className="grow" style={{ flex: 1 }}></span>
        <span className="linkish" onClick={() => a.go('book-dates')}>change dates</span>
      </div>
      <div className="pad maxw col" style={{ gap: 10 }}>
        <div className="kick">02 / AVAILABLE FOR THESE DATES</div>
        <BulkNote />
        {pads.map(p => {
          const isAddon = p.rentModel === 'addon';
          const remaining = a.availFor(p.id);
          const cap = a.bookMax(p.id);
          const q = a.draft[p.id] || 0;
          return (
            <div key={p.id} className="line">
              <Ph label={'[ ' + p.name.toLowerCase() + ' ]'} />
              <div className="meta">
                <div className="pname">{p.name}</div>
                <div className="muted" style={{ fontSize: 12 }}>{p.dims} · {p.thick}{isAddon ? ' · add-on' : ''}</div>
                {isAddon
                  ? (padCount === 0
                      ? <span className="instock">add a pad to attach a topper</span>
                      : <span className="instock">{q} of {padCount} pad{padCount === 1 ? '' : 's'} topped · 1 per pad</span>)
                  : <StockBadge stock={remaining} />}
              </div>
              <div className="col" style={{ gap: 7, alignItems: 'flex-end' }}>
                <div className="price">{isAddon ? '+' + BR.fmt(p.addonRate) + ' / day' : BR.fmt(BR.rentUnit(p, days)) + ' / ' + days + 'd'}</div>
                <Qty value={q} onChange={(v) => a.setDraftQty(p.id, v)} min={0} max={cap} />
              </div>
            </div>
          );
        })}
      </div>
      <div className="summbar">
        <div className="tot">
          {count} item{count === 1 ? '' : 's'} · {a.period ? a.period.days : 3} days · {a.draftBulkRate() > 0 ? <span className="strike">{BR.fmt(a.draftTotal())}</span> : null} <b>{BR.fmt(a.draftTotalNet())}</b>
          {a.draftBulkRate() > 0 ? <span className="tag disc">−{BR.pct(a.draftBulkRate())} BULK</span> : null}
        </div>
        <span style={{ flex: 1 }}></span>
        <button className="btn accent" disabled={count === 0} onClick={() => a.go('book-confirm')}>REVIEW BOOKING ▸</button>
      </div>
    </div>
  );
}

/* ---------------- BOOKING: CONFIRM ---------------- */
function BookConfirm({ a }) {
  const [f, setF] = useS({ name: '', email: '', phone: '' });
  const [country, setCountry] = useS(DEFAULT_COUNTRY);
  const [agree, setAgree] = useS(false);
  const [openWarn, setOpenWarn] = useS(false);
  const [err, setErr] = useS(false);
  const lines = a.draftLines();
  const submit = () => {
    if (!f.name || !f.email || !f.phone) { setErr(true); return; }
    if (!agree) { setErr(true); return; }
    a.commitBooking();
  };
  return (
    <div className="screen">
      <div className="pad" style={{ borderBottom: '2px solid var(--ink)' }}><Stepper active="confirm" /></div>
      <div className="pad maxw col" style={{ gap: 12, maxWidth: 620 }}>
        <div className="kick">REVIEW</div>
        <div className="card" style={{ gap: 8 }}>
          {lines.map((l, i) => (
            <div key={l.id} className="line" style={i === lines.length - 1 ? { borderBottom: 0, paddingBottom: 0 } : (i === 0 ? { paddingTop: 0 } : null)}>
              <Ph label={'[ ' + BR.byId(l.id).name.toLowerCase() + ' ]'} />
              <div className="meta"><div className="pname">{BR.byId(l.id).name} ×{l.qty}</div><span className="tag rent">RENT · {BR.rangeLabel(a.period)} · {a.period.days}d</span></div>
              <div className="price">{BR.fmt(l.unit * l.qty)}</div>
            </div>
          ))}
        </div>
        <Ph style={{ minHeight: 90 }} label="[ pickup map — the shed ]" />
        <div className="ffield"><div className="lab">Name</div><input value={f.name} onChange={e => setF({ ...f, name: e.target.value })} placeholder="Your name" /></div>
        <div className="row" style={{ gap: 8 }}>
          <div className="ffield" style={{ flex: 1 }}><div className="lab">Email</div><input value={f.email} onChange={e => setF({ ...f, email: e.target.value })} placeholder="you@email.com" /></div>
          <PhoneField country={country} onCountry={setCountry} value={f.phone} onChange={v => setF({ ...f, phone: v })} bad={err && !f.phone} />
        </div>

        <div className="warnbox">
          <button type="button" className="warn-head" onClick={() => setOpenWarn(o => !o)} aria-expanded={openWarn}>
            <span className="warn-title">Climbing &amp; Bouldering Risk Acknowledgement</span>
            <span className="warn-chev" aria-hidden="true">{openWarn ? '–' : '+'}</span>
          </button>
          {openWarn ? (
            <div className="warn-body">
              <p className="warn-lead"><b>WARNING:</b> Climbing and bouldering are inherently dangerous activities.</p>
              <p>By renting, using, handling, positioning, moving, or relying on Big Rig Climbers bouldering pads or related equipment, I acknowledge and agree that climbing, bouldering, spotting, falling, landing, and the use or misuse of crash pads involve serious risks.</p>
              <p>These risks include, but are not limited to, falls, missed landings, uneven ground, pad movement, pad gaps, incorrect pad placement, equipment misuse, impact injuries, fractures, sprains, head, neck or spinal injury, paralysis, permanent disability, and death.</p>
              <p>I understand that bouldering pads are intended only to reduce the risk of injury. They do not eliminate the risks of climbing, falling, landing, or participating in bouldering activities.</p>
              <p>I accept full responsibility for inspecting the equipment before use, placing and using it correctly, learning and following appropriate climbing and bouldering safety practices, and ensuring that all users understand the risks involved.</p>
              <p>I agree that Big Rig Climbers is not responsible for injury, loss, damage, or death resulting from the use, misuse, placement, condition, movement, or reliance upon rented equipment, except where liability cannot legally be excluded.</p>
              <p>By ticking this box, I confirm that I have read, understood, and accepted this warning and risk acknowledgement, and that I voluntarily assume all risks associated with using Big Rig Climbers products.</p>
            </div>
          ) : (
            <div className="warn-hint">Tap to read the full risk acknowledgement before agreeing.</div>
          )}
          <label className={'warn-check' + (err && !agree ? ' bad' : '')}>
            <input type="checkbox" checked={agree} onChange={e => setAgree(e.target.checked)} />
            <span>I have read, understood, and agree to the above risk acknowledgement.</span>
          </label>
        </div>

        {err ? <div className="lowstock">{(!f.name || !f.email || !f.phone) ? 'Please fill in your contact details.' : 'Please tick the box to accept the warning before confirming.'}</div> : null}
        {a.draftBulkRate() > 0 ? <div className="spec discount" style={{ borderBottom: 0 }}><span>Bulk pad discount · {BR.pct(a.draftBulkRate())}</span><b>−{BR.fmt(a.draftBulkDiscount())}</b></div> : null}
        <div className="row" style={{ alignItems: 'center' }}><div className="tot mono">Total · <b style={{ fontSize: 16 }}>{BR.fmt(a.draftTotalNet())}</b> <span className="muted">pay in full</span></div></div>
        <button className="btn accent block" disabled={!agree} onClick={submit}>CONFIRM BOOKING ▸</button>
      </div>
      <Footer go={a.go} />
    </div>
  );
}

/* ---------------- CART ---------------- */
function Cart({ a }) {
  if (a.cart.length === 0) {
    return (
      <div className="screen">
        <div className="pad maxw col" style={{ gap: 14, alignItems: 'flex-start', padding: 40 }}>
          <div className="h2">Your cart is empty.</div>
          <div className="muted">Book some pads or grab gear from the shop.</div>
          <div className="row" style={{ gap: 10 }}>
            <button className="btn accent" onClick={() => a.go('book-dates')}>RENT PADS ▸</button>
            <button className="btn" onClick={() => a.go('shop')}>SHOP ▸</button>
          </div>
        </div>
        <Footer go={a.go} />
      </div>
    );
  }
  const rentSub = a.cart.filter(l => l.kind === 'rent').reduce((s, l) => s + l.unit * l.qty, 0);
  const buySub = a.cart.filter(l => l.kind === 'buy').reduce((s, l) => s + l.unit * l.qty, 0);
  return (
    <div className="screen">
      <div className="row cart-cols" style={{ gap: 0, alignItems: 'stretch' }}>
        <div className="col" style={{ flex: 1.5, padding: 22 }}>
          <div className="h2" style={{ marginBottom: 6 }}>Your cart</div>
          {a.cart.map((l, i) => {
            const p = BR.byId(l.id);
            const max = l.kind === 'rent' ? p.stock : undefined;
            return (
              <div key={l.key} className="line" style={i === a.cart.length - 1 ? { borderBottom: 0 } : null}>
                <Ph label={'[ ' + p.name.toLowerCase() + ' ]'} />
                <div className="meta">
                  <div className="pname">{p.name}</div>
                  {l.kind === 'rent'
                    ? <span className="tag rent">RENT · {BR.rangeLabel(l.period)} · {l.days} days</span>
                    : <span className="tag">BUY{l.size ? ' · size ' + l.size : ''}</span>}
                  <span className="linkish" onClick={() => a.removeLine(l.key)}>remove</span>
                </div>
                <div className="col" style={{ gap: 6, alignItems: 'flex-end' }}>
                  <Qty value={l.qty} onChange={(v) => a.setLineQty(l.key, v)} min={1} max={max} />
                  <div className="price">{BR.fmt(l.unit * l.qty)}</div>
                </div>
              </div>
            );
          })}
        </div>
        <div className="col sum" style={{ flex: 1, gap: 9, padding: 22, background: 'var(--panel2)', borderLeft: '2px solid var(--ink)' }}>
          <div className="kick">SUMMARY</div>
          {rentSub > 0 ? <div className="spec"><span>Rentals</span><b>{BR.fmt(rentSub)}</b></div> : null}
          {a.bulkDiscount() > 0 ? <div className="spec discount"><span>Bulk pad discount · {BR.pct(a.bulkRate())} ({a.padRentQty()} pads)</span><b>−{BR.fmt(a.bulkDiscount())}</b></div> : null}
          {buySub > 0 ? <div className="spec"><span>Shop items</span><b>{BR.fmt(buySub)}</b></div> : null}
          <div className="spec" style={{ borderBottom: 0 }}><span>Pickup</span><b>The shed · free</b></div>
          {a.bulkDiscount() === 0 && a.padRentQty() > 0 && a.padRentQty() < 3 ? <div className="muted" style={{ fontSize: 12 }}>Add {3 - a.padRentQty()} more pad{3 - a.padRentQty() === 1 ? '' : 's'} to unlock 10% off pad rentals.</div> : null}
          <div className="row" style={{ alignItems: 'center', marginTop: 4 }}><div className="tot mono">Pay in full</div><span style={{ flex: 1 }}></span><div className="tot"><b>{BR.fmt(a.cartTotal())}</b></div></div>
          <button className="btn accent block" onClick={() => a.go('checkout')}>CHECKOUT ▸</button>
          <button className="btn ghost block" onClick={() => a.go('shop')}>CONTINUE SHOPPING</button>
        </div>
      </div>
      <Footer go={a.go} />
    </div>
  );
}

/* ---------------- CHECKOUT ---------------- */
function Checkout({ a }) {
  const [f, setF] = useS({ name: '', email: '', phone: '', card: '', exp: '', cvc: '' });
  const [country, setCountry] = useS(DEFAULT_COUNTRY);
  const [err, setErr] = useS(false);
  const submit = () => {
    if (!f.name || !f.email || !f.phone || !f.card) { setErr(true); return; }
    a.placeOrder(f);
  };
  const fld = (k, lab, ph, flex) => (
    <div className={'ffield' + (err && !f[k] && (k === 'name' || k === 'email' || k === 'phone' || k === 'card') ? ' bad' : '')} style={flex ? { flex } : null}>
      <div className="lab">{lab}</div><input value={f[k]} onChange={e => setF({ ...f, [k]: e.target.value })} placeholder={ph} />
    </div>
  );
  return (
    <div className="screen">
      <div className="pad maxw col" style={{ gap: 11, maxWidth: 560 }}>
        <div className="kick">01 / CONTACT & PICKUP</div>
        {fld('name', 'Name', 'Your name')}
        <div className="row" style={{ gap: 8 }}>{fld('email', 'Email', 'you@email.com', 1)}<PhoneField country={country} onCountry={setCountry} value={f.phone} onChange={v => setF({ ...f, phone: v })} bad={err && !f.phone} /></div>
        <Ph style={{ minHeight: 80 }} label="[ pickup map — the shed ]" />
        <div className="kick">02 / PAYMENT</div>
        {fld('card', 'Card number', '•••• •••• •••• ••••')}
        <div className="row" style={{ gap: 8 }}>{fld('exp', 'Expiry', 'MM/YY', 1)}{fld('cvc', 'CVC', '•••', 1)}</div>
        <hr style={{ border: 'none', borderTop: '1.5px dashed var(--ph-line)', width: '100%' }} />
        {a.bulkDiscount() > 0 ? <div className="spec discount"><span>Bulk pad discount · {BR.pct(a.bulkRate())}</span><b>−{BR.fmt(a.bulkDiscount())}</b></div> : null}
        <div className="spec" style={{ borderBottom: 0 }}><span>Pay in full now</span><b>{BR.fmt(a.cartTotal())}</b></div>

        {err ? <div className="lowstock">Fill in your details to place the order.</div> : null}
        <button className="btn accent block" onClick={submit}>PLACE ORDER ▸</button>
        <div className="muted" style={{ fontSize: 12, textAlign: 'center' }}>Pay in full at checkout — no deposit, no hold.</div>
      </div>
      <Footer go={a.go} />
    </div>
  );
}

/* ---------------- ORDER DONE ---------------- */
function Done({ a }) {
  return (
    <div className="screen">
      <div className="pad maxw col" style={{ gap: 16, alignItems: 'flex-start', padding: 44, maxWidth: 560 }}>
        <div style={{ fontFamily: 'var(--head)', fontSize: 64, lineHeight: .9 }}>You're set! 🤙</div>
        <div className="kick">ORDER #{a.orderNo}</div>
        <div className="muted" style={{ fontSize: 17 }}>We've sent a confirmation. Collect your pads from the shed on your pick-up day — bring this order number.</div>
        <div className="note">Pickup: The Shed, North Lot · open Sat–Sun 7am–5pm</div>
        <button className="btn accent" onClick={() => a.go('home')}>BACK TO HOME ▸</button>
      </div>
      <Footer go={a.go} />
    </div>
  );
}

/* ---------------- ABOUT ---------------- */
function About({ a }) {
  return (
    <div className="screen">
      <div className="pad maxw col" style={{ gap: 12, borderBottom: '2px solid var(--ink)' }}>
        <div className="kick">OUR STORY</div>
        <div style={{ fontFamily: 'var(--head)', fontWeight: 700, fontSize: 52, lineHeight: .98, maxWidth: '13ch' }}>Too many pads. So we started lending them.</div>
        <div className="muted" style={{ fontSize: 17, maxWidth: '60ch' }}>Big Rig began in a garage stacked with crash pads. We'd rather they were under someone mid-project than gathering dust — so we rent them by the day and make the gear we wished we had.</div>
        <Ph className="hero" label="[ wide image — the crew + a wall of pads ]" />
      </div>
      <div className="split">
        <div className="half"><div className="kick">01 / WE LEND</div><div className="h2">Pads for everyone</div><Ph className="tall" label="[ image — pad pickup ]" /><div className="muted" style={{ fontSize: 14 }}>A full rack of big & small pads, booked by the day.</div><button className="btn ghost" onClick={() => a.go('book-dates')}>BOOK PADS ▸</button></div>
        <div className="half" style={{ background: 'var(--panel2)' }}><div className="kick">02 / WE MAKE</div><div className="h2">Gear we trust</div><Ph className="tall" label="[ image — workshop ]" /><div className="muted" style={{ fontSize: 14 }}>Tees, chalk, and the famous Calzone — tested on real rock.</div><button className="btn ghost" onClick={() => a.go('shop')}>SHOP GEAR ▸</button></div>
      </div>
      <div className="pad" style={{ borderBottom: '2px solid var(--ink)' }}>
        <div className="maxw row wrap" style={{ gap: 14, alignItems: 'center' }}>
          <Ph style={{ width: 200, minHeight: 150, flex: 'none' }} label="[ the calzone ]" />
          <div className="col" style={{ gap: 8, flex: 1, minWidth: 240 }}><div className="kick">🍕 WHY THE CALZONE</div><div className="h2">The topper that saves ankles</div><div className="muted" style={{ fontSize: 15 }}>Push two pads together and you get a gap right where you land. The Calzone is a thin pad you throw over the seam — no more rolling an ankle in the crack. The name? It just looked like one.</div></div>
        </div>
      </div>
      <div className="pad maxw">
        <div className="h2" style={{ marginBottom: 12 }}>Find us</div>
        <div className="g3">
          {[['North Shed', 'Open Sat–Sun · pickup'], ['Valley Lot', 'Open daily · pickup'], ['The crew', 'Say hi at the shed.']].map(([t, s], i) => (
            <div key={i} className="card"><Ph className="tall" label={'[ ' + (i < 2 ? 'map' : 'crew photo') + ' ]'} /><div className="pname">{t}</div><div className="muted" style={{ fontSize: 13 }}>{s}</div></div>
          ))}
        </div>
      </div>
      <Footer go={a.go} />
    </div>
  );
}

Object.assign(window, { Home, Shop, Product, BookDates, BookPads, BookConfirm, Cart, Checkout, Done, About });