"use client"

import * as React from "react"
import { motion } from "framer-motion"
import { staggerContainer } from "@/lib/motion"
import { ArrowRight } from "lucide-react"

interface DossierItem {
  title: string
  desc: string
  meta: string
  bgGradient: string
  badgeColor: string
}

interface DossiersData {
  badge: string
  title: string
  cta: string
  items: DossierItem[]
}

export function Dossiers({ data }: { data: DossiersData }) {
  if (!data) return null

  return (
    <section className="bg-[#F7F6F3] py-18 pb-20 border-b border-hairline">
      <div className="max-w-[1240px] mx-auto px-7">
        <motion.div
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-100px" }}
          variants={staggerContainer}
          className="space-y-8"
        >
          {/* Header */}
          <div className="flex justify-between items-end gap-6 flex-wrap">
            <div className="space-y-3">
              <div className="inline-flex items-center gap-2 text-[11px] font-bold tracking-wider uppercase text-gold">
                <span className="w-5 h-[1.5px] bg-gold" />
                {data.badge}
              </div>
              <h2 className="font-display text-[34px] leading-[1.12] tracking-[-0.3px] text-ink">
                {data.title}
              </h2>
            </div>
            <span className="text-[13.5px] font-semibold text-navy hover:text-gold transition-colors flex items-center gap-1.5 cursor-pointer group lift">
              {data.cta}
              <ArrowRight className="size-3.5 group-hover:translate-x-1 transition-transform" />
            </span>
          </div>

          {/* Dossier Cards Grid */}
          <div className="grid md:grid-cols-3 gap-4">
            {data.items.map((item, idx) => (
              <div
                key={idx}
                className="bg-white border border-[#E2DDD6] rounded-[6px] overflow-hidden hover:shadow-[0_12px_30px_rgba(10,13,20,0.10)] hover:border-[#C8C3BA] hover:-translate-y-0.5 transition-all duration-200 cursor-pointer"
              >
                {/* Gradient banner */}
                <div
                  style={{ background: item.bgGradient }}
                  className="h-[118px] relative flex items-end p-4"
                >
                  <div className="absolute inset-0 bg-[radial-gradient(circle,rgba(255,255,255,0.07)_1px,transparent_1px)] bg-[size:18px_18px]" />
                  <span
                    style={{ color: item.badgeColor }}
                    className="relative text-[10.5px] font-bold tracking-[0.06em] uppercase bg-black/25 px-2.5 py-1 rounded-[2px]"
                  >
                    Dossier
                  </span>
                </div>

                {/* Card Content */}
                <div className="p-5 flex flex-col">
                  <div className="text-[16px] font-semibold text-ink leading-[1.35] mb-2 font-sans">
                    {item.title}
                  </div>
                  <p className="text-[12.5px] text-[#6B6760] leading-[1.6] font-light mb-4.5">
                    {item.desc}
                  </p>
                  
                  <div className="flex justify-between items-center pt-3 border-t border-[#F0EDE8]">
                    <span className="text-[11.5px] text-[#9A968E] font-sans">
                      {item.meta}
                    </span>
                    <span className="text-[12.5px] font-semibold text-navy font-sans">
                      Open
                    </span>
                  </div>
                </div>

              </div>
            ))}
          </div>

        </motion.div>
      </div>
    </section>
  )
}