/* RoomDetail.jsx — single room landing page
   Reads window.ROOM_ID ('01'..'05') set by the host HTML and renders
   a focused room sheet with photo, description, equipment and a
   "Reservar Habitación NN" CTA that deep-links to reservar.html?room=NN.

   Globals: React, Nav, Footer, Icon, useT, LangProvider */

function RoomDetailPage() {
  const { t, lang } = useT();
  const id = window.ROOM_ID || '01';
  const idx = parseInt(id, 10);

  const ROOMS = [
    { id:'01', img:'img/hab-01.jpeg', tint:'#FFE4E0', floor:'pb', bath:'bath_private', baseLJ:90,  baseVS:110, hk:'r01_h', subk:'r01_sub', dk:'r01_d', sizek:'r01_size', feat:['r01_f1','r01_f2','r01_f3','r01_f4','r01_f5'] },
    { id:'02', img:'img/hab-02.jpeg', tint:'#F2EBDB', floor:'p1', bath:'bath_private',     baseLJ:115, baseVS:140, hk:'r02_h', subk:'r02_sub', dk:'r02_d', sizek:'r02_size', feat:['r02_f1','r02_f2','r02_f3','r02_f4'] },
    { id:'03', img:'img/hab-03.jpeg', tint:'#E5EAE0', floor:'p1', bath:'bath_shared_05',   baseLJ:95,  baseVS:115, hk:'r03_h', subk:'r03_sub', dk:'r03_d', sizek:'r03_size', feat:['r03_f3','r03_f4','r03_f5'] },
    { id:'04', img:'img/hab-04.jpeg', tint:'#FFF3B8', floor:'p1', bath:'bath_private',     baseLJ:105, baseVS:130, hk:'r04_h', subk:'r04_sub', dk:'r04_d', sizek:'r04_size', feat:['r04_f1','r04_f2','r04_f3','r04_f4','r04_f5'] },
    { id:'05', img:'img/hab-05.jpeg', tint:'#F4F1EC', floor:'p1', bath:'bath_shared_03',   baseLJ:85,  baseVS:105, hk:'r05_h', subk:'r05_sub', dk:'r05_d', sizek:'r05_size', feat:['r05_f1','r05_f2','r05_f3','r05_f4','r05_f5'] },
  ];
  const room = ROOMS.find(r => r.id === id) || ROOMS[0];
  const prev = ROOMS[(idx - 2 + ROOMS.length) % ROOMS.length];
  const next = ROOMS[idx % ROOMS.length];

  const floorTxt = t(room.floor === 'pb' ? 'floor_pb' : 'floor_p1');
  const bathTxt  = t(room.bath);
  const sizeTxt  = t(room.sizek);

  const labelFrom = { es:'Consulta precio según fechas',  en:'Price varies by dates',  fr:'Prix selon les dates' }[lang] || 'Consulta precio según fechas';
  const labelNight = { es:'/noche', en:'/night', fr:'/nuit' }[lang] || '/noche';
  const labelCta = { es:`Reservar Habitación ${id}`, en:`Book Room ${id}`, fr:`Réserver Chambre ${id}` }[lang];
  const labelBack = { es:'Volver al inicio', en:'Back to home', fr:'Retour à l\u2019accueil' }[lang];
  const labelBuilding = { es:'¿Necesitas más espacio?', en:'Need more space?', fr:'Besoin de plus d\u2019espace ?' }[lang];
  const labelBuildingP = { es:'Reserva el edificio completo para hasta 10 viajeros — cocina, salón, patio y las 5 habitaciones.', en:'Book the entire building for up to 10 guests — kitchen, lounge, courtyard and all 5 rooms.', fr:'Réservez le bâtiment entier pour 10 voyageurs — cuisine, salon, patio et 5 chambres.' }[lang];
  const labelBuildingCta = { es:'Ver albergue completo', en:'See entire building', fr:'Voir l\u2019auberge entière' }[lang];
  const labelOtherRooms = { es:'Otras habitaciones', en:'Other rooms', fr:'Autres chambres' }[lang];
  const labelEquip = { es:'Equipamiento y características', en:'Equipment & features', fr:'Équipement et caractéristiques' }[lang];
  const labelSpecs = { es:'Ficha rápida', en:'Quick specs', fr:'Fiche rapide' }[lang];
  const labelDesc = { es:'La habitación', en:'About the room', fr:'À propos de la chambre' }[lang];
  const labelSelf = { es:'Llave digital · Check-in autónomo', en:'Smart lock · Self check-in', fr:'Serrure digitale · Auto check-in' }[lang];
  const labelDir = { es:'Reserva directa — sin comisiones', en:'Direct booking — no fees', fr:'Réservation directe — sans frais' }[lang];
  const labelPromoH = { es:'10% extra con', en:'10% extra with', fr:'10% en plus avec' }[lang];

  return (
    <div data-screen-label={`Website · Habitación ${id}`}>
      <Nav/>
      <main style={D.main}>
        {/* HERO with big photo */}
        <section style={D.hero}>
          <div style={D.heroInner}>
            <a href="index.html#habitaciones" style={D.back}>
              <span style={{transform:'rotate(180deg)', display:'inline-flex'}}><Icon name="arrow" size={14}/></span>
              {labelBack}
            </a>
            <div style={D.heroGrid}>
              <div style={D.imgWrap}>
                <img src={room.img} alt={t(room.hk)} style={D.img} loading="eager" fetchpriority="high" decoding="async"/>
                <div style={{...D.numTag, background:room.tint}}>{room.id}</div>
              </div>
              <div style={D.heroBody}>
                <div style={D.eyebrow}>{t('rooms_eyebrow')} · {id}/05</div>
                <h1 style={D.h1}>{t(room.hk)}</h1>
                <div style={D.subTag}>{t(room.subk)}</div>
                <p style={D.lede}>{t(room.dk)}</p>

                <dl style={D.specs}>
                  <Spec k={t('sf_lbl_floor')}    v={floorTxt}/>
                  <Spec k={t('sf_lbl_size')}     v={sizeTxt}/>
                  <Spec k={t('sf_lbl_capacity')} v={t('sf_capacity_n').replace('{n}','2')}/>
                  <Spec k={t('sf_lbl_bath')}     v={bathTxt}/>
                </dl>
              </div>
            </div>
          </div>
        </section>

        {/* DETAIL + PRICE COLUMN */}
        <section style={D.detailWrap}>
          <div style={D.detailGrid}>
            <div>
              <div style={D.featLabel}>{labelEquip}</div>
              <ul style={D.feat}>
                {room.feat.map(f => (
                  <li key={f} style={D.featLi}>
                    <span style={D.featDot}/>
                    <span>{t(f)}</span>
                  </li>
                ))}
              </ul>

              <div style={{...D.featLabel, marginTop:36}}>{labelDesc}</div>
              <p style={D.longP}>{t(room.dk)}</p>
            </div>

            {/* Sticky price card */}
            <aside style={D.priceCard}>
              <div style={D.priceTop}>
                <div style={D.priceLabel}>{labelFrom}</div>
                <div style={D.priceSub}>{
                  ({ es:'El motor de reservas muestra el precio exacto al elegir las fechas.',
                     en:'The booking engine shows the exact price once you pick your dates.',
                     fr:'Le moteur de réservation affiche le prix exact une fois les dates choisies.' })[lang]
                }</div>
              </div>

              <a href={`reservar.html?room=${id}`} style={D.cta}>
                {labelCta}
                <Icon name="arrow" size={16}/>
              </a>

              <div style={D.promo}>
                <span style={D.promoTxt}>{labelPromoH}</span>
                <span style={D.promoCode}>SANTO6</span>
              </div>

              <ul style={D.bullets}>
                <li><Icon name="check" size={12}/> {labelDir}</li>
                <li><Icon name="check" size={12}/> {labelSelf}</li>
                <li><Icon name="check" size={12}/> {t('feat_quality_linen')} · {t('feat_bulk')}</li>
              </ul>

              <div style={D.divider}/>

              <div style={D.buildingMini}>
                <div style={D.buildingMiniH}>{labelBuilding}</div>
                <p style={D.buildingMiniP}>{labelBuildingP}</p>
                <a href="albergue-completo.html" style={D.buildingMiniCta}>
                  {labelBuildingCta} →
                </a>
              </div>
            </aside>
          </div>
        </section>

        {/* OTHER ROOMS NAV */}
        <section style={D.others}>
          <div style={D.othersLabel}>{labelOtherRooms}</div>
          <div style={D.othersGrid}>
            <a href={`habitacion-${prev.id}.html`} style={D.otherCard}>
              <div style={D.otherDir}>← {lang === 'en' ? 'Previous' : 'Anterior'}</div>
              <div style={D.otherN}>{prev.id}</div>
              <div style={D.otherH}>{t(prev.hk)}</div>
            </a>
            <a href={`habitacion-${next.id}.html`} style={{...D.otherCard, textAlign:'right'}}>
              <div style={D.otherDir}>{lang === 'en' ? 'Next' : 'Siguiente'} →</div>
              <div style={D.otherN}>{next.id}</div>
              <div style={D.otherH}>{t(next.hk)}</div>
            </a>
          </div>
        </section>
      </main>
      <Footer/>
    </div>
  );
}

function Spec({ k, v }) {
  return (
    <div style={D.specItem}>
      <dt style={D.specK}>{k}</dt>
      <dd style={D.specV}>{v}</dd>
    </div>
  );
}

const D = {
  main:{ background:'#FAF8F2', minHeight:'100vh' },

  /* hero */
  hero:{ background:'#FAF8F2', padding:'40px 28px 56px' },
  heroInner:{ maxWidth:1280, margin:'0 auto' },
  back:{ display:'inline-flex', alignItems:'center', gap:8, fontFamily:'Montserrat, sans-serif', fontWeight:700,
         fontSize:12, letterSpacing:'.15em', textTransform:'uppercase', color:'#1A1A1A',
         textDecoration:'none', marginBottom:24, opacity:.7 },
  heroGrid:{ display:'grid', gridTemplateColumns:'1.05fr 1fr', gap:48, alignItems:'center' },
  imgWrap:{ position:'relative', aspectRatio:'4/5', borderRadius:24, overflow:'hidden', background:'#F4F4F4' },
  img:{ position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover' },
  numTag:{ position:'absolute', top:18, left:18, fontFamily:'Montserrat, sans-serif', fontWeight:900,
           fontSize:30, padding:'4px 14px', color:'#1A1A1A', borderRadius:6, letterSpacing:'-0.02em' },
  heroBody:{},
  eyebrow:{ fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:12, letterSpacing:'.25em',
            textTransform:'uppercase', color:'#9A9A9A' },
  h1:{ fontFamily:'Montserrat, sans-serif', fontWeight:900, fontSize:'clamp(36px,4.5vw,64px)',
       lineHeight:.98, letterSpacing:'-0.02em', margin:'14px 0 10px', textTransform:'uppercase', color:'#1A1A1A' },
  subTag:{ fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:13, letterSpacing:'.1em',
           textTransform:'uppercase', color:'#FBB700', marginBottom:18 },
  lede:{ fontFamily:'Inter, sans-serif', fontSize:17, lineHeight:1.55, color:'#2B2B2B', margin:'0 0 26px',
         maxWidth:560 },
  specs:{ display:'grid', gridTemplateColumns:'repeat(2,1fr)', gap:'14px 24px',
          margin:0, padding:'18px 20px', background:'#fff', borderRadius:14, border:'1px solid #ECECEC' },
  specItem:{ margin:0 },
  specK:{ fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:10, letterSpacing:'.15em',
          textTransform:'uppercase', color:'#9A9A9A', marginBottom:3 },
  specV:{ margin:0, fontFamily:'Inter, sans-serif', fontSize:14, color:'#1A1A1A', fontWeight:500, lineHeight:1.4 },

  /* detail */
  detailWrap:{ padding:'56px 28px 80px', maxWidth:1280, margin:'0 auto' },
  detailGrid:{ display:'grid', gridTemplateColumns:'1.5fr 1fr', gap:48, alignItems:'start' },
  featLabel:{ fontFamily:'Montserrat, sans-serif', fontWeight:800, fontSize:12, letterSpacing:'.15em',
              textTransform:'uppercase', color:'#1A1A1A', marginBottom:16 },
  feat:{ listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:10 },
  featLi:{ display:'flex', gap:12, alignItems:'flex-start', fontFamily:'Inter, sans-serif',
           fontSize:15, color:'#2B2B2B', lineHeight:1.5 },
  featDot:{ flex:'0 0 auto', width:7, height:7, borderRadius:'50%', background:'#F5C801', marginTop:7 },
  longP:{ fontFamily:'Inter, sans-serif', fontSize:16, lineHeight:1.65, color:'#2B2B2B', margin:0, maxWidth:640 },

  /* price card */
  priceCard:{ position:'sticky', top:24, background:'#fff', border:'1px solid #ECECEC',
              borderRadius:18, padding:'24px 22px 22px',
              boxShadow:'0 8px 28px rgba(0,0,0,.04)' },
  priceTop:{ paddingBottom:18, marginBottom:18, borderBottom:'1px solid #ECECEC' },
  priceLabel:{ fontFamily:'Montserrat, sans-serif', fontWeight:800, fontSize:13, letterSpacing:'.04em',
               textTransform:'uppercase', color:'#1A1A1A', marginBottom:8 },
  priceRow:{ display:'flex', alignItems:'baseline', gap:6 },
  priceN:{ fontFamily:'Montserrat, sans-serif', fontWeight:900, fontSize:42, lineHeight:1, color:'#1A1A1A',
           letterSpacing:'-0.02em' },
  priceUnit:{ fontFamily:'ui-monospace, monospace', fontSize:13, color:'#6B6B6B' },
  priceSub:{ fontFamily:'Inter, sans-serif', fontSize:13.5, color:'#6B6B6B', lineHeight:1.45 },
  cta:{ display:'flex', alignItems:'center', justifyContent:'center', gap:10,
        width:'100%', background:'#1A1A1A', color:'#F5C801',
        padding:'15px 18px', borderRadius:999,
        fontFamily:'Montserrat, sans-serif', fontWeight:800, fontSize:14,
        letterSpacing:'.04em', textTransform:'uppercase', textDecoration:'none',
        marginBottom:18 },
  bullets:{ listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:8 },
  promo:{ display:'flex', alignItems:'center', justifyContent:'center', gap:8,
          margin:'0 0 16px', padding:'8px 12px',
          background:'#FFFBEA', border:'1px dashed #1A1A1A', borderRadius:8 },
  promoTxt:{ fontFamily:'Inter, sans-serif', fontSize:12.5, color:'#1A1A1A' },
  promoCode:{ fontFamily:'ui-monospace, monospace', fontWeight:800, fontSize:13,
              letterSpacing:'.12em', color:'#1A1A1A',
              background:'#F5C801', padding:'2px 8px', borderRadius:4 },
  divider:{ height:1, background:'#ECECEC', margin:'20px 0' },
  buildingMini:{ background:'#FFFBEA', borderRadius:12, padding:'14px 16px' },
  buildingMiniH:{ fontFamily:'Montserrat, sans-serif', fontWeight:800, fontSize:13,
                  textTransform:'uppercase', letterSpacing:'.02em', color:'#1A1A1A', marginBottom:6 },
  buildingMiniP:{ fontFamily:'Inter, sans-serif', fontSize:13, color:'#4A4A4A',
                  lineHeight:1.5, margin:'0 0 10px' },
  buildingMiniCta:{ fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:12,
                    color:'#1A1A1A', textDecoration:'none',
                    letterSpacing:'.05em', textTransform:'uppercase',
                    borderBottom:'2px solid #F5C801', paddingBottom:2 },

  /* other rooms */
  others:{ maxWidth:1280, margin:'0 auto', padding:'0 28px 80px' },
  othersLabel:{ fontFamily:'Montserrat, sans-serif', fontWeight:800, fontSize:12, letterSpacing:'.15em',
                textTransform:'uppercase', color:'#1A1A1A', marginBottom:16 },
  othersGrid:{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:16 },
  otherCard:{ display:'block', background:'#fff', border:'1px solid #ECECEC', borderRadius:14,
              padding:'22px 24px', textDecoration:'none', color:'#1A1A1A' },
  otherDir:{ fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:10,
             letterSpacing:'.2em', textTransform:'uppercase', color:'#9A9A9A', marginBottom:8 },
  otherN:{ fontFamily:'Montserrat, sans-serif', fontWeight:900, fontSize:48, lineHeight:1,
           color:'#1A1A1A', letterSpacing:'-0.02em', marginBottom:6 },
  otherH:{ fontFamily:'Montserrat, sans-serif', fontWeight:800, fontSize:14, textTransform:'uppercase',
           color:'#1A1A1A' },
};

window.RoomDetailPage = RoomDetailPage;