'use client'

import React, { useState } from 'react';
import { 
  Check, 
  Play, 
  Clock, 
  Image, 
  Sparkles, 
  RefreshCw, 
  Camera, 
  ShoppingCart, 
  Users, 
  TrendingUp, 
  ArrowRight,
  Star,
  Quote,
  Video,
  Palette,
  Wand2,
  Settings,
  Upload,
  Download,
  Sparkle,
  Rocket,
  Target,
  BarChart3,
  Crown,
  Edit3,
  LucideProps
} from 'lucide-react';

// TypeScript Interfaces
interface Feature {
  id: string;
  icon: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
  title: string;
  description: string;
  input: string;
  output: string;
  capabilities: string[];
  gradient: string;
  popular?: boolean;
  new?: boolean;
}

interface ProblemItem {
  icon: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
  title: string;
  description: string;
  stat: string;
  color: string;
}

interface StatItem {
  number: string;
  label: string;
}

interface Industry {
  icon: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
  name: string;
  description: string;
  useCases: string[];
  stat: string;
}

interface TransformationType {
  icon: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
  title: string;
  description: string;
}

interface BackgroundStyle {
  name: string;
  description: string;
  type: string;
}

const AIImageGenerator: React.FC = () => {
  const [, setActiveFeature] = useState<string>('text-to-image');
  const [, setHoveredCard] = useState<string | null>(null);
  console.log(setActiveFeature,setHoveredCard)

  const features: Feature[] = [
    {
      id: 'text-to-image',
      icon: Sparkles,
      title: 'Text-to-Image Generation',
      description: 'Transform your ideas into stunning visuals with a simple text description.',
      input: 'Minimalist laptop on wooden desk with morning coffee, sunlight, productive atmosphere',
      output: 'Professional lifestyle product photo',
      capabilities: [
        'Generate from any text description',
        'Multiple style options',
        'Brand color matching',
        'Platform-optimized dimensions'
      ],
      gradient: 'from-purple-500 to-pink-500',
      popular: true
    },
    {
      id: 'image-transformation',
      icon: RefreshCw,
      title: 'Image-to-Image Transformation',
      description: 'Take existing images and transform them into new styles or enhance them with AI.',
      input: 'Basic product photo',
      output: 'Professional styled product shot',
      capabilities: [
        'Style transfer',
        'Quality enhancement',
        'Background replacement',
        'Object addition/removal'
      ],
      gradient: 'from-blue-500 to-cyan-500'
    },
    {
      id: 'product-background',
      icon: Camera,
      title: 'Product Background Generation',
      description: 'Create professional product photos without expensive studios or photoshoots.',
      input: 'Product on cluttered background',
      output: 'Product on clean professional background',
      capabilities: [
        'Automatic background removal',
        'Professional background generation',
        'Consistent styling across products',
        'E-commerce optimized'
      ],
      gradient: 'from-green-500 to-emerald-500',
      new: true
    }
  ];

  const problemItems: ProblemItem[] = [
    {
      icon: Palette,
      title: 'Design Skills Required',
      description: 'Creating professional visuals means learning complex tools like Photoshop or hiring expensive designers. The average business spends $2,000-$5,000 monthly on design resources for basic social media and marketing visuals.',
      stat: '$2,000-$5,000 monthly design costs',
      color: 'purple'
    },
    {
      icon: Camera,
      title: 'Costly Product Photography',
      description: 'Professional product photoshoots cost $500-$2,000 per session, and you&apos;re locked into those images until your next expensive shoot. E-commerce businesses need fresh visuals constantly to stay competitive.',
      stat: '$500-$2,000 per photoshoot',
      color: 'blue'
    },
    {
      icon: Clock,
      title: 'Time-Consuming Creation Process',
      description: 'What should take minutes often takes hours—searching for stock photos, editing backgrounds, adjusting lighting. Marketers spend 6-8 hours weekly just creating basic social media visuals.',
      stat: '6-8 hours weekly per marketer',
      color: 'orange'
    },
    {
      icon: Target,
      title: 'Inconsistent Brand Visuals',
      description: 'Different designers, varying stock photos, and changing styles create a messy brand identity that confuses customers and weakens your brand recognition across platforms.',
      stat: 'Brand inconsistency across platforms',
      color: 'red'
    }
  ];

  const stats: StatItem[] = [
    { number: '68%', label: 'of marketers say visual asset creation is their biggest bottleneck' },
    { number: '$3,200', label: 'average monthly spend on design resources for SMBs' },
    { number: '7.5', label: 'hours spent weekly per marketer on visual content' }
  ];

  const industries: Industry[] = [
    {
      icon: ShoppingCart,
      name: 'E-commerce & Retail',
      description: 'Create consistent product catalogs, generate lifestyle shots, and refresh existing product images without new photoshoots.',
      useCases: [
        'Product listing images',
        'Social media product features',
        'Email marketing visuals',
        'Ad creatives'
      ],
      stat: '89% of e-commerce users save over $1,000 monthly on photography'
    },
    {
      icon: Users,
      name: 'Social Media & Marketing',
      description: 'Generate endless unique visuals for social media posts, ads, stories, and campaigns that stand out from stock photo content.',
      useCases: [
        'Social media posts',
        'Ad campaign creatives',
        'Blog post featured images',
        'Email newsletter graphics'
      ],
      stat: '73% higher engagement on AI-generated vs stock images'
    },
    {
      icon: Rocket,
      name: 'Startups & Small Business',
      description: 'Create professional-looking visual content that competes with big brands on a startup budget.',
      useCases: [
        'Website visuals',
        'Pitch deck graphics',
        'Product mockups',
        'Brand identity elements'
      ],
      stat: '94% of startups achieve professional brand visuals within first month'
    }
  ];

  const transformationTypes: TransformationType[] = [
    {
      icon: Palette,
      title: 'Style Transfer',
      description: 'Apply different artistic styles to your images—make photos look like paintings, change color schemes, or match your brand aesthetic.'
    },
    {
      icon: Wand2,
      title: 'Quality Enhancement',
      description: 'Upscale low-resolution images, improve lighting and colors, remove noise, and make old photos look professionally retouched.'
    },
    {
      icon: Settings,
      title: 'Background Replacement',
      description: 'Instantly remove and replace backgrounds while perfectly preserving subject edges—no green screen needed.'
    },
    {
      icon: Edit3,
      title: 'Object Manipulation',
      description: 'Add, remove, or replace objects within your images while maintaining realistic lighting and perspectives.'
    }
  ];

  const backgroundStyles: BackgroundStyle[] = [
    {
      name: 'E-commerce White',
      description: 'Perfect for Amazon, Shopify, and marketplace listings',
      type: 'Clean white background'
    },
    {
      name: 'Modern Gradients',
      description: 'Brand-colored gradients for social media and ads',
      type: 'Gradient background'
    },
    {
      name: 'Lifestyle Context',
      description: 'Products in realistic usage environments',
      type: 'Lifestyle setting'
    },
    {
      name: 'Creative Abstracts',
      description: 'Artistic backgrounds for premium branding',
      type: 'Creative abstract'
    }
  ];

  const getColorClass = (color: string): string => {
    switch (color) {
      case 'purple': return 'purple';
      case 'blue': return 'blue';
      case 'orange': return 'orange';
      case 'red': return 'red';
      default: return 'purple';
    }
  };

  return (
    <div className="min-h-screen" style={{ background: 'linear-gradient(135deg, #c8bcf3a8 0%, #e5c5fdd0 100%)' }}>
      
      {/* Hero Section */}
      <section className="relative overflow-hidden">
        <div className="absolute inset-0">
          <div className="absolute top-10 left-10 w-72 h-72 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse"></div>
          <div className="absolute top-40 right-10 w-96 h-96 bg-pink-300 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse delay-75"></div>
        </div>

        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
          <div className="text-center">
            <div className="inline-flex items-center space-x-2 bg-white/80 text-[#6a47ed] px-6 py-3 rounded-full text-sm font-semibold mb-8 backdrop-blur-sm border border-white/40 shadow-lg">
              <Sparkle className="w-4 h-4" />
              <span>AI-Powered Image Generation</span>
            </div>
            
            <h1 className="text-5xl md:text-7xl font-bold text-black mb-6 leading-tight">
              Create Stunning Images with AI—
              <span className="block bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] bg-clip-text text-transparent">
                No Design Skills Needed
              </span>
            </h1>
            
            <p className="text-xl md:text-2xl text-black/80 mb-8 max-w-4xl mx-auto leading-relaxed">
              Transform text into visuals, enhance existing photos, and create professional product backgrounds in seconds. 
              Save 90% on design costs and create branded visuals 10x faster.
            </p>

            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
              <button className="group relative bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] text-white px-10 py-5 rounded-2xl font-semibold text-lg hover:shadow-2xl transition-all duration-300 shadow-xl hover:scale-105 flex items-center space-x-3 overflow-hidden">
                <div className="absolute inset-0 bg-white/20 transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000"></div>
                <Rocket className="w-6 h-6 relative z-10" />
                <span className="relative z-10">Start Your Free Trial</span>
                <ArrowRight className="w-5 h-5 relative z-10 group-hover:translate-x-1 transition-transform" />
              </button>
              
              <button className="group border-2 border-black/30 text-black px-10 py-5 rounded-2xl font-semibold text-lg hover:bg-white/50 transition-all duration-300 backdrop-blur-sm hover:border-[#6a47ed]/50 flex items-center space-x-3">
                <Video className="w-6 h-6" />
                <span>Watch Demo</span>
                <Play className="w-4 h-4 fill-current" />
              </button>
            </div>

            <div className="flex items-center justify-center space-x-4 text-black/80 mb-8">
              <div className="flex items-center space-x-1">
                {[...Array(5)].map((_, i) => (
                  <Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
                ))}
              </div>
              <span className="font-medium">4.9/5 from 15,000+ businesses</span>
            </div>
          </div>
        </div>
      </section>

      {/* Problem Section */}
      <section className="py-20 bg-white/30 backdrop-blur-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold text-black mb-6">
              The Visual Content Struggle is Real—
              <span className="block bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] bg-clip-text text-transparent">
                And Costly
              </span>
            </h2>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
            {problemItems.map((item: ProblemItem, index: number) => (
              <div 
                key={index}
                className="group bg-white/80 backdrop-blur-sm rounded-3xl p-8 border border-white/20 shadow-lg hover:shadow-2xl transition-all duration-300 hover:scale-105"
              >
                <div className={`w-14 h-14 bg-${getColorClass(item.color)}-100 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300`}>
                  <item.icon className={`w-7 h-7 text-${getColorClass(item.color)}-600`} />
                </div>
                <h3 className="text-xl font-bold text-black mb-4">{item.title}</h3>
                <p className="text-black/80 mb-4 leading-relaxed">{item.description}</p>
                <div className="bg-black/5 rounded-xl p-3 border border-black/10">
                  <p className="text-sm font-semibold text-black/70">{item.stat}</p>
                </div>
              </div>
            ))}
          </div>

          {/* Stats */}
          <div className="grid md:grid-cols-3 gap-8 text-center mb-12">
            {stats.map((stat: StatItem, index: number) => (
              <div key={index} className="bg-white/80 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-purple-100">
                <div className="text-3xl font-bold text-purple-600 mb-2">{stat.number}</div>
                <div className="text-gray-600 text-sm">{stat.label}</div>
              </div>
            ))}
          </div>

          <div className="text-center">
            <div className="bg-gradient-to-r from-[#6a47ed]/10 to-[#ff4ca5]/10 rounded-3xl p-8 border border-[#6a47ed]/20 max-w-2xl mx-auto backdrop-blur-sm">
              <h3 className="text-2xl md:text-3xl font-bold text-black mb-4">
                What if you could create studio-quality visuals in seconds, for a fraction of the cost?
              </h3>
            </div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="py-20" style={{ background: 'linear-gradient(135deg, #f9f1ff 0%, #e8ddff 100%)' }}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold text-black mb-6">
              Create Any Image You Can Imagine—
              <span className="block bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] bg-clip-text text-transparent">
                In Three Powerful Ways
              </span>
            </h2>
          </div>

          <div className="grid lg:grid-cols-3 gap-8 mb-16">
            {features.map((feature: Feature, index: number) => (
              <div key={index} className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 border border-white/20 shadow-lg hover:shadow-2xl transition-all duration-300">
                <div className="flex items-start justify-between mb-6">
                  <div className={`w-14 h-14 rounded-2xl flex items-center justify-center bg-gradient-to-r ${feature.gradient}`}>
                    <feature.icon className="w-7 h-7 text-white" />
                  </div>
                  <div className="flex space-x-2">
                    {feature.popular && (
                      <span className="bg-[#ff4ca5] text-white text-xs px-2 py-1 rounded-full">Popular</span>
                    )}
                    {feature.new && (
                      <span className="bg-[#6a47ed] text-white text-xs px-2 py-1 rounded-full">New</span>
                    )}
                  </div>
                </div>
                <h3 className="text-2xl font-bold text-black mb-4">{feature.title}</h3>
                <p className="text-black/80 mb-6 leading-relaxed">{feature.description}</p>
                
                <div className="space-y-3 mb-6">
                  <div className="bg-white/60 rounded-xl p-4 border border-white/30">
                    <div className="flex items-center gap-2 text-sm text-purple-600 font-semibold mb-1">
                      <Upload className="w-4 h-4" />
                      Input:
                    </div>
                    <div className="text-black/80 text-sm">{feature.input}</div>
                  </div>
                  <div className="bg-white/60 rounded-xl p-4 border border-white/30">
                    <div className="flex items-center gap-2 text-sm text-green-600 font-semibold mb-1">
                      <Download className="w-4 h-4" />
                      Output:
                    </div>
                    <div className="text-black/80 text-sm">{feature.output}</div>
                  </div>
                </div>

                <div className="space-y-2">
                  {feature.capabilities.map((capability: string, idx: number) => (
                    <div key={idx} className="flex items-center gap-2 text-sm text-black/70">
                      <Check className="w-4 h-4 text-green-500" />
                      {capability}
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>

          <div className="text-center bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] text-white p-8 rounded-3xl shadow-xl">
            <h3 className="text-2xl font-bold mb-4">See All Three Features in Action</h3>
            <p className="text-white/90 mb-6">Watch how we create 10 marketing images in under minutes:</p>
            <button className="bg-white text-[#6a47ed] px-8 py-3 rounded-xl font-semibold hover:bg-purple-50 transition-all duration-300 flex items-center gap-2 mx-auto">
              <Play className="w-5 h-5" />
              Watch Demo Video
            </button>
          </div>
        </div>
      </section>

      {/* Text-to-Image Deep Dive */}
      <section className="py-20 bg-white/30 backdrop-blur-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-12 items-center mb-16">
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-black mb-6">
                Text-to-Image Generation:
                <span className="block bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] bg-clip-text text-transparent">
                  Create Custom Visuals from Simple Descriptions
                </span>
              </h2>
              <p className="text-xl text-black/80 mb-8 leading-relaxed">
                Describe what you want to see, and watch our AI bring it to life in seconds. 
                Perfect for social media content, blog illustrations, ad creatives, and more.
              </p>

              <div className="space-y-6">
                <div className="bg-white/80 backdrop-blur-sm rounded-2xl p-6 border border-white/20 shadow-lg">
                  <div className="flex items-center gap-2 text-sm text-purple-600 font-semibold mb-2">
                    <Upload className="w-4 h-4" />
                    Input Prompt:
                  </div>
                  <div className="text-black/80 italic">
                    &quot;A cozy bookstore with warm lighting, shelves filled with books, and a cat sleeping on a chair&quot;
                  </div>
                </div>
                <div className="bg-white/80 backdrop-blur-sm rounded-2xl p-6 border border-white/20 shadow-lg">
                  <div className="flex items-center gap-2 text-sm text-green-600 font-semibold mb-2">
                    <Download className="w-4 h-4" />
                    AI Generated Result:
                  </div>
                  <div className="text-black/80">[Cozy bookstore image]</div>
                </div>
              </div>
            </div>

            <div className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 border border-white/20 shadow-xl">
              <div className="bg-yellow-50 border border-yellow-200 rounded-2xl p-6 mb-6">
                <h4 className="font-bold text-yellow-800 mb-2 flex items-center gap-2">
                  <TrendingUp className="w-5 h-5" />
                  Real-World Success: Social Media Agency Saves 20 Hours Weekly
                </h4>
                <p className="text-yellow-700 text-sm mb-3">
                  Challenge: Social media agency needed 50+ unique images weekly for client content calendars. 
                  Was spending $3,500 monthly on stock photos and designer time.
                </p>
                <p className="text-yellow-700 text-sm mb-3">
                  Solution: Implemented PlanPost AI text-to-image generation for all client visual content.
                </p>
                <div className="space-y-2">
                  <div className="flex items-center gap-2 text-sm text-green-600">
                    <Check className="w-4 h-4" />
                    92% reduction in stock photo costs
                  </div>
                  <div className="flex items-center gap-2 text-sm text-green-600">
                    <Check className="w-4 h-4" />
                    20 hours weekly saved in design time
                  </div>
                  <div className="flex items-center gap-2 text-sm text-green-600">
                    <Check className="w-4 h-4" />
                    100% unique visuals for each client
                  </div>
                  <div className="flex items-center gap-2 text-sm text-green-600">
                    <Check className="w-4 h-4" />
                    47% higher engagement on custom AI images vs stock photos
                  </div>
                </div>
              </div>

              <button className="w-full bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] text-white py-4 rounded-xl font-semibold text-lg hover:shadow-xl transition-all duration-300 hover:scale-105 flex items-center justify-center gap-2">
                <Sparkles className="w-5 h-5" />
                Try Text-to-Image Generation Free →
              </button>
            </div>
          </div>

          {/* Advanced Capabilities */}
          <div className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 border border-white/20 shadow-lg">
            <h3 className="text-3xl font-bold text-black mb-8 text-center">Advanced Generation Capabilities</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              {[
                { icon: Palette, title: 'Style Control', desc: 'Choose from photorealistic, illustration, minimalist, vintage, or custom styles' },
                { icon: BarChart3, title: 'Platform Optimization', desc: 'Generate images perfectly sized for Instagram, Facebook, Pinterest, and more' },
                { icon: Target, title: 'Brand Consistency', desc: 'Save your brand colors, fonts, and style preferences' },
                { icon: RefreshCw, title: 'Multiple Variations', desc: 'Generate 4-8 variations of each prompt and choose your favorite' }
              ].map((item, index) => (
                <div key={index} className="text-center">
                  <div className="w-12 h-12 bg-purple-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
                    <item.icon className="w-6 h-6 text-purple-600" />
                  </div>
                  <h4 className="font-semibold text-black mb-2">{item.title}</h4>
                  <p className="text-black/70 text-sm">{item.desc}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Image Transformation Section */}
      <section className="py-20" style={{ background: 'linear-gradient(135deg, #f9f1ff 0%, #e8ddff 100%)' }}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold text-black mb-6">
              Image-to-Image Transformation:
              <span className="block bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] bg-clip-text text-transparent">
                Enhance, Restyle, and Reimagine Your Photos
              </span>
            </h2>
            <p className="text-xl text-black/80 max-w-3xl mx-auto">
              Take any existing image and transform it with AI magic. Change styles, enhance quality, 
              replace elements, or completely reimagine your visuals while maintaining the original composition.
            </p>
          </div>

          <div className="grid lg:grid-cols-2 gap-12 mb-16">
            <div className="space-y-8">
              <div className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 border border-white/20 shadow-lg">
                <div className="flex justify-between items-center mb-6">
                  <div className="flex items-center gap-2 text-sm font-semibold text-black/70">
                    <Upload className="w-4 h-4" />
                    Original Image
                  </div>
                  <ArrowRight className="w-5 h-5 text-purple-600" />
                  <div className="flex items-center gap-2 text-sm font-semibold text-black/70">
                    <Download className="w-4 h-4" />
                    Transformed with AI
                  </div>
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div className="bg-gray-100 rounded-2xl h-48 flex items-center justify-center">
                    <span className="text-gray-400">[Basic product photo with poor lighting]</span>
                  </div>
                  <div className="bg-purple-100 rounded-2xl h-48 flex items-center justify-center">
                    <span className="text-purple-600">[Professional product photo]</span>
                  </div>
                </div>
              </div>

              <div className="grid grid-cols-2 gap-6">
                {transformationTypes.map((type: TransformationType, index: number) => (
                  <div key={index} className="text-center bg-white/60 backdrop-blur-sm rounded-2xl p-6 border border-white/30 hover:bg-white/80 transition-colors duration-300">
                    <div className="w-12 h-12 bg-purple-100 rounded-2xl flex items-center justify-center mx-auto mb-3">
                      <type.icon className="w-6 h-6 text-purple-600" />
                    </div>
                    <h4 className="font-semibold text-black mb-2">{type.title}</h4>
                    <p className="text-black/70 text-sm">{type.description}</p>
                  </div>
                ))}
              </div>
            </div>

            <div className="bg-gradient-to-br from-gray-900 to-purple-900 text-white p-8 rounded-3xl shadow-xl">
              <h3 className="text-2xl font-bold mb-6 flex items-center gap-2">
                <Crown className="w-6 h-6" />
                Professional-Grade Results
              </h3>
              
              <div className="space-y-4 mb-6">
                <div className="flex justify-between items-center py-3 border-b border-gray-700">
                  <span className="flex items-center gap-2">
                    <Image className="w-4 h-4" />
                    4K Resolution
                  </span>
                  <span className="font-bold text-green-400">Maximum Output Quality</span>
                </div>
                <div className="flex justify-between items-center py-3 border-b border-gray-700">
                  <span className="flex items-center gap-2">
                    <Palette className="w-4 h-4" />
                    100+ Styles
                  </span>
                  <span className="font-bold text-green-400">Transformation Options</span>
                </div>
                <div className="flex justify-between items-center py-3 border-b border-gray-700">
                  <span className="flex items-center gap-2">
                    <Clock className="w-4 h-4" />
                    30 seconds
                  </span>
                  <span className="font-bold text-green-400">Average Processing Time</span>
                </div>
                <div className="flex justify-between items-center py-3">
                  <span className="flex items-center gap-2">
                    <Settings className="w-4 h-4" />
                    Batch Process
                  </span>
                  <span className="font-bold text-green-400">Multiple Images Simultaneously</span>
                </div>
              </div>

              <div className="bg-black/30 p-4 rounded-2xl border border-gray-700">
                <Quote className="w-6 h-6 text-purple-400 mb-2" />
                <p className="text-gray-300 italic mb-2">
                  &quot;We had a catalog of 500+ product images that looked dated and inconsistent. 
                  With PlanPost AI&apos;s image transformation, we refreshed our entire product line 
                  visuals in two days instead of two months. The quality is indistinguishable 
                  from professional photography.&quot;
                </p>
                <p className="text-white font-semibold">- Michael Chen, E-commerce Director at StyleHub</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Product Background Section */}
      <section className="py-20 bg-white/30 backdrop-blur-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold text-black mb-6">
              Product Background Generation:
              <span className="block bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] bg-clip-text text-transparent">
                Studio-Quality Photos in Seconds
              </span>
            </h2>
            <p className="text-xl text-black/80 max-w-3xl mx-auto">
              Transform basic product shots into professional e-commerce ready images. Remove backgrounds 
              automatically and generate perfect settings that make your products shine and convert.
            </p>
          </div>

          <div className="grid lg:grid-cols-2 gap-12 items-center mb-16">
            <div>
              <h3 className="text-3xl font-bold text-black mb-8">The 3-Step Professional Product Photo Process</h3>
              
              <div className="space-y-6">
                {[
                  { step: 1, title: 'Upload Your Product', desc: 'Take a quick photo of your product—any background works. Our AI handles the rest.', content: '[Product on cluttered background]' },
                  { step: 2, title: 'AI Background Removal', desc: 'Automatic, precise background removal with perfect edge detection.', content: '[Product with transparent background]' },
                  { step: 3, title: 'Generate Perfect Background', desc: 'Choose from professional settings or generate custom backgrounds.', content: '[Product on professional background]' }
                ].map((item, index) => (
                  <div key={index} className="flex gap-4">
                    <div className="flex-shrink-0 w-8 h-8 bg-purple-600 text-white rounded-full flex items-center justify-center font-bold">
                      {item.step}
                    </div>
                    <div>
                      <h4 className="font-bold text-black mb-2">{item.title}</h4>
                      <p className="text-black/70 mb-2">{item.desc}</p>
                      <div className="bg-white/60 rounded-xl h-24 flex items-center justify-center border border-white/30">
                        <span className="text-black/50">{item.content}</span>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 border border-white/20 shadow-lg">
              <h3 className="text-2xl font-bold text-black mb-6">Professional Background Styles</h3>
              
              <div className="grid grid-cols-2 gap-4 mb-8">
                {backgroundStyles.map((style: BackgroundStyle, index: number) => (
                  <div key={index} className="bg-white/60 rounded-2xl p-4 text-center border border-white/30 hover:border-purple-300 transition-colors duration-300">
                    <div className="bg-gray-100 rounded-xl h-20 mb-3 flex items-center justify-center">
                      <span className="text-gray-400 text-sm">[{style.type}]</span>
                    </div>
                    <h4 className="font-semibold text-black mb-1">{style.name}</h4>
                    <p className="text-black/70 text-xs">{style.description}</p>
                  </div>
                ))}
              </div>

              <div className="space-y-3">
                <div className="flex items-center gap-3">
                  <Check className="w-5 h-5 text-green-500" />
                  <span className="text-black/80">Platform Optimized for all marketplaces</span>
                </div>
                <div className="flex items-center gap-3">
                  <Check className="w-5 h-5 text-green-500" />
                  <span className="text-black/80">Bulk Processing for hundreds of images</span>
                </div>
                <div className="flex items-center gap-3">
                  <Check className="w-5 h-5 text-green-500" />
                  <span className="text-black/80">Brand Consistency across entire catalog</span>
                </div>
                <div className="flex items-center gap-3">
                  <Check className="w-5 h-5 text-green-500" />
                  <span className="text-black/80">Smart Shadow Generation for realism</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Industries Section */}
      <section className="py-20" style={{ background: 'linear-gradient(135deg, #f9f1ff 0%, #e8ddff 100%)' }}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold text-black mb-6">
              Trusted by Professionals
              <span className="block bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] bg-clip-text text-transparent">
                Across Industries
              </span>
            </h2>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            {industries.map((industry: Industry, index: number) => (
              <div key={index} className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 border border-white/20 shadow-lg hover:shadow-2xl transition-all duration-300">
                <div className="w-14 h-14 bg-purple-100 rounded-2xl flex items-center justify-center mb-6">
                  <industry.icon className="w-7 h-7 text-purple-600" />
                </div>
                <h3 className="text-2xl font-bold text-black mb-4">{industry.name}</h3>
                <p className="text-black/80 mb-6 leading-relaxed">{industry.description}</p>
                
                <div className="space-y-2 mb-6">
                  {industry.useCases.map((useCase: string, idx: number) => (
                    <div key={idx} className="flex items-center gap-2 text-sm text-black/70">
                      <Check className="w-4 h-4 text-green-500" />
                      {useCase}
                    </div>
                  ))}
                </div>

                <div className="bg-purple-50 p-4 rounded-2xl border border-purple-200">
                  <p className="text-purple-700 text-sm font-semibold">{industry.stat}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <section className="py-20 bg-gradient-to-br from-[#6a47ed] to-[#ff4ca5] relative overflow-hidden">
        <div className="absolute inset-0 opacity-10">
          <div className="absolute top-0 left-0 w-32 h-32 bg-white rounded-full"></div>
          <div className="absolute top-0 right-0 w-48 h-48 bg-white rounded-full"></div>
        </div>

        <div className="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
            Stop Settling for Stock Photos
            <span className="block">and Expensive Designers</span>
          </h2>
          
          <p className="text-xl text-white/90 mb-8">
            Join 15,000+ businesses creating stunning visuals with AI
          </p>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
            {[
              { title: 'For the Price of One Photoshoot', desc: 'Get unlimited custom images for months instead of a single day of photography' },
              { title: 'At the Speed of Thought', desc: 'Go from idea to finished visual in seconds, not days' },
              { title: 'With Your Brand in Mind', desc: 'Create visuals that actually look like your brand, not generic stock photos' }
            ].map((item, index) => (
              <div key={index} className="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20">
                <h3 className="text-lg font-bold text-white mb-2">{item.title}</h3>
                <p className="text-white/80 text-sm">{item.desc}</p>
              </div>
            ))}
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-2xl mx-auto mb-8">
            {[
              'Create custom images from text descriptions',
              'Transform existing photos into professional visuals',
              'Generate perfect product backgrounds automatically',
              'Save 80% on design and photography costs',
              'Scale your visual content production 10x'
            ].map((benefit: string, index: number) => (
              <div key={index} className="flex items-center gap-3 text-white">
                <Check className="w-5 h-5 text-green-300" />
                <span>{benefit}</span>
              </div>
            ))}
          </div>

          <button className="bg-white text-[#6a47ed] px-12 py-5 rounded-2xl font-semibold text-lg hover:bg-slate-100 transition-all duration-300 shadow-2xl hover:shadow-3xl hover:scale-105 mb-4">
            Start Your 14-Day Free Trial →
          </button>
          
          <p className="text-white/80 text-sm">
            No credit card required • Setup in 2 minutes • 30-day money-back guarantee
          </p>
        </div>
      </section>
    </div>
  );
};

export default AIImageGenerator;