planpost-offer-landing/src/components/PricingSection.tsx

"use client";

import { useState } from "react";
import { Check, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";
import { Label } from "@/components/ui/label";
import Link from "next/link";

interface PricingFeature {
  name: string;
  included: boolean;
}

interface PricingTier {
  name: string;
  users: string;
  monthlyPrice: string;
  yearlyPrice: string;
  description: string;
  features: PricingFeature[];
  highlight?: boolean;
}

export default function PricingSection() {
  const [isYearly, setIsYearly] = useState(false);

  const pricingTiers: PricingTier[] = [
    {
      name: "Free",
      users: "1 user",
      monthlyPrice: "$00",
      yearlyPrice: "$00",
      description:
        "Get started with essential features at no cost and try now.",
      features: [
        { name: "Credit ⭐ 15", included: true },
        { name: "Number of Brand 1", included: true },
        { name: "Social Profiles 0", included: false },
        { name: "Schedule Post", included: false },
        { name: "Content Calendar", included: false },
        { name: "Customized Brand Colours", included: true },
        { name: "AI based Copy Writing", included: true },
        { name: "AI based Image generation", included: true },
        { name: "Hashtag Generation", included: true },
        { name: "Manual Customization", included: true },
        { name: "JPG/PNG Download", included: true },
      ],
    },
    {
      name: "Startup",
      users: "2 user",
      monthlyPrice: "$19",
      yearlyPrice: "$10",
      description:
        "Access core tools to launch and manage your business efficiently",
      features: [
        { name: "Credit ⭐ 100", included: true },
        { name: "Number of Brand 1", included: true },
        { name: "Social Profiles 5", included: true },
        { name: "Schedule Post", included: true },
        { name: "Content Calendar", included: true },
        { name: "Customized Brand Colours", included: true },
        { name: "AI based Copy Writing", included: true },
        { name: "AI based Image generation", included: true },
        { name: "Hashtag Generation", included: true },
        { name: "Manual Customization", included: true },
        { name: "JPG/PNG Download", included: true },
      ],
    },
    {
      name: "Growth",
      users: "10 user",
      monthlyPrice: "$59",
      yearlyPrice: "$30",
      description:
        "Advanced features to boost productivity and expand your reach",
      highlight: true,
      features: [
        { name: "Credit ⭐ 300", included: true },
        { name: "Number of Brand 5", included: true },
        { name: "Social Profiles 20", included: true },
        { name: "Schedule Post", included: true },
        { name: "Content Calendar", included: true },
        { name: "Customized Brand Colours", included: true },
        { name: "AI based Copy Writing", included: true },
        { name: "AI based Image generation", included: true },
        { name: "Hashtag Generation", included: true },
        { name: "Manual Customization", included: true },
        { name: "JPG/PNG Download", included: true },
      ],
    },
    {
      name: "Agency Pro",
      users: "50 user",
      monthlyPrice: "$300",
      yearlyPrice: "$150",
      description:
        "Premium solutions for maximizing growth and efficiency for agency",
      features: [
        { name: "Credit ⭐ 3750", included: true },
        { name: "Number of Brand 50", included: true },
        { name: "Social Profiles 100", included: true },
        { name: "Schedule Post", included: true },
        { name: "Content Calendar", included: true },
        { name: "Customized Brand Colours", included: true },
        { name: "AI based Copy Writing", included: true },
        { name: "AI based Image generation", included: true },
        { name: "Hashtag Generation", included: true },
        { name: "Manual Customization", included: true },
        { name: "JPG/PNG Download", included: true },
      ],
    },
  ];

  return (
    <div
      id="pricingSection"
      className="py-12 px-4 md:px-6 lg:px-8 bg-[#f5f1ff]"
    >
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-12">
          <h2 className="text-3xl md:text-4xl font-bold text-[#7c3aed] mb-8">
            Find a flexible plan that fits your business
          </h2>
          <div className="flex items-center justify-center gap-4">
            <Label
              htmlFor="billing-toggle"
              className={`${!isYearly ? "text-[#7c3aed]" : "text-gray-500"}`}
            >
              Monthly
            </Label>
            <Switch
              id="billing-toggle"
              checked={isYearly}
              onCheckedChange={setIsYearly}
              className="data-[state=checked]:bg-[#7c3aed]"
            />
            <Label
              htmlFor="billing-toggle"
              className={`${isYearly ? "text-[#7c3aed]" : "text-gray-500"}`}
            >
              Annually
            </Label>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {pricingTiers.map((tier) => (
            <div
              key={tier.name}
              className={`rounded-2xl p-6 ${
                tier.highlight ? "bg-[#7c3aed] text-white" : "bg-white"
              }`}
            >
              <div className="mb-6">
                <h3 className="text-xl font-semibold mb-1">{tier.name}</h3>
                <p className="text-sm opacity-80">{tier.users}</p>
              </div>
              <div className="mb-6">
                <p className="text-3xl font-bold">
                  {isYearly ? tier.yearlyPrice : tier.monthlyPrice}
                  <span className="text-sm font-normal opacity-80">
                    {tier.name === "Free" ? "/1st Week" : "/Per Month"}
                  </span>
                </p>
                <p className="text-sm mt-2 opacity-80">{tier.description}</p>
              </div>
              <div className="space-y-4 mb-8">
                {tier.features.map((feature) => (
                  <div key={feature.name} className="flex items-center gap-2">
                    {feature.included ? (
                      <Check className="w-5 h-5 shrink-0" />
                    ) : (
                      <X className="w-5 h-5 shrink-0 opacity-50" />
                    )}
                    <span className="text-sm">{feature.name}</span>
                  </div>
                ))}
              </div>
              <Link href="https://dashboard.planpostai.com/payment">
                <Button
                  className={`w-full ${
                    tier.highlight
                      ? "bg-white text-[#7c3aed] hover:bg-gray-100"
                      : "bg-[#7c3aed] text-white hover:bg-[#6d31d9]"
                  }`}
                >
                  Choose Plan
                </Button>
              </Link>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}