import { useState } from "react";
import { motion } from "framer-motion";
import { Link } from "react-router-dom";
import { FaUsers, FaDownload, FaShoppingCart, FaArrowRight } from "react-icons/fa";
import {
  SiDjango, SiReact, SiRedis, SiPython, SiStripe,
} from "react-icons/si";
import { useTranslation } from "react-i18next";
import DemoModal from "./DemoModal";

const containerVariants = {
  hidden: {},
  visible: { transition: { staggerChildren: 0.15 } },
};

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

function TechBadge({ icon, label, color }: { icon?: React.ReactNode; label: string; color?: string }) {
  return (
    <span style={{
      display: "inline-flex",
      alignItems: "center",
      gap: "0.3rem",
      padding: "0.25em 0.65em",
      borderRadius: "9999px",
      background: "color-mix(in hsl, var(--c-background), transparent 20%)",
      border: "1px solid color-mix(in hsl, var(--c-lines), transparent 65%)",
      fontSize: "0.75rem",
      fontWeight: 600,
      color: color ?? "var(--c-lines)",
    }}>
      {icon && <span style={{ fontSize: "0.9em", color: color ?? "var(--c-lines)" }}>{icon}</span>}
      {label}
    </span>
  );
}

export default function ProjectsSection() {
  const { t } = useTranslation("home");
  const [demoOpen, setDemoOpen] = useState(false);

  return (
    <section id="projects" className="section" style={{ background: "color-mix(in hsl, var(--c-background), black 8%)" }}>
      <div className="container">
        {/* Header */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          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-lines), transparent 82%)",
            border: "1px solid color-mix(in hsl, var(--c-lines), transparent 55%)",
            color: "var(--c-lines)",
            fontSize: "0.78rem",
            fontWeight: 700,
            letterSpacing: "0.08em",
            textTransform: "uppercase",
            marginBottom: "1rem",
          }}>
            {t("projects.badge")}
          </span>
          <h2 style={{ fontSize: "clamp(1.9rem, 4.5vw, 3rem)", fontWeight: 800, margin: "0 0 1rem" }}>
            {t("projects.title")} <span className="text-rainbow">{t("projects.titleHighlight")}</span>
          </h2>
          <p style={{ color: "color-mix(in hsl, var(--c-text), transparent 35%)", maxWidth: "500px", margin: "0 auto", lineHeight: 1.7 }}>
            {t("projects.subtitle")}
          </p>
        </motion.div>

        {/* Cards */}
        <motion.div
          variants={containerVariants}
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true }}
          style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: "1.5rem" }}
        >
          {/* Social Network */}
          <motion.div
            variants={cardVariants}
            whileHover={{ y: -8 }}
            transition={{ type: "spring", stiffness: 250, damping: 20 }}
            className="glass"
            style={{ padding: "2rem", display: "flex", flexDirection: "column", gap: "1.2rem", position: "relative", overflow: "hidden" }}
          >
            <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: "3px", background: "linear-gradient(90deg, var(--c-boxes), var(--c-lines))" }} />

            <div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
              <div style={{ width: "3rem", height: "3rem", borderRadius: "0.75rem", background: "color-mix(in hsl, var(--c-boxes), transparent 65%)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "1.4rem", color: "var(--c-lines)" }}>
                <FaUsers />
              </div>
              <div>
                <h3 style={{ margin: 0, fontSize: "1.15rem", fontWeight: 800 }}>Vontor Social</h3>
                <span style={{ fontSize: "0.8rem", color: "color-mix(in hsl, var(--c-text), transparent 45%)" }}>{t("projects.socialNetwork.subtitle")}</span>
              </div>
            </div>

            <p style={{ margin: 0, color: "color-mix(in hsl, var(--c-text), transparent 30%)", fontSize: "0.9rem", lineHeight: 1.65 }}>
              {t("projects.socialNetwork.desc")}
            </p>

            <div style={{ display: "flex", gap: "0.4rem", flexWrap: "wrap" }}>
              <TechBadge icon={<SiDjango />} label="Django" color="#09d3ac" />
              <TechBadge icon={<SiReact />} label="React" color="#61dafb" />
              <TechBadge icon={<SiRedis />} label="Redis" color="#ff4438" />
              <TechBadge label="WebSockets" />
            </div>

            <Link
              to="/social/feed"
              style={{
                display: "inline-flex", alignItems: "center", gap: "0.5rem",
                padding: "0.65em 1.4em", borderRadius: "9999px",
                background: "color-mix(in hsl, var(--c-boxes), transparent 55%)",
                border: "1px solid color-mix(in hsl, var(--c-lines), transparent 50%)",
                color: "var(--c-text)", fontWeight: 600, fontSize: "0.88rem",
                textDecoration: "none", marginTop: "auto",
                transition: "background 0.2s ease, transform 0.2s ease",
              }}
              onMouseEnter={(e) => { e.currentTarget.style.background = "var(--c-boxes)"; e.currentTarget.style.transform = "scale(1.03)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = "color-mix(in hsl, var(--c-boxes), transparent 55%)"; e.currentTarget.style.transform = "scale(1)"; }}
            >
              {t("projects.socialNetwork.cta")} <FaArrowRight style={{ fontSize: "0.75rem" }} />
            </Link>
          </motion.div>

          {/* Media Downloader */}
          <motion.div
            variants={cardVariants}
            whileHover={{ y: -8 }}
            transition={{ type: "spring", stiffness: 250, damping: 20 }}
            className="glass"
            style={{ padding: "2rem", display: "flex", flexDirection: "column", gap: "1.2rem", position: "relative", overflow: "hidden" }}
          >
            <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: "3px", background: "linear-gradient(90deg, var(--c-other), var(--c-lines))" }} />

            <div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
              <div style={{ width: "3rem", height: "3rem", borderRadius: "0.75rem", background: "color-mix(in hsl, var(--c-other), transparent 70%)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "1.4rem", color: "var(--c-other)" }}>
                <FaDownload />
              </div>
              <div>
                <h3 style={{ margin: 0, fontSize: "1.15rem", fontWeight: 800 }}>Media Downloader</h3>
                <span style={{ fontSize: "0.8rem", color: "color-mix(in hsl, var(--c-text), transparent 45%)" }}>{t("projects.mediaDownloader.subtitle")}</span>
              </div>
            </div>

            <p style={{ margin: 0, color: "color-mix(in hsl, var(--c-text), transparent 30%)", fontSize: "0.9rem", lineHeight: 1.65 }}>
              {t("projects.mediaDownloader.desc")}
            </p>

            <div style={{ display: "flex", gap: "0.4rem", flexWrap: "wrap" }}>
              <TechBadge icon={<SiPython />} label="yt-dlp" color="#3776ab" />
              <TechBadge label="Celery" />
              <TechBadge icon={<SiRedis />} label="Redis" color="#ff4438" />
              <TechBadge icon={<SiReact />} label="React" color="#61dafb" />
            </div>

            <Link
              to="/apps/downloader"
              style={{
                display: "inline-flex", alignItems: "center", gap: "0.5rem",
                padding: "0.65em 1.4em", borderRadius: "9999px",
                background: "color-mix(in hsl, var(--c-other), transparent 75%)",
                border: "1px solid color-mix(in hsl, var(--c-other), transparent 50%)",
                color: "var(--c-text)", fontWeight: 600, fontSize: "0.88rem",
                textDecoration: "none", marginTop: "auto",
                transition: "background 0.2s ease, transform 0.2s ease",
              }}
              onMouseEnter={(e) => { e.currentTarget.style.background = "color-mix(in hsl, var(--c-other), transparent 50%)"; e.currentTarget.style.transform = "scale(1.03)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = "color-mix(in hsl, var(--c-other), transparent 75%)"; e.currentTarget.style.transform = "scale(1)"; }}
            >
              {t("projects.mediaDownloader.cta")} <FaArrowRight style={{ fontSize: "0.75rem" }} />
            </Link>
          </motion.div>

          {/* E-Commerce */}
          <motion.div
            variants={cardVariants}
            whileHover={{ y: -8 }}
            transition={{ type: "spring", stiffness: 250, damping: 20 }}
            className="glass"
            style={{ padding: "2rem", display: "flex", flexDirection: "column", gap: "1.2rem", position: "relative", overflow: "hidden" }}
          >
            <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: "3px", background: "linear-gradient(90deg, #635bff, var(--c-lines))" }} />

            <div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
              <div style={{ width: "3rem", height: "3rem", borderRadius: "0.75rem", background: "color-mix(in hsl, #635bff, transparent 70%)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "1.4rem", color: "#918bf0" }}>
                <FaShoppingCart />
              </div>
              <div>
                <h3 style={{ margin: 0, fontSize: "1.15rem", fontWeight: 800 }}>E-Commerce Store</h3>
                <span style={{ fontSize: "0.8rem", color: "color-mix(in hsl, var(--c-text), transparent 45%)" }}>{t("projects.ecommerce.subtitle")}</span>
              </div>
            </div>

            <p style={{ margin: 0, color: "color-mix(in hsl, var(--c-text), transparent 30%)", fontSize: "0.9rem", lineHeight: 1.65 }}>
              {t("projects.ecommerce.desc")}
            </p>

            <div style={{ display: "flex", gap: "0.4rem", flexWrap: "wrap" }}>
              <TechBadge icon={<SiDjango />} label="Django" color="#09d3ac" />
              <TechBadge icon={<SiStripe />} label="Stripe" color="#635bff" />
              <TechBadge label="ČSOB" color="var(--c-other)" />
              <TechBadge label="DRF" />
            </div>

            <button
              onClick={() => setDemoOpen(true)}
              style={{
                display: "inline-flex", alignItems: "center", gap: "0.5rem",
                padding: "0.65em 1.4em", borderRadius: "9999px",
                background: "color-mix(in hsl, #635bff, transparent 70%)",
                border: "1px solid color-mix(in hsl, #635bff, transparent 45%)",
                color: "var(--c-text)", fontWeight: 600, fontSize: "0.88rem",
                cursor: "pointer", marginTop: "auto",
                transition: "background 0.2s ease, transform 0.2s ease",
              }}
              onMouseEnter={(e) => { e.currentTarget.style.background = "color-mix(in hsl, #635bff, transparent 45%)"; e.currentTarget.style.transform = "scale(1.03)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = "color-mix(in hsl, #635bff, transparent 70%)"; e.currentTarget.style.transform = "scale(1)"; }}
            >
              {t("projects.ecommerce.cta")} <FaArrowRight style={{ fontSize: "0.75rem" }} />
            </button>
          </motion.div>
        </motion.div>

        {/* Client websites divider */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.2 }}
          viewport={{ once: true }}
          style={{ marginTop: "3rem", marginBottom: "1.5rem", display: "flex", alignItems: "center", gap: "1rem" }}
        >
          <div style={{ flex: 1, height: "1px", background: "linear-gradient(90deg, transparent, color-mix(in hsl, var(--c-lines), transparent 65%))" }} />
          <span style={{ fontSize: "0.78rem", fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase", color: "color-mix(in hsl, var(--c-text), transparent 50%)", whiteSpace: "nowrap" }}>
            {t("projects.clientWebsites")}
          </span>
          <div style={{ flex: 1, height: "1px", background: "linear-gradient(90deg, color-mix(in hsl, var(--c-lines), transparent 65%), transparent)" }} />
        </motion.div>

        <motion.div
          variants={containerVariants}
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true }}
          style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: "1.5rem" }}
        >
          {/* davo1.cz */}
          <motion.div
            variants={cardVariants}
            whileHover={{ y: -8 }}
            transition={{ type: "spring", stiffness: 250, damping: 20 }}
            className="glass"
            style={{ display: "flex", flexDirection: "column", position: "relative", overflow: "hidden" }}
          >
            <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: "3px", background: "linear-gradient(90deg, #C9A84C, #8B6914)" }} />

            <div style={{
              background: "#0f0b05",
              display: "flex", alignItems: "center", justifyContent: "center",
              padding: "1.5rem 2rem", height: "160px", flexShrink: 0,
            }}>
              <img src="/portfolio/davo1.png" alt="davo1.cz logo" style={{ maxHeight: "80px", maxWidth: "100%", objectFit: "contain" }} />
            </div>

            <div style={{ padding: "1.5rem 2rem 2rem", display: "flex", flexDirection: "column", gap: "1rem", flex: 1 }}>
              <div>
                <h3 style={{ margin: "0 0 0.2rem", fontSize: "1.1rem", fontWeight: 800 }}>davo1.cz</h3>
                <span style={{ fontSize: "0.8rem", color: "color-mix(in hsl, var(--c-text), transparent 45%)" }}>{t("projects.davo1.subtitle")}</span>
              </div>

              <p style={{ margin: 0, color: "color-mix(in hsl, var(--c-text), transparent 30%)", fontSize: "0.9rem", lineHeight: 1.65 }}>
                {t("projects.davo1.desc")}
              </p>

              <div style={{ display: "flex", gap: "0.4rem", flexWrap: "wrap" }}>
                <TechBadge label="Static HTML/CSS" color="#C9A84C" />
                <TechBadge label="Custom Design" color="#C9A84C" />
                <TechBadge label="Branding" />
              </div>

              <a
                href="https://davo1.cz"
                target="_blank"
                rel="noopener noreferrer"
                style={{
                  display: "inline-flex", alignItems: "center", gap: "0.5rem",
                  padding: "0.65em 1.4em", borderRadius: "9999px",
                  background: "color-mix(in hsl, #C9A84C, transparent 78%)",
                  border: "1px solid color-mix(in hsl, #C9A84C, transparent 50%)",
                  color: "#C9A84C", fontWeight: 600, fontSize: "0.88rem",
                  textDecoration: "none", marginTop: "auto",
                  transition: "background 0.2s ease, transform 0.2s ease",
                }}
                onMouseEnter={(e) => { e.currentTarget.style.background = "color-mix(in hsl, #C9A84C, transparent 55%)"; e.currentTarget.style.transform = "scale(1.03)"; }}
                onMouseLeave={(e) => { e.currentTarget.style.background = "color-mix(in hsl, #C9A84C, transparent 78%)"; e.currentTarget.style.transform = "scale(1)"; }}
              >
                {t("projects.davo1.cta")} <FaArrowRight style={{ fontSize: "0.75rem" }} />
              </a>
            </div>
          </motion.div>

          {/* Epinger */}
          <motion.div
            variants={cardVariants}
            whileHover={{ y: -8 }}
            transition={{ type: "spring", stiffness: 250, damping: 20 }}
            className="glass"
            style={{ display: "flex", flexDirection: "column", position: "relative", overflow: "hidden" }}
          >
            <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: "3px", background: "linear-gradient(90deg, #ff7b00, #ffb347)" }} />

            <div style={{
              background: "#ffffff",
              display: "flex", alignItems: "center", justifyContent: "center",
              padding: "0.5rem 1rem", height: "160px", flexShrink: 0,
            }}>
              <img src="/portfolio/epinger.png" alt="Epinger logo" style={{ width: "90%", maxWidth: "360px", objectFit: "contain" }} />
            </div>

            <div style={{ padding: "1.5rem 2rem 2rem", display: "flex", flexDirection: "column", gap: "1rem", flex: 1 }}>
              <div>
                <h3 style={{ margin: "0 0 0.2rem", fontSize: "1.1rem", fontWeight: 800 }}>Epinger — Vstupní systémy</h3>
                <span style={{ fontSize: "0.8rem", color: "color-mix(in hsl, var(--c-text), transparent 45%)" }}>{t("projects.epinger.subtitle")}</span>
              </div>

              <p style={{ margin: 0, color: "color-mix(in hsl, var(--c-text), transparent 30%)", fontSize: "0.9rem", lineHeight: 1.65 }}>
                {t("projects.epinger.desc")}
              </p>

              <div style={{ display: "flex", gap: "0.4rem", flexWrap: "wrap" }}>
                <TechBadge label="Custom Design" color="#ff7b00" />
                <TechBadge label="Product Catalog" color="#ff7b00" />
                <TechBadge label="Contact Forms" />
              </div>

              <div style={{ marginTop: "auto", display: "flex", flexDirection: "column", gap: "0.5rem" }}>
                <a
                  href="http://epinger.cz"
                  target="_blank"
                  rel="noopener noreferrer"
                  style={{
                    display: "inline-flex", alignItems: "center", gap: "0.5rem",
                    padding: "0.65em 1.4em", borderRadius: "9999px",
                    background: "color-mix(in hsl, #ff7b00, transparent 82%)",
                    border: "1px solid color-mix(in hsl, #ff7b00, transparent 55%)",
                    color: "#ff9a40", fontWeight: 600, fontSize: "0.88rem",
                    textDecoration: "none",
                    transition: "background 0.2s ease, transform 0.2s ease",
                  }}
                  onMouseEnter={(e) => { e.currentTarget.style.background = "color-mix(in hsl, #ff7b00, transparent 60%)"; e.currentTarget.style.transform = "scale(1.03)"; }}
                  onMouseLeave={(e) => { e.currentTarget.style.background = "color-mix(in hsl, #ff7b00, transparent 82%)"; e.currentTarget.style.transform = "scale(1)"; }}
                >
                  {t("projects.epinger.cta")} <FaArrowRight style={{ fontSize: "0.75rem" }} />
                </a>
                <span style={{ fontSize: "0.72rem", color: "color-mix(in hsl, var(--c-text), transparent 55%)", display: "flex", alignItems: "center", gap: "0.3rem" }}>
                  <span style={{ color: "#ff7b00" }}>⚠</span> {t("projects.epinger.httpWarning")}
                </span>
              </div>
            </div>
          </motion.div>
        </motion.div>
      </div>

      <DemoModal opened={demoOpen} onClose={() => setDemoOpen(false)} />
    </section>
  );
}
