import Image from "next/image";

export function AboutPodcast() {
  return (
    <section className="backdrop-blur-xs py-12 md:py-16 lg:py-20">
      <div className="container px-4 md:px-6">
        <div className="grid gap-6 lg:grid-cols-[400px_1fr] lg:gap-12 xl:grid-cols-[450px_1fr]">
          <div className="space-y-4 ml-auto">
            <Image
              src="https://picsum.photos/450/450"
              alt="Podcast Cover Art"
              width={450}
              height={450}
              className="rounded-xl"
            />
          </div>
          <div className="space-y-4 flex flex-col justify-center">
            <h2 className="text-3xl font-bold tracking-tight text-parch leading-normal">
              درباره پادکست
            </h2>
            <p className="text-muted-foreground">
              پادکست “پارچ کست” یک برنامه صوتی جذاب و متنوع است که به بررسی
              موضوعات مختلف فرهنگی، اجتماعی و علمی می‌پردازد. این پادکست با
              میزبانی متخصصان و مهمانان مختلف، تلاش می‌کند تا با ارائه بحث‌ها و
              نظرات عمیق، شنوندگان را به تفکر وادارد و آگاهی آن‌ها را در
              زمینه‌های مختلف افزایش دهد. هر قسمت از “پارچ کست” با رویکردی
              خلاقانه و engaging تولید می‌شود و هدف آن ایجاد فضایی است که در آن
              گوش دادن به اطلاعات جدید همزمان با لذت و سرگرمی همراه باشد.
            </p>
            <p className="text-muted-foreground">
              پادکست “پارچ کست” یک برنامه صوتی جذاب و متنوع است که به بررسی
              موضوعات مختلف فرهنگی، اجتماعی و علمی می‌پردازد. این پادکست با
              میزبانی متخصصان و مهمانان مختلف، تلاش می‌کند تا با ارائه بحث‌ها و
              نظرات عمیق، شنوندگان را به تفکر وادارد و آگاهی آن‌ها را در
              زمینه‌های مختلف افزایش دهد. هر قسمت از “پارچ کست” با رویکردی
              خلاقانه و engaging تولید می‌شود و هدف آن ایجاد فضایی است که در آن
              گوش دادن به اطلاعات جدید همزمان با لذت و سرگرمی همراه باشد.
            </p>
            {/* <div className="grid gap-4 sm:grid-cols-2">
              <Card>
                <CardContent className="p-4 flex flex-col items-center text-center">
                  <div className="mb-2 mt-2 rounded-full bg-primary/10 p-2">
                    <Mic className="h-6 w-6 text-primary" />
                  </div>
                  <h3 className="text-xl font-bold">100+ Episodes</h3>
                  <p className="text-sm text-muted-foreground">
                    And counting, with new content every week
                  </p>
                </CardContent>
              </Card>
              <Card>
                <CardContent className="p-4 flex flex-col items-center text-center">
                  <div className="mb-2 mt-2 rounded-full bg-primary/10 p-2">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="h-6 w-6 text-primary"
                    >
                      <path d="M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06Z" />
                      <path d="M10 2c1 .5 2 2 2 5" />
                    </svg>
                  </div>
                  <h3 className="text-xl font-bold">50K+ Listeners</h3>
                  <p className="text-sm text-muted-foreground">
                    Join our growing community of podcast fans
                  </p>
                </CardContent>
              </Card>
            </div> */}
          </div>
        </div>
      </div>
    </section>
  );
}