// ============================
// 1. CORE SETUP
// ============================
import express from "express";
import cors from "cors";
import path from "path";
import { fileURLToPath } from "url";
import { Storage } from "@google-cloud/storage"; 
import Joi from "joi";
import bcrypt from "bcrypt";
import jwt from "jsonwebtoken";
const __filename = fileURLToPath(import.meta.url); 
const __dirname = path.dirname(__filename);

const app = express();
app.use(express.static("public"));

// --- ENV PROVERA ---
if (!process.env.JWT_SECRET) {
  throw new Error("KRITIČNA GREŠKA: JWT_SECRET nije postavljen u Environment Variables!");
}

// --- KONSTANTE ---
const BUCKET_NAME = process.env.BUCKET_NAME || "digitalna-galerija-uploads";
const JWT_SECRET = process.env.JWT_SECRET;
const GLOBAL_LIMIT_FILE = "limits/free.json";

const storage = new Storage();
const bucket = storage.bucket(BUCKET_NAME);
// --- PODACI FIRME (ZA PLAĆANJE) ---
const FIRMA = {
  naziv: "Digital Creative World",
  racun: "265404031000090885"
};
// ===================================
// --- AŽURIRANA DEFINICIJA PAKETA ---
// ===================================
const MOJI_PAKETI = {
    'PROBNI': { cena: 0, limit: 50, dana: 7 },
    'OSNOVNI': { cena: 5900, limit: 1000, dana: 30 },
    'STANDARD': { cena: 8900, limit: 3000, dana: 60 },
    'PREMIUM': { cena: 15220, limit: 'unlimited', dana: 365 }
};

// =========================
// --- GENERISANJE IPS QR ---
// =========================
function generatePackageQR(tipPaketa, eventName, orderId) {
    const izabran = MOJI_PAKETI[tipPaketa];

    if (!izabran || izabran.cena === 0) return null;

    const qrData = {
        K: "PR",
        V: "01",
        C: "1",
        R: FIRMA.racun,
        N: FIRMA.naziv,
        I: `RSD${parseFloat(izabran.cena).toFixed(2).replace('.', ',')}`,
        P: "Uplatilac",
        SF: "289",
        S: `Aktivacija: ${eventName}`.substring(0, 35), // kraća forma
        RO: orderId.replace(/\D/g, "")
    };

    return Object.entries(qrData).map(([k, v]) => `${k}:${v}`).join('|');
}

// =========================
// --- HANDLE PACKAGE SELECTION ---
// =========================
function handlePackageSelection(packageType, eventName, orderId) {
    const selected = MOJI_PAKETI[packageType];

    if (selected.cena === 0) {
        return { 
            status: "active", 
            message: `Besplatan paket aktiviran (Limit: ${selected.limit} fajlova)` 
        };
    } else {
        const qrString = generatePackageQR(packageType, eventName, orderId);
        return { 
            status: "pending_payment", 
            qrCode: qrString,
            message: "Skenirajte kod za aktivaciju paketa" 
        };
    }
}

// =========================
// --- UPLOAD CHECK / PAYWALL ---
// =========================

function canUpload(currentFileCount, packageType) {
    // Normalizujemo unos na velika slova radi sigurnosti
    const pType = (packageType || 'PROBNI').toUpperCase();
    const paket = MOJI_PAKETI[pType];

    if (!paket) {
        return { allowed: false, nextPackage: 'OSNOVNI', error: 'Nepoznat paket' };
    }

    // Pretvaramo limit u Infinity ako je 'unlimited', inače u broj
    const limit = paket.limit === 'unlimited' ? Infinity : Number(paket.limit);
    const count = Number(currentFileCount || 0);

    if (count >= limit) {
        const nextPackageMap = { 
            'PROBNI': 'OSNOVNI', 
            'OSNOVNI': 'STANDARD', 
            'STANDARD': 'PREMIUM' 
        };
        
        return { 
            allowed: false, 
            nextPackage: nextPackageMap[pType] || 'PREMIUM',
            limitReached: limit 
        };
    }

    return { allowed: true };
}
// ============================
// 2. HELPER FUNKCIJE
// ============================
function userPath(email) {
  // Menja sve što nije slovo ili broj u donju crtu
  const safeEmail = (email || "").toLowerCase().replace(/[^a-z0-9]/g, "_");
  return `users/${safeEmail}.json`;
}

async function hashPassword(pw) {
  return await bcrypt.hash(pw, 10);
}

async function checkPassword(plain, hash) {
  return await bcrypt.compare(plain, hash);
}

function makeToken(payload) {
  return jwt.sign(payload, JWT_SECRET, { expiresIn: "24h" });
}

function verifyToken(token) {
  return jwt.verify(token, JWT_SECRET);
}

const makeEventId = (name, date) => {
  const n = (name || "event").toLowerCase().replace(/[^a-z0-9]/g, "").substring(0, 10);
  const d = (date || "now").replace(/[^0-9]/g, "");
  return `ev_${n}_${d}_${Math.random().toString(36).substring(2, 7)}`;
};
function getPrefix(userEmail) {
  if (!userEmail) throw new Error("userEmail nije definisan");
  return `events/${userEmail}/`;
}


function getSecurePrefix(req) {
  const eventId = String(req.query.eventId || req.query.event || req.body?.eventId || "").trim();
  if (!req.user || !req.user.email) return "uploads/";
  const safeEmail = req.user.email.toLowerCase().replace(/[^a-z0-9]/g, "_");
  return eventId ? `events/${safeEmail}/${eventId}/uploads/` : "uploads/";
}
function getScopePrefix(req) {
  return getSecurePrefix(req);
}

function inScope(name, prefix) {
  name = String(name || "");
  return name && name.startsWith(prefix);
}
app.use(cors({ origin: true, credentials: false }));
app.use(express.json({ limit: "50mb" }));
app.use(express.urlencoded({ extended: true }));


// ============================
// 4. JOI ŠEME
// ============================
const createEventSchema = Joi.object({
  name: Joi.string().trim().min(1).required(),
  org: Joi.string().trim().min(1).required(),
  date: Joi.string().trim().allow("").optional(),
  type: Joi.string().trim().allow("").optional(),
  msg: Joi.string().trim().allow("").optional(),
  plan: Joi.string().trim().default("free").optional()
});


const authMiddleware = (req, res, next) => {
  try {
    const authHeader = req.headers.authorization;
    let token = (authHeader && authHeader.startsWith("Bearer "))
                ? authHeader.split(" ")[1]
                : req.query.token;

    if (!token) {
      return res.status(401).json({ error: "missing_token" });
    }

    // Koristi tvoju helper funkciju verifyToken
    req.user = verifyToken(token);
    next();
  } catch (err) {
    console.error("AUTH ERROR:", err.message);
    return res.status(401).json({ error: "invalid_token" });
  }
};

const uploadMiddleware = async (req, res, next) => {
  try {
    const authHeader = req.headers.authorization;
    const token = authHeader?.startsWith("Bearer ")
      ? authHeader.split(" ")[1]
      : req.query.token;

    if (token) {
      req.user = verifyToken(token);
      req.user.eventId = String(req.query.eventId || req.query.event || req.body?.eventId || "").trim();
      return next();
    }

    const eventId = String(req.query.eventId || req.query.event || req.body?.eventId || "").trim();
    if (!eventId) return res.status(401).json({ error: "missing_auth" });
    if (!/^[a-zA-Z0-9_-]+$/.test(eventId)) return res.status(400).json({ error: "invalid_eventId" });

    const eventPath = `events/${eventId}/event.json`;
    let ev;
    try {
      const [buf] = await bucket.file(eventPath).download();
      ev = JSON.parse(buf.toString("utf8"));
    } catch {
      return res.status(403).json({ error: "invalid_event" });
    }

    const createdAt = ev.createdAt || 0;
    const planKey = (ev.plan || "PROBNI").toUpperCase();
    const danaPaketa = ev.danaPaketa || (MOJI_PAKETI[planKey]?.dana) || 30;
    const expiresAt = createdAt + (danaPaketa * 24 * 60 * 60 * 1000);

    if (Date.now() > expiresAt) return res.status(403).json({
      error: "event_expired",
      message: "Galerija je istekla."
    });

    req.user = { email: "guest", isGuest: true, eventId };
    req.eventPlan = planKey;
    next();
  } catch (err) {
    console.error("UPLOAD MIDDLEWARE ERROR:", err);
    return res.status(401).json({ error: "invalid_auth" });
  }
};

// ============================
// PROVERA STATUSA UPLATE
// ============================
app.get('/landing/check-payment', async (req, res) => {
  try {
    const { eventId } = req.query;
    if (!eventId) return res.status(400).json({ error: 'Missing eventId' });

    const eventPath = `events/${eventId}/event.json`;
    const file = bucket.file(eventPath);

    const [exists] = await file.exists();
    if (!exists) return res.status(404).json({ error: 'Event not found' });

    const [content] = await file.download();
    const eventData = JSON.parse(content.toString());

    // Vraćamo paid status iz event.json (isPaid: true/false)
    res.json({
      paid: !!eventData.isPaid,
      status: eventData.isPaid ? 'active' : 'pending'
    });

  } catch (err) {
    console.error("PAYMENT CHECK ERROR:", err);
    res.status(500).json({ error: "Server error" });
  }
});
app.post('/upload', authMiddleware, async (req, res) => {
    const { eventId, packageType } = req.body;
    const prefix = `events/${req.user.email}/${eventId}/uploads/`;
    const [files] = await bucket.getFiles({ prefix });
    const realCount = files.length;

    const { allowed, nextPackage, limitReached } = canUpload(realCount, packageType);

    if (!allowed) {
        return res.status(403).json({
            error: 'Dostignut limit fajlova',
            current: realCount,
            limit: limitReached,
            upgradeTo: nextPackage
        });
    }

    res.json({ success: true });
});
/* =========================
   ADMIN LOGIKA (BACKEND)
========================= */
const ADMIN_SECRET = (process.env.ADMIN_SECRET || "default_tajna").toString().trim();

function isAdmin(req) {
  if (!ADMIN_SECRET) return false;
  const key = (req.query.key || "").toString();
  return key === ADMIN_SECRET;
}

const MAX_FILES = 10;
const MAX_DELETE = 10;

// Escape za klijentski JS
function escapeJs(s) {
  if (!s) return "";
  return String(s)
    .replace(/\\/g, "\\\\")
    .replace(/'/g, "\\'")
    .replace(/"/g, '\\"')
    .replace(/\n/g, "\\n")
    .replace(/\r/g, "\\r");
}

// Escape za HTML (XSS zaštita)
function escHtmlBackend(s) {
  if (!s) return "";
  return String(s)
    .replace(/&/g, "&")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#39;");
}
app.get("/api/user/events", authMiddleware, async (req, res) => {
  try {
    const [, , apiResponse] = await bucket.getFiles({
      prefix: "events/",
      delimiter: "/"
    });

    const prefixes = apiResponse.prefixes || [];
    const results = [];

    for (const folder of prefixes) {
      const safeFolder = folder.endsWith("/") ? folder : folder + "/";
      const file = bucket.file(`${safeFolder}event.json`);

      try {
        const [content] = await file.download();
        const ev = JSON.parse(content.toString());

        if (ev.owner === req.user.email) {
          results.push(ev);
        }
      } catch (e) {
        console.warn("Preskočen folder:", folder);
      }
    }

    results.sort((a, b) => (b.createdAt || 0) - (a.createdAt || 0));
    res.json(results);

  } catch (e) {
    console.error("DASHBOARD API ERROR:", e);
    res.status(500).json({ error: "Greška na serveru" });
  }
});

/* =========================
   HOME (HTML)
========================= */
app.get("/", async (req, res) => {
  try {
    // 1. PROVERA: Ako nema eventId-a (banka), šalji na landing
    const eventId = String(req.query.eventId || req.query.event || "").trim();
    
    if (!eventId) {
      return res.redirect('/landing');
    }

    // 2. ADMIN I PREFIKS (eventId je već definisan gore, ne piši 'const' ponovo)
    const adminMode = isAdmin(req);
    const prefix = `events/${eventId}/uploads/`; 
    
    const [files] = await bucket.getFiles({ prefix });

    const regularFiles = files.filter((f) => {
      const n = f.name || "";
      if (!n || n.endsWith("/")) return false;
      if (n.endsWith("event.json")) return false;
      if (n.includes("naslovna.jpg")) return false;
      if (n.startsWith("uploads/meta/")) return false;
      return true;
    });

    regularFiles.sort((a, b) => {
      const ta = new Date(a.metadata?.timeCreated || 0).getTime();
      const tb = new Date(b.metadata?.timeCreated || 0).getTime();
      return tb - ta;
    });

    const MAX_RENDER = 90;
    const limitedFiles = regularFiles.slice(0, MAX_RENDER);

    // COVER (event-aware, sa fallback-om) — otpornije na putanje/fajl-ekstenzije
    let coverUrl;

    try {
      // 1) EVENT cover: prvo probaj iz event.json (coverObject), pa onda standardne putanje
      if (eventId) {
        let coverFromJson = "";
        try {
          const eventJsonPath = `events/${eventId}/event.json`;
          const [exJson] = await bucket.file(eventJsonPath).exists();
          if (exJson) {
            const [buf] = await bucket.file(eventJsonPath).download();
            const obj = JSON.parse(buf.toString("utf8") || "{}");
            coverFromJson = String(obj?.coverObject || "").trim(); // landing upisuje ovo
          }
        } catch (_e) {
          coverFromJson = "";
        }

        const eventCoverCandidates = [
          coverFromJson, // može biti "events/<id>/cover.jpg" ili nešto drugo
          `events/${eventId}/cover.jpg`,
          `events/${eventId}/cover.jpeg`,
          `events/${eventId}/cover.png`,
          `events/${eventId}/naslovna.jpg`,
          `events/${eventId}/uploads/naslovna.jpg`,
        ].filter(Boolean);

        for (const p of eventCoverCandidates) {
          const [ex] = await bucket.file(p).exists();
          if (ex) {
            const [u] = await bucket.file(p).getSignedUrl({
              action: "read",
              expires: Date.now() + 60 * 60 * 1000,
            });
            coverUrl = u;
            break;
          }
        }
      }

      // 2) GLOBAL cover: u bucket-u ti je trenutno root "naslovna.jpg", ali nekad je bilo "uploads/naslovna.jpg"
      if (!coverUrl) {
        const globalCoverCandidates = [
          "naslovna.jpg",
          "uploads/naslovna.jpg",
          "default-event/naslovna.jpg",
        ];

        for (const p of globalCoverCandidates) {
          const [ex2] = await bucket.file(p).exists();
          if (ex2) {
            const [u2] = await bucket.file(p).getSignedUrl({
              action: "read",
              expires: Date.now() + 60 * 60 * 1000,
            });
            coverUrl = u2;
            break;
          }
        }
      }

      // 3) final fallback
      if (!coverUrl) {
        coverUrl = "https://images.unsplash.com/photo-1546733080-163471032822?w=1200";
      }
    } catch (e) {
      coverUrl = "https://images.unsplash.com/photo-1546733080-163471032822?w=1200";
    }
// EVENT.JSON (welcomeMessage)
    let welcomeMessage = "";
    if (eventId) {
      try {
        const eventJsonPath = `events/${eventId}/event.json`;
        const [ex] = await bucket.file(eventJsonPath).exists();
        if (ex) {
          const [buf] = await bucket.file(eventJsonPath).download();
          const obj = JSON.parse(buf.toString("utf8"));
          // podrži i stare ključeve ako postoje
          welcomeMessage = String(obj?.welcomeMessage || obj?.msg || "").trim();
        }
      } catch (e) {
        welcomeMessage = "";
      }
    }
    
    // Ostavljamo prazno da ne bi bilo dupliranja na ekranu (onaj mali crni boks)
    const welcomeMessageHtml = "";
    
    // Tvoja poruka postaje jedini i glavni naslov galerije
    const heroTitleHtml = `<h1 class="hero-title">${welcomeMessage || "DIGITALNA<br>GALERIJA"}</h1>`;
    
    const fileData = await Promise.all(
      limitedFiles.map(async (file) => {
        const name = file.name || "";
        const isVideo = /\.(mp4|webm|mov)$/i.test(name);
        const isImage = /\.(jpg|jpeg|png|gif|webp|heic|heif)$/i.test(name);
        if (!isVideo && !isImage) return null;

        const [url] = await file.getSignedUrl({
          action: "read",
          expires: Date.now() + 60 * 60 * 1000,
        });

        const md = file.metadata?.metadata || {};
        const caption = (md.caption || "").toString();
        const authorName = (md.authorName || "").toString();
        const authorMessage = (md.authorMessage || "").toString();
        const likes = parseInt(md.likes || "0", 10);
        const isHidden = md.isHidden === "1";

        if (isHidden && !adminMode) return null;

        return {
          name,
          url,
          isVideo,
          safeName: escapeJs(name),
          encodedName: encodeURIComponent(name),
          caption,
          authorName,
          authorMessage,
          likes: Number.isFinite(likes) ? likes : 0,
          isHidden,
        };
      })
    );

    const validFiles = fileData.filter(Boolean);

    const clientItems = validFiles.map((f) => ({
      url: f.url,
      isVideo: !!f.isVideo,
      name: f.name,
      safeName: f.safeName,
      encodedName: f.encodedName,
      caption: f.caption || "",
      authorName: f.authorName || "",
      authorMessage: f.authorMessage || "",
      likes: f.likes || 0,
      isLiked: false,
      isHidden: f.isHidden || false,
    }));

    let galleryHtml = "";
    validFiles.forEach((file, idx) => {
      galleryHtml +=
        '\n<div class="card">' +
        (adminMode
          ? '\n  <button class="admin-x" onclick="event.stopPropagation(); deleteFile(\'' +
            escapeJs(file.encodedName) +
            "')\">×</button>\n" +
            '  <button class="admin-check" onclick="event.stopPropagation(); toggleDeleteSelect(\'' +
            escapeJs(file.encodedName) +
            '\', this)"><span class="check-dot"></span></button>\n'
          : "") +
        '  <div class="media-container" data-index="' +
        idx +
        '">' +
        (file.isVideo
          ? '<video src="' +
            escHtmlBackend(file.url) +
            '" autoplay loop muted playsinline preload="metadata"></video>' +
            '<div class="video-badge"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg></div>'
          : '<img src="' +
            escHtmlBackend(file.url) +
            '" loading="lazy">') +
        (file.caption && file.caption.trim()
          ? '<div class="grid-message-icon">💬</div>'
          : "") +
        "</div></div>";
    });

    

//  TEK ONDA STATIC (Skloni ga ispod redirecta)
app.use(express.static(path.join(__dirname, "public")));


    const MAX_FILES = Number(process.env.MAX_FILES || 10);
    const MAX_DELETE = Number(process.env.MAX_DELETE || 10);
    const ADMIN_MODE = adminMode ? "true" : "false";

    res.set(
      "Cache-Control",
      "no-store, no-cache, must-revalidate, proxy-revalidate"
    );

    console.log("[COVER]", { eventId, coverUrl });

    // ... nastavlja se tvoj HTML res.send(...) deo






    res.send(`<!DOCTYPE html>
<html lang="sr">
<head>
<script>
      // Ovaj deo mora biti prvi
      window.adminMode = <?= $userIsAdmin ? 'true' : 'false' ?>;
    </script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
<title>DIGITALNA GALERIJA</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap" rel="stylesheet">
<style>

:root{
  --magenta:#E52787;
  --purple:#7B38D8;
  --text:#262626;
  --bg:#fff;
  --border:rgba(0,0,0,0.10);
  --peek:85px;
}
*{ box-sizing:border-box; }
body{ margin:0; font-family:'Montserrat',sans-serif; background:var(--bg); color:var(--text); overflow-x:hidden; }
body.modal-open{ overflow:hidden; }
.modal-overlay {
    display: none; /* Mora biti none dok se ne otvori */
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1000;
}

/* Tek kad je otvoren, postaje vidljiv */
.modal-overlay.active {
    display: block;
}
#gallerySection {
    position: relative;
    z-index: 10; /* Podigni grid iznad pozadinskih slojeva */
}
.hero{ position: relative; height: calc(100vh - var(--peek)); min-height: 480px; overflow: hidden; display: flex; justify-content: center; align-items: center; text-align: center; border-bottom: 2px solid #fff; }
.hero-bg{
  position:absolute;
  inset:0;
  background-image: url(${JSON.stringify(coverUrl || "")});

  background-size: cover;
  background-position: 50% 50%;
  transform: scale(1.05);
  z-index:1;
}

.hero-overlay{ position:absolute; inset:0; background:rgba(0,0,0,0.55); z-index:2; }
.hero-inner{
  position:relative;
  z-index:3;
  padding:20px;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px; 
}
.hero-welcome{
  max-width: 720px;
  margin: 0 auto 20px auto;
  padding: 14px 20px;

  font-size: clamp(24px, 4vw, 36px);
  font-weight: 600;
  line-height: 1.35;

  color: #fff;
  text-align: center;

  background: rgba(0,0,0,0.45);
  border-radius: 14px;
}

.hero-brand{ position:absolute; top:20px; left:20px; z-index:3; color:rgba(255,255,255,0.95); font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; text-shadow:0 1px 3px rgba(0,0,0,0.4), 0 0 8px rgba(0,0,0,0.2); padding:6px 12px; background:rgba(0,0,0,0.25); border-radius:20px; backdrop-filter:blur(4px); transform:translateX(-8px) translateY(-3px); }
.hero-count{ position:absolute; bottom:18px; left:20px; z-index:3; color:rgba(255,255,255,0.95); font-size:11px; font-weight:400; letter-spacing:.8px; text-transform:uppercase; text-shadow:0 1px 3px rgba(0,0,0,0.4), 0 0 8px rgba(0,0,0,0.2); padding:6px 12px; background:rgba(0,0,0,0.25); border-radius:20px; backdrop-filter:blur(4px); transform:translateX(-8px); }
.hero-count strong{ font-weight:900; font-size:13px; }
.hero-title{ color:#fff; font-size:44px; font-weight:900; letter-spacing:1px; line-height:1.05; margin:0 0 24px; text-transform:uppercase; }

.btn-kululu{ display:inline-flex; align-items:center; gap:10px; background:var(--magenta); color:#fff; padding:16px 18px 16px 14px; border-radius:14px; border:none; font-size:15px; font-weight:900; cursor:pointer; box-shadow:0 14px 30px rgba(229,39,135,.22); }
.btn-plus{ width:32px; height:32px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; color:var(--magenta); font-weight:900; font-size:20px; }

.grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: #fff;
  position: relative;
  z-index: 5;
}

@media (min-width: 1024px){
  .grid{ grid-template-columns: repeat(6, 1fr); }
}

.card{ background:#fff; position:relative; overflow:hidden; width:100%; }
.media-container{ position:relative; aspect-ratio:1/1; background:#eee; overflow:hidden; cursor:pointer; }
.media-container img, .media-container video{ width:100%; height:100%; object-fit:cover; object-position:50% 0%; display:block; }
.video-badge{ position:absolute; right:8px; bottom:8px; width:28px; height:28px; border-radius:999px; background:rgba(0,0,0,0.55); display:flex; align-items:center; justify-content:center; z-index:2; pointer-events:none; }
.video-badge svg{ width:14px; height:14px; fill:#fff; margin-left:2px; }
.grid-message-icon{ position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:50%; background:rgba(0,0,0,0.55); display:flex; align-items:center; justify-content:center; font-size:14px; z-index:5; pointer-events:none; }

.admin-x{ position:absolute; top:6px; right:6px; background:#fff; border:none; width:22px; height:22px; border-radius:50%; color:red; z-index:10; cursor:pointer; display:flex; align-items:center; justify-content:center; font-weight:900; }
.admin-check{ position:absolute; top:6px; left:6px; width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,0.95); border:1px solid rgba(0,0,0,0.12); z-index:10; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.admin-check .check-dot{ width:12px; height:12px; border-radius:50%; background:transparent; box-shadow: inset 0 0 0 2px rgba(229,39,135,0.55); }
.admin-check.selected .check-dot{ background:var(--magenta); box-shadow:none; }

.admin-bar{ position:fixed; left:0; right:0; bottom:0; z-index:11000; display:none; padding:10px 12px; background:rgba(255,255,255,0.92); border-top:1px solid rgba(0,0,0,0.08); backdrop-filter: blur(8px); }
.admin-bar-inner{ max-width:680px; margin:0 auto; display:flex; gap:10px; align-items:center; justify-content:space-between; }
.admin-pill{ font-weight:900; font-size:13px; color:#111; }
.admin-btn{ border:0; background:var(--magenta); color:#fff; padding:12px 14px; border-radius:14px; font-weight:900; cursor:pointer; box-shadow:0 12px 24px rgba(229,39,135,.16); min-width:180px; }
.admin-btn:disabled{ opacity:.55; cursor:not-allowed; }
.admin-clear{ border:1px solid rgba(0,0,0,0.14); background:#fff; color:#111; padding:12px 14px; border-radius:14px; font-weight:900; cursor:pointer; min-width:120px; }

.modal-overlay{ display:none; position:fixed; inset:0; background:#fff; z-index:10001; overflow:auto; }
.modal-content{ width:100%; min-height:100vh; display:flex; flex-direction:column; background:#fff; }
.upload-header{ position:sticky; top:0; background:#fff; border-bottom:1px solid rgba(0,0,0,0.06); z-index:100; }
.upload-header-inner{ display:grid; grid-template-columns:120px 1fr 120px; align-items:center; height:56px; padding:0 14px; }
.back-btn{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none; font-weight:900; letter-spacing:.2px; text-transform:uppercase; color:#111; }
.back-ico{ width:34px; height:34px; border-radius:12px; background:#fff; border:2px solid rgba(229,39,135,0.55); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 22px rgba(229,39,135,0.10); }
.back-ico svg{ width:18px; height:18px; stroke:#111; stroke-width:2.6; fill:none; }
.header-center{ justify-self:center; font-weight:900; color:#111; font-size:15px; }
.upload-center{ flex:1; display:flex; align-items:center; justify-content:center; padding:22px 14px 40px; }
.upload-panel{ width:min(520px, 92vw); display:flex; flex-direction:column; align-items:center; gap:14px; }
.upload-toolbar{ width:100%; display:none; align-items:center; justify-content:space-between; gap:10px; }
.toolbar-btn-plus{ width:48px; height:48px; border-radius:50%; border:0; background:#fff; color:var(--magenta); cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(229,39,135,.18); }
.toolbar-clear{ border:0; background:transparent; cursor:pointer; font-weight:800; color:#111; font-size:14px; }

.field-wrap{ width:100%; display:flex; flex-direction:column; gap:10px; }
.input{ width:100%; border:1px solid var(--border); border-radius:14px; padding:14px; font-family:inherit; font-size:14px; outline:none; background:#fff; }
.text-area{ width:100%; border:1px solid var(--border); border-radius:14px; padding:14px; font-family:inherit; font-size:14px; outline:none; background:#fff; min-height:92px; resize:none; }

.upload-box{ width:100%; height:260px; border:2px dashed rgba(229,39,135,0.55); border-radius:22px; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; gap:10px; padding:18px; text-align:center; }
.cam-badge{ width:58px; height:58px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(229,39,135,0.18); color:var(--magenta); }
.cam-badge svg{ width:28px; height:28px; }
.upload-box .t1{ margin:0; color:var(--magenta); font-weight:900; }
.upload-box .t2{ margin:0; color:#666; font-weight:600; font-size:12px; }

.preview-wrap{ width:100%; display:none; flex-direction:column; gap:12px; align-items:center; }
.preview-grid{ width:100%; display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.preview-item{ background:#fff; border-radius:16px; overflow:hidden; position:relative; box-shadow:0 6px 16px rgba(0,0,0,0.06); }
.preview-media{ aspect-ratio:1/1; background:#eee; }
.preview-media img, .preview-media video{ width:100%; height:100%; object-fit:cover; display:block; }
.preview-remove{ position:absolute; top:8px; right:8px; width:30px; height:30px; border-radius:10px; border:0; background:rgba(0,0,0,0.45); color:#fff; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; }

.progress-row{ width:100%; display:flex; align-items:center; gap:12px; }
.progress-track{ flex:1; height:6px; background:rgba(0,0,0,0.08); border-radius:999px; overflow:hidden; }
.progress-fill{ height:100%; background:var(--magenta); width:0%; transition:width .25s; }
.progress-pct{ font-weight:900; font-size:13px; min-width:44px; text-align:right; color:#111; }

.btn-send{ width:100%; background:var(--magenta); color:#fff; border:0; padding:16px; border-radius:14px; font-weight:900; cursor:pointer; box-shadow:0 12px 24px rgba(229,39,135,.18); }
.btn-send:disabled{ opacity:.55; cursor:not-allowed; }

.success-backdrop{ position:fixed; inset:0; background:#fff; display:none; align-items:center; justify-content:center; z-index:10002; padding:18px; }
.success-card{ width:min(520px, 92vw); text-align:center; }
.success-icon{ width:58px; height:58px; border-radius:999px; border:3px solid var(--magenta); color:var(--magenta); font-size:30px; font-weight:900; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; box-shadow:0 12px 30px rgba(229,39,135,.12); }
.success-title{ margin:0 0 6px; font-weight:900; font-size:30px; color:#111; }
.success-text{ margin:0 0 18px; color:#666; font-size:14px; font-weight:600; }
.success-btns{ display:flex; flex-direction:column; gap:12px; width:100%; }
.success-btns button{ width:100%; padding:16px; border-radius:14px; font-weight:900; cursor:pointer; border:0; font-size:15px; }
.btn-solid{ background:var(--magenta); color:#fff; }
.btn-outline{ background:#fff; color:#111; border:1px solid rgba(0,0,0,0.14); }
/* =======================
   LIGHTBOX
======================= */

.lb-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.92);
  z-index:9999;
  pointer-events:auto;
}

.lb-bg{
  position:fixed;
  inset:0;
  z-index:9998;
  pointer-events:none;
}

.lb-list{
  position:relative;
  z-index:10001;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:row;
  transform:translate3d(0,0,0);
  transition:transform .28s ease;
  pointer-events:auto;
}

.lb-item{
  position:relative;
  min-width:100vw;
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  pointer-events:auto;
}
/* LIGHTBOX OSNOVA */


.lb-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.92);
  z-index:9999;
  pointer-events:auto;
}

.lb-bg{
  position:fixed;
  inset:0;
  z-index:9998;
  pointer-events:none;
}

.lb-list{
  position:relative;
  z-index:10001;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:row;
  transform:translate3d(0,0,0);
  transition:transform .28s ease;
  pointer-events:auto;
}

.lb-item{
  position:relative;
  min-width:100vw;
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  pointer-events:auto;
}


/* STRELICE - DODAJ OVO */
.lb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 60px;
  color: white;
  z-index: 10005; 
  cursor: pointer;
  padding: 20px;
  user-select: none;
}

.lb-arrow.left { left: 10px; }
.lb-arrow.right { right: 10px; }

.lb-close {
  position: absolute;
  top: 20px;
  right: 25px;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
  z-index: 10006;
}
/* =======================
   CLOSE / ADMIN / ARROWS
======================= */

.lb-close{
  position:fixed;
  top:15px;
  right:15px;
  z-index:10005;
  pointer-events:auto;
}

.lb-admin-menu,
.lb-admin-dropdown,
.lb-arrow{
  pointer-events:auto;
}

/* =======================
   MEDIA
======================= */

.lb-media-wrap{
  width:100%;
  flex:1;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  pointer-events:auto;
}

.lb-media-wrap img,
.lb-media-wrap video{
  max-width:92vw;
  max-height:88vh;
  object-fit:contain;
  display:block;
}

/* =======================
   CAPTION OVERLAY
======================= */

.lb-caption-overlay{
  position:absolute;
  left:50%;
  bottom:64px;
  transform:translateX(-50%);
  max-width:min(80vw,540px);
  padding:10px 18px;
  border-radius:20px;
  background:rgba(0,0,0,0.75);
  color:#fff;
  font-size:15px;
  text-align:center;
  z-index:10008;
  pointer-events:none;
}

/* =======================
   ACTIONS (LIKE + DOWNLOAD)
======================= */

#lbList .lb-actions{
  position:absolute;
  left:40px;
  right:14px;
  bottom:34px;
  display:flex;
  align-items:center;
  z-index:10050;
  pointer-events:auto;
}

#lbList .lb-action-group{
  display:flex;
  align-items:center;
  gap:8px;
}

#lbList .lb-btn-heart,
#lbList .lb-btn-dl{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  color:#fff;
  line-height:0;
}

#lbList .lb-btn-heart svg,
#lbList .lb-btn-dl svg{
  width:26px;
  height:26px;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

#lbList .lb-btn-heart.liked{
  color:#E52787;
}
#lbList .lb-btn-heart.liked svg{
  fill:currentColor;
}

#lbList .lb-likes-txt{
  color:#fff;
  font-size:14px;
  font-weight:700;
}

#lbList .lb-btn-dl{
  margin-left:20px;
}

/* =======================
   INFO ISPOD SLIKE
======================= */
.lb-info{
  width:100%;
  padding:12px 14px;
  background:#fff;
  text-align:center;
  pointer-events:auto;
}


.lb-arrow{
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  z-index:10006;
  width:52px;
  height:52px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:42px;
  font-weight:900;
  color:#fff;
  background:rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.18);
  cursor:pointer;
  user-select:none;
}

.lb-arrow.left{ left:14px; }
.lb-arrow.right{ right:14px; }

.lb-arrow.hidden{ display:none; }


/* QR container */
.qr-container {
  position: fixed;       /* fiksirano u viewport-u */
  top: 16px;             /* razmak od vrha */
  right: 16px;           /* razmak od desnog ruba */
  background: linear-gradient(135deg, #c76cf5, #ff00ff); /* ljubičasto-magenta gradient */
  padding: 8px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 9999;         /* iznad svega */
}

/* Canvas unutar QR container-a */
.qr-container canvas {
  display: block;
  background-color: white; /* bela pozadina QR koda */
  border-radius: 8px;
}

    .payment-card {
        background: #fff;
        border-radius: 20px;
        padding: 40px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        text-align: center;
        max-width: 500px;
        margin: 20px auto;
        border: 2px solid #e91e63; /* Tvoja prepoznatljiva roze boja */
    }
    .qr-container {
        background: #f9f9f9;
        padding: 20px;
        border-radius: 15px;
        display: inline-block;
        margin: 20px 0;
    }
    .payment-info {
        text-align: left;
        background: #fff0f5;
        padding: 15px;
        border-radius: 10px;
        margin-top: 20px;
    }
    .payment-info p { margin: 5px 0; font-size: 14px; }
    .btn-done {
        background: #e91e63;
        color: white;
        padding: 12px 25px;
        border-radius: 50px;
        text-decoration: none;
        display: inline-block;
        margin-top: 20px;
        font-weight: bold;
    }
    .hero {
  position: relative; /* referenca za absolute pozicioniranje */
}

/* sprečava da flex centriranje utiče na brojač */
.hero-inner {
  position: static;
}

.hero-counter {
  position: absolute;
  bottom: 15px;
  left: 20px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  font-family: 'Inter', sans-serif;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  z-index: 20;
}

/* Briše liniju iznad ikonica */
.upload-toolbar, 
#toolbar,
.success-icon {
    border-top: none !important;
    border-bottom: none !important;
}
.lb-admin-dropdown {
    display: none;
    position: absolute;
    top: 50px;
    right: 20px;
    background: white;
    border: 2px solid magenta;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    z-index: 10001;
    overflow: hidden;
    min-width: 180px;
    box-sizing: border-box;
}

.lb-admin-dropdown button {
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: none;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
    box-sizing: border-box;
}

.lb-admin-hide {
    color: #444;
    border-bottom: 1px solid #eee;
}

.lb-admin-delete {
    color: #ff4444;
}

.lb-admin-dropdown button:hover {
    background: rgba(255,0,255,0.05);
}

.lb-admin-menu {
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 20px;
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 70px;
    transition: background 0.3s;
}

.lb-admin-menu:hover {
    background: magenta;
}

/* Briše liniju iznad ikonica */
.upload-toolbar, 
#toolbar,
.success-icon {
    border-top: none !important;
    border-bottom: none !important;
}
/* Prisili prikazivanje kada je klasa active prisutna */
#mO.active, #lb.active { 
    display: flex !important; 
}
@media (min-width: 1025px) {
  .media-container img, .media-container video {
    width: 60% !important;
    margin: 0 auto !important;
  }
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>

<section class="hero">
  <div class="hero-bg"></div>
  <div class="hero-overlay"></div>
  <div class="hero-brand">DIGITAL CREATIVE WORLD</div>

  <div class="hero-inner">
    ${welcomeMessageHtml}
    ${heroTitleHtml}

    <button id="ctaAdd" class="btn-kululu" type="button">
      <span class="btn-plus">+</span>
      <span data-i18n="add_more">DODAJ U ALBUM</span>
    </button>

    <div class="hero-counter" id="fileCountDisplay">
      <span id="fileCountNum">0</span>
      <span data-i18n="counter_text">slika i videa</span>
    </div>
  </div>
</section>

<div id="gallerySection" class="grid">
  ${galleryHtml}
</div>

${
  adminMode
    ? `<div id="adminBar" class="admin-bar">
        <div class="admin-bar-inner">
          <div class="admin-pill">Selektovano: <span id="selCount">0</span>/${MAX_DELETE}</div>
          <div style="display:flex; gap:10px;">
            <button class="admin-clear" onclick="clearDeleteSelection()">PONIŠTI</button>
            <button id="delBtn" class="admin-btn" onclick="deleteSelected()" disabled>OBRIŠI (0/${MAX_DELETE})</button>
          </div>
        </div>
      </div>`
    : ""
}

<div id="mO" class="modal-overlay">
  <div class="modal-content">
    <div class="upload-header">
      <div class="upload-header-inner">
        <div class="back-btn" onclick="closeModal()">
          <span class="back-ico">
            <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"></path></svg>
          </span>
        </div>
        <div class="header-center" data-i18n="Galerija">Galerija</div>
        <div class="header-right"></div>
      </div>
    </div>

    <div class="upload-center">
      <div class="upload-panel">

        <div class="field-wrap">
          <input id="authorName" class="input" placeholder="Ime (opciono)">
        </div>

        <div id="toolbar" class="upload-toolbar">
          <button type="button" class="toolbar-btn-plus" onclick="document.getElementById('fI').click()">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.3">
              <line x1="12" y1="5" x2="12" y2="19"></line>
              <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
          </button>
          <button type="button" class="toolbar-clear" onclick="clearAllSelected()">Obriši</button>
        </div>

        <label for="fI" id="uploadBox" class="upload-box">
          <div class="cam-badge">
            <svg viewBox="0 0 256 256" fill="currentColor">
              <path d="M208,80H172.8a8,8,0,0,1-6.4-3.2l-20.8-27.7a16.1,16.1,0,0,0-12.8-6.4H116.8a16.1,16.1,0,0,0-12.8,6.4L83.2,76.8A8,8,0,0,1,76.8,80H48A24.1,24.1,0,0,0,24,104V192a24.1,24.1,0,0,0,24,24H208a24.1,24.1,0,0,0,24-24V104A24.1,24.1,0,0,0,208,80Zm-80,96a44,44,0,1,1,44-44A44,44,0,0,1,128,176Z"></path>
            </svg>
          </div>
          <p class="t1">DODAJ SLIKE I VIDEO</p>
          <p class="t2">Možeš do <span id="maxFilesLabel"></span> fajlova</p>
        </label>

        <div id="previewWrap" class="preview-wrap">
          <div id="previewGrid" class="preview-grid"></div>
          <div class="progress-row">
            <div class="progress-track"><div id="progressFill" class="progress-fill"></div></div>
            <div id="progressPct" class="progress-pct">0%</div>
          </div>
          <button id="sB" class="btn-send" onclick="uploadData()" disabled>POŠALJI (0/0)</button>
        </div>

        <input type="file" id="fI" multiple hidden accept="image/*,video/*">
      </div>
    </div>
  </div>
</div>

<script>
(function () {
  const container = document.querySelector('.upload-header-inner');
  if (!container) return;
  const header = container.querySelector('.header-center');

  function updateHeader(value) {
    const title = value && value !== 'new_post'
      ? value.charAt(0).toUpperCase() + value.slice(1)
      : 'Galerija';
    if (header) {
      header.textContent = title;
      header.style.color = '#9b4eff';
      header.style.fontWeight = '800';
    }
  }

  const params = new URLSearchParams(location.search);
  updateHeader(params.get('eventType') || params.get('type') || params.get('category'));
})();
</script>

<div id="successModal" class="success-backdrop">
  <div class="success-card">
    <div class="success-icon">✓</div>
    <h2 class="success-title" data-i18n="success_t">Hvala!</h2>
    <p class="success-text" data-i18n="success_msg">Uspomene će se uskoro pojaviti u albumu.</p>
    <div class="success-btns">
      <button class="btn-solid" onclick="successAddMore()" data-i18n="add_more">DODAJ JOŠ</button>
      <button class="btn-outline" onclick="successBack()" data-i18n="back_album">NAZAD U ALBUM</button>
    </div>
  </div>
</div>

<div id="lb" class="lb-overlay">
  <div class="lb-bg" id="lbBg"></div>
  <span class="lb-close" onclick="event.stopPropagation(); closeLb();">×</span>
  <div class="lb-arrow left" onclick="event.stopPropagation(); prevLb(event);">‹</div>
  <div class="lb-arrow right" onclick="event.stopPropagation(); nextLb(event);">›</div>
  <div id="adminControlsContainer"></div>
  <div id="lbList" class="lb-list"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script>

<script>
// EVENT_ID uzmi iz URL-a (podržava ?eventId=... i ?event=...)
var EVENT_ID = (function(){
  try{
    var p = new URLSearchParams(window.location.search || '');
    return (p.get('eventId') || p.get('event') || '').trim();
  }catch(e){
    return '';
  }
})();


  
function generateQr(){
  if(!window.EVENT_ID) return; // proverava da li postoji ID događaja
  const heroInner = document.querySelector('.hero-inner');
  if(!heroInner) return;

  let qrDiv = document.getElementById('qrContainer');
  if(!qrDiv){
    qrDiv = document.createElement('div');
    qrDiv.id = 'qrContainer';
    qrDiv.className = 'qr-container';
    const welcomeMsg = heroInner.querySelector('.welcome-message');
    if(welcomeMsg) welcomeMsg.insertAdjacentElement('afterend', qrDiv);
    else heroInner.appendChild(qrDiv);
  }

  const canvas = document.createElement('canvas');
  qrDiv.appendChild(canvas);

  if(typeof QRCode !== 'undefined'){
    QRCode.toCanvas(canvas, window.location.href, { width: 128 }, function(err){
      if(err) console.error('QR generation error:', err);
      else console.log('[DEBUG] QR generated');
    });
  } else console.warn('QRCode library not loaded');
}

// Pokreće se na učitavanju stranice
window.addEventListener('load', function(){
  generateQr();
});


var qs = EVENT_ID ? ('?eventId=' + encodeURIComponent(EVENT_ID)) : '';
var selectedFiles = [];
var delSelection = [];

  const items = ${JSON.stringify(clientItems)};
  const MAX_FILES = ${MAX_FILES};
  const ADMIN_MODE = '${ADMIN_MODE}';
  const MAX_DELETE = ${MAX_DELETE};

  // Debug: proveri inicijalno stanje
  console.log('[DEBUG] Page loaded, items:', items?.length || 0);
  console.log('[DEBUG] body modal-open:', document.body.classList.contains('modal-open'));

var maxLbl = document.getElementById('maxFilesLabel');
if(maxLbl) maxLbl.textContent = MAX_FILES;

var cta = document.getElementById("ctaAdd");
if(cta) cta.addEventListener("click", function(){ openUploadModal(); });

  window.addEventListener("load", function(){
    window.scrollTo(0,0);
    if(document.body.classList.contains('modal-open')){
      console.warn('[DEBUG] body has modal-open on load, removing it');
      document.body.classList.remove('modal-open');
    }
  });

  // Event delegation za openLightbox
  var gallerySection = document.getElementById('gallerySection');
  if(gallerySection){
    gallerySection.addEventListener('click', function(e){
      var container = e.target.closest('.media-container');
      if(container){
        var idx = parseInt(container.getAttribute('data-index'), 10);
        if(!isNaN(idx) && typeof openLightbox === 'function'){
          openLightbox(idx);
        }
      }
    });
  }

  function escapeHtml(str){
    var q = String.fromCharCode(38,113,117,111,116,59);
    var a = String.fromCharCode(38,35,57,57,59);
    return (str || "").toString().replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,q).replace(/'/g,a);
  }

  function openUploadModal(){
    document.getElementById('mO').style.display = 'block';
    document.body.classList.add('modal-open');
    renderSelected();
  }
  function closeModal(){
    document.getElementById('mO').style.display = 'none';
    document.body.classList.remove('modal-open');
    resetUploadUi();
  }
  function resetUploadUi(){
    selectedFiles.forEach(function(it){ try{ if(it && it.url) URL.revokeObjectURL(it.url); }catch(e){} });
    selectedFiles = [];
    document.getElementById('successModal').style.display = 'none';
    document.getElementById('previewWrap').style.display = 'none';
    document.getElementById('toolbar').style.display = 'none';
    document.getElementById('uploadBox').style.display = 'flex';
    document.getElementById('previewGrid').innerHTML = '';
    if(document.getElementById('progressFill')) document.getElementById('progressFill').style.width = '0%';
    if(document.getElementById('progressPct')) document.getElementById('progressPct').textContent = '0%';
    var btn = document.getElementById('sB');
    btn.disabled = true;
    btn.textContent = 'POŠALJI (0/' + MAX_FILES + ')';
  }
  function clearAllSelected(){ resetUploadUi(); }

  document.getElementById('fI').onchange = function(e){
    var files = Array.from(e.target.files || []);
    if (!files.length) return;
    var remaining = MAX_FILES - selectedFiles.length;
    if (remaining <= 0){ alert('Maksimalno ' + MAX_FILES + ' fajlova.'); e.target.value = ""; return; }
    var toAdd = files.slice(0, remaining);
    toAdd.forEach(function(f){
      selectedFiles.push({ file: f, url: URL.createObjectURL(f), isVideo: (f.type || "").startsWith('video'), caption: "" });
    });
    renderSelected();
    e.target.value = "";
  };

  function removeFile(idx){
    var it = selectedFiles[idx];
    try{ if(it && it.url) URL.revokeObjectURL(it.url); }catch(e){}
    selectedFiles.splice(idx, 1);
    renderSelected();
  }
  function onCaptionInput(idx, val){ if(selectedFiles[idx]) selectedFiles[idx].caption = val || ""; }

  function renderSelected(){
    var has = selectedFiles.length > 0;
    document.getElementById('previewWrap').style.display = has ? 'flex' : 'none';
    document.getElementById('uploadBox').style.display = has ? 'none' : 'flex';
    document.getElementById('toolbar').style.display = has ? 'flex' : 'none';
    var btn = document.getElementById('sB');
    btn.disabled = !has;
    btn.textContent = "POŠALJI (" + selectedFiles.length + "/" + MAX_FILES + ")";
    var grid = document.getElementById('previewGrid');
    var html = '';
    for (var i=0; i<selectedFiles.length; i++){
      var it = selectedFiles[i];
      html += '<div class="preview-item"><div class="preview-media">';
      html += it.isVideo ? '<video src="' + it.url + '" muted playsinline></video>' : '<img src="' + it.url + '">';
      html += '</div><textarea class="text-area" style="min-height:52px; margin:10px; font-size:12px;" placeholder="Caption preko slike (opciono)" data-caption-index="' + i + '" oninput="onCaptionInput(' + i + ', this.value)">' + escapeHtml(it.caption || "") + '</textarea>';
      html += '<button type="button" class="preview-remove" onclick="removeFile(' + i + ')">×</button></div>';
    }
    grid.innerHTML = html;
  }

  function uploadFileXHR(url, file){
    return new Promise(function(resolve, reject){
      var xhr = new XMLHttpRequest();
      xhr.open('PUT', url, true);
      xhr.setRequestHeader('Content-Type', file.type || 'application/octet-stream');
      xhr.onload = function(){
        if(xhr.status >= 200 && xhr.status < 300){
          resolve(xhr);
        } else {
          reject(new Error('Upload failed: ' + xhr.status + ' ' + xhr.statusText));
        }
      };
      xhr.onerror = function(){ reject(new Error('Network error during upload')); };
      xhr.ontimeout = function(){ reject(new Error('Upload timeout')); };
      xhr.timeout = 300000;
      xhr.send(file);
    });
  }
  async function uploadData(){
    var btn = document.getElementById('sB');
    var pf = document.getElementById('progressFill');
    var pp = document.getElementById('progressPct');
    var authorName = (document.getElementById('authorName') ? document.getElementById('authorName').value : '').trim();
    var authorMessage = ''; // Globalna poruka uklonjena
    if(!selectedFiles.length) return;
    btn.disabled = true; btn.textContent = 'SLANJE...';
    var uploadedNames = [];
    function setPct(pct){ var v = Math.max(0, Math.min(100, Math.round(pct))); if(pf) pf.style.width = v + '%'; if(pp) pp.textContent = v + '%'; }
    setPct(0);
    try{
      var signRes = await fetch('/sign' + window.location.search, {
        method:'POST',
        headers:{ 'Content-Type':'application/json' },
        cache:'no-store',
        body: JSON.stringify({
          files: selectedFiles.map(function(it){ return { name: it.file.name, type: it.file.type, size: it.file.size }; }),
          eventId: EVENT_ID
        })
      });
      if(!signRes.ok) throw new Error(await signRes.text());
      var signJson = await signRes.json();
      var uploads = signJson.uploads || [];
      for (var i=0; i<uploads.length; i++){
        var objName = uploads[i].objName;
        var url = uploads[i].url;
        var f = selectedFiles[i].file;
        await uploadFileXHR(url, f);
        uploadedNames.push(objName);
        setPct(((i+1)/uploads.length) * 90);
      }
      var finRes = await fetch('/finalize' + window.location.search, {
        method:'POST',
        headers:{ 'Content-Type':'application/json' },
        cache:'no-store',
        body: JSON.stringify({
          objects: uploadedNames.map(function(name, i){ return { name: name, caption: selectedFiles[i].caption || "" }; }),
          authorName: authorName,
          authorMessage: authorMessage,
          eventId: EVENT_ID
        })
      });
      if(!finRes.ok) throw new Error(await finRes.text());
      setPct(100);
      document.getElementById('successModal').style.display = 'flex';
    } catch(err){
      try{ if(uploadedNames.length){ await fetch('/abort' + window.location.search, { method:'POST', headers:{ 'Content-Type':'application/json' }, body: JSON.stringify({ objects: uploadedNames }) }); } }catch(e){}
      alert('Greška: ' + (err && err.message ? err.message : err));
      btn.disabled = false; btn.textContent = "POŠALJI (" + selectedFiles.length + "/" + MAX_FILES + ")";
      setPct(0);
    }
  }

  function successAddMore(){ document.getElementById('successModal').style.display = 'none'; resetUploadUi(); document.getElementById('fI').click(); }
  function successBack(){ document.getElementById('successModal').style.display = 'none'; closeModal(); location.reload(); }

  /* LIGHTBOX */
  var lbIndex = 0;
  var likedItems = {};
  function loadLikedState(){
    try{
      var stored = localStorage.getItem('likedItems');
      if(stored) likedItems = JSON.parse(stored);
    }catch(e){}
  }
  loadLikedState();
  function saveLikedState(){
    try{
      localStorage.setItem('likedItems', JSON.stringify(likedItems));
    }catch(e){}
  }

  function openLightbox(idx){
    console.log('[DEBUG] openLightbox called with idx:', idx);

    if(typeof items === 'undefined' || !Array.isArray(items) || !items.length){
      console.error('[DEBUG] items missing/empty');
      return;
    }

    lbIndex = idx;

    var lb = document.getElementById('lb');
    var list = document.getElementById('lbList');
    if(!lb || !list){
      console.error('[DEBUG] lb or lbList not found', {lb: lb, list: list});
      return;
    }

    // Render
    var html = '';
    items.forEach(function(it, i){
      var itemKey = it.name || it.url;
      var isLiked = likedItems[itemKey] || false;
      var hasCaption = it.caption && it.caption.trim();

      html += '<div class="lb-item" data-item-index="' + i + '">';
        html += '<div class="lb-media-wrap">';
          html += it.isVideo
            ? '<video src="' + escapeHtml(it.url) + '" controls></video>'
            : '<img src="' + escapeHtml(it.url) + '">';

          if(hasCaption){
            html += '<div class="lb-caption-overlay">' + escapeHtml(it.caption) + '</div>';
          }
          if(it.authorName && it.authorName.trim()){
       html += '<div class="lb-caption-overlay" style="bottom:46px; font-size:13px; opacity:.85;">' +

          escapeHtml(it.authorName) +
          '</div>';
}


          html += '<div class="lb-actions">';
            html += '<div class="lb-action-group">';
              html += '<button type="button" class="lb-btn-heart' + (isLiked ? ' liked' : '') + '" data-item-key="' + escapeHtml(itemKey) + '" data-item-name="' + escapeHtml(it.name) + '">';
                html += '<svg viewBox="0 0 24 24"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>';
              html += '</button>';
              html += '<span class="lb-likes-txt" data-likes-key="' + escapeHtml(itemKey) + '">' + (it.likes || 0) + '</span>';
            html += '</div>';

            html += '<button type="button" class="lb-btn-dl">';
              html += '<svg viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>';
            html += '</button>';
          html += '</div>';

        html += '</div>';

        html += '<div class="lb-info" id="lb-info-' + i + '" onclick="event.stopPropagation();">';
          if(it.authorName && it.authorName.trim()){
            html += '<div class="lb-author-name">' + escapeHtml(it.authorName) + '</div>';
          }
        html += '</div>';

      html += '</div>';
    });

    list.innerHTML = html;

    if(!list._lbBound){
      list._lbBound = true;

      list.addEventListener('click', function(e){
        var dlBtn = e.target.closest('.lb-btn-dl');
        if(dlBtn){
          e.stopPropagation();

          var itemEl = dlBtn.closest('.lb-item');
          if(!itemEl) return;
          var i = parseInt(itemEl.getAttribute('data-item-index') || '0', 10);
          if(!items[i] || !items[i].url) return;

          var url = items[i].url;
          var name = items[i].name || ('media-' + i);

          var a = document.createElement('a');
          a.href = url;
          a.download = name;
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
          return;
        }

        var heartBtn = e.target.closest('.lb-btn-heart');
        if(heartBtn){
          e.stopPropagation();

          var itemKey = heartBtn.getAttribute('data-item-key');
          var itemName = heartBtn.getAttribute('data-item-name');

          var wasLiked = likedItems[itemKey] || false;
          var newLiked = !wasLiked;
          likedItems[itemKey] = newLiked;
          saveLikedState();

          heartBtn.classList.toggle('liked', newLiked);

          var actionGroup = heartBtn.closest('.lb-action-group');
          var likesEl = actionGroup && actionGroup.querySelector('.lb-likes-txt');
          if(likesEl){
            var currentLikes = parseInt(likesEl.textContent || '0', 10);
            var delta = newLiked ? 1 : -1;
            var newLikes = Math.max(0, currentLikes + delta);
            likesEl.textContent = newLikes;

            if(itemName){
              fetch('/like', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
               body: JSON.stringify({ name: itemName, delta: delta })
              }).then(function(res){
                if(res.ok) return res.json();
              }).then(function(data){
                if(data && typeof data.likes === 'number'){
                  likesEl.textContent = data.likes;
                }
              }).catch(function(){});
            }
          }
          return;
        }
      });
    }

    lb.style.display = 'block';
    document.body.classList.add('modal-open');
    history.pushState({lb:true}, '', '#lb');
    updateLb(false);
  }

  var adminMenu = document.querySelector('.lb-admin-menu');
  if(adminMenu){
    adminMenu.style.display = ADMIN_MODE ? 'flex' : 'none';
  }

  function updateLb(animate){
    var list = document.getElementById('lbList');
    if(!list){
      console.error('[DEBUG] lbList not found in updateLb');
      return;
    }
    list.style.transition = animate ? 'transform .28s ease' : 'none';
    list.style.transform = 'translate3d(' + (-lbIndex * 100) + 'vw,0,0)';
    var leftArrow = document.querySelector('.lb-arrow.left');
    var rightArrow = document.querySelector('.lb-arrow.right');
    if(leftArrow) leftArrow.classList.toggle('hidden', lbIndex <= 0);
    if(rightArrow && typeof items !== 'undefined' && Array.isArray(items)){
      rightArrow.classList.toggle('hidden', lbIndex >= items.length - 1);
    }
  }
  function nextLb(ev){
    console.log('[DEBUG] nextLb called');
    if(ev) ev.stopPropagation();
    if(typeof items === 'undefined' || !Array.isArray(items)){
      console.error('[DEBUG] items not defined in nextLb');
      return;
    }
    if(lbIndex < items.length - 1){
      lbIndex++;
      updateLb(true);
    }
  }
  function prevLb(ev){
    if (ev && ev.stopPropagation) ev.stopPropagation();
    if (!Array.isArray(items)) return;
    if (lbIndex > 0) {
      lbIndex--;
      updateLb(true);
    }
  }

  function closeLb(){
    document.getElementById('lb').style.display = 'none';
    document.body.classList.remove('modal-open');
    var dropdown = document.getElementById("lbAdminDropdown");
    var menuBtn = document.querySelector(".lb-admin-menu");
    if(dropdown) dropdown.classList.remove("show");
    if(menuBtn) menuBtn.classList.remove("active");
    if(window.location.hash === '#lb'){
      history.back();
    }
  }

  var lbEl = document.getElementById('lb');
  if(lbEl){
    lbEl.addEventListener('click', function(e){
      console.log('[DEBUG] lb overlay clicked, target:', e.target);
      if(e.target.closest('.lb-close, .lb-arrow, .lb-btn-heart, .lb-btn-dl, .lb-info, .lb-admin-menu, .lb-admin-dropdown')){
        return;
      }
      if(e.target.tagName === 'IMG' || e.target.tagName === 'VIDEO'){
        return;
      }
      console.log('[DEBUG] closing lightbox from overlay click');
      closeLb();
    });
  } else {
    console.error('[DEBUG] lb element not found for click handler');
  }

  document.addEventListener('keydown', function(e){
    if(e.key === 'Escape' || e.keyCode === 27){
      var lb = document.getElementById('lb');
      if(lb && lb.style.display === 'block'){
        closeLb();
      }
    }
  });

  window.addEventListener('popstate', function(e){
    var lb = document.getElementById('lb');
    if(lb && lb.style.display === 'block'){
      lb.style.display = 'none';
      document.body.classList.remove('modal-open');
    }
  });

  function toggleAdminMenu(btn){
    var dropdown = document.getElementById('lbAdminDropdown');
    if(!dropdown) return;
    var isActive = btn.classList.contains('active');
    if(isActive){
      dropdown.classList.remove('show');
      btn.classList.remove('active');
    } else {
      dropdown.classList.add('show');
      btn.classList.add('active');
      var currentItem = items[lbIndex];
      if(currentItem){
        var hideBtn = dropdown.querySelector('.lb-admin-hide');
        if(hideBtn && currentItem.isHidden){
          hideBtn.textContent = 'Vrati u album';
        } else if(hideBtn){
          hideBtn.textContent = 'Sakrij iz albuma';
        }
      }
    }
  }

  function adminHideItem(){
    if(!ADMIN_MODE) return;
    var currentItem = items[lbIndex];
    if(!currentItem) return;
    var dropdown = document.getElementById('lbAdminDropdown');
    var hideBtn = dropdown.querySelector('.lb-admin-hide');
    var action = currentItem.isHidden ? 'unhide' : 'hide';

    fetch('/admin/hide' + window.location.search, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name: currentItem.name, action: action })
    }).then(function(res){
      if(res.ok){
        currentItem.isHidden = !currentItem.isHidden;
        if(hideBtn){
          hideBtn.textContent = currentItem.isHidden ? 'Vrati u album' : 'Sakrij iz albuma';
        }
        dropdown.classList.remove('show');
        document.querySelector('.lb-admin-menu').classList.remove('active');
        location.reload();
      } else {
        alert('Greška: ' + (res.statusText || 'Neuspešno'));
      }
    }).catch(function(err){
      alert('Greška: ' + (err.message || err));
    });
  }

  function adminDeleteItem(){
    if(!ADMIN_MODE) return;
    var currentItem = items[lbIndex];
    if(!currentItem) return;

    fetch('/admin/delete' + window.location.search, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name: currentItem.name })
    }).then(function(res){
      if(res.ok){
        closeLb();
        location.reload();
      } else {
        alert('Greška: ' + (res.statusText || 'Neuspešno'));
      }
    }).catch(function(err){
      alert('Greška: ' + (err.message || err));
    });
  }

  document.addEventListener('click', function(e){
    if(!e.target.closest('.lb-admin-menu') && !e.target.closest('.lb-admin-dropdown')){
      var dropdown = document.getElementById('lbAdminDropdown');
      var menuBtn = document.querySelector('.lb-admin-menu');
      if(dropdown) dropdown.classList.remove('show');
      if(menuBtn) menuBtn.classList.remove('active');
    }
  });

  function toggleDeleteSelect(enc, el){
    if(delSelection.includes(enc)){ delSelection = delSelection.filter(function(x){ return x !== enc; }); el.classList.remove('selected'); }
    else { if(delSelection.length >= MAX_DELETE) return; delSelection.push(enc); el.classList.add('selected'); }
    updateAdminBar();
  }
  function updateAdminBar(){
    var bar = document.getElementById('adminBar');
    if(!bar) return;
    var count = delSelection.length;
    bar.style.display = count > 0 ? 'block' : 'none';
    document.getElementById('selCount').textContent = count;
    var btn = document.getElementById('delBtn');
    btn.disabled = (count === 0);
    btn.textContent = 'OBRIŠI (' + count + '/' + MAX_DELETE + ')';
  }
  function clearDeleteSelection(){ delSelection = []; document.querySelectorAll('.admin-check').forEach(function(el){ el.classList.remove('selected'); }); updateAdminBar(); }
  async function deleteSelected(){
    if(!delSelection.length || !confirm('Obriši selektovano?')) return;
    try{
      var res = await fetch('/delete' + window.location.search, { method:'POST', headers:{ 'Content-Type':'application/json' }, body: JSON.stringify({ objects: delSelection }) });
      if(res.ok) location.reload(); else alert('Greška pri brisanju');
    }catch(e){ alert(e); }
  }
  async function deleteFile(enc){ if(confirm('Obriši?')){ delSelection = [enc]; deleteSelected(); } }
  (function setupSwipe(){
    var lb = document.getElementById('lb');
    var startX = 0, dx = 0, tracking = false;
    if(!lb) return;

    lb.addEventListener('touchstart', function(e){
      if (lb.style.display !== 'block' || e.touches.length !== 1) return;
      startX = e.touches[0].clientX; tracking = true;
    });

    lb.addEventListener('touchmove', function(e){
      if(!tracking) return;
      dx = e.touches[0].clientX - startX;
    });

    lb.addEventListener('touchend', function(){
      if(!tracking) return;
      tracking = false;
      if(dx < -60) nextLb();
      else if(dx > 60) prevLb();
      dx = 0;
    });
    (function () {

    function injectPremiumButtons() {
        const uploadBox = document.getElementById('uploadBox');
        const mainFI = document.getElementById('fI');

        if (!uploadBox || !mainFI || document.getElementById('galleryActions')) return;

        // hidden inputs (kamera + galerija)
        if (!document.getElementById('photoInput')) {

            const camInput = document.createElement('input');
            camInput.type = 'file';
            camInput.accept = 'image/*';
            camInput.capture = 'environment';
            camInput.id = 'photoInput';
            camInput.style.display = 'none';

            const galInput = document.createElement('input');
            galInput.type = 'file';
            galInput.accept = 'image/*';
            galInput.id = 'photoInputNoCap';
            galInput.style.display = 'none';

            const syncFiles = (e) => {
                if (mainFI && e.target.files.length) {
                    mainFI.files = e.target.files;
                    mainFI.dispatchEvent(new Event('change', { bubbles: true }));
                }
            };

            camInput.onchange = syncFiles;
            galInput.onchange = syncFiles;

            document.body.append(camInput, galInput);
        }

        // container
        const container = document.createElement('div');
        container.id = 'galleryActions';
        container.style.display = 'flex';
        container.style.justifyContent = 'space-around';
        container.style.padding = '40px 10px 20px';
        container.style.width = '100%';
        container.style.marginTop = '20px';

        const circleSize = 58;
        const iconSize = 32;
        const color = '#7B38D8';

        const makeBtn = (id, label, svg) => {
            const btn = document.createElement('button');
            btn.type = 'button';
            btn.id = id;
            btn.style.display = 'flex';
            btn.style.flexDirection = 'column';
            btn.style.alignItems = 'center';
            btn.style.background = 'none';
            btn.style.border = 'none';
            btn.style.cursor = 'pointer';
            btn.style.width = '30%';

            const circle = document.createElement('div');
            circle.style.width = circleSize + 'px';
            circle.style.height = circleSize + 'px';
            circle.style.background = color;
            circle.style.borderRadius = '50%';
            circle.style.display = 'flex';
            circle.style.alignItems = 'center';
            circle.style.justifyContent = 'center';
            circle.style.boxShadow = '0 6px 15px rgba(123,56,216,0.3)';
            circle.innerHTML = svg;

            const text = document.createElement('span');
            text.textContent = label;
            text.style.color = '#666';
            text.style.fontSize = '10px';
            text.style.fontWeight = '700';
            text.style.marginTop = '12px';
            text.style.letterSpacing = '0.5px';

            btn.append(circle, text);
            return btn;
        };
const cameraSVG =
    '<svg width="' + iconSize + '" height="' + iconSize + '" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">' +
    '<path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/>' +
    '<circle cx="12" cy="13" r="4"/>' +
    '</svg>';

const gallerySVG =
    '<svg width="' + iconSize + '" height="' + iconSize + '" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">' +
    '<rect x="3" y="3" width="18" height="18" rx="2"/>' +
    '<circle cx="8.5" cy="8.5" r="1.5"/>' +
    '<polyline points="21 15 16 10 5 21"/>' +
    '</svg>';

const shareSVG =
    '<svg width="' + iconSize + '" height="' + iconSize + '" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">' +
    '<circle cx="18" cy="5" r="3"/>' +
    '<circle cx="6" cy="12" r="3"/>' +
    '<circle cx="18" cy="19" r="3"/>' +
    '<line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/>' +
    '<line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>' +
    '</svg>';

        const camBtn = makeBtn('camBtn', 'KAMERA', cameraSVG);
        const galBtn = makeBtn('galBtn', 'GALERIJA', gallerySVG);
        const shareBtn = makeBtn('pSha', 'PODELI', shareSVG);

        container.append(camBtn, galBtn, shareBtn);
        uploadBox.insertAdjacentElement('afterend', container);

        camBtn.onclick = () => document.getElementById('photoInput').click();
        galBtn.onclick = () => document.getElementById('photoInputNoCap').click();

        shareBtn.onclick = async () => {
            if (navigator.share) {
                await navigator.share({
                    title: 'Digitalna Galerija',
                    url: location.href
                });
            } else {
                await navigator.clipboard.writeText(location.href);
                alert('Link kopiran!');
            }
        };
    }

    const modal = document.getElementById('mO');

    if (modal) {
        const observer = new MutationObserver(() => {
            if (modal.style.display === 'block') injectPremiumButtons();
        });

        observer.observe(modal, {
            attributes: true,
            attributeFilter: ['style']
        });
    }
// --- GLAVNA FUNKCIJA ZA SLANJE PODATAKA ---
async function adminAction(type) {
    const currentImg = document.querySelector('#lb img');
    if (!currentImg) return;

    const itemId = currentImg.getAttribute('data-id') || currentImg.src;
    
 if (!confirm('Potvrdi akciju: ' + type + '?')) {
    return;
}

    try {
        const response = await fetch('admin_handler.php', { // ili tvoj Node endpoint
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ action: type, id: itemId })
        });

        const result = await response.json();
        if (result.success) {
            alert('Izvršeno!');
            location.reload();
        } else {
            alert('Greška: ' + result.message);
        }
    } catch (err) {
        console.error('Greška pri komunikaciji sa serverom:', err);
    }
}
// --- JEDINA ISPRAVNA LOGIKA ZA ADMIN AKCIJE ---
async function adminAction(selectedAction) {
    // Koristimo lbIndex i items niz koji već imaš u kodu, to je najsigurnije
    const activeItem = items[lbIndex]; 
    if (!activeItem) return;

    const token = localStorage.getItem("adminToken") || localStorage.getItem("token"); 
    if (!confirm("Potvrdi akciju: " + selectedAction.toUpperCase() + "?")) return;

    // Određivanje tačnog endpointa na osnovu tvojih ruta u index.js
    let endpoint = (selectedAction === 'delete') ? '/admin/delete' : '/admin/hide';
    
    // Dodajemo eventId parametre koje tvoj backend zahteva (getScopePrefix)
    endpoint += window.location.search; 

    try {
        const response = await fetch(endpoint, {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Authorization": "Bearer " + token
            },
            body: JSON.stringify({ 
                name: activeItem.name, // Šaljemo punu putanju fajla koju backend očekuje
                action: selectedAction 
            })
        });

        if (response.ok) {
            alert('Uspešno izvršeno!');
            location.reload();
        } else {
            const errData = await response.json().catch(() => ({}));
            alert('Greška: ' + (errData.error || 'Nemate dozvolu ili je sesija istekla.'));
        }
    } catch (err) {
        console.error("Admin Action Error:", err);
        alert("Sistem trenutno nije dostupan.");
    }
}

    // --- KONTROLE ZA ADMIN PANEL ---
    function addAdminControls() {
        if (!window.adminMode) return;

        const lb = document.getElementById('lb');
        if (!lb || lb.querySelector('.lb-admin-menu')) return;

        var adminBtn = document.createElement('button');
        adminBtn.className = 'lb-admin-menu';
        adminBtn.innerHTML = '&#8943;';
        adminBtn.style.cssText =
            "position:absolute; top:25px; right:25px;" +
            "z-index:99999; width:46px; height:46px;" +
            "display:flex; align-items:center; justify-content:center;" +
            "background:rgba(0,0,0,0.6); backdrop-filter:blur(10px);" +
            "-webkit-backdrop-filter:blur(10px); color:white;" +
            "border:none; border-radius:50%; cursor:pointer;" +
            "font-size:26px; box-shadow:0 4px 15px rgba(0,0,0,0.4);";

        var dropdown = document.createElement('div');
        dropdown.style.cssText =
            "position:absolute; top:80px; right:25px; z-index:99999;" +
            "background:#fff; border-radius:12px; padding:8px;" +
            "display:none; min-width:240px; box-shadow:0 10px 30px rgba(0,0,0,0.3);";

        function createBtn(text, color, actionType) {
            var b = document.createElement('button');
            b.textContent = text;
            b.style.cssText =
                "display:block; width:100%; padding:14px 18px;" +
                "border:none; background:none; text-align:left;" +
                "cursor:pointer; color:" + color + ";" +
                "font-size:15px; font-weight:600; border-radius:8px;";

            b.onmouseover = function () { b.style.background = '#f2f2f2'; };
            b.onmouseout = function () { b.style.background = 'none'; };
            b.onclick = function (e) {
                e.stopPropagation();
                adminAction(actionType);
                dropdown.style.display = 'none';
            };
            return b;
        }

        dropdown.append(
            createBtn('Stavi na čekanje', '#e67e22', 'pending'),
            createBtn('Sakrij iz albuma', '#34495e', 'hide'),
            createBtn('Obriši zauvek', '#e74c3c', 'delete'),
            createBtn('Odobri objavu', '#27ae60', 'approve')
        );

        adminBtn.onclick = function (e) {
            e.stopPropagation();
            dropdown.style.display =
                dropdown.style.display === 'none' ? 'block' : 'none';
        };

        document.addEventListener('click', function () {
            dropdown.style.display = 'none';
        });

        lb.append(adminBtn, dropdown);
    }

    // Inicijalno pokretanje admin kontrola
    if (typeof addAdminControls === 'function') {
        addAdminControls();
    }

    // Export funkcije za globalni pristup
    window.addAdminControls = addAdminControls;
    
})();
})();
</script>
</body>
</html>`);
  } catch (err) {
    console.error("Error in GET /:", err);
    res.status(500).send("Greška: " + (err.message || err));
  }
});


// 1. SIGN RUTA
app.post("/sign", async (req, res) => {
  try {
    const files = req.body.files || [];

    // ✅ OVDE ide validacija
    if (!Array.isArray(files) || !files.length) 
      return res.status(400).send("No files to sign");

    const eventId = String(req.query.eventId || req.query.event || req.body?.eventId || "").trim();
    const prefix = eventId ? `events/${eventId}/uploads/` : "uploads/";
    const timestamp = Date.now();

    const uploads = await Promise.all(files.map(async (f) => {
      const objName = `${prefix}${timestamp}-${f.name}`;
      const [url] = await bucket.file(objName).getSignedUrl({
        version: "v4",
        action: "write",
        expires: Date.now() + 15 * 60 * 1000,
        contentType: f.type || "application/octet-stream"
      });
      return { objName, url };
    }));

    res.json({ uploads });
  } catch (err) {
    console.error("Error in POST /sign:", err);
    res.status(500).send(err.message);
  }
});

// 2. FINALIZE RUTA
app.post("/finalize", uploadMiddleware, async (req, res) => {
  try {
    const eventId = String(req.query.eventId || req.query.event || req.body?.eventId || "").trim();
    const prefix = eventId ? `events/${eventId}/uploads/` : "uploads/";
    const { objects, authorName, authorMessage } = req.body;
    if (!Array.isArray(objects) || !objects.length) return res.status(400).send("Invalid request");
    await Promise.all(objects.map(async (obj) => {
      const name = String(obj?.name || "");
      if (!name || !name.startsWith(prefix)) throw new Error("Invalid file scope");
      await bucket.file(name).setMetadata({
        metadata: {
          caption: obj.caption || "",
          authorName: authorName || "",
          authorMessage: authorMessage || "",
          likes: "0",
        },
      });
    }));
    res.sendStatus(200);
  } catch (err) {
    console.error("Error in POST /finalize:", err);
    res.status(500).send(err.message);
  }
});


// 3. ABORT RUTA
app.post("/abort", uploadMiddleware, async (req, res) => {
  try {
    const eventId = String(req.query.eventId || req.query.event || req.body?.eventId || "").trim();
    const prefix = eventId ? `events/${eventId}/uploads/` : "uploads/";
    const { objects } = req.body;
    if (!Array.isArray(objects) || !objects.length) return res.status(400).send("Invalid request");
    await Promise.all(objects.map((name) => {
      name = String(name || "");
      if (!name || !name.startsWith(prefix)) return Promise.resolve();
      return bucket.file(name).delete().catch(() => {});
    }));
    res.sendStatus(200);
  } catch (err) {
    console.error("Error in POST /abort:", err);
    res.status(500).send(err.message);
  }
});
app.post("/delete", async (req, res) => {
  if (!isAdmin(req)) return res.status(403).send("Admin only");
  try {
    const prefix = getScopePrefix(req);
    const { objects } = req.body;
    if (!Array.isArray(objects) || !objects.length) return res.status(400).send("Invalid request");

    await Promise.all(objects.map(enc => {
      const name = decodeURIComponent(String(enc || ""));
      if (!inScope(name, prefix)) return Promise.resolve();
      return bucket.file(name).delete().catch(() => {});
    }));

    res.sendStatus(200);
  } catch (err) {
    console.error("Error in POST /delete:", err);
    res.status(500).send(err.message);
  }
});

app.post("/like", async (req, res) => {
  try {
    const prefix = getScopePrefix(req);

    const { name, delta } = req.body;
    if (!name || typeof delta !== "number") return res.status(400).send("Invalid request");
    if (!inScope(name, prefix)) return res.status(403).send("Invalid file scope");

    const file = bucket.file(name);
    const [exists] = await file.exists();
    if (!exists) return res.status(404).send("File not found");

    const [meta] = await file.getMetadata();
    const md = meta.metadata || {};

    const currentLikes = parseInt(md.likes || "0", 10);
    const newLikes = Math.max(0, currentLikes + delta);

    await file.setMetadata({ metadata: { ...md, likes: String(newLikes) } });
    res.json({ likes: newLikes });
  } catch (err) {
    console.error("Error in POST /like:", err);
    res.status(500).send("Like failed");
  }
});

app.post("/admin/hide", async (req, res) => {
  if (!isAdmin(req)) return res.status(403).send("Admin only");
  try {
    const prefix = getScopePrefix(req);

    const { name, action } = req.body;
    if (!name || !action) return res.status(400).send("Invalid request");
    if (!inScope(name, prefix)) return res.status(403).send("Invalid file scope");

    const file = bucket.file(name);
    const [exists] = await file.exists();
    if (!exists) return res.status(404).send("File not found");

    const [meta] = await file.getMetadata();
    const md = meta.metadata || {};

    if (action === "hide") {
      await file.setMetadata({ metadata: { ...md, isHidden: "1" } });
    } else if (action === "unhide") {
      const { isHidden, ...rest } = md;
      await file.setMetadata({ metadata: rest });
    } else {
      return res.status(400).send("Invalid action");
    }

    res.sendStatus(200);
  } catch (err) {
    console.error("Error in POST /admin/hide:", err);
    res.status(500).send(err.message);
  }
});

app.post("/admin/delete", async (req, res) => {
  if (!isAdmin(req)) return res.status(403).send("Admin only");
  try {
    const prefix = getScopePrefix(req);

    const { name } = req.body;
    if (!name) return res.status(400).send("Invalid request");
    if (!inScope(name, prefix)) return res.status(403).send("Invalid file scope");

    await bucket.file(name).delete().catch(() => {});
    res.sendStatus(200);
  } catch (err) {
    console.error("Error in POST /admin/delete:", err);
    res.status(500).send(err.message);
  }
});


// =========================
// LANDING (bez duplog express/app/PORT/listen)
// =========================
app.get("/favicon.ico", (req, res) => res.status(204).end());
async function signedReadUrl(filePath, fallback = "") {
  try {
    if (!bucket) throw new Error("bucket is not initialized");
    console.log("SIGNED READ:", bucket.name, JSON.stringify(filePath));
    const [url] = await bucket.file(filePath).getSignedUrl({
      version: "v4",
      action: "read",
      expires: Date.now() + 60 * 60 * 1000,
      responseType: "image/jpeg",
      responseDisposition: "inline",
    });
    return url;
  } catch (e) {
    console.log("SIGNED READ ERR:", e?.message || e);
    return fallback;
  }
}

async function signedWriteUrl(filePath, contentType = "image/jpeg") {
  try {
    if (!bucket) throw new Error("bucket is not initialized");
    console.log("SIGNED WRITE:", bucket.name, JSON.stringify(filePath), contentType);
    const [url] = await bucket.file(filePath).getSignedUrl({
      version: "v4",
      action: "write",
      expires: Date.now() + 15 * 60 * 1000,
      contentType,
    });
    return url;
  } catch (e) {
    console.log("SIGNED WRITE ERR:", e?.message || e);
    return "";
  }

}

function randId(len = 12) {
  const abc = "abcdefghjkmnpqrstuvwxyz23456789";
  let out = "";
  for (let i = 0; i < len; i++) out += abc[Math.floor(Math.random() * abc.length)];
  return out;
}


function escHtml(s) {
  return String(s ?? "")
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#39;");
}

function landingPage({ pageTitle, active, bodyHtml }) {
  const title = escHtml(pageTitle || "Digital Creative World");
  const act = active || "home";

  return `<!doctype html>
<html lang="sr">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>${title}</title>

  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800;900&display=swap&subset=latin,latin-ext" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap&subset=latin,latin-ext" rel="stylesheet">
<style>
:root{
  --magenta:#E52787;
  --purple:#7B38D8;
  --text:#1f2328;
  --muted:#667085;
  --bg:#ffffff;
  --soft:#F5F6F8;
  --border:rgba(16,24,40,0.10);
  --shadow: 0 12px 30px rgba(16,24,40,0.10);
  --radius: 18px;
  --wrap: 1120px;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* Montserrat za naslove + brand + dugmad */
.brand,
.sectionTitle,
.heroH1,
.hero-title,
.cardTitle,
.btn{
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 18px; }
/* HIJERARHIJA + RITAM */
.section{ padding:72px 0; }
.section--soft{ background: #ffffff; } /* Promenjeno u belo */
.sectionTitle{
  font-size:38px;
  font-weight:800;
  line-height:1.12;
  margin:0 0 14px;
  letter-spacing:-0.02em;
}
.sectionLead{
  margin:0 0 28px;
  color:var(--muted);
  line-height:1.6;
  font-size:16px;
  max-width:760px;
}
.section-image {
  width: 100%;
  text-align: center;
  margin: 40px 0; /* razmak između sekcija */
}

.section-image img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  border-radius: 8px; /* po želji, za lepši izgled */
}

/* HERO */
.hero{ padding:72px 0 46px; }

.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--purple);
  font-weight:700;
  font-size:13px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  margin:0 0 12px;
}

.heroH1,
.hero-title{
  font-size:56px;
  font-weight:900;
  line-height:1.06;
  margin:0 0 14px;
  letter-spacing:-0.012em;
  color:var(--text);
  max-width:640px;
}
.heroH1 .h1Sub{ font-weight:800; opacity:0.92; }

.heroLead,
.hero-lead{
  margin:0 0 16px;
  color:#475467;
  line-height:1.6;
  font-size:17px;
  max-width:520px;
}

.heroCtas{
  margin-top:14px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
}
.heroMicro{
  margin-top:10px;
  color:#667085;
  font-size:14px;
  line-height:1.55;
}

.heroGrid{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap:44px;
  align-items:stretch;
  min-height:auto;
}
.heroGrid > *{ min-width:0; }
.heroH1, .hero-title {
  max-width: 100%;
  overflow-wrap: normal;
}
.heroMedia{
  border-radius:24px;
  overflow:hidden;
  border:1px solid var(--border);
  background:#fff;
  height:100%;
  box-shadow:none;
}
.heroMedia img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top;
}

/* TOPBAR / BRAND */
.topbar{
  border-bottom:1px solid var(--border);
  background:#fff;
  position:sticky;
  top:0;
  z-index:10;
}
.topbarInner{
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.brand{
  font-weight:900;
  letter-spacing:-0.02em;
  font-size:18px;
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
  text-align:left;
}
.brandDot{ display:none; }

.nav{
  display:flex;
  align-items:center;
  gap:22px;
  color:var(--muted);
  font-weight:500;
  font-size:13px;
}
.nav a{ letter-spacing:0.01em; padding:8px 10px; border-radius:12px; }
.nav a.active{ color:var(--text); background:rgba(123,56,216,0.08); }

.topbarActions{
  display:flex;
  align-items:center;
  gap:12px;
}
.navLink{
  color:var(--muted);
  font-weight:600;
  font-size:14px;
  padding:8px 10px;
  border-radius:12px;
}
.navLink:hover{
  background:rgba(123,56,216,0.08);
  color:var(--text);
}

/* DUGMAD */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:13px 18px;
  border-radius:14px;
  font-weight:800;
  font-size:15px;
  line-height:1.1;
  letter-spacing:0.03em;
  border:1px solid transparent;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
}
.btnUpper{ text-transform: uppercase; letter-spacing: 0.06em; }
.btnPrimary{
  background:var(--magenta);
  color:#fff;
  border-color:transparent;
  box-shadow:0 8px 18px rgba(229,39,135,0.18);
}
.btnGhost{
  background:#fff;
  border:1px solid var(--border);
  color:var(--text);
  font-weight:700;
  letter-spacing:0.025em;
}

/* HOW / STEPS */
.stepsRow{
  margin:24px auto 0;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:0;
  max-width:980px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
}
.stepCard{ background:transparent; border:0; border-radius:0; padding:18px 20px; }
.stepCard + .stepCard{ border-left:1px solid var(--border); }
.stepTop{ display:flex; align-items:center; gap:10px; }
.stepNum{
  width:34px; height:34px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; color:var(--purple);
  background:rgba(123,56,216,0.10);
  flex:0 0 auto;
}
.stepTitle{ font-weight:900; letter-spacing:-0.01em; }
.stepText{ margin-top:10px; color:var(--muted); line-height:1.6; }
.stepsCta{ margin-top:18px; }

/* centriranje HOW */
#kako .wrap{ max-width:960px; margin-left:auto; margin-right:auto; }
#kako .sectionTitle, #kako .sectionLead{ text-align:center; }
#kako .stepsCta{ display:flex; justify-content:center; }

/* PRICING */
.pricingGrid{
  margin-top:26px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
  align-items:stretch;
}
.priceCard{
  position:relative;
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px 18px 16px;
}
.priceHead{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.priceName{ font-weight:900; font-size:22px; letter-spacing:-0.01em; }
.priceTag{ color:var(--muted); font-size:13px; font-weight:600; white-space:nowrap; }
.priceRow{ display:flex; align-items:baseline; gap:10px; margin-top:12px; }
.priceValue{ font-weight:900; font-size:44px; letter-spacing:-0.02em; }
.priceUnit{ color:var(--muted); font-weight:700; font-size:13px; letter-spacing:0.06em; }
.priceList{ margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
.priceItem{ padding:10px 0; border-bottom:1px solid rgba(16,24,40,0.06); color:var(--text); line-height:1.45; }
.priceItem:last-child{ border-bottom:0; }
.priceCta{ margin-top:16px; }
.priceBadge{
  position:absolute; top:-12px; left:50%;
  transform:translateX(-50%);
  background:rgba(123,56,216,0.12);
  color:var(--purple);
  border:1px solid rgba(123,56,216,0.20);
  padding:6px 12px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  letter-spacing:0.06em;
}
.priceCard--featured{
  border-color:rgba(229,39,135,0.28);
  box-shadow:0 12px 28px rgba(229,39,135,0.10);
}
.priceMicro{ margin-top:10px; color:var(--muted); font-size:13px; line-height:1.35; }
.pricingNote{ margin-top:14px; text-align:center; color:var(--muted); font-size:13px; line-height:1.4; }

/* wide media */
.wideMedia{
  margin-top:18px;
  border-radius:22px;
  overflow:hidden;
  border:1px solid var(--border);
  background:#fff;
}


/* PREMIUM GRID */
.premium{ background:var(--soft); }
.premium .sectionTitle, .premium .sectionLead{
  text-align:center;
  margin-left:auto; margin-right:auto;
  max-width:720px;
}
.premiumGrid{
  margin-top:32px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:22px;
}
.premiumItem{
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:22px 22px;
}
.premiumItem h3{
  margin:0 0 8px;
  font-weight:900;
  font-size:16px;
  letter-spacing:-0.01em;
}
.premiumItem p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
  font-size:15px;
}

/* USECASE LIST */
.usecaseList{
  max-width:760px;
  margin:24px auto 0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.usecaseItem{
  display:flex;
  gap:14px;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:16px;
  background:#fff;
}
.usecaseIcon{ font-size:20px; line-height:1; margin-top:2px; }
.usecaseItem h3{ margin:0 0 4px; font-weight:900; font-size:15px; }
.usecaseItem p{ margin:0; color:var(--muted); line-height:1.5; font-size:14px; }

/* REGISTRACIJA – form styling */
.form{ width:100%; }
.form label{
  display:block;
  margin:12px 0 6px;
  font-weight:600;
  color:var(--text);
}
.form input[type="text"],
.form input[type="date"],
.form input[type="email"],
.form input[type="tel"],
.form select,
.form textarea{
  width:100%;
  display:block;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  color:var(--text);
  font: 500 15px/1.2 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  outline:none;
}
.form textarea{
  min-height:120px;
  resize:vertical;
  line-height:1.5;
}
.form input:focus,
.form select:focus,
.form textarea:focus{
  border-color:rgba(123,56,216,0.45);
  box-shadow:0 0 0 4px rgba(123,56,216,0.12);
}
.form .formActions{
  margin-top:18px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}
.form button{ border:0; cursor:pointer; }

/* FOOTER */
.siteFooter{
  background:#fff;
  border-top:1px solid #eee;
  padding:64px 0 24px;
  margin-top:80px;
}
.footerGrid{
  display:grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap:40px;
}
.footerCol h4{ font-size:14px; margin-bottom:12px; font-weight:700; }
.footerCol a{
  display:block;
  color:#667085;
  text-decoration:none;
  margin:6px 0;
  font-size:14px;
}
.footerCol a:hover{ color:var(--magenta); }
.footerBrand .footerLogo{ font-weight:900; font-size:20px; margin-bottom:8px; }
.footerTagline{ color:#667085; font-size:14px; }
.footerBottom{ text-align:center; margin-top:40px; font-size:13px; color:#98a2b3; }

/* PRICING TRUST */
.pricingTrust{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  max-width:720px;
  margin:0 auto 32px;
  padding:12px 18px;
  border-radius:14px;
  background:rgba(229,39,135,0.06);
  color:#7b1b4d;
  font-size:14px;
  font-weight:500;
}
.pricingTrust .trustIcon{
  width:22px;
  height:22px;
  border-radius:50%;
  background:linear-gradient(135deg,#E52787,#7B38D8);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:700;
  flex-shrink:0;
}
.pricingTrust p{ margin:0; line-height:1.4; }

/* CONTACT (landing) */
.contactNew{
  padding:72px 0;
  background: var(--soft);
}
.contactGridNew{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap:22px;
  align-items:stretch;
}
.contactPitch{
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:22px;
}
.contactBadge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(123,56,216,0.20);
  background: rgba(123,56,216,0.10);
  color: var(--purple);
  font-weight:900;
  font-size:12px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.contactPitch h2{
  margin:0 0 10px;
  font-weight:900;
  font-size:28px;
  letter-spacing:-0.02em;
  line-height:1.15;
}
.contactPitch p{ margin:0 0 14px; color: var(--muted); line-height:1.6; }
.contactMini{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:10px;
  color:#475467;
  font-size:14px;
}
.contactMini strong{ font-weight:900; color:var(--text); }

.contactCardNew{
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.contactCardTitle{ font-weight:900; font-size:16px; letter-spacing:-0.01em; }
.cBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:14px;
  padding:13px 18px;
  font-weight:900;
  font-size:14px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
}
.btnPrimaryBig{
  background: var(--magenta);
  color:#fff;
  border-color:transparent;
  box-shadow:0 8px 18px rgba(229,39,135,0.18);
}
.btnOutlineBig{
  background:#fff;
  color:var(--text);
  border:1px solid var(--border);
  font-weight:800;
  letter-spacing:0.04em;
}
.contactNote{ color:#667085; font-size:13px; line-height:1.45; }


/* FAQ (landing) */
#zasto { scroll-margin-top: 90px; }

.faqList{
  max-width:900px;
  margin:28px auto 0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.faqItem{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px 16px;
}
.faqQ{
  position:relative;
  padding:2px 46px 2px 0;
  font-weight:700;
  font-size:16px;
  line-height:1.35;
  text-align:left;
  background:none;
  border:0;
  cursor:pointer;
  width:100%;
}
.faqQ::after{
  content:"+";
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  border:1px solid var(--border);
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-weight:700;
  line-height:1;
}
.faqItem.active .faqQ::after{ content:"–"; }
.faqA{
  display:none;
  color:var(--muted);
  font-weight:400;
  line-height:1.6;
  padding:10px 0 0 0;
  font-size:14px;
}
.faqItem.active .faqA{ display:block; }

/* RESPONSIVE BREAKPOINTS */

/* Tablet & Mobile Landscape */
@media (max-width: 991px) {
  :root { --wrap: 100%; }

  /* HERO */
  .heroGrid, .contactGridNew {
    grid-template-columns: 1fr; 
    gap: 32px;
  }

  .heroH1, .hero-title {
    font-size: 42px;
    line-height: 1.08;
  }

  /* Steps / Pricing / Premium */
  .stepsRow, .pricingGrid, .premiumGrid {
    grid-template-columns: 1fr;
    gap: 16px;
    border: none;
    background: transparent;
  }

  .stepCard, .priceCard, .premiumItem {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
  }

  /* Footer */
  .footerGrid {
    grid-template-columns: 1fr 1fr;
    text-align: left;
  }
}

/* Mobile Portrait */
@media (max-width: 479px) {
  .section {
    padding: 48px 0;
  }

  /* Topbar */
  .topbarInner {
    height: 64px;
  }
  .nav { display: none; }

  /* HERO */
  .heroH1, .hero-title { 
    font-size: 34px; 
    line-height: 1.1;
  }
  .heroCtas { 
    flex-direction: column; 
    width: 100%;
    align-items: stretch; /* dugmad iste širine */
    gap: 12px; /* razmak između dugmadi */
  }
  .btn, .btnPrimary, .btnGhost { width: 100%; }
  .heroMedia { height: 280px; }

  /* Steps / Pricing / Premium */
  .stepsRow, .pricingGrid, .premiumGrid {
    grid-template-columns: 1fr;
    gap: 16px; /* povećan razmak između kartica */
  }

  /* Footer */
  .footerGrid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footerBrand { margin-bottom: 24px; }

  /* Text adjustments */
  .sectionTitle { font-size: 28px; }
  .pricingTrust {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }

  /* Hero & Contact spacing tweaks */
  .heroGrid, .contactGridNew {
    gap: 16px;
  }

  /* --- Mobilni padding i spacing --- */
  .wrap {
    padding-left: 16px;
    padding-right: 16px;
  }

  .section {
    padding-left: 16px;
    padding-right: 16px;
  }
}
/* --- DESKTOP (768px+) --- */
@media (min-width: 769px) {
  /* Sakrij mobilne elemente */
  .navToggle, #mainNav, #navOverlay {
    display: none !important;
  }

  /* Desktop navigacija i akcije ostaju */
  .nav, .topbarActions {
    display: flex !important;
  }
}

/* --- MOBILNI (do 768px) --- */
@media (max-width: 768px) {
  /* Sakrij desktop linkove i akcije */
  .nav, .topbarActions {
    display: none !important;
  }

  /* Sendvič dugme */
  .navToggle {
    display: inline-flex !important;
    z-index: 10001;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    padding: 5px;
    background: transparent;
    border: none;
  }

  /* Glavni mobilni meni */
  #mainNav {
    display: flex !important;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 80vw;       /* Smanjeno da ne ide do ivica */
    max-width: 300px;  /* Fiksna gornja granica širine */
    background: #fff;
    z-index: 10000;
    transform: translateX(110%);
    transition: transform 0.3s ease-in-out;
    flex-direction: column;
    padding: 80px 20px; /* Padding da sadržaj ne ide do ivica */
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    gap: 16px;
  }

  /* Prikaz kada je otvoren */
  body.nav-open #mainNav {
    transform: translateX(0);
  }

  /* Overlay */
  #navOverlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
  }
  body.nav-open #navOverlay {
    display: block;
  }

  /* Stil linkova unutar mobilnog menija */
  #mainNav a {
    padding: 12px 0;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #eee;
  }
}
/* --- MOBILE FIXES (do 480px) --- */
@media (max-width: 480px) {

  /* 1. Hero sekcija */
  .hero {
    padding-top: 15px !important;
  }

  .heroH1 {
    font-size: 40px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.03em !important;
    margin-top: 5px !important;
    margin-bottom: 25px !important;
    text-align: left !important;
    padding-left: 0 !important;
    font-weight: 800 !important;
  }

  .heroLead {
    line-height: 1.6 !important;
    font-size: 16px !important;
    margin-bottom: 40px !important;
    text-align: left !important;
    padding-left: 0 !important;
    padding-right: 5% !important;
    color: #444 !important;
  }

  .kicker {
    margin-bottom: 0 !important;
    font-size: 12px !important;
    letter-spacing: 0.12em !important;
    padding-left: 0 !important;
    text-transform: uppercase !important;
  }

  .hero .wrap {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* 2. Steps CTA dugmad */
  .stepsCta {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .stepsCta .btn {
    margin-left: 0 !important;
    width: 100% !important;
    text-align: center !important;
  }
/* --- FINALNI PREMIUM NAV TOGGLE (Sivi hamburger -> Roze X) --- */

.navToggle {
  display: none; /* Sakriveno na desktopu */
  width: 40px;
  height: 40px;
  background: transparent; /* Bez bele pozadine */
  border: none;             /* Bez okvira */
  cursor: pointer;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 0;
  box-shadow: none;         /* Bez senke */
  transition: all 0.3s ease;
}

.navToggle span {
  display: block;
  width: 26px;
  height: 2px;
  background-color: #666;   /* Premium siva boja dok je meni zatvoren */
  border-radius: 2px;
  transition: all 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
  transform-origin: center;
}

/* --- TRANSFORMACIJA U ROZE "X" --- */

/* Gornja linija: Siva postaje Magenta i rotira se */
body.nav-open .navToggle span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
  background-color: var(--magenta);
}

/* Srednja linija: Nestaje */
body.nav-open .navToggle span:nth-child(2) {
  opacity: 0;
  transform: translateX(10px);
}

/* Donja linija: Siva postaje Magenta i rotira se */
body.nav-open .navToggle span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
  background-color: var(--magenta);
}

/* Prikaz isključivo na mobilnom */
@media (max-width: 768px) {
  .navToggle {
    display: flex;
  }
}


/* Osnovni stil modal sekcije */
#paymentQrSection {
    display: none;          /* Po defaultu sakriven */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    justify-content: center;
    align-items: center;
    opacity: 0;             /* Po defaultu providan */
    transition: opacity 0.3s ease; /* Fade efekat */
    z-index: 1000;
}

/* Aktivni modal */
#paymentQrSection.show {
    display: flex;          /* Flex centriranje */
    opacity: 1;
}

/* Kontenjer QR koda unutar modala */
#qrPaymentContainer {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    text-align: center;
}

/* Detalji plaćanja ispod QR koda */
#paymentDetails {
    margin-top: 10px;
    font-size: 16px;
}
section {
  background-color: transparent !important;
}
/* Desktop: širina 60% */
@media (min-width: 1024px) {
    img[src*="friends-viewing-event-photos.jpg"] {
        width: 60% !important;
        max-width: 1200px !important;
        height: auto !important;
        display: block !important;
        margin: 40px auto !important;
        border-radius: 20px !important;
        object-fit: cover !important;
    }
}

/* Mobilni: širina 85% */
@media (max-width: 1023px) {
    img[src*="friends-viewing-event-photos.jpg"] {
        width: 85% !important;
        max-width: none !important;
        height: auto !important;
        display: block !important;
        margin: 40px auto !important;
        border-radius: 20px !important;
        object-fit: cover !important;
    }
}
/* ==================================
   DUGMAD ISPOD UPLOAD BOXA (Fix)
   ================================== */
#galleryActions {
  display: none;            /* JS će promeniti u 'flex' samo na eventId stranici */
  gap: 15px;
  padding: 15px;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  border-top: 1px dashed #ddd;
  margin-top: 10px;
  width: 100%;
}

#galleryActions button {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent;
  color: #7B38D8;
  border: none;
  cursor: pointer;
  gap: 5px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  flex: 1;
  outline: none; /* Uklanja default plavi okvir na klik */
}

#galleryActions button i {
  font-size: 22px;
  color: #7B38D8;
}

@media (min-width: 769px) {
  #galleryActions {
    display: flex !important; /* Promeni u flex da vidiš na desktopu */
    max-width: 450px;
    margin: 10px auto;
  }
}
/* Glavni naslov razmak slova */
.heroH1 {
  letter-spacing: 0.12em !important;
}
/* 1. Desktop prikaz - Sva 4 paketa u jednom redu */
@media (min-width: 992px) {
    .pricingGrid {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: stretch !important; /* Izdužuje kartice da budu iste visine */
        gap: 15px !important;
        max-width: 1250px !important;
        margin: 40px auto !important;
    }
}

/* 2. Sređivanje cene */
.priceValue {
    font-size: 2.2rem !important; 
    font-weight: 800 !important;
}

.priceUnit {
    font-size: 0.5em !important;
    vertical-align: super !important;
    margin-left: 4px !important;
}

/* 3. Magenta Brendiranje (#E52787) */
.priceCard--featured {
    border: 2px solid #E52787 !important;
}

/* Boja bedža "NAJPOPULARNIJE" */
.priceBadge {
    background-color: #E52787 !important;
    color: #fff !important;
}

/* 4. Dugmići */

/* Besplatni - Outline Magenta */
.priceCard:nth-child(1) .btn {
    background: transparent !important;
    border: 2px solid #E52787 !important;
    color: #E52787 !important;
}

/* Osnovni, Standard, Premium - Puna Magenta */
.priceCard:nth-child(2) .btn,
.priceCard:nth-child(3) .btn,
.priceCard:nth-child(4) .btn {
    background-color: #E52787 !important;
    color: #ffffff !important;
    border: none !important;
}

/* 5. Poravnanje i izduživanje kartica */
.priceCard {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    flex: 1 !important; /* Omogućava karticama da se ravnomerno šire */
    padding: 25px 15px !important;
}

/* Mobilni prikaz - Kartice jedna ispod druge, prate ivice ekrana */
@media (max-width: 991px) {
    .pricingGrid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        padding: 0 20px !important;
    }
    .priceCard {
        width: 100% !important;
    }
}
@media screen and (min-width: 1025px) {
    .wideImgWrapper {
        width: 60% !important;
        max-width: 1100px !important;
        margin: 40px auto !important;
        display: block !important;
        float: none !important;
    }
    .wideImgWrapper img {
        width: 100% !important;
        height: auto !important;
        border-radius: 20px !important;
        display: block !important;
        margin: 0 auto !important;
    }
}
/* Premium Grid - Desktop i Mobile */
@keyframes pulsePurple {
  0% { box-shadow: 0 0 0 0px rgba(123, 56, 216, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(123, 56, 216, 0); }
  100% { box-shadow: 0 0 0 0px rgba(123, 56, 216, 0); }
}

.premiumGrid { 
  display: grid !important; 
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important; 
  gap: 25px !important; 
  padding: 40px 0 !important; 
}

.premiumItem { 
  display: flex !important; 
  align-items: flex-start !important; 
  padding: 25px !important; 
  background: #fff !important; 
  border-radius: 20px !important; 
  border: 1px solid #eee !important; 
  transition: 0.3s ease-in-out !important;
}

.premiumItem:hover { 
  transform: translateY(-5px) !important; 
  border-color: #7B38D8 !important; 
  animation: pulsePurple 1.5s infinite !important;
}

.premiumIcon { 
  width: 55px !important; 
  height: 55px !important; 
  border-radius: 15px !important; 
  display: flex !important; 
  align-items: center; 
  justify-content: center;
  margin-right: 20px !important; 
  flex-shrink: 0 !important;
  background: #f5f0ff !important; 
  color: #7B38D8 !important; 
  font-size: 24px !important;
}

.premiumContent { 
  display: flex !important; 
  flex-direction: column !important;
}

.premiumItem h3 { 
  margin: 0 0 5px 0 !important; 
  font-size: 18px !important; 
  font-weight: 700 !important; 
  color: #1a1a1a !important;
}

.premiumItem p { 
  margin: 0 !important; 
  font-size: 14px !important; 
  color: #666 !important; 
  line-height: 1.5 !important;
}
.section--soft { 
    background: #ffffff !important; 
    background-color: #ffffff !important; 
    border: none !important; 
  }
  
</style>
</head>
<body>

<header class="topbar">
  <div class="wrap">
    <div class="topbarInner">
      <a class="brand" href="/landing#pocetna">
        <span class="brandText">Digital Creative World</span>
      </a>

      <nav class="nav" aria-label="Glavna navigacija">
        <a href="/landing#pocetna">Naslovna</a>
        <a href="/landing#zasto">Događaji</a>
        <a href="/landing#paketi">Paketi</a>
      </nav>
<button id="navToggle" class="navToggle" type="button" aria-label="Meni" aria-expanded="false">
  <span></span><span></span><span></span>
</button>

      <div class="topbarActions">
        <a class="navLink" href="/landing/login">Prijavi se</a>
        <a class="btn btnPrimary btnUpper" href="/landing/user-register">Započni besplatno</a>
      </div>
    </div>
  </div>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
</header>
<div id="navOverlay" class="navOverlay"></div>
<nav id="mainNav" class="mobileNav" aria-label="Glavni meni"></nav>

${bodyHtml}
<script>

// 1. GLAVNA NAVIGACIJA
function initNav() {
    const btn = document.getElementById('navToggle');
    const overlay = document.getElementById('navOverlay');
    const nav = document.getElementById('mainNav');
    if (!btn || !overlay || !nav || btn.dataset.bound) return;
    btn.dataset.bound = "true";

    const openNav = () => {
        document.body.classList.add('nav-open');
        btn.setAttribute('aria-expanded', 'true');
        renderPremiumMobileMenu();
    };
    const closeNav = () => {
        document.body.classList.remove('nav-open');
        btn.setAttribute('aria-expanded', 'false');
    };

    btn.addEventListener('click', e => {
        e.preventDefault();
        document.body.classList.contains('nav-open') ? closeNav() : openNav();
    });
    overlay.addEventListener('click', closeNav);
    nav.addEventListener('click', e => {
        if (e.target.tagName === 'A' || e.target.closest('a')) closeNav();
    });

    if (!document.getElementById('mobileCloseBtn')) {
        const closeBtn = document.createElement('button');
        closeBtn.id = 'mobileCloseBtn';
        closeBtn.innerHTML = '✕';
        Object.assign(closeBtn.style, {
            position: 'absolute', top: '25px', right: '25px',
            width: '32px', height: '32px', background: 'rgba(0,0,0,0.05)',
            borderRadius: '50%', display: 'flex', alignItems: 'center',
            justifyContent: 'center', fontSize: '16px', color: '#666',
            border: 'none', cursor: 'pointer', zIndex: '11001'
        });
        closeBtn.addEventListener('click', closeNav);
        nav.appendChild(closeBtn);
    }
}

// 2. DINAMIČKI PREMIUM IZGLED
function renderPremiumMobileMenu() {
    const mobileNav = document.getElementById('mainNav');
    if (!mobileNav) return;

    // Čišćenje i reset menija
    mobileNav.innerHTML = '';

    // Ponovo dodajemo Close dugme
    const closeBtn = document.createElement('button');
    closeBtn.id = 'mobileCloseBtn';
    closeBtn.innerHTML = '✕';
    Object.assign(closeBtn.style, {
        position: 'absolute', top: '25px', right: '25px',
        width: '32px', height: '32px', background: 'rgba(0,0,0,0.05)',
        borderRadius: '50%', display: 'flex', alignItems: 'center',
        justifyContent: 'center', fontSize: '16px', color: '#666',
        border: 'none', cursor: 'pointer', zIndex: '11001'
    });
    closeBtn.onclick = () => document.body.classList.remove('nav-open');
    mobileNav.appendChild(closeBtn);
// JEZICI - Mobilna verzija (sigurni navodnici)
const langDiv = document.createElement('div');
langDiv.id = 'premiumMobileHeader';
langDiv.style.cssText = 'display:flex; padding:70px 0 20px 0; margin-bottom:10px; border:none !important;';

langDiv.innerHTML = 
    '<div style="display:flex; gap:15px; font-size:13px; font-weight:800; color:#262626;">' +
        '<span onclick="window.i18n && i18n.apply(&quot;sr&quot;)" style="cursor:pointer">RS</span>' +
        '<span style="color:#7B38D8; opacity:0.6; font-weight:400;">|</span>' +
        '<span onclick="window.i18n && i18n.apply(&quot;en&quot;)" style="cursor:pointer">EN</span>' +
        '<span style="color:#7B38D8; opacity:0.6; font-weight:400;">|</span>' +
        '<span onclick="window.i18n && i18n.apply(&quot;de&quot;)" style="cursor:pointer">DE</span>' +
    '</div>';

mobileNav.prepend(langDiv);
// KREIRANJE LINKOVA SA PREVODIMA
    const menuItems = [
        { t: 'Naslovna', h: '/landing#pocetna', sr: 'Naslovna', en: 'Home', de: 'Startseite' },
        { t: 'Događaji', h: '/landing#zasto', sr: 'Događaji', en: 'Events', de: 'Events' },
        { t: 'Paketi', h: '/landing#paketi', sr: 'Paketi', en: 'Packages', de: 'Pakete' },
        { t: 'Prijavi se', h: '/landing/login', s: 'outline', sr: 'Prijavi se', en: 'Login', de: 'Anmelden' },
        { t: 'Započni besplatno', h: '/landing/registracija', s: 'solid', sr: 'Započni besplatno', en: 'Start Free', de: 'Gratis Starten' }
    ];

    menuItems.forEach(item => {
        const a = document.createElement('a');
        a.textContent = item.t;
        a.href = item.h;
        
        // POSTAVLJANJE DATA ATRIBUTA ZA PREVOD
        a.setAttribute('data-sr', item.sr);
        a.setAttribute('data-en', item.en);
        a.setAttribute('data-de', item.de);

        let st = 'display:block; padding:15px 0; font-weight:700; font-size:17px; text-decoration:none; color:#262626; border:none;';
        if (item.s === 'outline') {
            st += 'border:2px solid #E52787; color:#E52787; border-radius:14px; text-align:center; margin-top:30px; padding:14px;';
        } else if (item.s === 'solid') {
            st += 'background:#E52787; color:#fff; border-radius:14px; text-align:center; padding:16px; margin-top:12px; box-shadow:0 8px 20px rgba(229,39,135,0.2);';
        }
        a.style.cssText = st;
        mobileNav.appendChild(a);
    });

    // IKONICE
    const soc = document.createElement('div');
    soc.style.cssText = 'display:flex; justify-content:center; gap:28px; margin-top:auto; padding:40px 0 20px; font-size:28px;';
    soc.innerHTML =
        '<a href="#" style="color:#7360f2; text-decoration:none;"><i class="fab fa-viber"></i></a>' +
        '<a href="#" style="color:#E52787; text-decoration:none;"><i class="fab fa-instagram"></i></a>' +
        '<a href="#" style="color:#1877F2; text-decoration:none;"><i class="fab fa-facebook"></i></a>' +
        '<a href="#" style="color:#25D366; text-decoration:none;"><i class="fab fa-whatsapp"></i></a>';
    mobileNav.appendChild(soc);

    // FIX ZA PREVOD: Mora biti UNUTAR funkcije
    if (window.i18n && typeof i18n.updateDOM === 'function') {
        i18n.updateDOM(); 
    } else if (window.i18n && typeof i18n.apply === 'function') {
        const currentLang = document.documentElement.lang || 'sr';
        i18n.apply(currentLang);
    }
} 

// 3. MODAL CLOSE
function initPremiumUI() {
    const uploadPanel = document.querySelector('.upload-panel');
    const modal = document.getElementById('mO');
    if (uploadPanel && !document.getElementById('premiumCloseX')) {
        const closeX = document.createElement('div');
        closeX.id = 'premiumCloseX';
        closeX.className = 'premium-close';
        closeX.innerHTML = '<i class="fas fa-times"></i>';
        closeX.onclick = () => {
            if (modal) modal.style.display = 'none';
            document.body.classList.remove('modal-open');
        };
        uploadPanel.style.position = 'relative';
        uploadPanel.appendChild(closeX);
    }
}

// 4. DOMContentLoaded inicijalizacija
document.addEventListener('DOMContentLoaded', () => {
    const uploadBox = document.querySelector('label#uploadBox');
    if (!uploadBox || document.getElementById('galleryActions')) return;

    // Kreiranje input polja
    if (!document.getElementById('photoInput')) {
        const i1 = document.createElement('input');
        i1.type = 'file';
        i1.accept = 'image/*';
        i1.capture = 'environment';
        i1.id = 'photoInput';
        i1.style.display = 'none';

        const i2 = document.createElement('input');
        i2.type = 'file';
        i2.accept = 'image/*';
        i2.id = 'photoInputNoCap';
        i2.style.display = 'none';

        const mainFI = document.getElementById('fI');
        const sync = function(e) {
            if (mainFI && e.target.files.length > 0) {
                mainFI.files = e.target.files;
                mainFI.dispatchEvent(new Event('change', {bubbles:true}));
            }
        };

        i1.onchange = sync;
        i2.onchange = sync;
        document.body.append(i1, i2);
    }

    // Kreiranje dugmadi
    const container = document.createElement('div');
    container.id = 'galleryActions';
    Object.assign(container.style, {
        display: 'flex',
        justifyContent: 'space-around',
        padding: '20px 10px',
        background: '#ffffff',
        borderTop: '1px solid #eee',
        marginTop: '15px',
        width: '100%'
    });

    const btnS = 'display:flex;flex-direction:column;align-items:center;background:none;border:none;cursor:pointer;width:30%;gap:8px;';
    const iconS = 'color:#7B38D8;font-size:30px;transition:0.2s;';
    const textS = 'color:#666;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:0.5px;';

    container.innerHTML =
        '<button id="pCam" style="' + btnS + '"><i class="fas fa-camera" style="' + iconS + ' animation: pulse-purple 2s infinite;"></i><span data-i18n="cam_btn" style="' + textS + '"></span></button>' +
        '<button id="pGal" style="' + btnS + '"><i class="fas fa-images" style="' + iconS + '"></i><span data-i18n="gal_btn" style="' + textS + '"></span></button>' +
        '<button id="pSha" style="' + btnS + '"><i class="fa-solid fa-share-nodes" style="' + iconS + '"></i><span data-i18n="sha_btn" style="' + textS + '"></span></button>';

    uploadBox.insertAdjacentElement('afterend', container);

    // Event handleri
    document.getElementById('pCam').onclick = e => { e.preventDefault(); document.getElementById('photoInput').click(); };
    document.getElementById('pGal').onclick = e => { e.preventDefault(); document.getElementById('photoInputNoCap').click(); };
    document.getElementById('pSha').onclick = async e => {
        e.preventDefault();
        if (navigator.share) {
            try { await navigator.share({title:'Digital Creative World', url:window.location.href}); } catch(err) {}
        } else {
            try { await navigator.clipboard.writeText(window.location.href); alert('Link kopiran!'); } catch(err) { alert('Greška pri kopiranju.'); }
        }
    };
});

// 5. FINALNA AUTO-INICIJALIZACIJA
(function() {
    if (typeof initNav === 'function') initNav();
    if (typeof initPremiumUI === 'function') initPremiumUI();
})();

  // Pametni observer za modal
  (function() {
    const modal = document.getElementById('mO');
    if (modal) {
      new MutationObserver(mutations => {
        mutations.forEach(m => {
          if (m.attributeName === 'style' && modal.style.display === 'block') {
            if (typeof initPremiumUI === 'function') initPremiumUI();
            if (typeof i18n !== 'undefined' && i18n.apply) i18n.apply(i18n.currentLang);
          }
        });
      }).observe(modal, { attributes: true, attributeFilter: ['style'] });
    }
  })();
  (function initLandingEnhancements() {
    var darkPurple = '#5A24A1';
    var root = document.documentElement;

    /* 1. GLOBAL CSS VARIJABLE */
    root.style.setProperty('--purple', darkPurple);
    root.style.setProperty('--text', '#262626');
    root.style.setProperty('--bg', '#ffffff');
    root.style.setProperty('--border', 'rgba(0,0,0,0.10)');
    root.style.setProperty('--peek', '85px');

    var brandText = document.querySelector('.brandText');
    if (brandText) {
        brandText.style.color = darkPurple;
        brandText.style.letterSpacing = '0.5px';
    }

    /* 2. NAV LINK FONT BOOST + I18N */
    var navLinks = document.querySelectorAll('.nav a');
    navLinks.forEach(function(link) {
        if (!link.dataset.fontBoosted) {
            var currentSize = window.getComputedStyle(link).fontSize;
            link.style.fontSize = (parseFloat(currentSize) + 2) + 'px';
            link.dataset.fontBoosted = "true";
        }

        if (link.href.includes('#pocetna')) {
            link.setAttribute('data-sr', 'Naslovna');
            link.setAttribute('data-en', 'Home');
            link.setAttribute('data-de', 'Startseite');
        }
        if (link.href.includes('#zasto') || link.textContent.includes('Događaji')) {
            link.setAttribute('data-sr', 'Događaji');
            link.setAttribute('data-en', 'Events');
            link.setAttribute('data-de', 'Events');
        }
        if (link.href.includes('#paketi')) {
            link.setAttribute('data-sr', 'Paketi');
            link.setAttribute('data-en', 'Packages');
            link.setAttribute('data-de', 'Pakete');
        }
    });
    /* 3. DASHBOARD LINK - FORCE CHANGE */
    var dashboardLink = document.querySelector('.navLink');
    if (dashboardLink) {
        dashboardLink.setAttribute('data-sr', 'DASHBOARD');
        dashboardLink.setAttribute('data-en', 'DASHBOARD');
        dashboardLink.setAttribute('data-de', 'DASHBOARD');
        dashboardLink.style.color = darkPurple;
        
        // Menjamo tekst odmah u startu
        dashboardLink.innerHTML = 'DASHBOARD'; 
    }
    /* 4. CTA "ZAPOČNI BESPLATNO" */
    var ctaBtn = document.querySelector('.btnPrimary') || 
                 Array.from(document.querySelectorAll('a')).find(function(el) { return el.textContent.includes('Započni'); });

    if (ctaBtn) {
        ctaBtn.setAttribute('data-sr', 'Započni besplatno');
        ctaBtn.setAttribute('data-en', 'Start for free');
        ctaBtn.setAttribute('data-de', 'Kostenlos starten');
    }

    /* 5. DESKTOP NAV LAYOUT FIX */
    var oldStyle = document.getElementById('layout-fix-style');
    if (oldStyle) oldStyle.remove();

    var style = document.createElement('style');
    style.id = 'layout-fix-style';
    style.innerHTML =
        '@media (min-width: 769px) {' +
            '.topbarInner {' +
                'display:flex !important;' +
                'justify-content:flex-start !important;' +
            '}' +
            '.nav {' +
                'margin-left:40px !important;' +
                'margin-right:0 !important;' +
                'display:flex !important;' +
                'gap:25px !important;' +
            '}' +
            '.topbarActions {' +
                'margin-left:auto !important;' +
                'display:flex !important;' +
                'align-items:center !important;' +
            '}' +
            '.navLink {' +
                'color: ' + darkPurple + ' !important;' +
                'font-weight: 600 !important;' +
            '}' +
            '.brandText {' +
                'color:' + darkPurple + ' !important;' +
                'letter-spacing:0.5px !important;' +
            '}' +
        '}';

    document.head.appendChild(style);

    /* 6. LANGUAGE SWITCHER */
    var actions = document.querySelector('.topbarActions');
    if (actions) {
        var oldLang = document.getElementById('final-lang-switcher');
        if (oldLang) oldLang.remove();

        var langDiv = document.createElement('div');
        langDiv.id = 'final-lang-switcher';
        langDiv.style.cssText = 'display:flex;align-items:center;gap:8px;margin-left:15px;font-family:Inter,sans-serif;font-weight:600;font-size:13px;color:#666;';

        langDiv.innerHTML =
            '<span data-lang="sr" class="lang-item" style="cursor:pointer;">RS</span>' +
            '<span style="color:#ccc; font-weight:300;">|</span>' +
            '<span data-lang="en" class="lang-item" style="cursor:pointer;">EN</span>' +
            '<span style="color:#ccc; font-weight:300;">|</span>' +
            '<span data-lang="de" class="lang-item" style="cursor:pointer;">DE</span>';

        langDiv.addEventListener('click', function(e) {
            var lang = e.target.getAttribute('data-lang');
            if (lang) changeLanguage(lang);
        });

        actions.appendChild(langDiv);
    }

    /* 7. INITIAL LANGUAGE */
    changeLanguage(document.documentElement.lang || 'sr');
})();

/* ======================================
    GLOBAL LANGUAGE FUNCTION
====================================== */
window.changeLanguage = function(lang) {
    var activeColor = '#5A24A1';
    document.documentElement.lang = lang;

    document.querySelectorAll('[data-' + lang + ']').forEach(function(el) {
        var translation = el.getAttribute('data-' + lang);
        
        // POPRAVKA: Ako prevodimo Dashboard, uvek forsiraj čistu reč bez "MOJ"
        if (el.classList.contains('navLink') && translation.includes('DASHBOARD')) {
            translation = 'DASHBOARD';
        }

        if (translation) {
            el.innerHTML = translation;
        }
    });

    // Menjanje boje aktivnog jezika
    document.querySelectorAll('#final-lang-switcher .lang-item').forEach(function(item) {
        if (item.getAttribute('data-lang') === lang) {
            item.style.color = activeColor;
        } else {
            item.style.color = '#666';
        }
    });

    if (typeof renderContactSection === 'function') {
        renderContactSection();
    }
};

(function finalizePremiumFab() {
    var darkPurple = '#5A24A1';
    var magenta = '#E52787';
    
    // 1. Sakrivanje starog dugmeta
    var oldFab = document.querySelector('.helpFab');
    if (oldFab) {
        oldFab.style.display = 'none';
    }

    // 2. Kreiranje novog elementa
    var newFab = document.createElement('a');
    newFab.href = 'mailto:hello@digitalcreativeworld.rs?subject=Upit%20sa%20sajta';
    newFab.id = 'premium-contact-fab';

    // 3. Logika za boju i uređaj
    var isMobile = window.innerWidth <= 768;
    var brandColor = isMobile ? magenta : darkPurple;

    // 4. SVG koverta (22px, savršeno centrirana)
    newFab.innerHTML = '<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="' + brandColor + '" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" style="display:block;"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>';

    // 5. Stilovi (Premium Glassmorphism)
    var s = newFab.style;
    s.width = '50px';
    s.height = '50px';
    s.borderRadius = '50%';
    s.position = 'fixed';
    s.bottom = '30px';
    s.right = '29px';
    s.display = 'flex';
    s.alignItems = 'center';
    s.justifyContent = 'center';
    s.zIndex = '999999';
    s.cursor = 'pointer';
    s.textDecoration = 'none';
    s.backgroundColor = 'rgba(255, 255, 255, 0.7)';
    s.backdropFilter = 'blur(12px) saturate(180%)';
    s.webkitBackdropFilter = 'blur(12px) saturate(180%)';
    s.border = '1px solid rgba(255, 255, 255, 0.4)';
    s.boxShadow = '0 8px 32px 0 rgba(0, 0, 0, 0.1)';
    s.transition = 'transform 0.2s ease';
// Hover efekat
    newFab.onmouseover = function() { this.style.transform = 'scale(1.1)'; };
    newFab.onmouseout = function() { this.style.transform = 'scale(1)'; };

    // 6. Dodavanje na stranicu
    document.body.appendChild(newFab);



// --- JEDINSTVENI POSMATRAČ (sprečava 'already declared' i beskonačne loopove) ---
const mainObserver = new MutationObserver(() => {

    // Sprečava ponovni pokret unutar iste promene
    if (mainObserver._running) return;
    mainObserver._running = true;

    if (window.adminMode && typeof addAdminControls === 'function') {
        addAdminControls();
    }

    if (window.i18n && typeof i18n.apply === 'function') {
        i18n.apply(document.documentElement.lang || 'sr');
    }

    mainObserver._running = false;
});

// Posmatranje tela dokumenta
mainObserver.observe(document.body, { childList: true, subtree: true });

// Inicijalno pokretanje admin kontrola
if (typeof addAdminControls === 'function') addAdminControls();
(function() {
    function translateWholeSite(lang) {
        // 1. Čuvanje izbora i postavljanje atributa na <html>
        localStorage.setItem('userLang', lang);
        document.documentElement.lang = lang;

        // 2. Prevod SVIH elemenata na stranici koji imaju data atribute
        // Ovo pokriva naslove, pasuse, dugmiće i desktop navigaciju
        var allTranslatable = document.querySelectorAll('[data-' + lang + ']');
        allTranslatable.forEach(function(el) {
            var text = el.getAttribute('data-' + lang);
            if (text) {
                // Ako je element input ili textarea, menjamo placeholder
                if (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA') {
                    el.placeholder = text;
                } else {
                    el.textContent = text;
                }
            }
        });

        // 3. Poseban update za linkove u Hamburgeru (jer oni često nemaju data-atribute direktno)
        var menuItems = [
            { sr: 'Naslovna', en: 'Home', de: 'Startseite' },
            { sr: 'Događaji', en: 'Events', de: 'Events' },
            { sr: 'Paketi', en: 'Packages', de: 'Pakete' },
            { sr: 'Prijavi se', en: 'Login', de: 'Anmelden' },
            { sr: 'Započni besplatno', en: 'Start Free', de: 'Gratis Starten' }
        ];

        var mobileLinks = document.querySelectorAll('#mainNav a:not(.soc-link)');
        mobileLinks.forEach(function(link, idx) {
            if (menuItems[idx]) {
                var textSpan = link.querySelector('.link-text') || link;
                textSpan.textContent = menuItems[idx][lang];
            }
        });

        // 4. Vizuelna indikacija aktivnog jezika u hamburgeru
        document.querySelectorAll('#premiumMobileHeader span').forEach(function(s) {
            var val = s.textContent.toLowerCase();
            if (val !== '|') {
                var currentVal = (val === 'rs') ? 'sr' : val;
                s.style.color = (currentVal === lang) ? '#E52787' : '#262626';
            }
        });

        // 5. Poziv tvog i18n sistema (ako postoji za specifične JS prevode)
        if (window.i18n && typeof window.i18n.apply === 'function') {
            window.i18n.apply(lang);
        }
    }

    function initGlobalTranslator() {
        var mobileNav = document.getElementById('mainNav');
        if (!mobileNav) {
            setTimeout(initGlobalTranslator, 200);
            return;
        }

        // Učitaj sačuvan jezik ili koristi 'sr'
        var savedLang = localStorage.getItem('userLang') || 'sr';
        translateWholeSite(savedLang);

        // Delegacija klika unutar hamburgera
        mobileNav.addEventListener('click', function(e) {
            var span = e.target.closest('#premiumMobileHeader span');
            if (!span || span.textContent === '|') return;

            var selected = span.textContent.toLowerCase();
            if (selected === 'rs') selected = 'sr';

            translateWholeSite(selected);
        });
    }

    // Pokretanje
    if (document.readyState === 'complete') {
        initGlobalTranslator();
    } else {
        window.addEventListener('load', initGlobalTranslator);
    }
})();
(function() {
    var style = document.createElement("style");
    style.innerHTML = "@keyframes pulsePurple { 0% { box-shadow: 0 0 0 0px rgba(123, 56, 216, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(123, 56, 216, 0); } 100% { box-shadow: 0 0 0 0px rgba(123, 56, 216, 0); } } " +
        ".premiumGrid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 25px !important; padding: 40px 0 !important; } " +
        ".premiumItem { background: #ffffff !important; border: 1px solid #f0f0f0 !important; border-radius: 20px !important; transition: 0.3s !important; display: flex !important; align-items: center !important; padding: 20px !important; } " +
        ".premiumItem:hover { transform: translateY(-5px) !important; border-color: #7B38D8 !important; animation: pulsePurple 1.5s infinite !important; } " +
        ".premiumIcon { background-color: #f5f0ff !important; color: #7B38D8 !important; width: 55px !important; height: 55px !important; border-radius: 15px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-right: 20px !important; flex-shrink: 0 !important; } " +
        ".premiumIcon i { color: #7B38D8 !important; font-size: 24px !important; } " +
        ".premiumContent { text-align: left !important; } " +
        ".premiumContent h3 { color: #111 !important; margin: 0 0 5px 0 !important; font-size: 18px !important; } " +
        ".premiumContent p { margin: 0 !important; color: #666 !important; font-size: 14px !important; } " +
        "@media (max-width: 992px) { .premiumGrid { grid-template-columns: 1fr !important; } }";
    document.head.appendChild(style);

    var fixElements = function() {
        document.querySelectorAll(".premiumIcon").forEach(function(el) {
            el.style.setProperty("background-color", "#f5f0ff", "important");
            el.style.setProperty("color", "#7B38D8", "important");
        });
    };

    fixElements();
    setTimeout(fixElements, 1000);
})();

(function() {
    var style = document.createElement("style");
    style.innerHTML = 
        /* Desktop: Smanjuje samo široku sliku na 60% i centrira */
        "@media (min-width: 993px) { " +
        "  .wideImgWrapper { " +
        "    width: 60% !important; " +
        "    margin: 40px auto !important; " +
        "    display: block !important; " +
        "  } " +
        "  .wideImg { " +
        "    width: 100% !important; " +
        "    height: auto !important; " +
        "    border-radius: 20px !important; " +
        "  } " +
        "} " +
        /* Mobilni: Ostaje preko celog ekrana */
        "@media (max-width: 992px) { " +
        "  .wideImgWrapper { width: 100% !important; } " +
        "  .wideImg { border-radius: 0 !important; } " +
        "}";
    document.head.appendChild(style);
})();

(function() {
    const style = document.createElement('style');
    style.innerHTML = '.pricingGrid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 40px 20px !important; max-width: 900px !important; margin: 0 auto !important; } .priceCard { position: relative !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; min-height: 700px !important; padding: 40px 20px !important; border-radius: 20px !important; border: 2px solid #e0e0e0 !important; background: #fff !important; transition: all 0.2s ease-in-out !important; } .priceCard ul { list-style: none !important; padding: 0 !important; margin: 0 !important; border: none !important; } .priceCard li { list-style: none !important; border: none !important; padding: 5px 0 !important; margin: 0 !important; background: none !important; } .priceCard li::before, .priceCard li::after, .priceCard i, .priceCard .icon { display: none !important; content: none !important; } .priceCard--featured { border: 3px solid #E52787 !important; box-shadow: 0 10px 20px rgba(229, 39, 135, 0.1) !important; } .priceCard:hover, .priceCard:active { border-color: #E52787 !important; transform: translateY(-3px) !important; box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important; z-index: 5 !important; } .priceCard:first-child .btn { background: transparent !important; color: #E52787 !important; border: 2px solid #E52787 !important; } .priceCard:not(:first-child) .btn { background: #E52787 !important; color: #ffffff !important; } .priceBadge { position: absolute !important; top: -15px !important; left: 50% !important; transform: translateX(-50%) !important; background: #fff !important; color: #E52787 !important; padding: 0 10px !important; font-weight: 900 !important; z-index: 10 !important; } .priceValue::after { content: " RSD / " attr(data-en) " €" !important; font-size: 16px !important; color: #666 !important; display: block !important; } .priceUnit { display: none !important; } @media (max-width: 768px) { .pricingGrid { grid-template-columns: 1fr !important; } }';
    document.head.appendChild(style);

    // Precizna zamena teksta bez osvežavanja cele stranice
    const premiumText = Array.from(document.querySelectorAll('.priceCard h3, .priceCard p, .priceCard li'))
        .find(el => el.textContent.includes("Za velike i luksuzne evente"));
    
    if (premiumText) {
        premiumText.textContent = premiumText.textContent.replace("Za velike i luksuzne evente", "za velike događaje i konferencije");
    }
})();

(function() {
    const style = document.createElement('style');
    style.innerHTML = 
        ".siteFooter { " +
            "background: #ffffff !important; " +
            "padding: 80px 0 40px !important; " +
            "border-top: 1px solid #f0f0f0 !important; " +
            "width: 100% !important; " +
        "} " +
        ".footerGrid { " +
            "display: grid !important; " +
            "grid-template-columns: 1.5fr 1fr 1fr 1fr !important; " +
            "gap: 40px !important; " +
            "max-width: 1100px !important; " +
            "margin: 0 auto !important; " +
            "padding: 0 25px !important; " +
            "text-align: left !important; " +
        "} " +
        ".footerLogo { " +
            "font-size: 23px !important; " +
            "font-weight: 800 !important; " +
            "color: #000 !important; " +
            "margin-bottom: 15px !important; " +
            "text-align: left !important; " +
        "} " +
        ".footerTagline { " +
            "font-size: 16px !important; " +
            "color: #7B38D8 !important; " +
            "font-weight: 600 !important; " +
            "text-align: left !important; " +
        "} " +
        ".footerCol h4 { " +
            "color: #111 !important; " +
            "font-size: 15px !important; " +
            "font-weight: 700 !important; " +
            "margin-bottom: 25px !important; " +
            "text-transform: uppercase !important; " +
            "letter-spacing: 1px !important; " +
            "text-align: left !important; " +
        "} " +
        ".footerCol a { " +
            "color: #555 !important; " +
            "font-size: 15px !important; " +
            "text-decoration: none !important; " +
            "display: block !important; " +
            "margin-bottom: 15px !important; " +
            "transition: all 0.2s ease !important; " +
            "text-align: left !important; " +
        "} " +
        ".footerCol a:hover { " +
            "color: #E52787 !important; " +
            "transform: translateX(3px) !important; " +
        "} " +
        ".footerBottom { " +
            "max-width: 1100px !important; " +
            "margin: 60px auto 0 !important; " +
            "padding: 25px 25px 0 !important; " +
            "border-top: 1px solid #f5f5f5 !important; " +
            "color: #999 !important; " +
            "font-size: 14px !important; " +
            "text-align: left !important; " +
        "} " +
        "@media (max-width: 768px) { " +
            ".footerGrid { grid-template-columns: 1fr !important; gap: 40px !important; } " +
            ".footerCol { text-align: left !important; } " +
        "}";
    document.head.appendChild(style);
})();

(function() {
    var style = document.createElement('style');
    style.innerHTML = ".sectionTitle { text-align: left !important; max-width: 800px !important; margin: 0 auto 15px auto !important; color: #1a1a1a !important; } .faqQ { color: #475467 !important; } .faqA { color: #667085 !important; }";
    document.head.appendChild(style);
})();


(function() {
    var style = document.createElement('style');
    style.innerHTML = 
        '#kontakt h3 { ' +
            'font-size: 18px !important; ' +
            'text-align: left !important; ' +
            'margin-left: 0 !important; ' +
            'margin-right: auto !important; ' +
            'line-height: 1.5 !important; ' +
            'display: block !important; ' +
            'width: 100% !important; ' +
        '} ' +
        '@media (max-width: 768px) { ' +
            '#kontakt h3 { ' +
                'text-align: center !important; ' +
                'margin-left: auto !important; ' +
                'margin-right: auto !important; ' +
            '} ' +
        '}';
    document.head.appendChild(style);
})();

(function() {
    var style = document.createElement('style');
    style.innerHTML = 
        '.kicker { ' +
            'color: #333333 !important; ' + // Čista, tamno siva, bez ikakve senke
            'font-weight: 700 !important; ' +
            'text-transform: uppercase !important; ' +
            'letter-spacing: 1.5px !important; ' +
            'margin-bottom: 12px !important; ' +
        '} ' +
        '.heroH1 { ' +
            'letter-spacing: 3px !important; ' + 
            'line-height: 1.3 !important; ' +
            'color: #000 !important; ' +
        '} ' +
        '@media (max-width: 768px) { ' +
            '.heroH1 { ' +
                'letter-spacing: 1.5px !important; ' +
                'font-size: 32px !important; ' +
            '} ' +
        '}';
    document.head.appendChild(style);
})();

(function() {
    var style = document.createElement('style');
    style.innerHTML = 
        /* Centriranje naslova i opisa u sekciji sa koracima */
        '#pocetna + section h2, ' + 
        '.sectionTitle, ' +
        '#pocetna + section p, ' +
        '.sectionLead { ' +
            'text-align: center !important; ' +
            'margin-left: auto !important; ' +
            'margin-right: auto !important; ' +
            'display: block !important; ' +
            'width: 100% !important; ' +
        '} ' +
        /* Dodatni razmak iznad naslova radi bolje preglednosti */
        '#pocetna + section h2 { ' +
            'margin-top: 40px !important; ' +
            'margin-bottom: 15px !important; ' +
        '}';
    document.head.appendChild(style);
})();
(function() {
    if (window.innerWidth <= 768) {
        var btn = document.querySelector('#pocetna .btnPrimary');
        if (btn) {
            btn.innerText = 'ZAPOČNI BESPLATNO';
            btn.href = '/landing/registracija?plan=free';
            btn.style.cssText = 'background:#E52787 !important; border-color:#E52787 !important; color:#fff !important; font-weight:700 !important; display:flex !important; justify-content:center !important;';
        }
        
        var micro = document.querySelector('#pocetna .heroMicro');
        if (micro) micro.style.display = 'none';
    }
})();



})(); // Zatvara IIFE funkciju (onu sa početka skripte)
</script>
</body>
</html>`

}

// HOME
app.get("/landing", async (req, res) => {
  // SIGNED URL-ovi
  const heroUrl  = await signedReadUrl("landing/landing-hero.jpg");
  const phoneUrl = await signedReadUrl("landing/landing-phone.jpg");
  const viewUrl  = await signedReadUrl("landing/friends-viewing-event-photos.jpg");
const slideshowUrl = await signedReadUrl("landing/sajt-slajdsou.jpg");
const bodyHtml = `
  <section class="hero" id="pocetna">
    <div class="wrap">
      <div class="heroGrid">
        <div>
          <div class="kicker" 
               data-sr="Digitalna galerija za događaje" 
               data-en="Digital event gallery" 
               data-de="Digitale Event-Galerie">Digitalna galerija za događaje</div>
               <h1 class="heroH1" 
    data-sr="Sve fotografije vaših gostiju. Na jednom mestu. Odmah." 
    data-en="All your guests' photos. In one place. Instantly." 
    data-de="Alle Fotos Ihrer Gäste. An einem Ort. Sofort.">
</h1>

<p class="heroLead" 
   data-sr="Gosti dodaju slike i video putem linka ili QR koda. Bez aplikacije. Bez registracije. Sve uživo u jednoj galeriji." 
   data-en="Guests add photos and videos via link or QR code. No app. No registration. Everything live in one gallery." 
   data-de="Gäste fügen Fotos und Videos per Link oder QR-Code hinzu. Keine App. Keine Registrierung. Alles live in einer Galerie.">
</p>
          <div class="heroCtas">
            <a class="btn btnPrimary btnUpper" href="/landing#paketi" 
               data-sr="KREIRAJ SVOJ DOGAĐAJ" data-en="CREATE YOUR EVENT" data-de="EVENT ERSTELLEN">KREIRAJ SVOJ DOGAĐAJ</a>
            <a class="btn btnGhost btnUpper" href="/" 
               data-sr="POGLEDAJ DEMO" data-en="VIEW DEMO" data-de="DEMO ANSEHEN">POGLEDAJ DEMO</a>
          </div>

          <div class="heroMicro" 
               data-sr="Počnite besplatno. Podešavanje za manje od 2 minuta." 
               data-en="Start for free. Setup in less than 2 minutes." 
               data-de="Kostenlos starten. Setup in weniger als 2 Minuten.">
            Počnite besplatno. Podešavanje za manje od 2 minuta.
          </div>
        </div>

        <div class="heroMedia">
          <img src="${heroUrl}" alt="Događaj – digitalna galerija" loading="eager">
        </div>
      </div>
    </div>
  </section>

  <section class="section section--soft" id="kako">
    <div class="wrap">
      <h2 class="sectionTitle" 
          data-sr="Kako da prikupite sve fotografije sa događaja" 
          data-en="How to collect all photos from your event" 
          data-de="So sammeln Sie alle Fotos von Ihrem Event">Kako da prikupite sve fotografije sa događaja</h2>
      <p class="sectionLead" 
         data-sr="Tri koraka. Bez aplikacije. Sve u jednoj galeriji." 
         data-en="Three steps. No app. Everything in one gallery." 
         data-de="Drei Schritte. Keine App. Alles in einer Galerie.">Tri koraka. Bez aplikacije. Sve u jednoj galeriji.</p>

      <div class="stepsRow">
        <div class="stepCard">
          <div class="stepTop">
            <div class="stepNum">1</div>
            <div class="stepTitle" data-sr="Kreiraj događaj" data-en="Create event" data-de="Event erstellen">Kreiraj događaj</div>
          </div>
          <div class="stepText" data-sr="Unesi naziv i dobijaš link + QR kod." data-en="Enter the name and get a link + QR code." data-de="Namen eingeben und Link + QR-Code erhalten.">Unesi naziv i dobijaš link + QR kod.</div>
        </div>

        <div class="stepCard">
          <div class="stepTop">
            <div class="stepNum">2</div>
            <div class="stepTitle" data-sr="Podeli gostima" data-en="Share with guests" data-de="Mit Gästen teilen">Podeli gostima</div>
          </div>
          <div class="stepText" data-sr="Pošalji link ili QR pre / tokom događaja." data-en="Send the link or QR before / during the event." data-de="Link oder QR vor / während des Events senden.">Pošalji link ili QR pre / tokom događaja.</div>
        </div>

        <div class="stepCard">
          <div class="stepTop">
            <div class="stepNum">3</div>
            <div class="stepTitle" data-sr="Gosti dodaju sadržaj" data-en="Guests add content" data-de="Gäste laden Inhalte hoch">Gosti dodaju sadržaj</div>
          </div>
          <div class="stepText" data-sr="Fotke i video stižu direktno u galeriju." data-en="Photos and videos arrive directly in the gallery." data-de="Fotos und Videos landen direkt in der Galerie.">Fotke i video stižu direktno u galeriju.</div>
        </div>
      </div>

      <div class="stepsCta" style="margin-top:18px;">
        <a class="btn btnPrimary btnUpper" href="/landing#paketi" 
           data-sr="KREIRAJ SVOJ DOGAĐAJ" data-en="CREATE YOUR EVENT" data-de="EVENT ERSTELLEN">KREIRAJ SVOJ DOGAĐAJ</a>
        <a class="btn btnGhost btnUpper" href="/" style="margin-left:10px;" 
           data-sr="POGLEDAJ DEMO" data-en="VIEW DEMO" data-de="DEMO ANSEHEN">POGLEDAJ DEMO</a>
      </div>
    </div>
  </section>

  <section class="section" id="izgleda">
    <div class="wrap">
      <h2 class="sectionTitle" 
          data-sr="Galerija uživo sa vašeg događaja" 
          data-en="Live gallery from your event" 
          data-de="Live-Galerie von Ihrem Event">Galerija uživo sa vašeg događaja</h2>

      <p class="sectionLead" 
         data-sr="Gosti dodaju slike i video direktno sa telefona — bez aplikacije i registracije." 
         data-en="Guests add photos and videos directly from their phones — no app or registration." 
         data-de="Gäste laden Bilder und Videos direkt vom Handy hoch — ohne App oder Registrierung.">
        Gosti dodaju slike i video direktno sa telefona — bez aplikacije i registracije.
      </p>
      <div class="wideMedia">
        <img src="${phoneUrl}" alt="Upload" loading="lazy">
      </div>

      <div style="margin-top:18px;">
        <a class="btn btnPrimary btnUpper" href="/" 
           data-sr="POGLEDAJ DEMO" data-en="VIEW DEMO" data-de="DEMO ANSEHEN">POGLEDAJ DEMO</a>
      </div>
    </div>
  </section>

  <section class="section section--soft" id="slideshow">
    <div class="wrap">
      <h2 class="sectionTitle" 
          data-sr="Uživajte zajedno — i tokom događaja" 
          data-en="Enjoy together — even during the event" 
          data-de="Gemeinsam genießen — auch während des Events">Uživajte zajedno — i tokom događaja</h2>
      <p class="sectionLead" 
         data-sr="Gosti gledaju fotografije uživo na ekranu, TV-u ili projektoru dok sadržaj stiže." 
         data-en="Guests watch live photos on a screen, TV, or projector as content arrives." 
         data-de="Gäste sehen Live-Fotos auf einem Bildschirm, TV oder Projektor, während Inhalte eingehen.">
        Gosti gledaju fotografije uživo na ekranu, TV-u ili projektoru dok sadržaj stiže.
      </p>

      <div class="wideMedia">
        <img src="${slideshowUrl}" alt="Slideshow" loading="lazy">
      </div>
    </div>
  </section>

  <div class="wrap">
    <h2 class="sectionTitle" 
        data-sr="Vaš događaj. Jedna galerija. Sve uspomene." 
        data-en="Your event. One gallery. All memories." 
        data-de="Ihr Event. Eine Galerie. Alle Erinnerungen.">Vaš događaj. Jedna galerija. Sve uspomene.</h2>
    <p class="sectionLead" 
       data-sr="Gosti dele fotografije i video zapise putem linka ili QR koda, a sav sadržaj se automatski prikuplja u privatnoj digitalnoj galeriji — bez aplikacija i registracije." 
       data-en="Guests share photos and videos via link or QR code, and all content is automatically collected in a private digital gallery — no apps or registration." 
       data-de="Gäste teilen Fotos und Videos per Link oder QR-Code, und alle Inhalte werden automatisch in einer privaten digitalen Galerie gesammelt — ohne Apps oder Registrierung.">
      Gosti dele fotografije i video zapise putem linka ili QR koda, a sav sadržaj
      se automatski prikuplja u privatnoj digitalnoj galeriji — bez aplikacija i registracije.
    </p>

    <div class="premiumGrid">
      <div class="premiumItem">
        <span class="premiumIcon"><i class="fa-solid fa-images"></i></span>
        <div class="premiumContent">
          <h3 data-sr="Digitalna galerija" data-en="Digital Gallery" data-de="Digitale Galerie">Digitalna galerija</h3>
          <p data-sr="Sve fotografije i video zapisi gostiju automatski se čuvaju na jednom mestu." data-en="All guest photos and videos are automatically saved in one place." data-de="Alle Fotos und Videos der Gäste werden automatisch an einem Ort gespeichert.">Sve fotografije i video zapisi gostiju automatski se čuvaju na jednom mestu.</p>
        </div>
      </div>

      <div class="premiumItem">
        <span class="premiumIcon"><i class="fa-solid fa-qrcode"></i></span>
        <div class="premiumContent">
          <h3 data-sr="Pristup bez aplikacija" data-en="No App Access" data-de="Zugang ohne App">Pristup bez aplikacija</h3>
          <p data-sr="Gosti se priključuju jednim klikom ili skeniranjem QR koda." data-en="Guests join with a single click or by scanning a QR code." data-de="Gäste treten med einem Klick oder durch Scannen eines QR-Codes bei.">Gosti se priključuju jednim klikom ili skeniranjem QR koda.</p>
        </div>
      </div>

      <div class="premiumItem">
        <span class="premiumIcon"><i class="fa-solid fa-tv"></i></span>
        <div class="premiumContent">
          <h3 data-sr="Live prikaz sadržaja" data-en="Live Content Display" data-de="Live-Inhaltsanzeige">Live prikaz sadržaja</h3>
          <p data-sr="Fotografije i video zapisi mogu se prikazivati uživo na ekranu ili projektoru." data-en="Photos and videos can be displayed live on a screen or projector." data-de="Fotos und Videos können live auf einem Bildschirm oder Projektor angezeigt werden.">Fotografije i video zapisi mogu se prikazivati uživo na ekranu ili projektoru.</p>
        </div>
      </div>

      <div class="premiumItem">
        <span class="premiumIcon"><i class="fa-solid fa-cloud-arrow-down"></i></span>
        <div class="premiumContent">
          <h3 data-sr="Jednostavno preuzimanje" data-en="Easy Download" data-de="Einfacher Download">Jednostavno preuzimanje</h3>
          <p data-sr="Kompletna galerija je spremna za preuzimanje u punom kvalitetu." data-en="The complete gallery is ready for download in full quality." data-de="Die komplette Galerie steht zum Download in voller Qualität bereit.">Kompletna galerija je spremna za preuzimanje u punom kvalitetu.</p>
        </div>
      </div>

      <div class="premiumItem">
        <span class="premiumIcon"><i class="fa-solid fa-palette"></i></span>
        <div class="premiumContent">
          <h3 data-sr="Prilagođen izgled" data-en="Custom Design" data-de="Anpassbares Design">Prilagođen izgled</h3>
          <p data-sr="Vizuelno usklađivanje sa stilom događaja ili brendom." data-en="Visual alignment with the event style or brand." data-de="Visuelle Abstimmung auf den Event-Stil oder die Marke.">Vizuelno usklađivanje sa stilom događaja ili brendom.</p>
        </div>
      </div>

      <div class="premiumItem">
        <span class="premiumIcon"><i class="fa-solid fa-shield-halved"></i></span>
        <div class="premiumContent">
          <h3 data-sr="Privatnost i kontrola" data-en="Privacy & Control" data-de="Privatsphäre & Kontrolle">Privatnost i kontrola</h3>
          <p data-sr="Sadržaj je vidljiv samo osobama kojima vi omogućite pristup." data-en="Content is visible only to people you grant access to." data-de="Inhalte sind nur für Personen sichtbar, denen Sie Zugriff gewähren.">Sadržaj je vidljiv samo osobama kojima vi omogućite pristup.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="landing-section">
  <div class="wideImgWrapper">
    <img src="${viewUrl}" alt="Guests viewing gallery" class="wideImg" loading="lazy">
  </div>
</section>
<section class="section" id="zasto">
  <style>
    html { scroll-behavior: smooth !important; }
    .usecaseList { 
      display: grid; 
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
      gap: 30px; 
      padding: 40px 0; 
    }
    .usecaseItem { 
      display: flex !important; 
      align-items: flex-start !important; 
      padding: 15px !important; 
    }
    .usecaseIcon { 
      width: 54px !important; 
      height: 54px !important; 
      border-radius: 12px !important; 
      display: flex !important; 
      align-items: center !important; 
      justify-content: center !important; 
      font-size: 24px !important; 
      margin-right: 20px !important; 
      flex-shrink: 0 !important; 
    }
    /* Boje pozadina i ikona */
    .item-0 .usecaseIcon { background: #fdf2f8 !important; color: #ec4899 !important; }
    .item-1 .usecaseIcon { background: #f0f9ff !important; color: #0ea5e9 !important; }
    .item-2 .usecaseIcon { background: #fff7ed !important; color: #f97316 !important; }
    .item-3 .usecaseIcon { background: #f5f3ff !important; color: #8b5cf6 !important; }
    .item-4 .usecaseIcon { background: #ecfdf5 !important; color: #10b981 !important; }
    .item-5 .usecaseIcon { background: #fff1f2 !important; color: #f43f5e !important; }

    .usecaseItem h3 { margin: 0 0 5px 0 !important; font-size: 18px !important; font-weight: 700 !important; color: #111 !important; }
    .usecaseItem p { margin: 0 !important; font-size: 14px !important; color: #4b5563 !important; line-height: 1.5 !important; }
    
    .learn-more { 
      color: #7B38D8 !important; 
      font-size: 13px !important; 
      font-weight: 700 !important; 
      text-decoration: none !important; 
      display: inline-block !important; 
      margin-top: 10px !important; 
      transition: 0.2s;
    }
    .learn-more:hover { opacity: 0.8; transform: translateX(3px); }
  </style>

  <div class="wrap">
    <h2 class="sectionTitle" data-sr="Za koje događaje" data-en="For which events" data-de="Für welche Events">Za koje događaje</h2>
    <p class="sectionLead" data-sr="Od malih privatnih okupljanja do velikih događaja..." data-en="From small private gatherings..." data-de="Von kleinen privaten Treffen...">
      Od malih privatnih okupljanja do velikih događaja — svi sadržaji gostiju na jednom mestu.
    </p>

    <div class="usecaseList">
      <div class="usecaseItem">
        <span class="usecaseIcon"></span>
        <div>
          <h3 data-sr="Venčanja">Venčanja</h3>
          <p data-sr="Svaki osmeh i pogled...">Svaki osmeh i pogled, skupljeni iz ugla onih koji su vam najbliži.</p>
        </div>
      </div>
      <div class="usecaseItem">
        <span class="usecaseIcon"></span>
        <div>
          <h3 data-sr="Privatne proslave">Privatne proslave</h3>
          <p data-sr="Spontani trenuci gostiju...">Spontani trenuci gostiju, objedinjeni u jednoj galeriji.</p>
        </div>
      </div>
      <div class="usecaseItem">
        <span class="usecaseIcon"></span>
        <div>
          <h3 data-sr="Rođendani">Rođendani</h3>
          <p data-sr="Uspomene koje ostaju...">Uspomene koje ostaju i nakon što se svećice ugase.</p>
        </div>
      </div>
      <div class="usecaseItem">
        <span class="usecaseIcon"></span>
        <div>
          <h3 data-sr="Konferencije">Konferencije</h3>
          <p data-sr="Sadržaj učesnika...">Sadržaj učesnika prikupljen tokom samog događaja.</p>
        </div>
      </div>
      <div class="usecaseItem">
        <span class="usecaseIcon"></span>
        <div>
          <h3 data-sr="Korporativni događaji">Korporativni događaji</h3>
          <p data-sr="Centralno mesto za timske...">Centralno mesto za timske i poslovne uspomene.</p>
        </div>
      </div>
      <div class="usecaseItem">
        <span class="usecaseIcon"></span>
        <div>
          <h3 data-sr="Svi ostali događaji">Svi ostali događaji</h3>
          <p data-sr="Za događaje van standardnih...">Za događaje van standardnih kategorija — sa istim premium iskustvom.</p>
        </div>
      </div>
    </div>
  </div>

  <script>
    (function() {
      // Postavljanje ID-ja ciljnoj sekciji za skrol
      var target = document.querySelector('.section--soft.premium');
      if (target) target.id = 'kako-radi';

      var ikone = ['fa-heart', 'fa-glass-cheers', 'fa-cake-candles', 'fa-microphone-lines', 'fa-building', 'fa-wand-magic-sparkles'];
      
      document.querySelectorAll('#zasto .usecaseItem').forEach(function(item, i) {
        item.classList.add('item-' + i);
        var iconSpan = item.querySelector('.usecaseIcon');
        if (iconSpan) iconSpan.innerHTML = '<i class="fa-solid ' + ikone[i] + '"></i>';
        
        var contentDiv = item.querySelector('div');
        if (contentDiv && !contentDiv.querySelector('.learn-more')) {
          var a = document.createElement('a');
          a.className = 'learn-more';
          a.href = '#kako-radi'; 
          a.innerHTML = 'Saznaj više →';
          contentDiv.appendChild(a);
        }
      });
    })();
  </script>
</section>

<section class="section" id="paketi">
  <div class="wrap">


    <!-- Naslov i opis sekcije sa data atributima -->
    <h2 class="sectionTitle" data-sr="Paketi" data-en="Packages" data-de="Pakete">
      Paketi
    </h2>
    
    <p class="sectionLead"
       data-sr="Izaberi paket koji ti najviše odgovara. Sve radi preko linka ili QR koda."
       data-en="Choose the package that suits you best. Works via link or QR code."
       data-de="Wähle das passende Paket. Funktioniert über Link oder QR-Code.">
       Izaberi paket koji ti najviše odgovara. Sve radi preko linka ili QR koda.
    </p>

    <!-- Trust/garancija sa data atributima -->
    <div class="pricingTrust">
      <span class="trustIcon">✓</span>
      <p data-sr="Garancija povrata novca — ako na kraju ne iskoristite Digitalnu galeriju na svom događaju, vraćamo vam novac bez pitanja."
         data-en="Money-back guarantee — if you don’t use the Digital Gallery at your event, you get your money back."
         data-de="Geld-zurück-Garantie — wenn Sie die Digital Gallery auf Ihrer Veranstaltung nicht nutzen, erstatten wir Ihr Geld.">
         Garancija povrata novca — ako na kraju ne iskoristite Digitalnu galeriju na svom događaju, vraćamo vam novac bez pitanja.
      </p>
    </div>
<div class="pricingGrid">

  <div class="priceCard">
    <div class="priceHead">
      <div class="priceName" data-sr="Besplatni" data-en="Free" data-de="Kostenlos">Besplatni</div>
      <div class="priceTag" data-sr="Probni" data-en="Trial" data-de="Testversion">Probni</div>
    </div>
    <div class="priceRow">
      <div class="priceValue" data-sr="0" data-en="0" data-de="0">0</div>
      <div class="priceUnit" data-sr="RSD" data-en="€" data-de="€">RSD</div>
    </div>
    <div class="priceMicro" 
         data-sr="Probaj bez obaveze — za test i male događaje." 
         data-en="Try without commitment — for test and small events." 
         data-de="Testen ohne Risiko — für kleine Events.">
      Probaj bez obaveze — za test i male događaje.
    </div>
    <div class="priceList">
      <div class="priceItem" data-sr="Do 50 fajlova (foto/video)" data-en="Up to 50 files" data-de="Bis zu 50 Dateien">Do <b>50</b> fajlova (foto/video)</div>
      <div class="priceItem" data-sr="Galerija aktivna 7 dana" data-en="Active 7 days" data-de="Galerie aktiv 7 Tage">Galerija aktivna <b>7 dana</b></div>
      <div class="priceItem" data-sr="Link + QR kod za goste" data-en="Link + QR code for guests" data-de="Link + QR-Code für Gäste">Link + <b>QR kod</b> za goste</div>
      <div class="priceItem" data-sr="Watermark na sadržaju" data-en="Watermark on content" data-de="Wasserzeichen auf Inhalten"><b>Watermark</b> na sadržaju</div>
      <div class="priceItem" data-sr="Bez preuzimanja cele galerije" data-en="No full download" data-de="Kein vollständiger Download"><b>Bez preuzimanja</b> cele galerije</div>
    </div>
    <div class="priceCta">
      <a class="btn btnGhost btnUpper" href="/landing/registracija?plan=free" data-sr="ISPROBAJ" data-en="TRY" data-de="TESTEN">ISPROBAJ</a>
    </div>
  </div>

  <div class="priceCard">
    <div class="priceHead">
      <div class="priceName" data-sr="Osnovni" data-en="Basic" data-de="Basis">Osnovni</div>
      <div class="priceTag" data-sr="Za manje događaje" data-en="For small events" data-de="Für kleine Events">Za manje događaje</div>
    </div>
    <div class="priceRow">
      <div class="priceValue" data-sr="5.900" data-en="49" data-de="49">5.900</div>
      <div class="priceUnit" data-sr="RSD" data-en="€" data-de="€">RSD</div>
    </div>
    <div class="priceMicro" 
         data-sr="Sve što ti treba da sakupiš uspomene na jednom mestu." 
         data-en="Everything you need to collect memories in one place." 
         data-de="Alles, was Sie brauchen, um Erinnerungen an einem Ort zu sammeln.">
      Sve što ti treba da sakupiš uspomene na jednom mestu.
    </div>
    <div class="priceList">
      <div class="priceItem" data-sr="Do 1.000 fajlova" data-en="Up to 1,000 files" data-de="Bis zu 1.000 Dateien">Do <b>1.000</b> fajlova</div>
      <div class="priceItem" data-sr="Galerija aktivna 30 dana" data-en="Active 30 days" data-de="Galerie aktiv 30 Tage">Galerija aktivna <b>30 dana</b></div>
      <div class="priceItem" data-sr="Preuzimanje cele galerije" data-en="Full gallery download" data-de="Vollständiger Galerie-Download"><b>Preuzimanje cele galerije</b></div>
      <div class="priceItem" data-sr="Privatna / javna galerija" data-en="Private / public gallery" data-de="Private / öffentliche Galerie">Privatna / javna galerija</div>
      <div class="priceItem" data-sr="Prilagodljiva naslovna" data-en="Customizable cover" data-de="Anpassbares Cover">Prilagodljiva naslovna</div>
    </div>
    <div class="priceCta">
      <a class="btn btnGhost btnUpper" href="/landing/registracija?plan=osnovni" data-sr="KREIRAJ DOGAĐAJ" data-en="CREATE EVENT" data-de="EVENT ERSTELLEN">KREIRAJ DOGAĐAJ</a>
    </div>
  </div>

  <div class="priceCard priceCard--featured">
    <div class="priceBadge" style="background-color: #ff00ff; color: white;" data-sr="NAJPOPULARNIJE" data-en="MOST POPULAR" data-de="AM BELIEBTESTEN">NAJPOPULARNIJE</div>
    <div class="priceHead">
      <div class="priceName" data-sr="Standard" data-en="Standard" data-de="Standard">Standard</div>
      <div class="priceTag" data-sr="Najbolji odnos cene" data-en="Best value" data-de="Bestes Preis-Leistungs-Verhältnis">Najbolji odnos cene</div>
    </div>
    <div class="priceRow">
      <div class="priceValue" data-sr="8.900" data-en="75" data-de="75">8.900</div>
      <div class="priceUnit" data-sr="RSD" data-en="€" data-de="€">RSD</div>
    </div>
    <div class="priceMicro" 
         data-sr="Za događaje gde želiš da sve izgleda i radi “premium”." 
         data-en="For events where you want everything to look and work “premium”." 
         data-de="Für Events, bei denen alles “Premium” aussehen und funktionieren soll.">
      Za događaje gde želiš da sve izgleda i radi “premium”.
    </div>
    <div class="priceList">
      <div class="priceItem" data-sr="Do 3.000 fajlova" data-en="Up to 3,000 files" data-de="Bis zu 3.000 Dateien">Do <b>3.000</b> fajlova</div>
      <div class="priceItem" data-sr="Galerija aktivna 60 dana" data-en="Active 60 days" data-de="Galerie aktiv 60 Tage">Galerija aktivna <b>60 dana</b></div>
      <div class="priceItem" data-sr="Live prikaz sadržaja" data-en="Live slideshow" data-de="Live-Präsentation"><b>Live prikaz</b> sadržaja</div>
      <div class="priceItem" data-sr="Brendiranje galerije" data-en="Gallery branding" data-de="Galerie Branding"><b>Brendiranje</b> galerije</div>
      <div class="priceItem" data-sr="Grupno preuzimanje (ZIP)" data-en="Group download (ZIP)" data-de="Gruppen-Download (ZIP)">Grupno preuzimanje (ZIP)</div>
    </div>
    <div class="priceCta">
      <a class="btn btnPrimary btnUpper" href="/landing/registracija?plan=standard" data-sr="KREIRAJ DOGAĐAJ" data-en="CREATE EVENT" data-de="EVENT ERSTELLEN">KREIRAJ DOGAĐAJ</a>
    </div>
  </div>

  <div class="priceCard">
    <div class="priceHead">
      <div class="priceName" data-sr="Premium" data-en="Premium" data-de="Premium">Premium</div>
      <div class="priceTag" data-sr="Za velike i luksuzne evente" data-en="For large & luxury events" data-de="Für große & luxuriöse Events">Za velike i luksuzne evente</div>
    </div>
    <div class="priceRow">
      <div class="priceValue" data-sr="15.220" data-en="129" data-de="129">15.220</div>
      <div class="priceUnit" data-sr="RSD" data-en="€" data-de="€">RSD</div>
    </div>
    <div class="priceMicro" data-sr="Neograničeno fajlova." data-en="Unlimited files." data-de="Unbegrenzt Dateien.">Neograničeno fajlova.</div>
    <div class="priceList">
      <div class="priceItem" data-sr="Neograničeno fajlova" data-en="Unlimited files" data-de="Unbegrenzt"><b>Neograničeno</b> fajlova</div>
      <div class="priceItem" data-sr="Galerija aktivna 365 dana" data-en="Active 365 days" data-de="Galerie aktiv 365 Tage">Galerija aktivna <b>365 dana</b></div>
      <div class="priceItem" data-sr="VIP podrška" data-en="VIP support" data-de="VIP Support">VIP podrška</div>
      <div class="priceItem" data-sr="Bez logo oznaka" data-en="No logos" data-de="Keine Logos">Bez logo oznaka</div>
      <div class="priceItem" data-sr="Prioritetni serveri" data-en="Priority servers" data-de="Prioritätsserver">Prioritetni serveri</div>
    </div>
    <div class="priceCta">
      <a class="btn btnGhost btnUpper" href="/landing/registracija?plan=premium" data-sr="KREIRAJ DOGAĐAJ" data-en="CREATE EVENT" data-de="EVENT ERSTELLEN">KREIRAJ DOGAĐAJ</a>
    </div>
  </div>

</div>

<div class="pricingNote" 
     data-sr="Bez instalacije. Radi na svakom telefonu. Gosti dodaju slike putem linka ili QR koda." 
     data-en="No installation. Works on any phone. Guests upload via link or QR code." 
     data-de="Keine Installation. Funktioniert auf jedem Handy. Gäste laden über Link oder QR-Code hoch.">
  Bez instalacije. Radi na svakom telefonu. Gosti dodaju slike putem linka ili QR koda.
</div>
</div> 
</section>



<section class="section" id="faq">
  <div class="wrap">
    <h2 class="sectionTitle" 
        data-sr="Najčešća pitanja" 
        data-en="Frequently Asked Questions" 
        data-de="Häufig gestellte Fragen">Najčešća pitanja</h2>

    <div class="faqList">
      <div class="faqItem">
        <button class="faqQ" type="button" 
                data-sr="Da li gosti moraju da instaliraju aplikaciju?" 
                data-en="Do guests need to install an app?" 
                data-de="Müssen Gäste eine App installieren?">Da li gosti moraju da instaliraju aplikaciju?</button>
        <div class="faqA" 
             data-sr="Ne. Otvore link ili skeniraju QR kod i odmah mogu da dodaju sadržaj." 
             data-en="No. They just open the link or scan the QR code and can add content immediately." 
             data-de="Nein. Sie öffnen einfach den Link oder scannen den QR-Code und können sofort Inhalte hinzufügen.">Ne. Otvore link ili skeniraju QR kod i odmah mogu da dodaju sadržaj.</div>
      </div>

      <div class="faqItem">
        <button class="faqQ" type="button" 
                data-sr="Kako gosti dodaju fotografije i video?" 
                data-en="How do guests add photos and videos?" 
                data-de="Wie fügen Gäste Fotos und Videos hinzu?">Kako gosti dodaju fotografije i video?</button>
        <div class="faqA" 
             data-sr="Direktno sa telefona — bez naloga i bez registracije." 
             data-en="Directly from their phone — no account and no registration required." 
             data-de="Direkt vom Handy aus — ohne Konto und ohne Registrierung.">Direktno sa telefona — bez naloga i bez registracije.</div>
      </div>

      <div class="faqItem">
        <button class="faqQ" type="button" 
                data-sr="Mogu li da preuzmem celu galeriju?" 
                data-en="Can I download the entire gallery?" 
                data-de="Kann ich die gesamte Galerie herunterladen?">Mogu li da preuzmem celu galeriju?</button>
        <div class="faqA" 
             data-sr="Da. Možeš preuzeti fotografije i video zapise u punom kvalitetu." 
             data-en="Yes. You can download photos and videos in full quality." 
             data-de="Ja. Sie können Fotos und Videos in voller Qualität herunterladen.">Da. Možeš preuzeti fotografije i video zapise u punom kvalitetu.</div>
      </div>

      <div class="faqItem">
        <button class="faqQ" type="button" 
                data-sr="Šta ako neko pošalje neprimeren sadržaj?" 
                data-en="What if someone sends inappropriate content?" 
                data-de="Was ist, wenn jemand unangemessene Inhalte sendet?">Šta ako neko pošalje neprimeren sadržaj?</button>
        <div class="faqA" 
             data-sr="Imaš kontrolu: sadržaj možeš sakriti ili obrisati." 
             data-en="You have control: you can hide or delete any content." 
             data-de="Sie haben die Kontrolle: Sie können Inhalte ausblenden oder löschen.">Imaš kontrolu: sadržaj možeš sakriti ili obrisati.</div>
      </div>

      <div class="faqItem">
        <button class="faqQ" type="button" 
                data-sr="Ako već imamo fotografa, da li ovo ima smisla?" 
                data-en="If we already have a photographer, does this make sense?" 
                data-de="Wenn wir schon einen Fotografen haben, macht das Sinn?">Ako već imamo fotografa, da li ovo ima smisla?</button>
        <div class="faqA" 
             data-sr="Da — dobijaš spontane uglove gostiju i sve na jednom mestu, uz fotografije fotografa." 
             data-en="Yes — you get spontaneous angles from guests and everything in one place, alongside professional photos." 
             data-de="Ja — Sie erhalten spontane Blickwinkel der Gäste i alles an einem Ort, ergänzend zu den Profi-Fotos.">Da — dobijaš spontane uglove gostiju i sve na jednom mestu, uz fotografije fotografa.</div>
      </div>

      <div class="faqItem">
        <button class="faqQ" type="button" 
                data-sr="Kako se naplaćuje usluga?" 
                data-en="How is the service charged?" 
                data-de="Wie wird der Service abgerechnet?">Kako se naplaćuje usluga?</button>
        <div class="faqA" 
             data-sr="Plaćanje je po događaju i zavisi od izabranog paketa. Nakon uplate galerija se aktivira." 
             data-en="Payment is per event and depends on the chosen package. The gallery is activated after payment." 
             data-de="Die Zahlung erfolgt pro Event und hängt vom gewählten Paket ab. Die Galerie wird nach der Zahlung aktiviert.">
          Plaćanje je po događaju i zavisi od izabranog paketa. Nakon izbora paketa dobijate uputstva za plaćanje, a po potvrdi uplate galerija se aktivira i dobijate link i QR kod za goste.
        </div>
      </div>
    </div>
  </div>
</section>

<script>
// 1. Logika za FAQ
(function initFaq(){
  var items = document.querySelectorAll('.faqItem');
  if(!items || !items.length) return;
  items.forEach(function(item){
    var btn = item.querySelector('.faqQ');
    if(!btn) return;
    btn.addEventListener('click', function(){
      item.classList.toggle('active');
    });
  });
})();

// 2. Pametna Navigacija
function handleStartClick() {
  var token = localStorage.getItem('token');
  window.location.href = token ? '/dashboard' : '/landing/user-register';
}
// 3. Osvežavanje menija i Prevod Kontakt Sekcije
window.addEventListener('DOMContentLoaded', function() {
    var token = localStorage.getItem('token');
    var loginLink = document.querySelector('a[href="/landing/login"]');
    
    if (token && loginLink) {
        loginLink.href = '/dashboard';
        loginLink.textContent = ' DASHBOARD';
        loginLink.style.color = '#E52787';
    }
    
    // Inicijalno renderovanje na osnovu sačuvanog jezika ili defaulta
    var savedLang = localStorage.getItem('userLang') || 'sr';
    document.documentElement.lang = savedLang;
    renderContactSection();
});
function renderContactSection() {
    var footer = document.querySelector('.siteFooter');
    if (!footer) return;

    var currentLang = document.documentElement.lang || 'sr';
    var t = {
        sr: { title: "Kontaktirajte nas", heading: "Pretvorite uspomene u trajnu Digitalnu Galeriju", desc: "Recite nam par detalja o događaju i mi vam šaljemo predlog galerije i paketa u roku od 24h.", hoursLabel: "Radno vreme:", hours: "Pon–pet:", emailLabel: "Email:", send: "POŠALJI UPIT", start: "ZAPOČNI BESPLATNO", reply: "Odgovaramo istog dana" },
        en: { title: "Contact Us", heading: "Turn your memories into a lasting Digital Gallery", desc: "Tell us a few details about your event and we will send a gallery and package proposal within 24h.", hoursLabel: "Working hours:", hours: "Mon–Fri:", emailLabel: "Email:", send: "SEND INQUIRY", start: "START FOR FREE", reply: "We reply the same day" },
        de: { title: "Kontakt", heading: "Verwandeln Sie Ihre Erinnerungen in eine dauerhafte Digitale Galerie", desc: "Teilen Sie uns einige Details über Ihre Veranstaltung mit und wir senden Ihnen innerhalb von 24 Stunden einen Galerie- und Paketvorschlag.", hoursLabel: "Arbeitszeit:", hours: "Mo–Fr:", emailLabel: "E-Mail:", send: "ANFRAGE SENDEN", start: "KOSTENLOS STARTEN", reply: "Antwort am selben Tag" }
    };

    var L = t[currentLang] || t.sr;
    var section = document.getElementById('kontakt');
    
    if (!section) {
        section = document.createElement('section');
        section.id = "kontakt";
        section.style.maxWidth = '1100px';
        section.style.margin = '60px auto';
        section.style.padding = '0 20px';
        section.style.fontFamily = "'Inter', sans-serif";
        footer.parentNode.insertBefore(section, footer);
    }

    var pinkGradient = 'linear-gradient(135deg, #E52787, #ff4fa3)';
    var textColor = '#1a1a1a';
    var purple = '#7B38D8';

    var html = '<h2 class="contact-main-title" style="font-size:32px; font-weight:800; margin-bottom:30px; text-align:left; color:' + textColor + ';">' + L.title + '</h2>' +
        '<div class="contact-flex-container" style="display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:40px;">' +
          '<div style="flex:1; min-width:300px;">' +
            '<h3 style="font-size:22px; font-weight:700; margin-bottom:15px; color:' + textColor + '; line-height:1.3;">' + L.heading + '</h3>' +
            '<p style="font-size:16px; color:#444; margin-bottom:25px; line-height:1.5;">' + L.desc + '</p>' +
            '<div style="line-height:1.6;">' +
              '<p style="margin:0; font-size:17px; color:' + textColor + ';">' + L.hoursLabel + '</p>' +
              '<p style="margin:0 0 10px 0; font-size:15px; color:' + textColor + ';"><strong>' + L.hours + '</strong> 08–16h</p>' +
              '<p style="margin:0; font-size:16px; color:' + textColor + ';">' + L.emailLabel + ' <a href="mailto:digitalcreativeworld@gmail.com" style="color:' + purple + '; text-decoration:none; font-weight:600;">digitalcreativeworld@gmail.com</a></p>' +
            '</div>' +
          '</div>' +
          '<div class="contact-right-side" style="display:flex; flex-direction:column; gap:12px; min-width:320px; justify-content:center;">' +
            '<a href="mailto:digitalcreativeworld@gmail.com?subject=Upit" style="width:100%; padding:16px; background:' + pinkGradient + '; color:#fff; text-align:center; text-decoration:none; border-radius:12px; font-weight:700; font-size:15px; text-transform:uppercase; box-shadow:0 6px 18px rgba(229, 39, 135, 0.3); display:block;">' + L.send + '</a>' +
            '<a href="/landing/registracija?plan=free" style="width:100%; padding:16px; background:#fff; color:#333; text-align:center; text-decoration:none; border-radius:12px; font-weight:700; font-size:15px; border:1px solid #ccc; text-transform:uppercase; display:block;">' + L.start + '</a>' +
            '<p style="font-size:16px; color:' + textColor + '; font-weight:600; text-align:center; margin-top:5px;">' + L.reply + '</p>' +
          '</div>' +
        '</div>' +
        '<style>' +
          '@media (max-width: 768px) {' +
            '.contact-main-title { text-align: center !important; }' +
            '.contact-flex-container { justify-content: center !important; text-align: center !important; gap: 20px !important; }' +
            '.contact-flex-container div { align-items: center !important; width: 100% !important; }' +
            '.contact-right-side { margin-top: 40px !important; }' +
          '}' +
        '</style>';

    section.innerHTML = html;
}

function changeLanguage(lang) {
    localStorage.setItem('userLang', lang); 
    document.documentElement.lang = lang;
    
    document.querySelectorAll('[data-' + lang + ']').forEach(function(el) {
        var text = el.getAttribute('data-' + lang);
        if (text) el.innerHTML = text; 
    });

    renderContactSection();
}

document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function() {
        var initialLang = localStorage.getItem('userLang') || 'sr';
        changeLanguage(initialLang);
    }, 100);
});

function prikaziPravno(id) {
    document.querySelectorAll('section').forEach(s => s.style.display = 'none');
    const target = document.getElementById(id);
    if(target) {
        target.style.display = 'block';
        window.scrollTo(0, 0);
        
        // DODAJ OVO: Automatski pokreni prevod za tu sekciju čim se otvori
        const trenutniJezik = localStorage.getItem('userLang') || 'rs';
        changeLanguage(trenutniJezik);
    }
} 
function changeLanguage(lang) {
    if (!lang) return;
    const l = lang.toLowerCase();
    const mappedLang = (l === 'rs') ? 'sr' : l; // Mapira rs na sr za data atribute
    localStorage.setItem('userLang', l);
    document.documentElement.lang = mappedLang;

    // Prevod elemenata koji koriste data-sr, data-en, data-de
    document.querySelectorAll('[data-' + mappedLang + ']').forEach(el => {
        el.innerHTML = el.getAttribute('data-' + mappedLang);
    });

    // Upravljanje blokovima teksta
    const allBlocks = [
        'lang-sr-block', 'lang-en-block', 'lang-de-block',
        'lang-sr-block-terms', 'lang-en-block-terms', 'lang-de-block-terms'
    ];

    allBlocks.forEach(id => {
        const el = document.getElementById(id);
        if (el) el.style.display = 'none';
    });

    const priv = document.getElementById('lang-' + mappedLang + '-block');
    if (priv) priv.style.display = 'block';

    const terms = document.getElementById('lang-' + mappedLang + '-block-terms');
    if (terms) terms.style.display = 'block';

    if (typeof renderContactSection === 'function') renderContactSection();
}
function updatePlaceholders(lang) {
    const inputs = document.querySelectorAll('[data-' + lang + '-placeholder]');
    inputs.forEach(input => {
        const translation = input.getAttribute('data-' + lang + '-placeholder');
        if (translation) {
            input.setAttribute('placeholder', translation);
        }
    });
}

// Primer integracije u tvoj postojeći sistem promene jezika
// Pozovi updatePlaceholders(lang) svaki put kada korisnik klikne na zastavicu/dugme za jezik
document.querySelectorAll('.lang-switcher').forEach(btn => {
    btn.addEventListener('click', function() {
        const selectedLang = this.getAttribute('data-lang'); // npr. 'en', 'sr', 'de'
        updatePlaceholders(selectedLang);
    });
});

// Inicijalno pokretanje za podrazumevani jezik (npr. srpski)
updatePlaceholders('sr');

</script>
<section class="section" id="privatnost" style="display:none;">
    <div class="wrap">
        <h1 data-sr="POLITIKA PRIVATNOSTI" data-en="PRIVACY POLICY" data-de="DATENSCHUTZERKLÄRUNG">POLITIKA PRIVATNOSTI</h1>
        
        <p data-sr="<strong>DIGITAL CREATIVE WORLD DOO PASJAČA</strong> (u daljem tekstu: Platforma) posvećena je zaštiti vaše privatnosti u skladu sa Zakonom o zaštiti podataka o ličnosti Republike Srbije (ZZPL)." 
           data-en="<strong>DIGITAL CREATIVE WORLD DOO PASJAČA</strong> (hereinafter: the Platform) is committed to protecting your privacy in accordance with the Law on Personal Data Protection of Serbia." 
           data-de="<strong>DIGITAL CREATIVE WORLD DOO PASJAČA</strong> (nachfolgend: Plattform) verpflichtet sich zum Schutz Ihrer Privatsphäre gemäß dem serbischen Datenschutzgesetz (ZZPL).">
           <strong>DIGITAL CREATIVE WORLD DOO PASJAČA</strong> posvećena je zaštiti vaše privatnosti...
        </p>

        <h3 data-sr="I. Podaci o rukovaocu" data-en="I. Data Controller" data-de="I. Verantwortlicher">I. Podaci o rukovaocu</h3>
        <p data-sr="Poslovno ime: DIGITAL CREATIVE WORLD DOO PASJAČA<br>Adresa: Solunskih boraca 11, Pasjača, 18000 Niš<br>MB: 22120514 | PIB: 115150250<br>Email: <a href='mailto:jelenadinic2012@gmail.com'>jelenadinic2012@gmail.com</a> | Tel: 0641396500" 
           data-en="Legal Name: DIGITAL CREATIVE WORLD DOO PASJAČA<br>Address: Solunskih boraca 11, Pasjača, 18000 Niš<br>Company ID: 22120514 | VAT: 115150250<br>Email: <a href='mailto:jelenadinic2012@gmail.com'>jelenadinic2012@gmail.com</a> | Phone: 0641396500" 
           data-de="Firmenname: DIGITAL CREATIVE WORLD DOO PASJAČA<br>Adresse: Solunskih boraca 11, Pasjača, 18000 Niš<br>Registernummer: 22120514 | USt-IdNr.: 115150250<br>Email: <a href='mailto:jelenadinic2012@gmail.com'>jelenadinic2012@gmail.com</a> | Tel: 0641396500">
           Poslovno ime: DIGITAL CREATIVE WORLD DOO PASJAČA...
        </p>

        <h3 data-sr="II. Podaci i kolačići" data-en="II. Data and Cookies" data-de="II. Daten und Cookies">II. Podaci i kolačići</h3>
        <p data-sr="Prikupljamo ime, prezime, email adresu, broj telefona, podatke o porudžbini i IP adresu. Koristimo tehničke i analitičke kolačiće koje korisnik može kontrolisati kroz podešavanja pregledača." 
           data-en="We collect name, surname, email, phone number, order details, and IP address. We use technical and analytical cookies which users can control through browser settings." 
           data-de="Wir erheben Name, Vorname, E-Mail-Adresse, Telefonnummer, Bestelldaten und IP-Adresse. Wir verwenden technische und analytische Cookies.">
           Prikupljamo podatke o korisniku i koristimo kolačiće...
        </p>

        <h3 data-sr="III. Svrha i pravni osnov obrade" data-en="III. Purpose and Legal Basis" data-de="III. Zweck und Rechtsgrundlage">III. Svrha i pravni osnov obrade</h3>
        <p data-sr="Podaci se obrađuju radi izvršenja ugovora, obrade plaćanja i ispunjenja zakonskih obaveza. Pravni osnov je ugovor, zakon i legitimni interes Platforme u skladu sa ZZPL." 
           data-en="Data is processed for contract execution, payment processing, and legal obligations. Legal basis is contract, law, and legitimate interest in accordance with ZZPL." 
           data-de="Die Verarbeitung erfolgt zur Vertragserfüllung, Zahlungsabwicklung und Erfüllung gesetzlicher Pflichten gemäß ZZPL.">
           Podaci se obrađuju radi izvršenja ugovora...
        </p>

        <h3 data-sr="IV. Primaoci i prenos podataka" data-en="IV. Recipients and Data Transfer" data-de="IV. Empfänger und Datentransfer">IV. Primaoci i prenos podataka</h3>
        <p data-sr="Podaci se dele sa bankom, hosting provajderom i državnim organima po zakonu. Treća lica obrađuju podatke isključivo po našem nalogu u skladu sa ZZPL. Podaci se mogu obrađivati na serverima van RS uz mere zaštite." 
           data-en="Data is shared with the bank, hosting provider, and state authorities. Third parties process data solely by our order. Data may be processed on servers outside Serbia with protection measures." 
           data-de="Daten werden an Banken, Hosting-Provider und Behörden weitergegeben. Dritte verarbeiten Daten ausschließlich nach unserer Weisung.">
           Podaci se dele sa bankom, hosting provajderom i nadležnim organima...
        </p>

        <h3 data-sr="V. Bezbednost plaćanja" data-en="V. Payment Security" data-de="V. Zahlungssicherheit">V. Bezbednost plaćanja</h3>
        <p data-sr="Poverljive informacije o platnoj kartici prenose se kriptovano putem SSL protokola. Podaci o kartici nisu dostupni našem sistemu i ne čuvaju se na našim serverima." 
           data-en="Confidential credit card information is transmitted encrypted via SSL. Card data is not accessible to our system." 
           data-de="Vertrauliche Kreditkarteninformationen werden verschlüsselt über SSL übertragen. Kartendaten sind für unser System nicht zugänglich.">
           Poverljive informacije o platnoj kartici...
        </p>

        <h3 data-sr="VI. Čuvanje podataka" data-en="VI. Data Retention" data-de="VI. Datenspeicherung">VI. Čuvanje podataka</h3>
        <p data-sr="Podaci o transakcijama čuvaju se u skladu sa poreskim i računovodstvenim propisima RS. Podaci naloga se čuvaju do zahteva za brisanje." 
           data-en="Transaction data is stored according to Serbian tax and accounting regulations. Account data is kept until deletion request." 
           data-de="Transaktionsdaten werden gemäß den serbischen Steuer- und Buchhaltungsvorschriften gespeichert.">
           Podaci o transakcijama čuvaju se u skladu sa zakonom...
        </p>

        <h3 data-sr="VII. Vaša prava i Poverenik" data-en="VII. Your Rights" data-de="VII. Ihre Rechte">VII. Vaša prava i Poverenik</h3>
        <ul data-sr="<li>Pravo na uvid, ispravku, brisanje, ograničenje obrade i prenosivost podataka.</li><li>Pravo na prigovor i pritužbu Povereniku za informacije od javnog značaja i zaštitu podataka o ličnosti RS.</li>" 
            data-en="<li>Right to access, correction, deletion, restriction, and data portability.</li><li>Right to object and lodge a complaint with the Serbian Commissioner (Poverenik).</li>" 
            data-de="<li>Recht auf Auskunft, Berichtigung, Löschung, Einschränkung und Datenübertragbarkeit.</li><li>Beschwerderecht bei der serbischen Aufsichtsbehörde (Poverenik).</li>">
            <li>Korisnici imaju sva prava u skladu sa ZZPL...</li>
        </ul>
<h3 data-sr="VIII. Kontakt" data-en="VIII. Contact" data-de="VIII. Kontakt">VIII. Kontakt</h3>
<p data-sr="Zahtevi se šalju na: <a href='mailto:jelenadinic2012@gmail.com'>jelenadinic2012@gmail.com</a>. Odgovaramo u roku od 7 dana, a najkasnije 14 dana za složene zahteve." 
   data-en="Requests: <a href='mailto:jelenadinic2012@gmail.com'>jelenadinic2012@gmail.com</a>. We respond within 7 days, or 14 days for complex requests." 
   data-de="Anfragen: <a href='mailto:jelenadinic2012@gmail.com'>jelenadinic2012@gmail.com</a>. Wir antworten innerhalb von 7 Tagen, maximal 14 Tagen bei komplexen Anfragen.">
   Zahtevi se podnose putem email adrese...

        </p>
    </div>
</section>
<section class="section" id="uslovi" style="display:none;">
    <div class="wrap">
        <h1 data-sr="USLOVI KORIŠĆENJA" data-en="TERMS OF USE" data-de="NUTZUNGSBEDINGUNGEN">USLOVI KORIŠĆENJA</h1>
        
        <p data-sr="Dobrodošli na platformu <strong>DIGITAL CREATIVE WORLD DOO PASJAČA</strong>. Korišćenjem naše platforme prihvatate sledeće uslove:" 
           data-en="Welcome to the <strong>DIGITAL CREATIVE WORLD DOO PASJAČA</strong> platform. By using our platform, you accept the following terms:" 
           data-de="Willkommen auf der Plattform von <strong>DIGITAL CREATIVE WORLD DOO PASJAČA</strong>. Durch die Nutzung unserer Plattform akzeptieren Sie die folgenden Bedingungen:">
           Dobrodošli na platformu <strong>DIGITAL CREATIVE WORLD DOO PASJAČA</strong>...
        </p>

        <h3 data-sr="I. Prihvatanje uslova" data-en="I. Acceptance of Terms" data-de="I. Annahme der Bedingungen">I. Prihvatanje uslova</h3>
        <p data-sr="Korišćenjem sajta ili naših usluga potvrđujete da ste pročitali i razumeli ove Uslove korišćenja i da ih prihvatate u celosti." 
           data-en="By using the site or our services, you confirm that you have read and understood these Terms of Use and accept them in full." 
           data-de="Durch die Nutzung der Website oder unserer Dienste bestätigen Sie, dass Sie diese Nutzungsbedingungen gelesen und verstanden haben und sie vollständig akzeptieren.">
           Korišćenjem sajta potvrđujete da prihvatate uslove...
        </p>

        <h3 data-sr="II. Registracija i nalog" data-en="II. Registration and Account" data-de="II. Registrierung und Konto">II. Registracija i nalog</h3>
        <p data-sr="Korisnici su odgovorni za tačnost podataka i čuvanje poverljivosti pristupnih informacija. Platforma može suspendovati naloge u slučaju kršenja Uslova." 
           data-en="Users are responsible for data accuracy and confidentiality of access info. The platform may suspend accounts in case of breach of Terms." 
           data-de="Nutzer sind für die Richtigkeit der Daten und die Geheimhaltung der Zugangsdaten verantwortlich. Die Plattform kann Konten bei Verstößen sperren.">
           Korisnici su odgovorni za tačnost podataka...
        </p>

        <h3 data-sr="III. Korišćenje platforme" data-en="III. Use of Platform" data-de="III. Nutzung der Plattform">III. Korišćenje platforme</h3>
        <p data-sr="Platforma je namenjena za ličnu ili poslovnu upotrebu u skladu sa zakonima RS. Zabranjene su nezakonite aktivnosti ili kršenje prava trećih lica." 
           data-en="The platform is intended for personal or business use in accordance with Serbian laws. Illegal activities or infringement of third-party rights are prohibited." 
           data-de="Die Plattform ist für die private oder geschäftliche Nutzung gemäß serbischem Recht bestimmt. Illegale Aktivitäten sind untersagt.">
           Platforma je namenjena za ličnu ili poslovnu upotrebu...
        </p>

        <h3 data-sr="IV. Plaćanja i reklamacije" data-en="IV. Payments and Complaints" data-de="IV. Zahlungen und Reklamationen">IV. Plaćanja i reklamacije</h3>
        <p data-sr="Plaćanja se vrše putem bezbednih kanala banke. Korisnik ima pravo na reklamaciju u roku od 14 dana od dana transakcije." 
           data-en="Payments are made through secure bank channels. The user has the right to a complaint within 14 days of the transaction." 
           data-de="Zahlungen erfolgen über sichere Bankkanäle. Der Nutzer hat ein Reklamationsrecht innerhalb von 14 Tagen nach der Transaktion.">
           Plaćanja se vrše putem bezbednih kanala...
        </p>

        <h3 data-sr="V. Odgovornost" data-en="V. Liability" data-de="V. Haftung">V. Odgovornost</h3>
        <p data-sr="Platforma pruža usluge 'onako kako jesu' i nije odgovorna za direktne ili indirektne štete nastale korišćenjem sajta, osim u slučajevima predviđenim zakonom." 
           data-en="The platform provides services 'as is' and is not liable for direct or indirect damages arising from the use of the site, except as provided by law." 
           data-de="Die Plattform stellt Dienste 'wie besehen' zur Verfügung und haftet nicht für Schäden, die aus der Nutzung der Website entstehen, sofern gesetzlich nicht anders vorgeschrieben.">
           Platforma pruža usluge 'onako kako jesu'...
        </p>

        <h3 data-sr="VI. Prava intelektualne svojine" data-en="VI. Intellectual Property Rights" data-de="VI. Geistiges Eigentum">VI. Prava intelektualne svojine</h3>
        <p data-sr="Sav sadržaj na platformi vlasništvo je DIGITAL CREATIVE WORLD DOO PASJAČA. Zabranjeno je neovlašćeno kopiranje, distribucija ili korišćenje." 
           data-en="All content on the platform is the property of DIGITAL CREATIVE WORLD DOO PASJAČA. Unauthorized copying or distribution is prohibited." 
           data-de="Alle Inhalte auf der Plattform sind Eigentum von DIGITAL CREATIVE WORLD DOO PASJAČA. Unbefugtes Kopieren oder Verteilen ist untersagt.">
           Sav sadržaj na platformi je zaštićen...
        </p>

        <h3 data-sr="VII. Izmena uslova" data-en="VII. Modification of Terms" data-de="VII. Änderung der Bedingungen">VII. Izmena uslova</h3>
        <p data-sr="Platforma zadržava pravo da u bilo kom trenutku menja Uslove korišćenja. Promene stupaju na snagu objavom na sajtu." 
           data-en="The platform reserves the right to modify the Terms of Use at any time. Changes take effect upon publication on the site." 
           data-de="Die Plattform behält sich das Recht vor, die Nutzungsbedingungen jederzeit zu ändern. Änderungen treten mit der Veröffentlichung in Kraft.">
           Platforma zadržava pravo da menja Uslove...
        </p>

        <h3 data-sr="VIII. Kontakt" data-en="VIII. Contact" data-de="VIII. Kontakt">VIII. Kontakt</h3>
        <p data-sr="Kontakt: <a href='mailto:jelenadinic2012@gmail.com'>jelenadinic2012@gmail.com</a>. Odgovaramo u roku od 7 dana, a najkasnije 14 dana za složene zahteve." 
           data-en="Contact: <a href='mailto:jelenadinic2012@gmail.com'>jelenadinic2012@gmail.com</a>. We respond within 7 to 14 days." 
           data-de="Kontakt: <a href='mailto:jelenadinic2012@gmail.com'>jelenadinic2012@gmail.com</a>. Wir antworten innerhalb von 7 bis 14 Tagen.">
           Za pitanja nas kontaktirajte putem emaila...
        </p>
    </div>
</section>


<style>
    .reklamacija-form-container {
        padding: 30px;
        background: #fff;
        border-radius: 12px;
        max-width: 650px;
        margin: 0 auto 50px;
        box-shadow: 0 6px 20px rgba(0,0,0,0.08);
        font-family: sans-serif;
        box-sizing: border-box;
        width: 95%;
    }
    .reklamacija-form-container label {
        display: block;
        margin-bottom: 6px;
        font-weight: 600;
        color: #333;
    }
    .reklamacija-form-container input,
    .reklamacija-form-container textarea {
        width: 100%;
        padding: 12px;
        border: 1px solid #ccc;
        border-radius: 6px;
        transition: border-color 0.3s, box-shadow 0.3s;
        margin-bottom: 20px;
        box-sizing: border-box;
    }
    .reklamacija-form-container input:focus,
    .reklamacija-form-container textarea:focus {
        border-color: #7a4fff;
        box-shadow: 0 0 5px rgba(122, 79, 255, 0.4);
        outline: none;
    }
    .reklamacija-form-container button {
        background: #7a4fff;
        color: #fff;
        padding: 14px;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        width: 100%;
        cursor: pointer;
        transition: background 0.3s;
        font-weight: bold;
    }
    .reklamacija-form-container button:hover {
        background: #612ed6;
    }
</style>


<section class="section" id="reklamacije" style="display:none;">
    <div class="wrap" style="margin-bottom: 40px;">
        <h1 data-sr="REKLAMACIJE I POVRAĆAJ SREDSTAVA" data-en="COMPLAINTS AND REFUNDS" data-de="REKLAMATIONEN UND RÜCKERSTATTUNG">REKLAMACIJE I POVRAĆAJ SREDSTAVA</h1>
        
        <h3 data-sr="1. Pravo na reklamaciju i uslovi" data-en="1. Right to Complaint" data-de="1. Reklamationsrecht">1. Pravo na reklamaciju i uslovi</h3>
        <p data-sr="Korisnik može podneti reklamaciju u roku od 14 dana od dana kupovine usluge ako: pristup digitalnom sadržaju nije omogućen, postoje trajne tehničke smetnje na strani Platforme, ili sadržaj koji je primljen ne odgovara opisu usluge." 
           data-en="The user may submit a complaint within 14 days if access is not enabled or content doesn't match description." 
           data-de="Der Nutzer kann innerhalb von 14 Tagen eine Reklamation einreichen.">
           Korisnik može podneti reklamaciju u roku od 14 dana...
        </p>

        <h3 data-sr="2. Rokovi za rešavanje reklamacije" data-en="2. Resolution Deadlines" data-de="2. Bearbeitungsfristen">2. Rokovi za rešavanje reklamacije</h3>
        <p data-sr="Rukovalac potvrđuje prijem reklamacije odmah. Odgovor o ishodu dostavljamo u roku od 8 dana, a reklamacija se rešava u roku od 14 dana. Za složene zahteve rok može biti produžen do 30 dana." 
           data-en="We confirm receipt immediately. Response within 8 days, resolution within 14-30 days." 
           data-de="Wir antworten innerhalb von 8 Tagen, Lösung innerhalb von 14-30 Tagen.">
           Rukovalac potvrđuje prijem reklamacije odmah...
        </p>

        <h3 data-sr="3. Povraćaj sredstava" data-en="3. Refunds" data-de="3. Rückerstattung">3. Povraćaj sredstava</h3>
        <p data-sr="U slučaju odobrene reklamacije ili otkazivanja usluge, povraćaj sredstava vrši se isključivo putem kartica VISA, EC/MC i Maestro, na račun korisnika." 
           data-en="Refunds are issued exclusively via VISA, EC/MC, and Maestro to the cardholder's account." 
           data-de="Rückerstattungen erfolgen ausschließlich über VISA, EC/MC und Maestro.">
           Povraćaj sredstava vrši se isključivo putem kartica...
        </p>

        <h3 data-sr="4. Pravo na odustanak od ugovora" data-en="4. Right of Withdrawal" data-de="4. Widerrufsrecht">4. Pravo na odustanak od ugovora</h3>
        <p data-sr="Korisnik gubi pravo na odustanak od ugovora bez navođenja razloga kada započne izvršenje usluge (prvi pristup digitalnom sadržaju), u skladu sa čl. 37 Zakona o zaštiti potrošača." 
           data-en="The user loses the right to withdraw without giving a reason once the service execution begins." 
           data-de="Der Nutzer verliert das Widerrufsrecht, sobald die Ausführung der Dienstleistung beginnt.">
           Korisnik gubi pravo na odustanak od ugovora...
        </p>
    </div>

    <div class="reklamacija-form-container">
        <h2 style="margin-bottom: 20px; font-size: 24px; color: #333;" data-sr="Obrazac za reklamaciju" data-en="Complaint Form" data-de="Reklamationsformular">Obrazac za reklamaciju</h2>
        
        <form action="https://formspree.io/f/xvgzlowy" method="POST" id="reklamacijaForm">
            <input type="hidden" name="_next" value="https://odklikadoslika.rs">
            <input type="hidden" name="_subject" value="Nova reklamacija: Digital Creative World">

            <label data-sr="Ime i prezime korisnika:" data-en="User Full Name:" data-de="Name des Benutzers:">Ime i prezime korisnika:</label>
            <input type="text" name="ime_prezime" required placeholder="Puno ime i prezime..." data-sr-placeholder="Puno ime i prezime..." data-en-placeholder="Full name..." data-de-placeholder="Vollständiger Name...">

            <label data-sr="Email adresa:" data-en="Email Address:" data-de="E-Mail-Adresse:">Email adresa:</label>
            <input type="email" name="email" required placeholder="Vaša email adresa..." data-sr-placeholder="Vaša email adresa..." data-en-placeholder="Your email address..." data-de-placeholder="Ihre E-Mail-Adresse...">

            <label data-sr="Broj porudžbine/usluge:" data-en="Order Number:" data-de="Bestellnummer:">Broj porudžbine/usluge:</label>
            <input type="text" name="broj_porudzbine" required placeholder="Unesite ID porudžbine..." data-sr-placeholder="Unesite ID porudžbine..." data-en-placeholder="Enter order ID..." data-de-placeholder="Bestell-ID eingeben...">

            <label data-sr="Opis reklamacije i razloga (obavezno):" data-en="Description and Reasons (required):" data-de="Beschreibung und Gründe (erforderlich):">Opis reklamacije i razloga (obavezno):</label>
            <textarea name="poruka" rows="5" required placeholder="Navedite tačan razlog reklamacije..." data-sr-placeholder="Navedite tačan razlog reklamacije..." data-en-placeholder="Please state the exact reason for the complaint..." data-de-placeholder="Geben Sie den genauen Grund für die Reklamation an..."></textarea>

            <button type="submit" data-sr="Pošalji reklamaciju" data-en="Submit Complaint" data-de="Reklamation absenden">
                Pošalji reklamaciju
            </button>
        </form>


        <div style="margin-top: 25px; text-align: center; border-top: 1px solid #eee; padding-top: 20px;">
            <p style="font-size: 14px; color: #666;" data-sr="Za reklamacije možete nam se obratiti i direktno putem emaila:" data-en="You can also contact us directly via email:" data-de="Kontaktieren Sie uns direkt per E-Mail:">
                Za reklamacije možete nam se obratiti i direktno putem emaila:
            </p>
            <a href="mailto:jelenadinic2012@gmail.com" style="color: #7a4fff; font-weight: bold; text-decoration: none; font-size: 16px;">
                jelenadinic2012@gmail.com
            </a>
        </div>
    </div>
</section>
<footer class="siteFooter">
  <div class="wrap footerGrid">

    <div class="footerCol footerBrand">
      <div class="footerLogo">Digital Creative World</div>
      <p class="footerTagline" 
         data-sr="Uhvatite svaki osmeh." 
         data-en="Capture every smile." 
         data-de="Halten Sie jedes Lächeln fest.">Uhvatite svaki osmeh.</p>
    </div>

    <div class="footerCol">
      <h4 data-sr="Opšte" data-en="General" data-de="Allgemein">Opšte</h4>
      <a href="/landing" data-sr="Početna" data-en="Home" data-de="Startseite">Početna</a>
      <a href="/landing#paketi" data-sr="Cene" data-en="Pricing" data-de="Preise">Cene</a>
      <a href="/landing#faq" data-sr="Najčešća pitanja" data-en="FAQ" data-de="FAQ">Najčešća pitanja</a>
      <a href="/landing#kontakt" data-sr="Kontakt" data-en="Contact" data-de="Kontakt">Kontakt</a>
    </div>

    <div class="footerCol">
      <h4 data-sr="Događaji" data-en="Events" data-de="Events">Događaji</h4>
      <a href="#" data-sr="Venčanja" data-en="Weddings" data-de="Hochzeiten">Venčanja</a>
      <a href="#" data-sr="Rođendani" data-en="Birthdays" data-de="Geburtstage">Rođendani</a>
      <a href="#" data-sr="Proslave" data-en="Celebrations" data-de="Feiern">Proslave</a>
      <a href="#" data-sr="Korporativni događaji" data-en="Corporate events" data-de="Firmen-Events">Korporativni događaji</a>
      <a href="#" data-sr="Konferencije" data-en="Conferences" data-de="Konferenzen">Konferencije</a>
    </div>

    <div class="footerCol">
      <h4 data-sr="Pravno" data-en="Legal" data-de="Rechtliches">Pravno</h4>
      <a href="javascript:void(0)" onclick="prikaziPravno('privatnost')" data-sr="Politika privatnosti" data-en="Privacy Policy" data-de="Datenschutzerklärung">Politika privatnosti</a>
      <a href="javascript:void(0)" onclick="prikaziPravno('uslovi')" data-sr="Uslovi korišćenja" data-en="Terms of Service" data-de="Nutzungsbedingungen">Uslovi korišćenja</a>
      <a href="javascript:void(0)" onclick="prikaziPravno('reklamacije')" data-sr="Reklamacije" data-en="Complaints" data-de="Reklamationen">Reklamacije</a>
      <a href="mailto:digitalcreativeworld@gmail.com">Kontakt: digitalcreativeworld@gmail.com</a>
    </div>

  </div>

  <div class="footerBottom" 
       data-sr="© 2026 Digital Creative World. Sva prava zadržana." 
       data-en="© 2026 Digital Creative World. All rights reserved." 
       data-de="© 2026 Digital Creative World. Alle Rechte vorbehalten.">
    © 2026 Digital Creative World. Sva prava zadržana.
  </div>
</footer>
`;

  res
    .status(200)
    .set("Content-Type", "text/html; charset=utf-8")
    .set("Content-Disposition", "inline")
    .send(
      landingPage({
        pageTitle: "Digital Creative World – Landing",
        active: "home",
        bodyHtml,
      })
    );
});



// =========================
// 1. REGISTRACIJA KORISNIKA (STRANICA) - FIKSIRANO SA NOVIM DIZAJNOM
// =========================
app.get("/landing/user-register", (req, res) => {
  res.setHeader("Content-Type", "text/html; charset=utf-8");
  res.send(
    landingPage({
      pageTitle: "Otvori nalog – Digital Creative World",
      active: "",
      bodyHtml: `
<style>
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

  .premium-card {
    font-family: 'Poppins', sans-serif;
    background: #ffffff;
    padding: 15px 40px; 
    border-radius: 32px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.05);
    width: 100%;
    max-width: 400px;
    text-align: center;
    border: 1px solid #f8f8f8;
    margin: 20px auto;
  }

  .brand-header { display: none; }

  .form-title {
    font-size: 26px;
    font-weight: 700;
    color: #000;
    margin-bottom: 5px;
  }

  .input-container {
    text-align: left;
    margin-bottom: 4px;
  }

  .input-container label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-bottom: 2px;
  }

  .input-container input {
    width: 100%;
    padding: 10px 14px;
    border: none;
    border-radius: 10px;
    background: #e8f0fe;
    font-size: 15px;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
  }

  .pass-wrapper { position: relative; }

  .eye-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    color: #bbb;
    cursor: pointer;
    display: flex;
    align-items: center;
    border: none;
    background: none;
    padding: 0;
  }

  .main-submit, .btn-nazad {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 320px;
    height: 42px;
    margin: 8px auto;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    cursor: pointer;
    box-sizing: border-box;
    transition: 0.3s;
    text-decoration: none;
  }

  .main-submit {
    background: #E52787;
    color: white;
    border: none;
  }

  .btn-nazad {
    background: transparent;
    color: #666;
    border: 1px solid #E52787;
  }

  #u_err, #reg_err { 
    color: #ff4d4d; 
    font-size: 13px; 
    margin-bottom: 10px; 
    font-weight: 600; 
    text-align: left; 
    display: none;
  }
</style>

<div class="premium-card">
    <h2 class="form-title">Kreirajte nalog</h2>
    <div id="reg_err">Molimo popunite sva polja.</div>
    <div id="u_err"></div>

    <form id="userRegForm">
        <div class="input-container">
            <label>Ime i prezime</label>
            <input id="u_name" type="text" placeholder="Marko Marković" required />
        </div>
        
        <div class="input-container">
            <label>Email adresa</label>
            <input id="u_email" type="email" placeholder="tvoj@email.com" required />
        </div>
        
        <div class="input-container">
            <label>Lozinka</label>
            <div class="pass-wrapper">
                <input id="u_pass" type="password" placeholder="Minimum 6 karaktera" required />
                <button id="togglePass" type="button" class="eye-icon">
                    <svg id="eyeIconSVG" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:20px;">
                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                        <circle cx="12" cy="12" r="3"></circle>
                    </svg>
                </button>
            </div>
        </div>
        <button class="main-submit" type="submit">NAPRAVI NALOG</button>
        <a href="/landing" class="btn-nazad">Nazad na početnu</a>
    </form>
    
    <div class="footerCol" style="display: flex; flex-direction: column; gap: 5px; margin-top: 15px; font-size: 12px;">
        <a href="/landing#politika" style="text-decoration:none; color:#777;">Politika privatnosti</a>
        <a href="/landing#uslovi" style="text-decoration:none; color:#777;">Uslovi korišćenja</a>
    </div>
</div>

<script>
(function() {
    const toggleBtn = document.getElementById('togglePass');
    const uPass = document.getElementById('u_pass');
    const eyeSVG = document.getElementById('eyeIconSVG');

    if (toggleBtn) {
        toggleBtn.addEventListener('click', function() {
            if (uPass.type === 'password') {
                uPass.type = 'text';
                eyeSVG.innerHTML = '<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line>';
            } else {
                uPass.type = 'password';
                eyeSVG.innerHTML = '<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle>';
            }
        });
    }

    const regForm = document.getElementById('userRegForm');
    if (regForm) {
        regForm.addEventListener('submit', async (e) => {
            e.preventDefault();
            const btn = regForm.querySelector('button[type="submit"]');
            const errEl = document.getElementById('u_err');
            const regErr = document.getElementById('reg_err');
            
            btn.disabled = true;
            errEl.style.display = 'none';
            if(regErr) regErr.style.display = 'none';
            
            try {
                const name = document.getElementById('u_name').value.trim();
                const email = document.getElementById('u_email').value.trim();
                const password = uPass.value;

                if(!name || !email || !password) {
                   throw new Error("Sva polja su obavezna.");
                }

                const r = await fetch('/api/register', { 
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ name, email, password })
                });

                const data = await r.json();
                if (!r.ok) throw new Error(data.error || "Greška pri registraciji");

                if (data.token) {
                    localStorage.setItem('adminToken', data.token);
                    localStorage.setItem('token', data.token);
                    window.location.href = '/dashboard';
                } else {
                    window.location.href = '/landing/login?reg=success';
                }
            } catch (err) {
                errEl.textContent = err.message;
                errEl.style.display = 'block';
                btn.disabled = false;
            }
        });
    }
})();
</script>`
    })
  );
});
// =========================
// 2. PRIJAVA KORISNIKA (STRANICA)
// =========================
app.get("/landing/login", (req, res) => {
  res.setHeader("Content-Type", "text/html; charset=utf-8");
  res.send(
    landingPage({
      pageTitle: "Prijava – Digital Creative World",
      active: "",
      bodyHtml: `
<style>
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
  
  .premium-card {
    font-family: 'Inter', sans-serif;
    background: #ffffff;
    padding: 50px 40px;
    border-radius: 32px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.05);
    width: 100%;
    max-width: 400px;
    text-align: center;
    border: 1px solid #f8f8f8;
    margin: 40px auto;
  }
  
  .brand-header { color: #7B38D8; font-weight: 800; font-size: 13px; letter-spacing: 2.5px; margin-bottom: 15px; text-transform: uppercase; }
  .form-title { font-size: 24px; font-weight: 700; color: #111; margin-bottom: 35px; letter-spacing: -0.5px; }
  
  .input-container { text-align: left; margin-bottom: 22px; }
  .input-container label { display: block; font-size: 13px; font-weight: 600; color: #555; margin-bottom: 8px; margin-left: 2px; }
  .input-container input { 
    width: 100%; 
    padding: 14px 18px; 
    border: 1.5px solid #eee; 
    border-radius: 14px; 
    font-size: 15px; 
    box-sizing: border-box; 
    font-family: inherit;
    transition: all 0.2s ease;
  }
  .input-container input:focus { border-color: #E52787; box-shadow: 0 0 0 4px rgba(229, 39, 135, 0.08); outline: none; }
  
  .pass-wrapper { position: relative; }
  .eye-icon { 
    position: absolute; 
    right: 16px; 
    top: 50%; 
    transform: translateY(-50%); 
    width: 20px; 
    color: #bbb; 
    cursor: pointer; 
    background: none; 
    border: none; 
    padding: 0;
    display: flex;
    align-items: center;
  }
  
  .main-submit { 
    background: #E52787; 
    color: white; 
    width: 100%; 
    padding: 16px; 
    border: none; 
    border-radius: 14px; 
    font-weight: 600; 
    font-size: 16px; 
    cursor: pointer; 
    margin-top: 15px; 
    transition: 0.3s;
    box-sizing: border-box;
  }
  .main-submit:hover { opacity: 0.95; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(229, 39, 135, 0.2); }
  .main-submit:disabled { opacity: 0.6; cursor: not-allowed; }

  .divider { margin: 35px 0; border-top: 1px solid #f0f0f0; position: relative; }
  .divider span { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: white; padding: 0 15px; color: #ccc; font-size: 12px; font-weight: 700; }
  
  .footer-msg { margin-top: 35px; font-size: 14px; color: #777; text-align: center; }
  .footer-msg a { color: #E52787; text-decoration: none; font-weight: 700; }
  
  #l_err { color: #ff4d4d; font-size: 13px; margin-bottom: 15px; font-weight: 600; text-align: left; }
</style>

<div class="premium-card">
    <div class="brand-header">DIGITAL CREATIVE WORLD</div>
    <h2 class="form-title" data-sr="Prijavite se" data-en="Login" data-de="Anmelden">Prijavite se na svoj nalog</h2>
    
    <div id="l_err" style="display:none;"></div>

    <form id="userLoginForm">
        <div class="input-container">
            <label data-sr="Email adresa" data-en="Email Address" data-de="E-Mail-Adresse">Email adresa</label>
            <input id="l_email" type="email" placeholder="tvoj@email.com" required />
        </div>
        <div class="input-container">
            <label data-sr="Lozinka" data-en="Password" data-de="Passwort">Lozinka</label>
            <div class="pass-wrapper">
                <input id="l_pass" type="password" placeholder="********" required />
                <button type="button" id="togglePass" class="eye-icon">
                    <svg id="eyeIconSVG" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:20px;">
                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                        <circle cx="12" cy="12" r="3"></circle>
                    </svg>
                </button>
            </div>
        </div>
        <button class="main-submit" type="submit" id="l_btn" data-sr="PRIJAVI SE" data-en="LOGIN" data-de="ANMELDEN">PRIJAVI SE</button>
    </form>
    
    <div style="text-align: center; margin-top: 20px;">
        <a href="/landing/forgot-password" style="color:#E52787; text-decoration:none; font-size:14px; font-weight:600;" data-sr="Zaboravili ste lozinku?" data-en="Forgot password?" data-de="Passwort vergessen?">Zaboravili ste lozinku?</a>
    </div>
    
    <div class="divider"><span>ILI</span></div>
    
    <p class="footer-msg" data-sr="Nemate nalog? Registrujte se" data-en="No account? Register" data-de="Kein Konto? Registrieren">
        Nemate nalog? <a href="/landing/user-register">Registrujte se</a>
    </p>
</div>

<script>
(function() {
    const tp = document.getElementById('togglePass');
    const lBtn = document.getElementById('l_btn');
    const errEl = document.getElementById('l_err');

    if(tp) {
        tp.addEventListener('click', function() {
            const input = document.getElementById('l_pass');
            const svg = document.getElementById('eyeIconSVG');
            if (input.type === 'password') {
                input.type = 'text';
                svg.innerHTML = '<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line>';
            } else {
                input.type = 'password';
                svg.innerHTML = '<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle>';
            }
        });
    }

    document.getElementById('userLoginForm').addEventListener('submit', async (e) => {
        e.preventDefault();
        
        const email = document.getElementById('l_email').value;
        const password = document.getElementById('l_pass').value;
        
        errEl.style.display = 'none';
        lBtn.disabled = true;
        const originalTxt = lBtn.textContent;
        lBtn.textContent = '...';

        try {
            const r = await fetch('/api/login', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ email, password })
            });
            
            const data = await r.json();
            if (!r.ok) throw new Error(data.error || 'Greška pri prijavi');
            
            localStorage.setItem('adminToken', data.token);
            // Takođe postavljamo opšti token ako ga dashboard koristi
            localStorage.setItem('token', data.token);
            
            window.location.href = '/dashboard';
        } catch (err) {
            errEl.textContent = err.message;
            errEl.style.display = 'block';
            lBtn.disabled = false;
            lBtn.textContent = originalTxt;
        }
    });
})();
</script>`
    })
  );
});
app.get("/landing/forgot-password", (req, res) => {
  res.setHeader("Content-Type", "text/html; charset=utf-8");
  res.send(
    landingPage({
      pageTitle: "Reset lozinke – Digital Creative World",
      active: "",
      bodyHtml: `
<style>
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');
  .premium-card { font-family: 'Inter', sans-serif; background: #ffffff; padding: 50px 40px; border-radius: 32px; box-shadow: 0 20px 60px rgba(0,0,0,0.05); width: 100%; max-width: 400px; text-align: center; border: 1px solid #f8f8f8; margin: 40px auto; }
  .brand-header { color: #7B38D8; font-weight: 800; font-size: 13px; letter-spacing: 2.5px; margin-bottom: 15px; text-transform: uppercase; }
  .form-title { font-size: 24px; font-weight: 700; color: #111; margin-bottom: 20px; }
  .form-desc { color: #666; font-size: 14px; margin-bottom: 30px; line-height: 1.5; }
  .input-container { text-align: left; margin-bottom: 22px; }
  .input-container label { display: block; font-size: 13px; font-weight: 600; color: #555; margin-bottom: 8px; }
  .input-container input { width: 100%; padding: 14px 18px; border: 1.5px solid #eee; border-radius: 14px; font-size: 15px; box-sizing: border-box; font-family: inherit; }
  .main-submit { background: #E52787; color: white; width: 100%; padding: 16px; border: none; border-radius: 14px; font-weight: 600; font-size: 16px; cursor: pointer; transition: 0.3s; }
  .main-submit:hover { opacity: 0.9; transform: translateY(-1px); }
  .main-submit:disabled { opacity: 0.6; cursor: not-allowed; }
  .footer-msg { margin-top: 25px; font-size: 14px; color: #777; }
  .footer-msg a { color: #E52787; text-decoration: none; font-weight: 700; }
</style>

<div class="premium-card">
    <div class="brand-header">DIGITAL CREATIVE WORLD</div>
    <h2 class="form-title" data-sr="Reset lozinke" data-en="Reset Password" data-de="Passwort zurücksetzen">Reset lozinke</h2>
    <p class="form-desc" data-sr="Unesite email adresu i poslaćemo vam link za oporavak naloga." data-en="Enter your email address and we will send you a recovery link." data-de="Geben Sie Ihre E-Mail-Adresse ein und wir senden Ihnen einen Link zur Wiederherstellung.">Unesite email adresu i poslaćemo vam link za oporavak naloga.</p>
    <form id="forgotForm">
        <div class="input-container">
            <label data-sr="Email adresa" data-en="Email Address" data-de="E-Mail-Adresse">Email adresa</label>
            <input type="email" id="f_email" placeholder="vas@email.com" required>
        </div>
        <button type="submit" id="f_btn" class="main-submit" data-sr="POŠALJI LINK" data-en="SEND LINK" data-de="LINK SENDEN">POŠALJI LINK</button>
    </form>
    <p class="footer-msg" data-sr="Setili ste se lozinke? Nazad na prijavu" data-en="Remembered your password? Back to login" data-de="Passwort gemerkt? Zurück zum Login">
        Setili ste se lozinke? <a href="/landing/login">Nazad na prijavu</a>
    </p>
</div>

<script>
(function() {
    const form = document.getElementById('forgotForm');
    const btn = document.getElementById('f_btn');
    
    if(form) {
        form.addEventListener('submit', async (e) => {
            e.preventDefault();
            const email = document.getElementById('f_email').value;
            
            btn.disabled = true;
            const originalTxt = btn.textContent;
            btn.textContent = "...";

            try {
                // PROVERA: Tvoj API za login je na /api/login, pa je verovatnije da je 
                // ovaj endpoint na /api/forgot-password (bez /auth/ ako ne koristiš takvu strukturu)
                const r = await fetch('/api/forgot-password', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ email })
                });
                
                if (r.ok) {
                    alert("Link je poslat na vaš email (proverite i Spam folder)!");
                    window.location.href = '/landing/login';
                } else {
                    const data = await r.json();
                    alert("Greška: " + (data.error || "Proverite email adresu."));
                }
            } catch (err) {
                alert("Sistem trenutno nije dostupan.");
            } finally {
                btn.disabled = false;
                btn.textContent = originalTxt;
            }
        });
    }
})();
</script>`
    })
  );
});


// =========================
// 3. DASHBOARD (STRANICA) - FIKSIRANO
// =========================
app.get("/dashboard", async (req, res) => {
  res.setHeader("Content-Type", "text/html; charset=utf-8");
  res.send(
    landingPage({
      pageTitle: "Moj Dashboard – Digital Creative World",
      active: "dashboard",
      bodyHtml: `
<section class="section">
  <div class="wrap">
    <div id="authGuard" style="display:none;">
      <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:32px; flex-wrap:wrap; gap:15px;">
        <h2 class="sectionTitle" data-sr="Moji Događaji" data-en="My Events" data-de="Meine Events">Moji Događaji</h2>
        <button onclick="window.location.href='/landing/registracija'" class="btn btnPrimary" data-sr="+ NOVI DOGAĐAJ" data-en="+ NEW EVENT" data-de="+ NEUES EVENT">+ NOVI DOGAĐAJ</button>
      </div>
      <div id="eventList"><p style="opacity:0.6;">Učitavanje...</p></div>
      <div style="margin-top:60px; text-align:center; border-top:1px solid #eee; padding-top:20px;">
          <button class="btn btnGhost" onclick="logout()" style="color:#ff4d4d; border-color:#ff4d4d;" data-sr="ODJAVI SE" data-en="LOGOUT" data-de="ABMELDEN">ODJAVI SE</button>
      </div>
    </div>
  </div>
</section>

<script>
async function initDashboard() {
  // Proveravamo oba ključa radi sigurnosti (adminToken je primarni za Dashboard)
  const token = localStorage.getItem('adminToken') || localStorage.getItem('token'); 
  
  if (!token) {
    window.location.href = '/landing/login';
    return;
  }
  
  const authGuard = document.getElementById('authGuard');
  if(authGuard) authGuard.style.display = 'block';

  try {
    const res = await fetch('/api/user/events', {
      headers: { 'Authorization': 'Bearer ' + token }
    });

    if (!res.ok) {
      if (res.status === 401) { logout(); return; }
      throw new Error('Greška pri dobavljanju podataka');
    }

    const events = await res.json();
    const listEl = document.getElementById('eventList');

    if (!events || events.length === 0) {
      listEl.innerHTML = \`
        <div style="text-align:center; padding:60px 20px; border:2px dashed #eee; border-radius:24px;">
          <h3 data-sr="Nemate kreiranih događaja" data-en="No events created" data-de="Keine Events erstellt">Nemate kreiranih događaja</h3>
          <p style="color:#666; margin-bottom:25px;" data-sr="Vaš digitalni album vas čeka." data-en="Your digital album is waiting for you." data-de="Ihr digitales Album wartet auf Sie.">Vaš digitalni album vas čeka.</p>
          <button onclick="window.location.href='/landing/registracija'" class="btn btnPrimary" data-sr="KREIRAJ PRVI DOGAĐAJ" data-en="CREATE FIRST EVENT" data-de="ERSTES EVENT ERSTELLEN">KREIRAJ PRVI DOGAĐAJ</button>
        </div>\`;
      // Ponovo pokreni prevod za dinamički ubačen HTML
      if(window.changeLanguage && document.documentElement.lang) changeLanguage(document.documentElement.lang);
      return;
    }

    let html = '<div style="display:grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap:20px;">';
    events.forEach(function(ev) {
      const eId = encodeURIComponent(ev.eventId || '');
      html += '<div class="priceCard" style="text-align:left; display:flex; flex-direction:column; justify-content:space-between; min-height:180px;">' +
        '<div>' +
          '<div class="priceName" style="font-size:20px; font-weight:700; color:#111;">' + (ev.name || 'Događaj') + '</div>' +
          '<div class="priceTag" style="margin-bottom:20px; opacity:0.7; font-size:13px;">Datum: ' + (ev.date || '-') + '</div>' +
        '</div>' +
        '<div style="display:flex; gap:10px; flex-wrap:wrap;">' +
          '<a href="/?eventId=' + eId + '" class="btn btnPrimary" style="padding:10px 14px; font-size:12px; flex:1; text-align:center;">UPRAVLJAJ</a>' +
          '<a href="/landing/cover?eventId=' + eId + '" class="btn btnGhost" style="padding:10px 14px; font-size:12px; flex:1; text-align:center;">NASLOVNA</a>' +
        '</div>' +
      '</div>';
    });
    html += '</div>';
    listEl.innerHTML = html;
    
  } catch (err) {
    console.error("Dashboard error:", err);
    document.getElementById('eventList').innerHTML = '<p style="color:#ff4d4d; font-weight:600;">Greška pri učitavanju događaja. Pokušajte ponovo.</p>';
  }
}

function logout() {
  localStorage.removeItem('adminToken');
  localStorage.removeItem('token');
  window.location.href = '/landing/login';
}

// Pokrećemo inicijalizaciju
initDashboard();
</script>`
    })
  );
});

// ==========================================
// 1. REGISTRACIJA (VRAĆENA NA /api/register)
// ==========================================
app.post("/api/register", async (req, res) => {
  try {
    const { email, password, name } = req.body;
    if (!email || !password) return res.status(400).json({ error: "Podaci nedostaju" });

    // Generisanje imena fajla (npr. korisnik_gmail_com.json)
    const safeName = email.toLowerCase().replace(/[^a-z0-9]/g, "_") + ".json";
    const filePath = `users/${safeName}`;

    const file = bucket.file(filePath);
    const [exists] = await file.exists();
    if (exists) return res.status(400).json({ error: "Korisnik već postoji" });

    const hashedPassword = await bcrypt.hash(password, 10);
    
    // Struktura koja prati tvoj Digital Creative World sistem
    const newUser = { 
      email: email.toLowerCase(), 
      password: hashedPassword, 
      name: name || "", 
      packageType: "PROBNI", 
      isPaid: false,
      createdAt: Date.now(),
      myEvents: [] 
    };

    // Snimanje u Google Cloud Storage Bucket
    await file.save(JSON.stringify(newUser), {
      contentType: "application/json; charset=utf-8",
      resumable: false 
    });

    res.json({ success: true, message: "Uspešna registracija" });
  } catch (e) { 
    console.error("REG ERROR:", e);
    res.status(500).json({ error: "Greška prilikom kreiranja naloga" }); 
  }
});
// ==========================================
// 2. PRIJAVA (VRAĆENA NA /api/login)
// ==========================================
app.post("/api/login", async (req, res) => {
  try {
    const { email, password } = req.body;
    if (!email || !password) return res.status(400).json({ error: "Email i lozinka obavezni" });

    const safeName = email.toLowerCase().replace(/[^a-z0-9]/g, "_") + ".json";
    const filePath = `users/${safeName}`;

    const file = bucket.file(filePath);
    const [exists] = await file.exists();
    if (!exists) return res.status(401).json({ error: "Pogrešan email ili lozinka" });

    const [content] = await file.download();
    const user = JSON.parse(content.toString());

    if (!user || !user.password) {
      return res.status(401).json({ error: "Nalog nije ispravno kreiran" });
    }

    const match = await bcrypt.compare(password, user.password);
    if (!match) return res.status(401).json({ error: "Pogrešan email ili lozinka" });

    // Provera uloge na osnovu tvog registrovanog email-a
    const userRole = (user.email === "digitalcreativeworld@gmail.com") ? "owner" : "eventAdmin";

    const token = jwt.sign(
      { 
        email: user.email, 
        packageType: user.packageType || 'PROBNI',
        role: userRole 
      },
      JWT_SECRET,
      { expiresIn: "24h" }
    );

    res.json({ token });
  } catch (e) {
    console.error("LOGIN ERROR:", e);
    res.status(500).json({ error: "Interna greška na serveru" });
  }
});
// =========================
// LANDING – REGISTRACIJA
// =========================
app.get("/landing/registracija", (req, res) => {
  const plan = (req.query.plan || "standard").toLowerCase();

  // prefill (iz URL-a)
  const evName = escHtml(req.query.name || "");
  const evDate = escHtml(req.query.date || "");
  const evOrg  = escHtml(req.query.org  || "");

  res.setHeader("Content-Type", "text/html; charset=utf-8");
  res.setHeader("Content-Disposition", "inline");
res.send(
    landingPage({
      pageTitle: "Registracija – Digital Creative World",
      active: "",
      bodyHtml: `
<style>
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
  body { background-color: #ffffff !important; font-family: 'Inter', sans-serif !important; }
  .premium-card {
    background: #ffffff;
    padding: 40px;
    border-radius: 32px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.05);
    width: 100%;
    max-width: 450px;
    text-align: center;
    border: 1px solid #f8f8f8;
    margin: 40px auto;
  }
  .brand-header { color: #7B38D8; font-weight: 800; font-size: 13px; letter-spacing: 2.5px; margin-bottom: 10px; text-transform: uppercase; }
  .form-title { font-size: 24px; font-weight: 700; color: #111; margin-bottom: 30px; letter-spacing: -0.5px; }
  .input-container { text-align: left; margin-bottom: 20px; }
  .input-container label { display: block; font-size: 13px; font-weight: 600; color: #555; margin-bottom: 8px; margin-left: 2px; }
  .input-container input, .input-container select, .input-container textarea {
    width: 100%; padding: 14px 18px; border: 1.5px solid #eee; border-radius: 14px; background: #fff; font-size: 15px; font-family: 'Inter', sans-serif; box-sizing: border-box;
  }
  .input-container input:focus, .input-container select:focus, .input-container textarea:focus { border-color: #E52787; outline: none; }
  .main-submit { background: #E52787; color: white; width: 100%; padding: 16px; border: none; border-radius: 14px; font-weight: 600; font-size: 16px; cursor: pointer; text-transform: uppercase; }
  .btn-outline { background: #fff; color: #777; width: 100%; padding: 14px; border: 1.5px solid #eee; border-radius: 14px; font-weight: 600; display: block; text-align: center; text-decoration: none; margin-top: 10px; }
</style>

<section class="premium-card">
    <div class="brand-header">DIGITAL CREATIVE WORLD</div>
    <h2 class="form-title">Kreiraj događaj</h2>
    <p style="font-size: 14px; color: #777; margin-bottom: 10px;">Za manje od minut dobijaš link i QR kod za goste.</p>
    <p style="font-size: 13px; color: #555; margin-bottom: 25px;">Izabrani paket: <b style="color:#E52787">${plan}</b></p>

    <div id="setup_form_wrap">
      <form class="form" id="mainRegForm">
        <div class="input-container">
          <label>Naziv događaja</label>
          <input id="reg_name" type="text" placeholder="npr. Anin rođendan" value="${evName}" />
        </div>
        <div class="input-container">
          <label>Datum događaja</label>
          <input id="reg_date" type="date" value="${evDate}" />
        </div>
        <div class="input-container">
          <label>Ime organizatora</label>
          <input id="reg_org" type="text" placeholder="npr. Ana" value="${evOrg}" />
        </div>
        <div class="input-container">
          <label>Vrsta događaja</label>
          <select id="reg_type">
            <option value="">Izaberi vrstu događaja</option>
            <option value="rodjendan">Rođendan</option>
            <option value="svadba">Svadba</option>
          </select>
        </div>
        <div class="input-container">
          <label>Poruka gostima</label>
          <textarea id="reg_msg" rows="3" placeholder="Dobrodošli!"></textarea>
        </div>
        <div id="reg_err" style="display:none;">Popunite obavezna polja.</div>
        <button class="main-submit" id="reg_next" type="button">NASTAVI</button>
        <a class="btn-outline" href="/landing">Nazad na početnu</a>
      </form>
    </div>
</section>

<script>
window.addEventListener('DOMContentLoaded', function () {
  
  // --- TVOJ NOVI KOD ZA SABIJANJE KARTICE ---
  // 1. Uklanjanje naslova "DIGITAL CREATIVE WORLD"
document.querySelectorAll('span, p, div').forEach(el => {
    if (el.innerText.trim() === 'DIGITAL CREATIVE WORLD') el.style.display = 'none';
});

// 2. Maksimalno sabijanje visine kartice
const card = document.querySelector('.card-container') || document.querySelector('[class*="card"]');
if (card) {
    card.style.paddingTop = '5px';
    card.style.paddingBottom = '5px';
}

// 3. Smanjenje margina između svih elemenata (labela, inputa, grupa)
document.querySelectorAll('.form-group, .mb-3, div[class*="field"]').forEach(el => {
    el.style.marginBottom = '2px';
});

document.querySelectorAll('label').forEach(el => {
    el.style.marginBottom = '0px';
    el.style.marginTop = '2px';
});

// 4. Definisanje Magenta boje i sive boje teksta
const magentaBoja = '#e21b7f';
const sivaBojaTeksta = '#666666';
const glavniFont = "'Poppins', sans-serif";

// 5. Pronalaženje i stilizovanje dugmadi (Identičan font, debljina i veličina)
const btnNastavi = Array.from(document.querySelectorAll('button, div, span, a')).find(el => el.innerText.trim() === 'NASTAVI');
const btnNazad = Array.from(document.querySelectorAll('button, div, span, a')).find(el => el.innerText.trim() === 'Nazad na početnu');

if (btnNastavi) {
    Object.assign(btnNastavi.style, {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: '100%',
        maxWidth: '320px',
        height: '40px', // Blago smanjena visina dugmeta za ukupno nižu karticu
        margin: '5px auto',
        borderRadius: '10px',
        fontWeight: '600',
        fontSize: '14px',
        fontFamily: glavniFont,
        cursor: 'pointer',
        textTransform: 'uppercase',
        backgroundColor: magentaBoja,
        color: '#ffffff',
        border: 'none'
    });
}

if (btnNazad) {
    Object.assign(btnNazad.style, {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: '100%',
        maxWidth: '320px',
        height: '40px',
        margin: '5px auto',
        borderRadius: '10px',
        fontWeight: '600',
        fontSize: '14px',
        fontFamily: glavniFont,
        cursor: 'pointer',
        textTransform: 'uppercase',
        backgroundColor: 'transparent',
        color: sivaBojaTeksta,
       border: '1px solid ' + magentaBoja,
        textDecoration: 'none'
    });
}

// 6. Popravka strelice za događaje
const selectField = document.querySelector('select');
if (selectField) {
    selectField.style.appearance = 'none';
    selectField.style.webkitAppearance = 'none';
    selectField.style.backgroundImage = 'url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666666%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22/%3E%3C/svg%3E")';
    selectField.style.backgroundRepeat = 'no-repeat';
    selectField.style.backgroundSize = '12px auto';
    selectField.style.backgroundPosition = 'right 20px center';
    selectField.style.paddingRight = '45px';
}
// --- LOGIKA ZA SLANJE ---
  const btnNext = document.getElementById('reg_next');
  if (btnNext) {
    btnNext.addEventListener('click', async function() {
      const name = document.getElementById('reg_name').value.trim();
      const dateVal = document.getElementById('reg_date').value;
      const org = document.getElementById('reg_org').value.trim();
      const currentToken = localStorage.getItem('adminToken') || localStorage.getItem('token');

      if (!name || !dateVal || !org) {
        const errDiv = document.getElementById('reg_err');
        if (errDiv) errDiv.style.display = "block";
        return;
      }

      if (!currentToken) { 
        alert("Morate biti prijavljeni."); 
        return; 
      }

      btnNext.disabled = true;
      btnNext.textContent = "KREIRANJE...";

      try {
        const r = await fetch('/landing/create', {
          method: 'POST',
          headers: { 
            'Content-Type': 'application/json', 
            'Authorization': 'Bearer ' + currentToken 
          },
          body: JSON.stringify({ 
            name, 
            date: dateVal, 
            org, 
            plan: "${plan}".toUpperCase() 
          })
        });

        const data = await r.json().catch(() => ({}));

        if (r.ok && data.redirectUrl) {
          location.href = data.redirectUrl;
          return;
        } 
        
        alert("Greška: " + (data.error || "Problem pri kreiranju"));
      } catch (err) { 
        console.error("Fetch error:", err);
        alert("Greška na serveru."); 
      } finally { 
        btnNext.disabled = false; 
        btnNext.textContent = "NASTAVI"; 
      }
    });
  }
}); 

</script>
      `,
    })
  );
});
  // =======================
// LANDING CREATE (backend) - MINIMUM ZA NAS PROJEKAT
// =======================
app.post("/landing/create", authMiddleware, async (req, res) => {
  try {
    const { error, value } = createEventSchema.validate(req.body);
    if (error) return res.status(400).json({ error: error.details[0].message });

    const { name, date, org, plan, type, msg } = value;
    if (!name || !date || !org) return res.status(400).json({ error: "missing_required" });

    const eventId = makeEventId(name, date);

    const ev = {
      eventId,
      owner: req.user.email,
      name,
      date,
      org,
      plan: (plan || "standard").toLowerCase(),
      type,
      msg,
      createdAt: Date.now(),
      coverObject: "", 
    };

    const eventPath = `events/${eventId}/event.json`;
    await bucket.file(eventPath).save(JSON.stringify(ev), {
      contentType: "application/json; charset=utf-8",
      resumable: false,
    });

    console.log("LANDING CREATE OK:", eventId);

    // Svi idu na naslovnu sliku (Step 2)
    return res.json({ 
      redirectUrl: `/landing/cover?eventId=${encodeURIComponent(eventId)}` 
    });

  } catch (e) {
    console.error("LANDING CREATE ERROR:", e?.stack || e);
    return res.status(500).json({ error: "server_error" });
  }
});
// =======================
// FINALIZACIJA NASLOVNE SLIKE (Step 2) - ISPRAVLJENO
// =======================
app.post("/cover/finalize", express.json(), async (req, res) => {
  try {
    const eventId = String(req.body?.eventId || req.query.eventId || "").trim();
    const objectName = String(req.body?.objectName || "").trim();

    if (!eventId) return res.status(400).json({ error: "missing_eventId" });
    if (!objectName) return res.status(400).json({ error: "missing_objectName" });

    const eventPath = `events/${eventId}/event.json`;
    const [buf] = await bucket.file(eventPath).download();
    const ev = JSON.parse(buf.toString("utf8"));

    ev.coverObject = objectName;
    ev.updatedAt = Date.now();

    await bucket.file(eventPath).save(JSON.stringify(ev), {
      contentType: "application/json; charset=utf-8",
      resumable: false,
    });

    console.log("COVER FINALIZE OK:", eventId);

    // Usmeravanje po planu koji je korisnik izabrao
    if (ev.plan === "free" || ev.plan === "probni") {
      // Besplatni idu na potvrdu događaja
      return res.json({ redirectUrl: `/e/${encodeURIComponent(eventId)}` });
    } else {
      // Plaćeni idu na IPS QR naplatu za Digital Creative World
      return res.json({ 
        redirectUrl: `/?eventId=${encodeURIComponent(eventId)}&showPayment=true&plan=${encodeURIComponent(ev.plan)}` 
      });
    }

  } catch (e) {
    console.error("COVER FINALIZE ERROR:", e);
    res.status(500).json({ error: "server_error" });
  }
});
app.get("/landing/skip-cover", authMiddleware, async (req, res) => {
  try {
    const eventId = String(req.query.eventId || "").trim();
    if (!eventId) return res.status(400).send("Missing eventId");

    const eventPath = `events/${eventId}/event.json`;
    const [buf] = await bucket.file(eventPath).download();
    const ev = JSON.parse(buf.toString("utf8"));

    // Ako je paket besplatan, ide na potvrdu događaja
    if (ev.plan === "free" || ev.plan === "probni") {
      return res.redirect(`/e/${encodeURIComponent(eventId)}`);
    } else {
      // Plaćeni paketi moraju na IPS QR naplatu
      return res.redirect(`/?eventId=${encodeURIComponent(eventId)}&showPayment=true&plan=${encodeURIComponent(ev.plan)}`);
    }
  } catch (e) {
    console.error("SKIP COVER ERROR:", e);
    res.status(500).send("Greška na serveru.");
  }
});

// RUTA ZA GENERISANJE PODATAKA ZA QR KOD
app.get("/landing/payment-qr", async (req, res) => {
  try {
    const eventId = String(req.query.eventId || "").trim();
    const plan = String(req.query.plan || "standard").trim();

    if (!eventId) return res.status(400).json({ error: "Missing eventId" });

    // Ovde definišeš iznose na osnovu plana
    let amount = "1500"; 
    if (plan === "pro") amount = "3000";
    if (plan === "premium") amount = "5000";

    // IPS QR podaci (Primer za tvoju firmu Digital Creative World)
    // Napomena: Za pravi IPS kod koristi specifičan format (K:PR|V:01|C:1...)
    const paymentData = {
      qrCode: `K:PR|V:01|C:1|R:205000000012345678|N:Digital Creative World|I:RSD${amount},00|SF:289|S:Uplata za digitalnu galeriju ${eventId}`,
      amount: amount,
      orderId: `EV-${eventId}-${Date.now().toString().slice(-5)}`
    };

    res.json(paymentData);
  } catch (err) {
    console.error("PAYMENT QR ERROR:", err);
    res.status(500).json({ error: "Greška pri generisanju podataka za plaćanje" });
  }
});

// KORAK 2: naslovna slika (cover) — upload jedne slike u events/{eventId}/cover.jpg
app.get("/landing/cover", async (req, res) => {
  try {
    const eventId = String(req.query.eventId || "").trim();
    if (!eventId) return res.status(400).type("html").send("Missing eventId");

    const eventPath = `events/${eventId}/event.json`;
    const [exists] = await bucket.file(eventPath).exists();
    if (!exists) return res.status(404).type("html").send("Događaj nije pronađen.");

    const [buf] = await bucket.file(eventPath).download();
    const ev = JSON.parse(buf.toString("utf8") || "{}");

    return res.type("html").send(
      landingPage({
        pageTitle: `Naslovna – ${ev?.name ? ev.name : "Događaj"} – Digital Creative World`,
        active: "",
        noHero: true,
        bodyHtml: `
<section class="section">
  <div class="wrap">
    <p class="kicker">Korak 2/2</p>
    <h2 class="sectionTitle">Dodaj naslovnu sliku događaja</h2>
    <p class="sectionLead">Ova slika je naslovna (hero) za događaj. Možeš i da preskočiš.</p>

    <div class="card" style="max-width:520px; padding:18px;">
      <div style="font-weight:700; margin-bottom:10px;">${escHtml(ev?.name || "Događaj")}</div>

      <input id="coverFile" type="file" accept="image/*" />

      <!-- PREVIEW -->
      <div id="previewWrap" style="display:none; margin-top:12px;">
        <img id="previewImg" style="width:100%; border-radius:12px; border:1px solid rgba(0,0,0,.08);" />
      </div>

      <div style="height:12px"></div>

      <div class="heroCtas" style="gap:10px;">
        <button id="btnUpload" class="btn btnPrimary" type="button">Otpremi naslovnu</button>
        <a class="btn btnGhost" href="/landing/skip-cover?eventId=${encodeURIComponent(eventId)}">Preskoči</a>

      </div>

      <div id="msg" style="margin-top:12px; font-size:14px; opacity:.9;"></div>
    </div>
  </div>
</section>

<script>
(function(){
  var eventId = ${JSON.stringify(eventId)};
  var inp = document.getElementById('coverFile');
  var btn = document.getElementById('btnUpload');
  var msg = document.getElementById('msg');

  var previewWrap = document.getElementById('previewWrap');
  var previewImg  = document.getElementById('previewImg');

  function setMsg(t){ if(msg) msg.textContent = t || ''; }

  if(inp){
    inp.addEventListener('change', function(){
      try{
        var f = inp.files && inp.files[0];
        if(!f || !/^image\\//i.test(f.type || '')){
          if(previewWrap) previewWrap.style.display = 'none';
          if(previewImg) previewImg.src = '';
          return;
        }
        if(previewImg) previewImg.src = URL.createObjectURL(f);
        if(previewWrap) previewWrap.style.display = 'block';
      }catch(_e){
        if(previewWrap) previewWrap.style.display = 'none';
        if(previewImg) previewImg.src = '';
      }
    });
  }

  btn.addEventListener('click', async function(){
    try{
      var f = inp && inp.files && inp.files[0];
      if(!f){ setMsg('Izaberi sliku.'); return; }
      if(!/^image\\//i.test(f.type || '')){ setMsg('Molim te izaberi sliku (JPG/PNG).'); return; }

      setMsg('Pripremam upload...');
      var r1 = await fetch('/cover/sign?eventId=' + encodeURIComponent(eventId), {
        method:'POST',
        headers:{ 'Content-Type':'application/json' },
        cache:'no-store',
        body: JSON.stringify({ contentType: f.type || 'image/jpeg' })
      });
      if(!r1.ok) throw new Error('SIGN ' + r1.status);
      var s = await r1.json(); // { uploadUrl, objectName }

      setMsg('Upload...');
      var r2 = await fetch(s.uploadUrl, {
        method:'PUT',
        headers:{ 'Content-Type': f.type || 'image/jpeg' },
        body: f
      });
      if(!r2.ok) throw new Error('PUT ' + r2.status);

      setMsg('Finalizujem...');
      var r3 = await fetch('/cover/finalize?eventId=' + encodeURIComponent(eventId), {
        method:'POST',
        headers:{ 'Content-Type':'application/json' },
        cache:'no-store',
        body: JSON.stringify({ objectName: s.objectName })
      });
      if(!r3.ok) throw new Error('FINALIZE ' + r3.status);
      var out = await r3.json(); // { redirectUrl }

      location.href = out.redirectUrl || ('/e/' + encodeURIComponent(eventId));
    }catch(e){
      console.error(e);
      setMsg('Greška: ' + (e && e.message ? e.message : e));
    }
  });
})();
</script>
        `,
      })
    );
  } catch (e) {
    console.error("LANDING COVER PAGE ERROR:", e?.stack || e);
    return res.status(500).type("html").send("Greška na serveru.");
  }
});

// cover SIGN (PUT url)
app.post("/cover/sign", express.json(), async (req, res) => {
  try {
    const eventId = String(req.query.eventId || "").trim();
    if (!eventId) return res.status(400).json({ error: "missing_eventId" });

    const ct = String(req.body?.contentType || "image/jpeg").trim().toLowerCase();
    if (!ct.startsWith("image/")) return res.status(400).json({ error: "only_images" });

    // jedna naslovna po eventu (overwrite)
    const objectName = `events/${eventId}/cover.jpg`;

    const uploadUrl = await signedWriteUrl(objectName, ct);
    return res.json({ uploadUrl, objectName });
  } catch (e) {
    console.error("COVER SIGN ERROR:", e?.stack || e);
    return res.status(500).json({ error: "server_error" });
  }
});


// event “entry” stranica: prikazuje osnovne info + vodi u galeriju sa eventId parametrom
app.get("/e/:eventId", async (req, res) => {
  try {
    const eventId = String(req.params.eventId || "").trim();
    const eventPath = `events/${eventId}/event.json`;

    const [exists] = await bucket.file(eventPath).exists();
    if (!exists) {
      return res.status(404).type("html").send("Događaj nije pronađen.");
    }

    const [buf] = await bucket.file(eventPath).download();
    const ev = JSON.parse(buf.toString("utf8"));

    return res.type("html").send(
      landingPage({
        pageTitle: `${ev.name} – Digital Creative World`,
        active: "",
      
      bodyHtml: `
<section class="section">
  <div class="wrap">
    <p class="kicker">Događaj</p>
    <h1 class="heroH1">${escHtml(ev.name)}</h1>
    <p class="sectionLead">${escHtml(ev.date)} • ${escHtml(ev.org)}${ev.type ? " • " + escHtml(ev.type) : ""}</p>
    <div class="heroCtas" style="margin-top:18px;">
      <a class="btn btnPrimary" href="/?eventId=` + encodeURIComponent(eventId) + `" data-i18n="ev_gal">Otvori galeriju događaja</a>
      <a class="btn btnGhost" href="/landing/cover?eventId=` + encodeURIComponent(eventId) + `" data-i18n="ev_cov">Promeni naslovnu</a>
      <a class="btn btnGhost" href="/landing" data-i18n="nav_h">Nazad na sajt</a>
    </div>
  </div>
</section>
      `, 
    })
  );
        } catch (e) {
    console.error("EVENT PAGE ERROR:", e?.stack || e);
    return res.status(500).type("html").send("Greška na serveru.");
  }
});


// SERVER
const PORT = process.env.PORT || 8080;
app.listen(PORT, "0.0.0.0", () => {
  console.log("Listening on", PORT);
});