"use client";

import { useTranslations } from "next-intl";
import { BlurFade } from "@/components/ui/blur-fade";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
import { NumberTicker } from "@/components/ui/number-ticker";
import {
  Wallet,
  Handshake,
  CheckCircle,
  Shield,
  Zap,
  BarChart,
  Lock,
} from "lucide-react";

export function EscrowExplanation() {
  const t = useTranslations("home.escrowExplanation");

  const benefits = [
    {
      icon: Shield,
      title: t("benefits.protection.title"),
      description: t("benefits.protection.description"),
      color: "text-green-500",
    },
    {
      icon: Zap,
      title: t("benefits.fast.title"),
      description: t("benefits.fast.description"),
      color: "text-blue-500",
    },
    {
      icon: BarChart,
      title: t("benefits.history.title"),
      description: t("benefits.history.description"),
      color: "text-purple-500",
    },
    {
      icon: Lock,
      title: t("benefits.trusted.title"),
      description: t("benefits.trusted.description"),
      color: "text-orange-500",
    },
  ];

  const faqItems = [
    {
      question: t("faq.q1"),
      answer: t("faq.a1"),
    },
    {
      question: t("faq.q2"),
      answer: t("faq.a2"),
    },
    {
      question: t("faq.q3"),
      answer: t("faq.a3"),
    },
    {
      question: t("faq.q4"),
      answer: t("faq.a4"),
    },
    {
      question: t("faq.q5"),
      answer: t("faq.a5"),
    },
  ];

  const stats = [
    {
      value: 208,
      suffix: "M",
      label: t("stats.volume"),
    },
    {
      value: 8763,
      suffix: "",
      label: t("stats.transactions"),
    },
    {
      value: 99.8,
      suffix: "%",
      label: t("stats.satisfaction"),
    },
    {
      value: 2,
      suffix: "min",
      label: t("stats.avgTime"),
    },
  ];

  return (
    <section className="py-20 bg-muted/30">
      <div className="container">
        {/* Título e Subtítulo */}
        <BlurFade delay={0.1}>
          <h2 className="text-5xl font-bold text-center mb-4">{t("title")}</h2>
          <p className="text-xl text-center text-muted-foreground mb-16">
            {t("subtitle")}
          </p>
        </BlurFade>

        {/* Cards de Etapas */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-20">
          {/* Card 1: Depósito */}
          <BlurFade delay={0.2}>
            <div className="relative p-8 rounded-2xl border border-border/50 bg-card backdrop-blur-lg hover:border-orange-500/30 hover:scale-105 transition-all duration-300">
              <div className="absolute -top-4 -left-4 w-12 h-12 bg-orange-500/80 rounded-full flex items-center justify-center text-2xl font-bold text-white shadow-lg">
                1
              </div>
              <Wallet className="w-16 h-16 text-orange-500 mb-4" />
              <h3 className="text-2xl font-bold mb-3">{t("step1.title")}</h3>
              <p className="text-muted-foreground mb-4">
                {t("step1.description")}
              </p>
              <div className="bg-muted/50 p-3 rounded-lg border border-border/30">
                <code className="text-sm text-foreground/80">
                  {t("step1.example")}
                </code>
              </div>
            </div>
          </BlurFade>

          {/* Card 2: Negociação */}
          <BlurFade delay={0.3}>
            <div className="relative p-8 rounded-2xl border border-border/50 bg-card backdrop-blur-lg hover:border-blue-500/30 hover:scale-105 transition-all duration-300">
              <div className="absolute -top-4 -left-4 w-12 h-12 bg-blue-500/80 rounded-full flex items-center justify-center text-2xl font-bold text-white shadow-lg">
                2
              </div>
              <Handshake className="w-16 h-16 text-blue-500 mb-4" />
              <h3 className="text-2xl font-bold mb-3">{t("step2.title")}</h3>
              <p className="text-muted-foreground mb-4">
                {t("step2.description")}
              </p>
              <div className="bg-muted/50 p-3 rounded-lg border border-border/30">
                <code className="text-sm text-foreground/80">
                  {t("step2.example")}
                </code>
              </div>
            </div>
          </BlurFade>

          {/* Card 3: Conclusão */}
          <BlurFade delay={0.4}>
            <div className="relative p-8 rounded-2xl border border-border/50 bg-card backdrop-blur-lg hover:border-green-500/30 hover:scale-105 transition-all duration-300">
              <div className="absolute -top-4 -left-4 w-12 h-12 bg-green-500/80 rounded-full flex items-center justify-center text-2xl font-bold text-white shadow-lg">
                3
              </div>
              <CheckCircle className="w-16 h-16 text-green-500 mb-4" />
              <h3 className="text-2xl font-bold mb-3">{t("step3.title")}</h3>
              <p className="text-muted-foreground mb-4">
                {t("step3.description")}
              </p>
              <div className="bg-muted/50 p-3 rounded-lg border border-border/30">
                <code className="text-sm text-foreground/80">
                  {t("step3.example")}
                </code>
              </div>
            </div>
          </BlurFade>
        </div>

        {/* Grid de Benefícios */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-20">
          {benefits.map((benefit, idx) => (
            <BlurFade key={idx} delay={0.5 + idx * 0.1}>
              <div className="p-6 rounded-xl border border-border/50 bg-card backdrop-blur-sm hover:border-accent/50 hover:shadow-lg transition-all">
                <benefit.icon className={`w-12 h-12 mb-4 ${benefit.color}`} />
                <h4 className="text-xl font-semibold mb-2">{benefit.title}</h4>
                <p className="text-muted-foreground">{benefit.description}</p>
              </div>
            </BlurFade>
          ))}
        </div>

        {/* FAQ */}
        <BlurFade delay={0.9}>
          <h3 className="text-3xl font-bold text-center mb-8">
            {t("faq.title")}
          </h3>
          <Accordion
            type="single"
            collapsible
            className="max-w-3xl mx-auto mb-20"
          >
            {faqItems.map((item, idx) => (
              <AccordionItem key={idx} value={`item-${idx}`}>
                <AccordionTrigger className="text-left text-lg font-semibold">
                  {item.question}
                </AccordionTrigger>
                <AccordionContent className="text-muted-foreground">
                  {item.answer}
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </BlurFade>

        {/* CTA Section */}
        <BlurFade delay={1.0}>
          <div className="relative p-12 rounded-2xl bg-card border border-border backdrop-blur-sm text-center">
            <Badge className="mb-4 bg-accent/20 text-accent-foreground">
              ✨ Primeiras 3 transações sem taxa!
            </Badge>
            <h3 className="text-3xl font-bold mb-6">{t("cta.title")}</h3>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button size="lg" className="bg-primary hover:bg-primary/90">
                {t("cta.createOffer")}
              </Button>
              <Dialog>
                <DialogTrigger asChild>
                  <Button
                    size="lg"
                    variant="outline"
                    className="border-border/50"
                  >
                    {t("cta.watchVideo")}
                  </Button>
                </DialogTrigger>
                <DialogContent className="max-w-4xl">
                  <div className="aspect-video bg-muted rounded-lg flex items-center justify-center">
                    <p className="text-muted-foreground">
                      Vídeo explicativo aqui
                    </p>
                  </div>
                </DialogContent>
              </Dialog>
            </div>
          </div>
        </BlurFade>

        {/* Barra de Estatísticas */}
        <div className="mt-16 grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
          {stats.map((stat, idx) => (
            <BlurFade key={idx} delay={1.1 + idx * 0.1}>
              <div>
                <p className="text-3xl font-bold text-accent mb-2">
                  <NumberTicker value={stat.value} />
                  {stat.suffix}
                </p>
                <p className="text-sm text-muted-foreground">{stat.label}</p>
              </div>
            </BlurFade>
          ))}
        </div>
      </div>
    </section>
  );
}