// sketch.jsx — wireframe primitives, OsloKollega brand-tilpasset
// Mørk blå #11183d som ink, korall #f2545c som aksent. Poppins som primær
// font (Caveat beholdes kun for håndskrevne annotasjoner). OK-logoen som
// stilisert person med hånden opp, røde aksent på "hånden".

const SK = {
  // Brand
  ink: '#11183d',          // Mørk blå
  paper: '#fbfaf6',        // Varmhvit (litt off-white for skisse-vibe)
  pureWhite: '#FFFFFF',
  iceBlue: '#bbe8ff',      // Isblå (bg)
  iceBlueLight: '#e5f3fc', // lysere variant
  yellow: '#f2cc8f',       // Gul
  coral: '#f2545c',        // Mørk korall (= accent)
  green: '#08605f',
  purple: '#586ba4',
  lightCoral: '#fcddde',
  lightYellow: '#faebd2',
  lightGreen: '#cedfdf',
  lightPurple: '#dee1ed',
  lightBlue: '#D0D1DC',
  // System
  critical: '#d32037',
  warn: '#f2b950',
  success: '#08654f',
  info: '#28589f',
  // Aliases (matches old API)
  faint: 'rgba(17,24,61,0.08)',
  line: 'rgba(17,24,61,0.45)',
  soft: 'rgba(17,24,61,0.55)',
  fill: 'rgba(17,24,61,0.04)',
  accent: '#f2545c',
  accentSoft: '#fcddde',
  // Fonts
  hand: '"Caveat", "Kalam", cursive',
  label: '"Poppins", -apple-system, system-ui, sans-serif',
  body: '"Poppins", -apple-system, system-ui, sans-serif',
};

if (typeof document !== 'undefined' && !document.getElementById('sk-defs')) {
  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  svg.id = 'sk-defs';
  svg.style.cssText = 'position:absolute;width:0;height:0;pointer-events:none';
  svg.innerHTML = `
    <defs>
      <filter id="sk-rough">
        <feTurbulence type="fractalNoise" baseFrequency="0.022" numOctaves="2" seed="3"/>
        <feDisplacementMap in="SourceGraphic" scale="1.2"/>
      </filter>
    </defs>`;
  document.body.appendChild(svg);

  const s = document.createElement('style');
  s.id = 'sk-styles';
  s.textContent = `
    .sk{font-family:${SK.body};color:${SK.ink};-webkit-font-smoothing:antialiased;font-weight:400}
    .sk-paper{background:${SK.paper}}
    .sk-hand{font-family:${SK.hand};font-weight:600}
    .sk-lbl{font-family:${SK.label};font-weight:500}
    .sk-rough{filter:url(#sk-rough)}
    .sk-box{border:1.25px solid ${SK.ink};border-radius:6px;background:${SK.paper}}
    .sk-box-soft{border:1.25px solid ${SK.line};border-radius:6px;background:${SK.paper}}
    .sk-box-fill{background:${SK.fill};border:1.25px solid ${SK.line};border-radius:6px}
    .sk-dashed{border:1.25px dashed ${SK.line};border-radius:6px;background:transparent}
    .sk-btn{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1.25px solid ${SK.ink};
      border-radius:16px;background:${SK.paper};font-family:${SK.label};font-size:11px;font-weight:500;color:${SK.ink};
      letter-spacing:0.005em;white-space:nowrap}
    .sk-btn-primary{background:${SK.ink};color:${SK.pureWhite}}
    .sk-btn-accent{background:${SK.coral};color:${SK.pureWhite};border-color:${SK.coral}}
    .sk-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border:1px solid ${SK.line};
      border-radius:12px;font-family:${SK.label};font-size:10px;font-weight:500;color:${SK.ink};background:${SK.paper};
      white-space:nowrap}
    .sk-chip-accent{background:${SK.lightCoral};border-color:${SK.coral};color:${SK.coral}}
    .sk-chip-ice{background:${SK.iceBlue};border-color:${SK.iceBlue};color:${SK.ink}}
    .sk-annot{font-family:${SK.hand};font-size:18px;color:${SK.coral};font-weight:700;letter-spacing:0.005em;line-height:1.1}
    .sk-tag{font-family:${SK.label};font-size:9px;letter-spacing:0.08em;text-transform:uppercase;color:${SK.soft};font-weight:600}
    .sk-h1{font-family:${SK.label};font-size:19px;font-weight:600;letter-spacing:-0.015em;color:${SK.ink};line-height:1.2}
    .sk-h2{font-family:${SK.label};font-size:15px;font-weight:600;color:${SK.ink};line-height:1.25}
    .sk-h3{font-family:${SK.label};font-size:11.5px;font-weight:600;color:${SK.ink};letter-spacing:0.005em}
    .sk-t{font-family:${SK.body};font-size:11px;color:${SK.ink};line-height:1.4;font-weight:400}
    .sk-t-soft{color:${SK.soft}}
    .sk-line{height:0;border-top:1.25px solid ${SK.line}}
    .sk-line-faint{height:0;border-top:1px solid ${SK.faint}}
    .sk-avatar{width:22px;height:22px;border-radius:50%;border:1.25px solid ${SK.ink};background:${SK.iceBlueLight};
      display:inline-flex;align-items:center;justify-content:center;font-family:${SK.label};font-size:9px;font-weight:600;color:${SK.ink}}
  `;
  document.head.appendChild(s);
}

// ── OK-logo: stilisert person med hånden opp ────────────────────────────────
// Forenklet wireframe-versjon av OsloKollega-merket. Mørk blå figur, rød "hånd".
const OkLogo = ({ size = 18, mono = false, style }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{ display: 'block', flexShrink: 0, ...style }}>
    {/* Hode */}
    <circle cx="9.5" cy="5.5" r="2.8" fill={mono ? 'currentColor' : SK.ink} />
    {/* Kropp + løftet arm */}
    <path d="M9.5 9 L9.5 21 M9.5 14 L15.5 14 M9.5 14 L17.5 6.5"
      stroke={mono ? 'currentColor' : SK.ink} strokeWidth="2.4" strokeLinecap="round" fill="none" />
    {/* Hånden — korall-aksent */}
    <circle cx="17.5" cy="6.5" r="2" fill={mono ? 'currentColor' : SK.coral} />
    {/* Bein 2 */}
    <path d="M15.5 14 L15.5 21" stroke={mono ? 'currentColor' : SK.ink} strokeWidth="2.4" strokeLinecap="round" fill="none" />
  </svg>
);

// Brand-merke til topbar — logo + ord
const Brand = ({ small = false }) => (
  <Row gap={6} style={{ alignItems: 'center' }}>
    <OkLogo size={small ? 16 : 19} />
    <span style={{
      fontFamily: SK.label, fontWeight: 600, fontSize: small ? 12 : 13.5,
      letterSpacing: -0.01, color: SK.ink,
    }}>OsloKollega</span>
  </Row>
);

// Fjelltopper — brand-grafikk. Subtil dekorativ silhuett.
const Fjelltopper = ({ width = 160, height = 32, color = SK.iceBlue, accent = SK.coral, style }) => (
  <svg width={width} height={height} viewBox="0 0 160 32" style={{ display: 'block', ...style }}>
    <path d="M0 32 L 22 12 L 40 28 L 60 6 L 82 26 L 102 14 L 124 28 L 144 10 L 160 24 L 160 32 Z"
      fill={color} />
    <circle cx="60" cy="6" r="3.2" fill={accent} />
    <circle cx="144" cy="10" r="2.6" fill={SK.ink} opacity="0.65" />
  </svg>
);

// ── Building blocks ─────────────────────────────────────────────────────────
const SBox = ({ style, soft, fill, dashed, rough, children, className = '', ...rest }) => (
  <div
    className={`${dashed ? 'sk-dashed' : soft ? 'sk-box-soft' : fill ? 'sk-box-fill' : 'sk-box'} ${rough ? 'sk-rough' : ''} ${className}`}
    style={style}
    {...rest}
  >
    {children}
  </div>
);

const Bar = ({ w = '100%', h = 7, mt = 0, opacity = 1, color = SK.faint }) => (
  <div style={{ width: w, height: h, background: color, borderRadius: 2, marginTop: mt, opacity }} />
);

const Lines = ({ count = 3, widths = ['92%', '78%', '60%'], gap = 6, h = 6 }) => (
  <div style={{ display: 'flex', flexDirection: 'column', gap }}>
    {Array.from({ length: count }).map((_, i) => (
      <Bar key={i} w={widths[i % widths.length]} h={h} />
    ))}
  </div>
);

const Btn = ({ children, primary, accent, style, ...rest }) => (
  <span className={`sk-btn ${primary ? 'sk-btn-primary' : ''} ${accent ? 'sk-btn-accent' : ''}`} style={style} {...rest}>
    {children}
  </span>
);

const Chip = ({ children, accent, ice, style }) => (
  <span className={`sk-chip ${accent ? 'sk-chip-accent' : ''} ${ice ? 'sk-chip-ice' : ''}`} style={style}>{children}</span>
);

const SkAvatar = ({ initials = 'AB', style }) => (
  <span className="sk-avatar" style={style}>{initials}</span>
);

const Tag = ({ children, style }) => <span className="sk-tag" style={style}>{children}</span>;

const Annot = ({ children, dir = 'down', style }) => {
  const arrows = {
    down: <svg width="22" height="36" viewBox="0 0 22 36" fill="none" style={{ marginLeft: -4 }}>
      <path d="M3 2 C 6 14, 14 18, 12 32" stroke={SK.coral} strokeWidth="1.5" strokeLinecap="round" fill="none"/>
      <path d="M8 28 L 12 33 L 16 27" stroke={SK.coral} strokeWidth="1.5" strokeLinecap="round" fill="none"/>
    </svg>,
    up: <svg width="22" height="36" viewBox="0 0 22 36" fill="none">
      <path d="M12 34 C 14 22, 6 18, 8 4" stroke={SK.coral} strokeWidth="1.5" strokeLinecap="round" fill="none"/>
      <path d="M3 9 L 8 3 L 14 8" stroke={SK.coral} strokeWidth="1.5" strokeLinecap="round" fill="none"/>
    </svg>,
    right: <svg width="44" height="20" viewBox="0 0 44 20" fill="none">
      <path d="M2 14 C 12 8, 28 8, 40 10" stroke={SK.coral} strokeWidth="1.5" strokeLinecap="round" fill="none"/>
      <path d="M34 5 L 41 10 L 35 16" stroke={SK.coral} strokeWidth="1.5" strokeLinecap="round" fill="none"/>
    </svg>,
    left: <svg width="44" height="20" viewBox="0 0 44 20" fill="none">
      <path d="M42 14 C 32 8, 16 8, 4 10" stroke={SK.coral} strokeWidth="1.5" strokeLinecap="round" fill="none"/>
      <path d="M10 5 L 3 10 L 9 16" stroke={SK.coral} strokeWidth="1.5" strokeLinecap="round" fill="none"/>
    </svg>,
  };
  return (
    <div style={{ display: 'flex', alignItems: dir === 'right' || dir === 'left' ? 'center' : 'flex-start', gap: 4, ...style }}>
      {dir === 'left' ? arrows.left : null}
      {(dir === 'down' || dir === 'up') ? (
        <div style={{ display: 'flex', flexDirection: dir === 'down' ? 'column' : 'column-reverse', alignItems: 'flex-start' }}>
          <span className="sk-annot">{children}</span>
          {arrows[dir]}
        </div>
      ) : null}
      {dir === 'right' ? <><span className="sk-annot">{children}</span>{arrows.right}</> : null}
      {dir === 'left' ? <span className="sk-annot">{children}</span> : null}
    </div>
  );
};

// TopNav — bruker Brand-komponenten i stedet for ◆-symbolet
const TopNav = ({ items = [], active = 0, right = null, dense = false }) => (
  <div style={{
    display: 'flex', alignItems: 'center', gap: 18,
    padding: dense ? '8px 14px' : '11px 18px',
    borderBottom: `1.25px solid ${SK.ink}`,
    background: SK.paper,
  }}>
    <Brand />
    <div style={{ display: 'flex', gap: 14, marginLeft: 4 }}>
      {items.map((it, i) => (
        <span key={i} className="sk-lbl" style={{
          fontSize: 11.5,
          color: i === active ? SK.ink : SK.soft,
          fontWeight: i === active ? 600 : 500,
          borderBottom: i === active ? `2px solid ${SK.coral}` : '2px solid transparent',
          paddingBottom: 3,
        }}>{it}</span>
      ))}
    </div>
    <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 10 }}>
      {right}
    </div>
  </div>
);

const Placeholder = ({ w = '100%', h = 60, label, style }) => (
  <div style={{
    width: w, height: h, position: 'relative',
    background: `repeating-linear-gradient(135deg, ${SK.fill} 0 6px, transparent 6px 12px)`,
    border: `1px dashed ${SK.line}`, borderRadius: 4,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    ...style,
  }}>
    {label ? <span style={{ fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace', fontSize: 9.5, color: SK.soft }}>{label}</span> : null}
  </div>
);

const Row = ({ children, gap = 10, style }) => (
  <div style={{ display: 'flex', gap, ...style }}>{children}</div>
);
const Col = ({ children, gap = 10, style }) => (
  <div style={{ display: 'flex', flexDirection: 'column', gap, ...style }}>{children}</div>
);

const Phone = ({ children, style }) => (
  <div style={{
    width: 260, height: 520,
    border: `2px solid ${SK.ink}`, borderRadius: 28,
    padding: 8, background: SK.paper, position: 'relative',
    ...style,
  }}>
    <div style={{
      width: 60, height: 5, background: SK.ink, borderRadius: 3,
      position: 'absolute', top: 12, left: '50%', transform: 'translateX(-50%)',
    }} />
    <div style={{
      width: '100%', height: '100%', border: `1px solid ${SK.line}`, borderRadius: 20,
      overflow: 'hidden', display: 'flex', flexDirection: 'column',
    }}>{children}</div>
  </div>
);

const Note = ({ children, style }) => (
  <div className="sk-hand" style={{
    background: SK.yellow, color: SK.ink,
    padding: '8px 11px', fontSize: 14, lineHeight: 1.25,
    border: `1px solid rgba(17,24,61,0.08)`, borderRadius: 3,
    boxShadow: '0 1px 0 rgba(0,0,0,0.04), 0 6px 14px rgba(17,24,61,0.10)',
    transform: 'rotate(-1deg)',
    maxWidth: 190,
    fontFamily: SK.hand, fontWeight: 600,
    ...style,
  }}>{children}</div>
);

Object.assign(window, {
  SK, SBox, Bar, Lines, Btn, Chip, SkAvatar, Tag, Annot, TopNav, Placeholder, Row, Col, Phone, Note,
  OkLogo, Brand, Fjelltopper,
});