// Bulk Shoot showcase — landing section. One outfit shown across studio
// backdrops + real Vault Stock scenes; copy makes clear you can run up to
// 50 outfits in a single batch. (Function name kept as PSCampaignClaude so
// the index render order / window export stays intact.)
function PSCampaignClaude() {
  const OUTPUTS = [
    'assets/bulk-1.jpg',
    'assets/bulk-2.jpg',
    'assets/bulk-3.jpg',
    'assets/bulk-4.jpg',
  ];

  return (
    <section id="campaign-claude" className="ps-section" data-mobile-pad="true" data-mobile-y="md" style={{ background: 'var(--cream)', padding: '120px 48px' }}>
      {/* Header */}
      <div className="ps-stack-mobile" style={{ maxWidth: 1320, margin: '0 auto 64px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'end' }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 14 }}>
            <span style={{ display: 'inline-block', width: 24, height: 1, background: 'var(--cocoa)', verticalAlign: 'middle', marginRight: 12 }}></span>
            Bulk Shoot
          </div>
          <h2 className="celestial" style={{ fontSize: 'clamp(48px,6vw,96px)', color: 'var(--cocoa)', margin: 0 }}>
            Fifty outfits.<br/>One run.
          </h2>
        </div>
        <p style={{ fontFamily: '"La Villa", sans-serif', fontSize: 17, lineHeight: 1.6, color: 'var(--fg-2)', maxWidth: 480, margin: 0, justifySelf: 'end' }}>
          Upload up to 50 outfits, pick your models, scenes and angles, and generate a whole campaign in one run. <span style={{ color: 'var(--cocoa)' }}>One outfit shown here, across every backdrop and real-world scene.</span> No studio, no booking, no reshoots.
        </p>
      </div>

      {/* Body — the run (left) + campaign grid (right) */}
      <div className="ps-campaignclaude-grid" style={{ maxWidth: 1320, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.55fr', gap: 56, alignItems: 'stretch' }}>

        {/* LEFT — the run, with the scale stat front and centre */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 28, height: '100%' }}>
          <div>
            <div style={{ fontSize: 9, letterSpacing: '0.28em', textTransform: 'uppercase', color: 'var(--ink-45, rgba(42,36,32,0.55))', marginBottom: 10 }}>The run</div>
            <p style={{ fontFamily: '"Silver Editorial", serif', fontStyle: 'italic', fontSize: 22, lineHeight: 1.3, color: 'var(--cocoa)', letterSpacing: '-0.01em', margin: 0 }}>
              "one outfit, every backdrop and real scene"
            </p>
          </div>

          <div style={{ margin: 'auto 0' }}>
            <div style={{ fontFamily: '"La Villa", sans-serif', fontWeight: 500, fontSize: 'clamp(54px, 7vw, 82px)', color: 'var(--cocoa)', lineHeight: 0.95, letterSpacing: '-0.02em' }}>
              up to 50
            </div>
            <div style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--ink-45, rgba(42,36,32,0.55))', marginTop: 10 }}>
              outfits in a single run
            </div>
            <p style={{ fontFamily: '"La Villa", sans-serif', fontSize: 14, lineHeight: 1.55, color: 'var(--fg-2)', maxWidth: 280, marginTop: 18 }}>
              Across your chosen models, every backdrop and Vault Stock scene, and every angle.
            </p>
          </div>
        </div>

        {/* RIGHT — the campaign grid (one outfit, four scenes) */}
        <div>
          <div style={{ marginBottom: 16 }}>
            <div style={{ fontSize: 9, letterSpacing: '0.28em', textTransform: 'uppercase', color: 'var(--ink-45, rgba(42,36,32,0.55))' }}>Your campaign · one outfit, every scene</div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            {OUTPUTS.map((src, i) => (
              <div key={i} style={{ aspectRatio: '3 / 4', background: '#F2EEE7', overflow: 'hidden', border: '1px solid rgba(42,36,32,0.10)' }}>
                <img src={src} alt={`Bulk shoot result ${i + 1}`} loading="lazy" decoding="async" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', display: 'block' }} />
              </div>
            ))}
          </div>
        </div>

      </div>
    </section>
  );
}

Object.assign(window, { PSCampaignClaude });