/* global React */
const { useState, useEffect, useRef, useMemo, useCallback } = React;
// ---------- Logo components (inline SVG so they can animate) ----------
function TelarGlyph({ size = 120, animate = false, color = "#e8dfd0", duration = 1.6 }) {
// Glyph: 5 vertical lines, 2 outer @6pt, 3 inner @3pt; upper/lower thirds vertical + 4 diagonals converging on opposite midpoint.
// viewBox 200x160
const bodyRef = useRef(null);
useEffect(() => {
if (!animate || !bodyRef.current) return;
// Replay on mount: set initial dashoffset and transition
const paths = bodyRef.current.querySelectorAll("[data-anim]");
paths.forEach((p) => {
const len = p.getTotalLength ? p.getTotalLength() : 200;
p.style.transition = "none";
p.style.strokeDasharray = len;
p.style.strokeDashoffset = len;
p.style.opacity = 0;
const delay = Number(p.dataset.delay || 0);
// Kick
requestAnimationFrame(() => {
p.style.transition = `stroke-dashoffset ${duration}s cubic-bezier(0.22, 1, 0.36, 1) ${delay}s, opacity 0.4s ease ${delay}s`;
p.style.strokeDashoffset = 0;
p.style.opacity = 1;
});
});
}, [animate, duration]);
return (
);
}
function TelarWordmark({ width = 140, color = "#e8dfd0" }) {
return (
);
}
function TelarColorVertical({ size = 160, animate = false }) {
// Colored vertical logo from brand/telar-vertical-color-night.svg.
// Inline so we can animate the strokes.
const bodyRef = useRef(null);
useEffect(() => {
if (!animate || !bodyRef.current) return;
const paths = bodyRef.current.querySelectorAll("[data-anim]");
paths.forEach((p) => {
const len = p.getTotalLength ? p.getTotalLength() : 200;
p.style.transition = "none";
p.style.strokeDasharray = len;
p.style.strokeDashoffset = len;
p.style.opacity = 0;
const delay = Number(p.dataset.delay || 0);
requestAnimationFrame(() => {
p.style.transition = `stroke-dashoffset 1.4s cubic-bezier(0.22, 1, 0.36, 1) ${delay}s, opacity 0.4s ease ${delay}s`;
p.style.strokeDashoffset = 0;
p.style.opacity = 1;
});
});
// Fade wordmark in last
const word = bodyRef.current.querySelector("[data-word]");
if (word) {
word.style.opacity = 0;
word.style.transition = "opacity 0.6s ease 1.4s";
requestAnimationFrame(() => { word.style.opacity = 1; });
}
}, [animate]);
const teal = "#4EB5B5", terra = "#E35A36", ink = "#e8dfd0";
return (
);
}
function LintelWordmarkSmall({ height = 28, color = "#c9c2b8", accent = "#b79b5a", atelierColor = "#8a8278" }) {
// Small horizontal rendering: "LINTEL — ◇ — atelier" in a single row, muted
return (
);
}
// ---------- Helpers / hooks ----------
function useI18n(lang) {
return useMemo(() => window.I18N[lang] || window.I18N.en, [lang]);
}
function useRotatingPlaceholder(list, keyTurn) {
return useMemo(() => {
if (!list || !list.length) return "";
return list[keyTurn % list.length];
}, [list, keyTurn]);
}
function pickLoadingLine(strings, lastIndex) {
// pseudo-random but don't repeat within last pick
let idx;
do {
idx = Math.floor(Math.random() * strings.length);
} while (strings.length > 1 && idx === lastIndex);
return idx;
}
// ---------- Corner ticks container ----------
function Ticks() {
return
;
}
// ---------- Export ----------
Object.assign(window, {
React, useState, useEffect, useRef, useMemo, useCallback,
TelarGlyph, TelarWordmark, TelarColorVertical, LintelWordmarkSmall,
useI18n, useRotatingPlaceholder, pickLoadingLine,
Ticks,
});