import { motion } from 'framer-motion';

export default function Credentials() {
  return (
    <section id="credentials" className="py-24 bg-[#050b1a] border-t border-white/5">
      <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          viewport={{ once: true }}
          className="glass-panel border border-nordic-cyan/20 rounded-lg overflow-hidden"
        >
          {/* Header looks like a terminal or dossier header */}
          <div className="bg-nordic-cyan/10 px-6 py-4 border-b border-nordic-cyan/20 flex justify-between items-center">
            <span className="font-mono text-nordic-cyan text-sm tracking-widest uppercase">
              System_Verification_Dossier_v2.4
            </span>
            <div className="flex space-x-2">
              <div className="w-3 h-3 rounded-full bg-red-500/50"></div>
              <div className="w-3 h-3 rounded-full bg-yellow-500/50"></div>
              <div className="w-3 h-3 rounded-full bg-green-500/50"></div>
            </div>
          </div>

          <div className="p-8 md:p-12">
            <div className="grid md:grid-cols-2 gap-12">
              <div>
                <h3 className="text-2xl font-bold text-white mb-6 font-mono">
                  > KVALIFIKASJONER
                </h3>
                <ul className="space-y-6">
                  {[
                    "Certified AI Data Specialist",
                    "Advanced Linguistic QA Certification",
                    "Legal & Medical Interpretation License",
                    "GDPR & Data Privacy Compliance Expert"
                  ].map((item, i) => (
                    <li key={i} className="flex items-start space-x-3 text-gray-300">
                      <span className="text-nordic-cyan mt-1">✓</span>
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>
              </div>
              
              <div className="border-l border-white/10 pl-0 md:pl-12">
                <h3 className="text-2xl font-bold text-white mb-6 font-mono">
                  > SIKKERHETSPROTOKOLL
                </h3>
                <div className="space-y-4 font-mono text-sm text-gray-400">
                  <div className="flex justify-between border-b border-white/5 pb-2">
                    <span>NDA Status</span>
                    <span className="text-green-400">ACTIVE</span>
                  </div>
                  <div className="flex justify-between border-b border-white/5 pb-2">
                    <span>Encryption</span>
                    <span className="text-green-400">AES-256</span>
                  </div>
                  <div className="flex justify-between border-b border-white/5 pb-2">
                    <span>Location</span>
                    <span className="text-white">Trondheim, NO</span>
                  </div>
                  <div className="mt-6 p-4 bg-nordic-cyan/5 rounded border border-nordic-cyan/10 text-nordic-cyan">
                    "Alle prosjekter håndteres med streng konfidensialitet og full overholdelse av europeiske databeskyttelsesregler."
                  </div>
                </div>
              </div>
            </div>
          </div>
        </motion.div>
      </div>
    </section>
  );
}