// Messaggio — red passion bg, oversize script, letter-by-letter reveal

function LetterReveal({ text, delay=0, size=56, tag='h2', style={}, inView }){
  const Tag = tag;
  return React.createElement(Tag, {style},
    text.split('').map((ch, i) => (
      <span key={i} style={{
        display:'inline-block', whiteSpace:ch===' '?'pre':'normal',
        opacity: inView ? 1 : 0,
        transform: inView ? 'translateY(0) rotate(0)' : 'translateY(60px) rotate(3deg)',
        transition: `opacity .8s cubic-bezier(.2,.7,.2,1) ${delay + i*0.03}s, transform .8s cubic-bezier(.2,.7,.2,1) ${delay + i*0.03}s`,
      }}>{ch}</span>
    ))
  );
}

function Messaggio(){
  const { t } = useLang();
  const [ref, inView] = useInView({threshold:.15});
  const y = useScrollY();

  return (
    <section ref={ref} data-screen-label="02 Messaggio" style={{
      position:'relative', background:'var(--blood)', color:'var(--cream)',
      padding:'26vh 6vw 24vh', overflow:'hidden', minHeight:'100vh',
    }}>
      {/* enormous script word crossing from top */}
      <div className="script" style={{
        position:'absolute', top:'-4vh', left:'50%', transform:`translateX(-50%) translateY(${y*-0.25}px)`,
        fontSize:'clamp(160px, 30vw, 520px)', lineHeight:.85,
        color:'rgba(244,237,216,.1)', pointerEvents:'none', userSelect:'none',
        whiteSpace:'nowrap', zIndex:1,
      }}>
        {t('messaggio.background_word')}
      </div>

      {/* subtle grain */}
      <div style={{position:'absolute', inset:0, pointerEvents:'none', opacity:.15, mixBlendMode:'overlay',
        backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.02  0 0 0 0 0.02  0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")`,
      }}/>

      <div style={{position:'relative', zIndex:3, maxWidth:1100, margin:'0 auto'}}>
        <div className={`reveal ${inView?'in':''}`} style={{display:'flex', alignItems:'baseline', gap:20, marginBottom:60}}>
          <div style={{width:60, height:1, background:'var(--cream)', opacity:.5}}/>
          <span className="italiana" style={{fontSize:11, letterSpacing:5, opacity:.8}}>
            {t('messaggio.section_label')}
          </span>
        </div>

        <DecodeText
          tag="p"
          text={t('messaggio.lead')}
          endPct={55}
          style={{
            fontFamily:'Fraunces, serif',
            fontSize:'clamp(34px, 5vw, 82px)', lineHeight:1.1, fontWeight:300, fontStyle:'italic',
            fontVariationSettings:'"SOFT" 80, "opsz" 144', letterSpacing:'-.02em',
            maxWidth:'22ch', marginBottom:70,
          }}
        />

        <div className={`reveal ${inView?'in':''}`} style={{transitionDelay:'1.4s', maxWidth:640, marginLeft:'clamp(0px, 14vw, 220px)'}}>
          {['body1','body2','body3'].map((key, i) => (
            <p key={key} className="cormorant" style={{fontSize:'clamp(18px, 1.45vw, 23px)', lineHeight:1.65, fontWeight:400, marginBottom: i < 2 ? 28 : 0, opacity:.96, fontStyle:'italic'}}>
              {t(`messaggio.${key}`)}
            </p>
          ))}
        </div>

        <div className={`reveal ${inView?'in':''}`} style={{transitionDelay:'1.8s', marginTop:100, display:'flex', alignItems:'center', gap:24}}>
          <div className="script" style={{fontSize:'clamp(54px, 7vw, 110px)', color:'var(--cream)', lineHeight:1}}>
            {t('messaggio.signature')}
          </div>
        </div>
      </div>

      {/* small rings photo floating into next section */}
      <div className="messaggio-ring" style={{
        position:'absolute', right:'6vw', bottom:'-10vh', width:'clamp(160px, 16vw, 260px)', aspectRatio:'3/4',
        transform:`translateY(${y*-0.1}px) rotate(4deg)`,
        boxShadow:'0 50px 70px -20px rgba(0,0,0,.6)', zIndex:10,
      }}>
        <Photo src={PHOTOS.rings} caption="LE FEDI" tint="warm" index={2}/>
      </div>
    </section>
  );
}

window.Messaggio = Messaggio;