/* spec-snippets.jsx — Reusable Liquid snippets: API, params, implementation notes */

const LiquidCode = ({ children }) => (
  <pre style={{
    background:T.ink, color:T.neon, padding:S[5],
    fontSize:11, lineHeight:1.7, letterSpacing:'.04em',
    overflow:'auto', margin:0, border:`1px solid ${T.ink}`,
    fontFamily:"'JetBrains Mono', monospace",
  }}>{children}</pre>
);

/* ── PRODUCT CARD ──────────────────────────────── */
const SnippetProductCard = () => (
  <Sub no="3.1" title="product-card.liquid">

    <div style={{ marginBottom:S[5] }}>
      <div className="mono" style={{ fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', opacity:.5, marginBottom:S[3] }}>Visual states — live components from DS</div>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:S[5], padding:S[6], background:T.bone2, border:`1px solid ${T.ink}` }}>
        <ProductCard name="Loop Bag"     color="Chrome"   price="€620,00" tag={{label:'NEW', variant:'neon'}}/>
        <ProductCard name="Fringe Charm" color="Lavender" price="€85,00"/>
        <ProductCard name="Cast Belt"    color="Mirror"   price="€340,00" tag={{label:'LAST 3', dot:T.negative}}/>
        <ProductCard name="Loop Bag"     color="Chrome"   price="€620,00" hovered/>
      </div>
      <Note>↳ Default · NEW tag · LAST 3 dot · Hover (quick-add slide-up) — identické s DS CardsBlock</Note>
    </div>

    <TokenRef rows={[
      { prop:'card bg',           token:'T.paper',    css:'--color-paper',     val:'#ffffff', swatch:T.paper },
      { prop:'image ratio',       token:'4/5',        css:'aspect-ratio',      val:'4 / 5' },
      { prop:'image zoom · hover',token:'M.slow',     css:'--dur-slow',        val:'360ms cubic-bezier(.2,.8,.2,1) · scale(1.04)' },
      { prop:'quick-add bg',      token:'T.ink',      css:'--color-ink',       val:'#0a0a0a · translateY(100%→0)', swatch:T.ink },
      { prop:'quick-add font',    token:'13px 700',   css:'—',                 val:'13px · fontWeight 700 · ls .02em' },
      { prop:'quick-add slide',   token:'M.base',     css:'--dur-base',        val:'200ms cubic-bezier(.2,.8,.2,1)' },
      { prop:'info padding',      token:'S[4]',       css:'--space-4',         val:'16px (all sides)' },
      { prop:'name font',         token:'15px 700',   css:'—',                 val:'15px · fontWeight 700 · ls -0.01em' },
      { prop:'variant mono',      token:'mono 10',    css:'--font-mono',       val:'10px · uppercase · ls .18em · opacity .55' },
      { prop:'price font',        token:'16px 900',   css:'—',                 val:'16px · fontWeight 900' },
      { prop:'tag · NEW bg',      token:'T.neon',     css:'--color-neon',      val:'#ff2ec4', swatch:T.neon },
      { prop:'tag · LAST N dot',  token:'T.negative', css:'--color-negative',  val:'#c53030 · 6×6px · border-radius 50%', swatch:T.negative },
      { prop:'tag · IN STOCK dot',token:'T.positive', css:'--color-positive',  val:'#1f8a4c · 6×6px · border-radius 50%', swatch:T.positive },
    ]}/>
    <div style={{ marginTop:S[4], border:`1px solid ${T.ink}` }}>
      <SchemaHeader/>
      <SchemaRow name="card_product"  type="product" label="Product object"         info="required" />
      <SchemaRow name="show_quick_add" type="bool"   label="Show quick-add on hover" options="default: true" />
      <SchemaRow name="card_tag"      type="string"  label="Override tag label"      options="NEW | LAST N | empty" />
      <SchemaRow name="image_ratio"   type="string"  label="Aspect ratio class"      options="ratio--4-5 | ratio--1-1" />
      <SchemaRow name="lazy"          type="bool"    label="Lazy-load image"         options="default: true" />
    </div>
    <DevNote>{'↳ Usage: {%- render \'product-card\', card_product: product, show_quick_add: true -%}'}</DevNote>
    <Note>↳ Image: Shopify image_url filter · widths: 400, 600, 800 · srcset + sizes="(max-width: 768px) 50vw, 25vw"</Note>
  </Sub>
);

/* ── CART DRAWER ───────────────────────────────── */
const SnippetCartDrawer = () => (
  <Sub no="3.2" title="cart-drawer.liquid">
    <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:S[5] }}>
      <LayoutDiagram label="DRAWER · right edge · width 420px">
        <div style={{ display:'flex', flexDirection:'column', height:360, border:`1px dashed ${T.n300}` }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', padding:`${S[3]}px ${S[4]}px`, borderBottom:`1px solid ${T.n200}`, background:T.bone }}>
            <span className="mono" style={{ fontSize:10, letterSpacing:'.18em' }}>YOUR BAG · 2</span>
            <span style={{ cursor:'pointer' }}>✕</span>
          </div>
          <div style={{ flex:1, padding:S[4], display:'flex', flexDirection:'column', gap:S[3], overflow:'hidden' }}>
            {[1,2].map(i => (
              <div key={i} style={{ display:'grid', gridTemplateColumns:'64px 1fr', gap:S[3], paddingBottom:S[3], borderBottom:`1px solid ${T.n200}` }}>
                <Box label="" h={64} bg={T.n300} />
                <div style={{ display:'flex', flexDirection:'column', gap:S[1] }}>
                  <Box label="Product name" h={16} bg="transparent" ink={T.ink} />
                  <Box label="CHROME · M · QTY 1" h={14} bg="transparent" ink={T.n400} mono />
                  <Box label="€620,00" h={14} bg="transparent" ink={T.ink} />
                </div>
              </div>
            ))}
          </div>
          <div style={{ padding:S[4], borderTop:`1px solid ${T.ink}`, background:T.paper }}>
            <div style={{ display:'flex', justifyContent:'space-between', marginBottom:S[3] }}>
              <span className="mono" style={{ fontSize:10, letterSpacing:'.18em' }}>SUBTOTAL</span>
              <span style={{ fontWeight:900, fontSize:16 }}>€1240,00</span>
            </div>
            <Box label="CHECKOUT →" h={48} bg={T.ink} ink={T.bone} />
          </div>
        </div>
      </LayoutDiagram>
      <div>
        <div style={{ fontWeight:700, fontSize:13, marginBottom:S[3] }}>JS hooks</div>
        <LiquidCode>{`// Open drawer
document.dispatchEvent(
  new CustomEvent('glose:cart:open')
);

// After add-to-cart fetch
fetch('/cart/add.js', { ... })
  .then(() => refreshCart())
  .then(() => open());

// Close on backdrop click
backdrop.addEventListener('click', () =>
  document.dispatchEvent(
    new CustomEvent('glose:cart:close')
  )
);`}</LiquidCode>
        <DevNote>↳ Transform: translateX(100%) → translateX(0) · spring 480ms · backdrop opacity 0→0.4 · base 200ms</DevNote>
      </div>
    </div>
    <Note>↳ Rendered once in theme.liquid · hidden by default · glose.js controls open/close state via class .drawer--open</Note>
  </Sub>
);

/* ── PRICE ─────────────────────────────────────── */
const SnippetPrice = () => (
  <Sub no="3.3" title="price.liquid">
    <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:S[5] }}>
      {[
        { label:'REGULAR', price:'€620,00', compare:null, sold:false },
        { label:'ON SALE', price:'€496,00', compare:'€620,00', sold:false },
        { label:'SOLD OUT', price:'€620,00', compare:null, sold:true },
      ].map(({ label, price, compare, sold }) => (
        <div key={label} style={{ border:`1px solid ${T.ink}`, background:T.paper, padding:S[5] }}>
          <div className="mono" style={{ fontSize:9, letterSpacing:'.18em', color:T.n500, marginBottom:S[2] }}>{label}</div>
          <div style={{ display:'flex', alignItems:'baseline', gap:S[2] }}>
            <span style={{ fontWeight:900, fontSize:22, color: sold ? T.n400 : T.ink, textDecoration: sold ? 'line-through' : 'none' }}>{price}</span>
            {compare && <span style={{ fontSize:14, color:T.n400, textDecoration:'line-through' }}>{compare}</span>}
            {sold && <span className="mono" style={{ fontSize:10, letterSpacing:'.18em', color:T.n500 }}>SOLD OUT</span>}
          </div>
          {compare && <div style={{ marginTop:S[1] }}><span style={{ background:T.yellow, padding:'2px 6px', fontSize:11, fontWeight:700 }}>−20%</span></div>}
        </div>
      ))}
    </div>
    <div style={{ marginTop:S[4], border:`1px solid ${T.ink}` }}>
      <SchemaHeader/>
      <SchemaRow name="product" type="product" label="Product object" info="required" />
      <SchemaRow name="use_variant" type="variant" label="Specific variant" info="optional, overrides product" />
      <SchemaRow name="show_badge" type="bool" label="Show % badge on sale" options="default: false" />
      <SchemaRow name="size" type="string" label="Size class" options="sm | md | lg · default: md" />
    </div>
    <DevNote>↳ Always use money_with_currency filter · format defined in locales · never hardcode € symbol</DevNote>
  </Sub>
);

/* ── TAG PILL ──────────────────────────────────── */
const SnippetTagPill = () => (
  <Sub no="3.4" title="tag-pill.liquid">
    <div style={{ display:'flex', flexWrap:'wrap', gap:S[3], padding:S[5], background:T.paper, border:`1px solid ${T.ink}` }}>
      {[
        { label:'NEW', bg:T.neon, ink:T.ink },
        { label:'LAST 3', bg:'transparent', ink:T.ink, br:T.ink, dot:T.negative },
        { label:'IN STOCK', bg:'transparent', ink:T.n500, br:T.n300, dot:T.positive },
        { label:'SOLD OUT', bg:'transparent', ink:T.n500, br:T.n300 },
        { label:'EDITION 200', bg:T.ink, ink:T.bone },
        { label:'● LIVE', bg:T.ink, ink:T.neon },
      ].map(({ label, bg, ink, br, dot }) => (
        <span key={label} className="mono" style={{
          display:'inline-flex', alignItems:'center', gap:6,
          padding:'5px 10px', fontSize:10, letterSpacing:'.18em', textTransform:'uppercase',
          background:bg, color:ink, border:`1px solid ${br || bg}`,
        }}>
          {dot && <span style={{ width:6, height:6, borderRadius:'50%', background:dot }}/>}
          {label}
        </span>
      ))}
    </div>
    <div style={{ marginTop:S[4], border:`1px solid ${T.ink}` }}>
      <SchemaHeader/>
      <SchemaRow name="label" type="string" label="Pill text" info="required" />
      <SchemaRow name="variant" type="string" label="Visual variant" options="default|solid|neon|ghost" />
      <SchemaRow name="dot_color" type="string" label="Dot colour (CSS color)" options="optional" />
    </div>
    <DevNote>↳ Auto-assign: product tag 'new' → neon · 'sold-out' → ghost · stock ≤3 → last-n dot · via Liquid logic in product-card</DevNote>
    <Note>↳ Always JetBrains Mono · always uppercase · never rounded (radius: none)</Note>
  </Sub>
);

/* ── QUANTITY SELECTOR ─────────────────────────── */
const SnippetQty = () => (
  <Sub no="3.5" title="quantity-selector.liquid">
    <div style={{ display:'flex', gap:S[6], alignItems:'center', padding:S[5], background:T.paper, border:`1px solid ${T.ink}` }}>
      <div style={{ display:'flex', border:`1px solid ${T.ink}` }}>
        <button style={{ width:48, height:48, background:T.paper, border:'none', cursor:'pointer', fontSize:18, borderRight:`1px solid ${T.ink}` }}>−</button>
        <div style={{ width:48, display:'flex', alignItems:'center', justifyContent:'center', fontWeight:700 }}>1</div>
        <button style={{ width:48, height:48, background:T.paper, border:'none', cursor:'pointer', fontSize:18, borderLeft:`1px solid ${T.ink}` }}>+</button>
      </div>
      <div className="mono" style={{ fontSize:10, letterSpacing:'.14em', color:T.n500, textTransform:'uppercase' }}>min: 1 · max: available stock</div>
    </div>
    <DevNote>↳ JS: button clicks update hidden &lt;input name="quantity"&gt; · dispatch 'change' event so other listeners update total</DevNote>
    <Note>↳ No border-radius · 48×48px tap targets · disable − at qty=1 · disable + at max_quantity</Note>
  </Sub>
);

/* ── ICON ──────────────────────────────────────── */
const SnippetIcon = () => (
  <Sub no="3.6" title="icon.liquid">
    <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:S[5] }}>
      <div>
        <LiquidCode>{`{%- render 'icon',
  icon: 'bag',
  size: 20,
  color: 'currentColor'
-%}

{# Available icons: #}
{# bag · search · account #}
{# close · chevron-down #}
{# arrow-right · check    #}`}</LiquidCode>
      </div>
      <div style={{ border:`1px solid ${T.ink}` }}>
        <SchemaHeader/>
        <SchemaRow name="icon" type="string" label="Icon name" info="required · see list" />
        <SchemaRow name="size" type="number" label="Size (px)" options="default: 24" />
        <SchemaRow name="color" type="string" label="Fill / stroke color" options="default: currentColor" />
        <SchemaRow name="class" type="string" label="Extra CSS class" info="optional" />
      </div>
    </div>
    <DevNote>{'↳ SVG sprite at assets/icons.svg · rendered via <use href="#icon-{icon}"> · no external requests'}</DevNote>
    <Note>↳ Keep icon set minimal: only icons actually used in the theme · add as needed</Note>
  </Sub>
);

const SnippetsSection = () => (
  <Section no="03" title="Snippets" kicker="render params · states · usage">
    <SnippetProductCard/>
    <SnippetCartDrawer/>
    <SnippetPrice/>
    <SnippetTagPill/>
    <SnippetQty/>
    <SnippetIcon/>
  </Section>
);

Object.assign(window, { SnippetsSection });