// ===== m7-surveys.jsx =====
// M7 · Surveys — replaces window.OrgSurveys
//   FR7.1 required survey types (annual, post-event, training, site/role, camp-host, VMS feedback)
//   FR7.2 authoring with multiple choice / checkbox / rating / matrix / ranking / open text / drafts / skip logic
//   FR7.3 targeting by saved segments, roles, sites with audience preview + suppression counts
//   FR7.4 scheduling, reminders, completion tracking, exports

const {
  React,
  TopBar, Card, SectionHead, Btn, IconBtn, StatusChip, Avatar, Kpi, Progress,
  Field, Input, Textarea, Select, Checkbox, Toggle, Tabs, Empty,
  IconPlus, IconCheck, IconX, IconArrow, IconArrowL, IconDownload, IconUpload,
  IconSurvey, IconUsers, IconStar, IconClock, IconBell, IconEdit, IconMore,
  IconFilter, IconSearch, IconMail, IconChevron, IconChevronD, IconClipboard,
  IconExternal,
  VOLUNTEERS,
} = window;
const { useState: useSt, useMemo: useMm } = React;

const m7s_overline = { fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--fg-3)", fontWeight: 500 };
const m7s_meta = { fontSize: 11, color: "var(--fg-3)" };
const m7s_link = { background: "transparent", border: "none", color: "var(--coral-700)", fontSize: 12, fontWeight: 500, cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 4, padding: 0 };

// ============================================================
// SURVEY DATA
// ============================================================
const SURVEY_TYPES = [
  { id: "annual",     label: "Annual volunteer engagement" },
  { id: "annual_staff", label: "Annual staff feedback" },
  { id: "post_event", label: "Post-event satisfaction" },
  { id: "training",   label: "Orientation / training / enrichment" },
  { id: "site",       label: "Site-specific" },
  { id: "role",       label: "Role-specific" },
  { id: "camp_host",  label: "Camp-host end-of-season" },
  { id: "vms",        label: "VMS feedback" },
];

const SURVEYS = [
  {
    id: "sv-annual-2026",
    name: "Annual volunteer engagement · 2026",
    type: "annual",
    status: "scheduled",
    sent: 0, opened: 0, responded: 0, rate: 0,
    sendDate: "Jun 1, 2026 · 8:00 am MT",
    cadence: "Annual · once per CY",
    audience: { total: 4127, eligible: 3984, suppressed: 143 },
    avgRating: null,
    description: "Statewide CPW annual engagement survey. Required for federal grant reporting attestation.",
    seed: true,
  },
  {
    id: "sv-post-cherry-creek",
    name: "Post-event · Cherry Creek shoreline cleanup",
    type: "post_event",
    status: "active",
    sent: 124, opened: 96, responded: 89, rate: 72,
    sendDate: "Auto-sent 24 hr after each event",
    cadence: "Trigger: event close",
    audience: { total: 124, eligible: 124, suppressed: 0 },
    avgRating: 4.6,
    description: "Sent 24 hours after each cleanup event to gather quick satisfaction signal.",
  },
  {
    id: "sv-camphost-eos",
    name: "Camp host · end-of-season",
    type: "camp_host",
    status: "active",
    sent: 22, opened: 21, responded: 18, rate: 82,
    sendDate: "Sent Apr 15, 2026",
    cadence: "Annual · end of season",
    audience: { total: 22, eligible: 22, suppressed: 0 },
    avgRating: 4.4,
    description: "Camp hosts only. Includes return-intent question to support next season's recruiting.",
  },
  {
    id: "sv-onboard-30",
    name: "Onboarding · 30-day feedback",
    type: "training",
    status: "active",
    sent: 38, opened: 30, responded: 24, rate: 63,
    sendDate: "Auto-sent 30 days after first shift",
    cadence: "Trigger: 30 days after first hour",
    audience: { total: 38, eligible: 38, suppressed: 0 },
    avgRating: 4.3,
    description: "30-day onboarding pulse: how prepared did the volunteer feel, what's missing from the training, did anyone follow up.",
  },
  {
    id: "sv-hunter-ed",
    name: "Hunter Outreach · post-class",
    type: "role",
    status: "active",
    sent: 86, opened: 72, responded: 64, rate: 74,
    sendDate: "Auto-sent at class close",
    cadence: "Trigger: class complete",
    audience: { total: 86, eligible: 86, suppressed: 0 },
    avgRating: 4.7,
    description: "Required for federal grant reporting. Captures instructor and class-quality signal from learners and instructors separately.",
  },
  {
    id: "sv-boyd-lake",
    name: "Boyd Lake SP · site survey",
    type: "site",
    status: "draft",
    sent: 0, opened: 0, responded: 0, rate: 0,
    sendDate: "—",
    cadence: "Manual send",
    audience: { total: 84, eligible: 78, suppressed: 6 },
    avgRating: null,
    description: "Draft. Site-specific feedback for Boyd Lake camp hosts and trail stewards.",
  },
  {
    id: "sv-vms",
    name: "VMS feedback · for staff coordinators",
    type: "vms",
    status: "active",
    sent: 38, opened: 32, responded: 22, rate: 58,
    sendDate: "Quarterly · last sent May 1",
    cadence: "Quarterly to staff",
    audience: { total: 38, eligible: 38, suppressed: 0 },
    avgRating: 4.1,
    description: "Internal — coordinator feedback on Crew itself. Pipes into Crew product team's roadmap.",
  },
];

// ============================================================
// ROOT
// ============================================================
const OrgSurveys = ({ go }) => {
  const [view, setView] = useSt("list");
  const [activeId, setActiveId] = useSt(null);
  const [tab, setTab] = useSt("all");
  const [authoring, setAuthoring] = useSt(false);

  const survey = SURVEYS.find(s => s.id === activeId);

  // List view
  if (view === "list") {
    return (
      <>
        <TopBar title="Surveys"
          subtitle={`${SURVEYS.filter(s => s.status === "active").length} active · ${SURVEYS.reduce((a, s) => a + s.responded, 0)} responses this quarter`}
          primary={<Btn icon={IconPlus} onClick={() => setAuthoring(true)}>New survey</Btn>}
          secondary={<Btn kind="secondary" icon={IconDownload}>Export responses</Btn>} />
        <div style={{ flex: 1, overflow: "auto", padding: "20px 32px 56px" }}>
          <SurveyOverview />
          <Tabs active={tab} onChange={setTab} tabs={[
            { id: "all",       label: "All surveys",  count: SURVEYS.length },
            { id: "active",    label: "Active",       count: SURVEYS.filter(s => s.status === "active").length },
            { id: "draft",     label: "Drafts",       count: SURVEYS.filter(s => s.status === "draft").length },
            { id: "scheduled", label: "Scheduled",    count: SURVEYS.filter(s => s.status === "scheduled").length },
          ]} />
          <SurveyList tab={tab} onOpen={(id) => { setActiveId(id); setView("detail"); }} />
        </div>
        {authoring && <Authoring onClose={() => setAuthoring(false)} />}
      </>
    );
  }

  // Detail view
  return (
    <SurveyDetail survey={survey}
      onBack={() => { setView("list"); setActiveId(null); }}
      onEdit={() => setAuthoring(true)} />
  );
};

// ============================================================
// OVERVIEW (top of list)
// ============================================================
const SurveyOverview = () => (
  <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14, marginBottom: 24 }}>
    <Kpi label="Active surveys" value="5" delta="3 trigger-based · 2 manual" tone="neutral" icon={IconSurvey} />
    <Kpi label="Responses this quarter" value="217" delta="+34 vs Q1" tone="up" icon={IconUsers} />
    <Kpi label="Avg response rate" value="68%" delta="+4pp vs last quarter" tone="up" icon={IconCheck} />
    <Kpi label="Outstanding reminders" value="42" delta="non-respondents · 14 days" tone="neutral" icon={IconBell} />
  </div>
);

// ============================================================
// LIST
// ============================================================
const SurveyList = ({ tab, onOpen }) => {
  const list = SURVEYS.filter(s => tab === "all" ? true : s.status === tab);
  return (
    <Card padded={false}>
      <div style={{ display: "grid", gridTemplateColumns: "minmax(240px, 1.8fr) 130px 110px 130px 140px 110px 36px", gap: 14, padding: "12px 18px", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--fg-3)", borderBottom: "1px solid var(--border)" }}>
        <span>Survey</span><span>Type</span><span>Audience</span><span>Responses</span><span>Rate</span><span>State</span><span />
      </div>
      {list.map((s, i) => (
        <div key={s.id} onClick={() => onOpen(s.id)} style={{
          display: "grid", gridTemplateColumns: "minmax(240px, 1.8fr) 130px 110px 130px 140px 110px 36px", gap: 14,
          padding: "16px 18px", alignItems: "center",
          borderBottom: i === list.length - 1 ? "none" : "1px solid var(--border-soft)",
          cursor: "pointer",
        }}>
          <div>
            <div style={{ fontSize: 14, fontWeight: 500, color: "var(--ink)", display: "flex", gap: 8, alignItems: "center" }}>
              {s.name}
              {s.seed && <span style={{ fontSize: 10, padding: "1px 6px", borderRadius: 4, background: "var(--iris-100)", color: "var(--iris-600)", fontWeight: 500 }}>Tenant seed</span>}
            </div>
            <div style={{ ...m7s_meta, marginTop: 4, lineHeight: 1.4 }}>{s.sendDate}</div>
          </div>
          <div style={{ fontSize: 12, color: "var(--fg-2)" }}>{(SURVEY_TYPES.find(t => t.id === s.type) || {}).label || s.type}</div>
          <div style={{ fontSize: 12, color: "var(--fg-2)", fontVariantNumeric: "tabular-nums" }}>
            {s.audience.total.toLocaleString()}
            {s.audience.suppressed > 0 && <div style={{ ...m7s_meta }}>{s.audience.suppressed} suppressed</div>}
          </div>
          <div style={{ fontSize: 13, fontVariantNumeric: "tabular-nums", color: "var(--ink)" }}>{s.responded} / {s.sent || "—"}</div>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <Progress value={s.rate} max={100} />
            <span style={{ fontSize: 12, color: "var(--fg-2)", fontVariantNumeric: "tabular-nums" }}>{s.rate}%</span>
          </div>
          <StatusChip status={s.status === "active" ? "confirmed" : s.status === "scheduled" ? "info" : "draft"} size="sm"
            label={s.status === "active" ? "Active" : s.status === "scheduled" ? "Scheduled" : "Draft"} />
          <IconBtn icon={IconMore} size={28} />
        </div>
      ))}
    </Card>
  );
};

// ============================================================
// DETAIL
// ============================================================
const SurveyDetail = ({ survey, onBack, onEdit }) => {
  const [tab, setTab] = useSt("results");
  return (
    <>
      <TopBar title={survey.name}
        breadcrumb={["Surveys", survey.name]} onBack={onBack}
        subtitle={`${(SURVEY_TYPES.find(t => t.id === survey.type) || {}).label} · ${survey.cadence}`}
        primary={<Btn icon={IconEdit} onClick={onEdit}>Edit survey</Btn>}
        secondary={<Btn kind="secondary" icon={IconDownload}>Export responses</Btn>} />
      <div style={{ flex: 1, overflow: "auto", padding: "20px 32px 56px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14, marginBottom: 24 }}>
          <Kpi label="Sent" value={String(survey.sent)} delta={survey.cadence} tone="neutral" icon={IconMail} />
          <Kpi label="Responded" value={String(survey.responded)} delta={`${survey.rate}% rate`} tone="up" icon={IconCheck} />
          <Kpi label="Avg rating" value={survey.avgRating ? survey.avgRating.toFixed(1) : "—"} delta="out of 5" tone={survey.avgRating ? "up" : "neutral"} icon={IconStar} />
          <Kpi label="Non-respondents" value={String(survey.sent - survey.responded)} delta="reminder-eligible" tone="neutral" icon={IconBell} />
        </div>

        <Tabs active={tab} onChange={setTab} tabs={[
          { id: "results",   label: "Results" },
          { id: "questions", label: "Questions" },
          { id: "audience",  label: "Audience" },
          { id: "delivery",  label: "Delivery & reminders" },
          { id: "settings",  label: "Settings" },
        ]} />

        {tab === "results"   && <ResultsView survey={survey} />}
        {tab === "questions" && <QuestionsView />}
        {tab === "audience"  && <AudienceView survey={survey} />}
        {tab === "delivery"  && <DeliveryView survey={survey} />}
        {tab === "settings"  && <SettingsView survey={survey} />}
      </div>
    </>
  );
};

// ---------- RESULTS ----------
const ResultsView = ({ survey }) => (
  <>
    <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.6fr) minmax(280px, 1fr)", gap: 14 }}>
      <Card>
        <div style={{ ...m7s_overline, marginBottom: 14 }}>Quantitative — agree/disagree</div>
        {[
          { q: "How satisfied were you with this opportunity?", v: 92, n: 89, hl: "very satisfied or satisfied" },
          { q: "Would you return for a similar shift?", v: 88, n: 89, hl: "yes or maybe" },
          { q: "I felt prepared by training & instructions", v: 79, n: 87, hl: "agree or strongly agree" },
          { q: "Coordinator was responsive", v: 95, n: 88, hl: "agree or strongly agree" },
          { q: "I'd recommend volunteering with CPW to a friend", v: 91, n: 88, hl: "NPS promoter (9–10)" },
        ].map((r, i) => (
          <div key={i} style={{ marginBottom: 14 }}>
            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13, marginBottom: 6 }}>
              <span style={{ color: "var(--fg-1)" }}>{r.q}</span>
              <span style={{ color: "var(--fg-3)", fontVariantNumeric: "tabular-nums" }}>{r.v}% · n={r.n}</span>
            </div>
            <Progress value={r.v} max={100} />
            <div style={{ ...m7s_meta, marginTop: 4 }}>{r.hl}</div>
          </div>
        ))}
      </Card>

      <Card>
        <div style={{ ...m7s_overline, marginBottom: 14 }}>Multiple choice</div>
        <div style={{ marginBottom: 14 }}>
          <div style={{ fontSize: 13, color: "var(--fg-1)", marginBottom: 8 }}>How did you hear about this opportunity?</div>
          {[
            { o: "Email from CPW",      n: 38, pct: 43 },
            { o: "Facebook",            n: 22, pct: 25 },
            { o: "Friend / family",     n: 16, pct: 18 },
            { o: "CPW website",         n: 8,  pct: 9 },
            { o: "Other",               n: 5,  pct: 5 },
          ].map(o => (
            <div key={o.o} style={{ display: "grid", gridTemplateColumns: "1fr 80px", gap: 8, marginBottom: 7, alignItems: "center" }}>
              <div>
                <div style={{ fontSize: 12, color: "var(--ink)" }}>{o.o}</div>
                <Progress value={o.pct} max={100} height={4} />
              </div>
              <div style={{ fontSize: 12, color: "var(--fg-3)", textAlign: "right", fontVariantNumeric: "tabular-nums" }}>{o.pct}% · {o.n}</div>
            </div>
          ))}
        </div>
        <div style={{ ...m7s_overline, margin: "16px 0 10px" }}>Time to first response</div>
        <div style={{ display: "flex", gap: 8 }}>
          {[8, 14, 22, 31, 28, 18, 12, 9, 6, 4, 3, 2].map((h, i) => (
            <div key={i} style={{ flex: 1, height: Math.max(4, h * 2), background: "var(--coral-200)", borderRadius: 3, alignSelf: "end" }} />
          ))}
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10, color: "var(--fg-3)", marginTop: 6 }}>
          <span>0h</span><span>24h</span><span>48h</span><span>3d</span>
        </div>
      </Card>
    </div>

    <SectionHead title="Open-text responses · sample" action={<button style={m7s_link}>View all 41 <IconArrow size={12} /></button>} />
    <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 12 }}>
      {[
        { v: VOLUNTEERS[0], t: "Loved it. Maybe one extra portable bathroom at the south swim beach next time — the line got long around 10 am.", topic: "Logistics" },
        { v: VOLUNTEERS[2], t: "First time volunteering with CPW. Felt very welcome. Thank you to the Wednesday coordinator for the warm intro.", topic: "Onboarding" },
        { v: VOLUNTEERS[4], t: "Could we do an evening cleanup next time? Mornings are hard with kids in school.", topic: "Scheduling" },
        { v: VOLUNTEERS[5], t: "Coordinator was kind but instructions were a bit confusing — what was the goal for the south swim beach vs the north dock?", topic: "Logistics" },
      ].map((r, i) => (
        <Card key={i}>
          <div style={{ display: "flex", gap: 10, alignItems: "center", marginBottom: 10 }}>
            <Avatar {...r.v} />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 500 }}>{r.v.name}</div>
              <div style={{ ...m7s_meta }}>{r.v.site}</div>
            </div>
            <span style={{ fontSize: 10, padding: "2px 8px", borderRadius: 999, background: "var(--paper-deep)", color: "var(--fg-2)", fontWeight: 500 }}>{r.topic}</span>
          </div>
          <div style={{ fontSize: 13, color: "var(--fg-1)", lineHeight: 1.6, fontFamily: "var(--font-serif)", fontStyle: "italic" }}>"{r.t}"</div>
        </Card>
      ))}
    </div>
  </>
);

// ---------- QUESTIONS ----------
const QuestionsView = () => {
  const [open, setOpen] = useSt({ q1: true, q3: true });
  return (
    <>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
        <div style={{ ...m7s_overline }}>5 questions · 1 conditional branch · est. 3 min</div>
        <div style={{ display: "flex", gap: 6 }}>
          <Btn kind="secondary" size="sm">Preview as volunteer</Btn>
          <Btn size="sm" icon={IconEdit}>Edit</Btn>
        </div>
      </div>
      <Card padded={false}>
        {[
          { id: "q1", type: "rating", title: "How satisfied were you with this opportunity?", required: true, options: ["Very dissatisfied", "Dissatisfied", "Neutral", "Satisfied", "Very satisfied"] },
          { id: "q2", type: "binary", title: "Would you return for a similar shift?", required: true, options: ["Yes", "Maybe", "No"], skip: "If 'No' → q4 (open text: 'what would change your mind?')" },
          { id: "q3", type: "matrix", title: "Rate the following", required: true, options: ["I felt prepared", "Coordinator was responsive", "Instructions were clear", "I'd recommend CPW"] },
          { id: "q4", type: "open", title: "Anything we should know or do differently?", required: false },
          { id: "q5", type: "choice", title: "How did you hear about this opportunity?", required: false, options: ["Email from CPW", "Facebook", "Friend / family", "CPW website", "Other"] },
        ].map((q, i, arr) => (
          <div key={q.id} style={{ borderBottom: i === arr.length - 1 ? "none" : "1px solid var(--border-soft)" }}>
            <div onClick={() => setOpen({ ...open, [q.id]: !open[q.id] })}
              style={{ display: "grid", gridTemplateColumns: "30px 1fr auto auto", gap: 12, padding: "14px 18px", alignItems: "center", cursor: "pointer" }}>
              <span style={{ fontFamily: "var(--font-display)", fontSize: 18, color: "var(--fg-3)", fontVariantNumeric: "tabular-nums" }}>{i + 1}</span>
              <div>
                <div style={{ fontSize: 14, fontWeight: 500 }}>{q.title}</div>
                <div style={{ ...m7s_meta, marginTop: 3, display: "flex", gap: 8 }}>
                  <span style={{ textTransform: "uppercase", letterSpacing: "0.08em" }}>{q.type}</span>
                  {q.required && <span style={{ color: "var(--coral-700)" }}>· required</span>}
                  {q.skip && <span style={{ color: "var(--iris-600)" }}>· skip logic</span>}
                </div>
              </div>
              <IconBtn icon={IconEdit} size={28} aria-label="Edit" />
              <IconChevronD size={14} style={{ transform: open[q.id] ? "rotate(180deg)" : "none", transition: "transform 160ms" }} />
            </div>
            {open[q.id] && (
              <div style={{ padding: "0 18px 18px", display: "grid", gridTemplateColumns: "minmax(0, 2fr) minmax(220px, 1fr)", gap: 16 }}>
                <div>
                  <div style={{ ...m7s_overline, marginBottom: 8 }}>Options / preview</div>
                  {q.type === "rating" && (
                    <div style={{ display: "flex", gap: 6 }}>
                      {q.options.map((o, ix) => (
                        <div key={ix} style={{ flex: 1, padding: "10px 8px", background: "var(--paper)", border: "1px solid var(--border-soft)", borderRadius: 8, textAlign: "center", fontSize: 12 }}>{o}</div>
                      ))}
                    </div>
                  )}
                  {q.type === "binary" && (
                    <div style={{ display: "flex", gap: 6 }}>
                      {q.options.map((o, ix) => <div key={ix} style={{ padding: "10px 16px", background: "var(--paper)", border: "1px solid var(--border-soft)", borderRadius: 999, fontSize: 12 }}>{o}</div>)}
                    </div>
                  )}
                  {q.type === "matrix" && (
                    <div>
                      {q.options.map((row, ix) => (
                        <div key={ix} style={{ display: "grid", gridTemplateColumns: "1fr 360px", gap: 14, padding: "8px 0", borderBottom: ix === q.options.length - 1 ? "none" : "1px dashed var(--border-soft)", alignItems: "center" }}>
                          <span style={{ fontSize: 13 }}>{row}</span>
                          <div style={{ display: "flex", gap: 6 }}>
                            {[1,2,3,4,5].map(s => <div key={s} style={{ flex: 1, padding: "7px 0", background: "var(--paper)", border: "1px solid var(--border-soft)", borderRadius: 6, fontSize: 11, textAlign: "center", color: "var(--fg-3)" }}>{s}</div>)}
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
                  {q.type === "open" && <Textarea rows={3} placeholder="Volunteer writes here…" />}
                  {q.type === "choice" && (
                    <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 8 }}>
                      {q.options.map((o, ix) => <div key={ix} style={{ padding: "9px 12px", background: "var(--paper)", border: "1px solid var(--border-soft)", borderRadius: 8, fontSize: 12 }}>○ {o}</div>)}
                    </div>
                  )}
                </div>
                <div style={{ background: "var(--paper-deep)", borderRadius: 10, padding: 14 }}>
                  <div style={{ ...m7s_overline, marginBottom: 8 }}>Logic</div>
                  {q.skip
                    ? <div style={{ fontSize: 12, color: "var(--ink)", lineHeight: 1.5 }}>{q.skip}</div>
                    : <div style={{ fontSize: 12, color: "var(--fg-3)" }}>No skip logic. Always shown in order.</div>}
                  <div style={{ ...m7s_overline, margin: "12px 0 8px" }}>Translations</div>
                  <div style={{ display: "flex", gap: 6 }}>
                    <span style={{ fontSize: 11, padding: "3px 9px", borderRadius: 999, background: "var(--sage-100)", color: "var(--sage-700)", fontWeight: 500 }}>EN ✓</span>
                    <span style={{ fontSize: 11, padding: "3px 9px", borderRadius: 999, background: "var(--paper)", color: "var(--fg-3)", border: "1px solid var(--border)" }}>ES needed</span>
                  </div>
                </div>
              </div>
            )}
          </div>
        ))}
        <div style={{ padding: 14 }}>
          <Btn size="sm" kind="ghost" icon={IconPlus}>Add question</Btn>
        </div>
      </Card>
    </>
  );
};

// ---------- AUDIENCE ----------
const AudienceView = ({ survey }) => {
  return (
    <>
      <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.4fr) minmax(280px, 1fr)", gap: 14 }}>
        <Card>
          <div style={{ ...m7s_overline, marginBottom: 12 }}>Targeting rules</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            <RuleChip op="Include" desc="Saved segment: Active ongoing volunteers (CY 2026)" />
            <RuleChip op="Include" desc="Tag: completed onboarding" />
            <RuleChip op="Include" desc="Site IN [Cherry Creek SP, Boyd Lake SP, Lory SP]" />
            <RuleChip op="Exclude" desc="Tag: opted out of surveys" tone="warn" />
            <RuleChip op="Exclude" desc="Communication consent = revoked" tone="warn" />
            <RuleChip op="Exclude" desc="Flag = red or yellow" tone="warn" />
            <RuleChip op="Exclude" desc="Status = deceased / inactive" tone="warn" />
            <Btn size="sm" kind="ghost" icon={IconPlus} style={{ alignSelf: "flex-start", marginTop: 6 }}>Add rule</Btn>
          </div>

          <div style={{ ...m7s_overline, margin: "20px 0 10px" }}>Channel</div>
          <div style={{ display: "flex", gap: 14 }}>
            <Checkbox checked={true} onChange={() => {}} label="Email" />
            <Checkbox checked={true} onChange={() => {}} label="SMS (if opted in)" />
            <Checkbox checked={false} onChange={() => {}} label="In-app banner" />
          </div>
        </Card>

        <Card>
          <div style={{ ...m7s_overline, marginBottom: 12 }}>Audience preview</div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 10, marginBottom: 12 }}>
            <span style={{ fontFamily: "var(--font-display)", fontSize: 44, color: "var(--ink)", lineHeight: 1 }}>{survey.audience.eligible.toLocaleString()}</span>
            <span style={{ fontSize: 13, color: "var(--fg-3)" }}>recipients will receive this survey</span>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 14 }}>
            <CountRow label="Match all include rules" n={survey.audience.total} pos />
            <CountRow label="Removed — opted out / consent" n={Math.round(survey.audience.suppressed * 0.4)} sub />
            <CountRow label="Removed — flag (red/yellow)" n={Math.round(survey.audience.suppressed * 0.3)} sub />
            <CountRow label="Removed — deceased / inactive" n={Math.round(survey.audience.suppressed * 0.3)} sub />
            <CountRow label="Final eligible" n={survey.audience.eligible} bold />
          </div>
          <div style={{ marginTop: 14, padding: 12, background: "var(--paper-deep)", borderRadius: 10, fontSize: 12, color: "var(--fg-2)", lineHeight: 1.5 }}>
            Suppression counts shown to authorized staff; exact reasons appear in the audience CSV. Survey delivery never overrides red-flag, deceased, or communication-consent policies.
          </div>
          <div style={{ marginTop: 12, display: "flex", gap: 6 }}>
            <Btn size="sm" kind="secondary" icon={IconDownload}>Audience CSV</Btn>
            <Btn size="sm" kind="ghost">Sample recipients</Btn>
          </div>
        </Card>
      </div>

      <SectionHead title="Sample of who will be sent" />
      <Card padded={false}>
        <div style={{ display: "grid", gridTemplateColumns: "minmax(220px, 2fr) 1fr 130px 110px 120px", gap: 14, padding: "12px 18px", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--fg-3)", borderBottom: "1px solid var(--border)" }}>
          <span>Volunteer</span><span>Site / role</span><span>Channel</span><span>Lang</span><span>Consent</span>
        </div>
        {VOLUNTEERS.filter(v => v.status === "active").slice(0, 6).map((v, i, arr) => (
          <div key={v.id} style={{ display: "grid", gridTemplateColumns: "minmax(220px, 2fr) 1fr 130px 110px 120px", gap: 14, padding: "12px 18px", alignItems: "center", borderBottom: i === arr.length - 1 ? "none" : "1px solid var(--border-soft)" }}>
            <div style={{ display: "flex", gap: 10, alignItems: "center" }}><Avatar {...v} /><span style={{ fontSize: 13, fontWeight: 500 }}>{v.name}</span></div>
            <div style={{ fontSize: 12, color: "var(--fg-2)" }}>{v.site} · {v.role}</div>
            <div style={{ display: "flex", gap: 4 }}>
              <span style={{ fontSize: 10, padding: "2px 7px", borderRadius: 999, background: "var(--sage-100)", color: "var(--sage-700)", fontWeight: 500 }}>Email</span>
              {i % 3 === 0 && <span style={{ fontSize: 10, padding: "2px 7px", borderRadius: 999, background: "var(--iris-100)", color: "var(--iris-600)", fontWeight: 500 }}>SMS</span>}
            </div>
            <div style={{ fontSize: 12 }}>{(v.languages && v.languages[0]) || "EN"}</div>
            <StatusChip status="confirmed" size="sm" label="Opted in" />
          </div>
        ))}
      </Card>
    </>
  );
};

const RuleChip = ({ op, desc, tone }) => (
  <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "9px 12px", borderRadius: 10, background: tone === "warn" ? "var(--amber-100)" : "var(--paper)", border: "1px solid " + (tone === "warn" ? "rgba(154,106,27,0.2)" : "var(--border-soft)") }}>
    <span style={{ fontSize: 10, padding: "2px 7px", borderRadius: 4, background: op === "Include" ? "var(--sage-100)" : "var(--crimson-100)", color: op === "Include" ? "var(--sage-700)" : "var(--crimson-600)", fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.08em" }}>{op}</span>
    <span style={{ fontSize: 13, color: "var(--ink)", flex: 1 }}>{desc}</span>
    <IconBtn icon={IconX} size={24} aria-label="Remove" />
  </div>
);
const CountRow = ({ label, n, pos, sub, bold }) => (
  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "6px 0", borderBottom: bold ? "none" : "1px dashed var(--border-soft)" }}>
    <span style={{ fontSize: 12, color: sub ? "var(--fg-3)" : "var(--ink)" }}>{label}</span>
    <span style={{ fontSize: bold ? 16 : 13, fontWeight: bold ? 500 : 400, color: bold ? "var(--ink)" : sub ? "var(--crimson-600)" : "var(--ink)", fontVariantNumeric: "tabular-nums" }}>
      {sub ? "−" : pos ? "" : ""}{n.toLocaleString()}
    </span>
  </div>
);

// ---------- DELIVERY ----------
const DeliveryView = ({ survey }) => (
  <>
    <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.4fr) minmax(280px, 1fr)", gap: 14 }}>
      <Card>
        <div style={{ ...m7s_overline, marginBottom: 12 }}>Send</div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
          <Field label="Send mode">
            <Select defaultValue="trigger" options={[{ value: "immediate", label: "Send now" }, { value: "scheduled", label: "Schedule for date/time" }, { value: "trigger", label: "Trigger-based (e.g. event close)" }]} />
          </Field>
          <Field label="Trigger">
            <Select defaultValue="event_close" options={["Event close (24 hr after)", "First-shift complete + 30 days", "Class complete", "Season end", "Manual"]} />
          </Field>
          <Field label="From name">
            <Input defaultValue="Colorado Parks & Wildlife Volunteers" />
          </Field>
          <Field label="Reply-to">
            <Input defaultValue="volunteers@cpw.state.co.us" />
          </Field>
        </div>

        <div style={{ ...m7s_overline, margin: "20px 0 12px" }}>Reminders to non-respondents</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {[
            { d: 3,  on: true,  ch: "Email" },
            { d: 7,  on: true,  ch: "Email" },
            { d: 14, on: true,  ch: "Email + SMS (if opted in)" },
            { d: 21, on: false, ch: "Email · final" },
          ].map((r, i) => (
            <div key={i} style={{ display: "grid", gridTemplateColumns: "60px 1fr 1fr auto", gap: 12, alignItems: "center", padding: "8px 12px", border: "1px solid var(--border-soft)", borderRadius: 8 }}>
              <span style={{ fontFamily: "var(--font-display)", fontSize: 18, color: "var(--ink)" }}>+{r.d}d</span>
              <span style={{ fontSize: 12, color: "var(--fg-2)" }}>{r.ch}</span>
              <span style={{ fontSize: 11, color: "var(--fg-3)" }}>Sent only to non-respondents</span>
              <Toggle checked={r.on} onChange={() => {}} />
            </div>
          ))}
          <Btn size="sm" kind="ghost" icon={IconPlus} style={{ alignSelf: "flex-start", marginTop: 4 }}>Add reminder</Btn>
        </div>

        <div style={{ marginTop: 18, padding: 12, background: "var(--paper-deep)", borderRadius: 10, fontSize: 12, color: "var(--fg-2)", lineHeight: 1.5 }}>
          Reminders respect communication-consent and red-flag rules at send time. Each send is logged with audience snapshot, response count, and audit ref.
        </div>
      </Card>

      <Card>
        <div style={{ ...m7s_overline, marginBottom: 12 }}>Send history</div>
        {[
          { kind: "Initial send",        when: "Apr 24, 8:00 am MT", sent: 124, opened: 96, responded: 89 },
          { kind: "Reminder · 3 day",    when: "Apr 27, 8:00 am MT", sent: 28,  opened: 18, responded: 11 },
          { kind: "Reminder · 7 day",    when: "May 1, 8:00 am MT",  sent: 14,  opened: 9,  responded: 4 },
          { kind: "Reminder · 14 day",   when: "May 8, 8:00 am MT",  sent: 8,   opened: 5,  responded: 2 },
        ].map((h, i, arr) => (
          <div key={i} style={{ padding: "12px 0", borderBottom: i === arr.length - 1 ? "none" : "1px dashed var(--border-soft)" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 4 }}>
              <span style={{ fontSize: 13, fontWeight: 500 }}>{h.kind}</span>
              <span style={{ ...m7s_meta }}>{h.when}</span>
            </div>
            <div style={{ display: "flex", gap: 14, fontSize: 12, color: "var(--fg-2)", fontVariantNumeric: "tabular-nums" }}>
              <span>{h.sent} sent</span>
              <span>{h.opened} opened</span>
              <span>{h.responded} responded</span>
            </div>
          </div>
        ))}
        <Btn size="sm" kind="secondary" icon={IconBell} style={{ marginTop: 12 }}>Send reminder now</Btn>
      </Card>
    </div>
  </>
);

// ---------- SETTINGS ----------
const SettingsView = ({ survey }) => (
  <Card>
    <div style={{ ...m7s_overline, marginBottom: 14 }}>Survey settings</div>
    <Field label="Name"><Input defaultValue={survey.name} /></Field>
    <Field label="Description">
      <Textarea rows={3} defaultValue={survey.description} />
    </Field>
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 14 }}>
      <Field label="Type">
        <Select defaultValue={survey.type} options={SURVEY_TYPES.map(t => ({ value: t.id, label: t.label }))} />
      </Field>
      <Field label="Anonymous?">
        <Select defaultValue="attributed" options={[{ value: "attributed", label: "Attributed (default)" }, { value: "optional", label: "Volunteer chooses" }, { value: "anonymous", label: "Anonymous only" }]} />
      </Field>
      <Field label="Time zone">
        <Select defaultValue="America/Denver" options={["America/Denver", "America/New_York", "America/Los_Angeles"]} />
      </Field>
    </div>
    <Field label="Result access">
      <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
        <Checkbox checked={true} onChange={() => {}} label="Tenantwide coordinators" />
        <Checkbox checked={true} onChange={() => {}} label="Regional coordinators (scoped)" />
        <Checkbox checked={false} onChange={() => {}} label="Site managers (scoped)" />
        <Checkbox checked={false} onChange={() => {}} label="Read-only execs (aggregate only)" />
      </div>
    </Field>
    <Field label="Auto-include in reports">
      <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
        <Checkbox checked={true} onChange={() => {}} label="Operational report library" />
        <Checkbox checked={true} onChange={() => {}} label="Tenant archive" />
        <Checkbox checked={false} onChange={() => {}} label="Federal grant attestation pack" />
      </div>
    </Field>
  </Card>
);

// ============================================================
// AUTHORING (modal — new / edit)
// ============================================================
const Authoring = ({ onClose }) => {
  const [step, setStep] = useSt(1);
  return (
    <div style={overlay} role="dialog" aria-modal="true">
      <div style={drawer}>
        <div style={drawerHead}>
          <div>
            <div style={{ ...m7s_overline }}>New survey · {SURVEY_TYPES[2].label}</div>
            <div style={{ fontSize: 19, fontWeight: 500, color: "var(--ink)", marginTop: 4 }}>
              {step === 1 ? "Step 1 · Basics"
              : step === 2 ? "Step 2 · Questions"
              : step === 3 ? "Step 3 · Audience"
              : step === 4 ? "Step 4 · Schedule & reminders"
              : "Step 5 · Review & launch"}
            </div>
          </div>
          <IconBtn icon={IconX} size={32} onClick={onClose} aria-label="Close" />
        </div>
        <div style={{ display: "flex", gap: 4, padding: "12px 24px 0" }}>
          {[1,2,3,4,5].map(n => (
            <div key={n} style={{ flex: 1, height: 3, borderRadius: 2, background: n <= step ? "var(--coral-600)" : "var(--paper-deep)" }} />
          ))}
        </div>
        <div style={{ flex: 1, overflow: "auto", padding: 24 }}>
          {step === 1 && <AuthStep1 />}
          {step === 2 && <AuthStep2 />}
          {step === 3 && <AuthStep3 />}
          {step === 4 && <AuthStep4 />}
          {step === 5 && <AuthStep5 />}
        </div>
        <div style={drawerFoot}>
          <Btn kind="ghost" onClick={onClose}>Save draft & close</Btn>
          <div style={{ marginLeft: "auto", display: "flex", gap: 8 }}>
            {step > 1 && <Btn kind="ghost" icon={IconArrowL} onClick={() => setStep(step - 1)}>Back</Btn>}
            {step < 5 && <Btn iconRight={IconArrow} onClick={() => setStep(step + 1)}>Continue</Btn>}
            {step === 5 && <Btn icon={IconCheck} onClick={onClose}>Launch</Btn>}
          </div>
        </div>
      </div>
    </div>
  );
};

const AuthStep1 = () => (
  <>
    <Field label="Survey name" required><Input defaultValue="Post-event · spring trail crew workdays" /></Field>
    <Field label="Survey type" required>
      <Select defaultValue="post_event" options={SURVEY_TYPES.map(t => ({ value: t.id, label: t.label }))} />
    </Field>
    <Field label="Description">
      <Textarea rows={3} defaultValue="Quick post-event pulse sent 24 hr after a trail crew workday closes." />
    </Field>
    <Field label="Start from a template">
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 10 }}>
        {[
          { t: "Blank", d: "Start with no questions." },
          { t: "Post-event short", d: "5 questions · 2 min" },
          { t: "Annual engagement", d: "12 questions · 6 min" },
          { t: "Onboarding 30-day", d: "8 questions · 4 min" },
          { t: "Camp host end-of-season", d: "14 questions · 8 min" },
          { t: "Hunter Outreach class", d: "10 questions · 5 min · grant pack" },
        ].map(c => (
          <Card key={c.t} style={{ cursor: "pointer", padding: 14 }}>
            <div style={{ fontSize: 13, fontWeight: 500 }}>{c.t}</div>
            <div style={{ ...m7s_meta, marginTop: 4 }}>{c.d}</div>
          </Card>
        ))}
      </div>
    </Field>
  </>
);

const AuthStep2 = () => {
  const QTYPES = [
    { id: "rating",  label: "Rating scale (1–5)" },
    { id: "binary",  label: "Yes / No / Maybe" },
    { id: "matrix",  label: "Rating matrix" },
    { id: "choice",  label: "Multiple choice" },
    { id: "checkbox",label: "Checkbox (multiple)" },
    { id: "rank",    label: "Ranking" },
    { id: "open",    label: "Open text" },
  ];
  return (
    <>
      <div style={{ display: "grid", gridTemplateColumns: "240px 1fr", gap: 14, alignItems: "start" }}>
        <Card padded={false}>
          <div style={{ padding: "14px 16px", borderBottom: "1px solid var(--border-soft)" }}>
            <div style={{ ...m7s_overline }}>Add question</div>
          </div>
          {QTYPES.map(t => (
            <div key={t.id} style={{ padding: "10px 16px", borderBottom: "1px solid var(--border-soft)", cursor: "pointer", display: "flex", alignItems: "center", gap: 10 }}>
              <IconPlus size={12} style={{ color: "var(--fg-3)" }} />
              <span style={{ fontSize: 12 }}>{t.label}</span>
            </div>
          ))}
          <div style={{ padding: "12px 16px" }}>
            <div style={{ ...m7s_overline, marginBottom: 8 }}>Sections</div>
            <Btn size="sm" kind="ghost" icon={IconPlus}>Add section</Btn>
            <Btn size="sm" kind="ghost" icon={IconPlus} style={{ marginTop: 4 }}>Add page break</Btn>
          </div>
        </Card>
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {[
            { n: 1, type: "Rating 1–5", text: "Overall, how was the workday?" },
            { n: 2, type: "Yes / No / Maybe", text: "Would you return for a similar shift?" },
            { n: 3, type: "Multiple choice", text: "What part of the day worked best for you?" },
            { n: 4, type: "Open text", text: "Anything we should know or change?" },
          ].map(q => (
            <Card key={q.n}>
              <div style={{ display: "grid", gridTemplateColumns: "30px 1fr auto auto", gap: 12, alignItems: "center" }}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 18, color: "var(--fg-3)" }}>{q.n}</div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 500 }}>{q.text}</div>
                  <div style={{ ...m7s_meta, marginTop: 3 }}>{q.type}</div>
                </div>
                <Checkbox checked={true} onChange={() => {}} label="Required" />
                <IconBtn icon={IconMore} size={28} />
              </div>
            </Card>
          ))}
          <Btn size="sm" kind="ghost" icon={IconPlus} style={{ alignSelf: "flex-start" }}>Add question</Btn>
        </div>
      </div>
    </>
  );
};

const AuthStep3 = () => (
  <>
    <p style={{ fontSize: 13, color: "var(--fg-2)", marginBottom: 14, maxWidth: 620 }}>
      Define who receives this survey. Suppression rules (consent, flags, deceased) apply automatically and are surfaced as counts.
    </p>
    <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.4fr) minmax(280px, 1fr)", gap: 14 }}>
      <Card>
        <div style={{ ...m7s_overline, marginBottom: 12 }}>Targeting</div>
        <Field label="Saved segments">
          <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
            <span style={{ fontSize: 12, padding: "5px 10px", borderRadius: 999, background: "var(--paper-deep)", color: "var(--fg-1)" }}>Active ongoing volunteers</span>
            <Btn size="sm" kind="ghost" icon={IconPlus}>Add</Btn>
          </div>
        </Field>
        <Field label="Sites">
          <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
            <span style={{ fontSize: 12, padding: "5px 10px", borderRadius: 999, background: "var(--paper-deep)", color: "var(--fg-1)" }}>Cherry Creek SP</span>
            <span style={{ fontSize: 12, padding: "5px 10px", borderRadius: 999, background: "var(--paper-deep)", color: "var(--fg-1)" }}>Boyd Lake SP</span>
            <span style={{ fontSize: 12, padding: "5px 10px", borderRadius: 999, background: "var(--paper-deep)", color: "var(--fg-1)" }}>Lory SP</span>
            <Btn size="sm" kind="ghost" icon={IconPlus}>Add</Btn>
          </div>
        </Field>
        <Field label="Roles">
          <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
            <span style={{ fontSize: 12, padding: "5px 10px", borderRadius: 999, background: "var(--paper-deep)", color: "var(--fg-1)" }}>Trail crew</span>
            <span style={{ fontSize: 12, padding: "5px 10px", borderRadius: 999, background: "var(--paper-deep)", color: "var(--fg-1)" }}>Trail steward</span>
            <Btn size="sm" kind="ghost" icon={IconPlus}>Add</Btn>
          </div>
        </Field>
        <Field label="Triggering opportunity">
          <Select defaultValue="spring" options={["Spring trail crew (multi-event series)", "All trail crew opportunities"]} />
        </Field>
      </Card>

      <Card>
        <div style={{ ...m7s_overline, marginBottom: 12 }}>Audience preview</div>
        <div style={{ display: "flex", alignItems: "baseline", gap: 10, marginBottom: 14 }}>
          <span style={{ fontFamily: "var(--font-display)", fontSize: 40, color: "var(--ink)", lineHeight: 1 }}>184</span>
          <span style={{ fontSize: 12, color: "var(--fg-3)" }}>recipients · 12 suppressed</span>
        </div>
        <CountRow label="Match include rules" n={196} pos />
        <CountRow label="Removed — opted out / consent" n={6} sub />
        <CountRow label="Removed — flag" n={3} sub />
        <CountRow label="Removed — deceased / inactive" n={3} sub />
        <CountRow label="Final eligible" n={184} bold />
        <Btn size="sm" kind="secondary" icon={IconDownload} style={{ marginTop: 12 }}>Audience CSV</Btn>
      </Card>
    </div>
  </>
);

const AuthStep4 = () => (
  <>
    <Field label="When does this survey send?">
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8 }}>
        {[
          { id: "now",     t: "Send now",            d: "Immediately, once." },
          { id: "sched",   t: "Schedule",            d: "Pick a date and time." },
          { id: "trigger", t: "Trigger-based",       d: "On event close, after first shift, etc." },
        ].map(o => (
          <Card key={o.id} style={{ padding: 14, cursor: "pointer", borderColor: o.id === "trigger" ? "var(--coral-500)" : "var(--border-soft)", borderWidth: o.id === "trigger" ? 2 : 1 }}>
            <div style={{ fontSize: 13, fontWeight: 500 }}>{o.t}</div>
            <div style={{ ...m7s_meta, marginTop: 4 }}>{o.d}</div>
          </Card>
        ))}
      </div>
    </Field>
    <Field label="Trigger">
      <Select defaultValue="event_close" options={[
        { value: "event_close", label: "24 hr after event close" },
        { value: "first_shift_30", label: "30 days after first shift" },
        { value: "class_end", label: "At class complete" },
        { value: "season_end", label: "At end of season" },
      ]} />
    </Field>
    <div style={{ ...m7s_overline, margin: "20px 0 12px" }}>Reminders</div>
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      {[3, 7, 14].map(d => (
        <div key={d} style={{ display: "grid", gridTemplateColumns: "60px 1fr 200px auto", gap: 12, alignItems: "center", padding: "8px 12px", border: "1px solid var(--border-soft)", borderRadius: 8 }}>
          <span style={{ fontFamily: "var(--font-display)", fontSize: 18 }}>+{d}d</span>
          <span style={{ fontSize: 12, color: "var(--fg-2)" }}>Email reminder to non-respondents</span>
          <Select defaultValue="email" options={["Email", "Email + SMS"]} />
          <Toggle checked={true} onChange={() => {}} />
        </div>
      ))}
    </div>
  </>
);

const AuthStep5 = () => (
  <>
    <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 14 }}>
      <Card>
        <div style={{ ...m7s_overline, marginBottom: 12 }}>Summary</div>
        <SR label="Name" v="Post-event · spring trail crew workdays" />
        <SR label="Type" v="Post-event satisfaction" />
        <SR label="Questions" v="4 (1 required, no skip logic)" />
        <SR label="Audience" v="184 recipients · 12 suppressed" />
        <SR label="Channel" v="Email" />
        <SR label="Trigger" v="24 hr after event close" />
        <SR label="Reminders" v="+3d, +7d, +14d" />
        <SR label="Anonymous" v="Attributed" />
        <SR label="Result access" v="Regional coordinators (scoped)" />
      </Card>
      <Card>
        <div style={{ ...m7s_overline, marginBottom: 12 }}>Pre-flight checks</div>
        <CheckRow ok="ok"   t="All required questions have validation" />
        <CheckRow ok="ok"   t="From-name and reply-to set" />
        <CheckRow ok="warn" t="2 questions only available in English — Spanish translation missing" />
        <CheckRow ok="ok"   t="Suppression rules applied" />
        <CheckRow ok="ok"   t="No PII in question text" />
        <CheckRow ok="ok"   t="Audit trail enabled (default)" />
      </Card>
    </div>
  </>
);

const SR = ({ label, v }) => (
  <div style={{ display: "flex", justifyContent: "space-between", padding: "8px 0", borderBottom: "1px dashed var(--border-soft)", fontSize: 13 }}>
    <span style={{ color: "var(--fg-3)" }}>{label}</span>
    <span style={{ color: "var(--ink)", textAlign: "right", maxWidth: "55%" }}>{v}</span>
  </div>
);

const CheckRow = ({ ok, t }) => (
  <div style={{ display: "flex", gap: 12, padding: "9px 0", alignItems: "center" }}>
    <span style={{
      width: 22, height: 22, borderRadius: 999,
      background: ok === "ok" ? "var(--sage-100)" : "var(--amber-100)",
      color: ok === "ok" ? "var(--sage-700)" : "var(--amber-600)",
      display: "flex", alignItems: "center", justifyContent: "center",
      fontSize: 11, fontWeight: 600, flexShrink: 0,
    }}>{ok === "ok" ? "✓" : "!"}</span>
    <span style={{ fontSize: 13, color: ok === "ok" ? "var(--fg-1)" : "var(--amber-600)" }}>{t}</span>
  </div>
);

const overlay = { position: "fixed", inset: 0, background: "rgba(31,27,22,0.45)", backdropFilter: "blur(4px)", zIndex: 80, display: "flex", justifyContent: "flex-end" };
const drawer = { width: "min(960px, 100%)", height: "100%", background: "var(--paper)", display: "flex", flexDirection: "column", boxShadow: "var(--shadow-lg)" };
const drawerHead = { padding: "20px 24px 16px", display: "flex", justifyContent: "space-between", alignItems: "start", gap: 14, borderBottom: "1px solid var(--border-soft)" };
const drawerFoot = { padding: "14px 24px", borderTop: "1px solid var(--border-soft)", display: "flex", alignItems: "center", gap: 8, background: "var(--paper-soft)" };

// ============================================================
Object.assign(window, { OrgSurveys });