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

function TrustBand() {
  const items = [
  ['unlink', 'No lock-in'],
  ['clock', 'Open 24/7'],
  ['dumbbell', 'Premium equipment'],
  ['flame', 'HYROX Zone']];

  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 = [
  ['No lock-in', 'Nobody holds you here. Join when you want, leave when you want. No long contracts, no fine print.'],
  ['Fixed price', 'No surprise rate hikes, no hidden fees, no fine print. What you see is what you pay, every month.'],
  ['Professional Etenon equipment', 'High-performance machines in Rubí, always in perfect condition.'],
  ['900 m² to yourself', 'No queues, no crowding. More than enough space to train the way you deserve, any hour of the day or night.']];

  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">Why ZARK</span>
            <h2 className="display" style={{ color: '#fff', margin: '22px 0 0' }}>
              The gym Rubí <span style={{ color: 'var(--rust-500)', fontStyle: 'italic' }}>always deserved.</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: 'The most premium gym in Rubí. High quality equipment and super friendly staff. You can tell this is a project made with passion and not just another chain.',
      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: "I've been to many gyms, and this is one of the best I've been to. The equipment is out of this world, very aesthetic, with good lighting and the treatment at the inauguration was incredible. And they also have free parking. 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">Reviews</span>
          <h2 className="display" style={{ color: '#fff', margin: '22px 0 0' }}>
            What our members <span style={{ color: 'var(--rust-500)', fontStyle: 'italic' }}>are saying.</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', 'Cardio zone', 'The starting point of every session. Equipped for any pace, any goal and any level.'],
['settings-2', 'Guided machine zone', 'Leg extension, bicep curl, pullover and much more. Controlled, safe and progressive muscle work. Perfect for beginners and for those who already know what they\'re doing.'],
['dumbbell', 'Strength zone', 'Hack squat, T-bar row, incline press. For those chasing real performance and wanting to see numbers climb week after week.'],
['anvil', 'Free weights zone', 'A full range of dumbbells, barbells, adjustable benches and presses at multiple angles. Total freedom to train your way.'],
['flame', 'HYROX zone', 'AirBike, rowers, AirRunner and ski ergs. High-performance functional training in Rubí for when conventional training is no longer enough.']];


function ZoneHead() {
  return (
    <div className="reveal" style={{ marginBottom: 56, maxWidth: 1040 }}>
      <span className="eyebrow">The facilities</span>
      <h2 className="display" style={{ color: '#fff', margin: '22px 0 0' }}>
        Five zones. One goal: <span style={{ color: 'var(--rust-500)', fontStyle: 'italic' }}>your progress.</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 });