const { useState, useEffect, useMemo, useRef } = React;

/* ---------------- Telegram Mini App bridge ---------------- */
const TG = (window.Telegram && window.Telegram.WebApp) || null;
// ready()/expand()/fullscreen are handled by tg-init.js on every page.

const TG_LIMIT = 4096; // Telegram's hard cap on sendData

// The cap is counted in UTF-8 bytes, and Cyrillic costs two per character, so
// string length is not a safe proxy.
function byteLen(str) { return new TextEncoder().encode(str).length; }

// Manual mode carries no advisory `todo` lines to shed, so an oversized payload
// goes straight to a visible error rather than being silently truncated.
function sendToBot(payload) {
  const json = JSON.stringify(payload);
  const bytes = byteLen(json);
  if (bytes > TG_LIMIT) return { ok: false, json, bytes, sent: false };
  if (TG && typeof TG.sendData === "function") {
    TG.sendData(json);
    return { ok: true, json, bytes, sent: true };
  }
  console.log("[payload]", json); // plain browser: nothing to send to, so show it
  return { ok: true, json, bytes, sent: false };
}

/* The bot recomputes every volume from these inputs, so this payload carries
   raw cabinet dimensions only — no areas, no sheet counts. Keys are kept short
   because a large kitchen can run to dozens of cabinets. */
function buildManualPayload(s) {
  const num = (v) => (v === "" || v === undefined || v === null ? 0 : Number(v));
  const cab = [];
  ["jos", "sus", "soldat", "nestandart"].forEach((cat) => {
    (s.cabinetsByCat[cat] || []).forEach((c) => {
      const std = s.standards[cat] || {};
      cab.push({
        c: cat,
        t: c.type || "",
        w: num(c.width),
        // Blank per-cabinet dimensions fall back to the category standard.
        h: num(c.height !== "" ? c.height : std.height),
        d: num(c.depth !== "" ? c.depth : std.depth),
        dr: num(c.drawers),
        pw: num(c.panelWidth),
      });
    });
  });

  const blatOf = (b) => ({
    type: b.type || "", brand: b.brand || "", code: b.code || "",
    size: b.useBase ? num(s.baseWidthSum) : num(b.size),
  });

  /* corp, fatade and blat are lists of models. The first one never has a
     quantity: it is the rest of what the cabinets need. An extra model
     carries qty only when the manager typed a positive number; without it the
     bot flags the model as «объём не указан». */
  const withQty = (out, m, i, unit) => {
    if (i > 0 && m.qty !== "" && m.qty !== undefined && m.qty !== null && Number(m.qty) > 0) {
      out.qty = Number(m.qty);
      out.unit = unit;
    }
    return out;
  };
  const corpModels = s.corpModels || [];
  const fatadeModels = s.fatadeModels || [];
  const blatModels = (s.blat && s.blat.blat) || [];

  const svcStd = { montare: 300, livrare: "", proiectare: 2000, tehnolog: 90, transport: "" };
  const svc = {};
  Object.keys(svcStd).forEach((k) => {
    const v = s.services[k];
    if (v !== "" && v !== undefined && v !== null) { svc[k] = Number(v); return; }
    const std = s.servicesPrice[k];
    const fallback = std === undefined || std === null ? svcStd[k] : std;
    svc[k] = fallback === "" || fallback === undefined || fallback === null ? "" : Number(fallback);
  });

  return {
    v: 1,
    mode: "manual",
    mat: {
      corp: corpModels.map((m, i) => withQty(
        { brand: m.brand || "", code: m.value || "" }, m, i, "m2")),
      fatade: fatadeModels.map((m, i) => withQty({
        type: m.fatadeType || "",
        brand: m.palBrand || "",
        code: m.agtArticle || m.palArticle || m.value || "",
      }, m, i, "m2")),
      blat: blatModels.map((m, i) => withQty(blatOf(m), m, i, "mp")),
      contrablat: blatOf((s.blat && s.blat.contrablat) || {}),
      feronerie: s.feronerie || "",
    },
    cab: cab,
    svc: svc,
    led: !!s.led,
    tipMobila: s.tipMobila || "",
    info: s.infoAditionale || "",
  };
}

/* ---------------- i18n ---------------- */
const T = {
  ro: {
    title: "Configurator Ofertă",
    subtitle: "Introduceți datele comenzii pentru a genera oferta.",
    calculate: "Calculează",
    standardDims: "Dimensiuni Standard",
    dulapJos: "Dulap Jos",
    dulapSus: "Dulap Sus",
    soldat: "Soldat",
    height: "Înălțime (mm)",
    depth: "Adâncime (mm)",
    width: "Lățime (mm)",
    numarDulapuri: "Număr dulapuri",
    numarJos: "Număr dulapuri jos",
    numarSus: "Număr dulapuri sus",
    numarSoldati: "Număr soldați",
    numarNestandart: "Număr dulapuri nestandart",
    nestandart: "Nestandart",
    cabinet: "Dulap",
    chooseCategory: "Alege categoria…",
    chooseType: "Alege tipul…",
    specialDetails: "Detalii speciale / nestandard (Opțional)",
    specialPlaceholder: "Ex: decupaj pentru țeavă, spațiu pentru hotă, modificare plintă…",
    nrSertare: "Număr sertare",
    panelWidth: "Lățimea panoului",
    emptyHint: "Setați numărul de dulapuri pentru a începe.",
    lockHint: "Blochează / deblochează",
    materialCorpuri: "Material corpuri",
    chooseCorpuriBrand: "Alege brandul",
    materialFatade: "Material fațade",
    materialPlaceholder: "Cod sau denumire (ex: U999 ST9, Egger H3303…)",
    feronerie: "Feronerie",
    chooseBrand: "Alege brand-ul…",
    services: "Preț servicii adiționale",
    montare: "Montare",
    livrare: "Livrare",
    proiectare: "Proiectare",
    tehnolog: "Tehnolog",
    transport: "Transport",
    blat: "Blat + Contrablat",
    blatLbl: "Blat",
    contrablatLbl: "Contrablat",
    type: "Tip",
    size: "Mărime (mm)",
    chooseBlatType: "Alege tipul de blat…",
    blatCode: "Cod / denumire",
    blatCodePlaceholder: "Cod sau denumire (ex: F501 ST10, K001…)",
    brand: "Brand",
    chooseBrand: "Alege brandul…",
    chooseArticle: "Alege articolul…",
    selectArticle: "Selectează articolul",
    searchArticle: "Caută după cod sau denumire…",
    cancel: "Anulează",
    noResults: "Nu s-a găsit niciun articol",
    useBaseWidth: "Lățimea dulapurilor de jos",
    addModel: "Adaugă model",
    removeModel: "Șterge modelul",
    modelN: "Model",
    qtyRest: "Cantitate",
    qtyRestHint: "obligatoriu",
    unitMp: "m.l.",
    autoFromBase: "Mărime preluată automat din suma lățimilor dulapurilor de jos",
    led: "LED",
    ledHint: "Iluminare LED inclusă",
    tipMobila: "Tip mobilă",
    chooseTipMobila: "Alege tipul…",
    chooseFatadeType: "Alege tipul…",
    infoAditionale: "Informații adiționale",
    infoPlaceholder: "Note generale despre comandă, cerințe speciale ale clientului, deadline-uri…",
    payloadTitle: "Date pentru bot",
    payloadHint: "Telegram nu este disponibil — datele sunt afișate mai jos.",
    tooBig: "Datele depășesc limita Telegram",
    tooBigHint: "Reduceți numărul de dulapuri sau textul din „Informații adiționale\".",
  },
  en: {
    title: "Offer Configurator",
    subtitle: "Enter the order details to generate the offer.",
    calculate: "Calculate",
    standardDims: "Standard Dimensions",
    dulapJos: "Base Cabinet",
    dulapSus: "Wall Cabinet",
    soldat: "Tall Cabinet",
    height: "Height (mm)",
    depth: "Depth (mm)",
    width: "Width (mm)",
    numarDulapuri: "Number of cabinets",
    numarJos: "Base cabinets count",
    numarSus: "Wall cabinets count",
    numarSoldati: "Tall cabinets count",
    numarNestandart: "Custom cabinets count",
    nestandart: "Custom",
    cabinet: "Cabinet",
    chooseCategory: "Choose category…",
    chooseType: "Choose type…",
    specialDetails: "Special / non-standard details (Optional)",
    specialPlaceholder: "Ex: pipe cutout, hood space, plinth modification…",
    nrSertare: "Number of drawers",
    panelWidth: "Panel width",
    emptyHint: "Set the number of cabinets to begin.",
    lockHint: "Lock / unlock",
    materialCorpuri: "Carcass material",
    chooseCorpuriBrand: "Choose brand",
    materialFatade: "Front material",
    materialPlaceholder: "Code or name (e.g. U999 ST9, Egger H3303…)",
    feronerie: "Hardware",
    chooseBrand: "Choose brand…",
    services: "Additional services pricing",
    montare: "Assembly",
    livrare: "Delivery",
    proiectare: "Design",
    tehnolog: "Technologist",
    transport: "Transport",
    blat: "Countertop + Backsplash",
    blatLbl: "Countertop",
    contrablatLbl: "Backsplash",
    type: "Type",
    size: "Size (mm)",
    chooseBlatType: "Choose countertop type…",
    blatCode: "Code / name",
    blatCodePlaceholder: "Code or name (e.g. F501 ST10, K001…)",
    brand: "Brand",
    chooseBrand: "Choose brand…",
    chooseArticle: "Choose article…",
    selectArticle: "Select article",
    searchArticle: "Search by code or name…",
    cancel: "Cancel",
    noResults: "No articles found",
    useBaseWidth: "Base cabinets width",
    addModel: "Add model",
    removeModel: "Remove model",
    modelN: "Model",
    qtyRest: "Quantity",
    qtyRestHint: "required",
    unitMp: "lin. m",
    autoFromBase: "Size auto-filled from sum of base cabinet widths",
    led: "LED",
    ledHint: "LED lighting included",
    tipMobila: "Furniture style",
    chooseTipMobila: "Choose style…",
    chooseFatadeType: "Choose type…",
    infoAditionale: "Additional information",
    infoPlaceholder: "General notes about the order, special client requirements, deadlines…",
    payloadTitle: "Bot payload",
    payloadHint: "Telegram is unavailable — the data is shown below.",
    tooBig: "Data exceeds the Telegram limit",
    tooBigHint: "Reduce the number of cabinets or the “Additional information” text.",
  },
  ru: {
    title: "Конфигуратор Предложения",
    subtitle: "Введите данные заказа для генерации предложения.",
    calculate: "Рассчитать",
    standardDims: "Стандартные размеры",
    dulapJos: "Нижний шкаф",
    dulapSus: "Верхний шкаф",
    soldat: "Высокий шкаф",
    height: "Высота (мм)",
    depth: "Глубина (мм)",
    width: "Ширина (мм)",
    numarDulapuri: "Количество шкафов",
    numarJos: "Кол. нижних шкафов",
    numarSus: "Кол. верхних шкафов",
    numarSoldati: "Кол. высоких шкафов",
    numarNestandart: "Кол. нестандартных шкафов",
    nestandart: "Нестандарт",
    cabinet: "Шкаф",
    chooseCategory: "Выберите категорию…",
    chooseType: "Выберите тип…",
    specialDetails: "Особые / нестандартные детали (необязательно)",
    specialPlaceholder: "Напр.: вырез под трубу, место для вытяжки, изменение цоколя…",
    nrSertare: "Количество ящиков",
    panelWidth: "Ширина панели",
    emptyHint: "Укажите количество шкафов, чтобы начать.",
    lockHint: "Заблокировать / разблокировать",
    materialCorpuri: "Материал корпусов",
    chooseCorpuriBrand: "Выберите бренд",
    materialFatade: "Материал фасадов",
    materialPlaceholder: "Код или название (напр.: U999 ST9, Egger H3303…)",
    feronerie: "Фурнитура",
    chooseBrand: "Выберите бренд…",
    services: "Цены доп. услуг",
    montare: "Монтаж",
    livrare: "Доставка",
    proiectare: "Проектирование",
    tehnolog: "Технолог",
    transport: "Транспорт",
    blat: "Столешница + Стеновая панель",
    blatLbl: "Столешница",
    contrablatLbl: "Стеновая панель",
    type: "Тип",
    size: "Размер (мм)",
    chooseBlatType: "Выберите тип столешницы…",
    blatCode: "Код / название",
    blatCodePlaceholder: "Код или название (напр.: F501 ST10, K001…)",
    brand: "Бренд",
    chooseBrand: "Выберите бренд…",
    chooseArticle: "Выберите артикул…",
    selectArticle: "Выберите артикул",
    searchArticle: "Поиск по коду или названию…",
    cancel: "Отмена",
    noResults: "Артикулы не найдены",
    useBaseWidth: "Ширина нижних шкафов",
    addModel: "Добавить модель",
    removeModel: "Удалить модель",
    modelN: "Модель",
    qtyRest: "Количество",
    qtyRestHint: "обязательно",
    unitMp: "м.п.",
    autoFromBase: "Размер берётся автоматически из суммы ширин нижних шкафов",
    led: "LED",
    ledHint: "LED-подсветка включена",
    tipMobila: "Тип мебели",
    chooseTipMobila: "Выберите тип…",
    chooseFatadeType: "Выберите тип…",
    infoAditionale: "Дополнительная информация",
    infoPlaceholder: "Общие заметки о заказе, особые требования клиента, сроки…",
    payloadTitle: "Данные для бота",
    payloadHint: "Telegram недоступен — данные показаны ниже.",
    tooBig: "Данные превышают лимит Telegram",
    tooBigHint: "Уменьшите количество шкафов или текст в «Дополнительной информации».",
  },
};

/* ---------------- Cabinet types per category ---------------- */
const TYPES_BY_CATEGORY = {
  jos:        ["D", "DD", "DZ", "D sertar", "Dx", "D Cargo", "DNF"],
  sus:        ["G", "GL", "GNF"],
  soldat:     ["SL", "SLD", "SLDx", "SLX"],
  nestandart: ["D", "DD", "DZ", "G", "GL", "SL"],
};

const FERONERIE_BRANDS = ["Blum", "Hettich", "DTC"];
const CORPURI_BRANDS = ["Egger", "Kronospan", "Cleaf"];
const FATADE_TYPES = ["AGT", "PAL", "Vopsite mat", "Vopsite gloss", "Vopsite mat cu freza"];
const BLAT_TYPES = ["Standart 38mm", "HPL"];
const TIP_MOBILA = ["Gola", "Mânere", "Frezat"];
const HPL_BRANDS = ["India Crown", "Fundermax"];
const STANDARD_BRANDS = ["Kronospan", "Egger"];
const FUNDERMAX_CATALOG = [
  { code: "0406 NW/NN", name: "0406 NW/NN", price: 3025 },
  { code: "B421 NW/NN", name: "B421 NW/NN", price: 3025 },
  { code: "0497 NT", name: "0497 NT", price: 3025 },
  { code: "0027 NN", name: "0027 NN", price: 3025 },
  { code: "B428 NN", name: "B428 NN", price: 3025 },
  { code: "B793 NN", name: "B793 NN", price: 3025 },
  { code: "Y102 AS", name: "Y102 AS", price: 3900 },
  { code: "Y112 AA", name: "Y112 AA", price: 6688 },
  { code: "0989 SX", name: "0989 SX", price: 4985 },
  { code: "0970 AP", name: "0970 AP", price: 3579 },
  { code: "0585 FH", name: "0585 FH", price: 2068 },
  { code: "0670 FH", name: "0670 FH", price: 2068 },
  { code: "0836 FH", name: "0836 FH", price: 2068 },
  { code: "4024 FH", name: "4024 FH", price: 2068 },
  { code: "0958 FH", name: "0958 FH", price: 2068 },
  { code: "4061 FH", name: "4061 FH", price: 2068 },
  { code: "0834 FH (negru)", name: "0834 FH (negru)", price: 2068 },
  { code: "0834 FH (alb)", name: "0834 FH (alb)", price: 4033 },
  { code: "0074 FH", name: "0074 FH", price: 1920 },
  { code: "0851 FH", name: "0851 FH", price: 1920 },
  { code: "0331 FH", name: "0331 FH", price: 2068 },
  { code: "0877 FH", name: "0877 FH", price: 2068 },
  { code: "0080 SX", name: "0080 SX", price: 2485 },
  { code: "0085 IP/SX", name: "0085 IP/SX", price: 2485 },
  { code: "0085 FH (alb)", name: "0085 FH (alb)", price: 3917 },
  { code: "0048 FH", name: "0048 FH", price: 2068 },
  { code: "0755 IP/SX", name: "0755 IP/SX", price: 2485 },
  { code: "0599 FH", name: "0599 FH", price: 2068 },
  { code: "0581 FH", name: "0581 FH", price: 2068 },
  { code: "0874 FH", name: "0874 FH", price: 729 },
  { code: "0551 FH", name: "0551 FH", price: 929 },
  { code: "0427 NN", name: "0427 NN", price: 2149 },
  { code: "B794 NT", name: "B794 NT", price: 2139 },
  { code: "0426 NW/NN", name: "0426 NW/NN", price: 2179 },
  { code: "0179 FH", name: "0179 FH", price: 1428 },
];
const INDIA_CROWN_CATALOG = [
  { name: "CONCRERE OAK", code: "RC426/RC426", price: 1190 },
  { name: "ABBEY ROAD", code: "RC683/RC683", price: 1190 },
  { name: "NOCE VERSAILLIES", code: "RC905/RC905", price: 1190 },
  { name: "MOLDAU ACACIA", code: "RC906/RC906", price: 1190 },
  { name: "TEXSTONE", code: "RC925/RC925", price: 1190 },
  { name: "BLACK", code: "RC11/RC11", price: 1250 },
  { name: "VENETO", code: "RC461/RC461", price: 1350 },
  { name: "NEW ARTIC WHITE (BLACK)", code: "RC601/RC601", price: 1250 },
  { name: "NEW ARTIC WHITE (WHITE)", code: "RC601/RC601", price: 2500 },
  { name: "BROOKLYN", code: "RC637/RC637", price: 1380 },
  { name: "CANYON MONUMENT OAK", code: "RC642/RC642", price: 1350 },
  { name: "GREYSTONE", code: "RC661/RC661", price: 1350 },
  { name: "GREY CASPIO", code: "RC671/RC671", price: 1350 },
  { name: "GREY CASPIO", code: "RC672/RC672", price: 1380 },
  { name: "MANDU SLATE", code: "RC687/RC687", price: 1380 },
  { name: "BEIGE", code: "RC871/RC871", price: 1250 },
  { name: "GREY", code: "RC885/RC885", price: 1350 },
  { name: "NOCE VERSAILLIES", code: "RC912/RC912", price: 1350 },
  { name: "SONAMA OAK", code: "RC914/RC914", price: 1350 },
  { name: "MANHATTAN", code: "RC919/RC919", price: 1350 },
  { name: "MARBLE (BLACK)", code: "RC921/RC921", price: 1350 },
  { name: "MARBLE (WHITE)", code: "RC921/RC921", price: 2650 },
  { name: "VENICE", code: "RC926/RC926", price: 1350 },
  { name: "GREY CASPIO", code: "RC927/RC927", price: 1380 },
  { name: "YOKSHIRE CHESTNUT", code: "RC935/RC935", price: 1350 },
];
const EGGER_CATALOG = [{"name":"Blat alb","code":"W1000 ST76","price":552},{"name":"Blat alb","code":"W1000 ST76","price":947},{"name":"Blat negru (300/3)","code":"U999 ST89","price":552},{"name":"Blat negru (300/3)","code":"U999 ST89","price":947},{"name":"Blat Triestino gri","code":"F021 ST75","price":552},{"name":"Blat Granit Cascia gri deschis","code":"F031 ST78","price":552},{"name":"Blat Granit Cascia gri","code":"F032 ST78","price":552},{"name":"Blat Travertin Calais","code":"F052 ST75","price":552},{"name":"Blat Marmura Cipollino gri","code":"F093 ST7","price":495},{"name":"Blat Marmura Cipollino gri","code":"F093 ST7","price":849},{"name":"Blat Marmura Siena gri","code":"F095 ST87","price":552},{"name":"Blat Marmura San Luca","code":"F108 ST9","price":552},{"name":"Blat Piatra Metal antracit","code":"F121 ST87","price":552},{"name":"Blat Granit Ambiance negru","code":"F128 PA","price":1267},{"name":"Blat Granit Ambiance bej","code":"F129 PA","price":1267},{"name":"Blat Beton Chicago gri deschis","code":"F186 ST9","price":552},{"name":"Blat Beton Chicago gri deschis","code":"F186 ST9","price":947},{"name":"Blat Beton Chicago gri inchis","code":"F187 ST9","price":552},{"name":"Blat Marmura Ambiance negru","code":"F199 PA","price":1267},{"name":"Blat Piatra Pietra Grigia antracit","code":"F205 ST9","price":552},{"name":"Blat Piatra Pietra Grigia negru","code":"F206 ST9","price":552},{"name":"Blat Piatra Pietra Grigia negru","code":"F206 ST9","price":947},{"name":"Blat Pietra Fanano gri","code":"F208 ST75","price":552},{"name":"Blat Titanit bej nisip","code":"F226 ST78","price":552},{"name":"Blat Titanit antracit","code":"F228 ST78","price":552},{"name":"Blat Marmura Cremona","code":"F229 ST75","price":552},{"name":"Blat Marmura Cremona","code":"F229 ST75","price":947},{"name":"Blat Pietra Fanano gri deschis","code":"F230 ST75","price":552},{"name":"Blat Ardezie Scivaro gri deschis","code":"F234 ST76","price":552},{"name":"Blat Ardezie Scivaro","code":"F235 ST76","price":552},{"name":"Blat Ardezie Cupria","code":"F237 ST76","price":552},{"name":"Blat Marmura Candela gri deschis","code":"F243 ST76","price":552},{"name":"Blat Otel gri antracit","code":"F620 ST87","price":552},{"name":"Blat Chromix argintiu","code":"F638 ST10","price":552},{"name":"Blat Piatra Calcit bej nisip","code":"F661 ST76","price":715},{"name":"Blat Piatra Calcit gri pietris","code":"F662 ST76","price":715},{"name":"Blat Piatra Calvia gri deschis","code":"F675 ST75","price":552},{"name":"Blat Piatra Calvia gri nisip","code":"F676 ST75","price":552},{"name":"Blat Piatra Calvia gri nisip","code":"F676 ST75","price":947},{"name":"Blat Marmura Crystal","code":"F800 ST9","price":552},{"name":"Blat Marmura Crystal","code":"F800 ST9","price":947},{"name":"Blat Marmura Formello alb","code":"F836 ST76","price":715},{"name":"Blat Stejar Bardolino","code":"H1145 ST10","price":495},{"name":"Blat Stejar Bardolino","code":"H1145 ST10","price":770},{"name":"Blat Stejar Halifax natur (100/1.5)","code":"H1180","price":1267},{"name":"Blat Stejar salbatic natur","code":"H1318 ST10","price":552},{"name":"Blat Stejar Spree gri bej","code":"H1357 ST10","price":419},{"name":"Blat Stejar Casella natur","code":"H1385 ST40","price":1267},{"name":"Blat Stejar Casella maro","code":"H1386 ST40","price":1267},{"name":"Blat Stejar Hunton deschis","code":"H2032 ST10","price":552},{"name":"Blat Stejar Hunton inchis","code":"H2033 ST10","price":552},{"name":"Blat Stejar Tonsberg natur","code":"H305 ST12","price":439},{"name":"Blat Stejar Davos trufa","code":"H3133 ST12","price":552},{"name":"Blat Stejar Vicenza","code":"H3157 ST12","price":552},{"name":"Blat Stejar Hamilton natur","code":"H3303 ST10","price":552},{"name":"Blat Stejar Nebraska natur","code":"H3331 ST10","price":552},{"name":"Blat Stejar Nebraska natur","code":"H3331 ST10","price":947},{"name":"Blat Hickory natur","code":"H3730 ST10","price":947},{"name":"Blat Hickory natur","code":"H3730 ST10","price":552}];
const KRONOSPAN_CATALOG = [{"name":"Venato","code":"K023 SQ","price":497},{"name":"Venato","code":"K023 SU","price":460},{"name":"Marmura Terrazzo Deschis","code":"K095 SU","price":460},{"name":"Beton Gri Inchis","code":"K201 RS","price":460},{"name":"Granit Clasic","code":"K204 PE","price":460},{"name":"Beton Negru","code":"K205 RS","price":460},{"name":"Galaxy Gri","code":"K207 RS","price":460},{"name":"Calcar Crem (600mm)","code":"K209 RS","price":460},{"name":"Calcar Crem (900mm)","code":"K209 RS","price":676},{"name":"Fint Negru","code":"K210 PE","price":460},{"name":"Marmura Regala Alba","code":"K212 PA","price":460},{"name":"Rouge Stone","code":"K214 RS","price":460},{"name":"Dune Alb","code":"K215 BS","price":460},{"name":"Piatra de Matase","code":"K349 RT","price":460},{"name":"Beton de Piatra","code":"K350 RT","price":460},{"name":"Piatra de Carbune","code":"K353 RT","price":460},{"name":"Navona Crem","code":"K367 PH","price":460},{"name":"Marmura Gri Atlantic","code":"K368 PH","price":460},{"name":"Nebuloasa Nebiula","code":"K369 PH","price":460},{"name":"Arosa Deschisa","code":"K538 PN","price":460},{"name":"Arosa Imietrita","code":"K539 PN","price":460},{"name":"Albus Gri","code":"K540 PN","price":460},{"name":"Calacatta Olimpus (600mm)","code":"K551 SU","price":460},{"name":"Calacatta Olimpus (900mm)","code":"K551 SU","price":676},{"name":"Marmura Alba Iceberg","code":"K552 SU","price":460},{"name":"Galaxus","code":"K553 SU","price":460},{"name":"Nero Bronzo","code":"K698 PN","price":460},{"name":"Catalatta Ambrosio","code":"K699 PN","price":460},{"name":"Portobello Elegante","code":"K703 PN","price":460},{"name":"Perlino Sabbia","code":"K704 PN","price":460},{"name":"Stonehaven Sand","code":"K705 PN","price":460},{"name":"Atelie Deschis","code":"4298 UE","price":460},{"name":"Atelie Inchis","code":"4299 UE","price":460},{"name":"Satin","code":"7045 RS","price":460},{"name":"Zapada Alba","code":"8685 RS","price":460},{"name":"Stejar Craft Gri","code":"K002 FP","price":460},{"name":"Stejar Auriu (600mm)","code":"K003 FP","price":460},{"name":"Stejar Auriu (900mm)","code":"K003 FP","price":676},{"name":"Stejar Barocco Gold","code":"K535 RW","price":460},{"name":"Stejar Silverjack Nuc","code":"K544 RW","price":460},{"name":"Stejar Silverjack Vintaje","code":"K545 RW","price":460},{"name":"Oak Cremona Torro","code":"2738 FP","price":460},{"name":"Light Vintage Oak","code":"3025 FP","price":460},{"name":"Stejar De Piatra (600mm)","code":"5527 FP","price":460},{"name":"Stejar De Piatra (900mm)","code":"5527 FP","price":676}];

const AGT_CATALOG = [{"name":"Matt Stone Grey","code":"390","price":269},{"name":"Matt Cashmere Grey","code":"387","price":319},{"name":"Matt Toledo ligh wood","code":"388","price":319},{"name":"Soft Touch Siena Wood","code":"737","price":319},{"name":"3P Slate Coffe","code":"3058","price":786},{"name":"Matt Picasso Gold","code":"395/3090","price":511},{"name":"Matt Spectrum Dark","code":"6024/3087","price":511},{"name":"Matt Spectrum Blue","code":"6025/3087","price":511},{"name":"Soft Touch Siena Wood","code":"737/3090","price":446},{"name":"HG Ephesus White","code":"6007/3082","price":406},{"name":"3P Timber Light","code":"3061/3083","price":533},{"name":"3P Timber Gri","code":"3071/3088","price":533},{"name":"HG Super White","code":"601/3082","price":348},{"name":"Matt Stone Grey","code":"390/3086","price":348},{"name":"Matt Stone Beige","code":"391/3084","price":348},{"name":"Matt Teksas Oak","code":"3037/3082","price":348},{"name":"Matt Delphi Oak","code":"3039/3090","price":348},{"name":"Matt Peru Oak","code":"3041/3090","price":348},{"name":"HG Super Cream","code":"605/3083","price":348},{"name":"HG Vison","code":"623/3090","price":348},{"name":"HG Bianco","code":"647/3083","price":348},{"name":"HG NEW Black","code":"6002/3089","price":348},{"name":"HG Deluxe Grey","code":"6008/3084","price":348},{"name":"HG Cool Grey","code":"6017/3088","price":348},{"name":"HG Crome Grey","code":"6021/3087","price":348},{"name":"HG Antracite","code":"6022/3088","price":348},{"name":"Soft Touch Black","code":"723/3089","price":392},{"name":"Soft Touch Storm Grey","code":"726/3088","price":348},{"name":"Soft Touch Stone grey","code":"728/3087","price":348},{"name":"Soft Touch New Grey","code":"729/3085","price":348},{"name":"Soft Touch Cream","code":"730/3083","price":348},{"name":"Soft touch Vision","code":"732/3090","price":348},{"name":"Matt Soft Touch White","code":"734","price":348},{"name":"Soft Touch White","code":"734/3082","price":348},{"name":"Soft touch Relax Green","code":"735/3082","price":348},{"name":"Soft Touch Beige Grey","code":"740/3085","price":348},{"name":"HG NEW Vison","code":"878/3090","price":348},{"name":"SM Light Cream","code":"398/3083","price":406},{"name":"SM Studio Grey","code":"399/3087","price":406},{"name":"SM Light Grey","code":"3001/3086","price":406},{"name":"HG Light Grey","code":"6013/3086","price":406},{"name":"HG Diamond Grey","code":"6015/3090","price":406},{"name":"HG Onyx Grey","code":"6016/3086","price":406},{"name":"HG Toros White Marble","code":"6018/3082","price":406},{"name":"HG Trend Grey","code":"6020/3086","price":406},{"name":"Matt Cashmere White","code":"383/3082","price":446},{"name":"Matt Cashmere Gold","code":"384/3088","price":446},{"name":"Matt Cashmere Cream","code":"385/3083","price":446},{"name":"Matt Cashmere Grey","code":"387/3087","price":446},{"name":"Matt Toledo ligh wood","code":"388/3090","price":446},{"name":"Matt Picasso Inox","code":"394/3087","price":536},{"name":"Matt Natural Touch Oak","code":"397/3090","price":446},{"name":"HG Metalic White","code":"699/3083","price":536},{"name":"SM Galaxy White","code":"3006/3082","price":446},{"name":"Matt Stone Loft","code":"3032/3087","price":446},{"name":"HG Metalic Antracite","code":"608/3088","price":446},{"name":"HG Galaxy White","code":"670/3082","price":446},{"name":"SM Galaxy Cream","code":"678/3083","price":446},{"name":"Matt Stone Vision","code":"3098/3082","price":562},{"name":"Matt Spectrum Rose","code":"6026/3090","price":536},{"name":"SM Pearl Black","code":"3010","price":587},{"name":"SM London Blues","code":"3011","price":587},{"name":"SM Brezee Beige","code":"3013","price":587},{"name":"SM Cloudy Grey","code":"3014","price":587},{"name":"SM Macaron Green","code":"3015","price":587},{"name":"SM Timeless Grey","code":"3017","price":587},{"name":"SM Moonlight","code":"3018","price":587},{"name":"SM Sahara Cream","code":"3019","price":587},{"name":"SM Safari Grey","code":"3020","price":587},{"name":"SM Ice Grey","code":"3021","price":587},{"name":"SM Royal Grey","code":"3022","price":587},{"name":"SM Dolphin Grey","code":"3023","price":587},{"name":"SM Pebble Grey","code":"3024","price":587},{"name":"SM Bitter","code":"3025","price":587},{"name":"SM Rustic Red","code":"3026","price":587},{"name":"SM Forest green","code":"3027","price":587},{"name":"SM Pearl White","code":"3028","price":587},{"name":"Mat Glamorous Pasific","code":"3029","price":587},{"name":"SM Sky Blue","code":"3091","price":587},{"name":"SM Tobac","code":"3092","price":587},{"name":"SM Linden","code":"3093","price":587},{"name":"SM Sonara","code":"3094","price":587},{"name":"SM Victoria Grey","code":"3095","price":587},{"name":"SM Havana Coffe","code":"3096","price":587},{"name":"SM Olive Green","code":"3097","price":587},{"name":"3P Night Black","code":"3047","price":671},{"name":"3P Elite Crey","code":"3048","price":671},{"name":"3P Deep Blue","code":"3049","price":671},{"name":"3P Leaf Green","code":"3050","price":671},{"name":"3P Caretta Green","code":"3051","price":671},{"name":"3P Comfort Grey","code":"3052","price":671},{"name":"3P Vintage Beige","code":"3053","price":671},{"name":"3P Latte Cream","code":"3054","price":671},{"name":"3P Polar White","code":"3055","price":671}];

const KRONOSPAN_PAL_CATALOG = [{"name":"Nuc Guarneri","code":"9455 PR","price":122},{"name":"Brut","code":"18mm","price":115},{"name":"Alb Textura","code":"0101 PR","price":163},{"name":"Alb Piele","code":"0110 PE","price":161},{"name":"Alb Corp","code":"0110 SM","price":161},{"name":"Gri Deschis","code":"0112 PE","price":165},{"name":"Grafit Gri","code":"0162 PE","price":165},{"name":"Antracit","code":"0164 PE","price":159},{"name":"Basalt","code":"0166 BS","price":160},{"name":"Negru","code":"0190 PE","price":159},{"name":"Gri Rece","code":"0191 SU","price":165},{"name":"SINSILA GRI","code":"0197 SU","price":160},{"name":"Cappuccino","code":"0301 SU","price":229},{"name":"Fildes","code":"0514 PE","price":165},{"name":"Migdalie","code":"0564 PE","price":165},{"name":"Gri Otel","code":"1700 PE","price":165},{"name":"Cachmere","code":"5981 PD","price":160},{"name":"Cobalt Sur","code":"6299 BS","price":229},{"name":"Sampanie","code":"7045 SU","price":165},{"name":"Alb Perla","code":"8100 SM","price":165},{"name":"Diamant de Zapada","code":"8681 PE","price":161},{"name":"Alb Diamant","code":"8681 SM","price":161},{"name":"Alb","code":"8685 PD","price":159},{"name":"Lutos Gri","code":"K096 SU","price":229},{"name":"Mouse Gri","code":"K519 SU","price":159},{"name":"Green Smoky","code":"K521 SU","price":229},{"name":"Macadamia","code":"K681 PD","price":229},{"name":"Black Truffle","code":"K684 PD","price":229},{"name":"Steel Blue","code":"K685 PD","price":229},{"name":"Powder Pink","code":"K686 PD","price":229},{"name":"Dark Forest","code":"K687 PD","price":229},{"name":"Atelie Deschis","code":"4298 SU","price":219},{"name":"Piatra de Matase","code":"K349 RT","price":249},{"name":"Beton de Piatra","code":"K350 RT","price":249},{"name":"Piatra de Carbune","code":"K353 RT","price":249},{"name":"Artar","code":"0375 BS","price":160},{"name":"Fag Bavaria","code":"0381 BS","price":160},{"name":"Nuc","code":"0729 BS","price":160},{"name":"Mesteacan","code":"1715 BS","price":160},{"name":"Alder","code":"1912 BS","price":160},{"name":"Wenge Magic","code":"2226 PR","price":165},{"name":"Stejar Cotta Cremona","code":"2737 PW","price":155},{"name":"Stejar Torro Cremona","code":"2738 PW","price":159},{"name":"Stejar Cannolo Cremona","code":"2739 PW","price":159},{"name":"Stejar Sonoma","code":"3025 SN","price":161},{"name":"Stejar Sonoma de Trufa","code":"5194 SN","price":165},{"name":"Stejar Slavonia","code":"5501 SN","price":205},{"name":"Stejar de Piatra","code":"5527 SN","price":219},{"name":"Stejar Negano","code":"8431 SN","price":197},{"name":"Stejar Laptos","code":"8622 PR","price":165},{"name":"Stejar Ferrara","code":"8921 BS","price":160},{"name":"Nuc Tiepolo","code":"8953 SU","price":160},{"name":"Stejar Craft Alb","code":"K001 PW","price":210},{"name":"Stejar Craft Aur","code":"K003 PW","price":163},{"name":"Stejar Craft Tutun","code":"K004 PW","price":197},{"name":"Stejar Urban Oister","code":"K005 PW","price":210},{"name":"Nuc Select Intunecat","code":"K009 PW","price":210},{"name":"Pin Alb","code":"K010 SN","price":210},{"name":"Elm Liberty Gri","code":"K019 PW","price":210},{"name":"Blackwood Orz","code":"K021 SN","price":205},{"name":"Blackwood Satin","code":"K022 SN","price":205},{"name":"Stejar Clubhouse Gri","code":"K079 PW","price":197},{"name":"Stejar Litoral Alb","code":"K080 PW","price":210},{"name":"Stejar Litoral Satin","code":"K081 PW","price":210},{"name":"Artwood Deschis","code":"K083 SN","price":219},{"name":"Hickory Rockfor Deschis","code":"K085 PW","price":219},{"name":"Hickory Rockfor Natur","code":"K086 PW","price":219},{"name":"Hickory Rockfor Inchis","code":"K087 PW","price":219},{"name":"Lemn Scandinav Alb","code":"K088 PW","price":210},{"name":"Stejar Castello Gri","code":"K357 RW","price":205},{"name":"Stejar Castello Miere","code":"K358 PW","price":219},{"name":"Stejar Castello Cognac","code":"K359 PW","price":219},{"name":"Stejar Harbor de Aur","code":"K361 PW","price":219},{"name":"Stejar Ewok de Coasta","code":"K365 PW","price":163},{"name":"Ash Surfside Pure","code":"K524 SN","price":219},{"name":"Stejar Hadson Bisconti","code":"K527 HU","price":251},{"name":"Stejar Hudson Auriu","code":"K529 HU","price":251},{"name":"Stejar Hudson Amaretto","code":"K530 HU","price":251},{"name":"Castan Arvadonna Flacara","code":"K532 AD","price":251},{"name":"Castan Arvadonna Nurca","code":"K533 AD","price":251},{"name":"Stejar Baroko Gold","code":"K535 RW","price":219},{"name":"Stejar Baroko Ristretto","code":"K537 RW","price":219},{"name":"Stejar Silverjack Nuc","code":"K544 RW","price":219},{"name":"Stejar Silverjack Vintaje","code":"K545 RW","price":219},{"name":"Fracin Kala Fumurie","code":"K548 RW","price":219},{"name":"Stejar Hadson Ciocolata","code":"K554 HU","price":251}];
const CLEAF_PAL_CATALOG = [{"name":"PAL Reflex Centauri CF","code":"FB63","price":293.31},{"name":"PAL Tranche/Fiocco Rovere","code":"LM12","price":379.57},{"name":"PAL Talco/Fiocco Torano CF","code":"FC13","price":414.08},{"name":"PAL Concreta","code":"FC38","price":362.32},{"name":"PAL Reflex Provenze CF","code":"FC84","price":310.56},{"name":"PAL Sherwood/Maloja lemn CE","code":"SO73","price":362.32},{"name":"PAL Esperia/Maloja CF","code":"CF 15 5136","price":640},{"name":"PAL Penelope","code":"CF FA46","price":515},{"name":"PAL Quercia","code":"CE S203","price":613},{"name":"PAL Quercia","code":"CF S206","price":640},{"name":"PAL Alpaca","code":"CF FC43","price":521},{"name":"PAL Alpaca","code":"CF FC44","price":521},{"name":"PAL Taranta","code":"CF FD10","price":579},{"name":"PAL Taranta","code":"CF FD28","price":552},{"name":"PAL Alpaca deschis","code":"CF FD30","price":492},{"name":"PAL Alpaca inchis","code":"CF FD48","price":521},{"name":"PAL Matrice","code":"CF LS92","price":539},{"name":"PAL Matrice","code":"CF LS95","price":539},{"name":"PAL Corteccia","code":"CE S173","price":640},{"name":"PAL Corteccia","code":"CF S215","price":640},{"name":"PAL Sherwood/Maloja Brown CF","code":"15 5071","price":745},{"name":"PAL Ares Total White CF","code":"BO73","price":579},{"name":"PAL Penelope Maya Bronze CF","code":"FA33","price":515},{"name":"PAL Penelope Confort CF","code":"FA42","price":515},{"name":"PAL Ares Beton CF","code":"FB11","price":579},{"name":"PAL Ares Expanse CF","code":"FB52","price":579},{"name":"PAL Riga Fiocco","code":"FB79","price":665},{"name":"PAL Concreta","code":"FC88","price":640},{"name":"PAL Traccia Fiocco CF","code":"FC91","price":655},{"name":"PAL Paglia","code":"FC97","price":640},{"name":"PAL Sable Valley CF","code":"LR22","price":609},{"name":"PAL Poro Noce Acerno CF","code":"LS14","price":477},{"name":"PAL Poro Noce","code":"LS47","price":487},{"name":"PAL Riga","code":"LS47","price":640},{"name":"PAL Poro Noce","code":"LS53","price":487},{"name":"PAL Riga","code":"LS53","price":640},{"name":"PAL Poro Noce","code":"LS54","price":487},{"name":"PAL Riga","code":"LS54","price":640},{"name":"PAL Pembroke/Maloja Hacney Brook CF","code":"S128","price":728},{"name":"PAL Esperia/Maloja Madrid CF","code":"S133","price":640},{"name":"PAL Fronda","code":"S156","price":640},{"name":"PAL OKOBO Meguro/Maloja CF","code":"S160","price":793},{"name":"PAL Quercia CF","code":"S182","price":613},{"name":"PAL Quercia CF","code":"S184","price":601},{"name":"PAL Primo Fior CF","code":"UA80","price":579},{"name":"PAL Quercia","code":"S181","price":613}];
const EGGER_PAL_CATALOG = [{"name":"Piersica nude","code":"U232 ST9","price":189.79},{"name":"Stejar Davenport natur deschis","code":"H3359 ST32","price":310.56},{"name":"Rosu Garnet","code":"EG U399 TM","price":386},{"name":"Albastru Intens","code":"EG U590 TM","price":386},{"name":"Verde eucalipt","code":"EG U604 TM","price":386},{"name":"Verde piatra","code":"EG U665 TM","price":386},{"name":"Gri casmir","code":"EG U702 TM","price":386},{"name":"Gri Angora","code":"EG U705 TM","price":386},{"name":"Gri deschis","code":"EG U708 TM","price":386},{"name":"Gri praf","code":"EG U732 TM","price":386},{"name":"Gri Havanna","code":"EG U755 TM","price":386},{"name":"Gri cubanit","code":"EG U767 TM","price":386},{"name":"Gri onix","code":"EG U960 TM","price":386},{"name":"Negru","code":"EG U999 TM","price":386},{"name":"Alb alpin","code":"EG W1100 TM","price":386},{"name":"Frasin Abano maro","code":"EG H1227 TM12","price":425},{"name":"Stejar Cuneo decolorat","code":"EG H3311 TM28","price":528},{"name":"Granit Ambiance negru","code":"EG F128 TM/U999","price":930},{"name":"Granit Ambiance bej","code":"EG F129 TM/U705","price":930},{"name":"Alb clasic","code":"W960 SM","price":164},{"name":"Alb clasic","code":"W960 ST7 NEW","price":190},{"name":"Alb clasic","code":"W960 ST7 NEW","price":164},{"name":"Alb Premium piele","code":"W1000 ST9","price":196},{"name":"Alb Premium","code":"W1000 ST19","price":286},{"name":"Alb Premium","code":"W1000 ST38","price":378},{"name":"Alb Alpin","code":"W1100 ST9","price":217},{"name":"Alb Portelan","code":"W1200 ST9","price":236},{"name":"Alb alabastru","code":"U104 ST9","price":218},{"name":"Bej Bumbac","code":"U113 ST9","price":223},{"name":"Bej carat","code":"U115 ST9","price":236},{"name":"Bej nisip","code":"U156 ST9","price":204},{"name":"Piele gri pietris","code":"U201 ST9","price":236},{"name":"Bej migdal","code":"U211 ST9","price":264},{"name":"Bej migdal","code":"U211 ST9","price":305},{"name":"Bej camel","code":"U216 ST9","price":204},{"name":"Bej camel","code":"U216 ST9","price":259},{"name":"Bej fin","code":"EG U220 ST9","price":236},{"name":"Crem bej","code":"U222 ST9","price":196},{"name":"Bej caramel","code":"EG U250 ST9","price":263},{"name":"Trandafir antic","code":"U325 ST9","price":264},{"name":"Albastru denim","code":"EG U540 ST9","price":264},{"name":"Verde eucalipt","code":"U604 ST9","price":286},{"name":"Verde Fjord","code":"U636 ST9","price":286},{"name":"Verde Salvie","code":"U638 ST9","price":286},{"name":"Verde oliv","code":"U640 ST9","price":286},{"name":"Verde agave MK","code":"EG U645 ST9","price":286},{"name":"Verde piatra","code":"U665 ST9","price":286},{"name":"Verde cedru","code":"EG U669 ST9","price":263},{"name":"Verde cedru","code":"EG U669 ST9","price":305},{"name":"Casimir","code":"U702 ST9","price":196},{"name":"Casimir","code":"U702 ST9","price":259},{"name":"Gri Angora","code":"EG U705 ST9","price":217},{"name":"Matase gri","code":"U707 ST9","price":236},{"name":"Gri deschis","code":"U708 ST9","price":200},{"name":"Cappuccino","code":"U727 ST9","price":217},{"name":"Praf gri","code":"U732 ST9","price":223},{"name":"Taupe inchis","code":"U740 ST9","price":236},{"name":"Trufe","code":"U748 ST9","price":236},{"name":"Gri-maro","code":"U750 ST9","price":217},{"name":"Gri Havanna","code":"EG U755 ST9","price":236},{"name":"Gri Havanna","code":"EG U755 ST9","price":277},{"name":"Gri perlat","code":"U763 ST9","price":204},{"name":"Cubanit gri","code":"U767 ST9","price":236},{"name":"Alb-gri","code":"U775 ST9","price":204},{"name":"Arctic gri","code":"U788 ST9","price":236},{"name":"Maro inchis","code":"EG U818 ST9","price":286},{"name":"Negru moale","code":"U899 ST9","price":236},{"name":"Onix gri","code":"U960 ST9","price":236},{"name":"Grafit","code":"U961 ST7","price":218},{"name":"Antracit","code":"1963 ST9","price":196},{"name":"Gri carbune","code":"EG U968 ST9","price":236},{"name":"Negru-brun","code":"U989 ST9","price":263},{"name":"Negru piele","code":"1999 ST7","price":205},{"name":"Negru textura","code":"1999 ST19","price":286},{"name":"Beton Chicago gri deschis","code":"F186 ST9","price":286},{"name":"Beton Chicago gri inchis","code":"F187 ST9","price":286},{"name":"Piatra Pietra Grigia negru","code":"F206 ST9","price":286},{"name":"Ardezie Scivaro","code":"F235 ST76","price":311},{"name":"Textil bej","code":"F416 ST10","price":205},{"name":"Metal bronz texturat","code":"F528 ST20","price":311},{"name":"Marmura cristal","code":"F800 ST9","price":286},{"name":"Stejar Kansas maro","code":"H1113 ST10","price":236},{"name":"Stejar Kansas maro","code":"H1113 ST10","price":277},{"name":"Stejar Sacramento maro","code":"H1142 ST36","price":378},{"name":"Stejar Natur Bardolino","code":"H1145 ST10","price":218},{"name":"Stejar Halifax natur","code":"H1180 ST37","price":428},{"name":"Stejar Halifax tabac","code":"H1181 ST37","price":428},{"name":"Stejar termo negru-maro","code":"H1199 ST12","price":236},{"name":"Frasin Sevilla","code":"H1223 ST19","price":311},{"name":"Frasin Trondheim","code":"H1225 ST12","price":236},{"name":"Salcam Sheffield natur","code":"H1242 ST10","price":286},{"name":"Salcam deschis","code":"H1277 ST9","price":223},{"name":"Stejar Belmont maro","code":"H1303 ST12","price":264},{"name":"Nuc Warmia maro","code":"H1307 ST19","price":311},{"name":"Stejar Nisip Bej","code":"H1312 ST10","price":286},{"name":"Stejar Bookmatch","code":"EG H1316 ST17","price":236},{"name":"Stejar salbatic natur","code":"H1318 ST10","price":205},{"name":"Stejar Santa Fe","code":"H1330 ST10","price":286},{"name":"Stejar Coniac Sherman","code":"H1344 ST32","price":428},{"name":"Stejar Baronia deschis","code":"H1362 ST12","price":264},{"name":"Stejar Casella natur deschis","code":"H1367 ST40","price":428},{"name":"Stejar Casella Marone MK","code":"EG H1369 ST40","price":428},{"name":"Stejar Orleans nisip MK","code":"EG H1377 ST36","price":378},{"name":"Stejar Orleans maro MK","code":"EG H1379 ST36","price":378},{"name":"Stejar Casella natur","code":"EG H1385 ST40","price":428},{"name":"Stejar Casella natur","code":"EG H1385 ST40","price":469},{"name":"Stejar Casella maro","code":"H1386 ST40","price":428},{"name":"Stejar Casella maro","code":"H1386 ST40","price":469},{"name":"Stejar Denver trufe","code":"H1399 ST10","price":286},{"name":"Pin Cascina","code":"H1401 ST22","price":205},{"name":"Castan Brighton","code":"EG H1708 ST17","price":236},{"name":"Nuc Lincoln","code":"H1714 ST19","price":311},{"name":"Nuc Parona","code":"H1715 ST12","price":236},{"name":"Stejar inchis Hunton","code":"H2033 ST10","price":286},{"name":"Eucalipt maro inchis","code":"H3043 ST12","price":218},{"name":"Stejar Tonsberg natur","code":"H305 ST12","price":286},{"name":"Stejar Tonsberg maro","code":"H309 ST12","price":286},{"name":"Stejar Davos natur","code":"H3131 ST12","price":205},{"name":"Stejar Davos trufe","code":"H3133 ST12","price":236},{"name":"Stejar Lorenzo bej-gri","code":"H3146 ST19","price":311},{"name":"Stejar Vicenza incolor","code":"H3152 ST19","price":311},{"name":"Stejar Charleston maro inchis","code":"H3154 ST36","price":378},{"name":"Stejar Corbridge gri EG","code":"H3156 ST12","price":236},{"name":"Stejar Venetia","code":"H3157 ST12","price":217},{"name":"Stejar Venetia","code":"H3157 ST12","price":277},{"name":"Stejar Kendal natur","code":"H3170 ST12","price":264},{"name":"Stejar Halifax cositor","code":"H3176 ST37","price":428},{"name":"Fineline alb","code":"H3195 ST19","price":311},{"name":"Fineline gri mediu","code":"H3197 ST19","price":311},{"name":"Fineline gri inchis","code":"H3198 ST19","price":311},{"name":"Stejar Arlington natur","code":"H3303 ST10","price":236},{"name":"Stejar Cuneo maro","code":"H3317 ST28","price":428},{"name":"Stejar Rovato natur deschis","code":"EG H3322 ST17","price":236},{"name":"Stejar Gladstone","code":"H3325 ST28","price":428},{"name":"Stejar Nebraska Natur","code":"H3331 ST10","price":242},{"name":"Stejar Corbridge natur","code":"H3395 ST12","price":223},{"name":"Stejar Kendal coniac","code":"H3398 ST12","price":236},{"name":"Pin Aland alb","code":"H3430 ST22","price":236},{"name":"Pin Aland polar","code":"H3433 ST22","price":236},{"name":"Nuc Pacific natur","code":"H3700 ST10","price":236},{"name":"Nuc Pacific tabac","code":"H3702 ST10","price":236},{"name":"Castan tabac","code":"H3710 ST12","price":264},{"name":"Hickory natur EG","code":"H3730 ST10","price":264},{"name":"Nuc Dijon","code":"H3734 ST9","price":218},{"name":"Bolivar Wood natur","code":"EG H3786 ST17","price":311},{"name":"Bolivar Wood maro","code":"EG H3787 ST17","price":311},{"name":"Bolivar Wood maro","code":"EG H3787 ST17","price":332},{"name":"Nuc Alba tabac","code":"EG H7586 ST19","price":236}];
const CORPURI_CATALOGS = { Egger: EGGER_PAL_CATALOG, Kronospan: KRONOSPAN_PAL_CATALOG, Cleaf: CLEAF_PAL_CATALOG };

/* ---------------- Icons ---------------- */
const Icon = {
  logo: () => (
    <svg className="logo-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
      <polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
      <line x1="12" y1="22.08" x2="12" y2="12"/>
    </svg>
  ),
  sliders: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/>
      <line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/>
      <line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/>
      <line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/>
      <line x1="17" y1="16" x2="23" y2="16"/>
    </svg>
  ),
  cabinet: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="4" y="3" width="16" height="18" rx="1.5"/>
      <line x1="12" y1="3" x2="12" y2="21"/>
      <circle cx="10" cy="12" r="0.7" fill="currentColor"/>
      <circle cx="14" cy="12" r="0.7" fill="currentColor"/>
    </svg>
  ),
  lockOpen: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="4" y="11" width="16" height="10" rx="2"/>
      <path d="M8 11V7a4 4 0 0 1 8 0"/>
    </svg>
  ),
  lockClosed: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="4" y="11" width="16" height="10" rx="2"/>
      <path d="M8 11V7a4 4 0 0 1 8 0v4"/>
    </svg>
  ),
  layers: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <polygon points="12 2 2 7 12 12 22 7 12 2"/>
      <polyline points="2 17 12 22 22 17"/>
      <polyline points="2 12 12 17 22 12"/>
    </svg>
  ),
  panel: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="4" width="18" height="16" rx="1.5"/>
      <line x1="3" y1="10" x2="21" y2="10"/>
    </svg>
  ),
  hardware: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="3"/>
      <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1.08-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9 1.65 1.65 0 0 0 4.27 7.18l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
    </svg>
  ),
  receipt: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 2v20l3-2 3 2 3-2 3 2 3-2 3 2V2l-3 2-3-2-3 2-3-2-3 2-3-2z"/>
      <line x1="8" y1="9" x2="16" y2="9"/>
      <line x1="8" y1="13" x2="16" y2="13"/>
      <line x1="8" y1="17" x2="13" y2="17"/>
    </svg>
  ),
  countertop: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2" y="9" width="20" height="4" rx="1"/>
      <path d="M5 13v6"/><path d="M19 13v6"/>
    </svg>
  ),
  bulb: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M9 18h6"/><path d="M10 22h4"/>
      <path d="M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.2 1 2v1.3h6V16.7c0-.8.4-1.5 1-2A7 7 0 0 0 12 2z"/>
    </svg>
  ),
  furniture: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 10h18v8H3z"/><path d="M3 10V6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v4"/>
      <path d="M5 18v2"/><path d="M19 18v2"/>
    </svg>
  ),
  notes: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
      <polyline points="14 2 14 8 20 8"/>
      <line x1="9" y1="13" x2="15" y2="13"/>
      <line x1="9" y1="17" x2="13" y2="17"/>
    </svg>
  ),
};

/* ---------------- Reusable controls ---------------- */
function LockButton({ locked, onToggle, title }) {
  return (
    <button
      className={"lock-btn " + (locked ? "locked" : "")}
      onClick={onToggle}
      title={title}
      aria-pressed={locked}
      type="button"
    >
      {locked ? <Icon.lockClosed /> : <Icon.lockOpen />}
    </button>
  );
}

function Field({ label, children }) {
  return (
    <div className="field">
      <label className="field-label">{label}</label>
      {children}
    </div>
  );
}

function NumInput({ value, onChange, placeholder, disabled, min }) {
  return (
    <input
      type="number"
      className="input"
      value={value ?? ""}
      placeholder={placeholder}
      disabled={disabled}
      min={min}
      onChange={(e) => {
        const v = e.target.value;
        onChange(v === "" ? "" : Number(v));
      }}
    />
  );
}

/* ---------------- Standard dimensions card ---------------- */
function StandardDims({ t, standards, setStandards }) {
  const cols = [
    { key: "jos", label: t.dulapJos },
    { key: "sus", label: t.dulapSus },
    { key: "soldat", label: t.soldat },
  ];
  const placeholders = {
    jos:    { height: "Ex: 820",  depth: "Ex: 500" },
    sus:    { height: "Ex: 700",  depth: "Ex: 300" },
    soldat: { height: "Ex: 2100", depth: "Ex: 500" },
  };
  const update = (cat, field, value) => {
    setStandards((s) => ({ ...s, [cat]: { ...s[cat], [field]: value } }));
  };
  const toggleLock = (cat) => {
    setStandards((s) => ({ ...s, [cat]: { ...s[cat], locked: !s[cat].locked } }));
  };
  return (
    <section className="card">
      <h2 className="card-title"><Icon.sliders />{t.standardDims}</h2>
      <div className="standard-grid">
        {cols.map((c) => {
          const std = standards[c.key];
          return (
            <div className="standard-col" key={c.key}>
              <div className="standard-head">
                <span className="label">{c.label}</span>
                <LockButton
                  locked={std.locked}
                  title={t.lockHint}
                  onToggle={() => toggleLock(c.key)}
                />
              </div>
              <Field label={t.height}>
                <NumInput
                  value={std.height}
                  onChange={(v) => update(c.key, "height", v)}
                  placeholder={placeholders[c.key].height}
                  disabled={std.locked}
                />
              </Field>
              <Field label={t.depth}>
                <NumInput
                  value={std.depth}
                  onChange={(v) => update(c.key, "depth", v)}
                  placeholder={placeholders[c.key].depth}
                  disabled={std.locked}
                />
              </Field>
            </div>
          );
        })}
      </div>
    </section>
  );
}

/* ---------------- Numar dulapuri card (4 categories) ---------------- */
function NumarDulapuri({ t, counts, setCounts, locked, setLocked }) {
  const rows = [
    { key: "jos", label: t.numarJos },
    { key: "sus", label: t.numarSus },
    { key: "soldat", label: t.numarSoldati },
    { key: "nestandart", label: t.numarNestandart },
  ];
  const update = (k, v) => setCounts((c) => ({ ...c, [k]: v }));
  return (
    <section className="card">
      <div className="card-title-row">
        <h2 className="card-title">{t.numarDulapuri}</h2>
        <LockButton locked={locked} onToggle={() => setLocked(!locked)} title={t.lockHint} />
      </div>
      <div className="counts-grid">
        {rows.map((r) => (
          <Field key={r.key} label={r.label}>
            <input
              type="number"
              className="input"
              value={counts[r.key]}
              min={0}
              max={50}
              disabled={locked}
              placeholder="0"
              onChange={(e) => {
                const raw = e.target.value;
                if (raw === "") { update(r.key, 0); return; }
                const n = Math.max(0, Math.min(50, Number(raw)));
                update(r.key, n);
              }}
            />
          </Field>
        ))}
      </div>
    </section>
  );
}

/* ---------------- Single cabinet card ---------------- */
function CabinetCard({ t, label, cabinet, update, standards }) {
  const stdCat = cabinet.category;
  // For 'nestandart' cabinets there are no standard dimensions to inherit
  const std = (stdCat && stdCat !== "nestandart") ? standards[stdCat] : null;
  const effectiveHeight = cabinet.height !== "" ? cabinet.height : (std?.height ?? "");
  const effectiveDepth = cabinet.depth !== "" ? cabinet.depth : (std?.depth ?? "");
  const heightDisabled = !!std?.locked;
  const depthDisabled = !!std?.locked;
  const availableTypes = TYPES_BY_CATEGORY[cabinet.category] || [];

  return (
    <section className="card cabinet-card">
      <div className="cabinet-head">
        <div className="cabinet-head-left">
          <span className="cabinet-icon"><Icon.cabinet /></span>
          <span className="cabinet-name">{label}</span>
        </div>
        <div className="cabinet-selects">
          <select
            className="select"
            value={cabinet.type}
            onChange={(e) => {
              const newType = e.target.value;
              const patch = { type: newType };
              if (newType === "DD") patch.width = "600";
              update(patch);
            }}
          >
            <option value="">{t.chooseType}</option>
            {availableTypes.map((tp) => (
              <option key={tp} value={tp}>{tp}</option>
            ))}
          </select>
        </div>
      </div>

      <div className="dims-grid">
        <Field label={t.width}>
          {cabinet.type === "D Cargo" ? (
            <select
              className="select"
              value={cabinet.width}
              onChange={(e) => update({ width: e.target.value })}
            >
              <option value="">{t.chooseType}</option>
              <option value="150">150 mm</option>
              <option value="200">200 mm</option>
              <option value="300">300 mm</option>
            </select>
          ) : cabinet.type === "DD" ? (
            <NumInput
              value="600"
              onChange={() => {}}
              placeholder="600"
              disabled={true}
            />
          ) : (
            <NumInput
              value={cabinet.width}
              onChange={(v) => update({ width: v })}
              placeholder="Ex: 600"
            />
          )}
        </Field>
        <Field label={t.height}>
          <NumInput
            value={effectiveHeight === "" ? "" : effectiveHeight}
            onChange={(v) => update({ height: v })}
            placeholder="Ex: 800"
            disabled={heightDisabled}
          />
        </Field>
        <Field label={t.depth}>
          <NumInput
            value={effectiveDepth === "" ? "" : effectiveDepth}
            onChange={(v) => update({ depth: v })}
            placeholder="Ex: 500"
            disabled={depthDisabled}
          />
        </Field>
      </div>

      {(cabinet.type === "D sertar" || cabinet.type === "Dx") && (
        <Field label={t.nrSertare}>
          <NumInput
            value={cabinet.drawers ?? ""}
            onChange={(v) => update({ drawers: v })}
            placeholder="Ex: 3"
          />
        </Field>
      )}

      {cabinet.type === "SLDx" && (
        <Field label={t.nrSertare}>
          <select
            className="select"
            value={cabinet.drawers ?? ""}
            onChange={(e) => update({ drawers: e.target.value })}
          >
            <option value="">{t.chooseType}</option>
            <option value="1">1</option>
            <option value="2">2</option>
          </select>
        </Field>
      )}

      {(cabinet.type === "DNF" || cabinet.type === "GNF") && (
        <Field label={t.panelWidth}>
          <NumInput
            value={cabinet.panelWidth ?? ""}
            onChange={(v) => update({ panelWidth: v })}
            placeholder="Ex: 100"
          />
        </Field>
      )}

      <Field label={t.specialDetails}>
        <textarea
          className="input"
          rows={2}
          placeholder={t.specialPlaceholder}
          value={cabinet.notes}
          onChange={(e) => update({ notes: e.target.value })}
        />
      </Field>
    </section>
  );
}

/* ---------------- Sidebar sections ---------------- */
function CorpuriModel({ t, value, setValue, brand, setBrand }) {
  const [modalOpen, setModalOpen] = React.useState(false);
  const [search, setSearch] = React.useState("");
  React.useEffect(() => {
    if (!modalOpen) return;
    const onKey = (e) => { if (e.key === "Escape") setModalOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [modalOpen]);
  const catalog = CORPURI_CATALOGS[brand] || [];
  const filtered = React.useMemo(() => {
    const q = search.trim().toLowerCase();
    if (!q) return catalog;
    return catalog.filter((a) => a.code.toLowerCase().includes(q) || a.name.toLowerCase().includes(q));
  }, [search, brand]);
  const hasBrand = !!brand;
  return (
    <React.Fragment>
      <div className="fatade-row">
        {hasBrand ? (
          <button
            type="button"
            className="article-picker"
            onClick={() => { setSearch(""); setModalOpen(true); }}
          >
            <span className={value ? "ap-value" : "ap-placeholder"}>
              {value || t.chooseArticle}
            </span>
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <polyline points="6 9 12 15 18 9"/>
            </svg>
          </button>
        ) : (
          <input
            className="input"
            placeholder={t.materialPlaceholder}
            value={value}
            onChange={(e) => setValue(e.target.value)}
          />
        )}
        <select
          className="select"
          value={brand}
          onChange={(e) => {
            setBrand(e.target.value);
            setValue("");
          }}
        >
          <option value="">{t.chooseCorpuriBrand}</option>
          {CORPURI_BRANDS.map((b) => (
            <option key={b} value={b}>{b}</option>
          ))}
        </select>
      </div>
      {modalOpen && (
        <div className="modal-overlay" onClick={() => setModalOpen(false)}>
          <div className="modal" onClick={(e) => e.stopPropagation()}>
            <div className="modal-head">
              <h3>{t.selectArticle} — {brand}</h3>
              <button type="button" className="modal-close" onClick={() => setModalOpen(false)} aria-label={t.cancel}>
                <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
                </svg>
              </button>
            </div>
            <div className="modal-search">
              <input className="input" autoFocus placeholder={t.searchArticle} value={search} onChange={(e) => setSearch(e.target.value)} />
            </div>
            <div className="modal-list">
              {filtered.length === 0 ? (
                <div className="modal-empty">{t.noResults}</div>
              ) : (
                filtered.map((a, i) => (
                  <button
                    type="button"
                    key={i}
                    className="article-row"
                    onClick={() => {
                      setValue(`${a.code} — ${a.name}`);
                      setModalOpen(false);
                    }}
                  >
                    <div className="article-row-main">
                      <span className="article-code">{a.code}</span>
                      <span className="article-name">{a.name}</span>
                    </div>
                    <span className="article-price">{a.price} MDL</span>
                  </button>
                ))
              )}
            </div>
          </div>
        </div>
      )}
    </React.Fragment>
  );
}

function FatadeModel({ t, value, setValue, fatadeType, setFatadeType, agtArticle, setAgtArticle, palBrand, setPalBrand, palArticle, setPalArticle }) {
  const [modalOpen, setModalOpen] = React.useState(false);
  const [search, setSearch] = React.useState("");
  React.useEffect(() => {
    if (!modalOpen) return;
    const onKey = (e) => { if (e.key === "Escape") setModalOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [modalOpen]);
  const isAgt = fatadeType === "AGT";
  const isPal = fatadeType === "PAL";
  const palCatalog = isPal ? (CORPURI_CATALOGS[palBrand] || []) : [];
  const activeCatalog = isAgt ? AGT_CATALOG : (isPal ? palCatalog : []);
  const filtered = React.useMemo(() => {
    const q = search.trim().toLowerCase();
    if (!q) return activeCatalog;
    return activeCatalog.filter(
      (a) => a.code.toLowerCase().includes(q) || a.name.toLowerCase().includes(q)
    );
  }, [search, isAgt, isPal, palBrand]);
  const palHasBrand = isPal && !!palBrand;
  const usePicker = isAgt || palHasBrand;
  const pickerValue = isAgt ? agtArticle : palArticle;
  const setPickerValue = (v) => { if (isAgt) setAgtArticle(v); else setPalArticle(v); };
  const modalTitle = isAgt ? "AGT" : (isPal ? `PAL — ${palBrand}` : "");
  return (
    <React.Fragment>
      <div className="fatade-row">
        {usePicker ? (
          <button
            type="button"
            className="article-picker"
            onClick={() => { setSearch(""); setModalOpen(true); }}
          >
            <span className={pickerValue ? "ap-value" : "ap-placeholder"}>
              {pickerValue || t.chooseArticle}
            </span>
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <polyline points="6 9 12 15 18 9"/>
            </svg>
          </button>
        ) : (
          <input
            className="input"
            placeholder={t.materialPlaceholder}
            value={value}
            onChange={(e) => setValue(e.target.value)}
          />
        )}
        <select
          className="select"
          value={fatadeType}
          onChange={(e) => {
            const newType = e.target.value;
            setFatadeType(newType);
            if (newType !== "AGT") setAgtArticle("");
            if (newType !== "PAL") { setPalBrand(""); setPalArticle(""); }
          }}
        >
          <option value="">{t.chooseFatadeType}</option>
          {FATADE_TYPES.map((f) => (
            <option key={f} value={f}>{f}</option>
          ))}
        </select>
      </div>
      {isPal && (
        <div className="fatade-row" style={{ marginTop: 8 }}>
          <select
            className="select"
            value={palBrand}
            onChange={(e) => {
              setPalBrand(e.target.value);
              setPalArticle("");
            }}
          >
            <option value="">{t.chooseCorpuriBrand}</option>
            {CORPURI_BRANDS.map((b) => (
              <option key={b} value={b}>{b}</option>
            ))}
          </select>
        </div>
      )}
      {modalOpen && (
        <div className="modal-overlay" onClick={() => setModalOpen(false)}>
          <div className="modal" onClick={(e) => e.stopPropagation()}>
            <div className="modal-head">
              <h3>{t.selectArticle} — {modalTitle}</h3>
              <button type="button" className="modal-close" onClick={() => setModalOpen(false)} aria-label={t.cancel}>
                <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
                </svg>
              </button>
            </div>
            <div className="modal-search">
              <input
                className="input"
                autoFocus
                placeholder={t.searchArticle}
                value={search}
                onChange={(e) => setSearch(e.target.value)}
              />
            </div>
            <div className="modal-list">
              {filtered.length === 0 ? (
                <div className="modal-empty">{t.noResults}</div>
              ) : (
                filtered.map((a, i) => (
                  <button
                    type="button"
                    key={i}
                    className="article-row"
                    onClick={() => {
                      setPickerValue(`${a.code} — ${a.name}`);
                      setModalOpen(false);
                    }}
                  >
                    <div className="article-row-main">
                      <span className="article-code">{a.code}</span>
                      <span className="article-name">{a.name}</span>
                    </div>
                    <span className="article-price">{a.price} MDL</span>
                  </button>
                ))
              )}
            </div>
          </div>
        </div>
      )}
    </React.Fragment>
  );
}

/* ---------------- Several models of one material ----------------
   Corp, fatade and blat can each list several models. The first one has no
   quantity: it is whatever the cabinets need beyond the other models, which
   the model computes. Every extra model needs a quantity; without one (or
   with 0 or less) the bot sends it to «ТРЕБУЕТ УТОЧНЕНИЯ». */
function ModelHead({ t, index, onRemove }) {
  if (index === 0) return null;
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", margin: "12px 0 6px" }}>
      <div className="sub-label" style={{ margin: 0 }}>{t.modelN} {index + 1}</div>
      <button type="button" className="modal-close" onClick={onRemove} title={t.removeModel} aria-label={t.removeModel}>
        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
        </svg>
      </button>
    </div>
  );
}

function ModelQty({ t, unit, value, onChange }) {
  return (
    <div style={{ marginTop: 8 }}>
      <Field label={`${t.qtyRest} (${unit})`}>
        <NumInput value={value} onChange={onChange} placeholder={t.qtyRestHint} min={0} />
      </Field>
    </div>
  );
}

function AddModelButton({ t, onAdd }) {
  return (
    <button type="button" className="article-picker" style={{ marginTop: 10, justifyContent: "center" }} onClick={onAdd}>
      + {t.addModel}
    </button>
  );
}

// Patch model i of a list; the helpers every material card shares.
const patchAt = (list, i, patch) => list.map((m, j) => (j === i ? { ...m, ...patch } : m));
const withoutAt = (list, i) => list.filter((_, j) => j !== i);

// `id` is the React key only (models are removed from the middle); buildManualPayload
// copies fields one by one, so it never reaches the bot.
let modelSeq = 0;
const NEW_CORP_MODEL = () => ({ id: ++modelSeq, brand: "", value: "", qty: "" });
const NEW_FATADE_MODEL = () => ({ id: ++modelSeq, fatadeType: "", value: "", agtArticle: "", palBrand: "", palArticle: "", qty: "" });
const NEW_BLAT_MODEL = () => ({ id: ++modelSeq, type: "", size: "", code: "", brand: "", useBase: false, qty: "" });

function MaterialCorpuriCard({ t, models, setModels }) {
  const patch = (i, p) => setModels((list) => patchAt(list, i, p));
  return (
    <section className="card compact">
      <h3 className="card-title"><Icon.layers />{t.materialCorpuri}</h3>
      {models.map((m, i) => (
        <div key={m.id}>
          <ModelHead t={t} index={i} onRemove={() => setModels((list) => withoutAt(list, i))} />
          <CorpuriModel
            t={t} value={m.value} setValue={(v) => patch(i, { value: v })}
            brand={m.brand} setBrand={(b) => patch(i, { brand: b })}
          />
          {i > 0 && <ModelQty t={t} unit="m²" value={m.qty} onChange={(v) => patch(i, { qty: v })} />}
        </div>
      ))}
      <AddModelButton t={t} onAdd={() => setModels((list) => list.concat([NEW_CORP_MODEL()]))} />
    </section>
  );
}

function MaterialFatadeCard({ t, models, setModels }) {
  const patch = (i, p) => setModels((list) => patchAt(list, i, p));
  return (
    <section className="card compact">
      <h3 className="card-title"><Icon.panel />{t.materialFatade}</h3>
      {models.map((m, i) => (
        <div key={m.id}>
          <ModelHead t={t} index={i} onRemove={() => setModels((list) => withoutAt(list, i))} />
          <FatadeModel
            t={t} value={m.value} setValue={(v) => patch(i, { value: v })}
            fatadeType={m.fatadeType} setFatadeType={(v) => patch(i, { fatadeType: v })}
            agtArticle={m.agtArticle} setAgtArticle={(v) => patch(i, { agtArticle: v })}
            palBrand={m.palBrand} setPalBrand={(v) => patch(i, { palBrand: v })}
            palArticle={m.palArticle} setPalArticle={(v) => patch(i, { palArticle: v })}
          />
          {i > 0 && <ModelQty t={t} unit="m²" value={m.qty} onChange={(v) => patch(i, { qty: v })} />}
        </div>
      ))}
      <AddModelButton t={t} onAdd={() => setModels((list) => list.concat([NEW_FATADE_MODEL()]))} />
    </section>
  );
}

function FeronerieCard({ t, value, setValue }) {
  return (
    <section className="card compact">
      <h3 className="card-title"><Icon.hardware />{t.feronerie}</h3>
      <select
        className="select"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      >
        <option value="">{t.chooseBrand}</option>
        {FERONERIE_BRANDS.map((b) => (
          <option key={b} value={b}>{b}</option>
        ))}
      </select>
    </section>
  );
}

function ServicesCard({ t, services, setServices, servicesPrice, setServicesPrice }) {
  const rows = [
    { key: "montare",    label: t.montare,    unit: "MDL/m\u00b2", std: 300 },
    { key: "livrare",    label: t.livrare,    unit: "MDL",        std: ""  },
    { key: "proiectare", label: t.proiectare, unit: "MDL",        std: 2000 },
    { key: "tehnolog",   label: t.tehnolog,   unit: "MDL/m\u00b2", std: 90  },
    { key: "transport",  label: t.transport,  unit: "MDL",        std: ""  },
  ];
  const update = (k, v) => setServices((s) => ({ ...s, [k]: v }));
  const updatePrice = (k, v) => setServicesPrice((p) => ({ ...p, [k]: v }));
  return (
    <section className="card compact">
      <h3 className="card-title"><Icon.receipt />{t.services}</h3>
      <div className="svc-list">
        {rows.map((r) => {
          const stdValue = servicesPrice[r.key] ?? r.std;
          const displayValue = services[r.key] !== "" && services[r.key] !== undefined
            ? services[r.key]
            : (stdValue === "" ? "" : stdValue);
          return (
            <div className="svc-row" key={r.key}>
              <label>{r.label}</label>
              <div className="svc-input">
                <input
                  type="number"
                  className="input"
                  placeholder={stdValue === "" ? "0" : String(stdValue)}
                  min={0}
                  value={displayValue ?? ""}
                  onChange={(e) => {
                    const v = e.target.value;
                    // Editing this input updates the standard price (sticky default)
                    updatePrice(r.key, v === "" ? "" : Number(v));
                    update(r.key, v === "" ? "" : Number(v));
                  }}
                />
                <span className="suffix">{r.unit}</span>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

/* blat = { blat: [models], contrablat: {...} }: several countertop models, one
   backsplash. A target is an index into blat.blat or "contrablat". */
const blatAt = (b, key) => (key === "contrablat" ? b.contrablat : b.blat[key]);
const patchBlat = (b, key, patch) => (key === "contrablat"
  ? { ...b, contrablat: { ...b.contrablat, ...patch } }
  : { ...b, blat: patchAt(b.blat, key, patch) });

function BlatCard({ t, blat, setBlat, baseWidthSum }) {
  const [modalKey, setModalKey] = React.useState(null); // model index | "contrablat" | null
  const [search, setSearch] = React.useState("");
  const update = (key, field, value) => setBlat((b) => patchBlat(b, key, { [field]: value }));
  const openModal = (key) => { setSearch(""); setModalKey(key); };
  const closeModal = () => setModalKey(null);
  const pickArticle = (a) => {
    if (modalKey !== null) {
      const codeStr = `${a.code} — ${a.name}`;
      setBlat((b) => {
        const next = patchBlat(b, modalKey, { code: codeStr });
        // Mirror the first blat model -> contrablat (one-way), copy type/brand too so contrablat shows the picker
        if (modalKey === 0) {
          next.contrablat = {
            ...b.contrablat,
            type: b.blat[0].type,
            brand: b.blat[0].brand,
            code: codeStr,
          };
        }
        return next;
      });
    }
    closeModal();
  };
  React.useEffect(() => {
    if (modalKey === null) return;
    const onKey = (e) => { if (e.key === "Escape") closeModal(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [modalKey]);
  const filteredCatalog = React.useMemo(() => {
    const target = modalKey === null ? null : blatAt(blat, modalKey);
    const brand = target ? target.brand : "";
    const source =
      brand === "Fundermax" ? FUNDERMAX_CATALOG :
      brand === "India Crown" ? INDIA_CROWN_CATALOG :
      brand === "Egger" ? EGGER_CATALOG :
      brand === "Kronospan" ? KRONOSPAN_CATALOG : [];
    const q = search.trim().toLowerCase();
    if (!q) return source;
    return source.filter(
      (a) => a.code.toLowerCase().includes(q) || a.name.toLowerCase().includes(q)
    );
  }, [search, modalKey, blat]);
  const renderGroup = (key, label) => {
    const cur = blatAt(blat, key);
    const useBase = cur.useBase;
    const sizeValue = useBase ? (baseWidthSum > 0 ? baseWidthSum : "") : cur.size;
    const isHpl = cur.type === "HPL";
    const isStandard = cur.type === "Standart 38mm";
    const showBrand = isHpl || isStandard;
    const brandOptions = isHpl ? HPL_BRANDS : (isStandard ? STANDARD_BRANDS : []);
    const hasBrand = !!cur.brand && (
      cur.brand === "India Crown" ||
      cur.brand === "Fundermax" ||
      cur.brand === "Egger" ||
      cur.brand === "Kronospan"
    );
    const isIndiaCrown = hasBrand;
    return (
      <div>
        {label && <div className="sub-label">{label}</div>}
        <Field label={t.type}>
          <select
            className="select"
            value={cur.type}
            onChange={(e) => {
              const newType = e.target.value;
              setBlat((b) => patchBlat(b, key, {
                type: newType,
                brand: newType === "HPL" ? blatAt(b, key).brand : "",
              }));
            }}
          >
            <option value="">{t.chooseBlatType}</option>
            {BLAT_TYPES.map((bt) => (
              <option key={bt} value={bt}>{bt}</option>
            ))}
          </select>
        </Field>
        {showBrand && (
          <Field label={t.brand}>
            <select
              className="select"
              value={cur.brand}
              onChange={(e) => {
                const newBrand = e.target.value;
                setBlat((b) => patchBlat(b, key, { brand: newBrand, code: "" }));
              }}
            >
              <option value="">{t.chooseBrand}</option>
              {brandOptions.map((br) => (
                <option key={br} value={br}>{br}</option>
              ))}
            </select>
          </Field>
        )}
        <Field label={t.blatCode}>
          {isIndiaCrown ? (
            <button
              type="button"
              className="article-picker"
              onClick={() => openModal(key)}
            >
              <span className={cur.code ? "ap-value" : "ap-placeholder"}>
                {cur.code || t.chooseArticle}
              </span>
              <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <polyline points="6 9 12 15 18 9"/>
              </svg>
            </button>
          ) : (
            <input
              className="input"
              placeholder={t.blatCodePlaceholder}
              value={cur.code}
              onChange={(e) => update(key, "code", e.target.value)}
            />
          )}
        </Field>
        <div className="size-with-toggle">
          <Field label={t.size}>
            <NumInput
              value={sizeValue === "" ? "" : sizeValue}
              onChange={(v) => update(key, "size", v)}
              placeholder={useBase ? "" : "Ex: 3000"}
              disabled={useBase}
            />
          </Field>
          <label className="check-row inline">
            <input
              type="checkbox"
              checked={useBase}
              onChange={(e) => update(key, "useBase", e.target.checked)}
            />
            <span>{t.useBaseWidth}</span>
          </label>
        </div>
        {key !== "contrablat" && key > 0 && (
          <ModelQty t={t} unit={t.unitMp} value={cur.qty} onChange={(v) => update(key, "qty", v)} />
        )}
      </div>
    );
  };
  // Closing a removed model's picker keeps modalKey pointing at a real model.
  const removeModel = (i) => { setModalKey(null); setBlat((b) => ({ ...b, blat: withoutAt(b.blat, i) })); };
  return (
    <section className="card compact">
      <h3 className="card-title"><Icon.countertop />{t.blat}</h3>
      {blat.blat.map((m, i) => (
        <div key={m.id}>
          <ModelHead t={t} index={i} onRemove={() => removeModel(i)} />
          {renderGroup(i, i === 0 ? t.blatLbl : "")}
        </div>
      ))}
      <AddModelButton t={t} onAdd={() => setBlat((b) => ({ ...b, blat: b.blat.concat([NEW_BLAT_MODEL()]) }))} />
      <div className="subdivider"></div>
      {renderGroup("contrablat", t.contrablatLbl)}
      {modalKey !== null && (
        <div className="modal-overlay" onClick={closeModal}>
          <div className="modal" onClick={(e) => e.stopPropagation()}>
            <div className="modal-head">
              <h3>{t.selectArticle} — {blatAt(blat, modalKey).brand}</h3>
              <button type="button" className="modal-close" onClick={closeModal} aria-label={t.cancel}>
                <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
                </svg>
              </button>
            </div>
            <div className="modal-search">
              <input
                className="input"
                autoFocus
                placeholder={t.searchArticle}
                value={search}
                onChange={(e) => setSearch(e.target.value)}
              />
            </div>
            <div className="modal-list">
              {filteredCatalog.length === 0 ? (
                <div className="modal-empty">{t.noResults}</div>
              ) : (
                filteredCatalog.map((a, i) => (
                  <button
                    type="button"
                    key={i}
                    className="article-row"
                    onClick={() => pickArticle(a)}
                  >
                    <div className="article-row-main">
                      <span className="article-code">{a.code}</span>
                      <span className="article-name">{a.name}</span>
                    </div>
                    <span className="article-price">{a.price} MDL</span>
                  </button>
                ))
              )}
            </div>
          </div>
        </div>
      )}
    </section>
  );
}

function LedCard({ t, value, setValue }) {
  return (
    <section className="card compact">
      <div className="led-row">
        <span className="led-label"><Icon.bulb />{t.led}</span>
        <label className="switch" title={t.ledHint}>
          <input
            type="checkbox"
            checked={value}
            onChange={(e) => setValue(e.target.checked)}
          />
          <span className="slider"></span>
        </label>
      </div>
    </section>
  );
}

function TipMobilaCard({ t, value, setValue }) {
  return (
    <section className="card compact">
      <h3 className="card-title"><Icon.furniture />{t.tipMobila}</h3>
      <select
        className="select"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      >
        <option value="">{t.chooseTipMobila}</option>
        {TIP_MOBILA.map((m) => (
          <option key={m} value={m}>{m}</option>
        ))}
      </select>
    </section>
  );
}

function InfoAditionaleCard({ t, value, setValue }) {
  return (
    <section className="card compact">
      <h3 className="card-title"><Icon.notes />{t.infoAditionale}</h3>
      <textarea
        className="input"
        rows={4}
        placeholder={t.infoPlaceholder}
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
    </section>
  );
}

/* ---------------- App ---------------- */
function App() {
  const [lang, setLang] = useState("ro");
  const t = T[lang];

  const [standards, setStandards] = useState({
    jos:    { height: "", depth: "", locked: false },
    sus:    { height: "", depth: "", locked: false },
    soldat: { height: "", depth: "", locked: false },
  });

  const [counts, setCounts] = useState({ jos: 0, sus: 0, soldat: 0, nestandart: 0 });
  const [countLocked, setCountLocked] = useState(false);
  // cabinets stored by category as separate arrays
  const [cabinetsByCat, setCabinetsByCat] = useState({
    jos: [], sus: [], soldat: [], nestandart: [],
  });

  // New sections state
  // Carcass and front materials: lists of models, see MaterialCorpuriCard.
  const [corpModels, setCorpModels] = useState(() => [NEW_CORP_MODEL()]);
  const [fatadeModels, setFatadeModels] = useState(() => [NEW_FATADE_MODEL()]);
  const [feronerie, setFeronerie] = useState("");
  const [services, setServices] = useState({
    montare: "", livrare: "", proiectare: "", tehnolog: "", transport: "",
  });
  const [servicesPrice, setServicesPrice] = useState({
    montare: 300, livrare: "", proiectare: 2000, tehnolog: 90, transport: "",
  });
  const [blat, setBlat] = useState(() => ({
    blat: [NEW_BLAT_MODEL()],
    contrablat: { type: "", size: "", code: "", brand: "", useBase: false },
  }));
  const [led, setLed] = useState(false);
  const [tipMobila, setTipMobila] = useState("");
  const [infoAditionale, setInfoAditionale] = useState("");

  // Sync cabinet arrays length to counts per category
  useEffect(() => {
    setCabinetsByCat((prev) => {
      const next = { ...prev };
      let changed = false;
      for (const cat of ["jos", "sus", "soldat", "nestandart"]) {
        const target = counts[cat] || 0;
        const arr = prev[cat];
        if (arr.length === target) continue;
        changed = true;
        if (target > arr.length) {
          const add = Array.from({ length: target - arr.length }, () => ({
            category: cat, type: "", width: "", height: "", depth: "", notes: "", drawers: "", panelWidth: "",
          }));
          next[cat] = [...arr, ...add];
        } else {
          next[cat] = arr.slice(0, target);
        }
      }
      return changed ? next : prev;
    });
  }, [counts]);

  const updateCabinet = (cat, i, patch) => {
    setCabinetsByCat((prev) => ({
      ...prev,
      [cat]: prev[cat].map((c, idx) => (idx === i ? { ...c, ...patch } : c)),
    }));
  };

  // Sum of widths for all base (jos) cabinets — used as auto-size for blat/contrablat
  const baseWidthSum = useMemo(() => {
    return cabinetsByCat.jos
      .filter((c) => c.width !== "" && !isNaN(Number(c.width)))
      .reduce((acc, c) => acc + Number(c.width), 0);
  }, [cabinetsByCat.jos]);

  const totalCabinets = counts.jos + counts.sus + counts.soldat + counts.nestandart;

  const [sendState, setSendState] = useState(null); // { ok, json, bytes, sent }

  const onCalculate = () => {
    const payload = buildManualPayload({
      cabinetsByCat, standards, baseWidthSum,
      corpModels, fatadeModels, blat, feronerie,
      services, servicesPrice, led, tipMobila, infoAditionale,
    });
    setSendState(sendToBot(payload));
  };

  return (
    <div className="app" data-screen-label="Configurator">
      <header className="header">
        <div className="header-text">
          <h1><Icon.logo />{t.title}</h1>
          <p>{t.subtitle}</p>
        </div>
        <div className="header-actions">
          <div className="lang-switch" role="tablist" aria-label="Language">
            {["ro", "en", "ru"].map((l) => (
              <button
                key={l}
                className={lang === l ? "active" : ""}
                onClick={() => setLang(l)}
                aria-selected={lang === l}
                role="tab"
              >
                {l.toUpperCase()}
              </button>
            ))}
          </div>
          <button type="button" className="btn-calculate" onClick={onCalculate}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
              <polyline points="9 11 12 14 20 6"/>
              <path d="M20 12v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h9"/>
            </svg>
            {t.calculate}
          </button>
        </div>
      </header>

      <div className="layout">
        <div className="col-left">
          <StandardDims t={t} standards={standards} setStandards={setStandards} />
          <NumarDulapuri
            t={t} counts={counts} setCounts={setCounts}
            locked={countLocked} setLocked={setCountLocked}
          />
          {totalCabinets === 0 && (
            <div className="card empty-state">{t.emptyHint}</div>
          )}
          {[
            { cat: "jos", label: t.dulapJos },
            { cat: "sus", label: t.dulapSus },
            { cat: "soldat", label: t.soldat },
            { cat: "nestandart", label: t.nestandart },
          ].map((g) =>
            cabinetsByCat[g.cat].map((cab, i) => (
              <CabinetCard
                key={g.cat + "-" + i}
                t={t}
                label={`${g.label} ${i + 1}`}
                cabinet={cab}
                update={(patch) => updateCabinet(g.cat, i, patch)}
                standards={standards}
              />
            ))
          )}
        </div>

        <aside className="col-right">
          <MaterialCorpuriCard t={t} models={corpModels} setModels={setCorpModels} />
          <MaterialFatadeCard t={t} models={fatadeModels} setModels={setFatadeModels} />
          <FeronerieCard t={t} value={feronerie} setValue={setFeronerie} />
          <TipMobilaCard t={t} value={tipMobila} setValue={setTipMobila} />
          <BlatCard t={t} blat={blat} setBlat={setBlat} baseWidthSum={baseWidthSum} />
          <LedCard t={t} value={led} setValue={setLed} />
          <ServicesCard t={t} services={services} setServices={setServices} servicesPrice={servicesPrice} setServicesPrice={setServicesPrice} />
          <InfoAditionaleCard t={t} value={infoAditionale} setValue={setInfoAditionale} />
        </aside>
      </div>

      <button className="help-fab" title="Help" aria-label="Help">?</button>

      {sendState && !sendState.sent && (
        <div className="modal-overlay" onClick={() => setSendState(null)}>
          <div className="modal" onClick={(e) => e.stopPropagation()}>
            <div className="modal-head">
              <h3>{sendState.ok ? t.payloadTitle : t.tooBig}</h3>
              <button type="button" className="modal-close" onClick={() => setSendState(null)} aria-label="Close">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
              </button>
            </div>
            <div className="modal-list" style={{ padding: "14px 20px" }}>
              <p style={{ marginTop: 0, fontSize: 13, color: sendState.ok ? "inherit" : "#d12c2c" }}>
                {sendState.ok ? t.payloadHint : t.tooBigHint}
              </p>
              <p style={{ fontSize: 12, opacity: 0.7 }}>{sendState.bytes} / {TG_LIMIT} bytes</p>
              <pre style={{ whiteSpace: "pre-wrap", wordBreak: "break-all", fontFamily: "ui-monospace, monospace", fontSize: 12, margin: 0 }}>{sendState.json}</pre>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);