"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Sparkles, Wand2, Palette, Zap } from "lucide-react"

export function Hero() {
  return (
    <section className="container mx-auto px-4 py-16 text-center">
      <div className="mb-8">
        <div className="flex justify-center mb-4">
          <div className="relative">
            <Sparkles className="h-16 w-16 bg-gradient-to-r from-blue-600 to-purple-600 text-white animate-pulse" />
            <div className="absolute -top-2 -right-2 h-8 w-8 bg-purple-500 rounded-full animate-pulse"></div>
            <div className="absolute -bottom-2 -left-2 h-6 w-6 bg-blue-500 rounded-full animate-pulse"></div>
          </div>
        </div>
        <h1 className="text-4xl md:text-6xl font-bold mb-4">
          Transform Your Ideas Into
          <br />
          <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
            Visual Stories
          </span>
        </h1>
        <p className="text-xl text-gray-600 max-w-2xl mx-auto mb-8">
          Create stunning image series with consistent characters and narrative. 
          Powered by AI and designed for storytellers.
        </p>
        <div className="flex gap-4 justify-center flex-wrap">
          <Button size="lg" className="bg-blue-600 text-white hover:bg-blue-700">
            <Wand2 className="mr-2 h-4 w-4" />
            Start Creating
          </Button>
          <Button variant="outline" size="lg">
            View Examples
          </Button>
        </div>
      </div>

      <div className="grid md:grid-cols-3 gap-6 mt-16">
        <Card className="transition-transform hover:scale-105 hover:shadow-lg">
          <CardHeader>
            <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
              <Palette className="h-6 w-6 text-blue-600" />
            </div>
            <CardTitle>AI-Powered Creation</CardTitle>
            <CardDescription>
              Describe your vision and let AI transform it into beautiful images 
              with consistent characters and style.
            </CardDescription>
          </CardHeader>
        </Card>

        <Card className="transition-transform hover:scale-105 hover:shadow-lg">
          <CardHeader>
            <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
              <Sparkles className="h-6 w-6 text-purple-600" />
            </div>
            <CardTitle>Story Series</CardTitle>
            <CardDescription>
              Create up to 30 images in a single series with automatic narrative 
              generation and character consistency.
            </CardDescription>
          </CardHeader>
        </Card>

        <Card className="transition-transform hover:scale-105 hover:shadow-lg">
          <CardHeader>
            <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
              <Zap className="h-6 w-6 text-blue-600" />
            </div>
            <CardTitle>Universal Compatibility</CardTitle>
            <CardDescription>
              Export prompts in Jason language format for any image generation 
              service including NanoBanana and more.
            </CardDescription>
          </CardHeader>
        </Card>
      </div>
    </section>
  )
}