"use client"

import * as React from "react"
import { motion } from "framer-motion"
import { fadeUp, staggerContainer } from "@/lib/motion"
import { Bot, ShieldCheck, Shuffle, Quote } from "lucide-react"

const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
  "ti-shield-check": ShieldCheck,
  "ti-arrows-shuffle": Shuffle,
  "ti-quote": Quote,
}

function RenderIcon({ name, className }: { name: string; className?: string }) {
  const Icon = iconMap[name] || Bot
  return <Icon className={className} />
}

interface VerifiedItem {
  icon: string
  title: string
  description: string
}

interface VerifiedData {
  badge: string
  titleHTML: string
  description: string
  features: VerifiedItem[]
}

export function VerifiedSection({ data }: { data: VerifiedData }) {
  if (!data) return null

  return (
    <section className="bg-white py-20 border-b border-hairline">
      <div className="max-w-[1200px] mx-auto px-7 relative z-10">
        <motion.div
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-100px" }}
          variants={staggerContainer}
          className="space-y-12"
        >
          {/* Header */}
          <div className="text-center max-w-[720px] mx-auto space-y-3.5">
            <motion.div 
              variants={fadeUp} 
              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}
              <span className="w-5 h-[1.5px] bg-gold" />
            </motion.div>
            
            <motion.h2 
              variants={fadeUp} 
              className="font-display text-[34px] md:text-[42px] leading-[1.12] tracking-[-0.3px] text-ink"
              dangerouslySetInnerHTML={{ __html: data.titleHTML }}
            />
            
            <motion.p 
              variants={fadeUp} 
              className="text-[15px] md:text-base leading-[1.75] font-light text-muted-gray"
            >
              {data.description}
            </motion.p>
          </div>

          {/* Cards Grid */}
          <motion.div 
            variants={fadeUp}
            className="grid md:grid-cols-3 border border-hairline bg-white"
          >
            {data.features.map((item, idx) => {
              const isLast = idx === data.features.length - 1
              return (
                <div
                  key={idx}
                  className={`p-7.5 ${
                    isLast ? "" : "md:border-r border-hairline"
                  }`}
                >
                  <div className="w-[46px] h-[46px] rounded-[3px] bg-navy/7 text-navy flex items-center justify-center text-[22px] mb-4.5">
                    <RenderIcon name={item.icon} className="size-5.5" />
                  </div>
                  <h3 className="font-display text-lg md:text-xl mb-2.5 leading-[1.25] text-ink">
                    {item.title}
                  </h3>
                  <p className="text-[13.5px] leading-[1.75] font-light text-muted-gray">
                    {item.description}
                  </p>
                </div>
              )
            })}
          </motion.div>
        </motion.div>
      </div>
    </section>
  )
}