/* global React */

// ─────────────────────────────────────────────────────────────
// HOME — positioning, three hero variants, representation rail
// ─────────────────────────────────────────────────────────────

// ── Hero variant 1: STATEMENT (with editorial bg image) ───────
const HeroStatement = ({ navigate, showAccent }) => {
  const D = window.CS_DATA;
  return (
    <section style={{ position: 'relative' }}>
      <div style={{ position: 'relative', overflow: 'hidden' }}>
        {/* Editorial background image */}
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: `url(${D.images.heroBg})`,
          backgroundSize: 'cover',
          backgroundPosition: 'center 35%',
          filter: 'grayscale(100%) contrast(1.1) brightness(0.55)',
          opacity: 0.55,
        }} />
        {/* Paper-to-transparent overlay so type stays legible */}
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(244,241,234,0.92) 0%, rgba(244,241,234,0.65) 35%, rgba(244,241,234,0.78) 70%, rgba(244,241,234,1) 100%)',
        }} />

        <div style={{ position: 'relative', maxWidth: 1600, margin: '0 auto', padding: '64px 48px 0' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 56 }}>
            <span className="cs-mono" style={{ color: 'var(--mid)' }}>est. 2010</span>
            <Eyebrow style={{ color: 'var(--mid)' }}>Supported Talent Representation</Eyebrow>
            <div style={{ flex: 1, height: 1, background: 'var(--hairline)' }} />
            <Eyebrow style={{ color: 'var(--mid)' }}>Supporting talent nationally</Eyebrow>
          </div>

          <h1 style={{
            fontFamily: 'var(--font-display)', fontWeight: 900,
            fontSize: 'clamp(64px, 11vw, 184px)',
            letterSpacing: '-0.035em', lineHeight: 0.86,
            margin: 0, color: 'var(--ink)', textWrap: 'balance',
            mixBlendMode: 'multiply',
          }}>
            Unearthing talent<br />
            for the {showAccent ? <span style={{ color: 'var(--spotlight-deep)' }}>world’s</span> : 'world’s'}<br />
            stages and screens.
          </h1>

          <div style={{
            marginTop: 80, display: 'grid',
            gridTemplateColumns: 'minmax(0, 1.1fr) minmax(260px, 1fr)', gap: 64, alignItems: 'flex-end',
            paddingBottom: 80,
          }}>
            <p data-ee="standard" style={{ fontSize: 21, lineHeight: 1.5, color: 'var(--ink)', maxWidth: '50ch', margin: 0 }}>
              CentreStage Agency is a premium Australian talent agency representing performers across stage, screen, commercial and live performance. We are proudly based in Geelong while working nationally — representing distinctive talent from capital cities and regional communities alike.
            </p>
            <div data-ee="easy" style={{ maxWidth: '46ch', display: 'flex', flexDirection: 'column', gap: 16 }}>
              <p style={{ fontSize: 22, lineHeight: 1.45, color: 'var(--ink)', margin: 0 }}>
                CentreStage Agency is a talent agency.
              </p>
              <p style={{ fontSize: 18, lineHeight: 1.55, color: 'var(--ink)', margin: 0 }}>
                We help actors and performers find work. We help people on TV, in films, on stage and in ads.
              </p>
              <p style={{ fontSize: 18, lineHeight: 1.55, color: 'var(--ink)', margin: 0 }}>
                Our main office is in Geelong. We work with people from all over Australia.
              </p>
            </div>
            <div style={{ display: 'flex', gap: 16, justifyContent: 'flex-end', 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>
      </div>

      {/* Full-bleed portrait band — mixed youth & adult talent */}
      <div style={{ borderTop: '1px solid var(--hairline)', background: 'var(--ink)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1, background: 'var(--hairline-ink)' }}>
          {[
            { src: 'assets/talent/youth-male-redhead.jpg', discipline: 'Stage',    city: 'Geelong',   code: 'YTH' },
            { src: D.images.portraits[2].url,              discipline: 'Voice',    city: 'Sydney',    code: 'PRO' },
            { src: 'assets/talent/youth-female-12.jpg',    discipline: 'Screen',   city: 'Geelong',   code: 'YTH' },
            { src: D.images.portraits[3].url,              discipline: 'Musical',  city: 'Ballarat',  code: 'PRO' },
          ].map((p, i) => (
            <Portrait key={i} src={p.src} ratio="4 / 5" treatment="mono"
              label={p.discipline.toUpperCase()} code={`${p.city.slice(0,3).toUpperCase()} / ${p.code}`} />
          ))}
        </div>
      </div>
    </section>
  );
};

// ── Hero variant 2: MARQUEE ───────────────────────────────────
const HeroMarquee = ({ navigate, showAccent }) => {
  const D = window.CS_DATA;
  const words = ['Screen', 'Stage', 'Musical Theatre', 'Commercial', 'Voice', 'Presenting', 'Live Performance'];
  const line = (
    <span style={{
      fontFamily: 'var(--font-display)', fontWeight: 900,
      fontSize: 'clamp(56px, 9vw, 144px)',
      letterSpacing: '-0.035em', lineHeight: 1,
      color: 'var(--ink)', display: 'inline-flex', alignItems: 'center',
    }}>
      {words.flatMap((w, i) => [
        <span key={`w-${i}`}>{w}</span>,
        <Slash key={`s-${i}`} color="var(--mid-soft)" size="0.6em" />,
      ])}
    </span>
  );
  return (
    <section style={{ paddingTop: 56, position: 'relative' }}>
      <div style={{ padding: '0 48px 56px', maxWidth: 1600, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 56 }}>
          <span className="cs-mono" style={{ color: 'var(--mid)' }}>est. 2010</span>
          <Eyebrow style={{ color: 'var(--mid)' }}>Supported Talent Representation</Eyebrow>
          <div style={{ flex: 1, height: 1, background: 'var(--hairline)' }} />
          <Eyebrow style={{ color: 'var(--mid)' }}>National <Slash /> Australia</Eyebrow>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.4fr) minmax(220px, 0.6fr)', gap: 56, alignItems: 'flex-end' }}>
          <h1 style={{
            fontFamily: 'var(--font-display)', fontWeight: 900,
            fontSize: 'clamp(56px, 9vw, 152px)',
            letterSpacing: '-0.035em', lineHeight: 0.88,
            margin: 0, color: 'var(--ink)', textWrap: 'balance', minWidth: 0,
          }}>
            Distinctive talent.<br />
            Trusted representation.
          </h1>
          <div style={{ paddingBottom: 12 }}>
            <Eyebrow style={{ color: 'var(--mid)' }}>Two pathways</Eyebrow>
            <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 12 }}>
              <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>
      </div>

      {/* Full-bleed marquee strip */}
      <div style={{
        borderTop: '1px solid var(--hairline)', borderBottom: '1px solid var(--hairline)',
        padding: '36px 0', overflow: 'hidden', position: 'relative',
        background: showAccent ? 'var(--spotlight)' : 'var(--paper-deep)',
        transition: 'background 240ms var(--ease-stage)',
      }}>
        <div className="cs-marquee-track">
          {line}
          {line}
        </div>
      </div>

      {/* Portrait band beneath */}
      <div style={{ background: 'var(--ink)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 1, background: 'var(--hairline-ink)' }}>
          {D.images.portraits.slice(0, 5).map((p, i) => (
            <Portrait key={i} src={p.url} ratio="3 / 4" treatment={i % 2 === 0 ? 'mono' : 'cool'}
              code={String(i + 1).padStart(2, '0') + ' / 05'} />
          ))}
        </div>
      </div>
    </section>
  );
};

// ── Hero variant 3: SPLIT ─────────────────────────────────────
const HeroSplit = ({ navigate, showAccent }) => {
  const D = window.CS_DATA;
  return (
    <section style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.1fr) minmax(280px, 1fr)', minHeight: '88vh' }}>
      <div style={{ padding: '64px 48px 80px 96px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <span className="cs-mono" style={{ color: 'var(--mid)' }}>est. 2010</span>
          <Eyebrow style={{ color: 'var(--mid)' }}>Supported Talent Representation</Eyebrow>
        </div>

        <div>
          <Eyebrow style={{ color: 'var(--mid)' }}>Est. 2010 <Slash /> Geelong, working nationally</Eyebrow>
          <h1 style={{
            fontFamily: 'var(--font-display)', fontWeight: 900,
            fontSize: 'clamp(48px, 8vw, 144px)',
            letterSpacing: '-0.035em', lineHeight: 0.86,
            margin: '24px 0 32px', color: 'var(--ink)', textWrap: 'balance', minWidth: 0,
          }}>
            Unearthing<br />
            talent for the<br />
            world’s stages.
          </h1>
          <p style={{ fontSize: 19, lineHeight: 1.55, color: 'var(--ink)', maxWidth: '42ch', margin: 0 }}>
            A premium Australian agency representing distinctive performers across stage, screen, commercial and live work — from both capital cities and regional communities.
          </p>
          <div style={{ marginTop: 40, 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 style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--mid)', letterSpacing: '0.06em', display: 'flex', justifyContent: 'space-between' }}>
          <span>SCROLL ↓</span>
          <span>HOME / 01</span>
        </div>
      </div>

      <div style={{ background: 'var(--ink)', position: 'relative', overflow: 'hidden' }}>
        <Portrait
          src={D.images.portraits[0].url}
          ratio="auto"
          treatment={showAccent ? 'warm' : 'mono'}
          style={{ width: '100%', height: '100%' }}
          hoverScale={false}
          overlay={true}
        />
        <div style={{
          position: 'absolute', top: 28, right: 32,
          fontFamily: 'var(--font-mono)', fontSize: 11,
          color: 'rgba(244,241,234,0.85)', letterSpacing: '0.08em',
          textAlign: 'right', textShadow: '0 1px 2px rgba(0,0,0,0.5)',
        }}>
          STAGE / SCREEN<br />
          REPRESENTATION
        </div>
        <div style={{
          position: 'absolute', bottom: 28, left: 32,
          fontFamily: 'var(--font-display)', fontWeight: 900,
          fontSize: 'clamp(40px, 6vw, 88px)', letterSpacing: '-0.02em', lineHeight: 0.9,
          color: 'var(--paper)', textShadow: '0 2px 4px rgba(0,0,0,0.5)',
        }}>
          Centre <span style={{ color: showAccent ? 'var(--spotlight)' : 'var(--paper)', display: 'inline-block', transform: 'skewX(-12deg)' }}>/</span><br />
          Stage
        </div>
      </div>
    </section>
  );
};

// ── Picker ────────────────────────────────────────────────────
const Hero = ({ variant, navigate, showAccent }) => {
  if (variant === 'marquee') return <HeroMarquee navigate={navigate} showAccent={showAccent} />;
  if (variant === 'split')   return <HeroSplit navigate={navigate} showAccent={showAccent} />;
  return <HeroStatement navigate={navigate} showAccent={showAccent} />;
};

// ── Representation rail — anonymised roster snapshot ──────────
const Representation = () => {
  const D = window.CS_DATA;
  const items = D.images.portraits.slice(0, 6).map((p, i) => ({
    ...p, ...D.representation[i],
  }));
  return (
    <section style={{ maxWidth: 1600, margin: '0 auto', padding: '144px 48px 96px' }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 32, marginBottom: 64 }}>
        <div style={{ maxWidth: '60ch' }}>
          <Eyebrow style={{ color: 'var(--mid)' }}>Selected representation</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 900,
            fontSize: 'clamp(48px, 7vw, 96px)', letterSpacing: '-0.025em', lineHeight: 0.95,
            margin: '24px 0 24px', textWrap: 'balance',
          }}>
            A national list,<br />carefully built.
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--ink)', maxWidth: '52ch', margin: 0 }}>
            CentreStage represents actors, musical theatre performers, commercial talent, voice artists, young performers and emerging creatives for professional opportunities across Australia and beyond.
          </p>
        </div>
        <span className="cs-mono" style={{ color: 'var(--mid)', whiteSpace: 'nowrap' }}>
          {items.length} on the books · {D.cities.length} cities
        </span>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 24 }}>
        {items.map((p, i) => (
          <div key={i}>
            <Portrait src={p.url} ratio="3 / 4" code={String(i + 1).padStart(2, '0')} treatment="mono" />
            <div style={{ paddingTop: 12, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 8 }}>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 20, letterSpacing: '-0.02em' }}>{p.code}</span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--mid)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>{p.city}</span>
            </div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--mid-soft)', letterSpacing: '0.04em', marginTop: 2 }}>{p.discipline}</div>
          </div>
        ))}
      </div>
    </section>
  );
};

// ── Two-up pathway block: Youth vs Professional ───────────────
const PathSelector = ({ navigate }) => {
  const D = window.CS_DATA;
  return (
    <section style={{ maxWidth: 1600, margin: '0 auto', padding: '120px 48px' }}>
      <SectionHeader index="02" count="04" eyebrow="Two pathways into representation" />

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, border: '1px solid var(--hairline)' }}>
        {[
          {
            id: 'pro', tag: 'Ages 17+', title: 'Professional representation.',
            body: 'For working actors, musical theatre performers, commercial talent and voice artists ready to engage with the industry at a professional level. Resume and headshot required.',
            cta: 'Begin professional submission',
            img: D.images.proFeature, treat: 'mono',
          },
          {
            id: 'youth', tag: 'Ages 4 – 16', title: 'Youth representation.',
            body: 'For young performers building careers with industry-readiness, professional standards and family support. We work in partnership with parents and guardians throughout.',
            cta: 'Begin youth representation enquiry',
            img: 'assets/talent/youth-duo-bank.jpg', treat: 'warm',
          },
        ].map((p, i) => (
          <div key={p.id} style={{
            borderLeft: i === 0 ? '0' : '1px solid var(--hairline)',
            display: 'grid', gridTemplateRows: 'auto 1fr',
          }}>
            <Portrait src={p.img} ratio="16 / 9" treatment={p.treat} code={(i + 1) + ' / 02'} />
            <div style={{ padding: '40px 36px 36px', display: 'flex', flexDirection: 'column', gap: 20 }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <Eyebrow style={{ color: 'var(--mid)' }}>{p.tag}</Eyebrow>
                <span className="cs-mono" style={{ color: 'var(--mid)' }}>{i === 0 ? '01' : '02'} / 02</span>
              </div>
              <h3 style={{
                fontFamily: 'var(--font-display)', fontWeight: 900,
                fontSize: 'clamp(40px, 4.5vw, 64px)', letterSpacing: '-0.02em', lineHeight: 0.94,
                margin: 0,
              }}>
                {p.title}
              </h3>
              <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--ink)', margin: 0, maxWidth: '42ch' }}>
                {p.body}
              </p>
              <div style={{ marginTop: 'auto', paddingTop: 12 }}>
                <Button onClick={(e) => { e.preventDefault(); navigate(p.id); }}>{p.cta}</Button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};

// ── Editorial cinematic strip ─────────────────────────────────
const CinematicStrip = () => {
  const D = window.CS_DATA;
  return (
    <section style={{ background: 'var(--ink)', position: 'relative', overflow: 'hidden' }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: 'var(--hairline-ink)' }}>
        {D.images.environments.slice(0, 3).map((e, i) => (
          <Portrait key={i} src={e.url} ratio="3 / 2" treatment="mono" label={e.label} />
        ))}
      </div>
      <div style={{ maxWidth: 1600, margin: '0 auto', padding: '64px 48px 64px', display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 64, alignItems: 'flex-end' }}>
        <Eyebrow style={{ color: 'var(--fg-on-ink-2)' }}>The work</Eyebrow>
        <p style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(28px, 3.6vw, 56px)', letterSpacing: '-0.02em', lineHeight: 1.05, color: 'var(--paper)', margin: 0, textWrap: 'balance' }}>
          Theatre. Television. Film. Commercials. Voiceover. Streaming. Live performance.
        </p>
      </div>
    </section>
  );
};

// ── Testimonials ──────────────────────────────────────────────
const Testimonials = () => {
  const items = window.CS_DATA.testimonials;
  return (
    <section style={{ maxWidth: 1600, margin: '0 auto', padding: '144px 48px' }}>
      <SectionHeader index="03" count="04" eyebrow="In their words" />

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0, borderTop: '1px solid var(--hairline)' }}>
        {items.map((t, i) => (
          <figure key={i} style={{
            margin: 0, padding: '48px 40px',
            borderRight: i % 2 === 0 ? '1px solid var(--hairline)' : '0',
            borderBottom: '1px solid var(--hairline)',
            display: 'flex', flexDirection: 'column', gap: 28,
          }}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 80, lineHeight: 0.6, color: 'var(--ink)', height: 24 }}>"</div>
            <blockquote style={{
              margin: 0,
              fontFamily: 'var(--font-sans)', fontSize: 22, lineHeight: 1.4, letterSpacing: '-0.005em',
              color: 'var(--ink)', textWrap: 'balance',
            }}>
              {t.quote}
            </blockquote>
            <figcaption style={{ marginTop: 'auto', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 16, paddingTop: 24, borderTop: '1px solid var(--hairline)' }}>
              <div>
                <div style={{ fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 700, letterSpacing: '-0.01em' }}>{t.who}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--mid)', letterSpacing: '0.04em', marginTop: 2 }}>{t.role}</div>
              </div>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--mid)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>{t.city}</span>
            </figcaption>
          </figure>
        ))}
      </div>
    </section>
  );
};

// ── Industry partners marquee ─────────────────────────────────
const Partners = () => {
  const list = window.CS_DATA.partners;
  const block = (
    <span style={{ display: 'inline-flex', gap: 56, alignItems: 'center', paddingRight: 56 }}>
      {list.map((p, i) => (
        <span key={i} style={{
          fontFamily: 'var(--font-display)', fontWeight: 900,
          fontSize: 28, letterSpacing: '-0.02em',
          color: 'var(--ink)', whiteSpace: 'nowrap',
          display: 'inline-flex', alignItems: 'center', gap: 56,
        }}>
          {p}
          <span style={{ display: 'inline-block', width: 6, height: 6, background: 'var(--ink)' }} />
        </span>
      ))}
    </span>
  );
  return (
    <section style={{ padding: '96px 0', borderTop: '1px solid var(--hairline)', borderBottom: '1px solid var(--hairline)' }}>
      <div style={{ maxWidth: 1600, margin: '0 auto', padding: '0 48px' }}>
        <SectionHeader eyebrow="Industry partners · selected briefs cast" />
      </div>
      <div style={{ overflow: 'hidden', position: 'relative' }}>
        <div className="cs-marquee-track" style={{ animationDuration: '60s' }}>
          {block}
          {block}
        </div>
        <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none',
          background: 'linear-gradient(90deg, var(--paper) 0%, transparent 8%, transparent 92%, var(--paper) 100%)' }} />
      </div>
    </section>
  );
};

// ── Closing CTA ───────────────────────────────────────────────
const ClosingCTA = ({ navigate }) => {
  const D = window.CS_DATA;
  return (
    <section style={{ background: 'var(--ink)', color: 'var(--paper)', position: 'relative', overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `url(${D.images.environments[3].url})`,
        backgroundSize: 'cover', backgroundPosition: 'center',
        filter: 'grayscale(100%) contrast(1.1) brightness(0.4)',
        opacity: 0.5,
      }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(10,10,10,0.4) 0%, rgba(10,10,10,0.7) 100%)' }} />
      <div style={{ position: 'relative', maxWidth: 1600, margin: '0 auto', padding: '160px 48px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 56 }}>
          <span className="cs-mono" style={{ color: 'var(--fg-on-ink-2)' }}>04 / 04</span>
          <Eyebrow style={{ color: 'var(--fg-on-ink-2)' }}>Casting a role</Eyebrow>
          <div style={{ flex: 1, height: 1, background: 'var(--hairline-ink)' }} />
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 96, alignItems: 'flex-end' }}>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 900,
            fontSize: 'clamp(56px, 9vw, 152px)', letterSpacing: '-0.035em', lineHeight: 0.88,
            margin: 0, color: 'var(--paper)', textWrap: 'balance',
          }}>
            Casting<br/>directors.<br/>Send the brief.
          </h2>
          <div>
            <p style={{ fontSize: 19, lineHeight: 1.55, color: 'var(--paper)', maxWidth: '36ch', marginTop: 0 }}>
              We return considered shortlists — not walls of headshots. Industry briefs answered within two working days.
            </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 }}>
              Contact the agency <span style={{ marginLeft: 8 }}>→</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};

// ── Home composition ─────────────────────────────────────────
const HomeScreen = ({ navigate, tweaks }) => {
  return (
    <main data-screen-label="Home">
      <Hero variant={tweaks.heroVariant} navigate={navigate} showAccent={tweaks.showAccent} />
      <Representation />
      <Hairline />
      <PathSelector navigate={navigate} />
      <CinematicStrip />
      <Testimonials />
      <Partners />
      <ClosingCTA navigate={navigate} />
    </main>
  );
};

Object.assign(window, { HomeScreen });
