src/components/homepage/FeatureSection.tsx

import { Badge } from '@/components/base';
import { Cloud, FileText, Grid, MessageCircle, Server } from 'lucide-react';
import Image from 'next/image';

const features = [
  {
    number: '01',
    title: 'Chat with AI',
    description: 'Ask your questions, brainstorm, and learn from the AI running on your device to be more productive.',
    icon: MessageCircle,
  },
  {
    number: '02',
    title: 'Model Hub',
    description: 'Access and manage various AI models directly from your device.',
    icon: Grid,
  },
  {
    number: '03',
    title: 'Connect to Cloud AIs',
    description: 'Seamlessly integrate with cloud-based AI services when needed.',
    icon: Cloud,
  },
  {
    number: '04',
    title: 'Local API Server',
    description: 'Run your own API server locally for complete control and privacy.',
    icon: Server,
  },
  {
    number: '05',
    title: 'Chat with your files',
    description: 'Interact with your documents and files using natural language.',
    icon: FileText,
    experimental: true,
  },
];

export function FeaturesSection() {
  return (
    <section className="container space-y-16 py-24">
      <h2 className="font-heading text-4xl md:text-5xl lg:text-6xl">Features</h2>

      <div className="grid items-start gap-8 lg:grid-cols-2">
        <div className="space-y-8">
          {features.map(feature => (
            <div key={feature.number} className="flex items-center gap-4">
              <div className="font-heading text-3xl text-muted-foreground/50">{feature.number}</div>
              <div className="space-y-2">
                <div className="flex items-center gap-2">
                  <h3 className="text-xl font-semibold">{feature.title}</h3>
                  {feature.experimental && (
                    <Badge variant="secondary" className="text-xs">
                      Experimental
                    </Badge>
                  )}
                </div>
                <p className="text-muted-foreground">{feature.description}</p>
              </div>
            </div>
          ))}
        </div>

        <Image
          src="https://jan.ai/assets/images/homepage/features01.png"
          alt="App Screenshot Feature"
          width={800}
          height={800}
        />
      </div>
    </section>
  );
}