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

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">Equipment</span>
            <h2 className="display" style={{ color: '#fff', margin: '22px 0 28px' }}>
              Professional equipment. <span style={{ color: 'var(--rust-500)', fontStyle: 'italic' }}>No compromises.</span>
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--fg2)', margin: '0 0 18px', maxWidth: 520 }}>
              ZARK is part of the official <strong style={{ color: '#fff', fontWeight: 600 }}>Etenon Fitness</strong> network, Spain's largest distributor of professional gym equipment with over 20 years in the industry.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--fg2)', margin: '0 0 32px', maxWidth: 520 }}>
              Their machines are built for heavy daily use: ergonomic design, top-grade materials and a professional standard you'll feel from your very first session. The best gym equipment available in Rubí, without exception.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16, borderLeft: '4px solid var(--rust-500)', paddingLeft: 26 }}>
              {['No broken machines.', 'No "out of order" signs.', 'No 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="Etenon Fitness machines at 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" }}>Years of<br />experience</div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function Pricing() {
  const plans = [
  { name: 'FLUX', tag: 'Monthly membership', mo: '45', cents: '', period: '/mo', sub: 'Joining fee: €30', note: 'No lock-in', hot: false },
  { name: 'SOLID', tag: 'Quarterly membership', mo: '42', cents: '.67', period: '/mo', sub: '€128 every 3 months', note: 'No joining fee · Save €37', hot: true, badge: 'Recommended' },
  { name: 'FORGE', tag: '6-month membership', mo: '39', cents: '.83', period: '/mo', sub: '€239 every 6 months', note: 'No joining fee · Save €61', hot: false },
  { name: 'ALL-IN', tag: 'Annual membership', mo: '36', cents: '.67', period: '/mo', sub: '€440 per year', note: 'No joining fee · Save €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 & pricing</span>
          <h2 className="display" style={{ color: '#fff', margin: '22px 0 0' }}>
            Choose your plan. <span style={{ color: 'var(--rust-500)', fontStyle: 'italic' }}>Start today.</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 }}>No lock-in gym on any plan. No fine print. No surprises.</p>
          <p style={{ fontSize: 15, color: 'var(--fg2)', margin: '0 0 22px' }}>Not sure which plan is right for you? Get in touch and we'll help you choose.</p>
          <a href="#contacto" className="btn btn-ghost">Contact Us <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)' }}>ZARK App</span>
            <h2 className="display" style={{ color: '#fff', margin: '18px 0 18px', maxWidth: '16ch' }}>
              Sign up in under 5 minutes
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: 'rgba(255,255,255,0.92)', margin: '0 0 32px', maxWidth: 480 }}>
              No paperwork, no queues. Download the ZARK app, choose your plan and start training at your 24-hour gym in Rubí whenever you're ready.
            </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>Download on</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>Get it on</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, Unit 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">Contact</span>
            <h2 className="display" style={{ color: '#fff', margin: '20px 0 0', maxWidth: '14ch' }}>
              Got a question? <span style={{ color: 'var(--rust-500)', fontStyle: 'italic' }}>We're here.</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)' }}>Your 24-hour gym in Rubí · No lock-in</div>
          <div className="mono" style={{ fontSize: 12, color: 'var(--fg3)' }}>© 2026 Zark Gym. All rights reserved.</div>
        </div>
      </div>
    </footer>);

}

function FaqSection() {
  const faqs = [
    { n: '01', q: 'Can I try the gym before signing up?', a: 'Yes. You can come in for a day pass for €8. Just head to reception, bring your workout clothes and, if you\'d like to shower afterwards, a towel and flip-flops. The day pass includes full access to the weights floor and all facilities. If you sign up that same day, the €8 is deducted from your first month.' },
    { n: '02', q: 'What do I need to bring on my first day?', a: 'Workout clothes and trainers, a towel (required to place on machines), a padlock for your locker and flip-flops if you plan to use the showers. That\'s all you need. Our team will walk you through everything before you get started.' },
    { n: '03', q: 'What does the monthly membership include? Are there any extras?', a: 'The monthly fee includes unlimited access to the weights floor and use of changing rooms and showers. No additional charges for services you haven\'t signed up for. What you see in the price is all you pay. No extras, no surprises on your bill.' },
    { n: '04', q: 'Is there a minimum commitment period? What if I want to stop going?', a: 'There is no lock-in. At Zark Gym Rubí you sign up and can cancel at any time, no penalties, no questions asked. You only pay while you\'re a member. No long contracts, no fine print. If you ever want to pause or leave, just let us know before the 20th of the current month.' },
    { n: '05', q: 'How do I cancel my membership?', a: 'Request it at reception before the 20th of the month. We\'ll confirm your cancellation in writing within 24 hours. No documentation needed, no explanations required.' },
    { n: '06', q: 'Will I have to wait to use the machines?', a: 'Normally not. We\'re a close-knit gym, not a large overcrowded chain, so you\'ll usually be able to use the machines without waiting. If you happen to come on a busier day, reception can point you in the right direction.' },
    { n: '07', q: 'I\'ve never been to a gym before. Will someone help me get started?', a: 'Yes. On your first day we\'ll show you around, explain how to use the main machines and guide you on where to begin based on your goals. There\'s always someone available to help whenever you need it. No prior knowledge required.' },
    { n: '08', q: 'Can I train at any time? What areas does the gym have?', a: 'Yes, as a 24-hour gym in Rubí you can come at any hour of the day or night, 365 days a year. No need to book or give notice in advance: just arrive, check in at reception and train. The gym has a weights and machines floor, a cardio zone, a HYROX zone and changing rooms with showers. All included in the monthly membership.' },
    { n: '09', q: 'Can I pause my membership if I get injured or go on holiday?', a: 'If you get injured or have a medical leave, talk to us and we\'ll find a solution. Since there\'s no lock-in, in most cases the simplest option is to cancel and rejoin when you\'re back at no extra cost. For absences due to holidays or work, tell us your situation: we\'re a small gym and we always prefer to find a reasonable solution together.' },
    { n: '10', q: 'Can I bring someone with me? Is there an option to bring a friend or family member?', a: 'Of course. If you\'d like to come with someone who isn\'t yet a member, they can come with a day pass for €8. If you\'re both already members, you can train together without any restrictions. If you both sign up, even better: the more people training, the better the atmosphere in the gym.' },
  ];

  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">Frequently asked questions</span>
          <h2 className="display" style={{ color: '#fff', margin: '22px 0 0' }}>
            Everything you need to know <span style={{ color: 'var(--rust-500)', fontStyle: 'italic' }}>before joining.</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 });
