import { motion, useScroll, useTransform } from "framer-motion";
import { useLanguage } from "@/contexts/LanguageContext";
import { useRef } from "react";
import nycBg from "@/assets/nyc-bg.jpg";

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

  const bgY = useTransform(scrollYProgress, [0, 1], ["-8%", "8%"]);
  const hazeY = useTransform(scrollYProgress, [0, 1], ["0%", "15%"]);
  const contentY = useTransform(scrollYProgress, [0, 0.5, 1], [60, 0, -20]);
  const contentOpacity = useTransform(scrollYProgress, [0, 0.25, 0.85, 1], [0, 1, 1, 0.7]);

  return (
    <section
      ref={ref}
      className="relative min-h-[85vh] md:min-h-[90vh] flex items-center overflow-hidden"
    >
      {/* Parallax city background */}
      <motion.div className="absolute inset-[-15%] will-change-transform" style={{ y: bgY }}>
        <img
          src={nycBg}
          alt="Times Square New York cityscape"
          className="w-full h-full object-cover"
        />
      </motion.div>

      {/* Cinematic dark overlay */}
      <div className="absolute inset-0 bg-gradient-to-b from-background via-background/80 to-background" />

      {/* Red ambient glow */}
      <div
        className="absolute inset-0 pointer-events-none"
        style={{
          background:
            "radial-gradient(ellipse 60% 50% at 30% 60%, hsl(0 100% 50% / 0.04) 0%, transparent 70%), radial-gradient(ellipse 40% 40% at 80% 40%, hsl(0 100% 50% / 0.03) 0%, transparent 70%)",
        }}
      />

      {/* Haze / depth layer */}
      <motion.div
        className="absolute inset-0 pointer-events-none"
        style={{
          y: hazeY,
          background:
            "linear-gradient(180deg, transparent 0%, hsl(0 0% 0% / 0.15) 40%, hsl(0 0% 0% / 0.3) 70%, transparent 100%)",
        }}
      />

      {/* Vignette */}
      <div
        className="absolute inset-0 pointer-events-none"
        style={{
          background:
            "radial-gradient(ellipse at center, transparent 40%, hsl(0 0% 0% / 0.55) 100%)",
        }}
      />

      {/* Subtle grain overlay */}
      <div
        className="absolute inset-0 pointer-events-none opacity-[0.025]"
        style={{
          backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E")`,
          backgroundSize: "128px 128px",
        }}
      />

      {/* Content */}
      <motion.div
        style={{ y: contentY, opacity: contentOpacity }}
        className="relative z-10 container mx-auto px-6 py-28 md:py-36 lg:py-40"
      >
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-start max-w-6xl mx-auto">
          {/* Left — Eyebrow + Headline */}
          <motion.div
            initial={{ opacity: 0, x: -40 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true, margin: "-80px" }}
            transition={{ duration: 1, ease: [0.16, 1, 0.3, 1] }}
          >
            {/* Eyebrow pill */}
            <span
              className="inline-block text-[10px] md:text-[11px] tracking-[0.3em] font-semibold mb-8 px-5 py-2.5 rounded-full border border-primary/20"
              style={{
                background:
                  "linear-gradient(135deg, hsl(0 100% 50% / 0.08), hsl(0 0% 100% / 0.04))",
                backdropFilter: "blur(12px)",
                color: "hsl(0 100% 60%)",
                boxShadow:
                  "0 0 20px -8px hsl(0 100% 50% / 0.15), inset 0 1px 0 hsl(0 0% 100% / 0.06)",
              }}
            >
              {t("aboutCompany.eyebrow")}
            </span>

            {/* Headline */}
            <h2
              className="font-display text-3xl sm:text-4xl md:text-[2.75rem] lg:text-5xl font-semibold leading-[1.12] text-foreground tracking-wide"
              style={{
                textShadow:
                  "0 2px 30px hsl(0 100% 50% / 0.1), 0 4px 20px hsl(0 0% 0% / 0.5)",
              }}
            >
              {t("aboutCompany.headline")}
            </h2>

            {/* Decorative line */}
            <motion.div
              initial={{ scaleX: 0 }}
              whileInView={{ scaleX: 1 }}
              viewport={{ once: true }}
              transition={{ delay: 0.5, duration: 0.8, ease: "easeOut" }}
              className="mt-8 h-px w-24 origin-left"
              style={{
                background:
                  "linear-gradient(90deg, hsl(0 100% 50% / 0.6), transparent)",
              }}
            />
          </motion.div>

          {/* Right — Body copy in glass panel */}
          <motion.div
            initial={{ opacity: 0, x: 40, y: 20 }}
            whileInView={{ opacity: 1, x: 0, y: 0 }}
            viewport={{ once: true, margin: "-80px" }}
            transition={{ duration: 1, delay: 0.2, ease: [0.16, 1, 0.3, 1] }}
          >
            <div
              className="relative rounded-2xl p-8 md:p-10"
              style={{
                background:
                  "linear-gradient(135deg, hsl(0 0% 100% / 0.05) 0%, hsl(0 0% 100% / 0.02) 100%)",
                border: "1px solid hsl(0 0% 100% / 0.07)",
                backdropFilter: "blur(20px) saturate(1.2)",
                boxShadow:
                  "0 8px 40px hsl(0 0% 0% / 0.4), 0 2px 8px hsl(0 0% 0% / 0.3), inset 0 1px 0 hsl(0 0% 100% / 0.06)",
              }}
            >
              {/* Top shimmer line */}
              <div
                className="absolute top-0 left-8 right-8 h-px"
                style={{
                  background:
                    "linear-gradient(90deg, transparent, hsl(0 0% 100% / 0.12), transparent)",
                }}
              />

              {/* Subtle red accent on left edge */}
              <div
                className="absolute top-8 bottom-8 left-0 w-px"
                style={{
                  background:
                    "linear-gradient(180deg, transparent, hsl(0 100% 50% / 0.3), transparent)",
                }}
              />

              <p className="font-body text-sm md:text-[15px] text-foreground/80 leading-[1.85] mb-6">
                {t("aboutCompany.body1")}
              </p>
              <p className="font-body text-sm md:text-[15px] text-foreground/80 leading-[1.85] mb-6">
                {t("aboutCompany.body2")}
              </p>
              <p className="font-body text-sm md:text-[15px] text-foreground/70 leading-[1.85]">
                {t("aboutCompany.body3")}
              </p>
            </div>
          </motion.div>
        </div>
      </motion.div>

      {/* Bottom gradient transition into next section */}
      <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-background to-transparent pointer-events-none" />
    </section>
  );
};

export default AboutCompanySection;
