/* global React */
const { useState, useEffect, useRef } = React;

// ============================================================
// HOME PAGE
// ============================================================
function HomePage({ navigate, onPitch, tweaks }) {
  return (
    <div className="page" key="home">
      <Hero projects={window.RE_PROJECTS} navigate={navigate} onPitch={onPitch}
            motionLevel={tweaks.motion} heroVariant={tweaks.heroVariant} />
      <MarqueeStrip />

      {/* Manifesto */}
      <section className="section manifesto-section">
        <div className="container">
          <div className="section-eyebrow">
            <span className="bar"></span>
            <span>02 · The Manifesto</span>
          </div>
          <blockquote className="manifesto-quote">
            <span className="open-quote">"</span>This isn't content.<br />
            <em>This is <span className="accent">conquest.</span></em><span className="close-quote">"</span>
          </blockquote>
          <p className="manifesto-kicker">
            Red Empire builds and services traditionally cinematic and hybrid AI-integrated narratives
            — the kind that <span className="accent">claim territory in culture.</span>
          </p>
          <div className="manifesto-body">
            <p>
              Red Empire Productions is a <strong>hybrid content studio</strong> merging traditional filmmaking
              with AI-driven creation to craft fierce, emotionally charged narratives across
              film, television, audio and digital formats.
            </p>
            <p>
              We don't just make content — we build cinematic experiences that <strong>provoke,
              disrupt and resonate.</strong> From raw development to seamless global distribution, we
              deliver stories designed to ignite conversation, move culture and leave a mark.
            </p>
            <p>
              With post-production muscle and global distribution reach through our partners, we
              take stories from spark to screen — with precision, power and edge.
            </p>
          </div>
          <div className="manifesto-partners">
            <span className="partners-label">Distribution &amp; post partners</span>
            <div className="partners-link">
              <img className="partners-dragon-ghost" src="assets/dragon-mark-clean.png" alt="" aria-hidden="true" />
              <span className="link-line"></span>
              <a className="partner-card left" href="https://www.soundvisiongc.com/" target="_blank" rel="noreferrer">
                <span className="partner-monogram has-logo logo-dark">
                  <img className="partner-logo" src="assets/soundvision-logo.jpg" alt="SoundVisionGC logo" onError={(e) => { e.target.style.display = 'none'; e.target.parentElement.classList.add('logo-failed'); }} />
                  <span className="mono-text">SV</span>
                </span>
                <span className="partner-body">
                  <span className="partner-name">SoundVisionGC</span>
                  <span className="partner-role">Post-production · Sound &amp; Vision · Gold Coast</span>
                  <span className="partner-visit">Visit site <span className="arrow">↗</span></span>
                </span>
              </a>
              <a className="partner-card right" href="https://organicmediagroup.co/" target="_blank" rel="noreferrer">
                <span className="partner-monogram has-logo">
                  <img className="partner-logo" src="https://organicmediagroup.co/images/e/organic-media-group-logo-topaz-112.png" alt="Organic Media Group logo" onError={(e) => { e.target.style.display = 'none'; e.target.parentElement.classList.add('logo-failed'); }} />
                  <span className="mono-text">OMG</span>
                </span>
                <span className="partner-body">
                  <span className="partner-name">Organic Media Group</span>
                  <span className="partner-role">Development · Production · International Distribution</span>
                  <span className="partner-visit">Visit site <span className="arrow">↗</span></span>
                </span>
              </a>
              <img className="partners-dragon" src="assets/dragon-mark-clean.png" alt="The Red Empire dragon, coiled around both partners" />
            </div>
          </div>
        </div>
      </section>

      {/* Slate preview */}
      <section className="section" id="slate-preview">
        <div className="container">
          <div className="section-eyebrow">
            <span className="bar"></span>
            <span>03 · The 2026 Slate</span>
          </div>
          <h2 className="section-title">Multiple worlds.<br />One empire.</h2>
          <p className="section-kicker">
            Features, series and podcast narratives, in various stages of production —
            connected to international distribution and financiers. The boldest sit at the front.
          </p>
          <div style={{ marginTop: 64 }}>
            <SlateList
              projects={
                ['interface', 'blood-countess-series', 'blood-countess', 'home-away-alice', 'seventh-christmas', 'wtfitness']
                  .map(id => window.RE_PROJECTS.find(p => p.id === id))
                  .filter(Boolean)
              }
              navigate={navigate} compact={true} />
          </div>
          <div className="hero-cta-buttons" style={{ marginTop: 48, display: 'flex', gap: 12 }}>
            <button className="btn btn-blood" onClick={() => navigate('slate')}>Open the full slate →</button>
            <button className="btn btn-ghost" onClick={onPitch}>Pitch us your project</button>
          </div>
        </div>
      </section>

      <AISection navigate={navigate} compact={true} />

      {/* Studio teaser */}
      <section className="section" style={{ background: 'var(--ash-900)' }}>
        <div className="container">
          <div className="studio-grid">
            <div>
              <div className="section-eyebrow">
                <span className="bar"></span>
                <span>04 · Studio</span>
              </div>
              <h2 className="section-title">Brisbane.<br />Gold Coast.<br />The world.</h2>
              <p className="section-kicker" style={{ marginBottom: 32 }}>
                South East Queensland's premier hybrid AI studio, founded in 2017 by Amie Casey. Red Empire
                develops, produces, distributes and diversifies narrative IP for global audiences.
                We work fast, hire local, ship hard.
              </p>
              <button className="btn btn-ghost" onClick={() => navigate('studio')}>Meet the studio →</button>
            </div>
            <div className="stat-row" style={{ alignSelf: 'center' }}>
              <div className="stat">
                <div className="num">{new Date().getFullYear() - 2017}<span className="accent">.</span></div>
                <div className="label">Years of operation</div>
              </div>
              <div className="stat">
                <div className="num">{window.RE_PROJECTS.length}<span className="accent">/</span></div>
                <div className="label">Projects in slate</div>
              </div>
              <div className="stat">
                <div className="num">30<span className="accent">+</span></div>
                <div className="label">Markets reached</div>
              </div>
              <div className="stat">
                <div className="num">1<span className="accent">.</span></div>
                <div className="label">Coiled dragon</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section grain" style={{
        textAlign: 'center',
        minHeight: '70vh',
        background: 'var(--ink, #0a0606)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center'
      }}>
        <div className="container" style={{ position: 'relative', zIndex: 2 }}>
          <span className="eyebrow" style={{ display: 'block', marginBottom: 20 }}>● Open submissions</span>
          <h2 className="section-title submissions-title" style={{ maxWidth: '20ch', margin: '0 auto', fontSize: 'clamp(56px, 9vw, 140px)' }}>
            Have something<br /><em className="danger-word" style={{ color: 'var(--blood)', fontStyle: 'italic' }}>dangerous?</em>
          </h2>
          <p className="section-kicker" style={{ margin: '24px auto 40px', color: 'var(--bone)' }}>
            We're reading features, series, limited runs, podcasts and original IP. Format doesn't matter. Great storytelling does.
          </p>
          <button className="btn btn-blood btn-lg" onClick={onPitch}>Pitch us →</button>
        </div>
      </section>
    </div>
  );
}

// ============================================================
// SLATE PAGE
// ============================================================
function SlatePage({ navigate, onPitch }) {
  return (
    <div className="page" key="slate">
      <div style={{ height: 72 }}></div>
      <section className="section">
        <div className="container">
          <div className="section-eyebrow">
            <span className="bar"></span>
            <span>The Slate · 2026 / 27</span>
          </div>
          <h1 className="section-title" style={{ fontSize: 'clamp(56px, 8vw, 120px)' }}>The <span style={{ color: 'var(--blood)' }}>work</span>.</h1>
          <p className="section-kicker">
            Every project Red Empire is currently developing, producing or shopping. Click any title for
            the full deck, credits and status.
          </p>
          <div style={{ marginTop: 80 }}>
            <SlateList projects={window.RE_PROJECTS} navigate={navigate} />
          </div>
          <div style={{ marginTop: 96, paddingTop: 48, borderTop: '1px solid var(--ash-700)' }}>
            <div className="section-eyebrow">
              <span className="bar"></span>
              <span>Historic credits</span>
            </div>
            {window.RE_HISTORIC.map((h, i) => (
              <div key={i} className="historic-row" style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
                padding: '20px 0', borderBottom: '1px solid var(--ash-700)',
                fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: '0.12em'
              }}>
                <span className="historic-title" style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: 22, letterSpacing: '0.04em' }}>{h.title}</span>
                <span className="historic-note" style={{ color: 'var(--ash-300)' }}>{h.year} · {h.format} · {h.note}</span>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

// ============================================================
// PROJECT PAGE
// ============================================================
function ProjectPage({ projectId, navigate, onPitch }) {
  const p = window.RE_PROJECTS.find(x => x.id === projectId) || window.RE_PROJECTS[0];

  return (
    <div className="page" key={'p-' + projectId}>
      {(p.poster || p.posterVideo) && (
        <div className={'project-poster-banner' + (p.posterFade ? ' fade-bottom' : '')}>
          {p.posterVideo ? (
            <video src={p.posterVideo} autoPlay muted loop playsInline></video>
          ) : (
            <img src={p.poster} alt={p.title} />
          )}
          {p.posterFx && <PosterFX variant={p.posterFx} />}
        </div>
      )}
      <div className="project-hero grain">
        <div className="project-hero-bg" style={{
          background: `radial-gradient(ellipse 70% 80% at 25% 50%, ${p.palette[2]}55 0%, transparent 60%), linear-gradient(140deg, ${p.palette[0]} 0%, ${p.palette[1]} 80%)`
        }}></div>
        <div className="re-hero-card-vignette"></div>
        <div className="project-hero-content">
          <a onClick={() => navigate('slate')} style={{
            fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.24em',
            textTransform: 'uppercase', color: 'var(--ash-300)', cursor: 'pointer',
            marginTop: 44, marginBottom: 16
          }}>← Back to slate</a>
          <span className="eyebrow"><span style={{ color: 'var(--ember)' }}>●</span> {p.status}</span>
          <h1 className="project-hero-title">{p.title}</h1>
          <p className="project-hero-logline">{p.tagline}</p>
          <div className="project-meta-strip">
            <span>{p.year}</span><span className="sep">/</span>
            <span>{p.format}</span><span className="sep">/</span>
            <span>{p.runtime}</span><span className="sep">/</span>
            {p.tags.map((t, i) => (
              <React.Fragment key={t}>
                <span>{t}</span>
                {i < p.tags.length - 1 && <span className="sep">/</span>}
              </React.Fragment>
            ))}
          </div>
          {p.comp && <p className="project-comp">{p.comp}</p>}
          {p.basedOnNote && <p className="based-on-note">{p.basedOnNote}</p>}
          {(p.logline || p.blurb) && (() => {
            const full = p.logline || p.blurb;
            const paras = full.slice(1).split('\n\n');
            return (
              <div className="project-hero-logline-full">
                <span className="logline-dropcap">{full.charAt(0)}</span>
                <div className="logline-body">
                  {paras.map((para, pi) => (
                    <p key={pi} className={pi === 0 ? 'logline-para' : 'logline-para cont'}>
                      {para.split('\n').map((line, i) => (
                        <React.Fragment key={i}>{i > 0 && <br />}{i > 0 ? <span className="logline-indent">{line}</span> : line}</React.Fragment>
                      ))}
                    </p>
                  ))}
                </div>
              </div>
            );
          })()}
          {p.synopsis && (
            <div className="project-synopsis">
              <h4 className="project-synopsis-label">Extended Synopsis</h4>
              {p.synopsis.split('\n\n').map((para, pi) => (
                <p key={pi} className="logline-para cont">{para}</p>
              ))}
            </div>
          )}
          {p.production && <p className="project-production">{p.production}</p>}
          {p.trailerUrl && (
            <div className="project-trailer">
              <div className="project-trailer-frame">
                <iframe
                  src={p.trailerUrl}
                  title={p.title + ' trailer'}
                  frameBorder="0"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                  referrerPolicy="strict-origin-when-cross-origin"
                  allowFullScreen
                ></iframe>
              </div>
            </div>
          )}
        </div>
      </div>

      <section className="section project-body-section">
        <div className="container">
          <div className="project-body">
            <div className="blurb">
              {p.diversification && (
                <p style={{ marginTop: 24, color: 'var(--bone)', fontSize: 17, lineHeight: 1.6 }}>{p.diversification}</p>
              )}
              <p style={{ marginTop: 24, color: 'var(--ash-300)', fontSize: 16 }}>
                Currently <strong style={{ color: 'var(--bone)' }}>{p.status.toLowerCase()}</strong> at Red Empire Productions
                in association with co-production partners (TBC). For decks, treatments, sizzle reel and rights enquiries,
                contact Amie Casey directly.
              </p>
              {p.preorder && (
                <div className="preorder-block">
                  <PreorderButton title={p.title} />
                  {p.manuscriptNote && (
                    <button className="btn btn-ghost" onClick={onPitch}>Request the manuscript →</button>
                  )}
                </div>
              )}
              <div style={{ marginTop: 32, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <SpotifyButton url={p.spotifyUrl} label={p.format === 'Podcast' ? 'Listen on Spotify' : 'Listen to score'} />
                {p.buyUrl && (
                  <a className="btn btn-blood" href={p.buyUrl} target="_blank" rel="noreferrer">{p.buyLabel || 'Buy on Amazon'} →</a>
                )}
                {p.relatedId && (
                  <button className="btn btn-ghost" onClick={() => navigate('project', { id: p.relatedId })}>
                    {p.relatedLabel || 'View related project'} →
                  </button>
                )}
                {p.related && p.related.map((r) => (
                  <button key={r.id} className="btn btn-ghost" onClick={() => navigate('project', { id: r.id })}>
                    {r.label} →
                  </button>
                ))}
                {!p.preorder && (
                  <>
                    {!p.hideDeckButton && (
                      <button className="btn btn-blood" onClick={onPitch}>Request deck →</button>
                    )}
                    <button className="btn btn-ghost">Press kit</button>
                  </>
                )}
              </div>
              <div className="section-eyebrow" style={{ marginTop: 40 }}>
                <span className="bar"></span>
                <span>Selects · Stills</span>
              </div>
              <div className="stills-grid stills-grid-inline">
                {p.stillsHero ? (
                  <img src={p.stillsHero} alt={p.title + ' production still'} style={{ width: '100%', height: '100%', objectFit: 'contain', background: '#000', display: 'block' }} />
                ) : (
                  <image-slot id={'still-' + p.id + '-hero'} shape="rect" placeholder={'Drop hero still for ' + p.title}></image-slot>
                )}
                <image-slot id={'still-' + p.id + '-a'} shape="rect" placeholder="Still A"></image-slot>
                <image-slot id={'still-' + p.id + '-b'} shape="rect" placeholder="Still B"></image-slot>
                <image-slot id={'still-' + p.id + '-c'} shape="rect" placeholder="Still C"></image-slot>
                <image-slot id={'still-' + p.id + '-d'} shape="rect" placeholder="Still D"></image-slot>
              </div>
            </div>
            <aside className="project-sidecard">
              <h4>Above the line</h4>
              {Object.entries(p.credits).map(([k, v]) => (
                <div key={k} className="cred-row">
                  <span className="label">{k.replace(/_\d+$/, '')}</span>
                  <span className="value">{v}</span>
                </div>
              ))}
              {p.cast && p.cast.length > 0 && (
                <React.Fragment>
                  <h4 style={{ marginTop: 28 }}>Starring</h4>
                  {p.cast.map((name, i) => (
                    <div key={i} className="cred-row cred-row-cast">
                      <span className="value">{name}</span>
                    </div>
                  ))}
                </React.Fragment>
              )}
            </aside>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--ash-900)' }}>
        <div className="container">
          <div className="section-eyebrow">
            <span className="bar"></span>
            <span>Next in slate</span>
          </div>
          <div className="slate-list">
            {window.RE_PROJECTS.filter(x => x.id !== p.id).slice(0, 3).map((q, i) => (
              <div key={q.id} className="slate-row" onClick={() => navigate('project', { id: q.id })}>
                <span className="slate-num">{String(i + 1).padStart(2, '0')}</span>
                <div>
                  <div className="slate-title">{q.title}</div>
                </div>
                <div className="slate-tagline">{q.tagline}</div>
                <div className="slate-meta">
                  <span>{q.year}</span>
                  <span>{q.runtime}</span>
                </div>
                <span className={'slate-status ' + q.statusClass}>{q.status}</span>
                <span className="slate-arrow">→</span>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

// ============================================================
// TEAM CARD
// ============================================================
function TeamCard({ m }) {
  const [open, setOpen] = useState(false);
  return (
    <div className="team-card">
      <div className="photo">
        {m.photoSrc ? (
          <img
            src={m.photoSrc}
            alt={m.name}
            loading="lazy"
            style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
          />
        ) : m.videoSrc ? (
          <video
            src={m.videoSrc}
            poster={m.posterSrc}
            autoPlay
            loop
            muted
            playsInline
            style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
          />
        ) : (
          <image-slot id={m.slotId} shape="rect" placeholder={'Portrait — ' + m.name}></image-slot>
        )}
      </div>
      <h3 className="name">{m.name}</h3>
      <p className="role">{m.role}</p>
      {!m.fullBio && <p className="bio">{m.bio}</p>}
      {m.fullBio && (
        <>
          <div className="bio-full" style={{ marginTop: 12, paddingTop: 0, borderTop: 'none' }}>
            {m.fullBio.slice(0, 1).map((para, k) => <p key={k}>{para}</p>)}
          </div>
          <button className={'bio-toggle' + (open ? ' open' : '')} onClick={() => setOpen(o => !o)} style={{ marginTop: 4 }}>
            <span>{open ? 'Hide full bio' : 'Read full bio'}</span>
            <span className="bio-toggle-icon">{open ? '−' : '+'}</span>
          </button>
          {open && (
            <div className="bio-full">
              {m.fullBio.slice(1).map((para, k) => <p key={k}>{para}</p>)}
            </div>
          )}
        </>
      )}
    </div>
  );
}

// ============================================================
// STUDIO PAGE
// ============================================================
function StudioPage({ navigate, onPitch }) {
  const B = window.RE_BRAND;
  return (
    <div className="page" key="studio">
      <section className="section dragon-bg subtle grain studio-hero-darken" style={{
        paddingTop: 'clamp(140px, 18vw, 220px)',
        paddingBottom: 'clamp(80px, 12vw, 160px)',
        minHeight: '90vh',
        display: 'flex', alignItems: 'flex-end'
      }}>
        <div className="container" style={{ position: 'relative', zIndex: 2 }}>
          <div className="section-eyebrow">
            <span className="bar"></span>
            <span>The Studio</span>
          </div>
          <h1 className="section-title studio-hero-title" style={{ fontSize: 'clamp(56px, 9vw, 140px)' }}>
            Forging the<br />
            <span style={{ color: 'var(--blood)' }}>future</span> of<br />
            storytelling.
          </h1>
          <p className="section-kicker" style={{ maxWidth: '52ch', color: 'var(--bone)' }}>
            Founded in 2017 by Amie Casey.
          </p>
          <p style={{
            fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.7,
            color: 'var(--ash-300)', maxWidth: '56ch', marginTop: 18
          }}>
            Red Empire Productions is South East Queensland's premier hybrid
            storytelling studio, blending traditional filmmaking, elevated animation and AI-powered production
            to develop, produce and distribute compelling film, television, audio and emerging media experiences
            for global audiences.
          </p>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="stat-row">
            <div className="stat">
              <div className="num">{new Date().getFullYear() - B.founded}<span className="accent">.</span></div>
              <div className="label">Years operating</div>
            </div>
            <div className="stat">
              <div className="num">{String(window.RE_PROJECTS.length).padStart(2, '0')}<span className="accent">/</span></div>
              <div className="label">Live in slate</div>
            </div>
            <div className="stat">
              <div className="num">100<span className="accent">%</span></div>
              <div className="label">Founder-owned</div>
            </div>
            <div className="stat">
              <div className="num">QLD<span className="accent">.</span></div>
              <div className="label">Headquartered</div>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--ash-900)' }}>
        <div className="container">
          <div className="studio-grid">
            <div>
              <div className="section-eyebrow">
                <span className="bar"></span>
                <span>Mission</span>
              </div>
              <h2 className="section-title" style={{ fontSize: 'clamp(32px, 4vw, 56px)' }}>
                Forge the <span style={{ color: 'var(--blood)' }}>future</span>.<br />
                Honor the <span style={{ color: 'var(--blood)' }}>craft</span>.<br />
                Build worlds you can get <span style={{ color: 'var(--blood)' }}>lost in</span>.
              </h2>
            </div>
            <div style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--ash-300)' }}>
              <p>
                Red Empire develops original IP designed to endure. From feature films and television series
                to audio narratives, elevated animation and next-generation entertainment experiences, we believe
                great storytelling remains the foundation of everything we create.
              </p>
              <p style={{ marginTop: 18 }}>
                We combine traditional filmmaking craft with emerging technologies to unlock new creative possibilities.
                AI, immersive media and intelligent production workflows allow us to move faster, explore further and
                bring ambitious ideas to life in ways that were impossible only a few years ago.
              </p>
              <p style={{
                marginTop: 24, marginBottom: 24,
                fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 500,
                fontSize: 'clamp(22px, 2.2vw, 30px)', lineHeight: 1.3, color: 'var(--bone)'
              }}>
                But technology is never the destination. <span style={{ color: 'var(--blood)' }}>Story is.</span>
              </p>
              <p>
                Proudly based in Queensland, we work with world-class writers, directors, performers and creatives
                to build projects with global potential. We develop locally, collaborate internationally and create
                for audiences everywhere.
              </p>
              <p style={{
                marginTop: 24,
                fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 500,
                fontSize: 'clamp(22px, 2.2vw, 30px)', lineHeight: 1.3, color: 'var(--bone)'
              }}>
                The barrier to creation has fallen. <span style={{ color: 'var(--blood)' }}>The barrier to greatness hasn't.</span>
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-eyebrow">
            <span className="bar"></span>
            <span>The Team</span>
          </div>
          <h2 className="section-title">Small. Sharp.<br />Built to scale.</h2>
          <div className="team-grid" style={{ marginTop: 64 }}>
            {window.RE_TEAM.map((m, i) => (
              <TeamCard key={i} m={m} />
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

// ============================================================
// SERVICES PAGE
// ============================================================
function ServicesPage({ navigate, onPitch }) {
  const [open, setOpen] = React.useState({});
  const toggle = (num) => setOpen(o => ({ ...o, [num]: !o[num] }));
  return (
    <div className="page" key="services">
      <div style={{ height: 72 }}></div>
      <section className="section">
        <div className="container">
          <div className="section-eyebrow">
            <span className="bar"></span>
            <span>Services</span>
          </div>
          <h1 className="section-title" style={{ fontSize: 'clamp(56px, 9vw, 140px)' }}>
            Services.
          </h1>
          <p className="section-kicker" style={{ fontWeight: 400 }}>
            What Red Empire can do for <span style={{ color: 'var(--blood)', fontWeight: 700 }}>your project</span> — from development to delivery.
          </p>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="svc-list">
            {window.RE_SERVICES.map((s, i) => (
              <div className="svc-block" key={s.num}>
                <div className="svc-head">
                  <span className="svc-num">{s.num}</span>
                  <div>
                    <h2 className="svc-title">{s.title}</h2>
                    <p className="svc-tagline">{s.tagline}</p>
                  </div>
                </div>
                <div className="svc-body">
                  {s.blurb.split('\n\n').map((p, j) => (
                    <p className="svc-blurb" key={j}>{p}</p>
                  ))}
                  <button className="svc-expand-btn" onClick={() => toggle(s.num)} aria-expanded={!!open[s.num]}>
                    <span className="svc-expand-sign">{open[s.num] ? '–' : '+'}</span>
                    {open[s.num] ? 'Hide details' : 'Expand details'}
                  </button>
                  {open[s.num] && (
                  <ul className="svc-items">
                    {s.items.map((it, j) => (
                      <li key={j}>{it}</li>
                    ))}
                  </ul>
                  )}
                  {s.footnote ? <p className="svc-footnote">{s.footnote}</p> : null}
                  {s.closer ? <p className="svc-closer">{s.closer}</p> : null}
                  {s.sampleUrl !== undefined ? (
                    s.sampleUrl ? (
                      <div className="svc-sample-row">
                        <a className="btn btn-blood svc-sample-btn" href={s.sampleUrl} target="_blank" rel="noreferrer">
                          {s.sampleUrl2 ? 'View sample 1 →' : 'View sample →'}
                        </a>
                        {s.sampleUrl2 ? (
                          <a className="btn btn-blood svc-sample-btn" href={s.sampleUrl2} target="_blank" rel="noreferrer">View sample 2 →</a>
                        ) : null}
                      </div>
                    ) : (
                      <button className="btn btn-blood svc-sample-btn">View sample →</button>
                    )
                  ) : null}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

// ============================================================
// INSTAGRAM EMBED
// ============================================================
function InstagramEmbed({ url }) {
  const ref = useRef(null);
  useEffect(() => {
    const process = () => {
      if (window.instgrm && window.instgrm.Embeds) window.instgrm.Embeds.process();
    };
    if (!document.getElementById('ig-embed-js')) {
      const s = document.createElement('script');
      s.id = 'ig-embed-js';
      s.src = 'https://www.instagram.com/embed.js';
      s.async = true;
      s.onload = process;
      document.body.appendChild(s);
    } else {
      process();
    }
  }, [url]);
  return (
    <div className="ig-embed-wrap" ref={ref}>
      <blockquote
        className="instagram-media"
        data-instgrm-permalink={url}
        data-instgrm-version="14"
        style={{ background: '#0F0A0A', border: '1px solid var(--ash-700)', margin: 0, maxWidth: '540px', minWidth: '280px', width: '100%' }}
      >
        <a href={url} target="_blank" rel="noreferrer" style={{ display: 'block', padding: '24px', color: 'var(--ash-300)', textDecoration: 'none', fontFamily: 'var(--font-mono)', fontSize: '11px', letterSpacing: '0.16em', textTransform: 'uppercase' }}>
          View this post on Instagram ↗
        </a>
      </blockquote>
    </div>
  );
}

// ============================================================
// MEDIA PAGE
// ============================================================
function YTLite({ id, title, className }) {
  const thumb = 'https://i.ytimg.com/vi/' + id + '/hqdefault.jpg';
  return (
    <a
      className={'social-yt-live yt-facade' + (className ? ' ' + className : '')}
      href={'https://www.youtube.com/watch?v=' + id}
      target="_blank"
      rel="noreferrer"
      aria-label={'Watch on YouTube: ' + title}
    >
      <img src={thumb} alt={title} loading="lazy" />
      <span className="yt-play"><span className="yt-play-tri"></span></span>
    </a>
  );
}

function MediaPage({ navigate, onPitch }) {
  const B = window.RE_BRAND;
  const P = window.RE_PODCAST;
  return (
    <div className="page" key="media">
      <div style={{ height: 72 }}></div>
      <section className="section">
        <div className="container">
          <div className="section-eyebrow">
            <span className="bar"></span>
            <span>Media</span>
          </div>
          <h1 className="section-title" style={{ fontSize: 'clamp(56px, 9vw, 140px)' }}>
            In the <span style={{ color: 'var(--blood)' }}>press.</span>
          </h1>
          <p className="section-kicker">
            Coverage, conversations and channels — where the empire shows up in the world.
          </p>
        </div>
      </section>

      {/* Press articles */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="section-eyebrow">
            <span className="bar"></span>
            <span>Press &amp; Articles</span>
          </div>
          <div className="press-list">
            {window.RE_PRESS.map((a, i) => (
              <a key={i} className="press-row" href={a.url} target="_blank" rel="noreferrer">
                <span className="press-thumb">
                  {a.img ? (
                    <img src={a.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                  ) : (
                    <image-slot id={'press-thumb-' + i} shape="rect" placeholder={a.outlet + ' image'}></image-slot>
                  )}
                </span>
                <span className="press-outlet">{a.outlet}</span>
                <div>
                  <div className="press-title">{a.title}</div>
                  <div className="press-note">{a.note}</div>
                </div>
                <span className="press-year">{a.year}</span>
                <span className="slate-arrow">↗</span>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* Podcast */}
      <section className="section" style={{ background: 'var(--ash-900)' }}>
        <div className="container">
          <div className="studio-grid">
            <div>
              <div className="section-eyebrow">
                <span className="bar"></span>
                <span>Listen</span>
              </div>
              <h2 className="section-title">{P.title}</h2>
              <p className="section-kicker" style={{ color: 'var(--bone)' }}>{P.tagline}</p>
            </div>
            <div style={{ alignSelf: 'center' }}>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.7, color: 'var(--ash-300)', margin: 0 }}>
                {P.desc}
              </p>
              <div style={{ marginTop: 28 }}>
                <SpotifyButton url={P.spotifyUrl} label="Listen on Spotify" />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Social */}
      <section className="section">
        <div className="container">
          <div className="section-eyebrow">
            <span className="bar"></span>
            <span>Follow the Empire</span>
          </div>
          <h2 className="section-title">Latest from<br />our channels.</h2>
          <div className="social-grid">
            <div className="social-card">
              <div className="social-card-head">
                <span className="social-name">Instagram</span>
                <a className="social-link" href={B.socials.instagram} target="_blank" rel="noreferrer">@redempireproductions ↗</a>
              </div>
              <div className="social-ig-feed">
                <InstagramEmbed url="https://www.instagram.com/reel/DUFnHUvj-4m/" />
                <InstagramEmbed url="https://www.instagram.com/reel/DSmUNG6Dwo8/" />
                <InstagramEmbed url="https://www.instagram.com/reel/DP3MtYUj-G-/" />
                <InstagramEmbed url="https://www.instagram.com/reel/DPFj_L8EwpV/" />
                <InstagramEmbed url="https://www.instagram.com/p/C9gEYkRztL5/" />
                <InstagramEmbed url="https://www.instagram.com/reel/DOnYwNlD7zt/" />
              </div>
            </div>
            <div className="social-card">
              <div className="social-card-head">
                <span className="social-name">YouTube</span>
                <a className="social-link" href={B.socials.youtube} target="_blank" rel="noreferrer">Red Empire Productions ↗</a>
              </div>
              <YTLite id="aCiPuS6gS70" title="Red Empire Productions — featured video" />
              <div className="social-yt-row">
                <YTLite id="ZPE7yHog1Is" title="Red Empire Productions — video 2" className="small" />
                <YTLite id="DRBM-P2Yxgc" title="Red Empire Productions — video 3" className="small" />
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// ============================================================
// CONTACT PAGE
// ============================================================
function ContactPage({ navigate, onPitch }) {
  const B = window.RE_BRAND;
  return (
    <div className="page" key="contact">
      <div style={{ height: 72 }}></div>
      <section className="section">
        <div className="container">
          <div className="section-eyebrow">
            <span className="bar"></span>
            <span>Contact</span>
          </div>
          <h1 className="section-title" style={{ fontSize: 'clamp(56px, 9vw, 140px)' }}>
            Let's build worlds.<br /><span style={{ color: 'var(--blood)' }}>Pitch us.</span>
          </h1>
          <p className="section-kicker">
            Every email is read. Every pitch gets a reply. Connect with Red Empire to discuss previz, development, production, partnerships, distribution or original IP.
          </p>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="studio-grid">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 40 }}>
              <div>
                <div className="cred-row" style={{ gridTemplateColumns: '140px 1fr' }}>
                  <span className="label">Founder</span>
                  <span className="value">{B.founder}</span>
                </div>
                <div className="cred-row" style={{ gridTemplateColumns: '140px 1fr' }}>
                  <span className="label">Email</span>
                  <span className="value"><a href={'mailto:' + B.email}>{B.email}</a></span>
                </div>
                <div className="cred-row" style={{ gridTemplateColumns: '140px 1fr' }}>
                  <span className="label">Phone</span>
                  <span className="value"><a href={'tel:' + B.phone}>{B.phone}</a></span>
                </div>
                <div className="cred-row" style={{ gridTemplateColumns: '140px 1fr' }}>
                  <span className="label">Location</span>
                  <span className="value">{B.location}</span>
                </div>
                <div className="cred-row" style={{ gridTemplateColumns: '140px 1fr' }}>
                  <span className="label">Instagram</span>
                  <span className="value"><a href={B.socials.instagram} target="_blank" rel="noreferrer">@redempireproductions ↗</a></span>
                </div>
                <div className="cred-row" style={{ gridTemplateColumns: '140px 1fr' }}>
                  <span className="label">IMDb</span>
                  <span className="value"><a href={B.socials.imdb} target="_blank" rel="noreferrer">co0612306 ↗</a></span>
                </div>
              </div>
              <div>
                <h4 style={{
                  fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.32em',
                  textTransform: 'uppercase', color: 'var(--ember)', margin: '0 0 16px'
                }}>What we read</h4>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, color: 'var(--bone)', lineHeight: 1.8 }}>
                  <li>◆ Feature scripts (first 10 pages + logline)</li>
                  <li>◆ Series bibles (with pilot draft)</li>
                  <li>◆ Audio-first IP (podcast → series)</li>
                  <li>◆ AI-native concepts — we are particularly interested</li>
                  <li>◆ Books · plays · articles for adaptation</li>
                </ul>
              </div>
            </div>
            <div className="project-sidecard">
              <h4>The intake form</h4>
              <div className="field">
                <label>Your name</label>
                <input className="input" placeholder="First Last" />
              </div>
              <div className="field">
                <label>Email</label>
                <input className="input" placeholder="you@studio.com" />
              </div>
              <div className="field">
                <label>Project title (optional)</label>
                <input className="input" placeholder="Working title" />
              </div>
              <div className="field">
                <label>The pitch</label>
                <textarea className="input" placeholder="One paragraph. Make it count." />
              </div>
              <button className="btn btn-blood" style={{ width: '100%', marginTop: 8 }} onClick={onPitch}>
                Send to the dragon →
              </button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// ============================================================
// AI PAGE (standalone, for the AI · Process nav route)
// ============================================================
function AIPage({ navigate, onPitch }) {
  return (
    <div className="page" key="aipage">
      <div style={{ height: 72 }}></div>
      <section className="section" style={{ paddingBottom: 0 }}>
        <div className="container">
          <div className="section-eyebrow">
            <span className="bar"></span>
            <span>AI · Process</span>
          </div>
          <h1 className="section-title" style={{ fontSize: 'clamp(56px, 9vw, 140px)' }}>
            Faster.<br />Braver.<br /><span style={{ color: 'var(--blood)' }}>Still human.</span>
          </h1>
          <p className="section-kicker">
            How we use AI — and how we refuse to use it. A working manifesto, updated as the tools change.
          </p>
        </div>
      </section>
      <AISection />
    </div>
  );
}

Object.assign(window, { HomePage, SlatePage, ProjectPage, StudioPage, ServicesPage, MediaPage, ContactPage, AIPage });