// Reusable controls for the onboarding questionnaire

// ─── ChoiceCard ─────────────────────────────────────────────────
// Big tap-target card. Supports kicker, title, description, optional right-side stat block,
// optional icon (drawn inline, no external assets).
const ChoiceCard = ({ selected, onClick, kicker, title, description, right, icon, columns = 1 }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <button
      onClick={onClick}
      onMouseEnter={()=>setHover(true)}
      onMouseLeave={()=>setHover(false)}
      style={{
        all:'unset', cursor:'pointer', display:'block', width:'100%',
        background: selected ? '#0b1220' : '#ffffff',
        color: selected ? '#ffffff' : '#0b1220',
        border: '1px solid ' + (selected ? '#0b1220' : (hover ? 'rgba(11,18,32,0.28)' : 'rgba(11,18,32,0.10)')),
        borderRadius: 14,
        padding: '18px 20px',
        transition: 'all .18s cubic-bezier(.2,.7,.2,1)',
        boxShadow: selected
          ? '0 8px 24px -10px rgba(11,18,32,0.35)'
          : (hover ? '0 4px 12px -6px rgba(11,18,32,0.15)' : '0 1px 0 rgba(11,18,32,0.02)'),
        transform: hover && !selected ? 'translateY(-1px)' : 'translateY(0)',
      }}
    >
      <div style={{display:'flex', alignItems:'flex-start', gap:16}}>
        {icon ? (
          <div style={{
            width:40, height:40, borderRadius:10, flexShrink:0,
            background: selected ? 'rgba(255,255,255,0.10)' : '#f0eee9',
            border: selected ? '1px solid rgba(255,255,255,0.16)' : '1px solid rgba(11,18,32,0.06)',
            display:'flex', alignItems:'center', justifyContent:'center',
            color: selected ? '#ffffff' : '#0b1220',
          }}>{icon}</div>
        ) : null}
        <div style={{flex:1, minWidth:0}}>
          {kicker ? (
            <div className="caption" style={{
              color: selected ? 'rgba(255,255,255,0.55)' : 'rgba(11,18,32,0.45)',
              marginBottom: 4
            }}>{kicker}</div>
          ) : null}
          <div style={{
            fontSize:17, fontWeight:600, letterSpacing:'-0.012em', lineHeight:1.2,
          }}>{title}</div>
          {description ? (
            <div style={{
              fontSize:13.5, lineHeight:1.45, marginTop:6,
              color: selected ? 'rgba(255,255,255,0.72)' : 'rgba(11,18,32,0.6)'
            }}>{description}</div>
          ) : null}
        </div>
        {right ? (
          <div style={{flexShrink:0, textAlign:'right', color: selected ? 'rgba(255,255,255,0.75)' : 'rgba(11,18,32,0.55)'}}>
            {right}
          </div>
        ) : null}
        {/* checkmark indicator */}
        <div style={{
          width:22, height:22, borderRadius:'50%', flexShrink:0,
          border: '1.5px solid ' + (selected ? '#ffffff' : 'rgba(11,18,32,0.18)'),
          background: selected ? '#ffffff' : 'transparent',
          display:'flex', alignItems:'center', justifyContent:'center',
          marginTop: 2,
          transition:'all .18s ease',
        }}>
          {selected ? (
            <svg width="12" height="12" viewBox="0 0 12 12"><path d="M2.5 6.2 L5 8.5 L9.5 3.5" stroke="#0b1220" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
          ) : null}
        </div>
      </div>
    </button>
  );
};

// ─── PrimaryButton / GhostButton ────────────────────────────────
const PrimaryButton = ({ children, onClick, disabled }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <button onClick={onClick} disabled={disabled} data-cc-primary
      onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)}
      style={{
        all:'unset', cursor: disabled ? 'not-allowed' : 'pointer',
        background: disabled ? 'rgba(11,18,32,0.15)' : '#0b1220',
        color: disabled ? 'rgba(11,18,32,0.45)' : '#ffffff',
        padding:'14px 22px', borderRadius:12, fontWeight:600, fontSize:15,
        letterSpacing:'-0.01em',
        display:'inline-flex', alignItems:'center', gap:10,
        transition: 'all .18s ease',
        transform: hover && !disabled ? 'translateY(-1px)' : 'translateY(0)',
        boxShadow: hover && !disabled ? '0 10px 24px -12px rgba(11,18,32,0.55)' : '0 1px 0 rgba(11,18,32,0.05)',
      }}>
      {children}
      <svg width="14" height="14" viewBox="0 0 14 14"><path d="M2 7 H11 M7 3 L11 7 L7 11" stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
    </button>
  );
};
const GhostButton = ({ children, onClick }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <button onClick={onClick}
      onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)}
      style={{
        all:'unset', cursor:'pointer',
        color: hover ? '#0b1220' : 'rgba(11,18,32,0.55)',
        padding:'14px 14px', borderRadius:12, fontWeight:500, fontSize:14,
        display:'inline-flex', alignItems:'center', gap:8,
        transition:'all .18s ease',
      }}>
      <svg width="14" height="14" viewBox="0 0 14 14"><path d="M12 7 H3 M7 3 L3 7 L7 11" stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
      {children}
    </button>
  );
};

Object.assign(window, { ChoiceCard, PrimaryButton, GhostButton });