/* Club FRESH — Shop (the FRESH store + the Door) */
function CFShop({ go }) {
  const { CF_Icon: Icon, CF_SHOP: SHOP, CF_PILLAR_HEX: PHEX } = window;
  const [owned, setOwned] = React.useState({});
  const openDetail = (p) => window.cfModal.open(close => <ProductPage product={p} onClose={close} />);
  const openUnlock = (d) => window.cfModal.open(close => <UnlockSheet item={d} onClose={close} onDone={() => { setOwned(o => ({ ...o, [d.id]: true })); close(); }} />);

  return (
    <div className="cf-fade-in">
      {/* header */}
      <div className="cf-pad" style={{ paddingTop: 8, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
        <div>
          <p className="cf-eyebrow" style={{ marginBottom: 8 }}>A premium edit</p>
          <h1 className="cf-display" style={{ fontSize: 46 }}>Shop</h1>
        </div>
        <window.CFFreshMark size={28} />
      </div>

      {/* THE DOOR */}
      <div className="cf-pad" style={{ marginTop: 20 }}>
        <button className="cf-reset cf-tap" style={{ width: '100%' }} onClick={() => go('door')}>
          <div style={{ position: 'relative', overflow: 'hidden', borderRadius: 'var(--cf-radius)', padding: '24px 22px', background: 'linear-gradient(140deg, #7b623c 0%, #b8915a 52%, #d8b87e 100%)', boxShadow: '0 18px 40px rgba(123,98,60,0.34)', textAlign: 'left' }}>
            <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(70% 60% at 85% 10%, rgba(255,255,255,0.3), transparent 60%)' }} />
            <div style={{ position: 'relative' }}>
              <span style={{ fontSize: 10.5, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.82)' }}>{SHOP.door.kicker}</span>
              <h2 style={{ fontFamily: 'var(--cf-head)', fontSize: 27, color: '#fff', margin: '10px 0 0', lineHeight: 1.1 }}>{SHOP.door.title}</h2>
              <p style={{ margin: '10px 0 0', fontSize: 14, lineHeight: 1.5, color: 'rgba(255,255,255,0.9)', maxWidth: '30ch' }}>{SHOP.door.line}</p>
              <div style={{ marginTop: 18, display: 'inline-flex', alignItems: 'center', gap: 8, height: 42, paddingInline: 20, borderRadius: 999, background: 'rgba(255,255,255,0.96)', color: '#7b623c', fontSize: 14, fontWeight: 600 }}>
                Apply for the room <Icon name="arrowUR" size={16} />
              </div>
            </div>
          </div>
        </button>
      </div>

      {/* SHELF 1 — physical */}
      <div className="cf-pad" style={{ marginTop: 26, display: 'flex', alignItems: 'center', gap: 12 }}>
        <h3 className="cf-h3" style={{ fontSize: 21 }}>The framework, made physical</h3>
        <span style={{ flex: 1, height: 1, background: 'rgba(20,16,12,0.1)' }} />
      </div>
      <div className="cf-scroll" style={{ display: 'flex', gap: 14, overflowX: 'auto', padding: '14px 22px 6px' }}>
        {SHOP.physical.map(p => (
          <button key={p.id} className="cf-reset cf-tap" style={{ flexShrink: 0, width: 200 }} onClick={() => openDetail(p)}>
            <div className="cf-card" style={{ overflow: 'hidden', textAlign: 'left' }}>
              <div style={{ height: 150, backgroundImage: `url(${p.img})`, backgroundSize: 'cover', backgroundPosition: 'center', position: 'relative' }}>
                <span style={{ position: 'absolute', top: 10, left: 10, width: 10, height: 10, borderRadius: '50%', background: PHEX[p.anchor], boxShadow: '0 0 0 3px rgba(255,255,255,0.85)' }} />
              </div>
              <div style={{ padding: '14px 15px 16px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 8 }}>
                  <span style={{ fontFamily: 'var(--cf-head)', fontSize: 17, color: 'var(--ink-h)', lineHeight: 1.1 }}>{p.name}</span>
                  <span className="cf-num" style={{ fontSize: 15 }}>{p.price}</span>
                </div>
                <p style={{ margin: '7px 0 0', fontSize: 12.5, color: 'var(--ink-m)', lineHeight: 1.45 }}>{p.blurb}</p>
              </div>
            </div>
          </button>
        ))}
      </div>

      {/* SHELF 2 — digital morsels */}
      <div className="cf-pad" style={{ marginTop: 22, display: 'flex', alignItems: 'center', gap: 12 }}>
        <h3 className="cf-h3" style={{ fontSize: 21 }}>In-app unlocks</h3>
        <span style={{ flex: 1, height: 1, background: 'rgba(20,16,12,0.1)' }} />
      </div>
      <div className="cf-pad" style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 11 }}>
        {SHOP.digital.map(d => {
          const has = owned[d.id];
          return (
            <div key={d.id} className="cf-card" style={{ padding: '15px 16px', display: 'flex', alignItems: 'center', gap: 14 }}>
              <span style={{ width: 46, height: 46, borderRadius: 14, background: 'color-mix(in srgb, var(--cf-accent) 16%, #fff)', color: 'var(--cf-accent)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <Icon name={d.icon} size={22} />
              </span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
                  <span style={{ fontSize: 14.5, fontWeight: 600, color: 'var(--ink-h)' }}>{d.name}</span>
                  {d.morsel && <span style={{ fontSize: 9.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-m)', border: '1px solid rgba(20,16,12,0.14)', padding: '2px 6px', borderRadius: 999 }}>morsel</span>}
                </div>
                <p style={{ margin: '3px 0 0', fontSize: 12.5, color: 'var(--ink-m)', lineHeight: 1.4 }}>{d.blurb}</p>
              </div>
              {has ? (
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, color: 'var(--a-s)', fontSize: 13, fontWeight: 600 }}><Icon name="check" size={15} sw={2.6} /> Unlocked</span>
              ) : (
                <button className="cf-reset cf-tap" onClick={() => openUnlock(d)} style={{ height: 38, paddingInline: 15, borderRadius: 999, background: 'var(--cf-dark)', color: '#fff', fontSize: 13.5, fontWeight: 600, flexShrink: 0 }}>{d.price}</button>
              )}
            </div>
          );
        })}
        <p style={{ margin: '6px 4px 0', fontSize: 11.5, color: 'var(--ink-m)', lineHeight: 1.5 }}>Unlock instantly, no cart. Morsels stay on the rhythm side, business mechanics live behind the Door.</p>
      </div>
    </div>
  );
}

/* ---- physical product page (full overlay) ---- */
function ProductPage({ product, onClose }) {
  const { CF_Icon: Icon, CF_PILLAR_HEX: PHEX, CF_PILLAR_ICON: PI } = window;
  const accent = PHEX[product.anchor];
  return (
    <div style={{ position: 'absolute', inset: 0, zIndex: 60, background: 'var(--canvas-top)', overflowY: 'auto' }} className="cf-scroll">
      <div style={{ position: 'relative', height: 360, backgroundImage: `url(${product.img})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,0.18), transparent 30%, transparent 70%, var(--canvas-top))' }} />
        <div style={{ position: 'absolute', top: 50, left: 22, right: 22, display: 'flex', justifyContent: 'space-between' }}>
          <button className="cf-glass cf-icon-only" onClick={onClose}><Icon name="arrowL" size={19} /></button>
          <button className="cf-glass cf-icon-only"><Icon name="share" size={18} /></button>
        </div>
      </div>
      <div className="cf-pad" style={{ marginTop: -10, paddingBottom: 150 }}>
        <span className="cf-chip" style={{ background: accent, color: '#fff', border: 'none' }}><Icon name={PI[product.anchor]} size={14} /> {product.anchor[0].toUpperCase() + product.anchor.slice(1)} anchor</span>
        <h1 className="cf-display" style={{ fontSize: 36, marginTop: 14 }}>{product.name}</h1>
        <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--ink-b)', marginTop: 12 }}>{product.blurb} Made to be lived with, and photographed. Marble and brass, never bubblegum.</p>
        <div className="cf-card" style={{ marginTop: 18, padding: '16px 18px', display: 'flex', flexDirection: 'column', gap: 12 }}>
          {['Ships in the FRESH palette', 'Designed with Tracy', '30-day no-fuss returns'].map(f => (
            <div key={f} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13.5, color: 'var(--ink-b)' }}>
              <Icon name="check" size={16} sw={2.4} style={{ color: accent }} /> {f}
            </div>
          ))}
        </div>
      </div>
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '14px 22px 24px', background: 'linear-gradient(180deg, transparent, var(--canvas-bot) 32%)', display: 'flex', alignItems: 'center', gap: 14 }}>
        <span className="cf-num" style={{ fontSize: 24 }}>{product.price}</span>
        <button className="cf-reset cf-tap" style={{ flex: 1, height: 54, borderRadius: 999, background: 'var(--cf-dark)', color: '#fff', fontSize: 15, fontWeight: 600 }}>Add to bag</button>
      </div>
    </div>
  );
}

/* ---- digital unlock ceremony (bottom sheet) ---- */
function UnlockSheet({ item, onClose, onDone }) {
  const { CF_Icon: Icon } = window;
  const [stage, setStage] = React.useState('pay'); // pay -> done
  const pay = () => { setStage('paying'); setTimeout(() => setStage('done'), 1100); };
  return (
    <div style={{ position: 'absolute', inset: 0, zIndex: 70, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>
      <div onClick={stage === 'done' ? onDone : onClose} style={{ position: 'absolute', inset: 0, background: 'rgba(20,16,12,0.45)', backdropFilter: 'blur(2px)' }} />
      <div style={{ position: 'relative', background: '#fff', borderTopLeftRadius: 28, borderTopRightRadius: 28, padding: '12px 22px 30px', boxShadow: '0 -16px 40px rgba(20,16,12,0.2)' }}>
        <div style={{ width: 40, height: 5, borderRadius: 999, background: 'rgba(20,16,12,0.14)', margin: '0 auto 18px' }} />
        {stage !== 'done' ? (
          <>
            <div style={{ display: 'flex', alignItems: 'center', gap: 13 }}>
              <span style={{ width: 48, height: 48, borderRadius: 14, background: 'color-mix(in srgb, var(--cf-accent) 16%, #fff)', color: 'var(--cf-accent)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name={item.icon} size={22} /></span>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 15.5, fontWeight: 600, color: 'var(--ink-h)' }}>{item.name}</div>
                <div style={{ fontSize: 12.5, color: 'var(--ink-m)' }}>Instant unlock · yours forever</div>
              </div>
              <span className="cf-num" style={{ fontSize: 20 }}>{item.price}</span>
            </div>
            <div className="cf-card" style={{ marginTop: 18, padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 12, border: '1px solid rgba(20,16,12,0.08)' }}>
              <span style={{ width: 34, height: 22, borderRadius: 4, background: 'linear-gradient(135deg,#1a1f71,#3b4bd8)', flexShrink: 0 }} />
              <span style={{ flex: 1, fontSize: 13.5, color: 'var(--ink-b)' }}>Visa ·· 4242</span>
              <Icon name="check" size={16} sw={2.4} style={{ color: 'var(--a-s)' }} />
            </div>
            <button className="cf-reset cf-tap" onClick={pay} disabled={stage === 'paying'} style={{ width: '100%', height: 54, borderRadius: 999, marginTop: 18, background: 'var(--cf-dark)', color: '#fff', fontSize: 15, fontWeight: 600, opacity: stage === 'paying' ? 0.75 : 1 }}>
              {stage === 'paying' ? 'Confirming…' : `Pay ${item.price}`}
            </button>
            <p style={{ textAlign: 'center', fontSize: 11.5, color: 'var(--ink-m)', margin: '12px 0 0' }}>Secured by Stripe · buy it like a coffee</p>
          </>
        ) : (
          <div style={{ textAlign: 'center', padding: '14px 0 6px' }}>
            <div style={{ width: 76, height: 76, borderRadius: '50%', margin: '0 auto', background: 'color-mix(in srgb, var(--cf-accent) 18%, #fff)', color: 'var(--cf-accent)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name="check" size={38} sw={2.4} />
            </div>
            <h3 className="cf-h3" style={{ marginTop: 18 }}>Unlocked</h3>
            <p style={{ fontSize: 14, color: 'var(--ink-b)', margin: '8px 0 0', lineHeight: 1.5 }}>{item.name} is yours. It is already waiting in your app.</p>
            <button className="cf-reset cf-tap" onClick={onDone} style={{ width: '100%', height: 52, borderRadius: 999, marginTop: 20, background: 'var(--cf-accent)', color: 'var(--cf-accent-ink)', fontSize: 15, fontWeight: 600 }}>Open it</button>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { CFShop });