aragrp/components/blog-8.tsx

import { ArrowLeft } from "lucide-react";

import { Container } from "@/components/container";
import { MotionReveal, MotionRevealItem } from "@/components/motion-reveal";
import { Button } from "@/components/ui/button";
import { layout } from "@/lib/layout";
import { type } from "@/lib/typography";
import { cn } from "@/lib/utils";

interface Post {
  id: string;
  title: string;
  summary: string;
  author: string;
  published: string;
  url: string;
  image: string;
  tags?: string[];
}

interface Blog8Props {
  heading?: string;
  description?: string;
  posts?: Post[];
  button?: {
    text: string;
    url: string;
  };
  className?: string;
}

const defaultPosts: Post[] = [
  {
    id: "post-1",
    title: "طراحی رابط کاربری مدرن با کامپوننت‌های React",
    summary:
      "نگاهی عملی به ساخت رابط‌های کاربری مدرن با React و کامپوننت‌های آماده؛ از ساختار تا جزئیات تجربه کاربری.",
    author: "امین رایان",
    published: "۱۵ بهمن ۱۴۰۳",
    url: "#",
    image: "/assets/main-pic/201.jpg",
    tags: ["طراحی وب", "تجربه کاربری"],
  },
  {
    id: "post-2",
    title: "سئو و رشد دیده شدن کسب‌وکار در گوگل",
    summary:
      "چطور با بهینه‌سازی فنی و محتوایی، وب‌سایت‌تان در نتایج جستجو بهتر دیده شود و مشتری بیشتری جذب کند.",
    author: "امین رایان",
    published: "۲۲ بهمن ۱۴۰۳",
    url: "#",
    image: "/assets/main-pic/202.jpg",
    tags: ["سئو", "بازاریابی دیجیتال"],
  },
  {
    id: "post-3",
    title: "اتوماسیون فرآیندها برای کسب‌وکارهای در حال رشد",
    summary:
      "چگونه با یکپارچه‌سازی سیستم‌ها و اتوماسیون کارهای تکراری، تیم‌تان سریع‌تر و دقیق‌تر کار کند.",
    author: "امین رایان",
    published: "۵ اسفند ۱۴۰۳",
    url: "#",
    image: "/assets/main-pic/203.jpg",
    tags: ["اتوماسیون", "یکپارچه‌سازی"],
  },
];

export function Blog8({
  heading = "مجله و آخرین اخبار امین رایان",
  description = "نکات کاربردی درباره طراحی سایت، سئو و رشد آنلاین کسب‌وکار؛ از تجربه تیم امین رایان.",
  posts = defaultPosts,
  button = {
    text: "مشاهده همه مقالات",
    url: "#",
  },
  className,
}: Blog8Props) {
  return (
    <section
      id="blog"
      className={cn(
        "section-shell bg-section-canvas",
        layout.scrollMargin,
        layout.sectionY,
        className
      )}
    >
      <Container className="section-content flex flex-col gap-12 md:gap-16">
        <MotionReveal className="w-full">
          <h2 className={cn(type.h2, "mb-4 md:mb-6")}>{heading}</h2>
          <p className={cn(type["section-intro"], "max-w-2xl")}>
            {description}
          </p>
        </MotionReveal>

        <MotionReveal
          stagger
          className="grid w-full grid-cols-1 gap-8 sm:grid-cols-2 sm:gap-x-6 sm:gap-y-10 md:gap-x-8 md:gap-y-12 lg:gap-x-10"
        >
          {posts.map((post) => (
            <MotionRevealItem key={post.id} className="h-full">
              <a
                href={post.url}
                className={cn(
                  "group flex h-full items-start gap-4 rounded-2xl border border-border/50 p-4 shadow-sm md:gap-5 md:p-5",
                  "bg-background/75 supports-[backdrop-filter]:bg-background/65",
                  "backdrop-blur-xl backdrop-saturate-150",
                  "transition-[border-color,box-shadow,color] duration-200",
                  "hover:border-primary/30 hover:shadow-glow-sm",
                  "dark:hover:border-primary/40",
                  "focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/40"
                )}
              >
                {/* RTL: first = right → تصویر کوچک سمت راست */}
                <div className="w-1/4 shrink-0">
                  <div className="aspect-square overflow-hidden rounded-xl border border-surface">
                    <img
                      src={post.image}
                      alt=""
                      className="h-full w-full object-cover"
                    />
                  </div>
                </div>

                <div className="flex min-w-0 flex-1 flex-col">
                  <h3
                    className={cn(
                      type.h3,
                      "text-foreground transition-colors duration-200 group-hover:text-primary"
                    )}
                  >
                    {post.title}
                  </h3>

                  <p
                    className={cn(
                      type["body-sm"],
                      "mt-2 font-normal text-muted-foreground md:mt-3"
                    )}
                  >
                    {post.summary}
                  </p>
                </div>
              </a>
            </MotionRevealItem>
          ))}
        </MotionReveal>

        <MotionReveal className="flex justify-center">
          <Button asChild size="lg">
            <a href={button.url}>
              {button.text}
              <ArrowLeft />
            </a>
          </Button>
        </MotionReveal>
      </Container>
    </section>
  );
}