'use client'

import { Check, ArrowRight, Cpu } 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 CTAButton from '@/components/ui/CTAButton'
import FadeInView from '@/components/ui/FadeInView'

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

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

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
          {i.pricing.tiers.map((tier, idx) => (
            <GlassCard
              key={idx}
              delay={idx * 0.1}
              className={`relative ${tier.highlighted ? 'border-accent-electric/30 ring-1 ring-accent-electric/20' : ''}`}
            >
              {tier.highlighted && (
                <div className="absolute -top-3 left-1/2 -translate-x-1/2">
                  <span className="px-3 py-1 rounded-full text-xs font-bold bg-accent-electric text-white">
                    {tier.badge}
                  </span>
                </div>
              )}
              {!tier.highlighted && (
                <span className="inline-block mono-label text-xs mb-2">{tier.badge}</span>
              )}

              <h3 className="text-xl font-bold mt-2 mb-1">{tier.name}</h3>
              <div className="flex items-baseline gap-1 mb-3">
                <span className="text-3xl font-bold">EUR {tier.price}</span>
                <span className="text-white/40 text-sm">{tier.period}</span>
              </div>
              <p className="text-sm text-white/40 mb-6">{tier.description}</p>

              <ul className="space-y-3 mb-8">
                {tier.features.map((feature, fi) => (
                  <li key={fi} className="flex items-start gap-2 text-sm text-white/60">
                    <Check className="w-4 h-4 text-accent-signal mt-0.5 shrink-0" />
                    {feature}
                  </li>
                ))}
              </ul>

              <CTAButton
                variant={tier.highlighted ? 'primary' : 'ghost'}
                href="#"
                className="w-full justify-center"
              >
                {i.pricing.cta}
                <ArrowRight className="w-4 h-4" />
              </CTAButton>
            </GlassCard>
          ))}
        </div>

        <FadeInView>
          <div className="rounded-2xl border border-white/[0.08] bg-white/[0.03] p-6 md:p-8">
            <div className="flex flex-col md:flex-row items-start md:items-center gap-6">
              <div className="w-14 h-14 rounded-2xl bg-accent-purple/10 flex items-center justify-center shrink-0">
                <Cpu className="w-7 h-7 text-accent-purple" />
              </div>
              <div className="flex-1">
                <div className="flex items-center gap-3 mb-1">
                  <h3 className="text-lg font-bold">{i.pricing.appliance.name}</h3>
                  <span className="mono-label text-xs px-2 py-0.5 rounded bg-white/[0.06]">
                    {i.pricing.appliance.badge}
                  </span>
                </div>
                <p className="text-sm text-white/40 mb-3">{i.pricing.appliance.description}</p>
                <div className="flex flex-wrap gap-2">
                  {i.pricing.appliance.features.map((f, idx) => (
                    <span key={idx} className="inline-flex items-center gap-1.5 text-xs text-white/50 bg-white/[0.04] px-2.5 py-1 rounded-md">
                      <Check className="w-3 h-3 text-accent-signal" />
                      {f}
                    </span>
                  ))}
                </div>
              </div>
              <div className="text-right shrink-0">
                <div className="text-2xl font-bold">EUR {i.pricing.appliance.priceRange}</div>
                <div className="text-xs text-white/40">{i.pricing.appliance.priceLabel}</div>
              </div>
            </div>
          </div>
        </FadeInView>
      </div>
    </section>
  )
}
