'use client'

import { useTranslations } from 'next-intl'
import { Header } from '@/components/layout/Header'
import { Logo } from '@/components/ui/logo'
import { Button } from '@/components/ui/button'
import { Zap, Target, Layers, BarChart3 } from 'lucide-react'

export default function Home() {
  const t = useTranslations('home')
  
  return (
    <div className="min-h-screen">
      <Header />
      
      {/* Hero Section */}
      <section className="bg-gradient-to-b from-muted/50 to-background">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-20 pb-24">
          <div className="text-center">
            <h1 className="text-4xl md:text-6xl font-bold text-foreground mb-6">
              {t('hero.title')}
            </h1>
            <p className="text-xl text-muted-foreground mb-8 max-w-3xl mx-auto">
              {t('hero.subtitle')}
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button size="lg" onClick={() => window.location.href = '/studio'}>
                {t('hero.getStarted')}
              </Button>
              <Button variant="outline" size="lg">
                {t('hero.learnMore')}
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section id="features" className="py-24 bg-muted/30">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl font-bold text-foreground mb-4">
              {t('features.title')}
            </h2>
            <p className="text-xl text-muted-foreground">
              Professional tools for prompt engineering and management
            </p>
          </div>
          
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            <div className="bg-card p-6 rounded-lg shadow-sm border">
              <Target className="h-12 w-12 text-primary mb-4" />
              <h3 className="text-lg font-semibold text-card-foreground mb-2">
                {t('features.promptManager.title')}
              </h3>
              <p className="text-muted-foreground">
                {t('features.promptManager.description')}
              </p>
            </div>
            
            <div className="bg-card p-6 rounded-lg shadow-sm border">
              <Layers className="h-12 w-12 text-primary mb-4" />
              <h3 className="text-lg font-semibold text-card-foreground mb-2">
                {t('features.versionControl.title')}
              </h3>
              <p className="text-muted-foreground">
                {t('features.versionControl.description')}
              </p>
            </div>
            
            <div className="bg-card p-6 rounded-lg shadow-sm border">
              <BarChart3 className="h-12 w-12 text-primary mb-4" />
              <h3 className="text-lg font-semibold text-card-foreground mb-2">
                {t('features.testing.title')}
              </h3>
              <p className="text-muted-foreground">
                {t('features.testing.description')}
              </p>
            </div>
            
            <div className="bg-card p-6 rounded-lg shadow-sm border">
              <Zap className="h-12 w-12 text-primary mb-4" />
              <h3 className="text-lg font-semibold text-card-foreground mb-2">
                Team Collaboration
              </h3>
              <p className="text-muted-foreground">
                Share prompts, collaborate with team members, and maintain quality standards.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Pricing Overview Section */}
      <section className="py-24 bg-muted/30">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-foreground mb-4">
              Simple, Transparent Pricing
            </h2>
            <p className="text-xl text-muted-foreground mb-8">
              Start free, upgrade when you need more
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-6 max-w-2xl mx-auto mb-12">
            <div className="bg-card p-6 rounded-lg border text-center">
              <h3 className="text-xl font-semibold mb-2">Free</h3>
              <div className="text-3xl font-bold mb-2">$0</div>
              <p className="text-muted-foreground text-sm mb-4">Perfect for getting started</p>
              <ul className="text-sm space-y-1 mb-4">
                <li>500 Prompts</li>
                <li>3 Versions per Prompt</li>
              </ul>
            </div>

            <div className="bg-primary text-primary-foreground p-6 rounded-lg text-center relative">
              <div className="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-orange-500 text-white px-3 py-1 rounded-full text-xs font-semibold">
                Popular
              </div>
              <h3 className="text-xl font-semibold mb-2">Pro</h3>
              <div className="text-3xl font-bold mb-2">$19.9</div>
              <p className="text-primary-foreground/80 text-sm mb-4">per month</p>
              <ul className="text-sm space-y-1 mb-4">
                <li>5000 Prompts</li>
                <li>10 Versions per Prompt</li>
                <li>Priority Support</li>
              </ul>
            </div>
          </div>

          <div className="text-center">
            <Button
              size="lg"
              onClick={() => window.location.href = '/pricing'}
              className="mr-4"
            >
              View All Plans
            </Button>
            <Button
              variant="outline"
              size="lg"
              onClick={() => window.location.href = '/signup'}
            >
              Get Started Free
            </Button>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col md:flex-row justify-between items-center">
            <div className="mb-4 md:mb-0">
              <Logo size={32} showText={true} />
            </div>
            <div className="text-muted-foreground text-sm">
              © 2024 Prmbr. All rights reserved.
            </div>
          </div>
        </div>
      </footer>
    </div>
  )
}