"use client";

import { useState } from "react";
import { ArrowRightIcon, PlusIcon } from "lucide-react";
import { motion } from "motion/react";

import { cn } from "@/lib/classes";
import "./nachi-pricing-style.css";

import { PlanData, plansData } from "./data";

// Utility function to format price with currency
const formatPrice = (
  price: number,
  currency: string = "USD",
  locale: string = "en-US"
) => {
  return new Intl.NumberFormat(locale, {
    style: "currency",
    currency: currency,
    minimumFractionDigits: 0,
    maximumFractionDigits: 0,
  }).format(price);
};

// Helper function to get button styles
const getButtonStyles = (variant: "gray" | "blue" | "orange") => {
  const baseStyles =
    "w-full h-full flex items-center justify-center py-2 cursor-pointer [transition:scale_150ms_ease-out] active:scale-98";

  switch (variant) {
    case "gray":
      return `${baseStyles} bg-[#6c6c6c] bg-gradient-to-b from-[#6c6c6c] to-[#a4a4a4]`;
    case "blue":
      return `${baseStyles} bg-[#205aae] bg-gradient-to-b from-[#205aae] to-[#64aaf4]`;
    case "orange":
      return `${baseStyles} bg-[#ac5914] bg-gradient-to-b from-[#ac5914] to-[#da9255]`;
    default:
      return `${baseStyles} bg-[#6c6c6c] bg-gradient-to-b from-[#6c6c6c] to-[#a4a4a4]`;
  }
};

// Helper function to get background gradient
const getCardBackground = (planId: string) => {
  switch (planId) {
    case "starter":
      return "[background-image:linear-gradient(180deg,#1c1c1c,transparent)]";
    case "pro":
      return "[background-image:linear-gradient(180deg,#1f2e43,#0e0e0e_80%)]";
    case "enterprise":
      return "[background-image:linear-gradient(180deg,#351d13,#0e0e0e_80%)]";
    default:
      return "[background-image:linear-gradient(180deg,#1c1c1c,transparent)]";
  }
};

const periodButtons = [
  {
    label: "Bill Annually",
    value: "yearly",
  },
  {
    label: "Bill Monthly",
    value: "monthly",
  },
];

export const NachiPricingSection = () => {
  const [period, setPeriod] = useState<"monthly" | "yearly">("yearly");

  // Helper function to get current monthly price based on period
  const getCurrentPrice = (plan: PlanData) => {
    if (plan.isCustomPricing) return "Custom Pricing";

    // Always show monthly price, but discounted price when yearly is selected
    if (period === "yearly") {
      return formatPrice(plan.pricing.yearly.monthlyPrice);
    } else {
      return formatPrice(plan.pricing.monthly.price);
    }
  };

  // Helper function to get total annual price for billing info
  const getAnnualPrice = (plan: PlanData) => {
    if (plan.isCustomPricing) return null;
    return formatPrice(plan.pricing.yearly.annualPrice);
  };

  return (
    <div className="min-h-fit flex flex-col items-center justify-center p-6 py-20 pb-40 relative bg-[#0e0e0e]">
      <div className="max-w-[1400px] mx-auto w-full flex flex-col items-center pricing">
        <div className="flex items-center justify-center gap-4">
          <div className="relative size-6 bg-[#24242c] grid place-items-center">
            <div className="relative size-4 bg-[#3e475b] grid place-items-center">
              <div className="relative size-2 bg-[#a5b9ef]" />
            </div>
          </div>

          <div className="relative px-5 py-1 border border-[#222222] overflow-hidden">
            <div className="absolute size-8 -left-[15px] -bottom-4 pattern rotate-45 bg-size-[4px_4px]" />
            <div className="absolute size-8 -right-[15px] -top-4 pattern rotate-45 bg-size-[4px_4px]" />
            <span className="text-[#a5b9ef] text-sm">Pricing Plan</span>
          </div>
        </div>

        <div className="relative mt-5">
          <h1 className="text-xl md:text-2xl lg:text-3xl xl:text-5xl font-medium tracking-wide text-[#e5e5e5] text-center">
            <span className="inline-block px-1 py-2 bg-[#262626] mr-2">
              Flexible{" "}
            </span>
            plans for your learning goals
          </h1>

          <p className="text-center max-w-[33ch] w-full mx-auto text-[#6c6c6c] mt-5">
            Choose a plan that matches how you want to learn and grow
          </p>
        </div>

        <div className="relative mt-10 gap-7">
          <div className="absolute size-3 bg-[#444444] -top-px -right-px z-0" />
          <div className="absolute size-3 bg-[#444444] -top-px -left-px z-0" />
          <div className="relative self-center bg-[#0e0e0e] p-2 z-1">
            <div className="border border-[#383838] relative pattern bg-size-[10px_10px] p-1.5 bg-[#131313] flex items-center justify-center gap-2 z-1">
              <div
                aria-hidden
                className="[background:linear-gradient(90deg,rgba(0,0,0,0),hsl(0_0%_20.5%)_20%,hsl(0_0%_49.4%)_67.19%,rgba(0,0,0,0))] absolute top-[-1px] w-full mx-auto z-1 opacity-60 h-px"
              />
              <div
                aria-hidden
                className="[background:linear-gradient(90deg,rgba(0,0,0,0),hsl(0_0%_20.5%)_20%,hsl(0_0%_49.4%)_67.19%,rgba(0,0,0,0))] absolute bottom-[-1px] w-full mx-auto z-1 opacity-60 h-px"
              />
              {periodButtons.map((button) => (
                <button
                  key={button.value}
                  className="px-4 py-2 text-sm relative cursor-pointer"
                  onClick={() =>
                    setPeriod(button.value as "monthly" | "yearly")
                  }
                >
                  {period === button.value && (
                    <motion.div
                      layoutId="period-button"
                      className="absolute inset-0 z-0 border border-[#3b3f42] bg-[#191f27] overflow-hidden"
                    >
                      <div className="absolute left-0 bottom-0 w-full h-[6px] bg-white blur-sm" />
                    </motion.div>
                  )}

                  <span
                    className={cn(
                      "relative z-1 [transition:color_0.4s_ease-in-out]",
                      period === button.value ? "text-[#fff]" : "text-[#999999]"
                    )}
                  >
                    {button.label}
                  </span>
                </button>
              ))}
            </div>
          </div>
        </div>

        <div className="relative mt-10 w-full">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 items-stretch">
            {plansData.map((plan) => (
              <div
                key={plan.id}
                className={cn(
                  "relative h-full flex flex-col",
                  plan.position === "elevated" ? "lg:translate-y-10" : ""
                )}
              >
                <div className="absolute size-3 bg-[#444444] -top-px -right-px z-0" />
                <div className="absolute size-3 bg-[#444444] -top-px -left-px z-0" />
                <div className="absolute size-3 bg-[#444444] -bottom-px -right-px z-0" />
                <div className="absolute size-3 bg-[#444444] -bottom-px -left-px z-0" />
                <div className="relative flex-1 bg-[#0e0e0e] p-2 z-1">
                  <div className={cn("p-3 h-full", getCardBackground(plan.id))}>
                    <div
                      className={cn(
                        "relative flex flex-col h-full backdrop-blur-sm bg-[#383838]/[0.2]",
                        plan.id === "starter"
                          ? "border border-[#383838]/[0.1]"
                          : "border border-white/[0.03]"
                      )}
                    >
                      <div
                        aria-hidden
                        className={cn(
                          "[background:linear-gradient(90deg,rgba(0,0,0,0),hsl(0_0%_20.5%)_20%,hsl(0_0%_49.4%)_67.19%,rgba(0,0,0,0))] absolute top-[-1px] w-full mx-auto z-1 h-px",
                          plan.id === "starter" ? "opacity-30" : "opacity-60"
                        )}
                      />
                      <div className="flex flex-col flex-1 p-8">
                        <h3 className="text-xl md:text-2xl font-medium tracking-wide text-[#e5e5e5]">
                          {plan.name}
                        </h3>
                        <p className="text-[#9c9c9c] mt-2">
                          {plan.description}
                        </p>

                        <div className="mt-6 flex items-baseline gap-1">
                          {plan.isCustomPricing ? (
                            <span className="text-2xl md:text-3xl font-medium tracking-wide text-[#e5e5e5]">
                              {getCurrentPrice(plan)}
                            </span>
                          ) : (
                            <span
                              className="text-4xl md:text-5xl font-medium tracking-wide text-[#e5e5e5] inline-block overflow-hidden"
                              key={period}
                            >
                              {getCurrentPrice(plan)
                                .split("")
                                .map((textChar, index) => {
                                  return (
                                    <span
                                      key={index}
                                      className="inline-block text-reveal"
                                      style={
                                        {
                                          "--delay": `calc(0.03s * ${index})`,
                                        } as React.CSSProperties
                                      }
                                    >
                                      {textChar}
                                    </span>
                                  );
                                })}
                            </span>
                          )}
                          {!plan.isCustomPricing && (
                            <span className="text-lg text-[#6c6c6c]">
                              / month
                            </span>
                          )}
                        </div>

                        {!plan.isCustomPricing && (
                          <p
                            className={cn(
                              "text-sm mt-2 billed-annual-tag",
                              "text-white"
                            )}
                            data-mounted={period === "yearly"}
                          >
                            Billed Annually {getAnnualPrice(plan)}
                          </p>
                        )}

                        {/* Features Section */}
                        {plan.features && (
                          <div className="mt-9 mb-5 space-y-3">
                            {plan.features.map((feature, index) => (
                              <div
                                key={index}
                                className="flex items-start gap-2"
                              >
                                <PlusIcon className="size-3 text-[#a5a5a5] mt-1 flex-shrink-0" />
                                <span
                                  className={cn(
                                    "text-sm",
                                    feature.className || "text-[#f5f5f5]"
                                  )}
                                >
                                  {feature.value}
                                </span>
                              </div>
                            ))}
                          </div>
                        )}
                      </div>
                      <div className="p-3 pattern bg-size-[10px_10px] border-t border-[#383838]/[0.3]">
                        <button
                          className={getButtonStyles(plan.button.variant)}
                        >
                          <span className="text-base tracking-wide font-medium md:text-lg">
                            {plan.button.text}
                          </span>
                          {plan.button.variant !== "gray" && (
                            <ArrowRightIcon className="size-4.5 ml-2" />
                          )}
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};
Nachi Pricing Section

Installation

Installation

Flexible plans for your learning goals

Starter Plan

Pro Plan

Enterprise Plan
