/* Shared atoms: Button, Badge, Eyebrow, Dot, Mark, Wordmark */

const Eyebrow = ({children, signal, style}) => (
  <div style={{
    fontFamily: 'var(--font-mono)',
    fontSize: '11px',
    letterSpacing: '0.18em',
    textTransform: 'uppercase',
    color: signal ? 'var(--signal)' : 'var(--fg-2)',
    ...style,
  }}>{children}</div>
);

const Dot = ({state = 'idle', glow}) => {
  const map = {
    idle:    'var(--fg-1)',
    dutch:   'var(--warn)',
    occupied:'var(--signal)',
    demand:  'var(--danger)',
    retired: 'var(--fg-3)',
    live:    'var(--good)',
  };
  const c = map[state] || 'var(--fg-2)';
  return <span style={{
    display:'inline-block', width:8, height:8, borderRadius:'50%',
    background:c,
    boxShadow: (glow || state==='live' || state==='occupied') ? `0 0 10px ${c}` : 'none',
    flexShrink:0,
  }}/>;
};

const Badge = ({state, children, style, glow}) => {
  const map = {
    idle:    {c:'rgba(255,255,255,0.80)', b:'rgba(255,255,255,0.14)'},
    dutch:   {c:'#c47a35', b:'rgba(196,122,53,0.32)'},
    occupied:{c:'#2979c8', b:'rgba(41,121,200,0.32)'},
    live:    {c:'#4a9e62', b:'rgba(74,158,98,0.32)'},
    demand:  {c:'#d24a4a', b:'rgba(210,74,74,0.32)'},
    retired: {c:'rgba(255,255,255,0.28)', b:'rgba(255,255,255,0.09)'},
  };
  const t = state ? map[state] : {c:'var(--fg-1)', b:'var(--line-1)'};
  return <span style={{
    display:'inline-flex', alignItems:'center', gap:8,
    fontFamily:'var(--font-mono)', fontSize:'11px', letterSpacing:'0.14em', textTransform:'uppercase',
    padding:'6px 10px', border:`1px solid ${t.b}`, background:'var(--bg-2)',
    color:t.c, lineHeight:1,
    boxShadow: glow ? `0 0 0 1px ${t.c}, 0 0 16px -4px ${t.c}55` : 'none',
    ...style,
  }}>{state && <Dot state={state}/>}{children}</span>;
};

const Btn = ({variant='default', children, onClick, style, type='button'}) => {
  const base = {
    fontFamily:'var(--font-mono)', fontSize:'12px', letterSpacing:'0.10em', textTransform:'uppercase',
    padding:'14px 20px', border:'1px solid', cursor:'pointer',
    display:'inline-flex', alignItems:'center', gap:10, lineHeight:1,
    transition:'background 80ms var(--ease-out), color 80ms var(--ease-out), border-color 80ms var(--ease-out), transform 80ms var(--ease-out)',
    userSelect:'none',
  };
  const variants = {
    default: {background:'transparent', color:'var(--fg-0)', borderColor:'var(--line-1)'},
    primary: {background:'var(--signal)', color:'var(--signal-fg)', borderColor:'var(--signal)'},
    ghost:   {background:'transparent', color:'var(--fg-1)', borderColor:'transparent'},
    invert:  {background:'var(--bg-inv)', color:'var(--fg-inv)', borderColor:'var(--bg-inv)'},
  };
  const [hov, setHov] = React.useState(false);
  const [press, setPress] = React.useState(false);
  const hoverStyle = (() => {
    if (!hov) return {};
    if (variant === 'primary') return {background:'#3a8ed8', borderColor:'#3a8ed8'};
    if (variant === 'invert')  return {background:'#F0F0F0'};
    if (variant === 'ghost')   return {color:'var(--signal)'};
    return {background:'var(--bg-3)', borderColor:'var(--fg-3)'};
  })();
  return (
    <button type={type} onClick={onClick}
      onMouseEnter={()=>setHov(true)} onMouseLeave={()=>{setHov(false); setPress(false);}}
      onMouseDown={()=>setPress(true)} onMouseUp={()=>setPress(false)}
      style={{...base, ...variants[variant], ...hoverStyle,
        transform: press ? 'scale(.97)' : 'none', ...style}}>{children}</button>
  );
};

const MonoLink = ({href='#', children, style, ...rest}) => {
  const [hov, setHov] = React.useState(false);
  return <a href={href}
    {...rest}
    onMouseEnter={()=>setHov(true)} onMouseLeave={()=>setHov(false)}
    style={{
      fontFamily:'var(--font-mono)', fontSize:'12px', letterSpacing:'0.10em', textTransform:'uppercase',
      color: hov ? 'var(--signal)' : 'var(--fg-1)',
      textDecoration:'none',
      borderBottom: hov ? '1px solid var(--signal)' : '1px solid transparent',
      paddingBottom:2,
      transition:'color 80ms var(--ease-out), border-color 80ms var(--ease-out)',
      ...style,
    }}>{children}</a>;
};

const Mark = ({size=28, negative=true, style}) => (
  <img src={`./assets/${negative?'logo-negative-transparent.png':'logo.png'}`}
    alt="usufruct"
    style={{width:size, height:size, objectFit:'contain', display:'block', ...style}}/>
);

const GitHubMark = ({size=18, style}) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-label="GitHub"
    style={{display:'block', ...style}}>
    <path d="M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.56 0-.27-.01-1-.02-1.96-3.2.69-3.87-1.54-3.87-1.54-.52-1.33-1.28-1.69-1.28-1.69-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.03 1.76 2.69 1.25 3.35.96.1-.74.4-1.25.73-1.54-2.55-.29-5.24-1.28-5.24-5.7 0-1.26.45-2.29 1.18-3.1-.12-.29-.51-1.46.11-3.04 0 0 .96-.31 3.16 1.18.92-.26 1.9-.39 2.88-.39.98 0 1.96.13 2.88.39 2.2-1.49 3.16-1.18 3.16-1.18.62 1.58.23 2.75.11 3.04.74.81 1.18 1.84 1.18 3.1 0 4.43-2.7 5.4-5.27 5.69.41.36.78 1.06.78 2.14 0 1.55-.01 2.8-.01 3.18 0 .31.21.68.8.56C20.71 21.39 24 17.08 24 12 24 5.65 18.85.5 12 .5Z"/>
  </svg>
);

const DiscordMark = ({size=18, style}) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-label="Discord"
    style={{display:'block', ...style}}>
    <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/>
  </svg>
);

const MailMark = ({size=18, style}) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
    strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-label="Email"
    style={{display:'block', ...style}}>
    <rect x="2" y="4" width="20" height="16" rx="2"/>
    <path d="m2 7 10 6 10-6"/>
  </svg>
);

const SectionLabel = () => null;

const ArcLabel = ({label}) => (
  <div style={{
    display:'flex', alignItems:'center', gap:18,
    padding: '0 0 8px 0',
  }}>
    <span style={{
      fontFamily:'var(--font-mono)', fontWeight:600, fontSize:13, letterSpacing:'0.34em',
      color:'var(--signal)', textTransform:'uppercase', whiteSpace:'nowrap', flex:'0 0 auto',
    }}>{label}</span>
    <div style={{height:1, background:'var(--signal)', opacity:0.35, flex:'1 1 auto'}}/>
  </div>
);

const SectionDivider = ({n, title, arc, signal}) => (
  <React.Fragment>
    {arc ? <div style={{padding:'24px 0 0 0'}}><ArcLabel label={arc}/></div> : null}
    <div style={{
      display:'flex', alignItems:'center', gap:18,
      padding: arc ? '0' : '24px 0 0 0',
    }}>
      <div style={{width:64, height:1, background:'var(--line-1)', flex:'0 0 auto'}}/>
      <span style={{
        fontFamily:'var(--font-mono)', fontSize:12, letterSpacing:'0.24em',
        color:'var(--signal)', textTransform:'uppercase', whiteSpace:'nowrap', flex:'0 0 auto',
      }}>§ {String(n).padStart(2,'0')}</span>
      <div style={{width:24, height:1, background:'var(--line-1)', flex:'0 0 auto'}}/>
      <span style={{
        fontFamily:'var(--font-mono)', fontSize:12, letterSpacing:'0.24em',
        color: signal ? 'var(--signal)' : 'var(--fg-2)', textTransform:'uppercase', whiteSpace:'nowrap', flex:'0 0 auto',
      }}>{title}</span>
      <div style={{height:1, background:'var(--line-1)', flex:'1 1 auto'}}/>
    </div>
  </React.Fragment>
);

Object.assign(window, { Eyebrow, Dot, Badge, Btn, MonoLink, Mark, GitHubMark, DiscordMark, MailMark, SectionLabel, SectionDivider });