// Wireframe primitives — grayscale low-fi building blocks
// Load AFTER React/Babel, BEFORE the screen files that use them.

const WF = {
  bg:       '#f7f7f6',
  paper:    '#ffffff',
  ink:      '#1a1a1a',
  ink2:     '#3a3a3a',
  muted:    '#737373',
  faint:    '#a3a3a3',
  line:     '#d4d4d4',
  line2:    '#e5e5e5',
  fill1:    '#ededed',
  fill2:    '#f3f3f2',
  hatch:    '#e8e8e6',
  accent:   '#d97757',  // reserved for the primary action of each direction
  accentSoft:'#fbe7dc',
  ok:       '#1a1a1a',
  font:     'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif',
  mono:     '"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace',
};

// ───────────────────────── Phone shell ─────────────────────────
function Phone({ children, width = 320, height = 660, label }) {
  return (
    <div style={{
      width, height,
      background: WF.paper,
      borderRadius: 36,
      border: `1.5px solid ${WF.ink}`,
      boxShadow: '0 1px 0 rgba(0,0,0,0.04)',
      position: 'relative',
      overflow: 'hidden',
      fontFamily: WF.font,
      color: WF.ink,
    }}>
      {/* status bar */}
      <div style={{
        height: 28, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '0 22px 0 22px', fontSize: 11, fontWeight: 600, color: WF.ink,
        position: 'relative',
      }}>
        <span>9:41</span>
        {/* notch */}
        <div style={{
          position: 'absolute', left: '50%', top: 6, transform: 'translateX(-50%)',
          width: 92, height: 18, background: WF.ink, borderRadius: 12,
        }} />
        <span style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
          <span style={{ width: 14, height: 8, border: `1px solid ${WF.ink}`, borderRadius: 2 }}>
            <span style={{ display:'block', width:'70%', height:'100%', background: WF.ink }} />
          </span>
        </span>
      </div>
      {/* content area */}
      <div style={{ position: 'absolute', inset: '28px 0 18px 0', overflow: 'hidden' }}>
        {children}
      </div>
      {/* home indicator */}
      <div style={{
        position:'absolute', left:'50%', bottom: 6, transform:'translateX(-50%)',
        width: 120, height: 4, background: WF.ink, borderRadius: 2,
      }} />
    </div>
  );
}

// ───────────────────────── Atoms ─────────────────────────
function Box({ children, style, ...rest }) {
  return <div style={{ ...style }} {...rest}>{children}</div>;
}

// A placeholder rect with diagonal hatch lines — for imagery/maps
function Hatch({ w = '100%', h = 80, r = 8, label, dark = false, style = {} }) {
  const stroke = dark ? '#bdbdbd' : '#dcdcdc';
  const bg = dark ? '#ececea' : '#f1f1ef';
  return (
    <div style={{
      width: w, height: h, borderRadius: r, background: bg,
      backgroundImage: `repeating-linear-gradient(45deg, ${stroke} 0 1px, transparent 1px 8px)`,
      border: `1px solid ${WF.line}`,
      display:'flex', alignItems:'center', justifyContent:'center',
      color: WF.muted, fontFamily: WF.mono, fontSize: 10, letterSpacing: 0.4,
      ...style,
    }}>
      {label}
    </div>
  );
}

// A tile — soft fill, optional icon glyph + label
function Tile({ icon = '▢', label, active = false, style = {} }) {
  return (
    <div style={{
      background: active ? WF.ink : WF.fill2,
      color: active ? '#fff' : WF.ink,
      border: `1px solid ${active ? WF.ink : WF.line}`,
      borderRadius: 12,
      padding: '12px 8px',
      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
      gap: 6, minHeight: 76,
      ...style,
    }}>
      <div style={{ fontSize: 22, lineHeight: 1, fontWeight: 300 }}>{icon}</div>
      <div style={{ fontSize: 10.5, fontWeight: 500, textAlign: 'center', lineHeight: 1.2 }}>{label}</div>
    </div>
  );
}

function Btn({ children, primary, ghost, full = true, style = {} }) {
  const base = {
    display:'flex', alignItems:'center', justifyContent:'center',
    height: 40, borderRadius: 22, fontSize: 13, fontWeight: 600,
    width: full ? '100%' : 'auto', padding: full ? 0 : '0 16px',
  };
  if (primary) return <div style={{ ...base, background: WF.accent, color:'#fff', ...style }}>{children}</div>;
  if (ghost)   return <div style={{ ...base, background:'transparent', color: WF.ink, border:`1px solid ${WF.line}`, ...style }}>{children}</div>;
  return <div style={{ ...base, background: WF.ink, color:'#fff', ...style }}>{children}</div>;
}

function Pill({ children, active, style = {} }) {
  return (
    <span style={{
      display:'inline-flex', alignItems:'center', gap: 4,
      height: 22, padding:'0 9px', borderRadius: 11,
      fontSize: 10, fontWeight: 500,
      background: active ? WF.ink : WF.fill1,
      color: active ? '#fff' : WF.ink2,
      border: `1px solid ${active ? WF.ink : WF.line}`,
      whiteSpace:'nowrap',
      ...style,
    }}>{children}</span>
  );
}

function Bar({ w = '100%', h = 8, r = 4, color = WF.line2, style = {} }) {
  return <div style={{ width: w, height: h, background: color, borderRadius: r, ...style }} />;
}

function Avatar({ size = 36, label = '◐', verified = false }) {
  return (
    <div style={{ position:'relative', width: size, height: size }}>
      <div style={{
        width: size, height: size, borderRadius: '50%',
        background: WF.fill1, border:`1px solid ${WF.line}`,
        display:'flex', alignItems:'center', justifyContent:'center',
        fontSize: size * 0.5, color: WF.muted,
      }}>{label}</div>
      {verified && (
        <div title="Verified ID" style={{
          position:'absolute', right: -2, bottom: -2,
          width: 14, height: 14, borderRadius: 7,
          background: WF.ink, color:'#fff', fontSize: 9, fontWeight: 700,
          display:'flex', alignItems:'center', justifyContent:'center',
          border:'1.5px solid #fff',
        }}>✓</div>
      )}
    </div>
  );
}

// ───────────────────────── Composites ─────────────────────────
function TopBar({ title, left = '‹', right, sub }) {
  return (
    <div style={{
      padding: '6px 16px 8px', borderBottom: `1px solid ${WF.line2}`,
      display:'flex', flexDirection:'column', gap: 2, background: WF.paper,
    }}>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', minHeight: 28 }}>
        <span style={{ fontSize: 18, color: WF.ink, width: 24 }}>{left}</span>
        <span style={{ fontSize: 13, fontWeight: 600 }}>{title}</span>
        <span style={{ fontSize: 11, color: WF.muted, width: 24, textAlign:'right' }}>{right}</span>
      </div>
      {sub && <div style={{ fontSize: 10, color: WF.muted, textAlign:'center', fontFamily: WF.mono }}>{sub}</div>}
    </div>
  );
}

function BottomNav({ active = 0, helper = false }) {
  const items = helper
    ? ['Jobs', 'Map', 'Earnings', 'Profile']
    : ['Home', 'Post', 'Trips', 'Inbox', 'Me'];
  return (
    <div style={{
      position:'absolute', left: 0, right: 0, bottom: 0,
      height: 52, borderTop:`1px solid ${WF.line2}`, background: WF.paper,
      display:'grid', gridTemplateColumns: `repeat(${items.length}, 1fr)`,
    }}>
      {items.map((label, i) => (
        <div key={i} style={{
          display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap: 3,
          color: i === active ? WF.ink : WF.faint, fontSize: 10, fontWeight: i === active ? 600 : 400,
        }}>
          <div style={{
            width: 16, height: 16, borderRadius: 4, border:`1.5px solid currentColor`,
            background: i === active ? 'currentColor' : 'transparent',
          }}/>
          {label}
        </div>
      ))}
    </div>
  );
}

// Map placeholder — grid streets + pin
function MapWF({ h = 220, pins = 1, you = true, label, dim = false }) {
  return (
    <div style={{
      position:'relative', height: h, overflow:'hidden',
      background: dim ? '#e9e9e6' : '#eeeeec',
      backgroundImage: `
        linear-gradient(0deg, rgba(0,0,0,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.06) 1px, transparent 1px),
        linear-gradient(20deg, rgba(0,0,0,0.04) 1px, transparent 1px),
        radial-gradient(circle at 30% 60%, rgba(0,0,0,0.05) 0 60px, transparent 60px),
        radial-gradient(circle at 75% 30%, rgba(0,0,0,0.04) 0 80px, transparent 80px)
      `,
      backgroundSize: '24px 24px, 24px 24px, 80px 80px, auto, auto',
      borderBottom:`1px solid ${WF.line2}`,
    }}>
      {/* fake road */}
      <div style={{ position:'absolute', left: 0, right: 0, top: '46%', height: 14,
        background:'#fff', borderTop:`1px solid ${WF.line}`, borderBottom:`1px solid ${WF.line}` }} />
      <div style={{ position:'absolute', left: '38%', top: 0, bottom: 0, width: 12,
        background:'#fff', borderLeft:`1px solid ${WF.line}`, borderRight:`1px solid ${WF.line}` }} />
      {you && (
        <div style={{ position:'absolute', left:'50%', top:'50%', transform:'translate(-50%,-50%)' }}>
          <div style={{ width: 14, height: 14, borderRadius: 7, background: WF.accent, border:'2px solid #fff', boxShadow:'0 0 0 8px rgba(217,119,87,0.18)' }} />
        </div>
      )}
      {Array.from({ length: pins }).map((_, i) => {
        const positions = [
          { left:'22%', top:'28%' }, { left:'70%', top:'22%' }, { left:'78%', top:'62%' },
          { left:'18%', top:'66%' }, { left:'58%', top:'76%' }, { left:'40%', top:'18%' },
        ];
        const p = positions[i % positions.length];
        return (
          <div key={i} style={{ position:'absolute', ...p, transform:'translate(-50%,-100%)' }}>
            <div style={{
              width: 22, height: 28, position:'relative',
            }}>
              <div style={{
                width: 22, height: 22, borderRadius: 11, background: WF.ink,
                color:'#fff', fontSize: 10, fontWeight: 700,
                display:'flex', alignItems:'center', justifyContent:'center',
                border:'2px solid #fff', boxShadow:'0 2px 4px rgba(0,0,0,0.2)',
              }}>{i+1}</div>
              <div style={{
                position:'absolute', left:'50%', bottom: 0, transform:'translateX(-50%) rotate(45deg)',
                width: 6, height: 6, background: WF.ink, borderRight:'2px solid #fff', borderBottom:'2px solid #fff',
              }}/>
            </div>
          </div>
        );
      })}
      {label && (
        <div style={{
          position:'absolute', left: 10, top: 10,
          background: WF.paper, border: `1px solid ${WF.line}`, borderRadius: 6,
          padding: '4px 8px', fontSize: 10, fontFamily: WF.mono, color: WF.muted,
        }}>{label}</div>
      )}
    </div>
  );
}

// Small caption/annotation under a screen
function Caption({ children, style = {} }) {
  return (
    <div style={{
      fontFamily: WF.mono, fontSize: 11, color: WF.muted,
      textAlign:'center', marginTop: 6, lineHeight: 1.4, maxWidth: 320,
      ...style,
    }}>{children}</div>
  );
}

// A labeled section heading inside a screen
function SectionLabel({ children }) {
  return (
    <div style={{
      fontSize: 10, fontFamily: WF.mono, textTransform:'uppercase', letterSpacing: 0.8,
      color: WF.muted, padding: '12px 16px 6px',
    }}>{children}</div>
  );
}

// Row in a list
function Row({ left, title, sub, right, badge, dense = false }) {
  return (
    <div style={{
      display:'flex', alignItems:'center', gap: 10,
      padding: dense ? '8px 16px' : '12px 16px',
      borderBottom:`1px solid ${WF.line2}`, background: WF.paper,
    }}>
      {left}
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display:'flex', alignItems:'center', gap: 6 }}>
          <span style={{ fontSize: 13, fontWeight: 600 }}>{title}</span>
          {badge}
        </div>
        {sub && <div style={{ fontSize: 11, color: WF.muted, marginTop: 2 }}>{sub}</div>}
      </div>
      {right && <div style={{ fontSize: 11, color: WF.ink2, textAlign:'right' }}>{right}</div>}
    </div>
  );
}

// Sheet (bottom-sheet card)
function Sheet({ children, h = 'auto', style = {} }) {
  return (
    <div style={{
      position:'absolute', left: 0, right: 0, bottom: 52,
      background: WF.paper, borderTopLeftRadius: 18, borderTopRightRadius: 18,
      borderTop:`1px solid ${WF.line}`, boxShadow:'0 -8px 20px rgba(0,0,0,0.06)',
      padding: '8px 0 12px', maxHeight: h,
      ...style,
    }}>
      <div style={{ width: 36, height: 4, borderRadius: 2, background: WF.line, margin:'2px auto 8px' }} />
      {children}
    </div>
  );
}

// ─────────── Export to window so other Babel scripts can use these ───────────
Object.assign(window, {
  WF, Phone, Box, Hatch, Tile, Btn, Pill, Bar, Avatar,
  TopBar, BottomNav, MapWF, Caption, SectionLabel, Row, Sheet,
});