"use client";
import { cn } from "@/lib/utils";
import React, { useState, useEffect } from "react";
import { BentoGrid, BentoGridItem } from "../ui/bento-grid";
import {
  IconBoxAlignRightFilled,
  IconChartBar,
  IconClipboardCopy,
  IconFileBroken,
  IconPencil,
  IconSignature,
  IconTableColumn,
} from "@tabler/icons-react";
import { motion, AnimatePresence } from "framer-motion";
import { FaPlay } from "react-icons/fa";

export function BentoFeatures() {
  const variants = {
    hidden: { opacity: 0, y: 50 },
    visible: { opacity: 1, y: 0 },
  };

  return (
    <motion.div
      initial="hidden"
      whileInView="visible"
      variants={variants}
      transition={{ duration: 0.5 }}
      className="max-w-6xl mx-auto py-20"
    >
      <div className="text-center mb-16">
        <motion.h2 
          // className="text-4xl md:text-5xl bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-blue-500"
          className="text-4xl md:text-5xl bg-clip-text text-white"
          variants={{
            hidden: { opacity: 0, y: 20 },
            visible: { opacity: 1, y: 0 }
          }}
        >
          All-in-One Platform for AI-Powered Services
        </motion.h2>
      </div>

      <BentoGrid className="md:auto-rows-[20rem]">
        {items.map((item, i) => (
          <BentoGridItem
            key={i}
            title={item.title}
            description={item.description}
            header={item.header}
            className={cn("[&>p:text-lg] ", item.className)}
            icon={item.icon}
          />
        ))}
      </BentoGrid>
    </motion.div>
  );
}

const SkeletonOne = () => {
  const [isHovered, setIsHovered] = useState(false);
  const [animationState, setAnimationState] = useState('idle');
  
  // Control animation cycle
  useEffect(() => {
    if (isHovered) {
      const animationSequence = async () => {
        setAnimationState('drag');
        setTimeout(() => setAnimationState('drop'), 1500);
        setTimeout(() => setAnimationState('complete'), 2000);
        setTimeout(() => setAnimationState('drag'), 3500);
      };
      
      animationSequence();
      const interval = setInterval(animationSequence, 4000);
      return () => clearInterval(interval);
    } else {
      setAnimationState('idle');
    }
  }, [isHovered]);

  return (
    <motion.div
      className="flex flex-1 w-full h-full min-h-[6rem] bg-gradient-to-br from-purple-900/50 to-blue-900/50 flex-col space-y-2 rounded-xl overflow-hidden"
      onHoverStart={() => setIsHovered(true)}
      onHoverEnd={() => setIsHovered(false)}
    >
      <div className="flex flex-col space-y-2 p-6">
        <motion.h2 
          className="text-4xl font-bold text-white"
          animate={{ scale: isHovered ? 1.05 : 1 }}
        >
          No Coding Needed
        </motion.h2>
        <motion.div 
          className="h-2 w-32 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full mt-4"
          animate={{ width: isHovered ? "40%" : "8rem" }}
        />
        <a href="/series" className="mouse-pointer">
          <motion.p 
            className="text-neutral-300 mt-2 flex items-center gap-2 mouse-pointer"
            animate={{ x: isHovered ? 10 : 0 }}
          >
            Learn more 
            <motion.span
              animate={{ x: isHovered ? 5 : 0 }}
              transition={{ repeat: isHovered ? Infinity : 0, duration: 0.6 }}
            >
              →
            </motion.span>
          </motion.p>
        </a>
      </div>
      
      {/* Drag and drop animation container */}
      <div className="relative p-6 h-64 flex items-center justify-center">
        {/* Drop zone */}
        <img src="https://everydayse-9255d3654d3ea492188c-endpoint.azureedge.net/blobeverydayse8906e17f60/wp-content/uploads/2023/07/Intuitive-user-friendly.png" className="w-full h-full object-cover" />
      </div>
    </motion.div>
  );
};

const SkeletonTwo = () => {
  return (
      <motion.div
          className="flex flex-1 w-full h-full min-h-[2rem] bg-gradient-to-br from-purple-900/20 to-blue-900/20 flex-col items-center justify-center rounded-xl cursor-pointer"
      > 
          <img
              src="https://images.unsplash.com/photo-1484522676511-0f51cc572bb0?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fHR5cGluZ3xlbnwwfHwwfHx8MA%3D%3D"
              alt="Typing Image"
              className="object-cover h-full w-full rounded-xl"
          />
      </motion.div>
  );
};

const SkeletonThree = () => {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <motion.div
      className="flex flex-1 w-full h-full min-h-[6rem] bg-gradient-to-br from-purple-900/20 to-blue-900/20 flex-col items-center justify-center rounded-xl"
      onHoverStart={() => setIsHovered(true)}
      onHoverEnd={() => setIsHovered(false)}
    >
      <img
              src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxIPEhUQEBMWEBAPFxUPEBAPEhgVEA8PFRMXFxUVFRUYHyggGBolGxYVITEiJSkrLi4uFx8zODMtNygtOisBCgoKDg0OGxAQGysfHyUtLS0tLS4tKy0tLS0tMCstLS0tLSs1LS0tLS0tLS0tLS0tLS0tLSstLS0tLS0tLS0tLf/AABEIALkBEAMBEQACEQEDEQH/xAAbAAEBAAMBAQEAAAAAAAAAAAAAAQIDBAYFB//EAEIQAAECBAUCAwQHBgUEAwEAAAEAAgMRITEEEkFRYSJCBRNxMlKx0QYUQ2JygZEHI5LB0uEzU2OhwoKTo/AWs+IV/8QAGgEBAQEBAQEBAAAAAAAAAAAAAAECAwUEBv/EADURAAIBAgMFBwMFAAMAAwAAAAABAhEhAxIxBEFR0fAiYXGBscHhE5GSBTJCobIUI/EVJGL/2gAMAwEAAhEDEQA/APxtdjAQBAEAQBAEAQBAEAQBAEAQBAEAQBAEAQBAEAQBAEAQBAEAQBAEAQBAEAQBAVARAEAQBAEAQBAEAQBAEAQBAEAQBAEAQBAEAQBAEAQBAEAQBAfa8e+jcTBQcLGiPa4Y+GY7GNnnhtAYesEa5xKWxXybNtkMeeJCKfYdH366fY1KLSTPir6zIQBAEB1RofRCIkJscTuT50QT/QD9FXojjCTzz8V/lGt0GgqKz1UOik66E8qlxc6+iCrrox5VJzF5XQmZ10KIVCZi4F+D8kLmddA2DQ1FOeUJmddCNhXqKCd+QhXJ8AyFyLHXhCOT4MMhTNxrrwgcnTQsODMgTFSBdCttJ2JDhTIExUgX5QkpNJ2J5fI/VDVe4sSFIkTFCRdCRk2lYPhSJEx+qEUm1ow+FLUaa8IVSfAr4MpVFgboRSfAjoVBUVG/J+SFUnewMGgqKz15Qik66AwqTmLnX0QZnXRjyqTmLyugzOugEKk5i413n8kFXXQrYNDUU55QOTqrEbCvUUE78gfzQrb4BsLkWJuhHJ8GGQp6jXXhA5OmhWQZkCYqd0Dk0tCQ4UyBMVIF+UEpNJ2J5fI/VDVb6HZ4b4X9ZxEPDB7IZjxBBa95OVpc7KJyCxi4v0oOfBV+wg81D2P7bHtGOhwWOaWYaBDhNhtMzCM3Ehw0MslNpLyv0TCyYEpPWUm68ernXFd6H58vYOYQBAEB14hk2Qbew65A+2ibqvRdcThhvtz8V/mJqfDMhbXubv6qHRO75MhhmQtc9zdhygqq/DL5Zy6XHc3Y8oK9r4ZBDOU2uO5uzuUFe0vPc+4rIZk61h3N3HKBtVXJhkMyNre83ccoG7rkyQ4Zrax7m7eqBvqjEKGZ6WPc3Y8oJO3wywYZzC1x3N39UEmsr5MkGGczbXHc3f1QTfZfJmPlnj+JvzQ3W/wzKNDM3Wue5u/qhiDsvLcxFhmZt/E35oItU+GIkMz0sO5uw5QJqnwyxYZpaw7m/NAmukyPhmTbW95vvO5Qqd3yfBFfDMm217m7+qETu+TIYZkLXPc3YcoKqvwx5Zy6X95u3qgr2vhgQzlNrt7m7O5QtVX77n3FZDMnW07m7jlCN3XJhkMyda3vN94coG9OTIyGa2se5vzQSa6TEOGZ6a9zdjygk1T4ZYMM5ha47m/NBJ2fJkgwzmba47m7+qCb7L5M24DAujRGQgQDEIYDPNInUhtZLMpZU2WU1FN+zPZfs98BP/8AZhw3Frhhs2JeWnpMmTaW7jM9knWNxQheV+sbQo7DJr+Vv75bvua2VqVOtDzH0ox31nF4jETBEaK97CCDOHmIZT8IavQ2TB+jgQw+CX33/wBhzzOp8pdwEAQBAdeIbNkH8DtQPtom6r0XXE4YbWefiv8AMTU+GZC2vcN/VQ6KSq+RDDMha57hsOUGZV+C+Wculx3DY8oMyr8EEM5Ta47hs7lA5LMvPd4FYwydaw7huOUDkqrkRjDI2t7w3HKByVVyEOGa2se4beqByXSEJhnpY9w2PKCUlT4LBYcwtcdw39UEpKj5Egwzmba47hv6oJyWV8jHyzx/EPmhrMq/BlFhnMbXPcN/VDMJKi8twiwzM2/iHzQRkqfAiQzPSw7hsOUCkqfBYrDS1h3D5oFJdIj4Zk21veHvO5QKSvy7kV8MybbXuG/qgUlV8iGGcotc9w2HKDMq/A8s5dL+8NvVBmVfgCGcptcdw2dyhcyr993gVkMydbTuG45QjkqrkGQzJ1re8PeHKByVuRIcM1tY9w+aCUl0hDhmemvcNjyglJU+CwWHMLXHcPmglJUfIkGGczbXHcN/VBOSyvkY+WeP4h80NZlX4P0P9nLfquF8U8QMgYUE4eC6Y/xH5iRx1eV+q8H9XX1towNn4yq/BfFTpgOkM3cfnsZkibX3BXvs4wdUjWobCAIAgOrEMJZBkCeh1h/rRFp6LricMNpTn4r/ADE1vhmQoddDusnRSVWQw3SsbnQ7BBmVR5Zy2NxodigzLMBDOU0NxodnIHJZl5+xWQzJ1DYaHcIG1VEZDMjQ22O4QOSqhDhmtDY6HZUOSEKGZ2NjodioJSVPsWDDOYUNxod0EpLKyQYZzNobjQ7oJyWVmPlu2P6FDeZVMo0M5nUNzod0MQkqLyEWGZmh/QoIyVBFhmdjYaHYIE1QsWGaUNhoUCkrkfDMm0Ntj7zkCkqvrcivhmTaHXQ7oFJVZDDOUUNzodggzKo8s5bG+x2QZlmAhnKaG40OzkLmVfv7FZDMnUNhodwhHJVRGQzJ1DbY+8EDkrCHDNaGx0KCUkIcMzsddDsUEpKhYMM5hQ3GhQSkqMkGGczaG40O6CcllZh5Z2P6FDeZVP0TxVhwn0fhQpdfiOJdGeNfLY4kH/xwv1Xg4X/d+rTluw4083/6zcWo4Me8/PYzCCZgiuoXvnGDVEa1DYQBAEB1YlpyQadjtP8AWiKvRdcTjhvtz8V/mJqewyFDrpyobTVXchYZChudOAhaqupQw5TQ3GnBQVWbUgYcpobjThyCqza8fYrGGTqGw05CBtVVyMYZGhttyEDaqriGw1obHThBJriITDOxsdOChJNU1LBYcwobjTlCyayu5ILDmbQ3GnKCbWV3Mch2P6Iaqq6mUZhzOobnTlDMGsqvwEVhmaH9EEGqaiKwzsbDTgIIyVNSxWGlDYaIItcSPYZNobbfecgTVXfqiK9hk2h105Qiaq7kLDIUNzpwELVV1GQ5bG+3CEqs2oDDlNDdunDkLVV14+xYbDJ1DppyEDaqrkYwydQ22+8EDatcQ2GtDY6cIJNCGwzsddOCgk1TUsFhzChuNEEmqO5ILDmbQ3GnKCbWV3MfLcaAEk0AAJJJsAEqlqaqj9B/bEfLiYTAsq3A4Zop775A/wC0Np/NeF+h1nHF2h/zm/6/9Z0xKRpHgeAjNMzTVe8cYtURrUNBAEAQHViT0QfwO/8AuiLT0XXE44f75+K/zE0vJkPz+KybSVWQkyHqfgELRVLM5fzHwKCiqATlPqPg5A0sy8/YrCZO9B8QgaVURhMj6fzCBpWEMmvofgqGkIRM/wAj8CoSSVCwScw9R8ULJLKyQSczfUfFCTpRmEyhuiqZRiZu9T8UMwSovIsUmZVEUsqEQmf5D4BQJIsUmnoECSuR5Mm+n/JyBJX63IPJk38/ihElVgk5R6n4BC0Veu8TOX8/5ISizAE5T6t+DkK0qrz9isJk78viEDSqiMJk70/5BA0rCGTX0KBpWEMmf6/AqiSVCwScw9QoJJUZIJOZvqPihJpZWep/ZZ4b9a8SghzQ+HBzYiKHk5Q1g6TQ++WUNF536rtH0Nmk97svPX+qnaEU5HL+0DxxmPx0bEQmlrCRDacxPmCGMofX2ZgAyHzXbYdneBgRg9dfCu4zNqTqfAjGp9V9hiOiNahoIAgCA+g1pcILZy/dvP8A5oi1w64ny1o8R03r/KOZxPSJnUX5WandJXdDAxDIVNzrwEqXKq6FDzlNTcanYpUZVm0AecpqbjXhyVGXtacfYrHmTqmw15CBxurEY8yNTbfkJUON1YQ3mtTY68JUOK4CE8zubHXgpUSjbQsF5zCpuNTulRKKyuxILzmbU3GvKCcey7GGc7n9UNZVXQzjPOZ1Tc68pUzCKorcBFeZmp/VBGKpoIr3TubDXgJUKKpoWK80qbDVKiMVwI95k2ptufecgUbu3VEV7zJtTrrygUbuxC8yFTc68BKjIq6DOctzffhBl7WgDzlNTca8OQZVXTj7FhvMnVOmvISocbqxGPMnVNt/vBA43VhDea1NjrwlRKC4CG8zuddeClRKNtCwXnMKm41SolGzsSC85m1NxrygnHsux+geAPPhvguIxpJGI8Sd9Uw0zUQhmDnDb7U/9LV4O0//AGv1CGD/ABw+0/Hqi+53jFRi3xPz+K85jU3OvK96pwhHsq3AkZxJMyTXVURjRKxrUNBAEAQH0WR8ggk28t9t/OiLVaU64nyvDzua71/lGmG4uLQDqT+QM1lHSSik6o1uc6gn3EfBDSjF3S3EMQyNdfmgUFXQCIcprqPg5KjIsytx9gyIZOroPiEqHCNVYMiGRrp/MJUOCqrCHENa6H4IHBcCQohnfQ/ApUSgqaFgxTmFdR8UqWUI0diQYjsza6j4pUk4KjsY+ad0N5I10MosQzNdT8UqYhCNFbgIsQzNUEYRpoIkUzvoPgEqVQjTQsWIaV0CVChHgHxDJtdP+TkChGrt1RB8QybXf4pUigquxnhyXFrSSASbegStiSjFVdBHJbNs7Ol/slQopvTcYCIcprqPg5Kmska6cfYMiGTq7fEJUjgqqwZEMnV0/wCQSpXBWsRkQ1roUJKEeBYT3E666cS+KVEoRoIUR2YTJvqEqJQjTQ6fBsHGxUeHAgguiRXNa0ATlWrjLtAqTsFjExY4cHOWiNPDTskev/azj2sjwvDoMxB8NhNggbxXNaSTv0hldy5eT+jYUsktoxP3Yjr5J86/0dsRJtR4HiIpf1OrlBIJlQVXs1PnhGNF5GMd5JM91SwiklQ1KGwgCAIDqxDpMg29h1wD9tE3WnouuJww125+K/zEw84tykSmJ9o39FmpvInVMNjkScZGpJm0VoOFahwTt3GXmF05ADM4dol8EJlUfJEizbNtKFvaNncIWNJUfjvfcYseZOtYdo3HChXG65sjHmRtb3RuOEDV1zYhxDW1j2jb0VDj1c3FmXKaHMCfZFOn+6GE61XDvZqgvOYWuO0b+ihuUey+bJBeczbXHaN/RUTXZfNkmZTkJW9kfJQ1RVp7ssZ5zOtc9o39EMwjZeW9iK8zNv4R8lRGNvliK8z0sO0bDhQKNvllivNLWHaPkgUdebI95k21vdHvO4QKN3zfBB7zJtte0b+iBK75s34J5zMt7Tu0bDhHoZnFUYxTiXOAlMvkBlG3oidhFK3gaomZoLTKYIn0jZ3CJmkk2n4733EY8ydaw7RuOEDjdc2RjzJ1re6PeHCBrTmxDea2se0fJUOK6qdvg3i0TCxDEhhpcWlvU2kqGzZTt+VxIgEYnFSVGYxcKM40dTv+iH0ej+KYnyYGVsgYsR7xNsNk9dXEkgbrjtO1Q2eGeXgu86rDzWPYYjxjC/R4/VsC1uK8SpDxOMis/dwqjNDa0S/hBpSZJEl5MMDaNvksTH7GHuitX3vn9ktTo2sNOmp+d+J+KxcVFfiI7/MixTmc4tH5AUoAKAcL28PDjhxUIKiRhqrv6m4PPkxbe2e0fd4R/uOMUqx8DgjOmTa+gA+C6M3BWRrUNhAEAQHXHdJkG3sOuAft4ir0XXE4YarOfiv8xNT4lBQa9o3UOijdkMSgoLntGwQZb/JsgRLUHtN7QhmcbPwZnjIlXUF29o90qszhxsvB+pqZEo6gsO0bhQ6ON0RkShoLe6NwgcdA18tBUE+yNkDS/vidUZ/TDoPZOg90KnGMby63nLBidQoLjtG6h2lGzEF9W0Fx2jcfNBNKj5nSH/uDQX2HCGMq+qc8V1XGQo6XsjWfyQ1BWXMkWJU0H8IQsY2+REiVsLDtGwQKNixYlqCw7QgUeqkc8ybQWPaPecgUVfrcg59G0GvaN0Cjd8zdgn9TKD2ndo2Cj0MzjZmxz/3th/iDQJuJl7PkYY6J1PoLt7R7pSOhYx08H6o0MiUdQado3CppxugyJR1Bb3R7wQOOnMjIl6Cx7QgcfH7n0fo/4RiMdGEDDQ/MiEEmgDWNsXPdYCvymVyxseGDHPN0XWhfp1svU9r454vD8Fhjwzw588U4g4/GsEnZ/wDLZKxv+EfeJI8jZcGW24n/ACcddn+Mfd9XfcjcuymkeC8Kx5hRWxMrXkE9Lh0uzAjq94VqNbar2pRzKhyxIVi1cwx+NMaI+LlDfMcXSuGk6AkW2GgkEiqJI1GGVJGZxUmRGyEy+8hL/wB6UauYjDR9yOaO6ZNr6ABaNQVEjUhsIAgCA6sQeiDQHodef+dE2Kr0XXE4Yf75+K/zE1PcJCg11O/qodEru/oC4SFBc6nYcoKX19AHdNhcanY8oWna19DMuBnQSLhq63VyhmjVL7nw7jbiQ1pcA0ASbq7f1VZjDq0m36cjnY6hoLc7jlQ6NXV/QzJ+6PZ+9t6oTz39x0R3DLDoPZO/ujlU5QV5X6qaIbCC1xaJOIlU7+qh1bqmq+hlDZ0sdIVfbq3HPCGZO7Xd3cjUMQcuSQlfWfxQ6ZO1WpvLAWRHSEw7cyv68lDnFusVXcaXEFxoKGsy7cc0Rm4qyv6cjq8ZEBrwMOc7MomXF2bNM0qBSUpb3oaCLvOeB9Rx/wCyz8vk5IrrUFhv81TpFd/obID2AtzimU2nfM7lDLUr0e/u4LuLAbmcwADU1LrAnlQO1W36cjBpykUAIcRObuAdVdxaVrfd3cgI0uqQJDp1Lry9U3DLeld3dyLiYuYuOUe0BTNoHDdRaFjGlFXc+Hd3BxAzDKBbfccoSml/Q6/CfDjHbGcC1vlNDiCHEvEnOkyRq7o9naZ0KkpU3GMWeRxV7+Bw4cFxytZmc7pa1uYuc40DQAakmi1VJVZ1ku/0P01mKH0aw3lw8rvFsa0PignMzCwgDlBE5Egky3MzUABeFFP9RxszthR0/wD0+vsu83mcFY/NfPMSIXv6nxHF73OJLnPcZucTOpJJXuJJJJHOSs7+hhBu0yFXAXdoRzyqJ6O/odQcPq9h7XPzWP5Cnb19ORyxYg6hIe1PXTNzytkgrK/DhyMYxqaAV0n/ADKpqKsjWoaCAIAgOrEEZINJ9Dtf9aIq9F1xOGGnnn4r/MTW8iQpvqd1Dok6u5CRIU1Op2CCjrqARltqNTsUFHm1AcMppqNTs5A082vH2NkWJPMSJmQ15CMzGNKJPq5txrWtJAaB0i34gqzGHmaVXv8AY1xMQHy6ZZWkX4Q1GDjv3mLXDppo7U/eUK0734FY4dFNdzuEK073NkOM3IxsqhwMpnf+6piUJVb7jkzDb/cqHajrqbIsSrhKkzMTMroYhGyvwOuDLLF6UZzdaxucpkZ9Nmg3OwQ6KvE6sGGkmbQejVRmJ1prvONzhJtNNz7xVOiTvfqiM2xA3KZWnYndCUbrcwLhIU1dqdmz+IVLR11GYZba7nZQUebUzguFKdzNTygafHc/Y7sZAc4xXthucyEGGI9ocWww50m5iKNmZ3XPPFNRbSb0XHwMYcZNKh8+FIzAbMkAACZJOZspLpU207XP1D6L4TDeAQvrviLA/Gxmn6thm9USC0AkznRpJkC7tsLleFj4s9vl9LB/YtXufW5b9TpBqOtz848Q8RdiY8SPF6okZznuJcTKYMmjgCQHAXtYOHHCgoRVEjnNPic0EjMKajVbEk6O5uhw5NY+QkXyFTO4/pKlbmZ71XcbQR9Xt3blT+RaP6mpxxiMxpqdTutFgnlV+BIxEzTXdUQTojWobCAIAgOvEEZIMwfYdYy+2icKvRdcThh1zz8V/mJqeRIUOvcN/RQ6KtX17kJbIUNzqNhwgvXrmJjLY3HdweEF69cwCMpobjuGzuEDrmXn7d5WuBDqGw1G44QUdV17mb3gznM9Iu78PCESpSnHrea4ZFaGx7uPRCuvX/pYbhShoD3DYnZA06fbrUyhubNtDffkcIGnR9e5hBLczaG47ufRBOuV9e5lhYPmPbDaOp5DRN1JmgnJpQTlkTk93XE2eI4fyoj4bx1NPUA6ciROU5VvpT1QzgyzwUlp13kOIy5mgUdev9kChWjMfOyzlPqABqNvRC5W+vk3YeM1hnImbPe/PZQzKLa8zRFZlDJtcA5uZpNA5uZwm2YqJpVPQ2q1fXDvK1mfIxrXOc85GNBq5znSAFNSQjaSqwq1fXufr2P8NwkTCQ/Av3bMdChNjsiBsgY4q/qvmcL7tM5UX53DWLDaJbbVuDdKd3JbumZe0tw/b5n5JiMM6G50KJDc2Kx+R0MnqD7SoK/zX6GM4yjmWhpXda9fc/QsD9GPDvD8I2N4rnOLiuD2YRkSUQCZDW5WkTnObiTSUvXxMTa9rxtoybMlkWsqe7/pb9fDacXB3uI37TX4YPg4TBwIUHpOV0yXTIBzBsgZinzWpfosMWSxMXEk5Lh81M4eI1Gi3mzwf6deHMMSPG8NhwcXDZnhOgtaREeZUnlHlmZ9qtAa78tp/TNrllhh4zcK3T4f3XwOmG4pdq5+feJeKRMXFfHxDjEivBmZgACVGtEulo0C9zBwoYUVCCokcpJnJDLZ2OvdweF0Eq065mUKUxQ1NOob+iCVaPr3OynkwqH2xryeFn+TMSrV+HW848wySrKds1Leiu860ebrmYxi3MaG57hv6KmYVyry61JGlMyBvqZ/yVLGtEa1DQQBAEB14iWSDOfsOtL/ADoir0XXE4Ydc8/Ff5ian5ZC+u26h0VashyyF7nbYIL1KMuXW422KC+YoaMpo64rLh00I2827f7EZlk69htuEK61QaRW9uNwhHWwh5a3sdtlUV1EKU+6x290lQSrT7H3Po59FMRjXt8uG5kO5jRRlhgCsxOrv+kG644uPDCVWccXaIQVG1XgfLxWCdh4xgRQWxITwx7ZggGYsRcarpCSklJaM6Zs0My0ocrHAVBcCLEEAj81o6NN2dDeyA6NFEOGHxIj3eWxjaucZyDR/wC0WZSjFOUnRIxCqitD2H/wdmEPm+KxmwIQMxBY4OiRwNAWjWXbM+i+NbYsaP8A0X7+Bw+tNPJCNWdX0k8IwnibPrXhLQ18BrWx8K1uSIW5RlcGWmAJU9qV5hcdlljYHY2h1ro9f76oaeM4SpLTifB+i30c+uPc+KTBwkBs8RFfJoaAKsBPdK+36T+zaMf6aSjeT0QniONld1PX4/xbBeOtGBaPqsSDXARHABsUCbcspdIIHsbAG4kvNwtnxNjf1a5k/wBy69SVxIXd+J8r6J+CfUHRsdjmOY3w4FrGOl+8xDrZD3Uc2RtN42X0bVjLFUcLCdc3p1/RZScrR3nj8T4nEiRjii5wjuiGNnaZFr+mWXYCgHAX3xw4xhk3aHVRatbQ/S4f0l8Odhm+LRQx/ikIeQINQXR5dLsm2WZz6AkTmKeDLB2r/kf8WKphO9e7x9vM1HBioa3PzbxHxGJiojsRGc6JEc5ri6XTIToBYNFKaT5Xu4eHDDjkgqIzo6W3+xz4iM15c6thtutoiTVEb/EnNLjc9AtL3gkdCQzUXic8SAGXnVpOmyJlq39w5sMZcpJJac3Bkf7/AKIg3LfQzGIDgxkj0m9ESuHFqrMmxmFkNnVMP40P/wCgiVxJSu+45czZSreemyu86dqoi5Zm9ztuhmFcq8hHlMynfVUQrRGpQ2EAQBAdeIAyQZkjodYT+2icqvRdcThh1zz8V/mJqeGyFTr2jf1UOirV26+xCGyFTc9o2H3kF6/PwWTctzcdo2PKCrzfPwdUDHZIL4I9mI4Fxkc05Ul1SHs/nrOQla2ocZ4KljRxHqtOqd/lupV15WBsnVOnaNxyodm3VW/v4IzLI1NvdG45QOtrdfY3+HYN0d/lwWvivIJysZMy3NaDk0UclG7JiTyLNKiXj8Ht/CYmH8C6ossTjYrSPLbKUBkp+0bTsTc6CS+XGw3jqidEefnxNqfZVIL+2eexX0txcaIHnEPhycC1kBohsbwAHTI/ESu6woUytV8T6o7LhwTyxXXkfaLGeNwxEZJviOGDfMaAB9ahzoRWX+9DQ0IXOv0Xf9vofM82ytx1g9O5niI0LI4sfma9hLXMcyTmkXBBNF3TTVUekm3devwe0+jeDh4CGfFcTMkEtwUI0c+IZ9cp+sjsCdl8uM/qP6S8z4pzliNYULaVZ5jxzxSJjIzo+IiOiRHUnlAa1os1gnJrRt/Nd8LChhRyQVEfXGtNOvsTw7xF+FjNjQXua9ku0Sc2Qm13VVpVxIKccrI45o0a6+x6f6d/TVniEOHBgsdh4UhEjtp+9inQyNWgzMzcm1F8OxbFLAcpTlme7rvMww1F1p3HjjIZSHOBFQQJEEOMiDmoV6J0Td7dUXcet+lH01iY7BwcNEh5SwtdFjSP71zQchAn0zEyZzncLz9m2COBjSxE610XDrcc4Ro7UPIENkKm57RsOV6Burrp19hJsrm/ujb1QXzdcjugeJFmHfhx7ERwLjI5p0Il1yHsCkpHWchLOVVqYlh1xFPh1w7ziYGydU2HaNxytG3Wqt/fwUZTmqfZA9kaFo34QOtufwZxIwfcmjSPZH9SiVCUa3b+PwaoYbO517RseVSyrT5+CwQ3MKm47R80Eq0fXsWCW9ImaOn7I1y/e4Qk60fhx+DXJu5/hHzQ6Xrp19jKKGzNTc9o39UMQrlXlv8AgR5TMiTXUS/mqI1ojUobCAIAgOuOBkgzMuh2k/toir0XXE4Ydc8/Ff5ibcUYBhQw2YiD/EdlMnX9mbqc7mUpI6UsZw/rfUlm/bu+bfbgfaH0JjuwrMSwhxfN/k2f5bgJEEmRduOVhSrLLQ+WX6ngxxXCVkrV3VPiN8PiE+WGRM+YNyeUc2aRpL0Wj7PrQpnqqU1qemwn0Dc6A4xIzYeIJaYcEkSlI0eROprKUxTXTEpNSSoefL9WhnTjFuKrV8j4J8AxDXmCYUTzDIABkweq+cHLLmcls+1bXhSjnUlTx9tT02GfhfCIb4cVrcXi4rZxGyBhw2zEmEmzZyNpmVrLnKLk1c89vG2ySlHsQWnF95qwf7Q40LN5UKDDaWkANhmjpdJnmqBtKq54uzRxaKT0PojsCjq2/P4PIOieY9z3vLnvzOc4tq5xBmbrulTQ+6lI0SorG7wrEtgxA+QfduV7egzp1CdRwqYx8N4kHHTw18jp8J8YfhsUMVBdleXElrhmDmvPU1xpMc03WMXDWJHLIThXDyNaL0PQQ/p62K4HHYWDigCDMQ8rmjjMXAkfkvney0jTDk0cHsjT/wCuTXmfK+m3j7cfHztnDgwh5cGGRYT6nSBkCZCnAXTZ8H6caN1Z22fCeHHvZ8KK1szU/wAP913OsW6CI1s7mw7eBygTdCxWtpU2Hb/dAqke1sm1Nvd+8eUCbq7dUR14vHmJChQXHogzySBmNDObqzvxYSFFKHOGHlnKS1ff8deJyENkKm57fTlU6VlUSblub+7x6oKvMA1uU1Nx28O5QVddOPsVgbJ1Tp28jlA26qxGNbJ1Tb3fvDlA27BgbWpse3+6BuQhtbO517eDygk3QsENzCpuO3+6CTdHYkFrczeo3Hbz6oJt5WY5W7n+H+6GquuhlFa2Zqbnt59UMQrlXkSOBMyM67SVLCtFU1KGwgCA+74X4th/Lbh8VADmNnliw6RWlxmSdf0P5FdIyVKSR5m0bJtH1HjbPiUb1T0dOuHmd2N+jXnMY/BRBGhtaZNccsWRiPdtWpIrKy08OqrF1Pnwv1P6U5R2qLjJtXWmiXzvNXgfgVTHxYLMPh5ueHtcPMeDRoBAmN5cDVYjDjuOu2bbZYeBec9KUsuPXjuOPxTxyLGi+e2IYeUkQmtc4eWykhQSJOqkpVdTvs2xYeFh/Scc3GtLvrQ+sPp1ifqxhTh+bmAEfKcwZL3JSzc7aLm41nmqcP8A4vA+po8vD5rWh5iLEc+cR78zy5pL3FxdOTtZTWj0klGkYqio7W7j0Xhv01xUKBEgl4iEgCHFeCYkLQ6ddLTsd7LEoKTrU+HE/TsCWIpZacVaj5eR5oVzEumSJknMSSXCZJIqVs+52okvTgSG0VqLHfb0VK33cOAhNrcWO+x4UEnbThwLBb1CouN9/RBJ9l29CQW9Tai4339EE32Xb0MMvI/3+SGq309DKM3qdUXO+/ohmDsrcOBYrRM1H+/yVEXbT0EVtbiw32HCgTtp6FittUWG/wAkCfd6Ee2jai3PvO4QJ3dvTgg9tG1Gu+/ogTu7egLRlFRc77DhUZr6egy9Nxfnb0UFe1p6AN6TUXbvs7hC1vpx4dxWNo6osN9xwhG7q3oRjaOqLc+8OEDelvQMaK1Fjv8AJA33eghtE7ix32PCok7aehYLeoVFxv8AJQSdnb0JBb1NqLjff0QTfZdvQwy8j/f5IarfT0Moreo1Fzvv6IZg+yrcOAjCpqDXSf8AMKiDsjWobCAIAgO7zXMbBex5huDHSc10nD9/E2WqtJU61Pmyxm8SM1VVXf8AxifW8a+k8bFYeFh4mSTDme8e1FLaNpZvMrnZclCknKupw2fY8LAxHOCfcuHE+AWUFRc68BbPtzX3lydNxca8FBmvowGdJqLjXhyDNdWe/wBgxlHVFhryEDldWDGUNRbfkIHLQQ2XqLHXhA5eIhMrcWOvBQOVhBZ1CouNeUEpWdhBZ1NqLjXlBOVnZmGTkfqhrNfRmUZlTUXOvKGYSsrPcIrKmo/VBGXZ0YiMrcWGvAQKXcWKy1RYaoFLuD2UbUW3+85Apa2fSQeyjajXXlApXZCygqLnX0QZr6DJ03F9+EGa+jKGdJqLjXhyByvo9/sGMo6o015CByurBjKOqLb/AHggctLEYy9RY6oHLuENlbjXXgoJStoywWdQqLjVBKVnYQWdTai415QTlZ2Zhk5H6oazX0ZlFZ1GoudeUMwl2V5CO2RNQa6KiLsjUobCAIAgO18HOyFJzOlrmkOisaQfNeahzgbEH81qlUfOpqE51Tu1ub/iuCMXYR0h1Q6T+3hb/iUylWNGrtL8ZcifVHS9qHc/bwth95MrH1o10l+MuRfqhlLNDuPt4Wx+8mUv1o10l+MuQGEMiM0O4+3hbH73KZWPrRrpL8Zd3cGYQyPVDr/rwt/xJlYeNGqtL8Zcg3COr1Q6j/Phbj7yZSPGja0vxlyIzCOr1Q7H7eFt+JXKw8aPCX4y5Fh4RwPtQ9ft4W34lMoeNGmkvxlyELCOBBzQ7j7eF/UmVleNGjtL8ZciQsI4EdUOhH28Lf8AErlJLGi07S/GXIn1N3vQ/wDvwv6lMrNfXjXSX4y5FiYRxJ6odSft4W/4kykjjRSVpfjLkWJhCSeqH/34X9StGSONGmkvxlyI/COn7UOw+3hbD7ymVlWNHhL8ZcixMITLqh0AH+PC/qTKRY0eEvxlyDsIZDqh0H+fC3P3uUysqxo3tL8Zcg7COkOqHSf28Lf8SZWRY0au0vxlyJ9UdIDNDuft4XH3kyl+tGukvxlyH1R0pZod/wDPhbfiTKyfWjXSX4y5FGEdIjNDuPt4Wx+9ymVl+tGukvxl3dwZhDI9UOsvt4W/4kysjxo1VpfjLkGYQ16odRL/AB4XvD7yZWV40bWl+MuRGYQ16odiP8eF/UmVh40eEvxlyDMI6ftQ9ft4Wx+8rRkljRppL8Zciw8I4EHNDv8A58L+pTKHjRppL8ZciQsI4EdUOhH28Lf8SuUSxotO0vxlyMfqbveh/wDfhf1KZWb+tGukvxlyMouEcSeqHUn7eFv+JMrMRxopK0vxlyLEwjiT1Q7/AOfC/qVoxHGjTSX4y5HK4SMtqUII/IihWTsnVVIhQgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAqAiAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgP/9k="
              alt="Typing Image"
              className="object-cover h-full w-full rounded-xl"
          />
    </motion.div>
  );
};

const SkeletonFour = () => {
  return (
      <motion.div
          className="flex flex-1 w-full h-full min-h-[12rem] bg-gradient-to-br from-purple-900/20 to-blue-900/20 flex-col items-center justify-center p-4 rounded-xl overflow-hidden"
      >
          <motion.div 
              className="flex flex-col space-y-4 w-full"
              initial={{ y: 0 }}
              whileHover={{ y: "-25%" }}
              transition={{ duration: 0.6, ease: "easeInOut" }}
          >
              {/* First item - initially visible */}
              <motion.div 
                  className="bg-purple-500/20 p-4 rounded-xl cursor-pointer group relative overflow-hidden"
              >
                  <motion.div 
                      className="absolute inset-0 bg-purple-500/20 translate-x-[-100%] group-hover:translate-x-0 transition-transform duration-300"
                  />
                  <div className="relative flex items-center space-x-4">
                      <motion.div 
                          className="p-2 bg-purple-500/40 rounded-lg"
                          whileHover={{ rotate: 360 }}
                          transition={{ duration: 0.4 }}
                      >
                          <IconBoxAlignRightFilled className="h-6 w-6 text-purple-200" />
                      </motion.div>
                      <span className="text-white font-medium">Form Builder</span>
                  </div>
              </motion.div>
              
              {/* Second item - initially visible */}
              <motion.div 
                  className="bg-white/10 p-4 rounded-xl cursor-pointer group relative overflow-hidden"
              >
                  <motion.div 
                      className="absolute inset-0 bg-white/10 translate-x-[-100%] group-hover:translate-x-0 transition-transform duration-300"
                  />
                  <div className="relative flex items-center space-x-4">
                      <motion.div 
                          className="p-2 bg-white/20 rounded-lg"
                          whileHover={{ rotate: 360 }}
                          transition={{ duration: 0.4 }}
                      >
                          <IconClipboardCopy className="h-6 w-6 text-white" />
                      </motion.div>
                      <span className="text-white font-medium">Newsletter Creator</span>
                  </div>
              </motion.div>
              
              {/* Third item - revealed on hover */}
              <motion.div 
                  className="bg-blue-500/20 p-4 rounded-xl cursor-pointer group relative overflow-hidden"
              >
                  <motion.div 
                      className="absolute inset-0 bg-blue-500/20 translate-x-[-100%] group-hover:translate-x-0 transition-transform duration-300"
                  />
                  <div className="relative flex items-center space-x-4">
                      <motion.div 
                          className="p-2 bg-blue-500/40 rounded-lg"
                          whileHover={{ rotate: 360 }}
                          transition={{ duration: 0.4 }}
                      >
                          <IconPencil className="h-6 w-6 text-blue-200" />
                      </motion.div>
                      <span className="text-white font-medium">Content Editor</span>
                  </div>
              </motion.div>
              
              {/* Fourth item - revealed on hover */}
              <motion.div 
                  className="bg-emerald-500/20 p-4 rounded-xl cursor-pointer group relative overflow-hidden"
              >
                  <motion.div 
                      className="absolute inset-0 bg-emerald-500/20 translate-x-[-100%] group-hover:translate-x-0 transition-transform duration-300"
                  />
                  <div className="relative flex items-center space-x-4">
                      <motion.div 
                          className="p-2 bg-emerald-500/40 rounded-lg"
                          whileHover={{ rotate: 360 }}
                          transition={{ duration: 0.4 }}
                      >
                          <IconChartBar className="h-6 w-6 text-emerald-200" />
                      </motion.div>
                      <span className="text-white font-medium">Analytics Dashboard</span>
                  </div>
              </motion.div>
          </motion.div>
      </motion.div>
  );
};


// const SkeletonFive = () => {
//   return (
//     <motion.div
//       className="flex flex-1 w-full h-full min-h-[6rem] dark:bg-dot-white/[0.2] bg-dot-black/[0.2] flex-col items-center justify-center p-8"
//     >
//       <div className="grid grid-cols-2 gap-4 w-full">
//         <div className="bg-purple-500/20 p-4 rounded-xl aspect-square flex items-center justify-center">
//           <motion.div 
//             animate={{ rotate: 360 }}
//             transition={{ duration: 8, repeat: Infinity, ease: "linear" }}
//             className="w-12 h-12 rounded-full border-4 border-purple-500 border-t-transparent"
//           />
//         </div>
//         <div className="bg-blue-500/20 p-4 rounded-xl aspect-square flex items-center justify-center">
//           <motion.div 
//             initial={{ scale: 0.8 }}
//             animate={{ scale: 1.2 }}
//             transition={{ duration: 2, repeat: Infinity, repeatType: "reverse" }}
//             className="w-12 h-12 bg-gradient-to-tr from-blue-500 to-purple-500 rounded-lg"
//           />
//         </div>
//         <div className="bg-green-500/20 p-4 rounded-xl aspect-square flex items-center justify-center">
//           <motion.div 
//             initial={{ opacity: 0.5 }}
//             animate={{ opacity: 1 }}
//             transition={{ duration: 2, repeat: Infinity, repeatType: "reverse" }}
//             className="w-12 h-12 bg-gradient-to-br from-green-500 to-blue-500 rounded-full"
//           />
//         </div>
//         <div className="bg-pink-500/20 p-4 rounded-xl aspect-square flex items-center justify-center">
//           <motion.div 
//             animate={{ 
//               scale: [1, 1.2, 1],
//               rotate: [0, 90, 0]
//             }}
//             transition={{ duration: 4, repeat: Infinity }}
//             className="w-12 h-12 bg-gradient-to-bl from-pink-500 to-purple-500 rounded-lg"
//           />
//         </div>
//       </div>
//     </motion.div>
//   );
// };

const items = [
  {
    title: "Drag & Drop No-Code Builder",
    description: (
      <span className="text-sm">
        Easily create robust MicroSaaS applications using our intuitive drag-and-drop interface. Empower yourself to design custom workflows without writing a single line of code, streamlining operations and enhancing efficiency.
      </span>
    ),
    header: <SkeletonOne />,
    className: "md:col-span-1 md:row-span-2",
    icon: <IconClipboardCopy className="h-4 w-4 text-neutral-500" />,
  },
  {
    title: "Writing Simplified",
    description: (
      <span className="text-sm">
        Transform your writing process with the power of AI. Use the built-in AI writer to generate, refine, or continue content effortlessly.
      </span>
    ),
    header: <SkeletonTwo />,
    className: "md:col-span-1",
    icon: <IconFileBroken className="h-4 w-4 text-neutral-500" />,
  },
  {
    title: "Monetize Smarter",
    description: (
      <span className="text-sm">
        Launch your own community or tap into our marketplace to sell AI subscriptions to SMBs and beyond. Transform your ideas into profitable ventures.
      </span>
    ),
    header: <SkeletonThree />,
    className: "md:col-span-1",
    icon: <IconSignature className="h-4 w-4 text-neutral-500" />,
  },
  {
    title: "Integrated Creative Tools",
    description: (
      <span className="text-sm">
        From forms to video editors, AI writers to newsletter creators, we've got you covered. Access a comprehensive suite of tools designed to enhance your creative workflow.
      </span>
    ),
    header: <SkeletonFour />,
    className: "md:col-span-2",
    icon: <IconTableColumn className="h-4 w-4 text-neutral-500" />,
  },
  //   {
  //     title: "Smart Templates",
  //     description: (
  //       <span className="text-sm">
  //         Access a library of intelligent templates that adapt to your needs. Each template is powered by AI to provide personalized starting points.
  //       </span>
  //     ),
  //     header: <SkeletonFive />,
  //     className: "md:col-span-1",
  //     icon: <IconBoxAlignRightFilled className="h-4 w-4 text-neutral-500" />,
  //   }
];