// S6 — Shipped, not demoed.
// The storyboard compiles to a real client-branded PPTX, deterministically
// (no LLM at render time), gated by the Basis Scorecard. Left: the branded
// deck artifact. Right: a quiet proof strip — the marks of a system that's
// actually in production, each anchored to the codebase.

const { useState: shUse, useEffect: shEff } = React;
const { pitchC, pitchMono } = window;

const PROOF = [
  {
    icon: 'deploy', label: 'Deployed',
    value: 'Live in production for Basis',
    sub: 'Real users, real engagements — not a sandbox.',
  },
  {
    icon: 'cube', label: 'Deterministic compile',
    value: 'python-pptx · no LLM at render',
    sub: 'The deck is generated from the storyboard by code, so it\u2019s reproducible byte-for-byte.',
  },
  {
    icon: 'shield', label: 'Quality gate',
    value: 'Basis Scorecard \u2265 52/81 to ship',
    sub: 'Auto-graded against the 27-criterion rubric; insta-fails block the build.',
  },
  {
    icon: 'beaker', label: 'Evaluated',
    value: 'Eval suite + regression tests',
    sub: '291 pipeline modules · 289 test files keep behavior pinned.',
  },
  {
    icon: 'coin', label: 'Accountable',
    value: 'Per-run cost & token attribution',
    sub: 'Every run is metered, so spend is observable in production.',
  },
];

function SlideShipped() {
  const [stage, setStage] = shUse(0);
  shEff(() => {
    const ts = [
      setTimeout(() => setStage(1), 200),
      setTimeout(() => setStage(2), 600),
    ];
    return () => ts.forEach(clearTimeout);
  }, []);

  return (
    <div style={{
      flex: 1, minHeight: 0,
      display: 'grid',
      gridTemplateColumns: '0.92fr 1.08fr',
      gap: 30,
      marginTop: 26,
      alignItems: 'stretch',
    }}>
      <DeckArtifact visible={stage >= 1} />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, minHeight: 0 }}>
        {PROOF.map((p, i) => (
          <ProofRow key={p.label} p={p} visible={stage >= 2} delay={i * 70} />
        ))}
      </div>
    </div>
  );
}

function DeckArtifact({ visible }) {
  return (
    <div style={{
      background: 'linear-gradient(135deg, #ff663a 0%, #7f3399 48%, #000099 100%)',
      borderRadius: 20,
      padding: '34px 38px 30px',
      color: '#fff',
      position: 'relative',
      overflow: 'hidden',
      display: 'flex', flexDirection: 'column',
      opacity: visible ? 1 : 0,
      transform: visible ? 'translateY(0)' : 'translateY(14px)',
      transition: 'opacity 480ms cubic-bezier(.2,.7,.2,1), transform 480ms cubic-bezier(.2,.7,.2,1)',
      boxShadow: '0 18px 40px rgba(0,0,80,0.22)',
    }}>
      <div style={{
        display: 'inline-flex', alignSelf: 'flex-start', alignItems: 'center', gap: 7,
        padding: '6px 13px',
        background: 'rgba(255,255,255,0.18)',
        color: '#fff',
        borderRadius: 999,
        fontFamily: pitchMono, fontSize: 12.5, fontWeight: 700,
        letterSpacing: 1.6, textTransform: 'uppercase',
      }}>
        <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#7ce0a6' }} />
        Shipped
      </div>

      <div style={{
        fontSize: 38, lineHeight: 1.04, fontWeight: 700,
        marginTop: 20, letterSpacing: -0.015,
      }}>
        Habitat — Furniture vs<br/>Homeware Review
      </div>

      <div style={{
        fontFamily: pitchMono, fontSize: 15, color: 'rgba(255,255,255,0.82)',
        marginTop: 16, lineHeight: 1.5,
      }}>
        P11-13 Q4 25/26 · client-branded PPTX<br/>
        7 research packages · 18 slides · scorecard passed
      </div>

      {/* file chip */}
      <div style={{
        marginTop: 22,
        display: 'inline-flex', alignSelf: 'flex-start', alignItems: 'center', gap: 10,
        padding: '10px 14px',
        background: 'rgba(255,255,255,0.16)',
        border: '1px solid rgba(255,255,255,0.3)',
        borderRadius: 10,
        fontFamily: pitchMono, fontSize: 14, color: '#fff',
      }}>
        <span style={{ color: '#fff', fontWeight: 700 }}>PPTX</span>
        Habitat_Brand_Review_Q4.pptx
      </div>

      {/* circular brand motif */}
      <div style={{
        position: 'absolute', right: -44, bottom: -44,
        width: 230, height: 230, borderRadius: '50%',
        background: 'radial-gradient(circle at 35% 35%, rgba(255,255,255,0.22), rgba(255,255,255,0))',
      }} />

      <button style={{
        marginTop: 'auto',
        position: 'relative', zIndex: 2,
        padding: '14px 18px',
        background: '#fff', color: pitchC.ink,
        border: 'none', borderRadius: 12,
        fontSize: 16.5, fontWeight: 600, letterSpacing: -0.005,
        cursor: 'pointer',
        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9,
        fontFamily: 'Hanken Grotesk, sans-serif',
      }}>
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke={pitchC.ink} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M8 2v9M4 7l4 4 4-4M3 14h10"/></svg>
        Download PPTX
      </button>
    </div>
  );
}

function ProofRow({ p, visible, delay }) {
  return (
    <div style={{
      flex: 1,
      display: 'flex', alignItems: 'center', gap: 18,
      padding: '0 22px',
      background: '#fff',
      border: `1px solid ${pitchC.hair}`,
      borderRadius: 14,
      opacity: visible ? 1 : 0,
      transform: visible ? 'translateX(0)' : 'translateX(20px)',
      transition: `opacity 420ms cubic-bezier(.2,.7,.2,1) ${delay}ms, transform 420ms cubic-bezier(.2,.7,.2,1) ${delay}ms`,
    }}>
      <span style={{
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        width: 42, height: 42, borderRadius: 11, flexShrink: 0,
        background: pitchC.bgSoft, color: pitchC.navy,
      }}>
        <ProofGlyph kind={p.icon} />
      </span>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          fontFamily: pitchMono, fontSize: 12, fontWeight: 700,
          letterSpacing: 1.6, textTransform: 'uppercase', color: pitchC.muted2,
          marginBottom: 3,
        }}>{p.label}</div>
        <div style={{
          fontSize: 19, fontWeight: 600, color: pitchC.ink, letterSpacing: -0.01, lineHeight: 1.1,
        }}>{p.value}</div>
        <div style={{ fontSize: 14, lineHeight: 1.3, color: pitchC.muted, marginTop: 3 }}>{p.sub}</div>
      </div>
    </div>
  );
}

function ProofGlyph({ kind }) {
  const c = { width: 21, height: 21, viewBox: '0 0 24 24', fill: 'none', stroke: pitchC.navy, strokeWidth: 1.7, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (kind) {
    case 'deploy': return <svg {...c}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18"/></svg>;
    case 'cube':   return <svg {...c}><path d="M12 3l8 4.5v9L12 21l-8-4.5v-9z"/><path d="M4 7.5l8 4.5 8-4.5M12 12v9"/></svg>;
    case 'shield': return <svg {...c}><path d="M12 2l8 4v6c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6z"/><path d="M9 12l2 2 4-4"/></svg>;
    case 'beaker': return <svg {...c}><path d="M9 3h6M10 3v6l-5 9a1.5 1.5 0 001.3 2.2h11.4A1.5 1.5 0 0015 18l-5-9V3"/><path d="M7.5 14h9"/></svg>;
    case 'coin':   return <svg {...c}><circle cx="12" cy="12" r="9"/><path d="M12 7v10M9.5 9.5h4a1.5 1.5 0 010 3h-3a1.5 1.5 0 000 3h4"/></svg>;
    default: return null;
  }
}

window.SlideShipped = SlideShipped;