import { motion } from "framer-motion"
import {
  Layers,
  Recycle,
  RefreshCw,
  TrendingUp,
  Users,
  type LucideIcon,
} from "lucide-react"

import { Card } from "@/components/ui/card"
import { Section } from "@/components/layout/Section"
import { goal } from "@/data/project"

const iconMap: Record<string, LucideIcon> = {
  Layers,
  Recycle,
  RefreshCw,
  TrendingUp,
  Users,
}

export function Goal() {
  return (
    <Section
      id="goal"
      eyebrow="Goal & contribution"
      title="Closing the gaps in energy-efficiency assessment"
      className="bg-background"
    >
      <div className="grid gap-12 lg:grid-cols-12">
        {/* Goal text */}
        <div className="lg:col-span-5">
          <div className="rounded-xl border border-border bg-secondary/50 p-6">
            <span className="text-sm font-semibold uppercase tracking-widest text-brand">
              The challenge
            </span>
            <p className="mt-4 text-lg leading-relaxed text-foreground">
              {goal.text}
            </p>
          </div>
        </div>

        {/* Contribution cards */}
        <div className="lg:col-span-7">
          <h3 className="mb-5 text-sm font-semibold uppercase tracking-widest text-muted-foreground">
            Our contribution — a decision-support framework
          </h3>
          <div className="grid gap-4 sm:grid-cols-2">
            {goal.contributions.map((c, i) => {
              const Icon = iconMap[c.icon] ?? Layers
              return (
                <motion.div
                  key={c.title}
                  initial={{ opacity: 0, y: 16 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true, margin: "-60px" }}
                  transition={{ duration: 0.45, delay: i * 0.06, ease: "easeOut" }}
                >
                  <Card className="h-full p-5 transition-all hover:-translate-y-1 hover:border-brand/40 hover:shadow-md">
                    <div className="flex h-11 w-11 items-center justify-center rounded-lg bg-brand/10 text-brand">
                      <Icon className="h-5 w-5" />
                    </div>
                    <h4 className="mt-4 font-semibold text-foreground">
                      {c.title}
                    </h4>
                    <p className="mt-1.5 text-sm leading-relaxed text-muted-foreground">
                      {c.description}
                    </p>
                  </Card>
                </motion.div>
              )
            })}
          </div>
        </div>
      </div>
    </Section>
  )
}
