import React from 'react'
import { Check } from 'lucide-react'
import { AnimateIn } from '@/components/AnimateIn'

interface Feature {
  feature: string
}

interface Package {
  name: string
  price: string
  description?: string
  features?: Feature[]
  isPopular?: boolean
  ctaLabel?: string
  ctaUrl?: string
}

interface PricingTableBlockProps {
  badge?: string
  heading: string
  subheading?: string
  disclaimer?: string
  packages?: Package[]
}

export function PricingTableBlockComponent(props: PricingTableBlockProps) {
  const { badge, heading, subheading, disclaimer, packages } = props

  return (
    <section id="cennik" className="py-24 bg-[#f4f4f4] border-b-2 border-[#1f1f1f] scroll-mt-20">
      <div className="container mx-auto px-4 sm:px-6 lg:px-12 max-w-7xl">
        <AnimateIn direction="up">
          <div className="max-w-3xl mb-14">
            {badge && (
              <div className="inline-block bg-[#1f1f1f] text-[#FFED00] text-xs font-black uppercase tracking-widest px-3 py-1 mb-4">
                {badge}
              </div>
            )}
            <h2 className="text-2xl sm:text-3xl lg:text-4xl font-black uppercase tracking-tight text-[#1f1f1f]">
              {heading}
            </h2>
            {subheading && (
              <p className="mt-4 text-base text-[#666666] leading-relaxed font-medium">
                {subheading}
              </p>
            )}
          </div>
        </AnimateIn>

        {packages && packages.length > 0 && (
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 items-stretch">
            {packages.map((pkg, idx) => (
              <AnimateIn key={idx} delay={idx * 150} direction="up" className="h-full">
                <div
                  className={`relative p-8 h-full flex flex-col justify-between bg-white border-2 border-[#1f1f1f] hover-lift transition-all ${
                    pkg.isPopular ? 'border-t-8 border-t-[#FFED00] shadow-md' : ''
                  }`}
                >
                  {pkg.isPopular && (
                    <div className="absolute top-0 right-0 bg-[#FFED00] text-[#1f1f1f] border-b-2 border-l-2 border-[#1f1f1f] text-[10px] font-black uppercase tracking-widest px-4 py-1">
                      Polecany Pakiet
                    </div>
                  )}

                  <div>
                    <h3 className="text-lg font-black uppercase text-[#1f1f1f]">
                      {pkg.name}
                    </h3>
                    {pkg.description && (
                      <p className="mt-2 text-xs text-[#666666] leading-relaxed min-h-[36px]">
                        {pkg.description}
                      </p>
                    )}

                    <div className="mt-6 mb-8 pb-6 border-b-2 border-[#f0f0f0] flex items-baseline gap-2">
                      <span className="text-3xl sm:text-4xl font-black text-[#1f1f1f] tracking-tight font-mono">
                        {pkg.price}
                      </span>
                    </div>

                    {pkg.features && pkg.features.length > 0 && (
                      <ul className="space-y-3 text-xs sm:text-sm">
                        {pkg.features.map((feat, fIdx) => (
                          <li key={fIdx} className="flex items-start gap-3 text-[#222222]">
                            <Check className="h-4 w-4 text-[#1f1f1f] bg-[#FFED00] p-0.5 shrink-0 mt-0.5 font-bold" />
                            <span className="font-semibold">{feat.feature}</span>
                          </li>
                        ))}
                      </ul>
                    )}
                  </div>

                  <div className="mt-10 pt-6 border-t-2 border-[#f0f0f0]">
                    <a
                      href={pkg.ctaUrl || '#formularz-kontaktowy'}
                      className={`w-full inline-flex items-center justify-center py-4 px-6 text-xs font-black uppercase tracking-widest transition-all ${
                        pkg.isPopular
                          ? 'bg-[#FFED00] hover:bg-[#fae100] text-[#1f1f1f] border-2 border-[#1f1f1f] shadow-xs'
                          : 'bg-[#1f1f1f] text-white hover:bg-[#333333]'
                      }`}
                    >
                      {pkg.ctaLabel || 'Wybierz pakiet'}
                    </a>
                  </div>
                </div>
              </AnimateIn>
            ))}
          </div>
        )}

        {disclaimer && (
          <AnimateIn delay={400} direction="none">
            <p className="mt-10 text-xs text-[#666666] font-medium">
              {disclaimer}
            </p>
          </AnimateIn>
        )}
      </div>
    </section>
  )
}