// Part 2: How It Works (ValueStack, Comparison, DayStrip REMOVED per Matisyahu)
// MOBILE-FIXED VERSION

const C2 = window.FLY_C;

// ============ REMOVED SECTIONS ============
const ValueStack = () => null;
const Comparison = () => null;
const DayStrip = () => null;

// ============ HOW IT WORKS (3 steps) ============
const HowItWorks = () => {
  const m = FLY_useIsMobile();
  const steps = [
    { n: '1', t: 'Free consultation', d: 'A 15-minute call with a real care manager - not a chatbot. Ask anything about your child, our program, or insurance. No commitment, no pressure.', meta: 'Today', tone: C2.pinkSoft },
    { n: '2', t: 'Insurance verification', d: 'We handle all the verification and authorization paperwork. Medicaid and most commercial insurance accepted. You\u2019ll know exactly what\u2019s covered before the first visit.', tone: C2.mintSoft },
    { n: '3', t: 'BCBA assessment + therapy begins', d: 'A Board-Certified Behavior Analyst meets your family at our ' + C2.city + ' center, observes your child, and writes a personalized treatment plan. Your child starts in our full-day program with a dedicated therapist and BCBA oversight. Weekly parent updates from day one.', tone: C2.peachSoft },
  ];
  return (
    <section style={{ background: '#fff', padding: m ? '56px 20px' : '96px 40px', position: 'relative', overflow: 'hidden' }}>
      <FLY_BigCurl color={C2.coralSoft} size={m ? 280 : 500} style={{ top: -140, right: -180, opacity: 0.45 }} />
      <div style={{ maxWidth: 1100, margin: '0 auto', position: 'relative', zIndex: 2 }}>
        <div style={{ textAlign: 'center', marginBottom: m ? 32 : 56 }}>
          <h2 style={{ margin: 0, fontSize: m ? 28 : 52, fontWeight: 800, color: C2.navy, letterSpacing: '-0.02em', lineHeight: 1.02, textTransform: 'uppercase', textWrap: 'balance' }}>
            Getting started with Flywheel<br/>
            <span style={{ color: C2.coral }}>is simple.</span>
          </h2>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: m ? 14 : 18 }}>
          {steps.map((s, i) => (
            <div key={i} style={{
              display: m ? 'flex' : 'grid',
              flexDirection: 'column',
              gridTemplateColumns: m ? undefined : '280px 1fr',
              gap: m ? 0 : 18
            }}>
              {/* Number circle on mobile, big number card on desktop */}
              {m ? (
                <div style={{
                  background: s.tone, borderRadius: '20px 20px 0 0',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  padding: '20px 0 8px',
                  fontFamily: '"Caveat", cursive', fontSize: 80, fontWeight: 600, color: C2.navy,
                  lineHeight: 1,
                }}>
                  {s.n}
                </div>
              ) : (
                <div style={{
                  background: s.tone, borderRadius: 20,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: '"Caveat", cursive', fontSize: i === 0 ? 220 : 180, fontWeight: 600, color: C2.navy,
                  lineHeight: 1,
                }}>
                  {s.n}
                </div>
              )}
              <div style={{
                background: s.tone, borderRadius: m ? '0 0 20px 20px' : 20, padding: m ? '12px 24px 28px' : '36px 40px',
                display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 10,
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
                  <h3 style={{ margin: 0, fontSize: m ? 20 : 26, fontWeight: 800, color: C2.navy, letterSpacing: '-0.015em', textTransform: 'uppercase' }}>{s.t}</h3>
                  {s.meta && (
                    <span style={{ fontSize: m ? 12 : 14, fontWeight: 800, color: C2.navy, background: 'rgba(255,255,255,0.7)', padding: m ? '6px 12px' : '8px 16px', borderRadius: 99, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
                      {s.meta}
                    </span>
                  )}
                </div>
                <p style={{ margin: 0, fontSize: m ? 14 : 16, color: C2.navy, lineHeight: 1.6, opacity: 0.85 }}>{s.d}</p>
              </div>
            </div>
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: m ? 28 : 40 }}>
          <a href={'tel:' + C2.phoneRaw} style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 12,
            background: C2.navy, color: '#fff', textDecoration: 'none',
            padding: m ? '16px 24px' : '18px 32px', borderRadius: 99, fontWeight: 800, fontSize: 13,
            letterSpacing: '0.14em', textTransform: 'uppercase',
            width: m ? '100%' : 'auto'
          }}>
            <FLY_PhoneIcon size={15} /> Call now to get started
          </a>
        </div>
      </div>
    </section>
  );
};

window.FLY_ValueStack = ValueStack;
window.FLY_Comparison = Comparison;
window.FLY_DayStrip = DayStrip;
window.FLY_HowItWorks = HowItWorks;