'use client'

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

export default function Home() {
  const t = useTranslations('home')
  const tPricing = useTranslations('pricing')
  
  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 Section */}
      <section id="pricing" className="py-24">
        <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">
              {tPricing('title')}
            </h2>
            <p className="text-xl text-muted-foreground">
              Choose the plan that fits your needs
            </p>
          </div>
          
          <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
            <div className="bg-card p-8 rounded-lg shadow-sm border">
              <div className="text-center mb-6">
                <h3 className="text-2xl font-bold text-card-foreground mb-2">{tPricing('free.title')}</h3>
                <div className="text-4xl font-bold text-card-foreground mb-2">{tPricing('free.price')}</div>
                <p className="text-muted-foreground">Perfect for getting started</p>
              </div>
              <ul className="space-y-3 mb-8">
                <li className="flex items-center">
                  <Check className="h-5 w-5 text-green-500 mr-3" />
                  <span className="text-card-foreground">20 Prompt Limit</span>
                </li>
                <li className="flex items-center">
                  <Check className="h-5 w-5 text-green-500 mr-3" />
                  <span className="text-card-foreground">3 Versions per Prompt</span>
                </li>
                <li className="flex items-center">
                  <Check className="h-5 w-5 text-green-500 mr-3" />
                  <span className="text-card-foreground">$5 AI Credit Monthly</span>
                </li>
              </ul>
              <Button className="w-full" onClick={() => window.location.href = '/signup'}>
                Get Started Free
              </Button>
            </div>
            
            <div className="bg-primary p-8 rounded-lg shadow-sm text-primary-foreground relative">
              <div className="absolute top-4 right-4 bg-primary-foreground text-primary px-3 py-1 rounded-full text-xs font-semibold">
                Popular
              </div>
              <div className="text-center mb-6">
                <h3 className="text-2xl font-bold mb-2">{tPricing('pro.title')}</h3>
                <div className="text-4xl font-bold mb-2">{tPricing('pro.price')}</div>
                <p className="text-primary-foreground/80">per month</p>
              </div>
              <ul className="space-y-3 mb-8">
                <li className="flex items-center">
                  <Check className="h-5 w-5 text-primary-foreground/80 mr-3" />
                  <span>500 Prompt Limit</span>
                </li>
                <li className="flex items-center">
                  <Check className="h-5 w-5 text-primary-foreground/80 mr-3" />
                  <span>10 Versions per Prompt</span>
                </li>
                <li className="flex items-center">
                  <Check className="h-5 w-5 text-primary-foreground/80 mr-3" />
                  <span>$20 AI Credit Monthly</span>
                </li>
                <li className="flex items-center">
                  <Check className="h-5 w-5 text-primary-foreground/80 mr-3" />
                  <span>Priority Support</span>
                </li>
              </ul>
              <Button variant="outline" className="w-full bg-primary-foreground text-primary hover:bg-primary-foreground/90" onClick={() => window.location.href = '/signup'}>
                Start Pro Trial
              </Button>
            </div>
          </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="flex items-center mb-4 md:mb-0">
              <Zap className="h-8 w-8 text-primary" />
              <span className="ml-2 text-xl font-bold text-foreground">Prmbr</span>
            </div>
            <div className="text-muted-foreground text-sm">
              © 2024 Prmbr. All rights reserved.
            </div>
          </div>
        </div>
      </footer>
    </div>
  )
}