script.js

/**
 * AI Digital Business Card - Main Script
 * Handles: Neural Canvas, Custom Cursor, 3D Card Tilt, Ripple Effects,
 * Theme Toggle, Live Clock, Copy Actions, vCard Download, Loading Screen.
 * Vanilla JavaScript - No frameworks.
 */

;(function () {
  'use strict';

  /* --------------------------------------------
     DOM ELEMENTS
  -------------------------------------------- */
  const canvas = document.getElementById('neuralCanvas');
  const ctx = canvas.getContext('2d');
  const loadingScreen = document.getElementById('loadingScreen');
  const glassCard = document.getElementById('glassCard');
  const customCursor = document.getElementById('customCursor');
  const customCursorDot = document.getElementById('customCursorDot');
  const mouseSpotlight = document.getElementById('mouseSpotlight');
  const themeToggle = document.getElementById('themeToggle');
  const clockTime = document.getElementById('clockTime');
  const clockDate = document.getElementById('clockDate');
  const downloadVCardBtn = document.getElementById('downloadVCard');
  const copyEmailBtn = document.getElementById('copyEmailBtn');
  const copyPhoneBtn = document.getElementById('copyPhoneBtn');
  const toastContainer = document.getElementById('toastContainer');
  const footerYear = document.getElementById('footerYear');
  const qrImage = document.getElementById('qrCodeImage');
  const qrFallback = document.getElementById('qrFallback');
  const qrFallbackCanvas = document.getElementById('qrFallbackCanvas');

  /* --------------------------------------------
     STATE VARIABLES
  -------------------------------------------- */
  let mouseX = window.innerWidth / 2;
  let mouseY = window.innerHeight / 2;
  let targetMouseX = mouseX;
  let targetMouseY = mouseY;
  let cursorX = mouseX;
  let cursorY = mouseY;
  let spotlightX = mouseX;
  let spotlightY = mouseY;
  let cardTiltX = 0;
  let cardTiltY = 0;
  let targetCardTiltX = 0;
  let targetCardTiltY = 0;
  let isLightMode = false;
  let animationFrameId = null;
  let particles = [];
  let nodes = [];
  let gridPoints = [];

  /* --------------------------------------------
     INITIALIZATION
  -------------------------------------------- */
  function init() {
    setupCanvas();
    loadThemePreference();
    setupEventListeners();
    startClock();
    setFooterYear();
    generateQRFallback();
    startAnimationLoop();
    hideLoadingScreen();
  }

  /* --------------------------------------------
     LOADING SCREEN
  -------------------------------------------- */
  function hideLoadingScreen() {
    window.addEventListener('load', () => {
      setTimeout(() => {
        loadingScreen.classList.add('loading-screen--hidden');
        // Enable custom cursor after loading
        document.body.style.cursor = 'none';
      }, 600);
    });
  }

  /* --------------------------------------------
     CANVAS SETUP
  -------------------------------------------- */
  function setupCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    initParticles();
    initNodes();
    initGrid();
  }

  function initParticles() {
    const count = Math.floor((canvas.width * canvas.height) / 8000);
    particles = [];
    for (let i = 0; i < count; i++) {
      particles.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        radius: Math.random() * 1.8 + 0.5,
        speedX: (Math.random() - 0.5) * 0.4,
        speedY: (Math.random() - 0.5) * 0.4,
        opacity: Math.random() * 0.5 + 0.2,
      });
    }
  }

  function initNodes() {
    const count = 25;
    nodes = [];
    for (let i = 0; i < count; i++) {
      nodes.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        radius: Math.random() * 2.5 + 1.5,
        pulse: Math.random() * Math.PI * 2,
        pulseSpeed: 0.02 + Math.random() * 0.03,
        connections: [],
      });
    }
  }

  function initGrid() {
    gridPoints = [];
    const spacing = 45;
    for (let x = spacing; x < canvas.width; x += spacing) {
      for (let y = spacing; y < canvas.height; y += spacing) {
        gridPoints.push({ x, y, baseX: x, baseY: y, offset: Math.random() * 1000 });
      }
    }
  }

  /* --------------------------------------------
     ANIMATION LOOP
  -------------------------------------------- */
  function startAnimationLoop() {
    function loop() {
      updateCursor();
      updateSpotlight();
      updateCardTilt();
      drawCanvas();
      animationFrameId = requestAnimationFrame(loop);
    }
    loop();
  }

  function updateCursor() {
    const ease = 0.09;
    cursorX += (targetMouseX - cursorX) * ease;
    cursorY += (targetMouseY - cursorY) * ease;

    customCursor.style.transform = `translate(${cursorX}px, ${cursorY}px) translate(-50%, -50%)`;
    customCursorDot.style.transform = `translate(${targetMouseX}px, ${targetMouseY}px) translate(-50%, -50%)`;
  }

  function updateSpotlight() {
    const ease = 0.04;
    spotlightX += (targetMouseX - spotlightX) * ease;
    spotlightY += (targetMouseY - spotlightY) * ease;
    mouseSpotlight.style.transform = `translate(${spotlightX}px, ${spotlightY}px) translate(-50%, -50%)`;
  }

  function updateCardTilt() {
    cardTiltX += (targetCardTiltX - cardTiltX) * 0.1;
    cardTiltY += (targetCardTiltY - cardTiltY) * 0.1;
    glassCard.style.transform = `rotateX(${cardTiltY}deg) rotateY(${cardTiltX}deg)`;
  }

  /* --------------------------------------------
     CANVAS DRAWING
  -------------------------------------------- */
  function drawCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Aurora gradient background
    const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
    gradient.addColorStop(0, 'rgba(10, 10, 26, 0.3)');
    gradient.addColorStop(0.5, 'rgba(20, 15, 40, 0.2)');
    gradient.addColorStop(1, 'rgba(5, 5, 15, 0.3)');
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Draw grid with mouse influence
    ctx.strokeStyle = 'rgba(0, 245, 255, 0.06)';
    ctx.lineWidth = 0.6;
    for (let point of gridPoints) {
      const dx = targetMouseX - point.x;
      const dy = targetMouseY - point.y;
      const dist = Math.sqrt(dx * dx + dy * dy);
      const maxDist = 120;
      const offsetX = dist < maxDist ? (dx / dist) * (maxDist - dist) * 0.3 : 0;
      const offsetY = dist < maxDist ? (dy / dist) * (maxDist - dist) * 0.3 : 0;

      ctx.beginPath();
      ctx.moveTo(point.x + offsetX, point.y + offsetY);
      // Connect to neighbor right
      const rightNeighbor = gridPoints.find(p => p.baseY === point.baseY && p.baseX === point.baseX + 45);
      if (rightNeighbor) {
        const rDx = targetMouseX - rightNeighbor.x;
        const rDy = targetMouseY - rightNeighbor.y;
        const rDist = Math.sqrt(rDx * rDx + rDy * rDy);
        const rOffsetX = rDist < maxDist ? (rDx / rDist) * (maxDist - rDist) * 0.3 : 0;
        const rOffsetY = rDist < maxDist ? (rDy / rDist) * (maxDist - rDist) * 0.3 : 0;
        ctx.lineTo(rightNeighbor.x + rOffsetX, rightNeighbor.y + rOffsetY);
        ctx.stroke();
      }
      // Connect downward
      const downNeighbor = gridPoints.find(p => p.baseX === point.baseX && p.baseY === point.baseY + 45);
      if (downNeighbor) {
        ctx.beginPath();
        ctx.moveTo(point.x + offsetX, point.y + offsetY);
        const dDx = targetMouseX - downNeighbor.x;
        const dDy = targetMouseY - downNeighbor.y;
        const dDist = Math.sqrt(dDx * dDx + dDy * dDy);
        const dOffsetX = dDist < maxDist ? (dDx / dDist) * (maxDist - dDist) * 0.3 : 0;
        const dOffsetY = dDist < maxDist ? (dDy / dDist) * (maxDist - dDist) * 0.3 : 0;
        ctx.lineTo(downNeighbor.x + dOffsetX, downNeighbor.y + dOffsetY);
        ctx.stroke();
      }
    }

    // Draw nodes (connected glowing nodes)
    for (let i = 0; i < nodes.length; i++) {
      const node = nodes[i];
      node.pulse += node.pulseSpeed;
      const pulseRadius = node.radius + Math.sin(node.pulse) * 1.2;
      ctx.beginPath();
      ctx.arc(node.x, node.y, pulseRadius, 0, Math.PI * 2);
      ctx.fillStyle = `rgba(0, 245, 255, 0.7)`;
      ctx.shadowColor = '#00F5FF';
      ctx.shadowBlur = 8;
      ctx.fill();
      ctx.shadowBlur = 0;

      // Connections
      for (let j = i + 1; j < nodes.length; j++) {
        const other = nodes[j];
        const dist = Math.hypot(node.x - other.x, node.y - other.y);
        if (dist < 130) {
          ctx.beginPath();
          ctx.moveTo(node.x, node.y);
          ctx.lineTo(other.x, other.y);
          ctx.strokeStyle = `rgba(0, 245, 255, ${0.2 * (1 - dist / 130)})`;
          ctx.lineWidth = 0.8;
          ctx.stroke();
        }
      }
    }

    // Draw particles
    for (let p of particles) {
      p.x += p.speedX;
      p.y += p.speedY;

      if (p.x < 0 || p.x > canvas.width) p.speedX *= -1;
      if (p.y < 0 || p.y > canvas.height) p.speedY *= -1;

      ctx.beginPath();
      ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
      ctx.fillStyle = `rgba(255, 255, 255, ${p.opacity})`;
      ctx.fill();
    }
  }

  /* --------------------------------------------
     EVENT LISTENERS
  -------------------------------------------- */
  function setupEventListeners() {
    window.addEventListener('resize', onResize);
    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseleave', onMouseLeave);

    // Glass card tilt
    glassCard.addEventListener('mousemove', onCardMouseMove);
    glassCard.addEventListener('mouseleave', onCardMouseLeave);

    // Contact cards ripple effect
    document.querySelectorAll('.contact-card').forEach(card => {
      card.addEventListener('click', createRipple);
    });

    // Theme toggle
    themeToggle.addEventListener('click', toggleTheme);

    // Copy buttons
    document.querySelectorAll('.contact-card__copy-btn').forEach(btn => {
      btn.addEventListener('click', handleCopyClick);
    });

    copyEmailBtn.addEventListener('click', () => copyToClipboard('smhgrd@gmail.com', 'Email copied!'));
    copyPhoneBtn.addEventListener('click', () => copyToClipboard('+8801723476569', 'Phone copied!'));

    downloadVCardBtn.addEventListener('click', downloadVCard);
  }

  function onResize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    initParticles();
    initNodes();
    initGrid();
  }

  function onMouseMove(e) {
    targetMouseX = e.clientX;
    targetMouseY = e.clientY;

    // Update cursor hover state
    const target = e.target;
    if (target.closest('a, button, .contact-card, .action-btn, .theme-toggle')) {
      customCursor.classList.add('custom-cursor--hover');
    } else {
      customCursor.classList.remove('custom-cursor--hover');
    }
  }

  function onMouseLeave() {
    targetMouseX = window.innerWidth / 2;
    targetMouseY = window.innerHeight / 2;
    targetCardTiltX = 0;
    targetCardTiltY = 0;
  }

  function onCardMouseMove(e) {
    const rect = glassCard.getBoundingClientRect();
    const centerX = rect.left + rect.width / 2;
    const centerY = rect.top + rect.height / 2;
    const deltaX = (e.clientX - centerX) / (rect.width / 2);
    const deltaY = (e.clientY - centerY) / (rect.height / 2);
    targetCardTiltX = deltaX * 6; // max 6deg tilt
    targetCardTiltY = -deltaY * 6;
  }

  function onCardMouseLeave() {
    targetCardTiltX = 0;
    targetCardTiltY = 0;
  }

  /* --------------------------------------------
     RIPPLE EFFECT
  -------------------------------------------- */
  function createRipple(e) {
    const card = e.currentTarget;
    const ripple = document.createElement('span');
    ripple.classList.add('ripple-effect');

    const rect = card.getBoundingClientRect();
    const size = Math.max(rect.width, rect.height);
    ripple.style.width = ripple.style.height = `${size}px`;
    ripple.style.left = `${e.clientX - rect.left - size / 2}px`;
    ripple.style.top = `${e.clientY - rect.top - size / 2}px`;

    card.appendChild(ripple);
    ripple.addEventListener('animationend', () => ripple.remove());
  }

  /* --------------------------------------------
     THEME TOGGLE
  -------------------------------------------- */
  function loadThemePreference() {
    const saved = localStorage.getItem('theme');
    if (saved === 'light') {
      document.body.classList.add('light-mode');
      isLightMode = true;
    }
  }

  function toggleTheme() {
    isLightMode = !isLightMode;
    document.body.classList.toggle('light-mode', isLightMode);
    localStorage.setItem('theme', isLightMode ? 'light' : 'dark');
  }

  /* --------------------------------------------
     LIVE CLOCK
  -------------------------------------------- */
  function startClock() {
    function update() {
      const now = new Date();
      clockTime.textContent = now.toLocaleTimeString('en-US', { hour12: false });
      clockDate.textContent = now.toLocaleDateString('en-US', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
      });
    }
    update();
    setInterval(update, 1000);
  }

  /* --------------------------------------------
     COPY TO CLIPBOARD & TOAST
  -------------------------------------------- */
  function handleCopyClick(e) {
    e.preventDefault();
    e.stopPropagation();
    const btn = e.currentTarget;
    const textToCopy = btn.getAttribute('data-copy');
    if (textToCopy) {
      copyToClipboard(textToCopy, 'Copied!');
    }
  }

  async function copyToClipboard(text, message) {
    try {
      await navigator.clipboard.writeText(text);
      showToast(message || 'Copied to clipboard');
    } catch (err) {
      showToast('Failed to copy');
    }
  }

  function showToast(message) {
    const toast = document.createElement('div');
    toast.className = 'toast';
    toast.textContent = message;
    toastContainer.appendChild(toast);
    setTimeout(() => toast.remove(), 2000);
  }

  /* --------------------------------------------
     DOWNLOAD VCARD
  -------------------------------------------- */
  function downloadVCard() {
    const vcardData = `BEGIN:VCARD
VERSION:3.0
FN:Mehedi Hasan
ORG:Computer Vision Data Annotator
TITLE:Computer Vision Data Annotator
TEL;TYPE=CELL:+8801723476569
EMAIL:smhgrd@gmail.com
URL:https://itsmeshohan.online
NOTE:Turning Images into Intelligent Data.
END:VCARD`;

    const blob = new Blob([vcardData], { type: 'text/vcard' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'mehedi_hasan.vcf';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
    showToast('vCard downloaded');
  }

  /* --------------------------------------------
     FOOTER YEAR
  -------------------------------------------- */
  function setFooterYear() {
    footerYear.textContent = new Date().getFullYear();
  }

  /* --------------------------------------------
     QR FALLBACK CANVAS
  -------------------------------------------- */
  function generateQRFallback() {
    if (!qrFallbackCanvas) return;
    const qrCtx = qrFallbackCanvas.getContext('2d');
    const size = 100;
    qrCtx.fillStyle = '#f0f0f0';
    qrCtx.fillRect(0, 0, size, size);
    // Draw a simple pattern
    qrCtx.fillStyle = '#0a0a1a';
    for (let i = 0; i < 8; i++) {
      for (let j = 0; j < 8; j++) {
        if ((i + j) % 3 === 0) {
          qrCtx.fillRect(i * 12 + 2, j * 12 + 2, 10, 10);
        }
      }
    }
    // If QR image fails to load, fallback is already shown via onerror in HTML
  }

  /* --------------------------------------------
     START EVERYTHING
  -------------------------------------------- */
  init();
})();