<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Advokat Predrag Cumpf</title>
  <!-- Google Material Icons -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
  <style>
    /* Reset some default browser styles */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      color: #333;
      background: #f2f2f2;
      margin: 0;
      padding: 0;
      /* Subtle fade-in for the entire page */
      opacity: 0; /* hidden initially */
      animation: pageFadeIn 0.8s ease-out forwards; 
    }

    @keyframes pageFadeIn {
      to {
        opacity: 1;
      }
    }

    /* Contact Card */
    .contact-card {
      margin: 32px auto; 
      max-width: 600px;
      width: calc(100% - 20px);
      background: #fff;
      padding: 10px;
      border-radius: 6px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

      /* Fade + slight rise-in animation */
      opacity: 0;
      transform: translateY(20px);
      animation: cardFadeIn 1s ease-out 0.3s forwards; 
    }

    @keyframes cardFadeIn {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .profile-section {
      text-align: center;
    }
    .profile-section img {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      object-fit: cover;
      margin-bottom: 10px;
      border: 2px solid #ddd;
      transition: transform 0.3s ease;
    }
    .profile-section img:hover {
      transform: scale(1.05);
    }

    .profile-section h2 {
      margin-bottom: 4px;
    }
    .profile-section h6 {
      margin-bottom: 10px;
      color: #777;
      font-weight: normal;
    }

    #emailLink {
      white-space: nowrap; /* Prevent wrapping */
      text-overflow: ellipsis; /* Optionally, truncate if content overflows */
      display: inline-block; 
    }

    #emailLabel {
      white-space: normal; 
      overflow: hidden;
      display: inline; 
    }

    #phoneLink {
      white-space: nowrap; 
      display: inline-block;
    }

    #phoneType {
      white-space: normal; 
      overflow: hidden;
      display: inline; 
    }

    /* Info rows under the profile (optional) */
    .info-section {
      margin-top: 20px;
    }
    .info-row {
      display: flex;
      align-items: center;
      margin: 12px 0;
    }
    .info-row i.material-icons {
      color: #148ce7;
      margin-right: 10px;
      font-size: 1.4rem;
      transition: transform 0.2s ease;
    }
    /* A little wiggle on icon hover */
    .info-row:hover i.material-icons {
      transform: scale(1.2);
    }
    .info-row a {
      color: #148ce7;
      text-decoration: none;
      font-size: 1rem;
      word-break: break-all; 
    }
    .info-row small {
      color: rgb(124, 124, 124);
      margin-left: 4px;
    }

    .info-email-icon {
      position: relative;
      top: 2px; 
    }

    /* Adjust Add Contact text positioning */
    .action-buttons #addContactAction span {
      margin-left: 6px; 
    }

    /* Action buttons wrapper */
    .action-buttons {
      display: flex;
      justify-content: space-between; 
      align-items: center; 
      margin: 20px auto;
      max-width: 400px;
      gap: 3rem; 
      position: relative; 
    }

    /* Center button positioning */
    .action-buttons a:nth-child(2) {
      position: absolute;
      left: 50%;
      transform: translate(-50%, 0);
      transition: transform 0.2s ease, background-color 0.2s ease;
    }
    .action-buttons a:nth-child(2):hover {
      transform: translate(-50%, -2px) scale(1.05);
      background-color: #f8f8f8;
    }
    .action-buttons a:nth-child(2):hover i.material-icons {
      transform: scale(1.1);
    }

    .action-buttons a {
      text-decoration: none;
      color: #148ce7; 
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      width: calc(33.333% - 1.5rem);
      text-align: center;
      transition: transform 0.2s ease, background-color 0.2s ease;
      border-radius: 6px;
      padding: 6px 0;
      height: auto; /* Allow for height adjustment */
      word-wrap: break-word; /* Ensure text wraps */
    }

    #addContactAction span {
      display: block;
      margin-top: 4px; /* Space between icon and text */
      text-align: center;
      white-space: normal; /* Allow multi-line wrapping */
      white-space: pre-line; /* Treat \n as a line break */
      line-height: 1.2; /* Adjust line spacing if needed */
    }

    .action-buttons #addContactAction {
      align-items: center; /* Center-align content */
      padding-right: 6px; /* Offset the hover box by the same margin */
    }

    .action-buttons a:not(:nth-child(2)):hover {
      transform: translateY(-2px) scale(1.1);
      background-color: #f8f8f8;
    }

    .action-buttons i.material-icons {
      font-size: 2rem; 
      transition: transform 0.2s ease;
    }

    .action-buttons a:hover i.material-icons {
      transform: scale(1.1);
    }

    .action-buttons a span {
      font-size: 1rem; 
      white-space: nowrap; 
    }

    /* Floating button for taking user to Google Maps Nav */
    .fab-container {
      position: absolute;
      bottom: 10px;
      right: 10px;
      z-index: 999;
      transition: transform 0.1s ease-out;
    }
    .fab-button {
      background-color: #148ce7;
      color: #fff;
      width: 56px; 
      height: 56px; 
      border-radius: 12px; 
      display: flex;
      justify-content: center;
      align-items: center;
      text-decoration: none;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      transition: background-color 0.3s ease, transform 0.2s ease;
    }
    .fab-button:hover {
      background-color: #0b78c1;
      transform: translateY(-2px);
    }
    .fab-button i.material-icons {
      font-size: 28px;
    }

    /* Map Container */
    .map-container {
      margin: 20px auto 30px auto;
      width: calc(100% - 20px);
      max-width: 600px;
      height: 300px;
      border-radius: 6px;
      overflow: hidden;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      touch-action: none;
      position: relative;
      background: #000;
      opacity: 0;
      transform: translateY(20px);
      animation: cardFadeIn 1s ease-out 0.6s forwards;
    }
    .map-container img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform-origin: center center;
      transition: none;
    }

    /* Language Switch */
    .language-switch {
      position: absolute;
      top: 5px;
      right: 10px;
      display: flex;
      gap: 10px; 
      z-index: 1000; 
      opacity: 0;
      transform: translateY(-10px);
      animation: langSwitchFadeIn 0.8s ease-out 0.2s forwards; 
    }

    @keyframes langSwitchFadeIn {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Base style for language buttons (dim unselected) */
    .lang-btn {
      background-color: transparent;
      border: none;
      padding: 0;
      cursor: pointer;
      width: 33px;
      height: 22px;
      display: block;
      border-radius: 4px;
      overflow: hidden;
      transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
      opacity: 0.6; /* Dims the button by default */
    }
    .lang-btn:hover {
      transform: scale(1.1);
      box-shadow: 0 0 6px rgba(0,0,0,0.15);
    }

    /* Highlight the active language (fully opaque) */
    .lang-btn.active {
      opacity: 1; 
      box-shadow: 0 0 2px rgba(0,0,0,0.2); /* optional subtle highlight */
    }

    /* Language Flag Styles */
    .lang-flag {
      width: 100%;
      height: 100%;
      object-fit: cover; 
      image-rendering: auto; /* Improves image rendering on Retina displays */
    }

  </style>
</head>
<body>

  <!-- Language Switch Buttons -->
  <div class="language-switch">
    <button class="lang-btn" data-lang="sr" onclick="setLanguage('sr')">
      <img src="rs.svg#svgView(preserveAspectRatio(none))" alt="Serbian" class="lang-flag" />
    </button>
    <button class="lang-btn" data-lang="ru" onclick="setLanguage('ru')">
      <img src="ru.svg#svgView(preserveAspectRatio(none))" alt="Russian" class="lang-flag" />
    </button>
    <button class="lang-btn" data-lang="en" onclick="setLanguage('en')">
      <img src="gb.svg#svgView(preserveAspectRatio(none))" alt="English" class="lang-flag" />
    </button>
  </div>

  <!-- Contact Card -->
  <div class="contact-card">
    <div class="profile-section">
      <h2 id="fullname">Предраг Цумпф</h2>
      <h6 id="jobtitle">Адвокат</h6>
    </div>
    
    <div class="info-section">
      <div class="info-row">
        <a id="phoneIconLink" href="tel:+381641908374">
          <i class="material-icons">phone</i>
        </a>
        <a id="phoneLink" href="tel:+381641908374">064/190-8374</a>
        <small id="phoneType">Мобилни</small>
      </div>
      <div class="info-row">
        <a id="emailIconLink" href="mailto:predragcumpf@gmail.com" class="info-email-icon">
          <i class="material-icons">email</i>
        </a>
        <a id="emailLink" href="mailto:predragcumpf@gmail.com">
          predragcumpf@gmail.com
        </a>
        <small id="emailLabel">Е-пошта</small>
      </div>
      <div class="info-row">
        <a
          id="addressIconLink"
          href="https://www.google.com/maps?q=Bulevar+kralja+Aleksandra+193b,+Beograd"
          target="_blank"
          rel="noopener noreferrer"
        >
          <i class="material-icons">location_on</i>
        </a>
        <span id="addressText">Bulevar kralja Aleksandra 193B<br>11000 Beograd, Srbija</span>
      </div>
    </div>

    <div class="action-buttons">
      <a id="callAction" href="tel:+381641908374">
        <i class="material-icons">phone</i>
        <span id="callLabel">Позови</span>
      </a>
      <a id="emailAction" href="mailto:predragcumpf@gmail.com">
        <i class="material-icons">email</i>
        <span id="contactLabel">Контактирај</span>
      </a>
      <a 
        id="addContactAction"
        href="adv_predrag_cumpf_kontakt.vcf" 
        download
      >
        <i class="material-icons">person_add</i>
        <span id="addContactLabel">Додај Контакт</span>
      </a>
    </div>
  </div>
  
  <!-- Map Embed -->
  <div class="map-container">
    <img src="location-point.webp" alt="Location Map" />
    
    <div class="fab-container" id="fabContainer">
      <a 
        class="fab-button" 
        href="https://www.google.com/maps/dir/?api=1&destination=Bulevar+kralja+Aleksandra+193b,+Beograd" 
        target="_blank" 
        rel="noopener noreferrer"
      >
        <i class="material-icons">directions</i>
      </a>
    </div>
  </div>

  <script>
    /* MAP INTERACTIVITY (PINCH/ZOOM/PAN) */
    const mapImage = document.querySelector('.map-container img');
    const mapContainer = document.querySelector('.map-container');

    let scale = 1;
    let lastScale = 1;
    let minScale = 1;
    let startX = 0;
    let startY = 0;
    let deltaX = 0;
    let deltaY = 0;
    let isPanning = false;
    let startDistance = 0;

    let containerWidth = 0;
    let containerHeight = 0;
    let baseWidth = 0;
    let baseHeight = 0;

    let lastTapTime = 0;

    function resetMap() {
      scale = minScale;
      lastScale = minScale;
      deltaX = 0;
      deltaY = 0;
      clampTranslation();
      updateTransform();
    }

    mapContainer.addEventListener('touchend', (e) => {
      if (e.touches.length === 0 && e.changedTouches.length === 1) {
        let now = Date.now();
        let timeSinceLastTap = now - lastTapTime;
        if (timeSinceLastTap < 300 && timeSinceLastTap > 0) {
          resetMap();
        }
        lastTapTime = now;
      }
    });

    mapImage.addEventListener('load', () => {
      containerWidth = mapContainer.clientWidth;
      containerHeight = mapContainer.clientHeight;

      const rect = mapImage.getBoundingClientRect();
      baseWidth = rect.width;
      baseHeight = rect.height;

      const scaleX = containerWidth / baseWidth;
      const scaleY = containerHeight / baseHeight;
      minScale = Math.max(scaleX, scaleY);

      if (minScale > 1) {
        scale = minScale;
        lastScale = minScale;
        updateTransform();
      }
    });

    mapImage.addEventListener('touchstart', (e) => {
      if (e.touches.length === 1) {
        isPanning = true;
        startX = e.touches[0].pageX - deltaX;
        startY = e.touches[0].pageY - deltaY;
      } else if (e.touches.length === 2) {
        isPanning = false;
        const [touch1, touch2] = e.touches;
        const distX = touch2.pageX - touch1.pageX;
        const distY = touch2.pageY - touch1.pageY;
        startDistance = Math.hypot(distX, distY);
      }
    });

    mapImage.addEventListener('touchmove', (e) => {
      e.preventDefault(); // prevent scrolling
      if (isPanning && e.touches.length === 1) {
        deltaX = e.touches[0].pageX - startX;
        deltaY = e.touches[0].pageY - startY;
        clampTranslation();
        updateTransform();
      } else if (e.touches.length === 2) {
        const [touch1, touch2] = e.touches;
        const distX = touch2.pageX - touch1.pageX;
        const distY = touch2.pageY - touch1.pageY;
        const currentDistance = Math.hypot(distX, distY);

        scale = (currentDistance / startDistance) * lastScale;
        if (scale < minScale) {
          scale = minScale;
        }
        clampTranslation();
        updateTransform();
      }
    }, { passive: false });

    mapImage.addEventListener('touchend', (e) => {
      if (e.touches.length === 0) {
        lastScale = scale; 
      } else if (e.touches.length === 1) {
        isPanning = true;
        startX = e.touches[0].pageX - deltaX;
        startY = e.touches[0].pageY - deltaY;
      }
    });

    mapImage.addEventListener('contextmenu', (e) => e.preventDefault());

    function clampTranslation() {
      const displayWidth = baseWidth * scale;
      const displayHeight = baseHeight * scale;

      // Horizontal clamp
      if (displayWidth <= containerWidth) {
        deltaX = (containerWidth - displayWidth) / 2;
      } else {
        const maxOffsetX = (displayWidth - containerWidth) / 2;
        if (deltaX > maxOffsetX) deltaX = maxOffsetX;
        if (deltaX < -maxOffsetX) deltaX = -maxOffsetX;
      }

      // Vertical clamp
      if (displayHeight <= containerHeight) {
        deltaY = (containerHeight - displayHeight) / 2;
      } else {
        const maxOffsetY = (displayHeight - containerHeight) / 2;
        if (deltaY > maxOffsetY) deltaY = maxOffsetY;
        if (deltaY < -maxOffsetY) deltaY = -maxOffsetY;
      }
    }

    function updateTransform() {
      mapImage.style.transform = `translate(${deltaX}px, ${deltaY}px) scale(${scale})`;
    }

    /* Keep floating button in view */
    const fabContainer = document.getElementById('fabContainer');
    function keepFabInView() {
      const containerRect = mapContainer.getBoundingClientRect();
      const fabRect = fabContainer.getBoundingClientRect();

      const fabHeight = fabRect.height;
      const viewH = window.innerHeight;
      const margin = 10;

      const containerMin = containerRect.top + margin;
      const containerMax = containerRect.bottom - margin - fabHeight;
      const viewportMax = viewH - fabHeight - margin;

      let desiredTop = window.innerHeight - fabHeight - margin;
      const finalMin = containerMin;
      const finalMax = Math.min(containerMax, viewportMax);

      if (desiredTop < finalMin) desiredTop = finalMin;
      if (desiredTop > finalMax) desiredTop = finalMax;
      
      let offset = desiredTop - containerRect.bottom + fabHeight + margin;
      if (desiredTop < finalMin) {
        offset = finalMin - containerRect.bottom + fabHeight + margin;
      }

      fabContainer.style.transform = `translateY(${offset}px)`;
    }

    window.addEventListener('load', keepFabInView);
    window.addEventListener('scroll', keepFabInView);
    window.addEventListener('resize', keepFabInView);

    /* =========================================
       LANGUAGE SWITCHER / TRANSLATIONS
       ========================================= */
    const translations = {
      sr: {
        fullname: "Предраг Цумпф",
        jobtitle: "Адвокат",
        phoneType: "Мобилни",
        phoneNumber: "064/190-8374",
        emailLabel: "E-пошта",
        addressText: "Булевар краља Александра 193Б<br>11000 Београд, Србија",
        callLabel: "Позови",
        contactLabel: "Контактирај",
        addContactLabel: "Додај контакт"
      },
      en: {
        fullname: "Predrag Cumpf",
        jobtitle: "Attorney At Law",
        phoneType: "Mobile",
        phoneNumber: "+381 64 190 83 74",
        emailLabel: "Email",
        addressText: "Bulevar kralja Aleksandra 193b<br>11000 Belgrade, Serbia",
        callLabel: "Call",
        contactLabel: "Contact",
        addContactLabel: "Add\ncontact"
      },
      ru: {
        fullname: "Предраг Цумпф",
        jobtitle: "Адвокат",
        phoneType: "Мобильный",
        phoneNumber: "+381 64 190 83 74",
        emailLabel: "Электронная почта",
        addressText: "Булевар краља Александра 193Б<br>11000 Белград, Сербия",
        callLabel: "Позвонить",
        contactLabel: "Контакт",
        addContactLabel: "Добавить контакт"
      }
    };

    function setLanguage(lang) {
      // Update HTML lang attribute
      document.documentElement.setAttribute('lang', lang);

      // Update text content
      document.getElementById("fullname").textContent = translations[lang].fullname;
      document.getElementById("jobtitle").textContent = translations[lang].jobtitle;
      document.getElementById("phoneType").textContent = translations[lang].phoneType;
      document.getElementById("emailLabel").textContent = translations[lang].emailLabel;
      document.getElementById("addressText").innerHTML = translations[lang].addressText;
      document.getElementById("callLabel").textContent = translations[lang].callLabel;
      document.getElementById("contactLabel").textContent = translations[lang].contactLabel;
      document.getElementById("addContactLabel").textContent = translations[lang].addContactLabel;
      document.getElementById("phoneLink").textContent = translations[lang].phoneNumber;

      // Highlight the selected language button (and dim the rest)
      const langButtons = document.querySelectorAll('.lang-btn');
      langButtons.forEach(btn => {
        const btnLang = btn.getAttribute('data-lang');
        if (btnLang === lang) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      });

      keepFabInView();
    }

    document.addEventListener("DOMContentLoaded", () => {
      // Set Serbian as the initial (or fallback) language
      setLanguage('sr');

      const languageMap = {
        'sr': 'sr',
        'sr-RS': 'sr',
        'en-US': 'en',
        'en-GB': 'en',
        'ru': 'ru',
        'ru-RU': 'ru'
      };

      const browserLanguage = navigator.language || navigator.userLanguage;
      const defaultLanguage = languageMap[browserLanguage] || 'sr';

      // Override with browser language if supported
      setLanguage(defaultLanguage);
    });
  </script>
</body>
</html>
