import React from 'react';
import { Card } from '@/components/ui/card';

const WhatCanHelpContent = () => {
  const features = [
    {
      title: "Your MCPs",
      description: "Manage and deploy your MCP servers",
      icon: "🚀",
      items: ["Create new servers", "Monitor performance", "Update configurations", "View analytics"],
      gradient: "from-blue-500 to-cyan-600"
    },
    {
      title: "Earn by Sharing",
      description: "Monetize your AI creations",
      icon: "💰",
      items: ["Set pricing models", "Track earnings", "Revenue optimization", "Payment processing"],
      gradient: "from-green-500 to-emerald-600"
    },
    {
      title: "Get on the Cloud",
      description: "Scale your MCPs globally",
      icon: "☁️",
      items: ["Auto-scaling", "Global CDN", "99.9% uptime", "Load balancing"],
      gradient: "from-purple-500 to-pink-600"
    },
    {
      title: "Build without Coding",
      description: "Visual MCP builder for everyone",
      icon: "🎨",
      items: ["Drag & drop interface", "Pre-built templates", "AI assistance", "One-click deploy"],
      gradient: "from-orange-500 to-red-600"
    }
  ];

  return (
    <div className="space-y-8">
      <div className="text-center">
        <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
          Platform Features
        </h2>
        <p className="text-xl text-gray-600 dark:text-gray-300">
          Everything you need to build, deploy, and monetize AI-first applications
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {features.map((feature, index) => (
          <Card 
            key={index}
            className="p-6 border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-xl bg-white/10 dark:bg-black/10 hover:bg-white/20 dark:hover:bg-black/20 transition-all duration-300 hover:scale-105"
          >
            <div className="flex items-center mb-4">
              <div className={`w-12 h-12 bg-gradient-to-br ${feature.gradient} rounded-lg flex items-center justify-center mr-4 text-xl`}>
                {feature.icon}
              </div>
              <div>
                <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
                  {feature.title}
                </h3>
                <p className="text-sm text-gray-600 dark:text-gray-300">
                  {feature.description}
                </p>
              </div>
            </div>
            <div className="space-y-2">
              {feature.items.map((item, itemIndex) => (
                <div key={itemIndex} className="flex items-center space-x-2">
                  <div className="w-1.5 h-1.5 bg-blue-500 rounded-full"></div>
                  <span className="text-sm text-gray-600 dark:text-gray-300">{item}</span>
                </div>
              ))}
            </div>
          </Card>
        ))}
      </div>

      <Card className="p-8 border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-xl bg-gradient-to-br from-indigo-50/50 to-blue-50/50 dark:from-indigo-900/20 dark:to-blue-900/20">
        <div className="text-center">
          <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
            AI-First Development
          </h3>
          <p className="text-lg text-gray-600 dark:text-gray-300 mb-6">
            Experience the future of application development where AI chatbots are the primary interface
          </p>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="text-center">
              <div className="text-3xl mb-2">⚡</div>
              <h4 className="font-semibold text-gray-900 dark:text-white">Lightning Fast</h4>
              <p className="text-sm text-gray-600 dark:text-gray-300">Deploy in seconds, not hours</p>
            </div>
            <div className="text-center">
              <div className="text-3xl mb-2">🔒</div>
              <h4 className="font-semibold text-gray-900 dark:text-white">Secure by Default</h4>
              <p className="text-sm text-gray-600 dark:text-gray-300">Enterprise-grade security</p>
            </div>
            <div className="text-center">
              <div className="text-3xl mb-2">📈</div>
              <h4 className="font-semibold text-gray-900 dark:text-white">Auto-Scale</h4>
              <p className="text-sm text-gray-600 dark:text-gray-300">Handles millions of requests</p>
            </div>
          </div>
        </div>
      </Card>
    </div>
  );
};

export default WhatCanHelpContent;