import { ArrowUpRight } from "lucide-react";

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

const profile = {
  title: "لیدهاب",
  subtitle: "CRM برای تیم‌های فروش در حال رشد",
  bio: `لیدهاب CRM سبک و قدرتمند برای تیم‌های فروش B2B است. مخاطبین، فرصت‌ها و فعالیت‌ها در یک جا می‌مانند تا هیچ لیدی از دست نرود.`,
  vision: `فروش وقتی مقیاس می‌گیرد که داده‌ها تمیز، قابل جست‌وجو و متصل به کمپین باشند. لیدهاب برای رشد تدریجی تیم فروش طراحی شده است؛ از ۳ نفر تا ۳۰۰ نفر.`,
  outro: `به هزاران تیم فروشی بپیوندید که پایپ‌لاین خود را با لیدهاب شفاف و قابل پیش‌بینی کرده‌اند.`,
  team: [
    { id: "01", item: "مریم چناری", type: "مدیرعامل و هم‌بنیان‌گذار" },
    { id: "02", item: "مهدی محمدی", type: "مدیر فناوری و هم‌بنیان‌گذار" },
    { id: "03", item: "الهام حسینی", type: "مدیر محصول" },
    { id: "04", item: "داوود کیمیایی", type: "مهندس ارشد CRM" },
    { id: "05", item: "لیلا احمدی", type: "مدیر تجربه محصول" },
    { id: "06", item: "امیر جعفری", type: "مدیر رشد" },
    { id: "07", item: "راحله سبز", type: "مدیر فروش سازمانی" },
  ],
};

interface About10Props {
  className?: string;
}

const About10 = ({ className }: About10Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col-reverse gap-5 md:flex-row md:gap-12">
          <div className="w-full md:w-1/3 md:pr-4">
            <div className="sticky top-20 md:p-6">
              <div className="mb-8">
                <div className="mb-6 flex items-center gap-4">
                  <img
                    src="/block-media/shadcnblocks/block/photos/futuristic-device-design-qcufu.png"
                    alt="تیم لیدهاب"
                    className="h-16 w-16 rounded-lg object-cover"
                  />
                  <div>
                    <h3 className="font-semibold">{profile.title}</h3>
                    <p className="text-sm text-muted-foreground">
                      {profile.subtitle}
                    </p>
                  </div>
                </div>
              </div>

              <nav>
                <div className="py-4">
                  <div className="group flex p-0 text-start text-xl font-medium hover:bg-transparent sm:text-xl">
                    <span className="border-b-2 border-border pb-0.5 transition-colors">
                      درخواست دمو
                    </span>
                    <ArrowUpRight className="ml-1 h-6 w-5 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
                  </div>
                </div>
              </nav>
            </div>
          </div>

          <div className="w-full md:w-2/3 md:p-6">
            <div className="max-w-4xl">
              <h1 className="mb-12 text-2xll font-semibold">درباره ما</h1>

              <div className="space-y-12">
                <p className="w-full text-xl leading-[36px] font-medium md:max-w-2xl">
                  {profile.bio}
                </p>

                <div className="grid grid-cols-1 gap-12 lg:grid-cols-2">
                  <h2 className="text-xl font-medium">رویکرد ما</h2>
                  <p className="leading-relaxed">{profile.vision}</p>
                </div>

                <div className="my-12">
                  <img
                    src="/block-media/shadcnblocks/block/lummi/bw12.jpeg"
                    alt="دفتر لیدهاب"
                    className="rounded-2xl object-cover"
                  />
                </div>

                <div>
                  <h2 className="mb-8 text-xl font-medium">تیم ما</h2>
                  <div className="space-y-6">
                    {profile.team.map(({ id, item, type }) => (
                      <div
                        key={id}
                        className="flex items-center justify-between border-b py-4"
                      >
                        <div className="flex items-center gap-4">
                          <span className="font-mono text-sm text-muted-foreground">
                            {id}
                          </span>
                          <span className="text-base">{item}</span>
                        </div>
                        <span className="text-sm text-muted-foreground">
                          {type}
                        </span>
                      </div>
                    ))}
                  </div>
                </div>

                <div className="mt-16">
                  <p className="leading-relaxed">{profile.outro}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { About10 };