import { Book, Download, Share2 } from "lucide-react";

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

interface Resource1Props {
  className?: string;
}

const Resource1 = ({ className }: Resource1Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container grid gap-12 md:grid-cols-12 md:gap-8">
        <div className="order-last md:order-none md:col-span-4 lg:col-span-3">
          <aside className="flex flex-col gap-2">
            <div className="mb-6 overflow-hidden rounded-lg border border-border bg-card shadow-sm">
              <div className="border-b border-border bg-muted/50 px-5 py-4">
                <h3 className="flex items-center text-sm font-semibold">
                  <Book className="ms-2.5 size-3.5 text-muted-foreground" />
                  سند راهنما
                </h3>
              </div>
              <div className="p-5">
                <div className="gap-4 text-lg leading-snug font-semibold text-foreground">
                  <p>راهنمای جامع راه‌اندازی استارتاپ</p>
                </div>
              </div>
            </div>

            <div className="mb-6 overflow-hidden rounded-lg border border-border bg-card shadow-sm">
              <div className="border-b border-border bg-muted/50 px-5 py-4">
                <h3 className="flex items-center text-sm font-semibold">
                  <Download className="ms-2.5 size-3.5 text-muted-foreground" />
                  گزینه‌های دانلود
                </h3>
              </div>
              <div className="p-5">
                <div className="space-y-4">
                  <p className="text-start text-sm text-muted-foreground">
                    از این راهنما لذت بردید؟ برای مطالعه آفلاین یا
                    اشتراک‌گذاری، آن را دانلود کنید.
                  </p>
                  <div className="flex flex-col space-y-2">
                    <Button
                      className="w-full justify-between"
                      variant="default"
                    >
                      فرمت پی‌دی‌اف
                      <Download className="me-2 size-4" />
                    </Button>
                    <Button
                      className="w-full justify-between"
                      variant="outline"
                    >
                      نسخه چاپی
                      <Download className="me-2 size-4" />
                    </Button>
                  </div>
                  <p className="mt-4 text-center text-xs text-muted-foreground">
                    زمان مطالعه: ۵ دقیقه
                  </p>
                </div>
              </div>
            </div>

            <div className="mb-6 overflow-hidden rounded-lg border border-border bg-card shadow-sm">
              <div className="border-b border-border bg-muted/50 px-5 py-4">
                <h3 className="flex items-center text-sm font-semibold">
                  <Share2 className="ms-2.5 size-3.5 text-muted-foreground" />
                  اشتراک‌گذاری این راهنما
                </h3>
              </div>
              <div className="p-5">
                <ul className="flex items-center gap-2">
                  <li>
                    <a
                      href="#"
                      className="flex size-10 items-center justify-center rounded-full border border-border bg-muted/50 transition-colors hover:bg-muted"
                      aria-label="اشتراک در اینستاگرام"
                    >
                      <img
                        src="/block-media/shadcnblocks/block/logos/instagram-icon.svg"
                        alt="اینستاگرام"
                        className="size-5"
                      />
                    </a>
                  </li>
                  <li>
                    <a
                      href="#"
                      className="flex size-10 items-center justify-center rounded-full border border-border bg-muted/50 transition-colors hover:bg-muted"
                      aria-label="اشتراک در لینکدین"
                    >
                      <img
                        src="/block-media/shadcnblocks/block/logos/linkedin-icon.svg"
                        alt="لینکدین"
                        className="size-5"
                      />
                    </a>
                  </li>
                  <li>
                    <a
                      href="#"
                      className="flex size-10 items-center justify-center rounded-full border border-border bg-muted/50 transition-colors hover:bg-muted"
                      aria-label="اشتراک در پروداکت هانت"
                    >
                      <img
                        src="/block-media/shadcnblocks/block/logos/producthunt-icon.svg"
                        alt="پروداکت هانت"
                        className="size-5"
                      />
                    </a>
                  </li>
                  <li>
                    <a
                      href="#"
                      className="flex size-10 items-center justify-center rounded-full border border-border bg-muted/50 transition-colors hover:bg-muted"
                      aria-label="اشتراک در توییتر"
                    >
                      <img
                        src="/block-media/shadcnblocks/block/logos/twitter-icon.svg"
                        alt="توییتر"
                        className="size-5"
                      />
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </aside>
        </div>
        <div className="md:col-span-7 md:col-start-5 lg:col-start-6">
          <article className="prose prose-sm dark:prose-invert text-start">
            <h1>وایت‌پیپر: راهنمای جامع راه‌اندازی استارتاپ SaaS</h1>
            <p>
              راه‌اندازی یک محصول نرم‌افزاری B2B نیازمند برنامه‌ریزی دقیق در
              حوزه‌های محصول، فروش و بازاریابی است. این راهنما چارچوب عملی
              برای ساخت MVP، جذب اولین مشتریان و رسیدن به درآمد تکرارشونده را
              ارائه می‌دهد.
            </p>
            <h2>تعریف بازار هدف</h2>
            <p>
              پیش از نوشتن حتی یک خط کد، باید{" "}
              <a href="#">پرسونای خریدار</a> و مشکل اصلی او را مشخص کنید.
            </p>
            <blockquote>
              بهترین استارتاپ‌های SaaS مشکلی را حل می‌کنند که مشتریان فعلی
              برای آن بودجه اختصاص داده‌اند، نه مشکلی که فقط «خوب است داشته باشند».
            </blockquote>
            <h3>تحقیق مشتری</h3>
            <p>
              با حداقل ۲۰ مصاحبه با مدیران فروش، بازاریابی و عملیات شروع کنید:
            </p>
            <ul>
              <li>بزرگ‌ترین چالش روزانه آن‌ها چیست؟</li>
              <li>اکنون این مشکل را چگونه حل می‌کنند؟</li>
              <li>چه مبلغی برای راه‌حل بهتر پرداخت می‌کنند؟</li>
            </ul>
            <p>
              الگوهای تکراری در پاسخ‌ها، هسته ارزش پیشنهادی محصول شما را
              شکل می‌دهند.
            </p>
            <h3>ساخت MVP</h3>
            <p>
              MVP باید یک جریان کاری اصلی را به‌طور کامل پوشش دهد؛ نه تمام
              قابلیت‌های آینده. برای سامانه مدیریت ارتباط با مشتری، این معمولاً مدیریت لید و پیگیری
              معامله است.
            </p>
            <p>
              تیم‌های موفق MVP خود را ظرف ۶ تا ۸ هفته به ۳ تا ۵ مشتری آزمایشی
              ارائه می‌دهند و بازخورد را هفتگی جمع‌آوری می‌کنند.
            </p>
            <h3>مدل قیمت‌گذاری</h3>
            <p>
              قیمت‌گذاری بر اساس ارزش تحویل‌داده‌شده (تعداد کاربر، حجم داده یا
              تعداد معامله) معمولاً بهتر از قیمت ثابت عمل می‌کند.
            </p>
            <div>
              <table>
                <thead>
                  <tr>
                    <th>پلن</th>
                    <th>مشتری هدف</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>استارتر</td>
                    <td>تیم‌های ۱ تا ۵ نفره</td>
                  </tr>
                  <tr className="m-0 border-t p-0 even:bg-muted">
                    <td>حرفه‌ای</td>
                    <td>شرکت‌های در حال رشد</td>
                  </tr>
                  <tr className="m-0 border-t p-0 even:bg-muted">
                    <td>سازمانی</td>
                    <td>سازمان‌های بزرگ</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <p>
              مشتریان اولیه را با تخفیف سالانه جذب کنید، اما از همان ابتدا
              قیمت واقعی را نشان دهید تا وابستگی به تخفیف ایجاد نشود.
            </p>
            <p>
              هدف سه‌ماهه اول: ۱۰ مشتری پرداخت‌کننده، نرخ ریزش زیر ۵٪ و
              NPS بالای ۴۰.
            </p>
          </article>
        </div>
      </div>
    </section>
  );
};

export { Resource1 };