import { motion } from "framer-motion";
import {
  FaGitAlt, FaInstagram, FaYoutube, FaLinkedin, FaSteam, FaXTwitter, FaClapperboard,
} from "react-icons/fa6";
import { FaPhoneAlt, FaEnvelope, FaTeamspeak, FaGlobe } from "react-icons/fa";
import { GiAutoRepair } from "react-icons/gi";
import { useTranslation } from "react-i18next";

const SOCIALS = [
  { Icon: FaGitAlt,    href: "https://git.vontor.cz/Brunobrno",                          label: "Gitea" },
  { Icon: FaInstagram, href: "https://www.instagram.com/brunovontor/",                    label: "Instagram" },
  { Icon: FaXTwitter,  href: "https://twitter.com/BVontor",                               label: "X" },
  { Icon: FaSteam,     href: "https://steamcommunity.com/id/Brunobrno/",                  label: "Steam" },
  { Icon: FaYoutube,   href: "https://www.youtube.com/@brunovontor",                      label: "YouTube" },
  { Icon: FaLinkedin,  href: "https://www.linkedin.com/in/brunobrno/?skipRedirect=true",  label: "LinkedIn" },
];

const CONTACTS = [
  { Icon: FaPhoneAlt,  href: "tel:+420605512624",               label: "+420 605 512 624" },
  { Icon: FaEnvelope,  href: "mailto:brunovontor@gmail.com",     label: "brunovontor@gmail.com" },
  { Icon: FaTeamspeak, href: undefined,                          label: "teamspeak.vontor.cz:4926" },
];

const fade = {
  initial: { opacity: 0, y: 24 },
  animate: { opacity: 1, y: 0, transition: { duration: 0.6, ease: "easeOut" as const } },
};

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

  const SERVICES = [
    { Icon: FaGlobe,        href: "/services/web",           label: t("footer.serviceWeb") },
    { Icon: FaClapperboard, href: "/services/film",          label: t("footer.serviceFilm") },
    { Icon: GiAutoRepair,   href: "/services/drone",         label: t("footer.serviceDrone") },
  ];

  return (
    <footer id="contacts" style={{
      position: "relative",
      background: `
        radial-gradient(ellipse 80% 60% at 10% 80%, color-mix(in hsl, var(--c-background-light), transparent 55%), transparent 65%),
        linear-gradient(180deg, color-mix(in hsl, var(--c-background), black 10%) 0%, var(--c-background) 100%)
      `,
      borderTop: "1px solid color-mix(in hsl, var(--c-lines), transparent 75%)",
      overflow: "hidden",
    }}>

      {/* Subtle grid overlay */}
      <div style={{
        position: "absolute", inset: 0, opacity: 0.03, 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: "relative", maxWidth: 1200, margin: "0 auto", padding: "4rem 1.5rem 2rem" }}>

        {/* Top grid */}
        <motion.div
          variants={{ animate: { transition: { staggerChildren: 0.12 } } }}
          initial="initial"
          whileInView="animate"
          viewport={{ once: true }}
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
            gap: "3rem",
            marginBottom: "3rem",
          }}
        >
          {/* Logo + tagline */}
          <motion.div variants={fade}>
            <h2 style={{
              fontSize: "clamp(1.8rem, 4vw, 2.4rem)", fontWeight: 900,
              margin: "0 0 0.5rem", 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",
            }}>
              vontor.cz
            </h2>
            <p style={{
              color: "color-mix(in hsl, var(--c-text), transparent 45%)",
              fontSize: "0.88rem", lineHeight: 1.65, marginTop: "0.5rem", maxWidth: 220,
            }}>
              {t("footer.tagline")}
            </p>
          </motion.div>

          {/* Kontakty */}
          <motion.div variants={fade}>
            <h3 style={{
              fontSize: "0.7rem", fontWeight: 700, letterSpacing: "0.12em",
              textTransform: "uppercase", color: "var(--c-other)",
              margin: "0 0 1.2rem",
            }}>
              {t("footer.contactsHeading")}
            </h3>
            <address style={{ fontStyle: "normal", display: "flex", flexDirection: "column", gap: "0.75rem" }}>
              {CONTACTS.map(({ Icon, href, label }) => (
                <ContactRow key={label} Icon={Icon} href={href} label={label} />
              ))}
              <div style={{
                display: "flex", alignItems: "center", gap: "0.75rem",
                fontSize: "0.9rem", color: "color-mix(in hsl, var(--c-text), transparent 30%)",
              }}>
                <span style={{ opacity: 0.6, fontSize: "0.85em", minWidth: 16, textAlign: "center" }}>IČO</span>
                <a
                  href="https://www.rzp.cz/verejne-udaje/cs/udaje/vyber-subjektu;ico=21613109;"
                  target="_blank" rel="noopener noreferrer"
                  style={{ color: "var(--c-text)", transition: "color 0.2s" }}
                  onMouseEnter={e => (e.currentTarget.style.color = "var(--c-other)")}
                  onMouseLeave={e => (e.currentTarget.style.color = "var(--c-text)")}
                >
                  21613109
                </a>
              </div>
            </address>
          </motion.div>

          {/* Služby */}
          <motion.div variants={fade}>
            <h3 style={{
              fontSize: "0.7rem", fontWeight: 700, letterSpacing: "0.12em",
              textTransform: "uppercase", color: "var(--c-other)",
              margin: "0 0 1.2rem",
            }}>
              {t("footer.servicesHeading")}
            </h3>
            <nav style={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}>
              {SERVICES.map(({ Icon, href, label }) => (
                <ContactRow key={label} Icon={Icon} href={href} label={label} />
              ))}
            </nav>
          </motion.div>
        </motion.div>

        {/* Divider */}
        <div style={{
          height: 1,
          background: "linear-gradient(90deg, transparent, color-mix(in hsl, var(--c-lines), transparent 60%), transparent)",
          marginBottom: "1.75rem",
        }} />

        {/* Bottom row */}
        <motion.div
          initial={{ opacity: 0 }} whileInView={{ opacity: 1 }} viewport={{ once: true }}
          transition={{ duration: 0.5, delay: 0.3 }}
          style={{
            display: "flex", alignItems: "center", justifyContent: "space-between",
            flexWrap: "wrap", gap: "1.2rem",
          }}
        >
          <p style={{ margin: 0, fontSize: "0.8rem", color: "color-mix(in hsl, var(--c-text), transparent 55%)" }}>
            {t("footer.copyright", { year: new Date().getFullYear() })}
          </p>

          {/* Social icons */}
          <div style={{ display: "flex", gap: "1.2rem", alignItems: "center" }}>
            {SOCIALS.map(({ Icon, href, label }) => (
              <a
                key={label}
                href={href}
                aria-label={label}
                target="_blank" rel="noopener noreferrer"
                style={{
                  display: "flex",
                  color: "color-mix(in hsl, var(--c-text), transparent 40%)",
                  fontSize: "1.25rem",
                  transition: "transform 0.2s ease, color 0.2s ease",
                }}
                onMouseEnter={e => {
                  e.currentTarget.style.transform = "scale(1.5)";
                  e.currentTarget.style.color = "var(--c-other)";
                }}
                onMouseLeave={e => {
                  e.currentTarget.style.transform = "scale(1)";
                  e.currentTarget.style.color = "color-mix(in hsl, var(--c-text), transparent 40%)";
                }}
              >
                <Icon />
              </a>
            ))}
          </div>
        </motion.div>
      </div>
    </footer>
  );
}

function ContactRow({ Icon, href, label }: { Icon: React.ComponentType; href?: string; label: string }) {
  const content = (
    <span style={{
      display: "flex", alignItems: "center", gap: "0.75rem",
      fontSize: "0.9rem",
      color: href ? "var(--c-text)" : "color-mix(in hsl, var(--c-text), transparent 30%)",
      transition: "color 0.2s",
    }}>
      <span style={{ opacity: 0.55, fontSize: "0.9em", minWidth: 16, textAlign: "center" }}>
        <Icon />
      </span>
      {label}
    </span>
  );

  if (!href) return <div>{content}</div>;

  return (
    <a
      href={href}
      style={{ textDecoration: "none" }}
      onMouseEnter={e => { const s = e.currentTarget.querySelector("span") as HTMLElement; if (s) s.style.color = "var(--c-other)"; }}
      onMouseLeave={e => { const s = e.currentTarget.querySelector("span") as HTMLElement; if (s) s.style.color = "var(--c-text)"; }}
    >
      {content}
    </a>
  );
}
