components/CompetitiveAdvantage.jsx

import { CheckCircle, TrendingUp, Award, Lock } from 'lucide-react';

const advantages = [
  {
    icon: TrendingUp,
    title: 'Market Leader',
    description: 'Chroma is the fastest-growing open-source vector database with 8k+ GitHub stars and active community support'
  },
  {
    icon: Award,
    title: 'Proven Expertise',
    description: 'Our team has implemented 50+ production Chroma deployments across various industries'
  },
  {
    icon: Lock,
    title: 'Enterprise Security',
    description: 'SOC 2 Type II compliant with end-to-end encryption and role-based access control'
  },
  {
    icon: CheckCircle,
    title: 'Cost Efficient',
    description: 'Reduce vector search costs by up to 70% compared to proprietary alternatives'
  }
];

export default function CompetitiveAdvantage() {
  return (
    <section id="advantages" className="py-20 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-16">
          <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">
            Why Choose Chroma & Us
          </h2>
          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
            Leverage the power of the leading open-source vector database with our specialized expertise
          </p>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
          {advantages.map((advantage, index) => (
            <div key={index} className="flex items-start space-x-4">
              <div className="flex-shrink-0">
                <div className="bg-primary-100 rounded-lg p-3">
                  <advantage.icon className="w-6 h-6 text-primary-600" />
                </div>
              </div>
              <div>
                <h3 className="text-xl font-semibold text-gray-900 mb-2">{advantage.title}</h3>
                <p className="text-gray-600">{advantage.description}</p>
              </div>
            </div>
          ))}
        </div>
        <div className="bg-primary-50 rounded-lg p-8">
          <div className="text-center mb-8">
            <h3 className="text-2xl font-bold text-gray-900 mb-4">Chroma vs. Competition</h3>
            <p className="text-gray-600">Key differentiators that make Chroma the ideal choice</p>
          </div>
          <div className="overflow-x-auto">
            <table className="w-full bg-white rounded-lg shadow-sm">
              <thead className="bg-primary-600 text-white">
                <tr>
                  <th className="px-6 py-3 text-left font-semibold">Feature</th>
                  <th className="px-6 py-3 text-center font-semibold">Chroma</th>
                  <th className="px-6 py-3 text-center font-semibold">Pinecone</th>
                  <th className="px-6 py-3 text-center font-semibold">Weaviate</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-200">
                <tr>
                  <td className="px-6 py-4 font-medium">Open Source</td>
                  <td className="px-6 py-4 text-center text-green-600 font-semibold">✓ Yes</td>
                  <td className="px-6 py-4 text-center text-red-600 font-semibold">✗ No</td>
                  <td className="px-6 py-4 text-center text-green-600 font-semibold">✓ Yes</td>
                </tr>
                <tr>
                  <td className="px-6 py-4 font-medium">Self-Hosted</td>
                  <td className="px-6 py-4 text-center text-green-600 font-semibold">✓ Yes</td>
                  <td className="px-6 py-4 text-center text-red-600 font-semibold">✗ No</td>
                  <td className="px-6 py-4 text-center text-green-600 font-semibold">✓ Yes</td>
                </tr>
                <tr>
                  <td className="px-6 py-4 font-medium">Cloud Managed</td>
                  <td className="px-6 py-4 text-center text-green-600 font-semibold">✓ Yes</td>
                  <td className="px-6 py-4 text-center text-green-600 font-semibold">✓ Yes</td>
                  <td className="px-6 py-4 text-center text-green-600 font-semibold">✓ Yes</td>
                </tr>
                <tr>
                  <td className="px-6 py-4 font-medium">Cost Efficiency</td>
                  <td className="px-6 py-4 text-center text-green-600 font-semibold">High</td>
                  <td className="px-6 py-4 text-center text-yellow-600 font-semibold">Medium</td>
                  <td className="px-6 py-4 text-center text-yellow-600 font-semibold">Medium</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </section>
  );
}