"use client";

import { ToolPageContent } from "@/components/tools/types";
import { Button } from "@cap/ui";
import Link from "next/link";
import { ReactNode, useEffect } from "react";

const renderHTML = (content: string) => {
  const styledContent = content.replace(
    /<a\s/g,
    '<a class="font-semibold text-blue-500 transition-colors hover:text-blue-600" '
  );

  return <span dangerouslySetInnerHTML={{ __html: styledContent }} />;
};

const LeftBlueHue = () => {
  return (
    <svg
      className="absolute top-0 -left-24 z-0 opacity-20 pointer-events-none md:opacity-40"
      width="1000"
      height="500"
      viewBox="0 0 1276 690"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g filter="url(#blue-hue-filter)">
        <ellipse
          cx="592"
          cy="339"
          rx="584"
          ry="251"
          transform="rotate(180 592 339)"
          fill="url(#blue-hue-gradient)"
        />
      </g>
      <defs>
        <filter
          id="blue-hue-filter"
          x="-92"
          y="-12"
          width="1368"
          height="702"
          filterUnits="userSpaceOnUse"
          colorInterpolationFilters="sRGB"
        >
          <feFlood floodOpacity="0" result="BackgroundImageFix" />
          <feBlend
            mode="normal"
            in="SourceGraphic"
            in2="BackgroundImageFix"
            result="shape"
          />
          <feGaussianBlur stdDeviation="50" result="blur-effect" />
        </filter>
        <linearGradient
          id="blue-hue-gradient"
          x1="1102.5"
          y1="339"
          x2="157.5"
          y2="375.5"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#75A3FE" />
          <stop offset="1" stopColor="white" stopOpacity="0" />
        </linearGradient>
      </defs>
    </svg>
  );
};

export const ToolsPageTemplate = ({
  content,
  toolComponent,
}: {
  content: ToolPageContent;
  toolComponent: ReactNode;
}) => {
  useEffect(() => {
    const animateClouds = () => {
      const cloud4 = document.getElementById("cloud-4");
      const cloud5 = document.getElementById("cloud-5");

      if (cloud4 && cloud5) {
        cloud4.animate(
          [
            { transform: "translateX(0) translateY(0)" },
            { transform: "translateX(-10px) translateY(5px)" },
            { transform: "translateX(10px) translateY(-5px)" },
            { transform: "translateX(0) translateY(0)" },
          ],
          {
            duration: 15000,
            iterations: Infinity,
            easing: "ease-in-out",
          }
        );

        cloud5.animate(
          [
            { transform: "translateX(0) translateY(0)" },
            { transform: "translateX(10px) translateY(-5px)" },
            { transform: "translateX(-10px) translateY(5px)" },
            { transform: "translateX(0) translateY(0)" },
          ],
          {
            duration: 18000,
            iterations: Infinity,
            easing: "ease-in-out",
          }
        );
      }
    };

    animateClouds();
  }, []);

  return (
    <>
      {/* Compact Hero Section */}
      <div className="overflow-hidden relative py-32 md:py-40">
        {/* Breadcrumbs */}
        <div className="relative z-20 px-5 pt-4 text-center wrapper">
          <div className="flex justify-center items-center text-sm">
            <Link
              className="text-sm font-semibold text-gray-500 hover:underline"
              href="/tools"
            >
              Tools
            </Link>
            <span className="mx-2 text-sm text-gray-400">/</span>
            <span className="text-sm text-gray-500">{content.title}</span>
          </div>
        </div>

        <div className="relative z-10 px-5 pt-8 pb-6 w-full md:pt-12 md:pb-8">
          <div className="mx-auto max-w-3xl text-center wrapper wrapper-sm">
            <h1 className="fade-in-down text-[2rem] leading-[2.5rem] md:text-[2.75rem] md:leading-[3.25rem] relative z-10 text-black mb-4">
              {content.title}
            </h1>
            <p className="mx-auto mb-6 max-w-2xl text-md sm:text-lg text-zinc-600 fade-in-down animate-delay-1">
              {content.description}
            </p>
          </div>
        </div>
        <div className="relative z-10 py-10 wrapper">
          <div className="p-6 mx-auto max-w-4xl bg-white rounded-2xl border border-gray-100 shadow-lg md:p-8">
            {toolComponent}
          </div>
        </div>

        {/* Main Content - Features & FAQ */}
        <div className="relative z-10 py-16 wrapper">
          {/* Features Section */}
          <div className="mb-20">
            <div className="text-center max-w-[800px] mx-auto mb-12">
              <h2 className="inline-block relative mb-5 text-3xl font-medium text-gray-800">
                {content.featuresTitle}
                <span className="absolute -bottom-2 left-1/2 w-16 h-1 bg-blue-500 rounded-full transform -translate-x-1/2"></span>
              </h2>
              <p className="text-lg leading-relaxed text-gray-600">
                {renderHTML(content.featuresDescription)}
              </p>
            </div>
            <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
              {content.features.map(
                (
                  feature: { title: string; description: string },
                  index: number
                ) => (
                  <div
                    key={index}
                    className="p-6 bg-white rounded-xl border border-gray-100 shadow-sm transition-all duration-300 hover:shadow-md hover:border-blue-100"
                  >
                    <div className="flex justify-center items-center mb-4 w-10 h-10 bg-blue-50 rounded-full">
                      <span className="text-lg font-medium text-blue-500">
                        {index + 1}
                      </span>
                    </div>
                    <h3 className="mb-3 text-lg font-semibold text-gray-800">
                      {feature.title}
                    </h3>
                    <p className="text-sm leading-relaxed text-gray-600 md:text-base">
                      {renderHTML(feature.description)}
                    </p>
                  </div>
                )
              )}
            </div>
          </div>

          {/* FAQ Section */}
          {content.faqs && (
            <div className="mb-20">
              <div className="text-center max-w-[800px] mx-auto mb-12">
                <h2 className="inline-block relative mb-5 text-3xl font-medium text-gray-800">
                  Frequently Asked Questions
                  <span className="absolute -bottom-2 left-1/2 w-16 h-1 bg-blue-500 rounded-full transform -translate-x-1/2"></span>
                </h2>
              </div>
              <div className="mx-auto mb-10 max-w-3xl">
                {content.faqs.map(
                  (faq: { question: string; answer: string }, index: number) => (
                    <div
                      key={index}
                      className="p-5 my-4 bg-white rounded-xl border border-gray-100 shadow-sm transition-all duration-300 hover:shadow-md"
                    >
                      <h2 className="mb-2 text-lg font-semibold text-gray-800">
                        {faq.question}
                      </h2>
                      <div className="text-sm leading-relaxed text-gray-600 md:text-base">
                        {renderHTML(faq.answer)}
                      </div>
                    </div>
                  )
                )}
              </div>
            </div>
          )}

          {/* Clean CTA Section */}
          <div
            className="max-w-[900px] mx-auto rounded-2xl bg-white overflow-hidden relative flex flex-col justify-center p-8 md:p-10"
            style={{
              backgroundImage: "url('/illustrations/ctabg.svg')",
              backgroundSize: "cover",
              backgroundRepeat: "no-repeat",
            }}
          >

            <div className="flex relative z-10 flex-col justify-center items-center mx-auto h-full wrapper">
              <div className="text-center max-w-[700px] mx-auto mb-6">
                <h2 className="mb-3 text-2xl font-medium md:text-3xl text-gray-12">
                  {content.cta.title}
                </h2>
                <p className="mb-5 text-lg text-gray-10">
                  {content.cta.description}
                </p>
              </div>
              <div className="flex flex-col justify-center items-center space-y-3 sm:flex-row sm:space-y-0 sm:space-x-4">
                <Button
                  variant="gray"
                  href="/download"
                  size="lg"
                  className="px-8 w-full font-medium transition-all duration-200 sm:w-auto"
                >
                  {content.cta.buttonText}
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Tool Container - Now positioned for visibility above the fold */}


      <style jsx global>{`
        @keyframes fade-in-down {
          0% {
            opacity: 0;
            transform: translateY(-10px);
          }
          100% {
            opacity: 1;
            transform: translateY(0);
          }
        }

        @keyframes fade-in-up {
          0% {
            opacity: 0;
            transform: translateY(10px);
          }
          100% {
            opacity: 1;
            transform: translateY(0);
          }
        }

        .fade-in-down {
          animation: fade-in-down 0.8s ease-out forwards;
        }

        .fade-in-up {
          animation: fade-in-up 0.8s ease-out forwards;
        }

        .animate-delay-1 {
          animation-delay: 0.1s;
        }

        .animate-delay-2 {
          animation-delay: 0.2s;
        }
      `}</style>
    </>
  );
};
