import { motion } from "framer-motion";
import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { FaCode, FaExternalLinkAlt } from "react-icons/fa";
import WebDevSection from "@/components/home/webdev/WebDevSection";

const PROJECTS = [
  {
    href: "https://davo1.cz",
    name: "davo1.cz",
    img: "/portfolio/davo1.png",
    imgBg: "#000",
    descKey: "web.project1Desc",
  },
  {
    href: "https://perlica.cz",
    name: "perlica.cz",
    img: "/portfolio/perlica.png",
    imgBg: undefined,
    descKey: "web.project2Desc",
  },
  {
    href: "http://epinger2.cz",
    name: "epinger2.cz",
    img: "/portfolio/epinger.png",
    imgBg: "#fff",
    descKey: "web.project3Desc",
  },
];

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

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

  const SPECTRUM = [
    {
      step: "01",
      label: t("web.spectrum1Label"),
      examples: t("web.spectrum1Examples"),
      color: "var(--c-lines)",
    },
    {
      step: "02",
      label: t("web.spectrum2Label"),
      examples: t("web.spectrum2Examples"),
      color: "var(--c-other)",
    },
    {
      step: "03",
      label: t("web.spectrum3Label"),
      examples: t("web.spectrum3Examples"),
      color: "var(--c-other)",
    },
  ];

  return (
    <main>
      {/* ── Hero ── */}
      <section style={{
        padding: "6rem 1.5rem 5rem",
        position: "relative",
        overflow: "hidden",
        background: "var(--c-background)",
      }}>
        <div style={{
          position: "absolute", inset: 0, opacity: 0.04, 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: "absolute", top: "20%", right: "8%", width: "360px", height: "360px",
          borderRadius: "50%", background: "color-mix(in hsl, var(--c-lines), transparent 88%)",
          filter: "blur(80px)", pointerEvents: "none",
        }} />

        <div className="container" style={{ position: "relative", textAlign: "center" }}>
          <motion.div
            initial={{ opacity: 0, y: 28 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.65, ease: "easeOut" as const }}
          >
            <span style={{
              display: "inline-flex", alignItems: "center", gap: "0.4em",
              padding: "0.35em 1em", borderRadius: "9999px",
              border: "1px solid color-mix(in hsl, var(--c-lines), transparent 45%)",
              background: "color-mix(in hsl, var(--c-boxes), transparent 75%)",
              color: "var(--c-lines)", fontSize: "0.78rem", fontWeight: 700,
              letterSpacing: "0.08em", textTransform: "uppercase" as const,
              marginBottom: "1.5rem",
            }}>
              <FaCode style={{ fontSize: "0.85em" }} /> {t("web.badge")}
            </span>

            <h1 style={{
              fontSize: "clamp(2.5rem, 6vw, 4rem)", fontWeight: 900,
              margin: "0.5rem 0 1rem", letterSpacing: "-0.02em",
              background: "linear-gradient(135deg, var(--c-other) 0%, var(--c-lines) 45%, var(--c-text) 100%)",
              WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", backgroundClip: "text",
              display: "inline-block",
            }}>
              {t("web.title")}
            </h1>

            <p style={{
              color: "color-mix(in hsl, var(--c-text), transparent 35%)",
              maxWidth: "520px", margin: "0 auto 2.2rem", lineHeight: 1.75, fontSize: "1.05rem",
            }}>
              {t("web.subtitle")}
            </p>

            <div style={{ display: "flex", gap: "1rem", justifyContent: "center", flexWrap: "wrap" }}>
              <Link
                to="/contact?service=web"
                style={{
                  padding: "0.85em 2.2em", borderRadius: "9999px",
                  background: "linear-gradient(135deg, var(--c-other), color-mix(in hsl, var(--c-other), var(--c-boxes) 45%))",
                  color: "#031D44", fontWeight: 700, fontSize: "0.95rem",
                  textDecoration: "none",
                  boxShadow: "0 0 1.2rem 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.05)"; e.currentTarget.style.boxShadow = "0 0 2rem color-mix(in hsl, var(--c-other), transparent 35%)"; }}
                onMouseLeave={e => { e.currentTarget.style.transform = "scale(1)";    e.currentTarget.style.boxShadow = "0 0 1.2rem color-mix(in hsl, var(--c-other), transparent 55%)"; }}
              >
                {t("web.ctaContact")}
              </Link>
              <a
                href="#portfolio"
                style={{
                  padding: "0.85em 2.2em", borderRadius: "9999px",
                  background: "color-mix(in hsl, var(--c-background-light), transparent 25%)",
                  backdropFilter: "blur(12px)",
                  color: "var(--c-text)", fontWeight: 600, fontSize: "0.95rem",
                  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)"; }}
              >
                {t("web.ctaPortfolio")}
              </a>
            </div>
          </motion.div>
        </div>
      </section>

      {/* ── Scope spectrum ── */}
      <section style={{ padding: "4rem 1.5rem 2rem", background: "color-mix(in hsl, var(--c-background), black 5%)" }}>
        <div className="container">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
            style={{ textAlign: "center", marginBottom: "2.5rem" }}
          >
            <h2 style={{ fontSize: "clamp(1.5rem, 3.5vw, 2.2rem)", fontWeight: 800, margin: "0 0 0.6rem" }}>
              {t("web.spectrumTitle")}
            </h2>
            <p style={{ color: "color-mix(in hsl, var(--c-text), transparent 40%)", maxWidth: "500px", margin: "0 auto", lineHeight: 1.7 }}>
              {t("web.spectrumSubtitle")}
            </p>
          </motion.div>

          <motion.div
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true }}
            variants={{ visible: { transition: { staggerChildren: 0.08 } } }}
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
              gap: "0",
              borderRadius: "1rem",
              overflow: "hidden",
              border: "1px solid color-mix(in hsl, var(--c-lines), transparent 70%)",
            }}
          >
            {SPECTRUM.map(({ step, label, examples, color }, i, arr) => (
              <motion.div
                key={step}
                variants={{ hidden: { opacity: 0, y: 16 }, visible: { opacity: 1, y: 0, transition: { duration: 0.45, ease: "easeOut" as const } } }}
                style={{
                  padding: "1.75rem 1.5rem",
                  background: i === 1
                    ? "color-mix(in hsl, var(--c-background-light), transparent 30%)"
                    : "color-mix(in hsl, var(--c-background), transparent 0%)",
                  borderRight: i < arr.length - 1 ? "1px solid color-mix(in hsl, var(--c-lines), transparent 70%)" : "none",
                  display: "flex",
                  flexDirection: "column" as const,
                  gap: "0.5rem",
                }}
              >
                <span style={{ fontSize: "0.7rem", fontWeight: 700, color, letterSpacing: "0.1em", textTransform: "uppercase" as const }}>
                  {step}
                </span>
                <div style={{ fontWeight: 700, fontSize: "1.05rem" }}>{label}</div>
                <div style={{ color: "color-mix(in hsl, var(--c-text), transparent 45%)", fontSize: "0.85rem", lineHeight: 1.55 }}>
                  {examples}
                </div>
              </motion.div>
            ))}
          </motion.div>
        </div>
      </section>

      {/* ── Feature cards — reuse homepage section as-is ── */}
      <WebDevSection />

      {/* ── Portfolio ── */}
      <section id="portfolio" 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("web.portfolioTitle")}
            </h2>
            <p style={{ color: "color-mix(in hsl, var(--c-text), transparent 40%)", maxWidth: "460px", margin: "0 auto", lineHeight: 1.7 }}>
              {t("web.portfolioSubtitle")}
            </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(260px, 1fr))",
              gap: "1.2rem",
            }}
          >
            {PROJECTS.map(({ href, name, img, imgBg, descKey }) => (
              <motion.a
                key={name}
                href={href}
                target="_blank"
                rel="noopener noreferrer"
                variants={cardVariants}
                whileHover={{ scale: 1.03, y: -4 }}
                transition={{ type: "spring", stiffness: 280, damping: 22 }}
                className="glass"
                style={{
                  display: "flex", flexDirection: "column" as const,
                  padding: "1.5rem", gap: "1rem",
                  textDecoration: "none", color: "inherit",
                  borderRadius: "1rem",
                }}
              >
                <div style={{
                  borderRadius: "0.75rem", overflow: "hidden",
                  background: imgBg ?? "color-mix(in hsl, var(--c-background-light), transparent 20%)",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  minHeight: "90px", padding: "1rem",
                }}>
                  <img src={img} alt={name} style={{ maxHeight: "60px", maxWidth: "100%", objectFit: "contain" }} />
                </div>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: "0.5rem" }}>
                  <div>
                    <div style={{ fontWeight: 700, fontSize: "0.95rem" }}>{name}</div>
                    <div style={{ color: "color-mix(in hsl, var(--c-text), transparent 45%)", fontSize: "0.85rem", marginTop: "0.2rem" }}>{t(descKey)}</div>
                  </div>
                  <FaExternalLinkAlt style={{ fontSize: "0.8rem", opacity: 0.4, flexShrink: 0, marginTop: "0.25rem" }} />
                </div>
              </motion.a>
            ))}
          </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("web.ctaTitle")}
          </h2>
          <p style={{ color: "color-mix(in hsl, var(--c-text), transparent 40%)", margin: "0 auto 2rem", maxWidth: "400px", lineHeight: 1.7 }}>
            {t("web.ctaDesc")}
          </p>
          <Link
            to="/contact?service=web"
            style={{
              display: "inline-flex", alignItems: "center", gap: "0.5rem",
              padding: "0.9em 2.4em", 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("web.ctaButton")}
          </Link>
        </motion.div>
      </section>
    </main>
  );
}
