/* Eligibility — left side title + aside note, right side check-mark card.
   Edit `yes` to change the list of qualifying criteria. */

const Eligibility = () => {
  const yes = [
    "You have 50k+ engaged followers (across any platform: IG, TikTok, YouTube, Substack)",
    "You're already selling something: courses, coaching, retreats, memberships",
    "You have a real methodology or program that can be delivered more efficiently as an app",
    "You want to maximize your earnings potential and work smarter, not harder",
  ];

  return (
    <section id="eligible">
      <div className="container">
        <div className="eligible-grid">
          <div>
            <div className="eyebrow">AM I ELIGIBLE?</div>
            <h2 className="eligible-title">
              Is this <span className="it">for me?</span>
            </h2>
            <p className="eligible-sub">
              This is built for wellness, spiritual & motivational creators with an audience that's ready to go deeper with you.
            </p>
            <div className="eligible-aside">
              <span className="eligible-aside-title">Not quite there yet?</span>
              <div className="eligible-aside-sub">Apply anyway. We make exceptions in certain situations.</div>
            </div>
          </div>

          <div className="eligible-card">
            <div className="eligible-card-label">You're a fit if</div>
            <div className="eligible-list">
              {yes.map((t, i) => (
                <div key={i} className="eligible-row">
                  <span className="eligible-check">✓</span>
                  <span className="eligible-text">{t}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.AAS = window.AAS || {};
window.AAS.Eligibility = Eligibility;