Bioluminescent Grid

import { BioluminescentGrid, BioluminescentGridItem } from '@/components/ui/bioluminescent-grid';
import { BrainCircuit, DatabaseZap, Share2, ShieldCheck, Zap, Code } from 'lucide-react';

export default function DemoOne() {
  const features = [
    {
      Icon: BrainCircuit,
      title: "Neural Synapse Mapping",
      description: "Visualize and interact with complex data relationships in real-time, just like a neural network.",
      className: "col-span-2 row-span-2",
    },
    {
      Icon: DatabaseZap,
      title: "Bio-Data Streams",
      description: "Connect to live data feeds with our high-throughput, low-latency streaming infrastructure.",
      className: "",
    },
    {
      Icon: ShieldCheck,
      title: "Quantum Encryption",
      description: "Secure your information with next-generation, quantum-resistant security protocols.",
      className: "",
    },
    {
      Icon: Share2,
      title: "Decentralized Network",
      description: "Built on a peer-to-peer network, ensuring uptime and data sovereignty.",
      className: "row-span-2",
    },
    {
      Icon: Code,
      title: "Evolvable API",
      description: "An API that learns and adapts to your query patterns, optimizing performance automatically.",
      className: "col-span-2",
    },
    {
      Icon: Zap,
      title: "Instant Scaling",
      description: "Our infrastructure scales from zero to infinity in milliseconds, handling any workload.",
      className: "",
    },
  ];

  return (
    <div className="main-container">
      <div className="content-wrapper">
        <h1 className="main-title">Bioluminescent Grid</h1>
        <p className="main-subtitle">A reactive grid with a futuristic, organic glow effect.</p>
        
        <BioluminescentGrid className="mt-12">
          {features.map((feature, i) => (
            <BioluminescentGridItem key={i} className={feature.className}>
              <feature.Icon className="icon" />
              <h2 className="item-title">{feature.title}</h2>
              <p className="item-description">{feature.description}</p>
            </BioluminescentGridItem>
          ))}
        </BioluminescentGrid>
      </div>
    </div>
  );
}