import { motion } from 'framer-motion'
import { useTranslation } from 'react-i18next'
import { ShieldCheck, Database, Globe } from 'lucide-react'

export default function Credentials() {
  const { t } = useTranslation()

  return (
    <section className="py-24 bg-nordic-navy border-t border-nordic-stone/20">
      <div className="container mx-auto px-6">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
          
          {/* Left Side: Title Block */}
          <div>
            <motion.div
              initial={{ opacity: 0, x: -20 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              className="mb-6"
            >
              <h2 className="text-4xl font-bold text-nordic-ice tracking-tight mb-2">{t('credentials.title')}</h2>
              <div className="flex items-center gap-2 text-nordic-cyan font-mono text-sm">
                <span className="w-2 h-2 bg-nordic-cyan rounded-full animate-pulse" />
                {t('credentials.subtitle')}
              </div>
            </motion.div>
            
            <div className="h-px w-full bg-gradient-to-r from-nordic-stone/50 to-transparent mb-8" />
            
            <p className="text-nordic-stone text-lg leading-relaxed mb-8">
              My work is built on a foundation of verified certifications and strict adherence to data privacy protocols.
            </p>
            
            <button className="text-nordic-ice border-b border-nordic-cyan pb-1 hover:text-nordic-cyan transition-colors font-mono text-sm">
              DOWNLOAD FULL CV (PDF)
            </button>
          </div>

          {/* Right Side: Data Dossier Grid */}
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            {[
              { title: t('credentials.section_1'), items: [t('credentials.item_1'), t('credentials.item_2'), t('credentials.item_5')], icon: Database },
              { title: t('credentials.section_2'), items: [t('credentials.item_3'), t('credentials.item_6')], icon: Globe },
              { title: t('credentials.section_3'), items: [t('credentials.item_4')], icon: ShieldCheck },
            ].map((col, idx) => (
              <motion.div
                key={idx}
                initial={{ opacity: 0, scale: 0.95 }}
                whileInView={{ opacity: 1, scale: 1 }}
                viewport={{ once: true }}
                transition={{ delay: idx * 0.1 }}
                className="bg-nordic-navy border border-nordic-stone/30 p-6 rounded-sm relative overflow-hidden group"
              >
                <div className="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
                  <col.icon size={48} className="text-nordic-cyan" />
                </div>
                <h4 className="font-mono text-xs text-nordic-cyan mb-4 uppercase tracking-widest border-b border-nordic-stone/20 pb-2">
                  {col.title}
                </h4>
                <ul className="space-y-3">
                  {col.items.map((item, i) => (
                    <li key={i} className="flex items-start gap-2 text-sm text-nordic-ice/80 font-light">
                      <span className="mt-1.5 w-1 h-1 bg-nordic-cyan rounded-full flex-shrink-0" />
                      {item}
                    </li>
                  ))}
                </ul>
              </motion.div>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}