'use client';

import { Link } from "@nextui-org/link";
import { button as buttonStyles } from "@nextui-org/theme";
import { useTheme } from "next-themes";

import { title, subtitle } from "@/components/primitives";
import FeatureBox from "@/app/featureBox";

export default function Home() {
  const { theme } = useTheme();

  return (
    <div className="min-h-screen flex flex-col">
      <section className="flex-grow flex flex-col items-center justify-center gap-4 py-8 md:py-10 overflow-hidden relative">
        <div className="absolute inset-0 z-0">
          <video
            autoPlay
            loop
            muted
            playsInline
            className="object-cover w-full h-full"
          >
            <source src="/homepage-video.mp4" type="video/mp4" />
            <a href="https://www.vecteezy.com/free-videos/city-time-lapse-at-night">City Time Lapse At Night Stock Videos by Vecteezy</a>
          </video>
          <div className="absolute inset-0 bg-orange-900 opacity-60" />
        </div>
        <div className="relative z-10 text-left w-full max-w-4xl px-6">
          <div className="mb-4">
            <span className={title({ class: "text-white" })}>
              Your platform for{" "}
            </span>
            <span className={title({ color: "yellow" })}>
              building
            </span>
            <br />
            <span className={title({ class: "text-white" })}>
              a sustainable future
            </span>
          </div>

          <div className={subtitle({ class: "mt-4 text-gray-200" })}>
            Encourage <span className="text-orange-400">student participation</span> in responsible waste management with smart bins that guide proper disposal.
          </div>

          <div className="mt-8">
            <Link
              className={buttonStyles({
                color: "warning",
                radius: "full",
                variant: "shadow",
                size: "lg",
              })}
              href="/buildings"
            >
              Get Started
            </Link>
          </div>
        </div>
      </section>

      <div className="w-full bg-white dark:bg-gray-900 py-16">
        <div className="max-w-4xl mx-auto px-6">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <FeatureBox
              title="Smart Bins with Real-time Feedback"
              description="Utilize our AI-powered smart bins to guide students on proper waste disposal, and get immediate feedback."
              theme={theme}
            />
            <FeatureBox
              title="Track Waste and Emissions"
              description="Log your building's trash and monitor emissions over time, giving you insights into your waste management efficiency."
              theme={theme}
            />
            <FeatureBox
              title="Measure Your Impact"
              description="Track your building's emissions reduction and see the emissions saved through our smart bin system."
              theme={theme}
            />
          </div>
        </div>
      </div>
    </div>
  );
}