// Migrate strip — communicates "easy import from anywhere."
// Source-system tiles → arrow → memberx target, with a short headline.

function Migrate() {
  const sources = [
    "HubSpot",
    "Salesforce",
    "Mailchimp",
    "Airtable",
    "Excel / CSV",
    "Notion",
  ];
  return (
    <section className="mx-migrate" id="migrate">
      <div className="mx-container mx-migrate-grid">
        <div className="mx-migrate-text" data-reveal>
          <div className="mx-migrate-eye">Migrate without the pain</div>
          <h3 className="mx-migrate-title">
            Import from wherever you are now.
          </h3>
          <p className="mx-migrate-sub">
            Drop a CSV, connect an API, or hand us a Salesforce export. memberx
            maps members, contacts, billing history, and event attendance in one
            pass — and tells you what didn't fit before it goes live.
          </p>
          <div className="mx-migrate-meta">
            <span><Check size={14}/> No data loss guarantee</span>
            <span><Check size={14}/> We handle migration alongside you</span>
          </div>
        </div>

        <div className="mx-migrate-flow" data-reveal style={{"--reveal-delay":"100ms"}}>
          <div className="mx-migrate-tiles">
            {sources.map((s) => (
              <div className="mx-migrate-tile" key={s}>{s}</div>
            ))}
          </div>
          <div className="mx-migrate-arrow" aria-hidden="true">
            <ArrowRight size={22} />
          </div>
          <div className="mx-migrate-target">
            <img src="/assets/logo-horizontal.svg" alt="memberx" />
            <span>Your CRM</span>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Migrate = Migrate;