import Image from "next/image";
import UploadArea from "@/components/UploadArea";
import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuLink,
} from "@/components/ui/navigation-menu";

export default function Home() {
  return (
    <div className="min-h-screen" style={{ backgroundColor: "#FFFFFF" }}>
      {/* Sticky Navigation */}
      <nav className="sticky top-0 z-50 bg-white/95 backdrop-blur-sm border-b border-gray-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            {/* Logo */}
            <div className="flex-shrink-0">
              <Image src="/reya2.svg" alt="Reya Logo" width={120} height={40} />
            </div>

            {/* Navigation Menu */}
            <NavigationMenu className="hidden md:flex">
              <NavigationMenuList>
                <NavigationMenuItem>
                  <NavigationMenuLink
                    href="/contact"
                    className="px-4 py-2 text-gray-700 hover:text-gray-900"
                  >
                    Contact
                  </NavigationMenuLink>
                </NavigationMenuItem>
                <NavigationMenuItem>
                  <NavigationMenuLink
                    href="/pricing"
                    className="px-4 py-2 text-gray-700 hover:text-gray-900"
                  >
                    Pricing
                  </NavigationMenuLink>
                </NavigationMenuItem>
              </NavigationMenuList>
            </NavigationMenu>

            {/* Auth Buttons */}
            <div className="flex items-center space-x-4">
              <button className="text-gray-700 hover:text-gray-900 px-4 py-2 border border-gray-300 hover:border-gray-400 rounded-md cursor-pointer transition-colors">
                Log In
              </button>
              <button className="bg-orange-500 hover:bg-orange-600 text-white px-6 py-2 rounded-md font-medium cursor-pointer transition-colors">
                Sign Up
              </button>
            </div>
          </div>
        </div>
      </nav>

      {/* Main Content */}
      <div className="flex items-center justify-center min-h-screen">
        <div
          className="w-[90%] h-[600px] rounded-2xl flex justify-between items-start relative"
          style={{
            backgroundColor: "#FF580F",
            margin: "20px",
            marginTop: "5px",
          }}
        >
          <div className="ml-8 mt-16">
            <h1
              className="text-white text-6xl font-bold mb-4"
              style={{ fontFamily: "Inter, sans-serif" }}
            >
              Welcome to reYa Render
            </h1>
            <p
              className="text-white text-2xl"
              style={{ width: "600px", fontFamily: "Inter, sans-serif" }}
            >
              Whether you're working on animations, visualizations, or still
              images, our render farm is optimized to deliver high-quality
              results efficiently. Simply upload your files, and our system will
              take care of the rendering process, saving you time and computing
              power so you can focus on the creative side of your work.
            </p>
            <div className="flex gap-4 mt-6">
              <button className="bg-white text-orange-500 px-6 py-3 rounded-md font-medium hover:bg-gray-100 cursor-pointer transition-colors">
                Contact Us
              </button>
              <button className="bg-transparent border-2 border-white text-white px-6 py-3 rounded-md font-medium hover:bg-white hover:text-orange-500 cursor-pointer transition-colors">
                Get Started
              </button>
            </div>
          </div>
          <div className="absolute bottom-4 right-4">
            <img
              src="/3d-model.png"
              alt="3D Model"
              width={500}
              height={500}
              style={{ display: "block" }}
            />
          </div>
        </div>
      </div>

      {/* Pricing Section */}
      <div className="flex justify-center mt-16 mb-16">
        <div className="w-[90%]">
          <h2 className="text-4xl font-bold text-center mb-12 text-gray-800">
            Available Plans
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {/* Basic Plan */}
            <div className="bg-white border-2 border-gray-200 rounded-xl p-8 text-center transition-all hover:transform hover:-translate-y-2 hover:shadow-xl hover:border-orange-500 cursor-pointer">
              <div className="text-2xl font-bold text-orange-500 mb-2">
                Basic
              </div>
              <div className="text-4xl font-bold text-orange-500 mb-8">
                €9.99{" "}
                <span className="text-lg font-normal text-gray-500">
                  /month
                </span>
              </div>
              <button className="w-full bg-orange-500 text-white py-3 px-6 rounded-lg font-medium mb-6 hover:bg-orange-600 transition-colors hover:cursor-pointer">
                Choose Basic
              </button>
              <ul className="text-left space-y-3">
                <li className="flex items-center">
                  <span className="text-green-500 font-bold mr-3">✓</span>
                  250 GB storage
                </li>
                <li className="flex items-center">
                  <span className="text-green-500 font-bold mr-3">✓</span>
                  Custom subdomain
                </li>
                <li className="flex items-center">
                  <span className="text-green-500 font-bold mr-3">✓</span>
                  Unlimited downloads
                </li>
                <li className="flex items-center">
                  <span className="text-green-500 font-bold mr-3">✓</span>
                  Password protected links
                </li>
                <li className="flex items-center">
                  <span className="text-green-500 font-bold mr-3">✓</span>
                  Basic analytics
                </li>
              </ul>
            </div>

            {/* Standard Plan */}
            <div className="bg-white border-2 border-gray-200 rounded-xl p-8 text-center transition-all hover:transform hover:-translate-y-2 hover:shadow-xl hover:border-orange-500 cursor-pointer">
              <div className="text-2xl font-bold text-orange-500 mb-2">
                Standard
              </div>
              <div className="text-4xl font-bold text-orange-500 mb-8">
                €19.99{" "}
                <span className="text-lg font-normal text-gray-500">
                  /month
                </span>
              </div>
              <button className="w-full bg-orange-500 text-white py-3 px-6 rounded-lg font-medium mb-6 hover:bg-orange-600 transition-colors hover:cursor-pointer">
                Choose Standard
              </button>
              <ul className="text-left space-y-3">
                <li className="flex items-center">
                  <span className="text-green-500 font-bold mr-3">✓</span>
                  500 GB storage
                </li>
                <li className="flex items-center">
                  <span className="text-green-500 font-bold mr-3">✓</span>
                  Custom subdomain
                </li>
                <li className="flex items-center">
                  <span className="text-green-500 font-bold mr-3">✓</span>
                  Unlimited downloads
                </li>
                <li className="flex items-center">
                  <span className="text-green-500 font-bold mr-3">✓</span>
                  Password protected links
                </li>
                <li className="flex items-center">
                  <span className="text-green-500 font-bold mr-3">✓</span>
                  Basic analytics
                </li>
                <li className="flex items-center">
                  <span className="text-green-500 font-bold mr-3">✓</span>
                  Custom branding & logo
                </li>
                <li className="flex items-center">
                  <span className="text-green-500 font-bold mr-3">✓</span>
                  Priority support
                </li>
              </ul>
            </div>

            {/* Premium Plan */}
            <div className="bg-white border-2 border-gray-200 rounded-xl p-8 text-center transition-all hover:transform hover:-translate-y-2 hover:shadow-xl hover:border-orange-500 cursor-pointer">
              <div className="text-2xl font-bold text-orange-500 mb-2">
                Premium
              </div>
              <div className="text-4xl font-bold text-orange-500 mb-8">
                €39.99{" "}
                <span className="text-lg font-normal text-gray-500">
                  /month
                </span>
              </div>
              <button className="w-full bg-orange-500 text-white py-3 px-6 rounded-lg font-medium mb-6 hover:bg-orange-600 transition-colors hover:cursor-pointer">
                Choose Premium
              </button>
              <ul className="text-left space-y-3">
                <li className="flex items-center">
                  <span className="text-green-500 font-bold mr-3">✓</span>1 TB
                  storage
                </li>
                <li className="flex items-center">
                  <span className="text-green-500 font-bold mr-3">✓</span>
                  Custom subdomain
                </li>
                <li className="flex items-center">
                  <span className="text-green-500 font-bold mr-3">✓</span>
                  Unlimited downloads
                </li>
                <li className="flex items-center">
                  <span className="text-green-500 font-bold mr-3">✓</span>
                  Password protected links
                </li>
                <li className="flex items-center">
                  <span className="text-green-500 font-bold mr-3">✓</span>
                  Basic analytics
                </li>
                <li className="flex items-center">
                  <span className="text-green-500 font-bold mr-3">✓</span>
                  Custom branding & logo
                </li>
                <li className="flex items-center">
                  <span className="text-green-500 font-bold mr-3">✓</span>
                  Priority support
                </li>
                <li className="flex items-center">
                  <span className="text-green-500 font-bold mr-3">✓</span>
                  Multiple user accounts
                </li>
                <li className="flex items-center">
                  <span className="text-green-500 font-bold mr-3">✓</span>
                  Team management
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      {/* Upload area below hero, same width as orange container */}
      <div className="flex justify-center">
        <div className="w-[90%] mt-6 mb-12">
          <h2 className="text-4xl font-bold text-left mb-8 text-gray-800">
            Start by uploading at least one .blend file
          </h2>
          <UploadArea className="w-full shadow-sm" />
        </div>
      </div>
    </div>
  );
}