/* global React */
// Cue Tuner popup — opens on "cue:open-tuner". Explains that the Index is
// curated, verified and extended (structured data sources), with the
// configurable-extraction / spatial-decomposition capabilities as cards.

const TunerModal = (function () {
  const { useState, useEffect } = React;

  const sources = [
    { ico: "database", t: "ERP systems" },
    { ico: "badge", t: "Active Directory" },
    { ico: "groups", t: "Employee directories" },
    { ico: "table_view", t: "Structured records" },
  ];

  const caps = [
    {
      ico: "tune",
      title: "Configurable extraction templates",
      body: "Shape the extraction template to your firm's own entities, fields and rules — so the Index captures precisely what you need, the way you define it.",
    },
    {
      ico: "fact_check",
      title: "Verified extraction",
      body: "Every piece of AI-extracted content is automatically checked against your rules, so you can trust what comes out of the Index.",
    },
    {
      ico: "architecture",
      title: "Spatial decomposition from drawings",
      body: "Define the spatial breakdown — sites, buildings, levels, zones — straight from your plan drawings, or import GIS shape files to anchor it in real geometry.",
    },
  ];

  function TunerModal() {
    const [open, setOpen] = useState(false);
    useEffect(() => {
      const onOpen = () => setOpen(true);
      window.addEventListener("cue:open-tuner", onOpen);
      return () => window.removeEventListener("cue:open-tuner", onOpen);
    }, []);
    useEffect(() => {
      if (!open) return;
      const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
      window.addEventListener("keydown", onKey);
      document.body.style.overflow = "hidden";
      return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
    }, [open]);
    if (!open) return null;
    return (
      <div className="wl-overlay" onClick={() => setOpen(false)}>
        <div className="wl-card tuner-card" onClick={(e) => e.stopPropagation()}>
          <button className="wl-close" onClick={() => setOpen(false)} aria-label="Close">
            <span className="cue-icon">close</span>
          </button>
          <p className="eyebrow eyebrow--accent">Cue Tuner</p>
          <h2 className="wl-title">Curate it. Verify it. Extend it.</h2>
          <p className="wl-lead">
            The Index isn't a black box. Curate what goes in, automatically check that the AI
            extracted it correctly, and extend it with structured data sources — pull in ERP
            records or Active Directory employee lists so the Index reflects how your organization
            actually works.
          </p>

          <div className="govern__sources" style={{ justifyContent: "flex-start", margin: "24px 0 0" }}>
            {sources.map((s, i) => (
              <div key={i} className="govern__source">
                <span className="cue-icon">{s.ico}</span>{s.t}
              </div>
            ))}
          </div>

          <div className="tuner-caps">
            {caps.map((c, i) => (
              <div key={i} className="tuner-cap">
                <div className="govern__cardico"><span className="cue-icon">{c.ico}</span></div>
                <div>
                  <h3 className="h3 govern__cardtitle">{c.title}</h3>
                  <p className="govern__cardbody">{c.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  return TunerModal;
})();

window.TunerModal = TunerModal;