/* global React, Icon, useT */

function Espacio() {
  const { t } = useT();
  const { useState, useEffect } = React;
  const photos = [
    { src:'img/cocina-comedor.jpeg', k:'g_kitchen', area:'a' },
    { src:'img/patio.jpeg',          k:'g_patio',   area:'b' },
    { src:'img/cocina-escalera.jpeg',k:'g_stairs',  area:'c' },
    { src:'img/bajo-cubierta.jpeg',  k:'g_attic',   area:'d' },
    { src:'img/zc-05.jpeg',          k:'g_lounge',  area:'e' },
    { src:'img/zc-03.jpeg',          k:'g_coffee',  area:'f', pos:'center 30%' },
    { src:'img/zc-01.jpeg',          k:'g_dining',  area:'g' },
    { src:'img/zc-02.jpeg',          k:'g_stairs2', area:'h' },
    { src:'img/zc-12.jpeg',          k:'g_sitting', area:'i' },
    { src:'img/zc-08.jpeg',          k:'g_tv',      area:'j' },
  ];
  const [open, setOpen] = useState(-1);
  useEffect(() => {
    if (open < 0) return;
    const onKey = (e) => {
      if (e.key === 'Escape') setOpen(-1);
      else if (e.key === 'ArrowRight') setOpen(o => (o + 1) % photos.length);
      else if (e.key === 'ArrowLeft') setOpen(o => (o - 1 + photos.length) % photos.length);
    };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { window.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [open, photos.length]);

  const plantas = [
    { n:'01', t:t('floor_1_t'), s:t('floor_1_s'), m:t('floor_1_m'), d:t('floor_1_d'), tint:'#FFF3B8' },
    { n:'02', t:t('floor_2_t'), s:t('floor_2_s'), m:t('floor_2_m'), d:t('floor_2_d'), tint:'#FFFBEA' },
    { n:'03', t:t('floor_3_t'), s:t('floor_3_s'), m:t('floor_3_m'), d:t('floor_3_d'), tint:'#F4F4F4' },
  ];
  return (
    <section id="espacio" style={S.wrap}>
      <div style={S.mosaic}>
        {photos.map((p,i) => (
          <button key={p.k} type="button"
                  onClick={() => setOpen(i)}
                  style={{...S.mCell, gridArea:p.area, padding:0, border:'none', cursor:'zoom-in'}}>
            <img src={p.src} alt={t(p.k)} loading="lazy" decoding="async"
                 style={{...S.gImgEl, ...(p.pos ? {objectPosition:p.pos} : null)}}/>
            <div style={S.gLbl}>{t(p.k)}</div>
          </button>
        ))}
      </div>
      {open >= 0 && (
        <div style={S.lbBack} onClick={(e) => { if (e.target === e.currentTarget) setOpen(-1); }}>
          <button onClick={() => setOpen(-1)} aria-label="Cerrar" style={S.lbX}>
            <Icon name="x" size={22}/>
          </button>
          <button onClick={() => setOpen(o => (o - 1 + photos.length) % photos.length)} aria-label="Anterior" style={{...S.lbNav, left:14}}>
            <Icon name="arrow" size={22}/>
          </button>
          <button onClick={() => setOpen(o => (o + 1) % photos.length)} aria-label="Siguiente" style={{...S.lbNav, right:14, transform:'translateY(-50%)'}}>
            <Icon name="arrow" size={22}/>
          </button>
          <figure style={S.lbFig}>
            <img src={photos[open].src} alt={t(photos[open].k)} style={S.lbImg} decoding="async"/>
            <figcaption style={S.lbCap}>{t(photos[open].k)} · {open+1}/{photos.length}</figcaption>
          </figure>
        </div>
      )}
      <div style={S.head}>
        <div style={S.eyebrow}>{t('sp_eyebrow')}</div>
        <h2 style={S.h2}>{t('sp_h2_a')}<br/>{t('sp_h2_b')}</h2>
        <p style={S.intro}>{t('sp_intro')}</p>
        <a href="galeria.html" style={S.galLink}>
          {t('nav_gallery')} <Icon name="arrow" size={14}/>
        </a>
      </div>
      <div style={S.grid}>
        {plantas.map(p => (
          <article key={p.n} style={{...S.card, background:p.tint}}>
            <div style={S.num}>{p.n}</div>
            <div>
              <div style={S.meta}>{p.m}</div>
              <h3 style={S.h3}>{p.t}</h3>
              <div style={S.sub}>{p.s}</div>
              <p style={S.desc}>{p.d}</p>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}
const S = {
  wrap:{ padding:'40px 28px 60px', background:'#fff', maxWidth:1280, margin:'0 auto' },
  head:{ maxWidth:780, marginBottom:64 },
  eyebrow:{ fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:12, letterSpacing:'.25em', textTransform:'uppercase', color:'#6B6B6B' },
  h2:{ fontFamily:'Montserrat, sans-serif', fontWeight:900, fontSize:'clamp(36px,4.2vw,64px)', lineHeight:1, letterSpacing:'-0.02em', margin:'18px 0 24px', textTransform:'uppercase', color:'#1A1A1A' },
  intro:{ fontFamily:'Inter, sans-serif', fontSize:18, lineHeight:1.55, color:'#2B2B2B', maxWidth:640 },
  galLink:{ display:'inline-flex', alignItems:'center', gap:8, marginTop:20,
            fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:13, letterSpacing:'.1em',
            textTransform:'uppercase', color:'#1A1A1A', textDecoration:'none',
            borderBottom:'2px solid #F5C801', paddingBottom:4 },
  grid:{ display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(300px,1fr))', gap:16 },
  card:{ borderRadius:22, padding:'28px 28px 32px', display:'flex', flexDirection:'column', justifyContent:'flex-start', gap:18 },
  num:{ fontFamily:'Montserrat, sans-serif', fontWeight:900, fontSize:88, lineHeight:.85, color:'#1A1A1A', opacity:.85 },
  meta:{ fontFamily:'ui-monospace, monospace', fontSize:12, color:'#6B6B6B', marginBottom:8 },
  h3:{ fontFamily:'Montserrat, sans-serif', fontWeight:800, fontSize:26, margin:0, textTransform:'uppercase', letterSpacing:'-0.01em', color:'#1A1A1A' },
  sub:{ fontFamily:'Inter, sans-serif', fontSize:15, color:'#6B6B6B', margin:'2px 0 14px' },
  desc:{ fontFamily:'Inter, sans-serif', fontSize:14, lineHeight:1.6, color:'#2B2B2B', margin:0 },
  mosaic:{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gridTemplateRows:'220px 220px 220px',
           gridTemplateAreas:'"a a b c" "d e e f" "g h i j"', gap:12, marginBottom:80 },
  mCell:{ position:'relative', borderRadius:16, overflow:'hidden', background:'#F4F4F4' },
  gImgEl:{ width:'100%', height:'100%', objectFit:'cover', display:'block' },
  gLbl:{ position:'absolute', bottom:12, left:12, background:'#1A1A1A', color:'#F5C801',
         padding:'5px 10px', fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:10,
         letterSpacing:'.1em', textTransform:'uppercase', borderRadius:4 },
  lbBack:{ position:'fixed', inset:0, background:'rgba(10,10,10,.92)', zIndex:9999,
           display:'flex', alignItems:'center', justifyContent:'center', padding:24 },
  lbX:{ position:'absolute', top:18, right:18, width:44, height:44, borderRadius:999,
        background:'rgba(255,255,255,.12)', border:'none', color:'#fff', cursor:'pointer',
        display:'flex', alignItems:'center', justifyContent:'center' },
  lbNav:{ position:'absolute', top:'50%', transform:'translateY(-50%) rotate(180deg)',
          width:48, height:48, borderRadius:999, background:'rgba(255,255,255,.12)',
          border:'none', color:'#fff', cursor:'pointer', display:'flex',
          alignItems:'center', justifyContent:'center', zIndex:2 },
  lbFig:{ margin:0, maxWidth:'min(1200px, 92vw)', maxHeight:'88vh',
          display:'flex', flexDirection:'column', gap:14, alignItems:'center' },
  lbImg:{ maxWidth:'100%', maxHeight:'82vh', objectFit:'contain', borderRadius:8,
          boxShadow:'0 30px 80px rgba(0,0,0,.5)' },
  lbCap:{ fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:12,
          letterSpacing:'.18em', textTransform:'uppercase', color:'#F5C801' },
};

function Habitaciones() {
  const { t, lang } = useT();
  const roomLabel = (n) => lang === 'en' ? `Room ${n}` : lang === 'fr' ? `Chambre ${n}` : `Habitación ${n}`;
  const rooms = [
    { n:'01', suffix:t('r01_home_suffix'), tag:t('r01_home_tag'), short:t('r01_short'), plant:t('floor_pb'), bano:t('bath_private'), img:'img/hab-01.jpeg' },
    { n:'02', suffix:t('r02_home_suffix'), tag:t('r02_home_tag'), short:t('r02_short'), plant:t('floor_p1'), bano:t('bath_private'), img:'img/hab-02.jpeg' },
    { n:'03', suffix:t('r03_home_suffix'), tag:t('r03_home_tag'), short:t('r03_short'), plant:t('floor_p1'), bano:t('bath_shared_05'), img:'img/hab-03.jpeg' },
    { n:'04', suffix:t('r04_home_suffix'), tag:t('r04_home_tag'), short:t('r04_short'), plant:t('floor_p1'), bano:t('bath_private'), img:'img/hab-04.jpeg' },
    { n:'05', suffix:t('r05_home_suffix'), tag:t('r05_home_tag'), short:t('r05_short'), plant:t('floor_p1'), bano:t('bath_shared_03'), img:'img/hab-05.jpeg' },
  ];
  return (
    <section id="habitaciones" style={R.wrap}>
      <div style={{maxWidth:1280, margin:'0 auto', padding:'0 28px'}}>
        <div style={R.head}>
          <div>
            <div style={S.eyebrow}>{t('rooms_eyebrow')}</div>
            <h2 style={R.h2}>{t('rooms_h2_a')}<br/>{t('rooms_h2_b')}</h2>
          </div>
          <p style={R.note}>{t('rooms_note_a')} <b>{t('rooms_note_b')}</b>{t('rooms_note_c')}</p>
        </div>
        <div style={R.fit}>
          <span style={R.fitLbl}>{t('rooms_fit_lbl')}</span>
          <span style={R.fitDot}>·</span>
          <span>{t('rooms_fit_1')}</span>
          <span style={R.fitDot}>·</span>
          <span>{t('rooms_fit_2')}</span>
          <span style={R.fitDot}>·</span>
          <span>{t('rooms_fit_3')}</span>
          <span style={R.fitDot}>·</span>
          <span>{t('rooms_fit_4')}</span>
          <span style={R.fitDot}>·</span>
          <span>{t('rooms_fit_5')}</span>
        </div>
        <div style={R.grid}>
          {rooms.map(r => (
            <a key={r.n} href={`habitacion-${r.n}.html`} style={{...R.card, textDecoration:'none', color:'inherit'}}>
              <div style={R.imgHolder}>
                <img src={r.img} alt={`Habitación ${r.n} de El Santo Hostel — Burgos`} loading="lazy" decoding="async" style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}}/>
                <div style={{position:'absolute',inset:0,background:'linear-gradient(180deg,rgba(0,0,0,.25) 0%,transparent 40%)'}}/>
                <div style={R.num}>{r.n}</div>
              </div>
              <div style={R.body}>
                <div style={R.chip}>{r.tag}</div>
                <h3 style={R.h3}>{roomLabel(r.n)} · {r.suffix}</h3>
                <div style={R.meta}>
                  <span><Icon name="pin" size={14}/> {r.plant}</span>
                  <span><Icon name="bath" size={14}/> {r.bano}</span>
                </div>
                <p style={R.short}>{r.short}</p>
              </div>
            </a>
          ))}
          <a href="albergue-completo.html" style={{...R.card, background:'#F5C801', border:'none', textDecoration:'none', color:'inherit'}}>
            <div style={{...R.imgHolder, background:'transparent', aspectRatio:'4/5', overflow:'hidden'}}>
              <img src="img/edificio-02-opt.jpeg" alt="El Santo Hostel — Albergue completo en alquiler exclusivo en Burgos" loading="lazy" decoding="async" style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}}/>
              <div style={{...R.num, color:'#fff', textShadow:'0 1px 3px rgba(0,0,0,.35)'}}>+</div>
            </div>
            <div style={R.body}>
              <h3 style={{...R.h3, color:'#1A1A1A'}}>{t('full_h')}</h3>
              <p style={{fontFamily:'Inter, sans-serif', fontSize:14, color:'#1A1A1A', lineHeight:1.55, margin:'8px 0 18px'}}>
                {t('full_p')}
              </p>
              <span style={{background:'#1A1A1A', color:'#F5C801', padding:'11px 18px', borderRadius:999,
                  fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:13,
                  display:'inline-flex', gap:6, alignItems:'center'}}>
                {t('full_cta')} <Icon name="arrow" size={14}/>
              </span>
            </div>
          </a>
        </div>
      </div>
    </section>
  );
}
const R = {
  wrap:{ padding:'60px 0 100px', background:'#FAFAFA' },
  head:{ display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:40, alignItems:'end', marginBottom:48 },
  h2:{ fontFamily:'Montserrat, sans-serif', fontWeight:900, fontSize:'clamp(36px,4.2vw,58px)', lineHeight:1, letterSpacing:'-0.02em', margin:'18px 0 0', textTransform:'uppercase', color:'#1A1A1A' },
  note:{ fontFamily:'Inter, sans-serif', fontSize:16, color:'#2B2B2B', lineHeight:1.6, margin:0 },
  grid:{ display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(260px,1fr))', gap:16 },
  card:{ background:'#fff', borderRadius:18, overflow:'hidden', display:'flex', flexDirection:'column', border:'1px solid #ECECEC' },
  imgHolder:{ position:'relative', aspectRatio:'4/5', background:'linear-gradient(135deg,#D4C294,#A08860)', display:'flex', alignItems:'flex-end', padding:16 },
  num:{ position:'absolute', top:14, left:16, fontFamily:'Montserrat, sans-serif', fontWeight:900, fontSize:32, color:'#fff', lineHeight:1 },
  body:{ padding:'18px 18px 20px' },
  chip:{ display:'inline-block', fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:10, letterSpacing:'.1em', textTransform:'uppercase', background:'#FFFBEA', color:'#8B6F00', padding:'4px 9px', borderRadius:999 },
  h3:{ fontFamily:'Montserrat, sans-serif', fontWeight:800, fontSize:20, margin:'10px 0 8px', color:'#1A1A1A', textTransform:'uppercase', letterSpacing:'-0.01em' },
  meta:{ display:'flex', flexDirection:'column', gap:4, fontFamily:'Inter, sans-serif', fontSize:12, color:'#6B6B6B', marginBottom:12 },
  feat:{ listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:6,
         fontFamily:'Inter, sans-serif', fontSize:13, color:'#2B2B2B' },
  short:{ fontFamily:'Inter, sans-serif', fontSize:14, lineHeight:1.55, color:'#2B2B2B',
          margin:0 },
  fit:{ display:'flex', flexWrap:'wrap', alignItems:'center', gap:'4px 10px',
        margin:'-12px 0 28px', padding:'10px 0 0',
        fontFamily:'ui-monospace, monospace', fontSize:12, color:'#6B6B6B',
        borderTop:'1px dashed #ECECEC' },
  fitLbl:{ fontFamily:'Montserrat, sans-serif', fontWeight:800, fontSize:11,
           letterSpacing:'.18em', textTransform:'uppercase', color:'#1A1A1A' },
  fitDot:{ opacity:.4 },
};

window.Espacio = Espacio;
window.Habitaciones = Habitaciones;