"use client";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { ChevronRight, ChevronDown, Calendar, Zap } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { motion, useScroll, useTransform, useSpring, useInView } from "motion/react";
import { useRef } from "react";
import { cn } from "@/lib/utils";

export default function Page() {
  const { scrollYProgress } = useScroll();
  const smoothProgress = useSpring(scrollYProgress, { stiffness: 100, damping: 30, restDelta: 0.001 });

  const backgroundOpacity = useTransform(smoothProgress, [0, 0.2], [0, 1]);
  const heroScale = useTransform(smoothProgress, [0, 0.2], [1, 0.98]);
  const heroOpacity = useTransform(smoothProgress, [0, 0.2], [1, 0.8]);

  const navBackground = useTransform(
    smoothProgress,
    [0, 0.1],
    ["rgba(255, 255, 255, 0.5)", "rgba(255, 255, 255, 0.95)"]
  );
  const navShadow = useTransform(
    smoothProgress,
    [0, 0.1],
    ["0 1px 3px rgba(0,0,0,0.02)", "0 4px 6px rgba(0,0,0,0.05)"]
  );
  const navRing = useTransform(smoothProgress, [0, 0.1], ["rgb(228,228,231,0.02)", "rgb(228,228,231)"]);
  const navRingWidth = useTransform(smoothProgress, [0, 0.1], ["1px", "2px"]);

  const featuresRef = useRef(null);
  const featuresInView = useInView(featuresRef, { once: true, amount: 0.3 });

  return (
    <div className="min-h-screen bg-neutral-50 relative overflow-hidden">
      {/* Background Pattern */}
      <motion.div
        className="fixed inset-0 pointer-events-none"
        style={{ opacity: backgroundOpacity }}
        aria-hidden="true"
      >
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_transparent_0%,_transparent_20%,_#f8f8f8_100%)]" />
        <div
          className="absolute inset-0"
          style={{
            background: `
            radial-gradient(circle at 10% 70%, transparent 0%, transparent 50%, #f8f8f8 51%),
            radial-gradient(circle at 90% 30%, transparent 0%, transparent 50%, #f8f8f8 51%)
          `,
          }}
        />
      </motion.div>
      <div
        className={cn(
          "fixed top-0 left-0 right-0 mx-auto z-10 w-[calc(100vw-2rem)] max-w-[1200px] rounded-b-[23px] bg-neutral-50 h-20"
        )}
      />

      {/* Navigation */}
      <motion.header
        className="fixed top-4 left-0 right-0 mx-auto z-50 w-[calc(100vw-2rem)] max-w-[1200px] backdrop-blur-[6px] rounded-[20px] "
        initial={{ y: -100, opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        transition={{ duration: 0.5, ease: "easeOut" }}
        style={{
          borderWidth: navRingWidth,
          borderColor: navRing,
          backgroundColor: navBackground,
          boxShadow: navShadow,
        }}
      >
        <nav className="px-6 py-3">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-10">
              <Link href="/" className="flex items-center gap-2 transition-transform hover:scale-105">
                <div className="h-[22px] w-[22px] rounded-full bg-[#121212]" />
                <span className="text-[15px] font-medium">Braiiin</span>
              </Link>
              <ul className="hidden md:flex items-center gap-7">
                {["Product", "Resources", "Pricing"].map((item) => (
                  <li key={item}>
                    <Link
                      href="#"
                      className="text-[15px] text-[#1C1C1C]/80 hover:text-[#1C1C1C] font-medium transition-colors hover:underline"
                    >
                      {item}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
            <div className="flex items-center gap-8">
              <Link
                href="#"
                className="hidden md:block text-[15px] text-[#1C1C1C]/80 hover:text-[#1C1C1C] font-medium transition-colors hover:underline"
              >
                Login
              </Link>
              <Button className="h-[36px] px-4 bg-[#121212] hover:bg-black text-white rounded-[12px] text-[14px] font-medium transition-transform hover:scale-105">
                Get started for free
                <ChevronRight className="ml-1.5 h-3.5 w-3.5" />
              </Button>
            </div>
          </div>
        </nav>
      </motion.header>

      {/* Hero Section */}
      <motion.main
        className="relative container mx-auto px-4 pt-32 pb-16"
        style={{ scale: heroScale, opacity: heroOpacity }}
      >
        <div className="max-w-5xl mx-auto text-center space-y-8">
          <motion.div
            className="inline-flex items-center justify-center bg-[#00B4D9]/20 text-[#00B4D9] px-4 py-2 rounded-full text-sm font-medium border border-[#00B4D9]"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.2 }}
          >
            <Zap className="w-4 h-4 mr-2" />
            Powered by AI
          </motion.div>
          <motion.h1
            className="text-4xl md:text-6xl lg:text-7xl pb-2 font-bold leading-tight bg-clip-text text-transparent bg-gradient-to-r from-neutral-800 to-neutral-900"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.4 }}
          >
            AI that works
            <br />
            with your brain
          </motion.h1>

          {/* Search Section */}
          <motion.div
            className="mt-12 max-w-2xl mx-auto"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.8 }}
          >
            <div className="relative flex items-center">
              <Input
                type="text"
                placeholder="Ask anything about your data..."
                className="w-full h-14 pl-6 pr-32 rounded-xl border border-[#E5E5E5] placeholder:text-[#1C1C1C]/40 focus-visible:ring-[#00B4D9] transition-shadow duration-300 hover:shadow-md text-lg"
                aria-label="Ask anything about your data"
              />
              <div className="absolute right-2 h-full flex items-center gap-2">
                <Button
                  variant="ghost"
                  className="h-10 gap-2 text-[#1C1C1C]/80 hover:text-[#1C1C1C] hover:bg-[#1C1C1C]/5 transition-colors"
                >
                  <span className="text-[13px]">All sources</span>
                  <ChevronDown className="h-4 w-4 opacity-40" />
                </Button>
                <Button className="h-10 bg-[#00B4D9] hover:bg-[#3fbdd6] text-white rounded-lg text-[15px] font-medium transition-all hover:shadow-lg">
                  Ask AI
                  <ChevronRight className="ml-2 h-4 w-4" />
                </Button>
              </div>
            </div>
          </motion.div>

          {/* Visual Element */}
          <motion.div
            className="mt-16 relative"
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.8, delay: 1 }}
            style={{ scale: heroScale }}
          >
            {/* <div className="absolute inset-0 bg-gradient-to-b from-white via-transparent to-white z-10" /> */}
            <Image
              src="/section-images/blocks-4.png"
              alt="AI-powered data visualization"
              width={800}
              height={800}
              className={cn(
                "mx-auto rounded-xl shadow-2xl ring-8",
                featuresInView ? "ring-offset-2 ring-offset-white ring-neutral-300/30" : "ring-0"
              )}
            />
          </motion.div>

          {/* Features */}
          <motion.div
            ref={featuresRef}
            className="grid md:grid-cols-2 gap-8 pt-36"
            initial={{ opacity: 0, y: 50 }}
            animate={featuresInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.7, ease: "easeOut" }}
          >
            {[
              {
                icon: <div className="h-6 w-6 rounded-full bg-[#00B4D9]" />,
                text: "Instant, AI powered brain.\nEasy as copy paste..",
              },
              { icon: <Calendar className="h-6 w-6 text-[#00B4D9]" />, text: "Try free for 14-days,\nor else" },
            ].map((feature, index) => (
              <motion.div
                key={index}
                className="flex flex-col items-center gap-4"
                initial={{ opacity: 0, x: index === 0 ? -20 : 20 }}
                animate={featuresInView ? { opacity: 1, x: 0 } : {}}
                transition={{ duration: 0.5, delay: index * 0.2 + 0.5 }}
              >
                <motion.div
                  className="h-12 w-12 flex items-center justify-center bg-[#E5F0FF] rounded-xl"
                  whileHover={{ scale: 1.05 }}
                  whileTap={{ scale: 0.95 }}
                >
                  {feature.icon}
                </motion.div>
                <p className="text-[15px] text-[#1C1C1C]/80 leading-relaxed text-center">
                  {feature.text.split("\n").map((line, i) => (
                    <span key={i} className="block">
                      {line}
                    </span>
                  ))}
                </p>
              </motion.div>
            ))}
          </motion.div>
        </div>
      </motion.main>
    </div>
  );
}