'use client'

import { Beef, Home, Building2, GraduationCap } from 'lucide-react'
import { Counter, Reveal, StaggerGroup, StaggerItem } from './motion-primitives'

const impacts = [
  { icon: Beef, value: 20, suffix: '+', label: 'Ekor Domba Garut' },
  { icon: Home, value: 3, suffix: '', label: 'Rumah Tangga Mitra' },
  { icon: Building2, value: 1, suffix: '', label: 'Community Breeding Centre' },
  { icon: GraduationCap, value: 1, suffix: '', label: 'Farmer Academy' },
]

export function Impact() {
  return (
    <section
      id="dampak"
      className="relative overflow-hidden bg-primary py-20 text-primary-foreground lg:py-28"
    >
      <div className="animated-gradient pointer-events-none absolute inset-0 bg-[radial-gradient(50%_60%_at_20%_20%,rgba(64,145,108,0.5),transparent),radial-gradient(50%_50%_at_85%_80%,rgba(149,213,178,0.25),transparent)]" />

      <div className="relative mx-auto max-w-7xl px-5 lg:px-8">
        <Reveal className="mx-auto max-w-2xl text-center">
          <span className="font-button inline-flex items-center rounded-full bg-primary-foreground/10 px-4 py-1.5 text-xs font-semibold uppercase tracking-[0.14em] text-accent">
            Dampak Kami
          </span>
          <h2 className="mt-5 text-balance font-display text-3xl font-extrabold tracking-tight sm:text-4xl">
            Dampak Nyata bagi Komunitas
          </h2>
          <p className="mt-4 text-pretty leading-relaxed text-primary-foreground/70">
            Angka yang mencerminkan komitmen kami dalam membangun kesejahteraan
            pedesaan.
          </p>
        </Reveal>

        <StaggerGroup className="mt-14 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
          {impacts.map((item) => (
            <StaggerItem key={item.label}>
              <div className="group h-full rounded-2xl border border-primary-foreground/10 bg-primary-foreground/5 p-7 text-center backdrop-blur-sm transition-all duration-300 hover:-translate-y-1.5 hover:bg-primary-foreground/10">
                <span className="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-accent/20 text-accent transition-transform duration-300 group-hover:scale-110">
                  <item.icon className="h-7 w-7" />
                </span>
                <div className="mt-5 font-display text-5xl font-extrabold tracking-tight">
                  <Counter value={item.value} suffix={item.suffix} />
                </div>
                <p className="mt-2 text-sm font-medium text-primary-foreground/70">
                  {item.label}
                </p>
              </div>
            </StaggerItem>
          ))}
        </StaggerGroup>
      </div>
    </section>
  )
}
