function MainComponent() {
  const [showVideo, setShowVideo] = useState(false);

  return (
    <div className="min-h-screen bg-[#121212] text-white font-roboto">
      {/* Hero Section */}
      <header className="relative h-[500px] flex items-center justify-center overflow-hidden">
        <div
          className="absolute inset-0 bg-cover bg-center opacity-70"
          style={{
            backgroundImage:
              "url('http://mustafakaraca.com.tr/screenshot-Google%20Pixel%204-10.0.png')",
          }}
        ></div>
        <div className="absolute inset-0 bg-gradient-to-b from-transparent to-[#121212]"></div>
        <div className="z-10 text-center px-4">
          <h1 className="text-4xl md:text-6xl font-bold mb-4 text-[#f6d55c]">
            KUTSAL SAVUNMA
          </h1>
          <p className="text-xl md:text-2xl mb-4">2D Stratejik Savunma Oyunu</p>
          <p className="text-lg md:text-xl mb-8 max-w-2xl mx-auto">
            Çocuklarınızın amaçsız oyunlar yerine vicdani bir görev edinmeleri
            ve Filistin'e destek olmaları için tasarlandı
          </p>
          <a
            href="https://play.google.com/store/apps/details?id=com.uren.kutsalsavunma"
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center bg-[#00875f] hover:bg-[#006e4c] text-white font-bold py-3 px-6 rounded-lg transition duration-300"
          >
            <i className="fab fa-google-play mr-2 text-xl"></i>
            Google Play'de İndir
          </a>
        </div>
      </header>

      {/* Mission Statement */}
      <section className="py-12 bg-[#00875f] px-4 text-center">
        <div className="max-w-4xl mx-auto">
          <h2 className="text-2xl md:text-3xl font-bold mb-4">MİSYONUMUZ</h2>
          <p className="text-lg">
            Bu 2D tek oyunculu oyun, çocuklarımıza amaçsız dijital aktiviteler
            yerine vicdani bir sorumluluk duygusu kazandırmak için
            tasarlanmıştır. Kutsal Savunma ile çocuklarınız hem eğlenceli bir
            stratejik oyun deneyimi yaşarken hem de Filistin halkına destek olma
            bilincini geliştirebilirler.
          </p>
        </div>
      </section>

      {/* Game Features */}
      <section className="py-16 px-4 max-w-6xl mx-auto">
        <h2 className="text-3xl font-bold text-center mb-12">
          OYUN ÖZELLİKLERİ
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div className="bg-[#1e1e1e] p-6 rounded-lg text-center">
            <div className="w-16 h-16 bg-[#00875f] rounded-full flex items-center justify-center mx-auto mb-4">
              <i className="fas fa-gamepad text-2xl"></i>
            </div>
            <h3 className="text-xl font-bold mb-2">2D Stratejik Oynanış</h3>
            <p>
              Düşmanlarınıza karşı savunma stratejileri geliştirin ve
              kaynaklarınızı akıllıca yönetin.
            </p>
          </div>
          <div className="bg-[#1e1e1e] p-6 rounded-lg text-center">
            <div className="w-16 h-16 bg-[#00875f] rounded-full flex items-center justify-center mx-auto mb-4">
              <i className="fas fa-map-marked-alt text-2xl"></i>
            </div>
            <h3 className="text-xl font-bold mb-2">Farklı Bölgeler</h3>
            <p>
              Kudüs, İstanbul ve Mekke gibi önemli şehirlerde operasyonlar
              gerçekleştirin ve kutsal değerleri savunun.
            </p>
          </div>
          <div className="bg-[#1e1e1e] p-6 rounded-lg text-center">
            <div className="w-16 h-16 bg-[#00875f] rounded-full flex items-center justify-center mx-auto mb-4">
              <i className="fas fa-user-alt text-2xl"></i>
            </div>
            <h3 className="text-xl font-bold mb-2">Tek Oyunculu Mod</h3>
            <p>
              Zengin hikaye ve görevlerle dolu tek oyunculu modda stratejik
              yeteneklerinizi geliştirirken Filistin meselesi hakkında bilgi
              edinin.
            </p>
          </div>
        </div>
      </section>

      {/* Game Screenshots */}
      <section className="py-16 bg-[#1a1a1a] px-4">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-3xl font-bold text-center mb-12">
            EKRAN GÖRÜNTÜLERİ
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="overflow-hidden rounded-lg shadow-lg">
              <img
                src="http://mustafakaraca.com.tr/screenshot-Google%20Pixel%204-10.0.png"
                alt="Kutsal Savunma Ana Ekran"
                className="w-full h-64 object-cover"
              />
              <div className="p-4 bg-[#1e1e1e]">
                <h3 className="font-bold text-center">Operasyon Seçimi</h3>
              </div>
            </div>
            <div className="overflow-hidden rounded-lg shadow-lg">
              <img
                src="http://mustafakaraca.com.tr/screenshot-Google%20Pixel%204-10.0%20_3_.png"
                alt="Kutsal Savunma Oyun İçi"
                className="w-full h-64 object-cover"
              />
              <div className="p-4 bg-[#1e1e1e]">
                <h3 className="font-bold text-center">Savunma Stratejileri</h3>
              </div>
            </div>
            <div className="overflow-hidden rounded-lg shadow-lg">
              <img
                src="http://mustafakaraca.com.tr/screenshot-Google%20Pixel%204-10.0%20_3_.png"
                alt="Kutsal Savunma Görevler"
                className="w-full h-64 object-cover"
              />
              <div className="p-4 bg-[#1e1e1e]">
                <h3 className="font-bold text-center">Görev Ekranı</h3>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Educational Value */}
      <section className="py-16 px-4 max-w-6xl mx-auto">
        <h2 className="text-3xl font-bold text-center mb-12">EĞİTİM DEĞERİ</h2>
        <div className="bg-[#1e1e1e] p-8 rounded-lg">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div>
              <h3 className="text-xl font-bold mb-4">
                Çocuklarınız İçin Değerli Bir Seçim
              </h3>
              <ul className="list-disc pl-6 space-y-3">
                <li>
                  2D oyun formatında stratejik düşünme ve problem çözme
                  becerilerini geliştirir
                </li>
                <li>Kaynakları doğru yönetmeyi öğretir</li>
                <li>Toplumsal sorumluluk bilincini artırır</li>
                <li>Filistin davasına karşı farkındalık yaratır</li>
                <li>Amaçsız oyunlar yerine anlamlı bir aktivite sunar</li>
              </ul>
            </div>
            <div>
              <h3 className="text-xl font-bold mb-4">Oyun İçi Hedefler</h3>
              <p className="mb-4">
                Oyuncular, tek kişilik modda stratejik savunma taktikleriyle
                kutsal değerleri korumayı öğrenirken, aynı zamanda gerçek
                dünyada da benzer değerleri savunmanın önemini kavrarlar.
              </p>
              <p>
                Her tamamlanan görev, çocuklarınızın vicdani sorumluluğunu
                pekiştirirken, oyun içi puanlar kazanmalarını sağlar. Bu sayede
                hem eğlenceli hem de eğitici bir deneyim yaşarlar.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Video Section */}
      <section className="py-16 px-4 max-w-6xl mx-auto text-center">
        <h2 className="text-3xl font-bold mb-12">OYUN TANITIM VİDEOSU</h2>
        <div className="relative max-w-3xl mx-auto aspect-video bg-[#1e1e1e] rounded-lg overflow-hidden">
          {showVideo ? (
            <iframe
              width="100%"
              height="100%"
              src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1"
              title="Kutsal Savunma Oyun Tanıtımı"
              frameBorder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowFullScreen
              className="absolute inset-0"
            ></iframe>
          ) : (
            <div
              className="absolute inset-0 flex items-center justify-center cursor-pointer bg-[#1e1e1e]"
              onClick={() => setShowVideo(true)}
            >
              <div className="w-20 h-20 bg-[#00875f] rounded-full flex items-center justify-center">
                <i className="fas fa-play text-2xl"></i>
              </div>
            </div>
          )}
        </div>
      </section>

      {/* Testimonials */}
      <section className="py-16 bg-[#1a1a1a] px-4">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-3xl font-bold text-center mb-12">
            EBEVEYN YORUMLARI
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div className="bg-[#1e1e1e] p-6 rounded-lg">
              <div className="flex items-center mb-4">
                <div className="w-12 h-12 bg-[#00875f] rounded-full flex items-center justify-center mr-4">
                  <i className="fas fa-user"></i>
                </div>
                <div>
                  <h3 className="font-bold">Ahmet Y.</h3>
                  <div className="flex text-yellow-400">
                    <i className="fas fa-star"></i>
                    <i className="fas fa-star"></i>
                    <i className="fas fa-star"></i>
                    <i className="fas fa-star"></i>
                    <i className="fas fa-star"></i>
                  </div>
                </div>
              </div>
              <p></p>
            </div>
            <div className="bg-[#1e1e1e] p-6 rounded-lg">
              <div className="flex items-center mb-4">
                <div className="w-12 h-12 bg-[#00875f] rounded-full flex items-center justify-center mr-4">
                  <i className="fas fa-user"></i>
                </div>
                <div>
                  <h3 className="font-bold">Mehmet K.</h3>
                  <div className="flex text-yellow-400">
                    <i className="fas fa-star"></i>
                    <i className="fas fa-star"></i>
                    <i className="fas fa-star"></i>
                    <i className="fas fa-star"></i>
                    <i className="fas fa-star-half-alt"></i>
                  </div>
                </div>
              </div>
              <p></p>
            </div>
          </div>
        </div>
      </section>

      {/* Developer Note */}
      <section className="py-12 px-4 bg-[#00875f] text-center">
        <div className="max-w-4xl mx-auto">
          <h2 className="text-2xl font-bold mb-4">GELİŞTİRİCİDEN NOT</h2>
          <p className="text-lg italic">
            "Bu 2D tek oyunculu oyunu çocuklarım amaçsız oyunlar yerine
            Filistin'e yardım etmek gibi vicdani bir görevi benimsesinler diye
            geliştirdim. Teknolojinin sadece eğlence değil, aynı zamanda değer
            ve bilinç oluşturmak için de kullanılabileceğine inanıyorum."
          </p>
          <p className="mt-4 font-bold">- Mustafa Karaca, Geliştirici</p>
        </div>
      </section>

      {/* Download CTA */}
      <section className="py-16 px-4 text-center">
        <div className="max-w-3xl mx-auto">
          <h2 className="text-3xl md:text-4xl font-bold mb-6">
            HEMEN İNDİR VE AMACINA HİZMET ET!
          </h2>
          <p className="text-xl mb-8">
            Kutsal Savunma 2D stratejik oyununu şimdi indirin ve çocuklarınıza
            hem eğlenceli hem de anlamlı bir deneyim sunun.
          </p>
          <a
            href="https://play.google.com/store/apps/details?id=com.uren.kutsalsavunma"
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center bg-[#00875f] hover:bg-[#006e4c] text-white font-bold py-4 px-8 rounded-lg text-xl transition duration-300"
          >
            <i className="fab fa-google-play mr-3 text-2xl"></i>
            Google Play'de İndir
          </a>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-[#0a0a0a] py-8 px-4">
        <div className="max-w-6xl mx-auto text-center">
          <p className="mb-2">Made in Mustafa Karaca</p>
          <p className="mb-4">© 2025 Kutsal Savunma. Tüm Hakları Saklıdır.</p>
          <div className="flex justify-center space-x-4">
            <a
              href="#"
              className="text-white hover:text-[#00875f] transition duration-300"
            >
              <i className="fab fa-facebook-f text-xl"></i>
            </a>
            <a
              href="#"
              className="text-white hover:text-[#00875f] transition duration-300"
            >
              <i className="fab fa-twitter text-xl"></i>
            </a>
            <a
              href="#"
              className="text-white hover:text-[#00875f] transition duration-300"
            >
              <i className="fab fa-instagram text-xl"></i>
            </a>
            <a
              href="#"
              className="text-white hover:text-[#00875f] transition duration-300"
            >
              <i className="fab fa-youtube text-xl"></i>
            </a>
          </div>
        </div>
      </footer>
    </div>
  );
}