Website/app/pricing/page.js

import Layout from "@/components/layout/Layout";
import { Check, Star, Zap, Crown } from "lucide-react";
import Link from "next/link";

const plans = [
  {
    name: "Starter",
    price: 150,
    description: "Perfect for small businesses getting started",
    icon: Zap,
    features: [
      "Basic invoicing & billing",
      "Payment processing",
      "Client portal access",
      "Email support",
      "Basic reporting",
      "Up to 50 clients",
      "Standard templates",
    ],
    popular: false,
  },
  {
    name: "Professional",
    price: 250,
    description: "Advanced features for growing businesses",
    icon: Star,
    features: [
      "Advanced invoicing & billing",
      "Live chat support",
      "Payment history & receipts",
      "Support ticket system",
      "Knowledge base access",
      "Video tutorials",
      "Product upgrade system",
      "Unlimited clients",
      "Custom branding",
      "Advanced reporting",
      "API access",
    ],
    popular: true,
  },
  {
    name: "Enterprise",
    price: "Custom",
    description: "Tailored solutions for large organizations",
    icon: Crown,
    features: [
      "Everything in Professional",
      "Custom integrations",
      "Dedicated account manager",
      "Priority support",
      "Custom workflows",
      "Advanced AI features",
      "ClickUp integration",
      "White-label solution",
      "Custom training",
      "SLA guarantee",
    ],
    popular: false,
  },
];

export default function PricingPage() {
  return (
    <Layout headerStyle={4} footerStyle={3} breadcrumbTitle="Pricing">
      <section id="pricing" className="py-20">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
              Simple, Transparent Pricing
            </h1>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              Choose the perfect plan for your business. All plans include our
              core CRM features with no hidden fees.
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
            {plans.map((plan) => {
              const Icon = plan.icon;
              return (
                <div
                  key={plan.name}
                  className={`relative bg-white rounded-lg shadow-lg border-2 p-8 ${
                    plan.popular
                      ? "border-blue-500 scale-105"
                      : "border-gray-200"
                  }`}
                >
                  {plan.popular && (
                    <div className="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-blue-500 text-white px-4 py-1 rounded-full text-sm font-medium">
                      Most Popular
                    </div>
                  )}
                  <div className="text-center pb-8">
                    <div className="mx-auto w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
                      <Icon className="w-6 h-6 text-blue-600" />
                    </div>
                    <h3 className="text-2xl font-bold text-gray-900">
                      {plan.name}
                    </h3>
                    <p className="text-gray-600 mt-2">{plan.description}</p>
                    <div className="mt-4">
                      <span className="text-4xl font-bold text-gray-900">
                        {typeof plan.price === "number"
                          ? `$${plan.price}`
                          : plan.price}
                      </span>
                      {typeof plan.price === "number" && (
                        <span className="text-gray-600 ml-2">/month</span>
                      )}
                    </div>
                  </div>
                  <div className="mb-8">
                    <ul className="space-y-3">
                      {plan.features.map((feature, index) => (
                        <li key={index} className="flex items-start">
                          <Check className="w-5 h-5 text-green-500 mr-3 mt-0.5 flex-shrink-0" />
                          <span className="text-gray-700">{feature}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                  <Link
                    href="/client-area"
                    className={`block w-full text-center py-3 px-4 rounded-lg font-medium transition-colors ${
                      plan.popular
                        ? "bg-blue-600 text-white hover:bg-blue-700"
                        : "bg-gray-100 text-gray-900 hover:bg-gray-200 border border-gray-300"
                    }`}
                  >
                    {plan.name === "Enterprise"
                      ? "Contact Sales"
                      : "Get Started"}
                  </Link>
                </div>
              );
            })}
          </div>

          <div className="text-center mt-12">
            <p className="text-gray-600 mb-4">
              All plans include 14-day free trial • No setup fees • Cancel
              anytime
            </p>
            {/* <Link
              href="/portfolio"
              className="text-blue-600 hover:text-blue-700 transition-colors"
            >
              View Client Area Demo →
            </Link> */}
          </div>
        </div>
      </section>
    </Layout>
  );
}