"use client";

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

import { cn } from "@/lib/utils";

interface Hero204Props {
  className?: string;
}

const Hero204 = ({ className }: Hero204Props) => {
  return (
    <section
      className={cn(
        "flex min-h-[50vh] flex-col items-center justify-center bg-background pt-24 pb-16 md:pt-32 md:pb-20 lg:pt-36 lg:pb-24",
        className
      )}
    >
      <div className="container mx-auto flex w-full max-w-7xl flex-col items-center justify-center gap-4 px-6 text-center">
        <motion.h1
          initial={{ opacity: 0, y: 16 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.4 }}
          className="max-w-2xl text-heading-1 font-bold tracking-tighter text-foreground"
        >
          درخواست دمو
        </motion.h1>
        <motion.p
          initial={{ opacity: 0, y: 16 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.4, delay: 0.1 }}
          className="mt-4 max-w-xl text-body text-muted-foreground"
        >
          سامانه‌های تخصصی مستر دکور را قبل از تصمیم‌گیری از نزدیک ببینید. فرم را پر کنید تا در اسرع وقت برای هماهنگی جلسه دمو و نمایش امکانات با شما تماس بگیریم.
        </motion.p>
      </div>
    </section>
  );
};

export { Hero204 };