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="wmx-flex wmx-justify-center wmx-bg-white wmx-shadow-lg wmx-border wmx-rounded-lg wmx-border-gray-300"
    >
      <div className="wmx-relative wmx-overflow-hidden wmx-p-5 wmx-pb-3  wmx-select-none wmx-bg-gradient-to-b ">
        <div className="wmx-absolute wmx-size-80 wmx-bg-primary/5 -wmx-top-32 -wmx-right-32 wmx-rounded-full" />

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

        <div className="wmx-mt-2 wmx-flex wmx-flex-col">
          {PRO_FEATURES.map((feature, idx) => (
            <div
              className={cn("wmx-flex wmx-items-center wmx-gap-2  wmx-py-1.5", {
                "wmx-border-b wmx-border-dotted":
                  PRO_FEATURES.length !== idx + 1,
              })}
              key={feature.id}
            >
              <div className="wmx-bg-primary/10 wmx-size-[30px] wmx-flex wmx-justify-center wmx-items-center wmx-rounded-full">
                <feature.icon
                  size={16}
                  weight="bold"
                  className="wmx-text-primary"
                />
              </div>
              <p className="wmx-text-sm wmx-text-black wmx-font-medium">
                {feature.description}
              </p>
            </div>
          ))}
        </div>

        <Countdown />

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

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

export default ProBanner;
