// Shared sketchy primitives — kept tiny and explicit so each tab composes from same vocab.

const Box = ({children, style, className='', as='div', ...rest}) => {
  const Tag = as;
  return <Tag className={'sketch-box ' + className} style={style} {...rest}>{children}</Tag>;
};

const Pill = ({children, className='', style}) => (
  <span className={'sketch-pill ' + className} style={style}>{children}</span>
);

const Btn = ({children, className='', style, onClick}) => (
  <button className={'sketch-btn ' + className} style={style} onClick={onClick}>{children}</button>
);

// Hand-drawn line of fake text
const FakeLine = ({w='100%', kind='', style}) => (
  <div className={'fake-text ' + kind} style={{width: w, ...style}} />
);

// Mini stack of fake text lines
const FakePara = ({lines=3, widths=['100%','94%','78%'], kind=''}) => (
  <div className="col gap-1">
    {Array.from({length: lines}).map((_,i) => <FakeLine key={i} w={widths[i % widths.length]} kind={kind}/>)}
  </div>
);

const Squiggle = ({style}) => <div className="squiggle" style={style}/>;

const Note = ({children, style}) => <div className="note" style={style}>{children}</div>;

const LabelTag = ({children, rot=-1.2, style}) => (
  <span className="label-tag" style={{transform: `rotate(${rot}deg)`, ...style}}>{children}</span>
);

// SVG hand-drawn arrow (curved or straight)
const Arrow = ({d='M0,0 C40,20 80,-10 120,0', w=130, h=30, color='#d96b2c', label, style}) => (
  <div style={{position:'relative', display:'inline-block', ...style}}>
    <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`} style={{overflow:'visible'}}>
      <path d={d} stroke={color} strokeWidth="1.6" fill="none" strokeLinecap="round" />
      <path d={`M${w-10},${h/2-5} L${w},${h/2} L${w-10},${h/2+5}`} stroke={color} strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
    {label && <div className="annotation" style={{position:'absolute', top:-18, left: w/2-30, color}}>{label}</div>}
  </div>
);

// Simple device chrome: browser/mobile
const Browser = ({title='h2learn.app/...', children, style, className=''}) => (
  <div className={'device ' + className} style={style}>
    <div className="device-bar">
      <span className="dot" /><span className="dot" /><span className="dot" />
      <span style={{marginLeft:8}}>{title}</span>
    </div>
    <div style={{padding: 10}}>{children}</div>
  </div>
);

const Phone = ({children, style, className=''}) => (
  <div className={'device ' + className} style={{borderRadius: 22, padding: 8, width: 280, ...style}}>
    <div style={{borderRadius: 14, overflow:'hidden', border:'1px solid var(--ink)', background:'#fff', minHeight: 540}}>
      <div className="device-bar" style={{height:18, fontSize:10}}>
        <span style={{flex:1}}>9:41</span>
        <span>•••</span>
      </div>
      <div style={{padding:10}}>{children}</div>
    </div>
  </div>
);

// Frame container = labelled wireframe panel
const Frame = ({title, tag, children, style}) => (
  <div className="frame" style={style}>
    <div className="frame-title">
      <h3>{title}</h3>
      {tag && <span className="tag ui">{tag}</span>}
    </div>
    {children}
  </div>
);

// Mini node for graph sketches
const Node = ({x, y, r=14, kind='person', label, glow=false, on=false}) => {
  const colors = {
    person: '#1c5fbf',
    project: '#d96b2c',
    org: '#2a8a5c',
    domain: '#b14fa6',
    method: '#7a6cf0',
    challenge: '#c33a3a',
    bottleneck: '#5b5b5b',
    uncertainty: '#c9a227',
    me: '#1a1a1a',
  };
  const c = colors[kind] || '#1a1a1a';
  return (
    <g>
      {glow && <circle cx={x} cy={y} r={r+8} fill={c} opacity="0.12"/>}
      <circle cx={x} cy={y} r={r} fill={on ? c : '#fff'} stroke={c} strokeWidth={on ? 1.6 : 1.8}/>
      {kind === 'me' && <circle cx={x} cy={y} r={r-4} fill="#fff7cc" stroke={c} strokeWidth="1.4"/>}
      {label && <text x={x} y={y+r+12} fontSize="10" fontFamily="Inter" textAnchor="middle" fill="#1a1a1a">{label}</text>}
    </g>
  );
};

const Edge = ({x1,y1,x2,y2, kind='sim', strength=2, dashed=false, glow=false}) => {
  const colors = {
    sim: '#1c5fbf',
    comp: '#d96b2c',
    dup: '#c33a3a',
    bridge: '#2a8a5c',
    method: '#7a6cf0',
    weak: '#bdbab0',
  };
  const c = colors[kind] || '#1a1a1a';
  return (
    <g>
      {glow && <line x1={x1} y1={y1} x2={x2} y2={y2} stroke={c} strokeWidth={strength+6} opacity="0.15"/>}
      <line x1={x1} y1={y1} x2={x2} y2={y2} stroke={c} strokeWidth={strength}
            strokeDasharray={dashed ? '4 4' : 'none'} strokeLinecap="round" opacity="0.85"/>
    </g>
  );
};

// horizontal section title
const SectionLead = ({eyebrow, title, sub, children}) => (
  <div className="mb-3" style={{maxWidth: 920}}>
    {eyebrow && <div className="ui xsmall uppercase" style={{marginBottom:4}}>{eyebrow}</div>}
    <h2 className="hand-title" style={{fontSize: 30, margin: '4px 0 6px'}}>{title}</h2>
    {sub && <div className="ui small muted-text" style={{maxWidth: 820, fontFamily:'Inter'}}>{sub}</div>}
    {children}
  </div>
);

Object.assign(window, { Box, Pill, Btn, FakeLine, FakePara, Squiggle, Note, LabelTag, Arrow, Browser, Phone, Frame, Node, Edge, SectionLead });