// GetContent — device showcase na "Onze aanpak". Drie aangeleverde beelden in
// één premium, gelaagde compositie: telefoon links, laptop centraal & dominant,
// telefoon rechts. Alle drie zweven heel subtiel met eigen timing; bij hover
// komen ze iets naar voren (scale 1.03–1.06).
function PhoneShowcase() {
  return (
    <section style={{ background: 'var(--surface-page)', padding: 'var(--section-pad-y) 0', overflow: 'visible' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--gutter)' }}>
        <div style={{ textAlign: 'center', maxWidth: 680, margin: '0 auto 56px' }}>
          <span className="gc-eyebrow" style={{ justifyContent: 'center', marginBottom: 14 }}>Wat je kunt laten maken</span>
          <h2 style={{ fontSize: 'var(--fs-display-lg)', fontWeight: 'var(--fw-semibold)', letterSpacing: '-0.02em', lineHeight: 'var(--lh-display)', marginBottom: 16 }}>
            Van social ads tot foto’s voor je bruiloft
          </h2>
          <p className="gc-justify" style={{ fontSize: 'var(--fs-lead)', color: 'var(--text-body)', lineHeight: 1.6 }}>
            Alles begint met de juiste creator.
          </p>
        </div>

        <div className="gc-stage">
          {/* gc-dev-shadow = statische grond-ellips (radial-gradient, geen filter — Safari-veilig);
              het device zweeft erboven, wat een subtiel parallax-diepte-effect geeft */}
          <div className="gc-dev gc-dev-left"><span className="gc-dev-shadow" aria-hidden /><div className="gc-dev-float"><img src={(window.__resources && window.__resources.phoneLeft) || '../../assets/showcase/phone-left.png'} alt="UGC video voor Nutribites" loading="lazy" /></div></div>
          <div className="gc-dev gc-dev-right"><span className="gc-dev-shadow" aria-hidden /><div className="gc-dev-float"><img src={(window.__resources && window.__resources.phoneRight) || '../../assets/showcase/phone-right.png'} alt="Productfotografie voor sous" loading="lazy" /></div></div>
          <div className="gc-dev gc-dev-center"><span className="gc-dev-shadow" aria-hidden /><div className="gc-dev-float"><img src={(window.__resources && window.__resources.laptopCenter) || '../../assets/showcase/laptop-center.png'} alt="Merkvideo op laptop" loading="lazy" /></div></div>
        </div>
      </div>
    </section>
  );
}
window.PhoneShowcase = PhoneShowcase;