// Kiroshi product UI mockup - desktop window with sidebar, screenshot grid by date,
// search bar, timeline scrubber, detail panel.

const miniTone = {
  glass: 'oklch(0.13 0.006 260 / 0.72)',
  glassLight: 'oklch(0.98 0.003 80 / 0.9)',
  border: 'oklch(1 0 0 / 0.13)',
  muted: 'oklch(0.72 0.006 260)',
  ink: 'oklch(0.96 0.004 260)',
  accent: 'oklch(0.74 0.10 245)',
};

const shotKind = ({ kind, label = '', tint = '' }) => {
  const text = `${kind || ''} ${label} ${tint}`.toLowerCase();

  if (text.includes('terminal') || text.includes('trace')) return 'terminal';
  if (text.includes('figma') || text.includes('frame') || text.includes('ui ref')) return 'design';
  if (text.includes('checkout') || text.includes('pricing') || text.includes('order')) return 'commerce';
  if (text.includes('error') || text.includes('bug')) return 'error';
  if (text.includes('settings')) return 'settings';
  if (text.includes('docs')) return 'docs';
  if (text.includes('meeting') || text.includes('conversation')) return 'conversation';

  return 'dashboard';
};

const MiniDots = ({ light = false }) => (
  <div className="flex items-center gap-[3px]">
    {['oklch(0.72 0.20 25)', 'oklch(0.82 0.16 85)', 'oklch(0.72 0.15 150)'].map((color) => (
      <span
        key={color}
        className="rounded-full"
        style={{
          width: light ? 4 : 3,
          height: light ? 4 : 3,
          background: color,
          boxShadow: '0 0 0 1px oklch(0 0 0 / 0.08)',
        }}
      />
    ))}
  </div>
);

const MiniTopBar = ({ title, detail = false, light = false }) => (
  <div
    className="flex items-center gap-1.5 border-b"
    style={{
      height: detail ? 18 : 11,
      padding: detail ? '0 7px' : '0 4px',
      background: light ? 'oklch(0.96 0.004 80 / 0.92)' : 'oklch(0.10 0.006 260 / 0.72)',
      borderColor: light ? 'oklch(0.82 0.008 260)' : 'oklch(1 0 0 / 0.10)',
    }}
  >
    <MiniDots light={detail} />
    <div
      className="truncate font-mono"
      style={{
        color: light ? 'oklch(0.38 0.01 260)' : 'oklch(0.78 0.006 260)',
        fontSize: detail ? 9 : 6,
        lineHeight: 1,
      }}
    >
      {title}
    </div>
    {detail && (
      <div
        className="ml-auto rounded-full"
        style={{
          width: 34,
          height: 5,
          background: light ? 'oklch(0.82 0.01 260)' : 'oklch(1 0 0 / 0.12)',
        }}
      />
    )}
  </div>
);

const MiniLine = ({ width = '100%', color = 'oklch(1 0 0 / 0.18)', height = 4 }) => (
  <span
    className="block rounded-full"
    style={{
      width,
      height,
      background: color,
    }}
  />
);

const MiniDashboard = ({ detail = false }) => {
  const bars = detail ? [46, 72, 58, 86, 64, 92, 70, 54] : [45, 70, 52, 84, 62, 76];

  return (
    <div className="grid h-full" style={{ gridTemplateColumns: detail ? '46px 1fr' : '20px 1fr', background: 'oklch(0.15 0.008 260)' }}>
      <div className="border-r p-1 space-y-1" style={{ borderColor: 'oklch(1 0 0 / 0.08)', background: 'oklch(0.12 0.006 260)' }}>
        {Array.from({ length: detail ? 5 : 3 }).map((_, i) => (
          <MiniLine key={i} width={i === 0 ? '78%' : '58%'} height={detail ? 5 : 3} color={i === 0 ? 'oklch(0.74 0.10 245)' : 'oklch(1 0 0 / 0.14)'} />
        ))}
      </div>
      <div className="flex flex-col p-1.5 gap-1.5">
        <div className="grid grid-cols-3 gap-1">
          {[0, 1, 2].map((i) => (
            <div key={i} className="rounded-[4px] border p-1" style={{ borderColor: 'oklch(1 0 0 / 0.09)', background: 'oklch(1 0 0 / 0.045)' }}>
              <MiniLine width={i === 1 ? '72%' : '58%'} height={detail ? 4 : 3} />
              {detail && <MiniLine width="42%" height={3} color="oklch(0.74 0.10 245 / 0.65)" />}
            </div>
          ))}
        </div>
        <div className="flex-1 rounded-[5px] border p-1 flex items-end gap-[3px]" style={{ borderColor: 'oklch(1 0 0 / 0.09)', background: 'oklch(0.09 0.006 260 / 0.36)' }}>
          {bars.map((height, i) => (
            <span
              key={i}
              className="flex-1 rounded-sm"
              style={{
                height: `${height}%`,
                background: i === 5 ? 'oklch(0.74 0.10 245)' : 'oklch(0.52 0.05 245 / 0.72)',
              }}
            />
          ))}
        </div>
      </div>
    </div>
  );
};

const MiniCommerce = ({ detail = false }) => (
  <div className="flex h-full flex-col p-1.5 gap-1.5" style={{ background: 'oklch(0.96 0.004 80)' }}>
    <div className="flex items-center justify-between">
      <MiniLine width={detail ? '34%' : '42%'} height={detail ? 5 : 3} color="oklch(0.24 0.01 260)" />
      <MiniLine width={detail ? '18%' : '20%'} height={detail ? 5 : 3} color="oklch(0.72 0.04 245)" />
    </div>
    <div className="grid flex-1 grid-cols-3 gap-1">
      {[0, 1, 2].map((i) => (
        <div
          key={i}
          className="rounded-[5px] border p-1 flex flex-col gap-1"
          style={{
            background: i === 1 ? 'oklch(0.99 0.002 80)' : 'oklch(0.93 0.004 80)',
            borderColor: i === 1 ? 'oklch(0.60 0.11 245)' : 'oklch(0.82 0.006 260)',
            boxShadow: i === 1 ? '0 4px 14px oklch(0.45 0.09 245 / 0.18)' : 'none',
          }}
        >
          <MiniLine width={i === 1 ? '70%' : '54%'} height={detail ? 5 : 3} color="oklch(0.31 0.01 260)" />
          <MiniLine width={i === 1 ? '44%' : '34%'} height={detail ? 8 : 5} color={i === 1 ? 'oklch(0.55 0.10 245)' : 'oklch(0.44 0.01 260)'} />
          <div className="mt-auto space-y-[3px]">
            <MiniLine width="84%" height={2} color="oklch(0.72 0.008 260)" />
            <MiniLine width="66%" height={2} color="oklch(0.72 0.008 260)" />
            {detail && <MiniLine width="72%" height={2} color="oklch(0.72 0.008 260)" />}
          </div>
        </div>
      ))}
    </div>
  </div>
);

const MiniTerminal = ({ detail = false }) => {
  const rows = detail
    ? ['kiroshi ingest ./captures', 'ocr: 42 text regions', 'embed: visual index ready', 'match: pricing team plan', 'sync complete']
    : ['kiroshi ingest', 'ocr ready', 'match found', 'sync ok'];

  return (
    <div className="h-full p-1.5 font-mono" style={{ background: 'oklch(0.08 0.006 260)', color: 'oklch(0.74 0.18 150)', fontSize: detail ? 8 : 5 }}>
      <div className="space-y-1">
        {rows.map((row, i) => (
          <div key={row} className="flex items-center gap-1">
            <span style={{ color: i === 0 ? 'oklch(0.72 0.10 245)' : 'oklch(0.48 0.12 150)' }}>$</span>
            <span className="truncate" style={{ color: i === rows.length - 1 ? 'oklch(0.82 0.16 145)' : 'oklch(0.70 0.008 260)' }}>{row}</span>
          </div>
        ))}
      </div>
      <div className="mt-1.5 grid grid-cols-6 gap-[2px]">
        {Array.from({ length: detail ? 18 : 12 }).map((_, i) => (
          <span key={i} className="rounded-[1px]" style={{ height: detail ? 4 : 2, background: i % 5 === 0 ? 'oklch(0.72 0.18 150)' : 'oklch(0.22 0.02 150)' }} />
        ))}
      </div>
    </div>
  );
};

const MiniDesign = ({ detail = false }) => (
  <div className="grid h-full" style={{ gridTemplateColumns: detail ? '38px 1fr 42px' : '18px 1fr 18px', background: 'oklch(0.91 0.008 260)' }}>
    <div className="border-r p-1 space-y-1" style={{ borderColor: 'oklch(0.78 0.008 260)', background: 'oklch(0.97 0.002 80)' }}>
      {Array.from({ length: detail ? 5 : 3 }).map((_, i) => (
        <MiniLine key={i} width={i === 0 ? '76%' : '58%'} height={detail ? 4 : 2} color={i === 1 ? 'oklch(0.60 0.11 245)' : 'oklch(0.72 0.008 260)'} />
      ))}
    </div>
    <div className="relative p-1.5">
      <div className="absolute rounded-[5px] border" style={{ left: '18%', top: '14%', width: '54%', height: '64%', background: 'oklch(0.99 0.002 80)', borderColor: 'oklch(0.55 0.10 245)' }}>
        <div className="p-1 space-y-1">
          <MiniLine width="62%" height={detail ? 5 : 3} color="oklch(0.24 0.01 260)" />
          <div className="grid grid-cols-2 gap-1">
            <span className="rounded-[3px]" style={{ height: detail ? 28 : 12, background: 'oklch(0.88 0.04 245)' }} />
            <span className="rounded-[3px]" style={{ height: detail ? 28 : 12, background: 'oklch(0.92 0.04 30)' }} />
          </div>
        </div>
      </div>
      <div className="absolute rounded-full" style={{ left: '70%', top: '25%', width: detail ? 11 : 6, height: detail ? 11 : 6, background: 'oklch(0.72 0.14 300)' }} />
      <div className="absolute rounded-full" style={{ left: '24%', top: '70%', width: detail ? 9 : 5, height: detail ? 9 : 5, background: 'oklch(0.74 0.16 150)' }} />
    </div>
    <div className="border-l p-1 space-y-1" style={{ borderColor: 'oklch(0.78 0.008 260)', background: 'oklch(0.96 0.002 80)' }}>
      {Array.from({ length: detail ? 6 : 4 }).map((_, i) => (
        <MiniLine key={i} width={i % 2 ? '62%' : '86%'} height={detail ? 4 : 2} color="oklch(0.72 0.008 260)" />
      ))}
    </div>
  </div>
);

const MiniError = ({ detail = false }) => (
  <div className="h-full p-1.5" style={{ background: 'oklch(0.13 0.008 260)' }}>
    <div className="rounded-[5px] border p-1 flex items-center gap-1.5" style={{ background: 'oklch(0.26 0.06 25)', borderColor: 'oklch(0.62 0.16 25 / 0.55)' }}>
      <span className="rounded-full" style={{ width: detail ? 8 : 5, height: detail ? 8 : 5, background: 'oklch(0.72 0.18 25)' }} />
      <div className="flex-1 space-y-[3px]">
        <MiniLine width="74%" height={detail ? 4 : 2} color="oklch(0.94 0.02 25)" />
        {detail && <MiniLine width="46%" height={3} color="oklch(0.86 0.03 25)" />}
      </div>
    </div>
    <div className="mt-1.5 space-y-[3px] font-mono" style={{ fontSize: detail ? 8 : 5 }}>
      {['TypeError: undefined', 'at Checkout.tsx:48', 'request failed 422', 'retry queued'].slice(0, detail ? 4 : 3).map((row, i) => (
        <div key={row} className="flex gap-1">
          <span style={{ color: 'oklch(0.46 0.006 260)' }}>{i + 1}</span>
          <span className="truncate" style={{ color: i === 0 ? 'oklch(0.82 0.13 25)' : 'oklch(0.67 0.008 260)' }}>{row}</span>
        </div>
      ))}
    </div>
  </div>
);

const MiniSettings = ({ detail = false }) => (
  <div className="h-full p-1.5 space-y-1.5" style={{ background: 'oklch(0.17 0.007 260)' }}>
    <div className="flex items-center justify-between">
      <MiniLine width="34%" height={detail ? 5 : 3} color="oklch(0.86 0.004 260)" />
      <span className="rounded-full" style={{ width: detail ? 22 : 12, height: detail ? 10 : 6, background: 'oklch(0.68 0.14 150)' }} />
    </div>
    {[0, 1, 2, 3].slice(0, detail ? 4 : 3).map((i) => (
      <div key={i} className="rounded-[5px] border p-1 flex items-center gap-1.5" style={{ borderColor: 'oklch(1 0 0 / 0.08)', background: 'oklch(1 0 0 / 0.04)' }}>
        <span className="rounded-[3px]" style={{ width: detail ? 12 : 7, height: detail ? 12 : 7, background: i === 1 ? 'oklch(0.68 0.11 245)' : 'oklch(1 0 0 / 0.12)' }} />
        <div className="flex-1 space-y-[3px]">
          <MiniLine width={i === 2 ? '52%' : '72%'} height={detail ? 4 : 2} />
          {detail && <MiniLine width="42%" height={3} color="oklch(1 0 0 / 0.10)" />}
        </div>
        <span className="rounded-full" style={{ width: detail ? 18 : 10, height: detail ? 8 : 5, background: i % 2 ? 'oklch(0.70 0.13 150)' : 'oklch(1 0 0 / 0.15)' }} />
      </div>
    ))}
  </div>
);

const MiniDocs = ({ detail = false }) => (
  <div className="h-full p-1.5" style={{ background: 'oklch(0.97 0.002 80)' }}>
    <div className="mx-auto h-full rounded-[5px] border p-1.5 space-y-1.5" style={{ width: detail ? '76%' : '82%', borderColor: 'oklch(0.84 0.006 260)', background: 'oklch(0.995 0.001 80)' }}>
      <MiniLine width="52%" height={detail ? 6 : 3} color="oklch(0.25 0.01 260)" />
      {[0, 1, 2].map((i) => (
        <MiniLine key={i} width={i === 2 ? '70%' : '92%'} height={detail ? 3 : 2} color="oklch(0.70 0.008 260)" />
      ))}
      <div className="rounded-[4px] p-1 space-y-[3px]" style={{ background: 'oklch(0.16 0.008 260)' }}>
        <MiniLine width="80%" height={detail ? 3 : 2} color="oklch(0.72 0.16 150)" />
        <MiniLine width="62%" height={detail ? 3 : 2} color="oklch(0.62 0.10 245)" />
      </div>
    </div>
  </div>
);

const MiniConversation = ({ detail = false }) => (
  <div className="h-full p-1.5 space-y-1.5" style={{ background: 'oklch(0.95 0.008 245)' }}>
    {[0, 1, 2, 3].slice(0, detail ? 4 : 3).map((i) => (
      <div key={i} className="flex items-center gap-1.5 rounded-[5px] border p-1" style={{ background: 'oklch(0.99 0.002 80)', borderColor: 'oklch(0.82 0.008 260)' }}>
        <span className="rounded-full" style={{ width: detail ? 12 : 7, height: detail ? 12 : 7, background: i === 0 ? 'oklch(0.62 0.11 245)' : 'oklch(0.78 0.02 260)' }} />
        <div className="flex-1 space-y-[3px]">
          <MiniLine width={i === 1 ? '66%' : '82%'} height={detail ? 4 : 2} color="oklch(0.34 0.01 260)" />
          <MiniLine width={i === 2 ? '42%' : '56%'} height={detail ? 3 : 2} color="oklch(0.72 0.008 260)" />
        </div>
      </div>
    ))}
  </div>
);

const MiniState = ({ kind, detail = false }) => {
  if (kind === 'terminal') return <MiniTerminal detail={detail} />;
  if (kind === 'design') return <MiniDesign detail={detail} />;
  if (kind === 'commerce') return <MiniCommerce detail={detail} />;
  if (kind === 'error') return <MiniError detail={detail} />;
  if (kind === 'settings') return <MiniSettings detail={detail} />;
  if (kind === 'docs') return <MiniDocs detail={detail} />;
  if (kind === 'conversation') return <MiniConversation detail={detail} />;

  return <MiniDashboard detail={detail} />;
};

const MiniScreenshot = ({ tint = 'thumb-stripes', label, badge, kind, detail = false, showLabel = true }) => {
  const resolvedKind = shotKind({ kind, label, tint });
  const isLight = ['commerce', 'design', 'docs', 'conversation'].includes(resolvedKind);

  return (
    <div className={`relative h-full w-full overflow-hidden ${tint}`}>
      <div
        className="absolute inset-0"
        style={{
          background: [
            'radial-gradient(circle at 18% 8%, oklch(1 0 0 / 0.26), transparent 28%)',
            'linear-gradient(145deg, oklch(1 0 0 / 0.10), oklch(0 0 0 / 0.16))',
          ].join(', '),
        }}
      />
      <div
        className="absolute rounded-[6px] overflow-hidden border"
        style={{
          inset: detail ? 12 : 5,
          background: isLight ? miniTone.glassLight : miniTone.glass,
          borderColor: isLight ? 'oklch(0.74 0.008 260)' : miniTone.border,
          boxShadow: detail
            ? '0 18px 35px oklch(0 0 0 / 0.22), 0 1px 0 oklch(1 0 0 / 0.35) inset'
            : '0 8px 18px oklch(0 0 0 / 0.18), 0 1px 0 oklch(1 0 0 / 0.20) inset',
        }}
      >
        <MiniTopBar title={label || 'screen'} detail={detail} light={isLight} />
        <div style={{ height: `calc(100% - ${detail ? 18 : 11}px)` }}>
          <MiniState kind={resolvedKind} detail={detail} />
        </div>
      </div>
      {showLabel && label && (
        <>
          <div
            className="absolute inset-x-0 bottom-0 pointer-events-none"
            style={{
              height: detail ? 42 : 24,
              background: 'linear-gradient(to top, oklch(0 0 0 / 0.55), transparent)',
            }}
          />
          <div
            className="absolute left-1.5 right-1.5 bottom-1.5 truncate font-mono"
            style={{ color: 'oklch(0.98 0 0)', fontSize: detail ? 10 : 7, textShadow: '0 1px 2px oklch(0 0 0 / 0.45)' }}
          >
            {label}
          </div>
        </>
      )}
      {badge && (
        <div
          className="absolute left-1.5 top-1.5 px-1.5 py-0.5 rounded-[4px] text-[9px] font-mono"
          style={{ background: 'oklch(0 0 0 / 0.50)', color: 'oklch(0.98 0 0)', boxShadow: '0 1px 4px oklch(0 0 0 / 0.22)' }}
        >
          {badge}
        </div>
      )}
    </div>
  );
};

const Thumb = ({ tint = 'thumb-stripes', label, h = 90, badge, className = '', kind }) => (
  <div
    className={`relative w-full rounded-md overflow-hidden hairline-dark ${className}`}
    style={{ height: h, background: 'oklch(0.14 0.006 260)' }}
  >
    <MiniScreenshot tint={tint} label={label} badge={badge} kind={kind} />
  </div>
);

// Day group of thumbnails
const DayGroup = ({ day, count, items, selectedId, onSelect }) => (
  <div>
    <div
      className="sticky top-0 z-10 flex items-baseline justify-between py-2 px-1 -mx-1 backdrop-blur"
      style={{ background: 'oklch(0.18 0.006 260 / 0.85)' }}
    >
      <div>
        <div className="text-[12px] font-medium" style={{ color: 'var(--dark-ink)' }}>{day}</div>
        <div className="text-[10px] font-mono" style={{ color: 'var(--dark-muted)' }}>{count} screenshots</div>
      </div>
      <div className="text-[10px] font-mono" style={{ color: 'var(--dark-muted)' }}>indexed</div>
    </div>
    <div className="grid grid-cols-4 gap-1.5 mt-1">
      {items.map((it) => (
        <button
          key={it.id}
          onClick={() => onSelect && onSelect(it.id)}
          className={`group relative rounded-md overflow-hidden transition-transform`}
          style={{
            outline: selectedId === it.id ? '2px solid oklch(0.7 0.12 245)' : 'none',
            outlineOffset: 1,
          }}
        >
          <Thumb tint={it.tint} label={it.label} h={72} badge={it.badge} kind={it.kind} />
        </button>
      ))}
    </div>
  </div>
);

const SidebarItem = ({ icon, label, count, active }) => (
  <div
    className="flex items-center justify-between px-2 py-1.5 rounded-md text-[12px] cursor-default"
    style={{
      background: active ? 'oklch(0.27 0.01 260)' : 'transparent',
      color: active ? 'var(--dark-ink)' : 'var(--dark-muted)',
    }}
  >
    <div className="flex items-center gap-2">
      <span style={{ color: active ? 'oklch(0.78 0.06 245)' : 'var(--dark-muted)' }}>{icon}</span>
      <span>{label}</span>
    </div>
    {count != null && (
      <span className="font-mono text-[10px]" style={{ color: 'var(--dark-muted)' }}>{count}</span>
    )}
  </div>
);

const SidebarSection = ({ title, children }) => (
  <div className="mt-4">
    <div className="px-2 pb-1.5 text-[10px] font-mono uppercase tracking-wider" style={{ color: 'oklch(0.5 0.008 260)' }}>
      {title}
    </div>
    <div className="space-y-0.5">{children}</div>
  </div>
);

// Detail panel for the selected screenshot
const DetailPanel = ({ shot }) => {
  const metrics = [
    ['Match', shot.confidence, 'visual + OCR'],
    ['Text', shot.textRegions, 'regions'],
    ['Objects', shot.objects, 'detected'],
  ];

  return (
    <div className="flex flex-col h-full">
      <div className="px-3 py-2.5 flex items-center justify-between gap-2 border-b" style={{ borderColor: 'var(--dark-border)' }}>
        <div className="min-w-0">
          <div className="flex items-center gap-1.5 min-w-0">
            <span className="inline-block w-1.5 h-1.5 rounded-full" style={{ background: 'oklch(0.70 0.15 145)', boxShadow: '0 0 0 3px oklch(0.70 0.15 145 / 0.14)' }} />
            <div className="truncate text-[11px] font-mono" style={{ color: 'var(--dark-ink)' }}>{shot.filename}</div>
          </div>
          <div className="mt-0.5 flex items-center gap-1.5 text-[10px] font-mono" style={{ color: 'var(--dark-muted)' }}>
            <span>{shot.app}</span>
            <span>·</span>
            <span>{shot.captured}</span>
          </div>
        </div>
        <div className="flex items-center gap-1">
          <div className="w-6 h-6 rounded-md grid place-items-center border" style={{ background: 'oklch(0.23 0.008 260)', borderColor: 'var(--dark-border)' }}>
            <I.Eye size={12} style={{ color: 'var(--dark-muted)' }} />
          </div>
          <div className="w-6 h-6 rounded-md grid place-items-center border" style={{ background: 'oklch(0.23 0.008 260)', borderColor: 'var(--dark-border)' }}>
            <I.External size={12} style={{ color: 'var(--dark-muted)' }} />
          </div>
        </div>
      </div>

      <div className="p-3 space-y-3 overflow-y-auto scroll-y" style={{ flex: 1 }}>
        {/* Preview */}
        <div className="relative rounded-lg overflow-hidden hairline-dark" style={{ aspectRatio: '16/10', background: 'oklch(0.13 0.006 260)' }}>
          <MiniScreenshot tint={shot.tint} label={shot.label} kind={shot.kind} detail showLabel={false} />
          <div
            className="absolute left-2 top-2 flex items-center gap-1 px-1.5 py-1 rounded-md border text-[10px] font-mono"
            style={{ background: 'oklch(0.10 0.006 260 / 0.74)', borderColor: 'oklch(1 0 0 / 0.14)', color: 'oklch(0.93 0.02 245)', backdropFilter: 'blur(8px)' }}
          >
            <I.Sparkles size={10} />
            {shot.confidence} match
          </div>
          <div
            className="absolute right-2 bottom-2 px-1.5 py-0.5 rounded-[4px] text-[9px] font-mono"
            style={{ background: 'oklch(0.10 0.006 260 / 0.68)', color: 'oklch(0.80 0.006 260)' }}
          >
            {shot.size}
          </div>
        </div>

        {/* Status */}
        <div className="grid grid-cols-3 gap-1.5">
          {metrics.map(([label, value, note]) => (
            <div key={label} className="rounded-md border p-2" style={{ background: 'oklch(0.205 0.007 260)', borderColor: 'var(--dark-border)' }}>
              <div className="text-[10px]" style={{ color: 'var(--dark-muted)' }}>{label}</div>
              <div className="mt-0.5 font-mono text-[12px]" style={{ color: 'var(--dark-ink)' }}>{value}</div>
              <div className="mt-0.5 truncate font-mono text-[8px]" style={{ color: 'oklch(0.55 0.008 260)' }}>{note}</div>
            </div>
          ))}
        </div>

        {/* AI summary */}
        <div className="rounded-md border p-2.5" style={{ background: 'oklch(0.205 0.007 260)', borderColor: 'var(--dark-border)' }}>
          <div className="flex items-center justify-between gap-2">
            <div className="text-[10px] font-mono uppercase tracking-wider" style={{ color: 'oklch(0.55 0.008 260)' }}>
              Summary
            </div>
            <span className="text-[9px] font-mono" style={{ color: 'oklch(0.78 0.06 245)' }}>AI indexed</span>
          </div>
          <p className="mt-1.5 text-[12px] leading-relaxed" style={{ color: 'var(--dark-ink)' }}>
            {shot.summary}
          </p>
          <div className="mt-2 grid grid-cols-2 gap-1.5">
            {shot.signals.map(([label, value]) => (
              <div key={label} className="rounded-[5px] px-1.5 py-1 border" style={{ background: 'oklch(0.17 0.006 260)', borderColor: 'oklch(0.28 0.008 260)' }}>
                <div className="text-[9px]" style={{ color: 'var(--dark-muted)' }}>{label}</div>
                <div className="truncate text-[10px] font-mono" style={{ color: 'oklch(0.86 0.02 245)' }}>{value}</div>
              </div>
            ))}
          </div>
        </div>

        {/* OCR */}
        <div>
          <div className="text-[10px] font-mono uppercase tracking-wider mb-1.5" style={{ color: 'oklch(0.5 0.008 260)' }}>
            Extracted text
          </div>
          <div className="rounded-md overflow-hidden font-mono text-[10px] leading-snug border"
            style={{ background: 'oklch(0.20 0.007 260)', borderColor: 'var(--dark-border)', color: 'oklch(0.82 0.005 260)' }}>
            {shot.ocr.map((line, i) => (
              <div
                key={line}
                className="flex gap-2 px-2 py-1 border-b last:border-b-0"
                style={{
                  borderColor: 'oklch(0.30 0.008 260)',
                  background: i === 1 ? 'oklch(0.27 0.04 245 / 0.55)' : 'transparent',
                }}
              >
                <span style={{ color: 'oklch(0.50 0.008 260)' }}>{String(i + 1).padStart(2, '0')}</span>
                <span className="flex-1">{line}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Tags */}
        <div>
          <div className="text-[10px] font-mono uppercase tracking-wider mb-1.5" style={{ color: 'oklch(0.5 0.008 260)' }}>
            Tags
          </div>
          <div className="flex flex-wrap gap-1">
            {shot.tags.map((t) => (
              <span key={t} className="px-1.5 py-0.5 rounded-[4px] text-[10px] font-mono border"
                style={{ background: t === 'team plan' ? 'oklch(0.30 0.04 245)' : 'oklch(0.23 0.008 260)', borderColor: t === 'team plan' ? 'oklch(0.55 0.09 245)' : 'var(--dark-border)', color: t === 'team plan' ? 'oklch(0.92 0.02 245)' : 'var(--dark-muted)' }}>
                {t}
              </span>
            ))}
          </div>
        </div>

        {/* Meta */}
        <div className="rounded-md border p-2.5 grid grid-cols-2 gap-y-1.5 text-[11px]"
          style={{ background: 'oklch(0.205 0.007 260)', borderColor: 'var(--dark-border)' }}>
          {[
            ['Captured', shot.captured],
            ['App', shot.app],
            ['Display', shot.display],
            ['Provider', 'Kiroshi Cloud'],
          ].map(([k, v]) => (
            <React.Fragment key={k}>
              <div style={{ color: 'var(--dark-muted)' }}>{k}</div>
              <div className="font-mono text-right truncate" style={{ color: 'var(--dark-ink)' }}>{v}</div>
            </React.Fragment>
          ))}
        </div>
      </div>
    </div>
  );
};

// Timeline scrubber row
const TimelineScrubber = ({ active = 4 }) => {
  const months = ['Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'Today'];
  return (
    <div className="px-3 pt-2 pb-2.5 border-t" style={{ borderColor: 'var(--dark-border)' }}>
      <div className="flex items-end gap-[2px] h-9">
        {Array.from({ length: 56 }).map((_, i) => {
          const h = 6 + (Math.abs(Math.sin(i * 0.6)) * 18) + (i > 40 ? 8 : 0);
          const isActive = i >= 36 && i <= 44;
          return (
            <div
              key={i}
              className="rounded-sm transition-colors"
              style={{
                height: h,
                width: 4,
                background: isActive ? 'oklch(0.78 0.06 245)' : 'oklch(0.32 0.008 260)',
                opacity: isActive ? 1 : 0.7,
              }}
            />
          );
        })}
      </div>
      <div className="flex items-center justify-between mt-1.5 text-[10px] font-mono" style={{ color: 'var(--dark-muted)' }}>
        {months.map((m, i) => (
          <span key={m} style={{ color: i === active ? 'oklch(0.78 0.06 245)' : 'var(--dark-muted)' }}>{m}</span>
        ))}
      </div>
    </div>
  );
};

// Library data
const LIBRARY = {
  today: [
    { id: 't1', tint: 'thumb-tint-graphite', label: 'stripe checkout', badge: '⌘ Cloud', kind: 'commerce' },
    { id: 't2', tint: 'thumb-tint-blue', label: 'figma frame', kind: 'design' },
    { id: 't3', tint: 'thumb-stripes-dark', label: 'terminal', kind: 'terminal' },
    { id: 't4', tint: 'thumb-tint-warm', label: 'pricing - linear', kind: 'commerce' },
    { id: 't5', tint: 'thumb-tint-rose', label: 'error toast', kind: 'error' },
    { id: 't6', tint: 'thumb-stripes-dark', label: 'docs page', kind: 'docs' },
    { id: 't7', tint: 'thumb-tint-graphite', label: 'dashboard', kind: 'dashboard' },
    { id: 't8', tint: 'thumb-tint-green', label: 'settings panel', kind: 'settings' },
  ],
  yesterday: [
    { id: 'y1', tint: 'thumb-tint-blue', label: 'meeting link', kind: 'conversation' },
    { id: 'y2', tint: 'thumb-stripes-dark', label: 'stack trace', kind: 'terminal' },
    { id: 'y3', tint: 'thumb-tint-warm', label: 'order #4128', kind: 'commerce' },
    { id: 'y4', tint: 'thumb-tint-graphite', label: 'iOS UI ref', kind: 'design' },
  ],
};

const DETAIL = {
  filename: 'CleanShot 2026-04-28 at 10.41.22.png',
  tint: 'thumb-tint-graphite',
  label: 'stripe checkout - team plan',
  kind: 'commerce',
  size: '1.8 MB · 2880×1864',
  confidence: '96%',
  textRegions: '42',
  objects: '18',
  summary:
    'Stripe checkout page for the Team plan at $24 per user / month. Includes a comparison row with a Pro plan and a small trust banner about SOC 2.',
  signals: [
    ['Plan', 'Team'],
    ['Price', '$24 / user'],
    ['Layout', 'pricing table'],
    ['Trust', 'SOC 2 banner'],
  ],
  ocr: [
    'Team plan',
    '$24 per user / month, billed annually',
    'Includes 5 seats, advanced sharing,',
    'priority support, and SAML SSO.',
    'SOC 2 Type II · GDPR · CCPA',
  ],
  tags: ['pricing', 'stripe', 'checkout', 'team plan', 'comparison'],
  captured: 'Today, 10:41',
  app: 'Safari',
  display: 'Built-in Retina',
};

const ProductMockup = ({ compact = false }) => {
  const [selected, setSelected] = React.useState('t1');

  return (
    <div
      className="rounded-xl overflow-hidden hero-shadow"
      style={{ background: 'var(--dark)', border: '1px solid var(--dark-border)' }}
    >
      {/* Title bar */}
      <div className="flex items-center px-3 h-9 border-b" style={{ borderColor: 'var(--dark-border)', background: 'oklch(0.20 0.007 260)' }}>
        <div className="flex items-center gap-1.5">
          <span className="traffic r"></span>
          <span className="traffic y"></span>
          <span className="traffic g"></span>
        </div>
        <div className="flex-1 text-center">
          <span className="text-[11px] font-medium" style={{ color: 'var(--dark-ink)' }}>Kiroshi</span>
          <span className="text-[11px] ml-2 font-mono" style={{ color: 'var(--dark-muted)' }}>· Library</span>
        </div>
        <div className="text-[10px] font-mono" style={{ color: 'var(--dark-muted)' }}>12,847 indexed</div>
      </div>

      <div className="grid" style={{ gridTemplateColumns: compact ? '180px 1fr 280px' : '210px 1fr 320px', height: compact ? 480 : 560 }}>
        {/* Sidebar */}
        <aside className="border-r p-2 overflow-y-auto scroll-y" style={{ borderColor: 'var(--dark-border)', background: 'oklch(0.165 0.006 260)' }}>
          <div className="px-2 py-1.5 text-[11px] font-mono" style={{ color: 'var(--dark-muted)' }}>Library</div>
          <SidebarItem icon={<I.Image size={13} />} label="All Screenshots" count="12,847" active />
          <SidebarItem icon={<I.Sparkles size={13} />} label="Recently indexed" count="38" />
          <SidebarItem icon={<I.Tag size={13} />} label="Pinned" count="14" />

          <SidebarSection title="Smart Sets">
            <SidebarItem icon={<I.Code size={13} />} label="Code & terminal" count="412" />
            <SidebarItem icon={<I.Bug size={13} />} label="Errors & bugs" count="318" />
            <SidebarItem icon={<I.Type size={13} />} label="Pricing pages" count="47" />
            <SidebarItem icon={<I.Layers size={13} />} label="UI references" count="1,204" />
            <SidebarItem icon={<I.Mail size={13} />} label="Conversations" count="89" />
          </SidebarSection>

          <SidebarSection title="Sources">
            <SidebarItem icon={<I.Folder size={13} />} label="Desktop" count="9.1k" />
            <SidebarItem icon={<I.Folder size={13} />} label="CleanShot" count="2.3k" />
            <SidebarItem icon={<I.Folder size={13} />} label="Drop Zone" count="1.4k" />
          </SidebarSection>

          <div className="mt-5 pt-3 border-t" style={{ borderColor: 'var(--dark-border)' }}>
            <div className="px-2 flex items-center justify-between text-[10px] font-mono" style={{ color: 'var(--dark-muted)' }}>
              <span>Indexing</span>
              <span style={{ color: 'oklch(0.78 0.06 245)' }}>3 / 38</span>
            </div>
            <div className="mx-2 mt-1.5 h-1 rounded-full overflow-hidden" style={{ background: 'oklch(0.25 0.008 260)' }}>
              <div className="h-full rounded-full" style={{ width: '32%', background: 'oklch(0.7 0.1 245)' }} />
            </div>
          </div>
        </aside>

        {/* Main grid */}
        <main className="flex flex-col">
          {/* Search bar */}
          <div className="px-3 py-2 border-b flex items-center gap-2" style={{ borderColor: 'var(--dark-border)', background: 'oklch(0.18 0.006 260)' }}>
            <div className="min-w-0 flex-1 flex items-center gap-2 px-2.5 h-8 rounded-md border"
              style={{
                background: 'linear-gradient(180deg, oklch(0.225 0.008 260), oklch(0.195 0.007 260))',
                borderColor: 'oklch(0.34 0.01 260)',
                boxShadow: '0 1px 0 oklch(1 0 0 / 0.07) inset, 0 8px 18px oklch(0 0 0 / 0.12)',
              }}>
              <I.Search size={13} style={{ color: 'var(--dark-muted)' }} />
              <span className="min-w-0 flex-1 truncate text-[12px]" style={{ color: 'var(--dark-ink)' }}>
                pricing table with team plan from this week
              </span>
              <span className="hidden xl:inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[9px] font-mono border"
                style={{ color: 'oklch(0.82 0.03 245)', background: 'oklch(0.28 0.035 245 / 0.72)', borderColor: 'oklch(0.48 0.08 245)' }}>
                semantic
              </span>
              <span className="font-mono text-[10px] px-1.5 py-0.5 rounded border" style={{ color: 'var(--dark-muted)', background: 'oklch(0.16 0.006 260)', borderColor: 'var(--dark-border)' }}>
                ⌘K
              </span>
            </div>
            <div className="h-8 flex items-center rounded-md border overflow-hidden"
              style={{ background: 'oklch(0.21 0.007 260)', borderColor: 'var(--dark-border)' }}>
              <button className="h-8 w-8 grid place-items-center" aria-label="Grid view" style={{ color: 'oklch(0.84 0.02 245)', background: 'oklch(0.27 0.025 245)' }}>
                <I.Square size={12} />
              </button>
              <button className="h-8 w-8 grid place-items-center border-l" aria-label="Timeline view" style={{ color: 'var(--dark-muted)', borderColor: 'var(--dark-border)' }}>
                <I.Clock size={12} />
              </button>
            </div>
            <button className="h-8 px-2 rounded-md flex items-center gap-1.5 text-[11px] border"
              style={{ background: 'oklch(0.21 0.007 260)', borderColor: 'var(--dark-border)', color: 'var(--dark-ink)' }}>
              <I.Filter size={12} />
              Filters
              <span className="px-1 rounded font-mono text-[9px]" style={{ background: 'oklch(0.32 0.04 245)', color: 'oklch(0.92 0.02 245)' }}>2</span>
            </button>
          </div>

          {/* Filter chips */}
          <div className="px-3 py-2 border-b flex items-center gap-1.5 text-[10px] font-mono" style={{ borderColor: 'var(--dark-border)', background: 'oklch(0.175 0.006 260)' }}>
            {[
              ['Last 7 days', 'Apr 22-Today', true],
              ['Pricing', '47', true],
              ['Has table', 'OCR', false],
              ['Safari', 'source', false],
            ].map(([label, meta, active], i) => (
              <span key={i} className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full border"
                style={{
                  borderColor: active ? 'oklch(0.55 0.09 245)' : 'var(--dark-border)',
                  background: active ? 'oklch(0.30 0.04 245)' : 'oklch(0.20 0.007 260)',
                  color: active ? 'oklch(0.92 0.02 245)' : 'var(--dark-muted)',
                }}>
                <span className="rounded-full" style={{ width: 5, height: 5, background: active ? 'oklch(0.78 0.08 245)' : 'oklch(0.44 0.008 260)' }} />
                <span>{label}</span>
                <span style={{ color: active ? 'oklch(0.78 0.04 245)' : 'oklch(0.52 0.008 260)' }}>{meta}</span>
              </span>
            ))}
            <span className="ml-auto" style={{ color: 'var(--dark-muted)' }}>
              <span style={{ color: 'var(--dark-ink)' }}>4</span> matches · visual + OCR relevance
            </span>
          </div>

          {/* Scrollable grid */}
          <div className="flex-1 overflow-y-auto scroll-y px-3 py-3 space-y-4">
            <DayGroup
              day="Today · Tuesday, April 28"
              count={LIBRARY.today.length}
              items={LIBRARY.today}
              selectedId={selected}
              onSelect={setSelected}
            />
            <DayGroup
              day="Yesterday · Monday, April 27"
              count={LIBRARY.yesterday.length}
              items={LIBRARY.yesterday}
              selectedId={selected}
              onSelect={setSelected}
            />
          </div>

          <TimelineScrubber />
        </main>

        {/* Detail panel */}
        <aside className="border-l" style={{ borderColor: 'var(--dark-border)', background: 'oklch(0.175 0.006 260)' }}>
          <DetailPanel shot={DETAIL} />
        </aside>
      </div>
    </div>
  );
};

window.ProductMockup = ProductMockup;
window.Thumb = Thumb;