function StoriaRow({ item, idx, isLast }){
  const [ref, inView] = useInView({threshold:.25});
  const [photoRef, photoY] = useParallax(.7);
  const isMobile = useIsMobile();
  const left = idx % 2 === 0;

  if (isMobile) {
    return (
      <div ref={ref} style={{
        display:'grid', gridTemplateColumns:'32px 1fr', gap:'0 16px',
        padding:'0 6vw 60px', position:'relative',
      }}>
        {/* Timeline verticale */}
        <div style={{gridColumn:1, gridRow:'1 / 4', display:'flex', flexDirection:'column', alignItems:'center'}}>
          <div style={{width:1, height:24, background:'var(--cream-3)', opacity:.3}}/>
          <div style={{width:12, height:12, background:'var(--passion)', transform:'rotate(45deg)', flexShrink:0,
            boxShadow: inView ? '0 0 0 6px rgba(200,16,46,.15)' : 'none', transition:'box-shadow .8s'}}/>
          <div className="italiana" style={{fontSize:9, letterSpacing:2, opacity:.5, marginTop:8, color:'var(--cream-2)', writingMode:'vertical-rl'}}>
            {item.chapter}
          </div>
          <div style={{width:1, flex:1, background:'var(--cream-3)', opacity: isLast ? 0 : .3}}/>
        </div>

        {/* Foto */}
        <div style={{gridColumn:2, gridRow:1, marginBottom:20}}>
          <div className={`reveal reveal-slow ${inView?'in':''}`} style={{
            width:'100%', aspectRatio:'4/3',
            boxShadow:'0 30px 50px -20px rgba(0,0,0,.7)',
          }}>
            <Photo src={PHOTOS[item.photo_key]} index={idx+1} caption={item.date.toUpperCase()} tint="warm"/>
          </div>
        </div>

        {/* Testo */}
        <div style={{gridColumn:2, gridRow:2}} className={`reveal ${inView?'in':''}`}>
          <div className="italiana" style={{fontSize:11, letterSpacing:4, color:'var(--passion)', marginBottom:14, textTransform:'uppercase'}}>
            {item.date}
          </div>
          <h3 className="display" style={{
            fontSize:'clamp(36px, 8vw, 64px)', lineHeight:.9, fontWeight:200, fontStyle:'italic',
            fontVariationSettings:'"SOFT" 100, "opsz" 144', letterSpacing:'-.035em',
            color:'var(--cream)', marginBottom:16,
          }}>
            {item.title}
          </h3>
          <div className="italiana" style={{fontSize:11, letterSpacing:3, opacity:.55, marginBottom:16, textTransform:'uppercase', color:'var(--cream-2)'}}>
            · {item.place}
          </div>
          <p className="cormorant" style={{fontSize:16, lineHeight:1.65, fontWeight:400, fontStyle:'italic', color:'var(--cream-2)'}}>
            {item.desc}
          </p>
        </div>
      </div>
    );
  }

  return (
    <div ref={ref} style={{
      display:'grid', gridTemplateColumns:'1fr 80px 1fr', gap:0,
      minHeight:'80vh', alignItems:'center', position:'relative',
    }}>
      <div style={{gridColumn:2, display:'flex', flexDirection:'column', alignItems:'center', justifySelf:'center', height:'100%', position:'relative'}}>
        <div style={{width:1, flex:1, background:'var(--cream-3)', opacity: isLast ? 0 : .3}}/>
        <div style={{
          width:14, height:14, background:'var(--passion)',
          boxShadow: inView ? '0 0 0 8px rgba(200,16,46,.15)' : 'none',
          transition:'box-shadow .8s', transform:'rotate(45deg)',
        }}/>
        <div className="italiana" style={{fontSize:10, letterSpacing:3, opacity:.5, marginTop:10, color:'var(--cream-2)'}}>
          {item.chapter}
        </div>
        <div style={{width:1, flex:1, background:'var(--cream-3)', opacity:.3}}/>
      </div>

      <div style={{gridColumn: left ? 1 : 3, gridRow:1, padding:'0 5vw', textAlign: left ? 'right' : 'left'}}
        className={`reveal ${inView?'in':''}`}>
        <div className="italiana" style={{fontSize:11, letterSpacing:4, color:'var(--passion)', marginBottom:18, textTransform:'uppercase'}}>
          {item.date}
        </div>
        <h3 className="display" style={{
          fontSize:'clamp(48px, 6.5vw, 110px)', lineHeight:.9, fontWeight:200, fontStyle:'italic',
          fontVariationSettings:'"SOFT" 100, "opsz" 144', letterSpacing:'-.035em',
          color:'var(--cream)', marginBottom:24,
        }}>
          {item.title}
        </h3>
        <div className="italiana" style={{fontSize:11, letterSpacing:3, opacity:.55, marginBottom:22, textTransform:'uppercase', color:'var(--cream-2)'}}>
          · {item.place}
        </div>
        <p className="cormorant" style={{fontSize:'clamp(16px, 1.2vw, 20px)', lineHeight:1.65, fontWeight:400, fontStyle:'italic', color:'var(--cream-2)', maxWidth:450, marginLeft: left ? 'auto' : 0}}>
          {item.desc}
        </p>
      </div>

      <div ref={photoRef} style={{
        gridColumn: left ? 3 : 1, gridRow:1,
        padding:'0 5vw', display:'flex', justifyContent: left ? 'flex-start' : 'flex-end',
      }}>
        <div className={`reveal reveal-slow ${inView?'in':''}`} style={{
          width:'clamp(260px, 30vw, 440px)', aspectRatio: idx%2===0 ? '3/4' : '4/5',
          transform:`translateY(${photoY}px) rotate(${left ? -2 : 2}deg)`,
          boxShadow:'0 60px 90px -30px rgba(0,0,0,.7)', transitionDelay:'.2s',
        }}>
          <Photo src={PHOTOS[item.photo_key]} index={idx+1} caption={item.date.toUpperCase()} tint="warm"/>
        </div>
      </div>
    </div>
  );
}

function Storia(){
  const { t, lang } = useLang();
  const [ref, inView] = useInView({threshold:.05});
  const y = useScrollY();
  const items = window.TRANSLATIONS[lang].storia.items;
  return (
    <section ref={ref} data-screen-label="03 Storia" style={{
      position:'relative', background:'var(--ink)', color:'var(--cream)',
      padding:'20vh 0 16vh', overflow:'hidden',
    }}>
      <div className="script" style={{
        position:'absolute', top:'6vh', left:'-3vw',
        fontSize:'clamp(180px, 30vw, 480px)', lineHeight:.85, fontWeight:400,
        letterSpacing:'-.02em', color:'rgba(200,16,46,.08)',
        pointerEvents:'none', userSelect:'none',
        transform:`translateY(${y*-0.1}px)`,
      }}>
        noi&nbsp;due
      </div>

      <div style={{position:'relative', zIndex:2, maxWidth:1400, margin:'0 auto 10vh', padding:'0 6vw'}}>
        <div className={`reveal ${inView?'in':''}`} style={{display:'flex', alignItems:'baseline', gap:20, marginBottom:40}}>
          <div style={{width:60, height:1, background:'var(--cream)', opacity:.4}}/>
          <span className="italiana" style={{fontSize:11, letterSpacing:5, opacity:.65}}>
            {t('storia.section_label')}
          </span>
        </div>
        <DecodeText
          tag="h2" className="display"
          text={t('storia.title')}
          endPct={60}
          style={{
            fontSize:'clamp(56px, 9vw, 160px)', lineHeight:.88, fontWeight:200, letterSpacing:'-.04em',
            fontStyle:'italic', fontVariationSettings:'"SOFT" 100',
            maxWidth:'14ch',
          }}
        />
      </div>

      <div style={{position:'relative', zIndex:2}}>
        {items.map((item, i) => (
          <StoriaRow key={i} item={item} idx={i} isLast={i===items.length-1}/>
        ))}
      </div>
    </section>
  );
}

window.Storia = Storia;