'use client';

import Link from "next/link";
import Header from "./components/Header";
import { useAuth } from "./context/AuthContext";

export default function Home() {
  const { user } = useAuth();

  return (
    <>
      <Header />
      <div className="min-h-screen bg-gradient-to-b from-background to-background/95 pt-16">
        {/* Hero Section */}
        <section className="relative min-h-[calc(100vh-4rem)] flex items-center justify-center px-4 sm:px-6 lg:px-8">
          <div className="absolute inset-0 bg-[url('/hero-bg.jpg')] bg-cover bg-center opacity-10" />
          <div className="relative z-10 text-center max-w-4xl mx-auto">
            <h1 className="text-4xl sm:text-6xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-pink-600">
              {user ? 'Welcome Back!' : 'Discover Amazing Prizes'}
            </h1>
            <p className="text-lg sm:text-xl mb-8 text-foreground/80">
              {user 
                ? 'Ready to open some mystery boxes? Browse our collection and start your adventure!'
                : 'Unlock exclusive mystery boxes and win incredible prizes. Trade, collect, and experience the thrill of discovery.'}
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              {user ? (
                <Link
                  href="/boxes"
                  className="px-8 py-3 rounded-full bg-gradient-to-r from-purple-600 to-pink-600 text-white font-semibold hover:opacity-90 transition-opacity"
                >
                  Open Boxes
                </Link>
              ) : (
                <>
                  <Link
                    href="/auth/signup"
                    className="px-8 py-3 rounded-full bg-gradient-to-r from-purple-600 to-pink-600 text-white font-semibold hover:opacity-90 transition-opacity"
                  >
                    Get Started
                  </Link>
                  <Link
                    href="/boxes"
                    className="px-8 py-3 rounded-full border border-foreground/20 hover:bg-foreground/5 transition-colors"
                  >
                    View Boxes
                  </Link>
                </>
              )}
            </div>
          </div>
        </section>

        {/* Featured Boxes Section */}
        <section className="py-20 px-4 sm:px-6 lg:px-8">
          <div className="max-w-7xl mx-auto">
            <h2 className="text-3xl font-bold text-center mb-12">Featured Mystery Boxes</h2>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
              {[
                { tier: "Small", price: "100", color: "from-blue-500 to-blue-600" },
                { tier: "Medium", price: "1,000", color: "from-purple-500 to-purple-600" },
                { tier: "Big", price: "10,000", color: "from-pink-500 to-pink-600" },
              ].map((box) => (
                <div
                  key={box.tier}
                  className="relative group rounded-2xl overflow-hidden bg-gradient-to-br p-[1px] hover:scale-105 transition-transform"
                >
                  <div className={`absolute inset-0 bg-gradient-to-br ${box.color} opacity-20`} />
                  <div className="relative bg-background/95 p-6 rounded-2xl">
                    <h3 className="text-2xl font-bold mb-2">{box.tier} Box</h3>
                    <p className="text-foreground/60 mb-4">Unlock amazing prizes</p>
                    <div className="flex items-center justify-between">
                      <span className="text-lg font-semibold">{box.price} Tokens</span>
                      <button className="px-4 py-2 rounded-full bg-gradient-to-r from-purple-600 to-pink-600 text-white text-sm font-medium hover:opacity-90 transition-opacity">
                        Open Box
                      </button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* How It Works Section */}
        <section className="py-20 px-4 sm:px-6 lg:px-8 bg-foreground/[0.02]">
          <div className="max-w-7xl mx-auto">
            <h2 className="text-3xl font-bold text-center mb-12">How It Works</h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              {[
                {
                  title: "Get Tokens",
                  description: "Purchase tokens using various payment methods including cards and crypto",
                  icon: "💳",
                },
                {
                  title: "Open Boxes",
                  description: "Choose your mystery box tier and experience the thrill of discovery",
                  icon: "🎁",
                },
                {
                  title: "Trade & Collect",
                  description: "Trade your prizes with other users or add them to your collection",
                  icon: "🔄",
                },
              ].map((step) => (
                <div key={step.title} className="text-center p-6 rounded-xl bg-background/50">
                  <div className="text-4xl mb-4">{step.icon}</div>
                  <h3 className="text-xl font-semibold mb-2">{step.title}</h3>
                  <p className="text-foreground/60">{step.description}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Recent Wins Section */}
        <section className="py-20 px-4 sm:px-6 lg:px-8">
          <div className="max-w-7xl mx-auto">
            <h2 className="text-3xl font-bold text-center mb-12">Recent Wins</h2>
            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
              {[1, 2, 3, 4].map((i) => (
                <div key={i} className="aspect-square rounded-xl bg-foreground/[0.02] p-4 flex items-center justify-center">
                  <div className="text-center">
                    <div className="text-2xl mb-2">🎉</div>
                    <p className="text-sm text-foreground/60">Amazing Prize #{i}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* CTA Section */}
        <section className="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-purple-600/10 to-pink-600/10">
          <div className="max-w-4xl mx-auto text-center">
            <h2 className="text-3xl font-bold mb-6">Ready to Start Your Journey?</h2>
            <p className="text-lg text-foreground/80 mb-8">
              Join thousands of users already discovering amazing prizes in our mystery boxes.
            </p>
            <Link
              href="/auth/signup"
              className="inline-block px-8 py-3 rounded-full bg-gradient-to-r from-purple-600 to-pink-600 text-white font-semibold hover:opacity-90 transition-opacity"
            >
              Create Account
            </Link>
          </div>
        </section>
      </div>
    </>
  );
}