/* global React, Icon, useT */

function Burgos({ hideHead, showAll }) {
  const { t } = useT();
  const { useState } = React;
  const cats = {
    see:  { lblK:'bg_cat_see',  icon:'pin',
      items:[
        { tk:'bg_see_1_t', dk:'bg_see_1_d', mk:'bg_see_1_m',
          url:'https://maps.google.com/?q=Hospital+del+Rey+Burgos', urlLk:'bg_see_map' },
        { tk:'bg_see_2_t', dk:'bg_see_2_d', mk:'bg_see_2_m',
          url:'https://tickets.patrimonionacional.es/es/tickets/sta-maria-real-huelgas', urlLk:'bg_see_book' },
        { tk:'bg_see_3_t', dk:'bg_see_3_d', mk:'bg_see_3_m',
          url:'https://maps.google.com/?q=Ermita+San+Amaro+Burgos', urlLk:'bg_see_map' },
        { tk:'bg_see_4_t', dk:'bg_see_4_d', mk:'bg_see_4_m',
          url:'https://maps.google.com/?q=Parque+El+Parral+Burgos', urlLk:'bg_see_map' },
        { tk:'bg_see_5_t', dk:'bg_see_5_d', mk:'bg_see_5_m',
          url:'https://patrimoniocultural.jcyl.es/web/es/conocimiento-difusion/catedral-burgos.html', urlLk:'bg_see_more' },
        { tk:'bg_see_6_t', dk:'bg_see_6_d', mk:'bg_see_6_m',
          url:'https://actividades.museoevolucionhumana.com/muslinkIV/index.jsp?lang=1&nom_cache=MUSEO&property=MUSEO', urlLk:'bg_see_book' },
        { tk:'bg_see_7_t', dk:'bg_see_7_d', mk:'bg_see_7_m',
          url:'https://www.aytoburgos.es/-/arco-de-santa-maria', urlLk:'bg_see_more' },
        { tk:'bg_see_8_t', dk:'bg_see_8_d', mk:'bg_see_8_m',
          url:'https://cartuja.org/', urlLk:'bg_see_more' },
        { tk:'bg_see_9_t', dk:'bg_see_9_d', mk:'bg_see_9_m',
          url:'https://maps.google.com/?q=Castillo+de+Burgos', urlLk:'bg_see_map' },
        { tk:'bg_see_10_t', dk:'bg_see_10_d', mk:'bg_see_10_m',
          url:'https://www.google.com/maps/dir/Calle+Juan+de+Austria+6,+Burgos/Iglesia+de+San+Nicol%C3%A1s+de+Bari,+Burgos', urlLk:'bg_see_map' },
        { tk:'bg_see_11_t', dk:'bg_see_11_d', mk:'bg_see_11_m',
          url:'https://www.google.com/maps/dir/Calle+Juan+de+Austria+6,+Burgos/Museo+del+Retablo+Iglesia+de+San+Esteban,+Burgos', urlLk:'bg_see_map' },
        { tk:'bg_see_12_t', dk:'bg_see_12_d', mk:'bg_see_12_m',
          url:'https://www.google.com/maps/dir/Calle+Juan+de+Austria+6,+Burgos/CAB+Centro+de+Arte+Caja+de+Burgos', urlLk:'bg_see_map' },
      ] },
    eat:  { lblK:'bg_cat_eat',  icon:'coffee',
      items:[
        { tk:'bg_eat_1_t', dk:'bg_eat_1_d', mk:'bg_eat_1_m', addr:'bg_eat_1_addr', tel:'bg_eat_1_tel',
          url:'https://www.google.com/maps/dir/Calle+Juan+de+Austria+6,+Burgos/Asador+Azofra,+Calle+Don+Juan+de+Austria+22,+Burgos', urlLk:'bg_see_map' },
        { tk:'bg_eat_2_t', dk:'bg_eat_2_d', mk:'bg_eat_2_m', addr:'bg_eat_2_addr', tel:'bg_eat_2_tel',
          url:'https://www.google.com/maps/dir/Calle+Juan+de+Austria+6,+Burgos/Asador+Los+Trillos,+Calle+Don+Juan+de+Austria+20,+Burgos', urlLk:'bg_see_map' },
        { tk:'bg_eat_far_t', dk:'bg_eat_far_d', mk:'bg_eat_far_m',
          addr:'bg_eat_far_addr', tel:'bg_eat_far_tel',
          url:'https://www.google.com/maps/dir/Calle+Juan+de+Austria+6,+Burgos/La+F%C3%A1brica+Restaurante,+Calle+San+Juan+3,+Burgos', urlLk:'bg_see_map' },
        { tk:'bg_eat_cobo_t', dk:'bg_eat_cobo_d', mk:'bg_eat_cobo_m',
          addr:'bg_eat_cobo_addr', tel:'bg_eat_cobo_tel',
          url:'https://www.google.com/maps/dir/Calle+Juan+de+Austria+6,+Burgos/Cobo+Estratos,+Plaza+de+la+Libertad+9,+Burgos', urlLk:'bg_see_map' },
        { tk:'bg_eat_3_t', dk:'bg_eat_3_d', mk:'bg_eat_3_m', addr:'bg_eat_3_addr', tel:'bg_eat_3_tel' },
        { tk:'bg_eat_4_t', dk:'bg_eat_4_d', mk:'bg_eat_4_m', addr:'bg_eat_4_addr', tel:'bg_eat_4_tel' },
        { tk:'bg_eat_5_t', dk:'bg_eat_5_d', mk:'bg_eat_5_m', addr:'bg_eat_5_addr', tel:'bg_eat_5_tel' },
        { tk:'bg_eat_6_t', dk:'bg_eat_6_d', mk:'bg_eat_6_m', addr:'bg_eat_6_addr', tel:'bg_eat_6_tel' },
        { tk:'bg_eat_7_t', dk:'bg_eat_7_d', mk:'bg_eat_7_m', addr:'bg_eat_7_addr' },
        { tk:'bg_eat_8_t', dk:'bg_eat_8_d', mk:'bg_eat_8_m', addr:'bg_eat_8_addr', tel:'bg_eat_8_tel' },
        { tk:'bg_eat_9_t', dk:'bg_eat_9_d', mk:'bg_eat_9_m', addr:'bg_eat_9_addr' },
        { tk:'bg_eat_oli_t', dk:'bg_eat_oli_d', mk:'bg_eat_oli_m',
          addr:'bg_eat_oli_addr', tel:'bg_eat_oli_tel',
          url:'https://www.google.com/maps/dir/Calle+Juan+de+Austria+6,+Burgos/Caf%C3%A9+Bar+%C3%93liver,+Calle+Llana+de+Afuera+11,+Burgos', urlLk:'bg_see_map' },
      ] },
    walk: { lblK:'bg_cat_walk', icon:'walk',
      items:[
        { tk:'bg_walk_1_t', dk:'bg_walk_1_d', mk:'bg_walk_1_m' },
        { tk:'bg_walk_2_t', dk:'bg_walk_2_d', mk:'bg_walk_2_m' },
        { tk:'bg_walk_3_t', dk:'bg_walk_3_d', mk:'bg_walk_3_m' },
        { tk:'bg_walk_4_t', dk:'bg_walk_4_d', mk:'bg_walk_4_m' },
      ] },
    prac: { lblK:'bg_cat_prac', icon:'bag',
      items:[
        { tk:'bg_prac_farm_t', dk:'bg_prac_farm_d', mk:'bg_prac_farm_m', addr:'bg_prac_farm_addr',
          url:'https://www.google.com/maps/dir/Calle+Juan+de+Austria+6,+Burgos/Farmacia+Oliver+Berm%C3%BAdez,+Calle+Villadiego,+Burgos', urlLk:'bg_see_map' },
        { tk:'bg_prac_pool_t', dk:'bg_prac_pool_d', mk:'bg_prac_pool_m', addr:'bg_prac_pool_addr',
          url:'https://www.google.com/maps/dir/Calle+Juan+de+Austria+6,+Burgos/Piscinas+San+Amaro,+Burgos', urlLk:'bg_see_map' },
        { tk:'bg_prac_pizza_t', dk:'bg_prac_pizza_d', mk:'bg_prac_pizza_m', addr:'bg_prac_pizza_addr', tel:'bg_prac_pizza_tel',
          url:'https://www.google.com/maps/dir/Calle+Juan+de+Austria+6,+Burgos/Telepizza+El+Pilar,+Calle+Coimbra+2,+Burgos', urlLk:'bg_see_map' },
        { tk:'bg_prac_bread_t', dk:'bg_prac_bread_d', mk:'bg_prac_bread_m', addr:'bg_prac_bread_addr',
          url:'https://www.google.com/maps/dir/Calle+Juan+de+Austria+6,+Burgos/Panader%C3%ADa+El+Horno,+Calle+Villadiego,+Burgos', urlLk:'bg_see_map' },
        { tk:'bg_prac_shop_t', dk:'bg_prac_shop_d', mk:'bg_prac_shop_m', addr:'bg_prac_shop_addr',
          url:'https://www.google.com/maps/dir/Calle+Juan+de+Austria+6,+Burgos/Ultramarinos+Pau%26Ros,+Calle+Villadiego,+Burgos', urlLk:'bg_see_map' },
        { tk:'bg_prac_bike_t', dk:'bg_prac_bike_d', mk:'bg_prac_bike_m', addr:'bg_prac_bike_addr',
          url:'https://www.google.com/maps/dir/Calle+Juan+de+Austria+6,+Burgos/Bicis+La+Cl%C3%A1sica,+Calle+Don+Juan+de+Austria,+Burgos', urlLk:'bg_see_map' },
      ] },
  };
  const [tab, setTab] = useState('see');
  const cur = cats[tab];

  return (
    <section id="burgos" style={B.wrap}>
      <div style={{maxWidth:1280, margin:'0 auto', padding:'0 28px'}}>
        {!hideHead && (
          <div style={B.head}>
            <div>
              <div style={B.eyebrow}>{t('bg_eyebrow')}</div>
              <h2 style={B.h2}>{t('bg_h2_a')}<br/>{t('bg_h2_b')}</h2>
            </div>
            <p style={B.intro}>{t('bg_intro')}</p>
          </div>
        )}

        {!showAll && (
          <div style={B.tabs}>
            {Object.entries(cats).map(([k, c]) => (
              <button key={k} onClick={()=>setTab(k)}
                      style={{...B.tab, ...(tab===k ? B.tabActive : null)}}>
                <Icon name={c.icon} size={16}/>
                <span>{t(c.lblK)}</span>
              </button>
            ))}
          </div>
        )}

        {showAll ? (
          Object.entries(cats).map(([k, c]) => (
            <div key={k} id={`burgos-${k}`} style={B.section}>
              <header style={B.secHead}>
                <span style={B.secIcon}><Icon name={c.icon} size={18}/></span>
                <h2 style={B.secH}>{t(c.lblK)}</h2>
                <span style={B.secCount}>{String(c.items.length).padStart(2,'0')}</span>
              </header>
              <div style={B.grid}>
                {c.items.map(it => (
                  <article key={it.tk} style={B.card}>
                    <div style={B.cardHead}>
                      <h3 style={B.cardT}>{t(it.tk)}</h3>
                      {it.mk && (
                        <div style={B.dist}>
                          <span style={B.distN}>{t(it.mk)}</span>
                          <span style={B.distL}>{t('bg_dist')}</span>
                        </div>
                      )}
                    </div>
                    <p style={B.cardD}>{t(it.dk)}</p>
                    {(it.addr || it.tel) && (
                      <div style={B.meta}>
                        {it.addr && (
                          <span style={B.metaRow}><Icon name="pin" size={13}/> {t(it.addr)}</span>
                        )}
                        {it.tel && (
                          <a href={`tel:+34${t(it.tel).replace(/\s/g,'')}`} style={B.metaLink}><Icon name="phone" size={13}/> {t(it.tel)}</a>
                        )}
                      </div>
                    )}
                    {it.url && (
                      <a href={it.url} target="_blank" rel="noreferrer" style={B.cardLink}>
                        {t(it.urlLk)} <Icon name="arrow" size={12}/>
                      </a>
                    )}
                  </article>
                ))}
              </div>
            </div>
          ))
        ) : (
          <div style={B.grid}>
            {cur.items.map(it => (
              <article key={it.tk} style={B.card}>
                <div style={B.cardHead}>
                  <h3 style={B.cardT}>{t(it.tk)}</h3>
                  {it.mk && (
                    <div style={B.dist}>
                      <span style={B.distN}>{t(it.mk)}</span>
                      <span style={B.distL}>{t('bg_dist')}</span>
                    </div>
                  )}
                </div>
                <p style={B.cardD}>{t(it.dk)}</p>
                {(it.addr || it.tel) && (
                  <div style={B.meta}>
                    {it.addr && (
                      <span style={B.metaRow}><Icon name="pin" size={13}/> {t(it.addr)}</span>
                    )}
                    {it.tel && (
                      <a href={`tel:+34${t(it.tel).replace(/\s/g,'')}`} style={B.metaLink}><Icon name="phone" size={13}/> {t(it.tel)}</a>
                    )}
                  </div>
                )}
                {it.url && (
                  <a href={it.url} target="_blank" rel="noreferrer" style={B.cardLink}>
                    {t(it.urlLk)} <Icon name="arrow" size={12}/>
                  </a>
                )}
              </article>
            ))}
          </div>
        )}
        {!hideHead && (
          <div style={B.moreRow}>
            <a href="burgos.html" style={B.moreLink}>
              {t('bg_more') || 'Ver todas las recomendaciones'} <Icon name="arrow" size={14}/>
            </a>
          </div>
        )}
      </div>
    </section>
  );
}
const B = {
  wrap:{ padding:'100px 0', background:'#fff' },
  head:{ display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:40, alignItems:'end', marginBottom:36 },
  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,58px)', lineHeight:1, letterSpacing:'-0.02em',
       margin:'16px 0 0', textTransform:'uppercase', color:'#1A1A1A' },
  intro:{ fontFamily:'Inter, sans-serif', fontSize:16, color:'#2B2B2B',
          lineHeight:1.6, margin:0 },
  tabs:{ display:'flex', gap:10, marginBottom:24, flexWrap:'wrap' },
  tab:{ display:'inline-flex', alignItems:'center', gap:8,
        background:'transparent', border:'1px solid #E5E5E5', color:'#2B2B2B',
        padding:'10px 18px', borderRadius:999, cursor:'pointer',
        fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:13,
        letterSpacing:'.08em', textTransform:'uppercase', transition:'all .15s' },
  tabActive:{ background:'#1A1A1A', color:'#F5C801', borderColor:'#1A1A1A' },
  grid:{ display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(260px,1fr))', gap:14 },
  card:{ background:'#FAFAFA', borderRadius:16, padding:'22px 22px 24px',
         border:'1px solid #ECECEC', display:'flex', flexDirection:'column' },
  cardHead:{ display:'flex', justifyContent:'space-between', alignItems:'flex-start',
             gap:14, marginBottom:8 },
  cardT:{ fontFamily:'Montserrat, sans-serif', fontWeight:800, fontSize:17,
          color:'#1A1A1A', margin:0, lineHeight:1.25, textTransform:'uppercase',
          letterSpacing:'-0.005em' },
  dist:{ flex:'0 0 auto', textAlign:'right' },
  distN:{ display:'block', fontFamily:'Montserrat, sans-serif', fontWeight:900,
          fontSize:26, color:'#FBB700', lineHeight:1 },
  distL:{ display:'block', fontFamily:'ui-monospace, monospace', fontSize:10,
          color:'#9A9A9A', marginTop:2 },
  cardD:{ fontFamily:'Inter, sans-serif', fontSize:14, color:'#2B2B2B',
          lineHeight:1.55, margin:0 },
  meta:{ display:'flex', flexDirection:'column', gap:4, marginTop:12 },
  metaRow:{ display:'inline-flex', alignItems:'center', gap:7, fontFamily:'Inter, sans-serif',
            fontSize:13, color:'#6B6B6B', lineHeight:1.3 },
  metaLink:{ display:'inline-flex', alignItems:'center', gap:7, fontFamily:'Inter, sans-serif',
             fontSize:13, fontWeight:600, color:'#1A1A1A', textDecoration:'none', lineHeight:1.3 },
  cardLink:{ display:'inline-flex', alignItems:'center', gap:6, marginTop:12,
             fontFamily:'Montserrat, sans-serif', fontWeight:800, fontSize:11,
             letterSpacing:'.12em', textTransform:'uppercase', color:'#1A1A1A',
             textDecoration:'none', borderBottom:'2px solid #F5C801',
             paddingBottom:2, alignSelf:'flex-start' },
  moreRow:{ marginTop:32, paddingTop:24, borderTop:'1px dashed #ECECEC' },
  moreLink:{ display:'inline-flex', alignItems:'center', gap:8,
             fontFamily:'Montserrat, sans-serif', fontWeight:800, fontSize:12,
             letterSpacing:'.14em', textTransform:'uppercase', color:'#1A1A1A',
             textDecoration:'none', borderBottom:'2px solid #F5C801', paddingBottom:4 },
  section:{ marginBottom:60 },
  secHead:{ display:'flex', alignItems:'center', gap:14, marginBottom:24,
            paddingBottom:14, borderBottom:'2px solid #1A1A1A' },
  secIcon:{ width:36, height:36, borderRadius:10, background:'#F5C801',
            color:'#1A1A1A', display:'inline-flex', alignItems:'center',
            justifyContent:'center' },
  secH:{ fontFamily:'Montserrat, sans-serif', fontWeight:900, fontSize:'clamp(22px,2.4vw,30px)',
         letterSpacing:'-0.01em', textTransform:'uppercase', color:'#1A1A1A',
         margin:0, lineHeight:1, flex:1 },
  secCount:{ fontFamily:'ui-monospace, monospace', fontSize:12, color:'#9A9A9A',
             letterSpacing:'.1em' },
};

window.Burgos = Burgos;
