Pricing Sections

import { AnimatedPricingTiers } from "@/components/ui/pricing-sections"; // Adjust path as needed
import {
  Users,
  Palette,
  Code,
  Mail,
  Link2,
  UploadCloud,
  MousePointerClick,
  FileText,
  Lock,
  MailCheck,
  History,
  PlusCircle,
  BarChart2,
  Zap
} from "lucide-react";

// Demo component to showcase the AnimatedPricingTiers
export default function AnimatedPricingTiersDemo() {
  const tiers = [
    {
      name: "Pro",
      monthlyPrice: 24,
      yearlyPrice: 240, // Assuming $20/month for yearly
      cta: "Get started",
      accentColor: "hsl(326.3 73.7% 50%)", // Pro plan pink color
      features: [
        {
          icon: <Palette size={20} />,
          title: "Remove Tally branding",
          description: "Hide all branding and make your forms truly your own.",
        },
        {
          icon: <Users size={20} />,
          title: "Collaboration",
          description: "Invite unlimited team members to shared workspaces.",
        },
        {
          icon: <Zap size={20} />,
          title: "Advanced customization",
          description: "Customize your forms with built-in design options.",
        },
        {
          icon: <Mail size={20} />,
          title: "Email notifications",
          description: "Send tailored emails to yourself and respondents.",
        },
        {
          icon: <Link2 size={20} />,
          title: "Customize link preview",
          description: "Change the form's OG image, favicon, title and description.",
        },
        {
          icon: <UploadCloud size={20} />,
          title: "Unlimited uploads",
          description: "Remove the 10 MB per file size limit when using the File Upload block.",
        },
        {
          icon: <MousePointerClick size={20} />,
          title: "Drop-off analytics",
          description: "Identify where respondents abandon your form and increase completion rates.",
        },
        {
          icon: <FileText size={20} />,
          title: "Premium integrations",
          description: "Analyze traffic sources with Google Analytics and optimize ad campaigns with Meta Pixel.",
        },
      ],
    },
    {
      name: "Business",
      monthlyPrice: 74,
      yearlyPrice: 740, // Assuming $61.6/month for yearly
      cta: "Get started",
      accentColor: "hsl(221.2 83.2% 53.3%)", // Business plan blue color
      extraInfo: (
        <p className="text-sm text-foreground">
          <strong>Everything in Pro</strong>, plus the following features tailored for organizations with advanced needs.
        </p>
      ),
      features: [
        {
          icon: <Lock size={20} />,
          title: "Control data retention",
          description: "Automatically delete form submissions after a set period to comply with privacy.",
        },
        {
          icon: <MailCheck size={20} />,
          title: "Verify emails",
          description: "Confirm respondents' email addresses to capture high-quality leads.",
        },
        {
          icon: <History size={20} />,
          title: "Version history",
          description: "Restore your form to a previous version up to 90 days ago.",
        },
        {
          icon: <PlusCircle size={20} />,
          title: "More to come",
          description: "We are working on more Business features. Stay tuned!",
        },
      ],
    },
  ];

  return (
    <div className="bg-background text-foreground w-full">
      <AnimatedPricingTiers
        title="Do more with Tally"
        subtitle="Upgrade to access advanced features designed for growing teams and creators."
        illustrationSrc="https://cdn.21st.dev/assets/mirror/4e/4e6470073e0bfba3117da69e6fe7e3d43efa2f909b79fde279be6f395569b5e9.png" // Example SVG link
        yearlyDiscountBadge="2 months off"
        tiers={tiers}
      />
    </div>
  );
}