'use client'

import React, { useState } from 'react';
import { 
  Check, 
  Play, 
  Clock, 
  Zap, 
  TrendingUp, 
  Target, 
  Users, 
  BarChart3,
  ArrowRight,
  Star,
  Quote,
  Video,
  Sparkle,
  Rocket,
  ShoppingCart,
  Building,
  Smartphone,
  Brain,
  PieChart,
  LucideProps
} from 'lucide-react';

// TypeScript Interfaces
interface Feature {
  id: string;
  icon: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
  title: string;
  description: string;
  highlights: string[];
  example?: {
    input: string;
    output: string;
  };
  results?: {
    metric: string;
    value: string;
  }[];
  gradient: string;
  popular?: 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;
  icon: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
}

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

interface FAQ {
  question: string;
  answer: string;
}

const MetaAdsOptimization: React.FC = () => {
  const [activeFeature, setActiveFeature] = useState<string>('ai-creation');
  const [hoveredCard, setHoveredCard] = useState<string | null>(null);

  const features: Feature[] = [
    {
      id: 'ai-creation',
      icon: Brain,
      title: 'AI Ad Creation & Optimization',
      description: 'Generate high-converting ad copy and creatives that resonate with your target audiences. Our AI understands market nuances and consumer preferences to create ads that convert.',
      highlights: [
        'Audience Adaptation: Automatically adjust messaging for different demographics and markets',
        'Seasonal Optimization: Create campaigns for holidays, events, and seasonal trends',
        'Creative Intelligence: Generate images and videos that reflect current trends and preferences',
        'A/B Testing Automation: Test multiple variations and scale winners automatically'
      ],
      example: {
        input: 'Premium skincare, summer collection, target women 25-45',
        output: 'Multiple ad variations with compelling copy, seasonal messaging, and creatives optimized for summer skincare trends.'
      },
      gradient: 'from-purple-500 to-pink-500',
      popular: true
    },
    {
      id: 'bid-optimization',
      icon: Zap,
      title: 'Real-Time Bid & Budget Optimization',
      description: 'Stop manual bidding and let AI optimize your campaigns 24/7. Our algorithms continuously adjust bids based on performance data and market conditions.',
      highlights: [
        'Time-of-Day Optimization: Adjust bids based on when your audiences are most active',
        'Competitor Response: Automatically counter competitor ad spending patterns',
        'Performance-Based Budgeting: Allocate more budget to high-performing campaigns automatically',
        'Cross-Platform Intelligence: Optimize Facebook vs Instagram spend based on performance'
      ],
      results: [
        { metric: 'Cost Per Purchase', value: '-38%' },
        { metric: 'Conversion Rate', value: '+63%' },
        { metric: 'Optimization', value: '24/7' }
      ],
      gradient: 'from-blue-500 to-cyan-500'
    },
    {
      id: 'roas-engine',
      icon: TrendingUp,
      title: 'ROAS Maximization Engine',
      description: 'Transform your Meta Ads from cost center to profit center. Our AI prioritizes campaigns and audiences that deliver the highest return on ad spend.',
      highlights: [
        'Lifetime Value Optimization: Target customers with highest long-term value',
        'Budget Reallocation: Automatically shift spend from underperforming to high-ROAS campaigns',
        'Seasonal ROAS Forecasting: Predict and capitalize on high-ROAS periods',
        'Creative ROAS Analysis: Identify which ad creatives drive highest returns'
      ],
      gradient: 'from-green-500 to-emerald-500'
    },
    {
      id: 'analytics',
      icon: BarChart3,
      title: 'Advanced Performance Intelligence Dashboard',
      description: 'Actionable insights to outperform competitors and maximize results. Understand what works in your market and beat competitors.',
      highlights: [
        'Market Benchmarking: Compare your performance against industry averages',
        'Audience Performance Insights: Understand which demographics convert best',
        'Competitor Ad Intelligence: See what&apos;s working for competitors in your market',
        'Trend Analysis: Leverage seasonal patterns and market trends'
      ],
      gradient: 'from-orange-500 to-red-500'
    }
  ];

  const problemItems: ProblemItem[] = [
    {
      icon: PieChart,
      title: 'Wasted Ad Spend',
      description: 'Businesses waste an average of 35% of their Meta Ads budget on underperforming campaigns. With rising CPMs across all markets, every misallocated dollar hurts your bottom line.',
      stat: '35% average budget waste',
      color: 'red'
    },
    {
      icon: Target,
      title: 'Complex Audience Targeting',
      description: 'Modern consumer behavior makes targeting incredibly complex. Are you reaching the right demographics, interests, and behaviors? Or missing your ideal customer segments?',
      stat: 'Complex targeting challenges',
      color: 'blue'
    },
    {
      icon: Clock,
      title: 'Time-Consuming Management',
      description: 'Spending 15-20 hours weekly monitoring campaigns, adjusting bids, and analyzing data? That&apos;s 60-80 hours monthly that could be spent on business growth instead of manual optimization.',
      stat: '15-20 hours weekly',
      color: 'orange'
    },
    {
      icon: TrendingUp,
      title: 'ROAS Uncertainty',
      description: 'Never knowing if your next campaign will deliver 3x ROAS or drain your budget. The unpredictable nature of Meta Ads in competitive markets keeps business owners awake at night.',
      stat: 'Unpredictable ROAS',
      color: 'purple'
    }
  ];

  const stats: StatItem[] = [
    { number: '+147%', label: 'Average ROAS Improvement', icon: TrendingUp },
    { number: '-52%', label: 'Average CPA Reduction', icon: Zap },
    { number: '12+', label: 'Hours Weekly Time Saved', icon: Clock },
    { number: '4.9/5', label: 'from 1,200+ marketers', icon: Star }
  ];

  const industries: Industry[] = [
    {
      icon: ShoppingCart,
      name: 'E-commerce & Retail',
      description: 'Optimize for online shopping behaviors, conversion tracking, and product catalog ads.',
      results: [
        'Fashion and apparel brands',
        'Electronics retailers',
        'Home and living stores',
        'Beauty and cosmetics'
      ],
      average: 'Average Results: 3.2x ROAS, -45% CPA, +28% conversion rate'
    },
    {
      icon: Building,
      name: 'Hospitality & Travel',
      description: 'Target travelers and local experiences with optimized booking campaigns.',
      results: [
        'Hotels and resorts',
        'Tourism experiences',
        'Travel agencies',
        'Vacation rentals'
      ],
      average: 'Average Results: 5.1x ROAS, -38% cost per booking, +65% direct bookings'
    },
    {
      icon: Smartphone,
      name: 'SaaS & B2B',
      description: 'Generate qualified leads and demo requests with targeted B2B campaigns.',
      results: [
        'Software companies',
        'Marketing agencies',
        'Professional services',
        'Enterprise solutions'
      ],
      average: 'Average Results: 8.3x ROAS, -52% cost per lead, +41% lead quality'
    },
    {
      icon: Users,
      name: 'Agencies & Marketing Teams',
      description: 'Manage multiple client accounts with advanced optimization and reporting.',
      results: [
        'Digital marketing agencies',
        'In-house marketing teams',
        'Brand managers',
        'Multi-location businesses'
      ],
      average: 'Average Results: 40% faster campaign setup, 75% less management time'
    }
  ];

  const faqs: FAQ[] = [
    {
      question: 'How does PlanPost AI handle different markets and audiences?',
      answer: 'Our AI is trained on global consumer behavior data and adapts to different markets automatically. The system analyzes successful campaigns across various industries and demographics to optimize your ads for specific audiences. It continuously learns from your campaign performance to improve targeting and messaging.'
    },
    {
      question: 'What results can I expect in the first 30 days?',
      answer: 'Most businesses see noticeable improvement within 7-14 days, with full optimization typically achieved within 30 days. Average results include 40-80% ROAS improvement in the first month, with continued gains as the AI learns your specific audience patterns. We provide weekly performance reports so you can track progress.'
    },
    {
      question: 'How does the AI handle seasonal campaigns and trends?',
      answer: 'We have specialized algorithms for seasonal patterns and market trends. The AI automatically adjusts bidding strategies, budget allocation, and creates appropriate creatives for holidays, seasonal changes, and trending topics. It also optimizes for pre-holiday consideration phases and post-holiday sales periods.'
    },
    {
      question: 'Can I use PlanPost AI for multiple countries and languages?',
      answer: 'Absolutely. Our platform is designed for global campaigns. You can manage campaigns across different countries with country-specific optimization, budget allocation, and performance tracking. The AI understands market differences and can optimize for multiple languages and cultural contexts.'
    },
    {
      question: 'What makes your optimization different from other AI tools?',
      answer: 'While many AI tools use generic data patterns, PlanPost AI combines machine learning with expert marketing knowledge. We focus specifically on ROAS optimization rather than just engagement metrics. Our system continuously tests and learns from thousands of campaign variables to find the optimal combination for your specific goals.'
    },
    {
      question: 'How much time will I save with automated optimization?',
      answer: 'Most businesses save 10-20 hours weekly on Meta Ads management. The AI handles bid adjustments, audience optimization, creative testing, and performance monitoring 24/7. You&apos;ll only need to review high-level performance and make strategic decisions rather than manual optimizations.'
    }
  ];

  const getColorClass = (color: string): string => {
    switch (color) {
      case 'red': return 'red';
      case 'blue': return 'blue';
      case 'orange': return 'orange';
      case 'purple': return 'purple';
      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-blue-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 Meta Ads Optimization</span>
            </div>
            
            <h1 className="text-5xl md:text-7xl font-bold text-black mb-6 leading-tight">
              AI-Powered Meta Ads:
              <span className="block bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] bg-clip-text text-transparent">
                Maximize ROAS, Minimize Work
              </span>
            </h1>
            
            <p className="text-xl md:text-2xl text-black/80 mb-8 max-w-4xl mx-auto leading-relaxed">
              Automate your Facebook & Instagram ads with AI. Increase ROAS by 40-200% while saving 10+ hours weekly on manual optimization. 
              Perfect for UAE, KSA, and Middle East markets.
            </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>

            {/* Stats Grid */}
            <div className="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-3xl mx-auto">
              {stats.map((stat: StatItem, index: number) => (
                <div key={index} className="bg-white/60 backdrop-blur-sm rounded-2xl p-4 border border-white/20 shadow-sm text-center">
                  <stat.icon className="w-8 h-8 mx-auto mb-2 text-[#6a47ed]" />
                  <div className="text-2xl font-bold text-black">{stat.number}</div>
                  <div className="text-sm text-black/70">{stat.label}</div>
                </div>
              ))}
            </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 Meta Ads Struggle is Real
              <span className="block bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] bg-clip-text text-transparent">
                for Businesses Everywhere
              </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>

          {/* Global Insights */}
          <div className="grid md:grid-cols-3 gap-8 text-center mb-12">
            <div className="bg-white/80 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-purple-100">
              <div className="text-2xl font-bold text-purple-600 mb-2">42%</div>
              <div className="text-gray-600 text-sm">of businesses struggle with Meta Ads ROAS</div>
            </div>
            <div className="bg-white/80 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-purple-100">
              <div className="text-2xl font-bold text-purple-600 mb-2">$45</div>
              <div className="text-gray-600 text-sm">Average CPM in competitive markets</div>
            </div>
            <div className="bg-white/80 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-purple-100">
              <div className="text-2xl font-bold text-purple-600 mb-2">68%</div>
              <div className="text-gray-600 text-sm">Higher customer acquisition cost vs 3 years ago</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 automate your Meta Ads while increasing ROAS and reducing your workload?
              </h3>
            </div>
          </div>
        </div>
      </section>

      {/* AI Solution 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">
              AI-Powered Meta Ads Optimization
              <span className="block bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] bg-clip-text text-transparent">
                Built for Global Success
              </span>
            </h2>
            <p className="text-xl text-black/80 max-w-3xl mx-auto">
              PlanPost AI&apos;s advanced algorithms understand consumer behavior, market patterns, and conversion signals 
              to optimize your Meta Ads for maximum ROAS across all markets.
            </p>
          </div>

          <div className="grid lg:grid-cols-3 gap-8 mb-12">
            <div className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 border border-white/20 shadow-lg">
              <div className="w-12 h-12 bg-[#6a47ed]/10 rounded-2xl flex items-center justify-center mb-4">
                <Target className="w-6 h-6 text-[#6a47ed]" />
              </div>
              <h3 className="text-xl font-bold text-black mb-4">Advanced Audience Intelligence</h3>
              <p className="text-black/80">
                Our AI analyzes consumer behavior across markets to target the right audiences with relevant messaging that converts.
              </p>
            </div>

            <div className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 border border-white/20 shadow-lg">
              <div className="w-12 h-12 bg-[#ff4ca5]/10 rounded-2xl flex items-center justify-center mb-4">
                <Zap className="w-6 h-6 text-[#ff4ca5]" />
              </div>
              <h3 className="text-xl font-bold text-black mb-4">Automated Bid Optimization</h3>
              <p className="text-black/80">
                Real-time bidding adjustments based on time of day, device type, and user behavior patterns specific to your target audiences.
              </p>
            </div>

            <div className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 border border-white/20 shadow-lg">
              <div className="w-12 h-12 bg-[#6a47ed]/10 rounded-2xl flex items-center justify-center mb-4">
                <TrendingUp className="w-6 h-6 text-[#6a47ed]" />
              </div>
              <h3 className="text-xl font-bold text-black mb-4">ROAS-First Campaign Management</h3>
              <p className="text-black/80">
                Every optimization decision prioritizes your return on ad spend, automatically scaling winners and cutting losers.
              </p>
            </div>
          </div>

          {/* Success Story */}
          <div className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 border border-white/20 shadow-xl">
            <div className="flex flex-col lg:flex-row items-center justify-between gap-8">
              <div className="flex-1">
                <h3 className="text-2xl font-bold text-black mb-4">See How We Transformed an E-commerce Business</h3>
                <div className="grid grid-cols-2 gap-6 mb-6">
                  <div className="bg-red-50 rounded-2xl p-4 border border-red-200">
                    <h4 className="font-bold text-red-800 mb-2">Before PlanPost AI</h4>
                    <div className="space-y-1 text-sm">
                      <div>ROAS: <span className="font-semibold">1.8x</span></div>
                      <div>CPA: <span className="font-semibold">$45</span></div>
                      <div>Weekly Management: <span className="font-semibold">18 hours</span></div>
                      <div>Monthly Ad Spend: <span className="font-semibold">$15,000</span></div>
                    </div>
                  </div>
                  <div className="bg-green-50 rounded-2xl p-4 border border-green-200">
                    <h4 className="font-bold text-green-800 mb-2">After PlanPost AI</h4>
                    <div className="space-y-1 text-sm">
                      <div>ROAS: <span className="font-semibold">4.2x</span></div>
                      <div>CPA: <span className="font-semibold">$22</span></div>
                      <div>Weekly Management: <span className="font-semibold">2 hours</span></div>
                      <div>Monthly Ad Spend: <span className="font-semibold">$25,000</span></div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="flex-1 bg-gradient-to-r from-[#6a47ed]/10 to-[#ff4ca5]/10 rounded-2xl p-6 border border-[#6a47ed]/20">
                <Quote className="w-8 h-8 text-[#6a47ed] mb-4" />
                <p className="text-black/80 italic mb-4">
                  &quot;We were burning through our Meta Ads budget with mediocre results. PlanPost AI transformed our campaigns. 
                  We went from 1.5x to 4.8x ROAS while cutting our management time by 80%.&quot;
                </p>
                <div>
                  <p className="font-semibold text-black">Sarah Johnson</p>
                  <p className="text-black/70 text-sm">E-commerce Director</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Features 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">
              Complete Meta Ads Automation
              <span className="block bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] bg-clip-text text-transparent">
                for Modern Businesses
              </span>
            </h2>
          </div>

          {/* Feature Navigation */}
          <div className="grid grid-cols-1 lg:grid-cols-4 gap-6 mb-12">
            {features.map((feature: Feature) => (
              <button
                key={feature.id}
                onClick={() => setActiveFeature(feature.id)}
                onMouseEnter={() => setHoveredCard(feature.id)}
                onMouseLeave={() => setHoveredCard(null)}
                className={`p-6 rounded-2xl text-left transition-all duration-300 backdrop-blur-sm border-2 ${
                  activeFeature === feature.id
                    ? 'bg-white shadow-xl border-[#6a47ed] transform scale-105'
                    : hoveredCard === feature.id
                    ? 'bg-white/80 shadow-lg border-white/40 transform scale-102'
                    : 'bg-white/50 border-white/20'
                }`}
              >
                <div className="flex items-start justify-between mb-4">
                  <div className={`w-12 h-12 rounded-xl flex items-center justify-center bg-gradient-to-r ${feature.gradient}`}>
                    <feature.icon className="w-6 h-6 text-white" />
                  </div>
                  {feature.popular && (
                    <span className="bg-[#ff4ca5] text-white text-xs px-2 py-1 rounded-full">Popular</span>
                  )}
                </div>
                <h3 className="font-bold text-black mb-2 text-left">{feature.title}</h3>
                <p className="text-black/70 text-sm text-left leading-relaxed">
                  {feature.description.split('.').slice(0, 2).join('.')}.
                </p>
              </button>
            ))}
          </div>

          {/* Active Feature Detail */}
          {features.map((feature: Feature) => (
            <div
              key={feature.id}
              className={`bg-white/80 backdrop-blur-sm rounded-3xl shadow-2xl border border-white/20 p-8 transition-all duration-500 ${
                activeFeature === feature.id ? 'block animate-fadeIn' : 'hidden'
              }`}
            >
              <div className="grid grid-cols-1 xl:grid-cols-2 gap-12">
                <div>
                  <div className="flex items-center space-x-4 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>
                      <h3 className="text-3xl font-bold text-black">{feature.title}</h3>
                      <p className="text-black/70">{feature.description}</p>
                    </div>
                  </div>
                  
                  <div className="space-y-4">
                    {feature.highlights.map((highlight: string, index: number) => (
                      <div key={index} className="flex items-start space-x-4 p-4 bg-white/50 rounded-xl border border-white/30">
                        <div className="w-6 h-6 bg-[#6a47ed]/10 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
                          <Check className="w-4 h-4 text-[#6a47ed]" />
                        </div>
                        <span className="text-black/80 leading-relaxed">{highlight}</span>
                      </div>
                    ))}
                  </div>

                  {feature.results && (
                    <div className="mt-6 grid grid-cols-3 gap-4">
                      {feature.results.map((result, index) => (
                        <div key={index} className="text-center bg-white/60 rounded-xl p-3 border border-white/30">
                          <div className="text-lg font-bold text-[#6a47ed]">{result.value}</div>
                          <div className="text-xs text-black/70">{result.metric}</div>
                        </div>
                      ))}
                    </div>
                  )}
                </div>

                <div className="space-y-6">
                  {feature.example && (
                    <div className="bg-gradient-to-br from-[#6a47ed]/5 to-[#ff4ca5]/5 rounded-2xl p-6 border border-[#6a47ed]/10">
                      <h4 className="font-bold text-black mb-4 text-lg">E-commerce Example</h4>
                      <div className="space-y-4">
                        <div>
                          <div className="flex items-center space-x-2 mb-2">
                            <div className="w-3 h-3 bg-[#6a47ed] rounded-full"></div>
                            <p className="text-sm font-semibold text-black/70">Input</p>
                          </div>
                          <div className="bg-white/60 rounded-xl p-4 border border-white/30">
                            <p className="text-black/80 font-medium">{feature.example.input}</p>
                          </div>
                        </div>
                        <div>
                          <div className="flex items-center space-x-2 mb-2">
                            <div className="w-3 h-3 bg-[#ff4ca5] rounded-full"></div>
                            <p className="text-sm font-semibold text-black/70">AI Output</p>
                          </div>
                          <div className="bg-white/60 rounded-xl p-4 border border-white/30">
                            <p className="text-black/80 font-medium">{feature.example.output}</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  )}

                  {feature.id === 'roas-engine' && (
                    <div className="bg-yellow-50 border border-yellow-200 rounded-2xl p-6">
                      <h4 className="font-bold text-yellow-800 mb-2">Retail Success Story</h4>
                      <p className="text-yellow-700 text-sm mb-3">
                        Challenge: Fashion retailer struggling with 1.2x ROAS despite $50,000 monthly ad spend.
                      </p>
                      <p className="text-yellow-700 text-sm mb-3">
                        Solution: Implemented PlanPost AI ROAS optimization
                      </p>
                      <div className="space-y-1 text-sm">
                        <div className="flex items-center gap-2 text-green-600">
                          <Check className="w-4 h-4" />
                          3.8x ROAS within 45 days
                        </div>
                        <div className="flex items-center gap-2 text-green-600">
                          <Check className="w-4 h-4" />
                          22% increase in average order value
                        </div>
                        <div className="flex items-center gap-2 text-green-600">
                          <Check className="w-4 h-4" />
                          15% reduction in returns
                        </div>
                      </div>
                    </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">
              Tailored Solutions for
              <span className="block bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] bg-clip-text text-transparent">
                Every Business Model
              </span>
            </h2>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 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.results.map((result: 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" />
                      {result}
                    </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.average}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Setup Process */}
      <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">
              Simple Setup,
              <span className="block bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] bg-clip-text text-transparent">
                Maximum Results
              </span>
            </h2>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-4 gap-8 max-w-6xl mx-auto">
            {[
              {
                step: 1,
                title: 'Connect Your Meta Accounts',
                description: 'Secure integration with your Meta Business Manager. We support multiple accounts for agencies and multi-brand businesses.',
                content: '[Meta Business Manager integration]'
              },
              {
                step: 2,
                title: 'Set Your ROAS Targets',
                description: 'Define your target ROAS, budget, and campaign objectives. Our AI handles the complex optimization work.',
                content: '[ROAS target setting interface]'
              },
              {
                step: 3,
                title: 'AI Takes Over Optimization',
                description: 'Our algorithms analyze market patterns and begin optimizing your campaigns 24/7 for maximum ROAS.',
                content: '[AI optimization dashboard]'
              },
              {
                step: 4,
                title: 'Monitor & Scale Profitably',
                description: 'Watch your ROAS improve while spending 80% less time on management. Scale your budgets with confidence.',
                content: '[ROAS growth chart]'
              }
            ].map((item, index) => (
              <div key={index} className="text-center">
                <div className="w-20 h-20 bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] rounded-2xl flex items-center justify-center mx-auto mb-4 text-white font-bold text-xl">
                  {item.step}
                </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-white/60 rounded-xl h-32 flex items-center justify-center border border-white/30">
                  <span className="text-black/50 text-sm">{item.content}</span>
                </div>
              </div>
            ))}
          </div>

          <div className="text-center mt-12">
            <button className="bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] text-white px-12 py-5 rounded-2xl font-semibold text-lg hover:shadow-2xl transition-all duration-300 shadow-xl hover:scale-105">
              Start Your Free Trial →
            </button>
            <p className="text-black/70 text-sm mt-4">
              No credit card required • Setup in 15 minutes • Global support available
            </p>
          </div>
        </div>
      </section>

      {/* FAQ Section */}
      <section className="py-20" style={{ background: 'linear-gradient(135deg, #f9f1ff 0%, #e8ddff 100%)' }}>
        <div className="max-w-4xl 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">
              Frequently Asked
              <span className="block bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] bg-clip-text text-transparent">
                Questions
              </span>
            </h2>
          </div>

          <div className="space-y-6">
            {faqs.map((faq: FAQ, index: number) => (
              <div key={index} className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 border border-white/20 shadow-lg">
                <h3 className="text-lg font-bold text-black mb-3">{faq.question}</h3>
                <p className="text-black/80 leading-relaxed">{faq.answer}</p>
              </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">
            Join 5,000+ Businesses Already
            <span className="block">Maximizing Their Meta Ads ROAS</span>
          </h2>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
            {[
              'Proven Global Results',
              'Significant ROAS Improvement',
              'Time & Cost Savings'
            ].map((benefit: string, index: number) => (
              <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">{benefit}</h3>
                <p className="text-white/80 text-sm">
                  {index === 0 && 'Optimized for businesses across all markets and industries'}
                  {index === 1 && 'Average 147% ROAS increase across our client base'}
                  {index === 2 && 'Save 10-20 hours weekly while reducing your customer acquisition cost'}
                </p>
              </div>
            ))}
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-2xl mx-auto mb-8">
            {[
              'Increase ROAS by 40-200%',
              'Reduce CPA by 30-60%',
              'Save 10+ hours weekly on ad management',
              'Scale your budgets with confidence',
              'Advanced audience and market optimization'
            ].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 15 minutes • Global support • 30-day money-back guarantee
          </p>
        </div>
      </section>
    </div>
  );
};

export default MetaAdsOptimization;