import { useEffect } from "react";
import { motion } from "framer-motion";
import { FaEnvelope, FaPhone } from "react-icons/fa";
import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next";
import HeroSection from "@/components/home/hero/HeroSection";
import DroneSection from "@/components/home/drone/DroneSection";
import WebDevSection from "@/components/home/webdev/WebDevSection";
import ProjectsSection from "@/components/home/projects/ProjectsSection";
import TechMarquee from "@/components/home/tech/TechMarquee";
import ContactMeForm from "@/components/home/ContactMe/ContactMeForm";

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

  useEffect(() => {
    const handleClick = (event: MouseEvent) => {
      const spark = document.createElement("div");
      spark.className = "spark-cursor";
      document.body.appendChild(spark);
      spark.style.top = `${event.pageY}px`;
      spark.style.left = `${event.pageX}px`;
      for (let i = 0; i < 8; i++) {
        const span = document.createElement("span");
        span.style.transform = `rotate(${i * 45}deg)`;
        spark.appendChild(span);
      }
      setTimeout(() => {
        spark.querySelectorAll("span").forEach((s) => {
          (s as HTMLElement).classList.add("animate");
        });
      }, 10);
      setTimeout(() => spark.remove(), 1000);
    };
    document.body.addEventListener("click", handleClick);
    return () => document.body.removeEventListener("click", handleClick);
  }, []);

  return (
    <main>
      <HeroSection />
      <DroneSection />
      <WebDevSection />
      <div className="divider" />
      <ProjectsSection />
      <div className="divider" />
      <TechMarquee />
      <div className="divider" />

      {/* Contact section */}
      <section id="contact" style={{ background: "color-mix(in hsl, var(--c-background), black 10%)", padding: "5rem 1.5rem 6rem", position: "relative", overflow: "hidden" }}>
        {/* Background glow */}
        <div style={{ position: "absolute", bottom: "-10%", left: "50%", transform: "translateX(-50%)", width: "600px", height: "300px", borderRadius: "50%", background: "color-mix(in hsl, var(--c-other), transparent 90%)", filter: "blur(80px)", zIndex: 0, pointerEvents: "none" }} />

        <div className="container" style={{ position: "relative", zIndex: 1 }}>
          {/* Header */}
          <motion.div
            initial={{ opacity: 0, y: 28 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
            style={{ textAlign: "center", marginBottom: "3.5rem" }}
          >
            <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("contact.badge")}
            </span>
            <h2 style={{ fontSize: "clamp(1.9rem, 4.5vw, 3rem)", fontWeight: 800, margin: "0 0 0.8rem" }}>
              {t("contact.title")}{" "}
              <span style={{
                background: "linear-gradient(135deg, var(--c-other), var(--c-lines))",
                WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", backgroundClip: "text",
              }}>
                {t("contact.titleHighlight")}
              </span>
            </h2>
            <p style={{ color: "color-mix(in hsl, var(--c-text), transparent 40%)", maxWidth: "440px", margin: "0 auto", lineHeight: 1.7 }}>
              {t("contact.subtitle")}
            </p>
          </motion.div>

          {/* Two-column: info left, form right */}
          <div className="grid grid-cols-1 items-center gap-10 md:grid-cols-[1fr_1.5fr] md:gap-16">

            {/* Left — contact info */}
            <motion.div
              initial={{ opacity: 0, x: -30 }}
              whileInView={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.6 }}
              viewport={{ once: true }}
              style={{ display: "flex", flexDirection: "column", gap: "1rem" }}
            >
              {[
                { icon: <FaEnvelope />, label: t("contact.emailLabel"), value: "brunovontor@gmail.com", href: "mailto:brunovontor@gmail.com", color: "var(--c-other)" },
                { icon: <FaPhone />,    label: t("contact.phoneLabel"), value: "+420 605 512 624",       href: "tel:+420605512624",         color: "var(--c-lines)" },
              ].map(({ icon, label, value, href, color }) => (
                <a
                  key={label}
                  href={href}
                  className="glass"
                  style={{
                    padding: "1rem 1.3rem", display: "flex", alignItems: "center", gap: "1rem",
                    textDecoration: "none", color: "inherit", borderRadius: "1rem",
                    transition: "transform 0.2s ease",
                  }}
                  onMouseEnter={e => (e.currentTarget.style.transform = "translateY(-3px)")}
                  onMouseLeave={e => (e.currentTarget.style.transform = "translateY(0)")}
                >
                  <div style={{
                    width: "2.4rem", height: "2.4rem", borderRadius: "0.6rem", 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: "1rem", color,
                  }}>
                    {icon}
                  </div>
                  <div>
                    <div style={{ fontSize: "0.7rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.06em", color: "color-mix(in hsl, var(--c-text), transparent 50%)", marginBottom: "0.1rem" }}>{label}</div>
                    <div style={{ fontWeight: 600, fontSize: "0.9rem" }}>{value}</div>
                  </div>
                </a>
              ))}

              <Link
                to="/contact"
                style={{
                  marginTop: "0.5rem",
                  display: "inline-flex", alignItems: "center", gap: "0.5rem",
                  padding: "0.7em 1.6em", borderRadius: "9999px",
                  background: "color-mix(in hsl, var(--c-other), transparent 80%)",
                  border: "1px solid color-mix(in hsl, var(--c-other), transparent 50%)",
                  color: "var(--c-other)", fontWeight: 600, fontSize: "0.88rem",
                  textDecoration: "none", transition: "background 0.2s ease, transform 0.2s ease",
                  width: "fit-content",
                }}
                onMouseEnter={e => { e.currentTarget.style.background = "color-mix(in hsl, var(--c-other), transparent 60%)"; e.currentTarget.style.transform = "scale(1.04)"; }}
                onMouseLeave={e => { e.currentTarget.style.background = "color-mix(in hsl, var(--c-other), transparent 80%)"; e.currentTarget.style.transform = "scale(1)"; }}
              >
                {t("contact.fullContactPage")}
              </Link>
            </motion.div>

            {/* Right — envelope form */}
            <motion.div
              initial={{ opacity: 0, x: 30 }}
              whileInView={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.6, delay: 0.1 }}
              viewport={{ once: true }}
              style={{ display: "flex", justifyContent: "center" }}
            >
              <ContactMeForm />
            </motion.div>
          </div>
        </div>

      </section>
    </main>
  );
}
