import React from 'react'
import type { ReactElement } from 'react'
import Head from 'next/head'
import Link from 'next/link'
import BaseButton from '../components/BaseButton'
import SectionFullScreen from '../components/SectionFullScreen'
import LayoutGuest from '../layouts/Guest'
import { getPageTitle } from '../config'
import { useAppSelector } from '../stores/hooks'
import {
  mdiBookOpenPageVariant,
  mdiAccountGroup,
  mdiChartLine,
  mdiGithub,
  mdiTwitter,
  mdiLinkedin,
} from '@mdi/js'
import BaseIcon from '../components/BaseIcon'
import PublicCourseList from '../components/Courses/PublicCourseList'

export default function Landing() {
  const textColor = useAppSelector((state) => state.style.linkColor)
  const title = 'CourseFlow LMS'

  const features = [
    {
      icon: mdiBookOpenPageVariant,
      title: 'Interactive Courses',
      description: 'Engage your learners with rich multimedia content, quizzes, and assignments.',
    },
    {
      icon: mdiAccountGroup,
      title: 'User Management',
      description: 'Easily manage users, roles, and permissions with our flexible system.',
    },
    {
      icon: mdiChartLine,
      title: 'Progress Tracking',
      description: 'Monitor learner progress with detailed analytics and reporting tools.',
    },
  ]

  const socialLinks = [
    { href: 'https://github.com', icon: mdiGithub },
    { href: 'https://twitter.com', icon: mdiTwitter },
    { href: 'https://linkedin.com', icon: mdiLinkedin },
  ]

  return (
    <div className="landing-gradient text-white">
      <Head>
        <title>{getPageTitle('Welcome')}</title>
      </Head>

      <SectionFullScreen className="relative">
        <div className="container relative mx-auto px-4 text-center">
          <h1
            className="text-4xl md:text-7xl font-bold mb-4 text-white opacity-0 fade-in-up"
            style={{ textShadow: '0 2px 8px rgba(0,0,0,0.5)', animationDelay: '0.2s' }}
          >
            Welcome to {title}
          </h1>
          <p
            className="text-lg md:text-xl mb-8 text-white/90 opacity-0 fade-in-up"
            style={{ textShadow: '0 2px 8px rgba(0,0,0,0.5)', animationDelay: '0.4s' }}
          >
            A modern and flexible platform for your online courses.
          </p>
          <div style={{ animationDelay: '0.6s' }} className="opacity-0 fade-in-up">
            <BaseButton href="/login" label="Get Started" color="info" size="lg" className="w-auto" />
          </div>
        </div>
      </SectionFullScreen>

      <section className="py-20">
        <div className="container mx-auto px-6">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold">Why Choose Us?</h2>
            <p className="text-white/80 mt-2">
              Everything you need to create and manage your online learning experience.
            </p>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
            {features.map((feature, index) => (
              <div
                key={index}
                className="p-8 glass-card rounded-2xl text-center shadow-lg"
              >
                <BaseIcon path={feature.icon} size={48} className="mx-auto" />
                <h3 className="text-xl font-semibold mt-4 mb-2">{feature.title}</h3>
                <p className="text-white/90">{feature.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="py-20">
        <div className="container mx-auto px-6">
          <PublicCourseList />
        </div>
      </section>

      <footer className="text-white py-10">
        <div className="container mx-auto px-4 text-center">
          <p className="text-sm text-white/70">
            © {new Date().getFullYear()} <span>{title}</span>. All rights reserved.
          </p>
          <div className="flex justify-center space-x-4 mt-4">
            {socialLinks.map((social, index) => (
              <a
                key={index}
                href={social.href}
                target="_blank"
                rel="noopener noreferrer"
                className="text-white/70 hover:text-white"
              >
                <BaseIcon path={social.icon} size={24} />
              </a>
            ))}
          </div>
          <div className="mt-4">
            <Link href="/privacy-policy" className={'text-sm text-white/70 hover:text-white'}>
              Privacy Policy
            </Link>
          </div>
        </div>
      </footer>
    </div>
  )
}

Landing.getLayout = function getLayout(page: ReactElement) {
  return <LayoutGuest>{page}</LayoutGuest>
}