export default function MigrationProcessSection() {
  return (
      <section className="content-section migration-detail" id="migration-detail" aria-labelledby="migration-title">
        <div className="migration-process-panel">
          <div className="migration-process-head">
            <div>
              <p className="eyebrow">Switching providers</p>
              <h2 id="migration-title">Migration process</h2>
            </div>
            <span aria-hidden="true"></span>
            <p>how we move your business email</p>
          </div>

          <div className="migration-process-line" aria-hidden="true"></div>

          <ol className="migration-process-grid" aria-label="Email migration steps">
            <li>
              <div className="migration-step-badge badge-blue">01</div>
              <h3>Assess</h3>
              <p>Domain, provider, mailbox count, aliases, forwards, and device needs are reviewed first.</p>
            </li>
            <li>
              <div className="migration-step-badge badge-purple">02</div>
              <h3>Prepare DNS</h3>
              <p>MX, SPF, DKIM, DMARC, routing, aliases, and spam rules are staged before cutover.</p>
            </li>
            <li>
              <div className="migration-step-badge badge-green">03</div>
              <h3>Migrate mail</h3>
              <p>Existing mail is moved from Gmail, Yahoo, Microsoft 365, shared hosting, or legacy providers.</p>
            </li>
            <li>
              <div className="migration-step-badge badge-amber">04</div>
              <h3>Set up devices</h3>
              <p>Outlook, iPhone, iPad, web access, and login details are verified before handoff.</p>
            </li>
          </ol>

          <div className="migration-needs">
            <strong>What we need from you</strong>
            <ul>
              <li>Domain access</li>
              <li>User and mailbox list</li>
              <li>Current provider details</li>
              <li>Preferred migration window</li>
            </ul>
          </div>
        </div>
      </section>
  );
}