const { Input, Select, Checkbox, RadioGroup, Button, Card, Toast, Dialog, Badge, Icon, GlassPanel } = window.AIProductionStudioDesignSystem_16a811;

const CONTACT_ROWS = [
  ['mail', 'contact@goldshinemedia.com', 'mailto:contact@goldshinemedia.com'],
  ['phone', '+91 96770 25368', 'tel:+919677025368'],
  ['globe', 'www.goldshinemedia.com', 'https://www.goldshinemedia.com'],
];

function ContactScreen() {
  const [scope, setScope] = React.useState('vfx');
  const [sent, setSent] = React.useState(false);
  const [confirm, setConfirm] = React.useState(false);
  return (
    <div style={{ position: 'relative' }}>
      <div style={{ maxWidth: 'var(--page-max)', margin: '0 auto', padding: 'var(--space-20) var(--page-pad) var(--section-y)', display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(340px,1fr))', gap: 'var(--space-16)' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-6)' }}>
          <span className="u-label">Contact</span>
          <h1 className="u-display" style={{ fontSize: 'var(--type-d2)', maxWidth: '14ch' }}>Get in <em>touch</em></h1>
          <p style={{ fontSize: 'var(--type-lg)', color: 'var(--text-muted)', maxWidth: '36ch' }}>Reach out to Goldshine Media LLP for expert VFX support.</p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)', marginTop: 'var(--space-4)' }}>
            {CONTACT_ROWS.map(([i, v, href]) => (
              <a key={v} href={href} style={{ display: 'flex', gap: 12, alignItems: 'center', color: 'var(--text-body)', fontSize: 'var(--type-md)' }}>
                <Icon name={i} size={16} color="var(--mono-300)" />{v}
              </a>
            ))}
          </div>
          <div style={{ display: 'flex', gap: 10, marginTop: 'var(--space-4)', flexWrap: 'wrap' }}><Badge tone="neutral">TPN-standard security</Badge><Badge tone="neutral">24/7 CCTV</Badge></div>
        </div>
        <Card style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)', padding: 'var(--space-8)' }}>
          <div style={{ display: 'flex', gap: 'var(--space-4)' }}>
            <Input label="Your name" placeholder="Name" />
            <Input label="Email address" icon="mail" placeholder="you@studio.com" />
          </div>
          <RadioGroup name="scope" value={scope} onChange={setScope} direction="row" gap="var(--space-6)"
            options={[{ value: 'vfx', label: 'VFX services' }, { value: 'ai', label: 'AI video production' }]} />
          <Select label="Service" options={scope === 'vfx' ? ['Rotoscopy', 'Wire removal', 'Rig removal', 'Prep / Paint', 'Compositing', 'Track / Matchmove', 'Motion Graphics'] : ['SaaS explainer video', 'Product explainer video', 'UGC']} />
          <Input label="Message" multiline rows={4} placeholder="Shot count, deadline, references…" />
          <Checkbox label="Send me the showreel" />
          <Button size="lg" block onClick={() => setConfirm(true)}>Send</Button>
        </Card>
      </div>
      {sent && <div style={{ position: 'absolute', left: 32, bottom: 32, zIndex: 40 }}>
        <Toast tone="success" title="Message sent" message="We'll be in touch shortly." onClose={() => setSent(false)} />
      </div>}
      <Dialog open={confirm} title="Send this message?" description="You can attach references in the reply thread." onClose={() => setConfirm(false)}
        footer={<><Button variant="ghost" onClick={() => setConfirm(false)}>Cancel</Button><Button onClick={() => { setConfirm(false); setSent(true); }}>Send</Button></>}>
        <Input label="Add a note" multiline rows={2} placeholder="Anything else we should know?" />
      </Dialog>
    </div>
  );
}
Object.assign(window, { ContactScreen });