app/page.tsx

'use client'

import Link from "next/link"
import { useTheme } from './components/ThemeProvider'
import { useEffect, useState } from 'react'
import ChatBot from './components/ChatBot'

export default function LandingPage() {
  const { theme, toggleTheme } = useTheme()
  const [message, setMessage] = useState('')

  useEffect(() => {
    // Call FastAPI endpoint
    fetch('/api/hello')
      .then(res => res.json())
      .then(data => {setMessage(data.message); console.log('Fetched message:', data.message);})
      .catch(err => console.error('Error fetching:', err))
  }, [])

  return (
    <div className="min-h-screen bg-background-primary">
      {/* Modern Header */}
      <header className="fixed w-full bg-background-secondary/80 backdrop-blur-sm border-b border-border z-50">
        <div className="container mx-auto px-4 py-4 flex items-center justify-between">
          <Link href="/" className="text-3xl font-bold">
            <span className="text-[#FF6B6B]">P</span>
            <span className="text-[#4ECDC4]">l</span>
            <span className="text-[#45B7D1]">a</span>
            <span className="text-[#FDCB6E]">y</span>
            <span className="text-[#FF6B6B]">G</span>
            <span className="text-[#4ECDC4]">o</span>
            <span className="ml-2 text-[#45B7D1]">A</span>
            <span className="text-[#FDCB6E]">I</span>
          </Link>
          <nav className="flex items-center space-x-8">
            <Link href="/for-teachers" className="text-text-secondary hover:text-primary">
              For Teachers
            </Link>
            <Link href="/for-students" className="text-text-secondary hover:text-primary">
              For Students
            </Link>
            <Link href="/community" className="text-text-secondary hover:text-primary">
              Community
            </Link>
            <button 
              onClick={toggleTheme}
              className="px-4 py-2 rounded-lg bg-primary text-white hover:bg-primary/90"
            >
              {theme === 'light' ? '🌙' : '☀️'}
            </button>
          </nav>
        </div>
      </header>

      {/* Add ChatBot right after header */}
      <div className="pt-20">
        <ChatBot />
      </div>

      <main className="pt-4">
        {/* Hero Section */}
        <section className="container mx-auto px-4 py-20 text-center">
          <h1 className="text-6xl font-bold mb-6 bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
            Turn learning into an AI-powered adventure
          </h1>
          <p className="text-text-secondary text-xl mb-12 max-w-2xl mx-auto">
            PlayGo AI is the leading educational platform for building engaging AI-powered learning experiences
          </p>
          <div className="flex justify-center gap-4">
            <Link 
              href="/get-started" 
              className="px-6 py-3 rounded-lg bg-primary text-white hover:bg-primary/90 font-medium"
            >
              Get Started
            </Link>
            <Link 
              href="/demo" 
              className="px-6 py-3 rounded-lg border border-border hover:border-primary text-text-primary font-medium"
            >
              View Demo
            </Link>
          </div>
        </section>

        {/* Features Grid */}
        <section className="bg-background-secondary py-20">
          <div className="container mx-auto px-4">
            <h2 className="text-3xl font-bold text-center mb-16">Build with our powerful learning tools</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
              <div className="p-6 rounded-xl bg-background-primary">
                <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
                  <svg className="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                  </svg>
                </div>
                <h3 className="text-xl font-semibold mb-2">Interactive Learning</h3>
                <p className="text-text-secondary">Engage with AI-powered quizzes, projects, and virtual labs</p>
              </div>
              
              <div className="p-6 rounded-xl bg-background-primary">
                <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
                  <svg className="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                  </svg>
                </div>
                <h3 className="text-xl font-semibold mb-2">Diverse Subjects</h3>
                <p className="text-text-secondary">Explore topics from STEM to humanities with expert AI guidance</p>
              </div>

              <div className="p-6 rounded-xl bg-background-primary">
                <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
                  <svg className="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
                  </svg>
                </div>
                <h3 className="text-xl font-semibold mb-2">Personalized Path</h3>
                <p className="text-text-secondary">Adaptive learning tailored to your unique pace and style</p>
              </div>

              <div className="p-6 rounded-xl bg-background-primary">
                <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
                  <svg className="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                  </svg>
                </div>
                <h3 className="text-xl font-semibold mb-2">Progress Tracking</h3>
                <p className="text-text-secondary">Monitor learning outcomes with detailed analytics</p>
              </div>
            </div>
          </div>
        </section>

        {/* Stats Section */}
        <section className="container mx-auto px-4 py-20">
          <h2 className="text-3xl font-bold text-center mb-16">Trusted by educators worldwide</h2>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
            <div>
              <p className="text-4xl font-bold text-primary mb-2">500K+</p>
              <p className="text-text-secondary">Active Students</p>
            </div>
            <div>
              <p className="text-4xl font-bold text-primary mb-2">10K+</p>
              <p className="text-text-secondary">Teachers</p>
            </div>
            <div>
              <p className="text-4xl font-bold text-primary mb-2">1M+</p>
              <p className="text-text-secondary">Learning Sessions</p>
            </div>
            <div>
              <p className="text-4xl font-bold text-primary mb-2">50+</p>
              <p className="text-text-secondary">Countries</p>
            </div>
          </div>
        </section>
      </main>

      {/* Updated Educational Footer */}
      <footer className="bg-background-secondary border-t border-border py-12">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="text-center md:text-left">
              <h3 className="text-2xl font-bold mb-4">
                <span className="text-[#FF6B6B]">P</span>
                <span className="text-[#4ECDC4]">l</span>
                <span className="text-[#45B7D1]">a</span>
                <span className="text-[#FDCB6E]">y</span>
                <span className="text-[#FF6B6B]">G</span>
                <span className="text-[#4ECDC4]">o</span>
                <span className="ml-2 text-[#45B7D1]">A</span>
                <span className="text-[#FDCB6E]">I</span>
              </h3>
              <p className="text-text-secondary">Making learning fun and accessible for everyone</p>
            </div>
            
            <div className="text-center">
              <h3 className="font-semibold mb-4">Learning Resources</h3>
              <ul className="space-y-2">
                <li><Link href="/library" className="text-text-secondary hover:text-primary">Learning Library</Link></li>
                <li><Link href="/tutorials" className="text-text-secondary hover:text-primary">Tutorials</Link></li>
                <li><Link href="/blog" className="text-text-secondary hover:text-primary">Educational Blog</Link></li>
              </ul>
            </div>
            
            <div className="text-center md:text-right">
              <h3 className="font-semibold mb-4">Connect With Us</h3>
              <div className="flex justify-center md:justify-end space-x-4">
                <a href="#" className="text-text-secondary hover:text-primary" aria-label="Discord">
                  <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z"/>
                  </svg>
                </a>
                <a href="#" className="text-text-secondary hover:text-primary" aria-label="Twitter">
                  <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
                  </svg>
                </a>
                <a href="#" className="text-text-secondary hover:text-primary" aria-label="YouTube">
                  <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
                  </svg>
                </a>
              </div>
              <p className="mt-4 text-text-secondary">
                Contact us: <a href="mailto:[email protected]" className="hover:text-primary">[email protected]</a>
              </p>
            </div>
          </div>
          <div className="mt-12 pt-8 border-t border-border/50 text-center text-text-secondary">
            <p>PlayGo AI - A non-profit organization dedicated to making education accessible through AI</p>
            <p className="mt-2">&copy; {new Date().getFullYear()} PlayGo AI. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}