'use client'

import { Check, Handshake } from 'lucide-react'
import { Reveal } from './motion-primitives'

const mbmContrib = [
  'Bibit unggul',
  'Pelatihan',
  'Kesehatan Hewan',
  'Inovasi Pakan',
  'Akses Pasar',
  'Dukungan Bisnis',
]

const partnerContrib = [
  'Kandang',
  'Operasional',
  'SDM',
  'Pengetahuan Lokal',
  'Komitmen',
]

export function Partnership() {
  return (
    <section id="kemitraan" className="bg-cream py-20 lg:py-28">
      <div className="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-secondary/10 px-4 py-1.5 text-xs font-semibold uppercase tracking-[0.14em] text-secondary">
            Pendekatan & Kemitraan
          </span>
          <h2 className="mt-5 text-balance font-display text-3xl font-extrabold tracking-tight text-primary sm:text-4xl">
            Kolaborasi yang Saling Menguatkan
          </h2>
          <p className="mt-4 text-pretty leading-relaxed text-muted-foreground">
            Kesuksesan program dibangun di atas kontribusi bersama antara PT MBM
            dan para mitra peternak.
          </p>
        </Reveal>

        <div className="relative mt-16 grid items-stretch gap-6 lg:grid-cols-2 lg:gap-20">
          {/* MBM card - green */}
          <Reveal direction="right">
            <div className="h-full rounded-3xl bg-primary p-8 text-primary-foreground shadow-xl shadow-primary/25">
              <h3 className="font-display text-xl font-bold">Kontribusi PT MBM</h3>
              <p className="mt-1 text-sm text-primary-foreground/70">
                Dukungan penuh dari hulu ke hilir
              </p>
              <ul className="mt-6 space-y-3">
                {mbmContrib.map((item) => (
                  <li key={item} className="flex items-center gap-3">
                    <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-accent/25 text-accent">
                      <Check className="h-4 w-4" />
                    </span>
                    <span className="text-sm font-medium">{item}</span>
                  </li>
                ))}
              </ul>
            </div>
          </Reveal>

          {/* center handshake */}
          <div className="pointer-events-none absolute left-1/2 top-1/2 z-10 hidden -translate-x-1/2 -translate-y-1/2 lg:block">
            <div className="animate-floaty flex h-20 w-20 items-center justify-center rounded-full bg-card shadow-2xl ring-4 ring-cream">
              <Handshake className="h-9 w-9 text-secondary" />
            </div>
          </div>

          {/* Partner card - brown */}
          <Reveal direction="left" delay={0.1}>
            <div className="h-full rounded-3xl bg-brown p-8 text-brown-foreground shadow-xl shadow-brown/25">
              <h3 className="font-display text-xl font-bold">Kontribusi Mitra</h3>
              <p className="mt-1 text-sm text-brown-foreground/70">
                Peran vital dari komunitas peternak
              </p>
              <ul className="mt-6 space-y-3">
                {partnerContrib.map((item) => (
                  <li key={item} className="flex items-center gap-3">
                    <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-cream/20 text-cream">
                      <Check className="h-4 w-4" />
                    </span>
                    <span className="text-sm font-medium">{item}</span>
                  </li>
                ))}
              </ul>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  )
}
