aragrp/components/content-1.tsx

import Image from "next/image";
import { Container } from "@/components/container";
import { getHomeImages } from "@/lib/home-images";
import { layout } from "@/lib/layout";
import { type } from "@/lib/typography";
import { cn } from "@/lib/utils";

export default function ContentSection() {
  const { ecosystem } = getHomeImages();

  return (
    <section className={cn("section-shell bg-section-canvas", layout.sectionY)}>
      <Container className="space-y-8 md:space-y-16">
        <h2 className={cn("relative z-10 max-w-xl", type.h2)}>
          اکوسیستم فیپ: راهکارهای یکپارچه برای کسب‌وکارهای هوشمند
        </h2>
        <div className="grid gap-6 sm:grid-cols-2 md:gap-12 lg:gap-24">
          <div className="relative mb-6 sm:mb-0">
            <div className="bg-linear-to-b aspect-[3/2] relative overflow-hidden rounded-2xl from-brand-light to-transparent p-px dark:from-brand-gray/40">
              <div className="relative size-full overflow-hidden rounded-[15px] bg-muted">
                <Image
                  src={ecosystem.light.src}
                  className="size-full object-cover dark:hidden"
                  alt="مرکز کنترل گردش کار هوشمند"
                  width={ecosystem.light.width}
                  height={ecosystem.light.height}
                  quality={100}
                  sizes="(max-width: 768px) 100vw, 50vw"
                />
                <Image
                  src={ecosystem.dark.src}
                  className="hidden size-full object-cover dark:block"
                  alt="مرکز کنترل گردش کار هوشمند"
                  width={ecosystem.dark.width}
                  height={ecosystem.dark.height}
                  quality={100}
                  sizes="(max-width: 768px) 100vw, 50vw"
                />
              </div>
            </div>
          </div>

          <div className="relative space-y-4">
            <p className={cn(type.body, "text-muted-foreground")}>
              فیپ یک گروه متخصص است که در حوزه اینتگریشن و روش‌های نوین یکپارچه‌سازی فعالیت می‌کند.{" "}
              <span className="text-primary font-bold">
                ما با استفاده از تکنولوژی‌های پیشرفته و رویکردهای نوآورانه
              </span>{" "}
              به کسب‌وکارها کمک می‌کنیم تا سیستم‌های خود را به شکلی کارآمد و قابل‌اعتماد بهم متصل کنند.
            </p>
            <p className={cn(type.body, "text-muted-foreground")}>
              ما در زمینه یکپارچه‌سازی سیستم‌ها، اتوماسیون فرآیندها، ارتباطات چندکاناله و مدیریت داده‌ها تخصص داریم. با استفاده از روش‌های نوین و ابزارهای پیشرفته، راهکارهای سفارشی برای هر کسب‌وکار طراحی و پیاده‌سازی می‌کنیم که به آن‌ها امکان می‌دهد تا از قدرت اتوماسیون و ارتباطات هوشمند بهره‌مند شوند.
            </p>

            <div className="pt-6">
              <blockquote className="border-s-4 border-primary/30 ps-4">
                <p className={type.body}>
                  ماموریت ما این است که با استفاده از روش‌های نوین اینتگریشن، به کسب‌وکارها کمک کنیم تا
                  بدون پیچیدگی‌های فنی، سیستم‌های خود را بهم متصل کنند و به اهداف خود برسند.
                </p>

                <div className="mt-6 space-y-3">
                  <div className={cn(type.emphasis, "not-italic")}>ماموریت فیپ</div>
                </div>
              </blockquote>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}