/* global React */

// ─────────────────────────────────────────────────────────────
// PODCAST — Onstage: Casting Call
// Hosted by David Greenwood OAM. A behind-the-scenes podcast on
// theatre, television and commercial acting through the lens of
// talent management. The Spotify show player auto-updates with
// the latest episode; the list below covers recent episodes.
// ─────────────────────────────────────────────────────────────

const PODCAST = {
  name: 'Onstage: Casting Call',
  host: 'Hosted by David Greenwood OAM',
  blurb: 'A behind-the-scenes podcast exploring theatre, television, and commercial acting through the lens of talent management in Victoria and beyond. Honest, real-world conversations with performers, casting agents, and industry professionals — for emerging talent, parents, and anyone curious about what really happens off-stage and behind the camera.',
  artwork: 'https://is1-ssl.mzstatic.com/image/thumb/Podcasts211/v4/1c/1f/00/1c1f00a8-7592-726a-4873-bb20115be4bb/mza_17008102313478497238.png/1200x1200bf-60.jpg',
  spotifyShowId: '2TUccyv0vDjXqLiWYLTMOv',
  platforms: {
    spotify: 'https://open.spotify.com/show/2TUccyv0vDjXqLiWYLTMOv',
    apple:   'https://podcasts.apple.com/au/podcast/onstage-casting-call/id1836818655',
    podbean: 'https://onstagetalent.podbean.com',
  },
  // Most recent episodes (newest first). Apple links deep-link to the episode.
  episodes: [
    {
      n: '13', date: 'Latest', mins: '47 min',
      title: 'Is AI Blocking Your Next Audition?',
      blurb: 'David Greenwood OAM explores how digital casting platforms, searchable profiles, resume filters and AI-assisted tools may affect whether performers are seen, shortlisted or overlooked — and why clear, current materials matter.',
      apple: 'https://podcasts.apple.com/au/podcast/episode-13-is-ai-blocking-your-next-audition/id1836818655?i=1000770747351',
    },
    {
      n: '12', date: '15 May 2026', mins: '56 min',
      title: 'Inside the Casting Pipeline: The Auditions Actors Never See',
      blurb: 'David Greenwood OAM and Brian Coppock take actors behind the scenes — from Casting Networks, Showcast and Altai through to producer portals and private briefs — and unpack how professional opportunities actually move through the industry.',
      apple: 'https://podcasts.apple.com/au/podcast/episode-12-inside-the-casting-pipeline-the/id1836818655?i=1000767913820',
    },
    {
      n: '11', date: '6 May 2026', mins: '36 min',
      title: 'Don\u2019t Fall in Love With Your Work — with Alan Menken',
      blurb: 'After attending A Whole New World of Alan Menken at Melbourne\u2019s Palais Theatre, David reflects on one of the hardest lessons in creative work: serving the story rather than protecting your ego, even when brilliant work ends up on the cutting room floor.',
      apple: 'https://podcasts.apple.com/au/podcast/episode-11-dont-fall-in-love-with-your-work-with-alan-menken/id1836818655?i=1000766467626',
    },
    {
      n: '10', date: '30 Apr 2026', mins: '50 min',
      title: 'Why Talent Isn\u2019t Enough — with Steven Tortosa',
      blurb: 'David Greenwood OAM and Brian Coppock sit down with Steven Tortosa from Cummings and Partners for a candid look at what casting directors and producers actually look for, why your self-tape might be holding you back, and the shift toward \u201creal people\u201d casting.',
      apple: 'https://podcasts.apple.com/au/podcast/episode-10-why-talent-isnt-enough-casting-self-tapes/id1836818655?i=1000764793731',
    },
    {
      n: '09', date: '16 Feb 2026', mins: '47 min',
      title: 'Owning the Room — with Joanna McKinnon Ward',
      blurb: 'Joanna McKinnon Ward on craft, confidence and career longevity — discipline, preparation, navigating rejection and reinvention, and why resilience is essential to a sustainable career in the performing arts.',
      apple: 'https://podcasts.apple.com/au/podcast/episode-9-owning-the-room-joanna-mckinnon-ward-on/id1836818655?i=1000749922694',
    },
    {
      n: 'Bonus', date: '18 Dec 2025', mins: '42 min',
      title: 'Live from the Foyer | Passport to Broadway — Parent Perspectives',
      blurb: 'Recorded live during CentreStage\u2019s Passport to Broadway, Brian Coppock and David Greenwood are joined by guest parent Ryan Keogh for an honest look at supporting a young performer — education, wellbeing, child safety, and building confidence.',
      apple: 'https://podcasts.apple.com/au/podcast/onstage-casting-call-live-from-the-foyer-passport-to/id1836818655?i=1000741819540',
    },
    {
      n: '07', date: '10 Dec 2025', mins: '39 min',
      title: 'AI and the Future of Audition Prep — Friend, Foe, or Just Another Tool?',
      blurb: 'David Greenwood OAM and Brian Coppock explore how AI is reshaping audition preparation — the real tools actors use now, the benefits, risks and ethical questions, and how to use technology responsibly without losing authenticity.',
      apple: 'https://podcasts.apple.com/au/podcast/episode-7-ai-and-the-future-of-audition-prep-friend/id1836818655?i=1000740672933',
    },
    {
      n: '06', date: '15 Oct 2025', mins: '41 min',
      title: 'Finding the Right Agent & What They Don\u2019t Tell You',
      blurb: 'A solo episode with David Greenwood OAM on the realities of representation in Australia — how briefs are distributed, the different types of agencies, what to prepare before approaching an agent, and the red flags to watch for.',
      apple: 'https://podcasts.apple.com/au/podcast/episode-6-finding-the-right-agent-what-they-dont-tell-you/id1836818655?i=1000731981182',
    },
  ],
};

const PlatformButton = ({ label, url, primary }) => (
  <a href={url} target="_blank" rel="noopener"
     className="cs-btn"
     style={primary ? {} : { background: 'transparent', color: 'var(--ink)', border: '1px solid var(--ink)' }}>
    {label} <span style={{ marginLeft: 8 }}>↗</span>
  </a>
);

const EpisodeCard = ({ ep }) => (
  <article style={{
    border: '1px solid var(--hairline)',
    padding: '32px 32px 28px',
    display: 'flex', flexDirection: 'column', gap: 18, height: '100%',
  }}>
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
      <span style={{
        fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 22,
        letterSpacing: '-0.02em', color: 'var(--ink)',
      }}>
        {ep.n === 'Bonus' ? 'Bonus' : `Ep. ${ep.n}`}
      </span>
      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--mid)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>
        {ep.date} <Slash color="var(--mid-soft)" /> {ep.mins}
      </span>
    </div>

    <h3 style={{
      fontFamily: 'var(--font-display)', fontWeight: 900,
      fontSize: 'clamp(22px, 2.2vw, 28px)', letterSpacing: '-0.015em', lineHeight: 1.1,
      margin: 0, color: 'var(--ink)',
    }}>
      {ep.title}
    </h3>

    <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--ink)', margin: 0 }}>
      {ep.blurb}
    </p>

    <div style={{ marginTop: 'auto', paddingTop: 8, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
      <a href={ep.apple} target="_blank" rel="noopener"
         style={{
           fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 700,
           letterSpacing: '0.08em', textTransform: 'uppercase',
           textDecoration: 'none', color: 'var(--paper)', background: 'var(--ink)',
           padding: '10px 16px', border: '1px solid var(--ink)',
         }}>
        Apple ↗
      </a>
      <a href={PODCAST.platforms.spotify} target="_blank" rel="noopener"
         style={{
           fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 700,
           letterSpacing: '0.08em', textTransform: 'uppercase',
           textDecoration: 'none', color: 'var(--ink)', background: 'transparent',
           padding: '10px 16px', border: '1px solid var(--ink)',
         }}>
        Spotify ↗
      </a>
    </div>
  </article>
);

const PodcastScreen = ({ navigate }) => {
  const embedSrc = `https://open.spotify.com/embed/show/${PODCAST.spotifyShowId}?utm_source=generator&theme=0`;

  return (
    <main data-screen-label="Podcast">
      {/* Hero */}
      <section style={{ maxWidth: 1600, margin: '0 auto', padding: '56px 48px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 48 }}>
          <Eyebrow style={{ color: 'var(--mid)' }}>Podcast <Slash /> Onstage: Casting Call</Eyebrow>
          <div style={{ flex: 1, height: 1, background: 'var(--hairline)' }} />
          <span className="cs-mono" style={{ color: 'var(--mid)' }}>Updated weekly</span>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 0.8fr', gap: 64, alignItems: 'flex-end' }}>
          <div>
            <h1 style={{
              fontFamily: 'var(--font-display)', fontWeight: 900,
              fontSize: 'clamp(52px, 8.5vw, 132px)', letterSpacing: '-0.035em', lineHeight: 0.9,
              margin: 0, color: 'var(--ink)', textWrap: 'balance',
            }}>
              Onstage:<br/>Casting Call.
            </h1>
            <p style={{ fontSize: 19, lineHeight: 1.55, color: 'var(--ink)', margin: '32px 0 0', maxWidth: '54ch' }}>
              {PODCAST.blurb}
            </p>
            <p style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--mid)', letterSpacing: '0.04em', margin: '20px 0 0' }}>
              {PODCAST.host}
            </p>
          </div>
          <div style={{ border: '1px solid var(--ink)', overflow: 'hidden', background: 'var(--ink)' }}>
            <img src={PODCAST.artwork} alt="Onstage: Casting Call podcast artwork"
                 style={{ width: '100%', display: 'block', filter: 'grayscale(100%) contrast(1.05)' }} />
          </div>
        </div>

        {/* Platform buttons */}
        <div style={{ marginTop: 48, display: 'flex', gap: 14, flexWrap: 'wrap', alignItems: 'center' }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--mid)', letterSpacing: '0.08em', textTransform: 'uppercase', marginRight: 8 }}>
            Listen on
          </span>
          <PlatformButton label="Spotify" url={PODCAST.platforms.spotify} primary />
          <PlatformButton label="Apple Podcasts" url={PODCAST.platforms.apple} />
          <PlatformButton label="Podbean" url={PODCAST.platforms.podbean} />
        </div>
      </section>

      {/* Latest — live Spotify player */}
      <section style={{ maxWidth: 1600, margin: '0 auto', padding: '96px 48px' }}>
        <SectionHeader index="01" count="02" eyebrow="Latest episode" action={
          <span className="cs-mono" style={{ color: 'var(--mid)' }}>Live — always current</span>
        } />
        <div style={{ border: '1px solid var(--ink)', background: 'var(--ink)', overflow: 'hidden' }}>
          <iframe
            title="Onstage: Casting Call on Spotify"
            src={embedSrc}
            width="100%"
            height="352"
            frameBorder="0"
            allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
            loading="lazy"
            style={{ display: 'block', border: 0, borderRadius: 0 }}
          />
        </div>
        <p style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--mid)', letterSpacing: '0.02em', margin: '14px 0 0' }}>
          Streams directly from Spotify — always shows the most recent episode first.
        </p>
      </section>

      <Hairline />

      {/* Episode list */}
      <section style={{ maxWidth: 1600, margin: '0 auto', padding: '96px 48px' }}>
        <SectionHeader index="02" count="02" eyebrow="Recent episodes" action={
          <a href={PODCAST.platforms.apple} target="_blank" rel="noopener" className="cs-mono" style={{ color: 'var(--mid)', textDecoration: 'none' }}>
            All episodes ↗
          </a>
        } />

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }}>
          {PODCAST.episodes.map((ep) => (
            <EpisodeCard key={ep.n + ep.title} ep={ep} />
          ))}
        </div>

        <div style={{ marginTop: 48, display: 'flex', gap: 14, flexWrap: 'wrap', justifyContent: 'center' }}>
          <PlatformButton label="See all on Spotify" url={PODCAST.platforms.spotify} primary />
          <PlatformButton label="See all on Apple Podcasts" url={PODCAST.platforms.apple} />
        </div>
      </section>

      {/* Closing CTA */}
      <section style={{ background: 'var(--ink)', color: 'var(--paper)' }}>
        <div style={{ maxWidth: 1600, margin: '0 auto', padding: '144px 48px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 96, alignItems: 'flex-end' }}>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontWeight: 900,
              fontSize: 'clamp(48px, 8vw, 128px)', letterSpacing: '-0.035em', lineHeight: 0.9,
              margin: 0, color: 'var(--paper)', textWrap: 'balance',
            }}>
              Want to be on<br/>the show?
            </h2>
            <div>
              <p style={{ fontSize: 19, lineHeight: 1.55, color: 'var(--paper)', maxWidth: '36ch', marginTop: 0 }}>
                We feature talent, industry guests and the conversations that matter. Reach out if you have a story worth telling.
              </p>
              <a href="#contact" onClick={(e) => { e.preventDefault(); navigate('contact'); }}
                 className="cs-btn"
                 style={{ background: 'var(--paper)', color: 'var(--ink)', border: '1px solid var(--paper)', marginTop: 24 }}>
                Get in touch <span style={{ marginLeft: 8 }}>→</span>
              </a>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
};

Object.assign(window, { PodcastScreen });