import {
  Marquee,
  MarqueeContent,
  MarqueeFade,
  MarqueeItem,
} from "@/components/kibo-ui/marquee";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface About3Props {
  className?: string;
  title: string;
  description?: string;
  mainImage: {
    src: string;
    alt: string;
  };
  secondaryImage: {
    src: string;
    alt: string;
  };
  breakout: {
    src?: string;
    alt?: string;
    title: string;
    description: string;
    buttonText?: string;
    buttonUrl?: string;
  };
  companies?: Array<{
    src: string;
    alt: string;
  }> | null;
  achievementsTitle?: string;
  achievementsDescription?: string;
  achievements?: Array<{
    label: string;
    value: string;
  }>;
  contentSections?: Array<{
    title: string;
    content: string;
  }>;
}

const About3 = ({
  className,
  title = "درباره ما",
  description = "کمپین‌پرو پلتفرم اتوماسیون بازاریابی برای تیم‌های B2B است. ایمیل، لید اسکورینگ و پرورش مخاطب را در یک مسیر واحد هماهنگ می‌کنیم تا هزینه جذب مشتری کاهش و نرخ تبدیل افزایش یابد.",
  mainImage = {
    src: "/block-media/shadcnblocks/block/photos/annie-spratt-MChSQHxGZrQ-unsplash.jpg",
    alt: "about",
  },
  secondaryImage = {
    src: "/block-media/shadcnblocks/block/photos/annie-spratt-AkftcHujUmk-unsplash.jpg",
    alt: "about",
  },
  breakout = {
    src: "/block-media/shadcnblocks/block/block-1.svg",
    alt: "logo",
    title: "اتوماسیون بازاریابی بدون پیچیدگی",
    description:
      "جریان‌های پرورش لید، سگمنت‌بندی هوشمند و گزارش کمپین را در چند دقیقه راه‌اندازی کنید.",
    buttonText: "مشاهده قابلیت‌ها",
    buttonUrl: "https://www.ShadcnBlocks",
  },
  companies = [
    {
      src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg",
      alt: "Arc",
    },
    {
      src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
      alt: "Descript",
    },
    {
      src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
      alt: "Mercury",
    },
    {
      src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg",
      alt: "Ramp",
    },
    {
      src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-5.svg",
      alt: "Retool",
    },
    {
      src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-6.svg",
      alt: "Watershed",
    },
  ],
  achievementsTitle = "نتایج قابل اندازه‌گیری",
  achievementsDescription = "تیم‌های بازاریابی با کمپین‌پرو کمپین‌های چندکاناله را سریع‌تر اجرا و بهتر اندازه‌گیری می‌کنند.",
  achievements = [
    { label: "برندهای فعال", value: "300+" },
    { label: "کمپین ماهانه اجراشده", value: "800+" },
    { label: "نرخ ماندگاری مشتری", value: "99%" },
    { label: "اتصال یکپارچه‌سازی", value: "10+" },
  ],
  contentSections = [
    {
      title: "مأموریت ما",
      content:
        "بازاریابی B2B اغلب بین ابزارهای پراکنده گیر می‌افتد: CRM جدا، ایمیل جدا، آنالیتیکس جدا.\n\nکمپین‌پرو این حلقه را می‌بندد. لید از لحظه جذب تا تحویل به فروش در یک مسیر قابل پیگیری می‌ماند.\n\nسگمنت‌ها بر اساس رفتار به‌روز می‌شوند، کمپین‌ها خودکار اجرا می‌شوند و گزارش‌ها اثر واقعی روی درآمد را نشان می‌دهند.",
    },
    {
      title: "تیم ما",
      content:
        "تیم کمپین‌پرو ترکیبی از متخصصان بازاریابی، محصول و داده است که سال‌ها اصطکاک بین مارکتینگ و فروش را از نزدیک دیده‌اند.\n\nابتدا این جریان‌ها را برای تیم درآمد خودمان ساختیم؛ امروز همان زیرساخت را در اختیار هزاران تیم بازاریابی قرار می‌دهیم.\n\nتمرکز ما روی سرعت اجرا، شفافیت قیف و همسویی با اهداف درآمد است.",
    },
  ],
}: About3Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div className="mb-14 flex flex-col gap-5 lg:w-2/3">
          <h1 className="text-2xll font-semibold tracking-tighter lg:text-2xll">
            {title}
          </h1>
          <p className="text-lg text-muted-foreground md:text-xl">
            {description}
          </p>
        </div>
        <div className="grid gap-7 lg:grid-cols-3">
          <img
            src={mainImage.src}
            alt={mainImage.alt}
            className="size-full max-h-[620px] rounded-xl object-cover lg:col-span-2"
          />
          <div className="flex flex-col gap-7 md:flex-row lg:flex-col">
            <div className="flex flex-col justify-between gap-6 rounded-xl bg-muted p-7 md:w-1/2 lg:w-auto">
              <img
                src={breakout.src}
                alt={breakout.alt}
                className="mr-auto h-12 dark:invert"
              />
              <div>
                <p className="mb-2 text-lg font-semibold">{breakout.title}</p>
                <p className="text-muted-foreground">{breakout.description}</p>
              </div>
              <Button variant="outline" className="mr-auto" asChild>
                <a href={breakout.buttonUrl} target="_blank">
                  {breakout.buttonText}
                </a>
              </Button>
            </div>
            <img
              src={secondaryImage.src}
              alt={secondaryImage.alt}
              className="grow basis-0 rounded-xl object-cover md:w-1/2 lg:min-h-0 lg:w-auto"
            />
          </div>
        </div>
        {companies && (
          <div className="py-32">
            <Marquee>
              <MarqueeContent speed={40}>
                {companies.map((company, idx) => (
                  <MarqueeItem
                    key={company.src + idx}
                    className="mx-8 flex items-center"
                  >
                    <img
                      src={company.src}
                      alt={company.alt}
                      className="h-7 w-auto md:h-8 dark:invert"
                    />
                  </MarqueeItem>
                ))}
              </MarqueeContent>
              <MarqueeFade side="left" />
              <MarqueeFade side="right" />
            </Marquee>
          </div>
        )}
        <div className="relative overflow-hidden rounded-xl bg-muted p-7 md:p-16">
          <div className="flex flex-col gap-4 text-center md:text-start">
            <h2
              className="text-3xl font-medium md:text-xl text-end"
              dir="rtl"
            >
              {achievementsTitle}
            </h2>
            <p className="max-w-xl text-muted-foreground">
              {achievementsDescription}
            </p>
          </div>
          <div className="mt-10 grid grid-cols-2 gap-x-4 gap-y-8 md:flex md:flex-wrap md:justify-between">
            {achievements.map((item, idx) => (
              <div
                className="flex flex-col gap-2 text-center md:text-start"
                key={item.label + idx}
              >
                <span className="font-mono text-xl font-semibold md:text-2xll">
                  {item.value}
                </span>
                <p className="text-sm md:text-base">{item.label}</p>
              </div>
            ))}
          </div>
        </div>
        {contentSections && contentSections.length > 0 && (
          <div className="mx-auto grid max-w-5xl gap-16 py-28 md:grid-cols-2 md:gap-28">
            {contentSections.map((section, idx) => (
              <div key={section.title + idx}>
                <h2 className="mb-5 text-xl font-medium">{section.title}</h2>
                <p className="text-lg leading-7 whitespace-pre-line text-muted-foreground">
                  {section.content}
                </p>
              </div>
            ))}
          </div>
        )}
      </div>
    </section>
  );
};

export { About3 };