/* ============================================================
   FlowSpace Finder, presentational components (window.FinderUI)
   Composes FlowSpace DS components + tokens with a marketing skin.
   No real photos: spaces use deterministic stylised "area tiles".
   ============================================================ */
(function () {
  "use strict";
  const React = window.React;
  const { useState, useEffect, useRef } = React;
  const DS = window.DesignSystem_019e02;
  const FD = window.FinderData;
  const { gbp, hash, paletteFor, reasonFor } = FD;

  // ---------------- Lucide-style inline icons ----------------
  const PATHS = {
    search: "M11 11m-8 0a8 8 0 1 0 16 0a8 8 0 1 0-16 0M21 21l-4.3-4.3",
    sparkles: "M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9L12 3ZM19 3v4M21 5h-4",
    arrowRight: "M5 12h14M13 6l6 6-6 6",
    lock: "M5 11h14a0 0 0 0 1 0 0v8a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-8a0 0 0 0 1 0 0ZM8 11V7a4 4 0 0 1 8 0v4",
    mapPin: "M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0ZM12 10m-3 0a3 3 0 1 0 6 0a3 3 0 1 0-6 0",
    check: "M20 6 9 17l-5-5",
    users: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8",
    wallet: "M19 7V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M21 12a2 2 0 0 0-2-2h-3a2 2 0 0 0 0 4h3a2 2 0 0 0 2-2Z",
    calendar: "M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z",
    desk: "M4 7h16M5 7v10M19 7v10M3 17h18M8 7v4h8V7",
    zap: "M13 2 3 14h9l-1 8 10-12h-9l1-8Z",
    brain: "M12 5a3 3 0 0 0-6 0v.5A3 3 0 0 0 4 8a3 3 0 0 0 1 5.7V15a3 3 0 0 0 5 2 3 3 0 0 0 5-2v-1.3A3 3 0 0 0 16 8a3 3 0 0 0-2-2.5V5a3 3 0 0 0-2 0Z",
    shield: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z",
    heart: "M19 14c1.5-1.5 3-3.4 3-5.5A4.5 4.5 0 0 0 12 5 4.5 4.5 0 0 0 2 8.5c0 2.1 1.5 4 3 5.5l7 7 7-7Z",
    x: "M18 6 6 18M6 6l12 12",
    coins: "M8 8m-6 0a6 6 0 1 0 12 0a6 6 0 1 0-12 0M18.1 6.3a6 6 0 1 1-3.8 11.3M7 6h1v4M16.7 14H17v4",
    thumbsDown: "M17 14V2M9 18.1l1 3.9c1.6 0 3-1.3 3-3v-4h4.7a2 2 0 0 0 2-2.3l-1.4-9A2 2 0 0 0 17.4 2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h3Z",
    message: "M21 11.5a8.4 8.4 0 0 1-9 8.4 9 9 0 0 1-3.9-.9L3 21l1.9-5.1A8.4 8.4 0 0 1 12 3a8.5 8.5 0 0 1 9 8.5Z",
    arrowLeft: "M19 12H5M11 6l-6 6 6 6",
    eye: "M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12ZM12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0-6 0",
    tag: "M3 11.5 11.5 3H20a1 1 0 0 1 1 1v8.5L12.5 21 3 11.5ZM16 8h.01",
    refresh: "M3 12a9 9 0 0 1 15-6.7L21 8M21 3v5h-5M21 12a9 9 0 0 1-15 6.7L3 16M3 21v-5h5",
    star: "M12 2l3 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.9 21l1.2-6.8-5-4.9 6.9-1L12 2Z",
  };
  function Icon({ name, size = 20, stroke = 2, className = "", style = {} }) {
    return React.createElement("svg", {
      className, width: size, height: size, viewBox: "0 0 24 24", fill: "none",
      stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round",
      style: { flexShrink: 0, ...style },
    }, (PATHS[name] || "").split("M").filter(Boolean).map((seg, i) =>
      React.createElement("path", { key: i, d: "M" + seg })));
  }

  // ---------------- FlowSpace logo (image; white on dark, black on light) ----------------
  function Logo({ light = false, size = 30 }) {
    const w = Math.round(size * 5.1);
    return React.createElement("img", {
      className: "f-logo",
      src: light ? "finder/flowspace-white.png" : "finder/flowspace-black.png",
      alt: "FlowSpace", width: w, height: size, decoding: "async",
      style: { height: size, width: w, display: "block" },
    });
  }

  // ---------------- Trust logos (real FlowSpace clients, as wordmarks) ----------------
  const TRUST = [
    { n: "Gumtree", s: { letterSpacing: "-0.02em" } },
    { n: "Patch", s: { letterSpacing: "0.04em", textTransform: "uppercase", fontWeight: 800 } },
    { n: "Pleo", s: { letterSpacing: "0.02em", textTransform: "uppercase", fontWeight: 800 } },
    { n: "TransferGo", s: { letterSpacing: "-0.02em" } },
    { n: "Houst", s: { letterSpacing: "0.06em", textTransform: "uppercase", fontWeight: 800 } },
  ];
  function TrustRow({ light = false, label = "Trusted by hybrid teams at" }) {
    return React.createElement("div", { className: "f-trust" },
      React.createElement("div", { className: "f-trust-label", style: { color: light ? "rgba(255,255,255,0.7)" : "var(--color-text-muted)" } }, label),
      React.createElement("div", { className: "f-logo-row" },
        TRUST.map((b) => React.createElement("span", {
          key: b.n, className: "f-wordmark",
          style: { color: light ? "rgba(255,255,255,0.85)" : "var(--color-neutral-500)", ...b.s },
        }, b.n))));
  }

  // ---------------- Area tile (no photos) ----------------
  // A deterministic stylised "map" of the neighbourhood: tinted gradient,
  // a few abstract streets, a block or two, and a pin. Distinct per area.
  function AreaTile({ area, height = 150, locked = false, rounded = "12px 12px 0 0", label, lockLabel }) {
    const p = paletteFor(area);
    const seed = hash(area || "London");
    const streets = [];
    for (let i = 0; i < 4; i++) {
      const y = 22 + ((seed >> (i * 3)) % 5) * 22 + i * 6;
      streets.push(React.createElement("line", { key: "h" + i, x1: 0, y1: y, x2: 320, y2: y - 8, stroke: p.street, strokeWidth: (seed >> i) % 2 ? 7 : 4, opacity: 0.55 }));
    }
    for (let i = 0; i < 3; i++) {
      const x = 40 + ((seed >> (i * 4)) % 6) * 44;
      streets.push(React.createElement("line", { key: "v" + i, x1: x, y1: 0, x2: x + 18, y2: 160, stroke: p.street, strokeWidth: (seed >> i) % 2 ? 6 : 3, opacity: 0.4 }));
    }
    const blocks = [];
    for (let i = 0; i < 5; i++) {
      const bx = 16 + ((seed >> (i * 2)) % 7) * 40;
      const by = 18 + ((seed >> (i * 3)) % 4) * 34;
      blocks.push(React.createElement("rect", { key: "b" + i, x: bx, y: by, width: 22 + (seed >> i) % 16, height: 16 + (seed >> (i + 2)) % 14, rx: 3, fill: "#fff", opacity: 0.45 }));
    }
    return React.createElement("div", {
      className: "f-tile", style: { height, borderRadius: rounded, background: `linear-gradient(135deg, ${p.a}, ${p.b})` },
    },
      React.createElement("svg", { className: "f-tile-map", viewBox: "0 0 320 160", preserveAspectRatio: "xMidYMid slice", style: locked ? { filter: "blur(2px)" } : null },
        blocks, streets,
        React.createElement("g", { transform: "translate(160 78)" },
          React.createElement("path", { d: "M0 26C0 26 13 12 13 1A13 13 0 1 0-13 1C-13 12 0 26 0 26Z", fill: p.ink }),
          React.createElement("circle", { cx: 0, cy: 0, r: 5, fill: "#fff" }))),
      React.createElement("div", { className: "f-tile-grad" }),
      label !== false && React.createElement("div", { className: "f-tile-label" },
        React.createElement(Icon, { name: "mapPin", size: 14 }),
        React.createElement("span", null, label || area)),
      locked && lockLabel !== false && React.createElement("div", { className: "f-tile-lock" },
        React.createElement("div", { className: "f-tile-lock-badge" },
          React.createElement(Icon, { name: "mapPin", size: 14 }),
          React.createElement("span", null, lockLabel || "Exact location sent by email"))));
  }

  // ---------------- Office card ----------------
  // locked=true → teaser: area shown, building NAME + operator + photos hidden.
  // locked=false → unlocked: name + operator revealed, reactions enabled.
  function Stat({ icon, label, value, accent }) {
    return React.createElement("div", { className: "f-stat" },
      React.createElement("div", { className: "f-stat-top" },
        React.createElement(Icon, { name: icon, size: 14, style: { color: "var(--color-text-muted)" } }),
        React.createElement("span", { className: "f-stat-label" }, label)),
      React.createElement("div", { className: "f-stat-value", style: accent ? { color: "var(--color-teal-700)" } : null }, value));
  }

  function OfficeCard({ space, analysis, locked = false, rank, reaction, onReact, emoji = true, teaser = false, onCta, ctaLabel }) {
    const { Badge } = DS;
    const avail = space.av === "NOW";

    // ---- Locked teaser: no map; data-led, name softly redacted ----
    if (locked) {
      return React.createElement("div", { className: "f-card f-card--locked" + (teaser ? " is-teaser" : "") },
        React.createElement("div", { className: "f-card-body" },
          React.createElement("div", { className: "f-card-meta" },
            React.createElement(Badge, { tone: avail ? "teal" : "neutral", variant: "solid", dot: true }, avail ? "Available now" : "From " + space.av),
            React.createElement("span", { className: "f-meta-area" }, React.createElement(Icon, { name: "mapPin", size: 13 }), space.area),
            React.createElement("div", { className: "f-score f-score--inline", title: "AI match confidence" }, space.score + "% match")),
          React.createElement("div", { className: "f-card-head" },
            React.createElement("div", { className: "f-redact" },
              React.createElement("span", { className: "f-redact-bar" }),
              React.createElement("span", { className: "f-redact-tag" }, React.createElement(Icon, { name: "lock", size: 11 }), "Name unlocks below"))),
          React.createElement("div", { className: "f-stats" },
            React.createElement(Stat, { icon: "desk", label: "Desks", value: space.d }),
            React.createElement(Stat, { icon: "wallet", label: "Per desk", value: gbp(space.r) }),
            React.createElement(Stat, { icon: "calendar", label: "Monthly", value: gbp(space.m), accent: true })),
          React.createElement("div", { className: "f-why" },
            React.createElement("div", { className: "f-why-label" },
              React.createElement(Icon, { name: "sparkles", size: 13 }), "Why this fits"),
            React.createElement("p", null, reasonFor(space, analysis, teaser)))));
    }

    // ---- Unlocked card: full media + reactions ----
    return React.createElement("div", {
      className: "f-card" + (reaction === "like" ? " is-liked" : ""),
    },
      React.createElement("div", { className: "f-card-body" },
        React.createElement("div", { className: "f-card-meta" },
          React.createElement(Badge, { tone: avail ? "teal" : "neutral", variant: "solid", dot: true }, avail ? "Available now" : "From " + space.av),
          React.createElement("span", { className: "f-meta-area" }, React.createElement(Icon, { name: "mapPin", size: 13 }), space.area),
          rank != null && React.createElement("span", { className: "f-rank-text" }, "#" + (rank + 1) + " match")),
        React.createElement("div", { className: "f-card-head" },
          React.createElement("div", { style: { minWidth: 0 } },
            React.createElement("div", { className: "f-card-name" }, space.bld),
            React.createElement("div", { className: "f-card-area" }, space.op)),
          React.createElement("div", { className: "f-score", title: "AI match confidence" }, space.score + "%")),
        React.createElement("div", { className: "f-stats" },
          React.createElement(Stat, { icon: "desk", label: "Desks", value: space.d }),
          React.createElement(Stat, { icon: "wallet", label: "Per desk", value: gbp(space.r) }),
          React.createElement(Stat, { icon: "calendar", label: "Monthly", value: gbp(space.m), accent: true })),
        React.createElement("div", { className: "f-why" },
          React.createElement("div", { className: "f-why-label" },
            React.createElement(Icon, { name: "sparkles", size: 13 }), "Why this fits"),
          React.createElement("p", null, reasonFor(space, analysis, teaser))),
        onReact && React.createElement("div", { className: "f-reacts" },
          React.createElement("button", { className: "f-react f-react--like" + (reaction === "like" ? " on" : ""), onClick: () => onReact(reaction === "like" ? null : "like") },
            emoji ? React.createElement("span", { className: "f-emoji" }, "👍") : React.createElement(Icon, { name: "heart", size: 16 }),
            reaction === "like" ? "Shortlisted" : "Sounds good"),
          React.createElement("button", { className: "f-react f-react--no" + (reaction === "no" ? " on" : ""), onClick: () => onReact(reaction === "no" ? null : "no") },
            emoji ? React.createElement("span", { className: "f-emoji" }, "👎") : React.createElement(Icon, { name: "thumbsDown", size: 16 }),
            "Not for us"),
          React.createElement("button", { className: "f-react f-react--spenny" + (reaction === "spenny" ? " on" : ""), onClick: () => onReact("spenny") },
            emoji ? React.createElement("span", { className: "f-emoji" }, "💰") : React.createElement(Icon, { name: "coins", size: 16 }),
            "Too pricey"))));
  }

  // ---------------- Company read banner ----------------
  function CompanyBanner({ a }) {
    const { Avatar, Badge } = DS;
    const presence = a.hasLondonPresence
      ? `${a.londonStaff} people in London`
      : `New to London · sizing for ~${a.londonStaff} to start`;
    return React.createElement("div", { className: "f-banner" },
      React.createElement("div", { className: "f-banner-glow" }),
      React.createElement("div", { className: "f-banner-head" },
        React.createElement(Avatar, { name: a.companyName, size: "lg" }),
        React.createElement("div", { style: { minWidth: 0 } },
          React.createElement("div", { className: "f-banner-eyebrow" },
            React.createElement(Icon, { name: "sparkles", size: 13 }), "Here's what our AI read about you"),
          React.createElement("h2", { className: "f-banner-name" }, a.companyName),
          React.createElement("div", { className: "f-banner-meta" }, `${a.industry} · ${a.currentLocation} · ${presence}`))),
      React.createElement("p", { className: "f-banner-summary" }, a.summary),
      React.createElement("div", { className: "f-banner-team" },
        React.createElement("div", { className: "f-banner-team-label" },
          React.createElement(Icon, { name: "users", size: 14 }), "Your team & how they like to work"),
        React.createElement("p", null, a.teamRead)),
      React.createElement("div", { className: "f-banner-tags" },
        React.createElement(Badge, { tone: "brand", variant: "solid" }, a.officeVibe),
        (a.vibeTags || []).map((t) => React.createElement(Badge, { key: t, tone: "neutral", variant: "subtle" }, t))),
      React.createElement("div", { className: "f-banner-fit" },
        React.createElement(Icon, { name: "mapPin", size: 16, style: { color: "var(--color-brand-600)", marginTop: 1 } }),
        React.createElement("div", null,
          React.createElement("strong", null, "Where we'd point you: "),
          (a.suggestedAreas || []).join(" · "), ". ", a.brandFit)));
  }

  // ---------------- Collapsible company summary (results page) ----------------
  // The full read was shown on the previous screen; here we collapse it to a
  // one-line bar (expandable) so it doesn't dominate the conversion moment.
  function CompanySummary({ a }) {
    const { Avatar } = DS;
    const [open, setOpen] = useState(false);
    const presence = a.hasLondonPresence ? `~${a.londonStaff} in London` : `new to London`;
    return React.createElement("div", { className: "f-summary" },
      React.createElement("button", { className: "f-summary-bar", onClick: () => setOpen(!open), "aria-expanded": open },
        React.createElement(Avatar, { name: a.companyName, size: "sm" }),
        React.createElement("div", { className: "f-summary-txt" },
          React.createElement("strong", null, a.companyName),
          React.createElement("span", null, `${a.industry.split(" · ")[0]} · ${presence} · ${a.officeVibe}`)),
        React.createElement("span", { className: "f-summary-toggle" },
          open ? "Hide" : "What we read",
          React.createElement(Icon, { name: "arrowRight", size: 14, style: { transform: open ? "rotate(-90deg)" : "rotate(90deg)", transition: "transform var(--transition-fast)" } }))),
      open && React.createElement("div", { className: "f-summary-open" }, React.createElement(CompanyBanner, { a })));
  }

  // ---------------- Lively analysing view ----------------
  const STEPS = [
    { icon: "search", t: (c) => `Reading ${c}…` },
    { icon: "users", t: () => "Sizing the team & their vibe" },
    { icon: "mapPin", t: () => "Scanning London neighbourhoods" },
    { icon: "desk", t: () => "Matching live availability" },
  ];
  function Analysing({ company, brief, onDone }) {
    const [step, setStep] = useState(0);
    const doneRef = useRef(false);
    useEffect(() => {
      const ts = [];
      ts.push(setTimeout(() => setStep(1), 650));
      ts.push(setTimeout(() => setStep(2), 1350));
      ts.push(setTimeout(() => setStep(3), 2050));
      ts.push(setTimeout(() => { if (!doneRef.current) { doneRef.current = true; onDone(); } }, 2950));
      return () => ts.forEach(clearTimeout);
    }, []);
    return React.createElement("div", { className: "f-analyse" },
      React.createElement("div", { className: "f-analyse-orb" },
        React.createElement("div", { className: "f-analyse-pulse" }),
        React.createElement("div", { className: "f-analyse-pulse f-analyse-pulse--2" }),
        React.createElement("div", { className: "f-analyse-core" },
          React.createElement(Icon, { name: "sparkles", size: 30 }))),
      React.createElement("h2", { className: "f-analyse-title" }, STEPS[step].t(company)),
      React.createElement("p", { className: "f-analyse-sub" }, "Our AI is building a read of your team, this takes a couple of seconds."),
      React.createElement("div", { className: "f-analyse-steps" },
        STEPS.map((s, i) => React.createElement("div", {
          key: i, className: "f-astep" + (i < step ? " done" : i === step ? " active" : ""),
        },
          React.createElement("div", { className: "f-astep-dot" },
            i < step ? React.createElement(Icon, { name: "check", size: 14 }) : React.createElement(Icon, { name: s.icon, size: 14 })),
          React.createElement("span", null, s.t(company))))));
  }

  // ---------------- Small shared bits ----------------
  function StepDots({ index, total = 4 }) {
    return React.createElement("div", { className: "f-dots" },
      Array.from({ length: total }).map((_, i) =>
        React.createElement("span", { key: i, className: "f-dot" + (i === index ? " on" : i < index ? " past" : "") })));
  }

  // ---- Mini card: echoes the proof card above (badge row, redacted name,
  //      same 3-stat grid) so the blurred stack reads clearly as MORE of
  //      the same office cards continuing below ----
  function MiniResult({ space }) {
    const { Badge } = DS;
    const avail = space.av === "NOW";
    return React.createElement("div", { className: "f-mini" },
      React.createElement("div", { className: "f-mini-meta" },
        React.createElement(Badge, { tone: avail ? "teal" : "neutral", variant: "solid", dot: true }, avail ? "Available now" : "From " + space.av),
        React.createElement("span", { className: "f-mini-area" }, React.createElement(Icon, { name: "mapPin", size: 12 }), space.area),
        React.createElement("span", { className: "f-mini-score" }, space.score + "% match")),
      React.createElement("div", { className: "f-redact" },
        React.createElement("span", { className: "f-redact-bar" }),
        React.createElement("span", { className: "f-redact-tag" }, React.createElement(Icon, { name: "lock", size: 11 }), "Name")),
      React.createElement("div", { className: "f-stats f-mini-stats" },
        React.createElement(Stat, { icon: "desk", label: "Desks", value: space.d }),
        React.createElement(Stat, { icon: "wallet", label: "Per desk", value: gbp(space.r) }),
        React.createElement(Stat, { icon: "calendar", label: "Monthly", value: gbp(space.m), accent: true })));
  }

  window.FinderUI = { Icon, Logo, TrustRow, AreaTile, OfficeCard, MiniResult, CompanyBanner, CompanySummary, Analysing, StepDots, TRUST };
})();