import { ArrowUpRight } from "lucide-react";

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

const profile = {
  title: "کسب‌وکار نوپا سامانه ابری",
  subtitle: "ساخت آینده بهره‌وری",
  bio: `تیمی پرشور از نوآوران هستیم که راهکارهای SaaS پیشرفته می‌سازیم تا کسب‌وکارها عملیات خود را ساده‌تر کنند و بهره‌وری را بالا ببرند. مأموریت ما نرم‌افزاری است که نه‌تنها مشکلات امروز را حل کند، بلکه چالش‌های فردا را پیش‌بینی کند.`,
  vision: `به قدرت فناوری برای تحول نحوه کار کسب‌وکارها باور داریم. هدف ما ساخت راهکارهای شهودی و مقیاس‌پذیر است که با مشتریان رشد کند و به نیازهای در حال تغییر آن‌ها سازگار شود.`,
  outro: `به هزاران کسب‌وکاری بپیوندید که به پلتفرم ما برای موفقیت خود اعتماد دارند. بیایید با هم چیزی شگفت‌انگیز بسازیم.`,
  team: [
    { id: "01", item: "مریم چناری", type: "مدیرعامل و هم‌بنیان‌گذار" },
    { id: "02", item: "مهدی محمدی", type: "مدیر فناوری و هم‌بنیان‌گذار" },
    { id: "03", item: "الهام حسینی", type: "سرپرست محصول" },
    { id: "04", item: "داوود کیمیایی", type: "مهندس ارشد" },
    { 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 };