Pricing Section

"use client";

import { useState } from "react";

interface PricingPlan {
  name: string;
  price: number;
  yearlyPrice: number;
  description: string;
  features: string[];
  popular?: boolean;
  buttonText: string;
  buttonVariant: "primary" | "secondary";
}

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

  const plans: PricingPlan[] = [
    {
      name: "Basic",
      price: 9,
      yearlyPrice: 90,
      description: "Perfect for individuals getting started",
      features: [
        "Up to 3 projects",
        "5GB storage",
        "Email support",
        "Basic analytics",
        "Mobile app access",
      ],
      buttonText: "Get Started",
      buttonVariant: "secondary",
    },
    {
      name: "Pro",
      price: 29,
      yearlyPrice: 290,
      description: "Best for growing teams and businesses",
      features: [
        "Unlimited projects",
        "100GB storage",
        "Priority support",
        "Advanced analytics",
        "Team collaboration",
        "API access",
        "Custom integrations",
      ],
      popular: true,
      buttonText: "Start Free Trial",
      buttonVariant: "primary",
    },
    {
      name: "Enterprise",
      price: 99,
      yearlyPrice: 990,
      description: "For large organizations with advanced needs",
      features: [
        "Everything in Pro",
        "Unlimited storage",
        "24\/7 phone support",
        "Custom analytics",
        "Advanced security",
        "Dedicated manager",
        "Custom contracts",
        "SLA guarantee",
      ],
      buttonText: "Contact Sales",
      buttonVariant: "secondary",
    },
  ];

  return (
    <div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-7xl mx-auto">
        {\/* Header *\/}
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold text-gray-900 mb-4">
            Simple Pricing
          <\/h1>
          <p className="text-xl text-gray-600 max-w-2xl mx-auto mb-8">
            Choose the perfect plan for your needs. Upgrade or downgrade at any
            time.
          <\/p>

          {\/* Billing Toggle *\/}
          <div className="flex items-center justify-center gap-4">
            <span
              className={`text-sm font-medium ${
                !isYearly ? "text-gray-900" : "text-gray-500"
              }`}
            >
              Monthly
            <\/span>
            <button
              onClick={() => setIsYearly(!isYearly)}
              className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
                isYearly ? "bg-blue-600" : "bg-gray-200"
              }`}
            >
              <span
                className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                  isYearly ? "translate-x-6" : "translate-x-1"
                }`}
              \/>
            <\/button>
            <span
              className={`text-sm font-medium ${
                isYearly ? "text-gray-900" : "text-gray-500"
              }`}
            >
              Yearly
            <\/span>
            <span className="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800">
              Save 17%
            <\/span>
          <\/div>
        <\/div>

        {\/* Pricing Cards *\/}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {plans.map((plan) => (
            <div
              key={plan.name}
              className={`relative bg-white rounded-2xl shadow-sm border-2 transition-all duration-300 hover:shadow-lg ${
                plan.popular
                  ? "border-blue-500 scale-105"
                  : "border-gray-200 hover:border-gray-300"
              }`}
            >
              {\/* Popular Badge *\/}
              {plan.popular && (
                <div className="absolute -top-4 left-1\/2 transform -translate-x-1\/2">
                  <span className="inline-flex items-center rounded-full bg-blue-600 px-4 py-1 text-sm font-medium text-white">
                    Most Popular
                  <\/span>
                <\/div>
              )}

              <div className="p-8">
                {\/* Plan Name *\/}
                <h3 className="text-2xl font-bold text-gray-900 mb-2">
                  {plan.name}
                <\/h3>

                {\/* Description *\/}
                <p className="text-gray-600 mb-6">{plan.description}<\/p>

                {\/* Price *\/}
                <div className="mb-6">
                  <div className="flex items-baseline">
                    <span className="text-4xl font-bold text-gray-900">
                      ${isYearly ? plan.yearlyPrice : plan.price}
                    <\/span>
                    <span className="text-gray-600 ml-2">
                      \/{isYearly ? "year" : "month"}
                    <\/span>
                  <\/div>
                  {isYearly && (
                    <p className="text-sm text-gray-500 mt-1">
                      ${plan.price}\/month billed annually
                    <\/p>
                  )}
                <\/div>

                {\/* Features *\/}
                <ul className="space-y-3 mb-8">
                  {plan.features.map((feature, index) => (
                    <li key={index} className="flex items-start gap-3">
                      <svg
                        className="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth={2}
                          d="M5 13l4 4L19 7"
                        \/>
                      <\/svg>
                      <span className="text-gray-700">{feature}<\/span>
                    <\/li>
                  ))}
                <\/ul>

                {\/* CTA Button *\/}
                <button
                  className={`w-full py-3 px-4 rounded-lg font-medium transition-colors ${
                    plan.buttonVariant === "primary"
                      ? "bg-blue-600 hover:bg-blue-700 text-white"
                      : "bg-gray-100 hover:bg-gray-200 text-gray-900"
                  }`}
                >
                  {plan.buttonText}
                <\/button>
              <\/div>
            <\/div>
          ))}
        <\/div>

        {\/* FAQ Section *\/}
        <div className="mt-16 text-center">
          <h2 className="text-2xl font-bold text-gray-900 mb-8">
            Frequently Asked Questions
          <\/h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
            <div className="text-left">
              <h3 className="font-semibold text-gray-900 mb-2">
                Can I change my plan later?
              <\/h3>
              <p className="text-gray-600 text-sm">
                Yes, you can upgrade or downgrade your plan at any time. Changes
                will be reflected in your next billing cycle.
              <\/p>
            <\/div>
            <div className="text-left">
              <h3 className="font-semibold text-gray-900 mb-2">
                Is there a free trial?
              <\/h3>
              <p className="text-gray-600 text-sm">
                Yes, we offer a 14-day free trial for all plans. No credit card
                required to start.
              <\/p>
            <\/div>
            <div className="text-left">
              <h3 className="font-semibold text-gray-900 mb-2">
                What payment methods do you accept?
              <\/h3>
              <p className="text-gray-600 text-sm">
                We accept all major credit cards, PayPal, and bank transfers for
                enterprise customers.
              <\/p>
            <\/div>
            <div className="text-left">
              <h3 className="font-semibold text-gray-900 mb-2">
                Can I cancel anytime?
              <\/h3>
              <p className="text-gray-600 text-sm">
                Absolutely! You can cancel your subscription at any time with no
                cancellation fees.
              <\/p>
            <\/div>
          <\/div>
        <\/div>

        {\/* Trust Indicators *\/}
        <div className="mt-16 text-center">
          <div className="inline-flex items-center gap-8 text-sm text-gray-600">
            <span className="flex items-center gap-2">
              <div className="w-2 h-2 bg-green-500 rounded-full"><\/div>
              14-day free trial
            <\/span>
            <span className="flex items-center gap-2">
              <div className="w-2 h-2 bg-blue-500 rounded-full"><\/div>
              No setup fees
            <\/span>
            <span className="flex items-center gap-2">
              <div className="w-2 h-2 bg-purple-500 rounded-full"><\/div>
              Cancel anytime
            <\/span>
          <\/div>
        <\/div>
      <\/div>
    <\/div>
  );
}