Enterprise Pricing

"use client";

import { useState } from "react";
import { motion, useReducedMotion } from "motion/react";

type Plan = {
  name: string;
  tagline: string;
  monthly: number;
  annual: number;
  cta: string;
  featured?: boolean;
  features: string[];
};

const PLANS: Plan[] = [
  {
    name: "Starter",
    tagline: "For solo builders validating a first idea.",
    monthly: 19,
    annual: 15,
    cta: "Start free trial",
    features: [
      "Up to 3 team seats",
      "10,000 tracked events / month",
      "7-day data retention",
      "Core dashboards & exports",
      "Community support",
    ],
  },
  {
    name: "Growth",
    tagline: "For teams shipping and measuring every week.",
    monthly: 59,
    annual: 47,
    cta: "Start free trial",
    featured: true,
    features: [
      "Up to 20 team seats",
      "500,000 tracked events / month",
      "1-year data retention",
      "Custom dashboards & alerts",
      "Role-based permissions",
      "Priority email support",
    ],
  },
  {
    name: "Scale",
    tagline: "For orgs that need control and real headroom.",
    monthly: 149,
    annual: 119,
    cta: "Start free trial",
    features: [
      "Unlimited team seats",
      "5M tracked events / month",
      "3-year data retention",
      "SSO & audit logs",
      "Usage-based overage billing",
      "Slack + email support, 4-hr SLA",
    ],
  },
];

const ENTERPRISE_FEATURES: string[] = [
  "Dedicated infrastructure & data residency",
  "SAML SSO, SCIM provisioning, granular RBAC",
  "99.99% uptime SLA with a named success manager",
  "Security review, signed DPA, and SOC 2 report",
];

function CheckIcon({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 20 20"
      fill="none"
      aria-hidden="true"
      className={className}
    >
      <path
        d="M5 10.5l3.2 3.2L15 6.5"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

export default function PricexEnterprise() {
  const prefersReduced = useReducedMotion();
  const [annual, setAnnual] = useState<boolean>(true);

  const container = {
    hidden: {},
    show: {
      transition: { staggerChildren: prefersReduced ? 0 : 0.08 },
    },
  };

  const item = prefersReduced
    ? { hidden: { opacity: 1 }, show: { opacity: 1 } }
    : {
        hidden: { opacity: 0, y: 26 },
        show: {
          opacity: 1,
          y: 0,
          transition: { duration: 0.55, ease: "easeOut" },
        },
      };

  return (
    <section className="relative w-full overflow-hidden bg-white py-24 text-slate-900 dark:bg-slate-950 dark:text-slate-100 sm:py-32">
      <style>{`
        @keyframes pxent-float {
          0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
          50% { transform: translate3d(0, -26px, 0) scale(1.06); }
        }
        @keyframes pxent-glow {
          0%, 100% { opacity: 0.55; }
          50% { opacity: 1; }
        }
        .pxent-float { animation: pxent-float 14s ease-in-out infinite; }
        .pxent-float-slow { animation: pxent-float 20s ease-in-out infinite; }
        .pxent-glow { animation: pxent-glow 4.5s ease-in-out infinite; }
        @media (prefers-reduced-motion: reduce) {
          .pxent-float, .pxent-float-slow, .pxent-glow { animation: none !important; }
          .pxent-transition { transition: none !important; }
        }
      `}</style>

      {/* Decorative background */}
      <div aria-hidden="true" className="pointer-events-none absolute inset-0 -z-10">
        <div className="pxent-float absolute -left-24 top-8 h-72 w-72 rounded-full bg-indigo-300/40 blur-3xl dark:bg-indigo-600/20" />
        <div className="pxent-float-slow absolute -right-16 top-40 h-80 w-80 rounded-full bg-violet-300/40 blur-3xl dark:bg-violet-600/20" />
        <div
          className="absolute inset-0 opacity-[0.4] dark:opacity-[0.25]"
          style={{
            backgroundImage:
              "radial-gradient(circle at 1px 1px, rgb(100 116 139 / 0.35) 1px, transparent 0)",
            backgroundSize: "34px 34px",
            maskImage:
              "radial-gradient(ellipse 70% 55% at 50% 0%, black, transparent 75%)",
            WebkitMaskImage:
              "radial-gradient(ellipse 70% 55% at 50% 0%, black, transparent 75%)",
          }}
        />
      </div>

      <div className="mx-auto max-w-6xl px-6">
        {/* Header */}
        <div className="mx-auto max-w-2xl text-center">
          <span className="inline-flex items-center gap-2 rounded-full border border-indigo-200 bg-indigo-50 px-3 py-1 text-xs font-semibold uppercase tracking-wider text-indigo-700 dark:border-indigo-500/30 dark:bg-indigo-500/10 dark:text-indigo-300">
            <span className="pxent-glow h-1.5 w-1.5 rounded-full bg-indigo-500 dark:bg-indigo-400" />
            Pricing
          </span>
          <h2 className="mt-5 text-balance text-4xl font-bold tracking-tight sm:text-5xl">
            Pricing that scales with{" "}
            <span className="bg-gradient-to-r from-indigo-600 to-violet-600 bg-clip-text text-transparent dark:from-indigo-400 dark:to-violet-400">
              PriceX
            </span>
          </h2>
          <p className="mt-4 text-pretty text-lg leading-relaxed text-slate-600 dark:text-slate-400">
            Start free, invite your team, and only pay for the volume you
            actually use. No setup fees, no surprise overage, cancel any time.
          </p>
        </div>

        {/* Billing toggle */}
        <div className="mt-9 flex items-center justify-center gap-3">
          <div
            role="group"
            aria-label="Billing period"
            className="relative inline-flex rounded-full border border-slate-200 bg-slate-100 p-1 dark:border-slate-700 dark:bg-slate-900"
          >
            <span
              aria-hidden="true"
              className="pxent-transition absolute inset-y-1 left-1 w-[calc(50%-0.25rem)] rounded-full bg-white shadow-sm ring-1 ring-slate-200 transition-transform duration-300 ease-out dark:bg-slate-800 dark:ring-slate-700"
              style={{ transform: annual ? "translateX(100%)" : "translateX(0)" }}
            />
            <button
              type="button"
              onClick={() => setAnnual(false)}
              aria-pressed={!annual}
              className="relative z-10 w-28 rounded-full px-4 py-2 text-sm font-semibold text-slate-600 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-100 aria-pressed:text-slate-900 dark:text-slate-400 dark:focus-visible:ring-offset-slate-900 dark:aria-pressed:text-white"
            >
              Monthly
            </button>
            <button
              type="button"
              onClick={() => setAnnual(true)}
              aria-pressed={annual}
              className="relative z-10 w-28 rounded-full px-4 py-2 text-sm font-semibold text-slate-600 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-100 aria-pressed:text-slate-900 dark:text-slate-400 dark:focus-visible:ring-offset-slate-900 dark:aria-pressed:text-white"
            >
              Annual
            </button>
          </div>
          <span className="rounded-full bg-emerald-100 px-2.5 py-1 text-xs font-semibold text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300">
            Save 20%
          </span>
        </div>

        {/* Plans */}
        <motion.div
          variants={container}
          initial="hidden"
          whileInView="show"
          viewport={{ once: true, margin: "-80px" }}
          className="mt-12 grid grid-cols-1 gap-6 lg:grid-cols-3"
        >
          {PLANS.map((plan) => {
            const price = annual ? plan.annual : plan.monthly;
            return (
              <motion.div
                key={plan.name}
                variants={item}
                className={
                  plan.featured
                    ? "relative rounded-3xl bg-gradient-to-b from-indigo-500 to-violet-600 p-[1.5px] shadow-xl shadow-indigo-500/20"
                    : "relative rounded-3xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900/60"
                }
              >
                <div
                  className={
                    plan.featured
                      ? "flex h-full flex-col rounded-[calc(1.5rem-1.5px)] bg-white p-7 dark:bg-slate-950"
                      : "flex h-full flex-col p-7"
                  }
                >
                  <div className="flex items-center justify-between">
                    <h3 className="text-lg font-semibold">{plan.name}</h3>
                    {plan.featured ? (
                      <span className="pxent-glow rounded-full bg-gradient-to-r from-indigo-600 to-violet-600 px-3 py-1 text-xs font-semibold text-white">
                        Most popular
                      </span>
                    ) : null}
                  </div>

                  <p className="mt-2 min-h-[2.5rem] text-sm text-slate-600 dark:text-slate-400">
                    {plan.tagline}
                  </p>

                  <div className="mt-6 flex items-end gap-1">
                    <motion.span
                      key={`${plan.name}-${annual}`}
                      initial={prefersReduced ? false : { opacity: 0, y: -6 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ duration: 0.25, ease: "easeOut" }}
                      className="text-5xl font-bold tracking-tight"
                    >
                      ${price}
                    </motion.span>
                    <span className="pb-1.5 text-sm font-medium text-slate-500 dark:text-slate-400">
                      /mo
                    </span>
                  </div>
                  <p className="mt-1 text-xs text-slate-500 dark:text-slate-500">
                    {annual
                      ? `Billed annually at $${price * 12}`
                      : "Billed monthly"}
                  </p>

                  <a
                    href="#get-started"
                    className={
                      plan.featured
                        ? "mt-6 inline-flex w-full items-center justify-center rounded-xl bg-gradient-to-r from-indigo-600 to-violet-600 px-5 py-3 text-sm font-semibold text-white shadow-lg shadow-indigo-500/25 transition-transform hover:scale-[1.02] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-slate-950"
                        : "mt-6 inline-flex w-full items-center justify-center rounded-xl border border-slate-300 bg-white px-5 py-3 text-sm font-semibold text-slate-900 transition-colors hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-slate-700 dark:bg-slate-900 dark:text-white dark:hover:bg-slate-800 dark:focus-visible:ring-offset-slate-950"
                    }
                  >
                    {plan.cta}
                  </a>

                  <ul className="mt-7 space-y-3 text-sm">
                    {plan.features.map((feature) => (
                      <li key={feature} className="flex items-start gap-3">
                        <span
                          className={
                            plan.featured
                              ? "mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-indigo-600 dark:bg-indigo-500/15 dark:text-indigo-300"
                              : "mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-emerald-600 dark:bg-emerald-500/15 dark:text-emerald-300"
                          }
                        >
                          <CheckIcon className="h-3.5 w-3.5" />
                        </span>
                        <span className="text-slate-700 dark:text-slate-300">
                          {feature}
                        </span>
                      </li>
                    ))}
                  </ul>
                </div>
              </motion.div>
            );
          })}
        </motion.div>

        {/* Enterprise contact card */}
        <motion.div
          initial={prefersReduced ? false : { opacity: 0, y: 26 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-60px" }}
          transition={{ duration: 0.55, ease: "easeOut" }}
          className="relative mt-8 overflow-hidden rounded-3xl border border-slate-800 bg-slate-900 p-8 text-white dark:border-slate-700 sm:p-10"
        >
          <div
            aria-hidden="true"
            className="pxent-float-slow pointer-events-none absolute -right-10 -top-16 h-64 w-64 rounded-full bg-violet-500/25 blur-3xl"
          />
          <div className="relative grid grid-cols-1 gap-8 lg:grid-cols-2 lg:items-center">
            <div>
              <span className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-3 py-1 text-xs font-semibold uppercase tracking-wider text-slate-200">
                Enterprise
              </span>
              <h3 className="mt-4 text-3xl font-bold tracking-tight">
                Custom infrastructure for high-volume teams
              </h3>
              <p className="mt-3 max-w-md text-pretty text-slate-300">
                Volume pricing, single sign-on, and a compliance package your
                security team will actually approve. We scope it around your
                data, your controls, and your rollout.
              </p>
              <div className="mt-7 flex flex-col gap-3 sm:flex-row sm:items-center">
                <a
                  href="#contact-sales"
                  className="group inline-flex items-center justify-center gap-2 rounded-xl bg-white px-5 py-3 text-sm font-semibold text-slate-900 transition-transform hover:scale-[1.02] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900"
                >
                  Talk to sales
                  <svg
                    viewBox="0 0 20 20"
                    fill="none"
                    aria-hidden="true"
                    className="h-4 w-4 transition-transform group-hover:translate-x-0.5"
                  >
                    <path
                      d="M4 10h11m0 0l-4-4m4 4l-4 4"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                </a>
                <a
                  href="#pricing-details"
                  className="inline-flex items-center justify-center rounded-xl border border-white/20 px-5 py-3 text-sm font-semibold text-white transition-colors hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900"
                >
                  View full comparison
                </a>
              </div>
            </div>

            <ul className="grid grid-cols-1 gap-4 sm:grid-cols-2">
              {ENTERPRISE_FEATURES.map((feature) => (
                <li
                  key={feature}
                  className="flex items-start gap-3 rounded-2xl border border-white/10 bg-white/5 p-4"
                >
                  <span className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-emerald-400/20 text-emerald-300">
                    <CheckIcon className="h-3.5 w-3.5" />
                  </span>
                  <span className="text-sm text-slate-200">{feature}</span>
                </li>
              ))}
            </ul>
          </div>
        </motion.div>

        <p className="mt-8 text-center text-sm text-slate-500 dark:text-slate-500">
          Every plan includes a 14-day free trial. No credit card required to
          start.
        </p>
      </div>
    </section>
  );
}