"use client";

import Link from "next/link";
import LandingPageChatBot from "@/app/components/landing-page-chat-bot";

/**
 * LandingPage Component
 * Main landing page for PlayGo AI educational platform
 * Features a chatbot, feature highlights, statistics, and footer
 */
export default function LandingPage() {
  return (
    <div className="min-h-screen bg-background-primary">
      <main className="pt-4">
        {/* Interactive ChatBot Section */}
        <div className="">
          <LandingPageChatBot />
        </div>

        {/* Features Grid Section - Displays 4 key platform features with icons */}
        <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>

        {/* Statistics Section - Displays key metrics about platform usage */}
        <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>

      {/* Footer Section
       * Contains:
       * - Branded logo with playful multi-colored letters
       * - Learning resource links
       * - Social media links and contact information
       * - Non-profit mission statement and copyright
       */}
      <footer className="bg-background-secondary border-t border-border py-12">
        <div className="container mx-auto px-4">
          {/* Logo and Tagline */}
          <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>

            {/* Learning Resources Navigation */}
            <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>

            {/* Social Media and Contact Information */}
            <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:hello@playgoai.org"
                  className="hover:text-primary"
                >
                  hello@playgoai.org
                </a>
              </p>
            </div>
          </div>

          {/* Non-profit Mission and Copyright */}
          <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>
  );
}