'use client'

import Image from 'next/image'
import { Users, Recycle, TrendingUp, HeartHandshake } from 'lucide-react'
import { Reveal, StaggerGroup, StaggerItem } from './motion-primitives'

const values = [
  {
    icon: Users,
    title: 'Pemberdayaan Komunitas',
    desc: 'Memperkuat kapasitas masyarakat pedesaan untuk tumbuh mandiri.',
  },
  {
    icon: Recycle,
    title: 'Peternakan Berkelanjutan',
    desc: 'Praktik budidaya yang ramah lingkungan dan bertanggung jawab.',
  },
  {
    icon: TrendingUp,
    title: 'Pertumbuhan Inklusif',
    desc: 'Membuka peluang ekonomi yang adil bagi setiap peternak.',
  },
  {
    icon: HeartHandshake,
    title: 'Kesejahteraan Bersama',
    desc: 'Menciptakan dampak sosial yang dirasakan seluruh komunitas.',
  },
]

export function About() {
  return (
    <section id="tentang" className="bg-background py-20 lg:py-28">
      <div className="mx-auto max-w-7xl px-5 lg:px-8">
        <div className="grid items-center gap-12 lg:grid-cols-2 lg:gap-16">
          <Reveal direction="right">
            <div className="relative">
              <div className="overflow-hidden rounded-3xl shadow-xl shadow-primary/10 ring-1 ring-primary/10">
                <Image
                  src="/about-farm.png"
                  alt="Peternakan domba berkelanjutan di perbukitan hijau"
                  width={800}
                  height={640}
                  className="h-full w-full object-cover transition-transform duration-700 hover:scale-105"
                />
              </div>
              <div className="absolute -right-4 -top-4 -z-10 h-32 w-32 rounded-3xl bg-accent/40" />
              <div className="absolute -bottom-5 -left-5 -z-10 h-24 w-24 rounded-2xl bg-secondary/20" />
            </div>
          </Reveal>

          <Reveal direction="left" delay={0.1}>
            <span className="font-button inline-flex items-center rounded-full bg-accent/40 px-4 py-1.5 text-xs font-semibold uppercase tracking-[0.14em] text-primary">
              Tentang Kami
            </span>
            <h2 className="mt-5 text-balance font-display text-3xl font-extrabold tracking-tight text-primary sm:text-4xl">
              Perusahaan Sosial untuk Masa Depan Pedesaan
            </h2>
            <p className="mt-5 text-pretty leading-relaxed text-muted-foreground">
              PT Mustieka Barokah Mandiri (PT MBM) adalah sebuah perusahaan
              sosial (social enterprise) yang berkomitmen untuk meningkatkan
              taraf hidup masyarakat pedesaan. Kami bergerak melalui
              pengembangan peternakan berkelanjutan, pemberdayaan komunitas, dan
              praktik bisnis yang bertanggung jawab.
            </p>
          </Reveal>
        </div>

        <StaggerGroup className="mt-16 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
          {values.map((v) => (
            <StaggerItem key={v.title}>
              <div className="group h-full rounded-2xl border border-border bg-card p-6 shadow-sm transition-all duration-300 hover:-translate-y-1.5 hover:border-secondary/40 hover:shadow-xl hover:shadow-primary/10">
                <span className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary/5 text-primary transition-colors duration-300 group-hover:bg-secondary group-hover:text-secondary-foreground">
                  <v.icon className="h-6 w-6" />
                </span>
                <h3 className="mt-5 font-display text-lg font-bold text-primary">
                  {v.title}
                </h3>
                <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
                  {v.desc}
                </p>
              </div>
            </StaggerItem>
          ))}
        </StaggerGroup>
      </div>
    </section>
  )
}
