/* AlbergueDetail.jsx — entire-building landing page
   Globals: React, Nav, Footer, Icon, useT */

function AlbergueDetailPage() {
  const { t, lang } = useT();

  const photos = [
    { src:'img/fachada.jpeg',        label:'g_kitchen' }, // labels are decorative
    { src:'img/cocina-comedor.jpeg', label:'g_kitchen' },
    { src:'img/salon-02.jpeg',       label:'g_lounge' },
    { src:'img/patio.jpeg',          label:'g_patio' },
    { src:'img/bajo-cubierta.jpeg',  label:'g_attic' },
    { src:'img/cocina-cafetera.jpeg',label:'g_coffee' },
  ];

  const labels = {
    es:{
      back:'Volver al inicio',
      eyebrow:'Edificio completo · 240 m²',
      h1a:'Tuya entera.', h1b:'Sin compartir.',
      lede:'Hasta 10 viajeros en exclusiva. Cocina, salón, patio privado, bajo cubierta y las 5 habitaciones. Sin recepción, sin protocolos, sin asteriscos.',
      from:'Consulta precio según fechas', night:'',
      sub:'El motor de reservas muestra el precio exacto al elegir las fechas.',
      cta:'Reservar albergue completo',
      whatH:'Lo que incluye',
      rules:[
        ['10', 'viajeros'],
        ['5',  'habitaciones'],
        ['4',  'baños'],
        ['240','m² · 3 plantas'],
      ],
      whatList:[
        'Las 5 habitaciones en exclusiva',
        'Cocina equipada de autor para 10 comensales',
        'Salón con sofá modular y biblioteca',
        'Patio privado de 20 m² con acceso independiente',
        'Bajo cubierta de 51 m² para coworking, lectura o TV',
        '4 baños · amenities a granel sin plásticos',
        'Lavadora y secadora',
        'WiFi de fibra en todo el edificio',
        'Suelo radiante en las 3 plantas',
        'Cerraduras inteligentes con códigos personales',
        'Aparcamiento de bicicletas en el patio',
      ],
      bestForH:'Ideal para',
      bestFor:['Grupos de hasta 10 personas', 'Despedidas y reuniones familiares', 'Equipos de trabajo en off-site', 'Bodas y celebraciones en Burgos', 'Camino de Santiago en grupo'],
      seeRoomsH:'¿Solo necesitas una habitación?',
      seeRoomsP:'También se puede reservar cualquiera de las cinco habitaciones por separado.',
      seeRoomsCta:'Ver habitaciones',
      directBenefit:'Reserva directa — sin comisiones',
      promoH:'10% extra con',
      selfBenefit:'Llave digital · Check-in autónomo',
      qualityBenefit:'Ropa de cama de calidad · Amenities a granel',
    },
    en:{
      back:'Back to home',
      eyebrow:'Entire building · 240 m²',
      h1a:'All yours.', h1b:'No sharing.',
      lede:'Up to 10 guests in exclusive use. Kitchen, lounge, private courtyard, loft and all 5 rooms. No reception, no protocols, no asterisks.',
      from:'Price varies by dates', night:'',
      sub:'The booking engine shows the exact price once you pick your dates.',
      cta:'Book entire building',
      whatH:'What\u2019s included',
      rules:[
        ['10', 'guests'],
        ['5',  'rooms'],
        ['4',  'bathrooms'],
        ['240','m² · 3 floors'],
      ],
      whatList:[
        'All 5 rooms in exclusive use',
        'Designer kitchen fully equipped for 10 diners',
        'Lounge with modular sofa and library',
        '20 m² private courtyard with independent access',
        '51 m² loft for coworking, reading or TV',
        '4 bathrooms · refillable amenities',
        'Washer and dryer',
        'Fibre WiFi throughout',
        'Underfloor heating on all 3 floors',
        'Smart locks with personal codes',
        'Bike parking in the courtyard',
      ],
      bestForH:'Best for',
      bestFor:['Groups of up to 10 people', 'Stag/hen parties and family reunions', 'Team off-sites', 'Weddings and celebrations in Burgos', 'Camino de Santiago groups'],
      seeRoomsH:'Need only one room?',
      seeRoomsP:'Any of the five rooms can be booked individually.',
      seeRoomsCta:'See rooms',
      directBenefit:'Direct booking — no fees',
      promoH:'10% extra with',
      selfBenefit:'Smart lock · Self check-in',
      qualityBenefit:'Premium linens · Refillable amenities',
    },
  };
  const L = labels[lang] || labels.es;

  const basePrice = 420;

  return (
    <div data-screen-label="Website · Albergue completo">
      <Nav/>
      <main style={A.main}>
        {/* HERO */}
        <section style={A.hero}>
          <div style={A.heroInner}>
            <a href="index.html#habitaciones" style={A.back}>
              <span style={{transform:'rotate(180deg)', display:'inline-flex'}}><Icon name="arrow" size={14}/></span>
              {L.back}
            </a>
            <div style={A.heroGrid}>
              <div>
                <div style={A.eyebrow}>{L.eyebrow}</div>
                <h1 style={A.h1}>{L.h1a}<br/><span style={{color:'#FBB700'}}>{L.h1b}</span></h1>
                <p style={A.lede}>{L.lede}</p>
                <div style={A.stats}>
                  {L.rules.map((s,i) => (
                    <div key={i} style={A.statItem}>
                      <div style={A.statN}>{s[0]}</div>
                      <div style={A.statL}>{s[1]}</div>
                    </div>
                  ))}
                </div>
              </div>
              <div style={A.heroImg}>
                <img src="img/fachada-opt.jpeg" alt="Fachada de El Santo Hostel — alquiler exclusivo del edificio en Burgos" style={A.heroImgEl} loading="eager" fetchpriority="high" decoding="async"/>
              </div>
            </div>
          </div>
        </section>

        {/* GALLERY STRIP */}
        <section style={A.gallery}>
          <div style={A.gridG}>
            {photos.map((p,i) => (
              <div key={i} style={{...A.gCell, gridColumn: i===0 ? 'span 2' : 'span 1', gridRow: i===0 ? 'span 2' : 'span 1'}}>
                <img src={p.src} alt={t(p.label) || "El Santo Hostel"} style={A.gImg} loading="lazy" decoding="async"/>
              </div>
            ))}
          </div>
        </section>

        {/* DETAIL */}
        <section style={A.detailWrap}>
          <div style={A.detailGrid}>
            <div>
              <div style={A.h2Label}>{L.whatH}</div>
              <ul style={A.whatList}>
                {L.whatList.map((line,i) => (
                  <li key={i} style={A.whatLi}>
                    <span style={A.whatDot}/>
                    <span>{line}</span>
                  </li>
                ))}
              </ul>

              <div style={{...A.h2Label, marginTop:48}}>{L.bestForH}</div>
              <div style={A.tagGrid}>
                {L.bestFor.map((tag,i) => (
                  <div key={i} style={A.tag}>{tag}</div>
                ))}
              </div>
            </div>

            <aside style={A.priceCard}>
              <div style={A.priceTop}>
                <div style={A.priceLabel}>{L.from}</div>
                <div style={A.priceSub}>{L.sub}</div>
              </div>

              <a href="reservar.html?mode=full" style={A.cta}>
                {L.cta}
                <Icon name="arrow" size={16}/>
              </a>

              <div style={A.promo}>
                <span style={A.promoTxt}>{L.promoH}</span>
                <span style={A.promoCode}>SANTO6</span>
              </div>

              <ul style={A.bullets}>
                <li><Icon name="check" size={12}/> {L.directBenefit}</li>
                <li><Icon name="check" size={12}/> {L.selfBenefit}</li>
                <li><Icon name="check" size={12}/> {L.qualityBenefit}</li>
              </ul>

              <div style={A.divider}/>

              <div style={A.roomsMini}>
                <div style={A.roomsMiniH}>{L.seeRoomsH}</div>
                <p style={A.roomsMiniP}>{L.seeRoomsP}</p>
                <div style={A.roomsMiniGrid}>
                  {['01','02','03','04','05'].map(id => (
                    <a key={id} href={`habitacion-${id}.html`} style={A.roomChip}>{id}</a>
                  ))}
                </div>
              </div>
            </aside>
          </div>
        </section>
      </main>
      <Footer/>
    </div>
  );
}

const A = {
  main:{ background:'#FAF8F2', minHeight:'100vh' },
  hero:{ background:'#1A1A1A', color:'#fff', padding:'48px 28px 64px' },
  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:'#F5C801',
         textDecoration:'none', marginBottom:28 },
  heroGrid:{ display:'grid', gridTemplateColumns:'1.1fr 1fr', gap:48, alignItems:'center' },
  eyebrow:{ fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:12, letterSpacing:'.25em',
            textTransform:'uppercase', color:'#F5C801' },
  h1:{ color:'#fff', fontFamily:'Montserrat, sans-serif', fontWeight:900, fontSize:'clamp(44px,5.5vw,84px)',
       lineHeight:.95, letterSpacing:'-0.02em', margin:'14px 0 18px', textTransform:'uppercase' },
  lede:{ fontFamily:'Inter, sans-serif', fontSize:17, lineHeight:1.55, color:'#D9D9D9',
         margin:'0 0 28px', maxWidth:540 },
  stats:{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:16, maxWidth:520 },
  statItem:{ borderTop:'2px solid #F5C801', paddingTop:10 },
  statN:{ fontFamily:'Montserrat, sans-serif', fontWeight:900, fontSize:32, color:'#fff',
          letterSpacing:'-0.02em', lineHeight:1 },
  statL:{ fontFamily:'ui-monospace, monospace', fontSize:11, color:'#9A9A9A', marginTop:4 },
  heroImg:{ borderRadius:18, overflow:'hidden', aspectRatio:'4/5', background:'#333' },
  heroImgEl:{ width:'100%', height:'100%', objectFit:'cover', display:'block' },

  /* gallery */
  gallery:{ padding:'40px 28px 0', maxWidth:1280, margin:'0 auto' },
  gridG:{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gridAutoRows:'160px', gap:10 },
  gCell:{ borderRadius:12, overflow:'hidden', background:'#F4F4F4' },
  gImg:{ width:'100%', height:'100%', objectFit:'cover', display:'block' },

  /* detail */
  detailWrap:{ padding:'56px 28px 80px', maxWidth:1280, margin:'0 auto' },
  detailGrid:{ display:'grid', gridTemplateColumns:'1.5fr 1fr', gap:48, alignItems:'start' },
  h2Label:{ fontFamily:'Montserrat, sans-serif', fontWeight:800, fontSize:13, letterSpacing:'.15em',
            textTransform:'uppercase', color:'#1A1A1A', marginBottom:18 },
  whatList:{ listStyle:'none', padding:0, margin:0, display:'grid', gridTemplateColumns:'1fr 1fr', gap:'12px 24px' },
  whatLi:{ display:'flex', gap:12, alignItems:'flex-start', fontFamily:'Inter, sans-serif',
           fontSize:14.5, color:'#2B2B2B', lineHeight:1.5 },
  whatDot:{ flex:'0 0 auto', width:7, height:7, borderRadius:'50%', background:'#F5C801', marginTop:7 },
  tagGrid:{ display:'flex', flexWrap:'wrap', gap:8 },
  tag:{ background:'#fff', border:'1px solid #ECECEC', borderRadius:999, padding:'8px 14px',
        fontFamily:'Inter, sans-serif', fontSize:13.5, color:'#2B2B2B' },

  /* price */
  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:'#F5C801', color:'#1A1A1A',
        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' },
  roomsMini:{ background:'#FAFAFA', borderRadius:12, padding:'14px 16px' },
  roomsMiniH:{ fontFamily:'Montserrat, sans-serif', fontWeight:800, fontSize:13,
               textTransform:'uppercase', letterSpacing:'.02em', color:'#1A1A1A', marginBottom:6 },
  roomsMiniP:{ fontFamily:'Inter, sans-serif', fontSize:13, color:'#4A4A4A',
               lineHeight:1.5, margin:'0 0 12px' },
  roomsMiniGrid:{ display:'flex', gap:8 },
  roomChip:{ display:'flex', alignItems:'center', justifyContent:'center',
             width:42, height:42, borderRadius:10, background:'#fff',
             border:'1px solid #ECECEC', textDecoration:'none', color:'#1A1A1A',
             fontFamily:'Montserrat, sans-serif', fontWeight:800, fontSize:14 },
};

/* bullets icon inline color via CSS */
const aBulletsStyle = document.createElement('style');
aBulletsStyle.textContent = `
  aside ul li { display:flex; gap:10px; align-items:center; font-family:Inter, sans-serif; font-size:13.5px; color:#2B2B2B; line-height:1.5; }
  aside ul li svg { color:#1A8F4A; flex:0 0 auto }
`;
document.head.appendChild(aBulletsStyle);

window.AlbergueDetailPage = AlbergueDetailPage;
