import { motion } from "framer-motion";
import { Link } from "react-router-dom";
import { FaPlay } from "react-icons/fa";
import { MdFlightTakeoff, MdRadio } from "react-icons/md";
import { GiFilmProjector } from "react-icons/gi";
import { useTranslation } from "react-i18next";

const fadeLeft = {
  initial: { opacity: 0, x: -50 },
  whileInView: { opacity: 1, x: 0 },
  transition: { duration: 0.7, ease: "easeOut" as const },
  viewport: { once: true },
};

const stagger = {
  initial: "hidden",
  whileInView: "visible",
  viewport: { once: true },
  variants: {
    hidden: {},
    visible: { transition: { staggerChildren: 0.12 } },
  },
};

const staggerItem = {
  variants: {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: "easeOut" as const } },
  },
};

export default function DroneSection() {
  const { t } = useTranslation("home");

  const features = [
    { icon: <GiFilmProjector />, label: t("drone.feature1Label"), sub: t("drone.feature1Sub") },
    { icon: <MdFlightTakeoff />, label: t("drone.feature2Label"), sub: t("drone.feature2Sub") },
    { icon: <MdRadio />,         label: t("drone.feature3Label"), sub: t("drone.feature3Sub") },
  ];

  return (
    <section id="drone" className="section" style={{ position: "relative", overflow: "hidden", background: "#030a16" }}>

      {/* Full-bleed background video */}
      <video
        src="https://vontor-cz.s3.eu-central-1.amazonaws.com/media/DroneVideo_web.mp4"
        autoPlay
        loop
        muted
        playsInline
        style={{
          position: "absolute",
          inset: 0,
          width: "100%",
          height: "100%",
          objectFit: "cover",
          zIndex: 0,
        }}
      />

      {/* Base dark scrim */}
      <div style={{ position: "absolute", inset: 0, background: "rgba(3,8,22,0.48)", zIndex: 1 }} />

      {/* Blue diagonal clip-path panel */}
      <div className="drone-blue-panel" style={{
        position: "absolute",
        inset: 0,
        background: "linear-gradient(160deg, color-mix(in hsl, var(--c-other), transparent 30%) 0%, color-mix(in hsl, var(--c-other), black 15%) 100%)",
        clipPath: "polygon(0 0, 40% 0, 28% 100%, 0 100%)",
        zIndex: 2,
      }} />

      {/* Right-side vignette for text readability */}
      <div className="drone-vignette" style={{
        position: "absolute",
        inset: 0,
        background: "linear-gradient(to left, rgba(3,8,22,0.60) 0%, transparent 55%)",
        zIndex: 2,
      }} />

      <div className="container" style={{ position: "relative", zIndex: 3, display: "grid", gridTemplateColumns: "minmax(0, 1fr) 2fr", gap: "clamp(1.5rem, 4vw, 4rem)", alignItems: "center" }}>

        {/* Left: icon floating over blue panel */}
        <motion.div {...fadeLeft} className="drone-icon-col mr-auto" style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "1.5rem", padding: "2rem 0" }}>
          <MdFlightTakeoff style={{
            fontSize: "7.5rem",
            color: "#fff",
            filter: "drop-shadow(0 0 2.5rem rgba(255,255,255,0.22))",
          }} />
          <p style={{ color: "rgba(255,255,255,0.78)", fontSize: "0.9rem", fontWeight: 600, textAlign: "center", margin: 0 }}>
            DJI · Sony · Gyroscope Stabilized
          </p>
        </motion.div>

        {/* Right: text */}
        <motion.div {...stagger} className="drone-text" style={{ display: "flex", flexDirection: "column", gap: "1.2rem", paddingLeft: "1.5rem" }}>
          <motion.div {...staggerItem}>
            <span style={{
              display: "inline-block",
              padding: "0.3em 0.9em",
              borderRadius: "9999px",
              background: "color-mix(in hsl, var(--c-other), transparent 75%)",
              border: "1px solid color-mix(in hsl, var(--c-other), transparent 40%)",
              color: "var(--c-other)",
              fontSize: "0.78rem",
              fontWeight: 700,
              letterSpacing: "0.08em",
              textTransform: "uppercase",
            }}>
              {t("drone.badge")}
            </span>
          </motion.div>

          <motion.h2 {...staggerItem} style={{ fontSize: "clamp(1.8rem, 4vw, 2.8rem)", fontWeight: 800, lineHeight: 1.15, margin: 0, color: "#fff" }}>
            {t("drone.title")}{" "}
            <span className="text-rainbow">{t("drone.titleHighlight")}</span>
          </motion.h2>

          <motion.p {...staggerItem} style={{ color: "rgba(255,255,255,0.72)", lineHeight: 1.75, fontSize: "1rem", margin: 0 }}>
            {t("drone.description")}
          </motion.p>

          {/* Feature list */}
          <motion.div {...staggerItem} style={{ display: "flex", flexDirection: "column", gap: "0.8rem" }}>
            {features.map(({ icon, label, sub }) => (
              <div key={label} style={{ display: "flex", gap: "1rem", alignItems: "flex-start" }}>
                <div style={{
                  width: "2.4rem",
                  height: "2.4rem",
                  borderRadius: "0.6rem",
                  background: "color-mix(in hsl, var(--c-other), transparent 75%)",
                  border: "1px solid color-mix(in hsl, var(--c-other), transparent 45%)",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  fontSize: "1.1rem",
                  color: "var(--c-other)",
                  flexShrink: 0,
                }}>
                  {icon}
                </div>
                <div>
                  <div style={{ fontWeight: 600, fontSize: "0.95rem", color: "#fff" }}>{label}</div>
                  <div style={{ color: "rgba(255,255,255,0.50)", fontSize: "0.85rem" }}>{sub}</div>
                </div>
              </div>
            ))}
          </motion.div>

          {/* Cert badges */}
          <motion.div {...staggerItem} style={{ display: "flex", gap: "0.6rem", flexWrap: "wrap" }}>
            {["A1", "A2", "A3", "Restricted Airspace"].map((cert) => (
              <span key={cert} style={{
                padding: "0.3em 0.8em",
                borderRadius: "9999px",
                background: "rgba(255,255,255,0.08)",
                border: "1px solid rgba(255,255,255,0.22)",
                fontSize: "0.8rem",
                fontWeight: 600,
                color: "rgba(255,255,255,0.78)",
              }}>
                {cert}
              </span>
            ))}
          </motion.div>

          <motion.div {...staggerItem}>
            <Link
              to="/portfolio"
              style={{
                display: "inline-flex",
                alignItems: "center",
                gap: "0.5rem",
                padding: "0.75em 1.8em",
                borderRadius: "9999px",
                background: "linear-gradient(135deg, var(--c-other), color-mix(in hsl, var(--c-other), var(--c-boxes) 50%))",
                color: "#031D44",
                fontWeight: 700,
                fontSize: "0.9rem",
                textDecoration: "none",
                transition: "transform 0.2s ease, box-shadow 0.2s ease",
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.transform = "scale(1.04)";
                e.currentTarget.style.boxShadow = "0 0 1.5rem color-mix(in hsl, var(--c-other), transparent 45%)";
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.transform = "scale(1)";
                e.currentTarget.style.boxShadow = "none";
              }}
            >
              <FaPlay style={{ fontSize: "0.75rem" }} /> {t("drone.viewPortfolio")}
            </Link>
          </motion.div>
        </motion.div>
      </div>

      <style>{`
        @media (min-width: 769px) and (max-width: 1024px) {
          #drone .container {
            grid-template-columns: minmax(0, 1fr) 2.5fr !important;
            gap: 1.5rem !important;
          }
          #drone .drone-blue-panel {
            clip-path: polygon(0 0, 35% 0, 26% 100%, 0 100%) !important;
          }
        }
        @media (max-width: 768px) {
          #drone .container {
            grid-template-columns: 1fr !important;
            gap: 0 !important;
          }
          #drone .drone-icon-col {
            display: none !important;
          }
          #drone .drone-blue-panel {
            clip-path: polygon(0 0, 6px 0, 6px 100%, 0 100%) !important;
            background: var(--c-other) !important;
            opacity: 0.85;
          }
          #drone .drone-vignette {
            display: none;
          }
          #drone .drone-text {
            padding-left: 0 !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
          }
          #drone video { object-position: center; }
        }
      `}</style>
    </section>
  );
}
