/* Babel у браузері (data-presets="react") перетворює JSX на React.createElement — без цього імпорту сторінка порожня */
import React, { useState, useEffect, useRef } from "react";
import { motion, useMotionValue, useSpring, useTransform, useInView, useScroll, useAnimationFrame } from "framer-motion";
import { ArrowUpRight, Mail, ChevronDown } from "lucide-react";

/* Справжнє наведення є лише з мишкою. На телефоні «hover» імітується дотиком і залипає або саме закривається —
   тому все, що працює на наведенні, на тач-екранах перемикаємо на тапи. */
const CAN_HOVER = typeof window !== "undefined" && window.matchMedia("(hover: hover) and (pointer: fine)").matches;

/* ─── Mobile hook ─── */
function useIsMobile() {
  const [isMobile, setIsMobile] = useState(typeof window !== 'undefined' ? window.innerWidth < 768 : false);
  useEffect(() => {
    const handler = () => setIsMobile(window.innerWidth < 768);
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, []);
  return isMobile;
}

const BG = "#0B0B0C";
const WHITE = "#F5F5F0";
const MUTED = "#5A5A58";
const ACCENT = "#6B5CE7";
const SILVER = "#B8B8B4";

/* ─── Animated letters ─── */
function AnimatedWord({ text, delay = 0 }) {
  return (
    <span style={{ display: "inline-flex", overflow: "hidden" }}>
      {text.split("").map((l, i) => (
        <motion.span key={i}
          initial={{ y: "110%", opacity: 0 }}
          animate={{ y: "0%", opacity: 1 }}
          transition={{ duration: 0.85, ease: [0.16, 1, 0.3, 1], delay: delay + i * 0.03 }}
          style={{ display: "inline-block", whiteSpace: "pre" }}>
          {l}
        </motion.span>
      ))}
    </span>
  );
}

/* ─── Scroll FadeUp ─── */
function FadeUp({ children, delay = 0, y = 40 }) {
  const ref = useRef(null);
  const inView = useInView(ref, { once: true, margin: "-60px" });
  return (
    <motion.div ref={ref}
      initial={{ opacity: 0, y }}
      animate={inView ? { opacity: 1, y: 0 } : {}}
      transition={{ duration: 0.8, delay, ease: [0.16, 1, 0.3, 1] }}>
      {children}
    </motion.div>
  );
}

/* ─── Stagger ─── */
function StaggerIn({ children, delay = 0 }) {
  const ref = useRef(null);
  const inView = useInView(ref, { once: true, margin: "-60px" });
  return (
    <motion.div ref={ref}
      initial="hidden"
      animate={inView ? "visible" : "hidden"}
      variants={{ visible: { transition: { staggerChildren: 0.08, delayChildren: delay } } }}>
      {children}
    </motion.div>
  );
}
function StaggerItem({ children }) {
  return (
    <motion.div variants={{
      hidden: { opacity: 0, y: 24 },
      visible: { opacity: 1, y: 0, transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] } }
    }}>
      {children}
    </motion.div>
  );
}

/* ─── Marquee ─── */
function Marquee({ items }) {
  const x = useMotionValue(0);
  useAnimationFrame((t, delta) => {
    x.set(x.get() - delta * 0.045);
    if (x.get() < -700) x.set(0);
  });
  const doubled = [...items, ...items, ...items];
  return (
    <div style={{ overflow: "hidden", borderTop: "1px solid #1A1A1C", borderBottom: "1px solid #1A1A1C", padding: "13px 0", margin: "0 0 64px" }}>
      <motion.div style={{ x, display: "flex", gap: 56, whiteSpace: "nowrap", width: "max-content" }}>
        {doubled.map((item, i) => (
          <span key={i} style={{ fontFamily: "monospace", fontSize: 11, letterSpacing: "0.2em",
            color: i % 3 === 0 ? ACCENT : MUTED, textTransform: "uppercase" }}>
            {item}
          </span>
        ))}
      </motion.div>
    </div>
  );
}

/* ─── Animated Counter ─── */
function AnimatedCounter({ to, suffix = "" }) {
  const ref = useRef(null);
  const inView = useInView(ref, { once: true });
  const [val, setVal] = useState(0);
  useEffect(() => {
    if (!inView) return;
    let v = 0;
    const step = to / 60;
    const t = setInterval(() => {
      v += step;
      if (v >= to) { setVal(to); clearInterval(t); }
      else setVal(Math.floor(v));
    }, 16);
    return () => clearInterval(t);
  }, [inView, to]);
  return <span ref={ref}>{val}{suffix}</span>;
}

/* ─── Interactive Grid ─── */
const PCELL = 24;
const PMAZE = [
  "###############",
  "#.............#",
  "#.###.#.#.###.#",
  "#.#...#.#...#.#",
  "#.#.#.###.#.#.#",
  "#...#.....#...#",
  "###.#.###.#.###",
  "#...#.....#...#",
  "#.#.#.###.#.#.#",
  "#.#...#.#...#.#",
  "#.###.#.#.###.#",
  "#.............#",
  "###############",
];
const PCOLS = PMAZE[0].length, PROWS = PMAZE.length;
const PW = PCOLS * PCELL, PH = PROWS * PCELL;
const pIsWall = (x, y) => y < 0 || y >= PROWS || x < 0 || x >= PCOLS || PMAZE[y][x] === "#";
const P_DIRS = [{ x: 1, y: 0 }, { x: -1, y: 0 }, { x: 0, y: 1 }, { x: 0, y: -1 }];

function PacmanGame({ onClose }) {
  const canvasRef = useRef(null);
  const [score, setScore] = useState(0);
  const raf = useRef(null);
  const state = useRef(null);
  const touch = useRef(null);

  const freshState = () => {
    const dots = new Set();
    for (let y = 0; y < PROWS; y++)
      for (let x = 0; x < PCOLS; x++)
        if (PMAZE[y][x] === ".") dots.add(`${x},${y}`);
    return {
      player: { x: 7, y: 1 }, dir: { x: 0, y: 0 }, nextDir: { x: 0, y: 0 },
      ghosts: [
        { x: 1, y: 11, dir: { x: 1, y: 0 }, color: "#E75C5C" },
        { x: 13, y: 11, dir: { x: -1, y: 0 }, color: "#5CC7E7" },
      ],
      dots, score: 0, alive: true, started: false, tPlayer: 0, tGhost: 0,
    };
  };

  const restart = () => { state.current = freshState(); setScore(0); };
  const canMove = (x, y, d) => !pIsWall(x + d.x, y + d.y);

  useEffect(() => {
    state.current = freshState();
    const ctx = canvasRef.current.getContext("2d");

    const draw = () => {
      const s = state.current;
      ctx.fillStyle = BG; ctx.fillRect(0, 0, PW, PH);
      ctx.fillStyle = "#1E1E20";
      for (let y = 0; y < PROWS; y++)
        for (let x = 0; x < PCOLS; x++)
          if (PMAZE[y][x] === "#") ctx.fillRect(x * PCELL, y * PCELL, PCELL, PCELL);
      ctx.fillStyle = "#E7C75C";
      s.dots.forEach(k => {
        const [x, y] = k.split(",").map(Number);
        ctx.beginPath();
        ctx.arc(x * PCELL + PCELL / 2, y * PCELL + PCELL / 2, 2.5, 0, Math.PI * 2);
        ctx.fill();
      });
      s.ghosts.forEach(g => {
        ctx.fillStyle = s.alive ? g.color : "#3A3A3C";
        ctx.beginPath();
        ctx.arc(g.x * PCELL + PCELL / 2, g.y * PCELL + PCELL / 2, PCELL / 2 - 3, 0, Math.PI * 2);
        ctx.fill();
      });
      ctx.fillStyle = s.alive ? ACCENT : "#3A3A3C";
      ctx.beginPath();
      ctx.arc(s.player.x * PCELL + PCELL / 2, s.player.y * PCELL + PCELL / 2, PCELL / 2 - 3, 0.25 * Math.PI, 1.75 * Math.PI);
      ctx.lineTo(s.player.x * PCELL + PCELL / 2, s.player.y * PCELL + PCELL / 2);
      ctx.fill();
      ctx.textAlign = "center";
      if (!s.started) {
        ctx.fillStyle = WHITE; ctx.font = "11px monospace";
        ctx.fillText(CAN_HOVER ? "CLICK OR PRESS SPACE" : "SWIPE TO START", PW / 2, PH / 2 + 4);
      } else if (!s.alive) {
        ctx.fillStyle = "#E76B5C"; ctx.font = "12px monospace";
        ctx.fillText(CAN_HOVER ? "GAME OVER — SPACE TO RESTART" : "GAME OVER — TAP TO RESTART", PW / 2, PH / 2 + 4);
      }
    };

    const tick = (t) => {
      const s = state.current;
      if (s.started && s.alive) {
        if (t - s.tPlayer > 150) {
          s.tPlayer = t;
          if (canMove(s.player.x, s.player.y, s.nextDir)) s.dir = s.nextDir;
          if (canMove(s.player.x, s.player.y, s.dir)) {
            s.player.x += s.dir.x; s.player.y += s.dir.y;
            const key = `${s.player.x},${s.player.y}`;
            if (s.dots.has(key)) { s.dots.delete(key); s.score++; setScore(s.score); }
          }
        }
        if (t - s.tGhost > 220) {
          s.tGhost = t;
          s.ghosts.forEach(g => {
            const options = P_DIRS.filter(d => canMove(g.x, g.y, d) && !(d.x === -g.dir.x && d.y === -g.dir.y));
            const fallback = options.length ? options : P_DIRS.filter(d => canMove(g.x, g.y, d));
            if (!fallback.length) return;
            const choice = Math.random() < 0.3
              ? fallback[Math.floor(Math.random() * fallback.length)]
              : fallback.reduce((best, d) => {
                  const dist = Math.abs(g.x + d.x - s.player.x) + Math.abs(g.y + d.y - s.player.y);
                  return dist < best.dist ? { d, dist } : best;
                }, { d: fallback[0], dist: Infinity }).d;
            g.dir = choice; g.x += choice.x; g.y += choice.y;
          });
        }
        if (s.ghosts.some(g => g.x === s.player.x && g.y === s.player.y)) s.alive = false;
      }
      draw();
      raf.current = requestAnimationFrame(tick);
    };
    raf.current = requestAnimationFrame(tick);

    const onKey = (e) => {
      const s = state.current;
      if (e.code === "Space") { e.preventDefault(); if (!s.alive || !s.started) restart(); return; }
      const map = { ArrowUp: { x: 0, y: -1 }, ArrowDown: { x: 0, y: 1 }, ArrowLeft: { x: -1, y: 0 }, ArrowRight: { x: 1, y: 0 },
        KeyW: { x: 0, y: -1 }, KeyS: { x: 0, y: 1 }, KeyA: { x: -1, y: 0 }, KeyD: { x: 1, y: 0 } };
      const d = map[e.code]; if (!d) return;
      e.preventDefault();
      s.nextDir = d; if (!s.started) s.started = true;
    };
    window.addEventListener("keydown", onKey);
    return () => { cancelAnimationFrame(raf.current); window.removeEventListener("keydown", onKey); };
  }, []);

  return (
    <motion.div initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }}
      transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
      style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 10 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", width: PW, maxWidth: "100%", gap: 8 }}>
        <span style={{ fontFamily: "monospace", fontSize: 10, letterSpacing: "0.2em", color: ACCENT, textTransform: "uppercase" }}>SCORE: {score}</span>
        <span style={{ fontFamily: "monospace", fontSize: 9, color: MUTED, letterSpacing: "0.12em" }}>{CAN_HOVER ? "↑↓←→ / WASD" : "SWIPE"}</span>
        <button onClick={onClose} style={{ background: "none", border: "none", color: MUTED, cursor: "pointer", fontFamily: "monospace", fontSize: 10, letterSpacing: "0.15em", textTransform: "uppercase" }}>✕ CLOSE</button>
      </div>
      <canvas ref={canvasRef} width={PW} height={PH}
        /* ширина підлаштовується під екран; touchAction: свайп керує грою, а не гортає сторінку */
        style={{ border: "1px solid #222224", borderRadius: 4, cursor: "pointer", display: "block",
          width: PW, maxWidth: "100%", height: "auto", touchAction: "none" }}
        onClick={() => { const s = state.current; if (!s.alive || !s.started) restart(); }}
        onTouchStart={(e) => { touch.current = { x: e.touches[0].clientX, y: e.touches[0].clientY }; }}
        onTouchEnd={(e) => {
          if (!touch.current) return;
          const dx = e.changedTouches[0].clientX - touch.current.x;
          const dy = e.changedTouches[0].clientY - touch.current.y;
          const s = state.current;
          /* тап після програшу — нова гра; до старту перезапускати не можна, інакше свайп ніколи не стартує гру */
          if (!s.alive) { restart(); return; }
          if (Math.abs(dx) < 10 && Math.abs(dy) < 10) return;
          const nd = Math.abs(dx) > Math.abs(dy) ? (dx > 0 ? { x: 1, y: 0 } : { x: -1, y: 0 }) : (dy > 0 ? { x: 0, y: 1 } : { x: 0, y: -1 });
          s.nextDir = nd; if (!s.started) s.started = true;
        }}
      />
    </motion.div>
  );
}

function InteractiveGrid() {
  const [gameOpen, setGameOpen] = useState(false);
  const mouseX = useMotionValue(0);
  const mouseY = useMotionValue(0);
  const smoothX = useSpring(mouseX, { stiffness: 60, damping: 20 });
  const smoothY = useSpring(mouseY, { stiffness: 60, damping: 20 });
  const ref = useRef(null);

  useEffect(() => {
    const el = ref.current; if (!el) return;
    const handleMove = (e) => {
      const rect = el.getBoundingClientRect();
      mouseX.set(e.clientX - rect.left - rect.width / 2);
      mouseY.set(e.clientY - rect.top - rect.height / 2);
    };
    el.addEventListener("mousemove", handleMove);
    return () => el.removeEventListener("mousemove", handleMove);
  }, [mouseX, mouseY]);

  const rotateX = useTransform(smoothY, [-200, 200], [12, -12]);
  const rotateY = useTransform(smoothX, [-200, 200], [-12, 12]);
  const cells = Array.from({ length: 64 });

  if (gameOpen) return <PacmanGame onClose={() => setGameOpen(false)} />;

  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 10 }}>
      <div ref={ref} onClick={() => setGameOpen(true)}
        style={{ width: 320, height: 320, maxWidth: "100%", perspective: 600, cursor: "pointer", position: "relative" }}>
        <div style={{ position: "absolute", inset: -60, zIndex: 0, pointerEvents: "none" }}>
          <motion.div
            animate={{ x: [0, 30, -20, 0], y: [0, -20, 15, 0] }}
            transition={{ duration: 16, repeat: Infinity, ease: "easeInOut" }}
            style={{ position: "absolute", width: "70%", height: "70%", left: "8%", top: "4%", borderRadius: "50%",
              background: "radial-gradient(circle, #4C8CFF 0%, transparent 70%)", filter: "blur(40px)", opacity: 0.1 }} />
          <motion.div
            animate={{ x: [0, -25, 20, 0], y: [0, 20, -15, 0] }}
            transition={{ duration: 20, repeat: Infinity, ease: "easeInOut", delay: 2 }}
            style={{ position: "absolute", width: "60%", height: "60%", right: "4%", bottom: "8%", borderRadius: "50%",
              background: "radial-gradient(circle, #2A63E7 0%, transparent 70%)", filter: "blur(40px)", opacity: 0.1 }} />
        </div>
        <motion.div style={{ width: "100%", height: "100%", rotateX, rotateY, transformStyle: "preserve-3d", position: "relative", zIndex: 1 }}
          whileHover={CAN_HOVER ? { scale: 1.03 } : undefined} transition={{ duration: 0.3 }}>
          <svg width="320" height="320" viewBox="0 0 320 320">
            {cells.map((_, i) => {
              const col = i % 8, row = Math.floor(i / 8);
              const cx = col * 40 + 20, cy = row * 40 + 20;
              const dist = Math.sqrt(Math.pow(col - 3.5, 2) + Math.pow(row - 3.5, 2));
              const opacity = Math.max(0.04, 0.35 - dist * 0.04);
              return (
                <motion.rect key={i} x={cx - 12} y={cy - 12} width={24} height={24} rx={2}
                  fill="none" stroke={i % 7 === 0 ? ACCENT : SILVER}
                  strokeWidth={0.5} opacity={opacity}
                  whileHover={CAN_HOVER ? { opacity: 0.9, scale: 1.3 } : undefined} />
              );
            })}
            <circle cx={160} cy={160} r={4} fill={ACCENT} opacity={0.7} />
            <line x1={160} y1={120} x2={160} y2={40} stroke={ACCENT} strokeWidth={0.5} opacity={0.3} />
            <line x1={200} y1={160} x2={280} y2={160} stroke={SILVER} strokeWidth={0.5} opacity={0.2} />
          </svg>
        </motion.div>
      </div>
      <motion.div
        animate={{ opacity: [0.4, 1, 0.4] }}
        transition={{ repeat: Infinity, duration: 2, ease: "easeInOut" }}
        style={{ fontFamily: "monospace", fontSize: 9, letterSpacing: "0.3em", color: ACCENT, textTransform: "uppercase", userSelect: "none" }}>
        {CAN_HOVER ? "— CLICK ME —" : "— TAP TO PLAY —"}
      </motion.div>
    </div>
  );
}

/* ─── Magnetic Button ─── */
function MagneticButton({ children, href }) {
  const x = useMotionValue(0);
  const y = useMotionValue(0);
  const sx = useSpring(x, { stiffness: 150, damping: 18 });
  const sy = useSpring(y, { stiffness: 150, damping: 18 });
  const ref = useRef(null);
  return (
    <motion.a ref={ref} href={href} target={href.startsWith("http") ? "_blank" : "_self"} rel="noreferrer"
      style={{ x: sx, y: sy, display: "inline-flex", alignItems: "center", gap: 10,
        color: WHITE, textDecoration: "none",
        fontSize: "clamp(11px, 2vw, 13px)", letterSpacing: "0.14em",
        fontFamily: "monospace", textTransform: "uppercase",
        border: `1px solid ${MUTED}`, padding: "clamp(10px,2vw,14px) clamp(16px,3vw,28px)", borderRadius: 2 }}
      onMouseMove={(e) => {
        const rect = ref.current.getBoundingClientRect();
        x.set((e.clientX - rect.left - rect.width / 2) * 0.35);
        y.set((e.clientY - rect.top - rect.height / 2) * 0.35);
      }}
      onMouseLeave={() => { x.set(0); y.set(0); }}
      whileHover={CAN_HOVER ? { borderColor: ACCENT, color: ACCENT } : undefined}
      transition={{ duration: 0.2 }}>
      {children}
    </motion.a>
  );
}

/* ─── Bento Card ─── */
function BentoCard({ title, sub, tag, wide, tall, accent }) {
  const [hovered, setHovered] = useState(false);
  return (
    <motion.div
      onHoverStart={() => CAN_HOVER && setHovered(true)}
      onHoverEnd={() => setHovered(false)}
      animate={{ rotateX: hovered ? -2 : 0, rotateY: hovered ? 2 : 0, scale: hovered ? 1.015 : 1 }}
      transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
      style={{
        background: hovered ? "#141415" : "#0F0F10",
        border: hovered ? `1px solid ${accent || ACCENT}` : "1px solid #222224",
        borderRadius: 4, padding: "32px 28px",
        gridColumn: "span 1",
        gridRow: "span 1",
        cursor: "default", position: "relative", overflow: "hidden",
        transformStyle: "preserve-3d", minHeight: tall ? 260 : 160,
        transition: "background 0.3s, border 0.3s"
      }}>
      <motion.div animate={{ opacity: hovered ? 1 : 0 }}
        style={{ position: "absolute", inset: 0,
          background: `radial-gradient(ellipse at 30% 30%, ${accent || ACCENT}12 0%, transparent 65%)`,
          pointerEvents: "none" }} />
      <div style={{ fontFamily: "monospace", fontSize: 10, letterSpacing: "0.2em",
        color: hovered ? (accent || ACCENT) : MUTED, marginBottom: 20, textTransform: "uppercase" }}>
        {tag}
      </div>
      <div style={{ fontSize: 18, fontWeight: 700, color: WHITE, lineHeight: 1.2, marginBottom: 10, letterSpacing: "-0.02em" }}>
        {title}
      </div>
      <div style={{ fontSize: 13, color: MUTED, lineHeight: 1.6 }}>{sub}</div>
    </motion.div>
  );
}

/* ─── Project Card ─── */
function ProjectCard({ num, title, category, role, deliverables, color, screenshotUrl, siteUrl, description, comingSoon, confidential }) {
  const [expanded, setExpanded] = useState(false);
  const [pinned, setPinned] = useState(false);
  const [waiting, setWaiting] = useState(false);
  const [imgError, setImgError] = useState(false);
  const hoverTimer = useRef(null);
  /* картка розкрита або наведенням з утриманням, або кліком (клік фіксує) */
  const hovered = expanded || pinned;
  /* siteUrl, що починається зі "/", — сторінка всередині цього ж сайту.
     Тоді не підставляємо домен: посилання працює на будь-якому хостингу. */
  const isLocal = typeof siteUrl === "string" && siteUrl.startsWith("/");
  const siteHref = isLocal ? siteUrl : `https://${siteUrl}`;
  const handlers = CAN_HOVER ? {
    onHoverStart: () => {
      if (pinned) return;
      setWaiting(true);
      hoverTimer.current = setTimeout(() => { setWaiting(false); setExpanded(true); }, 1000);
    },
    onHoverEnd: () => {
      clearTimeout(hoverTimer.current);
      setWaiting(false);
      if (!pinned) setExpanded(false);
    },
    /* клік розкриває одразу, без очікування, і залишає картку відкритою;
       повторний клік згортає. Клік по посиланню картку не чіпає. */
    onClick: (e) => {
      if (e.target.closest("a")) return;
      clearTimeout(hoverTimer.current);
      setWaiting(false);
      setPinned(p => !p);
      setExpanded(false);
    }
  } : {
    /* тап відкриває й закриває; тап по посиланню на сайт картку не згортає */
    onClick: (e) => { if (!e.target.closest("a")) setExpanded(h => !h); }
  };
  return (
    <motion.div
      {...handlers}
      style={{ borderBottom: "1px solid #1E1E20", padding: "36px 0", position: "relative",
        cursor: "pointer", WebkitTapHighlightColor: "transparent" }}>
      <div style={{ display: "flex", alignItems: "flex-start", gap: 32 }}>
        <div style={{ fontFamily: "monospace", fontSize: 11, color: MUTED, paddingTop: 6, minWidth: 32 }}>
          {num}
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <motion.div animate={{ x: hovered ? 8 : 0 }} transition={{ duration: 0.75, ease: [0.16, 1, 0.3, 1] }}>
            <div style={{ fontFamily: "monospace", fontSize: 10, letterSpacing: "0.2em",
              color: hovered ? color : MUTED, marginBottom: 12, textTransform: "uppercase" }}>
              {category}
            </div>
            <div style={{ fontSize: "clamp(22px, 4vw, 36px)", fontWeight: 800, color: WHITE, lineHeight: 1.05, letterSpacing: "-0.03em", marginBottom: 8 }}>
              {title}
            </div>
            {description && (
              <div style={{ fontSize: 14, color: MUTED, lineHeight: 1.7, maxWidth: 620 }}>
                {description}
              </div>
            )}
          </motion.div>

          <motion.div
            initial={false}
            animate={{ opacity: hovered ? 1 : 0, height: hovered ? "auto" : 0, marginTop: hovered ? 24 : 0 }}
            transition={{ duration: 0.94, ease: [0.16, 1, 0.3, 1] }}
            style={{ overflow: "hidden" }}>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(120px, 1fr))", gap: 16,
              borderTop: "1px solid #1E1E20", paddingTop: 20, marginBottom: 24 }}>
              {[["ROLE", role], ["DELIVERABLES", deliverables], ["STATUS", "Completed"]].map(([label, val]) => (
                <div key={label}>
                  <div style={{ fontFamily: "monospace", fontSize: 9, letterSpacing: "0.2em",
                    color: MUTED, marginBottom: 6, textTransform: "uppercase" }}>{label}</div>
                  <div style={{ fontSize: 13, color: SILVER, lineHeight: 1.5 }}>{val}</div>
                </div>
              ))}
            </div>

            {screenshotUrl ? (
              <a href={siteHref} target={isLocal ? "_self" : "_blank"} rel="noreferrer"
                style={{ display: "block", textDecoration: "none", borderRadius: 6,
                  overflow: "hidden", border: `1px solid ${color}30`, transition: "border-color 0.3s" }}
                onMouseEnter={e => e.currentTarget.style.borderColor = color}
                onMouseLeave={e => e.currentTarget.style.borderColor = `${color}30`}>
                <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "10px 16px",
                  background: "#111113", borderBottom: `1px solid ${color}20` }}>
                  <div style={{ display: "flex", gap: 6 }}>
                    {["#E76B5C","#E7C75C","#5CE7B8"].map(c => (
                      <div key={c} style={{ width: 10, height: 10, borderRadius: "50%", background: c, opacity: 0.7 }} />
                    ))}
                  </div>
                  <div style={{ flex: 1, background: "#1A1A1C", borderRadius: 4, padding: "4px 12px",
                    fontFamily: "monospace", fontSize: 10, color: MUTED, letterSpacing: "0.06em" }}>
                    {siteUrl}
                  </div>
                  <div style={{ display: "flex", alignItems: "center", gap: 5 }}>
                    <span style={{ fontFamily: "monospace", fontSize: 9, color: color, letterSpacing: "0.15em", textTransform: "uppercase" }}>Open site</span>
                    <ArrowUpRight size={13} color={color} />
                  </div>
                </div>
                <div style={{ position: "relative" }}>
                  <img src={screenshotUrl} alt={title}
                    onError={() => setImgError(true)}
                    style={{ width: "100%", display: imgError ? "none" : "block", maxHeight: 480, objectFit: "cover", objectPosition: "top" }} />
                  {imgError && (
                    <div style={{ height: 340, background: `linear-gradient(135deg, ${color}18 0%, #0F0F10 100%)`,
                      display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 16 }}>
                      <div style={{ display: "grid", gridTemplateColumns: "repeat(8,1fr)", gap: 8, opacity: 0.15, position: "absolute", inset: 0, padding: 24 }}>
                        {Array.from({length: 32}).map((_,i) => <div key={i} style={{ height: 6, background: color, borderRadius: 2 }} />)}
                      </div>
                      <div style={{ fontFamily: "monospace", fontSize: 11, color: color, letterSpacing: "0.25em", textTransform: "uppercase", zIndex: 1 }}>— {title} —</div>
                      <div style={{ fontFamily: "monospace", fontSize: 9, color: MUTED, letterSpacing: "0.15em", textTransform: "uppercase", zIndex: 1 }}>Click to view live site ↗</div>
                    </div>
                  )}
                  <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to bottom, transparent 65%, #0B0B0C 100%)" }} />
                </div>
              </a>
            ) : (
              <div style={{ height: 200, background: `linear-gradient(135deg, ${color}08 0%, #0B0B0C 100%)`,
                border: `1px solid ${color}25`, borderRadius: 4, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 14, position: "relative", overflow: "hidden" }}>
                {/* subtle scanline texture */}
                <div style={{ position: "absolute", inset: 0, backgroundImage: `repeating-linear-gradient(0deg, transparent, transparent 3px, ${color}04 3px, ${color}04 4px)`, pointerEvents: "none" }} />
                <div style={{ position: "absolute", inset: 0, background: `radial-gradient(ellipse at 50% 50%, ${color}08 0%, transparent 70%)` }} />
                {confidential ? (
                  <>
                    <div style={{ display: "flex", alignItems: "center", gap: 10, zIndex: 1 }}>
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.5" opacity="0.7">
                        <rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>
                      </svg>
                      <span style={{ fontFamily: "monospace", fontSize: 10, letterSpacing: "0.28em", color: color, textTransform: "uppercase", opacity: 0.7 }}>Confidential</span>
                    </div>
                    <div style={{ fontFamily: "monospace", fontSize: 11, letterSpacing: "0.18em", color: WHITE, textTransform: "uppercase", fontWeight: 600, zIndex: 1, textAlign: "center", lineHeight: 1.6, maxWidth: 360, opacity: 0.85 }}>
                      Under NDA — details available<br />upon request
                    </div>
                    <div style={{ fontFamily: "monospace", fontSize: 9, letterSpacing: "0.15em", color: MUTED, textTransform: "uppercase", zIndex: 1 }}>
                      Protected by non-disclosure agreement
                    </div>
                  </>
                ) : (
                  <>
                    <div style={{ fontFamily: "monospace", fontSize: 10, letterSpacing: "0.3em", color: color, textTransform: "uppercase", opacity: 0.7 }}>
                      — {title} —
                    </div>
                    {comingSoon && (
                      <motion.div
                        animate={{ opacity: [0.5, 1, 0.5] }}
                        transition={{ repeat: Infinity, duration: 2, ease: "easeInOut" }}
                        style={{ fontFamily: "monospace", fontSize: 11, letterSpacing: "0.35em",
                          color: color, textTransform: "uppercase", fontWeight: 700, border: `1px solid ${color}50`,
                          padding: "6px 16px", borderRadius: 2 }}>
                        COMING SOON
                      </motion.div>
                    )}
                  </>
                )}
              </div>
            )}
          </motion.div>
        </div>

        {!CAN_HOVER ? (
          /* на телефоні стрілка видна завжди й показує, що картку можна розкрити */
          <motion.div animate={{ rotate: hovered ? 180 : 0 }} transition={{ duration: 0.3 }} style={{ marginTop: 6, flex: "none", height: 20 }}>
            <ChevronDown size={20} color={hovered ? color : MUTED} />
          </motion.div>
        ) : (
        <motion.div animate={{ opacity: hovered || waiting ? 1 : 0, x: hovered || waiting ? 0 : 10 }}
          transition={{ duration: 0.3 }} style={{ paddingTop: 6 }}>
          {waiting && !hovered ? (
            <div style={{ fontFamily: "monospace", fontSize: 10, letterSpacing: "0.1em", color: MUTED, whiteSpace: "nowrap" }}>Hold on</div>
          ) : (
            <ArrowUpRight size={18} color={color} />
          )}
        </motion.div>
        )}
      </div>
    </motion.div>
  );
}

/* ─── Motion Card (vertical video tile) ─── */
function MotionCard({ title, category, color, screenshotUrl, siteUrl }) {
  const [imgError, setImgError] = useState(false);
  return (
    <a href={`https://${siteUrl}`} target="_blank" rel="noreferrer" className="motion-card"
      style={{ flex: "0 0 320px", scrollSnapAlign: "start", textDecoration: "none",
        borderRadius: 10, overflow: "hidden", border: `1px solid ${color}30`,
        position: "relative", aspectRatio: "16 / 9", display: "block", background: "#111113",
        transition: "border-color 0.3s" }}
      onMouseEnter={e => e.currentTarget.style.borderColor = color}
      onMouseLeave={e => e.currentTarget.style.borderColor = `${color}30`}>
      {screenshotUrl && !imgError ? (
        <img src={screenshotUrl} alt={title} onError={() => setImgError(true)}
          style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", filter: "blur(14px)", transform: "scale(1.15)" }} />
      ) : (
        <div style={{ width: "100%", height: "100%", background: `linear-gradient(135deg, ${color}18 0%, #0F0F10 100%)` }} />
      )}
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top, #0B0B0Cf2 0%, transparent 50%)" }} />
      <div style={{ position: "absolute", top: 12, right: 12, width: 30, height: 30, borderRadius: "50%",
        background: "#0B0B0Cb0", display: "flex", alignItems: "center", justifyContent: "center" }}>
        <svg viewBox="0 0 24 24" width="12" height="12" fill={color}><polygon points="6,4 20,12 6,20" /></svg>
      </div>
      <div style={{ position: "absolute", left: 14, right: 14, bottom: 14 }}>
        <div style={{ fontFamily: "monospace", fontSize: 9, letterSpacing: "0.16em", color, textTransform: "uppercase", marginBottom: 6 }}>{category}</div>
        <div style={{ fontSize: 14, fontWeight: 700, color: WHITE, lineHeight: 1.25 }}>{title}</div>
      </div>
    </a>
  );
}

/* ─── Footer Link ─── */
function FooterLink({ href, children }) {
  const isAnchor = href.startsWith("#");
  return (
    <motion.a href={href} target={isAnchor ? "_self" : "_blank"} rel={isAnchor ? undefined : "noreferrer"}
      style={{ color: MUTED, textDecoration: "none", fontFamily: "monospace",
        fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase",
        position: "relative", display: "inline-block" }}
      whileHover={{ color: WHITE }}>
      {children}
      <motion.span initial={{ scaleX: 0 }} whileHover={{ scaleX: 1 }}
        style={{ position: "absolute", bottom: -2, left: 0, right: 0, height: 1,
          background: WHITE, transformOrigin: "left", display: "block" }}
        transition={{ duration: 0.25 }} />
    </motion.a>
  );
}

/* ─── Scroll Indicator ─── */
function ScrollIndicator() {
  return (
    <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 2.5, duration: 1 }}
      style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
      <div style={{ fontFamily: "monospace", fontSize: 9, letterSpacing: "0.25em", color: MUTED, textTransform: "uppercase" }}>Scroll</div>
      <motion.div animate={{ y: [0, 6, 0] }} transition={{ repeat: Infinity, duration: 1.8, ease: "easeInOut" }}>
        <ChevronDown size={12} color={MUTED} />
      </motion.div>
    </motion.div>
  );
}

/* ══════════════════ MAIN ══════════════════ */
export default function Portfolio() {
  const [scrolled, setScrolled] = useState(false);
  const { scrollYProgress } = useScroll();

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <div style={{ background: BG, color: WHITE, minHeight: "100vh", fontFamily: "'Inter','Helvetica Neue',sans-serif", overflowX: "hidden" }}>
      <style>{`
        * { box-sizing: border-box; }
        @media (max-width: 767px) {
          .hero-grid { display: none !important; }
        }
        @media (max-width: 640px) {
          .nav-links a { font-size: 9px !important; letter-spacing: 0.08em !important; }
          .nav-links { gap: 12px !important; }
        }
        @media (max-width: 400px) {
          .nav-links a:not(:last-child) { display: none; }
        }
      `}</style>

      {/* Scroll progress */}
      <motion.div style={{ position: "fixed", top: 0, left: 0, right: 0, height: 2, zIndex: 999,
        background: `linear-gradient(to right, ${ACCENT}, #5CE7B8)`,
        scaleX: scrollYProgress, transformOrigin: "left" }} />

      {/* NAV */}
      <motion.nav initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8, delay: 0.2 }}
        style={{ position: "fixed", top: 0, left: 0, right: 0, zIndex: 100,
          display: "flex", alignItems: "center", justifyContent: "space-between",
          padding: "16px clamp(20px, 5vw, 48px)",
          borderBottom: scrolled ? "1px solid #1A1A1C" : "1px solid transparent",
          backdropFilter: scrolled ? "blur(12px)" : "none",
          background: scrolled ? "rgba(11,11,12,0.9)" : "transparent",
          transition: "all 0.4s ease" }}>
        <div style={{ fontFamily: "monospace", fontSize: 12, letterSpacing: "0.25em", color: WHITE }}>
          VS — PORTFOLIO
        </div>
        <div className="nav-links" style={{ display: "flex", gap: "clamp(16px, 3vw, 36px)" }}>
          {[["Work","#work"],["About","#about"],["Contact","#contact"]].map(([label, href]) => (
            <FooterLink key={label} href={href}>{label}</FooterLink>
          ))}
        </div>
      </motion.nav>

      {/* HERO */}
      <section style={{ minHeight: "100vh", display: "flex", alignItems: "center", padding: "0 clamp(20px, 5vw, 48px)", position: "relative" }}>
        <div style={{ maxWidth: 1400, margin: "0 auto", width: "100%",
          display: "flex", flexWrap: "wrap", justifyContent: "space-between", alignItems: "center", gap: 40 }}>
          <div style={{ flex: 1, paddingTop: "clamp(80px, 10vw, 100px)", minWidth: 280 }}>
            <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.4, duration: 0.8 }}
              style={{ fontFamily: "monospace", fontSize: 10, letterSpacing: "0.28em", color: ACCENT, marginBottom: 40, textTransform: "uppercase" }}>
              UI/UX & Full Stack Development
            </motion.div>
            <h1 style={{ fontSize: "clamp(52px, 7vw, 96px)", fontWeight: 900, lineHeight: 0.95, letterSpacing: "-0.04em", margin: "0 0 12px" }}>
              <div style={{ overflow: "hidden" }}><AnimatedWord text="ESTHETICS" delay={0.5} /></div>
              <div style={{ overflow: "hidden" }}><AnimatedWord text="& CONVERSION." delay={0.7} /></div>
            </h1>
            <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 1.6, duration: 1 }}
              style={{ fontSize: "clamp(20px, 3vw, 36px)", fontWeight: 300, color: SILVER, letterSpacing: "-0.01em", lineHeight: 1.2, margin: "24px 0 48px" }}>
              Digital products that work.
            </motion.div>
            <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 2, duration: 0.8 }}
              style={{ display: "flex", gap: 16, alignItems: "center", flexWrap: "wrap" }}>
              <MagneticButton href="#work">View Work <ArrowUpRight size={14} /></MagneticButton>
              <div style={{ fontFamily: "monospace", fontSize: 10, color: MUTED, letterSpacing: "0.14em", textTransform: "uppercase" }}>
                Available for projects — Remote
              </div>
            </motion.div>
          </div>
          <motion.div initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }}
            transition={{ delay: 1, duration: 1.2, ease: [0.16, 1, 0.3, 1] }}
            style={{ flexShrink: 0, display: "flex", justifyContent: "center" }}
            className="hero-grid">
            <InteractiveGrid />
          </motion.div>
        </div>
        <div style={{ position: "absolute", bottom: 40, left: "50%", transform: "translateX(-50%)" }}>
          <ScrollIndicator />
        </div>
      </section>

      {/* PHILOSOPHY */}
      <section id="about" style={{ padding: "clamp(60px,10vw,120px) clamp(20px,5vw,48px)", borderTop: "1px solid #1A1A1C" }}>
        <div style={{ maxWidth: 1400, margin: "0 auto" }}>
          <Marquee items={["UI/UX Design","Full Stack Dev","Design Systems","E-commerce","CMS Architecture","Brand Identity","Conversion Optimization","Remote Worldwide"]} />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: "clamp(32px, 6vw, 80px)", alignItems: "start" }}>
            <FadeUp delay={0}>
              <div style={{ fontFamily: "monospace", fontSize: 10, letterSpacing: "0.25em", color: MUTED, textTransform: "uppercase", marginBottom: 16 }}>
                01 — Philosophy
              </div>
              <div style={{ fontFamily: "monospace", fontSize: 11, color: MUTED, lineHeight: 2 }}>
                Valera Skribko<br />
                UI/UX & Full Stack Development<br />
                Remote — Worldwide
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 20, marginTop: 40 }}>
                {[{ to: 3, suffix: "+", label: "Years Exp" }, { to: 13, suffix: "+", label: "Projects" }, { to: 100, suffix: "%", label: "Remote" }].map(({ to, suffix, label }) => (
                  <div key={label}>
                    <div style={{ fontSize: 30, fontWeight: 900, color: ACCENT, letterSpacing: "-0.04em", lineHeight: 1 }}>
                      <AnimatedCounter to={to} suffix={suffix} />
                    </div>
                    <div style={{ fontFamily: "monospace", fontSize: 9, color: MUTED, letterSpacing: "0.2em", textTransform: "uppercase", marginTop: 4 }}>{label}</div>
                  </div>
                ))}
              </div>
            </FadeUp>
            <div>
              <FadeUp delay={0.15}>
                <h2 style={{ fontSize: "clamp(26px, 5vw, 56px)", fontWeight: 800, letterSpacing: "-0.03em", lineHeight: 1.1, margin: "0 0 28px", color: WHITE }}>
                  Design is not decoration.
                  <span style={{ color: SILVER, fontWeight: 300 }}> It's a growth instrument.</span>
                </h2>
              </FadeUp>
              <FadeUp delay={0.25}>
                <p style={{ fontSize: 16, color: MUTED, lineHeight: 1.85, maxWidth: 560, margin: "0 0 40px" }}>
                  Every pixel serves a purpose. I build digital experiences where aesthetics and
                  conversion are not in conflict — they amplify each other. For brands that understand
                  that great design is the best business strategy.
                </p>
              </FadeUp>
              <StaggerIn delay={0.3}>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
                  {["Conversion Rate Optimization", "Technical CMS Architecture", "Design Systems", "E-commerce UX"].map((tag) => (
                    <StaggerItem key={tag}>
                      <div style={{ fontFamily: "monospace", fontSize: 10, letterSpacing: "0.14em",
                        color: SILVER, border: "1px solid #2A2A2C", padding: "8px 14px", borderRadius: 2, textTransform: "uppercase" }}>
                        [{tag}]
                      </div>
                    </StaggerItem>
                  ))}
                </div>
              </StaggerIn>
            </div>
          </div>
        </div>
      </section>

      {/* EXPERTISE */}
      <section id="services" style={{ padding: "clamp(48px,8vw,80px) clamp(20px,5vw,48px) clamp(60px,10vw,120px)", borderTop: "1px solid #1A1A1C" }}>
        <div style={{ maxWidth: 1400, margin: "0 auto" }}>
          <FadeUp>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 40, flexWrap: "wrap", gap: 8 }}>
              <div style={{ fontFamily: "monospace", fontSize: 10, letterSpacing: "0.25em", color: MUTED, textTransform: "uppercase" }}>02 — Expertise</div>
              <h2 style={{ fontSize: "clamp(24px, 5vw, 42px)", fontWeight: 800, letterSpacing: "-0.03em", margin: 0 }}>What I do</h2>
            </div>
          </FadeUp>
          <StaggerIn delay={0.1}>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 12, perspective: 1000 }}>
              <StaggerItem><BentoCard wide tag="Core Service" title="UI/UX Design & Architecture" sub="Responsive, dev-friendly layouts built on systematic thinking. Every component serves the user journey." accent="#6B5CE7" /></StaggerItem>
              <StaggerItem><BentoCard tag="Revenue" title="E-commerce Conversion" sub="Product page optimization, funnel architecture, and user flows that turn visitors into buyers." accent="#E76B5C" /></StaggerItem>
              <StaggerItem><BentoCard tag="Systems" title="Design Systems & CMS" sub="Shopify, Webflow, custom technical solutions. Scalable, maintainable, handoff-ready." accent="#5CE7B8" /></StaggerItem>
              <StaggerItem><BentoCard tag="Identity" title="Brand Identity & Creative Direction" sub="Visual languages that communicate value before a word is read. Distinctive. Ownable." accent="#E7C75C" /></StaggerItem>
              <StaggerItem><BentoCard wide tall tag="Process" title="Design → Development" sub="From wireframe to production. Clean component architecture, design tokens, and documentation that developers actually use. No ambiguity in handoff." accent="#6B5CE7" /></StaggerItem>
              <StaggerItem><BentoCard tall tag="Focus" title="Typography & Editorial Layout" sub="Type as a design decision, not a default. Editorial precision meets digital execution." accent="#B8B8B4" /></StaggerItem>
              <StaggerItem><BentoCard wide tag="Growth" title="Landing Pages & Conversion Funnels" sub="High-converting landing pages built with clear hierarchy, persuasive copy structure, and CTA placement backed by UX principles. Pages that don't just look good — they sell." accent="#E76B5C" /></StaggerItem>
              <StaggerItem><BentoCard tag="Analytics" title="UX Audit & Performance Review" sub="Deep dive into your existing product — identifying friction points, drop-off zones, and quick wins that directly impact revenue and retention." accent="#5CE7B8" /></StaggerItem>
            </div>
          </StaggerIn>
        </div>
      </section>

      {/* PROJECTS */}
      <section id="work" style={{ padding: "clamp(48px,8vw,80px) clamp(20px,5vw,48px) clamp(60px,10vw,120px)", borderTop: "1px solid #1A1A1C" }}>
        <div style={{ maxWidth: 1400, margin: "0 auto" }}>
          <FadeUp>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 0, flexWrap: "wrap", gap: 8 }}>
              <div style={{ fontFamily: "monospace", fontSize: 10, letterSpacing: "0.25em", color: MUTED, textTransform: "uppercase" }}>03 — Selected Work</div>
              <h2 style={{ fontSize: "clamp(24px, 5vw, 42px)", fontWeight: 800, letterSpacing: "-0.03em", margin: 0 }}>Projects</h2>
            </div>
          </FadeUp>
          <div style={{ borderTop: "1px solid #1E1E20" }}>
            <ProjectCard num="01" title="ZNET — Internet Provider Platform"
              category="UI/UX Design / Web Platform"
              role="Lead UI/UX Designer"
              deliverables="UI System, Landing Pages, Tariff Pages, Coverage Map UX, Mobile"
              color="#6B5CE7"
              screenshotUrl="https://glossy-dull-98638163.figma.site/thumbnail"
              siteUrl="glossy-dull-98638163.figma.site"
              description="Інноваційний гігабітний інтернет для дому та бізнесу. Tech-forward платформа для регіонального провайдера з GPON технологією." />
            <ProjectCard num="02" title="GADS FARM — Google Accounts Automation Platform"
              category="Media Buying / UI/UX Design"
              role="Product Designer & Consultant"
              deliverables="Dashboard UI, Account Management System, Automation Flows, Analytics"
              color="#5CE7B8"
              confidential={true}
              description="Internal tool for a media buying team running large-scale Google Ads campaigns. Designed a full dashboard for managing farmed Google accounts — bulk registration flows, warm-up tracking, trust score monitoring, and ban recovery pipelines. Reduced manual ops time by 60% and scaled the team's ad spend capacity 3x." />
            <ProjectCard num="03" title="Video Game on Unreal Engine"
              category="Full Stack Development / Game Dev"
              role="Designer & Developer"
              deliverables="Game Design, 3D World, Mechanics, UI/UX"
              color="#E7C75C"
              description="Currently in active development — building a full-scale video game on Unreal Engine. From world design and game mechanics to UI systems and player experience."
              comingSoon={true} />
            <ProjectCard num="04" title="FLOWDESK — Business Process Automation Suite"
              category="Automation / Full Stack Development"
              role="Product Designer & Full Stack Developer"
              deliverables="Custom CRM, Task Automation, Internal App, Analytics Dashboard, Integrations"
              color="#E76B5C"
              confidential={true}
              description="Built a custom internal app for a mid-size logistics company drowning in manual spreadsheets and Telegram threads. Automated their order intake, driver assignment, invoice generation, and client notifications — all in one dashboard. Result: team of 12 cut daily admin work from 4 hours to 20 minutes, eliminated human errors in billing, and saved ~$2,400/month in operational costs." />
            <ProjectCard num="05" title="FADEOUT — Women's Fashion E-commerce"
              category="UI/UX Design / E-commerce"
              role="Product Designer & Full Stack Developer"
              deliverables="Catalog UX, Product Detail Pages, Filtering System, Cart Flow, Technical SEO"
              color="#5CA6E7"
              screenshotUrl="https://fadeout.cx.ua/assets/products/featured/puffer-cream.png"
              siteUrl="fadeout.cx.ua"
              description="End-to-end women's fashion storefront — 120+ product catalog with multi-facet filtering, individual product pages, cart flow, and technical SEO (structured data, sitemap, Open Graph). Designed and built from architecture to deployment." />
            <ProjectCard num="06" title="ДРУГА ЗМІНА — Evening School Concept"
              category="UI/UX Design / Web Concept"
              role="Designer & Developer"
              deliverables="Visual Identity, Interactive Schedule, Course Finder, Responsive Layout"
              color="#3B55E6"
              screenshotUrl="/thumbs/second-shift.png"
              siteUrl="secondsshift.netlify.app"
              description="Концепт сайту вечірньої школи для дорослих. Swiss-типографіка на білому аркуші, пласкі кольори напрямів, інтерактивна сітка розкладу на тиждень і підбір курсу за напрямом і зручним часом. Без фреймворків — чистий HTML, CSS і JavaScript, повністю адаптивний." />
            <ProjectCard num="07" title="PROMYSEL — Oilfield Operations Platform"
              category="Product Design / Full Stack Development"
              role="Designer & Developer"
              deliverables="Field Data Capture, Offline-First Sync, Six Modules, Dashboard, Excel Export"
              color="#C2410C"
              screenshotUrl="/thumbs/promysel.png"
              siteUrl="/promysel/"
              description="Working prototype for oilfield production accounting. Operators log well measurements on a tablet at the wellhead — with gloves on and no signal — while the supervisor sees a live summary in the office. Six modules: production, tanks, haulage, maintenance, HSE and dashboard. Offline-first: records queue on the device and sync by themselves. The interactive prototype runs right on the project page." />
          </div>

          <FadeUp>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 8,
              marginTop: 96, paddingTop: 40, borderTop: "1px solid #1A1A1C" }}>
              <div style={{ fontFamily: "monospace", fontSize: 10, letterSpacing: "0.25em", color: MUTED, textTransform: "uppercase" }}>Motion / TikTok</div>
              <h2 style={{ fontSize: "clamp(24px, 5vw, 42px)", fontWeight: 800, letterSpacing: "-0.03em", margin: 0 }}>Video Editing & Motion Design</h2>
            </div>
          </FadeUp>
          <div className="hscroll" style={{ display: "flex", gap: 20, overflowX: "auto", scrollSnapType: "x mandatory", paddingBottom: 8, marginTop: 24, justifyContent: "safe center" }}>
            <MotionCard title="MOVIE CS2" category="Motion Design / TikTok" color="#E75C9E"
              screenshotUrl="https://p16-common-sign.tiktokcdn.com/tos-alisg-p-0037/ooIiQaoIvCSiiAGiKABwyAYgdAnAgAsNlrAdE~tplv-tiktokx-origin.image?dr=14575&x-expires=1788598800&x-signature=Nz33bQMiDinKuJaElSCPVb0QISE%3D&t=4d5b0474&ps=13740610&shp=81f88b70&shcp=43f4a2f9&idc=my2"
              siteUrl="tiktok.com/@wisooneee/video/7647309170047208724" />
            <MotionCard title="Montagem Alquimia" category="Motion Design / TikTok" color="#5CD0E7"
              screenshotUrl="https://p16-common-sign.tiktokcdn.com/tos-alisg-p-0037/oYVAuBZLAyAIfAVqxHcFEFaEECUfBAkQzgDcC6~tplv-tiktokx-origin.image?dr=14575&x-expires=1788598800&x-signature=m6HOYN%2BgLGtiqPPB7owWNvFtc%2BE%3D&t=4d5b0474&ps=13740610&shp=81f88b70&shcp=43f4a2f9&idc=my2"
              siteUrl="tiktok.com/@wisooneee/video/7642733353505950996" />
            <MotionCard title="Death Note" category="Motion Design / TikTok" color="#8C5CE7"
              screenshotUrl="https://p16-common-sign.tiktokcdn.com/tos-alisg-p-0037/oEA4IiOXwgY6B9BAzVIaKLEAKWurovLKwIivD~tplv-tiktokx-origin.image?dr=14575&x-expires=1788598800&x-signature=iAGtNZm%2BltPF%2FgC6IvaYSRrp%2FC4%3D&t=4d5b0474&ps=13740610&shp=81f88b70&shcp=43f4a2f9&idc=my2"
              siteUrl="tiktok.com/@wisooneee/video/7641188156007664914" />
            <MotionCard title="Carry On My Way" category="Motion Design / TikTok" color="#5CE7A0"
              screenshotUrl="https://p16-common-sign.tiktokcdn.com/tos-alisg-p-0037/okAAAIkBdk1IfBAA3ABIPED7OAAKiBiwAJEBUQ~tplv-tiktokx-origin.image?dr=14575&x-expires=1788606000&x-signature=2OblScRpN0A5qsC%2Fx%2BxUPYCQevU%3D&t=4d5b0474&ps=13740610&shp=81f88b70&shcp=43f4a2f9&idc=my2"
              siteUrl="tiktok.com/@wisooneee/video/7638387066400673045" />
          </div>
        </div>
      </section>

      {/* CONTACT */}
      <section id="contact" style={{ padding: "clamp(64px,10vw,120px) clamp(20px,5vw,48px) clamp(48px,8vw,80px)", borderTop: "1px solid #1A1A1C", textAlign: "center", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0, background: `radial-gradient(ellipse at 50% 100%, ${ACCENT}0A 0%, transparent 60%)`, pointerEvents: "none" }} />
        <div style={{ maxWidth: 1400, margin: "0 auto", position: "relative", zIndex: 1 }}>
          <FadeUp>
            <div style={{ fontFamily: "monospace", fontSize: 10, letterSpacing: "0.25em", color: MUTED, textTransform: "uppercase", marginBottom: 32 }}>
              04 — Let's work
            </div>
            <h2 style={{ fontSize: "clamp(36px, 9vw, 120px)", fontWeight: 900, letterSpacing: "-0.04em", lineHeight: 0.9, margin: "0 0 48px" }}>
              <span style={{ color: WHITE }}>Have a project?</span><br />
              <span style={{ color: MUTED, fontWeight: 300 }}>Let's talk.</span>
            </h2>
          </FadeUp>
          <FadeUp delay={0.2}>
            <div style={{ display: "flex", justifyContent: "center", gap: 16, flexWrap: "wrap" }}>
              <MagneticButton href="mailto:valera.skribko@gmail.com">
                <Mail size={14} /> valera.skribko@gmail.com
              </MagneticButton>
              <MagneticButton href="https://t.me/nikwilcon">
                Telegram ↗
              </MagneticButton>
            </div>
          </FadeUp>
        </div>
      </section>

      {/* FOOTER */}
      <footer style={{ padding: "32px clamp(20px,5vw,48px)", borderTop: "1px solid #1A1A1C",
        display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
        textAlign: "center", gap: 20 }}>
        <div style={{ fontFamily: "monospace", fontSize: 11, color: MUTED, letterSpacing: "0.14em" }}>
          © 2025 — VALERA SKRIBKO
        </div>
        <div style={{ display: "flex", gap: "clamp(16px, 3vw, 32px)", flexWrap: "wrap" }}>
          <FooterLink href="https://www.instagram.com/power_the_gods">Instagram</FooterLink>
          <FooterLink href="https://www.behance.net/326ad3f2">Behance</FooterLink>
          <FooterLink href="https://www.linkedin.com/in/valerii-skribko-832bb7415">LinkedIn</FooterLink>
        </div>
        <div style={{ fontFamily: "monospace", fontSize: 10, color: MUTED, letterSpacing: "0.14em", textTransform: "uppercase" }}>
          Available for projects — Remote worldwide
        </div>
      </footer>

    </div>
  );
}

import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")).render(<Portfolio />);