"use client";

import { motion } from "framer-motion";
import Link from "next/link";
import React from "react";

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

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

interface Hero200Props {
  className?: string;
  /** تصویر داخل قاب موبایل (پیش‌نمایش اپ) */
  phoneImage?: { src: string; alt: string };
}

const Hero200 = ({ className, phoneImage }: Hero200Props) => {
  const content = useContent();
  const hero = content.pages.product.forushgahSazTala.hero200;
  const appPreviewSrc = phoneImage?.src ?? "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/block-white-1.svg";
  const appPreviewAlt = phoneImage?.alt ?? "Gold store app";
  return (
    <section className={cn("bg-background pt-24 md:pt-32 lg:pt-40 pb-8 md:pb-12 lg:pb-16", className)}>
      <div className="border-b border-foreground/40">
        <div className="container mx-auto flex max-w-7xl flex-col items-center justify-center gap-4 px-6 text-center">
          <h2 className="text-heading-2 font-semibold leading-snug tracking-tight text-foreground/80" dir="rtl">
            {hero.subtitle}
          </h2>
          <div className="w-full overflow-hidden" dir="rtl">
            <h1 className="text-heading-1 font-bold leading-snug tracking-tight text-foreground">
              {hero.titleLine1}
              <br />
              {hero.titleLine2}
              <br />
              {hero.titleLine3}
            </h1>
          </div>
          <Button size="lg" variant="primary" className="my-10" dir="rtl" asChild>
            <Link href="/consultation">{hero.button}</Link>
          </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: 1, 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="Gold phone frame"
                src="https://deifkwefumgah.cloudfront.net/shadcnblocks/block/mockups/phone-5.png"
              />
              <div className="relative z-[1] h-full w-full overflow-hidden rounded-[3.25rem]">
                {phoneImage ? (
                  <img
                    className="h-full w-full object-cover object-top"
                    alt={appPreviewAlt}
                    src={appPreviewSrc}
                  />
                ) : (
                  <>
                    <div className="mt-20 flex justify-between px-0">
                      <div className="flex items-end gap-2 px-12 text-heading-1 font-bold leading-snug tracking-tight text-background" dir="rtl" aria-hidden>
                        طلا
                        <div className="mb-2 size-3 rounded-full bg-primary md:size-5" />
                      </div>
                      <div className="mt-2 mr-8 flex flex-col items-end">
                        <p className="text-body-sm leading-normal tracking-tight text-muted-foreground md:text-body">
                          {hero.dateLabel}
                        </p>
                        <p className="-mt-1 text-heading-5 font-semibold leading-snug tracking-tight text-muted-foreground/50">
                          {hero.appLabel}
                        </p>
                      </div>
                    </div>
                    <img
                      className="z-2 mx-auto mt-20 size-40 object-cover"
                      alt={appPreviewAlt}
                      src={appPreviewSrc}
                    />
                  </>
                )}
              </div>
            </motion.div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Hero200 };