import { ArrowRight } from "lucide-react";

import { AspectRatio } from "@/components/ui/aspect-ratio";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface Hero82Props {
  className?: string;
}

const Hero82 = ({ className }: Hero82Props) => {
  return (
    <section
      className={cn(
        "container flex flex-col gap-10 bg-background py-20 sm:gap-20",
        className,
      )}
    >
      <div className="flex flex-col gap-10 lg:w-[80%] lg:self-center">
        <h1 className="max-w-2xl text-2xll font-bold tracking-tight text-foreground md:text-2xll lg:text-8xl">
          مدیریت زمان برای انجام مؤثر وظایف
                          </h1>
        <div className="flex flex-col items-start gap-4 sm:flex-row sm:items-center">
          {/* Animated Button */}
          <Button className="group h-fit rounded-xl p-4 text-xl font-semibold shadow-xl">
            <div className="size-full overflow-hidden">
              <div className="flex items-center transition-all group-hover:-translate-x-5">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 -3.552713678800501e-15 820 950"
                  className="size-5 min-h-5 min-w-5"
                  fill="white"
                >
                  <path d="M404.345 229.846c52.467 0 98.494-20.488 138.08-61.465s59.38-88.626 59.38-142.947c0-5.966-.472-14.444-1.414-25.434-6.912.942-12.096 1.727-15.552 2.355-48.383 6.908-90.954 30.615-127.713 71.12-36.758 40.506-55.137 83.838-55.137 129.996 0 5.337.785 14.13 2.356 26.375zM592.379 950c37.387 0 78.701-25.59 123.943-76.772S796.122 761.915 820 692.836c-88.912-45.844-133.368-111.626-133.368-197.348 0-71.591 35.973-132.82 107.92-183.688-49.954-62.486-115.931-93.729-197.931-93.729-34.56 0-66.134 5.181-94.724 15.543l-17.908 6.594-24.035 9.42c-15.709 5.966-30.004 8.95-42.885 8.95-10.054 0-23.25-3.455-39.586-10.363l-18.38-7.536-17.436-7.065c-25.449-10.676-52.782-16.014-82-16.014-78.23 0-141.065 26.376-188.506 79.128C23.72 349.479 0 419.03 0 505.379c0 121.517 38.015 233.772 114.046 336.763C166.828 914.047 215.054 950 258.724 950c18.537 0 36.916-3.611 55.138-10.833l23.092-9.42 18.38-6.594c25.762-9.106 49.482-13.659 71.16-13.659 22.935 0 49.326 5.81 79.173 17.427l14.609 5.652C550.75 944.191 574.786 950 592.379 950z" />
                </svg>
                <span className="block min-w-[calc(100%-20px)]">
                  دانلود برای Mac
                </span>
                <ArrowRight className="size-5! min-h-5 min-w-5 rtl:rotate-180" />
              </div>
            </div>
          </Button>
        </div>
      </div>
      <AspectRatio ratio={1.6 / 1} className="overflow-hidden rounded-3xl">
        <img
          src="/block-media/shadcnblocks/block/placeholder-1.svg"
          alt=""
          className="size-full object-cover object-center"
        />
      </AspectRatio>
    </section>
  );
};

export { Hero82 };