// ── Scroll progress bar ── function ScrollProgress() { useEffect(() => { const bar = document.querySelector('.scroll-progress-bar'); if (!bar) return; let raf = 0; const update = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(() => { const h = document.documentElement; const max = h.scrollHeight - h.clientHeight; const pct = max > 0 ? window.scrollY / max * 100 : 0; bar.style.width = pct + '%'; }); }; update(); window.addEventListener('scroll', update, { passive: true }); window.addEventListener('resize', update); return () => {window.removeEventListener('scroll', update);window.removeEventListener('resize', update);}; }, []); return (
); } // ── Ambient floating dust particles ── function Dust({ count = 16, color }) { const items = React.useMemo(() => Array.from({ length: count }).map(() => ({ x: Math.random() * 100, s: 2 + Math.random() * 4, d: Math.random() * -20, dur: 14 + Math.random() * 16, dx: -40 + Math.random() * 80, o: 0.3 + Math.random() * 0.5 })), [count]); return ( ); } // Page sections function Hero({ headline, variant, showCourtLines, onOpenLead }) { // multi-layer scroll-driven parallax useEffect(() => { const els = document.querySelectorAll('[data-parallax]'); let raf = 0; const onScroll = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(() => { const y = window.scrollY; els.forEach((el) => { const k = parseFloat(el.getAttribute('data-parallax')) || 0; const mode = el.getAttribute('data-parallax-mode') || 'centered'; if (mode === 'translate') { el.style.transform = `translate3d(0, ${y * k}px, 0)`; } else if (mode === 'scale') { const s = 1 + Math.min(0.18, y * 0.00018); el.style.transform = `translate3d(0, ${y * k}px, 0) scale(${s})`; } else { el.style.transform = `translate(-50%, calc(-50% + ${y * k}px))`; } }); }); }; window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); return (
{/* Full-bleed cinematic photo */}
); } // ── Marquee slate between hero and powered ── function Slate() { const words = ['ROOSTERS LIVORNO', 'PIELLE LIVORNO', 'PIELLE YOUNG']; // Duplicate for seamless loop const loop = Array.from({ length: 10 }).flatMap(() => words); return ( ); } // ── Big-type manifesto interlude between Famiglia and Categorie ── function Manifesto() { return (
); } function Powered() { return (
); } function Why() { // MANIFESTO — "Entra nella famiglia Pielle" const pillars = [ { n: '01', title: 'Identità', body: 'Si nasce biancoazzurri, si cresce biancoazzurri. Una maglia che vale più di un colore — è una città, una storia, un modo di stare al mondo.' }, { n: '02', title: 'Crescita', body: 'Tecnica, mente, persona. Si lavora ogni giorno per chi sarà domani — non solo per chi è oggi.' }, { n: '03', title: 'Squadra', body: 'Lo spogliatoio è casa. Si vince insieme, si perde insieme, si torna sempre più forti. Sempre.' }, { n: '04', title: 'Rispetto', body: 'Per l\'avversario, l\'arbitro, il compagno, la palestra. Per la fatica di chi è venuto prima.' }, { n: '05', title: 'Ambizione', body: 'Pensare in grande, lavorare nei dettagli. Il talento è una promessa — il lavoro la mantiene.' }]; return (
); } function JobApplicationForm() { const [state, setState] = useState({ nome: '', cognome: '', email: '', ruolo: '', presentazione: '', esperienza: '', consenso: false }); const [errors, setErrors] = useState({}); const [submitting, setSubmitting] = useState(false); const [sendError, setSendError] = useState(''); const [done, setDone] = useState(false); const formRef = useRef(null); const up = (k, v) => setState((s) => ({ ...s, [k]: v })); const RUOLI = [ 'Allenatore Minibasket', 'Allenatore Giovanili', 'Assistente / Aiuto allenatore', 'Dirigente accompagnatore', 'Dirigente / Staff organizzativo', 'Preparatore atletico', 'Fisioterapista / Area medica', 'Comunicazione & Social', 'Volontario / Altro']; const submit = async (e) => { e.preventDefault(); const er = {}; if (!state.nome.trim()) er.nome = 1; if (!state.cognome.trim()) er.cognome = 1; if (!state.email.includes('@')) er.email = 1; if (!state.ruolo) er.ruolo = 1; if (!state.presentazione.trim() || state.presentazione.trim().length < 20) er.presentazione = 1; if (!state.esperienza.trim() || state.esperienza.trim().length < 10) er.esperienza = 1; if (!state.consenso) er.consenso = 1; setErrors(er); if (Object.keys(er).length) return; setSubmitting(true); setSendError(''); const codice = 'PY-RC-' + Math.floor(10000 + Math.random() * 90000); try { if (!window.emailjs) throw new Error('EmailJS non caricato'); await window.emailjs.sendForm( 'service_z9u35fh', 'template_3a9mepa', formRef.current, { publicKey: 'NU6dv_IcpskuUDtlM' } ); setDone(true); } catch (err) { console.error('EmailJS error', err); // graceful fallback: open the user's mail client with prefilled content const subject = encodeURIComponent(`Candidatura — ${state.ruolo} — ${state.nome} ${state.cognome}`); const body = encodeURIComponent( `Nome: ${state.nome} ${state.cognome}\nEmail: ${state.email}\nRuolo: ${state.ruolo}\n\nPresentazione:\n${state.presentazione}\n\nEsperienze sportive passate:\n${state.esperienza}\n\nCodice: ${codice}` ); setSendError('Invio diretto non riuscito. Apri il tuo client mail per completare l\'invio.'); window.location.href = `mailto:info@pielleyoung.com?subject=${subject}&body=${body}`; } finally { setSubmitting(false); } }; if (done) { return (

Candidatura ricevuta.

Grazie {state.nome}. Abbiamo ricevuto il tuo profilo per il ruolo di {state.ruolo}. Ti ricontatteremo via email a {state.email}.

RISPOSTA IN TEMPI BREVI · CONVERSAZIONE RISERVATA
); } return (