function Footer(){
  const { t } = useLang();
  const [ref, inView] = useInView({threshold:.1});
  const y = useScrollY();
  const [localY, setLocalY] = React.useState(0);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const onScroll = () => {
      if (!el) return;
      const rect = el.getBoundingClientRect();
      setLocalY((window.innerHeight - rect.top) * 0.3);
    };
    window.addEventListener('scroll', onScroll, {passive:true});
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section ref={ref} data-screen-label="11 Footer" style={{
      position:'relative', background:'var(--ink)', color:'var(--cream)',
      padding:'20vh 4vw 8vh', overflow:'hidden', minHeight:'100vh',
      display:'flex', flexDirection:'column', justifyContent:'space-between',
    }}>
      {/* Hashtag — enormous, breathes */}
      <div style={{position:'relative', zIndex:2, textAlign:'center'}}>
        <div className={`reveal ${inView?'in':''}`} style={{marginBottom:40}}>
          <span className="italiana" style={{fontSize:11, letterSpacing:5, opacity:.65}}>
            {t('footer.hashtag_label')}
          </span>
        </div>
        <div style={{transform:`translateY(${localY*-0.2}px)`}}>
          <DecodeText
            tag="h2" className="display footer-hashtag"
            text={CONFIG.couple.hashtag}
            endPct={60}
            style={{
              fontSize:'clamp(60px, 13vw, 260px)', lineHeight:.85, fontWeight:200, letterSpacing:'-.05em',
              fontStyle:'italic', fontVariationSettings:'"SOFT" 100',
              marginBottom:50, color:'var(--cream)',
            }}
          />
        </div>
        <p className={`reveal ${inView?'in':''} cormorant`} style={{
          fontSize:18, opacity:.7, maxWidth:500, margin:'0 auto 100px',
          transitionDelay:'.2s', fontStyle:'italic', lineHeight:1.55,
        }}>
          {t('footer.hashtag_note')}
        </p>
      </div>

      {/* Contatti — last thing */}
      <div style={{position:'relative', zIndex:2}}>
        <div className={`reveal ${inView?'in':''}`} style={{
          borderTop:'1px solid rgba(244,237,216,.18)', paddingTop:50,
          display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(220px, 1fr))', gap:40,
          transitionDelay:'.3s',
        }}>
          {CONFIG.contacts.map((c, i) => (
            <div key={i}>
              <div className="italiana" style={{fontSize:10, letterSpacing:3, opacity:.55, textTransform:'uppercase', marginBottom:10}}>
                · {c.lbl}
              </div>
              <div className="display" style={{fontSize:'clamp(16px, 1.2vw, 19px)', fontStyle:'italic', fontWeight:300, marginBottom:8, lineHeight:1.2}}>
                {c.val}
              </div>
              <div className="cormorant" style={{fontSize:14, opacity:.55, lineHeight:1.5, fontStyle:'italic'}}>
                {c.sub}
              </div>
            </div>
          ))}
        </div>

        <div style={{
          marginTop:80, paddingTop:30, borderTop:'1px solid rgba(244,237,216,.12)',
          display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap:20,
        }}>
          <div className="italiana" style={{fontSize:10, letterSpacing:3, opacity:.45, textTransform:'uppercase'}}>
            {t('footer.tagline')}
          </div>
          <div className="italiana" style={{fontSize:10, letterSpacing:3, opacity:.45, textTransform:'uppercase'}}>
            {CONFIG.event.coordinates_display} · {new Date(CONFIG.event.date_iso).getFullYear()}
          </div>
          <div className="italiana" style={{fontSize:10, letterSpacing:3, opacity:.45, textTransform:'uppercase'}}>
            {t('footer.credit')}
          </div>
        </div>
      </div>
    </section>
  );
}

window.Footer = Footer;