// Shared primitives for De Feu et D'Acier
const Diamond = ({ size = 12, filled = true, color = 'currentColor', style }) => (
{children}
);
const SectionLabel = ({ number, name }) => (
{String(number).padStart(2, '0')}
{name}
);
const ArrowGlyph = ({ size = 14, color = 'currentColor' }) => (
);
// Manuscript-style ornamental sword glyph for accents
const SwordGlyph = ({ size = 36, color = 'currentColor' }) => (
);
// Subtle image with overlay support
const Photo = ({ src, alt = '', focal = '50% 50%', style, children, ratio }) => (
{src && (
)}
{children}
{children}
);
};
// Top navigation — 3 zones (brand / nav center / CTA right), padding stable,
// pas de "saut" au scroll : seul le background change.
const Nav = ({ scrolled }) => {
// Items centrés. Le CTA "Essayer" porte l'appel à l'action principal.
// Ordre aligné avec la nouvelle hiérarchie (disciplines en premier).
const items = [
{ label: 'Disciplines', href: '#disciplines', id: 'disciplines' },
{ label: 'Les profs', href: '#profs', id: 'profs' },
{ label: 'Le club', href: '#club', id: 'club' },
{ label: 'Nous rejoindre', href: '#creneaux', id: 'creneaux' },
{ label: 'Tournois', href: '#tournois', id: 'tournois' },
{ label: 'FAQ', href: '#faq', id: 'faq' },
];
const [open, setOpen] = React.useState(false);
const [activeId, setActiveId] = React.useState(null);
// Le CTA du hero est-il visible ? Si oui, on cache le CTA de la navbar pour
// ne pas redonder l'action et garder le hero comme zone d'appel unique.
// Dès que le bouton sort de la viewport (scroll), le CTA navbar prend le relais.
const [heroCtaVisible, setHeroCtaVisible] = React.useState(true);
React.useEffect(() => {
document.body.style.overflow = open ? 'hidden' : '';
return () => { document.body.style.overflow = ''; };
}, [open]);
React.useEffect(() => {
const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, []);
React.useEffect(() => {
const cta = document.querySelector('.hero-cta');
if (!cta) return;
const io = new IntersectionObserver(
([entry]) => setHeroCtaVisible(entry.isIntersecting),
{ threshold: 0.1 }
);
io.observe(cta);
return () => io.disconnect();
}, []);
// Scroll-spy : surligne l'item dont la section traverse le plus la viewport.
// rootMargin choisi pour que la nav (haut ~70px) ne fausse pas l'intersection.
React.useEffect(() => {
const ids = items.map((it) => it.id);
const els = ids
.map((id) => document.getElementById(id))
.filter(Boolean);
if (els.length === 0) return;
const io = new IntersectionObserver(
(entries) => {
const visible = entries
.filter((e) => e.isIntersecting)
.sort((a, b) => b.intersectionRatio - a.intersectionRatio);
if (visible[0]) setActiveId(visible[0].target.id);
},
{ rootMargin: '-40% 0px -50% 0px', threshold: [0, 0.25, 0.5, 0.75, 1] }
);
els.forEach((el) => io.observe(el));
return () => io.disconnect();
}, []);
return (
<>
{/* Zone gauche — vide volontairement (ni logo ni texte). Le slot
grid reste là pour préserver le centrage des items au milieu
via grid-template-columns: 1fr auto 1fr. */}
{items.map((it) => {
const isActive = activeId === it.id;
return (
{it.label}
);
})}
{/* Zone droite — CTA "Venir essayer" (toujours visible, action principale).
Label aligné avec le bouton du hero pour une promesse unique. */}
Venir essayer
{/* Mobile toggle */}
setOpen(v => !v)}
className="site-nav-toggle"
>
{/* Mobile drawer */}
);
};
// ───────────────────────────────────────────────────────────────────
// MOBILE ACTION BAR — Sticky bottom (Tel · Mail · Essayer).
// Affichée uniquement sous 900px de large. Donne accès permanent aux
// 3 actions principales sans avoir à scroller. Padding-bottom du body
// géré ici aussi (sinon le contenu se cache derrière la barre).
// ───────────────────────────────────────────────────────────────────
const MobileActionBar = () => {
const venue = (window.useContent && window.useContent('rejoindre')?.venue) || {};
const tel = venue.contactPhoneHref || 'tel:+33631585460';
const mail = venue.contactEmail
? `mailto:${venue.contactEmail}?subject=${encodeURIComponent("Première séance d'essai — De Feu et d'Acier")}`
: 'mailto:c.sillac@protonmail.com';
return (
<>
);
};
Object.assign(window, {
Diamond,
Eyebrow,
SectionLabel,
ArrowGlyph,
SwordGlyph,
Photo,
Reveal,
useReveal,
Nav,
MobileActionBar,
});