import { motion } from "framer-motion";
import { FaEnvelope, FaPhone, FaGithub, FaLinkedin, FaInstagram } from "react-icons/fa";
import { useTranslation } from "react-i18next";
import ContactMeForm from "../../components/home/ContactMe/ContactMeForm";

const fadeUp = (delay = 0) => ({
  initial: { opacity: 0, y: 28 },
  animate: { opacity: 1, y: 0 },
  transition: { duration: 0.6, ease: "easeOut" as const, delay },
});

const SOCIAL_LINKS = [
  { icon: <FaGithub />,   href: "https://github.com/Brunobrno",  label: "GitHub",   color: "#e6edf3" },
  { icon: <FaLinkedin />, href: "https://linkedin.com",           label: "LinkedIn", color: "#0a66c2" },
  { icon: <FaInstagram />,href: "https://instagram.com",          label: "Instagram",color: "#e1306c" },
];

export default function ContactPage() {
  const { t } = useTranslation("contact");

  const CONTACT_ITEMS = [
    { icon: <FaEnvelope />, label: t("emailLabel"), value: "brunovontor@gmail.com", href: "mailto:brunovontor@gmail.com", color: "var(--c-other)" },
    { icon: <FaPhone />,    label: t("phoneLabel"), value: "+420 605 512 624",       href: "tel:+420605512624",         color: "var(--c-lines)" },
  ];

  return (
    <section style={{ minHeight: "100svh", background: "var(--c-background)", padding: "5rem 1.5rem 4rem", position: "relative", overflow: "hidden" }}>

      {/* Background glow blobs */}
      <div style={{ position: "absolute", top: "10%", left: "-10%", width: "500px", height: "500px", borderRadius: "50%", background: "color-mix(in hsl, var(--c-other), transparent 88%)", filter: "blur(80px)", zIndex: 0, pointerEvents: "none" }} />
      <div style={{ position: "absolute", bottom: "5%", right: "-5%", width: "400px", height: "400px", borderRadius: "50%", background: "color-mix(in hsl, var(--c-boxes), transparent 85%)", filter: "blur(80px)", zIndex: 0, pointerEvents: "none" }} />

      <div className="container" style={{ position: "relative", zIndex: 1 }}>

        {/* Header */}
        <motion.div {...fadeUp(0)} style={{ textAlign: "center", marginBottom: "4rem" }}>
          <span style={{
            display: "inline-block", padding: "0.3em 0.9em", borderRadius: "9999px",
            background: "color-mix(in hsl, var(--c-other), transparent 82%)",
            border: "1px solid color-mix(in hsl, var(--c-other), transparent 50%)",
            color: "var(--c-other)", fontSize: "0.78rem", fontWeight: 700,
            letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: "1rem",
          }}>
            {t("badge")}
          </span>
          <h1 style={{ fontSize: "clamp(2rem, 5vw, 3.5rem)", fontWeight: 900, margin: "0 0 0.8rem", lineHeight: 1.1 }}>
            {t("title")}{" "}
            <span style={{
              background: "linear-gradient(135deg, var(--c-other), var(--c-lines))",
              WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", backgroundClip: "text",
            }}>
              {t("titleHighlight")}
            </span>
          </h1>
          <p style={{ color: "color-mix(in hsl, var(--c-text), transparent 40%)", maxWidth: "480px", margin: "0 auto", lineHeight: 1.7, fontSize: "1rem" }}>
            {t("subtitle")}
          </p>
        </motion.div>

        {/* Two-column layout — Tailwind handles responsive columns (inline styles can't be overridden by media queries) */}
        <div className="grid grid-cols-1 items-start gap-10 md:grid-cols-[1fr_1.4fr] md:gap-16">

          {/* Left — info */}
          <div style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>

            {/* Available badge */}
            <motion.div {...fadeUp(0.1)}>
              <div className="glass" style={{ padding: "1.2rem 1.5rem", display: "flex", alignItems: "center", gap: "1rem" }}>
                <div style={{ width: "10px", height: "10px", borderRadius: "50%", background: "var(--c-other)", boxShadow: "0 0 8px var(--c-other)", flexShrink: 0, animation: "pulse-glow 2s ease-in-out infinite" }} />
                <div>
                  <div style={{ fontWeight: 700, fontSize: "0.95rem" }}>{t("available")}</div>
                  <div style={{ fontSize: "0.8rem", color: "color-mix(in hsl, var(--c-text), transparent 45%)" }}>{t("availableDesc")}</div>
                </div>
              </div>
            </motion.div>

            {/* Contact details */}
            {CONTACT_ITEMS.map(({ icon, label, value, href, color }, i) => (
              <motion.a
                key={label}
                {...fadeUp(0.15 + i * 0.1)}
                href={href}
                className="glass"
                style={{
                  padding: "1.2rem 1.5rem", display: "flex", alignItems: "center", gap: "1rem",
                  textDecoration: "none", color: "inherit", transition: "transform 0.2s ease, box-shadow 0.2s ease",
                }}
                whileHover={{ y: -3, boxShadow: `0 8px 24px color-mix(in hsl, ${color}, transparent 70%)` }}
              >
                <div style={{
                  width: "2.6rem", height: "2.6rem", borderRadius: "0.65rem", flexShrink: 0,
                  background: `color-mix(in hsl, ${color}, transparent 82%)`,
                  border: `1px solid color-mix(in hsl, ${color}, transparent 55%)`,
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontSize: "1.1rem", color,
                }}>
                  {icon}
                </div>
                <div>
                  <div style={{ fontSize: "0.72rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.06em", color: "color-mix(in hsl, var(--c-text), transparent 50%)", marginBottom: "0.15rem" }}>{label}</div>
                  <div style={{ fontWeight: 600, fontSize: "0.95rem" }}>{value}</div>
                </div>
              </motion.a>
            ))}

            {/* Social links */}
            <motion.div {...fadeUp(0.35)} style={{ display: "flex", gap: "0.75rem", paddingTop: "0.5rem" }}>
              {SOCIAL_LINKS.map(({ icon, href, label, color }) => (
                <a
                  key={label}
                  href={href}
                  target="_blank"
                  rel="noopener noreferrer"
                  title={label}
                  style={{
                    width: "2.8rem", height: "2.8rem", borderRadius: "0.75rem",
                    background: "color-mix(in hsl, var(--c-background-light), transparent 20%)",
                    border: "1px solid color-mix(in hsl, var(--c-lines), transparent 60%)",
                    display: "flex", alignItems: "center", justifyContent: "center",
                    fontSize: "1.2rem", color: "color-mix(in hsl, var(--c-text), transparent 30%)",
                    textDecoration: "none", transition: "color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease",
                  }}
                  onMouseEnter={e => {
                    e.currentTarget.style.color = color;
                    e.currentTarget.style.borderColor = color;
                    e.currentTarget.style.transform = "translateY(-3px)";
                    e.currentTarget.style.boxShadow = `0 4px 16px color-mix(in hsl, ${color}, transparent 55%)`;
                  }}
                  onMouseLeave={e => {
                    e.currentTarget.style.color = "color-mix(in hsl, var(--c-text), transparent 30%)";
                    e.currentTarget.style.borderColor = "color-mix(in hsl, var(--c-lines), transparent 60%)";
                    e.currentTarget.style.transform = "translateY(0)";
                    e.currentTarget.style.boxShadow = "none";
                  }}
                >
                  {icon}
                </a>
              ))}
            </motion.div>
          </div>

          {/* Right — envelope form (untouched) */}
          <motion.div {...fadeUp(0.2)} style={{ display: "flex", justifyContent: "center" }}>
            <ContactMeForm />
          </motion.div>
        </div>
      </div>

    </section>
  );
}
