'use client';

import { Header } from '@/components/ui/Header';
import { Footer } from '@/components/ui/Footer';

export default function AboutPage() {
  return (
    <div className="flex flex-col min-h-screen">
      <Header appName="Gaming Tournament" />

      <main className="flex-1 py-12">
        <div className="container-max max-w-4xl">
          {/* Page Header */}
          <div className="mb-12 text-center">
            <h1 className="text-4xl font-bold mb-4">আমাদের সম্পর্কে</h1>
            <p className="text-lg text-slate-400">বাংলাদেশের নির্ভরযোগ্য গেমিং টুর্নামেন্ট প্ল্যাটফর্ম</p>
          </div>

          {/* Content Sections */}
          <div className="space-y-12">
            {/* Mission */}
            <section className="card-featured">
              <h2 className="text-2xl font-bold mb-4 flex items-center gap-3">
                <span>🎯</span> আমাদের মিশন
              </h2>
              <p className="text-slate-300 leading-relaxed mb-4">
                Gaming Tournament হল বাংলাদেশের প্রথম পেশাদার অনলাইন গেমিং টুর্নামেন্ট প্ল্যাটফর্ম। আমাদের উদ্দেশ্য হল প্রতিটি গেমারকে একটি নিরাপদ, স্বচ্ছ এবং ন্যায্য পরিবেশে প্রতিযোগিতা করার সুযোগ দেওয়া।
              </p>
              <p className="text-slate-300 leading-relaxed">
                আমরা বিশ্বাস করি যে প্রতিভা এবং নিষ্ঠা পুরস্কৃত হওয়া উচিত, এবং প্রতিটি খেলোয়াড়কে তাদের সম্পূর্ণ সম্ভাবনা প্রদর্শন করার সুযোগ পাওয়া উচিত।
              </p>
            </section>

            {/* Values */}
            <section>
              <h2 className="text-2xl font-bold mb-6 flex items-center gap-3">
                <span>⭐</span> আমাদের মূল্যবোধ
              </h2>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {[
                  {
                    title: 'স্বচ্ছতা',
                    description: 'সমস্ত লেনদেন এবং ফলাফল সম্পূর্ণভাবে স্বচ্ছ এবং যাচাইযোগ্য।',
                  },
                  {
                    title: 'ন্যায্যতা',
                    description: 'অ্যান্টি-চিট সিস্টেম এবং কঠোর নিয়মকানুন নিশ্চিত করে ন্যায্য খেলা।',
                  },
                  {
                    title: 'নিরাপত্তা',
                    description: 'আপনার ব্যক্তিগত তথ্য এবং তহবিল সর্বোচ্চ সুরক্ষা মান দ্বারা সুরক্ষিত।',
                  },
                  {
                    title: 'উদ্ভাবন',
                    description: 'ক্রমাগত নতুন বৈশিষ্ট্য এবং উন্নতির মাধ্যমে সেবা উন্নত করা।',
                  },
                ].map((value, index) => (
                  <div key={index} className="card">
                    <h3 className="text-xl font-bold mb-2 text-orange-500">{value.title}</h3>
                    <p className="text-slate-300">{value.description}</p>
                  </div>
                ))}
              </div>
            </section>

            {/* Features */}
            <section className="card-featured">
              <h2 className="text-2xl font-bold mb-6 flex items-center gap-3">
                <span>✨</span> কেন Gaming Tournament বেছে নিন
              </h2>
              <ul className="space-y-3 text-slate-300">
                <li className="flex items-start gap-3">
                  <span className="text-green-400 mt-1">✓</span>
                  <span>নিরাপদ bKash, Nagad, Rocket পেমেন্ট ইন্টিগ্রেশন</span>
                </li>
                <li className="flex items-start gap-3">
                  <span className="text-green-400 mt-1">✓</span>
                  <span>প্রতিদিন নতুন টুর্নামেন্ট এবং বিশাল পুরস্কার পুল</span>
                </li>
                <li className="flex items-start gap-3">
                  <span className="text-green-400 mt-1">✓</span>
                  <span>তাৎক্ষণিক জয়ের টাকা উইথড্রও</span>
                </li>
                <li className="flex items-start gap-3">
                  <span className="text-green-400 mt-1">✓</span>
                  <span>পেশাদার ম্যাচ ম্যানেজমেন্ট এবং রেফারি</span>
                </li>
                <li className="flex items-start gap-3">
                  <span className="text-green-400 mt-1">✓</span>
                  <span>২৪/৭ গ্রাহক সেবা এবং সহায়তা</span>
                </li>
                <li className="flex items-start gap-3">
                  <span className="text-green-400 mt-1">✓</span>
                  <span>কম্যুনিটি ফোরাম এবং লিডারবোর্ড</span>
                </li>
              </ul>
            </section>

            {/* Timeline */}
            <section>
              <h2 className="text-2xl font-bold mb-6 flex items-center gap-3">
                <span>📅</span> আমাদের যাত্রা
              </h2>
              <div className="space-y-4">
                {[
                  { year: '২০২৪', event: 'Gaming Tournament প্ল্যাটফর্ম চালু হয়' },
                  { year: '২০২৪', event: 'প্রথম ১০,০০০ সক্রিয় ব্যবহারকারী' },
                  { year: '২০২৪', event: 'মোবাইল অ্যাপ লঞ্চ' },
                  { year: 'আসছে', event: 'আঞ্চলিক চ্যাম্পিয়নশিপ এবং বিশ্ব স্তরের ইভেন্ট' },
                ].map((item, index) => (
                  <div key={index} className="flex gap-6">
                    <div className="text-right min-w-20">
                      <span className="font-bold text-orange-500">{item.year}</span>
                    </div>
                    <div className="pb-6 border-l-2 border-orange-500/30 pl-6">
                      <p className="text-slate-300">{item.event}</p>
                    </div>
                  </div>
                ))}
              </div>
            </section>

            {/* Legal Notice */}
            <section className="bg-slate-800/50 border border-slate-700 rounded-lg p-6">
              <h3 className="font-bold mb-3 flex items-center gap-2">
                <span>⚖️</span> আইনি বিজ্ঞপ্তি
              </h3>
              <p className="text-slate-300 text-sm">
                এই প্ল্যাটফর্ম Garena Free Fire বা অন্য কোনো গেম প্রকাশকের সাথে অফিসিয়ালি সম্পর্কিত নয়। এটি একটি স্বাধীন তৃতীয় পক্ষের টুর্নামেন্ট প্ল্যাটফর্ম।
              </p>
            </section>
          </div>
        </div>
      </main>

      <Footer appName="Gaming Tournament" />
    </div>
  );
}