"use client";
import { useState } from "react";
import Link from "next/link";
import { useTranslations } from "next-intl";
import RequestManpowerModal from "@/components/RequestManpowerModal";
import { Button, buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { ArrowRight } from "lucide-react";

const InspectionMarketplaceLanding = () => {
  const t = useTranslations("marketplace");
  const [open, setOpen] = useState(false);

  const steps = [
    { num: "01", text: t("step1") },
    { num: "02", text: t("step2") },
    { num: "03", text: t("step3") },
  ];

  return (
    <section className="py-24 bg-surface">
      <div className="container mx-auto px-6 max-w-4xl text-center">
        <p className="text-sm font-semibold uppercase tracking-widest text-accent mb-4">
          {t("badge")}
        </p>
        <h2 className="text-4xl sm:text-5xl font-extrabold leading-tight">
          {t("heading")}
        </h2>
        <p className="mt-6 text-lg text-muted-foreground max-w-2xl mx-auto leading-relaxed">
          {t("description")}
        </p>

        <div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
          <Button
            onClick={() => setOpen(true)}
            size="lg"
            className="bg-accent text-accent-foreground px-10 py-6 text-base h-auto w-full sm:w-auto"
          >
            {t("requestManpower")}
          </Button>
          <Link
            href="/inspectors"
            className={cn(
              buttonVariants({ variant: "outline", size: "lg" }),
              "px-10 py-6 text-base h-auto w-full sm:w-auto gap-2"
            )}
          >
            {t("meetInspectors")} <ArrowRight className="w-4 h-4" />
          </Link>
        </div>

        <div className="mt-20">
          <h4 className="text-sm font-semibold uppercase tracking-widest text-muted-foreground mb-10">
            {t("howItWorks")}
          </h4>
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-8">
            {steps.map(({ num, text }) => (
              <div key={num} className="flex flex-col items-center gap-4 px-4">
                <div className="w-12 h-12 rounded-full bg-accent/10 text-accent font-bold text-lg flex items-center justify-center shrink-0">
                  {num}
                </div>
                <p className="text-sm text-muted-foreground leading-relaxed">{text}</p>
              </div>
            ))}
          </div>
        </div>
      </div>

      <RequestManpowerModal open={open} onOpenChange={setOpen} />
    </section>
  );
};

export default InspectionMarketplaceLanding;