// ZARK Rubí — Trust band, Differentiators, Zones [CA]

function TrustBand() {
  const items = [
  ['unlink', 'Sense permanència'],
  ['clock', 'Obert 24/7'],
  ['dumbbell', 'Màquines premium'],
  ['flame', 'Zona HYROX']];

  return (
    <div style={{ borderTop: '1px solid var(--ink-600)', borderBottom: '1px solid var(--ink-600)', background: 'var(--ink-800)' }}>
      <div className="wrap trust-band" style={{ display: 'flex', alignItems: 'stretch', flexWrap: 'wrap' }}>
        {items.map(([ic, label], i) =>
        <div key={label} className="trust-item" style={{
          flex: '1 1 0', minWidth: 160, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12,
          padding: '26px 18px', borderLeft: i ? '1px solid var(--ink-600)' : 'none'
        }}>
            <i data-lucide={ic} style={{ width: 20, height: 20, color: 'var(--rust-400)', flex: 'none' }}></i>
            <span style={{ font: '700 14px/1.2 var(--font-sans)', letterSpacing: '.04em', textTransform: 'uppercase', color: '#fff' }}>{label}</span>
          </div>
        )}
      </div>
    </div>);

}

function Differentiators() {
  const items = [
  ['Sense permanència', "Aquí ningú no et reté. T'apuntes quan vols i te'n vas quan vols. Sense contractes llargs, sense lletra petita."],
  ['Preu fix', "Sense pujades sorpresa, sense assegurances ocultes, sense lletra petita. El que veus és el que pagues, cada mes."],
  ['Maquinària professional Etenon', "Equipament d'alt rendiment a Rubí, sempre en perfecte estat."],
  ['900 m² per a tu', 'Sense esperes, sense angoixes. Espai de sobres per entrenar com et mereixes, a qualsevol hora del dia o la nit.']];

  return (
    <section id="diferencias" className="section">
      <div className="wrap">
        <div className="diff-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start' }}>
          <div className="diff-head reveal">
            <span className="eyebrow">Per què ZARK</span>
            <h2 className="display" style={{ color: '#fff', margin: '22px 0 0' }}>
              El gimnàs que Rubí es <span style={{ color: 'var(--rust-500)', fontStyle: 'italic' }}>mereixia.</span>
            </h2>
          </div>
          <div>
            {items.map(([t, d], i) =>
            <div key={t} className="diff-row reveal" style={{
              display: 'grid', gridTemplateColumns: '96px 1fr', gap: 24, alignItems: 'center',
              padding: '26px 0', borderTop: '1px solid var(--ink-600)',
              borderBottom: i === items.length - 1 ? '1px solid var(--ink-600)' : 'none',
              transitionDelay: i * 60 + 'ms'
            }}>
                <span className="display" style={{ fontSize: 'clamp(46px,4.4vw,66px)', color: 'var(--rust-500)', lineHeight: 0.8 }}>{String(i + 1).padStart(2, '0')}</span>
                <div>
                  <h3 style={{ font: '700 clamp(19px,1.6vw,23px)/1.2 var(--font-sans)', color: '#fff', margin: '0 0 8px' }}>{t}</h3>
                  <p style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--fg2)', margin: 0 }}>{d}</p>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

function Reviews() {
  const reviews = [
    {
      name: 'Ámer Shboul Molina',
      avatar: 'assets/review-amer.jpg',
      stars: 5,
      text: 'El més premium de Rubí. Maquinaria d\'alta qualitat i personal super amable. Es nota que és un projecte fet des de la il·lusió i no una cadena més.',
      href: 'https://maps.app.goo.gl/AWUj6TgTYq7bRu8x6',
    },
    {
      name: 'Noe Berbel',
      avatar: 'assets/review-noe.png',
      stars: 5,
      text: 'Hemos hablado con los propietarios y se nota que estan muy pendientes de lo que queremos los clientes. La maquinaria tiene una pinta increíble, ¡el mejor gimnasio en el que he estado!',
      href: 'https://maps.app.goo.gl/d96g7NWXxZvkVRJB9',
    },
    {
      name: 'Albert Salas',
      avatar: 'assets/review-albert.png',
      stars: 5,
      text: 'He estat a molts gimnàs, i aquest és dels millors on he anat. La maquinaria és d\'un altre planeta, molt estètic, amb bones llums i el tracte a la inaguració va ser increible. I també tenen parking gratuït. 10/10',
      href: 'https://maps.app.goo.gl/72nHhBw5qV5kjtMD9',
    },
  ];

  const Stars = () => (
    <div style={{ display: 'flex', gap: 3, marginBottom: 16 }}>
      {[...Array(5)].map((_, i) => (
        <svg key={i} width="18" height="18" viewBox="0 0 24 24" fill="var(--rust-400)" stroke="none">
          <polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/>
        </svg>
      ))}
    </div>
  );

  return (
    <section className="section" style={{ background: 'var(--ink-900)', borderTop: '1px solid var(--ink-600)', borderBottom: '1px solid var(--ink-600)' }}>
      <div className="wrap">
        <div className="reveal" style={{ textAlign: 'center', marginBottom: 56 }}>
          <span className="eyebrow">Ressenyes</span>
          <h2 className="display" style={{ color: '#fff', margin: '22px 0 0' }}>
            El que diuen <span style={{ color: 'var(--rust-500)', fontStyle: 'italic' }}>els nostres socis.</span>
          </h2>
        </div>
        <div className="reviews-grid">
          {reviews.map((r, i) => (
            <a key={r.name} href={r.href} target="_blank" rel="noopener noreferrer"
              className="card reveal"
              style={{ padding: 36, display: 'flex', flexDirection: 'column', textDecoration: 'none', transitionDelay: i * 80 + 'ms' }}
              onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--rust-500)'; e.currentTarget.style.transform = 'translateY(-3px)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--ink-600)'; e.currentTarget.style.transform = 'none'; }}>
              <Stars />
              <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--fg2)', margin: '0 0 28px', flex: 1 }}>"{r.text}"</p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <img src={r.avatar} alt={r.name} style={{ width: 44, height: 44, borderRadius: '50%', objectFit: 'cover', border: '2px solid var(--ink-600)' }} />
                <div>
                  <div style={{ fontSize: 15, fontWeight: 700, color: '#fff' }}>{r.name}</div>
                  <div style={{ fontSize: 12, color: 'var(--rust-400)', fontWeight: 600, letterSpacing: '.06em' }}>Google Maps ↗</div>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

const ZONES = [
['heart-pulse', 'Zona de cardio', "El punt de partida de cada sessió. Equipada per a qualsevol ritme, qualsevol objectiu i qualsevol nivell."],
['settings-2', 'Zona de màquines guiades', "Extensió de quàdriceps, bíceps, pullover i molt més. Treball muscular controlat, segur i progressiu. Ideal per a qui comença i per a qui ja sap el que fa."],
['dumbbell', 'Zona de força', 'Hack squat, rem T, press inclinat. Per a qui busca rendiment real i vol veure números pujar setmana a setmana.'],
['anvil', 'Zona de pes lliure', "Tot tipus de manuelles, barres, bancs reclinables i presses amb diferents inclinacions. Llibertat total per entrenar a la teva manera."],
['flame', 'Zona HYROX', "AirBike, rems, AirRunner i skis. Entrenament funcional d'alt rendiment a Rubí per quan l'entrenament convencional se t'ha quedat petit."]];


function ZoneHead() {
  return (
    <div className="reveal" style={{ marginBottom: 56, maxWidth: 1040 }}>
      <span className="eyebrow">Les instal·lacions</span>
      <h2 className="display" style={{ color: '#fff', margin: '22px 0 0' }}>
        Cinc zones. Un únic objectiu: <span style={{ color: 'var(--rust-500)', fontStyle: 'italic' }}>que progressis.</span>
      </h2>
    </div>);

}

function Zones({ variant }) {
  if (variant === 'rows') {
    return (
      <section id="zonas" className="section" style={{ background: 'var(--ink-800)', borderTop: '1px solid var(--ink-600)', borderBottom: '1px solid var(--ink-600)' }}>
        <div className="wrap">
          <ZoneHead />
          <div>
            {ZONES.map(([ic, name, desc], i) =>
            <div key={name} className="zone-row reveal" style={{
              display: 'grid', gridTemplateColumns: '90px 1.1fr 1.4fr 56px', gap: 28, alignItems: 'center',
              padding: '30px 0', borderTop: '1px solid var(--ink-600)',
              borderBottom: i === ZONES.length - 1 ? '1px solid var(--ink-600)' : 'none',
              transitionDelay: i * 50 + 'ms'
            }}
            onMouseEnter={(e) => {e.currentTarget.querySelector('.zr-num').style.color = 'var(--rust-500)';}}
            onMouseLeave={(e) => {e.currentTarget.querySelector('.zr-num').style.color = 'var(--ink-500)';}}>
                <span className="display zr-num" style={{ fontSize: 44, color: 'var(--ink-500)', transition: 'color var(--dur)' }}>{String(i + 1).padStart(2, '0')}</span>
                <h3 className="display" style={{ fontSize: 'clamp(26px,2.6vw,34px)', color: '#fff', margin: 0 }}>{name}</h3>
                <p style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--fg2)', margin: 0 }}>{desc}</p>
                <div style={{ justifySelf: 'end', width: 52, height: 52, borderRadius: 'var(--r-md)', background: 'rgba(161,73,36,.14)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--rust-400)' }}>
                  <i data-lucide={ic} style={{ width: 24, height: 24 }}></i>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>);

  }
  if (variant === 'mosaic') {
    return (
      <section id="zonas" className="section" style={{ background: 'var(--ink-800)', borderTop: '1px solid var(--ink-600)', borderBottom: '1px solid var(--ink-600)' }}>
        <div className="wrap">
          <ZoneHead />
          <div className="zone-mosaic" style={{ display: 'grid', gridTemplateColumns: 'repeat(6,1fr)', gap: 20 }}>
            {ZONES.map(([ic, name, desc], i) => {
              const big = i === 0;
              return (
                <ZoneCard key={name} ic={ic} name={name} desc={desc} index={i} big={big}
                style={{ gridColumn: big ? 'span 3' : 'span ' + (i === 4 ? 3 : i % 2 === 1 ? 3 : 3) }} />);

            })}
          </div>
        </div>
      </section>);

  }
  return (
    <section id="zonas" className="section" style={{ background: 'var(--ink-800)', borderTop: '1px solid var(--ink-600)', borderBottom: '1px solid var(--ink-600)' }}>
      <div className="wrap">
        <ZoneHead />
        <div className="zone-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(6,1fr)', gap: 20 }}>
          {ZONES.map(([ic, name, desc], i) =>
          <ZoneCard key={name} ic={ic} name={name} desc={desc} index={i}
          style={{ gridColumn: i < 2 ? 'span 3' : 'span 2' }} />
          )}
        </div>
      </div>
    </section>);

}

function ZoneCard({ ic, name, desc, index, big, style }) {
  const imgH = big ? 260 : 188;
  return (
    <div className="card zone-card reveal" style={{
      position: 'relative', overflow: 'hidden', display: 'flex', flexDirection: 'column',
      transitionDelay: index * 60 + 'ms', ...style
    }}
    onMouseEnter={(e) => {e.currentTarget.style.borderColor = 'var(--rust-500)';e.currentTarget.style.transform = 'translateY(-3px)';}}
    onMouseLeave={(e) => {e.currentTarget.style.borderColor = 'var(--ink-600)';e.currentTarget.style.transform = 'none';}}>
      <div style={{ position: 'relative' }}>
        <img src={'assets/zone-' + index + '.webp'} alt={name}
        style={{ display: 'block', width: '100%', height: imgH, objectFit: 'cover' }} />
        <span className="display" style={{ ...{
            position: 'absolute', top: 0, left: 0, background: 'var(--rust-500)', color: '#fff',
            fontSize: big ? 44 : 36, lineHeight: 1, padding: big ? '16px 22px' : '13px 18px'
          }, fontSize: "36px" }}>{String(index + 1).padStart(2, '0')}</span>
      </div>
      <div style={{ padding: big ? 36 : 28, display: 'flex', flexDirection: 'column' }}>
        <h3 className="display" style={{ fontSize: big ? 'clamp(50px,5.2vw,82px)' : 'clamp(36px,4.4vw,72px)', color: '#fff', margin: '0 0 14px' }}>{name}</h3>
        <p style={{ fontSize: big ? 17 : 15, lineHeight: 1.55, color: 'var(--fg2)', margin: 0, maxWidth: big ? 460 : 'none' }}>{desc}</p>
      </div>
    </div>);

}

Object.assign(window, { TrustBand, Differentiators, Reviews, Zones, ZoneCard });