'use client'

import { TrendingDown, Cookie, Scale, AlertTriangle, ArrowRight } 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 FadeInView from '@/components/ui/FadeInView'
import GradientText from '@/components/ui/GradientText'

const pillarIcons = [Cookie, Scale, AlertTriangle]

export default function SavingsSection() {
  const { lang } = useApp()
  const i = t(lang)
  const s = (i as unknown as { savings: typeof i.problem & { promise: string; caseStudy: { label: string; headline: string; bullets: string[]; saving: string; side: string }; pillars: { title: string; description: string }[]; cta: string; ctaSecondary: string } }).savings

  return (
    <section id="savings" className="py-24 sm:py-32 relative">
      <div className="absolute inset-0 bg-gradient-to-b from-transparent via-emerald-500/[0.02] to-transparent" />
      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <SectionHeading
          tag={s.tag}
          title={s.title}
          titleHighlight={s.titleHighlight}
          subtitle={s.subtitle}
        />

        {/* PROMISE — high-impact one-liner */}
        <FadeInView>
          <div className="text-center mb-16">
            <div className="inline-flex items-center gap-3 px-6 py-3 rounded-full
                            border border-emerald-400/30 bg-emerald-500/[0.08]">
              <TrendingDown className="w-5 h-5 text-emerald-400" />
              <span className="text-lg font-semibold text-emerald-300">
                {s.promise}
              </span>
            </div>
          </div>
        </FadeInView>

        {/* CASE STUDY card */}
        <FadeInView>
          <div className="rounded-2xl border border-emerald-400/20 bg-gradient-to-br
                          from-emerald-500/[0.06] to-white/[0.02] p-8 mb-16">
            <div className="mono-label text-emerald-400 mb-3 tracking-widest">
              {s.caseStudy.label}
            </div>
            <h3 className="text-2xl sm:text-3xl font-bold mb-6">
              {s.caseStudy.headline}
            </h3>
            <ul className="space-y-3 mb-8">
              {s.caseStudy.bullets.map((b: string, idx: number) => (
                <li key={idx} className="flex items-start gap-3 text-white/70">
                  <span className="mt-1 w-1.5 h-1.5 rounded-full bg-emerald-400 flex-shrink-0" />
                  <span className="text-sm">{b}</span>
                </li>
              ))}
            </ul>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 pt-6 border-t border-white/10">
              <div>
                <div className="mono-label text-white/40 mb-1">JAEHRLICHES SPARPOTENZIAL</div>
                <div className="text-3xl font-bold">
                  <GradientText>{s.caseStudy.saving}</GradientText>
                </div>
              </div>
              <div>
                <div className="mono-label text-white/40 mb-1">PLUS</div>
                <div className="text-sm text-white/70">{s.caseStudy.side}</div>
              </div>
            </div>
          </div>
        </FadeInView>

        {/* Pillars: HOW we do it */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-16">
          {s.pillars.map((p: { title: string; description: string }, idx: number) => {
            const Icon = pillarIcons[idx] || Cookie
            return (
              <GlassCard key={idx} delay={idx * 0.1}>
                <div className="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-4">
                  <Icon className="w-6 h-6 text-emerald-400" />
                </div>
                <h3 className="text-lg font-bold mb-2">{p.title}</h3>
                <p className="text-sm text-white/50">{p.description}</p>
              </GlassCard>
            )
          })}
        </div>

        {/* CTA */}
        <FadeInView>
          <div className="text-center">
            <a
              href="/savings-scan"
              className="inline-flex items-center gap-2 px-6 py-3 rounded-full
                         bg-emerald-500 hover:bg-emerald-400 transition-colors
                         text-enterprise-dark font-semibold"
            >
              {s.cta}
              <ArrowRight className="w-4 h-4" />
            </a>
            <a
              href="/savings-methodik"
              className="inline-flex items-center gap-2 px-6 py-3 ml-3
                         text-white/60 hover:text-white transition-colors text-sm"
            >
              {s.ctaSecondary}
            </a>
          </div>
        </FadeInView>
      </div>
    </section>
  )
}
