import {
  BookOpen,
  Calendar,
  FileSpreadsheetIcon,
  Images,
  Lightbulb,
  Plus,
  Share2,
  ShoppingBag,
} from "lucide-react";

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";

interface Content2Props {
  className?: string;
}

const Content2 = ({ className }: Content2Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container max-w-5xl">
        <div>
          <div>
            <Badge variant="outline">ویژگی‌ها</Badge>
            <h1 className="mt-3 text-3xl font-extrabold">مدیریت و انتشار محتوا</h1>
            <p className="mt-2 text-lg text-muted-foreground">
              با یک سامانه مدیریت محتوا می‌توانید مقالات، محصولات، نمونه‌کارها و سایر اطلاعات را به‌صورت متمرکز مدیریت و منتشر کنید.
                                      </p>
            <img
              src="/block-media/shadcnblocks/block/placeholder-1.svg"
              alt="تصویر مقاله"
              className="my-8 aspect-video w-full rounded-md object-cover"
            />
          </div>
          <section className="mb-8">
            <h2 className="mb-6 text-xl font-bold">انواع محتوا</h2>
            <div className="grid gap-4 md:grid-cols-2">
              <a
                href="#"
                className="flex items-center gap-3 rounded-xl border px-6 py-5 text-start hover:border-primary"
              >
                <FileSpreadsheetIcon className="h-6 w-6 shrink-0" />
                <div>
                  <h2 className="font-semibold">پروژه‌ها</h2>
                  <p className="text-sm text-muted-foreground">
                    نمونه پروژه‌ها و دستاوردهای خود را با توضیحات کامل منتشر کنید.
                                                        </p>
                </div>
              </a>

              <a
                href="#"
                className="flex items-center gap-3 rounded-xl border px-6 py-5 text-start hover:border-primary"
              >
                <ShoppingBag className="h-6 w-6 shrink-0" />
                <div>
                  <h2 className="font-semibold">محصولات</h2>
                  <p className="text-sm text-muted-foreground">
                    محصولات و خدمات خود را همراه با مشخصات و تصاویر معرفی کنید.
                                                        </p>
                </div>
              </a>
              <a
                href="#"
                className="flex items-center gap-3 rounded-xl border px-6 py-5 text-start hover:border-primary"
              >
                <Images className="h-6 w-6 shrink-0" />
                <div>
                  <h2 className="font-semibold">گالری</h2>
                  <p className="text-sm text-muted-foreground">
                    گالری تصاویر و محتوای چندرسانه‌ای را به‌سادگی مدیریت کنید.
                                                        </p>
                </div>
              </a>
              <a
                href="#"
                className="flex items-center gap-3 rounded-xl border px-6 py-5 text-start hover:border-primary"
              >
                <Calendar className="h-6 w-6 shrink-0" />
                <div>
                  <h2 className="font-semibold">رویدادها</h2>
                  <p className="text-sm text-muted-foreground">
                    همایش‌ها، وبینارها و رویدادهای آینده را اطلاع‌رسانی کنید.
                                                        </p>
                </div>
              </a>
              <a
                href="#"
                className="flex items-center gap-3 rounded-xl border px-6 py-5 text-start hover:border-primary"
              >
                <Share2 className="h-6 w-6 shrink-0" />
                <div>
                  <h2 className="font-semibold">شبکه‌های اجتماعی</h2>
                  <p className="text-sm text-muted-foreground">
                    کاربران را به کانال‌ها و شبکه‌های اجتماعی رسمی هدایت کنید.
                                                        </p>
                </div>
              </a>
              <a
                href="#"
                className="flex items-center gap-3 rounded-xl border px-6 py-5 text-start hover:border-primary"
              >
                <BookOpen className="h-6 w-6 shrink-0" />
                <div>
                  <h2 className="font-semibold">وبلاگ</h2>
                  <p className="text-sm text-muted-foreground">
                    مقالات آموزشی، اخبار و اطلاعیه‌های جدید را منتشر کنید.
                                                        </p>
                </div>
              </a>
              <a
                href="#"
                className="flex items-center gap-3 rounded-xl border px-6 py-5 text-start hover:border-primary"
              >
                <Plus className="h-6 w-6 shrink-0" />
                <div>
                  <h2 className="font-semibold">سفارشی</h2>
                  <p className="text-sm text-muted-foreground">
                    هر نوع محتوای سفارشی یا پیوند به منابع خارجی را اضافه کنید.
                                                        </p>
                </div>
              </a>
            </div>
          </section>

          <section className="prose mb-8 text-start dark:prose-invert">
            <h2>افزودن محتوا</h2>
            <ol>
              <li>
                به بخش <strong>محتوا</strong> بروید و روی <strong>جدید</strong>{" "}
                در بالای صفحه کلیک کنید.
              </li>
              <li>نوع محتوا را انتخاب کنید و اطلاعات لازم را پر کنید.</li>
              <li>
                توضیحات را بنویسید، در صورت نیاز رسانه بارگذاری کنید و روی{" "}
                <strong>ذخیره</strong> بزنید.
              </li>
            </ol>
            <Alert>
              <Lightbulb className="h-4 w-4" />
              <AlertTitle>نکته</AlertTitle>
              <AlertDescription>
                با استفاده از قالب‌های آماده و بارگذاری گروهی، سرعت تولید و انتشار محتوا را افزایش دهید.
                                            </AlertDescription>
            </Alert>
          </section>
          <section className="prose mb-8 text-start dark:prose-invert">
            <h2>مدیریت و انتشار محتوا</h2>
            <ol>
              <li>
                به بخش <strong>محتوا</strong> بروید و موردی را که می‌خواهید
                ویرایش کنید پیدا کنید.
              </li>
              <li>
                روی <strong>منوی گزینه‌ها</strong> (سه‌نقطه) کلیک کنید و{" "}
                <strong>ویرایش</strong> را انتخاب کنید.
              </li>
              <li>
                اطلاعات را به‌روزرسانی کنید و روی <strong>ذخیره</strong> بزنید.
              </li>
            </ol>
          </section>
        </div>
      </div>
    </section>
  );
};

export { Content2 };