import { Button } from "@/components/ui/button"
import ModelViewer from "./model-viewer"
import { ArrowRight, Leaf, Sprout } from "lucide-react"
import { useRouter } from "next/navigation"
import { useState, useEffect } from "react"
import AOS from "aos"
import "aos/dist/aos.css"

export default function HeroSection() {
  const [userCount, setUserCount] = useState<number | null>(null)
  const router = useRouter()

  useEffect(() => {
    AOS.init({
      duration: 1000,
      once: true,
      offset: 100,
    })

    const fetchUserCount = async () => {
      try {
        const res = await fetch("/api/auth/count/users")
        if (!res.ok) throw new Error("Failed to fetch user count")
        const data = await res.json()
        setUserCount(data.total || 0)
      } catch (err) {
        console.error(err)
        setUserCount(0)
      }
    }

    fetchUserCount()
  }, [])

  return (
    <section className="relative overflow-hidden py-10 md:py-18">
      <div className="absolute inset-0 bg-linear-to-br from-primary/10 via-accent/5 to-secondary/10 -z-10" />

      <div className="max-w-7xl mx-auto px-6 sm:px-10 lg:px-12">
        <div className="grid md:grid-cols-2 gap-10 md:gap-12 items-center">
          <div className="order-1 md:order-1 space-y-6 md:space-y-8">
            {/* Badges */}
            <div className="flex flex-col sm:flex-row gap-2 lg:gap-4">
            </div>

            {/* Title */}
            <h1 
              className="text-3xl sm:text-4xl md:text-5xl font-bold text-foreground leading-tight"
              data-aos="fade-up"
              data-aos-delay="300"
            >
              <span className="text-transparent bg-clip-text bg-linear-to-r from-primary to-accent">
                Akar Jati Tua, Diubah Menjadi Karya Bernilai Tinggi
              </span>
            </h1>

            {/* Model Viewer 3D - Mobile */}
            <div className="block md:hidden mt-6">
              <div className="relative h-64 sm:h-80">
                <div className="absolute inset-0 bg-linear-to-br from-primary/20 to-accent/20 rounded-3xl blur-3xl" />
                <div className="relative rounded-3xl border border-primary/20 p-4 h-full flex items-center justify-center">
                  <ModelViewer />
                </div>
              </div>
            </div>

            {/* Description */}
            <p 
              className="text-base sm:text-lg text-foreground/70 leading-relaxed text-justify"
              data-aos="fade-up"
              data-aos-delay="400"
            >
              Dari hutan jati Ciwado, kami menghadirkan akar kayu jati tua, rustic decor, craft blocks premium, dan biochar berkualitas melalui proses pemilahan alami, pengolahan bertanggung jawab, dan cerita material yang autentik.
            </p>


            {/* Stats */}
            <div 
              className="flex justify-between sm:justify-start sm:gap-8 pt-6 text-sm"
              data-aos="fade-up"
              data-aos-delay="600"
            >
              <div className="text-center sm:text-left">
                <div className="font-bold text-primary text-xl">{userCount !== null ? `${userCount.toLocaleString()}` : "0"}</div>
                <div className="text-foreground/60 text-xs sm:text-sm">Pengguna Aktif</div>
              </div>
              <div className="text-center sm:text-left">
                <div className="font-bold text-accent text-xl">4.300+</div>
                <div className="text-foreground/60 text-xs sm:text-sm">Bank Sampah</div>
              </div>
              <div className="text-center sm:text-left">
                <div className="font-bold text-secondary text-xl">5.7M</div>
                <div className="text-foreground/60 text-xs sm:text-sm">Ton Sampah Terkelola</div>
              </div>
            </div>
          </div>

          {/* Model Viewer 3D - Desktop */}
          <div className="hidden md:block order-2 relative h-72 sm:h-96 mt-8 md:mt-0">
            <div className="absolute inset-0 bg-linear-to-br from-primary/20 to-accent/20 rounded-3xl blur-3xl" />
            <div className="relative rounded-3xl border border-primary/20 p-6 h-full flex items-center justify-center">
              <ModelViewer />
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}