import { ShieldCheckIcon } from "@heroicons/react/24/solid";
import {
  ArrowRightIcon,
  CodeIcon,
  CrownIcon,
  HeadsetIcon,
  ImageIcon,
  MagicWandIcon,
  SealPercentIcon,
  ShieldStarIcon,
  SlidersIcon,
} from "@phosphor-icons/react";
import cn from "../../utils/cn";
import isProActive from "../../utils/isProActive";
import Countdown from "./components/Countdown";

const PRO_FEATURES = [
  { id: 1, icon: ShieldStarIcon, description: "100+ built-in product badges" },
  { id: 2, icon: ImageIcon, description: "Custom image badges" },
  { id: 3, icon: SealPercentIcon, description: "Dynamic discount badges" },
  { id: 4, icon: MagicWandIcon, description: "11+ Animation badges" },
  { id: 5, icon: CodeIcon, description: "Advanced CSS templates" },
  { id: 6, icon: SlidersIcon, description: "Advanced filters" },
  { id: 7, icon: HeadsetIcon, description: "Priority support" },
];

const PRO_PAGE_URL =
  "https://innocodia.com/plugins/woocommerce-product-badges-pro/?utm_source=dashboard_banner&utm_medium=free_plugin&utm_campaign=promotion";

const ProBanner = () => {
  const navigateToProPage = () => {
    window.open(PRO_PAGE_URL, "_blank", "noopener,noreferrer");
  };

  const isPro = isProActive();
  return !isPro ? (
    <div
      onClick={navigateToProPage}
      className="ino:flex ino:cursor-pointer ino:justify-center ino:overflow-hidden ino:rounded-lg ino:border ino:border-border ino:bg-card ino:shadow-md"
    >
      <div className="ino:relative ino:overflow-hidden ino:p-5 ino:pb-3  ino:select-none ino:bg-linear-to-b ">
        <div className="ino:absolute ino:size-80 ino:bg-primary/10 ino:-top-32 ino:-right-32 ino:rounded-full ino:blur-2xl" />
        <div className="ino:absolute ino:size-64 ino:bg-primary/10 ino:-bottom-32 ino:-left-32 ino:rounded-full ino:blur-2xl" />

        <p className="ino:m-0 ino:text-foreground ino:text-[22px] ino:mt-1 ino:leading-7 ino:font-bold ino:select-none">
          For Stores That
          <br /> Want to <span className="ino:text-primary">Sell More</span>
          <span className="ino:text-2xl"> 🔥</span>
        </p>
        <div className="ino:h-0.5 ino:w-14 ino:mt-1.5 ino:bg-primary" />
        <p className="ino:m-0 ino:mt-2 ino:text-accent-foreground ino:select-none ino:text-sm ino:2xl:text-base">
          Upgrade to unlock more customization & advanced options to create
          badges that grab attention and drive sales.
        </p>

        <div className="ino:mt-2 ino:flex ino:flex-col">
          {PRO_FEATURES.map((feature, idx) => (
            <div
              className={cn("ino:flex ino:items-center ino:gap-2 ino:py-2.5", {
                "ino:border-b ino:border-dotted":
                  PRO_FEATURES.length !== idx + 1,
              })}
              key={feature.id}
            >
              <div className="ino:bg-primary/10 ino:size-7.5 ino:flex ino:justify-center ino:items-center ino:rounded-full">
                <feature.icon
                  size={16}
                  weight="bold"
                  className="ino:text-primary"
                />
              </div>
              <p className="ino:m-0 ino:text-sm ino:text-foreground">
                {feature.description}
              </p>
            </div>
          ))}
        </div>

        <Countdown />

        {/* <div className="ino:bg-primary/5 ino:mt-1.5 ino:rounded-lg ino:px-2 ino:py-2.5 ino:flex ino:items-center ino:gap-2">
          <div>
            <ToteIcon size={40} className="ino:text-primary" weight="fill" />
          </div>
          <div>
            <p className="ino:m-0 ino:text-sm ino:mb-0.5 ino:text-black ino:font-bold">Pay once. Use it forever.</p>
            <p className="ino:m-0 ino:text-gray-600 ino:text-[13px]">No recurring fees. Lifetime value.</p>
          </div>
        </div> */}

        <a
          href={PRO_PAGE_URL}
          target="_blank"
          className="ino:transition-colors ino:mt-2 ino:flex ino:justify-between ino:items-center ino:duration-300 ino:bg-primary ino:text-white ino:rounded-md ino:px-5 ino:py-3  ino:hover:text-white ino:hover:bg-primary-dark ino:outline-none! ino:shadow-none! ino:font-medium"
          rel="noreferrer"
        >
          <div className="ino:flex ino:items-center ino:gap-2">
            <CrownIcon
              size={24}
              className="ino:text-yellow-500"
              weight="fill"
            />{" "}
            Pay Once, Use it Forever
          </div>
          <ArrowRightIcon size={20} />
        </a>
        <div className="ino:flex ino:mt-2  ino:gap-1 ino:items-center ino:justify-center">
          <ShieldCheckIcon className="ino:text-primary ino:size-5" />
          <p className="ino:m-0 ino:leading ino:text-foreground ino:text-sm ino:mt-0.5">
            30-day money-back guarantee
          </p>
        </div>
      </div>
    </div>
  ) : null;
};

export default ProBanner;