/* global React, Icon, useT, Nav, Servicios, Footer, ReservarHome */

/* ============== PAGE HEADER ============== */
function ServicesHeader() {
  const { t } = useT();
  return (
    <section style={SVH.wrap}>
      <div style={SVH.inner}>
        <a href="index.html" style={SVH.back}>
          <span style={{transform:'rotate(180deg)', display:'inline-flex'}}><Icon name="arrow" size={14}/></span>
          {t('svp_back')}
        </a>
        <div style={SVH.eyebrow}>{t('svp_eyebrow')}</div>
        <h1 style={SVH.h1}>{t('svp_h1_a')}<br/>{t('svp_h1_b')}</h1>
        <p style={SVH.lede}>{t('svp_lede')}</p>
      </div>
    </section>
  );
}
const SVH = {
  wrap:{ background:'#1A1A1A', color:'#fff', 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:'#F5C801',
         textDecoration:'none', marginBottom:32 },
  eyebrow:{ fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:12, letterSpacing:'.25em', textTransform:'uppercase', color:'#F5C801' },
  h1:{ color:'#fff', 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, color:'#D9D9D9' },
};

/* ============== DEEP-DIVES (4 callouts con más detalle) ============== */
function ServicesDeepDive() {
  const { lang } = useT();
  const data = {
    es: {
      eyebrow:'Cómo funciona',
      h:'Detalles que importan.',
      p:'Lo que diferencia un albergue boutique de uno cualquiera está en cómo funcionan las cosas, no solo en lo que hay.',
      items:[
        { i:'key',    h:'Check-in con código',
          d:'24h antes de tu llegada recibes un código personal por email. Llegas, marcas el código en la puerta y entras. Sin esperas, sin recepción.' },
        { i:'wifi',   h:'Fibra con repetidores en cada planta',
          d:'Fibra óptica con tres puntos de acceso. Cobertura completa, apta para videollamadas. Hemos hecho coworking aquí, funciona.' },
        { i:'thermo', h:'Suelo radiante automatizado',
          d:'Tres plantas con suelo radiante y refrescante. Temperatura ambiente constante todo el año. No hay que tocar nada.' },
        { i:'coffee', h:'Cocina lista para 10',
          d:'Inducción, horno, lavavajillas, frigorífico americano, cafetera semiautomática. Vajilla y cubertería para 12. Café molido de cortesía.' },
        { i:'leaf',   h:'Patio interior privado',
          d:'20 m² de patio interior con mobiliario, sombra y plantas. Para fumar, cenar al aire libre o trabajar al sol. Conexión 5G del operador.' },
        { i:'wash',   h:'Lavandería sin pagar',
          d:'Lavadora y secadora de uso libre en la zona de servicio de la planta baja, 24h. Detergente incluido.' },
      ],
    },
    en: {
      eyebrow:'How it works',
      h:'Details that matter.',
      p:'What separates a boutique hostel from a generic one is how things work, not just what\u2019s on the list.',
      items:[
        { i:'key',    h:'Self check-in by code',
          d:'24h before arrival you get a personal code by email. You arrive, key it into the door and you\u2019re in. No waiting, no reception.' },
        { i:'wifi',   h:'Fibre with repeaters on every floor',
          d:'Fibre optic with three access points. Full coverage, perfect for video calls. We\u2019ve coworked here ourselves — it works.' },
        { i:'thermo', h:'Automated underfloor heating',
          d:'Three floors with radiant heating and cooling. Constant room temperature year-round. Nothing to touch.' },
        { i:'coffee', h:'Kitchen ready for 10',
          d:'Induction, oven, dishwasher, large fridge, semi-auto coffee machine. Dinnerware and cutlery for 12. Complimentary ground coffee.' },
        { i:'leaf',   h:'Private inner courtyard',
          d:'20 m² courtyard with furniture, shade and plants. For smoking, dining outdoors or working in the sun. Carrier 5G reaches here.' },
        { i:'wash',   h:'Laundry, free',
          d:'Washer and dryer for guests in the ground-floor service area, 24/7. Detergent included.' },
      ],
    },
  }[lang] || {};
  return (
    <section style={DD.wrap}>
      <div style={DD.inner}>
        <header style={DD.head}>
          <div style={DD.eyebrow}>{data.eyebrow}</div>
          <h2 style={DD.h}>{data.h}</h2>
          <p style={DD.p}>{data.p}</p>
        </header>
        <div style={DD.grid}>
          {data.items && data.items.map((it,i) => (
            <article key={i} style={DD.card}>
              <div style={DD.iconBox}><Icon name={it.i} size={22}/></div>
              <h3 style={DD.cardH}>{it.h}</h3>
              <p style={DD.cardD}>{it.d}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
const DD = {
  wrap:{ padding:'80px 0', background:'#FAFAFA' },
  inner:{ maxWidth:1280, margin:'0 auto', padding:'0 28px' },
  head:{ maxWidth:680, marginBottom:40 },
  eyebrow:{ fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:12,
            letterSpacing:'.25em', textTransform:'uppercase', color:'#6B6B6B' },
  h:{ fontFamily:'Montserrat, sans-serif', fontWeight:900, fontSize:'clamp(32px,3.6vw,52px)',
      lineHeight:1, letterSpacing:'-0.02em', margin:'14px 0 16px',
      textTransform:'uppercase', color:'#1A1A1A' },
  p:{ fontFamily:'Inter, sans-serif', fontSize:16, color:'#2B2B2B', lineHeight:1.55, margin:0 },
  grid:{ display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(280px,1fr))', gap:16 },
  card:{ background:'#fff', border:'1px solid #ECECEC', borderRadius:16,
         padding:'24px 22px 26px' },
  iconBox:{ width:46, height:46, borderRadius:12, background:'#FFFBEA',
            display:'inline-flex', alignItems:'center', justifyContent:'center',
            color:'#1A1A1A', marginBottom:14 },
  cardH:{ fontFamily:'Montserrat, sans-serif', fontWeight:800, fontSize:16,
          color:'#1A1A1A', margin:'0 0 8px', letterSpacing:'-0.005em' },
  cardD:{ fontFamily:'Inter, sans-serif', fontSize:14, color:'#2B2B2B',
          lineHeight:1.55, margin:0 },
};

/* ============== LO QUE NO OFRECEMOS (honestidad) ============== */
function ServicesNot() {
  const { lang } = useT();
  const data = {
    es: {
      eyebrow:'Honestidad',
      h:'Lo que no ofrecemos.',
      p:'Mejor saberlo antes que tener una sorpresa al llegar.',
      items:[
        ['Recepción atendida 24/7', 'Check-in por código. Atención por WhatsApp si hace falta.'],
        ['Servicio de habitaciones', 'Cocina común, no hay carta ni room service.'],
        ['Limpieza durante la estancia', 'Limpieza profesional entre estancias. Durante la tuya, la cocina y baños los cuidamos entre todos.'],
        ['Mascotas', 'No se admiten, ni siquiera pequeñas.'],
        ['Fiestas', 'Silencio de 22:00 a 08:00. Pensado para descanso.'],
      ],
    },
    en: {
      eyebrow:'Honest fit',
      h:'What we don\u2019t offer.',
      p:'Better you know now than find out on arrival.',
      items:[
        ['Staffed 24/7 reception', 'Self check-in by code. WhatsApp support if anything\u2019s needed.'],
        ['Room service', 'Shared kitchen, no menu and no in-room service.'],
        ['Cleaning during your stay', 'Professional cleaning between stays. During yours, we share kitchen and bathrooms.'],
        ['Pets', 'Not allowed, not even small ones.'],
        ['Parties', 'Quiet hours 22:00–08:00. Built for rest.'],
      ],
    },
  }[lang] || {};
  return (
    <section style={SN.wrap}>
      <div style={SN.inner}>
        <header style={SN.head}>
          <div style={SN.eyebrow}>{data.eyebrow}</div>
          <h2 style={SN.h}>{data.h}</h2>
          <p style={SN.p}>{data.p}</p>
        </header>
        <ul style={SN.list}>
          {data.items && data.items.map(([h,d],i) => (
            <li key={i} style={SN.li}>
              <span style={SN.x}><Icon name="x" size={14}/></span>
              <div>
                <div style={SN.lh}>{h}</div>
                <div style={SN.ld}>{d}</div>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}
const SN = {
  wrap:{ padding:'70px 0', background:'#fff' },
  inner:{ maxWidth:900, margin:'0 auto', padding:'0 28px' },
  head:{ marginBottom:32, maxWidth:640 },
  eyebrow:{ fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:12,
            letterSpacing:'.25em', textTransform:'uppercase', color:'#6B6B6B' },
  h:{ fontFamily:'Montserrat, sans-serif', fontWeight:900, fontSize:'clamp(28px,3.2vw,42px)',
      lineHeight:1.05, letterSpacing:'-0.02em', margin:'14px 0 14px',
      textTransform:'uppercase', color:'#1A1A1A' },
  p:{ fontFamily:'Inter, sans-serif', fontSize:16, color:'#2B2B2B', lineHeight:1.55, margin:0 },
  list:{ listStyle:'none', padding:0, margin:0,
         display:'flex', flexDirection:'column', gap:0,
         borderTop:'1px solid #ECECEC' },
  li:{ display:'flex', gap:14, alignItems:'flex-start',
       padding:'18px 0', borderBottom:'1px solid #ECECEC' },
  x:{ width:28, height:28, borderRadius:8, background:'#FFF5F2', color:'#C25B42',
      display:'inline-flex', alignItems:'center', justifyContent:'center', flexShrink:0,
      marginTop:2 },
  lh:{ fontFamily:'Montserrat, sans-serif', fontWeight:800, fontSize:15,
       color:'#1A1A1A', marginBottom:4 },
  ld:{ fontFamily:'Inter, sans-serif', fontSize:14, color:'#6B6B6B', lineHeight:1.55 },
};

/* ============== APP ============== */
function ServicesApp() {
  return (
    <div data-screen-label="Website · Servicios">
      <Nav/>
      <ServicesHeader/>
      <Servicios hideHead={true}/>
      <ServicesDeepDive/>
      <ServicesNot/>
      <ReservarHome/>
      <Footer/>
    </div>
  );
}
window.ServicesApp = ServicesApp;