// Luxorium — Homepage components
// Built on the Luxorium DS visual language: editorial serif headings,
// wide-tracked Antonio eyebrows, restrained verde accent.

const { useState, useEffect, useRef } = React;

/* ---------- Icon (Lucide-styled inline SVG, stroke 1.25) ---------- */
const Icon = ({ name, size = 16 }) => {
  const props = {
    width: size, height: size, viewBox: "0 0 24 24",
    fill: "none", stroke: "currentColor", strokeWidth: 1.25,
    strokeLinecap: "round", strokeLinejoin: "round",
  };
  switch (name) {
    case "arrow":
      return (<svg {...props}><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>);
    case "stamp":
      return (<svg {...props}><path d="M5 22h14"/><path d="M19 14H5l1-9h12l1 9z"/><path d="M9 14V9"/><path d="M15 14V9"/><path d="M12 14V9"/></svg>);
    case "compass":
      return (<svg {...props}><circle cx="12" cy="12" r="9"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/></svg>);
    case "layers":
      return (<svg {...props}><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>);
    case "users":
      return (<svg {...props}><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>);
    case "clock":
      return (<svg {...props}><circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 15 14"/></svg>);
    case "map":
      return (<svg {...props}><path d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>);
    case "instagram":
      return (<svg {...props}><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.37a4 4 0 1 1-7.91 1.27 4 4 0 0 1 7.91-1.27z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>);
    case "facebook":
      return (<svg {...props}><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>);
    case "whatsapp":
      return (<svg {...props}><path d="M12 2a10 10 0 0 0-8.66 15l-1.3 4.66 4.78-1.26A10 10 0 1 0 12 2z"/><path d="M8.4 8.6c.2-.1.5-.2.7-.1l.7 1.5c.1.2.1.4-.1.5l-.7.6c.3.7.9 1.3 1.6 1.7l.6-.7c.2-.1.4-.2.6-.1l1.5.7c.3.1.4.4.3.7-.3.8-1 1.4-1.9 1.5-2.1.3-4.4-2-4.7-4.1-.1-1 .5-1.8 1.4-2.2z"/></svg>);
    case "search":
      return (<svg {...props}><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>);
    case "x":
      return (<svg {...props}><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>);
    case "pin":
      return (<svg {...props}><path d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>);
    case "external":
      return (<svg {...props}><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>);
    case "sliders":
      return (<svg {...props}><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>);
    case "check":
      return (<svg {...props}><polyline points="20 6 9 17 4 12"/></svg>);
    default: return null;
  }
};

/* ---------- Concentric mark (Luxorium brand symbol) ---------- */
const ConcentricMark = ({ size = 26, color = "currentColor" }) => (
  <svg width={size} height={size} viewBox="0 0 100 100" fill="none" stroke={color} strokeWidth="3">
    <rect x="4" y="4" width="92" height="92"/>
    <rect x="16" y="16" width="68" height="68"/>
    <rect x="28" y="28" width="44" height="44"/>
    <rect x="40" y="40" width="20" height="20"/>
    <rect x="48" y="48" width="4" height="4" fill={color}/>
  </svg>
);

/* ---------- Site-wide search index ----------
   Self-contained so search works on every page regardless of which
   data files that page loads. Keyword strings widen matches. */
const SEARCH_INDEX = [
  { label: "Encausto Fiorentino",      kind: "Finish · Venetian plaster", href: "/en/products/encausto-fiorentino",  kw: "marmorino venetian plaster polished encaustic" },
  { label: "New Concept Travertino",   kind: "Finish · Travertino",       href: "/en/products/new-concept-travertino", kw: "travertino stone effect roman quarry" },
  { label: "Micromarmo Ultra",         kind: "Finish · Microcement",      href: "/en/products/micromarmo-ultra",     kw: "microcement micro cement floor wall bathroom waterproof seamless" },
  { label: "Caravaggio",               kind: "Finish · Metallic",         href: "/en/products/caravaggio",           kw: "metallic metallo bronze feature wall" },
  { label: "Feel",                     kind: "Finish · Soft touch",       href: "/en/products/feel",                 kw: "suede soft touch velvet" },
  { label: "Calce & Clay",             kind: "Finish · Lime wash",        href: "/en/products/calce-clay",           kw: "calce lime wash limewash mineral matte" },
  { label: "Marmopaco",                kind: "Finish · Marble effect",    href: "/en/products/marmopaco",            kw: "marble effect polished" },
  { label: "Sablé Silk",               kind: "Finish · Silk",             href: "/en/products/sable-silk",           kw: "silk sheen woven fabric" },
  { label: "Spiver Mat",               kind: "Paint · Premium mat",       href: "/en/products/spiver-mat",           kw: "paint flat mat interior" },
  { label: "Spiver Velour",            kind: "Paint · Washable",          href: "/en/products/spiver-velour",        kw: "paint washable kitchen" },
  { label: "Spiver Façade",            kind: "Paint · Exterior",          href: "/en/products/spiver-facade-paint",  kw: "facade exterior paint uv" },
  { label: "Primer Universale",        kind: "Primer & products",         href: "/en/products/primer-universal",     kw: "primer grip plaster drywall" },
  { label: "Fondo Quartz",             kind: "Primer & products",         href: "/en/products/fondo-quartz",         kw: "base coat quartz key textured" },
  { label: "Protettivo Wax",           kind: "Primer & products",         href: "/en/products/protettivo-wax",       kw: "sealer wax beeswax marmorino" },
  { label: "Steel Trowel · Roma",      kind: "Marina · Tool",             href: "/en/products/trowel-roma",          kw: "trowel tool steel venetian application marina" },
  { label: "Bronze Brush Set",         kind: "Marina · Tool",             href: "/en/products/brush-bronze",         kw: "brush tool metallic marina" },
  { label: "Decorative finishes",      kind: "Page",                      href: "/en/finishes/",            kw: "finishes effects materials catalogue" },
  { label: "Product catalogue",        kind: "Page",                      href: "/en/products/",                       kw: "products shop coatings paints primers tools" },
  { label: "Projects",                 kind: "Page",                      href: "/en/projects/",                       kw: "projects case studies portfolio" },
  { label: "For designers",            kind: "Page",                      href: "/en/for-designers/",                  kw: "trade designers architects decorators" },
  { label: "Journal",                  kind: "Page",                      href: "/en/journal/",                        kw: "journal blog articles guides" },
  { label: "About Luxorium",           kind: "Page",                      href: "/en/about/",                          kw: "about story spiver marina exclusive distributor" },
  { label: "Tbilisi · Pekini flagship",kind: "Showroom",                  href: "/en/showrooms/#tbilisi-pekini",       kw: "showroom tbilisi pekini flagship visit map" },
  { label: "Tbilisi · Saburtalo atelier", kind: "Showroom",               href: "/en/showrooms/#tbilisi-saburtalo",    kw: "showroom tbilisi saburtalo atelier visit map" },
  { label: "Batumi · Boulevard",       kind: "Showroom",                  href: "/en/showrooms/#batumi-boulevard",     kw: "showroom batumi coastal visit map" },
  { label: "Vake Penthouse",           kind: "Project · Residential",     href: "/en/projects/vake-penthouse",       kw: "project residential travertino" },
  { label: "Linea Restaurant",         kind: "Project · Hospitality",     href: "/en/projects/linea-restaurant",     kw: "project hospitality restaurant caravaggio" },
];

/* ---------- Site-wide search overlay ---------- */
const SearchOverlay = ({ open, onClose }) => {
  const [q, setQ] = useState("");
  const inputRef = useRef(null);
  useEffect(() => {
    if (!open) return;
    setQ("");
    const t = setTimeout(() => inputRef.current && inputRef.current.focus(), 80);
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      clearTimeout(t);
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [open]);

  if (!open) return null;

  const term = q.trim().toLowerCase();
  const results = term
    ? SEARCH_INDEX.filter(x =>
        x.label.toLowerCase().includes(term) ||
        x.kind.toLowerCase().includes(term) ||
        (x.kw && x.kw.includes(term)))
    : [];
  const suggestions = ["Marmorino", "Travertino", "Microcement", "Metallic", "Showrooms", "Tools"];

  const overlay = (
    <div className="search-ov">
      <div className="search-ov__scrim" onClick={onClose}></div>
      <div className="search-ov__panel" role="dialog" aria-modal="true" aria-label="Search Luxorium">
        <div className="search-ov__bar">
          <span className="search-ov__bar-icon"><Icon name="search" size={22}/></span>
          <input
            ref={inputRef}
            className="search-ov__input"
            type="text"
            placeholder="Search finishes, products, showrooms…"
            value={q}
            onChange={e => setQ(e.target.value)}
          />
          <button className="search-ov__close" onClick={onClose} aria-label="Close search">
            <Icon name="x" size={20}/>
          </button>
        </div>
        <div className="search-ov__body">
          {!term && (
            <div className="search-ov__sugg">
              <div className="search-ov__sugg-lab">Popular searches</div>
              <div className="search-ov__sugg-chips">
                {suggestions.map(s => (
                  <button key={s} className="search-ov__chip" onClick={() => setQ(s)}>{s}</button>
                ))}
              </div>
            </div>
          )}
          {term && results.length === 0 && (
            <div className="search-ov__empty">
              No results for “{q}”. Try a finish name, “microcement”, or “showrooms”.
            </div>
          )}
          {results.length > 0 && (
            <div className="search-ov__results">
              <div className="search-ov__count">{results.length} result{results.length > 1 ? "s" : ""}</div>
              {results.map((r, i) => (
                <a key={i} className="search-ov__result" href={r.href}>
                  <span className="search-ov__result-label">{r.label}</span>
                  <span className="search-ov__result-kind">{r.kind}</span>
                  <span className="search-ov__result-arrow"><Icon name="arrow" size={14}/></span>
                </a>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );

  return ReactDOM.createPortal(overlay, document.body);
};

/* ---------- Top navigation — centered lockup, menu below ----------
   Premium-house structure (Loro Piana / Rolex): wordmark centered on the
   upper row with utilities to either side, primary menu on the row below. */
const NAV_LINKS = [
  { label: "Finishes",      href: "/en/finishes/" },
  { label: "Products",      href: "/en/products/" },
  { label: "For Designers", href: "/en/for-designers/" },
  { label: "Projects",      href: "/en/projects/" },
  { label: "Showrooms",     href: "/en/showrooms/" },
  { label: "About",         href: "/en/about/" },
];
const LOCALES = ["EN", "RU", "KA"];

const TopNav = ({ active, onNav, locale, onLocale }) => {
  const [searchOpen, setSearchOpen] = useState(false);
  return (
    <>
      <nav className="topnav">
        <div className="topnav__row1">
          <div className="topnav__util topnav__util--left">
            <button className="topnav__search-btn" onClick={() => setSearchOpen(true)} aria-label="Open search">
              <Icon name="search" size={16}/>
              <span className="topnav__search-lab">Search</span>
            </button>
          </div>
          <a className="topnav__brand" href="/en/">
            <img className="topnav__brand-logo" src="/prototype/assets/luxorium_real_logo.jpg" alt="Luxorium" />
          </a>
          <div className="topnav__util topnav__util--right">
            <div className="topnav__lang">
              {LOCALES.map((l, i) => (
                <React.Fragment key={l}>
                  {i > 0 && <span>·</span>}
                  <button className={locale === l ? "is-active" : ""} onClick={() => onLocale?.(l)}>{l}</button>
                </React.Fragment>
              ))}
            </div>
            <span className="topnav__util-sep"></span>
            <a className="topnav__cat" href="/en/products/">Catalogue</a>
          </div>
        </div>
        <div className="topnav__row2">
          <div className="topnav__links">
            {NAV_LINKS.map(x => (
              <a key={x.label} href={x.href}
                 className={"topnav__link" + (active === x.label ? " is-active" : "")}>
                {x.label}
              </a>
            ))}
          </div>
        </div>
      </nav>
      <SearchOverlay open={searchOpen} onClose={() => setSearchOpen(false)} />
    </>
  );
};

/* ---------- Page hero (inner pages) ---------- */
const PageHero = ({ crumbs, eyebrow, title, lead, image }) => (
  <section className={"page-hero" + (image ? " page-hero--image" : "")} data-screen-label="Page hero">
    <div className="page-hero__inner">
      <div className="reveal">
        {crumbs && (
          <div className="page-hero__crumbs">
            {crumbs.map((c, i) => (
              <React.Fragment key={i}>
                {i > 0 && <> &nbsp;/&nbsp; </>}
                {c.href ? <a href={c.href}>{c.label}</a> : c.label}
              </React.Fragment>
            ))}
          </div>
        )}
        <div className="page-hero__eyebrow">{eyebrow}</div>
        <h1 className="page-hero__title" dangerouslySetInnerHTML={{ __html: title }}></h1>
      </div>
      {lead && <p className="page-hero__lead reveal" data-d="1">{lead}</p>}
    </div>
  </section>
);

/* ---------- Hero (full-bleed interior) ---------- */
const Hero = () => (
  <>
    <section className="hero" id="top" data-screen-label="01 Hero">
      <div className="hero__bg"></div>
      <div className="hero__scrim"></div>
      <div className="hero__inner">
        <div className="hero__copy">
          <div className="hero__eyebrow reveal">SPIVER · CRAFTED IN ITALY, APPLIED BY HAND</div>
          <h1 className="hero__title reveal" data-d="1">
            Premium Italian decorative finishes for timeless interiors.
          </h1>
          <p className="hero__lead reveal" data-d="2">
            Luxorium brings exclusive Spiver decorative coatings, textures and
            architectural wall finishes to Georgia — for designers, decorators,
            architects, and refined interiors.
          </p>
          <div className="hero__ctas reveal" data-d="3">
          <a className="btn btn--primary" href="/en/finishes/">
            Explore finishes <Icon name="arrow" size={12}/>
          </a>
          <a className="btn btn--ghost btn--on-dark" href="/en/showrooms/">
            Visit our showroom
          </a>
        </div>
        </div>
        <div className="hero__meta reveal" data-d="3">
          <div className="hero__meta-label">FEATURED FINISH</div>
          <div className="hero__meta-value">Encausto Fiorentino</div>
          <div className="hero__meta-sub">Hand-applied · Tbilisi showroom</div>
        </div>
      </div>
    </section>
    <div className="trust-band">
      <ReviewBand />
    </div>
  </>
);

const TrustStrip = () => {
  const items = [
    { tag: "01", label: "Italian materials" },
    { tag: "02", label: "Showrooms in Tbilisi & Batumi" },
    { tag: "03", label: "Professional consultation" },
    { tag: "04", label: "Designer & decorator support" },
  ];
  return (
    <div className="trust">
      {items.map((it, i) => (
        <div key={it.tag} className="trust__item reveal" data-d={i+1}>
          <div className="trust__tag">{it.tag}</div>
          <div className="trust__label">{it.label}</div>
        </div>
      ))}
    </div>
  );
};

/* ---------- Review band — single quote, auto-rotate, arrows ---------- */
const REVIEW_BAND = [
  {
    quote: "They didn’t sell us a finish, they helped us specify one. The technical guidance saved us a full week on site.",
    author: "Giorgi Beridze",
    role: "Architect, Atelier MR · Tbilisi",
  },
  {
    quote: "The Caravaggio sample panel was so good we couldn’t put it down. On the finished wall the depth is exactly what the renders promised.",
    author: "Anna Kapanadze",
    role: "Interior Designer, Studio Nora",
  },
  {
    quote: "You can describe Marmorino, or you can let a client touch it. The showroom lets us do the second — every time.",
    author: "Tatia Mzhavanadze",
    role: "Decorator, T.M. Interiors · Batumi",
  },
  {
    quote: "Anna at the Pekini showroom walked us through six microcement options in twenty minutes. We left with the right one.",
    author: "Levan Tsiklauri",
    role: "Project Lead, Form Studio",
  },
];

const ReviewBand = () => {
  const [i, setI] = useState(0);
  const [paused, setPaused] = useState(false);
  const n = REVIEW_BAND.length;
  const go = (next) => setI((next + n) % n);
  const prev = () => go(i - 1);
  const next = () => go(i + 1);

  useEffect(() => {
    if (paused) return;
    const t = setInterval(() => setI(v => (v + 1) % n), 6500);
    return () => clearInterval(t);
  }, [paused, n]);

  return (
    <div
      className="rb"
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
      aria-roledescription="carousel"
      aria-label="What designers say"
    >
      <button className="rb__nav" onClick={prev} aria-label="Previous review">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="15 6 9 12 15 18"/>
        </svg>
      </button>
      <div className="rb__viewport">
        <div className="rb__track" style={{ transform: `translateX(-${i * 100}%)` }}>
          {REVIEW_BAND.map((r, idx) => (
            <div key={idx} className="rb__slide" aria-hidden={idx !== i}>
              <div className="rb__mark">IN PRACTICE</div>
              <p className="rb__quote">“{r.quote}”</p>
              <div className="rb__attr">
                <div className="rb__author">{r.author}</div>
                <div className="rb__role">{r.role}</div>
                <div className="rb__pos">
                  {String(idx + 1).padStart(2, "0")} / {String(n).padStart(2, "0")}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <button className="rb__nav" onClick={next} aria-label="Next review">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="9 6 15 12 9 18"/>
        </svg>
      </button>
    </div>
  );
};

/* ---------- Section head (eyebrow + title + lead) ---------- */
const SectionHead = ({ eyebrow, title, accent, lead, id }) => (
  <header className="section__head" id={id}>
    <div className="reveal">
      <div className="eyebrow">{eyebrow}</div>
      <h2 className="section__title">
        {title}{accent && <> <em>{accent}</em></>}.
      </h2>
    </div>
    {lead && <p className="section__lead reveal" data-d="1">{lead}</p>}
  </header>
);

/* ---------- Category card ---------- */
const CATEGORIES = [
  { name: "Venetian Plaster",  pig: "pig-venetian",   num: "01", hex: "#C9B998", slug: "venetian",    desc: "Polished marble lustre. Hand-troweled lime with mineral pigments.",                  light: false },
  { name: "Travertino Effect", pig: "pig-travertino", num: "02", hex: "#D7BA8A", slug: "travertino",  desc: "Quarried-stone texture with soft veining and warm shadow.",                          light: false },
  { name: "Lime & Mineral",    pig: "pig-lime",       num: "03", hex: "#ECE3D0", slug: "lime",        desc: "Calce-based limewash. Breathable, matte, deeply pigmented.",                          light: true  },
  { name: "Metallic Finishes", pig: "pig-metallic",   num: "04", hex: "#8B7C5F", slug: "metallic",    desc: "Brushed bronze, antique brass, oxidised steel — for accent walls and joinery.",      light: false },
  { name: "Suede & Soft Touch",pig: "pig-suede",      num: "05", hex: "#B5A88F", slug: "suede",       desc: "Velvet-like depth. Light catches it differently from every angle.",                    light: false },
  { name: "Microcement",       pig: "pig-micromarmo", num: "06", hex: "#B7AE9D", slug: "microcement", desc: "Seamless floor and wall surface. Marmo Ultra for bathrooms and showers.",             light: false },
  { name: "Facade Materials",  pig: "pig-facade",     num: "07", hex: "#847C6E", slug: "facade",      desc: "Termoflex weatherproof systems for exterior elevations.",                              light: false },
  { name: "Professional Tools",pig: "pig-tools",      num: "08", hex: "#2A2826", slug: "tools",       desc: "Italian-made trowels, brushes and spalters for application.",                          light: false },
];

const CategoryCard = ({ c, i }) => (
  <a href={"/en/finishes/#" + c.slug} className="cat-card reveal" data-d={(i % 4) + 1}>
    <div className="cat-card__media">
      <div className={"cat-card__pigment " + c.pig}></div>
      <div className={"cat-card__frame" + (c.light ? " cat-card__frame--light" : "")}>
        <span className="cat-card__num">{c.num}</span>
        <span className="cat-card__hex">{c.hex}</span>
      </div>
    </div>
    <div className="cat-card__body">
      <h3 className="cat-card__name">{c.name}</h3>
      <span className="cat-card__tag">{c.num}</span>
      <p className="cat-card__desc">{c.desc}</p>
      <span className="cat-card__cta">View finishes <Icon name="arrow" size={11}/></span>
    </div>
  </a>
);

/* ---------- Featured materials (editorial gallery) ---------- */
const FEATURED = [
  { name: "Encausto Fiorentino",   slug: "encausto-fiorentino",   pig: "pig-encausto",   num: "F · 01", size: "xl",   eyebrow: "Signature · Venetian plaster", desc: "A polished encaustic finish with the soft pull of cold marble. Burnished by hand over three coats." },
  { name: "New Concept Travertino", slug: "new-concept-travertino", pig: "pig-newconcept", num: "F · 02", size: "md",   eyebrow: "Stone effect",                  desc: "Roman travertine quarry, in coating form." },
  { name: "Micromarmo Ultra",       slug: "micromarmo-ultra",       pig: "pig-ultra",      num: "F · 03", size: "md",   eyebrow: "Microcement floors & walls",    desc: "Seamless, waterproof, hand-applied. For bathrooms, showers, kitchens." },
  { name: "Caravaggio",             slug: "caravaggio",             pig: "pig-caravaggio", num: "F · 04", size: "lg",   eyebrow: "Metallic accent",               desc: "Aged bronze with a dark, lit-from-within depth. For feature walls." },
  { name: "Feel",                   slug: "feel",                   pig: "pig-feel",       num: "F · 05", size: "md",   eyebrow: "Suede soft-touch",              desc: "The wall you want to put your hand on." },
  { name: "Calce & Clay",           slug: "calce-clay",             pig: "pig-calceclay",  num: "F · 06", size: "md",   eyebrow: "Mineral limewash",              desc: "Breathable, matte, deeply pigmented." },
  { name: "Marmopaco",              slug: "marmopaco",              pig: "pig-marmopaco",  num: "F · 07", size: "md",   eyebrow: "Marble effect",                 desc: "Cool, polished, museum-quiet." },
  { name: "Termoflex façade line",  slug: "termoflex",              pig: "pig-termoflex",  num: "F · 08", size: "md",   eyebrow: "Façade · exterior",             desc: "Weatherproof elastic coating for exterior elevations." },
];

const FeaturedCard = ({ m, i }) => (
  <a href={"/en/products/" + m.slug} className={"feat-card reveal feat-card--" + m.size} data-d={(i % 4) + 1}>
    <div className={"feat-card__pigment " + m.pig}></div>
    <div className="feat-card__veil"></div>
    <span className="feat-card__num">{m.num}</span>
    <div className="feat-card__body">
      <span className="feat-card__eyebrow">{m.eyebrow}</span>
      <h3 className="feat-card__name">{m.name}</h3>
      <p className="feat-card__desc">{m.desc}</p>
      <span className="feat-card__link">Discover <Icon name="arrow" size={11}/></span>
    </div>
  </a>
);

/* ---------- For Designers section (ink background) ---------- */
const ForDesigners = () => {
  const benefits = [
    "Material selection support for every project brief",
    "Hand-applied samples and on-site texture consultation",
    "Technical guidance for application and substrate prep",
    "Showroom meetings with clients, by appointment",
    "Premium finishes for residential, retail, hospitality and commercial",
    "Trade pricing and dedicated account management",
  ];
  return (
    <section className="section section--ink" id="for-designers" data-screen-label="05 For Designers">
      <div className="pros">
        <div className="pros__left">
          <div className="eyebrow reveal">FOR THE TRADE</div>
          <h2 className="pros__title reveal" data-d="1">
            For interior designers, architects &amp; <em>decorators</em>.
          </h2>
          <p className="pros__body reveal" data-d="2">
            Access premium Italian finishes, professional technical support, hand-applied
            samples, colour consultation and showroom assistance for your projects.
          </p>
          <ul className="pros__benefits">
            {benefits.map((b, i) => (
              <li key={i} className="reveal" data-d={Math.min(i+1, 6)}>
                <span className="pros__bn">{String(i+1).padStart(2, "0")}</span>
                <span className="pros__bt">{b}</span>
              </li>
            ))}
          </ul>
          <div className="reveal" data-d="3">
            <a className="btn btn--primary" href="/en/for-designers/">
              Partner with Luxorium <Icon name="arrow" size={12}/>
            </a>
          </div>
        </div>
        <div className="pros__media reveal" data-d="2">
          <div className="pros__pigment"></div>
          <div className="pros__media-frame"></div>
          <span className="pros__media-caption">VERDE LIBRARY · ATELIER 14</span>
        </div>
      </div>
    </section>
  );
};

/* ---------- Showrooms (three locations) ---------- */
const SHOWROOMS = [
  { name: "Tbilisi · Pekini",    addr: "14 Pekini Avenue, Tbilisi",         hours: "Mon–Sat · 11:00 — 19:00", meta: "Flagship · 2026", pig: "sr-card__pigment--tbilisi1", tag: "TBILISI" },
  { name: "Tbilisi · Saburtalo", addr: "42 Vazha-Pshavela Ave., Tbilisi",   hours: "Mon–Sat · 11:00 — 19:00", meta: "Atelier · 2024",  pig: "sr-card__pigment--tbilisi2", tag: "TBILISI" },
  { name: "Batumi · Boulevard",  addr: "27 Memed Abashidze St., Batumi",    hours: "Tue–Sat · 12:00 — 19:00", meta: "Coastal · 2025",  pig: "sr-card__pigment--batumi",   tag: "BATUMI"  },
];

const ShowroomCard = ({ s, i }) => (
  <a href="/en/showrooms/" className="sr-card reveal" data-d={i+1}>
    <div className="sr-card__media">
      <div className={"sr-card__pigment " + s.pig}></div>
      <div className="sr-card__frame">
        <span className="sr-card__tag">{s.tag}</span>
        <span className="sr-card__meta">{s.meta}</span>
      </div>
    </div>
    <div className="sr-card__body">
      <div className="sr-card__eyebrow">SHOWROOM · GEORGIA</div>
      <h3 className="sr-card__name">{s.name}</h3>
      <p className="sr-card__addr">{s.addr}<br/>{s.hours}</p>
      <span className="sr-card__cta">Book a visit <Icon name="arrow" size={11}/></span>
    </div>
  </a>
);

/* ---------- Projects (editorial masonry) ---------- */
const PROJECTS = [
  { title: "Penthouse, Vake",       tag: "RESIDENTIAL",  pig: "proj-apartment",   span: "w3 h2" },
  { title: "Linea Restaurant",      tag: "HOSPITALITY",  pig: "proj-restaurant",  span: "w3 h2" },
  { title: "Atelier MR Boutique",   tag: "RETAIL",       pig: "proj-boutique",    span: "w2 h2" },
  { title: "Feature wall · Library",tag: "FEATURE WALL", pig: "proj-featurewall", span: "w2 h2" },
  { title: "Coastal residence façade",tag: "FAÇADE",     pig: "proj-facade",      span: "w2 h2" },
  { title: "Spa bathroom in Micromarmo", tag: "BATHROOM",pig: "proj-bathroom",    span: "w3 h2" },
  { title: "Hotel lobby in Travertino",  tag: "HOSPITALITY",pig: "proj-restaurant",span: "w3 h2" },
];

const ProjectTile = ({ p, i }) => {
  const cls = "proj-tile " + p.span.split(" ").map(s => "proj-tile--" + s).join(" ");
  return (
    <a href="/en/projects/" className={cls + " reveal"} data-d={(i % 4) + 1}>
      <div className={"proj-tile__pigment " + p.pig}></div>
      <div className="proj-tile__veil"></div>
      <div className="proj-tile__body">
        <div className="proj-tile__tag">{p.tag}</div>
        <h3 className="proj-tile__title">{p.title}</h3>
      </div>
    </a>
  );
};

/* ---------- Why Luxorium ---------- */
const WHY = [
  { icon: "stamp",   num: "01", title: "Official Italian decorative coatings", body: "Authorized Spiver dealer in Georgia. Direct supply, verified provenance." },
  { icon: "compass", num: "02", title: "Expert material consultation",         body: "We help you choose the right finish for the room, the light, the use." },
  { icon: "layers",  num: "03", title: "Wide range of textures & effects",     body: "Marmorino, Travertino, Cemento, Calce, Metallo, Pietra and beyond." },
  { icon: "users",   num: "04", title: "Professional support for decorators",  body: "Trade meetings, on-site samples, technical datasheets, application guidance." },
  { icon: "clock",   num: "05", title: "Long-lasting, high-value materials",   body: "Hand-applied finishes that age into their patina — not out of it." },
  { icon: "map",     num: "06", title: "Two cities. Three showrooms.",          body: "Walk into a flagship in Tbilisi or the coastal atelier in Batumi." },
];

const WhyLuxorium = () => (
  <section className="section section--canvas" id="about" data-screen-label="08 Why Luxorium">
    <SectionHead
      eyebrow="WHY LUXORIUM"
      title="A quiet conviction"
      accent="in material"
      lead="Six reasons designers, decorators and refined homeowners keep coming back to our showrooms."
    />
    <div className="why-grid">
      {WHY.map((w, i) => (
        <div key={w.num} className="why-cell reveal" data-d={(i % 3) + 1}>
          <div className="why-cell__icon"><Icon name={w.icon} size={32}/></div>
          <div className="why-cell__num">{w.num} / 06</div>
          <h3 className="why-cell__title">{w.title}</h3>
          <p className="why-cell__body">{w.body}</p>
        </div>
      ))}
    </div>
  </section>
);

/* ---------- Final CTA ---------- */
const FinalCta = () => (
  <section className="final-cta" data-screen-label="09 Final CTA">
    <div className="final-cta__bg"></div>
    <div className="final-cta__inner">
      <div className="final-cta__eyebrow reveal">MADE IN GEORGIA · CRAFTED IN ITALY</div>
      <h2 className="final-cta__title reveal" data-d="1">
        Create interiors with depth, texture, and timeless character.
      </h2>
      <div className="final-cta__ctas reveal" data-d="2">
        <a className="btn btn--primary" href="/en/showrooms/">
          Book a consultation <Icon name="arrow" size={12}/>
        </a>
        <a className="btn btn--ghost btn--on-dark" href="/en/finishes/" style={{color: "#ffffff"}}>
          Explore materials
        </a>
      </div>
    </div>
  </section>
);

/* ---------- Footer ---------- */
const Footer = ({ locale, onLocale }) => (
  <footer className="footer" id="contact">
    <div className="footer__top">
      <div className="footer__col">
        <div className="footer__brand">
          <img className="footer__brand-logo" src="/prototype/assets/luxorium_real_logo.jpg" alt="Luxorium" />
        </div>
        <p className="footer__strap">
          Authorized Spiver dealer in Georgia. Decorative paints, Italian wall finishes,
          microcement and façade systems for considered interiors.
        </p>
        <div className="footer__social">
          <a href="#instagram" aria-label="Instagram"><Icon name="instagram" size={16}/></a>
          <a href="#facebook"  aria-label="Facebook"><Icon name="facebook" size={16}/></a>
          <a href="#whatsapp"  aria-label="WhatsApp"><Icon name="whatsapp" size={16}/></a>
        </div>
      </div>
      <div className="footer__col">
        <h6>Explore</h6>
        <a href="/en/finishes/">Decorative finishes</a>
        <a href="/en/products/">Product catalogue</a>
        <a href="/en/projects/">Projects</a>
        <a href="/en/journal/">Journal</a>
        <a href="/en/about/#faq">FAQ</a>
      </div>
      <div className="footer__col">
        <h6>Effects</h6>
        <a href="/en/finishes/#venetian">Venetian plaster</a>
        <a href="/en/finishes/#travertino">Travertino effect</a>
        <a href="/en/finishes/#lime">Lime &amp; mineral</a>
        <a href="/en/finishes/#microcement">Microcement</a>
        <a href="/en/finishes/#metallic">Metallic finishes</a>
        <a href="/en/finishes/#facade">Façade materials</a>
      </div>
      <div className="footer__col">
        <h6>Showrooms</h6>
        <p className="footer__contact-line">14 Pekini Ave., Tbilisi</p>
        <p className="footer__contact-line">42 Vazha-Pshavela, Tbilisi</p>
        <p className="footer__contact-line">27 Memed Abashidze, Batumi</p>
        <a href="/en/showrooms/" style={{marginTop: 10}}>Book a visit</a>
      </div>
      <div className="footer__col">
        <h6>Reach us</h6>
        <p className="footer__contact-lab">PHONE</p>
        <p className="footer__contact-line">+995 32 200 1234</p>
        <p className="footer__contact-lab">EMAIL</p>
        <p className="footer__contact-line">hello@luxorium.ge</p>
        <p className="footer__contact-lab">WHATSAPP</p>
        <p className="footer__contact-line">+995 599 12 34 56</p>
      </div>
    </div>
    <div className="footer__bottom">
      <span>© 2026 Luxorium · Made in Georgia · Crafted in Italy</span>
      <div className="footer__bottom-right">
        <div className="footer__bottom-lang">
          {["EN","RU","KA"].map((l, i) => (
            <React.Fragment key={l}>
              {i > 0 && <span>·</span>}
              <button className={locale === l ? "is-active" : ""} onClick={() => onLocale?.(l)}>{l}</button>
            </React.Fragment>
          ))}
        </div>
        <span>Privacy · Terms · Cookies</span>
      </div>
    </div>
  </footer>
);

/* ---------- Reviews (under hero) ---------- */
const REVIEWS = [
  {
    quote: "Luxorium handed us a sample panel of Caravaggio that we couldn’t put down. The depth on a finished wall is exactly what the renders promised — something rare.",
    author: "Anna Kapanadze",
    role: "Interior Designer, Studio Nora",
    project: "Vake Penthouse · Tbilisi",
  },
  {
    quote: "They didn’t sell us a finish, they helped us specify one. The technical guidance on substrate prep saved us a full week on site.",
    author: "Giorgi Beridze",
    role: "Architect, Atelier MR",
    project: "Linea Restaurant · Tbilisi",
  },
  {
    quote: "Bringing a client to the Batumi showroom changed the project. You can describe Marmorino, or you can let someone touch it. We let them touch it.",
    author: "Tatia Mzhavanadze",
    role: "Decorator, T.M. Interiors",
    project: "Coastal Residence · Batumi",
  },
];

const Reviews = () => (
  <section className="reviews-band" data-screen-label="02 Reviews">
    <div className="reviews-head">
      <div className="reveal">
        <div className="eyebrow">WHAT THE TRADE SAYS</div>
        <h2 className="section__title">Trusted by designers <em>across Georgia</em>.</h2>
      </div>
      <p className="section__lead reveal" data-d="1">
        Interior designers, architects and decorators — working on residential,
        retail and hospitality — specify Spiver through us. A few of them, in
        their own words.
      </p>
    </div>
    <div className="reviews-grid">
      {REVIEWS.map((r, i) => (
        <article key={r.author} className="review reveal" data-d={i+1}>
          <div className="review__mark">— IN PRACTICE</div>
          <p className="review__quote">“{r.quote}”</p>
          <div className="review__attr">
            <div className="review__author">{r.author}</div>
            <div className="review__role">{r.role}</div>
            <div className="review__project">{r.project}</div>
          </div>
        </article>
      ))}
    </div>
    <div className="reviews-footer reveal">
      <div className="reviews-footer__num">
        <strong>180+</strong> projects across Georgia
      </div>
      <a className="btn btn--ghost" href="#projects">
        Read more case studies <Icon name="arrow" size={12}/>
      </a>
    </div>
  </section>
);

/* ---------- Journal (near bottom) ---------- */
const JOURNAL = [
  {
    cat: "GUIDE",
    date: "03 / 2026",
    title: "Marmorino or Travertino: which finish belongs in your room?",
    excerpt: "A side-by-side on light behaviour, texture depth, and where each one earns its place.",
    pig: "post-marmorino",
  },
  {
    cat: "APPLICATION",
    date: "02 / 2026",
    title: "Limewash in bathrooms — yes, you can.",
    excerpt: "With the right sealer and a patient hand, calce belongs in wet zones too. Here’s the spec we use.",
    pig: "post-bathroom",
  },
  {
    cat: "SHOWROOM",
    date: "01 / 2026",
    title: "A visit to the Batumi atelier — what to bring.",
    excerpt: "Bring your floor plans, your fabric swatches, and an open afternoon. We’ll do the coffee.",
    pig: "post-batumi",
  },
];

const Journal = () => (
  <section className="section section--paper" id="journal" data-screen-label="10 Journal">
    <SectionHead
      eyebrow="FROM THE JOURNAL"
      title="Notes on material,"
      accent="light and craft"
      lead="Short reads from the showroom — guides, application notes, project diaries and the occasional opinion on what makes a wall feel finished."
    />
    <div className="journal-grid">
      {JOURNAL.map((p, i) => (
        <a key={p.title} className="post reveal" data-d={i+1} href="/en/journal/">
          <div className="post__media">
            <div className={"post__pigment " + p.pig}></div>
          </div>
          <div className="post__cat" data-date={p.date}>{p.cat}</div>
          <h3 className="post__title">{p.title}</h3>
          <p className="post__excerpt">{p.excerpt}</p>
          <span className="post__link">Read article <Icon name="arrow" size={11}/></span>
        </a>
      ))}
    </div>
    <div className="reveal" style={{maxWidth: 1320, margin: "56px auto 0", display: "flex", justifyContent: "center"}}>
      <a className="btn btn--outline" href="/en/journal/">
        Browse the journal <Icon name="arrow" size={12}/>
      </a>
    </div>
  </section>
);

Object.assign(window, { REVIEWS, Reviews, JOURNAL, Journal });

/* ---------- Reveal hook (IntersectionObserver) ----------
   Re-runs when `deps` change so dynamically-added .reveal
   nodes (e.g. after a tab swap) also get observed.        */
const useReveal = (deps = []) => {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal:not(.is-in)");
    if (!("IntersectionObserver" in window)) {
      els.forEach(el => el.classList.add("is-in"));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add("is-in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, deps);
};

Object.assign(window, {
  Icon, ConcentricMark, TopNav, SearchOverlay, SEARCH_INDEX, Hero, TrustStrip, ReviewBand, REVIEW_BAND, SectionHead, PageHero,
  CATEGORIES, CategoryCard,
  FEATURED, FeaturedCard,
  ForDesigners,
  SHOWROOMS, ShowroomCard,
  PROJECTS, ProjectTile,
  WhyLuxorium, FinalCta, Footer,
  useReveal,
});