/* ds-shared.jsx — tokens, primitives, layout helpers shared by all DS sections */

const T = /* tokens */ {
  // surfaces
  ink:        '#0a0a0a',
  ink2:       '#1a1a1a',
  bone:       '#f5f3ee',
  bone2:      '#ebe8e0',
  paper:      '#ffffff',
  chrome:     '#cfcdc8',
  chromeDark: '#8a8884',
  // accent
  neon:       '#ff2ec4',
  neonInk:    '#0a0a0a',   // text color on neon
  // accent 2 (rare — highlight tape, sale, energy moments)
  yellow:     '#eaff00',
  // semantic
  positive:   '#1f8a4c',
  negative:   '#c53030',
  // neutrals (6 steps)
  n100: '#f5f3ee',
  n200: '#e3e0d8',
  n300: '#cfcdc8',
  n400: '#8a8884',
  n500: '#4a4844',
  n600: '#0a0a0a',
};

const S = /* spacing scale */ { 0:0, 1:4, 2:8, 3:12, 4:16, 5:24, 6:32, 7:48, 8:64, 9:96, 10:128 };
const R = /* radii */ { none: 0, xs: 2, sm: 4, md: 8 };  // intentionally tight—brand is rectilinear
const Z = /* z-index */ { base:0, sticky:10, drawer:20, overlay:30, modal:40, toast:50 };
const M = /* motion */ {
  fast:   { d: 120, e: 'cubic-bezier(.2,.8,.2,1)'  },
  base:   { d: 200, e: 'cubic-bezier(.2,.8,.2,1)'  },
  slow:   { d: 360, e: 'cubic-bezier(.2,.8,.2,1)'  },
  spring: { d: 480, e: 'cubic-bezier(.5,1.6,.4,1)' },
};

/* ── Wordmark (locked from F1A) ─────────────────────────── */
const Wordmark = ({
  size = 32, color = T.ink, showBar = true,
  barHeight = 0.50, barTop = 0.55, bleed = 0.04, longBar = false,
}) => {
  const h = size * barHeight, top = size * barTop;
  const rightBleed = longBar ? '-1.6em' : `${-bleed}em`;
  return (
    <span style={{
      display:'inline-block', position:'relative',
      fontFamily:"'Helvetica Neue', Helvetica, Arial, sans-serif",
      fontWeight: 900, fontSize: size, lineHeight: 0.85, letterSpacing:'-0.045em',
      color, padding:'0 2px',
      paddingBottom: size * 0.22,
      paddingRight: longBar ? '1.6em' : 0,
    }}>
      {showBar && (
        <span aria-hidden style={{
          position:'absolute', left:`${-bleed}em`, right: rightBleed,
          top, height: h, background: T.neon, zIndex: 0,
        }}/>
      )}
      <span style={{position:'relative', zIndex: 1}}>glosé</span>
    </span>
  );
};

const Monogram = ({ size = 32, bg = T.ink, fg = T.bone, accent = T.neon }) => {
  const acuteW = size * 0.16, acuteH = size * 0.085;
  return (
    <span style={{
      display:'inline-flex', alignItems:'center', justifyContent:'center',
      width: size, height: size, background: bg, color: fg,
      position:'relative', overflow:'hidden',
    }}>
      <span style={{
        position:'relative', zIndex:1,
        fontFamily:"'Helvetica Neue', Helvetica, Arial, sans-serif",
        fontWeight: 900, fontSize: size * 0.95, letterSpacing:'-0.04em',
        lineHeight: 1, marginTop: -size * 0.04,
      }}>g</span>
      <span aria-hidden style={{
        position:'absolute', top: size * 0.12, right: size * 0.20,
        width: acuteW, height: acuteH,
        background: accent, transform:'skewX(-22deg)',
      }}/>
    </span>
  );
};

/* ── Layout primitives ──────────────────────────────────── */
const Section = ({ no, title, kicker, children, bg = T.bone, ink = T.ink, id }) => (
  <section id={id} data-screen-label={`${no} ${title}`} style={{
    background: bg, color: ink, borderTop: `1px solid ${ink}`,
  }}>
    <header style={{
      display:'grid', gridTemplateColumns:'120px 1fr auto', alignItems:'baseline',
      padding:`${S[6]}px ${S[7]}px ${S[5]}px`,
      borderBottom:`1px solid ${ink}`,
    }}>
      <span className="mono" style={{ fontSize:11, letterSpacing:'.18em', textTransform:'uppercase', opacity:.5 }}>{no}</span>
      <h2 style={{
        fontFamily:"'Helvetica Neue', Helvetica, Arial, sans-serif",
        fontWeight:900, fontSize:48, letterSpacing:'-0.04em', margin:0, lineHeight:.95,
      }}>{title}</h2>
      <span className="mono" style={{ fontSize:11, letterSpacing:'.18em', textTransform:'uppercase', opacity:.5 }}>{kicker}</span>
    </header>
    <div style={{ padding: `${S[7]}px ${S[7]}px ${S[8]}px` }}>{children}</div>
  </section>
);

const Sub = ({ no, title, children }) => (
  <div style={{ marginBottom: S[8] }}>
    <div style={{
      display:'flex', alignItems:'baseline', gap:S[4],
      paddingBottom: S[3], marginBottom: S[5],
      borderBottom: `1px solid ${T.ink}`,
    }}>
      <span className="mono" style={{ fontSize:11, letterSpacing:'.18em', textTransform:'uppercase', opacity:.5 }}>{no}</span>
      <h3 style={{ fontWeight:900, fontSize:24, letterSpacing:'-0.02em', margin:0 }}>{title}</h3>
    </div>
    {children}
  </div>
);

const Note = ({ children }) => (
  <div className="mono" style={{
    fontSize:10, letterSpacing:'.18em', textTransform:'uppercase',
    opacity:.55, marginTop: S[3],
  }}>{children}</div>
);

const Tile = ({ label, code, h = 200, bg = T.paper, ink = T.ink, children, span = 1 }) => (
  <div style={{ gridColumn:`span ${span}`, border:`1px solid ${T.ink}`, display:'flex', flexDirection:'column' }}>
    <div style={{
      flex:1, minHeight: h, background: bg, color: ink,
      display:'flex', alignItems:'center', justifyContent:'center', padding: S[5],
      position:'relative', overflow:'hidden',
    }}>{children}</div>
    {(label || code) && (
      <div className="mono" style={{
        borderTop:`1px solid ${T.ink}`, padding:`${S[2]}px ${S[3]}px`,
        display:'flex', justifyContent:'space-between', gap: S[3],
        fontSize:10, letterSpacing:'.18em', textTransform:'uppercase',
      }}>
        <span>{label}</span>
        {code && <span style={{opacity:.5, textTransform:'none', letterSpacing:'.06em'}}>{code}</span>}
      </div>
    )}
  </div>
);

Object.assign(window, { T, S, R, Z, M, Wordmark, Monogram, Section, Sub, Note, Tile });