// ForCoaches — "Built for coaches, not IT admins"

function ForCoaches() {
  return (
    <section style={{ padding:'120px 24px', background:'var(--bg)' }}>
      <div style={{ maxWidth: 1180, margin:'0 auto' }}>
        <div className="coach-grid" style={{
          display:'grid', gridTemplateColumns:'1.05fr 1fr', gap: 56, alignItems:'center',
        }}>
          <div>
            <p className="eyebrow" style={{ margin: 0 }}>For the people who coach</p>
            <h2 className="display-lg" style={{
              margin:'14px 0 18px', fontSize:'clamp(32px, 4.5vw, 52px)', lineHeight: 1.05,
            }}>
              Built for coaches,<br/>
              <span style={{
                background:'linear-gradient(90deg, #2950e6, #7c5cff)',
                WebkitBackgroundClip:'text', backgroundClip:'text', color:'transparent',
              }}>not IT admins.</span>
            </h2>
            <p className="lead" style={{ fontSize: 17, maxWidth: 500 }}>
              Most gym CRMs need a certified specialist to set up. This one doesn't.
              If you can use Instagram, you can run your studio on Qubikos.
            </p>
            <div style={{ marginTop: 28, display:'grid', gap: 12 }}>
              {[
                ['No setup fees','No onboarding calls, no consultants, no implementation quote.'],
                ['No training manual','Your staff learns it on day one. Parents learn it in 10 seconds.'],
                ['No hidden toggles','If you can see it, it works. What you tap is what it does.'],
              ].map(([t, d]) => (
                <div key={t} style={{
                  display:'grid', gridTemplateColumns:'28px 1fr', gap: 14, alignItems:'flex-start',
                  padding:'14px 16px', borderRadius: 14,
                  background:'var(--surface)', border:'1px solid var(--border)',
                }}>
                  <span style={{
                    width: 28, height: 28, borderRadius: 99,
                    background:'linear-gradient(135deg, #4d7dff, #7c5cff)',
                    display:'grid', placeItems:'center', color:'#fff',
                    boxShadow:'0 0 16px rgba(124,92,255,0.35)',
                  }}>
                    <window.QBIcon name="check" size={14} stroke={2.8}/>
                  </span>
                  <div>
                    <p style={{ margin: 0, fontSize: 14.5, fontWeight: 700, color:'var(--fg-1)' }}>{t}</p>
                    <p style={{ margin:'3px 0 0', fontSize: 13.5, color:'var(--fg-2)', lineHeight: 1.5 }}>{d}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Visual: Two-panel comparison */}
          <div style={{ display:'grid', gap: 14 }}>
            <div style={{
              borderRadius: 20, padding:'22px 24px',
              background:'linear-gradient(160deg, #fef2f2 0%, #fff 100%)',
              border:'1px solid rgba(239,68,68,0.25)',
              position:'relative', overflow:'hidden',
            }}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 14 }}>
                <span style={{ fontSize: 11.5, color:'#b91c1c', fontFamily:'var(--font-mono)', fontWeight: 600, letterSpacing:'0.08em', textTransform:'uppercase' }}>
                  Legacy gym CRM
                </span>
                <span style={{ fontSize: 12, color:'#b91c1c', fontWeight: 600 }}>setup.log</span>
              </div>
              <div style={{ fontFamily:'var(--font-mono)', fontSize: 12, lineHeight: 1.8, color:'#7f1d1d' }}>
                <div>$ configure --webhook --oauth</div>
                <div>→ Waiting for specialist…</div>
                <div>→ SMTP credentials required</div>
                <div>→ Payment gateway OAuth failed</div>
                <div>→ Import CSV schema mismatch</div>
                <div>→ ERR: contact your admin</div>
                <div style={{ color:'#ef4444', marginTop: 4 }}>✕ 14 days, 3 meetings, still not live</div>
              </div>
            </div>

            <div style={{
              borderRadius: 20, padding:'22px 24px',
              background:'linear-gradient(160deg, #070e2e 0%, #1f3cb8 100%)',
              border:'1px solid rgba(124,92,255,0.35)', color:'#fff',
              boxShadow:'0 20px 50px rgba(41,80,230,0.30)',
              position:'relative', overflow:'hidden',
            }}>
              <div style={{
                position:'absolute', top: -60, right: -60, width: 220, height: 220, borderRadius: 999,
                background:'radial-gradient(circle, rgba(77,212,255,0.35), transparent 60%)',
              }}/>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 14, position:'relative' }}>
                <span style={{ fontSize: 11.5, color:'#8cb0ff', fontFamily:'var(--font-mono)', fontWeight: 600, letterSpacing:'0.08em', textTransform:'uppercase' }}>
                  Qubikos
                </span>
                <span style={{ fontSize: 12, color:'#4dd4ff', fontWeight: 600 }}>evening of signup</span>
              </div>
              <div style={{ position:'relative', display:'grid', gap: 8 }}>
                {['Tap your sport', 'Add your first class', 'Invite parents by link', 'Done — schedule is live'].map((s, i) => (
                  <div key={s} style={{
                    display:'flex', alignItems:'center', gap: 12,
                    padding:'10px 12px', borderRadius: 10,
                    background:'rgba(255,255,255,0.06)', border:'1px solid rgba(255,255,255,0.10)',
                  }}>
                    <span style={{
                      width: 22, height: 22, borderRadius: 99,
                      background:'rgba(16,185,129,0.20)', color:'#34d399',
                      display:'grid', placeItems:'center',
                    }}>
                      <window.QBIcon name="check" size={12} stroke={2.8}/>
                    </span>
                    <span style={{ fontSize: 13.5, fontWeight: 500 }}>{s}</span>
                    <span style={{ marginLeft:'auto', fontSize: 11, fontFamily:'var(--font-mono)', color:'rgba(247,248,250,0.55)' }}>
                      {['10s','20s','15s','—'][i]}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .coach-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
      `}</style>
    </section>
  );
}

window.QBForCoaches = ForCoaches;