/* ds-motion.jsx — Motion principles + named transitions */

const Motion = () => (
  <Section no="05" title="Motion" kicker="four durations · one curve family">
    <Sub no="5.1" title="Principles">
      <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:0, border:`1px solid ${T.ink}` }}>
        {[
          ['QUIET', 'Motion serves a purpose — never decorative. If a transition can be removed without losing meaning, remove it.'],
          ['DIRECTIONAL', 'Cart slides FROM the bag icon. Drop hero pushes UP from below. Motion always reflects spatial intent.'],
          ['MATERIAL', 'Cubic ease (.2,.8,.2,1) on everything except the cart drawer (spring). Linear is forbidden.'],
        ].map(([k, body], i) => (
          <div key={k} style={{
            padding:S[6], background:T.paper,
            borderRight: i < 2 ? `1px solid ${T.ink}` : 'none',
          }}>
            <div className="mono" style={{ fontSize:11, letterSpacing:'.2em', color:T.neon, marginBottom:S[4] }}>0{i+1} · {k}</div>
            <p style={{ fontSize:15, lineHeight:1.55, color:T.ink, margin:0 }}>{body}</p>
          </div>
        ))}
      </div>
    </Sub>

    <Sub no="5.2" title="Named transitions">
      <div style={{ background:T.paper, border:`1px solid ${T.ink}` }}>
        {[
          { use:'Hover state', dur:'fast · 120ms', what:'button bg, link underline grow, image zoom prep' },
          { use:'Default UI', dur:'base · 200ms', what:'tab swap, accordion, value step' },
          { use:'Page / route', dur:'slow · 360ms', what:'page transitions, image zoom into PDP' },
          { use:'Cart drawer', dur:'spring · 480ms', what:'drawer in, modal pop, toast' },
        ].map((row, i) => (
          <div key={i} style={{
            display:'grid', gridTemplateColumns:'1fr 1fr 2fr',
            padding:`${S[4]}px ${S[6]}px`,
            borderBottom: i < 3 ? `1px solid ${T.n200}` : 'none',
            alignItems:'center',
          }}>
            <span style={{ fontWeight:700, fontSize:15 }}>{row.use}</span>
            <span className="mono" style={{ fontSize:11, letterSpacing:'.12em', color:T.neon }}>{row.dur}</span>
            <span style={{ fontSize:13, color:T.n500 }}>{row.what}</span>
          </div>
        ))}
      </div>
    </Sub>
  </Section>
);

Object.assign(window, { Motion });