"use client";
import { AnimatedBeam, Circle } from "@/components/ui/animated-beam";
import Marquee from "@/components/ui/marquee";
import { ProgressiveBlur } from "@/components/ui/progressive-blur";
import { Sparkles as SparklesComp } from "@/components/ui/sparkles";
import { TimelineContent } from "@/components/ui/timeline-animation";
import { cn } from "@/lib/utils";
import {
  CalendarCheck2,
  Check,
  Database,
  Globe,
  Plus,
  Sparkles,
  Target,
} from "lucide-react";
import { useRef } from "react";
import AnimatedSVGChart from "./animate-svg-chart";

interface Platform {
  id: string;
  name: string;
  status: "listed" | "in-progress";
  icon: React.ReactNode;
}

const platforms: Platform[] = [
  {
    id: "product-hunt",
    name: "Product Hunt",
    status: "listed",
    icon: <Target className="w-5 h-5 text-orange-500" />,
  },
  {
    id: "angel-list",
    name: "AngelList",
    status: "listed",
    icon: <Sparkles className="w-5 h-5 text-blue-500" />,
  },
  {
    id: "crunchbase",
    name: "CrunchBase",
    status: "in-progress",
    icon: <Database className="w-5 h-5 text-blue-600" />,
  },
];

const StatusBadge: React.FC<{ status: "listed" | "in-progress" }> = ({
  status,
}) => {
  const baseClasses =
    "px-3 py-1 rounded-full text-sm font-medium transition-all duration-200";

  if (status === "listed") {
    return (
      <span
        className={`${baseClasses} bg-green-100 text-green-700 border border-green-200`}
      >
        <Check className="w-3 h-3 inline mr-1" />
        Listed
      </span>
    );
  }

  return (
    <span
      className={`${baseClasses} bg-blue-100 text-blue-700 border border-blue-200`}
    >
      In Progress
    </span>
  );
};

const PlatformItem: React.FC<{ platform: Platform }> = ({ platform }) => {
  return (
    <div className="group w-[95%] mx-auto bg-white/80 backdrop-blur-sm rounded-2xl p-2 border border-white/20 shadow-sm hover:shadow-md hover:bg-white/90 transition-all duration-300 hover:scale-[1.02]">
      <div className="flex items-center justify-between">
        <div className="flex items-center space-x-3">
          <div className="flex-shrink-0 w-10 h-10 bg-gray-50 rounded-xl flex items-center justify-center group-hover:bg-gray-100 transition-colors duration-200">
            {platform.icon}
          </div>
          <span className="font-medium text-gray-800 group-hover:text-gray-900 transition-colors duration-200">
            {platform.name}
          </span>
        </div>
        <StatusBadge status={platform.status} />
      </div>
    </div>
  );
};

const Feature3 = () => {
  // Fix the ref types to match what AnimatedBeam expects
  const containerRef = useRef<HTMLDivElement>(null);
  const timelineRef = useRef<HTMLDivElement>(null);

  // Type refs properly for AnimatedBeam
  const div1Ref = useRef<HTMLDivElement>(null);
  const div2Ref = useRef<HTMLDivElement>(null);
  const div3Ref = useRef<HTMLDivElement>(null);
  const div4Ref = useRef<HTMLDivElement>(null);
  const div5Ref = useRef<HTMLDivElement>(null);
  const div6Ref = useRef<HTMLDivElement>(null);
  const div7Ref = useRef<HTMLDivElement>(null);

  return (
    <section className="max-w-7xl mx-auto p-4" ref={timelineRef}>
      <article className="max-w-5xl mx-auto py-10 text-center space-y-2 px-8">
        <TimelineContent
          as="h1"
          animationNum={1}
          timelineRef={timelineRef}
          className="md:text-5xl sm:text-4xl text-3xl font-medium"
        >
          Seamlessly Integrated, <br />
          Powerful Features
        </TimelineContent>
      </article>
      <div className="sm:grid sm:grid-cols-12 sm:space-y-0 space-y-4 gap-4">
        <TimelineContent
          animationNum={1}
          timelineRef={timelineRef}
          className="col-span-7 h-96 pt-10 overflow-hidden relative w-full border-2 border-blue-200 bg-gradient-to-b from-blue-100 rounded-lg"
        >
          <ProgressiveBlur
            className="pointer-events-none absolute top-0 left-0 h-full w-[150px]"
            direction="left"
            blurIntensity={0.5}
          />
          <ProgressiveBlur
            className="pointer-events-none absolute top-0 right-0 h-full w-[150px]"
            direction="right"
            blurIntensity={0.5}
          />
          <AnimatedSVGChart />
          <article className="absolute right-0 bottom-0 left-0 w-full bg-gradient-to-t from-blue-50 via-blue-50 to-transparent md:p-6 p-2 pt-[100px]">
            <h3 className="px-1 pt-1 text-black md:text-3xl text-xl font-medium">
              Track Progress
            </h3>
            <p className="mt-1 px-1 pb-1 font-normal text-gray-600 md:text-sm text-xs w-full">
              Fast and accurate tracking any of your apps anytime
            </p>
          </article>
        </TimelineContent>
        <TimelineContent
          animationNum={2}
          timelineRef={timelineRef}
          className="relative col-span-5 border-2 border-blue-200  bg-gradient-to-b from-blue-100 rounded-lg p-4 group flex flex-col justify-between gap-5"
        >
          <svg
            width="225"
            height="174"
            className="w-full h-72"
            viewBox="0 0 225 174"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M2 173.54C2.1906 159.879 8.80436 133.552 33.7346 137.536C62.5 142.132 86.5367 150.04 100.5 134.54C120.513 112.324 116.073 78.5498 144.377 69.7403C171.691 61.2389 187.49 79.2456 203.5 55.4982C219.51 31.7508 223.5 1 223.5 1"
              stroke="#DADADA"
              stroke-width="3"
            />
            <path
              d="M2 173.54C2.1906 159.878 8.80436 133.552 33.7346 137.535C62.5 142.132 86.5367 150.04 100.5 134.54C120.513 112.324 116.073 78.5497 144.377 69.7402"
              stroke="#0077FF"
              stroke-width="3"
            />
            <circle
              cx="144"
              cy="70"
              r="10"
              fill="#0077FF"
              className="animate-pulse"
              fillOpacity="0.31"
            />
            <circle cx="144" cy="70" r="5" fill="#0077FF" />
          </svg>
          <div className="absolute bottom-0 -z-10 left-0 right-0 top-0 bg-[repeating-linear-gradient(120deg,#cecece_0px_1px,transparent_1px_19px)]" />
          <article className="absolute z-10 right-0 bottom-0 left-0 w-full bg-gradient-to-t from-blue-50 via-blue-50 to-transparent md:p-6 p-2 pt-[100px]">
            <h3 className="px-1 pt-1 text-black md:text-2xl text-xl font-medium">
              Impressions & Growth
            </h3>
            <p className="mt-1 px-1 pb-1 font-normal text-gray-600 md:text-sm text-xs w-full">
              Seamless connection between popular apps that you like
            </p>
          </article>
          <ProgressiveBlur
            className="pointer-events-none absolute top-0 left-0 h-full w-[150px]"
            direction="left"
            blurIntensity={0.5}
          />
          <ProgressiveBlur
            className="pointer-events-none absolute top-0 right-0 h-full w-[150px]"
            direction="right"
            blurIntensity={0.5}
          />
        </TimelineContent>
        <TimelineContent
          animationNum={3}
          timelineRef={timelineRef}
          className="lg:col-span-4 col-span-6 relative border-2 border-blue-200 p-1 rounded-xl overflow-hidden bg-gradient-to-b from-blue-100 pb-20 "
        >
          <div
            className="relative flex w-full items-center justify-center overflow-hidden rounded-lg py-8 px-4"
            ref={containerRef}
          >
            <div className="flex h-full w-full flex-col items-stretch justify-between gap-10">
              <div className="flex flex-row justify-between">
                <Circle className="p-0.5" ref={div1Ref}>
                  <img
                    src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=200"
                    alt=""
                    className="shrink-0 w-full h-full object-cover rounded-full"
                  />
                </Circle>
                <Circle ref={div2Ref} className="p-0.5">
                  <img
                    src="https://images.unsplash.com/photo-1740102074835-f82e160f4d33?q=80&w=200"
                    alt=""
                    className="shrink-0 w-full h-full object-cover rounded-full"
                  />
                </Circle>
                <Circle ref={div3Ref} className="p-0.5">
                  <img
                    src="https://images.unsplash.com/photo-1596959584322-76585c75d265?q=80&w=200"
                    alt=""
                    className="shrink-0 w-full h-full object-cover rounded-full"
                  />
                </Circle>
                <Circle ref={div4Ref} className="p-0.5">
                  <img
                    src="https://images.unsplash.com/photo-1714120103714-8e4cd7cf10b5?q=80&w=200"
                    alt=""
                    className="shrink-0 w-full h-full object-cover rounded-full"
                  />
                </Circle>
              </div>
              <div className="flex flex-row justify-between w-[80%] mx-auto">
                <Circle ref={div5Ref} className="p-0.5">
                  <img
                    src="https://images.unsplash.com/photo-1738509559266-bdd2a813c8ad?q=80&w=200"
                    alt=""
                    className="shrink-0 w-full h-full object-cover rounded-full"
                  />
                </Circle>
                <Circle ref={div6Ref} className="p-0.5">
                  <img
                    src="https://images.unsplash.com/photo-1580518337843-f959e992563b?q=80&w=200"
                    alt=""
                    className="shrink-0 w-full h-full object-cover rounded-full"
                  />
                </Circle>
                <Circle ref={div7Ref} className="p-0.5">
                  <img
                    src="https://images.unsplash.com/photo-1580518324671-c2f0833a3af3?q=80&w=200"
                    alt=""
                    className="shrink-0 w-full h-full object-cover rounded-full"
                  />
                </Circle>
              </div>
            </div>

            <AnimatedBeam
              duration={3}
              containerRef={containerRef as React.RefObject<HTMLElement>}
              fromRef={div1Ref as React.RefObject<HTMLElement>}
              toRef={div2Ref as React.RefObject<HTMLElement>}
              dotted
              dotSpacing={8}
            />
            <AnimatedBeam
              duration={3}
              containerRef={containerRef as React.RefObject<HTMLElement>}
              fromRef={div2Ref as React.RefObject<HTMLElement>}
              toRef={div3Ref as React.RefObject<HTMLElement>}
              dotted
              dotSpacing={8}
            />
            <AnimatedBeam
              duration={3}
              containerRef={containerRef as React.RefObject<HTMLElement>}
              fromRef={div3Ref as React.RefObject<HTMLElement>}
              toRef={div4Ref as React.RefObject<HTMLElement>}
              dotted
              dotSpacing={8}
            />
            <AnimatedBeam
              duration={3}
              containerRef={containerRef as React.RefObject<HTMLElement>}
              fromRef={div1Ref as React.RefObject<HTMLElement>}
              toRef={div5Ref as React.RefObject<HTMLElement>}
              dotted
              dotSpacing={8}
            />
            <AnimatedBeam
              duration={3}
              containerRef={containerRef as React.RefObject<HTMLElement>}
              fromRef={div2Ref as React.RefObject<HTMLElement>}
              toRef={div6Ref as React.RefObject<HTMLElement>}
              dotted
              dotSpacing={8}
            />
            <AnimatedBeam
              duration={3}
              containerRef={containerRef as React.RefObject<HTMLElement>}
              fromRef={div3Ref as React.RefObject<HTMLElement>}
              toRef={div7Ref as React.RefObject<HTMLElement>}
              dotted
              dotSpacing={8}
            />
            <AnimatedBeam
              duration={8}
              containerRef={containerRef as React.RefObject<HTMLElement>}
              fromRef={div5Ref as React.RefObject<HTMLElement>}
              toRef={div6Ref as React.RefObject<HTMLElement>}
              dotted
              dotSpacing={8}
            />
            <AnimatedBeam
              duration={3}
              containerRef={containerRef as React.RefObject<HTMLElement>}
              fromRef={div6Ref as React.RefObject<HTMLElement>}
              toRef={div7Ref as React.RefObject<HTMLElement>}
              dotted
              dotSpacing={8}
            />
            <AnimatedBeam
              duration={6}
              containerRef={containerRef as React.RefObject<HTMLElement>}
              fromRef={div2Ref as React.RefObject<HTMLElement>}
              toRef={div5Ref as React.RefObject<HTMLElement>}
              dotted
              dotSpacing={8}
            />
            <AnimatedBeam
              duration={3}
              containerRef={containerRef as React.RefObject<HTMLElement>}
              fromRef={div3Ref as React.RefObject<HTMLElement>}
              toRef={div6Ref as React.RefObject<HTMLElement>}
              dotted
              dotSpacing={8}
            />
            <AnimatedBeam
              duration={3}
              containerRef={containerRef as React.RefObject<HTMLElement>}
              fromRef={div4Ref as React.RefObject<HTMLElement>}
              toRef={div7Ref as React.RefObject<HTMLElement>}
              dotted
              dotSpacing={8}
            />
          </div>
          <article className="absolute z-10 right-0 bottom-0 left-0 w-full bg-gradient-to-t from-blue-50 via-blue-50 to-transparent p-3 pt-[100px]">
            <h3 className="px-1 pt-1 text-black md:text-xl text-lg font-medium">
              Popular App Integrations
            </h3>
            <p className="mt-1 px-1 pb-1 font-normal text-gray-600 md:text-sm text-xs w-full">
              Seamless connection between popular apps that you like
            </p>
          </article>
          <ProgressiveBlur
            className="pointer-events-none absolute top-0 bottom-0 h-32"
            direction="bottom"
            blurIntensity={0.5}
          />
        </TimelineContent>
        <TimelineContent
          animationNum={4}
          timelineRef={timelineRef}
          className="lg:col-span-4 col-span-6 relative border-2 border-blue-200 p-2 rounded-xl overflow-hidden bg-gradient-to-b from-blue-100 "
        >
          <div className="space-y-1 mb-8">
            {platforms.map((platform) => (
              <PlatformItem key={platform.id} platform={platform} />
            ))}
          </div>
          <article className="absolute z-10 right-0 bottom-0 left-0 w-full bg-gradient-to-t from-blue-50 via-blue-50 to-transparent p-3 pt-[100px]">
            <h3 className="px-1 pt-1 text-black md:text-xl text-lg font-medium">
              We Handle the listings
            </h3>
            <p className="mt-1 px-1 pb-1 font-normal text-gray-600 md:text-sm text-xs w-full">
              Seamless connection between popular apps that you like
            </p>
          </article>
        </TimelineContent>
        <TimelineContent
          animationNum={5}
          timelineRef={timelineRef}
          className="lg:col-span-4 col-span-6 relative border-2 border-blue-200 p-2 rounded-xl flex flex-col justify-between overflow-hidden bg-gradient-to-b from-blue-100 "
        >
          {/* <ArrowBigDown/> */}
          {/* <button className="w-16 h-16 rounded-lg text-white bg-blue-500 grid place-content-center">
          <ArrowLeft className="rotate-45 h-8 w-8" />
        </button> */}
          <div className="space-y-0.5 flex flex-col items-center pt-10 relative z-10">
            <TimelineContent
              animationNum={6}
              timelineRef={timelineRef}
              className="flex gap-0"
            >
              <button className=" px-4 h-10 rounded-lg hover:bg-blue-500 hover:shadow-lg hover:shadow-blue-600 hover:text-white text-blue-500 border border-blue-500 grid place-content-center">
                Innovative
              </button>
              <button className=" px-2 h-10 hover:bg-blue-500 hover:text-white rounded-full text-blue-500 border border-blue-500 grid place-content-center">
                <Plus className="h-6 w-6" />
              </button>
            </TimelineContent>
            <TimelineContent
              animationNum={7}
              timelineRef={timelineRef}
              className="flex gap-0 pl-4"
            >
              <button className=" px-2 h-10 bg-blue-500  text-white rounded-full  border border-blue-500 grid place-content-center">
                <Plus className="h-6 w-6" />
              </button>
              <button className=" px-6 h-10 rounded-lg bg-blue-500/20 text-blue-500 border border-blue-500 grid place-content-center">
                Revolutionary
              </button>
            </TimelineContent>

            <TimelineContent
              animationNum={8}
              timelineRef={timelineRef}
              className="flex gap-0 pr-8"
            >
              <button className=" px-6 h-10 rounded-lg hover:bg-blue-500 hover:shadow-lg hover:shadow-blue-600 hover:text-white  text-blue-500 border border-blue-500 grid place-content-center">
                Empowering
              </button>
              <button className=" px-2 h-10 hover:bg-blue-500 hover:shadow-lg hover:shadow-blue-600 hover:text-white rounded-full text-blue-500 border border-blue-500 grid place-content-center">
                <Plus className="h-6 w-6" />
              </button>
            </TimelineContent>
          </div>

          <article className="relative z-10">
            <h3 className="px-1 pt-1 text-black xl:text-xl text-lg font-medium">
              Sign Up to get 30 days free trail
            </h3>
            <p className="mt-1 px-1 pb-1 font-normal text-gray-600 md:text-sm text-xs w-full">
              Experience a 30-day free trial that lets you explore at the
              feature of our app without any commitment
            </p>
          </article>
          <SparklesComp
            density={100}
            speed={1.2}
            size={1.2}
            direction="top"
            opacitySpeed={2}
            color="#0f0f0f"
            className="absolute z-10 bottom-0 h-full w-full "
          />

          <ProgressiveBlur
            className="pointer-events-none absolute bottom-0 left-0 h-[35%] w-full"
            blurIntensity={3}
          />
          <ProgressiveBlur
            className="pointer-events-none absolute -top-20 left-0 h-[40%] w-full"
            blurIntensity={0.5}
          />
        </TimelineContent>
        <TimelineContent
          animationNum={6}
          timelineRef={timelineRef}
          className="col-span-6 h-96 pt-10 overflow-hidden relative w-full border-2 border-blue-200 bg-gradient-to-b from-blue-100 rounded-lg"
        >
          <Marquee className="[--duration:20s] [--gap:3rem] pb-6">
            {[
              "bg-green-500 shadow-lg  shadow-green-600",
              "bg-blue-500 shadow-lg shadow-blue-600",
              "bg-red-500 shadow-lg shadow-red-600",
              "bg-yellow-500 shadow-lg shadow-yellow-600",
            ].map((color, index) => (
              <div
                className={cn(
                  "w-20 h-20 flex items-center justify-center rounded-xl",
                  color,
                )}
                key={index}
              />
            ))}
          </Marquee>
          <Marquee reverse className="[--duration:20s] [--gap:3rem] pb-6">
            {[
              "bg-green-500 shadow-lg  shadow-green-600",
              "bg-blue-500 shadow-lg shadow-blue-600",
              "bg-red-500 shadow-lg shadow-red-600",
              "bg-yellow-500 shadow-lg shadow-yellow-600",
            ].map((color, index) => (
              <div
                className={cn(
                  "w-20 h-20 flex items-center justify-center rounded-xl",
                  color,
                )}
                key={index}
              />
            ))}
          </Marquee>
          <div
            className="absolute inset-0 -z-10  pointer-events-none"
            style={{
              backgroundImage: `
      repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(75, 85, 99, 0.08) 19px, rgba(75, 85, 99, 0.08) 20px, transparent 20px, transparent 39px, rgba(75, 85, 99, 0.08) 39px, rgba(75, 85, 99, 0.08) 40px),
      repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(75, 85, 99, 0.08) 19px, rgba(75, 85, 99, 0.08) 20px, transparent 20px, transparent 39px, rgba(75, 85, 99, 0.08) 39px, rgba(75, 85, 99, 0.08) 40px),
      radial-gradient(circle at 20px 20px, rgba(55, 65, 81, 0.12) 2px, transparent 2px),
      radial-gradient(circle at 40px 40px, rgba(55, 65, 81, 0.12) 2px, transparent 2px)
    `,
              backgroundSize: "40px 40px, 40px 40px, 40px 40px, 40px 40px",
            }}
          />
          <article className="absolute z-10 right-0 bottom-0 left-0 w-full bg-gradient-to-t from-blue-50 via-blue-50 to-transparent md:p-6 p-2 pt-[100px]">
            <h3 className="px-1 pt-1 text-black md:text-2xl text-xl font-medium">
              Popular App Integrations
            </h3>
            <p className="mt-1 px-1 pb-1 font-normal text-gray-600 md:text-sm text-xs w-full">
              This component displays an interactive stack of cards with smooth
              hover animations, gradients, and blur effects.
            </p>
          </article>
          <ProgressiveBlur
            className="pointer-events-none absolute top-0 left-0 h-full w-[150px]"
            direction="left"
            blurIntensity={0.5}
          />
          <ProgressiveBlur
            className="pointer-events-none absolute top-0 right-0 h-full w-[150px]"
            direction="right"
            blurIntensity={0.5}
          />
        </TimelineContent>
        <TimelineContent
          animationNum={7}
          timelineRef={timelineRef}
          className="md:col-span-6 col-span-12 relative rounded-xl overflow-hidden border-2 md:h-full h-96 border-blue-200 bg-gradient-to-b from-blue-100"
        >
          <div className="relative h-full w-full overflow-hidden">
            <SparklesComp
              density={800}
              speed={1.2}
              size={1.2}
              direction="top"
              opacitySpeed={2}
              color="#32A7FF"
              className="absolute inset-x-0 bottom-0 h-full w-full "
            />
          </div>
          <TimelineContent
            animationNum={8}
            timelineRef={timelineRef}
            className="flex gap-2 shrink-0 items-center bg-white/50 backdrop-blur-md border border-gray-200 justify-between p-2 top-6 rounded-xl absolute -left-48 rotate-6"
          >
            <p>Website Generation Never been easier</p>
            <button className="bg-blue-500 sm:w-fit w-72 hover:scale-120 flex gap-2 items-center py-3 px-4 shadow-blue-600 shadow-lg rounded-lg sm:text-xl text-white">
              <Globe size={20} /> Generate Web Pages
            </button>
          </TimelineContent>

          {/* Top Right Rotated Card */}
          <TimelineContent
            animationNum={9}
            timelineRef={timelineRef}
            className="flex gap-4 shrink-0 items-center bg-white/50 backdrop-blur-md border border-gray-200 p-2 top-24 rounded-xl absolute -right-10 -rotate-6"
          >
            <button className="bg-blue-500 sm:w-fit w-72 hover:scale-120 flex gap-2 items-center py-3 px-4 shadow-blue-600 shadow-lg rounded-lg sm:text-xl text-white">
              <CalendarCheck2 size={20} /> Schedule Meeting
            </button>
            <p>Generate meetings with AI</p>
          </TimelineContent>
          <TimelineContent
            animationNum={10}
            timelineRef={timelineRef}
            className="flex gap-4 shrink-0 items-center bg-white/50 backdrop-blur-md border border-gray-200 p-2 bottom-32 rounded-xl absolute -left-10 rotate-6"
          >
            <p>Let AI scrape leads for you</p>
            <button className="bg-blue-500 sm:w-fit w-52 hover:scale-120 flex gap-2 items-center py-3 px-4 shadow-blue-600 shadow-lg rounded-lg sm:text-xl text-white">
              <Sparkles size={20} /> Scrape Leads
            </button>
          </TimelineContent>
          <ProgressiveBlur
            className="pointer-events-none absolute bottom-0 left-0 h-[35%] w-full"
            blurIntensity={0.5}
          />
          <article className="absolute z-10 right-0 bottom-0 left-0 w-full bg-gradient-to-t from-blue-50 via-blue-50 to-transparent p-3 pt-[100px]">
            <h3 className="px-1 pt-1 text-black text-xl font-medium">
              Let AI Handle Everything
            </h3>
            <p className="mt-1 px-1 pb-1 font-normal text-gray-600 text-sm w-full">
              Seamless connection between popular apps that you like
            </p>
          </article>
        </TimelineContent>
      </div>
    </section>
  );
};

export default Feature3;
Feature Section

Free Feature1

Free Feature2

Feature3
