// Models — dedicated section explaining the model library on the landing page.
// Mirrors the visual rhythm of PSGallery (cream background, eyebrow + heading
// on left, paragraph on right) with a wide model library image as the hero
// visual and a small row of headshots underneath that reuses the eq-model-N
// assets already loaded by the hero equation. Keeps the page self-contained.
function PSModels() {
  // Reuse the model headshot assets the equation hero already preloads.
  const HEADSHOTS = [
    'assets/eq-model-2.jpg',
    'assets/eq-model-3.jpg',
    'assets/eq-model-4.jpg',
    'assets/eq-model-5.jpg',
    'assets/eq-model-6.jpg',
    'assets/eq-model-7.jpg',
    'assets/eq-model-8.jpg',
    'assets/eq-model-head.jpg',
  ];

  return (
    <section id="models" className="ps-section" data-mobile-pad="true" data-mobile-y="md" style={{ background: 'var(--cream)', padding: '128px 48px' }}>
      <div className="ps-stack-mobile" style={{ maxWidth: 1320, margin: '0 auto 56px', 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>
            Models
          </div>
          <h2 className="celestial" style={{ fontSize: 'clamp(48px,6vw,96px)', color: 'var(--cocoa)', margin: 0 }}>
            Pick the<br/>face.
          </h2>
        </div>
        <p style={{ fontFamily: '"La Villa", sans-serif', fontSize: 17, lineHeight: 1.6, color: 'var(--fg-2)', maxWidth: 460, margin: 0, justifySelf: 'end' }}>
          Pick a model from our library to feature in your final image. Filter by skin tone, hair, or eyes. <span style={{ color: 'var(--cocoa)' }}>130+ models</span>, growing. <span style={{ color: 'var(--cocoa)' }}>Or take a selfie</span> right in the picker and use yourself.
        </p>
      </div>

      {/* Big library mosaic */}
      <div style={{
        maxWidth: 1320, margin: '0 auto',
        position: 'relative',
        background: 'var(--cocoa)',
        padding: '6px',
        overflow: 'hidden',
      }}>
        <img
          src="assets/models-library.jpg"
          alt="The model library"
          loading="lazy"
          decoding="async"
          style={{
            width: '100%',
            display: 'block',
            objectFit: 'cover',
          }}
        />
      </div>

      {/* Headshot strip — same row of faces the hero equation uses, recontextualised */}
      <div className="ps-models-strip" style={{
        maxWidth: 1320, margin: '20px auto 0',
        display: 'grid',
        gridTemplateColumns: 'repeat(8, 1fr)',
        gap: 6,
      }}>
        {HEADSHOTS.map((src, i) => (
          <div key={i} style={{
            position: 'relative',
            aspectRatio: '3 / 4',
            overflow: 'hidden',
            background: 'var(--cream-deep, #EFE7DC)',
          }}>
            <img
              src={src}
              alt=""
              loading="lazy"
              decoding="async"
              style={{
                position: 'absolute', inset: 0,
                width: '100%', height: '100%',
                objectFit: 'cover',
                objectPosition: 'center',
              }}
            />
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { PSModels });