import React from 'react';
import { FiCpu, FiDatabase, FiGlobe, FiSettings } from 'react-icons/fi';

const WhatCanHelpContent = () => {
  return (
    <div className="space-y-8">
      <div className="space-y-4">
        <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
          Platform Capabilities
        </h3>
        <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
          Comprehensive tools and services to build, deploy, and monetize your AI-powered applications.
        </p>
      </div>

      <div className="grid gap-6">
        <div className="p-6 rounded-2xl border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-sm bg-white/5 dark:bg-black/5">
          <div className="flex items-center gap-3 mb-3">
            <FiCpu className="w-5 h-5 text-blue-500" />
            <h4 className="font-medium text-gray-900 dark:text-white">AI Model Integration</h4>
          </div>
          <p className="text-sm text-gray-600 dark:text-gray-300">
            Connect to any LLM provider including OpenAI, Anthropic, Google, and open-source models.
          </p>
        </div>

        <div className="p-6 rounded-2xl border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-sm bg-white/5 dark:bg-black/5">
          <div className="flex items-center gap-3 mb-3">
            <FiDatabase className="w-5 h-5 text-green-500" />
            <h4 className="font-medium text-gray-900 dark:text-white">Data Source Integration</h4>
          </div>
          <p className="text-sm text-gray-600 dark:text-gray-300">
            Connect databases, APIs, files, and real-time data streams to your AI applications.
          </p>
        </div>

        <div className="p-6 rounded-2xl border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-sm bg-white/5 dark:bg-black/5">
          <div className="flex items-center gap-3 mb-3">
            <FiGlobe className="w-5 h-5 text-purple-500" />
            <h4 className="font-medium text-gray-900 dark:text-white">Global Deployment</h4>
          </div>
          <p className="text-sm text-gray-600 dark:text-gray-300">
            Deploy your MCP servers globally with automatic scaling and load balancing.
          </p>
        </div>

        <div className="p-6 rounded-2xl border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-sm bg-white/5 dark:bg-black/5">
          <div className="flex items-center gap-3 mb-3">
            <FiSettings className="w-5 h-5 text-orange-500" />
            <h4 className="font-medium text-gray-900 dark:text-white">Development Tools</h4>
          </div>
          <p className="text-sm text-gray-600 dark:text-gray-300">
            Built-in IDE, debugging tools, monitoring, and analytics to streamline your development workflow.
          </p>
        </div>
      </div>
    </div>
  );
};

export default WhatCanHelpContent;