"use client";

import Image from "next/image";
import { motion, useReducedMotion } from "motion/react";
import { MessageCircle, MessagesSquare, Mic, Globe } from "lucide-react";
import { cn } from "@/lib/utils";
import { smoothScrollTo } from "@/lib/scroll";

const CHANNELS = [
  {
    name: "WhatsApp",
    icon: MessageCircle,
    color: "bg-[#25D366]/10 text-[#25D366] border-[#25D366]/30 hover:border-[#25D366] hover:shadow-[0_0_20px_rgba(37,211,102,0.3)]",
    tilt: "-12deg",
    offsetX: "-68px",
    offsetY: "6px",
    scale: 0.92,
    zIndex: 10,
    delay: 0.1,
  },
  {
    name: "Chat",
    icon: MessagesSquare,
    color: "bg-[#4FDAF1]/15 text-[#4FDAF1] border-[#4FDAF1]/40 hover:border-[#4FDAF1] hover:shadow-[0_0_20px_rgba(79,218,241,0.35)]",
    tilt: "-6deg",
    offsetX: "-34px",
    offsetY: "2px",
    scale: 0.96,
    zIndex: 20,
    delay: 0.05,
  },
  {
    name: "Quto AI",
    icon: null,
    isCenter: true,
    color: "",
    tilt: "0deg",
    offsetX: "0px",
    offsetY: "-4px",
    scale: 1.08,
    zIndex: 30,
    delay: 0,
  },
  {
    name: "Web",
    icon: Globe,
    color: "bg-[#F79C09]/15 text-[#F79C09] border-[#F79C09]/40 hover:border-[#F79C09] hover:shadow-[0_0_20px_rgba(247,156,9,0.35)]",
    tilt: "6deg",
    offsetX: "34px",
    offsetY: "2px",
    scale: 0.96,
    zIndex: 20,
    delay: 0.05,
  },
  {
    name: "Voice",
    icon: Mic,
    color: "bg-[#E26B0B]/15 text-[#E26B0B] border-[#E26B0B]/40 hover:border-[#E26B0B] hover:shadow-[0_0_20px_rgba(226,107,11,0.35)]",
    tilt: "12deg",
    offsetX: "68px",
    offsetY: "6px",
    scale: 0.92,
    zIndex: 10,
    delay: 0.1,
  },
];

export function HeroChannelFan({ className }: { className?: string }) {
  const reduce = useReducedMotion();

  return (
    <div
      className={cn("relative mx-auto flex h-20 w-full max-w-sm items-center justify-center select-none", className)}
      aria-label="Supported channels: WhatsApp, Live Chat, Quto Core AI, Web Browser, Voice Calls"
    >
      <div className="relative flex items-center justify-center">
        {CHANNELS.map((ch) => {
          const IconComponent = ch.icon;
          return (
            <motion.div
              key={ch.name}
              initial={false}
              animate={{
                opacity: 1,
                scale: ch.scale,
                x: ch.offsetX,
                y: ch.offsetY,
                rotate: ch.tilt,
              }}
              whileHover={
                reduce
                  ? undefined
                  : {
                    scale: ch.scale * 1.15,
                    y: -10,
                    zIndex: 40,
                    transition: { duration: 0.2 },
                  }
              }
              transition={{
                duration: 0.6,
                delay: ch.delay,
                ease: [0.22, 1, 0.36, 1],
              }}
              style={{ zIndex: ch.zIndex }}
              className="absolute flex items-center justify-center"
            >
              {ch.isCenter ? (
                <button
                  type="button"
                  onClick={() => smoothScrollTo("what-we-build")}
                  aria-label="Scroll to What we build for you solutions"
                  className="relative flex size-14 sm:size-12 items-center justify-center select-none rounded-2xl border border-[#4FDAF1]/50 bg-background/95 p-1.5 shadow-md glow-brand cursor-pointer transition-transform hover:scale-110 active:scale-95"
                  title="Explore what Quto AI builds for you"
                >
                  <Image
                    src="/images/quto-logo.webp"
                    alt="Quto AI"
                    width={72}
                    height={72}
                    className="size-full object-contain select-none pointer-events-none"
                    priority
                  />
                </button>
              ) : (
                <button
                  type="button"
                  onClick={() => smoothScrollTo("what-we-build")}
                  aria-label={`Explore ${ch.name} agent solutions`}
                  className={cn(
                    "flex size-12 items-center justify-center rounded-2xl border shadow-sm transition-all cursor-pointer hover:scale-105 active:scale-95",
                    ch.color,
                  )}
                  title={`${ch.name} — Explore solutions`}
                >
                  {IconComponent ? (
                    <IconComponent className="size-5" strokeWidth={1.75} />
                  ) : null}
                </button>
              )}
            </motion.div>
          );
        })}
      </div>
    </div>
  );
}