﻿// ZARK Rubí — Maquinaria Etenon, Planes, Apúntate, Footer

// BLOQUE 5 — Maquinaria Etenon
function Etenon() {
  return (
    <section id="maquinaria" className="section">
      <div className="wrap">
        <div className="etenon-grid" style={{ display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 64, alignItems: 'center' }}>
          <div className="reveal">
            <span className="eyebrow">Maquinaria</span>
            <h2 className="display" style={{ color: '#fff', margin: '22px 0 28px' }}>
              Maquinaria profesional. <span style={{ color: 'var(--rust-500)', fontStyle: 'italic' }}>Sin escatimar.</span>
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--fg2)', margin: '0 0 18px', maxWidth: 520 }}>
              ZARK forma parte de la red oficial de centros <strong style={{ color: '#fff', fontWeight: 600 }}>Etenon Fitness</strong>, el mayor distribuidor español de equipamiento profesional con más de 20 años en el sector.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--fg2)', margin: '0 0 32px', maxWidth: 520 }}>
              Sus máquinas están fabricadas para el uso diario intensivo: diseño ergonómico, materiales de primera y un estándar profesional que se nota desde el primer entrenamiento. La mejor maquinaria de gimnasio disponible en Rubí, sin excepciones.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16, borderLeft: '4px solid var(--rust-500)', paddingLeft: 26 }}>
              {['Sin máquinas rotas.', 'Sin carteles de "fuera de servicio".', 'Sin excusas.'].map((t) =>
              <div key={t} className="display" style={{ fontSize: 'clamp(30px,3.6vw,48px)', color: '#fff' }}>{t}</div>
              )}
            </div>
          </div>
          <div className="reveal" style={{ position: 'relative' }}>
            <div style={{ position: 'relative', borderRadius: 'var(--r-md)', overflow: 'hidden', border: '1px solid var(--ink-600)' }}>
              <img src="assets/etenon-floor2.webp" alt="Sala de máquinas Etenon Fitness en ZARK" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
            </div>
            <div className="etenon-stat" style={{
              position: 'absolute', left: -18, bottom: -22, background: 'var(--rust-500)', padding: '22px 28px',
              borderRadius: 'var(--r-md)', boxShadow: 'var(--shadow-lg)', textAlign: "left"
            }}>
              <div className="display" style={{ fontSize: 'clamp(40px,5vw,58px)', color: '#fff', lineHeight: 0.9, textAlign: "center", height: "52px" }}>+20</div>
              <div style={{ font: '700 11px/1.3 var(--font-sans)', letterSpacing: '.16em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.92)', marginTop: 6, textAlign: "left" }}>Años de<br />experiencia</div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// BLOQUE 6 — Planes y precios
function Pricing() {
  const plans = [
  { name: 'FLUX', tag: 'Cuota mensual', mo: '45', cents: '', period: '/mes', sub: 'Matrícula: 30€', note: 'Sin permanencia', hot: false },
  { name: 'SOLID', tag: 'Cuota trimestral', mo: '42', cents: ',67', period: '/mes', sub: '128€ cada 3 meses', note: 'Sin matrícula · Ahorras 37€', hot: true, badge: 'Recomendado' },
  { name: 'FORGE', tag: 'Cuota semestral', mo: '39', cents: ',83', period: '/mes', sub: '239€ cada 6 meses', note: 'Sin matrícula · Ahorras 61€', hot: false },
  { name: 'ALL-IN', tag: 'Cuota anual', mo: '36', cents: ',67', period: '/mes', sub: '440€ al año', note: 'Sin matrícula · Ahorras 130€', hot: false }];

  return (
    <section id="planes" className="section" style={{ background: 'var(--ink-800)', borderTop: '1px solid var(--ink-600)' }}>
      <div className="wrap">
        <div className="reveal" style={{ textAlign: 'center', marginBottom: 56 }}>
          <span className="eyebrow center" style={{ fontWeight: "700" }}>Planes y precios</span>
          <h2 className="display" style={{ color: '#fff', margin: '22px 0 0' }}>
            Elige tu plan. <span style={{ color: 'var(--rust-500)', fontStyle: 'italic' }}>Empieza hoy.</span>
          </h2>
        </div>
        <div className="plan-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 20, alignItems: 'stretch' }}>
          {plans.map((p, i) =>
          <div key={p.name} className="reveal" style={{
            background: p.hot ? 'var(--ink-900)' : 'transparent',
            border: p.hot ? '1.5px solid var(--rust-500)' : '1px solid var(--ink-600)',
            borderRadius: 'var(--r-md)', padding: '52px 38px 46px', position: 'relative',
            display: 'flex', flexDirection: 'column', transitionDelay: i * 60 + 'ms',
            boxShadow: p.hot ? 'var(--shadow-rust)' : 'none'
          }}>
              {p.hot && <div style={{ position: 'absolute', top: -1, right: 28, background: 'var(--rust-500)', color: '#fff', font: '700 11px/1 var(--font-sans)', letterSpacing: '.14em', textTransform: 'uppercase', padding: '10px 16px', borderRadius: '0 0 4px 4px', display: 'flex', alignItems: 'center', gap: 6 }}><i data-lucide="star" style={{ width: 13, height: 13 }}></i>{p.badge}</div>}
              <div style={{ font: '700 12px/1 var(--font-sans)', letterSpacing: '.16em', textTransform: 'uppercase', color: p.hot ? 'var(--rust-400)' : 'var(--fg3)' }}>{p.tag}</div>
              <h3 className="display" style={{ fontSize: 46, color: '#fff', margin: '20px 0 30px' }}>{p.name}</h3>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 2, marginBottom: 8 }}>
                <span className="display" style={{ fontSize: 74, color: p.hot ? 'var(--rust-500)' : '#fff', lineHeight: 0.9 }}>{p.mo}</span>
                <span className="display" style={{ fontSize: 40, color: p.hot ? 'var(--rust-500)' : '#fff' }}>{p.cents}€</span>
                <span className="mono" style={{ fontSize: 15, color: 'var(--fg2)', marginLeft: 4 }}>{p.period}</span>
              </div>
              <div style={{ fontSize: 16, color: 'var(--ink-200)' }}>{p.sub}</div>
              <div style={{ borderTop: '1px solid var(--ink-600)', marginTop: 36, paddingTop: 24, display: 'flex', alignItems: 'center', gap: 10, fontSize: 15, fontWeight: 600, color: 'var(--success)' }}>
                <i data-lucide="check" style={{ width: 18, height: 18, flex: 'none' }}></i>{p.note}
              </div>
            </div>
          )}
        </div>
        <div className="reveal" style={{ textAlign: 'center', marginTop: 48 }}>
          <p style={{ fontSize: 16, color: 'var(--ink-200)', margin: '0 0 6px', fontWeight: 600 }}>Gimnasio sin permanencia en todos los planes. Sin letra pequeña. Sin sorpresas.</p>
          <p style={{ fontSize: 15, color: 'var(--fg2)', margin: '0 0 22px' }}>¿Tienes dudas sobre qué plan se adapta mejor a ti? Escríbenos y te ayudamos a elegir.</p>
          <a href="#contacto" className="btn btn-ghost">Contáctanos <i data-lucide="arrow-right" className="ic"></i></a>
        </div>
      </div>
    </section>);

}

// BLOQUE 7 — Apúntate / App
function AppSignup() {
  return (
    <section id="app" className="section">
      <div className="wrap">
        <div className="tex-rust-field app-band" style={{ position: 'relative', overflow: 'hidden', borderRadius: 'var(--r-md)', padding: 'clamp(40px,5vw,72px)', display: 'grid', gridTemplateColumns: '1.2fr 0.8fr', gap: 48, alignItems: 'center' }}>
          <div style={{ position: 'relative' }}>
            <span style={{ font: '700 13px/1 var(--font-sans)', letterSpacing: '.22em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.85)' }}>App ZARK</span>
            <h2 className="display" style={{ color: '#fff', margin: '18px 0 18px', maxWidth: '16ch' }}>
              Apúntate en menos de 5 minutos
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: 'rgba(255,255,255,0.92)', margin: '0 0 32px', maxWidth: 480 }}>
              Sin papeles, sin esperas. Descárgate la app de ZARK, elige tu plan y empieza a entrenar en tu gimnasio 24 horas de Rubí cuando quieras.
            </p>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <a href="https://apps.apple.com/es/app/zark-gym/id6761776397" target="_blank" rel="noopener" className="store-btn">
                <svg viewBox="0 0 384 512" width="22" height="22" fill="currentColor" aria-hidden="true"><path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"></path></svg>
                <span><small>Descárgala en</small>App Store</span>
              </a>
              <a href="https://play.google.com/store/apps/details?id=com.keygo365.zark" target="_blank" rel="noopener" className="store-btn">
                <svg viewBox="0 0 512 512" width="22" height="22" aria-hidden="true"><path fill="#00d2ff" d="M48 59.49v393a14.83 14.83 0 0 0 25.31 10.5L256 285.31 73.31 49A14.83 14.83 0 0 0 48 59.49z"></path><path fill="#00f076" d="M345.8 174 89.22 32.64l-.16-.09c-14.06-7.72-31.66 7.51-25 21.06L256 285.31z"></path><path fill="#ff3a44" d="M256 285.31 64.08 458.39c-6.69 13.55 11 28.78 25 21.06l.16-.09L345.8 337z"></path><path fill="#ffb700" d="M449.36 232.55 345.8 174l-89.8 111.31L345.8 337l103.56-58.51a25.18 25.18 0 0 0 0-45.94z"></path></svg>
                <span><small>Disponible en</small>Google Play</span>
              </a>
            </div>
          </div>
          <div className="app-icon-wrap" style={{ position: 'relative', display: 'flex', justifyContent: 'center' }}>
            <div style={{ position: 'relative', width: 200, height: 200, background: 'var(--ink-900)', borderRadius: 44, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'var(--shadow-lg)', border: '1px solid rgba(255,255,255,0.12)' }}>
              <img src="assets/logo-mark.png" alt="ZARK app" style={{ width: 118 }} />
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// BLOQUE 8 — Footer y contacto
function Footer() {
  const contacts = [
  ['map-pin', 'Ctra. Molins de Rei, Km. 13, Nave 79 · Rubí, Barcelona', 'https://maps.app.goo.gl/StoiBjQeJ5VYtfJ37', '_blank'],
  ['phone', '638 61 75 17', 'tel:638617517'],
  ['mail', 'zarkgym@gmail.com', 'mailto:zarkgym@gmail.com'],
  ['instagram', '@zarkgym24', 'https://instagram.com/zarkgym24']];

  return (
    <footer id="contacto" style={{ background: 'var(--ink-900)', borderTop: '1px solid var(--ink-600)' }}>
      <div className="wrap" style={{ paddingTop: 88, paddingBottom: 56 }}>
        <div className="footer-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'start' }}>
          <div>
            <span className="eyebrow">Contacto</span>
            <h2 className="display" style={{ color: '#fff', margin: '20px 0 0', maxWidth: '14ch' }}>
              ¿Tienes alguna pregunta? <span style={{ color: 'var(--rust-500)', fontStyle: 'italic' }}>Estamos aquí.</span>
            </h2>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            {contacts.map(([ic, label, href, target]) =>
            <a key={label} href={href} target={target || '_self'} rel={target === '_blank' ? 'noopener noreferrer' : undefined} style={{
              display: 'flex', alignItems: 'center', gap: 16, padding: '18px 0', textDecoration: 'none',
              borderBottom: '1px solid var(--ink-700)', color: '#fff', transition: 'color var(--dur)'
            }}
            onMouseEnter={(e) => e.currentTarget.style.color = 'var(--rust-300)'}
            onMouseLeave={(e) => e.currentTarget.style.color = '#fff'}>
                <span style={{ width: 44, height: 44, flex: 'none', borderRadius: 'var(--r-md)', background: 'var(--ink-800)', border: '1px solid var(--ink-600)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--rust-400)' }}>
                  {ic === 'instagram' ?
                <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="2" width="20" height="20" rx="5"></rect><circle cx="12" cy="12" r="4.2"></circle><circle cx="17.4" cy="6.6" r="1.1" fill="currentColor" stroke="none"></circle></svg> :
                <i data-lucide={ic} style={{ width: 20, height: 20 }}></i>}
                </span>
                <span style={{ fontSize: 16, fontWeight: 500 }}>{label}</span>
              </a>
            )}
          </div>
        </div>
      </div>
      <div style={{ borderTop: '1px solid var(--ink-600)' }}>
        <div className="wrap footer-bottom" style={{ padding: '28px 40px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 20, flexWrap: 'wrap' }}>
          <Logo height={32} hideWord />
          <div style={{ font: '700 12px/1 var(--font-sans)', letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--fg2)' }}>Tu gimnasio 24 horas en Rubí · Sin permanencia</div>
          <div className="mono" style={{ fontSize: 12, color: 'var(--fg3)' }}>© 2026 Zark Gym. Todos los derechos reservados.</div>
        </div>
      </div>
    </footer>);

}

// BLOQUE — FAQs
function FaqSection() {
  const faqs = [
    {
      n: '01',
      q: '¿Puedo probar el gimnasio antes de apuntarme?',
      a: 'Sí. Puedes venir un día de prueba por 8 €. Solo tienes que acercarte a recepción, traer ropa deportiva y, si quieres ducharte después, una toalla y chanclas. La entrada incluye acceso a toda la sala de musculación y a todas las instalaciones. Si te apuntas ese mismo día, los 8 € se descuentan de la primera cuota.',
    },
    {
      n: '02',
      q: '¿Qué necesito traer el primer día?',
      a: 'Ropa y zapatillas deportivas, una toalla (obligatoria para apoyar en las máquinas), candado para la taquilla y chanclas si vas a usar las duchas. No necesitas traer nada más. Nuestro equipo te explica cómo funciona todo antes de que empieces.',
    },
    {
      n: '03',
      q: '¿Qué incluye la cuota mensual? ¿Hay extras que pagar?',
      a: 'La cuota mensual incluye acceso ilimitado a la sala de musculación y uso de vestuarios y duchas. Sin cargos adicionales por servicios no contratados. Lo que ves en el precio es todo lo que pagas. No hay extras ni sorpresas en el recibo.',
    },
    {
      n: '04',
      q: '¿Hay algún compromiso mínimo de permanencia? ¿Qué pasa si quiero dejar de ir?',
      a: 'No hay permanencia. En Zark Gym Rubí te apuntas y puedes darte de baja cuando quieras, sin penalización ni justificación. Pagas solo mientras eres socio. No hay contratos largos ni letras pequeñas. Si en algún momento quieres pausar o irte, simplemente avísanos antes del día 20 del mes anterior.',
    },
    {
      n: '05',
      q: '¿Cómo me doy de baja?',
      a: 'Pídelo en recepción antes del día 20 del mes en curso. Te confirmamos la baja por escrito en menos de 24 horas. No necesitas ningún justificante ni dar explicaciones.',
    },
    {
      n: '06',
      q: '¿Tendré que esperar para usar las máquinas?',
      a: 'Normalmente no. Somos un gimnasio cercano, no una gran cadena masificada, así que lo habitual es que puedas usar las máquinas sin esperar. Si algún día coincides con más gente de lo habitual, en recepción te orientamos.',
    },
    {
      n: '07',
      q: 'No he ido nunca a un gimnasio. ¿Alguien me ayuda a empezar?',
      a: 'Sí. El primer día te enseñamos las instalaciones, te explicamos cómo usar las máquinas principales y te orientamos sobre por dónde empezar según tus objetivos. Tenemos a alguien disponible para ayudarte siempre que lo necesites. No hace falta que sepas nada de antemano.',
    },
    {
      n: '08',
      q: '¿Puedo venir a entrenar a cualquier hora? ¿Qué zonas tiene el gimnasio?',
      a: 'Sí, como gimnasio 24 horas en Rubí puedes venir a cualquier hora del día o la noche, los 365 días del año. No hay que reservar ni avisar con antelación: llegas, fichas en recepción y entrenas. El gimnasio cuenta con zona de musculación con pesas y máquinas, zona de cardio, zona HYROX y vestuarios con duchas. Todo incluido en la cuota mensual.',
    },
    {
      n: '09',
      q: '¿Puedo pausar la cuota si me lesiono o me voy de vacaciones?',
      a: 'Si te lesionas o tienes una baja médica, habla con nosotros: buscamos una solución. Al no haber permanencia, en muchos casos lo más sencillo es tramitar la baja y darte de alta de nuevo cuando estés recuperado sin ningún coste extra. Para ausencias por vacaciones o trabajo, cuéntanos tu situación: somos un gimnasio pequeño y siempre preferimos encontrar una solución razonable.',
    },
    {
      n: '10',
      q: '¿Puedo venir acompañado? ¿Hay alguna opción para traer a un amigo o familiar?',
      a: 'Claro. Si quieres venir con alguien que aún no es socio, puede venir con una entrada de día por 8 €. Si ya sois socios los dos, podéis entrenar juntos sin restricciones. Si os apuntáis los dos, mejor: cuanta más gente entrena, mejor ambiente se crea en el gimnasio.',
    },
  ];

  const [open, setOpen] = React.useState(null);

  const toggle = (i) => setOpen(open === i ? null : i);

  return (
    <section id="faqs" className="section" style={{ background: 'var(--bg)' }}>
      <div className="wrap">
        <div className="reveal" style={{ marginBottom: 48 }}>
          <span className="eyebrow">Preguntas frecuentes</span>
          <h2 className="display" style={{ color: '#fff', margin: '22px 0 0' }}>
            Lo que necesitas saber <span style={{ color: 'var(--rust-500)', fontStyle: 'italic' }}>antes de apuntarte.</span>
          </h2>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {faqs.map((faq, i) => (
            <div
              key={i}
              className="reveal"
              style={{
                borderTop: '1px solid var(--ink-600)',
                ...(i === faqs.length - 1 ? { borderBottom: '1px solid var(--ink-600)' } : {}),
              }}
            >
              <button
                onClick={() => toggle(i)}
                style={{
                  width: '100%',
                  background: 'none',
                  border: 'none',
                  cursor: 'pointer',
                  padding: '20px 0',
                  display: 'flex',
                  alignItems: 'center',
                  gap: 20,
                  textAlign: 'left',
                }}
              >
                <span className="mono" style={{ fontSize: 12, color: 'var(--rust-500)', minWidth: 26, letterSpacing: '.1em' }}>{faq.n}</span>
                <h3 style={{ flex: 1, fontSize: 'clamp(15px,1.5vw,18px)', fontWeight: 600, color: '#fff', lineHeight: 1.3, margin: 0 }}>{faq.q}</h3>
                <svg
                  width="18" height="18" viewBox="0 0 18 18" fill="none"
                  style={{
                    flexShrink: 0,
                    transition: 'transform .25s',
                    transform: open === i ? 'rotate(180deg)' : 'rotate(0deg)',
                  }}
                >
                  <polyline points="3,6 9,12 15,6" stroke={open === i ? 'var(--rust-500)' : 'var(--fg2)'} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
                </svg>
              </button>
              <div style={{
                overflow: 'hidden',
                maxHeight: open === i ? 300 : 0,
                transition: 'max-height .35s ease',
              }}>
                <p style={{
                  fontSize: 15, lineHeight: 1.7, color: 'var(--fg2)',
                  padding: '0 0 24px 46px', margin: 0,
                }}>{faq.a}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Etenon, Pricing, AppSignup, FaqSection, Footer });