import { Download, Monitor, Mail, BarChart3 } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { cn } from "@/lib/utils";

interface Download1Props {
  heading?: string;
  description?: string;

  platforms?: {
    desktop?: {
      title: string;
      subtitle: string;
      description: string;
      buttonText: string;
      url: string;
    };
    ios?: {
      title: string;
      subtitle: string;
      description: string;
      buttonText: string;
      url: string;
    };
    android?: {
      title: string;
      subtitle: string;
      description: string;
      buttonText: string;
      url: string;
    };
  };
  className?: string;
}

const Download1 = ({
  heading = "ابزارهای فروش و بازاریابی را دانلود کنید",
  description =
    "گزارش‌های فروش، قالب‌های ایمیل مارکتینگ و داشبوردهای آماری را دریافت کنید—برای رشد کسب‌وکار شما.",
  platforms = {
    desktop: {
      title: "داشبورد فروش",
      subtitle: "نسخه دسکتاپ",
      description:
        "داشبورد کامل مدیریت قیف فروش، گزارش‌گیری و پیش‌بینی درآمد—بهینه برای صفحه‌نمایش بزرگ.",
      buttonText: "دانلود",
      url: "#",
    },
    ios: {
      title: "قالب‌های ایمیل",
      subtitle: "۵۰+ قالب آماده",
      description:
        "قالب‌های حرفه‌ای ایمیل مارکتینگ برای پیگیری سرنخ‌ها و ارسال پیشنهادات فروش.",
      buttonText: "دانلود",
      url: "#",
    },
    android: {
      title: "گزارش‌های آماری",
      subtitle: "قالب‌های اکسل و گوگل شیت",
      description:
        "قالب‌های آماده برای گزارش‌گیری هفتگی، ماهانه و فصلی فروش تیم شما.",
      buttonText: "دانلود",
      url: "#",
    },
  },
  className,
}: Download1Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("bg-muted/30 py-32", className)}
    >
      <div className="container">
        <div className="mb-16 text-center">
          <h2 className="mb-6 text-xl font-bold tracking-tight sm:text-xl md:text-2xll lg:text-2xll">
            {heading}
          </h2>
          <p className="mx-auto mb-8 max-w-2xl text-lg text-muted-foreground">
            {description}
          </p>
        </div>

        <div className="mx-auto grid max-w-5xl gap-6 md:grid-cols-3">
          <Card className="flex flex-col border-0 bg-muted p-6 text-foreground">
            <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-foreground/10">
              <Monitor className="h-6 w-6" />
            </div>
            <div className="mb-4 flex-1">
              <p className="mb-1 text-sm">{platforms.desktop?.title}</p>
              <h3 className="mb-3 text-xl font-bold" dir="rtl">
                {platforms.desktop?.subtitle}
              </h3>
              <p className="text-sm leading-relaxed">
                {platforms.desktop?.description}
              </p>
            </div>
            <div>
              <Button className="w-auto" size="lg" asChild>
                <a
                  href={platforms.desktop?.url}
                  className="inline-flex items-center gap-2"
                >
                  {platforms.desktop?.buttonText}
                  <Download className="h-4 w-4" />
                </a>
              </Button>
            </div>
          </Card>

          <Card className="flex flex-col border-border bg-background p-6">
            <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-muted">
              <Mail className="h-6 w-6" />
            </div>
            <div className="mb-6 flex-1">
              <p className="mb-1 text-sm text-muted-foreground">
                {platforms.ios?.title}
              </p>
              <h3 className="mb-3 text-xl font-bold" dir="rtl">
                {platforms.ios?.subtitle}
              </h3>
              <p className="text-sm leading-relaxed text-muted-foreground">
                {platforms.ios?.description}
              </p>
            </div>
            <div>
              <Button className="w-auto" size="lg" asChild>
                <a
                  href={platforms.ios?.url}
                  className="inline-flex items-center gap-2"
                >
                  {platforms.ios?.buttonText}
                  <Download className="h-4 w-4" />
                </a>
              </Button>
            </div>
          </Card>

          <Card className="flex flex-col border-border bg-background p-6">
            <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-muted">
              <BarChart3 className="h-6 w-6" />
            </div>
            <div className="mb-6 flex-1">
              <p className="mb-1 text-sm text-muted-foreground">
                {platforms.android?.title}
              </p>
              <h3 className="mb-3 text-xl font-bold" dir="rtl">
                {platforms.android?.subtitle}
              </h3>
              <p className="text-sm leading-relaxed text-muted-foreground">
                {platforms.android?.description}
              </p>
            </div>
            <div>
              <Button className="w-auto" size="lg" asChild>
                <a
                  href={platforms.android?.url}
                  className="inline-flex items-center gap-2"
                >
                  {platforms.android?.buttonText}
                  <Download className="h-4 w-4" />
                </a>
              </Button>
            </div>
          </Card>
        </div>
      </div>
    </section>
  );
};

export { Download1 };