import React from "react";

import { cn } from "@/lib/utils";

interface About14Props {
  className?: string;
}

const About14 = ({ className }: About14Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container space-y-10 lg:space-y-20">
        <div className="w-full grid-cols-6 gap-10 space-y-5 lg:grid lg:space-y-0">
          <h1 className="col-span-2 text-2xll font-semibold tracking-tight lg:text-2xll">
            درباره ما
          </h1>
          <div />
        </div>
        <div>
          <img
            src="/block-media/shadcnblocks/block/guri4/img1.png"
            alt="داشبورد موج‌مارکت"
            className="mt-4 h-132 w-full object-cover"
          />
        </div>
        <div className="grid grid-cols-1 gap-10 space-y-12 lg:grid-cols-6 lg:space-y-0">
          <p className="hidden text-foreground lg:block">موج‌مارکت</p>
          <div className="order-2 col-span-2 lg:order-none lg:pr-24 lg:pl-10">
            <p className="text-foreground/40">
              موج‌مارکت کمپین‌های ایمیلی، صفحات فرود و امتیازدهی لید را برای تیم‌های بازاریابی B2B یکپارچه می‌کند.
            </p>
            <div className="mt-5 flex items-center gap-5 lg:mt-12">
              <img
                src="/block-media/shadcnblocks/block/guri3/avatar1.png"
                className="size-12"
                alt="آواتار"
              />
              <div>
                <h3 className="text-lg font-medium tracking-tight">علی رضایی</h3>
                <p className="text-sm text-foreground/40">مدیر کمپین</p>
              </div>
            </div>
          </div>
          <div className="order-1 col-span-3 lg:order-none lg:mt-0 lg:pl-10">
            <h2 className="text-xl font-medium tracking-tight lg:text-3xl">
              ما تیم موج‌مارکت هستیم. ابزارهایی می‌سازیم که بازاریابی تقاضا را سریع‌تر اجرا کند، لید را تمیز نگه دارد و اثر کمپین روی درآمد را نشان دهد.
            </h2>
          </div>
        </div>
      </div>
    </section>
  );
};

export { About14 };