"use client";

import { motion } from "framer-motion";
import React from "react";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface Hero200Props {
  className?: string;
}

const Hero200 = ({ className }: Hero200Props) => {
  return (
    <section className={cn("bg-background py-32", className)}>
      <div className="border-b border-foreground/40">
        <div className="container flex flex-col items-center justify-center gap-4 text-center">
          <h2 className="font-semibold tracking-tighter text-foreground/80 md:text-xl">
            پلتفرم کامپوننت
                                </h2>
          <h1 className="font-playfair text-xl tracking-tighter text-foreground md:text-2xll">
            مجموعه بلاک‌های آماده مبتنی بر
                                  <br />
            رابط کاربری، استایل‌دهی مدرن و ری یو آی
                                  <br />
            مستقیماً در پروژه خود استفاده کنید.
                                </h1>
          <Button className="my-10 rounded-2xl px-6 py-6 text-background shadow-[0px_1px_3px_#0000001a,inset_0px_2px_0px_#ffffff40] md:rounded-3xl md:px-12 md:py-8 md:text-lg">
            <p className="me-1 text-xl text-background md:me-3 md:text-xl">
              
            </p>{" "}
            شروع رایگان
                                </Button>

          {/* Iphone mockup with content */}
          <div className="h-[500px] w-full overflow-hidden">
            <motion.div
              initial={{ opacity: 0, y: 200, scale: 0.8 }}
              animate={{ opacity: 100, y: 0, scale: 1 }}
              transition={{ ease: [0, 0.71, 0.2, 1.01], duration: 0.8 }}
              className="relative mx-auto mt-6 flex h-[850px] w-[400px] items-center justify-center rounded-[75px] bg-black md:mt-12 md:h-[920px] md:w-[450px]"
            >
              <img
                className="absolute z-2 scale-105 object-cover"
                alt="قاب گوشی"
                src="/block-media/shadcnblocks/block/mockups/phone-5.png"
              />
              <div className="h-full w-full">
                <div className="mt-20 flex justify-between px-0">
                  <h1 className="flex items-end gap-2 px-12 text-2xll font-semibold tracking-tight text-background md:text-2xll">
                    Mon
                    <div className="mb-2 size-3 rounded-full bg-red-500 md:size-5" />
                  </h1>
                  <div className="mt-2 me-8 flex flex-col items-end">
                    <p className="text-lg tracking-tight text-muted-foreground md:text-xl">
                      آخرین به‌روزرسانی
                                                              </p>
                    <p className="-mt-1 text-xl font-semibold tracking-tighter text-muted-foreground/50 md:text-xl">
                      2025
                    </p>
                  </div>
                </div>
                <img
                  className="z-2 mx-auto mt-20 size-40 object-cover"
                  alt="قاب گوشی"
                  src="/block-media/shadcnblocks/block/block-white-1.svg"
                />
              </div>
            </motion.div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Hero200 };