// Cozy Relaxing Games — 3 visual cards
const CozyGames = () => {
  const M = window.Motion.motion;

  const fade = (delay = 0) => ({
    initial: { opacity: 0, y: 30 },
    whileInView: { opacity: 1, y: 0 },
    viewport: { once: true, margin: '-60px' },
    transition: { duration: 0.7, ease: [0.22, 1, 0.36, 1], delay },
  });

  const cards = [
    { title: 'Boba Friends', sub: 'Make cute boba drinks', tint: '#BEE4F0', tag: 'CITY', img: 'public/img-boba-friends.png', href: 'https://apps.apple.com/us/app/boba-friends/id6451094929' },
    { title: 'Capy Cafe', sub: 'Cafe simulator with capybaras', tint: '#FFE0A0', tag: 'SLICE-OF-LIFE', img: 'public/img-capybara-cafe.png', href: 'https://apps.apple.com/us/app/capybara-cafe/id6605927469' },
    { title: 'Toto Potion Shop', sub: 'Craft magical potions', tint: '#FFD3D3', tag: 'CRAFTING', img: 'public/img-toto-potion-shop.png', href: 'https://apps.apple.com/us/app/toto-potion-shop/id6743040548' },
  ];

  return (
    <section>
      <div className="container center">
        <div id="games">
          <M.div {...fade(0)}>
            <Eyebrow
              variant="on-light"
              icon={<img src="public/icon-star.svg" alt="" aria-hidden="true" style={{ width: 20, height: 20, display: 'block' }} />}
            >
              Game Directory
            </Eyebrow>
          </M.div>
        </div>
        <M.h2 className="h-section" {...fade(0.08)} style={{ marginTop: 14 }}>
          Cozy Relaxing Games
        </M.h2>
        <M.p {...fade(0.14)} className="body cozy-sub" style={{ margin: '14px auto 0' }}>
          Aesthetic games to brighten your day
        </M.p>

        <div
          className="cozy-grid"
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
            gap: 20,
            marginTop: 48,
          }}
        >
          {cards.map((c, i) => (
            <M.a
              key={c.title}
              href={c.href}
              target="_blank"
              rel="noopener noreferrer"
              {...fade(0.1 + i * 0.08)}
              whileHover={{ y: -6 }}
              transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1], delay: 0.1 + i * 0.08 }}
              style={{
                display: 'block',
                position: 'relative',
                borderRadius: 'var(--radius-card)',
                overflow: 'hidden',
                background: c.tint,
                textAlign: 'center',
                aspectRatio: '388 / 372',
              }}
            >
              {c.img ? (
                <picture>
                  <source srcSet={c.img.replace(/\.(png|jpe?g)$/i, '.webp')} type="image/webp" />
                  <img
                    src={c.img}
                    alt={c.title}
                    loading="lazy"
                    style={{
                      position: 'absolute', inset: 0,
                      width: '100%', height: '100%',
                      objectFit: 'cover', objectPosition: 'center bottom',
                      display: 'block',
                    }}
                  />
                </picture>
              ) : (
                <div className="placeholder-art" style={{ '--bg': 'transparent', position: 'absolute', inset: 0 }}>
                  <Icon.Sparkle style={{ width: 28, height: 28, opacity: 0.5 }} />
                  <div className="ph-label">{c.tag} ART</div>
                  <div className="ph-sub">illustration</div>
                </div>
              )}
              <div style={{
                position: 'absolute', left: 0, right: 0, top: 0,
                padding: '28px 20px 16px',
                zIndex: 2,
              }}>
                <div style={{ fontWeight: 800, fontSize: 24, color: 'var(--brand-black)', letterSpacing: '-0.01em' }}>{c.title}</div>
                <div style={{ fontSize: 20, color: 'var(--text-muted)', marginTop: -2 }}>{c.sub}</div>
              </div>
            </M.a>
          ))}
        </div>
      </div>

      <style>{`
        .cozy-sub { font-size: 20px; }
        @media (max-width: 810px) {
          .cozy-grid { grid-template-columns: 1fr !important; }
          .cozy-sub { font-size: 17px; }
        }
      `}</style>
    </section>
  );
};

window.CozyGames = CozyGames;