/* ==========================================================
   YAPPY. — Shop + Product page
   ========================================================== */

function Shop() {
  useReveal();
  return (
    <main data-screen-label="Shop">
      <section className="section" style={{ paddingBottom: 0 }}>
        <div className="wrap stack" style={{ '--gap': '18px' }}>
          <div className="kicker" style={{ color: 'var(--signal)' }}>Shop</div>
          <h1 className="h1">Set your<br />status<span className="dot">.</span></h1>
        </div>
      </section>
      <Discovery />
      <section className="wrap" style={{ paddingBottom: 'clamp(64px,8vw,110px)' }}>
        <a href="#/consult" className="card row" style={{ justifyContent: 'space-between', gap: 20, padding: '24px 28px' }}>
          <div className="row" style={{ gap: 16, flexWrap: 'nowrap' }}><Icon name="consult" size={36} /><div className="stack" style={{ '--gap': '4px' }}><div className="h4">Don’t have a prescription?</div><span className="small">Consult our doctor for free.</span></div></div>
          <span className="link">Book now <Icon name="arrow" size={16} /></span>
        </a>
      </section>
    </main>
  );
}

function PDP({ id }) {
  const p = PRODUCTS[id];
  const { add, setCartOpen } = useStore();
  const [view, setView] = React.useState(0);
  const [qty, setQty] = React.useState(1);
  const [added, setAdded] = React.useState(false);
  const adm = useAdmin();
  const oos = adm.stock[id] === false;
  React.useEffect(() => { setView(0); setQty(1); }, [id]);
  if (!p) return <NotFound />;
  const views = [
    { k: 'Pack', render: () => <Pack p={p} width="68%" rotate={-3} /> },
    { k: 'Studio', render: () => <img src={p.photo} alt={`${p.name} pouch, studio`} style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> },
    { k: 'Detail', render: () => <img src={p.photo} alt={`${p.name} pouch, material detail`} style={{ width: '100%', height: '100%', objectFit: 'cover', transform: 'scale(2.4)', transformOrigin: '30% 72%' }} /> },
    { k: 'Back', render: () => <div className="ph" style={{ width: '80%', height: '80%', background: 'rgba(243,227,199,.9)', color: 'var(--forest)' }}><div className="stack" style={{ '--gap': '8px' }}><div className="h4">Back of pack</div><p className="fine">Approved artwork to be supplied.</p></div></div> },
  ];
  const addToCart = () => { add(id, qty); setAdded(true); setTimeout(() => setAdded(false), 1500); setCartOpen(true); };
  const buyNow = () => { add(id, qty); go('/checkout'); };
  const others = SKU_ORDER.filter((k) => k !== id);
  const dot = p.id === 'dnd' ? 'var(--cream)' : 'var(--signal)';

  return (
    <main data-screen-label={`PDP ${p.name}`}>
      <section style={{ background: p.hue, color: p.ink }} className={p.onDark ? 'on-dark' : ''}>
        <div className="wrap pdp-grid">
          <div className="pdp-gal">
            <div className="pdp-main" style={{ background: p.onDark ? 'var(--forest-2)' : 'rgba(14,42,23,.06)' }}>
              <Flow shape="a" color={p.tone2} style={{ opacity: view === 0 ? 1 : 0, transition: 'opacity .3s' }} />
              <div style={{ position: 'relative', zIndex: 1, width: '100%', height: '100%', display: 'grid', placeItems: 'center', overflow: 'hidden' }}>{views[view].render()}</div>
            </div>
            <div className="pdp-thumbs" role="tablist" aria-label="Product images">
              {views.map((v, i) => (
                <button key={v.k} role="tab" aria-selected={view === i} onClick={() => setView(i)} aria-label={v.k}
                  style={{ outline: view === i ? `3px solid ${p.ink}` : 'none', outlineOffset: 2, background: p.onDark ? 'var(--forest-2)' : 'rgba(14,42,23,.08)' }}>
                  {v.k === 'Back' ? <span className="label" style={{ fontSize: 10 }}>Back</span> :
                    <img src={v.k === 'Pack' ? p.cut : p.photo} alt="" style={{ width: v.k === 'Pack' ? '60%' : '100%', height: v.k === 'Pack' ? 'auto' : '100%', objectFit: 'cover', transform: v.k === 'Detail' ? 'scale(2.4)' : 'none', transformOrigin: '30% 72%' }} />}
                </button>
              ))}
            </div>
          </div>

          <div className="stack" style={{ '--gap': '22px' }}>
            <div className="row" style={{ gap: 10 }}>
              <a href="#/shop" className="label" style={{ opacity: .7 }}>Shop</a><span className="label" style={{ opacity: .4 }}>/</span><span className="label">{p.name}.</span>
            </div>
            <div>
              <div className="label" style={{ marginBottom: 10, opacity: .75 }}>{PACK.descriptor}</div>
              <SkuName p={p} size="clamp(84px,10vw,160px)" dotColor={dot} />
            </div>
            <div className="row">
              <VariantPill p={p} onDark={p.onDark} />
              <span className={'pill' + (p.onDark ? ' on-forest' : '')}>{PACK.count}</span>
            </div>
            <p style={{ fontFamily: 'var(--f-head)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.02em', fontSize: 22 }}>{p.line}</p>
            <div className="h2" style={{ fontSize: 34 }}><SkuPrice id={id} big /></div>

            <div className="row" style={{ gap: 12 }}>
              <Qty value={qty} onChange={(q) => setQty(Math.max(1, Math.min(9, q)))} dark={p.onDark} />
              <button className={'btn ' + (p.onDark ? 'btn-cream' : 'btn-primary')} style={{ flex: 1 }} disabled={oos} onClick={addToCart}>{oos ? 'Out of stock' : added ? <>Added <Icon name="check" size={18} /></> : 'Add to cart'}</button>
            </div>
            <button className="btn btn-ghost btn-block" disabled={oos} onClick={buyNow}>Buy now</button>

            <div className="pdp-note" style={{ background: p.onDark ? 'var(--forest-2)' : 'rgba(243,227,199,.7)' }}>
              <Icon name="doc" size={24} style={{ flex: 'none' }} />
              <div className="small">
                <strong>Prescription required.</strong> Upload it after checkout — we ship once it’s verified.<br />
                No prescription? <a href="#/consult" style={{ textDecoration: 'underline' }}>Consult our doctor for free.</a>
              </div>
            </div>
            <p className="fine" style={{ opacity: .8 }}>{VARIANT_NOTE}</p>
          </div>
        </div>
        <style>{`
          .pdp-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,80px);padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(48px,6vw,88px);align-items:start}
          .pdp-gal{position:sticky;top:100px;display:grid;gap:12px}
          .pdp-main{position:relative;overflow:hidden;border-radius:26px;aspect-ratio:1/1.02;display:grid;place-items:center}
          .pdp-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
          .pdp-thumbs button{aspect-ratio:1;border-radius:14px;overflow:hidden;display:grid;place-items:center}
          .pdp-note{display:flex;gap:14px;padding:18px;border-radius:18px}
          @media (max-width:900px){.pdp-grid{grid-template-columns:1fr}.pdp-gal{position:relative;top:0}}
        `}</style>
      </section>

      <section className="section" style={{ paddingTop: 'clamp(56px,7vw,96px)', paddingBottom: 'clamp(56px,7vw,96px)' }}>
        <div className="wrap" style={{ maxWidth: 980 }}>
          <Accordion defaultOpen={0} items={[
            ['Details', `${PACK.descriptor}. ${PACK.basis}. ${PACK.count} in a ${PACK.format.toLowerCase()}. Full ingredient list and composition to be supplied once confirmed against the final approved label.`],
            ['What does the percentage mean?', `${p.pct} is a variant identifier — part of the product name. It does not indicate strength, potency, dosage or effect.`],
            ['Prescription', 'After you place your order, upload a valid prescription from your order page. We verify it before shipping. If it can’t be verified, your order is cancelled and refunded. Don’t have one? Book a free consultation with our doctor.'],
            ['Warnings', 'For adults 18+ only. Store in a cool dry place. Keep out of reach of children. Consult your physician before use. Not for use by pregnant or nursing women. Read the full leaflet before use. (From packaging reference — final declarations pending regulatory sign-off.)'],
            ['Shipping & returns', 'Delivery areas, timelines, fees, cancellation and refund terms are to be confirmed.'],
          ]} />
        </div>
      </section>

      <section className="section bg-cream2" style={{ paddingTop: 64, paddingBottom: 64 }}>
        <div className="wrap">
          <div className="h3" style={{ marginBottom: 24 }}>The other statuses</div>
          <div className="grid-2" style={{ '--g': '16px' }}>
            {others.map((k) => { const o = PRODUCTS[k]; return (
              <a key={k} href={'#/product/' + k} style={{ background: o.hue, color: o.ink, borderRadius: 22, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '20px 28px', overflow: 'hidden', minHeight: 160 }}>
                <div className="stack" style={{ '--gap': '10px' }}>
                  <SkuName p={o} size={56} dotColor={o.id === 'dnd' ? 'var(--cream)' : 'var(--signal)'} />
                  <span className="label">{o.pct} Variant*</span>
                </div>
                <img src={o.cut} alt="" style={{ width: 110, transform: 'rotate(6deg) translateY(16px)' }} />
              </a>
            ); })}
          </div>
        </div>
      </section>

      <div className="sticky-cta">
        <div style={{ width: 44, height: 44, borderRadius: 10, background: p.hue, display: 'grid', placeItems: 'center', flex: 'none' }}><img src={p.cut} alt="" style={{ width: '70%' }} /></div>
        <div style={{ flex: 1, minWidth: 0 }}><div className="h4">{p.name}.</div><div className="fine muted">{fmtPrice(priceFor(id).now) || 'Price TBC'}</div></div>
        <button className="btn btn-primary btn-sm" onClick={addToCart}>Add to cart</button>
      </div>
    </main>
  );
}

function NotFound() {
  return (
    <main className="section"><div className="wrap stack" style={{ '--gap': '22px' }}>
      <h1 className="h1">Nothing here<span className="dot">.</span></h1>
      <p className="lead">Just quiet. Let’s get you back.</p>
      <a href="#/" className="btn btn-primary" style={{ alignSelf: 'flex-start' }}>Home</a>
    </div></main>
  );
}

Object.assign(window, { Shop, PDP, NotFound });