import { Blocks, BookOpen, Leaf, PictureInPicture2 } from "lucide-react";
import { NavbarDemo } from "../components/Navbar";
import { Button } from "../components/ui/button";
import Card from "../components/ui/card-new";
// @ts-ignore
import PixelCard from "../components/ui/PixelCard.jsx";
import HeroBackground from "../components/ui/hero-backround.js";
import InfoCard from "../components/ui/info-card.js";
import Tokenomics from "../components/tokenomics.js";
import { motion } from "framer-motion";
import { Link, useNavigate } from "react-router-dom";
import cardIcon1 from "../../public/icons/Star Fall Minimalistic 3.svg";
import cardIcon2 from "../../public/icons/Box.svg";
import cardIcon3 from "../../public/icons/Share Circle.svg";
import cardIcon4 from "../../public/icons/SSD Square.svg";
import cardIcon5 from "../../public/icons/Posts Carousel Horizontal.svg";
import { usePrivy, useSolanaWallets } from '@privy-io/react-auth';
import { useEffect, useState } from "react";
import Spline from '@splinetool/react-spline'
import axios from 'axios'

const Home = () => {

  const { login, authenticated, ready, connectOrCreateWallet } = usePrivy()
  const navigate = useNavigate()
  const { wallets } = useSolanaWallets()

  const handleLogin = async () => {

    if (authenticated || wallets[0]) {
      navigate("/create-agent")
    } else {
      connectOrCreateWallet()
    }
  }
  const [hash, setHash] = useState("efgunyhed5frvgtbyu8799j");

  useEffect(() => {
    axios.get("https://catools.dev3vds1.link/get/equilink")
      .then((res) => {
        setHash(res.data[0].address)
      }).catch((err) => {
        console.log(err)
      })
  }, [])
  const [isCopied, setIsCopied] = useState(false);

  // Function to copy the hash to clipboard
  const copyToClipboard = () => {
    navigator.clipboard.writeText(hash);
    setIsCopied(true); // Update button state
    setTimeout(() => setIsCopied(false), 2000); // Reset state after 2 seconds
  };

  return (
    <div className="">
      <NavbarDemo />

      <Spline
        className=" absolute -z-10"
        scene="https://prod.spline.design/WZteebe2UUTrQRl8/scene.splinecode"
      />

      <div className="z-50 mx-auto min-h-screen flex flex-col items-center justify-center container">
        <div>

          {/* CA Button with Yellow-Gold-White Theme */}
          <motion.div
            className="flex justify-center items-center mb-4"
            initial={{ opacity: 0, y: -50 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ type: "spring", stiffness: 120, damping: 15 }}
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
          >
            <button
              onClick={copyToClipboard}
              className={`relative inline-flex items-center justify-center px-6 py-3 text-lg font-bold rounded-full shadow-lg overflow-hidden transition-all duration-300 ease-in-out ${isCopied ? "bg-yellow-500 text-white" : "bg-white text-black border border-yellow-500"
                }`}
            >
              {/* Text */}
              <span className="z-10 relative">
                {isCopied ? "Copied!" : `CA: ${hash}`}
              </span>

              {/* Background Animation */}
              {!isCopied && (
                <motion.span
                  className="absolute inset-0 bg-gradient-to-r from-yellow-400 via-gold-500 to-yellow-200 blur-md opacity-50 group-hover:opacity-75 transition-opacity duration-500"
                  initial={{ scale: 0 }}
                  animate={{ scale: 1 }}
                  transition={{ repeat: Infinity, duration: 3, ease: "linear" }}
                />
              )}
            </button>
          </motion.div>

          <motion.h2
            className="text-7xl font-bold font-orbitron text-gray-800/70 text-center"
            initial={{ opacity: 0, y: -50 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 1 }}
          >
            The AI Agent Framework
          </motion.h2>
          <motion.h2
            className="text-7xl my-3 font-bold text-gray-800/70 text-center"
            initial={{ opacity: 0, y: 50 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 1, delay: 0.3 }}
          >
            for the Next Era
          </motion.h2>
        </div>

        <div className="flex justify-center items-center my-5 space-x-6">
          <motion.div whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.95 }}>
            {/* <Link to="create-agent"> */}
            <Button onClick={() => handleLogin()} className="bg-amber-500 text-lg text-center p-6">
              Build your AI agent
            </Button>
            {/* </Link> */}
          </motion.div>

          <motion.div whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.95 }}>
            <Link to="browse-agents">
              <Button
                className="bg-gray-50/50 text-lg hover:bg-amber-400 p-6"
                variant={"outline"}
                onClick={() => handleLogin()}
              >
                Explore the ecosystem
              </Button>
            </Link>
          </motion.div>
        </div>
      </div>

      <div className="container mx-auto mt-[15rem]">
        <div className="text-center">
          <div>
            <motion.h3
              className="my-4 text-6xl font-semibold font-orbitron"
              initial={{ opacity: 0, y: 50 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 1 }}
              viewport={{ once: true }}
            >
              Revolutionizing AI with
            </motion.h3>

            <motion.h3
              className="my-4 text-6xl font-semibold font-orbitron"
              initial={{ opacity: 0, y: 50 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 1 }}
              viewport={{ once: true }}
            >
              Scalable Automation
            </motion.h3>

            <motion.p
              className="text-base my-5"
              initial={{ opacity: 0, y: 50 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 1 }}
              viewport={{ once: true }}
            >
              Create, deploy and scale AI agents effortlessly
            </motion.p>
          </div>

          <div className="grid grid-cols-3 place-items-center mt-[10rem]">
            <motion.div
              className="col-span-1"
              initial={{ opacity: 0, y: 50 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 1 }}
              viewport={{ once: true }}
            >
              <Card
                icon={<Blocks />}
                heading="Seamless AI agent creation"
                content="No-code / low-code framework for rapid deployment."
              />
            </motion.div>

            <motion.div
              className="col-span-1"
              initial={{ opacity: 0, y: 50 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 1 }}
              viewport={{ once: true }}
            >
              <Card
                icon={<PictureInPicture2 />}
                heading="Multi Platform Integration"
                content="Connect AI to Discord, Twitter, Telegram & more."
              />
            </motion.div>

            <motion.div
              className="col-span-1"
              initial={{ opacity: 0, y: 50 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 1 }}
              viewport={{ once: true }}
            >
              <Card
                icon={<Leaf />}
                heading="Scalable and Efficient"
                content="AI designed for high-performance execution."
              />
            </motion.div>
          </div>

          <h3 className="mt-[15rem] font-orbitron text-left text-6xl font-semibold">
            How it Works
          </h3>
          <div className="grid grid-cols-2 gap-6">
            <div className="mt-[5rem] px-[4rem]">
              <InfoCard
                number="01"
                heading="Generate AI Agents"
                description="Select a use case & train your AI."
                numberBgColor="#007AFF11"
                numberTextColor="#007AFFFF"
              />
              <InfoCard
                number="02"
                heading="Deploy & Integrate"
                description="Connect across platform with simple APIs."
                numberBgColor="#8177EA11"
                numberTextColor="#8177EAFF"
              />
              <InfoCard
                number="03"
                heading="Optimize & Scale"
                description="Utilize memory, chaining, prompt tuning"
                numberBgColor="#EA433611"
                numberTextColor="#EA4336FF"
              />
            </div>
            <motion.div
              initial={{ opacity: 0, y: 50 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 1 }}
              viewport={{ once: true }}
              className="place-self-center"
            >
              <img src="/img-side.png" alt="side-img" />
            </motion.div>
          </div>
        </div>
      </div>
      <div id="agents" className="mt-[15rem] mb-[10rem]">
        <motion.p
          className="text-5xl font-bold text-center font-orbitron"
          initial={{ opacity: 0, y: 50 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 1 }}
          viewport={{ once: true }}
        >
          The Power of AI,
        </motion.p>
        <motion.p
          className="text-5xl font-bold text-center font-orbitron"
          initial={{ opacity: 0, y: 50 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 1 }}
          viewport={{ once: true }}
        >
          Unlocked
        </motion.p>

        <div className="container mx-auto">
          <div className="flex items-center flex-wrap justify-center gap-8 mt-16">
            {/* First set of PixelCards */}
            <motion.div
              className="w-[250px] h-64 relative"
              initial={{ opacity: 0, y: 50 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 1 }}
              viewport={{ once: true }}
            >
              <PixelCard variant="yellow" className="w-full h-full">
                <div className="absolute flex items-center justify-center flex-col gap-4">
                  <img src={cardIcon1} />
                  <p className="text-2xl font-bold text-neutral-700">
                    Multiple AI Models
                  </p>
                  <p className="text-base text-center">
                    Connect to OpenAI, <br />
                    Anthropic, and more
                  </p>
                </div>
              </PixelCard>
            </motion.div>

            <motion.div
              className="w-[250px] h-64 relative"
              initial={{ opacity: 0, y: 50 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 1 }}
              viewport={{ once: true }}
            >
              <PixelCard variant="yellow" className="w-full h-full">
                <div className="absolute flex items-center justify-center flex-col gap-4">
                  <img src={cardIcon2} />
                  <p className="text-2xl font-bold mb-4 text-neutral-700">
                    Modular Architecture
                  </p>
                  <p className="text-base text-center">
                    Plug & play connectors for <br /> X/Twitter, Discord, etc.
                  </p>
                </div>
              </PixelCard>
            </motion.div>

            <motion.div
              className="w-[250px] h-64 relative"
              initial={{ opacity: 0, y: 50 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 1 }}
              viewport={{ once: true }}
            >
              <PixelCard variant="yellow" className="w-full h-full">
                <div className="absolute flex items-center justify-center flex-col gap-4">
                  <img src={cardIcon3} />
                  <p className="text-2xl font-bold mb-4 text-neutral-700">
                    Prompt Chaining
                  </p>
                  <p className="text-base text-center">
                    Non-repetitive, intelligent <br /> responses.
                  </p>
                </div>
              </PixelCard>
            </motion.div>

            {/* Second set of PixelCards */}

            <motion.div
              className="w-[250px] h-64 relative"
              initial={{ opacity: 0, y: 50 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 1 }}
              viewport={{ once: true }}
            >
              <PixelCard variant="yellow" className="w-full h-full">
                <div className="absolute flex items-center justify-center flex-col gap-4">
                  <img src={cardIcon4} />
                  <p className="text-2xl font-bold mb-4 text-neutral-700">
                    Memory Storage
                  </p>
                  <p className="text-base text-center">
                    Store Conversations and start <br />
                    where you left off
                  </p>
                </div>
              </PixelCard>
            </motion.div>

            <motion.div
              className="w-[250px] h-64 relative"
              initial={{ opacity: 0, y: 50 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 1 }}
              viewport={{ once: true }}
            >
              <PixelCard variant="yellow" className="w-full h-full">
                <div className="absolute flex items-center justify-center flex-col gap-4">
                  <img src={cardIcon5} />
                  <p className="text-2xl font-bold mb-4 text-neutral-700">
                    Real-time Monitoring
                  </p>
                  <p className="text-base text-center">
                    Track & manage AI <br /> performance via CLI.
                  </p>
                </div>
              </PixelCard>
            </motion.div>
          </div>
        </div>
      </div>
      <motion.div
        className="mt-[15rem]"
        initial={{ opacity: 0, y: 50 }}
        whileInView={{ opacity: 1, y: 0 }}
        transition={{ duration: 1 }}
        viewport={{ once: true }}
      >
        <Tokenomics />
      </motion.div>

      {/* RoadMap Section */}
      <motion.div
        id="roadmap"
        className="relative w-[85%] mt-[5rem] container mx-auto"
        initial={{ opacity: 0, y: 50 }}
        whileInView={{ opacity: 1, y: 0 }}
        transition={{ duration: 1 }}
        viewport={{ once: true }}
      >
        <h2 className="text-4xl font-semibold font-orbitron text-left text-gray-800 -mb-28">
          Our RoadMap
        </h2>
        <div className="flex items-center min-h-screen justify-center">
          <img src="/roadmap.svg" alt="" className="absolute" />
        </div>
      </motion.div>

      {/* Footer Section */}
      <motion.div
        className="container mx-auto max-w-[90%]"
        initial={{ opacity: 0, y: 50 }}
        whileInView={{ opacity: 1, y: 0 }}
        transition={{ duration: 1 }}
        viewport={{ once: true }}
      >
        <div
          className="w-full h-[300px] md:h-[350px] flex flex-col items-center justify-center text-center p-6 rounded-3xl"
          style={{
            backgroundImage: "url('/img-footer.png')",
            backgroundSize: "cover",
            backgroundPosition: "center",
          }}
        >
          <motion.h1
            className="text-3xl md:text-4xl font-bold font-orbitron text-black mb-3"
            initial={{ opacity: 0, y: 50 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 1 }}
            viewport={{ once: true }}
          >
            Ready to Build Your <br className="hidden md:block" />
            AI Agent?
          </motion.h1>
          <motion.p
            className="text-gray-700 text-lg md:text-xl mb-5"
            initial={{ opacity: 0, y: 50 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 1 }}
            viewport={{ once: true }}
          >
            Join our AI community to share ideas, collaborate, and stay updated!
          </motion.p>
          <Link to="/create-agent">
            <motion.button
              className="bg-yellow-400 hover:bg-yellow-500 text-black font-semibold px-6 py-3 rounded-lg shadow-lg flex items-center gap-2 transition"
              initial={{ opacity: 0, y: 50 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 1 }}
              viewport={{ once: true }}
              onClick={() => handleLogin()}
            >
              Launch App Now
            </motion.button>
          </Link>
        </div>
      </motion.div>
      <footer className="w-full mt-32 py-4 px-12 flex flex-col items-stretch text-gray-700 text-sm">
        <div className="flex justify-between items-end">
          <nav className="flex space-x-8 mb-4">
            <a href="#agents" className="hover:underline">
              Features
            </a>
            <a href="#tokenomics" className="hover:underline">
              Tokenomics
            </a>
            <a href="#roadmap" className="hover:underline">
              Roadmap
            </a>
          </nav>

          <div className="flex items-center space-x-6 mb-4">
            <a href="https://equilink.gitbook.io" target="_blank">
              <button className="p-2 rounded-lg duration-300 border hover:bg-yellow-300">
                <img src="/gitbook.svg" className="w-6 h-auto" />
              </button>
            </a>
            <a href="https://github.com/Equilink-Suite" target="_blank">
              <button className="p-2 rounded-lg duration-300 border hover:bg-yellow-300">
                <img src="/github.svg" className="w-6 h-auto" />
              </button>
            </a>
            <a href="/" target="_blank">
              <button className="p-2 rounded-lg duration-300 border hover:bg-yellow-300">
                <img src="/X.svg" className="w-6 h-auto" />
              </button>
            </a>
          </div>
        </div>

        <div className="flex pt-8 mt-4 border-t justify-between px-4">
          <span>&copy; 2025 EQUILINK</span>
          <div className="flex space-x-4">
            <a href="#" className="hover:underline">
              Privacy Policy
            </a>
            <a href="#" className="hover:underline">
              Terms of Use
            </a>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default Home;
