import { motion, useScroll, useTransform } from "framer-motion";
import { useLanguage } from "@/contexts/LanguageContext";
import { useRef } from "react";
import { MessageSquare, Factory, Wrench, ClipboardCheck } from "lucide-react";

const steps = [
  { key: "step1", icon: MessageSquare },
  { key: "step2", icon: Factory },
  { key: "step3", icon: Wrench },
  { key: "step4", icon: ClipboardCheck },
];

const ProcessSection = () => {
  const { t } = useLanguage();
  const ref = useRef<HTMLElement>(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start end", "end start"],
  });
  const bgY = useTransform(scrollYProgress, [0, 1], ["-4%", "4%"]);
  const routeScale = useTransform(scrollYProgress, [0.15, 0.55], [0, 1]);

  return (
    <section ref={ref} className="relative py-36 md:py-52 overflow-hidden">
      {/* Deep black base */}
      <div className="absolute inset-0 bg-background" />

      {/* Parallax ambient layers */}
      <motion.div className="absolute inset-[-10%] will-change-transform" style={{ y: bgY }}>
        {/* NYC night bokeh — warm + red ambient */}
        <div
          className="absolute inset-0"
          style={{
            background: `
              radial-gradient(ellipse 500px 350px at 10% 25%, hsl(0 100% 45% / 0.05) 0%, transparent 70%),
              radial-gradient(ellipse 400px 300px at 90% 70%, hsl(0 80% 40% / 0.04) 0%, transparent 70%),
              radial-gradient(ellipse 350px 250px at 50% 90%, hsl(0 100% 50% / 0.03) 0%, transparent 60%),
              radial-gradient(ellipse 200px 150px at 75% 15%, hsl(30 60% 50% / 0.02) 0%, transparent 70%),
              radial-gradient(ellipse 250px 200px at 30% 65%, hsl(0 0% 100% / 0.008) 0%, transparent 70%),
              radial-gradient(ellipse 600px 400px at 50% 50%, hsl(0 50% 10% / 0.15) 0%, transparent 80%)
            `,
          }}
        />
        {/* Abstract architectural light streaks */}
        <div
          className="absolute inset-0 opacity-[0.03]"
          style={{
            background: `
              linear-gradient(72deg, transparent 30%, hsl(0 0% 100% / 0.08) 50%, transparent 70%),
              linear-gradient(108deg, transparent 40%, hsl(0 100% 50% / 0.04) 55%, transparent 65%)
            `,
          }}
        />
      </motion.div>

      {/* Animated horizontal light streak */}
      <motion.div
        className="absolute left-0 right-0 pointer-events-none z-[1]"
        style={{ top: "50%" }}
        animate={{ opacity: [0.2, 0.5, 0.2] }}
        transition={{ duration: 8, repeat: Infinity, ease: "easeInOut" }}
      >
        <div
          className="h-px"
          style={{
            background:
              "linear-gradient(90deg, transparent 2%, hsl(0 100% 50% / 0.06) 20%, hsl(0 100% 55% / 0.12) 50%, hsl(0 100% 50% / 0.06) 80%, transparent 98%)",
          }}
        />
        <div
          className="h-px mt-px blur-sm"
          style={{
            background:
              "linear-gradient(90deg, transparent 5%, hsl(0 100% 50% / 0.04) 25%, hsl(0 100% 55% / 0.08) 50%, hsl(0 100% 50% / 0.04) 75%, transparent 95%)",
          }}
        />
      </motion.div>

      {/* Cinematic vignette */}
      <div
        className="absolute inset-0 pointer-events-none"
        style={{
          background:
            "linear-gradient(180deg, hsl(0 0% 2% / 0.7) 0%, transparent 18%, transparent 82%, hsl(0 0% 2% / 0.7) 100%)",
        }}
      />

      {/* Grain overlay */}
      <div
        className="absolute inset-0 pointer-events-none opacity-[0.018]"
        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",
        }}
      />

      <div className="container mx-auto px-6 relative z-10">
        {/* ── Section Header ── */}
        <motion.div
          initial={{ opacity: 0, y: 50 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-80px" }}
          transition={{ duration: 1, ease: [0.16, 1, 0.3, 1] }}
          className="text-center mb-28 md:mb-36"
        >
          {/* Eyebrow pill */}
          <span
            className="inline-block text-[10px] md:text-[11px] tracking-[0.35em] font-semibold mb-7 px-6 py-2.5 rounded-full border border-primary/15"
            style={{
              background:
                "linear-gradient(135deg, hsl(0 100% 50% / 0.06), hsl(0 0% 100% / 0.02))",
              backdropFilter: "blur(16px) saturate(1.4)",
              color: "hsl(0 100% 62%)",
              boxShadow:
                "0 0 24px -8px hsl(0 100% 50% / 0.1), inset 0 1px 0 hsl(0 0% 100% / 0.06)",
            }}
          >
            How We Work
          </span>

          {/* Title */}
          <h2
            className="font-display text-4xl md:text-5xl lg:text-[3.8rem] text-foreground mb-6 tracking-wide leading-[1.08]"
            style={{
              textShadow:
                "0 2px 40px hsl(0 100% 50% / 0.07), 0 4px 24px hsl(0 0% 0% / 0.6)",
            }}
          >
            {t("process.title")}
          </h2>

          {/* Subtitle */}
          <p className="font-body text-muted-foreground max-w-md mx-auto text-sm md:text-[15px] leading-relaxed">
            {t("process.subtitle")}
          </p>

          {/* Decorative line under header */}
          <div className="flex justify-center mt-8">
            <div
              className="w-16 h-px"
              style={{
                background:
                  "linear-gradient(90deg, transparent, hsl(0 100% 50% / 0.25), transparent)",
              }}
            />
          </div>
        </motion.div>

        {/* ── Timeline ── */}
        <div className="relative max-w-6xl mx-auto">
          {/* Route line — desktop */}
          <div className="hidden md:block absolute z-[1]" style={{ top: "28px", left: "10%", right: "10%" }}>
            {/* Base track */}
            <div
              className="h-px w-full"
              style={{ background: "hsl(0 0% 100% / 0.06)" }}
            />
            {/* Animated fill */}
            <motion.div
              className="h-px absolute top-0 left-0 origin-left"
              style={{
                scaleX: routeScale,
                width: "100%",
                background:
                  "linear-gradient(90deg, hsl(0 100% 50% / 0.15), hsl(0 100% 58% / 0.45), hsl(0 100% 50% / 0.15))",
              }}
            />
            {/* Soft glow trail */}
            <motion.div
              className="h-[3px] absolute -top-[1px] left-0 origin-left blur-[2px]"
              style={{
                scaleX: routeScale,
                width: "100%",
                background:
                  "linear-gradient(90deg, transparent 5%, hsl(0 100% 50% / 0.1) 50%, transparent 95%)",
              }}
            />
            {/* Traveling light pulse */}
            <motion.div
              className="absolute -top-[3px] h-[7px] w-16 blur-[4px]"
              style={{
                background: "radial-gradient(ellipse, hsl(0 100% 55% / 0.35), transparent)",
              }}
              animate={{ left: ["0%", "92%", "0%"] }}
              transition={{ duration: 6, repeat: Infinity, ease: "easeInOut" }}
            />
          </div>

          {/* Steps grid */}
          <div className="grid grid-cols-1 md:grid-cols-4 gap-10 md:gap-7">
            {steps.map((step, i) => {
              const Icon = step.icon;
              return (
                <motion.div
                  key={step.key}
                  initial={{ opacity: 0, y: 60 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true, margin: "-60px" }}
                  transition={{
                    delay: i * 0.15,
                    duration: 0.9,
                    ease: [0.16, 1, 0.3, 1],
                  }}
                  className="relative group flex flex-col items-center"
                >
                  {/* ── Number milestone ── */}
                  <div className="relative z-10 mb-8 flex items-center justify-center">
                    {/* Soft outer pulse */}
                    <motion.div
                      className="absolute rounded-full"
                      style={{
                        width: "64px",
                        height: "64px",
                        border: "1px solid hsl(0 100% 50% / 0.08)",
                      }}
                      animate={{ scale: [1, 1.3, 1], opacity: [0.4, 0, 0.4] }}
                      transition={{ duration: 3, repeat: Infinity, ease: "easeInOut", delay: i * 0.5 }}
                    />

                    {/* Ambient glow */}
                    <div
                      className="absolute rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-700"
                      style={{
                        width: "72px",
                        height: "72px",
                        background: "radial-gradient(circle, hsl(0 100% 50% / 0.12) 0%, transparent 70%)",
                        filter: "blur(8px)",
                      }}
                    />

                    {/* Crystal capsule */}
                    <div
                      className="relative w-[52px] h-[52px] md:w-[56px] md:h-[56px] rounded-full flex items-center justify-center transition-all duration-600 group-hover:scale-110"
                      style={{
                        background: "linear-gradient(160deg, hsl(0 0% 100% / 0.08) 0%, hsl(0 0% 100% / 0.02) 100%)",
                        border: "1px solid hsl(0 0% 100% / 0.12)",
                        backdropFilter: "blur(16px) saturate(1.4)",
                        boxShadow: `
                          0 4px 20px hsl(0 0% 0% / 0.4),
                          inset 0 1px 0 hsl(0 0% 100% / 0.1),
                          inset 0 -1px 2px hsl(0 0% 0% / 0.2)
                        `,
                      }}
                    >
                      {/* Top glass reflection */}
                      <div
                        className="absolute top-[3px] left-1/2 -translate-x-1/2 w-[55%] h-[30%] rounded-full"
                        style={{
                          background: "linear-gradient(180deg, hsl(0 0% 100% / 0.12) 0%, transparent 100%)",
                        }}
                      />

                      {/* Red inner ring */}
                      <div
                        className="absolute inset-[3px] rounded-full opacity-60 group-hover:opacity-100 transition-opacity duration-500"
                        style={{
                          border: "1px solid hsl(0 100% 50% / 0.2)",
                          boxShadow: "inset 0 0 12px hsl(0 100% 50% / 0.06)",
                        }}
                      />

                      <span
                        className="font-display text-sm md:text-[15px] font-semibold relative z-10 tracking-wider"
                        style={{
                          color: "hsl(0 0% 100% / 0.85)",
                          textShadow: "0 0 12px hsl(0 100% 50% / 0.3), 0 1px 4px hsl(0 0% 0% / 0.5)",
                        }}
                      >
                        {String(i + 1).padStart(2, "0")}
                      </span>
                    </div>

                    {/* Bottom red dot accent */}
                    <motion.div
                      className="absolute rounded-full"
                      style={{
                        bottom: "-2px",
                        width: "4px",
                        height: "4px",
                        background: "hsl(0 100% 55%)",
                        boxShadow: "0 0 8px 2px hsl(0 100% 50% / 0.3)",
                      }}
                      animate={{ opacity: [0.5, 1, 0.5] }}
                      transition={{ duration: 2.5, repeat: Infinity, ease: "easeInOut", delay: i * 0.3 }}
                    />
                  </div>

                  {/* ── Step panel ── */}
                  <div
                    className="relative rounded-2xl p-7 md:p-8 w-full transition-all duration-700"
                    style={{
                      background:
                        "linear-gradient(165deg, hsl(0 0% 100% / 0.05) 0%, hsl(0 0% 100% / 0.015) 40%, hsl(0 0% 0% / 0.15) 100%)",
                      border: "1px solid hsl(0 0% 100% / 0.07)",
                      backdropFilter: "blur(20px) saturate(1.3)",
                      boxShadow: `
                        0 12px 48px hsl(0 0% 0% / 0.4),
                        0 2px 12px hsl(0 0% 0% / 0.2),
                        inset 0 1px 0 hsl(0 0% 100% / 0.05)
                      `,
                    }}
                  >
                    {/* Top edge shimmer */}
                    <div
                      className="absolute top-0 left-8 right-8 h-px"
                      style={{
                        background:
                          "linear-gradient(90deg, transparent, hsl(0 0% 100% / 0.12), transparent)",
                      }}
                    />

                    {/* Hover spotlight */}
                    <div
                      className="absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none"
                      style={{
                        background:
                          "radial-gradient(ellipse 250px 180px at 50% 20%, hsl(0 100% 50% / 0.05) 0%, transparent 70%)",
                      }}
                    />

                    {/* Hover border glow */}
                    <div
                      className="absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none"
                      style={{
                        boxShadow:
                          "inset 0 0 0 1px hsl(0 100% 50% / 0.1), 0 0 36px -12px hsl(0 100% 50% / 0.08)",
                      }}
                    />

                    {/* Icon */}
                    <div className="flex justify-center mb-5">
                      <div
                        className="w-11 h-11 rounded-xl flex items-center justify-center transition-all duration-500 group-hover:scale-105"
                        style={{
                          background:
                            "linear-gradient(135deg, hsl(0 0% 100% / 0.06), hsl(0 0% 100% / 0.02))",
                          border: "1px solid hsl(0 0% 100% / 0.08)",
                          boxShadow:
                            "0 2px 8px hsl(0 0% 0% / 0.2), inset 0 1px 0 hsl(0 0% 100% / 0.04)",
                        }}
                      >
                        <Icon className="w-5 h-5 text-primary" strokeWidth={1.5} />
                      </div>
                    </div>

                    {/* Title */}
                    <h3
                      className="font-display text-lg md:text-xl text-foreground mb-3 tracking-wide text-center"
                      style={{
                        textShadow: "0 1px 12px hsl(0 0% 0% / 0.5)",
                      }}
                    >
                      {t(`process.${step.key}.title`)}
                    </h3>

                    {/* Description */}
                    <p className="font-body text-[13px] md:text-sm text-muted-foreground leading-relaxed text-center">
                      {t(`process.${step.key}.desc`)}
                    </p>
                  </div>

                  {/* Mobile connector */}
                  {i < steps.length - 1 && (
                    <div className="md:hidden flex justify-center py-3">
                      <div
                        className="w-px h-10"
                        style={{
                          background:
                            "linear-gradient(180deg, hsl(0 100% 50% / 0.3), hsl(0 100% 50% / 0.03))",
                        }}
                      />
                    </div>
                  )}
                </motion.div>
              );
            })}
          </div>
        </div>
      </div>

      {/* Section dividers */}
      <div className="section-divider-glow w-full absolute top-0" />
      <div className="section-divider-glow w-full absolute bottom-0" />
    </section>
  );
};

export default ProcessSection;
