// Game feature row: Boba Tale, Boba Run — alternating image position
const GameFeature = ({
  id, eyebrow, title, body, tint = 'cafe',
  imageLabel = 'Gameplay still', imageSub = 'PNG',
  imageSrc, imageAlt,
  reverse = false, urls = {},
}) => {
  const M = window.Motion.motion;
  const fade = (delay = 0) => ({
    initial: { opacity: 0, y: 30 },
    whileInView: { opacity: 1, y: 0 },
    viewport: { once: true, margin: '-80px' },
    transition: { duration: 0.7, ease: [0.22, 1, 0.36, 1], delay },
  });

  const tintMap = {
    cafe: '#F5DEB3',
    forest: '#C8E5C0',
    sunset: '#FFE0A0',
    bubble: '#FFD3D3',
    sky: '#BEE4F0',
  };

  return (
    <section className="feature">
      <div className="container">
      <div
        className="feature-row"
        style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1.05fr',
          gap: 'clamp(28px, 5vw, 72px)',
          alignItems: 'center',
          direction: reverse ? 'rtl' : 'ltr',
        }}
      >
        <div className="feature-text" style={{ direction: 'ltr' }}>
          <M.div {...fade(0)}>
            {eyebrow && <Eyebrow variant="on-light">{eyebrow}</Eyebrow>}
          </M.div>
          <M.h2 className="h-feature" {...fade(0.08)} style={{ marginTop: 14, fontSize: 48 }}>
            {title}
          </M.h2>
          <M.p className="body feature-sub" {...fade(0.14)} style={{ marginTop: 16 }}>
            {body}
          </M.p>
          <M.div {...fade(0.22)} style={{ marginTop: 32 }}>
            <StoreButtons urls={urls} />
          </M.div>
        </div>

        <M.div {...fade(0.1)} style={{ direction: 'ltr' }}>
          {imageSrc ? (
            <picture>
              <source srcSet={imageSrc.replace(/\.(png|jpe?g)$/i, '.webp')} type="image/webp" />
              <img
                src={imageSrc}
                alt={imageAlt || imageLabel}
                loading="lazy"
                style={{
                  width: '100%',
                  height: 380,
                  objectFit: 'cover',
                  borderRadius: 'var(--radius-card)',
                  display: 'block',
                  background: tintMap[tint] || tintMap.cafe,
                  border: '1px solid #DDE5ED',
                }}
              />
            </picture>
          ) : (
            <GameArtPlaceholder
              label={imageLabel}
              sub={imageSub}
              tint={tintMap[tint] || tintMap.cafe}
              height={380}
            />
          )}
        </M.div>
      </div>
      </div>

      <style>{`
        .feature-sub { font-size: 18px; }
        @media (max-width: 810px) {
          .feature-row { grid-template-columns: 1fr !important; direction: ltr !important; }
          .feature-text { text-align: center; }
          .feature-text [style*="display: flex"] { justify-content: center; }
          .feature-sub { font-size: 16px; }
        }
      `}</style>
    </section>
  );
};

window.GameFeature = GameFeature;