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

// ─────────────────────────────────────────────────────────────
// YOUTH REPRESENTATION (Ages 4–16) — simplified sign-up
// ─────────────────────────────────────────────────────────────

const YOUTH_FORMSPREE = 'https://formspree.io/f/xzdwalry';

const YouthScreen = ({ navigate, warmth }) => {
  const [form, setForm] = useStateYouth({
    firstName: '', lastName: '', dob: '', talentEmail: '',
    parentName: '', parentEmail: '', phone: '',
    consent: false,
  });
  const [sent, setSent] = useStateYouth(false);
  const [submitting, setSubmitting] = useStateYouth(false);
  const [error, setError] = useStateYouth(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 res = await fetch(YOUTH_FORMSPREE, {
        method: 'POST',
        headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
        body: JSON.stringify({
          _subject: `Youth representation enquiry · ${form.firstName} ${form.lastName}`.trim(),
          _replyto: form.parentEmail,
          'Talent first name': form.firstName,
          'Talent last name':  form.lastName,
          'Date of birth':     form.dob,
          'Talent email':      form.talentEmail || '(not provided)',
          'Parent or guardian name': form.parentName,
          'Parent email':      form.parentEmail,
          'Phone number':      form.phone,
          'Consent given':     form.consent ? 'Yes' : 'No',
          'Submitted from':    typeof window !== 'undefined' ? window.location.href : '',
        }),
      });
      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);
    }
  };

  const warm = warmth !== 'austere';
  const accentBg = warm ? 'var(--spotlight)' : 'var(--paper-deep)';
  const introBg  = 'var(--paper-deep)';

  if (sent) {
    return (
      <main data-screen-label="Youth · Sent" style={{ maxWidth: 1600, margin: '0 auto', padding: '120px 48px', minHeight: '70vh' }}>
        <div style={{ borderTop: '1px solid var(--hairline)', borderBottom: '1px solid var(--hairline)', padding: '96px 0' }}>
          <Eyebrow style={{ color: 'var(--mid)' }}>Enquiry received <Slash /> reference YTH-{Math.floor(Math.random()*9000 + 1000)}</Eyebrow>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(56px, 9vw, 128px)', letterSpacing: '-0.035em', lineHeight: 0.9, margin: '24px 0 32px', textWrap: 'balance' }}>
            Thank you.
          </h1>
          <p style={{ fontSize: 21, lineHeight: 1.55, color: 'var(--ink)', maxWidth: '54ch', margin: 0 }}>
            We have received your enquiry regarding representation for {form.firstName || 'your child'}{form.lastName ? ` ${form.lastName}` : ''}. Our Youth Representation Lead will be in touch within two working days to arrange an introductory meeting.
          </p>
          <div style={{ marginTop: 48 }}>
            <Button onClick={(e) => { e.preventDefault(); navigate('home'); }}>Back to home</Button>
          </div>
        </div>
      </main>
    );
  }

  return (
    <main data-screen-label="Youth Sign-up">
      {/* Hero band */}
      <section style={{ background: accentBg, borderBottom: '1px solid var(--hairline)' }}>
        <div style={{ maxWidth: 1600, margin: '0 auto', padding: '64px 48px 80px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 48 }}>
            <Eyebrow style={{ color: 'var(--ink)' }}>Youth Representation <Slash color="var(--ink-70)" /> Ages 4 – 16</Eyebrow>
            <div style={{ flex: 1, height: 1, background: 'var(--ink)' }} />
            <span className="cs-mono" style={{ color: 'var(--ink-70)' }}>YTH / 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(--ink)', textWrap: 'balance', minWidth: 0,
            }}>
              Representation<br/>for young<br/>performers.
            </h1>
            <Portrait src="assets/talent/youth-duo-yellow.jpg" ratio="3 / 4" treatment="warm"
              label="Youth roster" code="YTH" />
          </div>

          <div style={{ marginTop: 64, display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80, alignItems: 'flex-start' }}>
            <p data-ee="standard" style={{ fontSize: 21, lineHeight: 1.5, color: 'var(--ink)', margin: 0, maxWidth: '50ch' }}>
              CentreStage represents children and young people across screen, stage, musical theatre, commercial and voice work. We partner with parents and guardians throughout, with a focus on industry-readiness, professional standards, and the wellbeing of every young performer on our books.
            </p>
            <div data-ee="easy" style={{ maxWidth: '46ch', display: 'flex', flexDirection: 'column', gap: 14 }}>
              <p style={{ fontSize: 20, lineHeight: 1.5, color: 'var(--ink)', margin: 0 }}>
                We work with children aged 4 to 16.
              </p>
              <p style={{ fontSize: 18, lineHeight: 1.55, color: 'var(--ink)', margin: 0 }}>
                We help them get work in TV, films, plays, ads, and voice jobs.
              </p>
              <p style={{ fontSize: 18, lineHeight: 1.55, color: 'var(--ink)', margin: 0 }}>
                We always work with the parent or carer. We keep the child safe.
              </p>
            </div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--ink-70)', lineHeight: 1.7, letterSpacing: '0.02em' }}>
              <div>Ages four through sixteen</div>
              <div>Response within <span style={{ color: 'var(--ink)' }}>two working days</span></div>
              <div>Parent or guardian leads the enquiry</div>
              <div>We never publish information about minors</div>
            </div>
          </div>
        </div>
      </section>

      {/* What happens next */}
      <section style={{ background: introBg, borderBottom: '1px solid var(--hairline)' }}>
        <div style={{ maxWidth: 1600, margin: '0 auto', padding: '64px 48px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0 }}>
            {[
              { n: '01', t: 'Enquiry received', d: 'A short form. We review every enquiry.' },
              { n: '02', t: 'Introductory call', d: 'A direct conversation with our Youth Representation Lead.' },
              { n: '03', t: 'In-person meeting', d: 'You and your child meet the team. Honest expectations.' },
              { n: '04', t: 'A clear decision',  d: 'Yes when the fit is right. No when it isn’t.' },
            ].map((s, i) => (
              <div key={s.n} style={{
                paddingLeft: i === 0 ? 0 : 28,
                paddingRight: 28,
                borderLeft: i === 0 ? '0' : '1px solid var(--hairline-ink)',
                display: 'flex', flexDirection: 'column', gap: 8,
              }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--ink-70)', letterSpacing: '0.08em' }}>STEP {s.n}</div>
                <div style={{ fontFamily: 'var(--font-sans)', fontSize: 17, fontWeight: 700, letterSpacing: '-0.01em' }}>{s.t}</div>
                <div style={{ fontFamily: 'var(--font-sans)', fontSize: 14, lineHeight: 1.5, color: 'var(--ink-70)' }}>{s.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

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

      {/* Opportunities */}
      <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 opens up</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 900,
            fontSize: 'clamp(40px, 6vw, 88px)', letterSpacing: '-0.03em', lineHeight: 0.95,
            margin: 0, textWrap: 'balance',
          }}>
            Real opportunities, across Australia.
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: '1px solid var(--hairline)' }}>
          {[
            {
              n: '01', t: 'Screen',
              d: 'Film, television, streaming series, TV commercials and short-form digital. From background roles to featured and lead casting.',
              tags: ['Feature film', 'TV drama', 'Streaming', 'Commercials'],
            },
            {
              n: '02', t: 'Stage & musical theatre',
              d: 'Theatre productions, musical theatre, ensemble and principal roles — from regional Victorian seasons to national tours.',
              tags: ['Musical theatre', 'Ensemble', 'Principal roles', 'Tours'],
            },
            {
              n: '03', t: 'Live & commercial',
              d: 'Print and digital campaigns, brand work, live performance and voice projects — ongoing brand partnerships where the fit is right.',
              tags: ['Print', 'Voice', 'Brand', 'Live'],
            },
          ].map((s, i) => (
            <div key={s.n} style={{
              padding: '40px 32px',
              borderLeft: i === 0 ? '0' : '1px solid var(--hairline)',
              display: 'flex', flexDirection: 'column', gap: 20,
            }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--mid)', letterSpacing: '0.08em' }}>{s.n} / 03</div>
              <h4 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 32, letterSpacing: '-0.02em', lineHeight: 1, margin: 0 }}>{s.t}</h4>
              <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--ink)', margin: 0 }}>{s.d}</p>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 'auto', paddingTop: 12 }}>
                {s.tags.map(t => (
                  <span key={t} style={{
                    padding: '4px 10px', border: '1px solid var(--hairline)',
                    fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--mid)',
                    letterSpacing: '0.06em', textTransform: 'uppercase', whiteSpace: 'nowrap',
                  }}>{t}</span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* How we support */}
      <section 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)' }}>How we support you</Eyebrow>
          <p style={{
            fontFamily: 'var(--font-display)', fontWeight: 900,
            fontSize: 'clamp(28px, 3.6vw, 48px)', letterSpacing: '-0.02em', lineHeight: 1.1,
            margin: 0, textWrap: 'balance',
          }}>
            Industry-ready, never industry-pressured. We take young performers seriously, and we take their wellbeing more seriously again.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0, borderTop: '1px solid var(--hairline)' }}>
          {[
            { n: '01', t: 'Audition & self-tape coaching',  d: 'We help your child prepare scripts, sides, and self-tapes — with feedback that builds skill rather than pressure.' },
            { n: '02', t: 'Professional onboarding',         d: 'Profile setup, training in industry etiquette, and a clear walkthrough of what each opportunity looks like in practice.' },
            { n: '03', t: 'Family liaison',                  d: 'Every brief comes through us, in writing, with timelines and expectations — so parents stay informed and in control.' },
            { n: '04', t: 'Annual professional headshots',   d: 'Included in your membership for Victoria-based talent. Refreshed yearly as your child grows.' },
            { n: '05', t: 'Behind-the-scenes resource lab',  d: 'Access to our online resource lab — audition tips, industry reading, contract explainers and ongoing development.' },
            { n: '06', t: 'Honest, ongoing advice',          d: 'We tell you when something is right for your child and when it isn’t. We treat the work as a long career, not a single booking.' },
          ].map((s, i) => (
            <div key={s.n} style={{
              padding: '36px 32px',
              borderRight: i % 2 === 0 ? '1px solid var(--hairline)' : '0',
              borderBottom: '1px solid var(--hairline)',
              display: 'flex', flexDirection: 'column', gap: 12,
            }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--mid)', letterSpacing: '0.08em' }}>{s.n}</div>
              <h4 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 22, letterSpacing: '-0.01em', lineHeight: 1.1, margin: 0 }}>{s.t}</h4>
              <p style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--ink)', margin: 0, maxWidth: '46ch' }}>{s.d}</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)' }}>Youth 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',
            }}>
              Transparent, written down, and explained out loud before you sign.
            </h2>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: '1px solid var(--ink)' }}>
            {[
              {
                tag: 'Annual membership',
                price: '$245',
                unit: '+ GST / year',
                note: 'Onboarding, profile management, annual professional headshots*, and access to our behind-the-scenes resource lab.',
              },
              {
                tag: 'Commission',
                price: '10%',
                unit: 'on confirmed paid work',
                note: 'Standard industry commission on income the agency secures for your child. No work, no commission.',
              },
              {
                tag: 'Management fee',
                price: '10%',
                unit: 'on confirmed paid work',
                note: 'Covers the day-to-day management of each booking — contracts, scheduling, on-set liaison, payment follow-up.',
              },
            ].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: i === 0 ? '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(48px, 6vw, 80px)', 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' }}>
            * Our annual membership is approximately <span style={{ color: 'var(--ink)' }}>40% less than the Australian industry average</span>, and our commission rates sit <span style={{ color: 'var(--ink)' }}>below industry standards</span>. We follow MEAA guidelines and place performers at the heart of everything we do. Annual professional headshots are included for Victoria-based talent. Talent based outside Victoria can access our headshot program at cost during a scheduled CentreStage shoot day, or arrange their own. Membership renews annually; commission and management fees apply only to confirmed and paid bookings the agency secures.
          </p>
        </div>
      </section>

      {/* Form */}
      <section style={{ maxWidth: 1600, margin: '0 auto', padding: '144px 48px' }}>
        <div style={{ marginBottom: 64, display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 64, alignItems: 'flex-start' }}>
          <Eyebrow style={{ color: 'var(--mid)' }}>Begin enquiry</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 900,
            fontSize: 'clamp(40px, 5.5vw, 80px)', letterSpacing: '-0.03em', lineHeight: 0.95,
            margin: 0, textWrap: 'balance',
          }}>
            Register your interest in under two minutes.
          </h2>
        </div>

        <form onSubmit={submit} noValidate>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 72 }}>

            <FormSection
              index={1}
              title="The performer."
              intro="Your child’s name as it would appear on a contract, with their date of birth and an email if they have one."
            >
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28 }}>
                <TextField
                  label="First name" name="firstName" required
                  placeholder="e.g. Mia" autoComplete="off"
                  value={form.firstName} onChange={update('firstName')}
                />
                <TextField
                  label="Last name" name="lastName" required
                  placeholder="e.g. Karaman" autoComplete="off"
                  value={form.lastName} onChange={update('lastName')}
                />
              </div>
              <DOBField
                label="Date of birth" name="dob" required hint="Ages 4–16"
                value={form.dob} onChange={update('dob')}
              />
              <TextField
                label="Email address" name="talentEmail" type="email"
                placeholder="If your child has one" hint="Optional"
                value={form.talentEmail} onChange={update('talentEmail')}
                autoComplete="off"
              />
            </FormSection>

            <Hairline />

            <FormSection
              index={2}
              title="Parent or guardian."
              intro="Best name and contact for representation communication."
            >
              <TextField
                label="Parent or guardian name" name="parentName" required
                placeholder="Your full name"
                value={form.parentName} onChange={update('parentName')}
                autoComplete="name"
              />
              <TextField
                label="Parent email" name="parentEmail" type="email" required
                placeholder="you@example.com"
                value={form.parentEmail} onChange={update('parentEmail')}
                autoComplete="email"
              />
              <TextField
                label="Phone number" name="phone" type="tel" required
                placeholder="+61 4 0000 0000"
                value={form.phone} onChange={update('phone')}
                autoComplete="tel"
              />
            </FormSection>

            <Hairline />

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 64, alignItems: 'flex-start' }}>
              <div />
              <div>
                <ConsentCheckbox
                  value={form.consent} onChange={update('consent')}
                  label={(
                    <span>
                      I am the parent or guardian of {form.firstName || 'this performer'} and consent to CentreStage Agency contacting me regarding representation.{' '}
                      <span style={{ color: 'var(--mid)' }}>We never publish or share information about minors without explicit written permission.</span>
                    </span>
                  )}
                />
              </div>
            </div>

            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 24, paddingTop: 24, borderTop: '1px solid var(--hairline)' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--mid)', letterSpacing: '0.04em', maxWidth: '50ch' }}>
                {error
                  ? <span style={{ color: '#A8362A' }}>{error}</span>
                  : 'We respond within two working days. Materials are retained only for review and not shared with third parties.'}
              </div>
              <button type="submit" className="cs-btn"
                style={{ opacity: (form.consent && !submitting) ? 1 : 0.4, pointerEvents: (form.consent && !submitting) ? 'auto' : 'none' }}>
                {submitting ? 'Sending…' : 'Submit youth enquiry'} <span style={{ marginLeft: 8 }}>→</span>
              </button>
            </div>
          </div>
        </form>
      </section>
    </main>
  );
};

Object.assign(window, { YouthScreen });
