// AI spotlight — text left, layered AI mock right.

function AISpotlight() {
  return (
    <section className="mx-section mx-section-spotlight" id="insights">
      <div className="mx-container mx-spotlight-grid">
        <div className="mx-spotlight-text" data-reveal>
          <div className="mx-eyebrow" style={{color: 'rgba(255,255,255,0.7)'}}>The AI layer</div>
          <h2 className="mx-spotlight-title">
            Your member database is a market. memberx is the analyst.
          </h2>
          <p className="mx-spotlight-sub">
            Every interaction your chamber has — an event RSVP, a navigator
            meeting, a course completion, an unpaid invoice — feeds memberx's
            understanding of your members. Then it tells you what to do next.
          </p>
          <ul className="mx-spotlight-list">
            <li><span className="mx-spotlight-bullet"/>Surface revenue opportunities with $ estimates attached</li>
            <li><span className="mx-spotlight-bullet"/>Draft event outlines and email campaigns for under-served clusters</li>
            <li><span className="mx-spotlight-bullet"/>Flag members at renewal risk before they lapse</li>
            <li><span className="mx-spotlight-bullet"/>Recommend offerings — courses, certifications, business tools — sized to your sector mix</li>
          </ul>
          <button
            type="button"
            className="mx-btn mx-btn-light mx-btn-lg"
            onClick={(e) => { e.preventDefault(); window.openEarlyAccess && window.openEarlyAccess(); }}
          >
            Sign up for early access <ArrowRight size={16}/>
          </button>
        </div>

        <div className="mx-spotlight-visual" data-reveal="lg" style={{"--reveal-delay":"120ms"}}>
          <AIInsightStack />
        </div>
      </div>
    </section>
  );
}

function AIInsightStack() {
  return (
    <div className="mx-insight-stack">
      <div className="mx-insight-card mx-insight-card--lift">
        <div className="mx-ai-head">
          <span className="mx-ai-pill"><Sparkles size={12}/> Sector insight</span>
          <span className="mx-ai-time">High confidence</span>
        </div>
        <p className="mx-ai-body">
          Manufacturing members are <b>2.4× more likely</b> to renew when
          they've attended at least one training event. <mark>34 of your
          manufacturers</mark> haven't attended one this year.
        </p>
        <div className="mx-ai-bar">
          <div className="mx-ai-bar-fill" style={{width: "82%"}}></div>
        </div>
      </div>

      <div className="mx-insight-card mx-insight-card--mid">
        <div className="mx-ai-head">
          <span className="mx-ai-pill"><Sparkles size={12}/> Revenue opportunity</span>
        </div>
        <p className="mx-ai-body">
          <b>$34,200</b> potential in re-running the ISO 9001 course.
          Engineering cluster is 282 strong, none currently certified.
        </p>
      </div>

      <div className="mx-insight-card mx-insight-card--back">
        <div className="mx-ai-head">
          <span className="mx-ai-pill"><Sparkles size={12}/> Renewal risk</span>
        </div>
        <p className="mx-ai-body">
          <b>11 members</b> in hospitality showing declining event attendance.
          Likely to lapse at next cycle.
        </p>
      </div>
    </div>
  );
}

window.AISpotlight = AISpotlight;