/* spec-sections.jsx — Shopify section specs using real DS components + token annotations */

/* ── ANNOUNCEMENT BAR ──────────────────────────── */
const SectionAnnouncementBar = () => (
  <Sub no="2.1" title="announcement-bar.liquid">
    <div style={{ marginBottom:S[3] }}>
      <div className="mono" style={{ fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', opacity:.5, marginBottom:S[3] }}>Default state</div>
      <div className="mono" style={{ background:T.ink, color:T.bone, padding:`${S[2]}px ${S[5]}px`, fontSize:10, letterSpacing:'.2em', textTransform:'uppercase', display:'flex', justifyContent:'center' }}>
        FREE EU SHIPPING OVER €300
      </div>
      <div className="mono" style={{ fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', opacity:.5, margin:`${S[4]}px 0 ${S[3]}px` }}>Drop mode (marquee + neon)</div>
      <div className="mono" style={{ background:T.ink, color:T.bone, padding:`${S[2]}px ${S[5]}px`, fontSize:10, letterSpacing:'.2em', textTransform:'uppercase', display:'flex', justifyContent:'center', gap:S[7] }}>
        <span style={{color:T.neon}}>● LIVE</span>
        <span>DROP 02 · FW26 · NOV 14, 18:00 CET</span>
        <span style={{opacity:.5}}>FREE EU SHIPPING OVER €300</span>
      </div>
    </div>
    <TokenRef rows={[
      { prop:'height',       token:'fixed',   css:'--announcement-height', val:'40px' },
      { prop:'background',   token:'T.ink',   css:'--color-ink',           val:'#0a0a0a', swatch:T.ink },
      { prop:'color',        token:'T.bone',  css:'--color-bone',          val:'#f5f3ee', swatch:T.bone },
      { prop:'color · drop', token:'T.neon',  css:'--color-neon',          val:'#ff2ec4', swatch:T.neon },
      { prop:'font-size',    token:'mono 10', css:'--font-mono',           val:'10px · JetBrains Mono · uppercase · ls .2em' },
      { prop:'z-index',      token:'Z.sticky',css:'—',                     val:'10' },
      { prop:'padding-x',    token:'S[5]',    css:'--space-5',             val:'24px' },
      { prop:'padding-y',    token:'S[2]',    css:'--space-2',             val:'8px' },
    ]}/>
    <div style={{ marginTop:S[5], border:`1px solid ${T.ink}` }}>
      <SchemaHeader/>
      <SchemaRow name="text"      type="text"     label="Announcement text"        info="Default message" />
      <SchemaRow name="link"      type="url"      label="Link (optional)"          info="—" />
      <SchemaRow name="drop_mode" type="checkbox" label="Drop mode (marquee+neon)" info="false" />
      <SchemaRow name="drop_text" type="text"     label="Drop mode text"           info="Shown when drop_mode on" />
    </div>
    <DevNote>↳ Drop mode: .announcement--drop na body → marquee animation z glose.css · neon ticker text</DevNote>
  </Sub>
);

/* ── HEADER ────────────────────────────────────── */
const SectionHeader = () => (
  <Sub no="2.2" title="header.liquid">
    <div className="mono" style={{ fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', opacity:.5, marginBottom:S[3] }}>Live component from DS</div>
    <Nav/>
    <TokenRef rows={[
      { prop:'height',         token:'fixed',    css:'--header-height',   val:'64px' },
      { prop:'background',     token:'T.bone',   css:'--color-bone',      val:'#f5f3ee', swatch:T.bone },
      { prop:'background · scroll', token:'T.bone', css:'--color-bone',   val:'#f5f3ee + box-shadow 0 1px 0 T.n200' },
      { prop:'z-index',        token:'Z.sticky', css:'—',                 val:'10' },
      { prop:'padding-x',      token:'S[6]',     css:'--space-6',         val:'32px' },
      { prop:'padding-y',      token:'S[4]',     css:'--space-4',         val:'16px' },
      { prop:'wordmark size',  token:'28px',     css:'—',                 val:'28px · fontWeight 900 · ls -0.045em' },
      { prop:'nav font',       token:'mono 11',  css:'--font-mono',       val:'11px · uppercase · ls .18em' },
      { prop:'scroll trigger', token:'40px',     css:'—',                 val:'add .header--scrolled after 40px scroll' },
      { prop:'transition',     token:'M.base',   css:'--dur-base',        val:'200ms cubic-bezier(.2,.8,.2,1)' },
    ]}/>
    <div style={{ marginTop:S[5], border:`1px solid ${T.ink}` }}>
      <SchemaHeader/>
      <SchemaRow name="logo_type"          type="select"      label="Logo type"             options="wordmark | image" />
      <SchemaRow name="logo_image"         type="image_picker" label="Logo image"           info="Only when logo_type = image" />
      <SchemaRow name="logo_width"         type="range"       label="Logo width (px)"       options="60–200, default 120" />
      <SchemaRow name="nav_links"          type="link_list"   label="Main navigation"       info="linklist handle" />
      <SchemaRow name="show_search"        type="checkbox"    label="Show search"           info="true" />
      <SchemaRow name="transparent_on_hero" type="checkbox"   label="Transparent on hero"   info="false" />
    </div>
    <DevNote>↳ Bag count: glose.js poslouchá glose:cart:update → aktualizuje span.header__cart-count</DevNote>
  </Sub>
);

/* ── HERO ──────────────────────────────────────── */
const SectionHero = () => (
  <Sub no="2.3" title="hero.liquid">
    <div className="mono" style={{ fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', opacity:.5, marginBottom:S[3] }}>Drop hero s countdown — live component from DS</div>
    <DropHero/>
    <TokenRef rows={[
      { prop:'background',      token:'T.ink',    css:'--color-ink',        val:'#0a0a0a', swatch:T.ink },
      { prop:'color',           token:'T.bone',   css:'--color-bone',       val:'#f5f3ee', swatch:T.bone },
      { prop:'kicker color',    token:'T.neon',   css:'--color-neon',       val:'#ff2ec4', swatch:T.neon },
      { prop:'min-height',      token:'100svh',   css:'—',                  val:'100svh (homepage) · 60vh (inner)' },
      { prop:'padding',         token:'S[8]',     css:'--space-8',          val:'64px' },
      { prop:'display heading', token:'120px',    css:'—',                  val:'120px · fontWeight 900 · ls -0.045em · lh .92' },
      { prop:'kicker font',     token:'mono 11',  css:'--font-mono',        val:'11px · uppercase · ls .2em' },
      { prop:'neon bar top',    token:'55%',      css:'—',                  val:'top: 55% · height: 50% · background T.neon' },
      { prop:'countdown font',  token:'64px',     css:'—',                  val:'64px · fontWeight 900 · ls -0.03em · tabular-nums' },
      { prop:'CTA background',  token:'T.neon',   css:'--color-neon',       val:'#ff2ec4', swatch:T.neon },
      { prop:'CTA height',      token:'S[7]',     css:'--space-7 × ~',      val:'56px' },
    ]}/>
    <div style={{ marginTop:S[5], border:`1px solid ${T.ink}` }}>
      <SchemaHeader/>
      <SchemaRow name="kicker"       type="text"     label="Kicker"           info="DROP 02 · FW26" />
      <SchemaRow name="heading"      type="text"     label="Heading"          info="" />
      <SchemaRow name="body"         type="richtext" label="Body copy"        info="" />
      <SchemaRow name="cta_label"    type="text"     label="CTA label"        info="Shop now" />
      <SchemaRow name="cta_url"      type="url"      label="CTA URL"          info="" />
      <SchemaRow name="bg_image"     type="image_picker" label="Background image" info="Optional" />
      <SchemaRow name="bg_color"     type="select"   label="Background colour" options="ink | bone | neon | chrome" />
      <SchemaRow name="show_countdown" type="checkbox" label="Show countdown" info="false" />
      <SchemaRow name="drop_date"    type="text"     label="Drop date (ISO)"  info="2026-11-14T18:00:00+01:00" />
      <SchemaRow name="notify_form_id" type="text"   label="Klaviyo form ID"  info="Only if show_countdown" />
    </div>
    <DevNote>↳ Countdown: data-drop-date attr → drop-countdown.js · setInterval 1s · remove element at diff ≤ 0</DevNote>
  </Sub>
);

/* ── COLLECTION GRID ───────────────────────────── */
const SectionCollectionGrid = () => (
  <Sub no="2.4" title="collection-grid.liquid">
    <div className="mono" style={{ fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', opacity:.5, marginBottom:S[3] }}>Live components from DS (4-col default · poslední = hover stav)</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>
    <TokenRef rows={[
      { prop:'grid gap',          token:'S[5]',       css:'--space-5',        val:'24px' },
      { prop:'grid padding',      token:'S[6]',       css:'--space-6',        val:'32px' },
      { prop:'grid bg',           token:'T.bone2',    css:'--color-bone2',    val:'#ebe8e0', swatch:T.bone2 },
      { prop:'card bg',           token:'T.paper',    css:'--color-paper',    val:'#ffffff', swatch:T.paper },
      { prop:'card 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 slide',   token:'M.base',     css:'--dur-base',       val:'200ms cubic-bezier(.2,.8,.2,1) · translateY(100%→0)' },
      { prop:'quick-add bg',      token:'T.ink',      css:'--color-ink',      val:'#0a0a0a', swatch:T.ink },
      { 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 font',      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',         token:'T.neon',     css:'--color-neon',     val:'#ff2ec4 bg · T.ink text · mono 10px', swatch:T.neon },
      { prop:'tag · LAST N dot',  token:'T.negative', css:'--color-negative', val:'#c53030 dot · 6×6px border-radius 50%', swatch:T.negative },
    ]}/>
    <div style={{ marginTop:S[5], border:`1px solid ${T.ink}` }}>
      <SchemaHeader/>
      <SchemaRow name="heading"          type="text"     label="Section heading"    info="Optional" />
      <SchemaRow name="collection"       type="collection" label="Collection"       info="" />
      <SchemaRow name="products_per_page" type="range"   label="Products per page"  options="4–48, default 12" />
      <SchemaRow name="columns_desktop"  type="range"    label="Columns (desktop)"  options="2–4, default 4" />
      <SchemaRow name="columns_mobile"   type="range"    label="Columns (mobile)"   options="1–2, default 2" />
      <SchemaRow name="enable_quick_add" type="checkbox" label="Enable quick-add"   info="true" />
    </div>
    <DevNote>↳ Quick-add: glose.js toggle .is-hovered · CSS translateY(100%→0) · žádný AJAX na hover, jen class toggle</DevNote>
  </Sub>
);

/* ── PRODUCT DETAIL ────────────────────────────── */
const SectionProductDetail = () => (
  <Sub no="2.5" title="product-detail.liquid">
    <div className="mono" style={{ fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', opacity:.5, marginBottom:S[3] }}>PDP — live interactive component · klikni na barvu/velikost/přidej do košíku</div>
    <PDPInteractive/>
    <TokenRef rows={[
      { prop:'layout',              token:'1.2fr / 1fr',  css:'grid-template-columns', val:'gallery 55% · form 45%' },
      { prop:'gallery border',      token:'T.ink',        css:'--color-ink',           val:'1px solid #0a0a0a', swatch:T.ink },
      { prop:'image ratio',         token:'4/5',          css:'aspect-ratio',          val:'4 / 5' },
      { prop:'form padding',        token:'S[7] / S[6]', css:'--space-7 / --space-6', val:'48px top · 32px sides' },
      { prop:'form gap',            token:'S[5]',         css:'--space-5',             val:'24px (flex-direction: column)' },
      { prop:'title font',          token:'42px 900',     css:'—',                     val:'42px · fontWeight 900 · ls -0.03em · lh 1' },
      { prop:'price font',          token:'24px 900',     css:'—',                     val:'24px · fontWeight 900' },
      { prop:'variant btn · active',token:'T.ink',        css:'--color-ink',           val:'border-bottom-width: 3px · border-color T.ink', swatch:T.ink },
      { prop:'variant btn · idle',  token:'T.n300',       css:'--color-n300',          val:'border-color #cfcdc8', swatch:T.n300 },
      { prop:'qty stepper width',   token:'48px',         css:'—',                     val:'48×56px per button + qty cell' },
      { prop:'ATC height',          token:'56px',         css:'—',                     val:'56px · flex:1' },
      { prop:'ATC bg',              token:'T.ink',        css:'--color-ink',           val:'#0a0a0a → hover: T.neon (#ff2ec4)', swatch:T.ink },
      { prop:'ATC transition',      token:'M.fast',       css:'--dur-fast',            val:'120ms cubic-bezier(.2,.8,.2,1)' },
      { prop:'features divider',    token:'T.n200',       css:'--color-n200',          val:'1px solid #e3e0d8', swatch:T.n200 },
      { prop:'cart drawer',         token:'M.spring',     css:'--dur-spring',          val:'480ms cubic-bezier(.5,1.6,.4,1) · translateX(100%→0)' },
      { prop:'overlay opacity',     token:'0.4',          css:'—',                     val:'rgba(10,10,10,.4) · transition M.base 200ms' },
    ]}/>
    <div style={{ marginTop:S[5], border:`1px solid ${T.ink}` }}>
      <SchemaHeader/>
      <SchemaRow name="show_breadcrumb"  type="checkbox"  label="Show breadcrumb"       info="true" />
      <SchemaRow name="show_stock_status" type="checkbox" label="Show stock status"      info="true" />
      <SchemaRow name="gallery_ratio"    type="select"    label="Gallery aspect ratio"   options="4:5 | 1:1 | 3:4" />
      <SchemaRow name="enable_zoom"      type="checkbox"  label="Image zoom on click"    info="true" />
      <SchemaRow name="show_size_guide"  type="checkbox"  label="Show size guide link"   info="false" />
      <SchemaRow name="show_quantity"    type="checkbox"  label="Show quantity selector"  info="true" />
    </div>
    <DevNote>↳ ATC: intercept form submit → POST /cart/add.js → refreshCart() → dispatch glose:cart:open · žádný page reload</DevNote>
  </Sub>
);

/* ── LOOKBOOK GRID ─────────────────────────────── */
const SectionLookbookGrid = () => (
  <Sub no="2.6" title="lookbook-grid.liquid">
    <div className="mono" style={{ fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', opacity:.5, marginBottom:S[3] }}>Live component · scrolluj pro parallax efekt</div>
    <Lookbook/>
    <TokenRef rows={[
      { prop:'grid columns',    token:'6',           css:'grid-template-columns', val:'repeat(6, 1fr)' },
      { prop:'grid row height', token:'120px',       css:'grid-auto-rows',        val:'120px' },
      { prop:'gap',             token:'0',           css:'—',                     val:'0 · borders dělají mřížku' },
      { prop:'tile border',     token:'T.ink',       css:'--color-ink',           val:'1px solid #0a0a0a (right + bottom)', swatch:T.ink },
      { prop:'parallax depth',  token:'-0.4 → 0.5', css:'—',                     val:'každá tile jiný koeficient · translateY při scrollu' },
      { prop:'parallax ease',   token:'linear',      css:'—',                     val:'60ms linear (přes transition, ne animation)' },
      { prop:'tile label font', token:'mono 10',     css:'--font-mono',           val:'10px · uppercase · ls .18em' },
      { prop:'arrow font',      token:'32px 900',    css:'—',                     val:'32px · fontWeight 900 · align-self flex-end' },
      { prop:'ink tile',        token:'T.ink',       css:'--color-ink',           val:'#0a0a0a bg · T.bone text', swatch:T.ink },
      { prop:'neon accent tile',token:'T.neon',      css:'--color-neon',          val:'#ff2ec4 bg · žádný text', swatch:T.neon },
    ]}/>
    <div style={{ marginTop:S[5], border:`1px solid ${T.ink}` }}>
      <div style={{ padding:`${S[3]}px ${S[5]}px`, background:T.bone2, borderBottom:`1px solid ${T.ink}` }}>
        <span className="mono" style={{ fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', opacity:.6 }}>Blocks (repeatable, max 8)</span>
      </div>
      <SchemaHeader/>
      <SchemaRow name="image"    type="image_picker" label="Image"            info="— (nebo použij bg_color)" />
      <SchemaRow name="bg_color" type="select"       label="Background colour" options="bone|ink|neon|chrome" />
      <SchemaRow name="label"    type="text"         label="Tile label"        info="01 · LOOP" />
      <SchemaRow name="link"     type="url"          label="Link URL"          info="" />
      <SchemaRow name="col_span" type="range"        label="Column span"       options="1–6, default 2" />
      <SchemaRow name="row_span" type="range"        label="Row span"          options="1–4, default 2" />
    </div>
    <DevNote>↳ Parallax: @supports (animation-timeline: scroll()) → CSS scroll-driven · fallback: bez parallaxu · žádný JS scroll listener (iOS perf)</DevNote>
  </Sub>
);

/* ── FOOTER ────────────────────────────────────── */
const SectionFooter = () => (
  <Sub no="2.7" title="footer.liquid">
    <div className="mono" style={{ fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', opacity:.5, marginBottom:S[3] }}>Live component from DS</div>
    <Footer/>
    <TokenRef rows={[
      { prop:'background',     token:'T.ink',    css:'--color-ink',    val:'#0a0a0a · vždy', swatch:T.ink },
      { prop:'color',          token:'T.bone',   css:'--color-bone',   val:'#f5f3ee', swatch:T.bone },
      { prop:'padding',        token:'S[8]',     css:'--space-8',      val:'64px' },
      { prop:'grid',           token:'2fr 1fr…', css:'—',              val:'grid-template-columns: 2fr 1fr 1fr 1fr' },
      { prop:'col gap',        token:'S[6]',     css:'--space-6',      val:'32px' },
      { prop:'wordmark size',  token:'56px',     css:'—',              val:'56px · color T.bone' },
      { prop:'copy color',     token:'T.n300',   css:'--color-n300',   val:'#cfcdc8', swatch:T.n300 },
      { prop:'col heading',    token:'T.neon',   css:'--color-neon',   val:'#ff2ec4 · mono 10px · uppercase', swatch:T.neon },
      { prop:'link color',     token:'T.bone',   css:'--color-bone',   val:'#f5f3ee · 14px · no underline', swatch:T.bone },
      { prop:'divider',        token:'T.n500',   css:'--color-n500',   val:'1px solid #4a4844 · marginTop S[8]', swatch:T.n500 },
      { prop:'legal font',     token:'mono 10',  css:'--font-mono',    val:'10px · uppercase · ls .2em · color T.n300' },
    ]}/>
    <div style={{ marginTop:S[5], border:`1px solid ${T.ink}` }}>
      <SchemaHeader/>
      <SchemaRow name="tagline"   type="text"      label="Brand tagline"   info="Hand-fed metalwork…" />
      <SchemaRow name="col1_links" type="link_list" label="Shop links"     info="linklist handle" />
      <SchemaRow name="col2_links" type="link_list" label="Studio links"   info="linklist handle" />
      <SchemaRow name="col3_links" type="link_list" label="Help links"     info="linklist handle" />
      <SchemaRow name="show_locale" type="checkbox" label="Show locale selector" info="true" />
    </div>
    <Note>↳ Shopify Markets: locale + currency switcher via form action="/localization" · Liquid form tag</Note>
  </Sub>
);

/* ── BUTTONS ───────────────────────────────────── */
const SectionButtons = () => (
  <Sub no="2.8" title="buttons — glose.css reference">
    <div className="mono" style={{ fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', opacity:.5, marginBottom:S[3] }}>Live components from DS — všechny varianty a stavy</div>
    <ButtonsBlock/>
    <TokenRef rows={[
      { prop:'primary bg',        token:'T.ink',   css:'--color-ink',    val:'#0a0a0a', swatch:T.ink },
      { prop:'primary bg · hover',token:'T.neon',  css:'--color-neon',   val:'#ff2ec4', swatch:T.neon },
      { prop:'primary color · hover', token:'T.ink', css:'--color-ink',  val:'#0a0a0a (text zůstává čitelný na neon)', swatch:T.ink },
      { prop:'ghost bg',          token:'transparent', css:'—',          val:'transparent · border T.ink · hover: T.ink bg' },
      { prop:'disabled bg',       token:'T.n200',  css:'--color-n200',   val:'#e3e0d8', swatch:T.n200 },
      { prop:'disabled color',    token:'T.n400',  css:'--color-n400',   val:'#8a8884', swatch:T.n400 },
      { prop:'border-radius',     token:'R.none',  css:'--radius-none',  val:'0 · vždy · žádné zaoblení' },
      { prop:'font-weight',       token:'700',     css:'—',              val:'700 · Helvetica Neue' },
      { prop:'font-size · LG',    token:'16px',    css:'—',              val:'16px · height 56px · px 32px' },
      { prop:'font-size · MD',    token:'14px',    css:'—',              val:'14px · height 44px · px 24px' },
      { prop:'font-size · SM',    token:'12px',    css:'—',              val:'12px · height 36px · px 12px' },
      { prop:'transition',        token:'M.fast',  css:'--dur-fast',     val:'120ms cubic-bezier(.2,.8,.2,1) · bg + color' },
    ]}/>
    <Note>↳ Liquid class: btn-primary | btn-ghost | btn-link · size modifier: btn--lg | btn--md | btn--sm</Note>
  </Sub>
);

const SectionsSection = () => (
  <Section no="02" title="Sections" kicker="live ds components + token values">
    <SectionAnnouncementBar/>
    <SectionHeader/>
    <SectionHero/>
    <SectionCollectionGrid/>
    <SectionProductDetail/>
    <SectionLookbookGrid/>
    <SectionFooter/>
    <SectionButtons/>
  </Section>
);

Object.assign(window, { SectionsSection });