import { Button } from "@/components/ui/button";
import { Play } from "lucide-react";
import Image from "next/image";

export function PodcastHero() {
  return (
    <section className="relative pt-20 pb-16 md:pt-36 md:pb-24">
      <div className="container px-4 md:px-6">
        <div className="grid gap-6 lg:grid-cols-[1fr_400px] lg:gap-12 xl:grid-cols-[1fr_450px]">
          <div className="flex flex-col justify-center space-y-4">
            <div className="space-y-2">
              <div className="flex items-center -ms-2">
                <Image
                  src={"/logo.png"}
                  width={55}
                  height={55}
                  className="mt-2"
                  alt="logo"
                />
                <h1 className="text-parch text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl leading-normal pe-2">
                  پارچ کست
                </h1>
              </div>

              <p className="text-muted-foreground md:text-xl">
                پادکست “پارچ کست” یک برنامه صوتی جذاب و متنوع است که به بررسی
                موضوعات مختلف فرهنگی، اجتماعی و علمی می‌پردازد. این پادکست با
                میزبانی متخصصان و مهمانان مختلف، تلاش می‌کند تا با ارائه بحث‌ها
                و نظرات عمیق، شنوندگان را به تفکر وادارد و آگاهی آن‌ها را در
                زمینه‌های مختلف افزایش دهد. هر قسمت از “پارچ کست” با رویکردی
                خلاقانه و engaging تولید می‌شود و هدف آن ایجاد فضایی است که در
                آن گوش دادن به اطلاعات جدید همزمان با لذت و سرگرمی همراه باشد.
              </p>
            </div>
            <div className="flex flex-col gap-2 min-[400px]:flex-row">
              <Button
                size="lg"
                className="gap-2 border-parch text-blue-parch bg-white"
              >
                <span>اکنون گوش کن</span>
                <Play className="h-4 w-4" />
              </Button>
            </div>
          </div>
          <div className="aspect-square overflow-hidden rounded-xl bg-muted lg:order-last">
            <Image
              src="https://picsum.photos/450/450"
              alt="Podcast Cover Art"
              width={450}
              height={450}
              className="h-full w-full object-cover"
            />
          </div>
        </div>
      </div>
    </section>
  );
}