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

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

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

  const WHAT = [
    {
      icon: <MdFlightTakeoff />,
      color: "var(--c-other)",
      title: t("film.card1Title"),
      desc: t("film.card1Desc"),
    },
    {
      icon: <GiFilmProjector />,
      color: "var(--c-lines)",
      title: t("film.card2Title"),
      desc: t("film.card2Desc"),
    },
    {
      icon: <FaVideo />,
      color: "var(--c-text)",
      title: t("film.card3Title"),
      desc: t("film.card3Desc"),
    },
    {
      icon: <MdRadio />,
      color: "var(--c-other)",
      title: t("film.card4Title"),
      desc: t("film.card4Desc"),
    },
  ];

  const PRICING = [
    { label: t("film.pricing1Label"), value: t("film.pricing1Value"), note: t("film.pricing1Note") },
    { label: t("film.pricing2Label"), value: t("film.pricing2Value"), note: t("film.pricing2Note") },
    { label: t("film.pricing3Label"), value: t("film.pricing3Value"), note: t("film.pricing3Note") },
    { label: t("film.pricing4Label"), value: t("film.pricing4Value"), note: t("film.pricing4Note") },
  ];

  return (
    <main>
      {/* ── Reuse the DroneSection hero — covers aerial + film perfectly ── */}
      <DroneSection />

      {/* ── What's included ── */}
      <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("film.whatYouGet")}
            </h2>
            <p style={{ color: "color-mix(in hsl, var(--c-text), transparent 40%)", maxWidth: "460px", margin: "0 auto", lineHeight: 1.7 }}>
              {t("film.whatYouGetDesc")}
            </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",
            }}
          >
            {WHAT.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>

      {/* ── Pricing table ── */}
      <section style={{ padding: "4rem 1.5rem", background: "color-mix(in hsl, var(--c-background), black 5%)" }}>
        <div className="container" style={{ maxWidth: "600px" }}>
          <motion.div
            initial={{ opacity: 0, y: 24 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
          >
            <h2 style={{ fontSize: "clamp(1.8rem, 4vw, 2.4rem)", fontWeight: 800, margin: "0 0 2rem", textAlign: "center" }}>
              {t("film.pricingTitle")}
            </h2>
            <div className="glass" style={{ borderRadius: "1rem", overflow: "hidden" }}>
              {PRICING.map(({ label, value, note }, i) => (
                <div
                  key={label}
                  style={{
                    display: "flex", justifyContent: "space-between", alignItems: "center",
                    padding: "1rem 1.5rem", gap: "1rem",
                    borderBottom: i < PRICING.length - 1
                      ? "1px solid color-mix(in hsl, var(--c-lines), transparent 75%)"
                      : "none",
                  }}
                >
                  <div>
                    <div style={{ fontWeight: 600, fontSize: "0.95rem" }}>{label}</div>
                    <div style={{ color: "color-mix(in hsl, var(--c-text), transparent 50%)", fontSize: "0.8rem", marginTop: "0.1rem" }}>{note}</div>
                  </div>
                  <div style={{ fontWeight: 700, color: "var(--c-other)", fontSize: "1.05rem", whiteSpace: "nowrap" as const }}>
                    {value}
                  </div>
                </div>
              ))}
            </div>
            <p style={{
              color: "color-mix(in hsl, var(--c-text), transparent 50%)",
              fontSize: "0.8rem", marginTop: "0.75rem", textAlign: "center",
            }}>
              {t("film.pricingNote")}
            </p>
          </motion.div>
        </div>
      </section>

      {/* ── Cert badges strip ── */}
      <section style={{ padding: "2.5rem 1.5rem", background: "var(--c-background)" }}>
        <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.1rem",
              textTransform: "uppercase" as const, letterSpacing: "0.08em", fontWeight: 600,
            }}>
              {t("film.certifications")}
            </p>
            <div style={{ display: "flex", gap: "0.7rem", justifyContent: "center", flexWrap: "wrap" }}>
              {["A1", "A2", "A3", "Restricted Airspace", "Radiotelefonista"].map(cert => (
                <span key={cert} style={{
                  padding: "0.35em 0.9em", borderRadius: "9999px",
                  background: "color-mix(in hsl, var(--c-other), transparent 85%)",
                  border: "1px solid color-mix(in hsl, var(--c-other), transparent 55%)",
                  fontSize: "0.82rem", fontWeight: 600, color: "var(--c-other)",
                }}>
                  {cert}
                </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" }}
        >
          <h2 style={{ fontSize: "clamp(1.7rem, 3.5vw, 2.4rem)", fontWeight: 800, margin: "0 0 1rem" }}>
            {t("film.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("film.ctaDesc")}
          </p>
          <div style={{ display: "flex", gap: "1rem", justifyContent: "center", flexWrap: "wrap" }}>
            <Link
              to="/contact?service=video"
              style={{
                display: "inline-flex", alignItems: "center", gap: "0.5rem",
                padding: "0.9em 2.2em", 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%)"; }}
            >
              {t("film.ctaButton")}
            </Link>
            <Link
              to="/portfolio"
              style={{
                display: "inline-flex", alignItems: "center", gap: "0.5rem",
                padding: "0.9em 2.2em", borderRadius: "9999px", fontWeight: 600, fontSize: "1rem",
                background: "color-mix(in hsl, var(--c-background-light), transparent 25%)",
                backdropFilter: "blur(12px)",
                color: "var(--c-text)", textDecoration: "none",
                border: "1px solid color-mix(in hsl, var(--c-lines), transparent 55%)",
                transition: "border-color 0.2s ease, transform 0.2s ease",
              }}
              onMouseEnter={e => { e.currentTarget.style.borderColor = "var(--c-other)"; e.currentTarget.style.transform = "scale(1.04)"; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = "color-mix(in hsl, var(--c-lines), transparent 55%)"; e.currentTarget.style.transform = "scale(1)"; }}
            >
              <FaPlay style={{ fontSize: "0.8rem" }} /> {t("film.portfolioButton")}
            </Link>
          </div>
        </motion.div>
      </section>
    </main>
  );
}
