"use client";

import { motion } from "motion/react";
import Image from "next/image";

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

type Props = {
  title: string;
  description: string;
  imageSrc?: string;
  imageAlt?: string;
  direction: "ltr" | "rtl";
};

export function CompanyIntroClient({ title, description, imageSrc, imageAlt, direction }: Props) {
  return (
    <section className="relative overflow-hidden bg-white px-4 py-16 sm:px-8 lg:px-[120px] lg:py-20">
      {/* Subtle background orb */}
      <motion.div
        aria-hidden
        className="pointer-events-none absolute rounded-full"
        style={{
          width: 500,
          height: 500,
          right: -180,
          top: -180,
          background: "radial-gradient(ellipse, rgba(30,124,115,0.06) 0%, transparent 70%)",
          filter: "blur(72px)",
        }}
        initial={{ opacity: 0 }}
        whileInView={{ opacity: 1 }}
        viewport={{ once: true }}
        transition={{ duration: 2, ease: "easeOut" }}
      />

      <div
        className="mx-auto grid max-w-[1180px] items-center gap-12 lg:grid-cols-[1fr_1.15fr] lg:gap-24"
        dir="ltr"
      >
        {/* Image — clip-path reveal */}
        <motion.div
          className="relative min-h-[260px] overflow-hidden rounded-[24px] shadow-[0_16px_64px_-8px_rgba(13,52,48,0.14)] sm:min-h-[330px] lg:col-start-1 lg:row-start-1 lg:min-h-[380px]"
          initial={{ opacity: 0, clipPath: "inset(0 100% 0 0 round 24px)" }}
          whileInView={{ opacity: 1, clipPath: "inset(0 0% 0 0 round 24px)" }}
          viewport={{ once: true }}
          transition={{ duration: 0.95, ease, delay: 0.1 }}
        >
          {imageSrc ? (
            <motion.div
              className="absolute inset-0"
              initial={{ scale: 1.08 }}
              whileInView={{ scale: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 1.1, ease: "easeOut", delay: 0.1 }}
            >
              <Image
                src={imageSrc}
                alt={imageAlt || title}
                fill
                className="object-cover"
                sizes="(min-width: 1024px) 520px, 100vw"
              />
              {/* Subtle teal gradient wash at bottom */}
              <div className="absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-[rgba(13,52,48,0.18)] to-transparent" />
            </motion.div>
          ) : (
            <div className="absolute inset-0 rounded-[24px] bg-muted" />
          )}

          {/* Decorative corner accent */}
          <motion.div
            aria-hidden
            className="absolute bottom-4 start-4 h-12 w-12 rounded-full border-2 border-primary/30"
            initial={{ opacity: 0, scale: 0 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true }}
            transition={{ type: "spring", stiffness: 200, damping: 16, delay: 0.85 }}
          />
          <motion.div
            aria-hidden
            className="absolute bottom-4 start-4 h-20 w-20 rounded-full border border-primary/15"
            initial={{ opacity: 0, scale: 0 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true }}
            transition={{ type: "spring", stiffness: 160, damping: 18, delay: 0.95 }}
          />
        </motion.div>

        {/* Text — stagger */}
        <div
          className="flex flex-col gap-6 text-start lg:col-start-2 lg:row-start-1"
          dir={direction}
        >
          {/* Teal accent bar */}
          <motion.div
            className="h-1 w-12 rounded-full bg-primary"
            initial={{ scaleX: 0, originX: direction === "rtl" ? 1 : 0 }}
            whileInView={{ scaleX: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.55, ease, delay: 0.15 }}
          />

          <motion.h2
            className="text-[34px] font-bold leading-[1.3] text-foreground sm:text-[42px]"
            initial={{ opacity: 0, y: 24, filter: "blur(8px)" }}
            whileInView={{ opacity: 1, y: 0, filter: "blur(0px)" }}
            viewport={{ once: true }}
            transition={{ duration: 0.7, ease, delay: 0.2 }}
          >
            {title}
          </motion.h2>

          <motion.p
            className="max-w-[690px] text-[18px] font-medium leading-[1.85] text-muted-foreground"
            initial={{ opacity: 0, y: 18 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.65, ease, delay: 0.35 }}
          >
            {description}
          </motion.p>
        </div>
      </div>
    </section>
  );
}