function AppSection() {
  return (
    <section className="section app-section">
      <div className="container">
        <div className="app-grid">
          <div>
            <FadeUp>
              <div className="section-eyebrow" style={{color:'rgba(255,255,255,0.55)'}}>Mobile</div>
            </FadeUp>
            <FadeUp delay={1}>
              <h2 className="section-title">
                Your degree journey, <span className="serif">always within reach.</span>
              </h2>
            </FadeUp>
            <FadeUp delay={2}>
              <p className="section-sub">
                Classes, reminders, placement, mentor chat, progress, and advisor support — one app, no friction. Designed for the commute, not just the desk.
              </p>
            </FadeUp>
            <FadeUp delay={3}>
              <ul className="app-feats">
                <li>Live and recorded classes, downloadable for offline</li>
                <li>Progress tracker tied to actual placement signals</li>
                <li>Mentor and advisor chat — 4 min avg reply time</li>
                <li>Assignment and exam reminders that respect your time</li>
                <li>Scholarship and EMI status in real time</li>
              </ul>
            </FadeUp>
            <FadeUp delay={4}>
              <div style={{display:'flex', gap: 10, flexWrap: 'wrap'}}>
                <button className="btn btn-primary">Download on iOS <ArrowIcon/></button>
                <button className="btn btn-outline-light">Get on Android</button>
              </div>
            </FadeUp>
          </div>
          <FadeUp delay={2}>
            <div className="phone-wrap">
              <div className="phone">
                <div className="phone-notch"/>
                <div className="phone-screen">
                  <div className="phone-head">
                    <div className="phone-greet">Good evening,</div>
                    <div className="phone-name">Priya — Term 2, Week 6</div>
                  </div>
                  <div className="phone-card accent">
                    <div className="pc-label">Current module</div>
                    <div className="pc-main">Regression & Forecasting</div>
                    <div className="pc-progress" style={{background:'rgba(4,30,74,0.15)'}}>
                      <div className="pc-progress-fill" style={{ width: '64%', background: 'var(--ink)' }} />
                    </div>
                    <div className="pc-row"><span>64% complete</span><span>12 hrs left</span></div>
                  </div>
                  <div className="phone-card">
                    <div className="pc-label">Up next</div>
                    <div className="pc-list">
                      <div className="pc-list-item"><span>Live: Logistic Regression</span><span className="time">18:30</span></div>
                      <div className="pc-list-item"><span>Capstone check-in</span><span className="time">Thu</span></div>
                      <div className="pc-list-item"><span>Mentor 1:1 — Arjun</span><span className="time">Fri</span></div>
                    </div>
                  </div>
                  <div className="phone-card">
                    <div className="pc-label">Placement</div>
                    <div className="pc-main">3 new openings match your profile</div>
                    <div className="pc-row"><span>Data Analyst · PM · Strategy</span><span>→</span></div>
                  </div>
                </div>
              </div>
            </div>
          </FadeUp>
        </div>
      </div>
    </section>
  );
}
window.AppSection = AppSection;