'use client'

import { Check } 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'

const accentColors = ['border-t-accent-electric', 'border-t-accent-indigo', 'border-t-accent-purple']

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

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

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {i.legal.regulations.map((reg, idx) => (
            <GlassCard key={idx} delay={idx * 0.1} className={`border-t-2 ${accentColors[idx]}`}>
              <div className="mb-4">
                <h3 className="text-2xl font-bold font-mono">{reg.name}</h3>
                <p className="text-xs text-white/40 mt-1">{reg.fullName}</p>
              </div>
              <ul className="space-y-2">
                {reg.features.map((feature, fi) => (
                  <li key={fi} className="flex items-start gap-2 text-sm text-white/50">
                    <Check className="w-3.5 h-3.5 text-accent-signal mt-0.5 shrink-0" />
                    {feature}
                  </li>
                ))}
              </ul>
            </GlassCard>
          ))}
        </div>
      </div>
    </section>
  )
}
