import { cn } from "@/lib/utils";
import Link from "next/link";
import { ChevronLeft } from "lucide-react";
import { Button } from "@/components/ui/button";
import Image from "next/image";
import { TextEffect } from "@/components/ui/text-effect";
import { AnimatedGroup } from "@/components/ui/animated-group";
import { HeroHeader } from "./header";
import { LogoItem } from "@/components/ui/logo-item";
import { getHomeImages } from "@/lib/home-images";
import { type, typeSpacing } from "@/lib/typography";

const transitionVariants = {
  item: {
    hidden: {
      opacity: 0,
      filter: "blur(12px)",
      y: 12,
    },
    visible: {
      opacity: 1,
      filter: "blur(0px)",
      y: 0,
      transition: {
        type: "spring",
        bounce: 0.3,
        duration: 1.5,
      },
    },
  },
};

export default function HeroSection() {
  const { hero } = getHomeImages();

  return (
    <>
      <main className="overflow-hidden">
        <div
          aria-hidden
          className="absolute inset-0 isolate hidden opacity-65 contain-strict lg:block"
        >
          <div className="w-140 h-320 -translate-y-87.5 absolute left-0 top-0 -rotate-45 rounded-full bg-[radial-gradient(68.54%_68.72%_at_55.02%_31.46%,hsla(0,0%,85%,.08)_0,hsla(0,0%,55%,.02)_50%,hsla(0,0%,45%,0)_80%)]" />
          <div className="h-320 absolute left-0 top-0 w-60 -rotate-45 rounded-full bg-[radial-gradient(50%_50%_at_50%_50%,hsla(0,0%,85%,.06)_0,hsla(0,0%,45%,.02)_80%,transparent_100%)] [translate:5%_-50%]" />
          <div className="h-320 -translate-y-87.5 absolute left-0 top-0 w-60 -rotate-45 bg-[radial-gradient(50%_50%_at_50%_50%,hsla(0,0%,85%,.04)_0,hsla(0,0%,45%,.02)_80%,transparent_100%)]" />
        </div>
        <section className="bg-background">
          <div className="relative pt-24 md:pt-36">
            <AnimatedGroup
              variants={{
                container: {
                  visible: {
                    transition: {
                      delayChildren: 1,
                    },
                  },
                },
                item: {
                  hidden: {
                    opacity: 0,
                    y: 20,
                  },
                  visible: {
                    opacity: 1,
                    y: 0,
                    transition: {
                      type: "spring",
                      bounce: 0.3,
                      duration: 2,
                    },
                  },
                },
              }}
              className="mask-b-from-35% mask-b-to-90% absolute inset-0 top-56 -z-20 lg:top-32"
            >
              <Image
                src={hero.backgroundDark.src}
                alt="background"
                className="hidden size-full object-cover dark:block"
                width={hero.backgroundDark.width}
                height={hero.backgroundDark.height}
                quality={100}
                sizes="100vw"
              />
            </AnimatedGroup>


            <div className="mx-auto max-w-7xl px-6">
              <div className="text-center sm:mx-auto lg:mr-auto lg:mt-0">
                {/* <AnimatedGroup variants={transitionVariants}>
                  <Link
                    href="#link"
                    className="hover:bg-background dark:hover:border-t-border bg-muted group mx-auto flex w-fit items-center gap-4 rounded-full border p-1 ps-4 shadow-md shadow-zinc-950/5 transition-colors duration-300 dark:border-t-white/5 dark:shadow-zinc-950"
                  >
                    <span className="text-foreground text-sm">
                      معرفی نسل جدید یکپارچه‌سازی و ارتباطات هوشمند
                    </span>
                    <span className="dark:border-background block h-4 w-0.5 border-s bg-card dark:bg-muted"></span>

                    <div className="bg-background group-hover:bg-muted size-6 overflow-hidden rounded-full duration-500">
                      <div className="flex w-12 translate-x-1/2 duration-500 ease-in-out group-hover:translate-x-0">
                        <span className="flex size-6">
                          <ArrowRight className="m-auto size-3" />
                        </span>
                        <span className="flex size-6">
                          <ArrowLeft className="m-auto size-3" />
                        </span>
                      </div>
                    </div>
                  </Link>
                </AnimatedGroup> */}

                <TextEffect
                  preset="fade-in-blur"
                  speedSegment={0.3}
                  as="h1"
                  className={cn("mx-auto mt-8 max-w-4xl", type.display, "max-md:font-semibold lg:mt-16")}
                >
                  راه‌حل‌های مدرن برای اتصال هوشمند

                </TextEffect>
                <TextEffect
                  per="line"
                  preset="fade-in-blur"
                  speedSegment={0.3}
                  delay={0.5}
                  as="p"
                  className={cn("mx-auto mt-8 max-w-2xl text-balance", type["body-lg"])}
                >
                  با ابزارهای یکپارچه‌سازی، اتوماسیون و ارتباطات ما، داده‌ها، کاربران و فرآیندهای کسب‌وکارتان را از هر سیستم یا پلتفرمی، از وب‌سایت و CRM تا تلگرام و سرویس‌های سفارشی، دقیق، سریع و قابل اعتماد به هم متصل کنید.
                </TextEffect>

                <AnimatedGroup
                  variants={{
                    container: {
                      visible: {
                        transition: {
                          staggerChildren: 0.05,
                          delayChildren: 0.75,
                        },
                      },
                    },
                    ...transitionVariants,
                  }}
                  className="mt-12 flex flex-col items-center justify-center gap-2 md:flex-row"
                >
                  <div
                    key={1}
                    className="bg-foreground/10 rounded-[calc(var(--radius-xl)+0.125rem)] border p-0.5"
                  >
                    <Button asChild size="lg">
                      <Link href="/solutions">
                        <span className="text-nowrap">مشاهده راهکارها</span>
                        <ChevronLeft className="size-4" aria-hidden />
                      </Link>
                    </Button>
                  </div>
                </AnimatedGroup>
              </div>
            </div>

            <AnimatedGroup
              variants={{
                container: {
                  visible: {
                    transition: {
                      staggerChildren: 0.05,
                      delayChildren: 0.75,
                    },
                  },
                },
                ...transitionVariants,
              }}
            >
              <div className="relative mt-8 overflow-visible px-6 sm:mt-12 md:mt-20 md:p-2 md:px-2">
                <div className="relative w-full max-w-5xl md:max-w-4xl mx-auto">
                  <div className="relative w-full rounded-2xl">
                    {/* Glow effect */}
                    <div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-pink-500/10 blur-3xl -z-10 scale-110 animate-pulse" />
                    <div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-blue-400/15 via-purple-400/15 to-pink-400/15 blur-2xl -z-10 scale-105" />

                    <div className="relative w-full aspect-[3/2] overflow-hidden bg-background rounded-2xl border ring-1 ring-border/50 shadow-2xl shadow-blue-500/10 dark:shadow-blue-500/20 md:aspect-auto">
                      <Image
                        src={hero.main.src}
                        alt="یکپارچه‌سازی سیستم‌ها و شبکه دیجیتال"
                        fill
                        className="object-cover rounded-2xl md:hidden dark:hidden"
                        quality={100}
                        priority
                        sizes="100vw"
                      />
                      <Image
                        src={hero.mainDark.src}
                        alt="یکپارچه‌سازی سیستم‌ها و شبکه دیجیتال"
                        fill
                        className="hidden object-cover rounded-2xl md:hidden dark:block"
                        quality={100}
                        priority
                        sizes="100vw"
                      />
                      <Image
                        src={hero.main.src}
                        alt="یکپارچه‌سازی سیستم‌ها و شبکه دیجیتال"
                        width={hero.main.width}
                        height={hero.main.height}
                        className="max-md:hidden object-contain rounded-2xl w-full h-auto max-h-[700px] dark:hidden"
                        quality={100}
                        priority
                        sizes="(max-width: 1200px) 90vw, 1200px"
                      />
                      <Image
                        src={hero.mainDark.src}
                        alt="یکپارچه‌سازی سیستم‌ها و شبکه دیجیتال"
                        width={hero.mainDark.width}
                        height={hero.mainDark.height}
                        className="max-md:hidden hidden object-contain rounded-2xl w-full h-auto max-h-[700px] dark:block"
                        quality={100}
                        priority
                        sizes="(max-width: 1200px) 90vw, 1200px"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </AnimatedGroup>
          </div>
        </section>
        <section className="bg-background pb-16 pt-16 md:pb-32">
          <div className="m-auto max-w-5xl px-6">
            <div className="text-center">
              <p className={type.eyebrow}>
                یکپارچه با ابزارهای محبوب
              </p>
              <h2 className={cn(typeSpacing.eyebrowToHeading, type.h4)}>
                اتصال به سایر سیستم‌ها
              </h2>
            </div>

            <div className="mx-auto mt-10 flex max-w-3xl flex-wrap items-center justify-center gap-4 sm:gap-5">
              <LogoItem icon="logos:telegram" alt="Telegram Logo" size="md" />
              <LogoItem
                icon="simple-icons:n8n"
                alt="n8n Logo"
                size="lg"
                iconClassName="text-black"
              />
              <LogoItem
                icon="skill-icons:wordpress"
                alt="WordPress Logo"
                size="md"
              />
              <LogoItem icon="logos:google-icon" alt="Google Logo" size="md" />
              <LogoItem
                icon="logos:whatsapp-icon"
                alt="WhatsApp Logo"
                size="md"
              />
              <LogoItem
                icon="logos:microsoft-windows-icon"
                alt="Microsoft Windows Logo"
                size="md"
              />
              <LogoItem icon="logos:github-icon" alt="GitHub Logo" size="md" />
            </div>

            <div className="mt-8 text-center">
              <Link
                href="/solutions"
                className={cn("inline-flex items-center gap-1 transition-colors hover:text-accent", type.link)}
              >
                <span>مشاهده همه یکپارچه‌سازی‌ها</span>
                <ChevronLeft className="size-3" aria-hidden />
              </Link>
            </div>
          </div>
        </section>
      </main>
    </>
  );
}