// HIVING FOOD — Composants partagés multi-pages
// Nav globale + Footer + Switcher FR/EN + helpers SEO
// Dépendances : React, useT (window), HIVING_PALETTE (window)
(function () {
const PALETTE = {
bg: '#f6f1e7',
cream: '#ede5d3',
ink: '#0e0d0a',
inkSoft: '#5a544a',
accent: '#0e0d0a',
lime: '#d4e85a',
butter: '#d4e85a',
splash: '#9bb830',
paper: '#ffffff',
display: '"DM Serif Display", "Caslon", Georgia, serif',
serif: '"DM Serif Display", Georgia, serif',
sans: '"Inter", "Helvetica Neue", system-ui, sans-serif',
mono: '"JetBrains Mono", monospace',
hand: '"Caveat", "Marker Felt", cursive',
};
window.HIVING_PALETTE = PALETTE;
// Si pages relatives, base = "" sur la home, "../" depuis /pages/*
function basePath() {
const p = window.location.pathname;
if (p.includes('/pages/')) return '../';
return '';
}
window.hivingBase = basePath;
// ─── Logo ─────────────────────────────────────────────
function HivingLogo({ size = 72, onClick }) {
const base = basePath();
return (
{
if (onClick) onClick(e);
const img = e.currentTarget.querySelector('img');
if (img) {
img.style.transition = 'transform 0.6s cubic-bezier(.34,1.56,.64,1)';
img.style.transform = 'rotate(-8deg) scale(1.08)';
setTimeout(() => { img.style.transform = ''; }, 600);
}
}} style={{ display: 'block', textDecoration: 'none' }} data-cursor="">
);
}
// ─── LangSwitcher ─────────────────────────────────────
function LangSwitcher() {
const { lang, setLang } = window.useT();
return (
{['fr', 'en'].map((l) => (
))}
);
}
// ─── GlobalNav ────────────────────────────────────────
function GlobalNav({ active }) {
const { t } = window.useT();
const [scrolled, setScrolled] = React.useState(false);
React.useEffect(() => {
const h = () => setScrolled(window.scrollY > 30);
window.addEventListener('scroll', h, { passive: true });
h();
return () => window.removeEventListener('scroll', h);
}, []);
const base = basePath();
const items = [
{ id: 'plateaux', label: t('nav.plateaux'), href: base + 'pages/plateaux.html' },
{ id: 'services', label: t('nav.services'), href: base + 'pages/services.html' },
{ id: 'tarifs', label: t('nav.tarifs'), href: base + 'pages/tarifs.html' },
{ id: 'travaux', label: t('nav.travaux'), href: base + 'pages/travaux.html' },
{ id: 'carnet', label: t('nav.carnet'), href: base + 'pages/carnet.html' },
{ id: 'equipe', label: t('nav.equipe'), href: base + 'pages/equipe.html' },
{ id: 'presse', label: t('nav.presse'), href: base + 'pages/presse.html' },
];
return (
);
}
// ─── GlobalFooter ─────────────────────────────────────
function GlobalFooter() {
const { t } = window.useT();
const base = basePath();
return (
);
}
// ─── Section heading helper ───────────────────────────
function SectionHeading({ eyebrow, title, hand, sub, light }) {
const c = light ? PALETTE.bg : PALETTE.ink;
const cs = light ? `${PALETTE.bg}99` : PALETTE.inkSoft;
return (
{eyebrow && (
{eyebrow}
)}
{title}
{hand && (
{hand}
)}
{sub && (
{sub}
)}
{children}
);
}
// ─── Breadcrumb ──────────────────────────────────────
function Breadcrumb({ items }) {
const base = basePath();
return (
);
}
// ─── BigCTA ──────────────────────────────────────────
function BigCTA({ eyebrow, title, hand, ctaLabel, ctaHref, ctaSecondaryLabel, ctaSecondaryHref }) {
const base = basePath();
return (
{eyebrow && (
{eyebrow}
)}
{title}
{hand && (
{hand}
)}