/* ==========================================================
   YAPPY. — Checkout · Orders · Prescription upload · Free consult
   All services simulated. Nothing is sent, charged or stored remotely.
   ========================================================== */

function Field({ id, label, err, children }) {
  return (
    <div className="field">
      <label htmlFor={id}>{label}</label>
      {children}
      {err && <span className="err-msg" role="alert"><Icon name="alert" size={16} />{err}</span>}
    </div>
  );
}

/* ================= Checkout (single page) ================= */
function Checkout() {
  const { state, set } = useStore();
  const [f, setF] = React.useState({ email: '', phone: '', name: '', line: '', city: '', pin: '', age: false });
  const [err, setErr] = React.useState({});
  const [method, setMethod] = React.useState('UPI');
  const [outcome, setOutcome] = React.useState('success');
  const [busy, setBusy] = React.useState(false);
  const [failed, setFailed] = React.useState(false);
  const [code, setCode] = React.useState('');
  const [applied, setApplied] = React.useState('');
  const lock = React.useRef(false);
  useAdmin();
  const upd = (k) => (e) => setF({ ...f, [k]: e.target.type === 'checkbox' ? e.target.checked : e.target.value });

  if (state.cart.length === 0) {
    return (
      <main className="section" data-screen-label="Checkout — empty"><div className="wrap stack" style={{ '--gap': '18px', maxWidth: 700 }}>
        <h1 className="h2">Your cart is empty<span className="dot">.</span></h1>
        <a href="#/shop" className="btn btn-primary" style={{ alignSelf: 'flex-start' }}>Shop Yappy</a>
      </div></main>
    );
  }
  const sums = cartSums(state.cart, applied);
  const total = sums.total;
  const fill = () => setF({ email: 'sample@example.com', phone: '9876543210', name: 'Sample Customer', line: '1 Sample Street', city: 'Mumbai', pin: '400001', age: true });

  const place = (e) => {
    e.preventDefault();
    const x = {};
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(f.email)) x.email = 'Enter a valid email.';
    if (!/^[6-9]\d{9}$/.test(f.phone.replace(/\D/g, ''))) x.phone = 'Enter a 10-digit mobile number.';
    if (f.name.trim().length < 2) x.name = 'Enter your full name.';
    if (f.line.trim().length < 4) x.line = 'Enter your address.';
    if (f.city.trim().length < 2) x.city = 'Enter your city.';
    if (!/^\d{6}$/.test(f.pin)) x.pin = 'Enter a 6-digit PIN code.';
    if (!f.age) x.age = 'Please confirm you are 18 or over.';
    setErr(x);
    if (Object.keys(x).length) { const el = document.querySelector('.input.err, .check.err'); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 140, behavior: 'smooth' }); return; }
    if (lock.current) return; // prevent duplicate submission
    lock.current = true; setBusy(true); setFailed(false);
    setTimeout(() => {
      lock.current = false; setBusy(false);
      if (outcome !== 'success') { setFailed(true); return; }
      const ref = 'YP-' + Math.random().toString(36).slice(2, 7).toUpperCase();
      const order = { ref, items: state.cart, coupon: sums.coupon.ok ? sums.coupon.coupon.code : null, discount: sums.discount, total: sums.total, date: new Date().toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' }), name: f.name, city: f.city, contact: f.email, phone: f.phone, rx: 'awaiting', ship: 'held', file: null };
      if (sums.coupon.ok) saveAdmin((a) => ({ coupons: a.coupons.map((c) => c.id === sums.coupon.coupon.id ? { ...c, uses: (c.uses || 0) + 1 } : c) }));
      set((s) => ({ cart: [], orders: [order, ...s.orders] }));
      go('/order/' + ref + '?new=1');
    }, 1300);
  };

  return (
    <main data-screen-label="Checkout">
      <section className="wrap co-grid" style={{ padding: 'clamp(32px,5vw,64px) var(--pad) 100px' }}>
        <form className="stack" style={{ '--gap': '28px' }} onSubmit={place} noValidate>
          <div className="row" style={{ justifyContent: 'space-between' }}>
            <h1 className="h2">Checkout<span className="dot">.</span></h1>
            <button type="button" className="link" onClick={fill}>Fill sample details</button>
          </div>

          <fieldset className="co-block">
            <legend className="h4">1 · Contact</legend>
            <div className="grid-2" style={{ '--g': '14px' }}>
              <Field id="em" label="Email" err={err.email}><input id="em" className={'input' + (err.email ? ' err' : '')} type="email" autoComplete="email" value={f.email} onChange={upd('email')} /></Field>
              <Field id="ph" label="Mobile" err={err.phone}><input id="ph" className={'input' + (err.phone ? ' err' : '')} type="tel" inputMode="numeric" autoComplete="tel" value={f.phone} onChange={upd('phone')} /></Field>
            </div>
          </fieldset>

          <fieldset className="co-block">
            <legend className="h4">2 · Delivery</legend>
            <Field id="nm" label="Full name" err={err.name}><input id="nm" className={'input' + (err.name ? ' err' : '')} autoComplete="name" value={f.name} onChange={upd('name')} /></Field>
            <Field id="ad" label="Address" err={err.line}><input id="ad" className={'input' + (err.line ? ' err' : '')} autoComplete="street-address" value={f.line} onChange={upd('line')} /></Field>
            <div className="grid-2" style={{ '--g': '14px' }}>
              <Field id="ct" label="City" err={err.city}><input id="ct" className={'input' + (err.city ? ' err' : '')} autoComplete="address-level2" value={f.city} onChange={upd('city')} /></Field>
              <Field id="pn" label="PIN code" err={err.pin}><input id="pn" className={'input' + (err.pin ? ' err' : '')} inputMode="numeric" maxLength={6} autoComplete="postal-code" value={f.pin} onChange={(e) => setF({ ...f, pin: e.target.value.replace(/\D/g, '') })} /></Field>
            </div>
          </fieldset>

          <fieldset className="co-block">
            <legend className="h4">3 · Payment</legend>
            <div className="seg">{['UPI', 'Card', 'Net banking', 'Cash on delivery'].map((m) => <button type="button" key={m} aria-pressed={method === m} onClick={() => setMethod(m)}>{m}</button>)}</div>
            <p className="fine muted">Simulated payment — no card or bank details are collected.</p>
            <div className="row" style={{ gap: 10 }}>
              <span className="label" style={{ opacity: .6 }}>Preview:</span>
              <div className="seg"><button type="button" aria-pressed={outcome === 'success'} onClick={() => setOutcome('success')} style={{ minHeight: 38, fontSize: 14 }}>Success</button><button type="button" aria-pressed={outcome === 'fail'} onClick={() => setOutcome('fail')} style={{ minHeight: 38, fontSize: 14 }}>Failure</button></div>
            </div>
          </fieldset>

          <label className={'check' + (f.age ? ' on' : '') + (err.age ? ' err' : '')} style={err.age ? { borderColor: '#B3261E' } : null}>
            <input type="checkbox" checked={f.age} onChange={upd('age')} />
            <span className="small">I confirm I am 18 or over and agree to the <a href="#/policy/terms" style={{ textDecoration: 'underline' }}>terms</a>. I understand a valid prescription is required before my order ships.</span>
          </label>
          {err.age && <span className="err-msg" style={{ marginTop: -16 }}><Icon name="alert" size={16} />{err.age}</span>}

          {failed && <div className="card row" style={{ background: '#F9D3BF', gap: 12, flexWrap: 'nowrap' }} role="alert"><Icon name="alert" /><span className="small"><strong>Payment didn’t go through.</strong> Nothing was charged. Please try again.</span></div>}

          <button className="btn btn-primary btn-block" disabled={busy} style={{ minHeight: 60 }}>
            {busy ? <><span className="spinner" /> Placing order</> : <>Place order {total !== null ? '· ' + fmtPrice(total) : ''}</>}
          </button>
        </form>

        <aside className="co-sum">
          <div className="h4" style={{ marginBottom: 16 }}>Order summary</div>
          <div className="stack" style={{ '--gap': '14px' }}>
            {state.cart.map((it) => { const p = PRODUCTS[it.id]; return (
              <div key={it.id} className="row" style={{ gap: 14, flexWrap: 'nowrap' }}>
                <div style={{ position: 'relative', width: 64, height: 64, borderRadius: 14, background: p.hue, display: 'grid', placeItems: 'center', flex: 'none' }}>
                  <img src={p.cut} alt="" style={{ width: '70%' }} />
                  <span className="cart-badge" style={{ position: 'absolute', top: -6, right: -6 }}>{it.qty}</span>
                </div>
                <div style={{ flex: 1 }}><div className="h4">{p.name}.</div><div className="fine muted">{p.pct} Variant* · {PACK.count}</div></div>
                <SkuPrice id={p.id} />
              </div>
            ); })}
          </div>
          <hr className="rule" style={{ margin: '20px 0' }} />
          <div className="stack" style={{ '--gap': '10px' }}>
            <form className="row" style={{ gap: 8, flexWrap: 'nowrap' }} onSubmit={(e) => { e.preventDefault(); setApplied(code.trim()); }}>
              <input className="input" style={{ flex: 1, minWidth: 0, height: 48, textTransform: 'uppercase' }} placeholder="Coupon code" aria-label="Coupon code" value={code} onChange={(e) => setCode(e.target.value)} />
              <button className="btn btn-ghost btn-sm" style={{ minHeight: 48 }}>Apply</button>
            </form>
            {applied && <div className={sums.coupon.ok ? 'small' : 'err-msg'} style={{ display: 'flex', gap: 8, alignItems: 'center', justifyContent: 'space-between' }}><span>{sums.coupon.ok ? '✓ ' : ''}{sums.coupon.msg}</span>{sums.coupon.ok && <button className="link" style={{ fontSize: 11, minHeight: 0 }} onClick={() => { setApplied(''); setCode(''); }}>Remove</button>}</div>}
            <div className="row" style={{ justifyContent: 'space-between' }}><span className="small">Subtotal</span>{sums.subtotal !== null ? <span>{fmtPrice(sums.subtotal)}</span> : <Tbc>TBC</Tbc>}</div>
            {sums.saving > 0 && <div className="row" style={{ justifyContent: 'space-between' }}><span className="small">Offer savings (included)</span><span className="small">−{fmtPrice(sums.saving)}</span></div>}
            {sums.discount > 0 && <div className="row" style={{ justifyContent: 'space-between' }}><span className="small">Coupon {sums.coupon.coupon.code}</span><span>−{fmtPrice(sums.discount)}</span></div>}
            <div className="row" style={{ justifyContent: 'space-between' }}><span className="small">Shipping</span>{sums.shipping !== null ? <span>{sums.shipping === 0 ? 'Free' : fmtPrice(sums.shipping)}</span> : <Tbc>TBC</Tbc>}</div>
            <div className="row" style={{ justifyContent: 'space-between' }}><span className="h4">Total</span>{total !== null ? <strong>{fmtPrice(total)}</strong> : <Tbc solid>Prices TBC</Tbc>}</div>
          </div>
          <div className="co-next">
            <div className="label" style={{ marginBottom: 12 }}>After you order</div>
            {[['doc', 'Upload your prescription'], ['decision', 'We verify it'], ['box', 'We ship your order']].map(([ic, t], i) => (
              <div key={t} className="row" style={{ gap: 12, flexWrap: 'nowrap', padding: '6px 0' }}><Icon name={ic} size={22} /><span className="small">{t}</span></div>
            ))}
            <a href="#/consult" className="small" style={{ display: 'block', marginTop: 10, textDecoration: 'underline' }}>No prescription? Consult our doctor for free.</a>
          </div>
        </aside>
      </section>
      <style>{`
        .co-grid{display:grid;grid-template-columns:1fr 400px;gap:clamp(28px,5vw,72px);align-items:start}
        .co-block{border:0;display:grid;gap:14px}
        .co-block legend{margin-bottom:14px}
        .co-sum{position:sticky;top:100px;background:var(--cream-2);border-radius:22px;padding:26px}
        .co-next{margin-top:22px;padding:18px;border-radius:16px;background:var(--cream)}
        @media (max-width:900px){.co-grid{grid-template-columns:1fr}.co-sum{position:relative;top:0;order:-1}}
      `}</style>
    </main>
  );
}

/* ================= Prescription upload ================= */
function RxUpload({ order }) {
  const { updateOrder } = useStore();
  const [file, setFile] = React.useState(null);
  const [drag, setDrag] = React.useState(false);
  const [err, setErr] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const inp = React.useRef(null);
  const pick = (fl) => {
    if (!fl) return;
    const ok = /\.(pdf|jpe?g|png|heic)$/i.test(fl.name);
    if (!ok) { setErr('Please upload a PDF, JPG or PNG.'); return; }
    if (fl.size > 10 * 1024 * 1024) { setErr('File is larger than 10 MB.'); return; }
    setErr(''); setFile({ name: fl.name, size: fl.size });
  };
  const useSample = () => { setErr(''); setFile({ name: 'sample-prescription.pdf', size: 248000 }); };
  const submit = () => {
    if (!file || busy) return;
    setBusy(true);
    // Simulated upload — the file is NOT read, transmitted or stored. Only the filename is kept for display.
    setTimeout(() => { updateOrder(order.ref, { rx: 'verifying', file: file.name }); setBusy(false); }, 1200);
  };
  return (
    <div className="stack" style={{ '--gap': '14px' }}>
      <div
        className="rx-drop" data-drag={drag}
        onDragOver={(e) => { e.preventDefault(); setDrag(true); }} onDragLeave={() => setDrag(false)}
        onDrop={(e) => { e.preventDefault(); setDrag(false); pick(e.dataTransfer.files[0]); }}
        onClick={() => inp.current && inp.current.click()} role="button" tabIndex={0}
        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') inp.current.click(); }}>
        <input ref={inp} type="file" accept=".pdf,.jpg,.jpeg,.png,.heic" hidden onChange={(e) => pick(e.target.files[0])} />
        {file ? (
          <div className="row" style={{ gap: 14, flexWrap: 'nowrap' }}>
            <Icon name="doc" size={36} />
            <div style={{ textAlign: 'left', minWidth: 0 }}><div className="h4" style={{ overflowWrap: 'anywhere' }}>{file.name}</div><div className="fine muted">{Math.round(file.size / 1024)} KB · ready to submit</div></div>
          </div>
        ) : (
          <div className="stack" style={{ '--gap': '8px', justifyItems: 'center' }}>
            <Icon name="doc" size={40} />
            <div className="h4">Drop your prescription here</div>
            <div className="small muted">or tap to choose · PDF, JPG or PNG · up to 10 MB</div>
          </div>
        )}
      </div>
      {err && <span className="err-msg" role="alert"><Icon name="alert" size={16} />{err}</span>}
      <div className="row" style={{ justifyContent: 'space-between' }}>
        <div className="row" style={{ gap: 16 }}>
          {file && <button className="link" style={{ fontSize: 11 }} onClick={() => setFile(null)}>Remove</button>}
          {!file && <button className="link" style={{ fontSize: 11 }} onClick={useSample}>Use sample file</button>}
        </div>
        <button className="btn btn-primary" disabled={!file || busy} onClick={submit}>{busy ? <><span className="spinner" /> Uploading</> : 'Submit prescription'}</button>
      </div>
      <p className="fine muted">Prototype: files are not uploaded or stored. In the live service, prescriptions are seen only by our verification team.</p>
      <style>{`
        .rx-drop{border:2px dashed rgba(14,42,23,.4);border-radius:18px;padding:32px 20px;text-align:center;cursor:pointer;background:#FBF3E4;transition:background .2s,border-color .2s;display:grid;place-items:center;min-height:170px}
        .rx-drop:hover,.rx-drop[data-drag=true]{border-color:var(--forest);background:var(--cream-2)}
      `}</style>
    </div>
  );
}

/* ================= Order detail ================= */
function OrderPage({ ref_ }) {
  const { state, updateOrder } = useStore();
  const o = state.orders.find((x) => x.ref === ref_);
  const isNew = getQuery().get('new') === '1';
  if (!o) return <NotFound />;
  const steps = [
    ['Order placed', true],
    ['Prescription uploaded', o.rx !== 'awaiting'],
    ['Prescription verified', o.rx === 'verified'],
    ['Shipped', ['shipped', 'delivered'].includes(o.ship)],
    ['Delivered', o.ship === 'delivered'],
  ];
  const stopped = o.rx === 'rejected';
  const curIdx = steps.findIndex((s) => !s[1]);
  return (
    <main data-screen-label="Order detail">
      {isNew && (
        <section className="bg-forest on-dark" style={{ position: 'relative', overflow: 'hidden' }}>
          <Flow shape="c" color="var(--forest-2)" />
          <div className="wrap" style={{ position: 'relative', zIndex: 1, padding: 'clamp(48px,6vw,88px) var(--pad)' }}>
            <div className="label" style={{ color: 'var(--lime)', marginBottom: 14 }}>Order {o.ref} · simulated</div>
            <h1 className="h1" style={{ fontSize: 'clamp(44px,6.4vw,104px)' }}>Thank you.<br />One last <span className="dot">step.</span></h1>
            <p className="lead" style={{ opacity: .85, marginTop: 20 }}>Upload your prescription below and we’ll ship as soon as it’s verified.</p>
          </div>
        </section>
      )}
      <section className="wrap od-grid" style={{ padding: 'clamp(32px,5vw,64px) var(--pad) 100px' }}>
        <div className="stack" style={{ '--gap': '22px' }}>
          {!isNew && <div className="row" style={{ justifyContent: 'space-between' }}><h1 className="h2">Order {o.ref}<span className="dot">.</span></h1><a href="#/account" className="link">All orders</a></div>}

          {/* Prescription card */}
          <div className="card-line stack" style={{ '--gap': '16px' }}>
            <div className="row" style={{ justifyContent: 'space-between' }}>
              <div className="h3">Prescription</div><span className={'status ' + RX[o.rx].cls}>{RX[o.rx].label}</span>
            </div>
            {o.rx === 'awaiting' && <>
              <p className="small">Upload a valid prescription for this order. Your order is held until it’s verified.</p>
              <RxUpload order={o} />
              <div className="card row" style={{ gap: 14, flexWrap: 'nowrap', background: 'var(--coral)' }}>
                <Icon name="consult" size={28} style={{ flex: 'none' }} />
                <div className="small" style={{ flex: 1 }}><strong>Don’t have a prescription?</strong> Consult our doctor for free.</div>
                <a href={'#/consult?order=' + o.ref} className="btn btn-primary btn-sm">Book</a>
              </div>
            </>}
            {o.rx === 'verifying' && <div className="row" style={{ gap: 14, flexWrap: 'nowrap' }}><span className="spinner" /><p className="small">We’ve received <strong>{o.file}</strong> and are checking it. This usually doesn’t take long (timing TBC).</p></div>}
            {o.rx === 'verified' && <div className="stack" style={{ '--gap': '12px' }}>
              <p className="small">{o.issuedRx ? 'Our doctor issued your prescription after your consultation. A copy has been emailed to you.' : 'Your prescription has been verified. Your order is being prepared.'}</p>
              {o.issuedRx && <RxViewButton rx={o.issuedRx} />}
            </div>}
            {o.rx === 'awaiting' && o.consultId && <div className="card row" style={{ gap: 12, flexWrap: 'nowrap' }}><Icon name="calendar" size={24} /><span className="small">Free consultation booked. If our doctor prescribes, it will be added here automatically.</span></div>}
            {o.rx === 'rejected' && <div className="stack" style={{ '--gap': '12px' }}>
              <p className="small">We couldn’t accept the prescription provided, so this order has been cancelled. Any payment will be refunded in line with our <a href="#/policy/refunds" style={{ textDecoration: 'underline' }}>refund policy</a> (terms TBC).</p>
              <div className="row"><a href="#/support" className="btn btn-ghost btn-sm">Contact support</a><button className="link" onClick={() => updateOrder(o.ref, { rx: 'awaiting', ship: 'held', file: null })}>Upload a different prescription</button></div>
            </div>}
          </div>

          {/* Tracking */}
          <div className="card-line">
            <div className="h3" style={{ marginBottom: 22 }}>Tracking</div>
            <div className="tl">
              {steps.map(([t, done], i) => {
                const stop = stopped && i === 2;
                return (
                  <div key={t} className={'tl-item' + (done ? ' done' : '') + (!stopped && i === curIdx ? ' cur' : '') + (stop ? ' stop' : '')}>
                    <span className="tl-dot">{done && <Icon name="check" size={16} />}{stop && <Icon name="close" size={14} />}</span>
                    <div className="h4" style={{ fontSize: 15, opacity: done || i === curIdx || stop ? 1 : .45 }}>{stop ? 'Prescription not accepted · order cancelled' : t}</div>
                  </div>
                );
              })}
            </div>
          </div>

          <p className="fine muted">Prototype: verification and shipping are updated by the Operations team in the <a href="Yappy Admin.html" target="_blank" style={{ textDecoration: 'underline' }}>admin panel</a>.</p>
        </div>

        <aside className="stack" style={{ '--gap': '14px' }}>
          <div className="card stack" style={{ '--gap': '14px' }}>
            <div className="row" style={{ justifyContent: 'space-between' }}><div className="h4">Items</div><span className={'status ' + SHIP[o.ship].cls}>{SHIP[o.ship].label}</span></div>
            {o.items.map((it) => { const p = PRODUCTS[it.id]; return (
              <div key={it.id} className="row" style={{ gap: 12, flexWrap: 'nowrap' }}>
                <div style={{ width: 54, height: 54, borderRadius: 12, background: p.hue, display: 'grid', placeItems: 'center', flex: 'none' }}><img src={p.cut} alt="" style={{ width: '70%' }} /></div>
                <div style={{ flex: 1 }}><div className="h4">{p.name}.</div><div className="fine muted">Qty {it.qty} · {p.pct} Variant*</div></div>
              </div>
            ); })}
            <hr className="rule" />
            <div className="fine muted">Placed {o.date} · Deliver to {o.name}, {o.city}</div>
          </div>
          <a href="#/support" className="card row" style={{ gap: 12, flexWrap: 'nowrap' }}><Icon name="support" size={26} /><span className="small">Questions about this order? <u>Contact support</u></span></a>
        </aside>
      </section>
      <style>{`.od-grid{display:grid;grid-template-columns:1fr 360px;gap:clamp(24px,4vw,56px);align-items:start}@media (max-width:900px){.od-grid{grid-template-columns:1fr}}`}</style>
    </main>
  );
}

/* ================= Orders list ================= */
function Orders() {
  const { state, reset } = useStore();
  return (
    <main data-screen-label="My orders">
      <section className="section" style={{ paddingTop: 'clamp(40px,5vw,72px)' }}>
        <div className="wrap" style={{ maxWidth: 1000 }}>
          <div className="row" style={{ justifyContent: 'space-between', marginBottom: 32 }}>
            <h1 className="h2">My orders<span className="dot">.</span></h1>
            <span className="flag">Simulated</span>
          </div>
          {state.orders.length === 0 ? (
            <div className="card stack" style={{ '--gap': '16px', padding: 36 }}>
              <div className="h3">No orders yet.</div>
              <p className="small muted">Once you order, you’ll upload your prescription and track delivery here.</p>
              <a href="#/shop" className="btn btn-primary" style={{ justifySelf: 'start' }}>Shop Yappy</a>
            </div>
          ) : (
            <div className="stack" style={{ '--gap': '12px' }}>
              {state.orders.map((o) => (
                <a key={o.ref} href={'#/order/' + o.ref} className="card ord-row">
                  <div className="row" style={{ gap: 8, flexWrap: 'nowrap' }}>
                    {o.items.map((it) => <div key={it.id} style={{ width: 52, height: 52, borderRadius: 12, background: PRODUCTS[it.id].hue, display: 'grid', placeItems: 'center' }}><img src={PRODUCTS[it.id].cut} alt="" style={{ width: '70%' }} /></div>)}
                  </div>
                  <div><div className="h4">{o.ref}</div><div className="fine muted">{o.date} · {o.items.map((i) => PRODUCTS[i.id].name + '.').join(' ')}</div></div>
                  <div className="row" style={{ gap: 8 }}><span className={'status ' + RX[o.rx].cls}>{RX[o.rx].label}</span>{o.ship !== 'held' && <span className={'status ' + SHIP[o.ship].cls}>{SHIP[o.ship].label}</span>}</div>
                  <span className="link" style={{ justifySelf: 'end' }}>{o.rx === 'awaiting' ? 'Upload' : 'View'} <Icon name="arrow" size={16} /></span>
                </a>
              ))}
            </div>
          )}
          <button className="link" style={{ marginTop: 40 }} onClick={reset}>Reset demo data</button>
        </div>
        <style>{`.ord-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:20px;align-items:center}@media (max-width:760px){.ord-row{grid-template-columns:auto 1fr}.ord-row>*:nth-child(3),.ord-row>*:nth-child(4){grid-column:1/-1;justify-self:start!important}}`}</style>
      </section>
    </main>
  );
}

/* ================= Free doctor consultation ================= */
function FreeConsult() {
  const { set } = useStore();
  const orderRef = getQuery().get('order');
  const [f, setF] = React.useState({ name: '', phone: '', email: '', agey: '', sex: '', mode: 'Video', day: 0, slot: '', age: false });
  const [err, setErr] = React.useState({});
  const [busy, setBusy] = React.useState(false);
  const [done, setDone] = React.useState(null);
  const days = Array.from({ length: 5 }, (_, i) => { const d = new Date(2026, 9, 26 + i); return { dow: d.toLocaleDateString('en-GB', { weekday: 'short' }), d: d.getDate(), m: d.toLocaleDateString('en-GB', { month: 'short' }) }; });
  const slots = ['10:00', '11:30', '13:00', '15:00', '17:30', '19:00'];
  const taken = (s) => ((s.charCodeAt(1) + f.day) % 4) === 0;
  const book = (e) => {
    e.preventDefault();
    const x = {};
    if (f.name.trim().length < 2) x.name = 'Enter your name.';
    if (!/^[6-9]\d{9}$/.test(f.phone.replace(/\D/g, ''))) x.phone = 'Enter a 10-digit mobile number.';
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(f.email)) x.email = 'Enter your email — your prescription is sent here.';
    if (!f.slot) x.slot = 'Choose a time.';
    if (!f.age) x.age = 'Please confirm you are 18 or over.';
    setErr(x); if (Object.keys(x).length || busy) return;
    setBusy(true);
    setTimeout(() => { setBusy(false); const when = `${days[f.day].dow} ${days[f.day].d} ${days[f.day].m}, ${f.slot}`; setDone(when);
      const id = uid('CN-');
      set((s) => ({
        consults: [{ id, when, mode: f.mode, name: f.name, phone: f.phone, email: f.email, age: f.agey, sex: f.sex, orderRef: orderRef || null, status: 'scheduled', created: Date.now() }, ...s.consults],
        orders: orderRef ? s.orders.map((o) => o.ref === orderRef ? { ...o, consultId: id } : o) : s.orders,
      })); }, 1000);
  };
  return (
    <main data-screen-label="Free consultation">
      <section className="bg-coral" style={{ position: 'relative', overflow: 'hidden' }}>
        <Flow shape="c" color="#F7A57F" />
        <div className="wrap" style={{ position: 'relative', zIndex: 1, padding: 'clamp(56px,8vw,120px) var(--pad) clamp(48px,6vw,88px)' }}>
          <div className="kicker" style={{ marginBottom: 18 }}>Don’t have a prescription?</div>
          <h1 className="h1">Consult our<br />doctor. For free<span style={{ color: 'var(--cream)' }}>.</span></h1>
          <p className="lead" style={{ marginTop: 22 }}>A short phone or video call with a qualified doctor. No charge, no obligation.</p>
        </div>
      </section>

      <section className="wrap fcp-grid" style={{ padding: 'clamp(40px,6vw,88px) var(--pad) 100px' }}>
        <div className="stack" style={{ '--gap': '18px' }}>
          {[['calendar', 'Book a time', 'Pick a slot that suits you.'], ['consult', 'Talk to a doctor', 'They’ll ask a few questions about your health.'], ['decision', 'Doctor decides', 'If appropriate, they issue a prescription — attached to your order automatically.']].map(([ic, h, d], i) => (
            <div key={h} className="row" style={{ gap: 18, flexWrap: 'nowrap', alignItems: 'flex-start', paddingBottom: 18, borderBottom: '1px solid rgba(14,42,23,.15)' }}>
              <Icon name={ic} size={36} style={{ flex: 'none' }} />
              <div className="stack" style={{ '--gap': '4px' }}><div className="h4">{h}</div><p className="small muted">{d}</p></div>
            </div>
          ))}
          <p className="fine muted">The doctor decides independently. A prescription is never guaranteed, and we won’t pressure you either way. Doctor details and credentials will be shown once verified.</p>
        </div>

        {done ? (
          <div className="card-line stack" style={{ '--gap': '16px' }} role="status">
            <span className="status s-ok" style={{ justifySelf: 'start' }}>Booked · simulated</span>
            <div className="h2" style={{ fontSize: 'clamp(30px,3.4vw,46px)' }}>See you {done}<span className="dot">.</span></div>
            <p className="small">{f.mode} consultation. In the live service, you’d get a confirmation by SMS. No message has been sent.</p>
            {orderRef && <p className="small">If the doctor prescribes, it will be attached to order <strong>{orderRef}</strong>.</p>}
            <div className="row">{orderRef ? <a href={'#/order/' + orderRef} className="btn btn-primary">Back to order</a> : <a href="#/shop" className="btn btn-primary">Browse Yappy</a>}<button className="link" onClick={() => setDone(null)}>Book another time</button></div>
          </div>
        ) : (
          <form className="card-line stack" style={{ '--gap': '18px' }} onSubmit={book} noValidate>
            <div className="row" style={{ justifyContent: 'space-between' }}><div className="h3">Book your free call</div><span className="pill" style={{ background: 'var(--lime)' }}>Free</span></div>
            <div className="grid-2" style={{ '--g': '12px' }}>
              <Field id="cn" label="Name" err={err.name}><input id="cn" className={'input' + (err.name ? ' err' : '')} value={f.name} autoComplete="name" onChange={(e) => setF({ ...f, name: e.target.value })} /></Field>
              <Field id="cp" label="Mobile" err={err.phone}><input id="cp" className={'input' + (err.phone ? ' err' : '')} inputMode="numeric" autoComplete="tel" value={f.phone} onChange={(e) => setF({ ...f, phone: e.target.value })} /></Field>
            </div>
            <Field id="ce" label="Email (prescription is sent here)" err={err.email}><input id="ce" type="email" className={'input' + (err.email ? ' err' : '')} value={f.email} autoComplete="email" onChange={(e) => setF({ ...f, email: e.target.value })} /></Field>
            <div className="grid-2" style={{ '--g': '12px' }}>
              <Field id="ca" label="Age (optional)"><input id="ca" inputMode="numeric" maxLength={3} className="input" value={f.agey} onChange={(e) => setF({ ...f, agey: e.target.value.replace(/\D/g, '') })} /></Field>
              <div className="field"><label>Sex (optional)</label><div className="seg">{['F', 'M', 'Other'].map((x) => <button type="button" key={x} aria-pressed={f.sex === x} onClick={() => setF({ ...f, sex: x })} style={{ minHeight: 54 }}>{x}</button>)}</div></div>
            </div>
            <div className="field"><label>Call type</label><div className="seg">{['Video', 'Phone'].map((m) => <button type="button" key={m} aria-pressed={f.mode === m} onClick={() => setF({ ...f, mode: m })}>{m}</button>)}</div></div>
            <div className="field"><label>Day</label>
              <div style={{ display: 'flex', gap: 8, overflowX: 'auto' }}>
                {days.map((d, i) => (
                  <button type="button" key={i} onClick={() => setF({ ...f, day: i, slot: '' })} aria-pressed={f.day === i} style={{ flex: 'none', width: 68, padding: '10px 0', borderRadius: 14, border: '2px solid ' + (f.day === i ? 'var(--forest)' : 'rgba(14,42,23,.2)'), background: f.day === i ? 'var(--forest)' : '#FBF3E4', color: f.day === i ? 'var(--cream)' : 'var(--forest)', display: 'grid', gap: 2 }}>
                    <span className="label" style={{ opacity: .7, fontSize: 10 }}>{d.dow}</span><span className="h3">{d.d}</span>
                  </button>
                ))}
              </div>
            </div>
            <div className="field"><label>Time</label>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8 }}>
                {slots.map((s) => { const t = taken(s); return <button type="button" key={s} disabled={t} aria-pressed={f.slot === s} onClick={() => setF({ ...f, slot: s })} style={{ height: 48, borderRadius: 12, border: '2px solid ' + (f.slot === s ? 'var(--forest)' : 'rgba(14,42,23,.2)'), background: f.slot === s ? 'var(--forest)' : t ? 'transparent' : '#FBF3E4', color: f.slot === s ? 'var(--cream)' : 'var(--forest)', opacity: t ? .35 : 1, textDecoration: t ? 'line-through' : 'none', fontFamily: 'var(--f-head)', fontWeight: 700 }}>{s}</button>; })}
              </div>
              {err.slot && <span className="err-msg"><Icon name="alert" size={16} />{err.slot}</span>}
            </div>
            <label className={'check' + (f.age ? ' on' : '')} style={err.age ? { borderColor: '#B3261E' } : null}><input type="checkbox" checked={f.age} onChange={(e) => setF({ ...f, age: e.target.checked })} /><span className="small">I’m 18 or over and agree to share my details with the doctor for this consultation.</span></label>
            {err.age && <span className="err-msg"><Icon name="alert" size={16} />{err.age}</span>}
            <button className="btn btn-primary btn-block" disabled={busy}>{busy ? <><span className="spinner" /> Booking</> : 'Book free consultation'}</button>
            <p className="fine muted">Simulated booking — no appointment is created and no message is sent.</p>
          </form>
        )}
      </section>
      <style>{`.fcp-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,6vw,96px);align-items:start}@media (max-width:900px){.fcp-grid{grid-template-columns:1fr}}`}</style>
    </main>
  );
}

function DemoControl({ title, children }) {
  return (
    <div style={{ border: '2px dashed rgba(14,42,23,.35)', borderRadius: 18, padding: 18, display: 'grid', gap: 12, background: 'repeating-linear-gradient(135deg,rgba(14,42,23,.03) 0 10px,transparent 10px 20px)' }}>
      <div className="row" style={{ justifyContent: 'space-between' }}><span className="label">{title}</span><span className="flag">Prototype only</span></div>
      {children}
    </div>
  );
}

Object.assign(window, { Checkout, OrderPage, Orders, FreeConsult, DemoControl });

function RxViewButton({ rx }) {
  const [open, setOpen] = React.useState(false);
  return (<>
    <button className="btn btn-ghost btn-sm" style={{ justifySelf: 'start' }} onClick={() => setOpen(true)}><Icon name="doc" size={18} /> View prescription</button>
    {open && <EmailPreview rx={rx} onClose={() => setOpen(false)} />}
  </>);
}
window.RxViewButton = RxViewButton;