/* global React, Icon, useT, LangToggle, MiniBookingBar */
const { useState: useStateW } = React;

/* ============== NAV ============== */
function Nav() {
  const { t } = useT();
  const [open, setOpen] = useStateW(false);
  // Detect if we're on a sub-page so anchor links point back to home
  // Treat anything that isn't index.html (or "/") as a sub-page — that way
  // reservar.html, confirmacion.html, galeria.html, espacios.html all route
  // their anchor links to index.html#section instead of a local #section
  // that doesn't exist.
  const path = typeof window !== 'undefined' ? window.location.pathname : '';
  const file = path.split('/').pop() || '';
  const onSub = file !== '' && file !== 'index.html';
  const home = onSub ? 'index.html' : '';
  const links = [
    [t('nav_spaces_full'),'espacios.html'],
    [t('nav_rooms'),'habitaciones.html'],
    [t('nav_gallery'),'galeria.html'],
    [t('nav_services'),'servicios.html'],[t('nav_arrive'),'como-llegar.html'],
    [t('nav_burgos'),'burgos.html'],
    [t('nav_rules'),`${home}#normas`],[t('nav_faq'),`${home}#faq`],
  ];
  return (
    <nav style={N.nav}>
      <a href={onSub ? 'index.html' : '#top'} style={N.brand} aria-label="El Santo Hostel — Inicio">
        <img src="img/logo.png" alt="El Santo Hostel — Albergue boutique en Burgos" style={N.logoImg} loading="eager" decoding="async" width="320" height="320"/>
      </a>
      <div style={N.links} className="nav-links">
        {links.map(([txt,h])=> (
          <a key={h} href={h} style={N.link}
             onMouseEnter={(e)=>{ e.currentTarget.style.borderBottomColor = '#F5C801'; }}
             onMouseLeave={(e)=>{ e.currentTarget.style.borderBottomColor = 'transparent'; }}>
            {txt}
          </a>
        ))}
      </div>
      <div style={{display:'flex', gap:14, alignItems:'center', flex:'0 0 auto'}} className="nav-actions">
        <LangToggle/>
        <a href="reservar.html" style={N.cta}>{t('nav_book')} <Icon name="arrow" size={14}/></a>
      </div>
      <button style={N.burger} className="nav-burger" onClick={()=>setOpen(!open)} aria-label="Menu">
        <span style={N.burgerLine}/><span style={N.burgerLine}/><span style={N.burgerLine}/>
      </button>
      {open && (
        <div style={N.drawer}>
          {links.map(([txt,h])=> <a key={h} href={h} style={N.drawerLink} onClick={()=>setOpen(false)}>{txt}</a>)}
          <LangToggle style={{alignSelf:'flex-start'}}/>
          <a href="reservar.html" style={{...N.cta, marginTop:8}} onClick={()=>setOpen(false)}>{t('nav_book')}</a>
        </div>
      )}
    </nav>
  );
}
const N = {
  nav: { position:'sticky', top:0, zIndex:50, background:'rgba(255,255,255,.92)',
         backdropFilter:'blur(10px)', borderBottom:'1px solid #ECECEC',
         display:'flex', alignItems:'center', justifyContent:'space-between',
         padding:'8px 28px', fontFamily:'Inter, sans-serif' },
  brand: { display:'flex', alignItems:'center', textDecoration:'none', color:'#1A1A1A', flex:'0 0 auto' },
  logoImg: { height:96, width:'auto', display:'block' },
  links:{ display:'flex', flexWrap:'nowrap', gap:18, minWidth:0 },
  link: { textDecoration:'none', color:'#1A1A1A', whiteSpace:'nowrap', flex:'0 0 auto',
          fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:12,
          letterSpacing:'.09em', textTransform:'uppercase',
          padding:'8px 0', borderBottom:'2px solid transparent',
          transition:'border-color .15s, color .15s' },
  cta:  { background:'#1A1A1A', color:'#F5C801', padding:'11px 18px', borderRadius:999,
          fontFamily:'Montserrat, sans-serif', fontWeight:800, fontSize:12, whiteSpace:'nowrap',
          letterSpacing:'.1em', textTransform:'uppercase',
          textDecoration:'none', display:'inline-flex', alignItems:'center', gap:6 },
  burger:{ display:'none', flexDirection:'column', gap:5, background:'none', border:'none', cursor:'pointer',
           padding:8, width:40, height:40, justifyContent:'center', alignItems:'center' },
  burgerLine:{ display:'block', width:22, height:2, background:'#1A1A1A', borderRadius:1 },
  drawer:{ position:'absolute', top:'100%', left:0, right:0, background:'#fff',
           padding:20, display:'flex', flexDirection:'column', gap:14, borderBottom:'1px solid #ECECEC',
           boxShadow:'0 8px 24px rgba(0,0,0,.08)' },
  drawerLink: { textDecoration:'none', color:'#1A1A1A',
                fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:14,
                letterSpacing:'.14em', textTransform:'uppercase' },
};

/* ============== HERO ============== */
function Hero() {
  const { t } = useT();
  return (
    <section id="top" style={H.wrap}>
      <div data-hero-inner="1" style={H.inner}>
        <div style={H.text}>
          <div style={H.eyebrow}>{t('hero_eyebrow')}</div>
          <h1 style={H.headline}>{t('hero_h1_a')}<br/>{t('hero_h1_b')}<br/>{t('hero_h1_c')}</h1>
          <p style={H.lede}>{t('hero_lede')}</p>
          <div style={H.row}>
            <a href="reservar.html" style={H.cta}>{t('hero_cta')} <Icon name="arrow" size={16}/></a>
            <a href="#espacio" style={H.ghost}>{t('hero_ghost')}</a>
          </div>
          <div style={H.stats}>
            <div style={H.stat}><b>10</b><span>{t('stat_guests')}</span></div>
            <div style={H.statSep}/>
            <div style={H.stat}><b>5</b><span>{t('stat_rooms')}</span></div>
            <div style={H.statSep}/>
            <div style={H.stat}><b>4</b><span>{t('stat_baths')}</span></div>
            <div style={H.statSep}/>
            <div style={H.stat}><b>240m²</b><span>{t('stat_size')}</span></div>
          </div>
        </div>
        <div style={H.facade}>
          <img src="img/portada-opt.jpeg" alt="Salón principal de El Santo Hostel — albergue boutique en Burgos" style={H.img} loading="eager" fetchpriority="high" decoding="async" width="1280" height="1600"/>
          <div style={H.caption}>{t('hero_facade_cap')}</div>
        </div>
      </div>
    </section>
  );
}
const H = {
  wrap: { background:'#F5C801', color:'#1A1A1A', position:'relative', overflow:'hidden',
          padding:'40px 28px 50px' },
  inner:{ maxWidth:1280, margin:'0 auto', display:'grid', gridTemplateColumns:'1fr 1.05fr',
          gap:48, alignItems:'center' },
  text:{ position:'relative', zIndex:2 },
  facade:{ position:'relative', borderRadius:22, overflow:'hidden', aspectRatio:'4/5',
           minHeight:460, boxShadow:'0 30px 60px rgba(0,0,0,.18)' },
  img:{ width:'100%', height:'100%', objectFit:'cover', display:'block' },
  caption:{ position:'absolute', bottom:14, left:14, background:'#1A1A1A', color:'#F5C801',
            padding:'6px 11px', fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:11,
            letterSpacing:'.1em', textTransform:'uppercase', borderRadius:4 },
  eyebrow:{ fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:12, letterSpacing:'.25em', textTransform:'uppercase' },
  headline:{ fontFamily:'Montserrat, sans-serif', fontWeight:900, fontSize:'clamp(32px,7.5vw,68px)', lineHeight:.95,
             letterSpacing:'-0.02em', margin:'14px 0 18px', textTransform:'uppercase',
             overflowWrap:'normal', wordBreak:'normal', hyphens:'none' },
  lede: { fontFamily:'Inter, sans-serif', fontSize:'clamp(14px,3.6vw,18px)', maxWidth:620, lineHeight:1.55, margin:'0 0 28px' },
  row: { display:'flex', gap:14, flexWrap:'wrap', marginBottom:40 },
  cta: { background:'#1A1A1A', color:'#F5C801', padding:'16px 26px', borderRadius:999,
         fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:15,
         textDecoration:'none', display:'inline-flex', alignItems:'center', gap:8 },
  ghost:{ background:'transparent', color:'#1A1A1A', padding:'16px 26px', borderRadius:999,
          fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:15, border:'2px solid #1A1A1A',
          textDecoration:'none' },
  stats:{ display:'flex', alignItems:'center', flexWrap:'wrap', gap:'12px 20px' },
  stat: { display:'flex', flexDirection:'column', lineHeight:1 },
  statSep:{ width:1, height:36, background:'rgba(26,26,26,.25)' },
};

window.Nav = Nav;
window.Hero = Hero;

// Inject hero responsive rules once
if (typeof document !== 'undefined' && !document.getElementById('hero-styles')) {
  const st = document.createElement('style');
  st.id = 'hero-styles';
  st.textContent = `
    .nav-links, .nav-actions { min-width: 0 }
    @media (max-width: 1200px) {
      .nav-links { display: none !important }
      .nav-actions { display: none !important }
      .nav-burger { display: flex !important }
    }
    @media (max-width: 780px) {
      [data-hero-inner="1"] { grid-template-columns: 1fr !important; gap: 24px !important }
      [data-hero-inner="1"] > div:last-child { aspect-ratio: 4/3 !important; min-height: 0 !important; max-height: 60vh }
    }
    @media (max-width: 480px) {
      [data-hero-inner="1"] h1 { font-size: clamp(28px, 9vw, 40px) !important; line-height: .98 !important }
      [data-hero-inner="1"] > div:last-child { aspect-ratio: 4/3 !important; min-height: 0 !important }
    }
  `;
  document.head.appendChild(st);
}