// Modules — bento layout. Two featured cards (Membership + AI Insights) up top
// with live mini-visuals; six standard modules in a tighter row below.

function Modules() {
  const items = [
    { icon: <Receipt size={20}/>,    name: "Billing",         desc: "Invoices, direct debit, auto-renew, dunning. Stripe + GoCardless." },
    { icon: <Calendar size={20}/>,   name: "Events",          desc: "Registration, attendance, capacity, follow-up sequences." },
    { icon: <GradCap size={20}/>,    name: "Training",        desc: "Courses, cohorts, completion tracking, navigator notes." },
    { icon: <Mail size={20}/>,       name: "Email & campaigns", desc: "Broadcast and segmented sends. Sector-aware lists, drag-and-drop builder." },
    { icon: <Filter size={20}/>,     name: "Segments",        desc: "AI groups your members by sector and behaviour — so you know what each cohort actually wants." },
    { icon: <Coffee size={20}/>,     name: "Workshops",       desc: "Run paid digital workshops as a revenue stream. Registrations, replays, billing in one flow." },
    { icon: <Megaphone size={20}/>,  name: "Press releases",  desc: "AI tracks tourism, hospitality, and big-announcement news — drafts media briefs to the right contacts." },
    { icon: <Shield size={20}/>,     name: "Governance",      desc: "Board packs, board reports, meeting minutes — generated from the data you already hold." },
    { icon: <Chart size={20}/>,      name: "Reporting",       desc: "Sector breakdown, event ROI, engagement. Templates and custom reports with drill-down charts." },
  ];
  return (
    <section className="mx-section mx-section-soft" id="modules">
      <div className="mx-container">
        <SectionHead
          eye="The modules"
          title="Everything a chamber runs, in one product."
          sub="Modular by design — turn modules on as you grow. No 'enterprise edition' upsell."
        />

        <div className="mx-modules-bento">
          <ModuleFeature
            icon={<Users size={18}/>}
            tag="Core"
            title="Membership, beyond the spreadsheet"
            desc="Tiers, renewals, multi-contact organisations, lapsed-member rescue. Every member with full context — sector, attendance, certifications, billing history."
            visual={<MemberRosterVisual />}
            reveal="0ms"
          />
          <ModuleFeature
            ai
            icon={<Sparkles size={18}/>}
            tag="AI Insights"
            title="Reports that read themselves"
            desc="Revenue opportunities, renewal risk, engagement decline — surfaced as plain English with suggested actions. Tuned to your chamber's voice and ideal member profile."
            visual={<ReportingChartVisual />}
            reveal="120ms"
          />
        </div>

        <div className="mx-modules-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">{m.icon}</div>
              <h4 className="mx-module-name">{m.name}</h4>
              <p className="mx-module-desc">{m.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ModuleFeature({ icon, tag, title, desc, visual, ai, reveal }) {
  const cls = "mx-module-feature" + (ai ? " mx-module-feature--ai" : "");
  return (
    <div className={cls} data-reveal="lg" style={{"--reveal-delay": reveal}}>
      <div className="mx-module-feature-head">
        <div className="mx-module-feature-icon">{icon}</div>
        <div className="mx-module-feature-tag">{tag}</div>
      </div>
      <h3 className="mx-module-feature-title">{title}</h3>
      <p className="mx-module-feature-desc">{desc}</p>
      <div className="mx-module-feature-visual">{visual}</div>
    </div>
  );
}

function MemberRosterVisual() {
  const rows = [
    { init: "GE", name: "Greenline Engineering", meta: "Member · 4y", tag: "Active", a: "" },
    { init: "HM", name: "Harbourview Manufacturing", meta: "Member · 2y", tag: "Active", a: "a2" },
    { init: "BN", name: "Bondi Numerics Ltd", meta: "Member · 9mo", tag: "Renew soon", a: "a3", warn: true },
  ];
  return (
    <>
      {rows.map((r, i) => (
        <div className="mx-mini-member-row" key={i}>
          <div className={`mx-avatar ${r.a}`}>{r.init}</div>
          <div className="mx-mini-member-name">{r.name}</div>
          <div className="mx-mini-member-meta">{r.meta}</div>
          <div className={"mx-mini-member-tag" + (r.warn ? " warn" : "")}>{r.tag}</div>
        </div>
      ))}
    </>
  );
}

function ReportingChartVisual() {
  // 12 bars, last one is "current" highlighted in pink.
  const heights = [38, 46, 42, 55, 50, 60, 58, 72, 68, 80, 84, 96];
  return (
    <div className="mx-mini-chart">
      <div className="mx-mini-chart-head">
        <span>Revenue · last 12 months</span>
        <b>$412,000</b>
      </div>
      <div className="mx-mini-chart-bars">
        {heights.map((h, i) => (
          <span
            key={i}
            className={i === heights.length - 1 ? "is-active" : ""}
            style={{height: h + "%"}}
          ></span>
        ))}
      </div>
    </div>
  );
}

window.Modules = Modules;