/* Globby Wizard — lead finding (real data: CompanyEnrich + Apollo, demo fallback).
   Flow: enrich keywords → free keyword×country count matrix → user picks cells →
   list selected. People: Apollo search (free, masked) → reveal on select. A custom
   data-request box (emails sales) is always available below the results. */

// plan buyer/supplier size (BUYER_SIZE ids) → CompanyEnrich employee ranges
const SIZE_TO_EMP = {
  sme: ["1–10", "11–50"],
  mid: ["51–200"],
  large: ["201–1000"],
  multi: ["1000+"],
};
const ALL_EMP_RANGES = ["1–10", "11–50", "51–200", "201–1000", "1000+"];

// ---- helpers: unify real + demo records into one card shape ----
function coFromCC(cc, lang) {
  const c = (window.COUNTRY_BY && window.COUNTRY_BY[cc]) || { c: cc, en: cc, tr: cc, f: "🌐" };
  return { f: c.f, label: lang === "tr" ? c.tr : c.en };
}
function companyCard(r, lang) {
  // real: country is ISO-2 string, type string; demo: country obj, type obj
  const isReal = typeof r.country === "string";
  const co = isReal ? coFromCC((r.country || "").toUpperCase(), lang) : { f: (r.country && r.country.f) || "🌐", label: lang === "tr" ? (r.country && r.country.tr) : (r.country && r.country.en) };
  const typeLabel = isReal ? (r.type || "") : (lang === "tr" ? r.type.tr : r.type.en);
  const industry = isReal ? (r.industry || "") : (lang === "tr" ? (r.industry && r.industry.tr) || "" : (r.industry && r.industry.en) || r.industry || "");
  return { id: r.id, name: r.name, domain: r.domain || "", flag: co.f, country: co.label || "", city: r.city || "", employees: r.employees || "", revenue: r.revenue || "", typeLabel: typeLabel, industry: industry, founded: r.founded || null, match: r.match, verified: r.verified };
}

// map our employee range to Apollo "min,max"
function empToApollo(r) {
  return ({ "1–10": "1,10", "11–50": "11,50", "51–200": "51,200", "201–1000": "201,1000", "1000+": "1001,100000" })[r] || null;
}
// normalize an Apollo (proxy) person into the card record shape
function normApolloPerson(p) {
  return { id: p.id, apollo: true, firstName: p.firstName, name: p.firstName + " " + (p.lastNameMasked || ""), title: p.title || "", company: p.company || "", email: "", verified: !!p.verified, country: null, city: "" };
}

const cellKey = (seed, cc) => seed + "@@" + cc;

function FindStep(props) {
  const { L, lang, data, set, toast } = props;
  const imp = data.trade === "import";
  const isCompany = data.findMode !== "people";
  const f = data.filters || {};
  const setF = (patch) => set({ filters: Object.assign({}, f, patch) });
  const sector = window.SECTORS.find(s => s.id === data.sectorId);
  const sub = sector ? sector.subSectors.find(x => x.slug === data.subSlug) : null;

  const [groups, setGroups] = useState(null);           // [{ seed, terms, on }]
  const [enriching, setEnriching] = useState(false);
  const [matrixTrigger, setMatrixTrigger] = useState(0); // incremented only by effect #1; addGroup patches matrix directly
  const [matrix, setMatrix] = useState({});             // "seed@@cc" -> number|null  (free counts)
  const [matrixLoading, setMatrixLoading] = useState(false);
  const [cellSel, setCellSel] = useState({});           // "seed@@cc" -> true (chosen combos)
  const [savedMatrices, setSavedMatrices] = useState({ company: {}, people: {} }); // persisted per-mode for data request
  const [newKw, setNewKw] = useState("");               // keyword-add input
  const [kwSuggs, setKwSuggs] = useState([]);           // CE autocomplete suggestions
  const [kwSugLoading, setKwSugLoading] = useState(false);
  const [kwSugOpen, setKwSugOpen] = useState(false);
  const [kwAdding, setKwAdding] = useState(false);      // spinner while adding
  const [titlesActive, setTitlesActive] = useState(null); // null=all on; Set of active IDs when customised
  const [empActive, setEmpActive] = useState(null);       // null=all on; Set of active ranges when customised
  const [titlesMatrix, setTitlesMatrix] = useState({});   // "titleId@@cc" -> count (title×country breakdown)
  const [titlesMatrixLoading, setTitlesMatrixLoading] = useState(false);
  const [searching, setSearching] = useState(false);
  const [gateOpen, setGateOpen] = useState(false);       // lead-capture gate shown in place of results (when isGated())
  const [usingDemo, setUsingDemo] = useState(false);
  const [emailOpen, setEmailOpen] = useState(false);
  const [sent, setSent] = useState(false);
  const [extraTitles, setExtraTitles] = useState([]);        // [{en, tr?}] — user-added titles beyond plan
  const [newTitle, setNewTitle] = useState("");              // title-add input value
  const [titleSuggs, setTitleSuggs] = useState([]);          // CE positions autocomplete suggestions
  const [titleSugLoading, setTitleSugLoading] = useState(false);
  const [titleSugOpen, setTitleSugOpen] = useState(false);
  const [titleVariants, setTitleVariants] = useState({});    // titleId → string[] (CE-enriched variants)
  const [titleVariantsActive, setTitleVariantsActive] = useState({}); // titleId → Set<string>|null
  const [titleExpanded, setTitleExpanded] = useState(new Set()); // set of expanded titleIds
  const [filterOpen, setFilterOpen] = useState(false);        // mobile: filter panel collapsed by default
  const [autoCountries, setAutoCountries] = useState(false);  // true when AI auto-picked the country list
  const qty = 25; // fixed result batch size

  // merge CountryPicker selections + wizard markets (both sources shown as chips)
  const priority = [...new Set([...(f.locations || []), ...(data.markets || [])])].slice(0, 10);
  const baseKeywords = (data.keywords && data.keywords.length ? data.keywords : []).concat(data.aiKeywords || [])
    .filter(function (v, i, a) { return v && a.indexOf(v) === i; }).slice(0, 6);

  // employee size is auto-derived from the plan's buyer/supplier size (no manual filter)
  const autoEmployees = [...new Set((data.buyerSize || []).reduce((a, id) => a.concat(SIZE_TO_EMP[id] || []), []))];
  const enabledGroups = (groups || []).filter(g => g.on);

  // people-mode filter helpers
  const planTitleObjs = (data.titles || []).map(function (id) {
    const t = window.WIZ.titleById(id); return t ? { id: id, en: t.en, label: lang === "tr" ? t.tr : t.en } : null;
  }).filter(Boolean);
  const extraTitleObjs = extraTitles.map(function (t) {
    return { id: "extra_" + t.en, en: t.en, label: lang === "tr" ? (t.tr || t.en) : t.en, extra: true };
  });
  const allTitleObjs = planTitleObjs.concat(extraTitleObjs);
  const activeTitleObjs = titlesActive ? allTitleObjs.filter(function (t) { return titlesActive.has(t.id); }) : allTitleObjs;
  // For each active title, use CE-enriched variants if available; fall back to the plain English name.
  // This greatly improves Apollo recall: "Procurement Manager" alone matches fewer people than
  // ["Procurement Manager","Senior Procurement Manager","Head of Procurement","Supply Chain Manager"].
  const activeTitleStrings = [...new Set(activeTitleObjs.flatMap(function (t) {
    const vars = titleVariants[t.id];
    if (!vars || !vars.length) return [t.en];
    const active = titleVariantsActive[t.id]; // null = all on
    return active ? vars.filter(function (v) { return active.has(v); }) : vars;
  }))];
  // when not customised: plan-derived ranges are active; when customised: whatever is in the Set
  const activeEmpRanges = empActive ? ALL_EMP_RANGES.filter(function (r) { return empActive.has(r); }) : autoEmployees;
  const autoApolloRanges = activeEmpRanges.map(empToApollo).filter(Boolean);
  const empIsOn = function (r) { return empActive === null ? autoEmployees.indexOf(r) >= 0 : empActive.has(r); };

  const toggleTitle = function (id) {
    setTitlesActive(function (prev) {
      const base = prev || new Set(allTitleObjs.map(function (t) { return t.id; }));
      const s = new Set(base); if (s.has(id)) s.delete(id); else s.add(id); return s;
    });
  };
  const toggleEmp = function (range) {
    setEmpActive(function (prev) {
      // initialise from plan-derived autoEmployees; fall back to ALL if buyerSize was not set
      const base = prev || new Set(autoEmployees.length ? autoEmployees : ALL_EMP_RANGES);
      const s = new Set(base);
      if (s.has(range)) s.delete(range); else s.add(range); return s;
    });
  };

  const addTitle = function (titleStr) {
    titleStr = String(titleStr || newTitle).trim();
    if (!titleStr) return;
    const id = "extra_" + titleStr;
    if (allTitleObjs.some(function (t) { return t.id === id || t.en.toLowerCase() === titleStr.toLowerCase(); })) {
      setNewTitle(""); return;
    }
    setExtraTitles(function (prev) { return prev.concat([{ en: titleStr }]); });
    // if titlesActive is customised, make sure the new title is included
    setTitlesActive(function (prev) {
      if (!prev) return prev; // null = all on → new title auto-included
      const s = new Set(prev); s.add(id); return s;
    });
    setNewTitle("");
  };

  const removeExtraTitle = function (en) {
    const id = "extra_" + en;
    setExtraTitles(function (prev) { return prev.filter(function (t) { return t.en !== en; }); });
    setTitlesActive(function (prev) {
      if (!prev) return prev;
      const s = new Set(prev); s.delete(id); return s;
    });
  };

  const toggleTitleExpand = function (id) {
    setTitleExpanded(function (prev) {
      const s = new Set(prev); if (s.has(id)) s.delete(id); else s.add(id); return s;
    });
  };

  const toggleTitleVariant = function (titleId, variant) {
    setTitleVariantsActive(function (prev) {
      const allVars = titleVariants[titleId] || [];
      const base = prev[titleId] !== undefined ? prev[titleId] : null;
      const activeSet = base ? new Set(base) : new Set(allVars); // null → all active
      if (activeSet.has(variant)) activeSet.delete(variant); else activeSet.add(variant);
      return Object.assign({}, prev, { [titleId]: activeSet });
    });
  };

  // debounced CE positions autocomplete while user types a new title
  useEffect(function () {
    if (!newTitle.trim() || !window.hasLeads) { setTitleSuggs([]); return; }
    const t = setTimeout(async function () {
      setTitleSugLoading(true);
      const s = await window.leadPositions(newTitle.trim());
      setTitleSuggs(s ? s.filter(function (x) { return x !== newTitle.trim(); }).slice(0, 8) : []);
      setTitleSugLoading(false);
    }, 380);
    return function () { clearTimeout(t); };
  }, [newTitle]);

  // enrich every active title via CE positions/autocomplete (free endpoint).
  // Runs whenever the title list changes; only fetches titles that don't have variants yet.
  useEffect(function () {
    if (isCompany || !window.hasLeads || !allTitleObjs.length) return;
    let alive = true;
    (async function () {
      const toFetch = allTitleObjs.filter(function (t) { return !titleVariants[t.id]; });
      if (!toFetch.length) return;
      const updates = {};
      for (const t of toFetch) {
        const variants = await window.leadPositions(t.en);
        if (!alive) return;
        // keep the original title as first entry so it's always included
        const all = variants && variants.length
          ? [t.en].concat(variants.filter(function (v) { return v !== t.en; })).slice(0, 12)
          : [t.en];
        updates[t.id] = all;
      }
      if (alive && Object.keys(updates).length) {
        setTitleVariants(function (prev) { return Object.assign({}, prev, updates); });
      }
    })();
    return function () { alive = false; };
  }, [isCompany, JSON.stringify(allTitleObjs.map(function (t) { return t.id; }))]);

  // 0) seed f.locations on first visit so the country list is never empty (blank-page fix).
  //    a) wizard markets if present; b) else AI-pick the top-3 trade countries; c) else MAJOR_MARKETS.
  useEffect(function () {
    if (f.locations && f.locations.length) return;
    if ((data.markets || []).length) { setF({ locations: data.markets.slice(0, 10) }); return; }
    const fallback = (window.MAJOR_MARKETS || ["DE", "US", "GB"]).slice(0, 3);
    let alive = true;
    (async function () {
      let codes = null;
      if (window.aiTopTradeCountries) {
        codes = await window.aiTopTradeCountries({
          productName: data.productName,
          sectorName: sector ? sector.nameEn : "",
          subName: sub ? window.subName(sub, "en") : "",
          niches: window.niceNiches ? window.niceNiches(data, "en") : [],
          trade: data.trade,
        });
      }
      if (!alive) return;
      setF({ locations: (codes && codes.length ? codes : fallback) });
      setAutoCountries(true);
    })();
    return function () { alive = false; };
  }, []);

  // 1) build ENGLISH keyword groups (runs for both company AND people mode).
  //    CompanyEnrich indexes companies in English; Apollo also performs best with English terms.
  //    Every seed is AI-translated to English then expanded via CE autocomplete.
  // Signature of everything the builder consumes. When it changes (e.g. a site change
  // re-seeded keywords), clear groups so the builder below re-runs from the new inputs.
  const groupSeedKey = JSON.stringify([data.keywords || [], data.aiKeywords || [], data.productName || "", isCompany]);
  useEffect(function () { setGroups(null); }, [groupSeedKey]);
  useEffect(function () {
    if (groups) return;
    let alive = true;
    setEnriching(true);
    (async function () {
      const subEn = sub ? window.subName(sub, "en") : "";
      const secEn = sector ? sector.nameEn : "";
      // candidate seeds (may be Turkish): wizard keywords, AI keywords, product
      const raw = [].concat(data.keywords || [], data.aiKeywords || [], data.productName ? [data.productName] : [])
        .map(s => String(s || "").trim()).filter(Boolean);
      // English anchors we trust without translation
      let seeds = [subEn, secEn].filter(Boolean);
      // translate the raw (possibly Turkish) seeds to English in one AI call
      if (raw.length && window.hasAI) {
        try {
          const prompt = "Translate each of these product/industry search terms to concise English used in B2B company databases. "
            + "Return ONLY a JSON array of strings, same order, no duplicates, no explanations.\n" + JSON.stringify(raw.slice(0, 8));
          const out = await window.aiComplete(prompt);
          const arr = JSON.parse(out.slice(out.indexOf("["), out.lastIndexOf("]") + 1));
          if (Array.isArray(arr)) seeds = seeds.concat(arr.map(s => String(s || "").trim()));
        } catch (e) { seeds = seeds.concat(raw); }
      } else {
        seeds = seeds.concat(raw);
      }
      seeds = seeds.filter((v, i, a) => v && a.indexOf(v) === i).slice(0, 15);
      if (!seeds.length) seeds = [data.productName || "product"];

      const out = [];
      for (const seed of seeds) {
        let terms = [seed];
        if (window.hasLeads) {
          const ext = await window.leadKeywords(seed);
          if (ext && ext.length) terms = [seed].concat(ext).filter((v, i, a) => v && a.indexOf(v) === i).slice(0, 10);
        }
        out.push({ seed: seed, terms: terms, on: true, isBuyer: false });
      }
      // company-type (buyer archetype) groups — "who uses this product?" broadens the search.
      // Each type contributes 2-3 concrete English terms (e.g. steel rope → bridge / stadium contractors).
      if (window.hasAI) {
        try {
          const types = await window.aiCompanyTypes({
            productName: data.productName,
            sectorName: sector ? sector.nameEn : "",
            subName: sub ? window.subName(sub, "en") : "",
            niches: window.niceNiches ? window.niceNiches(data, "en") : [],
            lang: lang,
            trade: data.trade,
          });
          (types || []).forEach(function (t) {
            const seed = t.terms[0];
            if (out.some(function (g) { return g.seed.toLowerCase() === seed.toLowerCase(); })) return;
            out.push({ seed: seed, label: t.label, terms: t.terms.slice(0, 3), on: true, isBuyer: true });
          });
        } catch (e) { /* keep product groups only */ }
      }
      const capped = out.slice(0, 12);
      if (alive) { setGroups(capped); setEnriching(false); setMatrixTrigger(t => t + 1); }
    })();
    return function () { alive = false; };
  }, [isCompany, groupSeedKey, groups]);

  // 2) build the free keyword×country count matrix (same keyword-group rows for both modes)
  //    company: CE count per (group, country); people: Apollo count per (group, country)
  useEffect(function () {
    if (!window.hasLeads || !priority.length) { setMatrix({}); return; }
    if (!groups) return;  // wait for English group enrichment in both modes
    let alive = true;
    setMatrixLoading(true);
    (async function () {
      const next = {};
      const sel = {};
      if (isCompany) {
        await Promise.all((groups || []).map(function (g) {
          return Promise.all(priority.map(async function (cc) {
            const c = await window.leadCompanyCount({ keywords: g.terms, countries: [cc], employees: autoEmployees });
            next[cellKey(g.seed, cc)] = c != null ? c : -1; // -1 = fetch failed
            if (c > 0) sel[cellKey(g.seed, cc)] = true;
          }));
        }));
      } else {
        // keyword×country counts are WITHOUT titles — shows the broad pool for each keyword.
        // titles are applied only in the Title×Country matrix and in the final listing.
        for (const g of (groups || [])) {
          for (const cc of priority) {
            const co = window.COUNTRY_BY[cc];
            // use seed (concise English term) — joining all CE variants restricts Apollo results
            const j = await window.leadSearchPeople({ titles: [], locations: co ? [co.en] : [], keywords: g.seed, perPage: 1 });
            const total = j && typeof j.total === "number" ? j.total : -1; // -1 = fetch failed
            next[cellKey(g.seed, cc)] = total;
            if (total > 0) sel[cellKey(g.seed, cc)] = true;
          }
        }
      }
      if (alive) {
        setMatrix(next); setCellSel(sel); setMatrixLoading(false);
        setSavedMatrices(prev => Object.assign({}, prev, { [isCompany ? "company" : "people"]: next }));
      }
    })();
    return function () { alive = false; };
  }, [isCompany, matrixTrigger, JSON.stringify(priority), JSON.stringify(autoEmployees), JSON.stringify(data.titles)]);

  const toggleGroup = (seed) => setGroups((groups || []).map(g => g.seed === seed ? Object.assign({}, g, { on: !g.on }) : g));
  const toggleCell = (k) => setCellSel(s => { const n = Object.assign({}, s); if (n[k]) delete n[k]; else n[k] = true; return n; });

  // debounced CE autocomplete while user types a new keyword
  useEffect(function () {
    if (!newKw.trim() || !window.hasLeads) { setKwSuggs([]); return; }
    const t = setTimeout(async function () {
      setKwSugLoading(true);
      const s = await window.leadKeywords(newKw.trim());
      setKwSuggs(s ? s.filter(x => x !== newKw.trim()).slice(0, 8) : []);
      setKwSugLoading(false);
    }, 380);
    return () => clearTimeout(t);
  }, [newKw]);

  // title × country breakdown matrix (people mode only; sequential to respect Apollo rate limits)
  useEffect(function () {
    if (isCompany || !window.hasLeads || !priority.length || !allTitleObjs.length || !groups) { setTitlesMatrix({}); return; }
    // wait for the people keyword matrix so we can pick the highest-count seed as keyword —
    // using 2+ joined seeds causes Apollo to return 0 for all titles (too restrictive)
    if (!Object.keys(matrix).length) return;
    let alive = true;
    setTitlesMatrixLoading(true);
    const cols = priority.slice(0, 6);
    const rows = allTitleObjs.slice(0, 10);
    // pick the non-buyer product seed with the highest total count across countries
    const productGroups = (groups || []).filter(function (g) { return g.on && !g.isBuyer; });
    const bestGroup = productGroups.slice().sort(function (a, b) {
      const aTotal = priority.reduce(function (s, cc) { return s + Math.max(0, matrix[cellKey(a.seed, cc)] || 0); }, 0);
      const bTotal = priority.reduce(function (s, cc) { return s + Math.max(0, matrix[cellKey(b.seed, cc)] || 0); }, 0);
      return bTotal - aTotal;
    })[0] || productGroups[0] || (groups || []).find(function (g) { return g.on; });
    const kwStr = bestGroup ? bestGroup.seed : "";
    (async function () {
      const next = {};
      for (const t of rows) {
        // use CE-enriched variants when available — much better Apollo recall
        const vars = titleVariants[t.id];
        const titleList = vars && vars.length ? vars.slice(0, 8) : [t.en];
        for (const cc of cols) {
          const co = window.COUNTRY_BY[cc];
          const j = await window.leadSearchPeople({ titles: titleList, locations: co ? [co.en] : [], keywords: kwStr, perPage: 1 });
          next[t.id + "@@" + cc] = j && typeof j.total === "number" ? j.total : -1; // -1 = fetch failed
        }
      }
      if (alive) { setTitlesMatrix(next); setTitlesMatrixLoading(false); }
    })();
    return function () { alive = false; };
  }, [isCompany, matrixTrigger, JSON.stringify(data.titles), JSON.stringify(extraTitles), JSON.stringify(priority), JSON.stringify(titleVariants), JSON.stringify(matrix)]);

  // add a new keyword group; enrich via CE and patch the matrix for that group only
  const addGroup = async function (seed) {
    seed = String(seed || newKw).trim();
    if (!seed) return;
    if ((groups || []).some(g => g.seed.toLowerCase() === seed.toLowerCase())) {
      setNewKw(""); setKwSuggs([]); setKwSugOpen(false); return;
    }
    setKwAdding(true);
    let terms = [seed];
    if (window.hasLeads) {
      const ext = await window.leadKeywords(seed);
      if (ext && ext.length) terms = [seed].concat(ext).filter((v, i, a) => v && a.indexOf(v) === i).slice(0, 10);
    }
    const newGroup = { seed: seed, terms: terms, on: true };
    setGroups(prev => (prev || []).concat([newGroup]));
    setNewKw(""); setKwSuggs([]); setKwSugOpen(false);
    // patch only the new group's cells — avoids re-running the full matrix effect
    if (window.hasLeads && priority.length) {
      const newCells = {};
      if (isCompany) {
        await Promise.all(priority.map(async function (cc) {
          const c = await window.leadCompanyCount({ keywords: terms, countries: [cc], employees: autoEmployees });
          if (c != null) newCells[cellKey(seed, cc)] = c;
        }));
      } else {
        // use titles:[] (no title filter) — consistent with the main keyword×country matrix
        for (const cc of priority) {
          const co = window.COUNTRY_BY[cc];
          const j = await window.leadSearchPeople({ titles: [], locations: co ? [co.en] : [], keywords: seed, perPage: 1 });
          const total = j && typeof j.total === "number" ? j.total : null;
          if (total != null) newCells[cellKey(seed, cc)] = total;
        }
      }
      setMatrix(prev => Object.assign({}, prev, newCells));
      setCellSel(prev => {
        const next = Object.assign({}, prev);
        Object.keys(newCells).forEach(function (k) { if (newCells[k] > 0) next[k] = true; });
        return next;
      });
      setSavedMatrices(prev => {
        const key = isCompany ? "company" : "people";
        return Object.assign({}, prev, { [key]: Object.assign({}, prev[key] || {}, newCells) });
      });
    }
    setKwAdding(false);
  };

  // derive the keywords + countries the user selected in the matrix
  // both modes use the same keyword-group rows (English, CE-enriched)
  const matrixRows = enabledGroups.map(g => ({ key: g.seed, label: g.label || g.seed, terms: g.terms, isBuyer: !!g.isBuyer }));
  const selectedCountries = [...new Set(Object.keys(cellSel).filter(k => cellSel[k]).map(k => k.split("@@")[1]))];
  const selectedSeeds = [...new Set(Object.keys(cellSel).filter(k => cellSel[k]).map(k => k.split("@@")[0]))];
  const selectedTerms = [...new Set(enabledGroups.filter(g => selectedSeeds.indexOf(g.seed) >= 0).reduce((a, g) => a.concat(g.terms), []))];
  const selectedTotal = Object.keys(cellSel).filter(k => cellSel[k]).reduce((s, k) => s + (matrix[k] || 0), 0);

  // ---- run search over the selected cells (real, demo fallback) ----
  const runSearch = () => {
    // analytics: always record the "list" intent with the preview counts (fires in both modes)
    window.track && window.track("count_matrix_listed", {
      mode: isCompany ? "company" : "people",
      total: selectedTotal,
      countries: selectedCountries.length,
      seeds: selectedSeeds.length,
      lang: lang,
    });
    // LEAD GATE: stop before fetching/listing real results — show the membership CTA instead.
    if (window.isGated && window.isGated()) { setGateOpen(true); return; }
    setSearching(true); set({ searched: false });
    (async function () {
      const locations = selectedCountries.length ? selectedCountries : priority;
      let results = null, demo = false;
      let resultsTotal = null;
      if (window.hasLeads && isCompany) {
        const j = await window.leadSearchCompanies({ keywords: selectedTerms, countries: locations, employees: autoEmployees, pageSize: qty });
        if (j && j.companies && j.companies.length) { results = j.companies; resultsTotal = j.total || null; }
      } else if (window.hasLeads && !isCompany) {
        const locNames = locations.map(cc => { const c = window.COUNTRY_BY[cc]; return c ? c.en : null; }).filter(Boolean);
        const kw = selectedTerms.join(" ");
        const j = await window.leadSearchPeople({ titles: activeTitleStrings, locations: locNames, keywords: kw, employeesRanges: autoApolloRanges, perPage: qty });
        if (j && j.people && j.people.length) { results = j.people.map(normApolloPerson); resultsTotal = j.total || null; }
      }
      if (!results) {
        const ctx = { locations: locations, titles: data.titles, sectorId: data.sectorId };
        results = isCompany ? window.WIZ.makeCompanies(ctx, lang, qty) : window.WIZ.makePeople(ctx, lang, Math.min(qty, 25));
        demo = true;
      }
      setUsingDemo(demo);
      set({ results: results, resultsTotal: demo ? null : resultsTotal, searched: true, selected: [] });
      setSearching(false);
    })();
  };

  // reveal name/email of a record when it's selected (Apollo enrichment for real people)
  const toggleSel = (id) => {
    const has = (data.selected || []).includes(id);
    const nextSel = has ? data.selected.filter(x => x !== id) : (data.selected || []).concat(id);
    set({ selected: nextSel });
    if (!has && !isCompany && window.hasLeads && !usingDemo) {
      const rec = (data.results || []).find(r => r.id === id);
      if (rec && rec.apollo && !rec.email) {
        window.leadEnrichPerson({ id: id }).then(function (p) {
          if (!p) return;
          set({ results: (data.results || []).map(r => r.id === id ? Object.assign({}, r, { email: p.email || r.email, name: p.name || r.name, city: p.city || r.city }) : r) });
        });
      }
    }
  };

  const selectedObjs = (data.results || []).filter(r => (data.selected || []).includes(r.id));
  const exportCsv = () => {
    const rows = selectedObjs.length ? selectedObjs : data.results;
    const isSel = (id) => (data.selected || []).includes(id);
    const reveal = (id) => usingDemo || isSel(id);
    let head, lines;
    if (!isCompany) {
      head = ["Name", "Title", "Company", "Email", "City", "Country", "Verified", "Phone", "Match%"];
      lines = rows.map(r => {
        const co = typeof r.country === "string" ? r.country : (r.country ? (lang === "tr" ? r.country.tr : r.country.en) : "");
        return [reveal(r.id) ? (r.name || "") : window.maskName(r.name), r.title || "", r.company || "", reveal(r.id) ? (r.email || r.emailMasked || "") : "", r.city || "", co, r.verified ? "yes" : "", reveal(r.id) ? (r.phone || "") : "", r.match != null ? r.match : ""];
      });
    } else {
      head = ["Company", "Type", "Industry", "Country", "City", "Employees", "Revenue", "Domain", "Founded", "Match%"];
      lines = rows.map(r => { const c = companyCard(r, lang); return [reveal(r.id) ? c.name : window.maskName(c.name), c.typeLabel, c.industry, c.country, c.city, c.employees, c.revenue, reveal(r.id) ? c.domain : "", c.founded || "", c.match != null ? c.match : ""]; });
    }
    const csv = [head].concat(lines).map(a => a.map(x => '"' + String(x == null ? "" : x).replace(/"/g, '""') + '"').join(",")).join("\n");
    const blob = new Blob(["" + csv], { type: "text/csv;charset=utf-8;" });
    const a = document.createElement("a"); a.href = URL.createObjectURL(blob);
    a.download = "globby-leads-" + data.findMode + ".csv"; a.click();
    window.track && window.track("csv_exported", { mode: data.findMode, n: rows.length, lang: lang });
    toast(L.find.csvToast);
  };

  // assemble the search context for a data request email
  const requestContext = function () {
    const buildList = function (modeMatrix) {
      const list = [];
      matrixRows.forEach(function (row) {
        priority.forEach(function (cc) {
          const k = cellKey(row.key, cc);
          if (modeMatrix[k] != null) list.push({ keyword: row.label, country: coFromCC(cc, lang).label, count: modeMatrix[k] });
        });
      });
      return list;
    };
    return {
      lang: lang,
      contact: data.contact || null,
      search: {
        trade: data.trade, product: data.productName,
        mode: lang === "tr"
          ? (isCompany ? (imp ? "Tedarikçi firma" : "Firma") : (imp ? "Tedarikçi kişi" : "Karar verici"))
          : (isCompany ? (imp ? "Supplier company" : "Company") : (imp ? "Supplier contact" : "Decision-maker")),
        keywords: selectedTerms, countries: selectedCountries.map(cc => coFromCC(cc, lang).label),
        titles: (data.titles || []).map(id => { const t = window.WIZ.titleById(id); return t ? (lang === "tr" ? t.tr : t.en) : id; }),
        employees: autoEmployees, total: selectedTotal,
        companyMatrix: buildList(savedMatrices.company),
        peopleMatrix: buildList(savedMatrices.people),
      },
      results: { count: (data.results || []).length },
    };
  };

  return React.createElement("div", null,
    React.createElement(StepHead, { eyebrow: L.find.kicker, title: imp ? L.imp.findTitle : L.find.title, sub: L.find.sub }),

    // mode toggle
    React.createElement("div", { className: "grid c2", style: { marginTop: 18 } },
      React.createElement(SelCard, { icon: "building-2", sel: isCompany, title: imp ? L.imp.modeCompany : L.find.modeCompany, desc: imp ? L.imp.modeCompanyD : L.find.modeCompanyD, onClick: () => { window.track && window.track("find_mode_changed", { mode: "company", lang: lang }); setGateOpen(false); set({ findMode: "company", searched: false, results: [], selected: [] }); } }),
      React.createElement(SelCard, { icon: "users-round", sel: !isCompany, title: imp ? L.imp.modePeople : L.find.modePeople, desc: imp ? L.imp.modePeopleD : L.find.modePeopleD, onClick: () => { window.track && window.track("find_mode_changed", { mode: "people", lang: lang }); setGateOpen(false); set({ findMode: "people", searched: false, results: [], selected: [] }); } })
    ),

    React.createElement("div", { className: "findlayout" },
      // ---- LEFT: keyword groups + countries ----
      React.createElement("div", { className: "filterpanel" },
        React.createElement("div", { className: "filterpanel-head" },
          React.createElement("h4", null, L.find.filters),
          React.createElement("button", {
            className: "filterpanel-toggle",
            onClick: function () { setFilterOpen(function (o) { return !o; }); }
          }, React.createElement(GIcon, { name: filterOpen ? "chevron-up" : "sliders-horizontal", size: 14 }),
             filterOpen ? (lang === "tr" ? "Gizle" : "Hide") : (lang === "tr" ? "Filtreler" : "Filters"))
        ),
        React.createElement("div", { className: "filterpanel-body" + (filterOpen ? "" : " panel-closed") },
        React.createElement("div", { className: "fgroup" },
          React.createElement("label", null, L.find.kwGroups || "Keyword groups"),
          enriching ? React.createElement("p", { className: "muted-hint" }, React.createElement(GIcon, { name: "loader", size: 14, cls: "spin" }), " ", L.find.enriching || "Enriching…")
            : React.createElement("div", { className: "chips" },
              (groups || []).map(g => React.createElement(Chip, { key: g.seed, sel: g.on, onClick: () => toggleGroup(g.seed) }, g.seed))),
          React.createElement("div", { className: "kw-add-wrap", style: { marginTop: 8 } },
            React.createElement("div", { className: "kw-add-row" },
              React.createElement("input", {
                className: "inp kw-add-inp",
                placeholder: L.find.kwAddPlaceholder || "+ Add keyword…",
                value: newKw,
                onChange: function (e) { setNewKw(e.target.value); setKwSugOpen(true); },
                onKeyDown: function (e) { if (e.key === "Enter" && newKw.trim()) { e.preventDefault(); addGroup(); } if (e.key === "Escape") { setKwSugOpen(false); } },
                onFocus: function () { setKwSugOpen(true); },
                onBlur: function () { setTimeout(function () { setKwSugOpen(false); }, 180); },
              }),
              kwAdding ? React.createElement(GIcon, { name: "loader", size: 14, cls: "spin kw-add-spin" })
                : (newKw.trim() ? React.createElement("button", { className: "kw-add-btn", onClick: function () { addGroup(); }, title: "Add" }, React.createElement(GIcon, { name: "plus", size: 14 })) : null)
            ),
            (kwSugOpen && (kwSuggs.length > 0 || kwSugLoading)) ? React.createElement("div", { className: "kw-suggestions" },
              kwSugLoading ? React.createElement("div", { className: "kw-sug-loading" }, React.createElement(GIcon, { name: "loader", size: 12, cls: "spin" }))
                : kwSuggs.map(function (s) {
                    return React.createElement("div", { key: s, className: "kw-suggestion", onMouseDown: function (e) { e.preventDefault(); addGroup(s); } },
                      React.createElement(GIcon, { name: "plus", size: 12 }), " ", s);
                  })
            ) : null
          )),
        !isCompany ? React.createElement("div", { className: "fgroup" },
          React.createElement("label", null,
            React.createElement("span", null, lang === "tr" ? "Ünvanlar" : "Job titles"),
            React.createElement("span", { className: "filter-hint" }, " — ", activeTitleObjs.length, "/", allTitleObjs.length, " ", lang === "tr" ? "seçili" : "selected")),
          React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 4 } },
            allTitleObjs.map(function (t) {
              const on = !titlesActive || titlesActive.has(t.id);
              const expanded = titleExpanded.has(t.id);
              const vars = titleVariants[t.id] || [];
              const varActive = titleVariantsActive[t.id]; // null = all on
              const isEnriching = !vars.length && window.hasLeads;
              return React.createElement("div", { key: t.id, style: { display: "flex", flexDirection: "column", gap: 3 } },
                React.createElement("span", { style: { display: "inline-flex", alignItems: "center", gap: 2 } },
                  React.createElement("button", { className: "chip filter-chip" + (on ? " on" : " off"), onClick: function () { toggleTitle(t.id); },
                    style: vars.length ? { borderTopRightRadius: 0, borderBottomRightRadius: 0 } : (t.extra ? { borderTopRightRadius: 0, borderBottomRightRadius: 0, borderRight: "none" } : {}) },
                    React.createElement(GIcon, { name: on ? "check" : "minus", size: 12 }), " ", t.label,
                    isEnriching ? React.createElement(GIcon, { name: "loader", size: 11, cls: "spin", style: { marginLeft: 3 } }) : null),
                  vars.length ? React.createElement("button", {
                    className: "chip filter-chip filter-expand-btn" + (on ? " on" : " off"),
                    onClick: function (e) { e.stopPropagation(); toggleTitleExpand(t.id); },
                    title: expanded ? (lang === "tr" ? "Alt başlıkları gizle" : "Collapse variants") : (lang === "tr" ? "Alt başlıkları göster" : "Expand variants"),
                    style: { borderTopLeftRadius: 0, borderBottomLeftRadius: 0, borderLeft: "none", marginLeft: -1 }
                  }, React.createElement(GIcon, { name: expanded ? "chevron-up" : "chevron-down", size: 12 })) : null,
                  t.extra ? React.createElement("button", {
                    className: "chip filter-chip filter-remove-btn off",
                    onClick: function (e) { e.stopPropagation(); removeExtraTitle(t.en); },
                    title: lang === "tr" ? "Kaldır" : "Remove",
                    style: { marginLeft: 2 }
                  }, "×") : null),
                // variant sub-chips (shown when expanded)
                (expanded && vars.length) ? React.createElement("div", { style: { display: "flex", flexWrap: "wrap", gap: 3, paddingLeft: 14 } },
                  vars.map(function (v) {
                    const vOn = !varActive || varActive.has(v);
                    return React.createElement("button", { key: v, className: "chip filter-chip filter-variant-chip" + (vOn ? " on" : " off"),
                      onClick: function () { toggleTitleVariant(t.id, v); } },
                      React.createElement(GIcon, { name: vOn ? "check" : "minus", size: 11 }), " ", v);
                  })) : null);
            })),
          React.createElement("div", { className: "kw-add-wrap", style: { marginTop: 6 } },
            React.createElement("div", { className: "kw-add-row" },
              React.createElement("input", {
                className: "inp kw-add-inp",
                placeholder: lang === "tr" ? "+ Ünvan ekle…" : "+ Add title…",
                value: newTitle,
                onChange: function (e) { setNewTitle(e.target.value); setTitleSugOpen(true); },
                onKeyDown: function (e) { if (e.key === "Enter" && newTitle.trim()) { e.preventDefault(); addTitle(); } if (e.key === "Escape") setTitleSugOpen(false); },
                onFocus: function () { setTitleSugOpen(true); },
                onBlur: function () { setTimeout(function () { setTitleSugOpen(false); }, 180); },
              }),
              newTitle.trim() ? React.createElement("button", { className: "kw-add-btn", onClick: function () { addTitle(); }, title: lang === "tr" ? "Ekle" : "Add" },
                React.createElement(GIcon, { name: "plus", size: 14 })) : null),
            (titleSugOpen && (titleSuggs.length > 0 || titleSugLoading)) ? React.createElement("div", { className: "kw-suggestions" },
              titleSugLoading ? React.createElement("div", { className: "kw-sug-loading" }, React.createElement(GIcon, { name: "loader", size: 12, cls: "spin" }))
                : titleSuggs.map(function (s) {
                    return React.createElement("div", { key: s, className: "kw-suggestion", onMouseDown: function (e) { e.preventDefault(); addTitle(s); } },
                      React.createElement(GIcon, { name: "plus", size: 12 }), " ", s);
                  })) : null)) : null,
        !isCompany ? React.createElement("div", { className: "fgroup" },
          React.createElement("label", null,
            React.createElement("span", null, lang === "tr" ? "Firma büyüklüğü" : "Company size"),
            React.createElement("span", { className: "filter-hint" }, " — ", activeEmpRanges.length, "/", ALL_EMP_RANGES.length, " ", lang === "tr" ? "seçili" : "selected")),
          React.createElement("div", { className: "chips" },
            ALL_EMP_RANGES.map(function (r) {
              const on = empIsOn(r);
              return React.createElement("button", { key: r, className: "chip filter-chip" + (on ? " on" : " off"), onClick: function () { toggleEmp(r); } },
                React.createElement(GIcon, { name: on ? "check" : "minus", size: 12 }), " ", r, lang === "tr" ? " çalışan" : " emp");
            }))) : null,
        React.createElement("div", { className: "fgroup" },
          React.createElement("label", null, L.find.fLocation),
          React.createElement(CountryPicker, { selected: f.locations || [], onChange: arr => { setAutoCountries(false); setF({ locations: arr }); }, lang: lang, L: L }))
        ) // end filterpanel-body
      ),

      // ---- RIGHT: matrix → results ----
      React.createElement("div", null,
        // AI auto-picked the country list (user skipped country selection) — dismissable note
        (autoCountries && !data.searched && !searching) ? React.createElement("div", { className: "ai-auto-note" },
          React.createElement(GIcon, { name: "sparkles", size: 15 }),
          React.createElement("span", null, L.find.autoCountryNote),
          React.createElement("button", { className: "ai-auto-x", onClick: function () { setAutoCountries(false); }, "aria-label": "×" },
            React.createElement(GIcon, { name: "x", size: 13 }))) : null,
        // count matrix (before listing)
        (!data.searched && !searching) ? React.createElement(CountMatrix, {
          L: L, lang: lang, rows: matrixRows, countries: priority, matrix: matrix, cellSel: cellSel,
          loading: matrixLoading, onToggleCell: toggleCell, isCompany: isCompany, imp: imp,
          total: selectedTotal, onList: runSearch,
          // people mode: override labels to clarify this is the keyword-only (no-title) count
          overrideTitle: !isCompany ? (lang === "tr" ? "1️⃣  Kelime × Ülke — sektördeki toplam kişi havuzu" : "1️⃣  Keyword × Country — total people in sector") : null,
          overrideHint: !isCompany ? (lang === "tr"
            ? "Ünvan filtresi YOK — yalnızca anahtar kelimelerle eşleşen tüm kişiler. Seçmek istediğin hücrelere tıkla."
            : "No title filter — everyone matching the keywords. Tap cells you want to include, then list.") : null,
        }) : null,

        // title × country breakdown table (people mode only)
        (!isCompany && !data.searched && !searching) ? React.createElement("div", null,
          React.createElement("div", { className: "matrix-divider" },
            React.createElement(GIcon, { name: "arrow-down", size: 14 }),
            " ",
            lang === "tr"
              ? "Aşağıdaki tablo aynı arama kelimelerini ünvan filtresiyle gösterir — gerçek hedef kitleniz."
              : "Table below applies the same keywords with title filter — your actual target audience.",
            titlesMatrixLoading ? React.createElement("span", { style: { marginLeft: 8, display: "inline-flex", alignItems: "center", gap: 4, color: "var(--gb-violet-600)", fontSize: 11 } },
              React.createElement(GIcon, { name: "loader", size: 13, cls: "spin" }),
              lang === "tr" ? "Sayılıyor…" : "Counting…") : null),
          allTitleObjs.length
            ? React.createElement(TitlesMatrix, {
                lang: lang, titles: allTitleObjs, countries: priority.slice(0, 6), matrix: titlesMatrix,
                loading: titlesMatrixLoading, titlesActive: titlesActive, onToggleTitle: toggleTitle,
              })
            : React.createElement("p", { className: "muted-hint", style: { marginTop: 8 } },
                lang === "tr" ? "Sol paneldeki 'Ünvanlar' bölümünden ünvan ekleyin." : "Add titles via the 'Job titles' section in the left panel.")) : null,

        // ---- LEAD GATE: replaces the real results list while gated ----
        (window.isGated && window.isGated() && gateOpen) ? React.createElement(window.LeadGate, {
          L: L, lang: lang,
          source: isCompany ? "find_company" : "find_people",
          counts: { total: selectedTotal, countries: selectedCountries, seeds: selectedSeeds, mode: isCompany ? "company" : "people" },
          context: requestContext(),
          contact: data.contact || null,
        }) : null,

        searching ? React.createElement("div", { className: "empty-find" },
          React.createElement("div", { className: "circle" }, React.createElement(GIcon, { name: "loader", size: 30, cls: "spin" })),
          React.createElement("h3", null, imp ? L.imp.findSearching : L.find.searching)) : null,

        (!(window.isGated && window.isGated()) && data.searched && !searching) ? (
          (data.results || []).length ? React.createElement("div", null,
            React.createElement("div", { className: "results-head" },
              React.createElement("div", { className: "count" },
                React.createElement("b", null, (data.results || []).length),
                data.resultsTotal && data.resultsTotal > (data.results || []).length ? React.createElement("span", { className: "count-of" }, " / " + data.resultsTotal.toLocaleString(lang === "tr" ? "tr-TR" : "en-US")) : null,
                " ", isCompany ? (imp ? L.imp.resultsCompany : L.find.resultsCompany) : (imp ? L.imp.resultsPeople : L.find.resultsPeople)),
              React.createElement("span", { className: "demo-note" }, React.createElement(GIcon, { name: "info", size: 14 }), usingDemo ? (L.find.demoBadge || L.find.demoNote) : (L.find.maskedNote || L.find.demoNote))),
            React.createElement("div", { className: "results-list" },
              (data.results || []).map(r => isCompany ? CompanyCard(r, data, L, lang, toggleSel) : PeopleCard(r, data, L, lang, toggleSel))))
          : React.createElement("div", { className: "empty-find" },
              React.createElement("div", { className: "circle" }, React.createElement(GIcon, { name: "search-x", size: 30 })),
              React.createElement("h3", null, L.find.noResultsTitle),
              React.createElement("p", null, L.find.noResultsDesc))
        ) : null,

        // custom data request box (always available)
        React.createElement(DataRequestBox, { L: L, lang: lang, getContext: requestContext })
      )
    ),

    // action bar (hidden while gated — CSV/save/email are part of the gated detail)
    (!(window.isGated && window.isGated()) && data.searched && (data.selected || []).length) ? React.createElement("div", { className: "actionbar" },
      React.createElement("span", { className: "sel-n" }, fmt(imp ? L.imp.findSelectedFmt : L.find.selectedFmt, { n: data.selected.length })),
      React.createElement("div", { className: "acts" },
        React.createElement("button", { className: "ab white", onClick: () => toast(L.find.savedToast) }, React.createElement(GIcon, { name: "list-checks", size: 16 }), L.find.saveCrm),
        React.createElement("button", { className: "ab white", onClick: exportCsv }, React.createElement(GIcon, { name: "download", size: 16 }), L.find.exportCsv),
        !isCompany ? React.createElement("button", { className: "ab green", onClick: () => { setSent(false); setEmailOpen(true); } }, React.createElement(GIcon, { name: "mail", size: 16 }), L.find.startEmail) : null)
    ) : null,

    emailOpen ? EmailModal(L, lang, data, () => setEmailOpen(false), sent, () => { setSent(true); window.track && window.track("email_drafted", { mode: isCompany ? "company" : "people", surface: "find", lang: lang }); }) : null
  );
}
window.FindStep = FindStep;

// ---- title × country breakdown table (people mode; rows = plan titles, columns = countries) ----
function TitlesMatrix(props) {
  const { lang, titles, countries, matrix, loading, titlesActive, onToggleTitle } = props;
  if (!countries.length || !titles.length) return null;
  const fmt = function (n) { return n == null ? null : n.toLocaleString(lang === "tr" ? "tr-TR" : "en-US"); };
  const isOn = function (t) { return !titlesActive || titlesActive.has(t.id); };
  const colTotals = countries.map(function (cc) {
    return titles.reduce(function (s, t) { const v = matrix[t.id + "@@" + cc]; return s + (v > 0 ? v : 0); }, 0);
  });
  return React.createElement("div", { className: "matrix-wrap", style: { marginTop: 18 } },
    React.createElement("div", { className: "matrix-head" },
      React.createElement("h3", null, lang === "tr" ? "2️⃣  Ünvan × Ülke — kelime + ünvan filtreli hedef kitle" : "2️⃣  Title × Country — keyword + title filtered audience"),
      React.createElement("p", { className: "muted-hint", style: { margin: "2px 0 0" } },
        lang === "tr"
          ? "Ünvan filtresi VAR — yalnızca seçili ünvanlardaki ve aynı arama kelimelerindeki kişiler. Ünvana tıklayarak aramadan çıkarabilirsin."
          : "Title filter ON — only people with selected titles matching the same keywords. Click a title row to include/exclude it.")),
    loading ? React.createElement("p", { className: "muted-hint" }, React.createElement(GIcon, { name: "loader", size: 14, cls: "spin" }), " ", lang === "tr" ? "Sayılıyor…" : "Counting…") : null,
    React.createElement("div", { className: "matrix-scroll" },
      React.createElement("table", { className: "matrix" },
        React.createElement("thead", null,
          React.createElement("tr", null,
            React.createElement("th", { className: "mx-cnr" }, lang === "tr" ? "Ünvan" : "Title"),
            countries.map(function (cc) { const c = coFromCC(cc, lang); return React.createElement("th", { key: cc, className: "mx-col" }, c.f, React.createElement("span", { className: "mx-cc" }, cc)); }))),
        React.createElement("tbody", null,
          titles.map(function (t) {
            const on = isOn(t);
            const rowTotal = countries.reduce(function (s, cc) { const v = matrix[t.id + "@@" + cc]; return s + (v > 0 ? v : 0); }, 0);
            return React.createElement("tr", { key: t.id, className: on ? "" : "tm-row-off" },
              React.createElement("td", { className: "mx-row tm-title", onClick: function () { onToggleTitle(t.id); }, title: on ? (lang === "tr" ? "Aramadan çıkar" : "Exclude from search") : (lang === "tr" ? "Aramaya ekle" : "Include in search") },
                React.createElement("span", { className: "tm-toggle-icon" }, React.createElement(GIcon, { name: on ? "check-circle" : "circle", size: 14 })),
                " ", t.label),
              countries.map(function (cc) {
                const v = matrix[t.id + "@@" + cc];
                return React.createElement("td", { key: cc, className: "mx-cell" + (v > 0 ? " hit" : "") },
                  v == null ? React.createElement(GIcon, { name: "loader", size: 12, cls: "spin" })
                    : v < 0 ? React.createElement("span", { className: "mx-n", style: { color: "var(--gb-ink-300)" } }, "—")
                    : React.createElement("span", { className: "mx-n" }, fmt(v)));
              }));
          }),
          React.createElement("tr", { className: "tm-total-row" },
            React.createElement("td", { className: "mx-row" }, React.createElement("b", null, lang === "tr" ? "Toplam" : "Total")),
            colTotals.map(function (tot, i) {
              return React.createElement("td", { key: countries[i], className: "mx-cell" }, React.createElement("b", null, fmt(tot)));
            }))))));
}

// ---- keyword × country count matrix (free counts; user picks the cells) ----
function CountMatrix(props) {
  const { L, lang, rows, countries, matrix, cellSel, loading, onToggleCell, total, onList, overrideTitle, overrideHint, imp } = props;
  if (!countries.length) return React.createElement("p", { className: "muted-hint", style: { marginTop: 10 } }, L.find.emptyDesc);
  const typeTag = imp ? L.find.supplierTypeTag : L.find.companyTypeTag;
  const cell = function (rowKey, cc) {
    const k = rowKey + "@@" + cc;
    const cnt = matrix[k];
    const on = !!cellSel[k];
    const has = cnt != null;
    const hit = has && cnt > 0;
    return React.createElement("td", { key: cc, className: "mx-cell" + (on ? " on" : "") + (hit ? " hit" : ""), onClick: hit ? () => onToggleCell(k) : null },
      cnt == null ? React.createElement(GIcon, { name: "loader", size: 12, cls: "spin" })
        : cnt < 0 ? React.createElement("span", { className: "mx-n", style: { color: "var(--gb-ink-300)" } }, "—")
        : React.createElement("span", { className: "mx-cellbox" },
            hit ? React.createElement("span", { className: "mx-check" + (on ? " on" : "") }, on ? React.createElement(GIcon, { name: "check", size: 12, stroke: 3 }) : null) : null,
            React.createElement("span", { className: "mx-n" }, cnt.toLocaleString(lang === "tr" ? "tr-TR" : "en-US"))));
  };
  return React.createElement("div", { className: "matrix-wrap" },
    React.createElement("div", { className: "matrix-head" },
      React.createElement("h3", null, overrideTitle || L.find.matrixTitle),
      React.createElement("p", { className: "muted-hint", style: { margin: "2px 0 0" } }, overrideHint || L.find.matrixHint)),
    loading ? React.createElement("p", { className: "muted-hint" }, React.createElement(GIcon, { name: "loader", size: 14, cls: "spin" }), " ", L.find.matrixLoading) : null,
    React.createElement("div", { className: "matrix-scroll" },
      React.createElement("table", { className: "matrix" },
        React.createElement("thead", null,
          React.createElement("tr", null,
            React.createElement("th", { className: "mx-cnr" }, L.find.colKeyword),
            countries.map(cc => { const c = coFromCC(cc, lang); return React.createElement("th", { key: cc, className: "mx-col" }, c.f, React.createElement("span", { className: "mx-cc" }, cc)); }))),
        React.createElement("tbody", null,
          rows.map(row => React.createElement("tr", { key: row.key },
            React.createElement("td", { className: "mx-row" },
              row.label,
              row.isBuyer ? React.createElement("span", { className: "mx-typetag" }, typeTag) : null),
            countries.map(cc => cell(row.key, cc))))))),
    React.createElement("div", { className: "matrix-foot" },
      React.createElement("span", { className: "mx-total" }, L.find.totalRow, ": ", React.createElement("b", null, total.toLocaleString(lang === "tr" ? "tr-TR" : "en-US"))),
      React.createElement("button", { className: "btn btn-primary", onClick: onList, disabled: loading },
        React.createElement(GIcon, { name: "list-checks", size: 17 }), L.find.listSelected)));
}

// ---- custom data request box → emails sales team ----
function DataRequestBox(props) {
  const { L, lang, getContext } = props;
  const [msg, setMsg] = useState("");
  const [busy, setBusy] = useState(false);
  const [done, setDone] = useState(false);
  const [err, setErr] = useState(false);
  const submit = function () {
    setBusy(true); setErr(false);
    (async function () {
      const ctx = getContext();
      window.track && window.track("data_request_submitted", { mode: ctx && ctx.search ? ctx.search.mode : null, total: ctx && ctx.search ? ctx.search.total : null, lang: lang });
      const ok = await window.leadDataRequest(Object.assign({ message: msg }, ctx));
      setBusy(false);
      if (ok) { setDone(true); } else { setErr(true); }
    })();
  };
  if (done) return React.createElement("div", { className: "datareq done" },
    React.createElement(GIcon, { name: "badge-check", size: 22 }),
    React.createElement("p", null, L.find.reqSent));
  return React.createElement("div", { className: "datareq" },
    React.createElement("div", { className: "datareq-head" },
      React.createElement(GIcon, { name: "sparkles", size: 18 }),
      React.createElement("div", null,
        React.createElement("h4", null, L.find.reqTitle),
        React.createElement("p", null, L.find.reqDesc))),
    React.createElement("textarea", { className: "inp", style: { minHeight: 90, marginTop: 10 }, placeholder: L.find.reqPlaceholder, value: msg, onChange: e => setMsg(e.target.value) }),
    err ? React.createElement("p", { className: "muted-hint", style: { color: "var(--gb-danger,#d33)" } }, L.find.reqError) : null,
    React.createElement("button", { className: "btn btn-primary", style: { marginTop: 10 }, onClick: submit, disabled: busy },
      React.createElement(GIcon, { name: busy ? "loader" : "send", size: 16, cls: busy ? "spin" : "" }), busy ? L.find.reqSending : L.find.reqBtn));
}

// ---- lead-capture gate: shown (instead of the detail list) while window.isGated(). ----
// Reused by FindStep (company/people) and MarketPage (hedef pazar). Reuses the contact info
// collected at the start (data.contact) — no second form. Fires the key conversion event.
function LeadGate(props) {
  const { L, lang, source } = props;
  const counts = props.counts || {};
  const G = (L && L.gate) || {};
  const seenRef = React.useRef(false);
  const [busy, setBusy] = useState(false);
  const [done, setDone] = useState(false);

  useEffect(function () {
    if (seenRef.current) return; seenRef.current = true;
    window.track && window.track("gate_viewed", { source: source, total: counts.total || 0, mode: counts.mode, lang: lang });
  }, []);

  const request = function () {
    setBusy(true);
    // Fire the conversion BEFORE awaiting email so a Resend failure can't lose it.
    // The Supabase write happens inside track() with type:'lead'.
    window.track && window.track("membership_requested",
      { source: source, total: counts.total || 0, mode: counts.mode, lang: lang },
      { type: "lead", contact: props.contact || null, counts: counts,
        snapshot: (props.context && props.context.search)
          ? { product: props.context.search.product, trade: props.context.search.trade, mode: props.context.search.mode }
          : null,
        message: "[MEMBERSHIP REQUEST] source=" + source });
    Promise.resolve(window.leadDataRequest(Object.assign({ message: "[MEMBERSHIP REQUEST] source=" + source }, props.context || {})))
      .then(function () { setBusy(false); setDone(true); })
      .catch(function () { setBusy(false); setDone(true); });
  };

  if (done) return React.createElement("div", { className: "datareq done", style: { marginTop: 16 } },
    React.createElement(GIcon, { name: "badge-check", size: 22 }),
    React.createElement("p", null, G.thanks || L.find.reqSent));

  const isMarket = source === "market";
  const title = isMarket ? (G.marketTitle || G.title) : (G.title || "");
  const subtitle = isMarket ? (G.marketSubtitle || G.subtitle) : (G.subtitle || "");
  const nFmt = (counts.total || 0).toLocaleString(lang === "tr" ? "tr-TR" : "en-US");
  const nCountries = (counts.countries || []).length;

  return React.createElement("div", { className: "datareq gate-panel", style: { marginTop: 16 } },
    // counts banner — the "how many found" preview that motivates the request
    !isMarket ? React.createElement("div", { className: "results-head", style: { borderBottom: "none", marginBottom: 4 } },
      React.createElement("div", { className: "count" },
        React.createElement("b", null, nFmt), " ", G.countsLabel || "",
        nCountries ? React.createElement("span", { className: "count-of" }, " · " + nCountries + " " + (G.countriesLabel || "")) : null)) : null,
    React.createElement("div", { className: "datareq-head" },
      React.createElement(GIcon, { name: "star", size: 18 }),
      React.createElement("div", null,
        React.createElement("h4", null, title),
        React.createElement("p", null, subtitle))),
    React.createElement("button", { className: "btn btn-primary", style: { marginTop: 12 }, onClick: request, disabled: busy },
      React.createElement(GIcon, { name: busy ? "loader" : "sparkles", size: 16, cls: busy ? "spin" : "" }), busy ? (G.sending || "…") : (G.cta || "")));
}
window.LeadGate = LeadGate;

function CompanyCard(r, data, L, lang, toggleSel) {
  const added = (data.selected || []).includes(r.id);
  const c = companyCard(r, lang);
  const shownName = added ? c.name : window.maskName(c.name);
  return React.createElement("div", { key: r.id, className: "bcard" + (added ? " sel" : "") },
    React.createElement("div", { className: "avatar", style: { background: avatarColor(c.name) } }, added ? initials(c.name) : "•"),
    React.createElement("div", { className: "info" },
      React.createElement("div", { className: "nm" }, shownName, c.verified ? React.createElement("span", { className: "vbadge" }, React.createElement(GIcon, { name: "badge-check", size: 14 }), L.find.verified) : null),
      React.createElement("div", { className: "sub2" },
        c.typeLabel ? React.createElement("span", null, c.typeLabel) : null,
        c.typeLabel ? React.createElement("span", { className: "dotsep" }, "·") : null,
        React.createElement("span", null, c.flag + " " + (c.city ? c.city + ", " : "") + c.country),
        c.employees ? React.createElement("span", { className: "dotsep" }, "·") : null,
        c.employees ? React.createElement("span", null, c.employees + " " + L.find.employees) : null,
        c.revenue ? React.createElement("span", { className: "dotsep" }, "·") : null,
        c.revenue ? React.createElement("span", null, c.revenue) : null)),
    (c.match != null) ? React.createElement("span", { className: "matchpill" }, "%" + c.match, React.createElement("span", { className: "lab" }, L.find.matchScore)) : null,
    React.createElement("button", { className: "addbtn" + (added ? " added" : ""), onClick: () => toggleSel(r.id) },
      React.createElement(GIcon, { name: added ? "check" : "plus", size: 15, stroke: 2.4 }), added ? L.find.added : L.find.add)
  );
}

function PeopleCard(r, data, L, lang, toggleSel) {
  const added = (data.selected || []).includes(r.id);
  const isReal = !!r.apollo;
  // real people are already masked by Apollo (first + obfuscated last); reveal full on enrich (after add)
  const shownName = added ? (r.name || "") : (isReal ? r.name : window.maskName(r.name));
  const emailText = added ? (r.email || (isReal ? (L.find.enrichingEmail || "…") : r.email)) : (r.emailMasked || (isReal ? "•••@•••" : ""));
  return React.createElement("div", { key: r.id, className: "bcard" + (added ? " sel" : "") },
    React.createElement("div", { className: "avatar", style: { background: avatarColor(r.name || r.id) } }, added ? initials(r.name || "?") : "•"),
    React.createElement("div", { className: "info" },
      React.createElement("div", { className: "nm" }, shownName, r.verified ? React.createElement("span", { className: "vbadge" }, React.createElement(GIcon, { name: "badge-check", size: 14 }), L.find.verified) : null),
      React.createElement("div", { className: "sub2" },
        React.createElement("span", { style: { fontWeight: 700, color: "var(--gb-ink-700)" } }, r.title),
        r.company ? React.createElement("span", { className: "dotsep" }, "·") : null,
        r.company ? React.createElement("span", null, r.company) : null),
      React.createElement("div", { className: "sub2", style: { marginTop: 3 } },
        React.createElement("span", { style: { fontFamily: "var(--font-mono)", fontSize: 12.5, color: "var(--gb-violet-700)" } }, React.createElement(GIcon, { name: "mail", size: 13, style: { display: "inline-block", verticalAlign: "-2px", marginRight: 4 } }), emailText))),
    (r.match != null) ? React.createElement("span", { className: "matchpill" }, "%" + r.match, React.createElement("span", { className: "lab" }, L.find.matchScore)) : null,
    React.createElement("button", { className: "addbtn" + (added ? " added" : ""), onClick: () => toggleSel(r.id) },
      React.createElement(GIcon, { name: added ? "check" : "plus", size: 15, stroke: 2.4 }), added ? L.find.added : L.find.add)
  );
}

function EmailModal(L, lang, data, close, sent, doSend) {
  const n = (data.selected || []).length;
  const imp = data.trade === "import";
  const vars = { product: data.productName || (lang === "tr" ? "ürünümüz" : "our product"), country: data.country || "" };
  const subjT = imp ? L.imp.emailSubject : L.email.subjectVal;
  const bodyT = imp ? L.imp.emailBody : L.email.bodyVal;
  const [subj, setSubj] = useState(fmt(subjT, vars));
  const [body, setBody] = useState(fmt(bodyT, vars));
  return React.createElement("div", { className: "modal-bg", onClick: close },
    React.createElement("div", { className: "modal", onClick: e => e.stopPropagation() },
      React.createElement("button", { className: "modal-close", onClick: close }, React.createElement(GIcon, { name: "x", size: 18 })),
      sent ?
        React.createElement("div", { className: "modal-success" },
          React.createElement("div", { className: "big" }, React.createElement(GIcon, { name: "send", size: 30 })),
          React.createElement("h3", null, L.email.sentTitle),
          React.createElement("p", { className: "msub" }, L.email.sentDesc),
          React.createElement("button", { className: "btn btn-primary", style: { marginTop: 8 }, onClick: close }, L.email.close))
        :
        React.createElement("div", null,
          React.createElement("h3", null, L.email.title),
          React.createElement("p", { className: "msub" }, fmt(imp ? L.imp.emailToFmt : L.email.toFmt, { n: n })),
          React.createElement("div", { className: "field", style: { marginTop: 8 } },
            React.createElement("label", null, L.email.subject),
            React.createElement("input", { className: "inp", value: subj, onChange: e => setSubj(e.target.value) })),
          React.createElement("div", { className: "field" },
            React.createElement("label", null, L.email.body),
            React.createElement("textarea", { className: "inp", style: { minHeight: 150 }, value: body, onChange: e => setBody(e.target.value) })),
          React.createElement("div", { style: { display: "flex", gap: 10, marginTop: 16, justifyContent: "flex-end" } },
            React.createElement("button", { className: "btn btn-back", onClick: close }, L.email.close),
            React.createElement("button", { className: "btn btn-primary", onClick: doSend }, React.createElement(GIcon, { name: "send", size: 16 }), L.email.send)))
    )
  );
}