import { motion } from "framer-motion";
import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { FaWrench, FaSearch, FaHeadset, FaSlidersH } from "react-icons/fa";
import { MdFlightTakeoff } from "react-icons/md";
import { GiAutoRepair } from "react-icons/gi";

const BRANDS = ["DJI", "Autel", "Parrot", "Skydio", "Holybro", "Custom builds"];

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

export default function DroneServicePage() {
  const { t } = useTranslation("services");

  const SERVICES = [
    {
      icon: <FaSearch />,
      color: "#87a9da",
      title: t("drone.card1Title"),
      desc: t("drone.card1Desc"),
    },
    {
      icon: <FaWrench />,
      color: "#70A288",
      title: t("drone.card2Title"),
      desc: t("drone.card2Desc"),
    },
    {
      icon: <FaSlidersH />,
      color: "#CAF0F8",
      title: t("drone.card3Title"),
      desc: t("drone.card3Desc"),
    },
    {
      icon: <FaHeadset />,
      color: "#70A288",
      title: t("drone.card4Title"),
      desc: t("drone.card4Desc"),
    },
  ];

  return (
    <main>
      {/* ── Hero ── */}
      <section style={{
        padding: "6rem 1.5rem 5rem",
        position: "relative", overflow: "hidden",
        background: "linear-gradient(180deg, color-mix(in hsl, var(--c-background), black 15%) 0%, var(--c-background) 100%)",
      }}>
        <div style={{
          position: "absolute", inset: 0, opacity: 0.04, pointerEvents: "none",
          backgroundImage: "linear-gradient(var(--c-lines) 1px, transparent 1px), linear-gradient(90deg, var(--c-lines) 1px, transparent 1px)",
          backgroundSize: "60px 60px",
        }} />
        <div style={{
          position: "absolute", top: "10%", right: "5%", width: "420px", height: "420px",
          borderRadius: "50%", background: "color-mix(in hsl, var(--c-other), transparent 88%)",
          filter: "blur(90px)", pointerEvents: "none",
        }} />

        <div className="container" style={{ position: "relative", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "4rem", alignItems: "center" }}>
          {/* Left — text */}
          <motion.div
            initial={{ opacity: 0, x: -30 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.65, ease: "easeOut" as const }}
          >
            <span style={{
              display: "inline-flex", alignItems: "center", gap: "0.4em",
              padding: "0.35em 1em", borderRadius: "9999px",
              border: "1px solid color-mix(in hsl, var(--c-other), transparent 45%)",
              background: "color-mix(in hsl, var(--c-other), transparent 82%)",
              color: "var(--c-other)", fontSize: "0.78rem", fontWeight: 700,
              letterSpacing: "0.08em", textTransform: "uppercase" as const,
              marginBottom: "1.5rem",
            }}>
              {t("drone.badge")}
            </span>

            <h1 style={{
              fontSize: "clamp(2.2rem, 5vw, 3.5rem)", fontWeight: 900,
              margin: "0.5rem 0 1rem", letterSpacing: "-0.02em",
              background: "linear-gradient(135deg, var(--c-other) 0%, var(--c-lines) 50%, var(--c-text) 100%)",
              WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", backgroundClip: "text",
              display: "inline-block",
            }}>
              {t("drone.title")}
            </h1>

            <p style={{
              color: "color-mix(in hsl, var(--c-text), transparent 35%)",
              lineHeight: 1.75, fontSize: "1.05rem", margin: "0 0 2rem", maxWidth: "440px",
            }}>
              {t("drone.subtitle")}
            </p>

            <Link
              to="/contact?service=drone"
              style={{
                display: "inline-flex", alignItems: "center", gap: "0.6rem",
                padding: "0.85em 2em", borderRadius: "9999px", fontWeight: 700, fontSize: "0.95rem",
                background: "linear-gradient(135deg, var(--c-other), color-mix(in hsl, var(--c-other), var(--c-boxes) 45%))",
                color: "#031D44", textDecoration: "none",
                boxShadow: "0 0 1.2rem color-mix(in hsl, var(--c-other), transparent 55%)",
                transition: "transform 0.2s ease, box-shadow 0.2s ease",
              }}
              onMouseEnter={e => { e.currentTarget.style.transform = "scale(1.05)"; e.currentTarget.style.boxShadow = "0 0 2rem color-mix(in hsl, var(--c-other), transparent 35%)"; }}
              onMouseLeave={e => { e.currentTarget.style.transform = "scale(1)";    e.currentTarget.style.boxShadow = "0 0 1.2rem color-mix(in hsl, var(--c-other), transparent 55%)"; }}
            >
              <FaWrench style={{ fontSize: "0.9rem" }} /> {t("drone.orderService")}
            </Link>
          </motion.div>

          {/* Right — icon */}
          <motion.div
            className="drone-servis-icon"
            initial={{ opacity: 0, x: 30 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.65, ease: "easeOut" as const, delay: 0.15 }}
            style={{ display: "flex", alignItems: "center", justifyContent: "center" }}
          >
            <GiAutoRepair style={{
              fontSize: "clamp(8rem, 18vw, 14rem)",
              color: "var(--c-other)",
              filter: "drop-shadow(0 0 3rem color-mix(in hsl, var(--c-other), transparent 65%))",
              opacity: 0.9,
            }} />
          </motion.div>
        </div>

        <style>{`
          @media (max-width: 768px) {
            #drone-servis-hero-grid { grid-template-columns: 1fr !important; }
            .drone-servis-icon { display: none !important; }
          }
        `}</style>
      </section>

      {/* ── Service cards ── */}
      <section style={{ padding: "5rem 1.5rem", background: "var(--c-background)" }}>
        <div className="container">
          <motion.div
            initial={{ opacity: 0, y: 24 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
            style={{ textAlign: "center", marginBottom: "3rem" }}
          >
            <h2 style={{ fontSize: "clamp(1.8rem, 4vw, 2.6rem)", fontWeight: 800, margin: "0 0 0.75rem" }}>
              {t("drone.whatIOffer")}
            </h2>
            <p style={{ color: "color-mix(in hsl, var(--c-text), transparent 40%)", maxWidth: "460px", margin: "0 auto", lineHeight: 1.7 }}>
              {t("drone.whatIOfferDesc")}
            </p>
          </motion.div>

          <motion.div
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true }}
            variants={{ visible: { transition: { staggerChildren: 0.1 } } }}
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
              gap: "1.2rem",
            }}
          >
            {SERVICES.map(({ icon, color, title, desc }) => (
              <motion.div
                key={title}
                variants={cardVariants}
                whileHover={{ scale: 1.03, y: -4 }}
                transition={{ type: "spring", stiffness: 280, damping: 22 }}
                className="glass"
                style={{ padding: "1.8rem", display: "flex", flexDirection: "column" as const, gap: "1rem", cursor: "default" }}
              >
                <div style={{
                  width: "2.8rem", height: "2.8rem", borderRadius: "0.75rem",
                  background: `color-mix(in hsl, ${color}, transparent 80%)`,
                  border: `1px solid color-mix(in hsl, ${color}, transparent 55%)`,
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontSize: "1.25rem", color,
                }}>
                  {icon}
                </div>
                <div>
                  <h3 style={{ margin: "0 0 0.5rem", fontSize: "1.05rem", fontWeight: 700 }}>{title}</h3>
                  <p style={{ margin: 0, color: "color-mix(in hsl, var(--c-text), transparent 35%)", fontSize: "0.9rem", lineHeight: 1.65 }}>{desc}</p>
                </div>
              </motion.div>
            ))}
          </motion.div>
        </div>
      </section>

      {/* ── Supported brands ── */}
      <section style={{ padding: "3rem 1.5rem", background: "color-mix(in hsl, var(--c-background), black 5%)" }}>
        <div className="container" style={{ textAlign: "center" }}>
          <motion.div
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
          >
            <p style={{
              color: "color-mix(in hsl, var(--c-text), transparent 50%)",
              fontSize: "0.8rem", marginBottom: "1.2rem",
              textTransform: "uppercase" as const, letterSpacing: "0.08em", fontWeight: 600,
            }}>
              {t("drone.supportedBrands")}
            </p>
            <div style={{ display: "flex", gap: "0.8rem", justifyContent: "center", flexWrap: "wrap" }}>
              {BRANDS.map(brand => (
                <span key={brand} style={{
                  padding: "0.4em 1em", borderRadius: "9999px",
                  background: "color-mix(in hsl, var(--c-background-light), transparent 30%)",
                  border: "1px solid color-mix(in hsl, var(--c-lines), transparent 65%)",
                  fontSize: "0.88rem", fontWeight: 500,
                  color: "color-mix(in hsl, var(--c-text), transparent 25%)",
                }}>
                  {brand}
                </span>
              ))}
            </div>
          </motion.div>
        </div>
      </section>

      {/* ── CTA ── */}
      <section style={{
        padding: "5rem 1.5rem", textAlign: "center",
        background: "color-mix(in hsl, var(--c-background), black 8%)",
        position: "relative", overflow: "hidden",
      }}>
        <div style={{
          position: "absolute", bottom: "-15%", left: "50%", transform: "translateX(-50%)",
          width: "500px", height: "250px", borderRadius: "50%",
          background: "color-mix(in hsl, var(--c-other), transparent 90%)", filter: "blur(70px)",
          pointerEvents: "none",
        }} />
        <motion.div
          initial={{ opacity: 0, y: 24 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          viewport={{ once: true }}
          style={{ position: "relative" }}
        >
          <MdFlightTakeoff style={{ fontSize: "3rem", color: "var(--c-other)", marginBottom: "1rem", filter: "drop-shadow(0 0 1rem color-mix(in hsl, var(--c-other), transparent 55%))" }} />
          <h2 style={{ fontSize: "clamp(1.7rem, 3.5vw, 2.4rem)", fontWeight: 800, margin: "0 0 1rem" }}>
            {t("drone.ctaTitle")}
          </h2>
          <p style={{ color: "color-mix(in hsl, var(--c-text), transparent 40%)", margin: "0 auto 2.2rem", maxWidth: "400px", lineHeight: 1.7 }}>
            {t("drone.ctaDesc")}
          </p>
          <Link
            to="/contact?service=drone"
            style={{
              display: "inline-flex", alignItems: "center", gap: "0.6rem",
              padding: "0.9em 2.4em", borderRadius: "9999px", fontWeight: 700, fontSize: "1rem",
              background: "linear-gradient(135deg, var(--c-other), color-mix(in hsl, var(--c-other), var(--c-boxes) 45%))",
              color: "#031D44", textDecoration: "none",
              boxShadow: "0 0 1.5rem color-mix(in hsl, var(--c-other), transparent 55%)",
              transition: "transform 0.2s ease, box-shadow 0.2s ease",
            }}
            onMouseEnter={e => { e.currentTarget.style.transform = "scale(1.06)"; e.currentTarget.style.boxShadow = "0 0 2.5rem color-mix(in hsl, var(--c-other), transparent 35%)"; }}
            onMouseLeave={e => { e.currentTarget.style.transform = "scale(1)";    e.currentTarget.style.boxShadow = "0 0 1.5rem color-mix(in hsl, var(--c-other), transparent 55%)"; }}
          >
            <FaWrench style={{ fontSize: "0.9rem" }} /> {t("drone.ctaButton")}
          </Link>
        </motion.div>
      </section>
    </main>
  );
}
