'use client'

import { t } from '@/lib/content'
import { useApp } from '@/lib/context'
import SectionHeading from '@/components/ui/SectionHeading'
import FadeInView from '@/components/ui/FadeInView'

const statusColors = {
  success: 'text-green-400',
  warning: 'text-amber-400',
  neutral: 'text-accent-electric',
}

const statusDots = {
  success: 'bg-green-400',
  warning: 'bg-amber-400',
  neutral: 'bg-accent-electric',
}

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

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

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          <FadeInView direction="left">
            <div className="rounded-2xl bg-enterprise-darker border border-white/[0.06] p-6 font-mono text-sm overflow-hidden">
              <div className="flex items-center gap-2 mb-4 pb-3 border-b border-white/[0.06]">
                <div className="w-3 h-3 rounded-full bg-red-500/60" />
                <div className="w-3 h-3 rounded-full bg-amber-500/60" />
                <div className="w-3 h-3 rounded-full bg-green-500/60" />
                <span className="ml-2 text-xs text-white/30">regulatory-impact-analysis</span>
              </div>
              <div className="space-y-2">
                {i.impact.terminalLines.map((line, idx) => (
                  <div
                    key={idx}
                    className={`
                      ${line.type === 'input' ? 'text-white/70' : ''}
                      ${line.type === 'output' ? 'text-white/40' : ''}
                      ${line.type === 'signal' ? 'text-green-400' : ''}
                    `}
                  >
                    {line.text}
                  </div>
                ))}
              </div>
            </div>
          </FadeInView>

          <FadeInView direction="right">
            <div className="grid grid-cols-2 gap-4 h-full">
              {i.impact.outputs.map((output, idx) => (
                <div
                  key={idx}
                  className="rounded-2xl bg-white/[0.04] border border-white/[0.06] p-5 flex flex-col justify-between"
                >
                  <p className="text-xs text-white/40 mb-2">{output.label}</p>
                  <div className="flex items-center gap-2">
                    <span className={`w-2 h-2 rounded-full ${statusDots[output.status]}`} />
                    <span className={`text-2xl font-bold ${statusColors[output.status]}`}>
                      {output.value}
                    </span>
                  </div>
                </div>
              ))}
            </div>
          </FadeInView>
        </div>
      </div>
    </section>
  )
}
