/* global React, Icon, useT */

function Servicios({ hideHead }) {
  const { t } = useT();
  const cats = [
    { t: t('sv_cat_tech'), items:[
      { i:'key', n:t('s_locks'), d:t('s_locks_d') },
      { i:'wifi', n:t('s_wifi'), d:t('s_wifi_d') },
      { i:'thermo', n:t('s_floor'), d:t('s_floor_d') },
      { i:'camera', n:t('s_cam'), d:t('s_cam_d') },
    ]},
    { t: t('sv_cat_kitchen'), items:[
      { i:'coffee', n:t('s_kitchen'), d:t('s_kitchen_d') },
      { i:'tv', n:t('s_tv'), d:t('s_tv_d') },
      { i:'book', n:t('s_book'), d:t('s_book_d') },
      { i:'leaf', n:t('s_patio'), d:t('s_patio_d') },
    ]},
    { t: t('sv_cat_room'), items:[
      { i:'bed', n:t('s_linen'), d:t('s_linen_d') },
      { i:'bath', n:t('s_bath'), d:t('s_bath_d') },
      { i:'hanger', n:t('s_iron'), d:t('s_iron_d') },
      { i:'hairdryer', n:t('s_amen'), d:t('s_amen_d') },
    ]},
    { t: t('sv_cat_serv'), items:[
      { i:'wash', n:t('s_laund'), d:t('s_laund_d') },
      { i:'parking', n:t('s_park'), d:t('s_park_d') },
      { i:'bike', n:t('s_bike'), d:t('s_bike_d') },
      { i:'sun', n:t('s_size'), d:t('s_size_d') },
    ]},
  ];
  return (
    <section id="servicios" style={SV.wrap}>
      <div style={{maxWidth:1280, margin:'0 auto', padding:'0 28px'}}>
        {!hideHead && (
          <div style={{maxWidth:780, marginBottom:56}}>
            <div style={SV.eyebrow}>{t('sv_eyebrow')}</div>
            <h2 style={SV.h2}>{t('sv_h2_a')}<br/>{t('sv_h2_b')}</h2>
            <p style={SV.intro}>{t('sv_intro')}</p>
          </div>
        )}
        {cats.map(c => (
          <div key={c.t} style={SV.cat}>
            <h3 style={SV.catT}>{c.t}</h3>
            <div style={SV.grid}>
              {c.items.map(it => (
                <div key={it.n} style={SV.cell}>
                  <div style={SV.iconBox}><Icon name={it.i} size={22}/></div>
                  <div>
                    <div style={SV.n}>{it.n}</div>
                    <div style={SV.d}>{it.d}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}
        {!hideHead && (
          <div style={SV.moreRow}>
            <a href="servicios.html" style={SV.moreLink}>
              {t('sv_more') || 'Ver todos los servicios al detalle'} <Icon name="arrow" size={14}/>
            </a>
          </div>
        )}
      </div>
    </section>
  );
}
const SV = {
  wrap:{ padding:'100px 0', background:'#fff' },
  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 20px', textTransform:'uppercase', color:'#1A1A1A' },
  intro:{ fontFamily:'Inter, sans-serif', fontSize:17, color:'#2B2B2B', lineHeight:1.55, margin:0 },
  cat:{ marginBottom:44 },
  catT:{ fontFamily:'Montserrat, sans-serif', fontWeight:800, fontSize:14, letterSpacing:'.15em', textTransform:'uppercase', color:'#1A1A1A', margin:'0 0 20px', paddingBottom:12, borderBottom:'1px solid #ECECEC' },
  grid:{ display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(260px,1fr))', gap:20 },
  cell:{ display:'flex', gap:14, alignItems:'flex-start' },
  iconBox:{ flex:'0 0 auto', width:42, height:42, background:'#FFFBEA', color:'#1A1A1A',
            display:'flex', alignItems:'center', justifyContent:'center', borderRadius:12 },
  n:{ fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:15, color:'#1A1A1A', marginBottom:4 },
  d:{ fontFamily:'Inter, sans-serif', fontSize:13.5, color:'#6B6B6B', lineHeight:1.5 },
  moreRow:{ marginTop:8, 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 },
};

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

  const L = {
    es: {
      stopsH:'Paradas de autobús cercanas',
      liveLbl:'Rutas en directo',
      stops:[
        ['Juan de Austria','En la puerta del albergue'],
        ['Hospital del Rey','A 2 minutos a pie'],
        ['Facultad de Educación','A 3 minutos a pie'],
      ],
      destH:'En autobús urbano',
      dests:[
        { to:'Centro / Catedral',
          lines:[
            ['L22','desde Hospital del Rey o Facultad de Educación → Plaza del Mío Cid','la más rápida'],
            ['L7', 'desde Juan de Austria → Plaza de España',''],
          ]},
        { to:'Estación de tren · Rosa Manzano',
          lines:[
            ['L12','desde Juan de Austria u Hospital del Rey → puerta de la estación (FFCC)','línea directa'],
          ]},
        { to:'Estación de autobuses · C/ Miranda',
          lines:[
            ['L12','desde Juan de Austria u Hospital del Rey → Puente de Santa María (3 min andando)',''],
            ['L5', 'desde Juan de Austria → Plaza de España',''],
          ]},
        { to:'Otras conexiones',
          lines:[
            ['C1','circular — desde Facultad de Educación',''],
            ['C2','circular — desde Facultad de Educación',''],
          ]},
      ],
      faresH:'Tarifas',
      fares:[
        ['BonoBur','0,24 €','recarga en App BonoBur o comercios'],
        ['Billete sencillo','1,20 €','en efectivo'],
      ],
      walkH:'Andando',
      walks:[
        ['Centro / Catedral','25 min por el Paseo de la Isla, junto al río Arlanzón. Totalmente llano.'],
      ],
      bikeH:'En bici',
      bikes:[
        ['Carril bici a la puerta','El carril bici del Paseo de la Isla pasa justo al lado del albergue, a la orilla del río Arlanzón.'],
        ['Desde el centro / Catedral','~10 min por el carril bici, llano y sin tráfico. Estación de Bicibur a 20 m.'],
      ],
    },
    en: {
      stopsH:'Nearby bus stops',
      liveLbl:'Live routes',
      stops:[
        ['Juan de Austria','At the hostel\u2019s door'],
        ['Hospital del Rey','2 min walk'],
        ['Facultad de Educación','3 min walk'],
      ],
      destH:'By city bus',
      dests:[
        { to:'Old town / Cathedral',
          lines:[
            ['L22','from Hospital del Rey or Facultad de Educación → Plaza del Mío Cid','fastest option'],
            ['L7', 'from Juan de Austria → Plaza de España',''],
          ]},
        { to:'Train station · Rosa Manzano',
          lines:[
            ['L12','from Juan de Austria or Hospital del Rey → straight to the station','direct line'],
          ]},
        { to:'Bus station · C/ Miranda',
          lines:[
            ['L12','from Juan de Austria or Hospital del Rey → Puente de Santa María (3 min walk)',''],
            ['L5', 'from Juan de Austria → Plaza de España',''],
          ]},
        { to:'Other connections',
          lines:[
            ['C1','circular line — from Facultad de Educación',''],
            ['C2','circular line — from Facultad de Educación',''],
          ]},
      ],
      faresH:'Fares',
      fares:[
        ['BonoBur','€0.24','top-up via BonoBur app or local shops'],
        ['Single ticket','€1.20','cash on board'],
      ],
      walkH:'On foot',
      walks:[
        ['Old town / Cathedral','25 min along Paseo de la Isla, next to the Arlanzón river. Completely flat.'],
      ],
      bikeH:'By bike',
      bikes:[
        ['Bike lane at the door','The Paseo de la Isla bike lane runs right next to the hostel, along the Arlanzón river.'],
        ['From the old town / Cathedral','~10 min on the bike lane — flat and traffic-free. Bicibur station 20 m away.'],
      ],
    },
  }[lang] || null;

  return (
    <section id="llegar" style={LL.wrap}>
      <div style={{maxWidth:1280, margin:'0 auto', padding:'0 28px'}}>
        <div style={LL.head}>
          <div>
            <div style={SV.eyebrow}>{t('ll_eyebrow')}</div>
            <h2 style={LL.h2}>{t('ll_h2_a')}<br/>{t('ll_h2_b')}</h2>
            <p style={LL.addr}>{t('ll_addr')}</p>
          </div>
          <div style={LL.mapFake}>
            <iframe
              title="El Santo Hostel — mapa"
              src="https://www.google.com/maps?q=Calle+Don+Juan+de+Austria+6,+09001+Burgos,+España&z=17&hl=es&output=embed"
              style={{position:'absolute', inset:0, width:'100%', height:'100%', border:0}}
              loading="lazy" referrerPolicy="no-referrer-when-downgrade"
              allowFullScreen
            />
            <a href="https://maps.google.com/?q=Calle+Don+Juan+de+Austria+6,+09001+Burgos"
               target="_blank" rel="noreferrer"
               style={LL.mapOpen}>
              <Icon name="arrow" size={14}/> {t('ll_open_map') || 'Abrir en Google Maps'}
            </a>
          </div>
        </div>

        {L && (
          <React.Fragment>
            {/* NEARBY STOPS */}
            <div style={LL.blockHRow}>
              <div style={{...LL.blockH, margin:0}}>{L.stopsH}</div>
              <a href="https://movilidad.aytoburgos.es/rutas-en-directo" target="_blank" rel="noreferrer" style={LL.liveLink}>
                <Icon name="bus" size={14}/> {L.liveLbl} <Icon name="arrow" size={12}/>
              </a>
            </div>
            <div style={LL.stops}>
              {L.stops.map(([n,d]) => (
                <div key={n} style={LL.stop}>
                  <div style={LL.stopIcon}><Icon name="bus" size={20}/></div>
                  <div>
                    <div style={LL.stopName}>{n}</div>
                    <div style={LL.stopSub}>{d}</div>
                  </div>
                </div>
              ))}
            </div>

            {/* DESTINATIONS */}
            <div style={LL.blockH}>{L.destH}</div>
            <div style={LL.dests}>
              {L.dests.map(d => (
                <div key={d.to} style={LL.destCard}>
                  <div style={LL.destTo}>{d.to}</div>
                  <div style={LL.lines}>
                    {d.lines.map(([line,desc,tag],i) => (
                      <div key={i} style={LL.line}>
                        <span style={LL.lineBadge}>{line}</span>
                        <span style={LL.lineDesc}>{desc}</span>
                        {tag && <span style={LL.lineTag}>{tag}</span>}
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>

            {/* FARES + WALKING */}
            <div style={LL.bottom}>
              <div style={LL.bottomBox}>
                <div style={LL.blockH}>{L.faresH}</div>
                <div style={LL.fareList}>
                  {L.fares.map(([n,p,d]) => (
                    <div key={n} style={LL.fareRow}>
                      <div>
                        <div style={LL.fareName}>{n}</div>
                        <div style={LL.fareDesc}>{d}</div>
                      </div>
                      <div style={LL.farePrice}>{p}</div>
                    </div>
                  ))}
                </div>
              </div>
              <div style={LL.bottomBox}>
                <div style={LL.blockH}>{L.walkH}</div>
                {L.walks.map(([n,d]) => (
                  <div key={n} style={LL.walkRow}>
                    <div style={{...LL.stopIcon, background:'#1A1A1A', color:'#F5C801'}}>
                      <Icon name="walk" size={20}/>
                    </div>
                    <div>
                      <div style={LL.fareName}>{n}</div>
                      <div style={LL.fareDesc}>{d}</div>
                    </div>
                  </div>
                ))}
                <div style={{...LL.blockH, marginTop:20}}>{L.bikeH}</div>
                {L.bikes.map(([n,d]) => (
                  <div key={n} style={{...LL.walkRow, marginTop:12}}>
                    <div style={{...LL.stopIcon, background:'#F5C801', color:'#1A1A1A'}}>
                      <Icon name="bike" size={20}/>
                    </div>
                    <div>
                      <div style={LL.fareName}>{n}</div>
                      <div style={LL.fareDesc}>{d}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </React.Fragment>
        )}

        <div style={LL.nuki}>
          <div style={LL.nukiHead}>
            <div style={{...SV.eyebrow, color:'#F5C801'}}>{t('nuki_eyebrow')}</div>
            <h3 style={LL.nukiH}>{t('nuki_h')}</h3>
            <p style={LL.nukiP}>{t('nuki_p')}</p>
          </div>
          <ol style={LL.nukiList}>
            <li><b>01.</b><span>{t('nuki_1')}</span></li>
            <li><b>02.</b><span>{t('nuki_2')}</span></li>
            <li><b>03.</b><span>{t('nuki_3')}</span></li>
          </ol>
        </div>
      </div>
    </section>
  );
}
const LL = {
  wrap:{ padding:'100px 0', background:'#FAFAFA' },
  head:{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:40, alignItems:'center', marginBottom:56 },
  h2:{ fontFamily:'Montserrat, sans-serif', fontWeight:900, fontSize:'clamp(36px,4.2vw,58px)', lineHeight:1, letterSpacing:'-0.02em', margin:'16px 0 20px', textTransform:'uppercase', color:'#1A1A1A' },
  addr:{ fontFamily:'Inter, sans-serif', fontSize:17, color:'#2B2B2B', lineHeight:1.55, margin:0 },
  mapFake:{ position:'relative', aspectRatio:'4/3', background:'#FFF3B8', borderRadius:22, overflow:'hidden',
            border:'1px solid #ECECEC' },
  mapOpen:{ position:'absolute', bottom:14, left:14, display:'inline-flex', alignItems:'center', gap:8,
            background:'#1A1A1A', color:'#F5C801', padding:'10px 14px', borderRadius:999,
            fontFamily:'Montserrat, sans-serif', fontWeight:800, fontSize:11,
            letterSpacing:'.14em', textTransform:'uppercase', textDecoration:'none',
            boxShadow:'0 6px 16px rgba(0,0,0,.18)' },
  mapGrid:{ position:'absolute', inset:0,
            backgroundImage:'linear-gradient(#E5D180 1px,transparent 1px),linear-gradient(90deg,#E5D180 1px,transparent 1px)',
            backgroundSize:'40px 40px', opacity:.5 },
  pin:{ position:'absolute', top:'42%', left:'48%', color:'#D7453B',
        filter:'drop-shadow(0 2px 4px rgba(0,0,0,.3))' },
  mapLbl:{ position:'absolute', top:'55%', left:'48%', background:'#1A1A1A', color:'#F5C801',
           padding:'6px 10px', borderRadius:6, fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:12, lineHeight:1.3 },
  blockH:{ fontFamily:'Montserrat, sans-serif', fontWeight:800, fontSize:13,
           letterSpacing:'.18em', textTransform:'uppercase', color:'#1A1A1A',
           margin:'8px 0 16px' },
  blockHRow:{ display:'flex', justifyContent:'space-between', alignItems:'center',
              gap:16, flexWrap:'wrap', margin:'8px 0 16px' },
  liveLink:{ display:'inline-flex', alignItems:'center', gap:8,
             padding:'8px 14px', background:'#1A1A1A', color:'#F5C801',
             borderRadius:999, fontFamily:'Montserrat, sans-serif', fontWeight:700,
             fontSize:11, letterSpacing:'.12em', textTransform:'uppercase',
             textDecoration:'none' },
  stops:{ display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(240px,1fr))',
          gap:12, marginBottom:36 },
  stop:{ display:'flex', gap:14, padding:'18px 20px', background:'#fff', borderRadius:14,
         border:'1px solid #ECECEC', alignItems:'center' },
  stopIcon:{ flex:'0 0 auto', width:40, height:40, background:'#F5C801', color:'#1A1A1A',
             display:'flex', alignItems:'center', justifyContent:'center', borderRadius:10 },
  stopName:{ fontFamily:'Montserrat, sans-serif', fontWeight:800, fontSize:14,
             color:'#1A1A1A', textTransform:'uppercase', letterSpacing:'.04em', marginBottom:2 },
  stopSub:{ fontFamily:'Inter, sans-serif', fontSize:13, color:'#6B6B6B' },
  dests:{ display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(280px,1fr))',
          gap:14, marginBottom:36 },
  destCard:{ background:'#fff', border:'1px solid #ECECEC', borderRadius:16, padding:'22px 24px' },
  destTo:{ fontFamily:'Montserrat, sans-serif', fontWeight:800, fontSize:15,
           color:'#1A1A1A', marginBottom:14, lineHeight:1.25 },
  lines:{ display:'flex', flexDirection:'column', gap:10 },
  line:{ display:'flex', gap:10, alignItems:'flex-start', flexWrap:'wrap' },
  lineBadge:{ flex:'0 0 auto', background:'#1A1A1A', color:'#F5C801',
              fontFamily:'Montserrat, sans-serif', fontWeight:900, fontSize:11,
              letterSpacing:'.04em', padding:'4px 8px', borderRadius:6, minWidth:38,
              textAlign:'center' },
  lineDesc:{ flex:1, minWidth:140, fontFamily:'Inter, sans-serif', fontSize:13.5,
             color:'#3A3A3A', lineHeight:1.5 },
  lineTag:{ fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:10,
            letterSpacing:'.08em', textTransform:'uppercase', color:'#127A1B',
            background:'rgba(18,122,27,.1)', padding:'3px 8px', borderRadius:999 },
  bottom:{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14, marginBottom:40 },
  bottomBox:{ background:'#fff', border:'1px solid #ECECEC', borderRadius:16, padding:'22px 24px' },
  fareList:{ display:'flex', flexDirection:'column', gap:10 },
  fareRow:{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', gap:14,
            padding:'10px 0', borderBottom:'1px solid #F0F0F0' },
  fareName:{ fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:13.5,
             color:'#1A1A1A', textTransform:'uppercase', letterSpacing:'.04em', marginBottom:2 },
  fareDesc:{ fontFamily:'Inter, sans-serif', fontSize:12.5, color:'#6B6B6B', lineHeight:1.45 },
  farePrice:{ fontFamily:'Montserrat, sans-serif', fontWeight:900, fontSize:18, color:'#1A1A1A',
              flexShrink:0 },
  walkRow:{ display:'flex', gap:14, alignItems:'flex-start' },
  nuki:{ background:'#1A1A1A', color:'#fff', borderRadius:28, padding:'44px 40px',
         display:'grid', gridTemplateColumns:'1fr 1fr', gap:40 },
  nukiHead:{},
  nukiH:{ fontFamily:'Montserrat, sans-serif', fontWeight:800, fontSize:'clamp(36px,4.2vw,56px)', lineHeight:1.02, letterSpacing:'-0.01em', margin:'14px 0 18px', textTransform:'uppercase', color:'#fff' },
  nukiP:{ fontFamily:'Inter, sans-serif', fontSize:15, color:'#D9D9D9', lineHeight:1.6, margin:0 },
  nukiList:{ listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:14,
             fontFamily:'Inter, sans-serif', fontSize:14 },
};

window.Servicios = Servicios;
window.Llegar = Llegar;