/* global React, Icon, useT, Nav, Burgos, Footer */

function BurgosHeader() {
  const { t } = useT();
  return (
    <section style={BH.wrap}>
      <div style={BH.inner}>
        <a href="index.html" style={BH.back}>
          <span style={{transform:'rotate(180deg)', display:'inline-flex'}}><Icon name="arrow" size={14}/></span>
          {t('bgp_back')}
        </a>
        <div style={BH.eyebrow}>{t('bgp_eyebrow')}</div>
        <h1 style={BH.h1}>{t('bgp_h1_a')}<br/>{t('bgp_h1_b')}</h1>
        <p style={BH.lede}>{t('bgp_lede')}</p>
      </div>
    </section>
  );
}
const BH = {
  wrap:{ background:'#F5C801', color:'#1A1A1A', padding:'72px 28px 80px' },
  inner:{ 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:32 },
  eyebrow:{ fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:12, letterSpacing:'.25em', textTransform:'uppercase' },
  h1:{ fontFamily:'Montserrat, sans-serif', fontWeight:900, fontSize:'clamp(40px,5vw,76px)', lineHeight:.95,
       letterSpacing:'-0.02em', margin:'18px 0 22px', textTransform:'uppercase' },
  lede:{ fontFamily:'Inter, sans-serif', fontSize:'clamp(15px,1.2vw,18px)', maxWidth:680, lineHeight:1.55, margin:0 },
};

/* ============== OFFICIAL TOURISM + AGENDA ============== */
function BurgosOfficial() {
  const { t } = useT();
  const links = [
    { k:'ayto', tag:'bg_off_ayto_tag', tk:'bg_off_ayto_t', dk:'bg_off_ayto_d',
      url:'https://turismo.aytoburgos.es/' },
    { k:'dip', tag:'bg_off_dip_tag', tk:'bg_off_dip_t', dk:'bg_off_dip_d',
      url:'https://turismoburgos.org/' },
    { k:'jcyl', tag:'bg_off_jcyl_tag', tk:'bg_off_jcyl_t', dk:'bg_off_jcyl_d',
      url:'https://www.turismocastillayleon.com/' },
  ];
  const agendaChips = [
    { lk:'bg_off_agenda_today', url:'https://www.agendaburgos.com/' },
    { lk:'bg_off_agenda_finde', url:'https://www.agendaburgos.com/agenda/finde' },
    { lk:'bg_off_agenda_week',  url:'https://www.agendaburgos.com/agenda/semana' },
  ];
  return (
    <section style={BO.wrap}>
      <div style={BO.inner}>
        <header style={BO.head}>
          <div style={BO.eyebrow}>{t('bg_off_eyebrow')}</div>
          <h2 style={BO.h2}>{t('bg_off_h2_a')}<br/>{t('bg_off_h2_b')}</h2>
          <p style={BO.intro}>{t('bg_off_intro')}</p>
        </header>
        <div style={BO.grid}>
          <div style={{...BO.card, ...BO.cardFeature}}>
            <span style={{...BO.tag, ...BO.tagFeature}}>{t('bg_off_agenda_tag')}</span>
            <h3 style={{...BO.cardT, ...BO.cardTFeature}}>{t('bg_off_agenda_t')}</h3>
            <p style={{...BO.cardD, ...BO.cardDFeature}}>{t('bg_off_agenda_d')}</p>
            <div style={BO.chips}>
              {agendaChips.map(c => (
                <a key={c.lk} href={c.url} target="_blank" rel="noreferrer" style={BO.chip}>
                  {t(c.lk)}
                </a>
              ))}
            </div>
            <a href="https://www.agendaburgos.com/" target="_blank" rel="noreferrer"
               style={{...BO.cta, ...BO.ctaFeature}}>
              {t('bg_off_visit')} <Icon name="arrow" size={12}/>
            </a>
          </div>
          {links.map(l => (
            <a key={l.k} href={l.url} target="_blank" rel="noreferrer" style={BO.card}>
              <span style={BO.tag}>{t(l.tag)}</span>
              <h3 style={BO.cardT}>{t(l.tk)}</h3>
              <p style={BO.cardD}>{t(l.dk)}</p>
              <span style={BO.cta}>
                {t('bg_off_visit')} <Icon name="arrow" size={12}/>
              </span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
const BO = {
  wrap:{ background:'#FAF8F2', color:'#1A1A1A', padding:'88px 28px 92px',
         borderTop:'1px solid #EFEDE6' },
  inner:{ maxWidth:1280, margin:'0 auto' },
  head:{ maxWidth:720, marginBottom:38 },
  eyebrow:{ fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:12,
            letterSpacing:'.25em', textTransform:'uppercase', color:'#9A8B5A' },
  h2:{ fontFamily:'Montserrat, sans-serif', fontWeight:900,
       fontSize:'clamp(32px,3.8vw,52px)', lineHeight:1, letterSpacing:'-0.02em',
       margin:'16px 0 18px', textTransform:'uppercase', color:'#1A1A1A' },
  intro:{ fontFamily:'Inter, sans-serif', fontSize:16, lineHeight:1.6,
          color:'#3B3B36', margin:0 },
  grid:{ display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(250px,1fr))', gap:14 },
  card:{ background:'#fff', border:'1px solid #E8E5DC', borderRadius:16,
         padding:'24px 22px 22px', display:'flex', flexDirection:'column',
         textDecoration:'none', transition:'border-color .15s, transform .15s' },
  cardFeature:{ background:'#F5C801', border:'1px solid #F5C801' },
  tag:{ fontFamily:'ui-monospace, monospace', fontSize:11, letterSpacing:'.06em',
        color:'#9A9A9A', textTransform:'uppercase' },
  tagFeature:{ color:'#6B5600' },
  cardT:{ fontFamily:'Montserrat, sans-serif', fontWeight:800, fontSize:19,
          lineHeight:1.2, letterSpacing:'-0.01em', textTransform:'uppercase',
          color:'#1A1A1A', margin:'12px 0 8px' },
  cardTFeature:{ color:'#1A1A1A' },
  cardD:{ fontFamily:'Inter, sans-serif', fontSize:13.5, lineHeight:1.55,
          color:'#555049', margin:0, flex:1 },
  cardDFeature:{ color:'#4A3D08' },
  cta:{ display:'inline-flex', alignItems:'center', gap:6, marginTop:18,
        fontFamily:'Montserrat, sans-serif', fontWeight:800, fontSize:11,
        letterSpacing:'.12em', textTransform:'uppercase', color:'#1A1A1A',
        borderBottom:'2px solid #F5C801', paddingBottom:3, alignSelf:'flex-start' },
  ctaFeature:{ color:'#1A1A1A', borderBottom:'2px solid #1A1A1A' },
  chips:{ display:'flex', flexWrap:'wrap', gap:8, margin:'16px 0 4px' },
  chip:{ display:'inline-flex', alignItems:'center', background:'rgba(26,26,26,0.08)',
         border:'1px solid rgba(26,26,26,0.22)', color:'#1A1A1A', borderRadius:999,
         padding:'6px 13px', fontFamily:'Montserrat, sans-serif', fontWeight:700,
         fontSize:11.5, letterSpacing:'.06em', textTransform:'uppercase',
         textDecoration:'none', transition:'background .15s' },
  note:{ fontFamily:'Inter, sans-serif', fontSize:14, lineHeight:1.5,
         color:'#7A746A', margin:'30px 0 0', maxWidth:640 },
};

/* ============== APP ============== */
function BurgosApp() {
  return (
    <div data-screen-label="Website · Burgos">
      <Nav/>
      <BurgosHeader/>
      <Burgos hideHead={true} showAll={true}/>
      <BurgosOfficial/>
      <ReservarHome/>
      <Footer/>
    </div>
  );
}
window.BurgosApp = BurgosApp;