e.stopPropagation()}
style={{ width: '100%', maxWidth: 1240, position: 'relative', cursor: 'default', aspectRatio: String(INTRO_ASPECT), borderRadius: 16, overflow: 'hidden', boxShadow: '0 30px 80px rgba(0,0,0,0.5)', background: '#000' }}
dangerouslySetInnerHTML={{ __html: `` }}
/>
);
}
/* ─────────── helpers ─────────── */
function describeEl(el) {
const section = el.closest('section,nav,header,footer');
const sectionTag = section?.tagName?.toLowerCase() || 'main';
const sectionLabel = section?.getAttribute('data-section-label') || section?.id || sectionTag;
const tag = el.tagName.toLowerCase();
const text = (el.innerText || el.textContent || '').trim().replace(/\s+/g, ' ').slice(0, 80);
return { section: sectionLabel, tag, text };
}
function loadPins(variant, page) {
try { return JSON.parse(localStorage.getItem(`pins-${variant}-${page}`) || '[]'); }
catch { return []; }
}
/* ─────────── PIN OVERLAY (click-to-pin per element) ─────────── */
function PinOverlay({ variant, page, active }) {
const [pins, setPins] = React.useState([]);
const [activeId, setActiveId] = React.useState(null);
const key = `pins-${variant}-${page}`;
React.useEffect(() => {
setPins(loadPins(variant, page));
setActiveId(null);
}, [key]);
React.useEffect(() => {
if (!active) return;
document.body.style.cursor = 'crosshair';
const handler = (e) => {
if (e.target.closest('[data-pin-ui]')) return;
if (!e.target.closest('main')) return;
e.preventDefault();
e.stopPropagation();
const info = describeEl(e.target);
const newPin = { id: Date.now() + Math.random(), x: e.pageX, y: e.pageY, ...info, comment: '', ts: new Date().toISOString() };
setPins(prev => {
const next = [...prev, newPin];
localStorage.setItem(key, JSON.stringify(next));
return next;
});
setActiveId(newPin.id);
};
window.addEventListener('click', handler, true);
return () => { window.removeEventListener('click', handler, true); document.body.style.cursor = ''; };
}, [active, key]);
const update = (id, patch) => setPins(prev => {
const next = prev.map(p => p.id === id ? { ...p, ...patch } : p);
localStorage.setItem(key, JSON.stringify(next));
return next;
});
const remove = (id) => {
setPins(prev => {
const next = prev.filter(p => p.id !== id);
localStorage.setItem(key, JSON.stringify(next));
return next;
});
setActiveId(null);
};
return (
{pins.map((p, i) => (
{activeId === p.id ? (
PIN #{i + 1} · {p.section} · <{p.tag}>
{p.text && (
"{p.text}"
)}