"use client"

import { useEffect, useState } from "react"
import { ChevronDown } from "lucide-react"
import Navbar from "@/components/navbar";
import {Post} from "@/lib/posts";
import Link from "next/link";
import RecordBox from "@/components/recordbox";

export default function Home() {
  const [scrollY, setScrollY] = useState(0)
  const [titleOpacity, setTitleOpacity] = useState(0)

  const [posts, setPosts] = useState<Post[]>([])

  useEffect(() => {
    fetch("/api/posts")
      .then((res) => res.json())
      .then((data) => setPosts(data))
      .catch((err) => console.error("Error fetching posts:", err))
  }, [])

  useEffect(() => {
    const handleScroll = () => {
      const currentScrollY = window.scrollY
      setScrollY(currentScrollY)

      // Calculate title opacity based on scroll position
      const opacity = Math.min(currentScrollY / 400, 1)
      setTitleOpacity(opacity)
    }

    window.addEventListener("scroll", handleScroll, { passive: true })
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

  const scrollToContent = () => {
    window.scrollTo({
      top: window.innerHeight,
      behavior: "smooth",
    })
  }

  return (
    <div className="relative font-mono">
      <title>DAMN.</title>
      <RecordBox />
      <Navbar />

      {/* Parallax Hero Section */}
      <section className="relative h-screen overflow-hidden">
        {/* Parallax Background */}
        <div
          className="absolute inset-0 w-full h-[120%] bg-cover bg-center bg-no-repeat"
          style={{
            backgroundImage: `url('/banner_final.jpg')`,
            transform: `translateY(${scrollY * 0.5}px)`,
            filter: "brightness(0.7) contrast(1.1)",
          }}
        />

        {/* Dark Overlay */}
        <div className="absolute inset-0 bg-black/40" />

        {/* Content Overlay */}
        <div className="relative z-10 flex flex-col items-center justify-center h-full text-white px-4">
          <div className="text-center space-y-6">
            <h1 className="text-6xl md:text-8xl font-bold tracking-wider opacity-90">DAMN.</h1>
            <p className="text-xl md:text-2xl font-light tracking-widest opacity-80">by Kendrick Lamar</p>
          </div>

          {/* Scroll Indicator */}
          <button
            onClick={scrollToContent}
            className="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce"
            aria-label="Scroll to content"
          >
            <ChevronDown className="w-8 h-8 text-white/70 hover:text-white transition-colors" />
          </button>
        </div>
      </section>

      {/* Title Reveal Section */}
      <section className="relative min-h-screen bg-black text-white">
        <div className="container mx-auto px-4 py-20">
          <div className="flex flex-col items-center justify-center min-h-screen space-y-12">
            {/* Main Title with Fade-in Effect */}
            <div className="text-center space-y-2 transition-opacity duration-1000" style={{ opacity: titleOpacity }}>
              <h2 className="text-5xl md:text-6xl font-black text-white">Award Winning</h2>
              <div className="space-y-4">
                {/*<p className="text-2xl md:text-3xl font-light">SUB</p>*/}
                <p className="text-lg text-gray-400 max-w-2xl mx-auto leading-relaxed">
                  Kendrick Lamar&#39;s fourth studio album, <i>DAMN.</i>, released on April 14, 2017, was a critical and commercial success,
                  solidifying his status as one of hip-hop&#39;s most profound artists. The album was acclaimed for its intricate storytelling,
                  introspective themes exploring faith, temptation, and the Black American experience, and its dynamic production.
                  <i> DAMN.</i> was a major awards contender, notably winning the Pulitzer Prize for Music, becoming the first non-classical or jazz album to receive recognition.
                  It also took home Best Rap Album at the 60th Annual Grammy Awards, along with several other nominations including Album of the Year.
                  Beyond accolades, the album achieved significant commercial success, debuting at number one on the Billboard 200 and producing hit singles like
                  <i>HUMBLE.</i> and <i>DNA</i>. Its impact resonated deeply, sparking widespread discussion about its lyrical depth and complex narratives, and earning its place as a contemporary classic.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Additional Content Section */}
      <section className="bg-gray-900 text-white py-20">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto space-y-12">
            <h3 className="text-4xl md:text-5xl font-bold text-center mb-12">The Black Arts Movement</h3>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
              <div className="space-y-6">
                <p className="text-lg leading-relaxed text-gray-300">
                  Of the many characteristics of the Black Arts Movement, collective empowerment and a form of spirituality are all seen prominently in <i>DAMN.</i>
                  These articles draw connections between a select few songs and these ideas that help to show how Kendrick Lamar has built his albums and career in modern times off of the art of the past.
                  In doing so, Kendrick outlines a path for progress for the Black community that is achieved through individual reflection.
                </p>
              </div>

              <div className="space-y-6">
                <div className="bg-red-600/20 p-6 rounded-lg border border-red-600/30">
                  <h4 className="text-xl font-semibold mb-3 text-red-400">ARTICLES</h4>
                  <ul className="space-y-2 text-gray-300">
                    {posts.map((post) => (
                      <li key={post.slug}>
                        <Link href={`/posts/${post.slug}`} className="hover:text-red-400 transition-colors uppercase">
                          • {post.title}
                        </Link>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}