const { Button, Icon } = window.AIProductionStudioDesignSystem_16a811;
function PortfolioScreen({ onNav, initial }) {
  const [disc, setDisc] = React.useState(initial && initial.disc || null);
  const [cat, setCat] = React.useState(initial && initial.cat || null);
  const [reel, setReel] = React.useState(false);
  const [kase, setKase] = React.useState(null);
  const toGrid = () => { const s = document.getElementById('scroll'), g = document.getElementById('pf-grid'); if (s && g) s.scrollTo({ top: g.offsetTop - 40, behavior: 'smooth' }); };
  React.useEffect(() => { if (initial && (initial.disc || initial.cat)) setTimeout(toGrid, 60); }, []);
  return (
    <div style={{ background: '#1C1C1F' }}>
      <PfGateway onPick={(d) => { setDisc(d); setCat(null); toGrid(); }} onReel={() => setReel(true)} />
      <PfGrid disc={disc} cat={cat} setDisc={setDisc} setCat={setCat} />
      <PfRibbon onOpen={setKase} />
      <Section tight>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--space-8)', flexWrap: 'wrap', borderTop: '1px solid var(--line-hairline)', paddingTop: 'var(--space-10)' }}>
          <h2 className="u-display" style={{ fontSize: 'var(--type-d3)', maxWidth: '18ch' }}>Send us the shot that worries you</h2>
          <Button size="lg" variant="primary" iconRight="arrow-right" onClick={() => onNav('contact')}>Start a project</Button>
        </div>
      </Section>
      <PfOverlay open={reel} onClose={() => setReel(false)} width={1200}>
        <div style={{ position: 'relative', aspectRatio: '16 / 9', background: '#050506', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 'var(--space-6)', textAlign: 'center', padding: 'var(--space-8)' }}>
          <span className="u-label" style={{ color: 'var(--mono-300)' }}>Master showreel</span>
          <h3 className="u-display" style={{ margin: 0, fontSize: 'clamp(36px,5vw,72px)', color: 'var(--white)', lineHeight: 1 }}>On request by mail</h3>
          <p style={{ margin: 0, maxWidth: '40ch', fontSize: 'var(--type-md)', color: 'var(--mono-300)' }}>Write to us and we'll send a private link to the full reel.</p>
          <a href="mailto:contact@goldshinemedia.com?subject=Master%20showreel%20request" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '14px 24px', borderRadius: 999, background: 'var(--white)', color: 'var(--mono-950)', fontWeight: 600, textDecoration: 'none' }}><Icon name="mail" size={18} />contact@goldshinemedia.com</a>
        </div>
      </PfOverlay>
      <PfOverlay open={!!kase} onClose={() => setKase(null)}><PfCaseWindow c={kase} /></PfOverlay>
    </div>
  );
}
Object.assign(window, { PortfolioScreen });