// Stryke — Studio direction · core primitives + tokens
// Monochrome #151515 / #F5F5F5 / white + electric lime. Schibsted + Space Grotesk.

window.STU = {
  white: '#FFFFFF',
  paper: '#FFFFFF',
  surface: '#F5F5F5',
  surface2: '#EDEDED',
  ink: '#151515',
  ink2: '#1E1E1E',
  inkSoft: '#6B6B6B',
  inkFaint: '#9A9A9A',
  line: '#ECECEC',
  lineMid: '#E0E0E0',
  lime: '#CBF63D',
  limeDeep: '#B6E024',
  limeDim: '#EAF9B8',
  good: '#1F8A4C',
  goodSoft: '#E6F4EA',
  warn: '#C2410C',
  warnSoft: '#FBEAE0',
  sans: "'Schibsted Grotesk', system-ui, -apple-system, sans-serif",
  num: "'Space Grotesk', system-ui, sans-serif",
};

(function injectCSS() {
  const S = window.STU;
  const css = `
    *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
    .stu-app, .stu-app *{font-family:${S.sans};letter-spacing:-0.01em}
    .stu-num{font-family:${S.num};font-feature-settings:'tnum' 1}
    .stu-scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
    .stu-scroll::-webkit-scrollbar{display:none}
    .stu-tap{cursor:pointer;transition:transform .12s ease, opacity .12s ease, background .15s ease}
    .stu-tap:active{transform:scale(.97);opacity:.9}
    .stu-press:active{transform:scale(.985)}
    button.stu-btn{border:none;font-family:${S.sans};cursor:pointer;font-weight:700;letter-spacing:-0.01em;white-space:nowrap;transition:transform .12s ease, background .15s ease, opacity .15s}
    button.stu-btn:active{transform:scale(.97)}
    button.stu-btn:disabled{opacity:.4;cursor:default;transform:none}
    .stu-in{animation:stuIn .4s cubic-bezier(.2,.7,.2,1) forwards}
    .stu-in-back{animation:stuInBack .4s cubic-bezier(.2,.7,.2,1) forwards}
    @keyframes stuIn{from{transform:translateX(22px)}to{transform:translateX(0)}}
    @keyframes stuInBack{from{transform:translateX(-22px)}to{transform:translateX(0)}}
    @keyframes stuFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
    @keyframes stuPop{0%{transform:scale(.8);opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
    @keyframes stuBump{0%{transform:scale(.62)}55%{transform:scale(1.14)}100%{transform:scale(1)}}
    @keyframes stuTick{0%{transform:translateY(60%);opacity:0}100%{transform:translateY(0);opacity:1}}
    @keyframes stuPulse{0%,100%{opacity:1}50%{opacity:.35}}
    @keyframes stuSheet{from{transform:translateY(100%)}to{transform:translateY(0)}}
    @keyframes stuRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
    @keyframes stuConfetti{0%{transform:translateY(-10px) rotate(0);opacity:1}100%{transform:translateY(560px) rotate(540deg);opacity:0}}
    .stu-input{width:100%;border:1.5px solid ${S.line};border-radius:14px;padding:14px 16px;font-size:16px;font-family:${S.sans};background:${S.white};color:${S.ink};outline:none;transition:border-color .15s, background .15s}
    .stu-input:focus{border-color:${S.ink};background:${S.white}}
    .stu-input::placeholder{color:${S.inkFaint}}
    .stu-live-dot{animation:stuPulse 1.6s ease-in-out infinite}
  `;
  const tag = document.createElement('style');
  tag.id = 'stu-core-css';
  tag.textContent = css;
  document.head.appendChild(tag);
})();

const initials = (name) => name.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase();
window.stuInitials = initials;

// ── Spark mark
function Spark({ size = 13, color, style }) {
  const S = window.STU;
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{ flexShrink: 0, ...style }}>
      <path d="M12 1.5 L13.7 9 L21.5 11 L13.7 13 L12 20.5 L10.3 13 L2.5 11 L10.3 9 Z" fill={color || S.ink} />
    </svg>
  );
}

// ── Avatar
function Avatar({ name, size = 38, dark, lime, ring }) {
  const S = window.STU;
  const bg = lime ? S.lime : dark ? S.ink : S.surface2;
  const fg = lime ? S.ink : dark ? S.white : S.ink;
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%', background: bg, color: fg,
      display: 'grid', placeItems: 'center', fontSize: size * 0.36, fontWeight: 700,
      flexShrink: 0, border: ring ? `2px solid ${S.lime}` : 'none',
    }}>{initials(name)}</div>
  );
}

// ── Top bar (back + title + right slot)
function TopBar({ title, onBack, right, sub }) {
  const S = window.STU;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 16px 10px', minHeight: 44 }}>
      {onBack && (
        <button className="stu-tap" onClick={onBack} aria-label="Back" style={{
          border: 'none', background: S.surface, width: 38, height: 38, borderRadius: '50%',
          display: 'grid', placeItems: 'center', cursor: 'pointer', flexShrink: 0,
        }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M15 5l-7 7 7 7" stroke={S.ink} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </button>
      )}
      <div style={{ flex: 1, minWidth: 0 }}>
        {title && <div style={{ fontSize: 17, fontWeight: 700, letterSpacing: '-0.02em', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{title}</div>}
        {sub && <div style={{ fontSize: 12, color: S.inkSoft, marginTop: 1 }}>{sub}</div>}
      </div>
      {right}
    </div>
  );
}

// ── Buttons
function Button({ children, onClick, variant = 'primary', full, size = 'lg', disabled, style, icon }) {
  const S = window.STU;
  const pads = { lg: '15px 22px', md: '12px 18px', sm: '9px 14px' };
  const fonts = { lg: 15.5, md: 14, sm: 13 };
  const variants = {
    primary: { background: S.ink, color: S.white },
    lime: { background: S.lime, color: S.ink },
    outline: { background: 'transparent', color: S.ink, boxShadow: `inset 0 0 0 1.5px ${S.ink}` },
    soft: { background: S.surface, color: S.ink },
    ghost: { background: 'transparent', color: S.inkSoft },
  };
  return (
    <button className="stu-btn" onClick={onClick} disabled={disabled} style={{
      ...variants[variant], padding: pads[size], fontSize: fonts[size], borderRadius: 100,
      width: full ? '100%' : 'auto', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      ...style,
    }}>{icon}{children}</button>
  );
}

// ── Chip / pill
function Chip({ children, active, lime, onClick, style }) {
  const S = window.STU;
  return (
    <div className={onClick ? 'stu-tap' : ''} onClick={onClick} style={{
      display: 'inline-flex', alignItems: 'center', gap: 6, padding: '6px 12px', borderRadius: 100,
      fontSize: 12.5, fontWeight: 600, whiteSpace: 'nowrap',
      background: lime ? S.lime : active ? S.ink : S.surface,
      color: lime ? S.ink : active ? S.white : S.inkSoft,
      ...style,
    }}>{children}</div>
  );
}

// ── Section label
function Label({ children, style }) {
  return <div style={{ fontSize: 11.5, fontWeight: 700, letterSpacing: '0.03em', color: window.STU.inkSoft, ...style }}>{children}</div>;
}

// ── Card
function Card({ children, onClick, dark, lime, pad = 18, radius = 20, style }) {
  const S = window.STU;
  return (
    <div className={onClick ? 'stu-tap stu-press' : ''} onClick={onClick} style={{
      background: lime ? S.lime : dark ? S.ink : S.surface, color: dark ? S.white : S.ink,
      borderRadius: radius, padding: pad, ...style,
    }}>{children}</div>
  );
}

// ── Stepper (score entry)
function Stepper({ value, onChange, min = 1, max = 12, tone = 'ink' }) {
  const S = window.STU;
  const btn = (label, fn, disabled) => (
    <button className="stu-btn" disabled={disabled} onClick={fn} style={{
      width: 44, height: 44, borderRadius: '50%', background: S.surface, color: S.ink, fontSize: 22, fontWeight: 600,
      display: 'grid', placeItems: 'center',
    }}>{label}</button>
  );
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      {btn('−', () => onChange(Math.max(min, value - 1)), value <= min)}
      <div className="stu-num" style={{ width: 40, textAlign: 'center', fontSize: 28, fontWeight: 600, letterSpacing: '-0.02em' }}>{value}</div>
      {btn('+', () => onChange(Math.min(max, value + 1)), value >= max)}
    </div>
  );
}

// ── Toggle
function Toggle({ on, onChange }) {
  const S = window.STU;
  return (
    <div className="stu-tap" onClick={() => onChange(!on)} style={{
      width: 48, height: 28, borderRadius: 100, background: on ? S.ink : S.surface2, position: 'relative', transition: 'background .2s', flexShrink: 0,
    }}>
      <div style={{ position: 'absolute', top: 3, left: on ? 23 : 3, width: 22, height: 22, borderRadius: '50%', background: '#fff', transition: 'left .2s cubic-bezier(.3,1.4,.5,1)', boxShadow: '0 1px 3px rgba(0,0,0,.2)' }}></div>
    </div>
  );
}

// ── Segmented control
function Segmented({ options, value, onChange, style }) {
  const S = window.STU;
  return (
    <div style={{ display: 'flex', background: S.surface, borderRadius: 100, padding: 4, gap: 4, ...style }}>
      {options.map(o => {
        const v = typeof o === 'string' ? o : o.value;
        const lab = typeof o === 'string' ? o : o.label;
        const on = v === value;
        return (
          <button key={v} className="stu-btn" onClick={() => onChange(v)} style={{
            flex: 1, padding: '9px 8px', borderRadius: 100, fontSize: 13, fontWeight: 700,
            background: on ? S.white : 'transparent', color: on ? S.ink : S.inkSoft,
            boxShadow: on ? '0 1px 4px rgba(0,0,0,.08)' : 'none',
          }}>{lab}</button>
        );
      })}
    </div>
  );
}

// ── Legal-safe note (persistent reassurance / compliance surface)
function LegalNote({ style }) {
  const S = window.STU;
  return (
    <div style={{ display: 'flex', gap: 8, alignItems: 'flex-start', padding: '11px 14px', background: S.surface, borderRadius: 14, ...style }}>
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" style={{ marginTop: 1, flexShrink: 0 }}><path d="M12 3l7 3v5c0 4.4-3 8.3-7 9.5C8 22.3 5 18.4 5 14V6l7-3z" stroke={S.inkSoft} strokeWidth="1.8" strokeLinejoin="round"/></svg>
      <div style={{ fontSize: 11.5, color: S.inkSoft, lineHeight: 1.4 }}>Stryke tracks who owes who — it never holds or moves money. You settle up outside the app.</div>
    </div>
  );
}

// ── Bottom tab bar
function TabBar({ active, onNav }) {
  const S = window.STU;
  const tabs = [
    { k: 'home', label: 'Home', icon: 'M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z' },
    { k: 'rounds', label: 'Rounds', icon: 'M4 5h16M4 12h16M4 19h10' },
    { k: 'standings', label: 'Standings', icon: 'M6 20V10M12 20V4M18 20v-7' },
    { k: 'settings', label: 'Settings', icon: 'M12 15a3 3 0 100-6 3 3 0 000 6zM4 12h2m12 0h2M12 4v2m0 12v2' },
  ];
  return (
    <div style={{ display: 'flex', borderTop: `1px solid ${S.line}`, background: S.white, paddingBottom: 8, flexShrink: 0 }}>
      {tabs.map(t => {
        const on = t.k === active;
        return (
          <button key={t.k} className="stu-btn" onClick={() => onNav(t.k)} style={{ flex: 1, background: 'transparent', padding: '11px 0 5px', position: 'relative' }}>
            {on && <div style={{ position: 'absolute', top: 0, left: '50%', transform: 'translateX(-50%)', width: 24, height: 3, background: S.lime, borderRadius: 2 }}></div>}
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" style={{ display: 'block', margin: '0 auto' }}>
              <path d={t.icon} stroke={on ? S.ink : S.inkFaint} strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            <div style={{ fontSize: 10, fontWeight: 600, marginTop: 3, color: on ? S.ink : S.inkFaint }}>{t.label}</div>
          </button>
        );
      })}
    </div>
  );
}

// ── Page scaffold: scrollable body + optional sticky footer + optional tab bar
function Page({ children, footer, tab, bg, scrollRef }) {
  const S = window.STU;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', background: bg || S.white }}>
      <div ref={scrollRef} className="stu-scroll" style={{ flex: 1, minHeight: 0 }}>{children}</div>
      {footer && <div style={{ flexShrink: 0, padding: '12px 20px calc(12px + env(safe-area-inset-bottom))', background: bg || S.white, borderTop: tab ? 'none' : `1px solid ${S.line}` }}>{footer}</div>}
      {tab}
    </div>
  );
}

Object.assign(window, { Spark, Avatar, TopBar, Button, Chip, Label, Card, Stepper, Toggle, Segmented, LegalNote, TabBar, Page });