aragrp/components/playground/playground-guide.tsx

import { Container } from "@/components/container";
import {
  GUIDE_BENEFITS,
  GUIDE_SCENARIOS,
  GUIDE_USE_CASES,
} from "./playground-content";
import { layout } from "@/lib/layout";
import { type, typeSpacing } from "@/lib/typography";
import { cn } from "@/lib/utils";

export function PlaygroundGuide() {
  return (
    <div className="border-t bg-muted/20">
      <section className={cn("section-shell", layout.sectionY)}>
        <Container>
          <div className={cn("mx-auto max-w-3xl text-center", typeSpacing.sectionStack)}>
            <h2 className={type.h2}>
              در آزمایشگاه فیپ چه کارهایی می‌توانید انجام دهید؟
            </h2>
            <p className={cn(type["body-sm"], "text-muted-foreground md:text-base")}>
              این بخش برای آشنایی با قابلیت‌های آزمایشگاه فیپ است؛ نه بخشی از
              تاریخچه گفتگو.
            </p>
          </div>

          <div className="mt-8 grid gap-4 sm:grid-cols-2">
            {GUIDE_USE_CASES.map((item) => (
              <div
                key={item.title}
                className="rounded-2xl border bg-card/80 p-5"
              >
                <h3 className={type["card-title"]}>
                  {item.title}
                </h3>
                <p className={cn(type["card-desc"], "mt-2")}>
                  {item.description}
                </p>
              </div>
            ))}
          </div>
        </Container>
      </section>

      <section className={cn("section-shell border-t bg-section-canvas", layout.sectionY)}>
        <Container>
          <div className={cn("mx-auto max-w-3xl text-center", typeSpacing.sectionStack)}>
            <h2 className={type.h2}>
              سناریوهای قابل آزمایش
            </h2>
            <p className={cn(type["body-sm"], "text-muted-foreground md:text-base")}>
              نمونه‌هایی از حوزه‌هایی که می‌توانید در گفتگو امتحان کنید.
            </p>
          </div>

          <div className="mt-8 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
            {GUIDE_SCENARIOS.map((item) => (
              <div
                key={item.title}
                className="rounded-xl border bg-muted/30 p-4"
              >
                <h3 className={type["card-title"]}>{item.title}</h3>
                <p className={cn(type["body-sm"], "mt-1.5 text-muted-foreground")}>
                  {item.description}
                </p>
              </div>
            ))}
          </div>
        </Container>
      </section>

      <section className={cn("section-shell border-t bg-section-muted", layout.sectionY)}>
        <Container>
          <div className="mx-auto max-w-3xl rounded-2xl border bg-card p-6 md:p-8">
            <h2 className={type.h2}>
              چرا آزمایشگاه فیپ مهم است؟
            </h2>
            <p className={cn(type["body-sm"], "mt-3 text-muted-foreground md:text-base")}>
              قبل از اتصال به سیستم‌های واقعی، تیم‌ها می‌توانند ایده‌ها و پاسخ‌ها
              را در فضایی امن و کنترل‌شده ارزیابی کنند.
            </p>
            <ul className="mt-6 space-y-3">
              {GUIDE_BENEFITS.map((benefit) => (
                <li
                  key={benefit}
                  className={cn("flex gap-2", type.body, "text-muted-foreground md:text-base")}
                >
                  <span className="mt-2 size-1.5 shrink-0 rounded-full bg-primary" />
                  <span>{benefit}</span>
                </li>
              ))}
            </ul>
          </div>
        </Container>
      </section>
    </div>
  );
}