"use client"

import { Button } from "@/components/ui/button"
import { useLanguage } from "@/contexts/language-context"
import Image from "next/image"
import Link from "next/link"

export default function Hero() {
  const { t } = useLanguage()

  return (
    <section className="py-20 md:py-32 px-4 sm:px-6 lg:px-8">
      <div className="max-w-7xl mx-auto">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 items-center">
          <div className="space-y-6">
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-foreground leading-tight">{t.hero.title}</h1>
            <p className="text-lg text-muted-foreground">{t.hero.description}</p>
            <div className="flex flex-col sm:flex-row gap-4">
              <Link href="https://demo.dwatt.uz/">
                <Button size="lg" className="bg-primary hover:bg-primary/90">
                  {t.hero.demo}
                </Button>
              </Link>
              <a href="#contact">
              <Button
                size="lg"
                variant="outline"
                className="border-primary text-primary hover:bg-primary/5 bg-transparent"
              >
                {t.hero.contact}
              </Button>
              </a>
            </div>
          </div>

          <div className="relative h-64 md:h-96 bg-linear-to-br from-primary/10 via-primary/5 to-background rounded-2xl border border-border flex items-center justify-center">
            <div className="absolute inset-0 overflow-hidden rounded-2xl">
              <Image src="/hero_image.jpg" alt="hero image" width={500} height={500} className="w-full h-full"/>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
