Cards

"use client";

import React from "react";
import { motion } from "framer-motion";
import { LucideIcon } from "lucide-react";
import { cn } from "@/app/lib/utils";

interface FeatureCardProps {
  icon?: LucideIcon;
  title: string;
  description: string;
  className?: string;
  variant?: "default" | "gradient" | "bordered";
  index?: number;
}

export function FeatureCard({
  icon: Icon,
  title,
  description,
  className,
  variant = "default",
  index,
}: FeatureCardProps) {
  const variants = {
    default: "bg-surface/40 border border-border/50 backdrop-blur-xl",
    gradient:
      "bg-gradient-to-br from-surface/40 via-surface/20 to-surface/10 border border-border/30 backdrop-blur-xl",
    bordered: "bg-surface/30 border-2 border-border/50 backdrop-blur-xl",
  };

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.5, delay: index ? index * 0.1 : 0 }}
      whileHover={{ y: -4 }}
      className={cn(
        "group relative overflow-hidden rounded-xl p-6 transition-all duration-300",
        variants[variant],
        className
      )}
    >
      {/* Animated gradient border on hover */}
      <div className="absolute inset-0 rounded-xl opacity-0 transition-opacity duration-300 group-hover:opacity-100">
        <div
          className="absolute inset-0 rounded-xl bg-gradient-to-r from-accent via-accent-secondary to-accent-tertiary animate-gradient-x opacity-75"
          style={{ padding: "1px" }}
        >
          <div className="h-full w-full rounded-xl bg-surface/90 backdrop-blur-xl" />
        </div>
      </div>

      <div className="relative z-10">
        {/* Numbered badge */}
        {index !== undefined && (
          <div className="mb-4 inline-flex items-center justify-center h-10 w-10 rounded-lg bg-gradient-to-br from-accent/20 via-accent-secondary/20 to-accent-tertiary/20 backdrop-blur-sm">
            <span className="text-sm font-bold bg-gradient-to-r from-accent via-accent-secondary to-accent-tertiary bg-clip-text text-transparent">
              {String(index + 1).padStart(2, "0")}
            </span>
          </div>
        )}

        {Icon && !index && (
          <div className="mb-4 inline-flex rounded-lg bg-gradient-to-br from-accent/20 via-accent-secondary/20 to-transparent p-3 text-foreground backdrop-blur-sm transition-all group-hover:from-accent/30 group-hover:via-accent-secondary/30">
            <Icon className="h-6 w-6" />
          </div>
        )}

        <h3 className="mb-2 text-xl font-semibold text-foreground">{title}</h3>

        <p className="text-foreground/60 leading-relaxed text-sm">
          {description}
        </p>
      </div>
    </motion.div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";
import { Check } from "lucide-react";
import { cn } from "@/app/lib/utils";

interface PricingCardProps {
  name: string;
  price: string;
  period?: string;
  description: string;
  features: string[];
  featured?: boolean;
  ctaText?: string;
  onCtaClick?: () => void;
  className?: string;
}

export function PricingCard({
  name,
  price,
  period = "/month",
  description,
  features,
  featured = false,
  ctaText = "Get Started",
  onCtaClick,
  className,
}: PricingCardProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.5 }}
      whileHover={{ y: -8 }}
      className={cn(
        "relative flex flex-col overflow-hidden rounded-2xl p-8",
        "border transition-all duration-300 backdrop-blur-xl",
        featured
          ? "border-accent bg-gradient-to-b from-accent/20 via-surface/50 to-surface/50 shadow-lg shadow-accent/20"
          : "border-border bg-surface/50 hover:border-accent/50",
        className
      )}
    >
      {featured && (
        <div className="absolute right-8 top-8">
          <span className="rounded-full bg-accent px-3 py-1 text-xs font-semibold text-primary-foreground">
            Popular
          </span>
        </div>
      )}

      <div className="mb-6">
        <h3 className="mb-2 text-xl font-semibold text-foreground">{name}</h3>
        <p className="text-sm text-muted-foreground">{description}</p>
      </div>

      <div className="mb-8">
        <div className="flex items-baseline">
          <span className="text-5xl font-bold text-foreground">{price}</span>
          {period && (
            <span className="ml-2 text-muted-foreground">{period}</span>
          )}
        </div>
      </div>

      <ul className="mb-8 flex-1 space-y-4">
        {features.map((feature, index) => (
          <motion.li
            key={index}
            initial={{ opacity: 0, x: -10 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ delay: index * 0.1 }}
            className="flex items-start gap-3"
          >
            <div
              className={cn(
                "mt-0.5 rounded-full p-1",
                featured
                  ? "bg-accent/20 text-accent"
                  : "bg-accent/10 text-accent"
              )}
            >
              <Check className="h-4 w-4" />
            </div>
            <span className="text-sm text-foreground">{feature}</span>
          </motion.li>
        ))}
      </ul>

      <button
        onClick={onCtaClick}
        className={cn(
          "w-full rounded-lg py-3 font-medium transition-all duration-200",
          "focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2 focus:ring-offset-background",
          featured
            ? "bg-gradient-to-r from-accent via-accent-secondary to-accent bg-[length:200%_100%] hover:bg-[length:100%_100%] text-primary-foreground shadow-lg shadow-accent/20"
            : "bg-surface/50 backdrop-blur-xl border border-border text-foreground hover:bg-gradient-to-r hover:from-accent/90 hover:via-accent-secondary/90 hover:to-accent/90 hover:text-primary-foreground hover:border-accent/50"
        )}
      >
        {ctaText}
      </button>

      {featured && (
        <div className="absolute -bottom-24 -right-24 h-64 w-64 rounded-full bg-accent/20 blur-3xl" />
      )}
    </motion.div>
  );
}