// ZARK Rubí — Etenon, Plans, App, FAQs, Footer [CA]

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">Maquinària</span>
            <h2 className="display" style={{ color: '#fff', margin: '22px 0 28px' }}>
              Maquinària professional. <span style={{ color: 'var(--rust-500)', fontStyle: 'italic' }}>Sense escatimar.</span>
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--fg2)', margin: '0 0 18px', maxWidth: 520 }}>
              ZARK forma part de la xarxa oficial de centres <strong style={{ color: '#fff', fontWeight: 600 }}>Etenon Fitness</strong>, el major distribuïdor espanyol d'equipament professional amb més de 20 anys al sector.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--fg2)', margin: '0 0 32px', maxWidth: 520 }}>
              Les seves màquines estan fabricades per a l'ús diari intensiu: disseny ergonòmic, materials de primera i un estàndard professional que es nota des del primer entrenament. La millor maquinària de gimnàs disponible a Rubí, sense excepcions.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16, borderLeft: '4px solid var(--rust-500)', paddingLeft: 26 }}>
              {['Sense màquines espatllades.', 'Sense cartells de "fora de servei".', 'Sense excuses.'].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àquines Etenon Fitness a 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" }}>Anys<br />d'experiència</div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function Pricing() {
  const plans = [
  { name: 'FLUX', tag: 'Quota mensual', mo: '45', cents: '', period: '/mes', sub: 'Matrícula: 30€', note: 'Sense permanència', hot: false },
  { name: 'SOLID', tag: 'Quota trimestral', mo: '42', cents: ',67', period: '/mes', sub: '128€ cada 3 mesos', note: 'Sense matrícula · Estalvies 37€', hot: true, badge: 'Recomanat' },
  { name: 'FORGE', tag: 'Quota semestral', mo: '39', cents: ',83', period: '/mes', sub: '239€ cada 6 mesos', note: 'Sense matrícula · Estalvies 61€', hot: false },
  { name: 'ALL-IN', tag: 'Quota anual', mo: '36', cents: ',67', period: '/mes', sub: "440€ a l'any", note: 'Sense matrícula · Estalvies 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" }}>Plans i preus</span>
          <h2 className="display" style={{ color: '#fff', margin: '22px 0 0' }}>
            Tria el teu pla. <span style={{ color: 'var(--rust-500)', fontStyle: 'italic' }}>Comença avui.</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 }}>Gimnàs sense permanència en tots els plans. Sense lletra petita. Sense sorpreses.</p>
          <p style={{ fontSize: 15, color: 'var(--fg2)', margin: '0 0 22px' }}>Tens dubtes sobre quin pla s'adapta millor a tu? Escriu-nos i t'ajudem a triar.</p>
          <a href="#contacto" className="btn btn-ghost">Contacta'ns <i data-lucide="arrow-right" className="ic"></i></a>
        </div>
      </div>
    </section>);

}

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' }}>
              Apunta't en menys de 5 minuts
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: 'rgba(255,255,255,0.92)', margin: '0 0 32px', maxWidth: 480 }}>
              Sense papers, sense esperes. Descarrega't l'app de ZARK, tria el teu pla i comença a entrenar al teu gimnàs 24 hores de Rubí quan vulguis.
            </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>Descarrega-la a</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 a</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>);

}

function Footer() {
  const contacts = [
  ['map-pin', 'Ctra. Molins de Rei, Km. 13, Nau 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">Contacte</span>
            <h2 className="display" style={{ color: '#fff', margin: '20px 0 0', maxWidth: '14ch' }}>
              Tens alguna pregunta? <span style={{ color: 'var(--rust-500)', fontStyle: 'italic' }}>Som 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)' }}>El teu gimnàs 24 hores a Rubí · Sense permanència</div>
          <div className="mono" style={{ fontSize: 12, color: 'var(--fg3)' }}>© 2026 Zark Gym. Tots els drets reservats.</div>
        </div>
      </div>
    </footer>);

}

function FaqSection() {
  const faqs = [
    { n: '01', q: 'Puc provar el gimnàs abans de apuntar-me?', a: "Sí. Pots venir un dia de prova per 8 €. Només has d'apropar-te a recepció, portar roba esportiva i, si vols dutxar-te després, una tovallola i xancletes. L'entrada inclou accés a tota la sala de musculació i a totes les instal·lacions. Si t'apuntes aquell mateix dia, els 8 € es descompten de la primera quota." },
    { n: '02', q: 'Què necessito portar el primer dia?', a: "Roba i sabatilles esportives, una tovallola (obligatòria per recolzar a les màquines), cadenat per a la taquilla i xancletes si fas servir les dutxes. No cal portar res més. El nostre equip t'explica com funciona tot abans que comencis." },
    { n: '03', q: 'Què inclou la quota mensual? Hi ha extres a pagar?', a: "La quota mensual inclou accés il·limitat a la sala de musculació i ús de vestuaris i dutxes. Sense càrrecs addicionals per serveis no contractats. El que veus al preu és tot el que pagues. No hi ha extres ni sorpreses al rebut." },
    { n: '04', q: "Hi ha algun compromís mínim de permanència? Què passa si vull deixar d'anar-hi?", a: "No hi ha permanència. Al Zark Gym Rubí t'apuntes i pots donar-te de baixa quan vulguis, sense penalització ni justificació. Pagues només mentre ets soci. No hi ha contractes llargs ni lletres petites. Si en algun moment vols pausar o marxar, simplement avisa'ns abans del dia 20 del mes anterior." },
    { n: '05', q: 'Com em dono de baixa?', a: "Demana-ho a recepció abans del dia 20 del mes en curs. Et confirmem la baixa per escrit en menys de 24 hores. No necessites cap justificant ni has de donar explicacions." },
    { n: '06', q: 'Hauré de esperar per usar les màquines?', a: "Normalment no. Som un gimnàs proper, no una gran cadena massificada, de manera que l'habitual és que puguis usar les màquines sense esperar. Si algun dia coincideixes amb més gent de l'habitual, a recepció t'orientem." },
    { n: '07', q: 'Mai no he anat a un gimnàs. Algú m\'ajuda a començar?', a: "Sí. El primer dia t'ensenyem les instal·lacions, t'expliquem com usar les màquines principals i t'orientem sobre per on començar segons els teus objectius. Tenim algú disponible per ajudar-te sempre que ho necessitis. No cal que sàpigues res prèviament." },
    { n: '08', q: 'Puc venir a entrenar a qualsevol hora? Quines zones té el gimnàs?', a: "Sí, com a gimnàs 24 hores a Rubí pots venir a qualsevol hora del dia o la nit, els 365 dies de l'any. No cal reservar ni avisar amb antelació: arribes, fitxes a recepció i entrenes. El gimnàs compta amb zona de musculació amb peses i màquines, zona de cardio, zona HYROX i vestuaris amb dutxes. Tot inclòs a la quota mensual." },
    { n: '09', q: "Puc pausar la quota si em lesiono o me'n vaig de vacances?", a: "Si et lesiones o tens una baixa mèdica, parla amb nosaltres: busquem una solució. Com que no hi ha permanència, en molts casos el més senzill és tramitar la baixa i donar-te d'alta de nou quan et recuperis sense cap cost extra. Per a absències per vacances o feina, explica'ns la teva situació: som un gimnàs petit i sempre preferim trobar una solució raonable." },
    { n: '10', q: 'Puc venir acompanyat? Hi ha alguna opció per portar un amic o familiar?', a: "Clar. Si vols venir amb algú que encara no és soci, pot venir amb una entrada de dia per 8 €. Si ja sou socis tots dos, podeu entrenar junts sense restriccions. Si us apunteu els dos, millor: com més gent entrena, millor ambient es crea al gimnàs." },
  ];

  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">Preguntes freqüents</span>
          <h2 className="display" style={{ color: '#fff', margin: '22px 0 0' }}>
            El que necessites saber <span style={{ color: 'var(--rust-500)', fontStyle: 'italic' }}>abans d'apuntar-te.</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 });