const DS = window.AIProductionStudioDesignSystem_16a811;
const { Tag, Badge, Button, Card, Icon, GlassPanel } = DS;
const Slideshow = DS.Slideshow || function SlideshowFallback({ items = [], ratio = '16 / 9' }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(320px,1fr))', gap: 'var(--gutter)' }}>
      {items.slice(0, 2).map((s, i) => (
        <figure key={i} style={{ margin: 0 }}>
          <MediaSlot label={s.video ? '' : (s.placeholder || s.title)} ratio={ratio}>{s.video && <video src={s.video} autoPlay muted loop playsInline style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />}</MediaSlot>
          {s.title && <figcaption style={{ display: 'flex', justifyContent: 'space-between', gap: 16, marginTop: 'var(--space-5)' }}><span className="u-display" style={{ fontSize: 'var(--type-h2)' }}>{s.title}</span><span className="u-label">{s.meta}</span></figcaption>}
        </figure>
      ))}
    </div>
  );
};

const WORK = [
  { t: 'Marakkar', c: 'Feature film · VFX', y: 'Film', tags: ['VFX'], src: 'assets/film-marakkar.jpg' },
  { t: 'Thug Life', c: 'Feature film · VFX', y: 'Film', tags: ['VFX'], src: 'assets/film-thuglife.jpg' },
  { t: 'Hair-detail roto', c: 'Rotoscopy breakdown', y: 'Roto', tags: ['VFX'], src: 'assets/work-reel.png' },
  { t: 'Kissflow – Explainer Video', c: 'SaaS explainer', y: 'AI', tags: ['AI'], src: 'assets/kissflow-thumb.png' },
  { t: 'GenQuest – Explainer Video', c: 'How police find invisible fingerprints', y: 'AI', tags: ['AI'], src: 'assets/genquest-fingerprints-thumb-v2.png' },
  { t: 'Temple jewellery — UGC', c: 'UGC ad · 9:16', y: 'AI', tags: ['AI'], src: 'assets/ugc-jewel-1.jpg' },
  { t: 'Orbit Audio — product explainer', c: 'AI video production', y: 'AI', tags: ['AI'] },
];
const FILTERS = ['AI', 'VFX'];

function WorkScreen({ onNav }) {
  const [active, setActive] = React.useState([]);
  const toggle = (f) => setActive((a) => a.includes(f) ? a.filter((x) => x !== f) : [...a, f]);
  const shown = active.length ? WORK.filter((w) => w.tags.some((t) => active.includes(t))) : WORK;
  return (
    <div>
      <div style={{ maxWidth: 'var(--page-max)', margin: '0 auto', padding: 'var(--space-20) var(--page-pad) var(--space-10)' }}>
        <span className="u-label">Work</span>
        <h1 className="u-display" style={{ fontSize: 'var(--type-d2)', marginTop: 'var(--space-5)' }}>Our <em>work</em></h1>
        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)', marginTop: 'var(--space-10)' }}>
          {FILTERS.map((f) => <Tag key={f} interactive selected={active.includes(f)} onClick={() => toggle(f)}>{f}</Tag>)}
          <span style={{ flex: 1 }} />
          <span className="u-label">{String(shown.length).padStart(2, '0')} projects</span>
        </div>
      </div>
      <div style={{ maxWidth: 'var(--page-max)', margin: '0 auto', padding: '0 var(--page-pad) var(--space-16)' }}>
        <Slideshow perView={2} ratio="16 / 9" items={shown.map((w) => ({ title: w.t, meta: w.c, placeholder: w.t, src: w.src }))} />
      </div>
      <div style={{ maxWidth: 'var(--page-max)', margin: '0 auto', padding: '0 var(--page-pad) var(--section-y)' }}>
        {shown.map((w) => (
          <a key={w.t} href="#" onClick={(e) => { e.preventDefault(); onNav('case'); }}
            style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-6)', padding: 'var(--space-6) 0', borderBottom: '1px solid var(--line-hairline)', color: 'inherit' }}>
            <span className="u-mono" style={{ color: 'var(--text-faint)', fontSize: 'var(--type-sm)', width: 56 }}>{w.y}</span>
            <span className="u-display" style={{ flex: 1, fontSize: 'var(--type-h2)' }}>{w.t}</span>
            <span className="u-label">{w.c}</span>
            <Icon name="arrow-up-right" size={18} color="var(--mono-300)" />
          </a>
        ))}
      </div>
    </div>
  );
}

function CaseScreen({ onNav }) {
  return (
    <div>
      <div style={{ maxWidth: 'var(--page-max)', margin: '0 auto', padding: 'var(--space-12) var(--page-pad) 0' }}>
        <Button variant="ghost" size="sm" iconLeft="arrow-left" onClick={() => onNav('work')}>All work</Button>
      </div>
      <div style={{ maxWidth: 'var(--page-max)', margin: '0 auto', padding: 'var(--space-8) var(--page-pad) var(--section-y)' }}>
        <div style={{ display: 'flex', gap: 'var(--space-3)', marginBottom: 'var(--space-6)' }}>
          <Badge tone="neutral">VFX services</Badge><Badge tone="neutral">46 shots</Badge><Badge tone="success" dot>Delivered</Badge>
        </div>
        <h1 className="u-display" style={{ fontSize: 'var(--type-d2)', maxWidth: '18ch' }}>Halcyon — rig <em>removal</em></h1>
        <div style={{ marginTop: 'var(--space-10)', position: 'relative' }}>
          <Slideshow perView={1} ratio="21 / 9" showCaption={false}
            items={[{ placeholder: 'Halcyon — raw plate' }, { placeholder: 'Halcyon — roto pass' }, { placeholder: 'Halcyon — final comp' }]} />
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 'var(--space-16)', marginTop: 'var(--space-16)' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-6)' }}>
            <h2 className="u-display" style={{ fontSize: 'var(--type-d3)' }}>The brief</h2>
            <p style={{ color: 'var(--text-body)', fontSize: 'var(--type-lg)' }}>
              Remove harness rigs from a 40-second continuous stunt take without softening the plate.
            </p>
          </div>
          <Card surface="outline" style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)', height: 'fit-content' }}>
            {[['Client', 'Feature film'], ['Shots', '46'], ['Delivery', 'ProRes 4444 / EXR'], ['Schedule', '3 weeks'], ['Scope', 'Roto, paint, compositing']].map(([k, v]) => (
              <div key={k} style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                <span className="u-label">{k}</span>
                <span style={{ fontSize: 'var(--type-sm)', color: 'var(--text-display)' }}>{v}</span>
              </div>
            ))}
          </Card>
        </div>
      </div>
    </div>
  );
}
Object.assign(window, { WorkScreen, CaseScreen });