// Core features: only what is built today (see member-x docs/specs).

function Features() {
  const items = [
    { icon: <Dashboard size={20}/>, name: "A dashboard that answers questions", desc: "Who owes us, who renews this month, who has gone quiet and who is worth a win-back." },
    { icon: <Sparkles size={20}/>, name: "Needs attention", desc: "A ranked weekly list of members to contact, with the reason for each one." },
    { icon: <Users size={20}/>, name: "Member records", desc: "Every member's details, contacts, invoices and email activity in one place." },
    { icon: <Mail size={20}/>, name: "Member engagement", desc: "Who opens your emails, who does not, and how that is trending." },
    { icon: <Search size={20}/>, name: "Ask MemberX", desc: "Ask questions in plain English and get answers from your own data." },
    { icon: <Shield size={20}/>, name: "Data health", desc: "Spots where your CRM and your accounts disagree, so you can fix them." },
  ];
  return (
    <section className="mx-section mx-section-soft" id="features">
      <div className="mx-container">
        <SectionHead
          eye="Features"
          title="Everything you need to know your members."
        />
        <div className="mx-modules-grid mx-features-grid">
          {items.map((m, i) => (
            <div className="mx-module" key={m.name} data-reveal style={{"--reveal-delay": (i*60)+"ms"}}>
              <div className="mx-module-icon" aria-hidden="true">{m.icon}</div>
              <h3 className="mx-module-name">{m.name}</h3>
              <p className="mx-module-desc">{m.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Features = Features;