/* global React */
const { useState: useStatePro } = React;

// ─────────────────────────────────────────────────────────────
// PROFESSIONAL SIGN-UP (Ages 17+)
// Tone: austere. Ink-heavy chrome, monospace metadata, no spotlight.
// ─────────────────────────────────────────────────────────────

const PRO_FORMSPREE = 'https://formspree.io/f/xvzybjrp';

const ProScreen = ({ navigate }) => {
  const [form, setForm] = useStatePro({
    fullName: '', dob: '',
    email: '', mobile: '',
    resume: null, headshot: null,
    consent: false,
  });
  const [sent, setSent] = useStatePro(false);
  const [submitting, setSubmitting] = useStatePro(false);
  const [error, setError] = useStatePro(null);
  const update = (k) => (v) => setForm(f => ({ ...f, [k]: v }));

  const submit = async (e) => {
    e.preventDefault();
    if (!form.consent || submitting) return;
    setSubmitting(true);
    setError(null);
    try {
      const fd = new FormData();
      fd.append('_subject', `Professional submission · ${form.fullName}`.trim());
      fd.append('_replyto', form.email);
      fd.append('Full name',     form.fullName);
      fd.append('Date of birth', form.dob);
      fd.append('Email',         form.email);
      fd.append('Mobile',        form.mobile);
      fd.append('Consent given', form.consent ? 'Yes' : 'No');
      fd.append('Submitted from', typeof window !== 'undefined' ? window.location.href : '');
      if (form.resume   && form.resume.file)   fd.append('Resume',   form.resume.file,   form.resume.file.name);
      if (form.headshot && form.headshot.file) fd.append('Headshot', form.headshot.file, form.headshot.file.name);

      const res = await fetch(PRO_FORMSPREE, {
        method: 'POST',
        headers: { 'Accept': 'application/json' },
        body: fd,
      });
      if (!res.ok) {
        const data = await res.json().catch(() => ({}));
        throw new Error((data && data.error) || `Submission failed (${res.status}). Please try again or email agency@centrestage.org.au directly.`);
      }
      setSent(true);
    } catch (err) {
      setError(err.message || 'Submission failed. Please try again or email agency@centrestage.org.au.');
    } finally {
      setSubmitting(false);
    }
  };

  if (sent) {
    return (
      <main data-screen-label="Professional · Sent" style={{ background: 'var(--ink)', color: 'var(--paper)', minHeight: '90vh' }}>
        <div style={{ maxWidth: 1600, margin: '0 auto', padding: '120px 48px' }}>
          <div style={{ borderTop: '1px solid var(--hairline-ink)', borderBottom: '1px solid var(--hairline-ink)', padding: '96px 0' }}>
            <Eyebrow style={{ color: 'var(--fg-on-ink-2)' }}>Submission received <Slash color="var(--mid)" /> PRO-{Math.floor(Math.random()*9000 + 1000)}</Eyebrow>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(56px, 9vw, 120px)', letterSpacing: '-0.035em', lineHeight: 0.9, margin: '24px 0 32px', color: 'var(--paper)', textWrap: 'balance' }}>
              Thank you.
            </h1>
            <p style={{ fontSize: 21, lineHeight: 1.55, color: 'var(--paper)', maxWidth: '52ch', margin: 0 }}>
              We read every submission. If your materials match a current opportunity on the books, we will be in touch within ten working days.
            </p>
            <div style={{ marginTop: 48 }}>
              <a href="#home" onClick={(e) => { e.preventDefault(); navigate('home'); }}
                 className="cs-btn"
                 style={{ background: 'var(--paper)', color: 'var(--ink)', border: '1px solid var(--paper)' }}>
                Back to home <span style={{ marginLeft: 8 }}>→</span>
              </a>
            </div>
          </div>
        </div>
      </main>
    );
  }

  const ready = form.fullName && form.email && form.consent;

  return (
    <main data-screen-label="Professional Sign-up">
      {/* Hero — ink */}
      <section style={{ background: 'var(--ink)', color: 'var(--paper)' }}>
        <div style={{ maxWidth: 1600, margin: '0 auto', padding: '64px 48px 96px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 48 }}>
            <Eyebrow style={{ color: 'var(--fg-on-ink-2)' }}>Professional representation <Slash color="var(--mid)" /> Ages 17+</Eyebrow>
            <div style={{ flex: 1, height: 1, background: 'var(--hairline-ink)' }} />
            <span className="cs-mono" style={{ color: 'var(--fg-on-ink-2)' }}>PRO / 2026</span>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.5fr) minmax(220px, 1fr)', gap: 80, alignItems: 'flex-end' }}>
            <h1 style={{
              fontFamily: 'var(--font-display)', fontWeight: 900,
              fontSize: 'clamp(40px, 6.5vw, 120px)', letterSpacing: '-0.035em', lineHeight: 0.92,
              margin: 0, color: 'var(--paper)', textWrap: 'balance', minWidth: 0,
            }}>
              Professional<br/>representation.<br/>Submit your<br/>materials.
            </h1>
            <Portrait src={window.CS_DATA.images.proFeature} ratio="3 / 4" treatment="mono"
              label="Professional roster" code="PRO" />
          </div>

          <div style={{ marginTop: 64, display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80, alignItems: 'flex-end' }}>
            <p data-ee="standard" style={{ fontSize: 19, lineHeight: 1.55, color: 'var(--paper)', margin: 0, maxWidth: '52ch' }}>
              For working actors, musical theatre performers, commercial talent, voice artists, presenters and stage practitioners aged seventeen and over. CentreStage Agency is built on trust and honest representation, clear in our expectations, and committed to championing distinctive talent with professionalism, care and ambition.
            </p>
            <div data-ee="easy" style={{ maxWidth: '50ch', display: 'flex', flexDirection: 'column', gap: 14 }}>
              <p style={{ fontSize: 20, lineHeight: 1.5, color: 'var(--paper)', margin: 0 }}>
                For performers aged 17 and over.
              </p>
              <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--paper)', margin: 0 }}>
                You need to be ready to work. You need to be ready to do auditions. We will help you find good jobs.
              </p>
              <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--paper)', margin: 0 }}>
                We are careful about who we work with. We treat everyone with respect.
              </p>
            </div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--fg-on-ink-2)', lineHeight: 1.7, letterSpacing: '0.02em', textAlign: 'right' }}>
              <div>Submissions open year-round</div>
              <div>Review window <span style={{ color: 'var(--paper)' }}>10 working days</span></div>
              <div>We respond only to selected submissions</div>
              <div>Resume and current headshot required</div>
            </div>
          </div>
        </div>
      </section>

      {/* Requirements bar */}
      <section style={{ borderBottom: '1px solid var(--hairline)', background: 'var(--paper-deep)' }}>
        <div style={{ maxWidth: 1600, margin: '0 auto', padding: '48px 48px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0 }}>
            {[
              { n: '01', l: 'Resume',   d: 'PDF · current within 12 months' },
              { n: '02', l: 'Headshot', d: 'JPG or PNG · within last 18 months' },
              { n: '03', l: 'Age',      d: '17 years and over' },
              { n: '04', l: 'Format',   d: 'No agencies or third parties' },
            ].map((r, i) => (
              <div key={r.n} style={{
                paddingLeft: i === 0 ? 0 : 28,
                paddingRight: 28,
                borderLeft: i === 0 ? '0' : '1px solid var(--hairline)',
                display: 'flex', flexDirection: 'column', gap: 6,
              }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--mid)', letterSpacing: '0.08em' }}>REQ {r.n}</div>
                <div style={{ fontFamily: 'var(--font-sans)', fontSize: 17, fontWeight: 700, letterSpacing: '-0.01em' }}>{r.l}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--mid)', letterSpacing: '0.02em' }}>{r.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Editorial portrait band */}
      <section style={{ background: 'var(--ink)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1, background: 'var(--hairline-ink)' }}>
          {window.CS_DATA.images.portraits.slice(6, 10).map((p, i) => (
            <Portrait key={i} src={p.url} ratio="3 / 4" treatment={['cool','mono','deep','warm'][i % 4]}
              label={['SCREEN','STAGE','VOICE','COMMERCIAL'][i]}
              code={`PRO / 0${i + 1}`} />
          ))}
        </div>
      </section>

      {/* What representation looks like */}
      <section style={{ maxWidth: 1600, margin: '0 auto', padding: '144px 48px 96px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 64, alignItems: 'flex-start', marginBottom: 64 }}>
          <Eyebrow style={{ color: 'var(--mid)' }}>What representation looks like</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 900,
            fontSize: 'clamp(36px, 5vw, 72px)', letterSpacing: '-0.025em', lineHeight: 0.98,
            margin: 0, textWrap: 'balance',
          }}>
            Working representation. Real briefs. Honest feedback.
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'flex-start' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            <p style={{ fontSize: 18, lineHeight: 1.65, color: 'var(--ink)', margin: 0 }}>
              CentreStage Agency represents working actors, musical theatre performers, commercial talent, voice artists, presenters and stage practitioners across Australia. As a proud MEAA-member agency, we operate to recognised industry standards — negotiating fair contracts, advocating for our talent on set, and providing the consistent professional support that builds careers over years, not weeks.
            </p>
            <p style={{ fontSize: 18, lineHeight: 1.65, color: 'var(--ink)', margin: 0 }}>
              Every brief that lands on our desk is read by a human. We submit talent who fit the call, not the full roster, and we provide context, coaching and self-tape support when it counts. From feature film casting and prime-time television to national commercial campaigns, stage productions and voice work, our talent are prepared to step into auditions ready to work.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            <p style={{ fontSize: 18, lineHeight: 1.65, color: 'var(--ink)', margin: 0 }}>
              Our professional roster spans Melbourne, Sydney, Brisbane, Geelong, Ballarat, Newcastle and beyond — because distinctive Australian talent does not live exclusively in one postcode. We actively represent performers from regional communities alongside capital-city talent, and we believe inclusive representation strengthens every project we help cast.
            </p>
            <p style={{ fontSize: 18, lineHeight: 1.65, color: 'var(--ink)', margin: 0 }}>
              Day to day, that means dedicated submissions, written audition briefs, contract negotiation in line with MEAA performer rates, on-set support where required, and the kind of frank career conversations that working actors actually need. We say so when something is right. We say so when it isn’t. We treat your career as a long arc, not a single booking.
            </p>
          </div>
        </div>
      </section>

      {/* Fee structure */}
      <section style={{ background: 'var(--paper-deep)', borderTop: '1px solid var(--hairline)', borderBottom: '1px solid var(--hairline)' }}>
        <div style={{ maxWidth: 1600, margin: '0 auto', padding: '96px 48px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 64, alignItems: 'flex-start', marginBottom: 56 }}>
            <Eyebrow style={{ color: 'var(--mid)' }}>Professional fee structure</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontWeight: 900,
              fontSize: 'clamp(36px, 5vw, 72px)', letterSpacing: '-0.025em', lineHeight: 0.98,
              margin: 0, textWrap: 'balance',
            }}>
              No joining fee. Commission only on confirmed work.
            </h2>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: '1px solid var(--ink)' }}>
            {[
              {
                tag: 'Joining fee',
                price: '$0',
                unit: 'No upfront cost',
                note: 'There is no registration, signing or annual fee for our professional roster. We never charge talent to consider representation.',
                highlight: true,
              },
              {
                tag: 'Commission',
                price: '10%',
                unit: 'on confirmed paid work',
                note: 'In line with MEAA guidelines. Below the Australian industry average. Commission is paid only on income the agency secures — no work, no commission.',
                highlight: false,
              },
              {
                tag: 'Materials',
                price: 'You provide',
                unit: 'Headshot · resume',
                note: 'Professional talent supply their own current headshots and resume. We guide you on industry standards and refresh recommendations as careers develop.',
                highlight: false,
              },
            ].map((f, i) => (
              <div key={f.tag} style={{
                padding: '40px 32px',
                borderLeft: i === 0 ? '0' : '1px solid var(--ink)',
                display: 'flex', flexDirection: 'column', gap: 16,
                background: f.highlight ? 'var(--spotlight)' : 'transparent',
              }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--ink)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>{f.tag}</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
                  <span style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(40px, 5vw, 72px)', letterSpacing: '-0.03em', lineHeight: 1, color: 'var(--ink)' }}>{f.price}</span>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--ink-70)', letterSpacing: '0.04em' }}>{f.unit}</span>
                </div>
                <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--ink)', margin: 0 }}>{f.note}</p>
              </div>
            ))}
          </div>

          <p style={{ marginTop: 28, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--mid)', letterSpacing: '0.02em', lineHeight: 1.6, maxWidth: '90ch' }}>
            CentreStage Agency is a proud MEAA (Media, Entertainment & Arts Alliance) member. Our commission rates sit at or below the Australian industry average, reflecting our commitment to placing performers at the heart of everything we do.
          </p>
        </div>
      </section>

      {/* Form */}
      <section style={{ maxWidth: 1600, margin: '0 auto', padding: '144px 48px' }}>
        <div style={{ marginBottom: 72, display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 64, alignItems: 'flex-start' }}>
          <Eyebrow style={{ color: 'var(--mid)' }}>Begin submission</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 900,
            fontSize: 'clamp(44px, 6vw, 88px)', letterSpacing: '-0.03em', lineHeight: 0.95,
            margin: 0, textWrap: 'balance',
          }}>
            Four sections. Materials at the centre.
          </h2>
        </div>
        <form onSubmit={submit} noValidate>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 96 }}>

            <FormSection
              index={1}
              title="Identification."
              intro="Your name and date of birth as they would appear on a contract."
            >
              <TextField
                label="Full name" name="fullName" required
                placeholder="Given and family name"
                value={form.fullName} onChange={update('fullName')}
                autoComplete="name"
              />
              <DOBField
                label="Date of birth" name="dob" required hint="17 years and over"
                value={form.dob} onChange={update('dob')}
              />
            </FormSection>

            <Hairline />

            <FormSection
              index={2}
              title="Direct contact."
              intro="Best email and phone for casting communication."
            >
              <TextField
                label="Email" name="email" type="email" required
                placeholder="you@example.com"
                value={form.email} onChange={update('email')}
                autoComplete="email"
              />
              <TextField
                label="Mobile" name="mobile" type="tel" required
                placeholder="+61 4 0000 0000"
                value={form.mobile} onChange={update('mobile')}
                autoComplete="tel"
              />
            </FormSection>

            <Hairline />

            <FormSection
              index={3}
              title="Materials."
              intro="A current resume and a recent headshot. We do not accept third-party links in place of files."
            >
              <FileUpload
                label="Resume" name="resume" required accept=".pdf,.doc,.docx"
                hint="PDF, DOC, DOCX · max 8 MB"
                value={form.resume} onChange={update('resume')}
              />
              <FileUpload
                label="Headshot" name="headshot" required accept="image/*"
                hint="JPG, PNG · max 8 MB"
                value={form.headshot} onChange={update('headshot')}
              />
            </FormSection>

            <Hairline />

            <FormSection
              index={4}
              title="Submit."
              intro="By submitting you confirm the information is accurate and the materials are your own."
            >
              <ConsentCheckbox
                value={form.consent} onChange={update('consent')}
                label={(
                  <span>
                    I confirm that I am seventeen years of age or older, the materials submitted are my own, and I consent to CentreStage retaining them for review.{' '}
                    <span style={{ color: 'var(--mid)' }}>We hold submissions for six months unless invited to the roster.</span>
                  </span>
                )}
              />
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap', paddingTop: 12 }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--mid)', letterSpacing: '0.04em' }}>
                  {error
                    ? <span style={{ color: '#A8362A' }}>{error}</span>
                    : 'Reference number issued on submission.'}
                </div>
                <button type="submit" className="cs-btn"
                  style={{ opacity: (ready && !submitting) ? 1 : 0.4, pointerEvents: (ready && !submitting) ? 'auto' : 'none' }}>
                  {submitting ? 'Sending…' : 'Submit professional materials'} <span style={{ marginLeft: 8 }}>→</span>
                </button>
              </div>
            </FormSection>

          </div>
        </form>
      </section>
    </main>
  );
};

Object.assign(window, { ProScreen });