'use client'

import { X, Check } 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 StatusIndicator from '@/components/ui/StatusIndicator'

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

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

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <FadeInView direction="left">
            <div className="rounded-2xl border border-red-500/15 bg-red-500/[0.03] p-6 h-full">
              <div className="flex items-center gap-3 mb-6">
                <StatusIndicator label="Offline" status="error" />
                <h3 className="text-sm font-bold text-red-400">{i.continuous.comparison.annual.title}</h3>
              </div>
              <ul className="space-y-3">
                {i.continuous.comparison.annual.points.map((point, idx) => (
                  <li key={idx} className="flex items-start gap-3 text-sm text-white/40">
                    <X className="w-4 h-4 text-red-400/50 mt-0.5 shrink-0" />
                    {point}
                  </li>
                ))}
              </ul>
            </div>
          </FadeInView>

          <FadeInView direction="right">
            <div className="rounded-2xl border border-green-500/15 bg-green-500/[0.03] p-6 h-full">
              <div className="flex items-center gap-3 mb-6">
                <StatusIndicator label="Live" status="active" />
                <h3 className="text-sm font-bold text-green-400">{i.continuous.comparison.continuous.title}</h3>
              </div>
              <ul className="space-y-3">
                {i.continuous.comparison.continuous.points.map((point, idx) => (
                  <li key={idx} className="flex items-start gap-3 text-sm text-white/60">
                    <Check className="w-4 h-4 text-green-400 mt-0.5 shrink-0" />
                    {point}
                  </li>
                ))}
              </ul>
            </div>
          </FadeInView>
        </div>
      </div>
    </section>
  )
}
