import { getServerSession } from "next-auth/next";
import { authOptions } from "./api/auth/[...nextauth]/route";
import PreloaderAndSearch from "@/components/PreloaderAndSearch";
import Header from "@/components/Header";
import HeroSection from "@/components/HeroSection";
import CTASection from "@/components/CTASection";
import AboutSection from "@/components/AboutSection";
import CTABottom from "@/components/CTABottom";
import BlogSection from "@/components/BlogSection";
import Link from "next/link";
import CookieAlert from "@/components/CookieAlert";

export default async function HomePage() {
  const session = await getServerSession(authOptions);

  return (
    <>
      <PreloaderAndSearch />

      <Header />

      {/* Hero Section - Client Component for animations */}
      <HeroSection isAuthenticated={!!session} />

      {/* Blog Section - Client Component for WOW.js animations */}
      <BlogSection />


      {/* Footer */}
      <footer className="footer-wrapper">
        <div className="divider"></div>
        <div className="container">
          <div className="row g-5">
            <div className="col-12 col-sm-6 col-lg-4">
              <div className="footer-card pe-lg-5">
                <Link href="/" className="d-block mb-4">
                  <img src="/assets/img/core-img/logo.png" alt="" />
                </Link>
                <p className="mb-0">Complete authentication solution built with Django REST API and Next.js.</p>
                <div className="social-nav">
                  <a href="#"><i className="ti ti-brand-facebook"></i></a>
                  <a href="#"><i className="ti ti-brand-x"></i></a>
                  <a href="#"><i className="ti ti-brand-linkedin"></i></a>
                  <a href="#"><i className="ti ti-brand-instagram"></i></a>
                </div>
              </div>
            </div>
            <div className="col-12 col-sm-6 col-lg">
              <div className="footer-card">
                <h5 className="mb-4">Quick Links</h5>
                <ul className="footer-nav">
                  <li><Link href="/">Home</Link></li>
                  <li><Link href="/auth/register">Register</Link></li>
                  <li><Link href="/auth/login">Login</Link></li>
                  {session && <li><Link href="/dashboard">Dashboard</Link></li>}
                  {session && <li><Link href="/profile">Profile</Link></li>}
                </ul>
              </div>
            </div>
            <div className="col-12 col-sm-6 col-lg">
              <div className="footer-card">
                <h5 className="mb-4">Features</h5>
                <ul className="footer-nav">
                  <li><a href="#">Email Verification</a></li>
                  <li><a href="#">Social Login</a></li>
                  <li><a href="#">Password Reset</a></li>
                  <li><a href="#">User Profile</a></li>
                  <li><a href="#">Token Management</a></li>
                </ul>
              </div>
            </div>
            <div className="col-12 col-sm-6 col-lg">
              <div className="footer-card">
                <h5 className="mb-4">Resources</h5>
                <ul className="footer-nav">
                  <li><a href="/AUTH.md">API Documentation</a></li>
                  <li><a href="/SETUP.md">Setup Guide</a></li>
                  <li><a href="/ROUTES.md">Routes</a></li>
                  <li><a href="#">FAQs</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div className="divider"></div>
        <div className="copyright-wrapper">
          <div className="container">
            <div className="row align-items-center">
              <div className="col-12 col-md-6">
                <p className="mb-3 mb-md-0 copyright">
                  Copyright © <span>{new Date().getFullYear()}</span> <a href="#">Your Company</a> All rights reserved.
                </p>
              </div>
              <div className="col-12 col-md-6">
                <div className="footer-bottom-nav">
                  <a href="#">Privacy & Terms</a>
                  <a href="#">FAQ</a>
                  <a href="#">Contact Us</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </footer>

      {/* Cookie Alert */}
      {/* Cookie Alert */}
      <CookieAlert />


      {/* Scroll To Top */}
      <button id="scrollTopButton" className="softora-scrolltop scrolltop-hide">
        <i className="ti ti-chevron-up"></i>
      </button>
    </>
  );
}