'use client'

import { Server, Shield, Globe } 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 SovereignSection() {
  const { lang } = useApp()
  const i = t(lang)

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

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
          {i.sovereign.features.map((feature, idx) => {
            const icons = [Server, Shield, Globe]
            const Icon = icons[idx]
            return (
              <GlassCard key={idx} delay={idx * 0.1}>
                <div className="w-10 h-10 rounded-xl bg-accent-purple/10 flex items-center justify-center mb-4">
                  <Icon className="w-5 h-5 text-accent-purple" />
                </div>
                <h3 className="text-sm font-bold mb-2">{feature.title}</h3>
                <p className="text-xs text-white/40">{feature.description}</p>
              </GlassCard>
            )
          })}
        </div>

        <FadeInView>
          <div className="rounded-2xl border border-accent-purple/20 bg-accent-purple/[0.04] p-6 md:p-8">
            <div className="flex flex-col md:flex-row items-start md:items-center gap-6">
              <div className="flex-1">
                <h3 className="text-lg font-bold mb-2">{i.sovereign.appliance.title}</h3>
                <p className="text-sm text-white/40 mb-4">{i.sovereign.appliance.description}</p>
                <div className="flex flex-wrap gap-2">
                  {i.sovereign.appliance.specs.map((spec, idx) => (
                    <TechBadge key={idx}>{spec}</TechBadge>
                  ))}
                </div>
              </div>
              <div className="w-32 h-32 rounded-2xl bg-white/[0.04] border border-white/[0.06] flex items-center justify-center shrink-0">
                <div className="text-center">
                  <div className="w-16 h-3 bg-white/10 rounded-sm mx-auto mb-2" />
                  <div className="w-12 h-12 bg-white/[0.06] rounded-lg mx-auto border border-white/[0.08]" />
                  <div className="w-4 h-0.5 bg-white/10 rounded-full mx-auto mt-2" />
                </div>
              </div>
            </div>
          </div>
        </FadeInView>
      </div>
    </section>
  )
}
