);
}
/* WhatsApp CTAs: the DS Button wraps its children in a single span, so the icon and label are
composed together inside one inline-flex run to keep them on the same line. */
function WhatsAppLabel({ children }) {
return (
{children}
);
}
/* Section heading: eyebrow above the headline on the left, supporting note on the right.
The DS SectionHeading puts the eyebrow in its own column, which the client rejected —
same type tokens and rhythm, two columns instead of three. */
function SectionHead({ eyebrow, title, note, tone, level }) {
const Heading = 'h' + (level || 2);
return (
{eyebrow}
{title}
{note ?
{note}
: null}
);
}
function useMotionToggle() {
const [paused, setPaused] = React.useState(false);
React.useEffect(() => { document.body.classList.toggle('motion-off', paused); }, [paused]);
return [paused, () => setPaused((p) => !p)];
}
function useSolidHeader() {
const [solid, setSolid] = React.useState(false);
React.useEffect(() => {
const onScroll = () => setSolid(window.scrollY > 56);
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
return solid;
}
/* Header: the design system's SiteHeader carries no CTA slot, and every page here needs
the Talk with Julio action in the bar, so the shell is composed from Wordmark and
Button with header tokens. */
function PageHeader({ links, cta, programTag, programLogo, backHref, backLabel, solid }) {
return (
);
}
/* Mobile: design-system MobileNav for the menu, plus a compact sticky action.
The sticky bar never covers content — the page reserves space for it. */
function MobileBar({ links, action }) {
return
;
}
function StickyAction({ primary, secondary }) {
return (
{secondary ? : null}
);
}
/* Sticky WhatsApp bubble: present on every page, opens WhatsApp with the page's message
pre-filled. The number lives in the shared contact record. */
function WhatsAppBubble({ message, page }) {
const num = (window.JC.RECORD.contact.whatsappNumberE164 || '').replace(/[^0-9]/g, '');
if (!num) return null;
const href = 'https://wa.me/' + num + '?text=' + encodeURIComponent(message);
return (
window.JC.track('contact_whatsapp_click', { page: page, placement: 'bubble' })}>
);
}
/* Honest unavailable-contact state: the number has not been supplied, so the action
explains itself and hands over the exact message instead of failing silently. */
function ContactDialog({ text, onClose }) {
const boxRef = React.useRef(null);
const [copied, setCopied] = React.useState(false);
React.useEffect(() => {
const onKey = (e) => { if (e.key === 'Escape') onClose(); };
document.addEventListener('keydown', onKey);
if (boxRef.current) boxRef.current.focus();
return () => document.removeEventListener('keydown', onKey);
}, [onClose]);
if (!text) return null;
return (
Julio's public WhatsApp number has not been supplied, so this action cannot open a conversation yet. This is the message it will send once the number is added to the contact record.
{text}
);
}
/* Supplied brand icons from uploads/Brand/Icons, path data verbatim. Stroke is switched to
currentColor so the mark takes its color from the design-system token, not the file's hex. */
function Glyph({ name, size }) {
const paths = {
plane: <>,
van: <>,
bed: <>,
coffee: <>,
meal: <>,
stadium: <>,
mountain: <>,
landmark: <>,
clock: <>,
waves: <>,
shopping: <>,
luggage: <>,
calendar: <>,
family: <>,
whatsapp: ,
training: <>,
futsal: <>,
'player-fit': ,
/* Whistle and soccer ball drawn to match the supplied icons' geometry; the athlete is the
client-supplied 16×16 running-player mark, path data verbatim. */
whistle: <>,
ball: <>,
player: <>
};
/* Filled marks carry their own viewBox and use fill rather than stroke. */
const filled = {
whatsapp: {
viewBox: '0 0 24 24',
body:
},
athlete: {
viewBox: '0 0 16 16',
body: <>
}
};
if (filled[name]) {
return (
);
}
return (
);
}
/* Featured opportunity: operational UI driven by the shared record. Renders nothing at all
when disabled, expired or incomplete — no reserved height, no automatic substitute. */
function OpportunityPanel({ page, onWhatsApp, formHref, inline, image }) {
const o = window.JC.RECORD.featuredOpportunity;
const valid = window.JC.opportunityIsValid(o);
React.useEffect(() => {
if (valid) window.JC.track('opportunity_engagement', { opportunity_id: o.id, program: o.programId, status: o.statusLabel, action: 'view' });
}, [valid]);
if (!valid) return null;
const cta = (
);
/* Compact form: a thumbnail beside two metadata rows, sized to sit inside the hero column. */
if (inline) {
return (
{image ? : null}
Upcoming camp
{o.identity} {o.dateOrSeason}
{o.message}
{o.timing}
{o.fit}
{cta}
);
}
return (
Upcoming camp
{o.identity} {o.dateOrSeason} {o.message}
{o.timing}
{o.fit}
{cta}
);
}
/* Email-first inquiry form. WhatsApp remains available separately as a subtle page action. */
const JC_INTEREST_OPTIONS = ['Camps & Clinics', 'Private or Small-Group Training', 'Team Training', 'JC Brasil Tour', 'College Team Experience', 'Not Sure Yet'];
function InquiryPanel({ id, page, program, title, note, interestOptions, defaultInterest, showUpdatesOptIn, onWhatsApp, submitLabel, successText, interestLabel, phoneRequired, emailRequired = true, ageLabel, updatesLabel }) {
const [values, setValues] = React.useState({ interest: defaultInterest || '', name: '', phone: '', age: '', level: '', email: '', message: '', consent: false, updates: false });
const [errors, setErrors] = React.useState({});
/* CTAs elsewhere on the page can preselect the interest via a custom event. */
React.useEffect(() => {
const onPick = (e) => setValues((v) => ({ ...v, interest: e.detail }));
window.addEventListener('jc:interest', onPick);
return () => window.removeEventListener('jc:interest', onPick);
}, []);
const [status, setStatus] = React.useState(null);
const set = (k) => (e) => {
const v = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
setValues((s) => Object.assign({}, s, { [k]: v }));
setErrors((s) => Object.assign({}, s, { [k]: null }));
};
function submit(path) {
const next = {};
if (!values.interest) next.interest = 'Choose the program you are asking about.';
if (!values.name.trim()) next.name = 'Enter the parent, guardian, or coach name.';
if (emailRequired && !values.email.trim()) next.email = 'Enter an adult email address so Julio can reply.';
if (phoneRequired && !values.phone.trim()) next.phone = 'Enter a phone number Julio can reach you on.';
if (!values.age.trim()) next.age = 'Enter the player age or team age group.';
if (!values.consent) next.consent = 'Consent is required before Julio can reply.';
setErrors(next);
if (Object.keys(next).length) {
setStatus({ kind: 'error', text: 'Some required details are missing. Check the highlighted fields.' });
window.JC.track('inquiry_submit', { page, interest: values.interest, submission_path: path, result: 'validation_error' });
return;
}
const destination = window.JC.RECORD.contact.formDestination;
if (!destination) {
setStatus({ kind: 'unavailable', text: 'Form destination not configured. Your details are kept on this page \u2014 the developer must connect the destination before launch.' });
window.JC.track('inquiry_submit', { page, interest: values.interest, submission_path: path, result: 'destination_unavailable' });
} else if (destination.indexOf('mailto:') === 0) {
const subject = 'Website inquiry: ' + values.interest;
const body = [
'Adult contact: ' + values.name,
'Phone: ' + values.phone,
'Email: ' + (values.email || 'Not provided'),
'Player age or team age group: ' + values.age,
'Current level: ' + (values.level || 'Not provided'),
'Interest: ' + values.interest,
'Updates requested: ' + (values.updates ? 'Yes' : 'No'),
'',
values.message || 'No additional message.'
].join('\n');
window.location.href = destination + '?subject=' + encodeURIComponent(subject) + '&body=' + encodeURIComponent(body);
setStatus({ kind: 'success', text: 'Your email app has opened with the inquiry ready to send to Julio.' });
window.JC.track('inquiry_submit', { page, interest: values.interest, submission_path: 'email', result: 'email_opened' });
} else {
setStatus({ kind: 'success', text: successText || 'Thanks. Your inquiry has been emailed to Julio. He will use the contact details you provided to follow up.' });
window.JC.track('inquiry_submit', { page, interest: values.interest, submission_path: path, result: 'success' });
}
if (path === 'form_then_whatsapp' && onWhatsApp) onWhatsApp({ program, placement: 'form', page, extra: window.JC.enrichedMessage(values) });
}
const statusTone = { success: 'var(--copacabana-soft)', unavailable: 'rgba(255,198,41,.28)', error: 'rgba(17,17,17,.06)' };
return (
);
}
/* Gallery lightbox — keyboard navigable, focus trapped, no auto-rotation. */
function Lightbox({ items, index, onClose, onMove }) {
const closeRef = React.useRef(null);
React.useEffect(() => {
if (index === null) return;
const onKey = (e) => {
if (e.key === 'Escape') onClose();
if (e.key === 'ArrowRight') onMove(1);
if (e.key === 'ArrowLeft') onMove(-1);
};
document.addEventListener('keydown', onKey);
if (closeRef.current) closeRef.current.focus();
document.body.style.overflow = 'hidden';
return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
}, [index, onClose, onMove]);
if (index === null) return null;
const item = items[index];
return (