import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Bot, MessageSquare, Brain, ArrowRight } from 'lucide-react'
import ContactForm from "@/components/contact-form"
import ProductCard from "@/components/product-card"
import DotWaves from "@/components/dot-waves"
import Logo from "@/components/logo"

export default function Home() {
  return (
    <div className="min-h-screen bg-black text-white">
      {/* Header */}
      <header className="border-b border-zinc-800">
        <div className="container mx-auto px-4 py-4 flex items-center justify-between">
          <Logo />
          <nav className="hidden md:flex items-center gap-6">
            <Link href="#about" className="text-zinc-400 hover:text-white transition-colors">
              О компании
            </Link>
            <Link href="#products" className="text-zinc-400 hover:text-white transition-colors">
              Продукты
            </Link>
            <Link href="#contact" className="text-zinc-400 hover:text-white transition-colors">
              Контакты
            </Link>
          </nav>
        </div>
      </header>

      {/* Hero Section */}
      <section className="relative container mx-auto px-4 py-24 flex flex-col items-center text-center overflow-hidden">
        <DotWaves />
        <h1 className="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-white to-[#4AFF8F] bg-clip-text text-transparent relative">
          Будущее AI уже здесь
        </h1>
        <p className="text-xl text-zinc-400 max-w-2xl mb-8 relative">
          AiSaleForce предлагает передовые нейросетевые решения для оптимизации бизнес-процессов и повышения эффективности вашей компании
        </p>
        <Button 
          asChild
          className="bg-[#4AFF8F] text-black hover:bg-[#4AFF8F]/90 px-8 py-6 text-lg relative"
        >
          <Link href="#contact">
            Начать сотрудничество
          </Link>
        </Button>
      </section>

      {/* About Section */}
      <section id="about" className="bg-zinc-900/50 py-24">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold mb-12 text-center">О компании</h2>
          <div className="grid md:grid-cols-3 gap-8">
            <Card className="bg-black/50 border-zinc-800 transition-all duration-300 hover:scale-105 hover:border-[#4AFF8F]/50 hover:shadow-[0_0_30px_rgba(74,255,143,0.15)]">
              <CardContent className="p-6">
                <h3 className="text-xl font-bold mb-4 text-[#4AFF8F]">Миссия</h3>
                <p className="text-zinc-400">
                  Делаем искусственный интеллект доступным и эффективным инструментом для бизнеса любого масштаба
                </p>
              </CardContent>
            </Card>
            <Card className="bg-black/50 border-zinc-800 transition-all duration-300 hover:scale-105 hover:border-[#4AFF8F]/50 hover:shadow-[0_0_30px_rgba(74,255,143,0.15)]">
              <CardContent className="p-6">
                <h3 className="text-xl font-bold mb-4 text-[#4AFF8F]">Ценности</h3>
                <p className="text-zinc-400">
                  Инновации, качество и надежность в каждом нашем решении
                </p>
              </CardContent>
            </Card>
            <Card className="bg-black/50 border-zinc-800 transition-all duration-300 hover:scale-105 hover:border-[#4AFF8F]/50 hover:shadow-[0_0_30px_rgba(74,255,143,0.15)]">
              <CardContent className="p-6">
                <h3 className="text-xl font-bold mb-4 text-[#4AFF8F]">Преимущества</h3>
                <p className="text-zinc-400">
                  Современные технологии и индивидуальный подход к каждому клиенту
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Products Section */}
      <section id="products" className="py-24">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold mb-12 text-center">Наши продукты</h2>
          <div className="grid md:grid-cols-2 gap-8 mb-12">
            <ProductCard
              title="Альтрон"
              description="Полноценный специалист технической поддержки на основе нейросетей"
              icon={Bot}
            />
            <ProductCard
              title="Карманный секретарь"
              description="Сервис внутренней поддержки сотрудников на основе нейросетей"
              icon={MessageSquare}
            />
          </div>
          <div className="text-center">
            <Button 
              asChild
              variant="outline" 
              className="border-[#4AFF8F] text-[#4AFF8F] hover:bg-[#4AFF8F] hover:text-black"
            >
              <Link href="https://t.me/AISalesforce" target="_blank" className="flex items-center gap-2">
                Узнай больше через ИИ ассистента в Telegram <ArrowRight className="w-4 h-4" />
              </Link>
            </Button>
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="bg-zinc-900/50 py-24">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold mb-12 text-center">Свяжитесь с нами</h2>
          <div className="max-w-xl mx-auto">
            <ContactForm />
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t border-zinc-800 py-8">
        <div className="container mx-auto px-4 text-center text-zinc-400">
          <p>© {new Date().getFullYear()} AiSaleForce. Все права защищены.</p>
        </div>
      </footer>
    </div>
  )
}