function ProgrammaRow({ item, idx }){
  const [ref, inView] = useInView({threshold:.3});
  return (
    <div ref={ref} className="programma-grid" style={{
      display:'grid', gridTemplateColumns:'minmax(280px, 42%) 1fr', gap:'clamp(30px, 5vw, 80px)',
      padding:'clamp(50px, 8vh, 100px) 0', borderTop: idx===0 ? 'none' : '1px solid rgba(244,237,216,.15)',
      alignItems:'baseline',
    }}>
      <div className={`reveal ${inView?'in':''}`} style={{display:'flex', alignItems:'baseline', gap:18}}>
        <span className="italiana" style={{fontSize:11, letterSpacing:3, opacity:.5, minWidth:30, color:'var(--passion)'}}>
          {String(idx+1).padStart(2,'0')}
        </span>
        <div className="display programma-time" style={{
          fontSize:'clamp(80px, 13vw, 220px)', lineHeight:.8, fontWeight:200,
          letterSpacing:'-.05em', fontVariationSettings:'"SOFT" 100, "opsz" 144',
          fontStyle:'italic', color:'var(--cream)', fontFeatureSettings:'"tnum"',
        }}>
          {item.time}
        </div>
      </div>
      <div className={`reveal ${inView?'in':''}`} style={{transitionDelay:'.15s', paddingTop:'clamp(20px, 3vw, 40px)'}}>
        <div className="script" style={{fontSize:'clamp(38px, 4.5vw, 64px)', marginBottom:8, color:'var(--passion)', lineHeight:1}}>
          {item.label}
        </div>
        <div className="italiana" style={{fontSize:11, letterSpacing:3, textTransform:'uppercase', opacity:.65, marginBottom:20, color:'var(--cream-2)'}}>
          · {item.where}
        </div>
        <p className="cormorant" style={{fontSize:'clamp(16px, 1.2vw, 19px)', lineHeight:1.65, fontWeight:400, fontStyle:'italic', color:'var(--cream-2)', maxWidth:480}}>
          {item.note}
        </p>
      </div>
    </div>
  );
}

function Programma(){
  const { t, lang } = useLang();
  const [ref, inView] = useInView({threshold:.05});
  const y = useScrollY();
  const items = window.TRANSLATIONS[lang].programma.items;
  return (
    <section ref={ref} data-screen-label="04 Programma" style={{
      position:'relative', background:'var(--ink-2)', color:'var(--cream)',
      padding:'20vh 6vw 16vh', overflow:'hidden',
    }}>
      <div className="script" style={{
        position:'absolute', top:'-4vh', right:'-2vw',
        fontSize:'clamp(200px, 32vw, 520px)', lineHeight:.8, fontWeight:400,
        color:'rgba(200,16,46,.07)', pointerEvents:'none', userSelect:'none',
        transform:`translateY(${y*-0.12}px) rotate(-6deg)`,
      }}>
        {t('programma.background_word')}
      </div>

      <div style={{position:'relative', zIndex:2, maxWidth:1400, margin:'0 auto'}}>
        <div className={`reveal ${inView?'in':''}`} style={{display:'flex', alignItems:'baseline', gap:20, marginBottom:30}}>
          <div style={{width:60, height:1, background:'var(--cream)', opacity:.4}}/>
          <span className="italiana" style={{fontSize:11, letterSpacing:5, opacity:.65}}>
            {t('programma.section_label')}
          </span>
        </div>
        <div className={`reveal ${inView?'in':''}`} style={{transitionDelay:'.1s', display:'flex', justifyContent:'space-between', alignItems:'flex-end', flexWrap:'wrap', gap:30, marginBottom:70}}>
          <DecodeText
            tag="h2" className="display"
            text={t('programma.title')}
            endPct={60}
            style={{
              fontSize:'clamp(56px, 9vw, 160px)', lineHeight:.88, fontWeight:200, letterSpacing:'-.04em',
              fontStyle:'italic', fontVariationSettings:'"SOFT" 100',
              maxWidth:'12ch',
            }}
          />
          <div className="cormorant" style={{maxWidth:300, fontSize:16, lineHeight:1.6, opacity:.75, fontStyle:'italic'}}>
            <div className="italiana" style={{fontSize:10, letterSpacing:3, opacity:.6, marginBottom:10, fontStyle:'normal'}}>{t('programma.durata_label')}</div>
            <div className="display" style={{fontSize:40, fontStyle:'italic', fontWeight:300, marginBottom:10}}>{t('programma.durata_value')}</div>
            <div>{t('programma.durata_note')}</div>
          </div>
        </div>

        <div>
          {items.map((item, i) => <ProgrammaRow key={i} item={item} idx={i}/>)}
        </div>
      </div>
    </section>
  );
}

window.Programma = Programma;