"use client"

import { Button } from "@/components/ui/button"
import { useLanguage } from "@/contexts/language-context"
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-gradient-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">
              <svg className="w-full h-full" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
                <rect width="400" height="400" fill="none" />
                <circle
                  cx="200"
                  cy="200"
                  r="120"
                  stroke="currentColor"
                  strokeWidth="2"
                  fill="none"
                  className="text-primary/30"
                />
                <circle
                  cx="200"
                  cy="200"
                  r="80"
                  stroke="currentColor"
                  strokeWidth="2"
                  fill="none"
                  className="text-primary/50"
                />
                <g className="text-primary/40">
                  <path d="M 200 80 L 200 120" strokeWidth="3" stroke="currentColor" />
                  <path d="M 280 200 L 240 200" strokeWidth="3" stroke="currentColor" />
                  <path d="M 200 320 L 200 280" strokeWidth="3" stroke="currentColor" />
                  <path d="M 120 200 L 160 200" strokeWidth="3" stroke="currentColor" />
                </g>
                <circle cx="200" cy="200" r="12" fill="currentColor" className="text-primary" />
              </svg>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}