"use client";

import { Compass, LineChart, Sparkles } from "lucide-react";
import type { LucideIcon } from "lucide-react";
import { Container } from "@/components/container";
import { SectionHeading } from "@/components/section-heading";
import { FadeIn } from "@/components/fade-in";
import { solutionSteps } from "@/lib/mock-data";
import type { SolutionStep } from "@/lib/mock-data";
import { useLanguage } from "@/lib/i18n/context";

const icons: Record<SolutionStep["icon"], LucideIcon> = {
  compass: Compass,
  lineChart: LineChart,
  sparkles: Sparkles,
};

export function Solution() {
  const { t } = useLanguage();

  return (
    <section className="border-t border-border bg-secondary/20 py-20 sm:py-28">
      <Container className="flex flex-col gap-14">
        <SectionHeading
          eyebrow={t.solution.eyebrow}
          title={t.solution.title}
          description={t.solution.description}
        />

        <div className="grid gap-6 lg:grid-cols-3">
          {solutionSteps.map((step, i) => {
            const Icon = icons[step.icon];
            const label = t.solution.steps[i];
            return (
              <FadeIn
                key={step.step}
                delay={i * 0.1}
                className="relative flex flex-col gap-4 rounded-2xl border border-border bg-card/60 p-6"
              >
                <div className="flex items-center justify-between">
                  <span className="flex size-11 items-center justify-center rounded-xl bg-secondary text-primary">
                    <Icon className="size-5" />
                  </span>
                  <span className="text-3xl font-semibold text-muted-foreground/30">
                    0{step.step}
                  </span>
                </div>
                <h3 className="text-lg font-semibold text-foreground">
                  {label.title}
                </h3>
                <p className="text-sm text-muted-foreground">
                  {label.description}
                </p>
              </FadeIn>
            );
          })}
        </div>
      </Container>
    </section>
  );
}