import { motion, useScroll, useTransform } from "framer-motion";
import { useLanguage } from "@/contexts/LanguageContext";
import { CheckCircle, Diamond, Clock, MapPin } from "lucide-react";
import { useRef, useState } from "react";
import brooklynBg from "@/assets/brooklyn-bg.jpg";

const items = [
  { key: "item1", icon: CheckCircle },
  { key: "item2", icon: Diamond },
  { key: "item3", icon: Clock },
  { key: "item4", icon: MapPin },
];

const AboutSection = () => {
  const { t } = useLanguage();
  const sectionRef = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({
    target: sectionRef,
    offset: ["start end", "end start"],
  });

  const bgY = useTransform(scrollYProgress, [0, 1], ["0%", "25%"]);
  const hazeOpacity = useTransform(scrollYProgress, [0, 0.5, 1], [0.3, 0.6, 0.3]);
  const floatY1 = useTransform(scrollYProgress, [0, 1], [0, -40]);
  const floatY2 = useTransform(scrollYProgress, [0, 1], [0, -25]);

  return (
    <section
      ref={sectionRef}
      id="about"
      className="relative overflow-hidden"
      style={{ padding: "clamp(6rem, 10vw, 10rem) 0" }}
    >
      {/* Brooklyn parallax background */}
      <motion.div
        className="absolute inset-0 z-0"
        style={{ y: bgY }}
      >
        <img
          src={brooklynBg}
          alt="Brooklyn Bridge at dusk"
          className="absolute inset-0 w-full h-[130%] object-cover object-center"
          style={{ filter: "brightness(0.55) saturate(1.1)" }}
        />
      </motion.div>

      {/* Color grade overlay — brand harmony */}
      <div
        className="absolute inset-0 z-[1]"
        style={{
          background: `
            linear-gradient(180deg, hsl(0 0% 3% / 0.88) 0%, hsl(0 0% 3% / 0.35) 25%, hsl(0 0% 3% / 0.3) 50%, hsl(0 0% 3% / 0.35) 75%, hsl(0 0% 3% / 0.88) 100%),
            linear-gradient(135deg, hsl(var(--brand-red) / 0.05) 0%, transparent 50%)
          `,
        }}
      />

      {/* Atmospheric haze layer */}
      <motion.div
        className="absolute inset-0 z-[2] pointer-events-none"
        style={{
          opacity: hazeOpacity,
          background: "radial-gradient(ellipse 80% 50% at 50% 60%, hsl(0 0% 3% / 0.25) 0%, transparent 100%)",
        }}
      />

      {/* Cinematic red bloom — left */}
      <div
        className="absolute z-[2] pointer-events-none"
        style={{
          left: "-5%",
          top: "20%",
          width: "500px",
          height: "500px",
          background: "radial-gradient(circle, hsl(var(--brand-red) / 0.06) 0%, transparent 70%)",
          filter: "blur(40px)",
        }}
      />

      {/* Cinematic red bloom — right */}
      <div
        className="absolute z-[2] pointer-events-none"
        style={{
          right: "-5%",
          bottom: "15%",
          width: "400px",
          height: "400px",
          background: "radial-gradient(circle, hsl(var(--brand-red) / 0.05) 0%, transparent 70%)",
          filter: "blur(50px)",
        }}
      />

      {/* Floating accent elements */}
      <motion.div
        className="absolute z-[3] pointer-events-none"
        style={{
          y: floatY1,
          top: "15%",
          right: "10%",
          width: "3px",
          height: "80px",
          background: "linear-gradient(180deg, hsl(var(--brand-red) / 0.4), transparent)",
          borderRadius: "2px",
        }}
      />
      <motion.div
        className="absolute z-[3] pointer-events-none"
        style={{
          y: floatY2,
          bottom: "20%",
          left: "8%",
          width: "60px",
          height: "60px",
          border: "1px solid hsl(var(--brand-red) / 0.1)",
          borderRadius: "50%",
        }}
      />
      <motion.div
        className="absolute z-[3] pointer-events-none"
        style={{
          y: floatY1,
          top: "40%",
          left: "5%",
          width: "2px",
          height: "50px",
          background: "linear-gradient(180deg, transparent, hsl(0 0% 100% / 0.08), transparent)",
        }}
      />

      {/* Light sweep */}
      <div
        className="absolute inset-0 z-[3] pointer-events-none"
        style={{
          background: "linear-gradient(105deg, transparent 40%, hsl(0 0% 100% / 0.02) 50%, transparent 60%)",
        }}
      />

      {/* Content */}
      <div className="container mx-auto px-6 relative z-10">
        {/* Header */}
        <motion.div
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-80px" }}
          transition={{ duration: 1, ease: [0.16, 1, 0.3, 1] }}
          className="text-center mb-20"
        >
          <span className="eyebrow-label mb-5 block">Why Us</span>

          <h2
            className="font-display text-foreground mb-5"
            style={{
              fontSize: "clamp(2rem, 5vw, 3.5rem)",
              lineHeight: 1.1,
              letterSpacing: "0.04em",
            }}
          >
            {t("about.title")}
          </h2>

          {/* Decorative line */}
          <div className="mx-auto mb-6" style={{
            width: "60px",
            height: "2px",
            background: "linear-gradient(90deg, transparent, hsl(var(--brand-red)), transparent)",
          }} />

          <p
            className="font-body text-muted-foreground max-w-2xl mx-auto leading-relaxed"
            style={{ fontSize: "clamp(0.875rem, 1.2vw, 1.05rem)" }}
          >
            {t("about.subtitle")}
          </p>
        </motion.div>

        {/* Cards grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-5 md:gap-6 max-w-5xl mx-auto">
          {items.map((item, i) => (
            <BenefitCard key={item.key} item={item} index={i} t={t} />
          ))}
        </div>
      </div>

      {/* Top edge line */}
      <div className="absolute top-0 left-0 right-0 h-px z-10" style={{
        background: "linear-gradient(90deg, transparent, hsl(0 0% 100% / 0.08), transparent)",
      }} />
      {/* Bottom edge line */}
      <div className="absolute bottom-0 left-0 right-0 h-px z-10" style={{
        background: "linear-gradient(90deg, transparent, hsl(0 0% 100% / 0.08), transparent)",
      }} />
    </section>
  );
};

/* Premium benefit card */
function BenefitCard({
  item,
  index,
  t,
}: {
  item: { key: string; icon: React.ElementType };
  index: number;
  t: (k: string) => string;
}) {
  const Icon = item.icon;
  const [hovered, setHovered] = useState(false);

  return (
    <motion.div
      initial={{ opacity: 0, y: 35 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: "-60px" }}
      transition={{ delay: index * 0.12, duration: 0.7, ease: [0.16, 1, 0.3, 1] }}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      className="relative group rounded-2xl overflow-hidden"
      style={{
        background: "linear-gradient(160deg, hsl(0 0% 100% / 0.07) 0%, hsl(0 0% 100% / 0.02) 100%)",
        border: "1px solid hsl(0 0% 100% / 0.1)",
        backdropFilter: "blur(24px) saturate(1.4)",
        boxShadow: hovered
          ? "0 16px 64px hsl(0 0% 0% / 0.6), 0 0 40px -12px hsl(var(--brand-red) / 0.15), inset 0 1px 0 hsl(0 0% 100% / 0.1)"
          : "0 8px 40px hsl(0 0% 0% / 0.5), inset 0 1px 0 hsl(0 0% 100% / 0.06)",
        transform: hovered ? "translateY(-4px)" : "translateY(0)",
        borderColor: hovered ? "hsl(var(--brand-red) / 0.25)" : "hsl(0 0% 100% / 0.1)",
        transition: "all 0.6s cubic-bezier(0.16, 1, 0.3, 1)",
      }}
    >
      {/* Top highlight line */}
      <div
        className="absolute top-0 left-0 right-0 h-px"
        style={{
          background: "linear-gradient(90deg, transparent 10%, hsl(0 0% 100% / 0.15) 50%, transparent 90%)",
        }}
      />

      {/* Red accent glow on hover */}
      <div
        className="absolute -bottom-8 -right-8 w-40 h-40 pointer-events-none transition-opacity duration-700"
        style={{
          opacity: hovered ? 0.6 : 0,
          background: "radial-gradient(circle, hsl(var(--brand-red) / 0.1) 0%, transparent 70%)",
          filter: "blur(20px)",
        }}
      />

      <div className="relative z-10 p-7 md:p-8 flex gap-5 items-start">
        {/* Icon container */}
        <div
          className="flex-shrink-0 w-14 h-14 rounded-xl flex items-center justify-center relative"
          style={{
            background: hovered
              ? "linear-gradient(135deg, hsl(var(--brand-red)), hsl(var(--brand-red-glow)))"
              : "linear-gradient(135deg, hsl(var(--brand-red) / 0.9), hsl(var(--brand-red-glow) / 0.85))",
            boxShadow: hovered
              ? "0 6px 24px hsl(var(--brand-red) / 0.4), inset 0 1px 0 hsl(0 0% 100% / 0.25)"
              : "0 4px 16px hsl(var(--brand-red) / 0.25), inset 0 1px 0 hsl(0 0% 100% / 0.15)",
            transition: "all 0.6s cubic-bezier(0.16, 1, 0.3, 1)",
          }}
        >
          <Icon className="w-6 h-6 text-primary-foreground relative z-10" strokeWidth={1.6} />
          {/* Outer glow ring */}
          <div
            className="absolute inset-[-4px] rounded-xl pointer-events-none transition-opacity duration-700"
            style={{
              opacity: hovered ? 1 : 0,
              background: "linear-gradient(135deg, hsl(var(--brand-red) / 0.3), transparent 60%)",
              filter: "blur(8px)",
              zIndex: -1,
            }}
          />
        </div>

        {/* Text */}
        <div className="flex-1 min-w-0">
          <h3
            className="font-display text-foreground mb-2"
            style={{
              fontSize: "clamp(1.05rem, 1.4vw, 1.2rem)",
              letterSpacing: "0.03em",
              lineHeight: 1.3,
            }}
          >
            {t(`about.${item.key}.title`)}
          </h3>
          <p
            className="font-body text-muted-foreground leading-relaxed"
            style={{ fontSize: "clamp(0.82rem, 1vw, 0.9rem)" }}
          >
            {t(`about.${item.key}.desc`)}
          </p>
        </div>
      </div>

      {/* Bottom border accent on hover */}
      <div
        className="absolute bottom-0 left-[10%] right-[10%] h-px transition-opacity duration-700"
        style={{
          opacity: hovered ? 1 : 0,
          background: "linear-gradient(90deg, transparent, hsl(var(--brand-red) / 0.4), transparent)",
        }}
      />
    </motion.div>
  );
}

export default AboutSection;
