"use client";

import { Coins, Shield, ShoppingBag } from "lucide-react";
import { useTranslations } from "next-intl";
import { BentoCard, BentoGrid } from "@/components/ui/bento-grid";

export function HowItWorks() {
  const t = useTranslations("home.howItWorks");

  const features = [
    {
      name: t("buy"),
      description: "Encontre os melhores itens com preços justos",
      className: "md:col-span-1",
      background: (
        <div className="absolute inset-0 bg-gradient-to-br from-green-500/10 via-green-500/5 to-transparent" />
      ),
      Icon: ShoppingBag,
      href: "/market",
      cta: "Ver Mercado",
    },
    {
      name: t("sell"),
      description: "Venda seu loot e ganhe gold rapidamente",
      className: "md:col-span-1",
      background: (
        <div className="absolute inset-0 bg-gradient-to-br from-amber-500/10 via-amber-500/5 to-transparent" />
      ),
      Icon: Coins,
      href: "/market",
      cta: "Vender Agora",
    },
    {
      name: t("trade"),
      description: "Sistema seguro de escrow protege suas transações",
      className: "md:col-span-2",
      background: (
        <div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 via-blue-500/5 to-transparent" />
      ),
      Icon: Shield,
      href: "/market",
      cta: "Negociar",
    },
  ];

  return (
    <section className="py-20 bg-background">
      <div className="container">
        <div className="text-center mb-16">
          <h2 className="text-4xl font-bold mb-4">{t("title")}</h2>
          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
            Descubra como funciona nossa plataforma de trading segura e
            eficiente.{" "}
            <a href="/market" className="text-primary hover:underline">
              Explore o mercado
            </a>{" "}
            ou conheça nosso{" "}
            <a href="#escrow" className="text-primary hover:underline">
              sistema de escrow
            </a>
            .
          </p>
        </div>

        <BentoGrid>
          {features.map((feature, idx) => (
            <BentoCard key={idx} {...feature} />
          ))}
        </BentoGrid>
      </div>
    </section>
  );
}