// Three-pillar section: why memberx exists.

function WhyMemberX() {
  const pillars = [
    {
      icon: <TrendUp size={22}/>,
      eye: "Revenue",
      title: "Spot the revenue you'd otherwise miss.",
      body: "memberx watches every signal — sectors, attendance, certifications, drop-offs — and surfaces the courses, events, and offerings most likely to convert. With $-estimates attached.",
    },
    {
      icon: <Sparkles size={22}/>,
      eye: "Intelligence",
      title: "Stop guessing what to put on.",
      body: "Your members are a market. memberx tells you which sector clusters are under-served, which trainings sold out, and what your manufacturers are quietly asking for in their meetings with navigators.",
    },
    {
      icon: <Building size={22}/>,
      eye: "Operations",
      title: "All your chamber operations, in one place.",
      body: "Membership, billing, contacts, events, training, certification, email — every core function chambers run, finally without three SaaS subscriptions and a CSV.",
    },
  ];
  return (
    <section className="mx-section" id="product">
      <div className="mx-container">
        <div data-reveal>
          <SectionHead
            eye="Why memberx"
            title="A CRM that understands the chamber business model."
            sub="Generic CRMs don't speak chamber. memberx does — and pairs it with intelligence that pays for itself."
          />
        </div>
        <div className="mx-pillar-grid">
          {pillars.map((p, i) => (
            <div className="mx-pillar" key={p.title} data-reveal style={{"--reveal-delay": (i*80)+"ms"}}>
              <div className="mx-pillar-icon">{p.icon}</div>
              <div className="mx-eyebrow">{p.eye}</div>
              <h3 className="mx-pillar-title">{p.title}</h3>
              <p className="mx-pillar-body">{p.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function SectionHead({ eye, title, sub, align = "left" }) {
  return (
    <header className={`mx-section-head mx-section-head--${align}`}>
      <div className="mx-eyebrow">{eye}</div>
      <h2 className="mx-section-title">{title}</h2>
      {sub && <p className="mx-section-sub">{sub}</p>}
    </header>
  );
}

window.WhyMemberX = WhyMemberX;
window.SectionHead = SectionHead;