/* AreasGrid.jsx — service-area cards (NEW image-left layout).
 *
 * Each card is split into:
 *   - .area-img : colorful left panel with the icon prominently displayed
 *                 OR an optional photo (pass `image` on the area item).
 *   - .area-body : title + description + bullet pills.
 *
 * Pass `areas` as an array of:
 *   { icon, title, desc, bullets: [], image?: string }
 */
function AreasGrid({ variant, heading, lede, areas, eyebrow, tint = false }) {
  React.useEffect(() => {
    if (window.lucide) window.lucide.createIcons();
  });

  const isLegal = variant === "legal";

  return (
    <section className={"int-section" + (tint ? " tint" : "")} id="areas">
      <div className="int-container">
        <div className="int-section-head">
          <span className="eyebrow">
            <span className="dot" style={!isLegal ? { background: "var(--hl-green-600)" } : undefined} />
            <span style={!isLegal ? { color: "var(--hl-green-600)" } : undefined}>{eyebrow}</span>
          </span>
          <h2>{heading}</h2>
          <p>{lede}</p>
        </div>

        <div className={"areas-grid " + variant}>
          {areas.map((a, i) => (
            <article key={a.title} className="area">
              <div
                className={"area-img" + (a.image ? " has-photo" : "")}
                style={a.image ? { backgroundImage: `url(${a.image})` } : undefined}
              >
                <span className="num-badge">
                  {String(i + 1).padStart(2, "0")} / {String(areas.length).padStart(2, "0")}
                </span>
                {/* Only show icon when no real photo — photo speaks for itself */}
                {!a.image && (
                  <div className="ic" aria-hidden="true">
                    <i data-lucide={a.icon || "circle"}></i>
                  </div>
                )}
              </div>
              <div className="area-body">
                <h3>{a.title}</h3>
                <p>{a.desc}</p>
                {a.bullets && a.bullets.length > 0 && (
                  <ul>{a.bullets.map((b) => <li key={b}>{b}</li>)}</ul>
                )}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { AreasGrid });