// Feedback (anonymous) + New Vendor Request (placeholder).
//
// ANONYMITY CONTRACT — by design this form captures ZERO identifying information:
// no name, email, member ID, IP, timestamp-as-identity, or hidden fields. The only
// data submitted is the comment text and an optional category, posted to a dedicated
// Google Sheet. The page is MemberSpace-gated for access, but nothing about the
// member is attached to the submission. (Gating is wired as the final step.)

const FEEDBACK_CATEGORIES = ["No category", "Suppliers & partners", "Air & travel", "Payments & commissions", "Website / portal", "Events", "Something else"];

function FeedbackPage({ compact }) {
  const [comment, setComment] = React.useState("");
  const [category, setCategory] = React.useState(FEEDBACK_CATEGORIES[0]);
  const [sent, setSent] = React.useState(false);
  const [focus, setFocus] = React.useState(false);
  const pad = compact ? "22px 18px 60px" : "48px 64px 96px";
  const max = compact ? "100%" : 760;

  function submit(e) {
    e.preventDefault();
    if (!comment.trim()) return;
    // Production: POST { comment, category } only — no identity — to the feedback Sheet.
    setSent(true); setComment(""); setCategory(FEEDBACK_CATEGORIES[0]);
    window.scrollTo(0, 0);
  }

  return (
    <div style={{ padding: pad, maxWidth: max, margin: "0 auto" }}>
      <div style={{ marginBottom: 12 }}>
        <div className="rdb-eyebrow" style={{ marginBottom: 14 }}>Backstage · Your voice</div>
        <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: compact ? 30 : 48, letterSpacing: "-0.02em", color: "var(--fg-1)", margin: 0, lineHeight: 1.02 }}>Anonymous Feedback</h1>
      </div>

      {/* Anonymity assurance */}
      <div style={{ position: "relative", background: "var(--rdb-gold-faint)", border: "1px solid rgba(201,168,76,0.40)", padding: compact ? "16px 16px 16px 20px" : "18px 22px 18px 26px", margin: "22px 0 8px", overflow: "hidden" }}>
        <span style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: 3, background: "var(--rdb-gold)" }} />
        <div style={{ display: "flex", gap: 14 }}>
          <Icon name="shield-check" size={20} color="var(--rdb-gold)" style={{ flexShrink: 0, marginTop: 1 }} />
          <div style={{ fontFamily: "var(--font-body)", fontSize: 13.5, lineHeight: 1.6, color: "var(--fg-2)" }}>
            This is genuinely anonymous. We collect <span style={{ color: "var(--fg-1)", fontWeight: 600 }}>only your comment</span> and the optional category — no name, email, member ID, or hidden tracking is attached to your submission. Share candidly; we can't tell who sent it, and we read every note.
          </div>
        </div>
      </div>

      <div style={{ height: 1, background: "var(--rdb-gold-soft)", margin: compact ? "22px 0" : "28px 0 30px" }} />

      {sent ? (
        <div style={{ border: "1px solid rgba(201,168,76,0.4)", background: "var(--rdb-gold-faint)", padding: "32px 28px", display: "flex", alignItems: "center", gap: 16 }}>
          <Icon name="check-circle" size={26} color="var(--success)" />
          <div>
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 18, color: "var(--fg-1)" }}>Thank you — received anonymously</div>
            <div style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--fg-2)", marginTop: 4 }}>Nothing identifying was sent with it. <a onClick={() => setSent(false)} style={{ color: "var(--rdb-gold)", cursor: "pointer" }}>Leave another note</a>.</div>
          </div>
        </div>
      ) : (
        <form onSubmit={submit}>
          <div style={{ display: "flex", flexDirection: "column", gap: 7, marginBottom: 20 }}>
            <label style={{ fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 11, letterSpacing: "0.06em", color: "var(--fg-2)" }}>Category <span style={{ fontFamily: "var(--font-mono)", fontWeight: 400, fontSize: 10, color: "var(--ink-6)", letterSpacing: 0, marginLeft: 6 }}>optional</span></label>
            <select value={category} onChange={e => setCategory(e.target.value)} style={{
              width: "100%", maxWidth: compact ? "100%" : 320, boxSizing: "border-box", background: "var(--ink-0)", border: "1px solid var(--ink-3)",
              color: "var(--fg-1)", fontFamily: "var(--font-body)", fontSize: 14, padding: "11px 13px", outline: "none", borderRadius: 2, cursor: "pointer",
            }}>
              {FEEDBACK_CATEGORIES.map(c => <option key={c}>{c}</option>)}
            </select>
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
            <label style={{ fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 11, letterSpacing: "0.06em", color: "var(--fg-2)" }}>Your comment <span style={{ color: "var(--rdb-gold)", marginLeft: 4 }}>*</span></label>
            <textarea
              value={comment} onChange={e => setComment(e.target.value)}
              onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
              rows={compact ? 7 : 6} placeholder="What's working, what isn't, what would help you do your job better…"
              style={{ width: "100%", boxSizing: "border-box", background: "var(--ink-0)",
                border: "1px solid " + (focus ? "var(--rdb-gold)" : "var(--ink-3)"),
                color: "var(--fg-1)", fontFamily: "var(--font-body)", fontSize: 14, lineHeight: 1.6,
                padding: "13px 15px", outline: "none", borderRadius: 2, resize: "vertical", transition: "border-color 140ms" }} />
          </div>

          <div style={{ display: "flex", alignItems: "center", gap: 16, marginTop: 24, flexWrap: "wrap" }}>
            <Button variant="primary" size="lg" type="submit" icon={<Icon name="send" size={15} />} disabled={!comment.trim()}>Submit anonymously</Button>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 7, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-6)" }}>
              <Icon name="lock" size={12} color="var(--ink-6)" />No identity attached
            </span>
          </div>
        </form>
      )}
    </div>
  );
}

// ---- New Vendor Request — placeholder shell (fields pending from RDB) ----
function VendorRequestPage({ compact }) {
  const pad = compact ? "22px 18px 60px" : "48px 64px 96px";
  const stub = ["Vendor / company name", "Service category", "Website", "Primary contact", "Contact email", "Commission terms (if known)", "Why you're recommending them"];
  return (
    <div style={{ padding: pad, maxWidth: compact ? "100%" : 760, margin: "0 auto" }}>
      <div style={{ marginBottom: 12 }}>
        <div className="rdb-eyebrow" style={{ marginBottom: 14 }}>Backstage · Forms</div>
        <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: compact ? 28 : 44, letterSpacing: "-0.02em", color: "var(--fg-1)", margin: 0, lineHeight: 1.04 }}>New Vendor Request</h1>
      </div>

      <div style={{ position: "relative", background: "rgba(201,168,76,0.05)", border: "1px solid var(--ink-3)", padding: compact ? "16px 16px 16px 20px" : "18px 22px 18px 26px", margin: "22px 0 0", overflow: "hidden" }}>
        <span style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: 3, background: "var(--rdb-gold)" }} />
        <div style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
          <Icon name="hourglass" size={18} color="var(--rdb-gold)" style={{ flexShrink: 0, marginTop: 2 }} />
          <div style={{ fontFamily: "var(--font-body)", fontSize: 14, lineHeight: 1.6, color: "var(--fg-2)" }}>
            <span style={{ fontWeight: 700, color: "var(--fg-1)" }}>Fields pending.</span> Hannah is finalizing the questions for this form. The shell below is laid out and ready — send the field list and it'll be built to match, exactly like the Commission Research form.
          </div>
        </div>
      </div>

      <div style={{ height: 1, background: "var(--rdb-gold-soft)", margin: compact ? "22px 0" : "28px 0 30px" }} />

      {/* Disabled preview of the eventual field layout */}
      <div style={{ display: "grid", gridTemplateColumns: compact ? "1fr" : "1fr 1fr", gap: compact ? 14 : 18, opacity: 0.5, pointerEvents: "none" }}>
        {stub.map((label, i) => (
          <div key={i} style={{ display: "flex", flexDirection: "column", gap: 7, gridColumn: i === stub.length - 1 && !compact ? "1 / -1" : "auto" }}>
            <span style={{ fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 11, letterSpacing: "0.06em", color: "var(--fg-2)" }}>{label}</span>
            <div style={{ height: i === stub.length - 1 ? 80 : 42, background: "var(--ink-0)", border: "1px dashed var(--ink-4)", borderRadius: 2 }} />
          </div>
        ))}
      </div>
      <div style={{ marginTop: 24 }}>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "13px 22px", background: "var(--ink-2)", color: "var(--ink-6)", fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 13, letterSpacing: "0.04em" }}>
          <Icon name="lock" size={15} color="var(--ink-6)" />Awaiting fields
        </span>
      </div>
    </div>
  );
}

Object.assign(window, { FeedbackPage, VendorRequestPage });