// raw-outputs.jsx — "raw data" chips and "transformed output" chips
// These animate through the hero to show the TRANSFORMATION.

// Small scraps that represent RAW inputs — CSV-like, messy, unstructured.
const RAW_SCRAPS = [
  { kind: 'csv',     label: '2026-04-17,SALE,$42.80,table_4,…' },
  { kind: 'csv',     label: 'item:pad_thai,qty:2,$18.00' },
  { kind: 'pdf',     label: 'invoice_kimson_0417.pdf' },
  { kind: 'review',  label: '"Service was slow tonight." ★★☆☆☆' },
  { kind: 'email',   label: 'Subject: Daily Z-Report — Branch 03' },
  { kind: 'csv',     label: 'card_tip,$6.50,server:mai' },
  { kind: 'photo',   label: 'IMG_0417.jpg · recipe card' },
  { kind: 'pdf',     label: 'P&L_march_draft.xlsx' },
  { kind: 'review',  label: '"Best tom yum in town!" ★★★★★' },
  { kind: 'csv',     label: 'waste:3.2kg,station:wok' },
  { kind: 'email',   label: 'FW: supplier price list Q2' },
  { kind: 'csv',     label: 'covers:87, avg_ticket:$38.20' },
];

function RawScrap({ scrap }) {
  const mono = 'JetBrains Mono, ui-monospace, monospace';
  const kindColor = {
    csv:    'oklch(70% 0.14 150)',
    pdf:    'oklch(70% 0.18 20)',
    review: 'oklch(78% 0.16 85)',
    email:  'oklch(72% 0.18 310)',
    photo:  'oklch(72% 0.14 210)',
  }[scrap.kind] || '#999';

  return (
    <div style={{
      fontFamily: mono,
      fontSize: 11,
      color: 'rgba(246,244,239,0.8)',
      background: 'rgba(20,20,24,0.92)',
      border: `1px solid ${kindColor.replace(')', ' / 0.35)')}`,
      padding: '5px 10px',
      borderRadius: 4,
      whiteSpace: 'nowrap',
      backdropFilter: 'blur(4px)',
      display: 'inline-flex',
      alignItems: 'center',
      gap: 8,
    }}>
      <span style={{
        fontSize: 8,
        color: kindColor,
        letterSpacing: '0.1em',
        textTransform: 'uppercase',
        fontWeight: 700,
      }}>{scrap.kind}</span>
      <span>{scrap.label}</span>
    </div>
  );
}

// Structured "output" chips — the result of processing
function OutputChip({ kind }) {
  const outputs = {
    answer: (
      <div style={{
        background: 'rgba(20,20,24,0.95)',
        border: '1px solid oklch(75% 0.22 50 / 0.4)',
        borderRadius: 8,
        padding: '8px 12px',
        fontFamily: 'Inter, system-ui, sans-serif',
        fontSize: 12,
        color: '#f6f4ef',
        boxShadow: '0 0 24px -4px oklch(75% 0.22 50 / 0.5)',
      }}>
        <span style={{ color: 'oklch(75% 0.22 50)', fontWeight: 600 }}>→ Answer: </span>
        Friday covers up <span style={{ color: 'oklch(75% 0.22 50)' }}>+18%</span> vs last week
      </div>
    ),
    alert: (
      <div style={{
        background: 'oklch(70% 0.22 25 / 0.12)',
        border: '1px solid oklch(70% 0.22 25 / 0.5)',
        borderRadius: 8,
        padding: '8px 12px',
        fontFamily: 'Inter, system-ui, sans-serif',
        fontSize: 12,
        color: '#f6f4ef',
        display: 'flex', alignItems: 'center', gap: 8,
        boxShadow: '0 0 24px -4px oklch(70% 0.22 25 / 0.5)',
      }}>
        <span style={{ color: 'oklch(70% 0.22 25)' }}>⚠</span>
        <span><b>Wok station</b> 3.2kg waste — reorder flagged</span>
      </div>
    ),
    chart: (
      <div style={{
        background: 'rgba(20,20,24,0.95)',
        border: '1px solid oklch(75% 0.16 165 / 0.4)',
        borderRadius: 8,
        padding: '10px 12px',
        boxShadow: '0 0 24px -4px oklch(75% 0.16 165 / 0.45)',
      }}>
        <div style={{ fontSize: 10, color: 'rgba(246,244,239,0.55)', letterSpacing: '0.1em', marginBottom: 6 }}>SALES MIX</div>
        <svg width="120" height="28" viewBox="0 0 120 28">
          {[14, 20, 10, 24, 18, 22, 16].map((v, i) => (
            <rect key={i} x={i * 17} y={28 - v} width="12" height={v} fill="oklch(75% 0.16 165)" rx="1"/>
          ))}
        </svg>
      </div>
    ),
    briefing: (
      <div style={{
        background: 'rgba(20,20,24,0.95)',
        border: '1px solid oklch(82% 0.18 90 / 0.4)',
        borderRadius: 8,
        padding: '8px 12px',
        fontFamily: 'Inter, system-ui, sans-serif',
        fontSize: 12,
        color: '#f6f4ef',
        boxShadow: '0 0 24px -4px oklch(82% 0.18 90 / 0.45)',
      }}>
        <span style={{ color: 'oklch(82% 0.18 90)', fontSize: 10, letterSpacing: '0.15em' }}>☀ MORNING BRIEF</span>
        <div style={{ marginTop: 2 }}>Last night: <b>$3,428</b> · 87 covers</div>
      </div>
    ),
    sentiment: (
      <div style={{
        background: 'rgba(20,20,24,0.95)',
        border: '1px solid oklch(78% 0.18 85 / 0.4)',
        borderRadius: 8,
        padding: '8px 12px',
        fontFamily: 'Inter, system-ui, sans-serif',
        fontSize: 12,
        color: '#f6f4ef',
        boxShadow: '0 0 24px -4px oklch(78% 0.18 85 / 0.45)',
      }}>
        <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
          <span style={{ color: 'oklch(78% 0.18 85)' }}>★ 4.6</span>
          <span style={{ color: 'rgba(246,244,239,0.6)' }}>·</span>
          <span>Service speed: <b style={{ color: 'oklch(70% 0.18 30)' }}>↓</b></span>
        </div>
      </div>
    ),
    promo: (
      <div style={{
        background: 'rgba(20,20,24,0.95)',
        border: '1px solid oklch(72% 0.22 30 / 0.4)',
        borderRadius: 8,
        padding: '8px 12px',
        fontFamily: 'Inter, system-ui, sans-serif',
        fontSize: 12,
        color: '#f6f4ef',
        boxShadow: '0 0 24px -4px oklch(72% 0.22 30 / 0.45)',
      }}>
        <span style={{ color: 'oklch(72% 0.22 30)', fontSize: 10, letterSpacing: '0.12em' }}>⚡ GROWTH</span>
        <div style={{ marginTop: 2 }}>Tuesdays slow → "2-for-1 noodles"</div>
      </div>
    ),
  };
  return outputs[kind] || null;
}

Object.assign(window, { RAW_SCRAPS, RawScrap, OutputChip });