const { useState, useEffect, useRef } = React;

// T and S are provided by ark-context.jsx as window globals

const Badge = ({ children, variant = 'default' }) => {
  const vs = {
    default: { bg: T.surfaceRaised, color: T.muted,    border: T.border },
    accent:  { bg: T.accentSubtle,  color: T.accent,   border: T.accentDim },
    green:   { bg: T.greenSubtle,   color: T.green,    border: 'oklch(28% 0.07 145)' },
    warn:    { bg: T.warningSubtle, color: T.warning,  border: 'oklch(28% 0.07 75)' },
  };
  const v = vs[variant] || vs.default;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 5,
      padding: '3px 10px', borderRadius: 4,
      background: v.bg, color: v.color, border: `1px solid ${v.border}`,
      fontFamily: T.mono, fontSize: 10.5,
      letterSpacing: '0.07em', textTransform: 'uppercase', fontWeight: 500, whiteSpace: 'nowrap',
    }}>
      {children}
    </span>
  );
};

const Btn = ({ children, variant = 'primary', size = 'md', onClick, style: xs = {}, disabled = false, type = 'button' }) => {
  const [hov, setHov] = useState(false);
  const sz = { sm: { padding: '6px 14px', fontSize: 13 }, md: { padding: '9px 18px', fontSize: 14 }, lg: { padding: '12px 26px', fontSize: 15 } }[size] || {};
  const vr = {
    primary:   { background: disabled ? T.dim : hov ? T.accentHover : T.accent, color: 'oklch(98% 0.005 240)', border: 'none' },
    secondary: { background: hov ? T.surfaceRaised : 'transparent', color: T.text, border: `1px solid ${hov ? T.borderStrong : T.border}` },
    ghost:     { background: 'transparent', color: hov ? T.text : T.muted, border: 'none' },
    outline:   { background: 'transparent', color: hov ? T.accent : T.muted, border: `1px solid ${hov ? T.accentDim : T.border}` },
    danger:    { background: hov ? 'oklch(50% 0.18 25)' : 'transparent', color: T.red, border: `1px solid ${T.red}` },
  }[variant] || {};
  return (
    <button type={type} onClick={onClick} disabled={disabled}
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: T.sans, fontWeight: 500,
        borderRadius: 6, cursor: disabled ? 'not-allowed' : 'pointer', transition: 'all 0.14s ease',
        letterSpacing: '-0.01em', opacity: disabled ? 0.45 : 1, ...sz, ...vr, ...xs }}>
      {children}
    </button>
  );
};

const MonoTag = ({ children, dim = false, color }) => (
  <span style={{
    display: 'inline-flex', alignItems: 'center', padding: '2px 7px', borderRadius: 3,
    background: T.surfaceRaised, border: `1px solid ${T.border}`,
    fontFamily: T.mono, fontSize: 10.5, color: color || (dim ? T.dim : T.muted), letterSpacing: '0.03em',
  }}>
    {children}
  </span>
);

const Sec = ({ children, style: s = {}, tight = false, id }) => (
  <section id={id} style={{ maxWidth: 1100, margin: '0 auto', padding: tight ? '64px 40px' : '88px 40px', ...s }}>
    {children}
  </section>
);

const HR = ({ style: s = {} }) => <div style={{ height: 1, background: T.border, ...s }} />;

const SectionLabel = ({ children }) => (
  <div style={{ fontFamily: T.mono, fontSize: 10.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: T.muted, marginBottom: 14 }}>
    {children}
  </div>
);

const AccordionItem = ({ question, answer, defaultOpen = false }) => {
  const [open, setOpen] = useState(defaultOpen);
  return (
    <div style={{ borderBottom: `1px solid ${T.border}` }}>
      <button onClick={() => setOpen(o => !o)} style={{
        width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        padding: '18px 0', background: 'none', border: 'none', cursor: 'pointer',
        fontFamily: T.sans, fontSize: 14.5, fontWeight: 500, color: T.text, textAlign: 'left', gap: 16,
      }}>
        <span>{question}</span>
        <span style={{ fontFamily: T.mono, fontSize: 16, color: T.muted, transform: open ? 'rotate(45deg)' : 'none', transition: 'transform 0.2s ease', flexShrink: 0 }}>+</span>
      </button>
      {open && (
        <div style={{ paddingBottom: 18, color: T.muted, fontFamily: T.sans, fontSize: 13.5, lineHeight: 1.72 }}>
          {answer}
        </div>
      )}
    </div>
  );
};

Object.assign(window, { Badge, Btn, MonoTag, Sec, HR, SectionLabel, AccordionItem });