/* Dexilion Design System — React primitives.
   Ported verbatim from the design system's component sources
   (Claude Design project c6faf46b-4ac2-4e1b-8d88-4350b633c773), with the ESM
   `export` swapped for globals so they can be loaded as browser scripts.
   Every visual value comes from a token in ds/tokens/ — do not hardcode colors.

   Babel transforms every text/babel script into the one global script scope, so
   each file wraps itself and exports through `window` at the bottom. */

(function () {

/* ---------------------------------------------------------------- Button -- */

/* Borders use longhands (not the `border` shorthand) so the hover tones can
   swap borderColor without React removing/reintroducing a shorthand value. */
const btnBorder={borderWidth:'1px',borderStyle:'solid'};
const btnTone = {
  primary:{background:'var(--blue-500)',color:'var(--white)',...btnBorder,borderColor:'var(--blue-500)'},
  secondary:{background:'var(--white)',color:'var(--ink-900)',...btnBorder,borderColor:'var(--border-default)'},
  accent:{background:'var(--gold-400)',color:'var(--ink-900)',...btnBorder,borderColor:'var(--gold-400)'},
  ghost:{background:'transparent',color:'var(--blue-500)',...btnBorder,borderColor:'transparent'},
  danger:{background:'var(--danger-500)',color:'var(--white)',...btnBorder,borderColor:'var(--danger-500)'}
};
const btnHoverTone = {
  primary:{background:'var(--blue-600)',borderColor:'var(--blue-600)'},
  secondary:{background:'var(--neutral-100)',borderColor:'var(--border-strong)'},
  accent:{background:'var(--gold-300)',borderColor:'var(--gold-300)'},
  ghost:{background:'var(--blue-50)'},
  danger:{background:'#9b1d1a',borderColor:'#9b1d1a'}
};
const btnSizing = {
  sm:{height:'var(--control-h-sm)',padding:'0 12px',fontSize:'var(--fs-body-sm)'},
  md:{height:'var(--control-h-md)',padding:'0 18px',fontSize:'var(--fs-body-sm)'},
  lg:{height:'var(--control-h-lg)',padding:'0 24px',fontSize:'var(--fs-body)'}
};

function Button({variant='primary',size='md',disabled=false,fullWidth=false,iconLeft,iconRight,children,style,...rest}){
  const [hover,setHover]=React.useState(false);
  const [press,setPress]=React.useState(false);
  return (
    <button
      disabled={disabled}
      onMouseEnter={()=>setHover(true)}
      onMouseLeave={()=>{setHover(false);setPress(false);}}
      onMouseDown={()=>setPress(true)}
      onMouseUp={()=>setPress(false)}
      style={{
        display:'inline-flex',alignItems:'center',justifyContent:'center',gap:'8px',
        font:'var(--text-body-font)',fontWeight:'var(--fw-semibold)',fontFamily:'var(--font-sans)',
        letterSpacing:'0.005em',whiteSpace:'nowrap',flexShrink:0,borderRadius:'var(--radius-control)',cursor:disabled?'not-allowed':'pointer',
        transition:'var(--transition-control), transform var(--dur-fast) var(--ease-standard)',
        width:fullWidth?'100%':'auto',opacity:disabled?0.45:1,
        boxShadow:variant==='primary'&&!disabled?'var(--shadow-xs)':'none',
        transform:press&&!disabled?'translateY(1px)':'none',
        ...btnTone[variant],...btnSizing[size],
        ...(hover&&!disabled?btnHoverTone[variant]:null),
        ...style
      }}
      {...rest}
    >
      {iconLeft}{children}{iconRight}
    </button>
  );
}

/* ------------------------------------------------------------------ Card -- */

const cardPads={sm:'16px',md:'24px',lg:'32px'};

function Card({variant='default',padding='md',eyebrow,title,footer,interactive=false,accent=false,children,style,...rest}){
  const [hover,setHover]=React.useState(false);
  const base={
    background:variant==='inverse'?'var(--ink-900)':variant==='brand'?'var(--surface-brand-soft)':'var(--surface-card)',
    color:variant==='inverse'?'var(--white)':'var(--text-body)',
    borderWidth:'1px',borderStyle:'solid',
    borderColor:variant==='inverse'?'transparent':variant==='brand'?'var(--blue-100)':'var(--border-subtle)',
    borderRadius:'var(--radius-card)',padding:cardPads[padding],
    boxShadow:variant==='elevated'?'var(--shadow-md)':'var(--shadow-xs)',
    ...(accent?{borderTopWidth:'var(--rule-accent-w)',borderTopStyle:'solid',borderTopColor:'var(--rule-accent)'}:null),
    transition:'box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard)',
    fontFamily:'var(--font-sans)'
  };
  const hovered=interactive&&hover?{boxShadow:'var(--shadow-lg)',borderColor:'var(--blue-200)',transform:'translateY(-2px)',
    ...(accent?{borderTopColor:'var(--rule-accent)'}:null)}:null;
  return (
    <div onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)}
      style={{...base,...hovered,cursor:interactive?'pointer':'default',...style}} {...rest}>
      {eyebrow&&<div style={{font:'var(--text-eyebrow)',letterSpacing:'var(--ls-eyebrow)',textTransform:'uppercase',
        color:variant==='inverse'?'var(--gold-400)':'var(--blue-500)',marginBottom:'10px'}}>{eyebrow}</div>}
      {title&&<div style={{fontFamily:'var(--font-serif)',fontSize:'var(--fs-h4)',fontWeight:'var(--fw-semibold)',letterSpacing:'var(--ls-heading)',
        color:variant==='inverse'?'var(--white)':'var(--text-strong)',marginBottom:'8px'}}>{title}</div>}
      {children}
      {footer&&<div style={{marginTop:'20px',paddingTop:'16px',
        borderTop:'1px solid '+(variant==='inverse'?'rgba(255,255,255,.14)':'var(--border-subtle)')}}>{footer}</div>}
    </div>
  );
}

/* ----------------------------------------------------------------- Badge -- */

const badgeTones={
  neutral:{bg:'var(--neutral-100)',fg:'var(--ink-700)',bd:'var(--neutral-200)'},
  brand:{bg:'var(--blue-50)',fg:'var(--blue-700)',bd:'var(--blue-100)'},
  accent:{bg:'var(--gold-100)',fg:'#7a6800',bd:'var(--gold-200)'},
  success:{bg:'var(--success-100)',fg:'var(--success-500)',bd:'#c3e6da'},
  warning:{bg:'var(--warning-100)',fg:'var(--warning-500)',bd:'#f0dcb4'},
  danger:{bg:'var(--danger-100)',fg:'var(--danger-500)',bd:'#f2ccca'}
};

function Badge({tone='neutral',dot=false,children,style,...rest}){
  const t=badgeTones[tone];
  return (
    <span style={{display:'inline-flex',alignItems:'center',gap:'6px',height:'22px',padding:'0 8px',
      background:t.bg,color:t.fg,border:'1px solid '+t.bd,borderRadius:'var(--radius-xs)',
      fontFamily:'var(--font-sans)',fontSize:'var(--fs-micro)',fontWeight:'var(--fw-semibold)',
      letterSpacing:'0.06em',textTransform:'uppercase',...style}} {...rest}>
      {dot&&<span style={{width:'6px',height:'6px',borderRadius:'999px',background:'currentColor'}}/>}
      {children}
    </span>
  );
}

/* ----------------------------------------------------------------- Input -- */

const controlHeights={sm:'var(--control-h-sm)',md:'var(--control-h-md)',lg:'var(--control-h-lg)'};

function Input({label,hint,error,size='md',prefix,suffix,disabled=false,id,style,...rest}){
  const [focus,setFocus]=React.useState(false);
  const uid=id||React.useId();
  return (
    <div style={{display:'flex',flexDirection:'column',gap:'6px',fontFamily:'var(--font-sans)'}}>
      {label&&<label htmlFor={uid} style={{font:'var(--text-body-font)',fontSize:'var(--fs-body-sm)',fontWeight:'var(--fw-medium)',color:'var(--text-strong)'}}>{label}</label>}
      <div style={{
        display:'flex',alignItems:'center',gap:'8px',height:controlHeights[size],padding:'0 12px',
        background:disabled?'var(--neutral-100)':'var(--white)',
        border:'1px solid '+(error?'var(--danger-500)':focus?'var(--blue-500)':'var(--border-default)'),
        borderRadius:'var(--radius-control)',
        boxShadow:focus?'var(--ring-focus)':'none',
        transition:'var(--transition-control)'
      }}>
        {prefix&&<span style={{color:'var(--text-muted)',display:'flex'}}>{prefix}</span>}
        <input id={uid} disabled={disabled} onFocus={()=>setFocus(true)} onBlur={()=>setFocus(false)}
          style={{flex:1,minWidth:0,border:'none',outline:'none',background:'transparent',
            font:'var(--text-body-font)',fontSize:size==='sm'?'var(--fs-body-sm)':'var(--fs-body)',
            color:'var(--text-strong)',...style}} {...rest}/>
        {suffix&&<span style={{color:'var(--text-muted)',display:'flex'}}>{suffix}</span>}
      </div>
      {(error||hint)&&<span style={{fontSize:'var(--fs-caption)',color:error?'var(--danger-500)':'var(--text-muted)'}}>{error||hint}</span>}
    </div>
  );
}

/* --------------------------------------------------------------- Textarea -- */
/* Not a design-system primitive — the same Input chrome at auto height, needed
   for the contact form's message field. Promote it upstream if it spreads. */

function Textarea({label,hint,error,rows=4,disabled=false,id,style,...rest}){
  const [focus,setFocus]=React.useState(false);
  const uid=id||React.useId();
  return (
    <div style={{display:'flex',flexDirection:'column',gap:'6px',fontFamily:'var(--font-sans)'}}>
      {label&&<label htmlFor={uid} style={{fontSize:'var(--fs-body-sm)',fontWeight:'var(--fw-medium)',color:'var(--text-strong)'}}>{label}</label>}
      <textarea id={uid} rows={rows} disabled={disabled} onFocus={()=>setFocus(true)} onBlur={()=>setFocus(false)}
        style={{width:'100%',boxSizing:'border-box',padding:'10px 12px',resize:'vertical',
          background:disabled?'var(--neutral-100)':'var(--white)',color:'var(--text-strong)',
          border:'1px solid '+(error?'var(--danger-500)':focus?'var(--blue-500)':'var(--border-default)'),
          borderRadius:'var(--radius-control)',boxShadow:focus?'var(--ring-focus)':'none',
          font:'var(--text-body-font)',outline:'none',transition:'var(--transition-control)',...style}} {...rest}/>
      {(error||hint)&&<span style={{fontSize:'var(--fs-caption)',color:error?'var(--danger-500)':'var(--text-muted)'}}>{error||hint}</span>}
    </div>
  );
}

/* ---------------------------------------------------------------- Select -- */

function Select({label,hint,error,size='md',options=[],disabled=false,id,style,...rest}){
  const [focus,setFocus]=React.useState(false);
  const uid=id||React.useId();
  return (
    <div style={{display:'flex',flexDirection:'column',gap:'6px',fontFamily:'var(--font-sans)'}}>
      {label&&<label htmlFor={uid} style={{fontSize:'var(--fs-body-sm)',fontWeight:'var(--fw-medium)',color:'var(--text-strong)'}}>{label}</label>}
      <div style={{position:'relative',display:'flex'}}>
        <select id={uid} disabled={disabled} onFocus={()=>setFocus(true)} onBlur={()=>setFocus(false)}
          style={{appearance:'none',width:'100%',height:controlHeights[size],padding:'0 36px 0 12px',
            background:disabled?'var(--neutral-100)':'var(--white)',color:'var(--text-strong)',
            border:'1px solid '+(error?'var(--danger-500)':focus?'var(--blue-500)':'var(--border-default)'),
            borderRadius:'var(--radius-control)',boxShadow:focus?'var(--ring-focus)':'none',
            font:'var(--text-body-font)',fontSize:size==='sm'?'var(--fs-body-sm)':'var(--fs-body)',
            outline:'none',cursor:disabled?'not-allowed':'pointer',transition:'var(--transition-control)',...style}}
          {...rest}>
          {options.map(o=>{const v=typeof o==='string'?o:o.value;const l=typeof o==='string'?o:o.label;
            return <option key={v} value={v}>{l}</option>;})}
        </select>
        <span aria-hidden="true" style={{position:'absolute',right:'12px',top:'50%',transform:'translateY(-50%)',
          pointerEvents:'none',width:'8px',height:'8px',borderRight:'1.75px solid var(--text-muted)',
          borderBottom:'1.75px solid var(--text-muted)',marginTop:'-3px',rotate:'45deg'}}/>
      </div>
      {(error||hint)&&<span style={{fontSize:'var(--fs-caption)',color:error?'var(--danger-500)':'var(--text-muted)'}}>{error||hint}</span>}
    </div>
  );
}

/* -------------------------------------------------------------- Checkbox -- */

function Checkbox({label,description,checked,defaultChecked,indeterminate=false,disabled=false,onChange,id,...rest}){
  const uid=id||React.useId();
  const ref=React.useRef(null);
  React.useEffect(()=>{if(ref.current)ref.current.indeterminate=indeterminate;},[indeterminate]);
  const [inner,setInner]=React.useState(!!defaultChecked);
  const isOn=checked!==undefined?checked:inner;
  return (
    <label htmlFor={uid} style={{display:'flex',gap:'10px',alignItems:'flex-start',fontFamily:'var(--font-sans)',
      cursor:disabled?'not-allowed':'pointer',opacity:disabled?0.5:1}}>
      <input ref={ref} id={uid} type="checkbox" checked={isOn} disabled={disabled}
        onChange={e=>{if(checked===undefined)setInner(e.target.checked);onChange&&onChange(e);}}
        style={{position:'absolute',opacity:0,width:0,height:0}} {...rest}/>
      <span aria-hidden="true" style={{flex:'0 0 auto',boxSizing:'border-box',width:'18px',height:'18px',marginTop:'2px',
        borderRadius:'var(--radius-xs)',display:'flex',alignItems:'center',justifyContent:'center',
        background:isOn||indeterminate?'var(--blue-500)':'var(--white)',
        border:'1px solid '+(isOn||indeterminate?'var(--blue-500)':'var(--border-default)'),
        transition:'var(--transition-control)'}}>
        {indeterminate
          ? <span style={{width:'9px',height:'2px',background:'var(--white)'}}/>
          : isOn&&<span style={{width:'5px',height:'9px',borderRight:'2px solid var(--white)',borderBottom:'2px solid var(--white)',rotate:'45deg',marginTop:'-2px'}}/>}
      </span>
      <span style={{display:'flex',flexDirection:'column',gap:'2px'}}>
        <span style={{fontSize:'var(--fs-body-sm)',color:'var(--text-strong)'}}>{label}</span>
        {description&&<span style={{fontSize:'var(--fs-caption)',color:'var(--text-muted)'}}>{description}</span>}
      </span>
    </label>
  );
}

/* ------------------------------------------------------------------ Tabs -- */

function Tabs({items=[],value,defaultValue,onChange,variant='underline',style,...rest}){
  const [inner,setInner]=React.useState(defaultValue??items[0]?.value);
  const active=value!==undefined?value:inner;
  const pick=v=>{if(value===undefined)setInner(v);onChange&&onChange(v);};
  const underline=variant==='underline';
  return (
    <div role="tablist" style={{display:'flex',gap:underline?'28px':'4px',fontFamily:'var(--font-sans)',
      borderBottom:underline?'1px solid var(--border-subtle)':'none',
      background:underline?'transparent':'var(--neutral-100)',
      padding:underline?0:'4px',borderRadius:underline?0:'var(--radius-md)',...style}} {...rest}>
      {items.map(it=>{
        const on=it.value===active;
        return (
          <button key={it.value} role="tab" aria-selected={on} onClick={()=>!it.disabled&&pick(it.value)}
            style={{border:'none',background:underline?'transparent':on?'var(--white)':'transparent',
              padding:underline?'0 0 12px':'6px 14px',cursor:it.disabled?'not-allowed':'pointer',
              opacity:it.disabled?0.4:1,borderRadius:underline?0:'var(--radius-sm)',
              boxShadow:!underline&&on?'var(--shadow-xs)':'none',
              color:on?'var(--text-strong)':'var(--text-muted)',
              fontSize:'var(--fs-body-sm)',fontWeight:on?'var(--fw-semibold)':'var(--fw-medium)',
              borderBottom:underline?'2px solid '+(on?'var(--blue-500)':'transparent'):'none',
              marginBottom:underline?'-1px':0,transition:'var(--transition-control)',
              display:'inline-flex',alignItems:'center',gap:'8px'}}>
            {it.label}
            {it.count!==undefined&&<span style={{fontSize:'var(--fs-micro)',color:'var(--text-muted)',
              background:'var(--neutral-100)',borderRadius:'var(--radius-xs)',padding:'1px 5px'}}>{it.count}</span>}
          </button>
        );
      })}
    </div>
  );
}

Object.assign(window, { Button, Card, Badge, Input, Textarea, Select, Checkbox, Tabs });

})();