"use client"

import { useEffect, useState } from "react"
import { ArrowRight } from "lucide-react"
import { useLanguage } from "@/context/language-context"

export default function Hero() {
  const [isLoaded, setIsLoaded] = useState(false)
  const { t } = useLanguage()

  useEffect(() => {
    setIsLoaded(true)
  }, [])

  const scrollToSection = (id: string) => {
    const element = document.getElementById(id)
    element?.scrollIntoView({ behavior: "smooth" })
  }

  return (
    <section className="relative min-h-screen flex items-center justify-center pt-16 overflow-hidden bg-gradient-to-br from-background via-background to-primary/5">
      <div className="absolute inset-0 overflow-hidden">
        <div className="absolute top-10 left-10 w-32 h-16 bg-white/10 rounded-full blur-3xl animate-cloud-1" />
        <div className="absolute top-32 right-20 w-40 h-20 bg-primary/5 rounded-full blur-3xl animate-cloud-2" />
        <div className="absolute bottom-20 left-1/4 w-36 h-18 bg-white/5 rounded-full blur-3xl animate-cloud-3" />
        <div className="absolute top-1/2 right-10 w-44 h-22 bg-primary/10 rounded-full blur-3xl animate-cloud-4" />
      </div>

      <div className="absolute inset-0 bg-gradient-to-t from-background/80 to-transparent" />

      <div className="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <div
          className={`mb-8 transition-all duration-1000 ${
            isLoaded ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
          }`}
        >
          <h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold mb-4 text-balance">
            Hi, I'm <span className="text-primary">Febry Triyadi</span>
          </h1>
          <p className="text-xl sm:text-2xl text-muted-foreground mb-6 text-balance">{t("hero_subtitle")}</p>
          <p className="text-lg text-muted-foreground mb-8 text-balance">{t("hero_description")}</p>
        </div>

        <div
          className={`flex flex-col sm:flex-row gap-4 justify-center mb-12 transition-all duration-1000 delay-200 ${
            isLoaded ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
          }`}
        >
          <button
            onClick={() => scrollToSection("projects")}
            className="px-8 py-3 bg-primary text-primary-foreground rounded-lg font-semibold hover:opacity-90 hover:scale-105 transition-all duration-300 flex items-center justify-center gap-2"
          >
            {t("view_my_work")} <ArrowRight size={20} />
          </button>
          <button
            onClick={() => scrollToSection("contact")}
            className="px-8 py-3 border border-primary text-primary rounded-lg font-semibold hover:bg-primary hover:text-primary-foreground hover:scale-105 transition-all duration-300"
          >
            {t("contact_me")}
          </button>
        </div>
      </div>
    </section>
  )
}