'use client'

import { ArrowRight } from 'lucide-react'
import { t } from '@/lib/content'
import { useApp } from '@/lib/context'
import SectionHeading from '@/components/ui/SectionHeading'
import GlassCard from '@/components/ui/GlassCard'
import FadeInView from '@/components/ui/FadeInView'
import TechBadge from '@/components/ui/TechBadge'

export default function SecuritySection() {
  const { lang } = useApp()
  const i = t(lang)

  return (
    <section id="security" className="py-24 sm:py-32">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <SectionHeading
          tag={i.security.tag}
          title={i.security.title}
          titleHighlight={i.security.titleHighlight}
          subtitle={i.security.subtitle}
        />

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          <FadeInView direction="left">
            <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
              {i.security.tools.map((tool, idx) => (
                <GlassCard key={idx} delay={idx * 0.05} className="p-4">
                  <p className="font-mono text-sm font-bold text-accent-electric mb-1">{tool.name}</p>
                  <p className="text-xs text-white/40">{tool.description}</p>
                </GlassCard>
              ))}
            </div>
          </FadeInView>

          <FadeInView direction="right">
            <div className="rounded-2xl border border-white/[0.06] bg-white/[0.03] p-6 h-full flex flex-col justify-center">
              <h3 className="text-lg font-bold mb-2">{i.security.integration.title}</h3>
              <p className="text-sm text-white/40 mb-6">{i.security.integration.description}</p>

              <div className="flex flex-col gap-3">
                <div className="flex items-center gap-3">
                  <span className="px-3 py-1.5 rounded-lg bg-red-500/10 border border-red-500/20 text-xs text-red-400 font-mono">
                    CVE-2024-XXXX
                  </span>
                  <ArrowRight className="w-4 h-4 text-white/20" />
                  <span className="px-3 py-1.5 rounded-lg bg-accent-electric/10 border border-accent-electric/20 text-xs text-accent-electric font-mono">
                    JIRA-SEC-142
                  </span>
                </div>
                <div className="flex flex-wrap gap-2 mt-3">
                  {i.security.integration.targets.map((target, idx) => (
                    <TechBadge key={idx}>{target}</TechBadge>
                  ))}
                </div>
              </div>
            </div>
          </FadeInView>
        </div>
      </div>
    </section>
  )
}
