'use client';

import type { FeaturesProps } from '@/types/component-props';

export default function Features({}: FeaturesProps) {
  const features = [
    {
      icon: '🎙️',
      title: 'Voice Recording',
      description: 'Record voice notes directly in your browser with one click',
    },
    {
      icon: '📝',
      title: 'AI Transcription',
      description: 'Automatic transcription powered by OpenAI Whisper',
    },
    {
      icon: '✨',
      title: 'Smart Summaries',
      description: 'Get AI-generated summaries of your recordings using Gemini',
    },
    {
      icon: '🚀',
      title: 'Auto App Generation',
      description: 'Say "create an app" and watch AI build it from your ideas',
    },
  ];

  return (
    <section className="py-16 bg-white">
      <div className="container mx-auto px-4">
        <h2 className="text-3xl font-bold text-center text-gray-900 mb-12">
          Everything You Need
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          {features.map((feature, index) => (
            <div key={index} className="text-center">
              <div className="text-5xl mb-4">{feature.icon}</div>
              <h3 className="text-xl font-semibold text-gray-900 mb-2">
                {feature.title}
              </h3>
              <p className="text-gray-600">
                {feature.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}