// Shared sketchy wireframe primitives. Hand-drawn vibe, b&w with one accent.
// All components push to window so other Babel scripts can use them.

const INK = '#1d1b18';
const INK_SOFT = '#5a554d';
const INK_FAINT = '#a8a39a';
const PAPER = '#f6f3ec';
const PAPER_DEEP = '#ebe6db';

// Slight rough-pencil shadow on placeholders
const sketchEdge = (extra = '') =>
  `0 1px 0 rgba(0,0,0,.04), inset 0 0 0 1.5px ${INK} ${extra}`;

// Wavy/scribbled body-copy placeholder lines
function Scribble({ lines = 3, widths, color = INK_SOFT, gap = 9, lineHeight = 6, style = {} }) {
  const ws = widths || Array.from({ length: lines }, (_, i) => 100 - (i === lines - 1 ? 25 + Math.random() * 20 : Math.random() * 12));
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap, ...style }}>
      {ws.slice(0, lines).map((w, i) => (
        <svg key={i} viewBox={`0 0 100 ${lineHeight}`} preserveAspectRatio="none" style={{ width: `${w}%`, height: lineHeight, display: 'block' }}>
          <path
            d={`M0 ${lineHeight/2} Q 8 ${lineHeight/2 - 1.3} 16 ${lineHeight/2} T 32 ${lineHeight/2} T 48 ${lineHeight/2} T 64 ${lineHeight/2} T 80 ${lineHeight/2} T 100 ${lineHeight/2}`}
            stroke={color}
            strokeWidth="1.4"
            fill="none"
            strokeLinecap="round"
            opacity="0.55"
          />
        </svg>
      ))}
    </div>
  );
}

// Heading "block" — handwritten font, optionally underlined
function HW({ children, size = 28, weight = 700, color = INK, style = {}, family = 'Caveat' }) {
  return (
    <div style={{ fontFamily: `'${family}', 'Patrick Hand', cursive`, fontSize: size, fontWeight: weight, lineHeight: 1.05, color, letterSpacing: family === 'Caveat' ? '-0.01em' : 0, ...style }}>
      {children}
    </div>
  );
}

// A box that looks like a hand-drawn frame
function Box({ children, style = {}, accent = false, accentColor, dashed = false, padding = 16, label }) {
  return (
    <div style={{
      position: 'relative',
      border: `${dashed ? '1.5px dashed' : '1.8px solid'} ${accent && accentColor ? accentColor : INK}`,
      background: 'transparent',
      padding,
      borderRadius: 2,
      ...style,
    }}>
      {label && (
        <span style={{
          position: 'absolute', top: -10, left: 10, padding: '0 6px',
          background: PAPER, fontFamily: "'Patrick Hand', cursive",
          fontSize: 12, color: INK_SOFT, textTransform: 'uppercase', letterSpacing: '.08em',
        }}>{label}</span>
      )}
      {children}
    </div>
  );
}

// Video placeholder — dashed frame with X + "VIDEO" label + play glyph.
// When `src` is provided, plays the real video file (autoplay/loop/muted).
function VideoBlock({ height = 220, label = 'VIDEO', note, style = {}, accent, src, className }) {
  return (
    <div className={className} style={{
      position: 'relative', width: '100%', height,
      border: `1.8px dashed ${accent || INK}`,
      background: src ? '#0d0c0a' : `repeating-linear-gradient(135deg, ${PAPER_DEEP} 0 6px, transparent 6px 14px)`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      overflow: 'hidden',
      ...style,
    }}>
      {src && (
        <video
          src={src}
          autoPlay
          loop
          muted
          playsInline
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}
        />
      )}
      {!src && (
        <>
          {/* Sketchy X across */}
          <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: .35 }}>
            <path d="M2 2 Q 30 28 98 98" stroke={INK_SOFT} strokeWidth=".4" fill="none" />
            <path d="M98 2 Q 70 28 2 98" stroke={INK_SOFT} strokeWidth=".4" fill="none" />
          </svg>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, background: PAPER, padding: '6px 14px', border: `1.5px solid ${INK}`, borderRadius: 999 }}>
            <svg width="14" height="14" viewBox="0 0 14 14"><polygon points="3,2 12,7 3,12" fill={INK} /></svg>
            <span style={{ fontFamily: "'Patrick Hand', cursive", fontSize: 14, letterSpacing: '.12em', color: INK }}>{label}</span>
          </div>
          {note && (
            <div style={{ position: 'absolute', bottom: 8, left: 10, fontFamily: "'Patrick Hand', cursive", fontSize: 12, color: INK_SOFT }}>{note}</div>
          )}
        </>
      )}
    </div>
  );
}

// Hand-drawn arrow
function Arrow({ direction = 'right', length = 48, color = INK, thickness = 1.6, style = {} }) {
  const rot = { right: 0, down: 90, left: 180, up: 270 }[direction];
  return (
    <svg width={length} height={20} viewBox="0 0 60 20" style={{ transform: `rotate(${rot}deg)`, ...style }}>
      <path d="M2 10 Q 18 7 56 10" stroke={color} strokeWidth={thickness} fill="none" strokeLinecap="round" />
      <path d="M48 4 L 57 10 L 48 16" stroke={color} strokeWidth={thickness} fill="none" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

// Hand-drawn button outline
function SketchBtn({ children, color = INK, fill, style = {}, size = 'md' }) {
  const pad = size === 'lg' ? '12px 22px' : '8px 16px';
  const fs = size === 'lg' ? 17 : 14;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 10,
      border: `1.8px solid ${color}`, padding: pad,
      background: fill || 'transparent',
      fontFamily: "'Patrick Hand', cursive", fontSize: fs, color,
      borderRadius: 2, ...style,
    }}>
      {children}
    </span>
  );
}

// Section label tag (annotation)
function Tag({ children, color = INK_SOFT, style = {} }) {
  return (
    <span style={{
      display: 'inline-block', padding: '2px 8px',
      border: `1.2px solid ${color}`, color,
      fontFamily: "'Patrick Hand', cursive", fontSize: 11,
      letterSpacing: '.1em', textTransform: 'uppercase',
      ...style,
    }}>{children}</span>
  );
}

// Scroll annotation arrow + tag (used on canvas margin)
function ScrollNote({ children, accent, style = {} }) {
  return (
    <div style={{
      position: 'absolute', display: 'flex', alignItems: 'center', gap: 8,
      fontFamily: "'Caveat', cursive", fontSize: 16, color: accent || INK_SOFT,
      ...style,
    }}>
      <svg width="34" height="14" viewBox="0 0 34 14"><path d="M2 7 Q 12 4 30 7" stroke={accent || INK_SOFT} strokeWidth="1.4" fill="none" strokeLinecap="round" /><path d="M24 2 L 32 7 L 24 12" stroke={accent || INK_SOFT} strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
      <span>{children}</span>
    </div>
  );
}

// Big number stat block (placeholder for animated counters)
function StatBlock({ value, label, suffix = '', accent, style = {} }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8, ...style }}>
      <div style={{ fontFamily: "'Caveat', cursive", fontSize: 88, lineHeight: .9, color: accent || INK, fontWeight: 700 }}>
        {value}<span style={{ fontSize: 44, opacity: .7 }}>{suffix}</span>
      </div>
      <div style={{ fontFamily: "'Patrick Hand', cursive", fontSize: 13, color: INK_SOFT, textTransform: 'uppercase', letterSpacing: '.12em', maxWidth: 220 }}>{label}</div>
    </div>
  );
}

// Section header (number + name)
function SectionHead({ n, title, subtitle, accent, align = 'left', style = {} }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6, alignItems: align === 'center' ? 'center' : 'flex-start', textAlign: align, ...style }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
        <span style={{ fontFamily: "'Patrick Hand', cursive", fontSize: 12, color: accent || INK_SOFT, letterSpacing: '.18em' }}>{n}</span>
        <span style={{ height: 1, width: 36, background: accent || INK_FAINT }}></span>
      </div>
      <div style={{ fontFamily: "'Caveat', cursive", fontSize: 36, fontWeight: 700, color: INK, lineHeight: 1 }}>{title}</div>
      {subtitle && <div style={{ fontFamily: "'Patrick Hand', cursive", fontSize: 14, color: INK_SOFT, maxWidth: 480 }}>{subtitle}</div>}
    </div>
  );
}

// Tiny navbar placeholder
function Nav({ brand = 'UN TOIT', items = ['Home', 'Technology', 'Factory', 'Productivity', 'Models', 'Contact'], accent, lang = 'EN' }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '14px 32px', borderBottom: `1px dashed ${INK_FAINT}`,
    }}>
      <div style={{ fontFamily: "'Caveat', cursive", fontSize: 24, fontWeight: 700, letterSpacing: '.05em', color: INK }}>{brand}</div>
      <div style={{ display: 'flex', gap: 18 }}>
        {items.map(i => (
          <span key={i} style={{ fontFamily: "'Patrick Hand', cursive", fontSize: 13, color: INK_SOFT }}>{i}</span>
        ))}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <span style={{ fontFamily: "'Patrick Hand', cursive", fontSize: 12, color: accent || INK, border: `1.3px solid ${accent || INK}`, padding: '2px 8px' }}>{lang}</span>
        <span style={{ fontFamily: "'Patrick Hand', cursive", fontSize: 12, color: INK_FAINT }}>FR</span>
      </div>
    </div>
  );
}

// Annotation post-it style (used to call out specific moments)
function Annot({ children, color = '#c87538', style = {}, className }) {
  return (
    <div className={className} style={{
      display: 'inline-block', padding: '4px 8px',
      background: '#fff6dc', border: `1px solid ${color}`,
      fontFamily: "'Caveat', cursive", fontSize: 14, color,
      transform: 'rotate(-1.2deg)',
      ...style,
    }}>{children}</div>
  );
}

Object.assign(window, {
  WF: { INK, INK_SOFT, INK_FAINT, PAPER, PAPER_DEEP, sketchEdge },
  Scribble, HW, Box, VideoBlock, Arrow, SketchBtn, Tag, ScrollNote, StatBlock, SectionHead, Nav, Annot,
});