var P = window.P;
var { SectionTitle } = window;

function AppShowcase() {
  var features = [
    {
      title: 'Çevrimdışı oynanır',
      body: 'İnternet olmadan, reklamsız ve hesap açmadan oyuna gir.',
    },
    {
      title: '3 bot zorluğu',
      body: 'Kolay, Normal ve Zor rakiplerle kendi hızında ustalaş.',
    },
    {
      title: '24 başarı',
      body: 'Yeni hedeflerin kilidini aç ve pizza ustalığını takip et.',
    },
    {
      title: '11 dil',
      body: 'iPhone ve iPad’de ailenle tercih ettiğin dilde oyna.',
    },
  ];

  var screenshots = [
    ['src/screenshots/welcome.jpg', 'Mahallene hoş geldin'],
    ['src/screenshots/gameplay.jpg', 'Pişir, karşılaştır ve puanla'],
    ['src/screenshots/cards.jpg', 'Güncel kart destesini keşfet'],
    ['src/screenshots/achievements.jpg', '24 başarının kilidini aç'],
  ];

  return (
    <section id="uygulama" className="yv-app-showcase">
      <div className="yv-app-showcase-inner">
        <SectionTitle
          eyebrow="iPhone ve iPad uygulaması"
          title="Kartların canlandı. Pizza masası cebinde."
          sub="Yumville artık App Store’da: güncel kart çizimleri, akıllı botlar, başarılar ve çevrimdışı oyun tek uygulamada."
        />

        <div className="yv-feature-grid">
          {features.map((feature) => (
            <article key={feature.title} className="yv-feature-card">
              <strong>{feature.title}</strong>
              <p>{feature.body}</p>
            </article>
          ))}
        </div>

        <div className="yv-screenshot-grid" aria-label="Yumville uygulama ekranları">
          {screenshots.map(([src, caption]) => (
            <figure key={src} className="yv-screenshot-card">
              <img
                src={src}
                alt={caption}
                loading="lazy"
                decoding="async"
                width="648"
                height="1400"
              />
              <figcaption>{caption}</figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { AppShowcase });