function Location(){
  const { t, lang } = useLang();
  const [ref, inView] = useInView({threshold:.1});
  const y = useScrollY();
  const [mapRef, mapY] = useParallax(.3);
  const locationInfo = window.TRANSLATIONS[lang].location.location_info;

  return (
    <section ref={ref} data-screen-label="07 Location" style={{
      position:'relative', background:'var(--ink)', color:'var(--cream)',
      padding:'20vh 6vw 16vh', overflow:'hidden',
    }}>
      <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('location.section_label')}
          </span>
        </div>
        <DecodeText
          tag="h2" className="display"
          text={t('location.title')}
          endPct={60}
          style={{
            fontSize:'clamp(56px, 9vw, 160px)', lineHeight:.88, fontWeight:200, letterSpacing:'-.04em',
            fontStyle:'italic', fontVariationSettings:'"SOFT" 100',
            marginBottom:80,
          }}
        />

        <div className="location-grid" style={{display:'grid', gridTemplateColumns:'1.3fr 1fr', gap:60, marginBottom:80}}>
          <div ref={mapRef} className={`reveal ${inView?'in':''}`} style={{position:'relative', aspectRatio:'4/3', background:'var(--ink-2)', overflow:'hidden', transitionDelay:'.2s'}}>
            <svg viewBox="0 0 600 450" style={{width:'100%', height:'100%', display:'block'}}>
              <rect width="600" height="450" fill="#0a0605"/>
              {/* river */}
              <path d="M 0 250 Q 150 220, 280 240 T 600 180" stroke="#8b0a1a" strokeWidth="3" fill="none" opacity=".4"/>
              <path d="M 0 250 Q 150 220, 280 240 T 600 180" stroke="#c8102e" strokeWidth="1" fill="none" opacity=".6" strokeDasharray="4 8"/>
              {/* roads grid */}
              {Array.from({length:10}).map((_,i) => (
                <line key={'h'+i} x1="0" y1={50+i*40} x2="600" y2={50+i*40} stroke="#f4edd8" strokeWidth=".3" opacity=".15"/>
              ))}
              {Array.from({length:14}).map((_,i) => (
                <line key={'v'+i} x1={i*45} y1="0" x2={i*45} y2="450" stroke="#f4edd8" strokeWidth=".3" opacity=".15"/>
              ))}
              {/* Church */}
              <circle cx="220" cy="240" r="14" fill="none" stroke="#c8102e" strokeWidth="1" opacity=".6"/>
              <circle cx="220" cy="240" r="7" fill="#c8102e"/>
              <text x="240" y="230" fill="#f4edd8" fontSize="10" fontFamily="Italiana" letterSpacing="2">{t('location.ceremony_label')}</text>
              <text x="240" y="244" fill="#f4edd8" fontSize="13" fontFamily="Fraunces" fontStyle="italic" opacity=".7">S. Maria in Trastevere</text>
              {/* Villa */}
              <circle cx="480" cy="150" r="14" fill="none" stroke="#c8102e" strokeWidth="1" opacity=".6"/>
              <circle cx="480" cy="150" r="7" fill="#c8102e"/>
              <text x="380" y="130" fill="#f4edd8" fontSize="10" fontFamily="Italiana" letterSpacing="2">{t('location.reception_label')}</text>
              <text x="355" y="144" fill="#f4edd8" fontSize="13" fontFamily="Fraunces" fontStyle="italic" opacity=".7">Villa dei Cipressi</text>
              {/* dashed route */}
              <path d="M 220 240 Q 350 200, 480 150" stroke="#c8102e" strokeWidth="1.5" strokeDasharray="3 6" fill="none" opacity=".7"/>
              <text x="340" y="200" fill="#c8102e" fontSize="10" fontFamily="Italiana" letterSpacing="2" fontStyle="italic" opacity=".8">~ 45 min</text>
              {/* compass */}
              <g transform="translate(540, 40)" fill="#f4edd8" opacity=".5">
                <circle r="18" fill="none" stroke="#f4edd8" strokeWidth=".5"/>
                <path d="M 0 -14 L 3 0 L 0 14 L -3 0 Z" fill="#c8102e"/>
                <text x="0" y="-22" fontSize="9" fontFamily="Italiana" textAnchor="middle" letterSpacing="2">N</text>
              </g>
            </svg>
            <div className="italiana" style={{position:'absolute', bottom:16, left:20, fontSize:10, letterSpacing:3, opacity:.5}}>
              · LAT 41.888 · LON 12.468 ·
            </div>
          </div>

          <div className={`reveal ${inView?'in':''}`} style={{transitionDelay:'.3s', display:'flex', flexDirection:'column', gap:44}}>
            <div>
              <div className="italiana" style={{fontSize:10, letterSpacing:3, color:'var(--passion)', marginBottom:10, textTransform:'uppercase'}}>
                {CONFIG.ceremony.time} · {t('location.ceremony_label')}
              </div>
              <div className="display" style={{fontSize:34, lineHeight:1.05, fontStyle:'italic', fontWeight:300, marginBottom:12, fontVariationSettings:'"SOFT" 80'}}>
                {CONFIG.ceremony.venue.split('\n').map((line, i, arr) => (
                  <React.Fragment key={i}>{line}{i < arr.length - 1 && <br/>}</React.Fragment>
                ))}
              </div>
              <div className="cormorant" style={{fontSize:16, opacity:.75, lineHeight:1.6, fontStyle:'italic'}}>
                {CONFIG.ceremony.address}<br/>
                {t('location.ceremony_note')}
              </div>
            </div>
            <div style={{height:1, background:'rgba(244,237,216,.15)'}}/>
            <div>
              <div className="italiana" style={{fontSize:10, letterSpacing:3, color:'var(--passion)', marginBottom:10, textTransform:'uppercase'}}>
                {CONFIG.reception.time} · {t('location.reception_label')}
              </div>
              <div className="display" style={{fontSize:34, lineHeight:1.05, fontStyle:'italic', fontWeight:300, marginBottom:12, fontVariationSettings:'"SOFT" 80'}}>
                {CONFIG.reception.venue}
              </div>
              <div className="cormorant" style={{fontSize:16, opacity:.75, lineHeight:1.6, fontStyle:'italic'}}>
                {CONFIG.reception.address}<br/>
                {t('location.reception_note')}
              </div>
            </div>
          </div>
        </div>

        {/* Info pratiche */}
        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(220px, 1fr))', gap:1, background:'rgba(244,237,216,.1)', border:'1px solid rgba(244,237,216,.1)'}}>
          {locationInfo.map((info, i) => (
            <div key={i} className={`reveal ${inView?'in':''}`} style={{padding:'38px 28px', background:'var(--ink)', transitionDelay:`${.4 + i*.08}s`}}>
              <div className="italiana" style={{fontSize:10, letterSpacing:3, opacity:.55, textTransform:'uppercase', marginBottom:14}}>
                · {info.label}
              </div>
              <div className="display" style={{fontSize:22, fontStyle:'italic', fontWeight:300, marginBottom:10, lineHeight:1.15}}>
                {info.val}
              </div>
              <div className="cormorant" style={{fontSize:14, opacity:.65, lineHeight:1.55, fontStyle:'italic'}}>
                {info.note}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Countdown(){
  const { t } = useLang();
  const [ref, inView] = useInView({threshold:.2});
  const target = new Date(CONFIG.event.date_iso).getTime();
  const cd = useCountdown(target);
  const y = useScrollY();

  return (
    <section ref={ref} data-screen-label="08 Countdown" style={{
      position:'relative', background:'var(--blood)', color:'var(--cream)',
      padding:'16vh 6vw', overflow:'hidden',
    }}>
      <div className="script" style={{
        position:'absolute', top:'50%', left:'50%', transform:`translate(-50%, -50%) translateY(${y*-0.15}px)`,
        fontSize:'clamp(220px, 38vw, 620px)', color:'rgba(244,237,216,.06)',
        pointerEvents:'none', whiteSpace:'nowrap',
      }}>
        {t('countdown.background_word')}
      </div>

      <div style={{position:'relative', zIndex:2, maxWidth:1200, margin:'0 auto', textAlign:'center'}}>
        <div className={`reveal ${inView?'in':''}`} style={{marginBottom:40}}>
          <span className="italiana" style={{fontSize:11, letterSpacing:5, opacity:.8}}>
            {t('countdown.intro')}
          </span>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:'clamp(20px, 4vw, 60px)', alignItems:'baseline'}}>
          {[
            {v:cd.days,    l:t('countdown.days')},
            {v:cd.hours,   l:t('countdown.hours')},
            {v:cd.minutes, l:t('countdown.minutes')},
            {v:cd.seconds, l:t('countdown.seconds')},
          ].map((c, i) => (
            <div key={i} className={`reveal ${inView?'in':''}`} style={{transitionDelay:`${i*.08}s`}}>
              <div className="display countdown-digit" style={{
                fontSize:'clamp(60px, 11vw, 180px)', lineHeight:.9, fontWeight:200, fontStyle:'italic',
                fontVariationSettings:'"SOFT" 100', letterSpacing:'-.04em', fontFeatureSettings:'"tnum"',
              }}>
                {String(c.v).padStart(2,'0')}
              </div>
              <div className="italiana" style={{fontSize:11, letterSpacing:4, opacity:.7, marginTop:10, textTransform:'uppercase'}}>
                {c.l}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Location = Location;
window.Countdown = Countdown;