/* global React, Icon, useT */

function Normas() {
  const { t } = useT();
  const rules = [
    { i:'moon', t:t('rule_1_t'), d:t('rule_1_d') },
    { i:'walk', t:t('rule_2_t'), d:t('rule_2_d') },
    { i:'leaf', t:t('rule_3_t'), d:t('rule_3_d') },
    { i:'wash', t:t('rule_4_t'), d:t('rule_4_d') },
    { i:'moon', t:t('rule_5_t'), d:t('rule_5_d') },
    { i:'no',   t:t('rule_6_t'), d:t('rule_6_d') },
    { i:'no',   t:t('rule_7_t'), d:t('rule_7_d') },
    { i:'shield', t:t('rule_8_t'), d:t('rule_8_d') },
  ];
  return (
    <section id="normas" style={NR.wrap}>
      <div style={{maxWidth:1280, margin:'0 auto', padding:'0 28px'}}>
        <div style={NR.head}>
          <div style={{fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:12, letterSpacing:'.25em', textTransform:'uppercase', color:'#1A1A1A'}}>{t('nr_eyebrow')}</div>
          <h2 style={NR.h2}>{t('nr_h2_a')}<br/>{t('nr_h2_b')}</h2>
        </div>
        <div style={NR.grid}>
          {rules.map(r => (
            <div key={r.t} style={NR.cell}>
              <div style={NR.iconBox}><Icon name={r.i} size={20}/></div>
              <div>
                <div style={NR.t}>{r.t}</div>
                <div style={NR.d}>{r.d}</div>
              </div>
            </div>
          ))}
        </div>
        <div className="nr-exit" style={NR.exit}>
          <div style={{...NR.t, color:'#1A1A1A'}}>{t('exit_t')}</div>
          <div style={NR.exitList}>{t('exit_d')}</div>
        </div>
      </div>
    </section>
  );
}
const NR = {
  wrap:{ padding:'100px 0', background:'#F5C801', color:'#1A1A1A' },
  head:{ marginBottom:48, maxWidth:780 },
  h2:{ fontFamily:'Montserrat, sans-serif', fontWeight:900, fontSize:'clamp(36px,4.2vw,58px)', lineHeight:1, letterSpacing:'-0.02em', margin:'16px 0 0', textTransform:'uppercase' },
  grid:{ display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(280px,1fr))', gap:14, marginBottom:32 },
  cell:{ display:'flex', gap:14, background:'rgba(255,255,255,.65)', backdropFilter:'blur(6px)',
         borderRadius:16, padding:'18px 20px' },
  iconBox:{ flex:'0 0 auto', width:40, height:40, background:'#1A1A1A', color:'#F5C801',
            display:'flex', alignItems:'center', justifyContent:'center', borderRadius:10 },
  t:{ fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:14, color:'#1A1A1A', textTransform:'uppercase', letterSpacing:'.05em', marginBottom:4 },
  d:{ fontFamily:'Inter, sans-serif', fontSize:13.5, color:'#2B2B2B', lineHeight:1.5 },
  exit:{ background:'#1A1A1A', color:'#F5C801', borderRadius:22, padding:'28px 32px',
         display:'grid', gridTemplateColumns:'180px 1fr', gap:28, alignItems:'baseline' },
  exitList:{ fontFamily:'Inter, sans-serif', fontSize:15, color:'#fff', lineHeight:1.6 },
};
if (typeof document !== 'undefined' && !document.getElementById('nr-styles')) {
  const _s = document.createElement('style');
  _s.id = 'nr-styles';
  _s.textContent = '@media (max-width:780px){.nr-exit{grid-template-columns:1fr !important;gap:10px !important;padding:24px 22px !important;align-items:start !important}}';
  document.head.appendChild(_s);
}

function FAQ() {
  const { t } = useT();
  const { useState } = React;
  const items = [
    { q:t('faq_1_q'), a:t('faq_1_a') },
    { q:t('faq_2_q'), a:t('faq_2_a') },
    { q:t('faq_3_q'), a:t('faq_3_a') },
    { q:t('faq_4_q'), a:t('faq_4_a') },
    { q:t('faq_5_q'), a:t('faq_5_a') },
    { q:t('faq_6_q'), a:t('faq_6_a') },
    { q:t('faq_7_q'), a:t('faq_7_a') },
    { q:t('faq_8_q'), a:t('faq_8_a') },
    { q:t('faq_9_q'), a:t('faq_9_a') },
    { q:t('faq_10_q'), a:t('faq_10_a') },
    { q:t('faq_11_q'), a:t('faq_11_a') },
    { q:t('faq_12_q'), a:t('faq_12_a') },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" style={FQ.wrap}>
      <div style={{maxWidth:900, margin:'0 auto', padding:'0 28px'}}>
        <div style={{textAlign:'center', marginBottom:48}}>
          <div style={{fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:12, letterSpacing:'.25em', textTransform:'uppercase', color:'#6B6B6B'}}>{t('faq_eyebrow')}</div>
          <h2 style={FQ.h2}>{t('faq_h')}</h2>
        </div>
        <div>
          {items.map((it,i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={FQ.row}>
                <button style={FQ.btn} onClick={()=>setOpen(isOpen?-1:i)} aria-expanded={isOpen}>
                  <span style={FQ.q}>{it.q}</span>
                  <span style={{...FQ.plus, transform: isOpen ? 'rotate(45deg)' : 'none'}}>+</span>
                </button>
                <div style={{...FQ.aWrap, gridTemplateRows: isOpen ? '1fr' : '0fr'}}>
                  <div style={FQ.aInner}>
                    <div style={FQ.a}>{it.a}</div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}
const FQ = {
  wrap:{ padding:'70px 0', background:'#fff' },
  h2:{ fontFamily:'Montserrat, sans-serif', fontWeight:900, fontSize:'clamp(36px,4.2vw,54px)', lineHeight:1, letterSpacing:'-0.02em', margin:'14px 0 0', textTransform:'uppercase', color:'#1A1A1A' },
  row:{ borderBottom:'1px solid #ECECEC' },
  btn:{ width:'100%', padding:'14px 0', background:'none', border:'none', display:'flex',
        justifyContent:'space-between', alignItems:'center', cursor:'pointer', textAlign:'left' },
  q:{ fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:17, color:'#1A1A1A' },
  plus:{ fontFamily:'Montserrat, sans-serif', fontWeight:900, fontSize:24, color:'#FBB700', transition:'transform .2s' },
  a:{ fontFamily:'Inter, sans-serif', fontSize:15, color:'#2B2B2B', lineHeight:1.55, paddingBottom:16, maxWidth:720 },
  aWrap:{ display:'grid', transition:'grid-template-rows .25s ease' },
  aInner:{ overflow:'hidden' },
};

function Reservar() {
  const { t } = useT();
  return (
    <section id="reservar" style={BK.wrap}>
      <div style={{maxWidth:1100, margin:'0 auto', padding:'0 28px', textAlign:'center'}}>
        <div style={{fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:12, letterSpacing:'.25em', textTransform:'uppercase', color:'rgba(245,200,1,.7)'}}>{t('rs_eyebrow')}</div>
        <h2 style={BK.h2}>{t('rs_h_a')}<br/>{t('rs_h_b')}</h2>
        <p style={BK.p}>{t('rs_p')}</p>
        <div style={BK.row}>
          <a href="reservar.html" style={BK.cta}>{t('rs_email')} <Icon name="arrow" size={16}/></a>
        </div>
      </div>
    </section>
  );
}
const BK = {
  wrap:{ padding:'120px 0', background:'#1A1A1A', color:'#fff' },
  h2:{ fontFamily:'Montserrat, sans-serif', fontWeight:900, fontSize:'clamp(44px,5.5vw,82px)', lineHeight:.95, letterSpacing:'-0.02em', margin:'18px 0 22px', textTransform:'uppercase', color:'#F5C801' },
  p:{ fontFamily:'Inter, sans-serif', fontSize:18, color:'#D9D9D9', lineHeight:1.55, margin:'0 auto 40px', maxWidth:520 },
  row:{ display:'flex', gap:14, justifyContent:'center', flexWrap:'wrap' },
  cta:{ background:'#F5C801', color:'#1A1A1A', padding:'16px 28px', borderRadius:999,
        fontFamily:'Montserrat, sans-serif', fontWeight:800, fontSize:15,
        textDecoration:'none', display:'inline-flex', gap:8, alignItems:'center' },
  ghost:{ background:'transparent', color:'#fff', padding:'16px 28px', borderRadius:999,
          fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:15, border:'2px solid rgba(255,255,255,.3)',
          textDecoration:'none' },
};

function Footer() {
  const { t } = useT();
  return (
    <footer data-site-footer="1" style={FT.wrap}>
      <div style={FT.inner}>
        <div data-ft-grid="1" style={FT.top}>
          <div style={FT.brandCol}>
            <div style={FT.brand}>
              <img src="img/logo.png" alt="El Santo Hostel" style={FT.logoImg} loading="lazy" decoding="async"/>
            </div>
            <div style={FT.tagline}>
              <span style={FT.taglineLine}>Calle Juan de Austria, 6</span>
              <span style={FT.taglineLine}>09001 Burgos · España</span>
            </div>
            <div style={FT.socialRow}>
              <a href="https://www.instagram.com/el_santo_hostel" target="_blank" rel="noreferrer" aria-label="Instagram" style={FT.socialBtn}>
                <Icon name="instagram" size={16}/>
              </a>
              <a href="https://www.pinterest.com/elsantohostel" target="_blank" rel="noreferrer" aria-label="Pinterest" style={FT.socialBtn}>
                <Icon name="pinterest" size={16}/>
              </a>
              <a href="https://wa.me/34609087826" target="_blank" rel="noreferrer" aria-label="WhatsApp" style={{...FT.socialBtn, background:'#1A1A1A', color:'#F5C801'}}>
                <Icon name="whatsapp" size={16}/>
              </a>
            </div>
          </div>
          <div style={FT.col}>
            <div style={FT.h}>{t('ft_contact')}</div>
            <a href="mailto:elsantohostel@gmail.com" style={FT.linkRow}>
              <span style={FT.iconWrap}><Icon name="mail" size={16}/></span>
              <span>elsantohostel@gmail.com</span>
            </a>
            <a href="tel:+34609087826" style={FT.linkRow}>
              <span style={FT.iconWrap}><Icon name="phone" size={16}/></span>
              <span>+34 609 087 826</span>
            </a>
            <a href="https://wa.me/34609087826" target="_blank" rel="noreferrer" style={FT.linkRow}>
              <span style={FT.iconWrap}><Icon name="whatsapp" size={16}/></span>
              <span>WhatsApp 24/7</span>
            </a>
          </div>
          <div style={FT.col}>
            <div style={FT.h}>
              <span style={FT.hIcon}><Icon name="pin" size={14}/></span>
              {t('ft_addr_t')}
            </div>
            <div style={{...FT.txt, whiteSpace:'pre-line'}}>{t('ft_addr')}</div>
            <a href="https://maps.google.com/?q=C/+Juan+de+Austria+6+Burgos" target="_blank" rel="noreferrer" style={FT.mapLink}>
              {t('ft_open_map') || 'Ver en mapa'} <Icon name="arrow" size={12}/>
            </a>
          </div>
          <div style={FT.col}>
            <div style={FT.h}>
              <span style={FT.hIcon}><Icon name="shield" size={14}/></span>
              {t('ft_reg')}
            </div>
            <div style={{...FT.txt, whiteSpace:'pre-line'}}>{t('ft_reg_v')}</div>
          </div>
        </div>
        <div style={FT.feder}>
          <div style={FT.federBody}>
            <a href="cartel-feder.pdf" target="_blank" rel="noreferrer" data-feder-box="1" aria-label="Logotipos oficiales: Unión Europea, Junta de Castilla y León e ICE" style={FT.federLogosLink}>
              <img src="img/feder-logos.png" alt="Cofinanciado por la Unión Europea · Fondos Europeos · ICEcyl · Junta de Castilla y León" style={FT.federLogos} loading="lazy" decoding="async"/>
            </a>
            <a href="cartel-feder.pdf" target="_blank" rel="noreferrer" data-feder-link="1" style={FT.federText}>
              Proyecto financiado por el Fondo Europeo de Desarrollo Regional (FEDER) de la Unión Europea y la Junta de Castilla y León, a través del Instituto para la Competitividad Empresarial de Castilla y León (ICE), con el objetivo de conseguir una Europa más competitiva e inteligente.
            </a>
          </div>
        </div>
        <div style={FT.bottom}>
          <span>© {new Date().getFullYear()} El Santo Hostel · Burgos · España</span>
          <nav style={FT.legalNav} aria-label="Legal">
            <a href="aviso-legal.html" style={FT.legalLink}>{t('ft_legal') || 'Aviso Legal'}</a>
            <span style={FT.legalSep}>·</span>
            <a href="politica-privacidad.html" style={FT.legalLink}>{t('ft_privacy') || 'Política de Privacidad'}</a>
            <span style={FT.legalSep}>·</span>
            <a href="politica-cookies.html" style={FT.legalLink}>{t('ft_cookies') || 'Política de Cookies'}</a>
            <span style={FT.legalSep}>·</span>
            <a href="terminos-condiciones.html" style={FT.legalLink}>{t('ft_terms') || 'Términos y Condiciones'}</a>
          </nav>
        </div>
      </div>
    </footer>
  );
}
const FT = {
  wrap:{ position:'relative', background:'#F5C801', color:'#1A1A1A', padding:'48px 0 22px', overflow:'hidden' },
  inner:{ position:'relative', maxWidth:1280, margin:'0 auto', padding:'0 28px' },
  top:{ display:'grid', gridTemplateColumns:'2fr 1.2fr 1fr 1fr', gap:40, alignItems:'start',
        paddingBottom:28 },
  brandCol:{ maxWidth:380 },
  brand:{ display:'inline-flex', alignItems:'center', marginBottom:14 },
  logoImg:{ height:64, width:'auto', display:'block', filter:'brightness(0) invert(1)' },
  tagline:{ display:'flex', flexDirection:'column', gap:2, marginBottom:18 },
  taglineLine:{ fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:13, color:'#1A1A1A', letterSpacing:'-0.005em' },
  socialRow:{ display:'flex', gap:8 },
  socialBtn:{ width:36, height:36, borderRadius:999, display:'inline-flex', alignItems:'center',
              justifyContent:'center', color:'#1A1A1A', textDecoration:'none',
              background:'rgba(255,255,255,.55)', transition:'all .2s' },
  col:{ display:'flex', flexDirection:'column', gap:2 },
  h:{ fontFamily:'Montserrat, sans-serif', fontWeight:900, fontSize:11, letterSpacing:'.22em',
      textTransform:'uppercase', color:'#1A1A1A', marginBottom:14, display:'inline-flex',
      alignItems:'center', gap:8 },
  hIcon:{ display:'inline-flex', color:'#1A1A1A' },
  linkRow:{ display:'inline-flex', alignItems:'center', gap:10, fontFamily:'Inter, sans-serif',
            fontSize:13, fontWeight:600, color:'#1A1A1A', textDecoration:'none', marginBottom:8, lineHeight:1.3 },
  iconWrap:{ width:26, height:26, borderRadius:7, display:'inline-flex', alignItems:'center',
             justifyContent:'center', background:'#1A1A1A', color:'#F5C801',
             flexShrink:0 },
  txt:{ fontFamily:'Inter, sans-serif', fontSize:13, fontWeight:600, color:'#1A1A1A', lineHeight:1.6 },
  mapLink:{ marginTop:10, display:'inline-flex', alignItems:'center', gap:6,
            fontFamily:'Montserrat, sans-serif', fontWeight:800, fontSize:10,
            letterSpacing:'.14em', textTransform:'uppercase', color:'#1A1A1A',
            textDecoration:'none', borderBottom:'2px solid #1A1A1A',
            paddingBottom:2, alignSelf:'flex-start' },
  bottom:{ marginTop:40, display:'flex', justifyContent:'space-between', alignItems:'center', gap:16,
           fontFamily:'ui-monospace, monospace', fontSize:10.5, color:'rgba(26,26,26,.7)', flexWrap:'wrap' },
  legalNav:{ display:'flex', gap:10, alignItems:'center', flexWrap:'wrap',
             fontFamily:'Inter, sans-serif', fontSize:11.5, fontWeight:600 },
  legalLink:{ color:'#1A1A1A', textDecoration:'none' },
  legalSep:{ color:'rgba(26,26,26,.3)' },
  feder:{ marginTop:20, display:'flex', flexDirection:'column', alignItems:'center',
          textAlign:'center', gap:14 },
  federBody:{ display:'flex', flexDirection:'column', alignItems:'center', gap:14, width:'100%', maxWidth:1060, margin:'0 auto' },
  federLogosLink:{ display:'inline-flex', alignItems:'center', justifyContent:'center', width:'fit-content', maxWidth:'100%',
                   background:'#fff', borderRadius:8, padding:'12px 22px', boxSizing:'border-box',
                   boxShadow:'0 1px 0 rgba(0,0,0,.06)', lineHeight:0 },
  federLogos:{ display:'block', width:500, maxWidth:'100%', height:'auto' },
  federText:{ fontFamily:'Inter, sans-serif', fontSize:12.5, fontWeight:600, lineHeight:1.5,
              color:'#1A1A1A', width:'100%', textAlign:'center', cursor:'pointer' },
  federLinks:{ display:'flex', alignItems:'center', justifyContent:'center', gap:10, flexWrap:'wrap' },
  federLink:{ display:'inline-flex', alignItems:'center', gap:5, fontFamily:'Montserrat, sans-serif',
              fontWeight:800, fontSize:10, letterSpacing:'.12em', textTransform:'uppercase',
              color:'#1A1A1A', textDecoration:'none', borderBottom:'2px solid #1A1A1A', paddingBottom:2 },
};

window.Normas = Normas;
window.FAQ = FAQ;
window.Reservar = Reservar;
window.Footer = Footer;

// Inject responsive rules for footer once (used on every page)
if (typeof document !== 'undefined' && !document.getElementById('ft-styles')) {
  const st = document.createElement('style');
  st.id = 'ft-styles';
  st.textContent = `
    [data-feder-link="1"]{ text-decoration: underline; text-decoration-color: rgba(26,26,26,.35); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-color .2s }
    [data-feder-link="1"]:hover{ text-decoration-color: #1A1A1A }
    @media (max-width: 560px) {
      [data-feder-box="1"]{ padding: 12px 14px !important; border-radius: 6px !important }
    }
    @media (max-width: 780px) {
      [data-ft-grid="1"] { grid-template-columns: 1fr 1fr !important; gap: 28px !important }
      [data-ft-grid="1"] > :first-child { grid-column: 1 / -1 }
      [data-site-footer="1"] [style*="justifyContent: space-between"] { flex-direction: column; align-items: flex-start !important; gap: 14px !important }
    }
    @media (max-width: 440px) {
      [data-ft-grid="1"] { grid-template-columns: 1fr !important }
    }
  `;
  document.head.appendChild(st);
}