// Kestral v2 — visual components: window frames, screenshots, CSS mockups.
// Real screenshots where we have them; hand-built mockups in the app's exact
// design language where we don't (wireframe canvas, state machine, import).

// ---------- wordmark ----------
const KLogo = ({ h = 20 }) => (
  <img src="assets/kestral-logo-white.png" alt="Kestral" style={{ height: h, width: 'auto', display: 'block' }} />
);

// ---------- window chrome ----------
const KTrafficLights = () => (
  <div className="flex items-center gap-1.5" aria-hidden="true">
    <span className="w-[10px] h-[10px] rounded-full" style={{ background: '#2E2F36' }}></span>
    <span className="w-[10px] h-[10px] rounded-full" style={{ background: '#2E2F36' }}></span>
    <span className="w-[10px] h-[10px] rounded-full" style={{ background: '#2E2F36' }}></span>
  </div>
);

const KWindow = ({ title, badge, children, className = '' }) => (
  <div className={`rounded-[10px] overflow-hidden bg-ink2 lift ${className}`}>
    <div className="flex items-center justify-between px-3.5 h-9 hairline-b" style={{ background: '#0D0E12' }}>
      <KTrafficLights />
      <span className="text-[11.5px] font-mono text-paper3">{title}</span>
      <span className="text-[10.5px] font-mono" style={{ color: badge ? '#6E72FF' : 'transparent' }}>{badge || '·'}</span>
    </div>
    {children}
  </div>
);

// ---------- real screenshot in chrome ----------
const KShot = ({ src, alt, title, badge }) => (
  <KWindow title={title} badge={badge}>
    <img src={src} alt={alt} className="block w-full h-auto" loading="lazy" />
  </KWindow>
);

// ---------- xml snippet (graphic texture) ----------
const Xl = ({ tokens }) => (
  <div className="whitespace-pre leading-[1.75]">
    {tokens.map(([k, txt], i) => {
      const c = { t: '#4A4A46', k: '#8B8EFF', a: '#B9B6AD', s: '#7E828C', x: '#8A8A85' }[k];
      return <span key={i} style={{ color: c }}>{txt}</span>;
    })}
  </div>
);

const BlueprintSnippet = () => (
  <div className="rounded-lg hairline bg-ink2/95 px-4 py-3.5 font-mono text-[11px] backdrop-blur-sm lift-sm">
    <div className="flex items-center justify-between mb-2">
      <span className="text-[10.5px] text-paper3">blueprint.xml</span>
      <span className="w-1.5 h-1.5 rounded-full pulse-dot" style={{ background: '#5B5FFF' }}></span>
    </div>
    <Xl tokens={[['t','<'],['k','blueprint'],['a',' version'],['t','='],['s','"1.0"'],['t','>']]} />
    <Xl tokens={[['t','  <'],['k','frontend'],['a',' screens'],['t','='],['s','"6"'],['t','/>']]} />
    <Xl tokens={[['t','  <'],['k','schema'],['a',' tables'],['t','='],['s','"4"'],['t','/>']]} />
    <Xl tokens={[['t','  <'],['k','endpoints'],['a',' count'],['t','='],['s','"11"'],['t','/>']]} />
    <Xl tokens={[['t','  <'],['k','services'],['a',' enabled'],['t','='],['s','"4"'],['t','/>']]} />
    <Xl tokens={[['t','</'],['k','blueprint'],['t','>']]} />
  </div>
);

const TokenChip = () => (
  <div className="rounded-lg hairline bg-ink2/95 px-3.5 py-2.5 font-mono text-[11px] backdrop-blur-sm lift-sm flex items-center gap-2.5">
    <span className="text-paper3">est.</span>
    <span className="text-paper">≈ 41,200 tokens</span>
  </div>
);

// ---------- wireframe canvas mockup (no screenshot exists for this) ----------
const WfBox = ({ w, h, r = 3, block, dim }) => (
  <div style={{
    width: block ? '100%' : w, height: h, borderRadius: r,
    background: dim ? 'rgba(255,255,255,0.05)' : 'rgba(255,255,255,0.09)',
  }}></div>
);

const WfScreen = ({ label, selected, children, style }) => (
  <div className="absolute" style={style}>
    <div className="text-[10px] font-mono text-paper3 mb-1.5 flex items-center gap-1.5">
      {label}
      {selected && <span style={{ color: '#6E72FF' }}>· selected</span>}
    </div>
    <div className="rounded-[6px] p-2.5 flex flex-col gap-1.5 relative"
      style={{
        background: '#111216', width: '100%', height: 'calc(100% - 20px)',
        border: selected ? '1.5px solid rgba(91,95,255,0.85)' : '1px solid rgba(255,255,255,0.14)',
        boxShadow: selected ? '0 0 0 4px rgba(91,95,255,0.12)' : 'none',
      }}>
      {children}
      {selected && ['-4px,-4px', 'calc(100% - 4px),-4px', '-4px,calc(100% - 4px)', 'calc(100% - 4px),calc(100% - 4px)'].map((p, i) => {
        const [x, y] = p.split(',');
        return <span key={i} className="absolute w-[7px] h-[7px] bg-ink rounded-[1px]" style={{ left: x, top: y, border: '1.5px solid #5B5FFF' }}></span>;
      })}
    </div>
  </div>
);

const MockCanvas = () => (
  <KWindow title="Kestral · Frontend / Canvas" badge="6 screens">
    <div className="relative canvas-dots" style={{ aspectRatio: '16/10.6' }}>
      {/* toolbar */}
      <div className="absolute left-1/2 -translate-x-1/2 top-3 z-10 flex items-center gap-1 rounded-md hairline bg-ink2 px-1.5 py-1">
        {['◇', '▭', 'T', '↗', '✲'].map((t, i) => (
          <span key={i} className={`w-6 h-6 inline-flex items-center justify-center rounded text-[11px] ${i === 1 ? 'text-paper' : 'text-paper3'}`}
            style={i === 1 ? { background: 'rgba(91,95,255,0.25)' } : {}}>{t}</span>
        ))}
      </div>
      {/* screens */}
      <WfScreen label="/jobs" selected style={{ left: '6%', top: '16%', width: '30%', height: '64%' }}>
        <WfBox block h={8} dim />
        <div className="flex gap-1.5">
          <WfBox w="62%" h={6} dim />
          <WfBox w="22%" h={6} />
        </div>
        <div className="flex-1 flex flex-col gap-1.5 mt-1">
          <WfBox block h={22} dim />
          <WfBox block h={22} dim />
          <WfBox block h={22} dim />
        </div>
      </WfScreen>
      <WfScreen label="/jobs/:id" style={{ left: '42%', top: '8%', width: '26%', height: '56%' }}>
        <WfBox w="70%" h={9} />
        <WfBox w="40%" h={6} dim />
        <div className="flex-1 mt-1"><WfBox block h="100%" dim /></div>
        <WfBox block h={16} r={4} />
      </WfScreen>
      <WfScreen label="/apply" style={{ left: '74%', top: '24%', width: '21%', height: '52%' }}>
        <WfBox w="55%" h={7} />
        <WfBox block h={12} dim />
        <WfBox block h={12} dim />
        <WfBox block h={12} dim />
        <div className="mt-auto"><WfBox block h={14} r={4} /></div>
      </WfScreen>
      {/* connector */}
      <svg className="absolute inset-0 w-full h-full pointer-events-none">
        <line x1="36%" y1="46%" x2="42%" y2="38%" stroke="rgba(91,95,255,0.5)" strokeWidth="1.25" strokeDasharray="4 4" />
        <line x1="68%" y1="38%" x2="74%" y2="48%" stroke="rgba(255,255,255,0.2)" strokeWidth="1.25" strokeDasharray="4 4" />
      </svg>
      {/* zoom chip */}
      <div className="absolute right-3 bottom-3 rounded hairline bg-ink2 px-2 py-1 font-mono text-[10.5px] text-paper3">82%</div>
    </div>
  </KWindow>
);

// ---------- state machine card (inset for endpoints block) ----------
const SmState = ({ label, accent, terminal }) => (
  <span className="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 font-mono text-[10.5px] whitespace-nowrap"
    style={{
      border: `1px solid ${accent ? 'rgba(91,95,255,0.6)' : 'rgba(255,255,255,0.14)'}`,
      color: accent ? '#A5A8FF' : terminal ? '#4A4A46' : '#8A8A85',
      background: accent ? 'rgba(91,95,255,0.10)' : 'rgba(255,255,255,0.02)',
    }}>
    {label}
  </span>
);

const SmArrow = ({ label }) => (
  <span className="inline-flex flex-col items-center px-1" aria-hidden="true">
    <span className="font-mono text-[9.5px] text-paper3 leading-none mb-0.5">{label}</span>
    <span className="text-paper3 text-[11px] leading-none">→</span>
  </span>
);

const MockStateMachine = () => (
  <div className="rounded-lg hairline bg-ink2 p-4 lift-sm">
    <div className="flex items-center justify-between mb-3">
      <span className="font-mono text-[10.5px] text-paper3">state machine · jobs.status</span>
      <span className="font-mono text-[10px] px-1.5 py-0.5 rounded" style={{ background: 'rgba(91,95,255,0.14)', color: '#A5A8FF' }}>auto-suggested</span>
    </div>
    <div className="flex items-center flex-wrap gap-y-2">
      <SmState label="draft" />
      <SmArrow label="publish" />
      <SmState label="active" accent />
      <SmArrow label="fill" />
      <SmState label="filled" />
      <SmArrow label="archive" />
      <SmState label="closed" terminal />
    </div>
  </div>
);

// ---------- import existing project mockup (no screenshot exists) ----------
const ImpRow = ({ name, pct, files }) => {
  const tone = pct >= 85 ? '#6E72FF' : pct >= 70 ? '#8A8A85' : '#4A4A46';
  return (
    <div className="py-2.5 hairline-b last:border-b-0">
      <div className="flex items-center justify-between mb-1.5">
        <span className="text-[12.5px] text-paper font-medium">{name}</span>
        <span className="font-mono text-[11px]" style={{ color: tone }}>{pct}% confident</span>
      </div>
      <div className="flex items-center justify-between gap-3">
        <div className="flex-1 h-[3px] rounded-full overflow-hidden" style={{ background: 'rgba(255,255,255,0.06)' }}>
          <div className="h-full rounded-full" style={{ width: pct + '%', background: tone }}></div>
        </div>
        <span className="font-mono text-[10.5px] text-paper3 whitespace-nowrap">{files}</span>
      </div>
    </div>
  );
};

const MockImport = () => (
  <KWindow title="Kestral · Import / existing codebase" badge="reverse-engineering">
    <div className="grid grid-cols-5" style={{ aspectRatio: '16/10.6' }}>
      {/* left: scanned tree */}
      <div className="col-span-2 hairline-r p-3.5 font-mono text-[11px] leading-[2] overflow-hidden">
        <div className="text-paper3 mb-1">~/work/jobboard</div>
        {[
          ['app/', 1, false], ['layout.tsx', 2, true], ['page.tsx', 2, true], ['jobs/[id]/page.tsx', 2, true],
          ['api/jobs/route.ts', 2, true], ['prisma/', 1, false], ['schema.prisma', 2, true],
          ['lib/stripe.ts', 1, true], ['lib/email.ts', 1, true], ['package.json', 1, true],
        ].map(([f, lvl, done], i) => (
          <div key={i} className="flex items-center gap-2" style={{ paddingLeft: (lvl - 1) * 14 }}>
            <span style={{ color: done ? '#6E72FF' : '#4A4A46' }}>{done ? '✓' : '·'}</span>
            <span className="text-paper2">{f}</span>
          </div>
        ))}
      </div>
      {/* right: detected sections */}
      <div className="col-span-3 p-4 flex flex-col">
        <div className="font-mono text-[10.5px] text-paper3 mb-1.5">detected blueprint sections</div>
        <ImpRow name="Pages & screens" pct={96} files="14 routes" />
        <ImpRow name="Database schema" pct={92} files="4 tables" />
        <ImpRow name="API endpoints" pct={88} files="11 endpoints" />
        <ImpRow name="Services" pct={74} files="stripe · resend · s3" />
        <ImpRow name="Business logic" pct={61} files="6 rules" />
        <div className="mt-auto pt-3 flex items-center justify-between">
          <span className="font-mono text-[10.5px] text-paper3">review low-confidence sections before compiling</span>
          <span className="text-[11.5px] font-medium px-3 py-1.5 rounded-md" style={{ background: '#5B5FFF', color: '#fff' }}>Generate blueprint</span>
        </div>
      </div>
    </div>
  </KWindow>
);

// ---------- streaming build feed (how-it-works step 3) ----------
const FeedLine = ({ i, kind, text, t }) => (
  <div className="feed-line flex items-center justify-between gap-3 px-3 py-[7px] hairline-b last:border-b-0" style={{ animationDelay: `${i * 1.1}s` }}>
    <div className="flex items-center gap-2.5 min-w-0">
      <span className="shrink-0 font-mono text-[10px]" style={{ color: kind === 'file' ? '#6E72FF' : '#4A4A46' }}>{kind === 'file' ? '+' : '›'}</span>
      <span className="font-mono text-[11px] text-paper2 truncate">{text}</span>
    </div>
    <span className="font-mono text-[10px] text-paper3 shrink-0">{t}</span>
  </div>
);

const MiniBuildFeed = () => (
  <div className="rounded-lg hairline bg-ink2 overflow-hidden">
    <div className="flex items-center justify-between px-3 py-2 hairline-b" style={{ background: '#0D0E12' }}>
      <span className="font-mono text-[10.5px] text-paper2 flex items-center gap-2">
        <span className="w-1.5 h-1.5 rounded-full pulse-dot" style={{ background: '#5B5FFF' }}></span>
        Claude Code is working…
      </span>
      <span className="font-mono text-[10px] text-paper3">217,431 / ≈ 41,200 tok</span>
    </div>
    <FeedLine i={0} kind="note" text="Reading blueprint.xml" t="0:05" />
    <FeedLine i={1} kind="file" text="Created prisma/schema.prisma" t="0:48" />
    <FeedLine i={2} kind="file" text="Created src/app/api/jobs/route.ts" t="1:12" />
    <FeedLine i={3} kind="note" text="npm install · 412 packages" t="1:30" />
    <FeedLine i={4} kind="file" text="Created src/app/jobs/[id]/page.tsx" t="2:04" />
  </div>
);

// ---------- mini visuals for how-it-works steps 1 & 2 ----------
const MiniCanvas = () => (
  <div className="rounded-lg hairline canvas-dots p-3 grid grid-cols-3 gap-2.5" style={{ minHeight: 148 }}>
    {[['/jobs', true], ['/jobs/:id', false], ['/apply', false]].map(([l, sel], i) => (
      <div key={i} className="rounded-[5px] p-1.5 flex flex-col gap-1"
        style={{ background: '#111216', border: sel ? '1.5px solid rgba(91,95,255,0.8)' : '1px solid rgba(255,255,255,0.13)' }}>
        <span className="font-mono text-[8.5px] text-paper3">{l}</span>
        <WfBox block h={5} dim />
        <WfBox block h={12} dim />
        <WfBox w="60%" h={5} />
      </div>
    ))}
  </div>
);

const MiniBlueprint = () => (
  <div className="rounded-lg hairline bg-ink2 px-3.5 py-3 font-mono text-[10.5px]" style={{ minHeight: 148 }}>
    <Xl tokens={[['t','<?'],['k','xml'],['a',' version'],['t','='],['s','"1.0"'],['t','?>']]} />
    <Xl tokens={[['t','<'],['k','blueprint'],['t','>']]} />
    <Xl tokens={[['t','  <'],['k','frontend'],['a',' screens'],['t','='],['s','"6"'],['t','/>']]} />
    <Xl tokens={[['t','  <'],['k','schema'],['a',' tables'],['t','='],['s','"4"'],['t','/>']]} />
    <Xl tokens={[['t','  <'],['k','services'],['a',' enabled'],['t','='],['s','"4"'],['t','/>']]} />
    <Xl tokens={[['t','</'],['k','blueprint'],['t','>']]} />
    <div className="mt-2 pt-2 hairline-t flex items-center justify-between">
      <span className="text-paper3">≈ 41,200 tokens</span>
      <span style={{ color: '#6E72FF' }}>deterministic ✓</span>
    </div>
  </div>
);

Object.assign(window, {
  KLogo, KWindow, KShot, KTrafficLights,
  BlueprintSnippet, TokenChip,
  MockCanvas, MockStateMachine, MockImport,
  MiniBuildFeed, MiniCanvas, MiniBlueprint,
});