"use client";

import { motion } from "motion/react";
import Image from "next/image";
import { Link } from "@/i18n/routing";
import { Info, MessageCircle } from "lucide-react";
import type { LucideIcon } from "lucide-react";
import { DirectionalChevron } from "@/components/ui/directional-chevron";

const ease = [0.22, 1, 0.36, 1] as const;

const CARD_META: { bg: string; Icon: LucideIcon }[] = [
  { bg: "#d8ffeb", Icon: MessageCircle },
  { bg: "#deecfe", Icon: MessageCircle },
  { bg: "#f8f9fa", Icon: Info },
  { bg: "#fef3c7", Icon: MessageCircle },
];

type Card = { title: string; description: string };

type Props = {
  badge: string;
  titleHighlight: string;
  titleRest: string;
  description: string;
  cards: Card[];
  centerImageSrc: string;
  centerImageAlt: string;
  ctaContact: string;
  ctaLearnMore: string;
  direction: "ltr" | "rtl";
};

function AnimatedCard({
  card,
  index,
  slideX,
}: {
  card: Card;
  index: number;
  slideX: number;
}) {
  const { bg, Icon } = CARD_META[index] ?? CARD_META[0];
  const delay = 0.2 + (index % 2) * 0.14;

  return (
    <motion.div
      initial={{ opacity: 0, x: slideX, filter: "blur(6px)" }}
      whileInView={{ opacity: 1, x: 0, filter: "blur(0px)" }}
      viewport={{ once: true, margin: "-40px" }}
      transition={{ duration: 0.85, ease, delay }}
      // Appeal — lift + shadow bloom on hover
      whileHover={{
        y: -6,
        scale: 1.02,
        boxShadow: "0 20px 48px -8px rgba(30,124,115,0.18), 0 4px 16px -4px rgba(0,0,0,0.08)",
        transition: { duration: 0.28, ease: "easeOut" },
      }}
      className="group flex flex-col md:flex-row flex-1 items-start gap-4 rounded-4xl p-6 cursor-default"
      style={{ backgroundColor: bg }}
    >
      {/* Secondary action — icon subtly rotates on card hover */}
      <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-white shadow-sm group-hover:shadow-md transition-shadow duration-300">
        <motion.div
          className="flex items-center justify-center"
          whileHover={{ rotate: [0, -12, 8, 0], transition: { duration: 0.4 } }}
        >
          <Icon className="h-6 w-6 text-primary-700" />
        </motion.div>
      </div>
      <div className="flex flex-col gap-3">
        <p className="text-[18px] font-bold leading-[1.5] text-foreground">
          {card.title}
        </p>
        <p className="text-[13px] leading-[1.6] text-muted-foreground">
          {card.description}
        </p>
      </div>
    </motion.div>
  );
}

export function WhoWeAreClient({
  badge,
  titleHighlight,
  titleRest,
  description,
  cards,
  centerImageSrc,
  centerImageAlt,
  ctaContact,
  ctaLearnMore,
  direction,
}: Props) {
  const leftCards = cards.slice(0, 2);
  const rightCards = cards.slice(2, 4);

  return (
    <section className="relative overflow-hidden px-4 py-10 sm:px-8 lg:px-[120px] lg:py-16">
      {/* Ambient luxury glow orbs — staging the background */}
      <motion.div
        aria-hidden
        initial={{ opacity: 0, scale: 0.7 }}
        whileInView={{ opacity: 1, scale: 1 }}
        viewport={{ once: true }}
        transition={{ duration: 2.4, ease: "easeOut" }}
        className="pointer-events-none absolute -top-32 left-1/2 -translate-x-1/2 h-[480px] w-[680px] rounded-full"
        style={{
          background:
            "radial-gradient(ellipse at center, rgba(30,124,115,0.07) 0%, rgba(30,124,115,0.03) 50%, transparent 70%)",
          filter: "blur(40px)",
        }}
      />
      <motion.div
        aria-hidden
        initial={{ opacity: 0 }}
        whileInView={{ opacity: 1 }}
        viewport={{ once: true }}
        transition={{ duration: 3, ease: "easeOut", delay: 0.3 }}
        className="pointer-events-none absolute bottom-0 right-0 h-80 w-[320px]"
        style={{
          background:
            "radial-gradient(ellipse at bottom right, rgba(216,255,235,0.5) 0%, transparent 70%)",
          filter: "blur(32px)",
        }}
      />

      <div className="relative mx-auto flex max-w-[1440px] flex-col items-center gap-12">
        {/* ── Heading — blur-up with stagger (Slow In / Slow Out) ── */}
        <div className="flex max-w-[760px] flex-col items-center gap-4 text-center">
          {/* Badge */}
          <motion.div
            initial={{ opacity: 0, y: 16, filter: "blur(8px)" }}
            whileInView={{ opacity: 1, y: 0, filter: "blur(0px)" }}
            viewport={{ once: true }}
            transition={{ duration: 0.65, ease }}
            className="flex items-center gap-2 text-secondary"
          >
            <motion.span
              className="h-3.5 w-3.5 rounded-full bg-current"
              initial={{ scale: 0 }}
              whileInView={{ scale: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.4, ease: [0.34, 1.56, 0.64, 1], delay: 0.1 }}
            />
            <p className="text-[17px] font-semibold leading-none">{badge}</p>
          </motion.div>

          {/* Title */}
          <motion.div
            initial={{ opacity: 0, y: 24, filter: "blur(6px)" }}
            whileInView={{ opacity: 1, y: 0, filter: "blur(0px)" }}
            viewport={{ once: true }}
            transition={{ duration: 0.75, ease, delay: 0.1 }}
          >
            <h2 className="text-[28px] font-semibold tracking-[-0.72px] text-foreground lg:text-[38px]">
              <span className="flex flex-wrap items-center justify-center gap-x-2 gap-y-1">
                <motion.span
                  className="relative inline-block rounded-2xl bg-primary-700 px-3 py-1 text-white overflow-hidden"
                  whileInView={{ scale: [0.85, 1.04, 1] }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.6, ease: [0.34, 1.56, 0.64, 1], delay: 0.25 }}
                >
                  <motion.span
                    aria-hidden
                    className="absolute inset-0 -skew-x-12"
                    initial={{ x: "-120%" }}
                    whileInView={{ x: "220%" }}
                    viewport={{ once: true }}
                    transition={{ duration: 0.9, ease: "easeInOut", delay: 0.55 }}
                    style={{
                      background:
                        "linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent)",
                    }}
                  />
                  {titleHighlight}
                </motion.span>
                <span>{titleRest}</span>
              </span>
            </h2>
          </motion.div>

          {/* Description — Follow Through, slightly delayed */}
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.7, ease, delay: 0.2 }}
            className="max-w-[640px] text-[15px] leading-[1.7] text-muted-foreground lg:text-[17px]"
          >
            {description}
          </motion.p>
        </div>

        {/* ── 3-column layout ── */}
        <div className="flex w-full flex-col gap-5 lg:flex-row lg:items-stretch">
          {/* Left cards — slide in from left */}
          <div className="grid grid-cols-2 gap-5 lg:flex lg:w-[340px] lg:shrink-0 lg:flex-col">
            {leftCards.map((card, i) => (
              <AnimatedCard key={i} card={card} index={i} slideX={-48} />
            ))}
          </div>

          {/* Center image — clip-path curtain reveal (Solid Drawing) */}
          <motion.div
            initial={{ opacity: 0, scale: 0.95, clipPath: "inset(6% 4% 6% 4% round 32px)" }}
            whileInView={{ opacity: 1, scale: 1, clipPath: "inset(0% 0% 0% 0% round 32px)" }}
            viewport={{ once: true, margin: "-60px" }}
            transition={{ duration: 1.1, ease, delay: 0.05 }}
            className="relative min-h-[260px] overflow-hidden rounded-4xl lg:min-h-[440px] lg:flex-1"
          >
            <Image
              src={centerImageSrc}
              alt={centerImageAlt}
              fill
              className="object-cover"
            />
            {/* Luxury gold gradient overlay at bottom */}
            <div
              aria-hidden
              className="absolute inset-x-0 bottom-0 h-1/3 rounded-b-4xl"
              style={{
                background:
                  "linear-gradient(to top, rgba(30,124,115,0.18) 0%, transparent 100%)",
              }}
            />
          </motion.div>

          {/* Right cards — slide in from right */}
          <div className="grid grid-cols-2 gap-5 lg:flex lg:w-[340px] lg:shrink-0 lg:flex-col">
            {rightCards.map((card, i) => (
              <AnimatedCard key={i} card={card} index={i + 2} slideX={48} />
            ))}
          </div>
        </div>

        {/* ── CTAs — Anticipation: scale up slightly then settle ── */}
        <motion.div
          initial={{ opacity: 0, y: 28 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.7, ease, delay: 0.35 }}
          className="flex flex-wrap items-center justify-center gap-4"
        >
          <Link href="/contact-us">
            <motion.div
              whileHover={{ scale: 1.04, y: -2 }}
              whileTap={{ scale: 0.97 }}
              transition={{ duration: 0.22, ease: "easeOut" }}
              className="flex h-12 items-center rounded-full border border-primary-700 px-6 text-sm font-bold text-primary-700"
            >
              {ctaContact}
            </motion.div>
          </Link>
          <Link href="/about-us">
            <motion.div
              whileHover={{ scale: 1.04, y: -2, boxShadow: "0 8px 24px -4px rgba(30,124,115,0.35)" }}
              whileTap={{ scale: 0.97 }}
              transition={{ duration: 0.22, ease: "easeOut" }}
              className="flex h-12 items-center gap-2 rounded-full bg-primary-700 px-6 text-sm font-bold text-white"
            >
              <DirectionalChevron direction={direction} className="h-4 w-4" />
              {ctaLearnMore}
            </motion.div>
          </Link>
        </motion.div>
      </div>
    </section>
  );
}