'use client';

import { Header } from '@/components/ui/Header';
import { Footer } from '@/components/ui/Footer';
import { MatchCard } from '@/components/ui/MatchCard';
import Link from 'next/link';

// Mock data for demonstration
const mockMatches = [
  {
    id: 1,
    matchCode: 'FF001',
    title: 'দৈনিক স্কোয়াড টুর্নামেন্ট - শুক্রবার',
    categoryId: 4,
    gameMode: 'Battle Royale',
    matchType: 'Squad',
    teamType: 'Squad',
    entryFee: '50',
    prizePool: '10000',
    firstPrize: '5000',
    secondPrize: '3000',
    thirdPrize: '2000',
    totalSlots: 64,
    availableSlots: 12,
    maxTeamMembers: 4,
    minTeamMembers: 4,
    registrationStartAt: new Date(Date.now() - 3600000),
    registrationDeadlineAt: new Date(Date.now() + 7200000),
    matchStartAt: new Date(Date.now() + 10800000),
    isFeatured: true,
    status: 'registration_open',
    createdAt: new Date(),
    updatedAt: new Date(),
  },
  {
    id: 2,
    matchCode: 'FF002',
    title: '1v1 Clash Squad - সপ্তাহিক',
    categoryId: 3,
    gameMode: 'Clash Squad',
    matchType: '1v1',
    teamType: 'Individual',
    entryFee: '20',
    prizePool: '5000',
    firstPrize: '3000',
    secondPrize: '1500',
    thirdPrize: '500',
    totalSlots: 32,
    availableSlots: 8,
    maxTeamMembers: 1,
    minTeamMembers: 1,
    registrationStartAt: new Date(Date.now() - 3600000),
    registrationDeadlineAt: new Date(Date.now() + 14400000),
    matchStartAt: new Date(Date.now() + 21600000),
    isFeatured: false,
    status: 'registration_open',
    createdAt: new Date(),
    updatedAt: new Date(),
  },
  {
    id: 3,
    matchCode: 'FF003',
    title: 'প্রিমিয়াম দল প্রতিযোগিতা',
    categoryId: 1,
    gameMode: 'Battle Royale',
    matchType: 'Team',
    teamType: 'Squad',
    entryFee: '200',
    prizePool: '50000',
    firstPrize: '30000',
    secondPrize: '15000',
    thirdPrize: '5000',
    totalSlots: 16,
    availableSlots: 4,
    maxTeamMembers: 4,
    minTeamMembers: 4,
    registrationStartAt: new Date(Date.now() + 86400000),
    registrationDeadlineAt: new Date(Date.now() + 172800000),
    matchStartAt: new Date(Date.now() + 259200000),
    isFeatured: true,
    status: 'upcoming',
    createdAt: new Date(),
    updatedAt: new Date(),
  },
];

const categories = [
  { name: 'দৈনিক টুর্নামেন্ট', icon: '📅' },
  { name: 'সাপ্তাহিক টুর্নামেন্ট', icon: '🏆' },
  { name: 'মাসিক চ্যাম্পিয়নশিপ', icon: '👑' },
  { name: 'বিশেষ ইভেন্ট', icon: '⭐' },
];

const features = [
  {
    title: 'নিরাপদ পেমেন্ট',
    description: 'bKash, Nagad, Rocket এর মাধ্যমে নিরাপদ লেনদেন',
    icon: '🔒',
  },
  {
    title: 'তাৎক্ষণিক সেটেলমেন্ট',
    description: 'জয়ের টাকা তাৎক্ষণিক আপনার ওয়ালেটে',
    icon: '⚡',
  },
  {
    title: 'ন্যায্য খেলা',
    description: 'সম্পূর্ণ স্বচ্ছতা এবং অ্যান্টি-চিট সিস্টেম',
    icon: '⚖️',
  },
  {
    title: '২৪/৭ সাপোর্ট',
    description: 'যেকোনো সমস্যার জন্য তাৎক্ষণিক সহায়তা',
    icon: '💬',
  },
];

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

      {/* Hero Banner */}
      <section className="bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 py-12 md:py-20">
        <div className="container-max text-center">
          <h1 className="text-4xl md:text-6xl font-bold mb-4 animate-slide-down">
            বাংলাদেশের শীর্ষ <span className="gradient-text">গেমিং টুর্নামেন্ট</span> প্ল্যাটফর্ম
          </h1>
          <p className="text-lg md:text-xl text-slate-300 mb-8 max-w-2xl mx-auto">
            প্রতিদিন নতুন টুর্নামেন্ট, বিশাল পুরস্কার পুল এবং রোমাঞ্চকর প্রতিযোগিতা।
          </p>
          <div className="flex gap-4 justify-center flex-wrap">
            <Link href="/tournaments" className="btn btn-primary btn-large animate-pulse-glow">
              টুর্নামেন্ট দেখুন
            </Link>
            <Link href="/how-to-play" className="btn btn-secondary btn-large">
              কীভাবে খেলবেন
            </Link>
          </div>
        </div>
      </section>

      {/* Featured Tournaments */}
      <section className="py-16">
        <div className="container-max">
          <h2 className="text-3xl font-bold mb-12 text-center">
            বৈশিষ্ট্যযুক্ত <span className="gradient-text">টুর্নামেন্ট</span>
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {mockMatches.map((match) => (
              <MatchCard key={match.id} match={match} />
            ))}
          </div>
        </div>
      </section>

      {/* Categories */}
      <section className="py-16 bg-slate-900/30">
        <div className="container-max">
          <h2 className="text-3xl font-bold mb-12 text-center">
            টুর্নামেন্ট <span className="gradient-text">বিভাগ</span>
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            {categories.map((category, index) => (
              <Link key={index} href="/tournaments">
                <div className="card group cursor-pointer text-center">
                  <div className="text-5xl mb-4">{category.icon}</div>
                  <h3 className="font-bold text-lg group-hover:text-orange-500 transition">
                    {category.name}
                  </h3>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* Features */}
      <section className="py-16">
        <div className="container-max">
          <h2 className="text-3xl font-bold mb-12 text-center">
            কেন আমাদের বেছে নিন
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {features.map((feature, index) => (
              <div key={index} className="card text-center">
                <div className="text-5xl mb-4">{feature.icon}</div>
                <h3 className="font-bold text-lg mb-2">{feature.title}</h3>
                <p className="text-slate-400 text-sm">{feature.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Payment Methods */}
      <section className="py-16 bg-slate-900/30">
        <div className="container-max">
          <h2 className="text-3xl font-bold mb-12 text-center">
            পেমেন্ট <span className="gradient-text">মাধ্যম</span>
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-2xl mx-auto">
            {[
              { name: 'bKash', icon: '📱', color: 'from-pink-500/20 to-pink-500/5' },
              { name: 'Nagad', icon: '📲', color: 'from-orange-500/20 to-orange-500/5' },
              { name: 'Rocket', icon: '🚀', color: 'from-purple-500/20 to-purple-500/5' },
            ].map((method, index) => (
              <div
                key={index}
                className={`card text-center bg-gradient-to-br ${method.color}`}
              >
                <div className="text-5xl mb-3">{method.icon}</div>
                <p className="font-bold">{method.name}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16">
        <div className="container-max">
          <div className="card-featured text-center">
            <h2 className="text-3xl font-bold mb-4">আজই শুরু করুন</h2>
            <p className="text-lg text-slate-300 mb-6 max-w-xl mx-auto">
              রেজিস্টার করুন, নিজের প্রোফাইল সেটআপ করুন এবং এখনই আপনার প্রথম টুর্নামেন্টে যোগ দিন।
            </p>
            <Link href="/register" className="btn btn-primary btn-large">
              বিনামূল্যে রেজিস্টার করুন
            </Link>
          </div>
        </div>
      </section>

      <Footer
        appName="Gaming Tournament"
        supportPhone="+8801XXXXXXXXX"
        contactEmail="support@gamingtournament.bd"
      />
    </div>
  );
}