components/TechnicalDemo.jsx

import { useState } from 'react';
import { Play, Database, Search, Layers } from 'lucide-react';

export default function TechnicalDemo() {
  const [activeTab, setActiveTab] = useState('overview');
  
  const codeExamples = {
    python: `import chromadb

# Initialize client
client = chromadb.Client()

# Create collection
collection = client.create_collection("documents")

# Add documents with embeddings
collection.add(
    documents=["doc1", "doc2", "doc3"],
    embeddings=[[1.1, 2.3], [4.5, 6.9], [7.1, 8.2]],
    ids=["id1", "id2", "id3"]
)

# Search
results = collection.query(
    query_embeddings=[[1.1, 2.3]],
    n_results=2
)`,
    javascript: `const { ChromaClient } = require('chromadb');

// Initialize client
const client = new ChromaClient();

// Create collection
const collection = await client.createCollection("documents");

// Add documents
await collection.add({
  ids: ["id1", "id2", "id3"],
  embeddings: [[1.1, 2.3], [4.5, 6.9], [7.1, 8.2]],
  documents: ["doc1", "doc2", "doc3"]
});

// Search
const results = await collection.query({
  queryEmbeddings: [[1.1, 2.3]],
  nResults: 2
});`
  };

  return (
    <section id="demo" className="py-20 bg-gray-50">
      <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">
            See Chroma in Action
          </h2>
          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
            Experience the simplicity and power of Chroma vector database through our interactive demo
          </p>
        </div>
        <div className="bg-white rounded-lg shadow-lg overflow-hidden">
          <div className="border-b border-gray-200">
            <nav className="flex space-x-8 px-8">
              {['overview', 'code', 'performance'].map((tab) => (
                <button
                  key={tab}
                  onClick={() => setActiveTab(tab)}
                  className={`py-4 px-1 border-b-2 font-medium text-sm capitalize ${
                    activeTab === tab
                      ? 'border-primary-600 text-primary-600'
                      : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                  }`}
                >
                  {tab}
                </button>
              ))}
            </nav>
          </div>
          <div className="p-8">
            {activeTab === 'overview' && (
              <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div className="text-center">
                  <Database className="w-16 h-16 text-primary-600 mx-auto mb-4" />
                  <h3 className="text-lg font-semibold mb-2">Easy Setup</h3>
                  <p className="text-gray-600">Get started in minutes with simple API</p>
                </div>
                <div className="text-center">
                  <Search className="w-16 h-16 text-primary-600 mx-auto mb-4" />
                  <h3 className="text-lg font-semibold mb-2">Fast Search</h3>
                  <p className="text-gray-600">Sub-100ms query latency at scale</p>
                </div>
                <div className="text-center">
                  <Layers className="w-16 h-16 text-primary-600 mx-auto mb-4" />
                  <h3 className="text-lg font-semibold mb-2">Multi-modal</h3>
                  <p className="text-gray-600">Support for text, images, and more</p>
                </div>
              </div>
            )}
            {activeTab === 'code' && (
              <div className="space-y-6">
                <div className="flex space-x-4 mb-4">
                  <button className="px-4 py-2 bg-primary-600 text-white rounded-lg">Python</button>
                  <button className="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg">JavaScript</button>
                </div>
                <pre className="bg-gray-900 text-gray-100 p-6 rounded-lg overflow-x-auto">
                  <code>{codeExamples.python}</code>
                </pre>
              </div>
            )}
            {activeTab === 'performance' && (
              <div className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                  <div>
                    <h3 className="text-lg font-semibold mb-4">Query Performance</h3>
                    <div className="space-y-3">
                      <div className="flex justify-between items-center">
                        <span className="text-gray-600">1M vectors</span>
                        <span className="font-semibold text-green-600">&lt; 50ms</span>
                      </div>
                      <div className="flex justify-between items-center">
                        <span className="text-gray-600">10M vectors</span>
                        <span className="font-semibold text-green-600">&lt; 100ms</span>
                      </div>
                      <div className="flex justify-between items-center">
                        <span className="text-gray-600">100M vectors</span>
                        <span className="font-semibold text-green-600">&lt; 200ms</span>
                      </div>
                    </div>
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold mb-4">Scalability</h3>
                    <div className="space-y-3">
                      <div className="flex justify-between items-center">
                        <span className="text-gray-600">Horizontal scaling</span>
                        <span className="font-semibold text-primary-600">✓</span>
                      </div>
                      <div className="flex justify-between items-center">
                        <span className="text-gray-600">Auto-sharding</span>
                        <span className="font-semibold text-primary-600">✓</span>
                      </div>
                      <div className="flex justify-between items-center">
                        <span className="text-gray-600">Replication</span>
                        <span className="font-semibold text-primary-600">✓</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
        <div className="mt-8 text-center">
          <button className="bg-primary-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-primary-700 transition-colors inline-flex items-center gap-2">
            <Play className="w-5 h-5" />
            Start Free Trial
          </button>
        </div>
      </div>
    </section>
  );
}