// Acquiring comparison — US gym-CRM competitors

function AcquiringEdge() {
  const [ref, seen] = window.useOnScreen({ threshold: 0.2 });
  // Typical rates for gym-industry CRMs with built-in payments.
  // Some bill flat %+fixed; we surface the effective % on a $75 avg transaction.
  const competitors = [
    { name: 'Gymdesk',     rate: 2.9, note: '+ $0.30' },
    { name: 'Jackrabbit',  rate: 3.5, note: 'incl. fees' },
    { name: 'iClassPro',   rate: 3.0, note: '+ $0.30' },
    { name: 'Mindbody',    rate: 2.75,note: '+ $0.30' },
    { name: 'Zen Planner', rate: 2.9, note: '+ $0.30' },
  ];
  const ours = 2.2;
  const max = 3.8;

  const monthly = window.useCountUp(675, seen, 1600);
  const yearly  = window.useCountUp(8100, seen, 1800);

  return (
    <section id="pricing-edge" 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(50% 40% at 20% 30%, rgba(57,104,255,0.18), transparent 60%), radial-gradient(50% 40% at 80% 70%, rgba(16,185,129,0.15), transparent 60%)',
      }}/>
      <div style={{ maxWidth: 1180, margin:'0 auto', position:'relative' }}>
        <p className="eyebrow" style={{ color:'#8cb0ff', margin: 0, textAlign:'center' }}>Payments edge</p>
        <h2 className="display-lg" style={{
          margin:'14px auto 16px', color:'#fff', textAlign:'center', maxWidth: 900,
          fontSize:'clamp(36px, 5vw, 56px)',
        }}>
          <span style={{
            background:'linear-gradient(90deg, #4dd4ff, #8cb0ff)',
            WebkitBackgroundClip:'text', backgroundClip:'text', color:'transparent',
          }}>2.2%</span> flat. No fine print.
        </h2>
        <p style={{
          textAlign:'center', color:'rgba(247,248,250,0.66)', maxWidth: 620,
          margin:'0 auto 64px', fontSize: 17, lineHeight: 1.55,
        }}>
          Every major gym CRM bakes payments into the bill. We negotiated the lowest rate
          in the category — and passed every basis point back to you.
        </p>

        <div className="fee-grid" style={{ display:'grid', gridTemplateColumns:'1.3fr 1fr', gap: 32, alignItems:'center' }}>
          <div style={{
            padding: 28, borderRadius: 24,
            background:'rgba(255,255,255,0.03)',
            border:'1px solid rgba(255,255,255,0.08)',
            backdropFilter:'blur(20px)',
          }}>
            <div style={{ display:'flex', justifyContent:'space-between', marginBottom: 18 }}>
              <span className="caption" style={{ color:'rgba(247,248,250,0.45)' }}>Card rate</span>
              <span className="caption" style={{ color:'rgba(247,248,250,0.45)' }}>% per transaction</span>
            </div>
            <BarRow label="Qubikos" rate={ours} note="flat" pct={(ours/max)*100} gradient ours seen={seen} delay={0}/>
            {competitors.map((c, i) => (
              <BarRow key={c.name} label={c.name} rate={c.rate} note={c.note}
                pct={(c.rate/max)*100} seen={seen} delay={180 + i*90}/>
            ))}
            <p style={{
              margin:'20px 0 0', fontSize: 11.5, color:'rgba(247,248,250,0.40)',
              fontFamily:'var(--font-mono)',
            }}>
              * Publicly listed rates at time of writing, US-based card-present & online.
            </p>
          </div>

          <div style={{
            padding: 32, borderRadius: 24,
            background:'linear-gradient(160deg, #0f1d54 0%, #1f3cb8 100%)',
            border:'1px solid rgba(124,92,255,0.30)',
            boxShadow:'0 0 80px rgba(57,104,255,0.25)',
            position:'relative', overflow:'hidden',
          }}>
            <div style={{
              position:'absolute', top: -60, right: -60, width: 200, height: 200, borderRadius: 999,
              background:'radial-gradient(circle, rgba(124,92,255,0.50), transparent 60%)',
            }}/>
            <p className="eyebrow" style={{ color:'#8cb0ff', margin: 0, position:'relative' }}>Your savings</p>
            <p style={{ fontSize: 13.5, color:'rgba(247,248,250,0.66)', margin:'6px 0 0', position:'relative' }}>
              On $75K/mo billed, vs. the category average of ~3.0%
            </p>
            <div style={{ marginTop: 24, position:'relative' }}>
              <p style={{ margin: 0, fontSize: 11, color:'rgba(247,248,250,0.55)', fontFamily:'var(--font-mono)', letterSpacing:'0.08em', textTransform:'uppercase' }}>Per month</p>
              <p className="display" style={{ margin:'6px 0 16px', fontSize: 44, letterSpacing:'-0.03em', color:'#fff' }}>
                +${Math.round(monthly).toLocaleString('en-US')}
              </p>
              <div style={{ height: 1, background:'rgba(255,255,255,0.12)' }}/>
              <p style={{ margin:'16px 0 0', fontSize: 11, color:'rgba(247,248,250,0.55)', fontFamily:'var(--font-mono)', letterSpacing:'0.08em', textTransform:'uppercase' }}>Per year</p>
              <p className="display" style={{ margin:'6px 0 0', fontSize: 44, letterSpacing:'-0.03em',
                background:'linear-gradient(90deg, #4dd4ff, #d070ff)',
                WebkitBackgroundClip:'text', backgroundClip:'text', color:'transparent',
              }}>
                +${Math.round(yearly).toLocaleString('en-US')}
              </p>
            </div>
            <div style={{
              marginTop: 20, padding:'12px 14px', borderRadius: 12,
              background:'rgba(255,255,255,0.06)', border:'1px solid rgba(255,255,255,0.08)',
              display:'flex', alignItems:'center', gap: 10, fontSize: 13, color:'rgba(247,248,250,0.82)',
              position:'relative',
            }}>
              <window.QBIcon name="check" size={14}/>
              No hidden fees · Next-business-day payouts
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .fee-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
        }
        @media (max-width: 560px) {
          .fee-row {
            grid-template-columns: 1fr auto !important;
            grid-template-areas: "label rate" "bar bar" !important;
            row-gap: 6px !important;
            padding: 10px 0 !important;
          }
          .fee-row > .fee-label { grid-area: label; }
          .fee-row > .fee-bar   { grid-area: bar; }
          .fee-row > .fee-rate  { grid-area: rate; text-align: right !important; }
        }
      `}</style>
    </section>
  );
}

function BarRow({ label, rate, pct, note, gradient, ours, seen, delay }) {
  const fill = gradient ? 'linear-gradient(90deg, #4d7dff, #7c5cff)' : 'rgba(247,248,250,0.55)';
  return (
    <div className="fee-row" style={{ display:'grid', gridTemplateColumns:'130px 1fr 90px', alignItems:'center', gap: 14, padding:'8px 0' }}>
      <span className="fee-label" style={{ fontSize: 13.5, fontWeight: ours ? 700 : 500, color: ours ? '#fff' : 'rgba(247,248,250,0.80)' }}>
        {ours && <span style={{
          display:'inline-block', width: 6, height: 6, borderRadius: 999, background:'#4dd4ff', marginRight: 8,
          boxShadow:'0 0 10px #4dd4ff',
        }}/>}
        {label}
      </span>
      <div className="fee-bar" style={{ height: ours ? 14 : 8, borderRadius: 99, background:'rgba(255,255,255,0.06)', overflow:'hidden' }}>
        <div style={{
          height:'100%', width: seen ? `${pct}%` : 0,
          background: fill, borderRadius: 99,
          transition: `width 1.2s var(--ease-out) ${delay}ms`,
          boxShadow: ours ? '0 0 20px rgba(124,92,255,0.55)' : 'none',
        }}/>
      </div>
      <span className="fee-rate" style={{
        fontSize: ours ? 15 : 13, fontWeight: ours ? 700 : 500,
        fontFamily:'var(--font-mono)', letterSpacing:'-0.01em',
        color: ours ? '#4dd4ff' : 'rgba(247,248,250,0.70)', textAlign:'right',
      }}>
        {rate}%{note ? <span style={{ fontSize: 10.5, fontWeight: 400, color:'rgba(247,248,250,0.40)', display:'block', marginTop: 2 }}>{note}</span> : null}
      </span>
    </div>
  );
}

window.QBAcquiringEdge = AcquiringEdge;