import { useEffect, useRef } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { Check, Sparkles, ArrowRight } from 'lucide-react';

gsap.registerPlugin(ScrollTrigger);

type Plan = {
  name: string;
  description: string;
  cta: string;
  ctaHref: string;
  highlighted: boolean;
  badge?: string;
  credits?: string;
  creditsLabel?: string;
  price?: string;
  priceLabel?: string;
  features?: string[];
};

const plans: Plan[] = [
  {
    name: 'Individual',
    description: 'A lightweight way to try portfolio analytics.',
    price: '$0',
    priceLabel: 'to start',
    cta: 'Get started',
    ctaHref: '/register',
    highlighted: false,
    features: [
      'Analyze 500 portfolios',
      '2 concurrent users',
      'Basic metrics',
      'Email support',
      '7-day data history',
    ],
  },
  {
    name: 'Enterprise',
    description: 'Built for high volume and complex needs.',
    price: 'Custom Pricing',
    priceLabel: '',
    cta: 'Talk to sales',
    ctaHref: '#contact',
    highlighted: false,
    features: [
      'Analyze 500,000+ portfolios',
      'Unlimited users',
      'Dedicated infrastructure',
      'Priority support',
      'Unlimited data history',
      'SLA guarantee',
      'Custom development',
    ],
  },
];

export default function Pricing() {
  const sectionRef = useRef<HTMLElement>(null);

  useEffect(() => {
    const ctx = gsap.context(() => {
      gsap.fromTo(
        '.pricing-card',
        { y: 40, opacity: 0 },
        {
          y: 0,
          opacity: 1,
          duration: 0.6,
          stagger: 0.1,
          ease: 'power2.out',
          scrollTrigger: {
            trigger: sectionRef.current,
            start: 'top 80%',
          },
        }
      );
    }, sectionRef);

    return () => ctx.revert();
  }, []);

  return (
    <section
      id="pricing"
      ref={sectionRef}
      className="relative py-16 lg:py-20 bg-navy overflow-hidden"
    >
      {/* ASCII Grid */}
      <div className="absolute inset-0 ascii-grid opacity-20" />

      <div className="relative z-10 max-w-9xl mx-auto px-6">
        {/* Section Header */}
        <div className="text-center mb-8">
          <div className="flex items-center justify-center gap-2 mb-3">
            <span className="font-mono text-xs text-primary uppercase tracking-[0.25em] font-medium opacity-95">[ Pricing ]</span>
          </div>
          <h2 className="font-heading font-bold text-3xl lg:text-5xl mb-3 tracking-tight">
            <span className="text-primary">Transparent</span>
            <br />
            <span className="text-white drop-shadow-sm">Pricing</span>
          </h2>
          <p className="text-lg text-gray-300 max-w-xl mx-auto leading-relaxed">
            Explore transparent pricing built for real-world portfolio management.
          </p>
        </div>

        {/* Pricing Cards - centered */}
        <div className="flex justify-center">
          <div className="grid sm:grid-cols-2 gap-6 w-full max-w-4xl">
            {plans.map((plan) => (
              <div
                key={plan.name}
                className={`pricing-card relative p-6 sm:p-8 rounded-2xl border transition-all duration-300 flex flex-col ${
                  plan.highlighted
                    ? 'bg-surface border-orange/40 shadow-glow scale-105 z-10'
                    : 'bg-surface border-white/8 hover:border-white/20 hover:shadow-lg hover:shadow-black/20'
                }`}
              >
              {/* Badge */}
              {plan.badge && (
                <div className="absolute -top-3 left-4">
                  <span className={`inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded ${
                    plan.highlighted 
                      ? 'bg-orange text-white' 
                      : 'bg-white/10 text-gray-300'
                  }`}>
                    {plan.highlighted && <Sparkles size={12} />}
                    {plan.badge}
                  </span>
                </div>
              )}

              {/* Plan Header */}
              <div className="mb-6">
                <h3 className="font-heading font-semibold text-lg text-primary mb-1">
                  {plan.name}
                </h3>
                <p className="text-sm text-gray-400 leading-relaxed">{plan.description}</p>
              </div>

              {/* Credits - only for plans with credits */}
              {plan.credits != null && (
                <div className="mb-4">
                  <div className="font-heading font-bold text-3xl text-primary">
                    {plan.credits}
                  </div>
                  {plan.creditsLabel && (
                    <div className="text-sm text-gray-400">{plan.creditsLabel}</div>
                  )}
                </div>
              )}

              {/* Price - only for plans with a price */}
              {plan.price != null && (
                <div className="mb-6">
                  <span className="font-heading font-bold text-2xl text-primary">
                    {plan.price}
                  </span>
                  {plan.priceLabel && (
                    <span className="text-sm text-gray-400 ml-1">{plan.priceLabel}</span>
                  )}
                </div>
              )}

              {/* Features */}
              {plan.features && plan.features.length > 0 && (
                <ul className="space-y-3 mb-6 flex-1">
                  {plan.features.map((feature) => (
                    <li key={feature} className="flex items-start gap-2">
                      <Check size={16} className="text-primary mt-0.5 flex-shrink-0" />
                      <span className="text-sm text-gray-300 leading-relaxed">{feature}</span>
                    </li>
                  ))}
                </ul>
              )}

              {/* CTA */}
              <a
                href={plan.ctaHref}
                className={`w-full inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium transition-all ${
                  plan.highlighted
                    ? 'bg-primary text-primary-foreground hover:bg-orange-dark'
                    : 'border border-primary/50 text-primary hover:bg-primary/10'
                }`}
              >
                {plan.cta}
                <ArrowRight size={16} />
              </a>
            </div>
          ))}
          </div>
        </div>
      </div>
    </section>
  );
}