'use client'

import { Layers, Server, Database } from 'lucide-react'
import { t } from '@/lib/content'
import { useApp } from '@/lib/context'
import SectionHeading from '@/components/ui/SectionHeading'
import FadeInView from '@/components/ui/FadeInView'
import TechBadge from '@/components/ui/TechBadge'

const layerIcons = [Layers, Server, Database]
const layerColors = ['border-accent-electric/30', 'border-accent-indigo/30', 'border-accent-purple/30']
const layerBg = ['bg-accent-electric/5', 'bg-accent-indigo/5', 'bg-accent-purple/5']

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

  return (
    <section id="architecture" 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.architecture.tag}
          title={i.architecture.title}
          titleHighlight={i.architecture.titleHighlight}
          subtitle={i.architecture.subtitle}
        />

        <div className="space-y-4 mb-12">
          {i.architecture.layers.map((layer, idx) => {
            const Icon = layerIcons[idx]
            return (
              <FadeInView key={idx} delay={idx * 0.15}>
                <div className={`rounded-2xl border ${layerColors[idx]} ${layerBg[idx]} p-6`}>
                  <div className="flex flex-col md:flex-row md:items-center gap-4">
                    <div className="flex items-center gap-3 md:w-64 shrink-0">
                      <Icon className="w-5 h-5 text-white/60" />
                      <h3 className="font-bold text-sm">{layer.name}</h3>
                    </div>
                    <div className="flex-1 flex flex-wrap gap-2">
                      {layer.components.map((comp, ci) => (
                        <span
                          key={ci}
                          className="px-3 py-1.5 rounded-lg text-xs bg-white/[0.06] border border-white/[0.06] text-white/70"
                        >
                          {comp}
                        </span>
                      ))}
                    </div>
                    <TechBadge className="shrink-0">{layer.tech}</TechBadge>
                  </div>
                </div>
              </FadeInView>
            )
          })}
        </div>

        <FadeInView delay={0.5}>
          <div className="flex flex-wrap justify-center gap-3">
            {i.architecture.badges.map((badge, idx) => (
              <span
                key={idx}
                className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-white/[0.08] bg-white/[0.03] text-xs text-white/60 font-medium"
              >
                <span className="w-1.5 h-1.5 rounded-full bg-accent-signal" />
                {badge}
              </span>
            ))}
          </div>
        </FadeInView>
      </div>
    </section>
  )
}
