'use client'

import Image from 'next/image'
import { motion } from 'framer-motion'
import { ArrowRight, Leaf, Phone } from 'lucide-react'
import { Counter } from './motion-primitives'

const stats = [
  { value: 20, suffix: '+', label: 'Garut Sheep' },
  { value: 3, suffix: '', label: 'Partner Households' },
  { value: 1, suffix: '', label: 'Breeding Centre' },
]

export function Hero() {
  return (
    <section
      id="beranda"
      className="relative overflow-hidden bg-cream pt-28 pb-16 lg:pt-36 lg:pb-24"
    >
      {/* animated gradient backdrop */}
      <div className="animated-gradient pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(60%_50%_at_15%_10%,rgba(149,213,178,0.35),transparent),radial-gradient(50%_50%_at_90%_20%,rgba(64,145,108,0.18),transparent)]" />

      {/* floating leaf ornaments */}
      <Leaf className="animate-floaty pointer-events-none absolute left-[6%] top-[22%] h-10 w-10 text-secondary/30" />
      <Leaf className="animate-floaty-slow pointer-events-none absolute right-[8%] top-[65%] h-14 w-14 text-secondary/20" />
      <Leaf className="animate-floaty pointer-events-none absolute left-[45%] top-[8%] h-8 w-8 text-accent/50" />

      <div className="mx-auto grid max-w-7xl items-center gap-12 px-5 lg:grid-cols-2 lg:px-8">
        <div>
          <motion.span
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="inline-flex items-center gap-2 rounded-full border border-secondary/25 bg-card/70 px-4 py-1.5 text-xs font-semibold uppercase tracking-[0.14em] text-secondary shadow-sm"
          >
            <Leaf className="h-3.5 w-3.5" />
            Empowering Rural Communities
          </motion.span>

          <motion.h1
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.7, delay: 0.1 }}
            className="mt-6 text-balance font-display text-4xl font-extrabold leading-[1.08] tracking-tight text-primary sm:text-5xl lg:text-6xl"
          >
            PT Mustieka Barokah Mandiri
          </motion.h1>

          <motion.p
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.7, delay: 0.18 }}
            className="mt-3 font-display text-base font-semibold text-secondary"
          >
            GS4P | Garut Sheep for Prosperity
          </motion.p>

          <motion.p
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.7, delay: 0.2 }}
            className="mt-5 max-w-xl text-pretty text-lg leading-relaxed text-muted-foreground"
          >
            Building Prosperity, One Sheep at a Time. PT Mustieka Barokah Mandiri
            (PT MBM) is a social enterprise committed to improving livelihoods
            through sustainable livestock development, community empowerment, and
            responsible business practices.
          </motion.p>

          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.7, delay: 0.3 }}
            className="mt-8 flex flex-wrap items-center gap-4"
          >
            <a
              href="#program"
              className="font-button group inline-flex items-center gap-2 rounded-full bg-primary px-6 py-3.5 text-sm font-semibold text-primary-foreground shadow-lg shadow-primary/25 transition-all duration-300 hover:-translate-y-0.5 hover:bg-secondary hover:shadow-secondary/30"
            >
              Explore Program
              <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
            </a>
            <a
              href="#kontak"
              className="font-button group inline-flex items-center gap-2 rounded-full border border-primary/20 bg-card px-6 py-3.5 text-sm font-semibold text-primary shadow-sm transition-all duration-300 hover:-translate-y-0.5 hover:border-secondary hover:text-secondary"
            >
              <Phone className="h-4 w-4 transition-transform group-hover:rotate-12" />
              Contact Us
            </a>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.7, delay: 0.45 }}
            className="mt-12 grid max-w-md grid-cols-3 gap-4"
          >
            {stats.map((s) => (
              <div key={s.label} className="text-center sm:text-left">
                <div className="font-display text-3xl font-extrabold text-primary">
                  <Counter value={s.value} suffix={s.suffix} />
                </div>
                <div className="mt-1 text-xs font-medium leading-tight text-muted-foreground">
                  {s.label}
                </div>
              </div>
            ))}
          </motion.div>
        </div>

        {/* hero image */}
        <motion.div
          initial={{ opacity: 0, scale: 0.95 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.9, ease: [0.22, 1, 0.36, 1] }}
          className="relative"
        >
          <div className="relative aspect-[4/3] overflow-hidden rounded-3xl shadow-2xl shadow-primary/20 ring-1 ring-primary/10">
            <Image
              src="/hero-peternak.png"
              alt="Dua peternak mitra bersama domba Garut bertanduk di lingkungan peternakan pedesaan"
              fill
              priority
              sizes="(max-width: 1024px) 100vw, 50vw"
              className="object-cover object-center"
            />
            <div className="absolute inset-0 bg-gradient-to-tr from-primary/25 via-transparent to-transparent" />
          </div>

          {/* floating glass stat card */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.6 }}
            className="glass animate-floaty absolute -bottom-6 -left-4 flex items-center gap-3 rounded-2xl border border-white/60 px-5 py-4 shadow-xl sm:-left-6"
          >
            <span className="flex h-11 w-11 items-center justify-center rounded-xl bg-secondary text-secondary-foreground">
              <Leaf className="h-5 w-5" />
            </span>
            <div>
              <p className="font-display text-sm font-bold text-primary">
                Sustainable Livestock
              </p>
              <p className="text-xs text-muted-foreground">
                Community Breeding Centre
              </p>
            </div>
          </motion.div>
        </motion.div>
      </div>
    </section>
  )
}
