'use client'

import Link from 'next/link'

type PricingPlanType = {
  id: number
  title: string
  description: string
  price: string
  period: string
  features: string[]
  link: string
  buttonClass: string
}

const pricingPlansData: PricingPlanType[] = [
  {
    id: 1,
    title: 'Starter plan',
    description: 'Perfect for small businesses taking the first step toward greener logistics.',
    price: '$29',
    period: '/month',
    features: ['Up to 50 monthly deliveries', 'Basic route optimization', 'Emissions tracking dashboard', 'Email support'],
    link: '/contact',
    buttonClass: 'bg-default-950 hover:bg-primary-1 border-primary-1 text-white hover:text-default-950',
  },
  {
    id: 2,
    title: 'Growth plan',
    description: 'Ideal for growing companies with expanding logistics needs and green targets.',
    price: '$79',
    period: '/month',
    features: ['Up to 250 deliveries/month', 'Smart load planning', 'Real-time fleet tracking', 'Hybrid/electric fleet integration'],
    link: '/contact',
    buttonClass: 'bg-primary-1 border-transparent hover:border-primary-1 hover:bg-default-950 text-default-950 hover:text-white',
  },
  {
    id: 3,
    title: 'Enterprise plan',
    description: 'Custom solutions for organizations driving full eco-supply transformation.',
    price: '$99',
    period: '/month',
    features: ['Unlimited deliveries', 'AI-driven route & load optimization', 'Dedicated green fleet support', 'Custom sustainability reporting'],
    link: '/contact',
    buttonClass: 'bg-default-950 hover:bg-primary-1 border-primary-1 text-white hover:text-default-950',
  },
]

const Pricing = () => {
  return (
    <section className="bg-white py-20 md:py-25 lg:py-32">
      <div className="container">
        <div className="mx-auto mb-6 max-w-3xl text-center lg:mb-17.5">
          <h2 className="text-default-900 text-3xl leading-[1.1] font-medium md:text-[40px]">Choose your growth plan</h2>
        </div>

        <div className="grid grid-cols-1 gap-7.5 md:grid-cols-2 lg:grid-cols-3 lg:gap-12.5">
          {pricingPlansData.map((item) => (
            <div key={item.id} className="bg-default-100/90 flex flex-col justify-between rounded-xl p-5 transition-all duration-300 lg:p-7.5">
              <div>
                <h4 className="text-default-950 pb-2.5 text-xl font-medium md:text-[22px]">{item.title}</h4>
                <div className="border-default-300 mb-2.5 border-t border-dashed"></div>
                <p className="text-default-500 mb-3.75 text-sm leading-relaxed font-normal">{item.description}</p>
                <div className="flex items-baseline">
                  <h4 className="text-default-950 text-[22px] font-medium md:text-3xl">{item.price}</h4>
                  <span className="text-default-500 text-base font-normal">{item.period}</span>
                </div>
              </div>

              <div>
                <div className="py-5 md:py-7.5">
                  <Link href={item.link} className={`flex items-center justify-center rounded-full border border-dashed px-5 py-2.5 text-center font-medium transition-all duration-300 md:py-3.75 ${item.buttonClass}`}>
                    Get started
                  </Link>
                </div>

                <ul className="list-inside list-disc space-y-2.5 text-start">
                  {item.features.map((feature, idx) => (
                    <li key={idx} className="text-default-600 font-normal">
                      {feature}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}

export default Pricing