mr_decor/components/sections/hero/hero-contact.tsx

"use client";

import { Fragment, useState } from "react";
import { Play } from "lucide-react";
import { cn } from "@/lib/utils";
import { AspectRatio } from "@/components/ui/aspect-ratio";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";

export interface HeroContactProps {
  className?: string;
  /** برچسب بالای عنوان (مثلاً نام شرکت) */
  eyebrow?: string;
  /** عنوان اصلی - فقط یک h1 در صفحه */
  heading: string;
  /** توضیح زیر عنوان */
  description: string;
  /** متن دکمه اصلی (مثلاً «فرم تماس») */
  ctaLabel?: string;
  /** آدرس اسکرول به فرم (مثلاً #contact-form) */
  ctaHref?: string;
  /** مسیر تصویر هیرو (مثلاً /assets/contact-us/contact-us.jpg) */
  imageSrc?: string;
  /** متن جایگزین تصویر */
  imageAlt?: string;
  /** متن دکمه ویدیو (اختیاری - در صورت خالی بودن دکمه ویدیو نمایش داده نمی‌شود) */
  videoLabel?: string;
  /** آیدی ویدیو یوتیوب برای embed (اختیاری) */
  videoId?: string;
}

const HeroContact = ({
  className,
  eyebrow,
  heading,
  description,
  ctaLabel = "فرم تماس",
  ctaHref = "#contact-form",
  imageSrc,
  imageAlt = "تماس با ما",
  videoLabel,
  videoId,
}: HeroContactProps) => {
  const [isVideoOpen, setIsVideoOpen] = useState(false);

  const handleCtaClick = (e: React.MouseEvent) => {
    if (ctaHref.startsWith("#")) {
      e.preventDefault();
      const el = document.getElementById(ctaHref.slice(1));
      el?.scrollIntoView({ behavior: "smooth" });
    }
  };

  return (
    <Fragment>
      <section
        className={cn(
          "flex min-h-[60vh] flex-col justify-center pt-28 pb-16 md:pt-36 md:pb-24",
          className
        )}
        aria-labelledby="hero-contact-heading"
      >
        <div className="container mx-auto w-full max-w-7xl px-4 md:px-6">
          <div className="grid grid-cols-1 items-center justify-items-center gap-10 lg:grid-cols-2 lg:justify-items-stretch">
            <div className="flex w-full max-w-xl flex-col gap-6 lg:max-w-[40rem]">
              {eyebrow && (
                <p className="text-caption font-medium tracking-wider text-muted-foreground uppercase">
                  {eyebrow}
                </p>
              )}
              <div className="flex flex-col gap-6 text-center lg:text-right">
                <h1
                  id="hero-contact-heading"
                  className="text-heading-1 font-bold leading-tight text-foreground"
                >
                  {heading}
                </h1>
                <p className="text-body text-balance text-muted-foreground">
                  {description}
                </p>
              </div>
              <div className="flex flex-wrap justify-center gap-4 py-4 lg:justify-start">
                <Button
                  asChild
                  className="h-fit w-fit rounded-sm px-5 py-3.5 text-body-sm font-medium tracking-wider uppercase text-foreground"
                >
                  <a
                    href={ctaHref}
                    onClick={ctaHref.startsWith("#") ? handleCtaClick : undefined}
                    className="inline-flex items-center justify-center"
                  >
                    <span className="text-inherit">{ctaLabel}</span>
                  </a>
                </Button>
                {videoLabel && videoId && (
                  <Button
                    type="button"
                    variant="ghost"
                    onClick={() => setIsVideoOpen(true)}
                    className="flex h-fit w-fit flex-nowrap items-center gap-2 rounded-sm bg-transparent px-5 py-3.5 text-body-sm font-medium tracking-wider uppercase text-foreground"
                  >
                    <Play className="h-4 w-4 fill-foreground" aria-hidden />
                    <span>{videoLabel}</span>
                  </Button>
                )}
              </div>
            </div>
            <div className="flex w-full justify-center">
              {imageSrc ? (
                <div className="relative mx-auto aspect-[4/3] w-full max-w-[25rem] overflow-hidden rounded-[35px]">
                  <img
                    src={imageSrc}
                    alt={imageAlt}
                    className="size-full object-cover object-center"
                  />
                </div>
              ) : (
                <div className="relative mx-auto aspect-[0.789340102/1] w-full max-w-[25rem]">
                  <div className="absolute bottom-0 left-0 z-30 w-[63%]">
                    <AspectRatio
                      ratio={0.724137931 / 1}
                      className="overflow-hidden rounded-lg"
                    >
                      <img
                        src="https://deifkwefumgah.cloudfront.net/shadcnblocks/block/placeholder-1.svg"
                        alt=""
                        className="size-full object-cover object-center"
                      />
                    </AspectRatio>
                  </div>
                  <div className="absolute top-1/2 left-1/2 z-20 w-[63%] -translate-x-1/2 -translate-y-1/2">
                    <AspectRatio
                      ratio={0.724137931 / 1}
                      className="overflow-hidden rounded-lg"
                    >
                      <img
                        src="https://deifkwefumgah.cloudfront.net/shadcnblocks/block/placeholder-dark-1.svg"
                        alt=""
                        className="size-full object-cover object-center"
                      />
                    </AspectRatio>
                  </div>
                  <div className="absolute top-0 right-0 z-10 w-[63%]">
                    <AspectRatio
                      ratio={0.724137931 / 1}
                      className="overflow-hidden rounded-lg"
                    >
                      <img
                        src="https://deifkwefumgah.cloudfront.net/shadcnblocks/block/placeholder-1.svg"
                        alt=""
                        className="size-full object-cover object-center"
                      />
                    </AspectRatio>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>
      {videoId && (
        <Dialog open={isVideoOpen} onOpenChange={setIsVideoOpen}>
          <DialogContent className="sm:max-w-[800px]" dir="rtl">
            <DialogHeader>
              <DialogTitle>ویدیو معرفی</DialogTitle>
            </DialogHeader>
            <div className="aspect-video">
              <iframe
                className="h-full w-full"
                src={`https://www.youtube.com/embed/${videoId}`}
                title="ویدیو معرفی"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen
              />
            </div>
          </DialogContent>
        </Dialog>
      )}
    </Fragment>
  );
};

export { HeroContact };