const { Card, Button, Badge, Icon, Tag } = window.AIProductionStudioDesignSystem_16a811;

const SERVICE_GROUPS = [
  { id: 'vfx', label: 'VFX Services', items: [
    { icon: 'spline', t: 'Rotoscopy', d: 'Precise frame-by-frame masking for flawless edits.' },
    { icon: 'cable', t: 'Wire removal', d: 'Safety wires and cables painted out frame by frame, with clean plates rebuilt behind them.' },
    { icon: 'construction', t: 'Rig removal', d: 'Rigs, stands and camera equipment removed from the shot.' },
    { icon: 'eraser', t: 'Prep / Paint', d: 'Cleanup and paint out unwanted things on the frame, blue/green screen marker removals and beauty fixes to perfect every shot.' },
    { icon: 'layers', t: 'Compositing', d: 'Seamlessly blending layers from CG, roto, paint and matchmove to create stunning final visuals.' },
    { icon: 'crosshair', t: 'Track / Matchmove', d: 'Camera tracking recreates camera movement in 3D space, so 3D elements composite correctly over your 2D footage.' },
    { icon: 'monitor-play', t: 'Motion Graphics', d: 'Monitor and phone screen replacements, motion animation, text effects and title effects.' },
  ] },
  { id: 'ai', label: 'AI Video Production', items: [
    { icon: 'monitor-play', t: 'SaaS explainer videos', d: 'Your real interface, animated and voiced.' },
    { icon: 'box', t: 'Product explainer videos', d: 'Product features, shown in use.' },
    { icon: 'smartphone', t: 'UGC', d: 'Creator-style ads and hooks for paid social.' },
  ] },
];

function ServicesScreen({ onNav }) {
  return (
    <div>
      <div style={{ maxWidth: 'var(--page-max)', margin: '0 auto', padding: 'var(--space-20) var(--page-pad) var(--space-8)' }}>
        <span className="u-label">Services</span>
        <h1 className="u-display" style={{ fontSize: 'var(--type-d2)', marginTop: 'var(--space-5)', maxWidth: '20ch' }}>Our <em>services</em></h1>
        <p style={{ marginTop: 'var(--space-5)', fontSize: 'var(--type-lg)', color: 'var(--text-muted)', maxWidth: '40ch' }}>Crafting flawless visuals with precision and golden finesse.</p>
      </div>
      {SERVICE_GROUPS.map((g) => (
        <div key={g.id} style={{ maxWidth: 'var(--page-max)', margin: '0 auto', padding: 'var(--space-12) var(--page-pad) 0' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-4)', paddingBottom: 'var(--space-5)', borderBottom: '1px solid var(--line-strong)' }}>
            <h2 className="u-display" style={{ fontSize: 'var(--type-h1)' }}>{g.label}</h2>
            <Tag>{g.id === 'vfx' ? 'VFX' : 'AI'}</Tag>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(300px,1fr))', gap: 'var(--gutter)', marginTop: 'var(--space-8)' }}>
            {g.items.map((s) => (
              <Card key={s.t} hoverable pad="var(--space-8)" style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
                <Icon name={s.icon} size={20} color="var(--white)" />
                <h3 className="u-display" style={{ fontSize: 'var(--type-h2)' }}>{s.t}</h3>
                <p style={{ fontSize: 'var(--type-sm)', color: 'var(--text-muted)', textWrap: 'pretty' }}>{s.d}</p>
              </Card>
            ))}
          </div>
        </div>
      ))}
      <div style={{ maxWidth: 'var(--page-max)', margin: '0 auto', padding: 'var(--space-16) var(--page-pad) var(--section-y)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--space-8)', flexWrap: 'wrap' }}>
        <h2 className="u-display" style={{ fontSize: 'var(--type-d3)', maxWidth: '20ch' }}>Reach out for your VFX needs today</h2>
        <Button size="lg" iconRight="arrow-right" onClick={() => onNav('contact')}>Get started</Button>
      </div>
    </div>
  );
}
Object.assign(window, { ServicesScreen });