/* global React */

// ─────────────────────────────────────────────────────────────
// ABOUT — Who we are
// ─────────────────────────────────────────────────────────────

const AboutScreen = ({ navigate }) => {
  const a = window.CS_DATA.agency;
  const team = window.CS_DATA.team;
  const milestones = window.CS_DATA.milestones;
  const cities = window.CS_DATA.cities;

  return (
    <main data-screen-label="About">
      {/* Hero */}
      <section style={{ position: 'relative' }}>
        <div 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)' }}>Who we are</Eyebrow>
            <div style={{ flex: 1, height: 1, background: 'var(--hairline)' }} />
            <span className="cs-mono" style={{ color: 'var(--mid)' }}>National · Est. 2010</span>
          </div>

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

          <div style={{ marginTop: 64, display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 96, alignItems: 'flex-start' }}>
            <Portrait src={window.CS_DATA.images.environments[0].url} ratio="3 / 4" treatment="mono" label="The agency" code="EST.18" />
            <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
              <div data-ee="standard" style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
                <p style={{ fontSize: 24, lineHeight: 1.45, color: 'var(--ink)', margin: 0, textWrap: 'pretty' }}>
                  Unearthing talent for the world’s stages and screens, CentreStage Agency connects performers with opportunities across theatre, television, film, commercials, voiceover, streaming and live performance.
                </p>
                <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--ink)', margin: 0, maxWidth: '60ch', textWrap: 'pretty' }}>
                  We are proudly based in Geelong while working nationally, representing talent from diverse locations, backgrounds, identities and creative pathways. Our agency values professionalism, inclusion, preparation and long-term career development.
                </p>
                <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--mid)', margin: 0, maxWidth: '60ch' }}>
                  CentreStage Agency is built on the belief that opportunity should not be limited by postcode. We represent performers from capital cities and regional communities, supporting talent to access professional opportunities across the entertainment, creative, commercial and media industries.
                </p>
              </div>
              <div data-ee="easy" style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
                <p style={{ fontSize: 22, lineHeight: 1.45, color: 'var(--ink)', margin: 0 }}>
                  CentreStage Agency helps performers find work.
                </p>
                <p style={{ fontSize: 18, lineHeight: 1.6, color: 'var(--ink)', margin: 0, maxWidth: '52ch' }}>
                  We help them get jobs in plays, TV, films, ads, and voice work.
                </p>
                <p style={{ fontSize: 18, lineHeight: 1.6, color: 'var(--ink)', margin: 0, maxWidth: '52ch' }}>
                  Our office is in Geelong. We work with people in big cities. We also work with people in country towns. Where you live does not matter.
                </p>
                <p style={{ fontSize: 18, lineHeight: 1.6, color: 'var(--ink)', margin: 0, maxWidth: '52ch' }}>
                  We care about all kinds of people. We help everyone do their best work.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* National touchpoints band */}
      <section style={{ borderTop: '1px solid var(--hairline)', borderBottom: '1px solid var(--hairline)', background: 'var(--paper-deep)' }}>
        <div style={{ maxWidth: 1600, margin: '0 auto', padding: '64px 48px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 64, alignItems: 'center' }}>
            <Eyebrow style={{ color: 'var(--mid)' }}>National representation · Six cities</Eyebrow>
            <div style={{
              display: 'flex', flexWrap: 'wrap', gap: 0, alignItems: 'baseline',
              fontFamily: 'var(--font-display)', fontWeight: 900,
              fontSize: 'clamp(28px, 4vw, 56px)', letterSpacing: '-0.025em', lineHeight: 1.05,
              color: 'var(--ink)',
            }}>
              {cities.map((c, i) => (
                <React.Fragment key={c}>
                  <span>{c}</span>
                  {i < cities.length - 1 && <Slash color="var(--mid-soft)" size="0.55em" />}
                </React.Fragment>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Full-bleed 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(4, 8).map((p, i) => (
            <Portrait key={i} src={p.url} ratio="4 / 5" treatment={['mono','warm','deep','cool'][i % 4]}
              label={`${p.discipline.toUpperCase()} · ${p.city.slice(0,3).toUpperCase()}`}
              code={String(i + 1).padStart(2, '0')}
            />
          ))}
        </div>
      </section>

      {/* What we do */}
      <section style={{ maxWidth: 1600, margin: '0 auto', padding: '144px 48px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 64, alignItems: 'flex-start', marginBottom: 80 }}>
          <Eyebrow style={{ color: 'var(--mid)' }}>What we do</Eyebrow>
          <p style={{
            fontFamily: 'var(--font-display)', fontWeight: 900,
            fontSize: 'clamp(32px, 4.2vw, 64px)', letterSpacing: '-0.02em', lineHeight: 1.0,
            margin: 0, color: 'var(--ink)', textWrap: 'balance',
          }}>
            We identify opportunities, manage submissions, support audition preparation, liaise with industry partners and provide honest advice throughout representation.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: '1px solid var(--hairline)' }}>
          {[
            { n: '01', t: 'Representation', d: 'Long-term professional management. We negotiate, advise, advocate, and remain present through every stage of a working career.' },
            { n: '02', t: 'Casting',        d: 'Considered shortlists for producers, directors and brands. Briefs answered with talent who match the call — not the volume.' },
            { n: '03', t: 'Industry-readiness', d: 'Audition preparation, self-tape coaching, and career development. Particularly for our youth roster, where early standards matter.' },
          ].map((s, i) => (
            <div key={s.n} style={{
              padding: '48px 36px',
              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: 36, 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>
          ))}
        </div>
      </section>

      <Hairline />

      {/* Who we represent */}
      <section style={{ maxWidth: 1600, margin: '0 auto', padding: '144px 48px' }}>
        <SectionHeader eyebrow="Who we represent" />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 96, alignItems: 'flex-start' }}>
          <p style={{
            fontFamily: 'var(--font-display)', fontWeight: 900,
            fontSize: 'clamp(36px, 4.6vw, 72px)', letterSpacing: '-0.02em', lineHeight: 0.98,
            margin: 0, color: 'var(--ink)', textWrap: 'balance',
          }}>
            Actors. Musical theatre. Voice. Commercial. Young performers. Emerging creatives.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20, paddingTop: 8 }}>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--ink)', margin: 0 }}>
              We work with talent who are prepared, responsive and ready to engage with the industry at a professional level. Our approach is supportive, practical and relationship-led.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--mid)', margin: 0 }}>
              We work with integrity in who we represent, clear in our expectations and committed to championing talent with honesty, care and ambition.
            </p>
          </div>
        </div>
      </section>

      <Hairline />

      {/* Team */}
      <section style={{ maxWidth: 1600, margin: '0 auto', padding: '144px 48px' }}>
        <SectionHeader eyebrow="The people" action={
          <span className="cs-mono" style={{ color: 'var(--mid)' }}>{team.length} of {team.length}</span>
        } />

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 40, rowGap: 64 }}>
          {team.map((p, i) => {
            const isPlaceholder = p.name === 'TBC';
            const photo = window.CS_DATA.images.team[i];
            return (
              <div key={i}>
                {photo ? (
                  <Portrait
                    src={photo}
                    treatment="mono"
                    code={String(i + 1).padStart(2, '0')}
                    ratio="4 / 5"
                  />
                ) : (
                  <div data-reveal-img="" style={{
                    position: 'relative', aspectRatio: '4 / 5', background: 'var(--ink)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    overflow: 'hidden',
                  }}>
                    <span style={{
                      fontFamily: 'var(--font-display)', fontWeight: 900,
                      fontSize: 96, letterSpacing: '-0.05em',
                      color: 'var(--mid-soft)', opacity: 0.4,
                      transform: 'skewX(-12deg)',
                    }}>/</span>
                    <div style={{
                      position: 'absolute', top: 12, right: 14,
                      fontFamily: 'var(--font-mono)', fontSize: 10,
                      color: 'rgba(244,241,234,0.5)', letterSpacing: '0.08em',
                    }}>{String(i + 1).padStart(2, '0')}</div>
                    <div style={{
                      position: 'absolute', bottom: 12, left: 14,
                      fontFamily: 'var(--font-mono)', fontSize: 11,
                      color: 'rgba(244,241,234,0.5)', letterSpacing: '0.08em',
                    }}>HEADSHOT PENDING</div>
                  </div>
                )}
                <div style={{ paddingTop: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 16 }}>
                  <span style={{ fontFamily: 'var(--font-sans)', fontSize: 22, fontWeight: 700, letterSpacing: '-0.01em', color: isPlaceholder ? 'var(--mid)' : 'var(--ink)' }}>
                    {p.name}
                  </span>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--mid)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>{p.based}</span>
                </div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--mid)', letterSpacing: '0.04em', marginTop: 4 }}>{p.role}</div>
                {p.email && (
                  <a href={`mailto:${p.email}`}
                     style={{
                       fontFamily: 'var(--font-mono)', fontSize: 12,
                       color: 'var(--ink)', letterSpacing: '0.02em',
                       marginTop: 8, display: 'inline-block',
                       textDecoration: 'none', borderBottom: '1px solid var(--hairline)',
                       paddingBottom: 2, transition: 'border-color 200ms var(--ease-stage)',
                     }}
                     onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--ink)'}
                     onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--hairline)'}
                  >
                    {p.email}
                  </a>
                )}
              </div>
            );
          })}
        </div>
      </section>

      <Hairline />

      {/* Milestones */}
      <section style={{ maxWidth: 1600, margin: '0 auto', padding: '144px 48px' }}>
        <SectionHeader eyebrow="A short history" />
        <div style={{ borderTop: '1px solid var(--hairline)' }}>
          {milestones.map((m, i) => (
            <div key={m.year} style={{
              display: 'grid', gridTemplateColumns: '140px 1fr 60px', gap: 32,
              padding: '32px 16px', alignItems: 'baseline',
              borderBottom: '1px solid var(--hairline)',
            }}>
              <span style={{
                fontFamily: 'var(--font-display)', fontWeight: 900,
                fontSize: 36, letterSpacing: '-0.02em', color: 'var(--ink)',
              }}>{m.year}</span>
              <span style={{ fontFamily: 'var(--font-sans)', fontSize: 22, fontWeight: 400, letterSpacing: '-0.005em', color: 'var(--ink)' }}>{m.label}</span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--mid)', letterSpacing: '0.06em', textAlign: 'right' }}>{String(i + 1).padStart(2, '0')}</span>
            </div>
          ))}
        </div>
      </section>

      <Hairline />

      {/* CTA */}
      <section style={{ maxWidth: 1600, margin: '0 auto', padding: '144px 48px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 96, alignItems: 'flex-end' }}>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 900,
            fontSize: 'clamp(48px, 7.5vw, 112px)', letterSpacing: '-0.03em', lineHeight: 0.92,
            margin: 0, textWrap: 'balance',
          }}>
            Trusted, supported, ready when you are.
          </h2>
          <div>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--ink)', maxWidth: '36ch', margin: '0 0 24px' }}>
              Submissions are open year-round. We review every enquiry and respond to selected applicants.
            </p>
            <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
              <Button onClick={(e) => { e.preventDefault(); navigate('pro'); }}>Professional · 17+</Button>
              <Button variant="secondary" onClick={(e) => { e.preventDefault(); navigate('youth'); }}>Youth · 4–16</Button>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
};

Object.assign(window, { AboutScreen });