Wdipl-react/components/VibeProgrammingPackages.tsx

import { motion } from "framer-motion";
import { FileText, Rocket, Crown, Check, ArrowRight, Zap } from "lucide-react";
import { Button } from "./ui/button";
import { GridPattern } from "./GridPattern";

interface Package {
  icon: React.ReactNode;
  title: string;
  description: string;
  timeline: string;
  timelineValue: string;
  outcome: string;
  outcomeValue: string;
  priceRange: string;
  isPopular?: boolean;
}

const packages: Package[] = [
  {
    icon: <FileText className="w-10 h-10" />,
    title: "The Blueprint",
    description: "Your idea, structured. We shape product vision for your website, app, or solution—prioritize features, and map technical architecture into a tangible plan.",
    timeline: "Timeline:",
    timelineValue: "1 Week",
    outcome: "Outcome:",
    outcomeValue: "Clarity, without ambiguity.",
    priceRange: "$1,500 – $2,500+",
    isPopular: false
  },
  {
    icon: <Rocket className="w-10 h-10" />,
    title: "The Prototype",
    description: "Your product, visualized. High-fidelity designs, user flows, and a clickable web or mobile prototype that communicates your vision to stakeholders and investors.",
    timeline: "Timeline:",
    timelineValue: "2 Weeks or Less",
    outcome: "Outcome:",
    outcomeValue: "A working model to validate and showcase.",
    priceRange: "$6,000 – $8,000+",
    isPopular: true
  },
  {
    icon: <Crown className="w-10 h-10" />,
    title: "The Launchpad (MVP)",
    description: "Your product, live. A fully functional, market-ready website or mobile app MVP delivered with speed, precision, SEO optimization, and scalability.",
    timeline: "Timeline:",
    timelineValue: "Under 6 Weeks",
    outcome: "Outcome:",
    outcomeValue: "A product in users' hands.",
    priceRange: "$20,000 – $30,000+",
    isPopular: false
  }
];

export const VibeProgrammingPackages = () => {
  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">
        {/* Header */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="text-center mb-16"
        >
          <div className="inline-flex items-center gap-2 mb-4">
            <Zap className="w-6 h-6 text-accent" />
            <h2 className="text-4xl lg:text-5xl font-semibold text-foreground font-manrope">
              Vibe Programming Packages
            </h2>
          </div>
          <p className="text-muted-foreground text-lg max-w-2xl mx-auto font-manrope">
            Where your vision takes form. From clarity to click-through to launch.
          </p>
        </motion.div>
        
        {/* Package Cards */}
        <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"
            >
              {/* Most Popular Badge */}
              {pkg.isPopular && (
                <div className="absolute top-0 left-1/2 -translate-x-1/2">
                  <span className="bg-blue-600 text-white px-4 py-1 rounded-full text-sm font-medium font-manrope">
                    Most Popular
                  </span>
                </div>
              )}
              
              {/* Icon */}
              <div className={`mb-6 inline-flex items-center justify-center w-16 h-16 rounded-full ${pkg.isPopular ? 'bg-blue-600/20 text-blue-400' : 'bg-accent/10 text-accent'} group-hover:scale-110 transition-all duration-300 ${pkg.isPopular ? '' : ''}`}>
                {pkg.icon}
              </div>
              
              {/* Title */}
              <h3 className="text-2xl font-semibold text-foreground mb-4 group-hover:text-accent transition-colors duration-300 font-manrope">
                {pkg.title}
              </h3>
              
              {/* Description */}
              <p className="text-muted-foreground mb-6 leading-relaxed min-h-[120px] font-manrope">
                {pkg.description}
              </p>
              
              {/* Timeline */}
              <div className="mb-4">
                <div className="flex items-start justify-between mb-2">
                  <span className="text-sm text-muted-foreground font-manrope">{pkg.timeline}</span>
                  <span className="text-sm text-foreground font-medium font-manrope">{pkg.timelineValue}</span>
                </div>
              </div>
              
              {/* Outcome */}
              <div className="mb-6 pb-6 border-b border-border/50 min-h-[58px]">
                <div className="flex items-start justify-between">
                  <span className="text-sm text-muted-foreground font-manrope">{pkg.outcome}</span>
                  <span className="text-sm text-foreground font-medium text-right font-manrope">{pkg.outcomeValue}</span>
                </div>
              </div>
              
              {/* Price Range */}
              <div className="text-3xl font-semibold text-foreground mb-6 font-manrope">
                {pkg.priceRange}
              </div>
              
              {/* Get Started Button */}
              <Button
                variant={pkg.isPopular ? "default" : "outline"}
                className={`w-full py-6 text-base font-medium rounded-xl group/btn transition-all duration-300 font-manrope ${
                  pkg.isPopular 
                    ? 'bg-blue-600 hover:bg-blue-700 text-white border-0' 
                    : 'border-border/50 hover:border-accent/50 hover:bg-accent/10'
                }`}
              >
                <span className="flex items-center justify-center gap-2">
                  Get Started
                  <ArrowRight className="w-4 h-4 group-hover/btn:translate-x-1 transition-transform duration-300" />
                </span>
              </Button>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
};