'use client';

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

export default function Hero({ onGetStarted }: HeroProps) {
  return (
    <section className="bg-gradient-to-b from-blue-50 to-white py-20">
      <div className="container mx-auto px-4 text-center">
        <h1 className="text-5xl font-bold text-gray-900 mb-6">
          Turn Your Voice Notes into Apps
        </h1>
        <p className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
          Record your ideas, get AI-powered summaries and transcripts,
          then automatically generate working applications from your voice notes.
        </p>
        <button
          onClick={() => onGetStarted?.()}
          className="bg-blue-500 text-white px-8 py-4 rounded-lg text-lg font-semibold hover:bg-blue-600 transition-colors"
        >
          Get Started Free
        </button>
      </div>
    </section>
  );
}