/* global React */

// ─────────────────────────────────────────────────────────────
// FAQ — Frequently asked questions about talent agencies,
// representation, and the CentreStage approach. Built with
// FAQPage schema.org markup for SEO.
// ─────────────────────────────────────────────────────────────

const FAQ_SECTIONS = [
  {
    title: 'The basics',
    items: [
      {
        q: 'What is a talent agent?',
        a: 'A talent agent is a licensed professional who represents performers and connects them with paid work in screen, stage, commercial and voice industries. Agents negotiate contracts, advocate on behalf of their talent, and act as the point of contact between performers and casting directors, producers, and brands. At CentreStage Agency, our agents work nationally across Australia, representing talent from both capital cities and regional communities.',
      },
      {
        q: 'What does a talent agent do?',
        a: 'A talent agent finds and negotiates work for the performers they represent. Day-to-day this includes reading briefs from casting directors, submitting suitable talent for roles, coordinating self-tapes and auditions, negotiating rates and contracts, providing career advice, and managing the long-term arc of a performer’s career. A good agent answers the phone, gives honest feedback, and treats the work as a long career rather than a single booking.',
      },
      {
        q: 'How does a talent agency work?',
        a: 'A talent agency represents a roster of performers and receives briefs from the industry — casting directors, production companies, brands, and theatre companies — looking for talent for paid projects. The agency submits suitable performers for each brief, supports them through auditions, and negotiates the contract if they are cast. In Australia, agents are typically paid by commission on work secured for the talent they represent.',
      },
      {
        q: 'What is the difference between an agent and a manager?',
        a: 'In Australia, the line is often blurred. A talent agent focuses on securing auditions, jobs, and contracts within established industry channels. A manager focuses on long-term career strategy, personal brand, and business decisions — sometimes including securing representation. CentreStage Agency offers full talent representation with elements of career management built in, particularly for our long-term roster.',
      },
    ],
  },
  {
    title: 'Getting represented',
    items: [
      {
        q: 'How do I get signed by a talent agency?',
        a: 'Start by submitting an enquiry through the agency’s official channels. At CentreStage Agency you can apply via our Youth Representation enquiry (ages 4–16) or Professional Submission (ages 17+) pages. We review every enquiry. If your materials match a current opportunity on our roster, we will be in touch to organise an introductory meeting. Industry-readiness, preparation, and a professional approach matter more than a long resume.',
      },
      {
        q: 'Do I need a talent agent to get acting work?',
        a: 'Not always, but a good agent significantly opens up the kinds of work you can be considered for. Many major casting briefs in Australia — particularly for film, television, and national commercials — are only sent through agencies. An agent also negotiates contracts, advocates for fair rates, and supports the day-to-day administration that comes with professional performance work.',
      },
      {
        q: 'Do you charge a joining fee?',
        a: 'For Youth Representation (ages 4–16) we charge a one-off joining fee of $245 + GST. This covers initial profile setup, ongoing management, annual professional headshots*, and access to our behind-the-scenes resource lab. For Professional Representation (ages 17+) there is no joining fee — talent are responsible for providing their own current headshots and supplying materials to set up their profile with our support.',
      },
      {
        q: 'How much does a talent agent cost?',
        a: 'Australian talent agents typically charge a commission of 10–20% on confirmed and paid work, depending on the type of engagement (screen, voice, commercial, stage). For our Youth roster a one-off $245 + GST joining fee applies (which includes profile setup, annual headshots, ongoing management, and our resource lab). Professional talent (17+) pay no joining fee. Commission is only paid on income the agent helps secure.',
      },
      {
        q: 'Can I be represented by more than one agency at a time?',
        a: 'In Australia it is standard practice to be represented exclusively by one agency for a given discipline (e.g. acting). Some performers have separate agents for distinctly different areas of work, but this is typically only with the knowledge and agreement of both agencies. Trying to be on multiple acting agencies’ books simultaneously without disclosure can create real conflicts.',
      },
    ],
  },
  {
    title: 'Industry & memberships',
    items: [
      {
        q: 'What is MEAA?',
        a: 'MEAA is the Media, Entertainment & Arts Alliance — Australia’s union for performers, journalists, and media professionals. MEAA represents the industrial and professional interests of its members and sets standards across the entertainment and media industries.',
      },
      {
        q: 'Is CentreStage Agency an MEAA member?',
        a: 'Yes. CentreStage Agency is a proud MEAA member, committed to the industry standards and professional protections that MEAA membership represents. We believe in fair contracts, transparent processes, and supporting working performers properly throughout their careers.',
      },
      {
        q: 'What kinds of work do you represent talent for?',
        a: 'CentreStage Agency represents talent for screen (film, television, streaming), stage (theatre, musical theatre, live performance), commercial work (TV, print, online), voice work (voiceover, voice acting), and presenting. Our roster covers actors, musical theatre performers, commercial talent, voice artists, young performers, and emerging creatives.',
      },
      {
        q: 'Where in Australia do you represent talent?',
        a: 'CentreStage Agency is proudly based in Geelong, Victoria — our Head Office — and represents talent nationally. We have industry touchpoints across Geelong, Melbourne, Sydney, Brisbane, Ballarat and Newcastle, with talent on our books from both capital cities and regional communities across Australia.',
      },
    ],
  },
  {
    title: 'Practical questions',
    items: [
      {
        q: 'At what age can children start with a talent agency?',
        a: 'CentreStage Agency represents young performers from ages 4 through 16 through our Youth Representation pathway. We always work in partnership with a parent or guardian throughout. For all young performers we focus on industry-readiness, professional standards, and — above all — wellbeing.',
      },
      {
        q: 'Do I need professional headshots to apply?',
        a: 'Professional headshots are required for our Professional Submission (ages 17+). For Youth Representation enquiries we do not require professional headshots at the enquiry stage — a clear, recent photo of your child is enough to start the conversation. If we move to representation, we will guide you on professional headshot requirements.',
      },
      {
        q: 'What is a self-tape?',
        a: 'A self-tape is an audition that you record yourself, usually in response to specific sides (script pages) and instructions from a casting director. Self-tapes have become the standard first round of casting in Australia and internationally. CentreStage Agency provides coaching and guidance on self-tapes to help our talent submit work that stands out.',
      },
      {
        q: 'How long until I hear back after submitting?',
        a: 'For Youth Representation enquiries we respond within two working days. For Professional Submissions our review window is up to ten working days, and we respond only to selected submissions. Materials are held for six months unless invited onto the roster.',
      },
      {
        q: 'What does industry-readiness mean?',
        a: 'Industry-readiness means being prepared, responsive, and equipped to engage with paid work at a professional standard. For young performers this includes school-friendly availability, parental support, self-tape capability, and an understanding of audition expectations. For professional performers it includes current materials (headshot, resume, showreel), reliability, and a working knowledge of industry standards.',
      },
    ],
  },
];

// Flat array for schema.org
const FAQ_ALL = FAQ_SECTIONS.flatMap(s => s.items);

// FAQ accordion item
const FAQItem = ({ q, a, idx, total, isOpen, onToggle }) => (
  <div
    itemScope itemProp="mainEntity" itemType="https://schema.org/Question"
    style={{ borderBottom: '1px solid var(--hairline)' }}
  >
    <button
      type="button"
      onClick={onToggle}
      aria-expanded={isOpen}
      style={{
        width: '100%', textAlign: 'left',
        padding: '32px 0',
        background: 'transparent', border: 0, cursor: 'pointer',
        display: 'grid', gridTemplateColumns: '60px 1fr auto', gap: 32, alignItems: 'baseline',
        fontFamily: 'inherit',
      }}
    >
      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--mid)', letterSpacing: '0.06em' }}>
        {String(idx + 1).padStart(2, '0')}
      </span>
      <h3 itemProp="name" style={{
        fontFamily: 'var(--font-display)', fontWeight: 900,
        fontSize: 'clamp(22px, 2.4vw, 32px)', letterSpacing: '-0.015em', lineHeight: 1.15,
        margin: 0, color: 'var(--ink)', textAlign: 'left',
      }}>
        {q}
      </h3>
      <span aria-hidden style={{
        width: 28, height: 28, position: 'relative', display: 'inline-block',
        transition: 'transform 320ms var(--ease-stage)',
        transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)',
        flexShrink: 0,
      }}>
        <span style={{ position: 'absolute', top: '50%', left: 0, right: 0, height: 1, background: 'var(--ink)', transform: 'translateY(-50%)' }} />
        <span style={{ position: 'absolute', top: 0, bottom: 0, left: '50%', width: 1, background: 'var(--ink)', transform: 'translateX(-50%)' }} />
      </span>
    </button>
    <div
      itemScope itemProp="acceptedAnswer" itemType="https://schema.org/Answer"
      style={{
        display: 'grid', gridTemplateColumns: '60px 1fr 28px', gap: 32,
        overflow: 'hidden',
        maxHeight: isOpen ? '1000px' : '0px',
        opacity: isOpen ? 1 : 0,
        transition: 'max-height 480ms var(--ease-stage), opacity 320ms var(--ease-stage), padding 320ms var(--ease-stage)',
        paddingBottom: isOpen ? 40 : 0,
      }}
    >
      <span />
      <p itemProp="text" style={{
        margin: 0, fontSize: 17, lineHeight: 1.65, color: 'var(--ink)',
        maxWidth: '64ch',
      }}>
        {a}
      </p>
    </div>
  </div>
);

const FAQScreen = ({ navigate }) => {
  const [open, setOpen] = React.useState({}); // { 'sectionIdx-itemIdx': true }
  const toggle = (key) => setOpen(o => ({ ...o, [key]: !o[key] }));

  // Inject JSON-LD for SEO
  React.useEffect(() => {
    const ld = {
      '@context': 'https://schema.org',
      '@type': 'FAQPage',
      mainEntity: FAQ_ALL.map(item => ({
        '@type': 'Question',
        name: item.q,
        acceptedAnswer: { '@type': 'Answer', text: item.a },
      })),
    };
    let s = document.getElementById('cs-faq-jsonld');
    if (!s) {
      s = document.createElement('script');
      s.type = 'application/ld+json';
      s.id = 'cs-faq-jsonld';
      document.head.appendChild(s);
    }
    s.textContent = JSON.stringify(ld);
    return () => { if (s && s.parentNode) s.parentNode.removeChild(s); };
  }, []);

  let runningIdx = 0;

  return (
    <main data-screen-label="FAQ" itemScope itemType="https://schema.org/FAQPage">
      {/* 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)' }}>Frequently asked <Slash /> Talent representation in Australia</Eyebrow>
          <div style={{ flex: 1, height: 1, background: 'var(--hairline)' }} />
          <span className="cs-mono" style={{ color: 'var(--mid)' }}>{FAQ_ALL.length} questions</span>
        </div>

        <h1 style={{
          fontFamily: 'var(--font-display)', fontWeight: 900,
          fontSize: 'clamp(64px, 11vw, 168px)', letterSpacing: '-0.035em', lineHeight: 0.88,
          margin: 0, color: 'var(--ink)', textWrap: 'balance',
        }}>
          Questions, answered.
        </h1>

        <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 80, alignItems: 'flex-end' }}>
          <p style={{ fontSize: 21, lineHeight: 1.5, color: 'var(--ink)', margin: 0, maxWidth: '50ch' }}>
            Everything you might want to know about talent representation in Australia — what agents do, how the industry works, what to expect when you submit, and how CentreStage Agency approaches the work.
          </p>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--mid)', lineHeight: 1.7, letterSpacing: '0.02em' }}>
            <div>Proud MEAA member</div>
            <div>Head Office <span style={{ color: 'var(--ink)' }}>Geelong</span></div>
            <div>Representing talent nationally</div>
          </div>
        </div>
      </section>

      {/* MEAA member band */}
      <section style={{ background: 'var(--ink)', color: 'var(--paper)' }}>
        <div style={{ maxWidth: 1600, margin: '0 auto', padding: '64px 48px', display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 56, alignItems: 'center' }}>
          <Eyebrow style={{ color: 'var(--fg-on-ink-2)' }}>Industry standing</Eyebrow>
          <p style={{
            fontFamily: 'var(--font-display)', fontWeight: 900,
            fontSize: 'clamp(28px, 3.4vw, 48px)', letterSpacing: '-0.02em', lineHeight: 1.1,
            margin: 0, color: 'var(--paper)', textWrap: 'balance',
          }}>
            CentreStage Agency is a proud <span style={{ color: 'var(--spotlight)' }}>MEAA</span> member — committed to fair contracts, transparent processes, and the industry standards Australian performers deserve.
          </p>
          <span className="cs-mono" style={{ color: 'var(--fg-on-ink-2)', whiteSpace: 'nowrap' }}>
            MEAA · Media, Entertainment & Arts Alliance
          </span>
        </div>
      </section>

      {/* FAQ sections */}
      <section style={{ maxWidth: 1600, margin: '0 auto', padding: '120px 48px' }}>
        {FAQ_SECTIONS.map((section, si) => (
          <div key={section.title} style={{ marginBottom: si < FAQ_SECTIONS.length - 1 ? 96 : 0 }}>
            <SectionHeader eyebrow={section.title} action={
              <span className="cs-mono" style={{ color: 'var(--mid)' }}>
                {String(section.items.length).padStart(2, '0')} questions
              </span>
            } />
            <div>
              {section.items.map((item) => {
                const idx = runningIdx++;
                const key = `${si}-${idx}`;
                return (
                  <FAQItem
                    key={key}
                    q={item.q}
                    a={item.a}
                    idx={idx}
                    total={FAQ_ALL.length}
                    isOpen={!!open[key]}
                    onToggle={() => toggle(key)}
                  />
                );
              })}
            </div>
          </div>
        ))}
      </section>

      {/* Closing CTA */}
      <section style={{ maxWidth: 1600, margin: '0 auto', padding: '96px 48px 0' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 96, alignItems: 'flex-end', borderTop: '1px solid var(--hairline)', paddingTop: 96 }}>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 900,
            fontSize: 'clamp(40px, 6vw, 88px)', letterSpacing: '-0.025em', lineHeight: 0.95,
            margin: 0, textWrap: 'balance',
          }}>
            Still have a question?
          </h2>
          <div>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--ink)', maxWidth: '36ch', margin: '0 0 24px' }}>
              Send a direct enquiry. We respond within two working days.
            </p>
            <Button onClick={(e) => { e.preventDefault(); navigate('contact'); }}>Contact the agency</Button>
          </div>
        </div>
      </section>
    </main>
  );
};

Object.assign(window, { FAQScreen });
