/* global React */ const { useState, useEffect, useRef } = React; // ─────────────────────────────────────────────────────────── // Blason — vrai logo de l'EAN (extrait du site officiel) // `compact` (défaut: true) = juste l'écusson tripartite, sans texte ARQUEBUSE 1474 // `compact={false}` = blason complet avec texte (utile pour le hero histoire) // ─────────────────────────────────────────────────────────── function Blason({ size = 48, compact = true }) { const src = compact ? "assets/images/logo-small.png" : "assets/images/logo.png"; // ratio approximatif : compact ~1:1, full ~1.05 (avec texte sous l'écu) const ratio = compact ? 1 : 1.05; return ( Blason de l'Arquebuse Genève · 1474 ); } // ─────────────────────────────────────────────────────────── // Bannière DÉMO — avertit que c'est une maquette de prévisualisation // ─────────────────────────────────────────────────────────── function DemoBanner() { const [closed, setClosed] = useState(false); if (closed) return null; // Palette Eljadi WORKS — eljadiworks.com const ELJADI = { ink: "#3d2416", // brun foncé (texte / fond principal) accent: "#f0b42e", // jaune doré (signature) accentHover: "#d9a229", cream: "#fef9f3", // crème (texte sur fond foncé) inkSoft: "#5a4438", // brun moyen }; return (
Démo Maquette de prévisualisation · Le site officiel reste{" "} arquebuse.ch Proposition par Eljadi WORKS
); } // ─────────────────────────────────────────────────────────── // Top-bar institutionnelle // ─────────────────────────────────────────────────────────── function TopBar() { return (
Exercices de l'Arquebuse et de la Navigation · Genève · MCDLXXIV FR Espace membre →
); } // ─────────────────────────────────────────────────────────── // Header / Nav // ─────────────────────────────────────────────────────────── function Header({ current, onNav }) { const [scrolled, setScrolled] = useState(false); const [mobileOpen, setMobileOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 12); window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []); const items = [ { id: "accueil", label: "Accueil" }, { id: "stand", label: "Stand" }, { id: "calendrier", label: "Calendrier" }, { id: "resultats", label: "Résultats" }, { id: "acces", label: "Accès" }, { id: "histoire", label: "Histoire" }, { id: "boutique", label: "Bourse" }, ]; return ( <>
{/* logo block */} { e.preventDefault(); onNav("accueil"); }} style={{ display: "flex", alignItems: "center", gap: 14 }} >
Arquebuse Genève · MCDLXXIV
{/* nav */} {/* mobile burger */}
{/* mobile drawer */} {mobileOpen && (
{items.map((item) => ( { e.preventDefault(); onNav(item.id); setMobileOpen(false); }} style={{ display: "block", padding: "14px 0", fontSize: 18, fontFamily: "var(--display)", borderBottom: "1px dashed var(--hairline)", color: current === item.id ? "var(--accent-deep)" : "var(--ink)", }} > {item.label} ))}
)}
); } // ─────────────────────────────────────────────────────────── // Footer // ─────────────────────────────────────────────────────────── function Footer() { return ( ); } // ─────────────────────────────────────────────────────────── // PageHeader (utilisé par les sous-pages) // ─────────────────────────────────────────────────────────── function PageHeader({ eyebrow, title, italic, subtitle, align = "left" }) { return (
{eyebrow && (
— {eyebrow} —
)}

{title} {italic && ( {italic} )}

{subtitle && (
{subtitle}
)}
); } // ─────────────────────────────────────────────────────────── // Photo (image réelle si src fourni, sinon placeholder design) // ─────────────────────────────────────────────────────────── function PhotoPH({ ratio = "4/3", label = "PHOTO TBD", height, style = {}, src, alt, objectPosition, }) { const wrapStyle = height ? { height, ...style } : { aspectRatio: ratio, ...style }; if (src) { return (
{alt
); } return (
{label}
); } // ─────────────────────────────────────────────────────────── // Roman numeral helper // ─────────────────────────────────────────────────────────── function toRoman(n) { const map = [ ["M", 1000], ["CM", 900], ["D", 500], ["CD", 400], ["C", 100], ["XC", 90], ["L", 50], ["XL", 40], ["X", 10], ["IX", 9], ["V", 5], ["IV", 4], ["I", 1], ]; let s = "", k = n; for (const [r, v] of map) { while (k >= v) { s += r; k -= v; } } return s; } // ─────────────────────────────────────────────────────────── // Fade-up wrapper (intersection observer) // ─────────────────────────────────────────────────────────── function FadeUp({ children, delay = 0, style = {} }) { const ref = useRef(null); const [vis, setVis] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; const obs = new IntersectionObserver( ([e]) => { if (e.isIntersecting) { setTimeout(() => setVis(true), delay); obs.disconnect(); } }, { threshold: 0.12 }, ); obs.observe(el); return () => obs.disconnect(); }, [delay]); return (
{children}
); } // expose to global Object.assign(window, { Blason, DemoBanner, TopBar, Header, Footer, PageHeader, PhotoPH, toRoman, FadeUp, });