import { motion } from "framer-motion";
import { Tablet, Rocket, Crown, Check } from "lucide-react";
import { GridPattern } from "./GridPattern";

interface Package {
  icon: React.ReactNode;
  title: string;
  timeline: string;
  priceRange: string;
  features: string[];
}

const packages: Package[] = [
  {
    icon: <Tablet className="w-8 h-8" />,
    title: "The Blueprint",
    timeline: "Product Definition in 1 Week",
    priceRange: "$1,500 - $2,500",
    features: [
      "Strategy & roadmap",
      "User flows & wireframes",
      "Technical architecture"
    ]
  },
  {
    icon: <Rocket className="w-8 h-8" />,
    title: "The Prototype",
    timeline: "Working Demo in 2 Weeks",
    priceRange: "$6,000 - $8,000",
    features: [
      "Functional web or mobile prototype",
      "Core features implemented",
      "User testing ready"
    ]
  },
  {
    icon: <Crown className="w-8 h-8" />,
    title: "The Launchpad",
    timeline: "Market-Ready MVP in 6 Weeks",
    priceRange: "$20,000 - $30,000",
    features: [
      "Full website or app",
      "SEO-optimized & scalable",
      "Ready for launch"
    ]
  }
];

export const PackagesSection = () => {
  return (
    <section className="relative py-20 bg-background overflow-hidden">
      <GridPattern strokeDasharray="4 2" />
      
      <div className="relative z-10 container mx-auto px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="text-center mb-16"
        >
          <h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-4">
            Choose Your Speed. We'll Deliver Your Launch.
          </h2>
        </motion.div>
        
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
          {packages.map((pkg, index) => (
            <motion.div
              key={pkg.title}
              initial={{ opacity: 0, y: 50 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: index * 0.15 }}
              viewport={{ once: true }}
              className="group relative bg-card/50 backdrop-blur-sm border border-border/50 rounded-[20px] p-8 hover:border-accent/50 hover:shadow-xl hover:shadow-accent/5 hover:scale-[1.02] transition-all duration-300"
            >
              {/* Icon */}
              <div className="mb-6 inline-flex items-center justify-center w-16 h-16 rounded-full bg-accent/10 text-accent group-hover:bg-accent/20 group-hover:scale-110 transition-all duration-300">
                {pkg.icon}
              </div>
              
              {/* Title */}
              <h3 className="text-2xl font-semibold text-foreground mb-2 group-hover:text-accent transition-colors duration-300">
                {pkg.title}
              </h3>
              
              {/* Timeline */}
              <p className="text-muted-foreground mb-4">
                {pkg.timeline}
              </p>
              
              {/* Price Range */}
              <div className="text-3xl font-semibold text-foreground mb-8">
                {pkg.priceRange}
              </div>
              
              {/* Features List */}
              <ul className="space-y-4">
                {pkg.features.map((feature, idx) => (
                  <li key={idx} className="flex items-start gap-3">
                    <div className="flex-shrink-0 mt-0.5">
                      <Check className="w-5 h-5 text-accent" />
                    </div>
                    <span className="text-muted-foreground leading-relaxed">
                      {feature}
                    </span>
                  </li>
                ))}
              </ul>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
};