import styles from './hero-section.module.css'
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { ArrowRight } from "lucide-react"
import Image from "next/image"
import { Animate } from "@/components/animations/animate"
import Link from "next/link"

import { Anton } from "next/font/google"

const anton = Anton({weight: "400", subsets: ["latin"], });

export function HeroSection() {
  return (
    <section className="relative w-full py-12 md:py-24 lg:py-32 xl:py-48 overflow-hidden from-primary-950 via-primary-800 to-primary-900 dark:from-primary-950 dark:via-primary-900 dark:to-primary-950">
      <div className="absolute inset-0 w-full h-full bg-gradient-to-br brightness-50">
      </div>
      <div className={`absolute inset-0 w-full h-full ${styles.gradient}`}>
      </div>
      <div className="absolute inset-0 w-full h-full">
        <div className="absolute inset-0 bg-[url('/grid.svg')] bg-center [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))]"></div>
      </div>
      <div className="container px-4 md:px-6 mx-auto relative z-10">
        <div className="grid gap-6 lg:grid-cols-[1fr_400px] lg:gap-12 xl:grid-cols-[1fr_600px]">
          <div className="flex flex-col justify-center space-y-4">
            <div className="space-y-2">
              <Animate animation="fadeInUp" delay={0.2}>
                <h1 className={`text-3xl font-bold sm:text-5xl xl:text-6xl/none text-white [text-transform:uppercase] ${anton.className}`}>
                  Where <em>Innovation</em> Meets <em>Impact</em>
                </h1>
              </Animate>
              <Animate animation="fadeInUp" delay={0.3}>
                <p className="max-w-[600px] text-gray-200 md:text-xl">
                  Forniamo servizi che ti permetteranno di concentrarti sul tuo business:
                  al software ci pensiamo noi.
                </p>
              </Animate>
            </div>
            <Animate animation="fadeInUp" delay={0.4}>
              <div className="flex flex-col gap-2 min-[400px]:flex-row">
                <Button asChild size="lg" className="bg-white text-primary-900 hover:bg-gray-200">
                  <Link href="/#contact">Contattaci <ArrowRight className="ml-2 h-4 w-4" /></Link>
                </Button>
                <Button asChild size="lg" variant="outline" className="border-white text-black dark:text-white hover:bg-white/60">
                  <Link href="/#projects">Sfoglia i nostri progetti</Link>
                </Button>
              </div>
            </Animate>
          </div>
          <Animate animation="fadeInRight" delay={0.5}>
            <div className="flex items-center justify-center">
              <div className="relative w-full h-[350px] md:h-[400px] lg:h-[500px]">
                <Image
                  src="/hero.png?height=500&width=500"
                  alt="Immagine di copertina"
                  fill
                  className="object-contain"
                  priority
                />
              </div>
            </div>
          </Animate>
        </div>
      </div>
    </section>
  )
}