/* global React, ReactDOM */
const { useState, useEffect, useMemo, useRef, useCallback } = React;

/* ============================================================
   Mirage Project Point Dubai — microsite
   ============================================================ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#b07a4e",
  "hero": "showroom",
  "density": "editorial",
  "locale": "en"
}/*EDITMODE-END*/;

/* ---------------- DATA ---------------- */
const COLLECTIONS = [
  { slug: "evo",            name: "Evo",            effect: "Living surfaces · indoor/outdoor", category: "Stone",     img: "assets/collection-evo.webp",            size: "feature" },
  { slug: "cementi",        name: "Cementi",        effect: "Concrete effect",                  category: "Concrete",  img: "assets/collection-cementi.webp",        size: "regular" },
  { slug: "cementi-resine", name: "Cementi Resine", effect: "Resin / cementitious",             category: "Concrete",  img: "assets/collection-cementi-resine.webp", size: "regular" },
  { slug: "pietre",         name: "Le Pietre",      effect: "Natural stone effect",             category: "Stone",     img: "assets/collection-pietre.webp",         size: "half" },
  { slug: "jurupa",         name: "Jurupa",         effect: "Outdoor / 20 mm",                  category: "Outdoor",   img: "assets/collection-jurupa.webp",         size: "half" },
  { slug: "glocal",         name: "Glocal",         effect: "Kitchen · stone effect",           category: "Stone",     img: "assets/collection-glocal.webp",         size: "regular" },
  { slug: "bathmood",       name: "Bathmood",       effect: "Bathroom · soft palette",          category: "Bathroom",  img: "assets/ambient-bathmood.webp",          size: "regular" },
  { slug: "bathmood-flair", name: "Bathmood Flair", effect: "Bathroom · expressive",            category: "Bathroom",  img: "assets/ambient-bathmood-flair.webp",    size: "regular" },
  { slug: "workshop",       name: "Workshop",       effect: "Engineering / AEC",                category: "Technical", img: "assets/collection-workshop.webp",       size: "regular" },
  { slug: "tempranillo",    name: "Tempranillo",    effect: "Surface · wood effect",            category: "Stone",     img: "assets/surface-tempranillo.webp",       size: "regular" },
];

const COLL_FILTERS = ["All", "Concrete", "Stone", "Outdoor", "Bathroom", "Technical"];

const APPLICATIONS = [
  { num: "01", name: "Residential",  desc: "Private homes, villas, apartments." },
  { num: "02", name: "Hospitality",  desc: "Hotels, restaurants, lounges, spas." },
  { num: "03", name: "Commercial",   desc: "Retail, offices, public interiors." },
  { num: "04", name: "Outdoor",      desc: "Terraces, pool decks, landscape." },
  { num: "05", name: "Facade",       desc: "Ventilated facades, exteriors." },
];

const GALLERY = Array.from({ length: 14 }, (_, i) => {
  const n = String(i + 1).padStart(2, "0");
  return { src: `assets/showroom-${n}.webp`, id: `MPP-DXB-${n}`, alt: `Mirage Project Point Dubai — view ${n}` };
});

/* Layout pattern for gallery: 14 cells across a 12-col grid */
const GALLERY_LAYOUT = [
  "x2", "x1", "x1", "x3", "x2", "x3", "x1", "x1", "x2", "x2", "x4", "x3", "x1", "x3",
];

const ENQUIRY_TYPES = [
  { id: "consult",  label: "Book a consultation" },
  { id: "samples",  label: "Request samples" },
  { id: "project",  label: "Submit a project enquiry" },
];

/* ---------------- LOGO ---------------- */
function MirageWordmark({ className }) {
  return (
    <svg className={className} viewBox="0 0 170 35" xmlns="http://www.w3.org/2000/svg" aria-label="Mirage">
      <path d="M39.041,22.436,33.506.871H27.537L27.53.884Q23.752,6.9,19.974,12.922,16.025,6.9,12.057.871L6.2.888.011,22.437,0,22.47H8.526v-.018q1.349-5.376,2.7-10.754,3.333,5.508,6.687,11.033h3.307V22.72q3.45-5.5,6.9-11.006c.8,3.58,1.607,7.16,2.436,10.758h8.488ZM50.716.959,42.669.935l-.023.024v21.52l8.047.022Zm50.3-.01L92.222.932,80.488,22.161q-4.674-4.241-9.341-8.484c4.089-.523,6.728-2.913,6.728-6.1,0-4.227-3.921-6.648-10.762-6.648H55.106L55.084,22.48l8.056.024c.024-2.774.024-5.526.024-8.275h.048Q67,18.366,70.784,22.5l.007.006h18.07q1.083-1.884,2.146-3.738H102.04q1,1.856,2,3.725l.009.013h8.623l-.025-.036ZM63.918,10.631H63.14l-.027-5.393.027-.024h.778c2.4,0,5.6.282,5.6,2.707S66.322,10.631,63.918,10.631Zm29.247,3.852.021-.037L96.5,7.6l.1-.013,3.3,6.86.015.037ZM170,17.714H155.594V14.055h13.919V9.291c-4.657-.023-9.285-.023-13.919-.023V5.719H170V.931H147.537V22.48L170,22.5Zm-41.081-7.25v4.395c2.2.025,4.378.025,6.551.025-.321,2.308-2.732,3.688-6.445,3.688a8.725,8.725,0,0,1-6.045-2.11,6.321,6.321,0,0,1-2.085-4.6,6.446,6.446,0,0,1,2.028-4.609,8.348,8.348,0,0,1,5.977-2.16c3.063,0,5.493,1.238,6.659,3.413l.009.019,7.639-2.233.036-.009C140.609,2.3,135.786.221,129.273.221c-10.041,0-16.787,4.666-16.787,11.614a9.763,9.763,0,0,0,4.607,8.235c3,2.062,7.109,3.149,11.89,3.149,5.494,0,9.9-1.465,12.762-4.228,2.785-2.724,3.081-5.472,3.161-8.522v-.024H128.945Z" />
    </svg>
  );
}

const ArrowR = ({ s = 14 }) => (
  <svg className="arr" width={s} height={s} viewBox="0 0 16 16" fill="none" aria-hidden="true">
    <path d="M11.318 4.11a.5.5 0 1 0-.707.708L13.292 7.5H1.5a.5.5 0 1 0 0 1h11.793l-2.682 2.682a.5.5 0 0 0 .707.707l3.536-3.535a.5.5 0 0 0 0-.708l-3.536-3.535z" fill="currentColor"/>
  </svg>
);
