"use client";

import Link from "next/link";
import Image from "next/image";

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

import { Button } from "@/components/ui/button";
import { useContent } from "@/components/layout/content-provider";

interface Hero91Props {
  className?: string;
}

const Hero91 = ({ className }: Hero91Props) => {
  const content = useContent();
  const { hero91 } = content.pages.home;
  const heroImageSrc = content.images.hero91.image;
  const heroVideoSrc = content.images.hero91.video;

  return (
    <section
      className={cn(
        "py-24 md:py-32 lg:py-40",
        className,
      )}
    >
      <div className="container mx-auto flex max-w-7xl flex-col items-center gap-8 px-6 lg:flex-row lg:items-center lg:justify-between lg:gap-12">
        <div className="flex flex-col gap-6 lg:w-1/2" dir="rtl">
          <h1 className="text-heading-1 font-bold leading-tight text-foreground whitespace-pre-line">
            {hero91.title}
          </h1>
          <p className="text-body leading-relaxed text-muted-foreground">
            {hero91.description}
          </p>
          <div className="flex flex-col gap-4 font-medium md:flex-row md:gap-4">
            <Button asChild size="lg" variant="primary">
              <Link href="/contact">{hero91.primaryButton}</Link>
            </Button>
            <Button asChild size="lg" variant="secondary">
              <Link href="/consultation">{hero91.secondaryButton}</Link>
            </Button>
          </div>
        </div>
        <div
          className={cn(
            "relative w-full max-w-full overflow-hidden rounded-2xl bg-black lg:w-1/2 lg:max-w-[640px] aspect-square",
            "shadow-[0_0_50px_rgba(37,102,90,0.28),0_0_90px_rgba(37,102,90,0.12)] dark:shadow-[0_0_50px_rgba(201,157,77,0.28),0_0_90px_rgba(201,157,77,0.12)]",
          )}
        >
          <div className="absolute inset-0">
            {heroVideoSrc ? (
              <video
                src={heroVideoSrc}
                className="h-full w-full object-cover"
                autoPlay
                muted
                loop
                playsInline
                preload="metadata"
              />
            ) : (
              <Image
                src={heroImageSrc}
                alt=""
                fill
                className="object-cover"
                priority
                unoptimized
              />
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Hero91 };