// Product detail drawer + Cart drawer

function ProductDetail({ product, onClose, onAdd }) {
  const [size, setSize] = React.useState('4–5Y');
  const [color, setColor] = React.useState(0);
  if (!product) return null;
  const sizes = ['2–3Y', '4–5Y', '6–7Y', '8–9Y'];
  const colors = [
    { name: 'dune', hex: '#E0C998' },
    { name: 'tide', hex: '#9CA5A7' },
    { name: 'clay', hex: '#C9998A' },
  ];
  return (
    <div style={{ position: 'fixed', inset: 0, zIndex: 50, display: 'flex', justifyContent: 'flex-end' }}>
      <div onClick={onClose} style={{ position: 'absolute', inset: 0, background: 'rgba(34, 39, 41, 0.4)', backdropFilter: 'blur(6px)', animation: 'fi var(--dur-base) var(--ease-out)' }} />
      <div style={{ position: 'relative', width: 680, maxWidth: '100%', background: 'var(--sand-100)', height: '100%', overflowY: 'auto', animation: 'slidein var(--dur-slow) var(--ease-tide)' }}>
        <style>{`
          @keyframes fi { from { opacity: 0; } to { opacity: 1; } }
          @keyframes slidein { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
        `}</style>
        <div style={{ position: 'sticky', top: 0, background: 'var(--sand-100)', padding: '18px 32px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid var(--divider)', zIndex: 2 }}>
          <Eyebrow>spring volume 04</Eyebrow>
          <div onClick={onClose} style={{ cursor: 'pointer', color: 'var(--tide-600)' }}><Icon name="close" size={20} /></div>
        </div>
        <div style={{ aspectRatio: '4/5', background: `url('${product.image}') center/cover` }} />
        <div style={{ padding: '40px 32px 80px' }}>
          <div style={{ display: 'flex', gap: 6, marginBottom: 18 }}>
            {product.tag && <Chip variant={product.tagVariant || 'solid'}>{product.tag}</Chip>}
            <Chip variant="line">unisex</Chip>
            <Chip variant="quiet">{product.sub.split(' · ')[1] || ''}</Chip>
          </div>
          <h1 style={{ fontFamily: 'var(--font-display)', fontVariationSettings: "'opsz' 144, 'SOFT' 50", fontWeight: 400, fontSize: 54, lineHeight: 1.02, letterSpacing: '-0.025em', color: 'var(--tide-600)', margin: 0 }}>{product.name}</h1>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 18, color: 'var(--tide-700)', marginTop: 18 }}>${product.price}.00</div>
          <p style={{ fontFamily: 'var(--font-serif)', fontSize: 19, lineHeight: 1.55, color: 'var(--tide-600)', marginTop: 28 }}>
            heavyweight 280gsm cotton linen. sewn in portugal. softer after every wash. built for the second kid, too.
          </p>

          <div style={{ marginTop: 36 }}>
            <div style={{ fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--tide-500)', marginBottom: 14 }}>color — {colors[color].name}</div>
            <div style={{ display: 'flex', gap: 12 }}>
              {colors.map((c, i) => (
                <div key={c.name} onClick={() => setColor(i)} style={{
                  width: 44, height: 44, borderRadius: 999, background: c.hex,
                  boxShadow: color === i ? '0 0 0 2px var(--sand-100), 0 0 0 3px var(--tide-600)' : 'none',
                  cursor: 'pointer', transition: 'box-shadow var(--dur-fast) var(--ease-out)',
                }} />
              ))}
            </div>
          </div>

          <div style={{ marginTop: 32 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 14 }}>
              <span style={{ fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--tide-500)' }}>size</span>
              <span style={{ fontSize: 13, color: 'var(--tide-500)', textDecoration: 'underline', cursor: 'pointer' }}>size guide</span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
              {sizes.map(s => (
                <div key={s} onClick={() => setSize(s)} style={{
                  padding: '14px 0', textAlign: 'center',
                  border: size === s ? '1px solid var(--tide-600)' : '1px solid rgba(74,58,36,0.12)',
                  borderRadius: 8,
                  background: size === s ? 'var(--sand-50)' : 'transparent',
                  fontSize: 14, color: 'var(--tide-700)', cursor: 'pointer',
                  transition: 'all var(--dur-fast) var(--ease-out)',
                }}>{s}</div>
              ))}
            </div>
          </div>

          <div style={{ marginTop: 36, display: 'flex', gap: 10 }}>
            <Button size="lg" style={{ flex: 1 }} onClick={() => { onAdd({ ...product, size, color: colors[color].name }); onClose(); }}>add to bag — ${product.price}</Button>
            <Button size="lg" variant="secondary"><Icon name="heart" size={18} /></Button>
          </div>

          <div style={{ marginTop: 44, paddingTop: 32, borderTop: '1px solid var(--divider)', display: 'flex', flexDirection: 'column', gap: 18, color: 'var(--fg-muted)', fontSize: 14 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}><Icon name="ship" size={18} /> free shipping over $120. carbon-neutral every time.</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}><Icon name="leaf" size={18} /> sewn in small batches in portugal.</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}><Icon name="heart" size={18} /> built to outlast the phase — and the next one, too.</div>
          </div>
        </div>
      </div>
    </div>
  );
}

function CartDrawer({ open, items, onClose, onQty, onCheckout }) {
  if (!open) return null;
  const total = items.reduce((s, it) => s + it.price * it.qty, 0);
  return (
    <div style={{ position: 'fixed', inset: 0, zIndex: 60, display: 'flex', justifyContent: 'flex-end' }}>
      <div onClick={onClose} style={{ position: 'absolute', inset: 0, background: 'rgba(34, 39, 41, 0.4)', backdropFilter: 'blur(6px)' }} />
      <div style={{ position: 'relative', width: 460, background: 'var(--sand-100)', height: '100%', display: 'flex', flexDirection: 'column', animation: 'slidein var(--dur-slow) var(--ease-tide)' }}>
        <div style={{ padding: '24px 28px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid var(--divider)' }}>
          <div style={{ fontFamily: 'var(--font-display)', fontVariationSettings: "'opsz' 36, 'SOFT' 30", fontSize: 24, color: 'var(--tide-700)' }}>your bag</div>
          <div onClick={onClose} style={{ cursor: 'pointer', color: 'var(--tide-600)' }}><Icon name="close" size={20} /></div>
        </div>
        <div style={{ flex: 1, overflowY: 'auto', padding: 28 }}>
          {items.length === 0 ? (
            <div style={{ textAlign: 'center', color: 'var(--fg-muted)', padding: '64px 0', fontFamily: 'var(--font-serif)', fontSize: 18, lineHeight: 1.5 }}>
              nothing here yet.<br/>keep browsing, we'll be here.
            </div>
          ) : items.map((it, i) => (
            <div key={i} style={{ display: 'flex', gap: 16, paddingBottom: 20, marginBottom: 20, borderBottom: '1px solid var(--divider)' }}>
              <div style={{ width: 84, height: 100, borderRadius: 8, background: `url('${it.image}') center/cover`, flexShrink: 0 }} />
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontVariationSettings: "'opsz' 36, 'SOFT' 30", fontSize: 18, color: 'var(--tide-700)', lineHeight: 1.2 }}>{it.name}</div>
                <div style={{ fontSize: 12, color: 'var(--fg-muted)', marginTop: 4 }}>{it.color} · {it.size}</div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 12 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, border: '1px solid rgba(74,58,36,0.12)', borderRadius: 8, padding: '3px 8px' }}>
                    <div onClick={() => onQty(i, -1)} style={{ cursor: 'pointer', color: 'var(--tide-600)' }}><Icon name="minus" size={14} /></div>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, width: 16, textAlign: 'center' }}>{it.qty}</span>
                    <div onClick={() => onQty(i, 1)} style={{ cursor: 'pointer', color: 'var(--tide-600)' }}><Icon name="plus" size={14} /></div>
                  </div>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 14, color: 'var(--tide-700)' }}>${it.price * it.qty}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
        {items.length > 0 && (
          <div style={{ padding: 28, borderTop: '1px solid var(--divider)', background: 'var(--sand-50)' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8, fontSize: 13, color: 'var(--fg-muted)' }}>
              <span>shipping</span><span>complimentary</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 20 }}>
              <span style={{ fontFamily: 'var(--font-display)', fontVariationSettings: "'opsz' 36, 'SOFT' 30", fontSize: 22, color: 'var(--tide-700)' }}>total</span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 18, color: 'var(--tide-700)' }}>${total}.00</span>
            </div>
            <Button size="lg" style={{ width: '100%' }} onClick={onCheckout}>checkout</Button>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { ProductDetail, CartDrawer });