// Sketchy wireframe primitives — hand-drawn feel using CSS.
// b&w + occasional accent. Rough rectangles via jittered border-radius,
// hand-written fonts for annotations, monospace for field labels.

const WF = {
  ink: '#1c1c1c',
  ink2: '#4a4a4a',
  ink3: '#8a8a8a',
  paper: '#fafaf6',
  panel: '#f2efe6',
  accent: '#c9a961',   // muted gold
  rose: '#d4a5a5',
  indigo: '#1a1a2e',
  hand: '"Kalam", "Caveat", "Comic Sans MS", cursive',
  mono: '"JetBrains Mono", "Courier New", monospace',
  sans: '"Inter", system-ui, sans-serif',
};

// Rough rectangle: slightly uneven border-radius + slight skew via transform
const roughBorder = (weight = 1.5) => ({
  border: `${weight}px solid ${WF.ink}`,
  borderRadius: '5px 4px 6px 5px / 5px 6px 4px 5px',
});

// Scribble fill — diagonal hand-drawn hatch lines
const scribbleBg = (opacity = 0.08, color = WF.ink) => ({
  backgroundImage: `repeating-linear-gradient(135deg, ${color} 0, ${color} 1px, transparent 1px, transparent 6px)`,
  opacity: 1,
  backgroundColor: `rgba(0,0,0,${opacity})`,
});

// ────────────── Annotation (hand-written)
function Note({ children, style }) {
  return <div style={{ fontFamily: WF.hand, color: WF.ink2, fontSize: 13, lineHeight: 1.2, ...style }}>{children}</div>;
}

// ────────────── Screen frame — the "paper" background
function Screen({ w, h, children, title, device = 'mobile', style }) {
  return (
    <div style={{ width: w, height: h, background: WF.paper, position: 'relative', overflow: 'hidden',
      fontFamily: WF.sans, color: WF.ink, ...style }}>
      {children}
    </div>
  );
}

// ────────────── Sketched box (placeholder container)
function Box({ children, style, rough = true, fill, weight = 1.5, pad = 0 }) {
  return (
    <div style={{
      ...(rough ? roughBorder(weight) : { border: `${weight}px solid ${WF.ink}` }),
      background: fill || 'transparent',
      padding: pad,
      boxSizing: 'border-box',
      ...style,
    }}>{children}</div>
  );
}

// ────────────── Image placeholder — X through it
function ImgBox({ w, h, label, style, ratio }) {
  return (
    <div style={{ width: w, height: h, position: 'relative', ...roughBorder(1.2), background: '#ebe8df',
      overflow: 'hidden', ...style }}>
      <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }} preserveAspectRatio="none">
        <line x1="0" y1="0" x2="100%" y2="100%" stroke={WF.ink3} strokeWidth="0.8" />
        <line x1="100%" y1="0" x2="0" y2="100%" stroke={WF.ink3} strokeWidth="0.8" />
      </svg>
      {label && <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: WF.mono, fontSize: 9, color: WF.ink2, textAlign: 'center', padding: 4 }}>{label}</div>}
    </div>
  );
}

// ────────────── Text line placeholder (squiggle)
function TextLine({ w = '100%', weight = 1.2, style }) {
  return <div style={{ width: w, height: weight * 6, position: 'relative', ...style }}>
    <svg style={{ position: 'absolute', inset: 0 }} width="100%" height="100%" preserveAspectRatio="none">
      <path d={`M0 ${weight*3} Q ${10} ${weight*1}, ${20} ${weight*3} T ${40} ${weight*3} T ${60} ${weight*3} T ${80} ${weight*3} T 100 ${weight*3}`}
        fill="none" stroke={WF.ink2} strokeWidth={weight} vectorEffect="non-scaling-stroke" />
    </svg>
  </div>;
}

function TextBlock({ lines = 3, lastW = '65%', style, gap = 6, weight = 1 }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap, ...style }}>
      {Array.from({ length: lines }).map((_, i) => (
        <TextLine key={i} w={i === lines - 1 ? lastW : '100%'} weight={weight} />
      ))}
    </div>
  );
}

// ────────────── Heading placeholder (thick bar)
function Heading({ w = '70%', h = 18, style }) {
  return <div style={{ width: w, height: h, background: WF.ink, borderRadius: 1, ...style }} />;
}

// ────────────── Button
function Btn({ children, primary, w, style, size = 'md' }) {
  const sizes = { sm: { h: 28, fs: 11, px: 12 }, md: { h: 38, fs: 13, px: 18 }, lg: { h: 48, fs: 14, px: 22 } };
  const s = sizes[size];
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      height: s.h, padding: `0 ${s.px}px`, width: w,
      background: primary ? WF.ink : 'transparent',
      color: primary ? WF.paper : WF.ink,
      fontFamily: WF.sans, fontSize: s.fs, fontWeight: 500,
      ...roughBorder(1.5),
      ...style }}>{children}</div>
  );
}

// ────────────── Input
function Input({ label, placeholder, w = '100%', style, helper }) {
  return (
    <div style={{ width: w, ...style }}>
      {label && <div style={{ fontFamily: WF.mono, fontSize: 10, color: WF.ink2, marginBottom: 4, textTransform: 'uppercase', letterSpacing: 0.5 }}>{label}</div>}
      <div style={{ height: 38, display: 'flex', alignItems: 'center', padding: '0 12px',
        fontFamily: WF.sans, fontSize: 13, color: WF.ink3, ...roughBorder(1.2) }}>
        {placeholder}
      </div>
      {helper && <div style={{ fontFamily: WF.hand, fontSize: 11, color: WF.ink3, marginTop: 4 }}>{helper}</div>}
    </div>
  );
}

// ────────────── Progress dots
function Dots({ count = 5, active = 0, style }) {
  return (
    <div style={{ display: 'flex', gap: 8, alignItems: 'center', ...style }}>
      {Array.from({ length: count }).map((_, i) => (
        <div key={i} style={{ width: i === active ? 22 : 8, height: 8,
          background: i <= active ? WF.ink : 'transparent',
          border: `1.2px solid ${WF.ink}`, borderRadius: 4 }} />
      ))}
    </div>
  );
}

// ────────────── Icon placeholder (tiny square with X or dot)
function IconPh({ size = 24, kind = 'dot', style }) {
  return (
    <div style={{ width: size, height: size, position: 'relative', ...roughBorder(1), ...style }}>
      {kind === 'x' && (
        <svg style={{ position: 'absolute', inset: 2 }} viewBox="0 0 20 20">
          <line x1="2" y1="2" x2="18" y2="18" stroke={WF.ink2} strokeWidth="1.2"/>
          <line x1="18" y1="2" x2="2" y2="18" stroke={WF.ink2} strokeWidth="1.2"/>
        </svg>
      )}
      {kind === 'dot' && <div style={{ position: 'absolute', left: '50%', top: '50%', width: 5, height: 5, background: WF.ink, borderRadius: 3, transform: 'translate(-50%,-50%)' }} />}
      {kind === 'star' && <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: size * 0.55, lineHeight: 1 }}>✦</div>}
      {kind === 'check' && <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: size * 0.6, lineHeight: 1, color: WF.ink }}>✓</div>}
    </div>
  );
}

// ────────────── Arrow / Callout
function Callout({ from, to, label, style }) {
  // from / to = {x,y} percentages, for hand-drawn annotation arrows
  return null; // not used inline; see Note positioning
}

// ────────────── Device chrome
function MobileFrame({ children, w = 300, h = 620, style }) {
  return (
    <div style={{ width: w, height: h, background: WF.paper, position: 'relative', ...roughBorder(2),
      fontFamily: WF.sans, overflow: 'hidden', ...style }}>
      {/* status bar */}
      <div style={{ height: 22, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '0 14px', fontFamily: WF.mono, fontSize: 9, color: WF.ink2, borderBottom: `0.5px dashed ${WF.ink3}` }}>
        <span>9:41</span>
        <span>•••</span>
      </div>
      {children}
    </div>
  );
}

function DesktopFrame({ children, w = 1100, h = 680, style }) {
  return (
    <div style={{ width: w, height: h, background: WF.paper, position: 'relative', ...roughBorder(2),
      fontFamily: WF.sans, overflow: 'hidden', ...style }}>
      {/* browser chrome */}
      <div style={{ height: 28, display: 'flex', alignItems: 'center', gap: 8, padding: '0 12px',
        borderBottom: `1px solid ${WF.ink3}`, background: WF.panel }}>
        <div style={{ width: 9, height: 9, borderRadius: 5, border: `1px solid ${WF.ink2}` }} />
        <div style={{ width: 9, height: 9, borderRadius: 5, border: `1px solid ${WF.ink2}` }} />
        <div style={{ width: 9, height: 9, borderRadius: 5, border: `1px solid ${WF.ink2}` }} />
        <div style={{ flex: 1, marginLeft: 12, height: 16, background: WF.paper, ...roughBorder(1),
          display: 'flex', alignItems: 'center', padding: '0 8px', fontFamily: WF.mono, fontSize: 9, color: WF.ink3 }}>
          persona.app
        </div>
      </div>
      {children}
    </div>
  );
}

// ────────────── Sticky label ("SCREEN 01 — HOMEPAGE")
function ScreenTag({ children, style }) {
  return (
    <div style={{ fontFamily: WF.mono, fontSize: 10, letterSpacing: 1, color: WF.ink2,
      textTransform: 'uppercase', marginBottom: 6, ...style }}>{children}</div>
  );
}

Object.assign(window, {
  WF, roughBorder, scribbleBg,
  Note, Screen, Box, ImgBox, TextLine, TextBlock, Heading,
  Btn, Input, Dots, IconPh, MobileFrame, DesktopFrame, ScreenTag,
});