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

// ─────────────────────────────────────────────────────────────
// PAY GUIDE TOOL — indicative AUD pay-rate guidance for performers
// & producers, based on MEAA guidance + Live Performance Award
// [MA000081]. Guidance only — not advice. Leads are emailed via
// Formspree (same pattern as the other forms on the site).
//
// ⚠️ Keep RATES current: update after each Annual Wage Review
//    (effective 1 July). low/high = indicative ordinary AUD hourly.
// ─────────────────────────────────────────────────────────────

const PAYTOOL_FORMSPREE = 'https://formspree.io/f/xkoavzzr'; // dedicated Pay Guide inbox

const PAY_RATES = {
  effectiveLabel: 'Rates effective 1 July 2025 (indicative)',
  superRate: 0.12,
  casualLoading: 0.25,
  overtime: { firstHours: 2, firstMult: 1.5, afterMult: 2.0 },
  experience: {
    emerging:    { label: 'Emerging — under 2 years', mult: 1.00 },
    established: { label: 'Established — 2 to 5 years', mult: 1.15 },
    experienced: { label: 'Experienced — 5+ years',    mult: 1.35 },
  },
  industries: {
    theatre: {
      label: 'Theatre & Live Performance',
      source: 'Live Performance Award [MA000081] / MEAA',
      sourceUrl: 'https://www.fairwork.gov.au/employment-conditions/awards/awards-summary/ma000081-summary',
      note: 'Based on the Live Performance Award. Weekly/season engagements, penalty rates for evenings, weekends and public holidays, and tour allowances may apply on top of these hourly figures.',
      roles: {
        actor:    { label: 'Actor / Performer',   low: 32, high: 55 },
        ensemble: { label: 'Ensemble / Chorus',   low: 30, high: 46 },
        dancer:   { label: 'Dancer',              low: 31, high: 50 },
        singer:   { label: 'Singer / Musician',   low: 33, high: 55 },
        stagemgr: { label: 'Stage Manager',       low: 34, high: 56 },
        producer: { label: 'Producer / Director', low: 45, high: 90 },
      },
    },
    film: {
      label: 'Film & Television (drama)',
      source: 'MEAA Motion Picture Production Agreement (MPPA) guidance',
      sourceUrl: 'https://www.meaa.org/resources/',
      note: 'Screen drama rates are negotiated minimums that vary by budget, role size and usage. Feature, TV drama and SVOD agreements differ. Loadings, residuals and overtime are commonly negotiated above base.',
      roles: {
        lead:     { label: 'Lead / Principal actor', low: 48, high: 130 },
        support:  { label: 'Supporting actor',       low: 40, high: 85 },
        guest:    { label: 'Guest / Day player',     low: 38, high: 75 },
        extra:    { label: 'Extra / Background',     low: 29, high: 46 },
        stunt:    { label: 'Stunt performer',        low: 55, high: 150 },
        producer: { label: 'Producer',               low: 55, high: 140 },
      },
    },
    commercial: {
      label: 'Commercial / TVC & Advertising',
      source: 'MEAA advertising / commercial guidance',
      sourceUrl: 'https://www.meaa.org/resources/',
      note: 'Commercials carry separate USAGE / BUYOUT fees (by territory, media and term) that are usually far larger than the shoot fee shown here. Treat this as the attendance/session component only.',
      roles: {
        principal: { label: 'Principal (on-camera)', low: 60, high: 220 },
        feature:   { label: 'Featured extra',        low: 40, high: 75 },
        extra:     { label: 'Extra / Background',    low: 35, high: 60 },
        voiceover: { label: 'Voiceover artist',      low: 90, high: 300 },
        hand:      { label: 'Hand / Parts model',    low: 45, high: 110 },
      },
    },
    social: {
      label: 'Social Media Content',
      source: 'Market guidance (no single award)',
      sourceUrl: 'https://www.meaa.org/resources/',
      note: 'Social/UGC work isn\u2019t governed by a single award; rates depend on deliverables, exclusivity, whitelisting and usage term. The range below is the talent/creation fee per the hours entered — licensing is additional.',
      roles: {
        talent:    { label: 'On-screen talent / Creator', low: 45, high: 160 },
        ugc:       { label: 'UGC creator',                low: 35, high: 110 },
        presenter: { label: 'Host / Presenter',           low: 50, high: 180 },
        extra:     { label: 'Background / Supporting',    low: 30, high: 60 },
      },
    },
    adhoc: {
      label: 'Ad-hoc / Casual engagement',
      source: 'General market guidance',
      sourceUrl: 'https://www.meaa.org/resources/',
      note: 'A general guide for one-off or casual creative engagements not covered above. Always confirm the correct award/agreement for the specific work.',
      roles: {
        performer: { label: 'Performer / Entertainer',   low: 35, high: 80 },
        host:      { label: 'MC / Host',                 low: 45, high: 120 },
        promo:     { label: 'Promotional / Brand rep',   low: 32, high: 65 },
        workshop:  { label: 'Workshop / Teaching artist',low: 45, high: 95 },
      },
    },
  },
};

const AU_STATES = ['NSW', 'VIC', 'QLD', 'SA', 'WA', 'TAS', 'NT', 'ACT'];

const payFmt = (n) => '$' + Math.round(n).toLocaleString('en-AU');

// Keyed select styled to match the design system
const PayKeySelect = ({ label, required, hint, value, onChange, options, disabled, placeholder }) => (
  <div>
    <FieldLabel required={required} hint={hint}>{label}</FieldLabel>
    <select
      value={value || ''} disabled={disabled}
      onChange={(e) => onChange(e.target.value)}
      style={{
        width: '100%', height: 44, padding: '0 24px 10px 0',
        background: 'transparent', border: 0, borderBottom: '1px solid var(--ink)',
        fontFamily: 'var(--font-sans)', fontSize: 17, color: value ? 'var(--ink)' : 'var(--mid-soft)',
        borderRadius: 0, outline: 'none', cursor: disabled ? 'not-allowed' : 'pointer',
        opacity: disabled ? 0.45 : 1,
        appearance: 'none', WebkitAppearance: 'none', MozAppearance: 'none',
        backgroundImage: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%230A0A0A' stroke-width='1.5' fill='none' stroke-linecap='square'/></svg>\")",
        backgroundRepeat: 'no-repeat', backgroundPosition: 'right 4px center',
      }}
    >
      <option value="" disabled>{placeholder || 'Select…'}</option>
      {options.map((o) => <option key={o.key} value={o.key}>{o.label}</option>)}
    </select>
  </div>
);

const PayNumberField = ({ label, required, hint, value, onChange, placeholder, min, max, step }) => (
  <div>
    <FieldLabel required={required} hint={hint}>{label}</FieldLabel>
    <input
      className="cs-input" type="number" inputMode="decimal"
      value={value} placeholder={placeholder} min={min} max={max} step={step}
      onChange={(e) => onChange(e.target.value)}
      style={{ padding: '0 0 10px 0', height: 44, fontSize: 17, borderBottom: '1px solid var(--ink)', fontFamily: 'var(--font-mono)' }}
    />
  </div>
);

// Reusable "guidance only" band
const GuidanceBand = ({ heading, children }) => (
  <div style={{ border: '1px solid var(--ink)', padding: '22px 26px' }}>
    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--mid)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 10 }}>
      {heading}
    </div>
    <p style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--ink)', margin: 0, maxWidth: '78ch' }}>
      {children}
    </p>
  </div>
);

// ── compute ───────────────────────────────────────────────────
function payCompute(state) {
  const ind = PAY_RATES.industries[state.industry];
  const role = ind.roles[state.role];
  const exp = PAY_RATES.experience[state.experience];
  const hours = parseFloat(state.hours) || 0;
  const ot = parseFloat(state.overtime || '0') || 0;
  const casual = state.casual;

  const otFirst = Math.min(ot, PAY_RATES.overtime.firstHours);
  const otAfter = Math.max(0, ot - PAY_RATES.overtime.firstHours);
  const otFactor = otFirst * PAY_RATES.overtime.firstMult + otAfter * PAY_RATES.overtime.afterMult;

  const build = (rate) => {
    const ordinary = rate * hours;
    const overtime = rate * otFactor;
    let subtotal = (ordinary + overtime) * exp.mult;
    const loading = casual ? subtotal * PAY_RATES.casualLoading : 0;
    const total = subtotal + loading;
    return { ordinary, overtime, expAdj: (ordinary + overtime) * (exp.mult - 1), loading, total };
  };
  const lo = build(role.low), hi = build(role.high);
  return {
    ind, role, exp, hours, ot, casual, lo, hi,
    superLo: lo.total * PAY_RATES.superRate,
    superHi: hi.total * PAY_RATES.superRate,
    state: state.auState,
  };
}

// ── Result view ───────────────────────────────────────────────
const PayResult = ({ r, onReset, onEmail, emailing, emailed }) => {
  const rows = [];
  rows.push(['Indicative ordinary pay', `${payFmt(r.lo.ordinary)} – ${payFmt(r.hi.ordinary)}`]);
  if (r.ot > 0) rows.push([`Overtime (${r.ot} hr — first ${PAY_RATES.overtime.firstHours} @${PAY_RATES.overtime.firstMult}×, then ${PAY_RATES.overtime.afterMult}×)`, `${payFmt(r.lo.overtime)} – ${payFmt(r.hi.overtime)}`]);
  rows.push([`Experience adjustment (${Math.round((r.exp.mult - 1) * 100)}%)`, `${payFmt(r.lo.expAdj)} – ${payFmt(r.hi.expAdj)}`]);
  if (r.casual) rows.push([`Casual loading (${Math.round(PAY_RATES.casualLoading * 100)}%)`, `${payFmt(r.lo.loading)} – ${payFmt(r.hi.loading)}`]);
  rows.push([`Plus superannuation (${Math.round(PAY_RATES.superRate * 100)}%, on top)`, `${payFmt(r.superLo)} – ${payFmt(r.superHi)}`]);

  return (
    <div style={{ marginTop: 56 }}>
      {/* Estimate card — ink */}
      <div style={{ background: 'var(--ink)', color: 'var(--paper)', padding: '56px 48px' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-on-ink-2)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 14 }}>
          Your indicative guide
        </div>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(40px, 7vw, 84px)', letterSpacing: '-0.03em', lineHeight: 0.95 }}>
          {payFmt(r.lo.total)} <span style={{ color: 'var(--mid-soft)' }}>–</span> {payFmt(r.hi.total)}
          <span style={{ fontSize: '0.32em', fontWeight: 700, color: 'var(--fg-on-ink-2)', letterSpacing: '0.05em', marginLeft: 12 }}>AUD</span>
        </div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--fg-on-ink-2)', letterSpacing: '0.02em', marginTop: 12 }}>
          Estimated total for {r.hours} hr{r.hours == 1 ? '' : 's'}{r.ot ? ` + ${r.ot} OT hr${r.ot == 1 ? '' : 's'}` : ''} — {r.state}
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginTop: 28 }}>
          {[r.role.label, r.ind.label, r.exp.label].map((t) => (
            <span key={t} style={{ display: 'inline-flex', alignItems: 'center', border: '1px solid var(--hairline-ink)', padding: '8px 14px', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--paper)' }}>
              {t}
            </span>
          ))}
        </div>
      </div>

      {/* Breakdown */}
      <div style={{ padding: '48px 0' }}>
        <Eyebrow style={{ color: 'var(--mid)' }}>Breakdown</Eyebrow>
        <div style={{ marginTop: 24, borderTop: '1px solid var(--hairline)' }}>
          {rows.map(([k, v]) => (
            <div key={k} style={{ display: 'flex', justifyContent: 'space-between', gap: 24, padding: '16px 0', borderBottom: '1px solid var(--hairline)' }}>
              <span style={{ fontSize: 15, color: 'var(--ink)', maxWidth: '60ch' }}>{k}</span>
              <span style={{ fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: 15, fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap' }}>{v}</span>
            </div>
          ))}
        </div>
        <p style={{ fontSize: 13.5, color: 'var(--mid)', margin: '20px 0 0', lineHeight: 1.65, maxWidth: '80ch' }}>
          <strong style={{ color: 'var(--ink)' }}>Source basis:</strong> {r.ind.source}. {r.ind.note}{' '}
          <a href={r.ind.sourceUrl} target="_blank" rel="noopener" style={{ color: 'var(--ink)', textDecoration: 'underline', textUnderlineOffset: 3 }}>View source →</a><br/>
          <em>{PAY_RATES.effectiveLabel}. Superannuation is shown in addition to the figures above.</em>
        </p>
      </div>

      <GuidanceBand heading="Remember — guidance only">
        This range is indicative and for guiding purposes only. It is not the opinion of CentreStage Agency and is not a quote. Rates depend on usage, buyouts, the specific production and your individual negotiation. Always confirm against the current MEAA rate card and the relevant award or agreement. CentreStage Agency accepts no legal responsibility for its use.
      </GuidanceBand>

      <div style={{ marginTop: 32, display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
        <Button variant="secondary" onClick={(e) => { e.preventDefault(); onReset(); }}>← Start again</Button>
        {emailed ? (
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--mid)', letterSpacing: '0.02em' }}>
            ✓ Sent to your inbox — we'll be in touch.
          </span>
        ) : (
          <button type="button" onClick={onEmail} className="cs-btn" style={{ opacity: emailing ? 0.5 : 1 }}>
            {emailing ? 'Sending…' : 'Email me this guide'} <span style={{ marginLeft: 8 }}>→</span>
          </button>
        )}
      </div>
    </div>
  );
};

// ── Screen ────────────────────────────────────────────────────
const PayToolScreen = ({ navigate }) => {
  const [form, setForm] = usePayState({
    name: '', email: '', industry: '', role: '', auState: '',
    experience: '', hours: '', overtime: '0', casual: false, ack: false,
  });
  const [result, setResult] = usePayState(null);
  const [error, setError] = usePayState(null);
  const [emailing, setEmailing] = usePayState(false);
  const [emailed, setEmailed] = usePayState(false);

  const up = (k) => (v) => setForm((f) => ({ ...f, [k]: v }));

  const industryOptions = Object.entries(PAY_RATES.industries).map(([key, ind]) => ({ key, label: ind.label }));
  const roleOptions = form.industry
    ? Object.entries(PAY_RATES.industries[form.industry].roles).map(([key, r]) => ({ key, label: r.label }))
    : [];
  const expOptions = Object.entries(PAY_RATES.experience).map(([key, e]) => ({ key, label: e.label }));
  const stateOptions = AU_STATES.map((s) => ({ key: s, label: s }));

  const emailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.trim());
  const hoursNum = parseFloat(form.hours);
  const otNum = parseFloat(form.overtime || '0');

  const setIndustry = (v) => setForm((f) => ({ ...f, industry: v, role: '' }));

  async function sendLead(r, stage) {
    if (!PAYTOOL_FORMSPREE || PAYTOOL_FORMSPREE.includes('YOUR_FORM_ID')) return;
    try {
      await fetch(PAYTOOL_FORMSPREE, {
        method: 'POST',
        headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
        body: JSON.stringify({
          _subject: `Pay Guide lead · ${form.name}`,
          _replyto: form.email,
          stage,
          Name: form.name,
          Email: form.email,
          Industry: r.ind.label,
          Role: r.role.label,
          State: r.state,
          Experience: r.exp.label,
          Hours: r.hours,
          Overtime: r.ot,
          Casual: r.casual ? 'Yes' : 'No',
          'Estimate (AUD)': `${payFmt(r.lo.total)} – ${payFmt(r.hi.total)}`,
          'Super (AUD)': `${payFmt(r.superLo)} – ${payFmt(r.superHi)}`,
          'Submitted from': typeof window !== 'undefined' ? window.location.href : '',
        }),
      });
    } catch (err) { /* fail silently — result already shown */ }
  }

  const submit = (e) => {
    e.preventDefault();
    setError(null);
    if (!form.name.trim()) return setError('Please enter your name to continue.');
    if (!emailValid) return setError('Please enter a valid email address to continue.');
    if (!form.industry) return setError('Please choose an industry / work type.');
    if (!form.role) return setError('Please choose your role.');
    if (!form.auState) return setError('Please choose your state or territory.');
    if (!form.experience) return setError('Please choose your experience level.');
    if (isNaN(hoursNum) || hoursNum < 0 || hoursNum > 80) return setError('Please enter ordinary hours between 0 and 80.');
    if (isNaN(otNum) || otNum < 0 || otNum > 40) return setError('Please enter valid overtime hours (0–40).');
    if (!form.ack) return setError('Please tick the acknowledgement box to continue.');

    const r = payCompute(form);
    setResult(r);
    setEmailed(false);
    sendLead(r, 'calculated');
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const emailGuide = async () => {
    if (!result || emailing) return;
    setEmailing(true);
    await sendLead(result, 'requested email');
    setEmailing(false);
    setEmailed(true);
  };

  const reset = () => {
    setForm({ name: '', email: '', industry: '', role: '', auState: '', experience: '', hours: '', overtime: '0', casual: false, ack: false });
    setResult(null); setError(null); setEmailed(false);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  // ── Result screen ──
  if (result) {
    return (
      <main data-screen-label="Pay Guide · Result" style={{ maxWidth: 1100, margin: '0 auto', padding: '56px 48px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 8 }}>
          <Eyebrow style={{ color: 'var(--mid)' }}>Actors Toolkit <Slash /> Pay Guide</Eyebrow>
          <div style={{ flex: 1, height: 1, background: 'var(--hairline)' }} />
        </div>
        <PayResult r={result} onReset={reset} onEmail={emailGuide} emailing={emailing} emailed={emailed} />

        {/* Agent CTA */}
        <div style={{ margin: '48px 0 96px', background: 'var(--ink)', color: 'var(--paper)', padding: '48px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 32, flexWrap: 'wrap' }}>
          <div style={{ maxWidth: '52ch' }}>
            <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(28px, 3.5vw, 44px)', letterSpacing: '-0.02em', lineHeight: 1, margin: '0 0 12px' }}>
              Need an agent?
            </h3>
            <p style={{ fontSize: 16, lineHeight: 1.55, color: 'var(--fg-on-ink-2)', margin: 0 }}>
              CentreStage Agency represents performers across stage, screen, commercial and live performance — from emerging to established talent, in capital cities and regional communities alike. If you'd like representation, we'd love to hear from you.
            </p>
          </div>
          <a href={csHref('pro')} onClick={(e) => { e.preventDefault(); navigate('pro'); }} className="cs-btn" style={{ background: 'var(--paper)', color: 'var(--ink)', border: '1px solid var(--paper)' }}>
            Enquire about representation <span style={{ marginLeft: 8 }}>→</span>
          </a>
        </div>
      </main>
    );
  }

  // ── Form screen ──
  return (
    <main data-screen-label="Pay Guide">
      {/* Hero */}
      <section style={{ maxWidth: 1600, margin: '0 auto', padding: '56px 48px 96px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 48 }}>
          <Eyebrow style={{ color: 'var(--mid)' }}>Free tool <Slash /> Performer &amp; producer pay</Eyebrow>
          <div style={{ flex: 1, height: 1, background: 'var(--hairline)' }} />
          <span className="cs-mono" style={{ color: 'var(--mid)' }}>MEAA &amp; MA000081</span>
        </div>

        <h1 style={{
          fontFamily: 'var(--font-display)', fontWeight: 900,
          fontSize: 'clamp(48px, 8vw, 132px)', letterSpacing: '-0.035em', lineHeight: 0.9,
          margin: 0, color: 'var(--ink)', textWrap: 'balance',
        }}>
          Know what you<br/>should be paid.
        </h1>

        <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 64, alignItems: 'flex-end' }}>
          <p style={{ fontSize: 21, lineHeight: 1.5, color: 'var(--ink)', margin: 0, maxWidth: '54ch' }}>
            A quick, indicative guide to fair pay for actors, performers and producers across film, commercial, theatre, social media and ad-hoc work — drawing on <strong>MEAA</strong> pay guidance and the <strong>Live Performance Award</strong>. Answer a few questions to see an estimated rate range in Australian dollars.
          </p>
          <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
            <Button href="#pay" onClick={(e) => { e.preventDefault(); document.getElementById('pay-form')?.scrollIntoView({ behavior: 'smooth' }); }}>
              Calculate my rate · free
            </Button>
          </div>
        </div>

        <div style={{ marginTop: 40 }}>
          <GuidanceBand heading="Guidance only — not advice">
            The ranges shown are general guidance for orientation only. They are <em>not</em> the opinion or recommendation of CentreStage Agency, are not a quote, and do not constitute legal, financial or industrial advice. Always check the current MEAA rate cards and the relevant Modern Award or Agreement for your engagement. CentreStage Agency accepts no legal responsibility or liability for decisions made using this tool.
          </GuidanceBand>
        </div>
      </section>

      <Hairline />

      {/* How it works */}
      <section style={{ maxWidth: 1600, margin: '0 auto', padding: '120px 48px' }}>
        <SectionHeader eyebrow="The process" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: '1px solid var(--hairline)' }}>
          {[
            { n: '01', t: 'Describe', d: 'Tell us the industry, your role, state, experience and the hours worked. Takes under a minute.' },
            { n: '02', t: 'Calculate', d: 'We apply indicative MEAA and award-based rates, with overtime, experience and casual loading factored in.' },
            { n: '03', t: 'Compare', d: 'See an estimated AUD range with a transparent breakdown — a fair starting point for your negotiation.' },
          ].map((s, i) => (
            <div key={s.n} style={{ padding: '48px 36px', borderLeft: i === 0 ? '0' : '1px solid var(--hairline)', display: 'flex', flexDirection: 'column', gap: 18 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--mid)', letterSpacing: '0.08em' }}>{s.n} / 03</div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 36, letterSpacing: '-0.02em', lineHeight: 1, margin: 0 }}>{s.t}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--ink)', margin: 0 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Form */}
      <section id="pay-form" style={{ maxWidth: 1100, margin: '0 auto', padding: '0 48px 120px' }}>
        <div style={{ marginBottom: 40 }}>
          <Eyebrow style={{ color: 'var(--mid)' }}>Your guide</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(40px, 6vw, 88px)', letterSpacing: '-0.03em', lineHeight: 0.95, margin: '20px 0 0', textWrap: 'balance' }}>
            Run the numbers.
          </h2>
        </div>

        <form onSubmit={submit} noValidate style={{ display: 'flex', flexDirection: 'column', gap: 40 }}>
          {/* Your details */}
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--mid)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 6 }}>Your details</div>
            <p style={{ fontSize: 14, color: 'var(--mid)', margin: '0 0 24px' }}>We email your guide to you. We never share your details.</p>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28 }}>
              <TextField label="Full name" required placeholder="e.g. Jordan Smith" autoComplete="name" value={form.name} onChange={up('name')} />
              <TextField label="Email address" type="email" required placeholder="you@email.com" autoComplete="email" value={form.email} onChange={up('email')} />
            </div>
          </div>

          <Hairline />

          {/* About the job */}
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--mid)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 6 }}>About the job</div>
            <p style={{ fontSize: 14, color: 'var(--mid)', margin: '0 0 24px' }}>Choose the options that match your role and engagement.</p>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28 }}>
              <PayKeySelect label="Industry / work type" required value={form.industry} onChange={setIndustry} options={industryOptions} />
              <PayKeySelect label="Your role" required value={form.role} onChange={up('role')} options={roleOptions} disabled={!form.industry} placeholder={form.industry ? 'Select…' : 'Select industry first…'} />
              <PayKeySelect label="State / Territory" required value={form.auState} onChange={up('auState')} options={stateOptions} />
              <PayKeySelect label="Years of experience" required value={form.experience} onChange={up('experience')} options={expOptions} />
              <PayNumberField label="Hours worked" required hint="ordinary hours" value={form.hours} onChange={up('hours')} placeholder="e.g. 8" min={0} max={80} step={0.5} />
              <PayNumberField label="Overtime hours" hint="if any" value={form.overtime} onChange={up('overtime')} placeholder="e.g. 2" min={0} max={40} step={0.5} />
            </div>

            <div style={{ marginTop: 28 }}>
              <ConsentCheckbox
                value={form.casual} onChange={up('casual')}
                label={<span>This is a <strong>casual</strong> engagement (applies an indicative 25% casual loading in lieu of leave entitlements).</span>}
              />
            </div>
          </div>

          <Hairline />

          {/* Acknowledgement */}
          <ConsentCheckbox
            value={form.ack} onChange={up('ack')}
            label={<span><strong>I understand</strong> this tool provides general guidance only, the figures are indicative and not a quote, they are not the opinion of CentreStage Agency, and I should consult the relevant MEAA rate card or Modern Award. CentreStage Agency holds no legal accountability for how I use this information.</span>}
          />

          {error && (
            <div style={{ border: '1px solid var(--ink)', padding: '16px 20px', fontSize: 14, lineHeight: 1.5, color: 'var(--ink)' }}>
              {error}
            </div>
          )}

          <div>
            <button type="submit" className="cs-btn" style={{ width: '100%', justifyContent: 'center', height: 56 }}>
              Calculate my guide rate <span style={{ marginLeft: 10 }}>→</span>
            </button>
          </div>
        </form>
      </section>

      {/* Legal footer band */}
      <section style={{ maxWidth: 1100, margin: '0 auto', padding: '0 48px 120px' }}>
        <Hairline />
        <p style={{ fontSize: 12.5, color: 'var(--mid)', lineHeight: 1.75, margin: '28px 0 0', maxWidth: '92ch' }}>
          <strong style={{ color: 'var(--ink)' }}>Important:</strong> This pay guide tool is provided by CentreStage Agency for general information and orientation only. The estimated ranges are indicative, are not a quote, offer, or recommendation, and are <strong style={{ color: 'var(--ink)' }}>not</strong> the opinion of CentreStage Agency. They do not constitute legal, financial, industrial or taxation advice. Actual entitlements depend on the applicable Modern Award (including the Live Performance Award MA000081), MEAA agreements and rate cards, enterprise agreements, usage and buyout terms, superannuation, and individual negotiation. You must verify any figure against the current official sources before relying on it. To the maximum extent permitted by law, CentreStage Agency accepts no liability or legal accountability for any loss arising from use of this tool.{' '}
          Sources: <a href="https://www.meaa.org/resources/" target="_blank" rel="noopener" style={{ color: 'var(--ink)', textDecoration: 'underline', textUnderlineOffset: 3 }}>MEAA</a> rate guidance &amp; the <a href="https://www.fairwork.gov.au/employment-conditions/awards/awards-summary/ma000081-summary" target="_blank" rel="noopener" style={{ color: 'var(--ink)', textDecoration: 'underline', textUnderlineOffset: 3 }}>Live Performance Award [MA000081]</a>. Figures indicative as at rates effective 1 July 2025.
        </p>
      </section>
    </main>
  );
};

Object.assign(window, { PayToolScreen });
