// Sections2 — English: 3-click setup, Simplicity, Migration, Product, Features, Disciplines, Testimonials, Pricing, FAQ, CTA, Footer

const { useState: _useS, useEffect: _useE } = React;

// ============================= 3-CLICK SETUP =============================
function ThreeClickSetup() {
  const [active, setActive] = _useS(0);
  const [ref, seen] = window.useOnScreen({ threshold: 0.25 });
  _useE(() => {
    if (!seen) return;
    const iv = setInterval(() => setActive(a => (a + 1) % 3), 3200);
    return () => clearInterval(iv);
  }, [seen]);

  const steps = [
    { n: '01', t: 'Pick your sport', d: 'Gymnastics, karate, yoga, swim, dance — your schedule and levels spin up automatically.' },
    { n: '02', t: 'Import your families', d: 'CSV, Google Sheets, or a link — or one-click from your current CRM. Duplicates handled for you.' },
    { n: '03', t: 'Turn on payments', d: 'One toggle — 2.2% cards, ACH, and recurring billing. Money on your account next business day.' },
  ];

  return (
    <section id="simple" ref={ref} style={{ padding:'120px 24px', background:'var(--bg)' }}>
      <div style={{ maxWidth: 1180, margin:'0 auto' }}>
        <div style={{ textAlign:'center', maxWidth: 760, margin:'0 auto 56px' }}>
          <p className="eyebrow" style={{ margin: 0 }}>Setup</p>
          <h2 className="display-lg" style={{ margin:'14px 0 16px', fontSize:'clamp(32px, 4.5vw, 52px)' }}>
            Three clicks. Your gym is live.
          </h2>
          <p className="lead" style={{ fontSize: 17 }}>
            No onboarding specialist. No setup fees. Most gyms launch the same evening they sign up
            and send their first schedule to parents that night.
          </p>
        </div>

        <div className="setup-grid" style={{ display:'grid', gridTemplateColumns:'0.9fr 1.1fr', gap: 48, alignItems:'center' }}>
          <div>
            {steps.map((s, i) => {
              const on = i === active;
              return (
                <button key={i} onClick={() => setActive(i)} style={{
                  display:'grid', gridTemplateColumns:'56px 1fr', gap: 18, alignItems:'flex-start',
                  width:'100%', textAlign:'left', cursor:'pointer',
                  padding:'20px 22px', borderRadius: 20, border:'1px solid transparent',
                  marginBottom: 10,
                  background: on ? 'var(--surface)' : 'transparent',
                  borderColor: on ? 'var(--border)' : 'transparent',
                  boxShadow: on ? 'var(--shadow-md)' : 'none',
                  transition: 'all .35s var(--ease-out)', fontFamily: 'inherit',
                }}>
                  <div style={{
                    width: 52, height: 52, borderRadius: 14,
                    background: on ? 'linear-gradient(135deg, #4d7dff, #7c5cff)' : 'var(--surface-2)',
                    border: on ? '1px solid rgba(124,92,255,0.4)' : '1px solid var(--border)',
                    boxShadow: on ? '0 0 28px rgba(124,92,255,0.40)' : 'none',
                    display:'grid', placeItems:'center',
                    color: on ? '#fff' : 'var(--fg-2)',
                    fontFamily:'var(--font-display)', fontWeight: 700, fontSize: 17,
                    transition: 'all .35s var(--ease-out)',
                  }}>{s.n}</div>
                  <div>
                    <h3 className="h3" style={{ margin: 0, color:'var(--fg-1)', fontSize: 20 }}>{s.t}</h3>
                    <p style={{ margin:'6px 0 0', color:'var(--fg-2)', fontSize: 14.5, lineHeight: 1.55 }}>{s.d}</p>
                    {on && (
                      <div style={{ height: 2, marginTop: 12, borderRadius: 2, background:'var(--surface-3)', overflow:'hidden' }}>
                        <div style={{
                          height:'100%', width:'100%',
                          background:'linear-gradient(90deg, #4d7dff, #7c5cff, #4dd4ff)',
                          animation:'qb-progress 3.2s linear', transformOrigin:'left',
                        }}/>
                      </div>
                    )}
                  </div>
                </button>
              );
            })}
          </div>
          <div className="step-preview" style={{
            borderRadius: 24, overflow:'hidden', height: 460,
            background:'linear-gradient(160deg, #06080f 0%, #070e2e 100%)',
            border:'1px solid rgba(124,92,255,0.25)',
            boxShadow:'0 24px 80px rgba(41,80,230,0.30)', position:'relative',
          }}>
            <div style={{
              position:'absolute', inset: 0, pointerEvents:'none',
              background:'radial-gradient(60% 50% at 50% 0%, rgba(77,212,255,0.18), transparent 60%)',
            }}/>
            {active === 0 && <StepSport/>}
            {active === 1 && <StepImport/>}
            {active === 2 && <StepPay/>}
          </div>
        </div>
      </div>
      <style>{`
        @keyframes qb-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
        @media (max-width: 900px) {
          .setup-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
          .step-preview { height: 520px !important; }
        }
      `}</style>
    </section>
  );
}

function StepSport() {
  const sports = window.QB_SPORTS.slice(0, 8);
  const [picked, setPicked] = _useS(5);
  _useE(() => {
    const iv = setInterval(() => setPicked(p => (p + 1) % sports.length), 900);
    return () => clearInterval(iv);
  }, []);
  return (
    <div style={{ padding: 28, height:'100%', display:'flex', flexDirection:'column', gap: 18, animation:'qb-fadeIn .5s' }}>
      <div style={{ display:'flex', gap: 8, alignItems:'center' }}>
        <span style={{ width: 8, height: 8, borderRadius: 99, background:'#4dd4ff', boxShadow:'0 0 10px #4dd4ff' }}/>
        <span style={{ fontFamily:'var(--font-mono)', fontSize: 11.5, color:'rgba(247,248,250,0.55)', letterSpacing:'0.08em', textTransform:'uppercase' }}>
          Step 1 · Choose sport
        </span>
      </div>
      <h4 style={{ margin:0, color:'#fff', fontFamily:'var(--font-display)', fontWeight: 600, fontSize: 22, letterSpacing:'-0.02em' }}>
        What does your gym teach?
      </h4>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 10, flex: 1 }}>
        {sports.map((s, i) => {
          const on = i === picked;
          return (
            <div key={s.key} style={{
              borderRadius: 14, border: on ? '1px solid rgba(124,92,255,0.60)' : '1px solid rgba(255,255,255,0.08)',
              background: on ? 'linear-gradient(135deg, rgba(77,125,255,0.20), rgba(124,92,255,0.18))' : 'rgba(255,255,255,0.03)',
              display:'grid', gridTemplateRows:'1fr auto', placeItems:'center',
              padding: 12, color: on ? '#fff' : 'rgba(247,248,250,0.65)',
              transition:'all .3s var(--ease-out)',
              boxShadow: on ? '0 0 24px rgba(124,92,255,0.30)' : 'none',
              transform: on ? 'translateY(-2px)' : 'none',
            }}>
              <window.SportIcon paths={s.paths} size={32}/>
              <span style={{ fontSize: 12, marginTop: 6, fontWeight: 500 }}>{s.label}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function StepImport() {
  const [n, setN] = _useS(0);
  _useE(() => {
    let v = 0;
    const iv = setInterval(() => { v = Math.min(248, v + 8); setN(v); if (v >= 248) clearInterval(iv); }, 40);
    return () => clearInterval(iv);
  }, []);
  const names = ['Thompson, A.','Martinez, R.','Patel, K.','O\'Brien, E.','Johnson, S.','Kim, D.','Garcia, L.','Nguyen, T.'];
  return (
    <div style={{ padding: 28, height:'100%', display:'flex', flexDirection:'column', gap: 14, animation:'qb-fadeIn .5s' }}>
      <div style={{ display:'flex', gap: 8, alignItems:'center' }}>
        <span style={{ width: 8, height: 8, borderRadius: 99, background:'#4dd4ff', boxShadow:'0 0 10px #4dd4ff' }}/>
        <span style={{ fontFamily:'var(--font-mono)', fontSize: 11.5, color:'rgba(247,248,250,0.55)', letterSpacing:'0.08em', textTransform:'uppercase' }}>
          Step 2 · Import
        </span>
      </div>
      <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between' }}>
        <h4 style={{ margin: 0, color:'#fff', fontFamily:'var(--font-display)', fontWeight: 600, fontSize: 20 }}>
          families.csv
        </h4>
        <span style={{ fontFamily:'var(--font-mono)', fontSize: 13, color:'#4dd4ff', fontWeight: 600 }}>
          {n} / 248
        </span>
      </div>
      <div style={{ height: 4, borderRadius: 4, background:'rgba(255,255,255,0.08)', overflow:'hidden' }}>
        <div style={{
          height:'100%', width: `${(n/248)*100}%`,
          background:'linear-gradient(90deg, #4d7dff, #7c5cff, #4dd4ff)',
          transition:'width .04s linear', boxShadow:'0 0 12px #7c5cff',
        }}/>
      </div>
      <div style={{
        flex: 1, borderRadius: 14, border:'1px solid rgba(255,255,255,0.08)',
        background:'rgba(255,255,255,0.02)', overflow:'hidden',
      }}>
        {names.map((nm, i) => {
          const done = n > (i + 1) * 28;
          return (
            <div key={i} style={{
              display:'grid', gridTemplateColumns:'32px 1fr auto',
              gap: 12, padding:'9px 16px', alignItems:'center',
              borderBottom: i < names.length - 1 ? '1px solid rgba(255,255,255,0.04)' : 'none',
              opacity: done ? 1 : 0.4, transition:'opacity .3s',
            }}>
              <div style={{
                width: 22, height: 22, borderRadius: 999,
                background: done ? 'rgba(16,185,129,0.18)' : 'rgba(255,255,255,0.04)',
                display:'grid', placeItems:'center', color: done ? '#34d399' : 'rgba(247,248,250,0.35)',
              }}>
                {done ? <window.QBIcon name="check" size={13}/> : <div style={{ width: 6, height: 6, borderRadius: 99, background:'currentColor' }}/>}
              </div>
              <span style={{ color:'#fff', fontSize: 13 }}>{nm}</span>
              <span style={{ fontSize: 11.5, color: done ? '#34d399' : 'rgba(247,248,250,0.40)', fontFamily:'var(--font-mono)' }}>
                {done ? 'imported' : 'waiting…'}
              </span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function StepPay() {
  const [on, setOn] = _useS(false);
  _useE(() => { const t = setTimeout(() => setOn(true), 500); return () => clearTimeout(t); }, []);
  return (
    <div style={{ padding: 28, height:'100%', display:'flex', flexDirection:'column', gap: 16, animation:'qb-fadeIn .5s' }}>
      <div style={{ display:'flex', gap: 8, alignItems:'center' }}>
        <span style={{ width: 8, height: 8, borderRadius: 99, background:'#4dd4ff', boxShadow:'0 0 10px #4dd4ff' }}/>
        <span style={{ fontFamily:'var(--font-mono)', fontSize: 11.5, color:'rgba(247,248,250,0.55)', letterSpacing:'0.08em', textTransform:'uppercase' }}>
          Step 3 · Payments
        </span>
      </div>
      <h4 style={{ margin: 0, color:'#fff', fontFamily:'var(--font-display)', fontWeight: 600, fontSize: 20 }}>
        Turn on online payments
      </h4>
      <div style={{
        padding:'16px 18px', borderRadius: 16,
        background:'rgba(255,255,255,0.04)', border:'1px solid rgba(255,255,255,0.08)',
        display:'flex', alignItems:'center', justifyContent:'space-between',
      }}>
        <div>
          <p style={{ margin: 0, color:'#fff', fontSize: 14, fontWeight: 600 }}>Qubikos Pay</p>
          <p style={{ margin:'4px 0 0', color:'rgba(247,248,250,0.60)', fontSize: 12 }}>
            2.2% cards · next-day payouts
          </p>
        </div>
        <div onClick={() => setOn(o => !o)} style={{
          width: 48, height: 28, borderRadius: 99, cursor:'pointer',
          background: on ? 'linear-gradient(90deg, #4d7dff, #7c5cff)' : 'rgba(255,255,255,0.10)',
          position:'relative', transition:'background .3s',
          boxShadow: on ? '0 0 20px rgba(124,92,255,0.50)' : 'none',
        }}>
          <div style={{
            position:'absolute', top: 3, left: on ? 23 : 3,
            width: 22, height: 22, borderRadius: 99, background:'#fff',
            transition:'left .3s var(--ease-out)', boxShadow:'0 2px 6px rgba(0,0,0,0.4)',
          }}/>
        </div>
      </div>
      <div style={{
        padding: 18, borderRadius: 16,
        background: on ? 'linear-gradient(135deg, rgba(16,185,129,0.14), rgba(77,212,255,0.10))' : 'rgba(255,255,255,0.03)',
        border:'1px solid ' + (on ? 'rgba(16,185,129,0.30)' : 'rgba(255,255,255,0.08)'),
        transition:'all .4s', flex: 1, display:'flex', flexDirection:'column', gap: 12, justifyContent:'center',
      }}>
        {on ? (
          <>
            <div style={{ display:'flex', gap: 10, alignItems:'center', color:'#34d399', fontSize: 13, fontWeight: 600 }}>
              <window.QBIcon name="check" size={14}/> Payments active
            </div>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 8 }}>
              {['Recurring','One-off','Packages','ACH','Cards','Refunds'].map(x => (
                <div key={x} style={{
                  padding:'7px 10px', borderRadius: 10, fontSize: 12, color:'#fff',
                  background:'rgba(255,255,255,0.06)', display:'flex', alignItems:'center', gap: 6,
                }}>
                  <window.QBIcon name="check" size={11}/> {x}
                </div>
              ))}
            </div>
            <p style={{ margin: 0, fontSize: 12.5, color:'rgba(247,248,250,0.72)', lineHeight: 1.5 }}>
              Your first payment link is ready. Share it with families — money lands tomorrow.
            </p>
          </>
        ) : (
          <p style={{ margin: 0, color:'rgba(247,248,250,0.55)', fontSize: 13 }}>
            Flip the switch. No contracts, no sales calls — it's all here.
          </p>
        )}
      </div>
    </div>
  );
}

// ============================= SIMPLICITY — IPHONE-LIKE =============================
function Simplicity() {
  return (
    <section style={{ padding:'0 24px 120px', background:'var(--bg)' }}>
      <div style={{ maxWidth: 1180, margin:'0 auto' }}>
        <div className="simple-panel" style={{
          borderRadius: 28, padding:'72px 56px', position:'relative', overflow:'hidden',
          background:'linear-gradient(160deg, #06080f 0%, #0f1d54 70%, #1f3cb8 100%)',
          color:'#fff', border:'1px solid rgba(124,92,255,0.25)',
        }}>
          <div style={{
            position:'absolute', inset: 0, pointerEvents:'none',
            background:'radial-gradient(60% 60% at 85% 50%, rgba(77,212,255,0.20), transparent 60%), radial-gradient(50% 50% at 10% 90%, rgba(124,92,255,0.25), transparent 60%)',
          }}/>
          <div className="simple-grid" style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 48, alignItems:'center', position:'relative' }}>
            <div>
              <p className="eyebrow" style={{ color:'#8cb0ff', margin: 0 }}>Simple, on purpose</p>
              <h2 className="display-lg" style={{
                margin:'14px 0 18px', color:'#fff',
                fontSize:'clamp(32px, 4.5vw, 52px)',
              }}>
                Easy enough for<br/>
                <span style={{
                  background:'linear-gradient(90deg, #8cb0ff, #d070ff, #4dd4ff)',
                  WebkitBackgroundClip:'text', backgroundClip:'text', color:'transparent',
                }}>a 12-year-old.</span>
              </h2>
              <p style={{ color:'rgba(247,248,250,0.70)', fontSize: 17, lineHeight: 1.55, maxWidth: 460 }}>
                Like an iPhone, Qubikos hides the machinery. No dashboards full of knobs,
                no config files, no training manual. You open it, you use it, it just works.
              </p>
              <div style={{ display:'grid', gap: 10, marginTop: 28 }}>
                {[
                  'No setup fees. No onboarding calls.',
                  'One screen for schedule, families, and money.',
                  'Zero training required for new staff.',
                  'Your parents figure out the app on their own.',
                ].map(t => (
                  <div key={t} style={{ display:'flex', alignItems:'center', gap: 12, fontSize: 14.5, color:'rgba(247,248,250,0.90)' }}>
                    <span style={{
                      width: 22, height: 22, borderRadius: 99,
                      background:'linear-gradient(135deg, #4dd4ff, #7c5cff)',
                      display:'grid', placeItems:'center', flexShrink: 0,
                      boxShadow:'0 0 14px rgba(124,92,255,0.45)',
                    }}><window.QBIcon name="check" size={12} stroke={2.8}/></span>
                    {t}
                  </div>
                ))}
              </div>
            </div>
            <PhoneMock/>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .simple-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          .simple-panel { padding: 44px 22px !important; border-radius: 22px !important; }
        }
      `}</style>
    </section>
  );
}

function PhoneMock() {
  const [tap, setTap] = _useS(null);
  _useE(() => {
    const seq = [0, 1, 2, null];
    let i = 0;
    const iv = setInterval(() => { setTap(seq[i]); i = (i+1) % seq.length; }, 1500);
    return () => clearInterval(iv);
  }, []);
  return (
    <div style={{ display:'grid', placeItems:'center', position:'relative' }}>
      <div style={{
        width: 280, height: 560, borderRadius: 48,
        background:'linear-gradient(160deg, #111522, #06080f)',
        border:'1px solid rgba(255,255,255,0.08)',
        padding: 14, position:'relative',
        boxShadow:'0 40px 80px rgba(41,80,230,0.40), inset 0 0 0 2px rgba(255,255,255,0.04)',
      }}>
        <div style={{
          position:'absolute', top: 14, left: '50%', transform:'translateX(-50%)',
          width: 90, height: 24, borderRadius: 99, background:'#000', zIndex: 2,
        }}/>
        <div style={{
          width:'100%', height:'100%', borderRadius: 36,
          background:'#fff', overflow:'hidden', position:'relative',
          display:'flex', flexDirection:'column',
        }}>
          <div style={{ padding:'40px 20px 16px' }}>
            <p style={{ margin: 0, fontSize: 11, color:'var(--fg-3)', fontFamily:'var(--font-mono)', letterSpacing:'0.08em', textTransform:'uppercase' }}>Today</p>
            <h5 style={{ margin:'4px 0 0', fontSize: 20, fontWeight: 700, letterSpacing:'-0.02em', color:'var(--fg-1)' }}>Hi, Anna</h5>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 10, padding:'0 20px 16px' }}>
            {[
              { l:'Revenue', v:'$41.8k', c:'#10b981' },
              { l:'Families', v:'248', c:'#4d7dff' },
            ].map(s => (
              <div key={s.l} style={{
                background:'var(--ink-50)', borderRadius: 14, padding:'12px 14px',
                border:'1px solid var(--border)',
              }}>
                <p style={{ margin: 0, fontSize: 10.5, color:'var(--fg-3)', textTransform:'uppercase', letterSpacing:'0.06em' }}>{s.l}</p>
                <p style={{ margin:'4px 0 0', fontSize: 18, fontWeight: 700, color:'var(--fg-1)', letterSpacing:'-0.02em' }}>{s.v}</p>
              </div>
            ))}
          </div>
          <div style={{ padding:'0 20px', flex: 1, display:'flex', flexDirection:'column', gap: 8 }}>
            {[
              { t:'4:00 PM', n:'Junior Team', c:'9/12', col:'#10b981' },
              { t:'5:00 PM', n:'Advanced Squad', c:'11/12', col:'#f59e0b' },
              { t:'6:00 PM', n:'Competition', c:'8/10', col:'#10b981' },
            ].map((r, i) => (
              <div key={i} style={{
                padding:'10px 12px', borderRadius: 12,
                background: tap === i ? 'var(--blue-50)' : 'var(--ink-0)',
                border:'1px solid ' + (tap === i ? 'var(--blue-500)' : 'var(--border)'),
                display:'flex', alignItems:'center', gap: 10,
                transition:'all .25s var(--ease-out)',
                transform: tap === i ? 'scale(1.02)' : 'none',
              }}>
                <span style={{ fontSize: 11, color:'var(--fg-3)', fontFamily:'var(--font-mono)', width: 50 }}>{r.t}</span>
                <span style={{ flex: 1, fontSize: 13, fontWeight: 600, color:'var(--fg-1)' }}>{r.n}</span>
                <span style={{ fontSize: 11, fontFamily:'var(--font-mono)', color: r.col, fontWeight: 600 }}>{r.c}</span>
              </div>
            ))}
          </div>
          <div style={{
            margin:'12px 20px 16px', padding:'14px 16px', borderRadius: 16,
            background:'linear-gradient(135deg, #4d7dff, #7c5cff)', color:'#fff',
            display:'flex', alignItems:'center', justifyContent:'space-between',
            boxShadow:'0 10px 24px rgba(124,92,255,0.35)',
          }}>
            <span style={{ fontSize: 13, fontWeight: 600 }}>+ New class</span>
            <window.QBIcon name="arrow" size={14}/>
          </div>
        </div>
        {/* Tap pulse */}
        {tap !== null && (
          <div style={{
            position:'absolute', left: '50%', top: 280 + tap * 48,
            width: 20, height: 20, borderRadius: 99,
            background:'rgba(124,92,255,0.6)',
            animation:'qb-tap .8s ease-out', pointerEvents:'none', zIndex: 3,
          }}/>
        )}
      </div>
      <style>{`
        @keyframes qb-tap {
          0% { transform: translateX(-50%) scale(0.4); opacity: 1; }
          100% { transform: translateX(-50%) scale(2.8); opacity: 0; }
        }
      `}</style>
    </div>
  );
}

// ============================= MIGRATION — 1-CLICK =============================
function Migration() {
  const [stage, setStage] = _useS(0);
  const [ref, seen] = window.useOnScreen({ threshold: 0.3 });
  _useE(() => {
    if (!seen) return;
    setStage(0);
    const t1 = setTimeout(() => setStage(1), 900);
    const t2 = setTimeout(() => setStage(2), 2200);
    const t3 = setTimeout(() => setStage(3), 3400);
    return () => { clearTimeout(t1); clearTimeout(t2); clearTimeout(t3); };
  }, [seen]);

  const sources = ['Gymdesk','Jackrabbit','iClassPro','Mindbody','Zen Planner'];

  return (
    <section id="migrate" ref={ref} style={{
      padding:'120px 24px', background:'var(--ink-950)', color:'#fff',
      position:'relative', overflow:'hidden',
    }}>
      <div style={{
        position:'absolute', inset: 0, pointerEvents:'none',
        background:'radial-gradient(60% 50% at 50% 0%, rgba(124,92,255,0.20), transparent 60%)',
      }}/>
      <div style={{ maxWidth: 1180, margin:'0 auto', position:'relative' }}>
        <div style={{ textAlign:'center', maxWidth: 760, margin:'0 auto 56px' }}>
          <p className="eyebrow" style={{ color:'#8cb0ff', margin: 0 }}>Switching</p>
          <h2 className="display-lg" style={{ margin:'14px 0 16px', color:'#fff', fontSize:'clamp(32px, 4.5vw, 52px)' }}>
            Leave your old CRM<br/>in <span style={{
              background:'linear-gradient(90deg, #4dd4ff, #d070ff)',
              WebkitBackgroundClip:'text', backgroundClip:'text', color:'transparent',
            }}>one click</span>.
          </h2>
          <p style={{ color:'rgba(247,248,250,0.66)', fontSize: 17, lineHeight: 1.55, maxWidth: 580, margin:'0 auto' }}>
            Families, classes, schedules, billing history — we pull it all over for you.
            No spreadsheets. No double entry. No downtime.
          </p>
        </div>

        <div style={{
          maxWidth: 920, margin:'0 auto', padding:'36px 32px',
          borderRadius: 24, position:'relative',
          background:'rgba(255,255,255,0.03)',
          border:'1px solid rgba(255,255,255,0.08)',
          backdropFilter:'blur(20px)',
        }}>
          <div className="mig-flow" style={{
            display:'grid', gridTemplateColumns:'1fr 80px 1fr', alignItems:'center', gap: 24,
          }}>
            {/* Source */}
            <div style={{
              padding: 20, borderRadius: 16,
              background:'rgba(255,255,255,0.03)', border:'1px solid rgba(255,255,255,0.08)',
            }}>
              <p style={{ margin: 0, fontSize: 11, color:'rgba(247,248,250,0.50)', fontFamily:'var(--font-mono)', letterSpacing:'0.08em', textTransform:'uppercase' }}>From</p>
              <div style={{ display:'flex', flexDirection:'column', gap: 6, marginTop: 12 }}>
                {sources.map((s, i) => (
                  <div key={s} style={{
                    padding:'9px 12px', borderRadius: 10,
                    background: i === 1 ? 'linear-gradient(90deg, rgba(239,68,68,0.18), rgba(239,68,68,0.05))' : 'rgba(255,255,255,0.03)',
                    border: i === 1 ? '1px solid rgba(239,68,68,0.40)' : '1px solid rgba(255,255,255,0.05)',
                    fontSize: 13, color: i === 1 ? '#fff' : 'rgba(247,248,250,0.65)',
                    fontWeight: i === 1 ? 600 : 500,
                    display:'flex', justifyContent:'space-between', alignItems:'center',
                  }}>
                    <span>{s}</span>
                    {i === 1 && <span style={{ fontSize: 10.5, color:'#fca5a5', fontFamily:'var(--font-mono)' }}>selected</span>}
                  </div>
                ))}
              </div>
            </div>

            {/* Arrow + packets */}
            <div className="mig-pipe" style={{
              position:'relative', height: 160,
              display:'grid', placeItems:'center',
            }}>
              <div className="mig-pipe-track" style={{
                position:'absolute', left: 0, right: 0, top: '50%',
                height: 2, background:'linear-gradient(90deg, rgba(124,92,255,0.15), rgba(77,212,255,0.60), rgba(124,92,255,0.15))',
                transform:'translateY(-50%)',
              }}/>
              {/* packets */}
              {[0,1,2].map(k => (
                <div key={k} className="mig-packet" style={{
                  position:'absolute', top:'50%', width: 10, height: 10, borderRadius: 99,
                  background:'#4dd4ff', boxShadow:'0 0 12px #4dd4ff',
                  animation: `qb-packet 1.6s linear ${k * 0.5}s infinite`,
                  transform:'translateY(-50%)',
                }}/>
              ))}
              <div style={{
                position:'relative', zIndex: 2,
                padding:'10px 14px', borderRadius: 12,
                background:'linear-gradient(135deg, #4d7dff, #7c5cff)',
                color:'#fff', fontSize: 12, fontWeight: 700,
                fontFamily:'var(--font-mono)', letterSpacing:'0.04em',
                boxShadow:'0 0 24px rgba(124,92,255,0.55)',
              }}>1-CLICK</div>
            </div>

            {/* Dest */}
            <div style={{
              padding: 20, borderRadius: 16,
              background:'linear-gradient(135deg, rgba(77,125,255,0.12), rgba(124,92,255,0.10))',
              border:'1px solid rgba(124,92,255,0.35)',
            }}>
              <p style={{ margin: 0, fontSize: 11, color:'#8cb0ff', fontFamily:'var(--font-mono)', letterSpacing:'0.08em', textTransform:'uppercase' }}>To Qubikos</p>
              <div style={{ display:'flex', flexDirection:'column', gap: 10, marginTop: 12 }}>
                {[
                  { l:'Families', n:'248', active: stage >= 1 },
                  { l:'Classes',  n:'36',  active: stage >= 2 },
                  { l:'Billing history', n:'18 mo', active: stage >= 3 },
                ].map(r => (
                  <div key={r.l} style={{
                    display:'flex', alignItems:'center', gap: 10, padding:'8px 10px', borderRadius: 10,
                    background: r.active ? 'rgba(16,185,129,0.12)' : 'rgba(255,255,255,0.02)',
                    border:'1px solid ' + (r.active ? 'rgba(16,185,129,0.30)' : 'rgba(255,255,255,0.05)'),
                    transition:'all .4s',
                  }}>
                    <div style={{
                      width: 20, height: 20, borderRadius: 99,
                      background: r.active ? 'rgba(16,185,129,0.25)' : 'rgba(255,255,255,0.05)',
                      color: r.active ? '#34d399' : 'rgba(247,248,250,0.35)',
                      display:'grid', placeItems:'center',
                    }}>
                      {r.active ? <window.QBIcon name="check" size={12} stroke={2.5}/> : <div style={{ width: 6, height: 6, borderRadius: 99, background:'currentColor' }}/>}
                    </div>
                    <span style={{ flex: 1, fontSize: 13, color:'#fff', fontWeight: 500 }}>{r.l}</span>
                    <span style={{ fontSize: 12, fontFamily:'var(--font-mono)', color: r.active ? '#34d399' : 'rgba(247,248,250,0.50)' }}>{r.n}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div className="mig-perks" style={{
            marginTop: 28, display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 16,
          }}>
            {[
              { t:'Free', d:'Migration is on us. Always.' },
              { t:'Under an hour', d:'Most gyms are fully moved over during lunch.' },
              { t:'Keep your data', d:'Full export from your old system included.' },
            ].map(x => (
              <div key={x.t} style={{
                padding:'14px 16px', borderRadius: 14,
                background:'rgba(255,255,255,0.02)', border:'1px solid rgba(255,255,255,0.06)',
              }}>
                <p style={{ margin: 0, fontSize: 14, fontWeight: 700, color:'#fff' }}>{x.t}</p>
                <p style={{ margin:'4px 0 0', fontSize: 12.5, color:'rgba(247,248,250,0.60)' }}>{x.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @keyframes qb-packet {
          from { left: 0; opacity: 0; }
          10%,90% { opacity: 1; }
          to { left: 100%; opacity: 0; }
        }
        @keyframes qb-packet-v {
          from { top: 0; opacity: 0; }
          10%,90% { opacity: 1; }
          to { top: 100%; opacity: 0; }
        }
        @media (max-width: 820px) {
          .mig-flow { grid-template-columns: 1fr !important; }
          .mig-perks { grid-template-columns: 1fr !important; }
          .mig-pipe { height: 110px !important; }
          .mig-pipe-track {
            top: 0 !important; bottom: 0 !important; left: 50% !important; right: auto !important;
            width: 2px !important; height: auto !important;
            background: linear-gradient(180deg, rgba(124,92,255,0.15), rgba(77,212,255,0.60), rgba(124,92,255,0.15)) !important;
            transform: translateX(-50%) !important;
          }
          .mig-packet {
            left: 50% !important; top: 0 !important;
            animation-name: qb-packet-v !important;
            transform: translateX(-50%) !important;
          }
        }
      `}</style>
    </section>
  );
}

// ============================= PRODUCT PREVIEW =============================
function ProductPreview() {
  return (
    <section style={{ background:'var(--bg)', padding:'0 24px 100px' }}>
      <div style={{ maxWidth: 1240, margin:'-100px auto 0', position:'relative', zIndex: 5 }}>
        <div style={{
          borderRadius: 24, border:'1px solid var(--border)',
          background:'var(--surface)', boxShadow:'var(--shadow-xl)', overflow:'hidden',
        }}>
          <div style={{
            display:'flex', alignItems:'center', gap: 10, padding:'14px 18px',
            borderBottom:'1px solid var(--border)', background:'var(--bg-muted)',
          }}>
            <span style={{ width: 12, height: 12, borderRadius: 99, background:'#ff5f57' }}/>
            <span style={{ width: 12, height: 12, borderRadius: 99, background:'#febc2e' }}/>
            <span style={{ width: 12, height: 12, borderRadius: 99, background:'#28c840' }}/>
            <div style={{ flex: 1, textAlign:'center', fontSize: 12, color:'var(--fg-3)', fontFamily:'var(--font-mono)' }}>
              app.qubikos.com / dashboard
            </div>
          </div>
          <MiniDashboard/>
        </div>
      </div>
    </section>
  );
}

function MiniDashboard() {
  const stats = [
    { label:'Active families', val:'248', delta:'+12', color:'var(--blue-600)' },
    { label:'Attendance 30d',  val:'94%', delta:'+3.1pp', color:'#10b981' },
    { label:'Monthly revenue', val:'$41,820', delta:'+8%', color:'#7c5cff' },
    { label:'Open spots',      val:'36', delta:'−8', color:'#f59e0b' },
  ];
  const rows = [
    { time:'4:00 PM', name:'Junior · Group A',  coach:'Volkova',   cap:'9 / 12', pct: 75 },
    { time:'5:00 PM', name:'Advanced · Team',   coach:'Savelyev',  cap:'11 / 12', pct: 92 },
    { time:'6:00 PM', name:'Competition',       coach:'Petrova',   cap:'8 / 10', pct: 80 },
    { time:'7:00 PM', name:'Tryout · Juniors',  coach:'Koval',     cap:'3 / 8',  pct: 38 },
  ];
  return (
    <div className="dash-grid" style={{ display:'grid', gridTemplateColumns:'220px 1fr', minHeight: 540 }}>
      <aside className="dash-side" style={{
        background:'var(--bg-muted)', borderRight:'1px solid var(--border)',
        padding:'20px 14px', display:'flex', flexDirection:'column', gap: 2,
      }}>
        <div style={{ padding:'6px 10px 14px', display:'flex', alignItems:'center', gap: 8 }}>
          <div style={{
            width: 28, height: 28, borderRadius: 8,
            background:'linear-gradient(135deg, #3968ff, #7c5cff)',
            display:'grid', placeItems:'center', color:'#fff', fontSize: 14, fontWeight: 700,
          }}>q</div>
          <span style={{ fontFamily:'var(--font-display)', fontWeight: 600, fontSize: 15 }}>qubikos</span>
        </div>
        {[
          { l:'Overview', active: true },
          { l:'Families' }, { l:'Schedule' }, { l:'Attendance' },
          { l:'Billing' }, { l:'Levels' }, { l:'Marketing' }, { l:'Settings' },
        ].map(i => (
          <div key={i.l} style={{
            padding:'8px 12px', borderRadius: 8, fontSize: 13.5,
            color: i.active ? 'var(--fg-1)' : 'var(--fg-2)',
            background: i.active ? 'var(--surface)' : 'transparent',
            boxShadow: i.active ? 'var(--shadow-xs)' : 'none',
            border: i.active ? '1px solid var(--border)' : '1px solid transparent',
            fontWeight: i.active ? 600 : 500,
          }}>{i.l}</div>
        ))}
      </aside>
      <main style={{ padding: 28 }}>
        <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom: 20, flexWrap:'wrap', gap: 12 }}>
          <div>
            <p className="caption" style={{ margin: 0, color:'var(--fg-3)' }}>Tuesday · April 23</p>
            <h2 className="h1" style={{ margin:'4px 0 0', fontSize: 28 }}>Good afternoon, Anna</h2>
          </div>
          <div style={{ display:'flex', gap: 8 }}>
            <span style={{ padding:'6px 10px', border:'1px solid var(--border)', borderRadius: 8, fontSize: 12.5, color:'var(--fg-2)' }}>This week</span>
            <span style={{ padding:'6px 10px', borderRadius: 8, background:'var(--blue-600)', color:'#fff', fontSize: 12.5, fontWeight: 600 }}>New class</span>
          </div>
        </div>
        <div className="dash-stats" style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 12, marginBottom: 20 }}>
          {stats.map(s => (
            <div key={s.label} style={{
              border:'1px solid var(--border)', borderRadius: 14, padding:'14px 16px', background:'var(--surface)',
            }}>
              <p className="label" style={{ margin: 0, fontSize: 12.5 }}>{s.label}</p>
              <p className="display" style={{ margin:'6px 0 4px', fontSize: 24, letterSpacing:'-0.03em' }}>{s.val}</p>
              <p style={{ margin: 0, fontSize: 12, color: s.color, fontWeight: 600 }}>{s.delta} vs prior</p>
            </div>
          ))}
        </div>
        <div style={{ border:'1px solid var(--border)', borderRadius: 14, overflow:'hidden' }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', padding:'14px 16px', borderBottom:'1px solid var(--border)' }}>
            <h3 className="h3" style={{ margin: 0, fontSize: 15 }}>Today's schedule</h3>
            <span style={{ fontSize: 12, color:'var(--fg-3)', fontFamily:'var(--font-mono)' }}>4 classes · 31 students</span>
          </div>
          {rows.map(r => (
            <div key={r.time} className="dash-row" style={{
              display:'grid', gridTemplateColumns:'78px 1fr 140px 160px 80px',
              alignItems:'center', padding:'14px 16px', borderTop:'1px solid var(--border)', gap: 16,
            }}>
              <span style={{ fontFamily:'var(--font-mono)', fontSize: 13, color:'var(--fg-2)' }}>{r.time}</span>
              <span style={{ fontSize: 14, fontWeight: 600 }}>{r.name}</span>
              <span style={{ fontSize: 13, color:'var(--fg-2)' }}>Coach {r.coach}</span>
              <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
                <div style={{ flex: 1, height: 4, borderRadius: 4, background:'var(--ink-100)', overflow:'hidden' }}>
                  <div style={{ width:`${r.pct}%`, height:'100%', background: r.pct > 90 ? '#ef4444' : r.pct > 70 ? '#f59e0b' : '#10b981' }}/>
                </div>
                <span style={{ fontSize: 12.5, color:'var(--fg-2)', fontFamily:'var(--font-mono)' }}>{r.cap}</span>
              </div>
              <span style={{ fontSize: 12, textAlign:'right', color:'var(--blue-600)', fontWeight: 600 }}>Open →</span>
            </div>
          ))}
        </div>
      </main>
      <style>{`
        @media (max-width: 820px) {
          .dash-grid { grid-template-columns: 1fr !important; }
          .dash-side { display: none !important; }
          .dash-stats { grid-template-columns: repeat(2, 1fr) !important; }
          .dash-row { grid-template-columns: 70px 1fr !important; }
          .dash-row > :nth-child(n+3) { display: none !important; }
        }
      `}</style>
    </div>
  );
}

// ============================= FEATURES =============================
function Features() {
  const feats = [
    { icon:'calendar', eb:'Schedule',   t:'A whole season, in an afternoon.', d:'Drag classes onto weeks, clone templates, auto-resolve coach conflicts. Parents see changes in real time.' },
    { icon:'card',     eb:'Billing',    t:'Payments that stop slipping.',    d:'Recurring, one-off, family balances, ACH and cards. Remind in two taps. Know exactly who owes what.' },
    { icon:'users',    eb:'Families',   t:'One child, one record.',           d:'Parents, kids, contacts, waivers, levels — linked, searchable, exportable whenever you need.' },
    { icon:'trend',    eb:'Progress',   t:'Coach with data, not guesses.',    d:'Skill trees per discipline. Mark once, roll up across the season. Every kid sees their path.' },
    { icon:'bell',     eb:'Messages',   t:'Right parent, right second.',      d:'SMS, email, push. Templates, triggers, quiet hours. No more group-chat chaos.' },
    { icon:'chart',    eb:'Analytics',  t:'Revenue, retention, LTV.',         d:'Dashboards by class, coach, discipline. Export to QuickBooks or Google Sheets.' },
  ];
  return (
    <section id="features" style={{ padding:'120px 24px', background:'var(--bg)' }}>
      <div style={{ maxWidth: 1180, margin:'0 auto' }}>
        <div style={{ maxWidth: 760, marginBottom: 56 }}>
          <p className="eyebrow" style={{ margin: 0 }}>Features</p>
          <h2 className="display-lg" style={{ margin:'14px 0 16px', fontSize:'clamp(32px, 4.5vw, 52px)' }}>
            Everything a gym actually uses.<br/>Nothing it doesn't.
          </h2>
          <p className="lead" style={{ fontSize: 17 }}>
            Most CRMs bolt on what a gym needs. Qubikos was designed around the weekly rhythm of a club —
            and only then generalized.
          </p>
        </div>
        <div className="feat-grid" style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 20 }}>
          {feats.map(f => (
            <div key={f.eb} className="feat-card" style={{
              padding: 26, borderRadius: 20,
              border:'1px solid var(--border)', background:'var(--surface)',
              position:'relative', overflow:'hidden',
              transition:'transform .3s var(--ease-out), border-color .3s, box-shadow .3s',
            }}>
              <div style={{
                width: 42, height: 42, borderRadius: 12, marginBottom: 16,
                background:'linear-gradient(135deg, rgba(77,125,255,0.12), rgba(124,92,255,0.12))',
                border:'1px solid rgba(124,92,255,0.20)',
                display:'grid', placeItems:'center', color:'var(--blue-600)',
              }}>
                <window.QBIcon name={f.icon} size={20}/>
              </div>
              <p className="eyebrow" style={{ margin:'0 0 8px' }}>{f.eb}</p>
              <h3 className="h2" style={{ margin:'0 0 8px', fontSize: 20 }}>{f.t}</h3>
              <p className="body" style={{ margin: 0, color:'var(--fg-2)', fontSize: 13.5 }}>{f.d}</p>
              <div style={{
                position:'absolute', right: -50, bottom: -50, width: 180, height: 180,
                borderRadius: 999, background:'radial-gradient(circle, rgba(57,104,255,0.10), transparent 70%)',
                pointerEvents:'none',
              }}/>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .feat-card:hover { transform: translateY(-4px); border-color: rgba(124,92,255,0.30) !important; box-shadow: var(--shadow-lg); }
        @media (max-width: 1000px) { .feat-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 640px)  { .feat-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

// ============================= DISCIPLINES =============================
function Disciplines() {
  return (
    <section style={{ padding:'0 24px 120px', background:'var(--bg)' }}>
      <div style={{ maxWidth: 1180, margin:'0 auto', borderTop:'1px solid var(--border)', paddingTop: 72 }}>
        <div className="disc-grid" style={{ display:'grid', gridTemplateColumns:'1fr 1.3fr', gap: 48, alignItems:'start' }}>
          <div>
            <p className="eyebrow" style={{ margin: 0 }}>Any gym, any sport</p>
            <h2 className="h1" style={{ margin:'14px 0 14px', fontSize:'clamp(28px, 3.2vw, 38px)' }}>
              Gymnastics, karate,<br/>yoga, swim<br/>and 20 more.
            </h2>
            <p className="lead" style={{ maxWidth: 420, fontSize: 16 }}>
              Every workflow is built around skill ladders — so Qubikos adapts
              to whatever your club teaches, from tumbling to taekwondo.
            </p>
            <div style={{ marginTop: 20, display:'flex', gap: 8, flexWrap:'wrap' }}>
              {['Custom levels','Waivers','Seasons','Competitions'].map(t => (
                <span key={t} style={{
                  padding:'6px 12px', borderRadius: 99,
                  background:'var(--surface-2)', border:'1px solid var(--border)',
                  fontSize: 12.5, color:'var(--fg-2)', fontWeight: 500,
                }}>{t}</span>
              ))}
            </div>
          </div>
          <div className="disc-tiles" style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 12 }}>
            {window.QB_SPORTS.slice(0, 16).map(s => (
              <div key={s.key} className="disc-tile" style={{
                aspectRatio:'1/1', border:'1px solid var(--border)', borderRadius: 14,
                background:'var(--surface)', display:'grid', gridTemplateRows:'1fr auto', padding: 14,
                transition:'transform .24s var(--ease-out), border-color .24s, box-shadow .24s',
              }}>
                <div style={{ display:'grid', placeItems:'center', color:'var(--blue-600)' }}>
                  <window.SportIcon paths={s.paths} size={34}/>
                </div>
                <span style={{ fontSize: 12, color:'var(--fg-2)', fontWeight: 500, textAlign:'center' }}>{s.label}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        .disc-tile:hover { transform: translateY(-4px); border-color: var(--blue-500) !important; box-shadow: 0 12px 24px rgba(57,104,255,0.15); }
        @media (max-width: 900px) {
          .disc-grid { grid-template-columns: 1fr !important; }
          .disc-tiles { grid-template-columns: repeat(3, 1fr) !important; }
        }
        @media (max-width: 520px) { .disc-tiles { grid-template-columns: repeat(2, 1fr) !important; } }
      `}</style>
    </section>
  );
}

// ============================= TESTIMONIALS =============================
function Testimonials() {
  const items = [
    { q:'We replaced four tools with Qubikos. Staff stopped chasing payments, parents stopped calling, and we finally see the whole club on one screen.', a:'Anna Kovacheva', r:'Owner, Aeros Gymnastics — Dallas', i:'AK', g:'linear-gradient(135deg, #4d7dff, #d070ff)' },
    { q:'2.2% sounds small — on our volume it\'s a new mat room every year. The switch took a Saturday morning.', a:'Max Sullivan', r:'Sokol Karate, Austin', i:'MS', g:'linear-gradient(135deg, #10b981, #4dd4ff)' },
    { q:'Parents just book themselves in the app. Reminders and payments run themselves. I actually teach yoga again.', a:'Elena Walker', r:'Om Yoga Studio, San Diego', i:'EW', g:'linear-gradient(135deg, #7c5cff, #4d7dff)' },
  ];
  return (
    <section style={{ padding:'0 24px 120px', background:'var(--bg)' }}>
      <div style={{ maxWidth: 1180, margin:'0 auto' }}>
        <div style={{ textAlign:'center', maxWidth: 680, margin:'0 auto 48px' }}>
          <p className="eyebrow" style={{ margin: 0 }}>Customers</p>
          <h2 className="display-lg" style={{ margin:'14px 0 0', fontSize:'clamp(32px, 4vw, 48px)' }}>Gyms that already switched.</h2>
        </div>
        <div className="test-grid" style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 20 }}>
          {items.map((it, i) => (
            <div key={i} style={{
              padding: 26, borderRadius: 20,
              border:'1px solid var(--border)', background:'var(--surface)',
              display:'flex', flexDirection:'column', gap: 18,
            }}>
              <div style={{ display:'flex', gap: 3, color:'#f59e0b' }}>
                {[0,1,2,3,4].map(s => (
                  <svg key={s} viewBox="0 0 24 24" width="15" height="15" fill="currentColor">
                    <path d="M12 2l3 7 7 .5-5.5 4.5L18 22l-6-4-6 4 1.5-8L2 9.5 9 9z"/>
                  </svg>
                ))}
              </div>
              <p style={{ margin: 0, fontSize: 15.5, lineHeight: 1.55, color:'var(--fg-1)', letterSpacing:'-0.005em' }}>
                "{it.q}"
              </p>
              <div style={{ marginTop:'auto', display:'flex', alignItems:'center', gap: 12 }}>
                <div style={{ width: 38, height: 38, borderRadius: 99, background: it.g, color:'#fff', display:'grid', placeItems:'center', fontWeight: 700, fontSize: 13 }}>{it.i}</div>
                <div>
                  <div style={{ fontSize: 13.5, fontWeight: 600 }}>{it.a}</div>
                  <div style={{ fontSize: 12, color:'var(--fg-3)' }}>{it.r}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .test-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

// ============================= PRICING =============================
function Pricing() {
  const plans = [
    { n:'Starter', p:'$0',  sub:'/month', desc:'Up to 30 students, forever.', feats:['Schedule & families','Online booking','2.2% payments','Email support'], cta:'Start free' },
    { n:'Gym',     p:'$49', sub:'/month', desc:'One location, unlimited students.', feats:['Everything in Starter','Recurring billing & packages','SMS + email messaging','Analytics & LTV','API & webhooks'], cta:'Try 14 days free', hot: true },
    { n:'Network', p:'from $149', sub:'/month', desc:'Multi-location & franchise.', feats:['Everything in Gym','Multi-location','Roles & permissions','SSO & audit log','Dedicated manager'], cta:'Talk to us' },
  ];
  return (
    <section id="pricing" style={{ padding:'0 24px 120px', background:'var(--bg)' }}>
      <div style={{ maxWidth: 1180, margin:'0 auto' }}>
        <div style={{ textAlign:'center', maxWidth: 680, margin:'0 auto 48px' }}>
          <p className="eyebrow" style={{ margin: 0 }}>Pricing</p>
          <h2 className="display-lg" style={{ margin:'14px 0 16px', fontSize:'clamp(32px, 4vw, 48px)' }}>Pay less than you save.</h2>
          <p className="lead" style={{ fontSize: 17 }}>
            2.2% payments on every plan. Cancel with one click.
          </p>
        </div>
        <div className="price-grid" style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 20, alignItems:'stretch' }}>
          {plans.map(pl => (
            <div key={pl.n} style={{
              padding: 30, borderRadius: 24,
              border: pl.hot ? '1px solid rgba(124,92,255,0.40)' : '1px solid var(--border)',
              background: pl.hot ? 'linear-gradient(160deg, #070e2e 0%, #1f3cb8 100%)' : 'var(--surface)',
              color: pl.hot ? '#fff' : 'var(--fg-1)',
              position:'relative', overflow:'hidden',
              boxShadow: pl.hot ? '0 24px 60px rgba(41,80,230,0.30)' : 'var(--shadow-sm)',
              display:'flex', flexDirection:'column', gap: 18,
            }}>
              {pl.hot && (
                <div style={{
                  position:'absolute', top: 20, right: 20,
                  padding:'5px 10px', borderRadius: 99, fontSize: 11,
                  background:'rgba(255,255,255,0.12)', color:'#fff', fontWeight: 600,
                  border:'1px solid rgba(255,255,255,0.18)',
                }}>POPULAR</div>
              )}
              {pl.hot && <div style={{
                position:'absolute', top: -80, right: -80, width: 300, height: 300, borderRadius: 999,
                background:'radial-gradient(circle, rgba(124,92,255,0.50), transparent 60%)', pointerEvents:'none',
              }}/>}
              <div style={{ position:'relative' }}>
                <h3 className="h3" style={{ margin: 0, fontSize: 19, color: pl.hot ? '#fff' : 'var(--fg-1)' }}>{pl.n}</h3>
                <p style={{ margin:'6px 0 0', fontSize: 13.5, color: pl.hot ? 'rgba(247,248,250,0.70)' : 'var(--fg-3)' }}>{pl.desc}</p>
              </div>
              <div style={{ position:'relative' }}>
                <span className="display" style={{ fontSize: 44, letterSpacing:'-0.035em' }}>{pl.p}</span>
                <span style={{ fontSize: 14, color: pl.hot ? 'rgba(247,248,250,0.60)' : 'var(--fg-3)', marginLeft: 6 }}>{pl.sub}</span>
              </div>
              <ul style={{ listStyle:'none', padding: 0, margin: 0, display:'flex', flexDirection:'column', gap: 10, position:'relative', flex: 1 }}>
                {pl.feats.map(f => (
                  <li key={f} style={{ display:'flex', alignItems:'center', gap: 10, fontSize: 13.5, color: pl.hot ? 'rgba(247,248,250,0.86)' : 'var(--fg-2)' }}>
                    <span style={{
                      width: 18, height: 18, borderRadius: 99, display:'grid', placeItems:'center',
                      background: pl.hot ? 'rgba(77,212,255,0.16)' : 'rgba(16,185,129,0.14)',
                      color: pl.hot ? '#4dd4ff' : '#10b981',
                    }}><window.QBIcon name="check" size={12} stroke={2.4}/></span>
                    {f}
                  </li>
                ))}
              </ul>
              <window.QBButton size="lg" variant={pl.hot ? 'primary' : 'light'} style={{ width:'100%', position:'relative' }}>
                {pl.cta}
              </window.QBButton>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .price-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

// ============================= FAQ =============================
function FAQ() {
  const [open, setOpen] = _useS(0);
  const items = [
    { q:'How do you hold the 2.2% rate?', a:'We have a direct contract with our acquiring bank and the pooled volume of every Qubikos gym earns a rate no single studio could get alone. It\'s locked in for the life of your account.' },
    { q:'Does Qubikos work for a tiny studio?', a:'Yes. Starter is free up to 30 students, forever. Full schedule, booking, messaging and 2.2% payments included.' },
    { q:'Can I bring data from my current CRM?', a:'One-click migration from Gymdesk, Jackrabbit, iClassPro, Mindbody and Zen Planner — including billing history. For anything else, CSV or Google Sheets import is built in. We\'ll do it for you for free.' },
    { q:'What about waivers, taxes, and 1099s?', a:'Digital waivers with e-signature, auto sales-tax calculation by state, and annual 1099s for contractor coaches are all built in.' },
    { q:'How secure is my data?', a:'US & EU hosting, end-to-end TLS, SOC 2-aligned controls, and role-based access. You own your data and can export it anytime.' },
  ];
  return (
    <section style={{ padding:'0 24px 120px', background:'var(--bg)' }}>
      <div style={{ maxWidth: 820, margin:'0 auto' }}>
        <div style={{ textAlign:'center', marginBottom: 40 }}>
          <p className="eyebrow" style={{ margin: 0 }}>FAQ</p>
          <h2 className="display-lg" style={{ margin:'14px 0 0', fontSize:'clamp(30px, 4vw, 44px)' }}>Questions.</h2>
        </div>
        <div style={{ borderTop:'1px solid var(--border)' }}>
          {items.map((it, i) => {
            const on = open === i;
            return (
              <div key={i} style={{ borderBottom:'1px solid var(--border)' }}>
                <button onClick={() => setOpen(on ? -1 : i)} style={{
                  width:'100%', padding:'20px 4px', display:'flex',
                  alignItems:'center', justifyContent:'space-between', gap: 16,
                  background:'none', border:'none', cursor:'pointer', textAlign:'left',
                  fontFamily:'inherit', color:'var(--fg-1)', fontSize: 16.5, fontWeight: 600,
                  letterSpacing:'-0.015em',
                }}>
                  {it.q}
                  <span style={{
                    width: 30, height: 30, borderRadius: 99, display:'grid', placeItems:'center', flexShrink: 0,
                    background:'var(--surface-2)', border:'1px solid var(--border)', color:'var(--fg-2)',
                    transform: on ? 'rotate(45deg)' : 'none', transition:'transform .3s var(--ease-out)',
                  }}>
                    <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round">
                      <path d="M12 5v14M5 12h14"/>
                    </svg>
                  </span>
                </button>
                <div style={{
                  maxHeight: on ? 300 : 0, overflow:'hidden',
                  transition:'max-height .4s var(--ease-out)',
                }}>
                  <p style={{ margin: 0, padding:'0 4px 20px', color:'var(--fg-2)', fontSize: 14.5, lineHeight: 1.6, maxWidth: 680 }}>
                    {it.a}
                  </p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ============================= CTA + FOOTER =============================
function BigCTA() {
  return (
    <section style={{
      padding:'120px 24px', position:'relative', overflow:'hidden',
      background:'var(--ink-950)', color:'#fff',
    }}>
      <div style={{
        position:'absolute', inset: 0, pointerEvents:'none',
        background:'radial-gradient(60% 80% at 50% 80%, rgba(57,104,255,0.45), transparent 60%), radial-gradient(40% 60% at 20% 30%, rgba(124,92,255,0.30), transparent 60%)',
      }}/>
      <div style={{
        position:'absolute', inset: 0, pointerEvents:'none', opacity: 0.3,
        backgroundImage:'linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px)',
        backgroundSize:'56px 56px',
        maskImage:'radial-gradient(60% 60% at 50% 50%, black, transparent)',
        WebkitMaskImage:'radial-gradient(60% 60% at 50% 50%, black, transparent)',
      }}/>
      <div style={{ maxWidth: 880, margin:'0 auto', textAlign:'center', position:'relative' }}>
        <p className="eyebrow" style={{ color:'#8cb0ff' }}>Ready?</p>
        <h2 className="display-lg" style={{ margin:'14px 0 16px', color:'#fff', fontSize:'clamp(32px, 4.5vw, 52px)' }}>
          Your gym, on one screen.<br/>
          <span style={{
            background:'linear-gradient(90deg, #8cb0ff 0%, #d070ff 60%, #4dd4ff 100%)',
            WebkitBackgroundClip:'text', backgroundClip:'text', color:'transparent',
          }}>Tonight.</span>
        </h2>
        <p style={{ maxWidth: 540, margin:'0 auto 32px', color:'rgba(247,248,250,0.66)', fontSize: 17, lineHeight: 1.55 }}>
          14 days free. Import families in minutes. Invite parents with a link. No credit card to start.
        </p>
        <div style={{ display:'flex', justifyContent:'center', gap: 10, flexWrap:'wrap' }}>
          <window.QBButton size="lg" icon={<window.QBIcon name="arrow" size={16}/>}>Start free</window.QBButton>
          <window.QBButton size="lg" variant="ghost">Talk to sales</window.QBButton>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const cols = [
    { h:'Product',   items:['Schedule','Families','Payments','Levels','Analytics','Mobile app'] },
    { h:'For gyms',  items:['Gymnastics','Karate','Yoga','Swimming','Dance','Music schools'] },
    { h:'Company',   items:['About','Customers','Blog','Partners','Contact'] },
    { h:'Resources', items:['Docs','Status','API','Security','Privacy'] },
  ];
  return (
    <footer style={{ background:'var(--ink-950)', color:'rgba(247,248,250,0.70)', borderTop:'1px solid rgba(255,255,255,0.08)' }}>
      <div className="foot-grid" style={{
        maxWidth: 1180, margin:'0 auto', padding:'64px 24px 28px',
        display:'grid', gridTemplateColumns:'1.4fr repeat(4, 1fr)', gap: 40,
      }}>
        <div>
          <window.Wordmark style={{ color:'#fff', fontSize: 22 }}/>
          <p style={{ fontSize: 13, maxWidth: 260, margin:'14px 0 18px', color:'rgba(247,248,250,0.55)' }}>
            The operating system for sport clubs. 2.2% payments.
          </p>
          <div style={{ display:'flex', gap: 10 }}>
            {['X','IG','YT','in'].map(i => (
              <span key={i} style={{
                width: 34, height: 34, borderRadius: 10, border:'1px solid rgba(255,255,255,0.10)',
                display:'grid', placeItems:'center', fontSize: 11, fontWeight: 600, color:'#fff', cursor:'pointer',
              }}>{i}</span>
            ))}
          </div>
        </div>
        {cols.map(c => (
          <div key={c.h}>
            <p className="caption" style={{ color:'rgba(247,248,250,0.50)', margin:'0 0 12px' }}>{c.h}</p>
            {c.items.map(i => (
              <a key={i} href="#" style={{ display:'block', padding:'5px 0', fontSize: 13.5, color:'rgba(247,248,250,0.80)' }}>{i}</a>
            ))}
          </div>
        ))}
      </div>
      <div style={{
        borderTop:'1px solid rgba(255,255,255,0.08)', padding:'18px 24px',
        maxWidth: 1180, margin:'0 auto', display:'flex', justifyContent:'space-between', flexWrap:'wrap', gap: 12,
        fontSize: 12, color:'rgba(247,248,250,0.50)', fontFamily:'var(--font-mono)',
      }}>
        <span>© 2026 Qubikos Technologies</span>
        <span>Austin · Denver · Remote</span>
        <span>SOC 2 · GDPR · PCI-DSS</span>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .foot-grid { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 540px) {
          .foot-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>
  );
}

Object.assign(window, {
  QBThreeClickSetup: ThreeClickSetup,
  QBSimplicity: Simplicity,
  QBMigration: Migration,
  QBProductPreview: ProductPreview,
  QBFeatures: Features,
  QBDisciplines: Disciplines,
  QBTestimonials: Testimonials,
  QBPricing: Pricing,
  QBFAQ: FAQ,
  QBBigCTA: BigCTA,
  QBFooter: Footer,
});
