// Background "Curator" agent — narrates whatever search the left-column
// panel is currently typing. The page is intentionally one coherent demo:
// type a query on the left, watch the map fly + the Curator narrate. The
// 3 examples are ordered to match SEARCH_SCENES in Landing.jsx exactly:
//   scene 0 (neighborhoods)     →  AREA SIGNALS   — 3 zones compared
//   scene 1 (Bishop Arts brunch) →  PERSONAS       — patio + quiet lens
//   scene 2 (schools)            →  STITCHING SOURCES — Niche / GreatSchools / ISDs
// Each example uses its own layout so the card shows how that flow runs
// in-product, instead of squeezing every flow into a generic comparison.

// `idx` is owned by the parent (Landing) so the map and the card can stay
// in lockstep — when the card flips to example N, the map overlay flips too.

const TOTAL = 3; // exposed so the parent can drive the cycle (also referenced in Landing)
window.CURATOR_TOTAL = TOTAL;

const C_PERSONA = "var(--signal)";
const C_AREA    = "var(--route)";
const C_QUERY   = "var(--rank)";

const EXAMPLES = [
  // ─ scene 0 — neighborhoods (Lakewood / Bishop Arts / Las Colinas)
  {
    kind: "area",
    label: "AREA SIGNALS",
    color: C_AREA,
    sub: <>Comparing <span style={{ color: "var(--ink)", fontWeight: 500 }}>3 zones</span> — remote-friendly + parks</>,
    place: "DFW · 3 zones",
    placeTag: "LAKEWOOD · BISHOP ARTS · LAS COLINAS",
    signals: [
      { label: "WFH FIT",   head: "8.4 avg" },
      { label: "PARKS",     head: "4–11 mi²" },
      { label: "WALK",      head: "64–92" },
      { label: "QUIET dB",  head: "56–62" },
      { label: "FIBER",     head: "✓ all 3" },
      { label: "TO CBD",    head: "12–24 min" },
    ],
  },

  // ─ scene 1 — Bishop Arts brunch (Hattie's lens)
  {
    kind: "persona",
    label: "PERSONAS",
    color: C_PERSONA,
    sub: <>Reading the asker — <span style={{ color: "var(--ink)", fontWeight: 500 }}>patio · quiet · sub-30 from Plano</span></>,
    place: "Hattie's",
    placeTag: "BISHOP ARTS · BRUNCH",
    lenses: [
      { icon: "♡", title: "PATIO + QUIET", color: C_PERSONA, active: true,
        points: ["Tree-shaded patio", "Sunday wait under 25m", "Walk to dessert"] },
      { icon: "□", title: "LIVELY GROUP", color: C_AREA, active: false,
        points: ["Bar inside · group tables", "Brunch cocktails", "Loud after 11"] },
    ],
  },

  // ─ scene 2 — schools (Mathews / Stonewall / Highland Park)
  {
    kind: "query",
    label: "STITCHING SOURCES",
    color: C_QUERY,
    sub: <>Stitching <span style={{ color: "var(--ink)", fontWeight: 500 }}>Niche · GreatSchools · Plano ISD · HPISD</span></>,
    query: "elementary schools · parks nearby",
    results: [
      { rank: "01", name: "Mathews Elementary", why: "9/10 · edges Bob Woodruff Park", dist: "0.1 mi" },
      { rank: "02", name: "Stonewall Jackson",  why: "walkable · adj. Lindsley Park",  dist: "0.2 mi" },
      { rank: "03", name: "Highland Park EL.",  why: "10/10 · two parks nearby",       dist: "0.3 mi" },
    ],
  },
];

function CuratorCard({ phase, idx = 0 }) {
  const e = EXAMPLES[idx % EXAMPLES.length];

  return (
    <div style={{
      background: "var(--paper)",
      border: "1px solid var(--rule-2)",
      borderRadius: 18,
      padding: "14px 16px",
      boxShadow: "var(--shadow-card)",
      width: 320,
      opacity: phase >= 4 ? 1 : 0,
      transform: phase >= 4 ? "translateY(0)" : "translateY(8px)",
      transition: "opacity 0.6s 0.3s, transform 0.6s 0.3s cubic-bezier(.2,.7,.2,1)",
    }}>
      {/* Header */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 8 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0 }}>
          <span style={{
            width: 8, height: 8, borderRadius: "50%",
            background: "var(--signal)",
            boxShadow: "0 0 0 4px var(--signal-soft)",
            animation: "float-y 2s ease-in-out infinite",
            flexShrink: 0,
          }}/>
          <span className="mono" style={{
            fontSize: 9.5, color: "var(--ink-3)", letterSpacing: "0.16em",
            whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
          }}>
            CURATOR · {e.label}
          </span>
        </div>
        <span className="mono" style={{
          fontSize: 10, color: "var(--ink-4)", letterSpacing: "0.1em", flexShrink: 0,
        }}>
          {String(idx + 1).padStart(2, "0")} / {String(EXAMPLES.length).padStart(2, "0")}
        </span>
      </div>

      {/* Subline — what the agent is doing in this example */}
      <div style={{
        fontSize: 12, color: "var(--ink-3)", marginBottom: 11,
        letterSpacing: "-0.005em", lineHeight: 1.35,
      }}>
        {e.sub}
      </div>

      {/* Body — fixed min-height keeps the card visually stable across cycles */}
      <div style={{ minHeight: 180 }}>
        {e.kind === "persona" && <PersonaBody e={e}/>}
        {e.kind === "area"    && <AreaBody    e={e}/>}
        {e.kind === "query"   && <QueryBody   e={e}/>}
      </div>
    </div>
  );
}

// ─── Body 1 — persona lens ──────────────────────────────────────────────
// Same place, two persona panels side-by-side. The "active" lens (the one
// the asker maps to) is highlighted; the other is dimmed but visible, so
// the viewer sees that Streets *picked* one based on who's asking.
function PersonaBody({ e }) {
  return (
    <>
      <PlaceChip place={e.place} tag={e.placeTag} dotColor={C_PERSONA}/>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 7, marginTop: 10 }}>
        {e.lenses.map((l, i) => (
          <div key={i} style={{
            padding: "9px 10px", borderRadius: 10,
            background: l.active ? "var(--paper)" : "rgba(20,17,13,0.03)",
            border: l.active ? `1px solid ${l.color}` : "1px solid var(--rule)",
            opacity: l.active ? 1 : 0.55,
            transition: "opacity 0.4s",
          }}>
            <div className="mono" style={{
              fontSize: 9, color: l.color, letterSpacing: "0.14em",
              fontWeight: 600, marginBottom: 6,
            }}>{l.icon} {l.title}</div>
            {l.points.map((p, j) => (
              <div key={j} style={{
                fontSize: 11, color: "var(--ink-2)", lineHeight: 1.45,
                letterSpacing: "-0.005em",
              }}>· {p}</div>
            ))}
          </div>
        ))}
      </div>
    </>
  );
}

// ─── Body 2 — area signals ──────────────────────────────────────────────
// 6-up grid of neighborhood-level metrics. Mirrors the SourcedDataCard
// "what Zillow buries, surfaced" pitch: the agent is reading the area,
// not just the pin.
function AreaBody({ e }) {
  return (
    <>
      <PlaceChip place={e.place} tag={e.placeTag} dotColor={C_AREA}/>
      <div style={{
        display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 6, marginTop: 10,
      }}>
        {e.signals.map((s, i) => (
          <div key={i} style={{
            padding: "8px 9px", borderRadius: 9,
            background: "rgba(20,17,13,0.03)", border: "1px solid var(--rule)",
          }}>
            <div className="mono" style={{
              fontSize: 8.5, color: C_AREA, letterSpacing: "0.12em",
              fontWeight: 600, marginBottom: 3,
            }}>{s.label}</div>
            <div style={{
              fontSize: 11.5, fontWeight: 600, letterSpacing: "-0.012em",
              color: "var(--ink)", lineHeight: 1.15,
            }}>{s.head}</div>
          </div>
        ))}
      </div>
    </>
  );
}

// ─── Body 3 — one query, ranked answer ──────────────────────────────────
// The flow from FiveTabsCard, in miniature: the user types one query,
// Streets returns a ranked list with reasons.
function QueryBody({ e }) {
  return (
    <>
      <div style={{
        padding: "9px 11px", borderRadius: 10,
        background: "var(--ink)", color: "var(--paper)",
        display: "flex", alignItems: "center", gap: 8,
        fontSize: 12, letterSpacing: "-0.008em", lineHeight: 1.3,
      }}>
        <svg width="11" height="11" viewBox="0 0 16 16" fill="none" style={{ flexShrink: 0, opacity: 0.85 }}>
          <circle cx="7" cy="7" r="4.5" stroke="currentColor" strokeWidth="1.6"/>
          <path d="M11 11l3 3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
        </svg>
        <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
          “{e.query}”
        </span>
      </div>
      <div style={{ marginTop: 8 }}>
        {e.results.map((r, i) => (
          <div key={i} style={{
            display: "grid", gridTemplateColumns: "20px 1fr auto",
            alignItems: "center", gap: 8,
            padding: "6px 0",
            borderTop: i === 0 ? "none" : "1px dashed var(--rule)",
          }}>
            <span className="mono" style={{
              fontSize: 9.5, color: C_QUERY,
              letterSpacing: "0.06em", fontWeight: 600,
            }}>{r.rank}</span>
            <div style={{ minWidth: 0 }}>
              <div style={{
                fontSize: 12, fontWeight: 600, letterSpacing: "-0.014em",
                color: "var(--ink)",
                whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
              }}>{r.name}</div>
              <div style={{
                fontSize: 10, color: "var(--ink-3)",
                letterSpacing: "-0.005em",
                whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
              }}>{r.why}</div>
            </div>
            <span className="mono" style={{
              fontSize: 9.5, color: "var(--ink-3)",
              letterSpacing: "0.06em", flexShrink: 0,
            }}>{r.dist}</span>
          </div>
        ))}
      </div>
    </>
  );
}

// ─── Shared place chip ──────────────────────────────────────────────────
function PlaceChip({ place, tag, dotColor }) {
  return (
    <div style={{
      padding: "8px 10px", borderRadius: 10,
      background: "rgba(20,17,13,0.04)", border: "1px solid var(--rule)",
      display: "flex", alignItems: "center", gap: 9,
    }}>
      <div style={{
        width: 11, height: 11, borderRadius: "50% 50% 50% 3px",
        background: dotColor, transform: "rotate(-45deg)", flexShrink: 0,
      }}/>
      <div style={{ minWidth: 0 }}>
        <div style={{
          fontSize: 13, fontWeight: 600, letterSpacing: "-0.014em",
          whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
        }}>{place}</div>
        <div className="mono" style={{
          fontSize: 9, color: "var(--ink-3)", letterSpacing: "0.12em", marginTop: 1,
        }}>{tag}</div>
      </div>
    </div>
  );
}

window.CuratorCard = CuratorCard;