// ─── TOUR GUIDE TAB ───────────────────────────────────────────────

const MIKE_RUTH_QS = [
  "Looking back, what's the one thing you wish you'd known before you started?",
  "If you were doing this over for a 2027 K, what would you do differently?",
  "How real was the 'who you know' factor — backchannels, head letters, parent calls? Who actually moved the needle?",
  "Which schools surprised you on tour vs. on paper? Which felt overhyped?",
  "Where are your boys thriving / not thriving — and what would you have screened for to predict it?",
  "What did you tell admissions in writing that you think actually mattered?",
  "How did you handle the parent-interview / 'fit' conversation — what landed, what fell flat?",
  "Anyone we should call from each of our seven? A teacher, a current K parent, a coach?",
  "What's the real difference between K–6 → outplacement and K–12 day-to-day, in your experience?",
  "How did you talk to your kids about the process without making it feel like a test?",
  "On siblings — how did Crossroads / Brentwood actually treat the second-kid pathway? Promises vs. reality.",
  "If you had to bet on one school for Porter from what you know of him — which, and why?",
];

function TourTab({ checked, toggle }) {
  return (
    <div style={{ padding: "0 20px" }}>
      {/* ── DINNER PANEL ── */}
      <div id="dinner-mike-ruth" style={{
        background: "var(--forest-deep)",
        color: "var(--cream)",
        margin: "0 -20px 36px",
        padding: "32px 20px 28px",
      }}>
        <div style={{
          display: "flex", alignItems: "center", gap: 10, marginBottom: 14,
        }}>
          <Ornament size={9} color="var(--gold-soft)" />
          <span style={{
            fontFamily: "var(--sans)", fontSize: 9.5, fontWeight: 500,
            letterSpacing: "0.18em", textTransform: "uppercase",
            color: "var(--gold-soft)",
          }}>Tonight · 6:00 PM · Alba</span>
        </div>
        <h2 className="serif" style={{
          margin: 0, fontSize: 30, fontWeight: 300, lineHeight: 1.05,
          letterSpacing: "-0.02em", color: "var(--cream)",
        }}>
          For dinner with<br/>
          <em style={{ fontStyle: "italic", fontWeight: 400 }}>Mike &amp; Ruth.</em>
        </h2>
        <p style={{
          margin: "14px 0 22px",
          fontSize: 13.5, lineHeight: 1.6,
          color: "rgba(245,239,230,0.72)", maxWidth: 520,
        }}>
          Their boys are at Crossroads (8th) and Brentwood (5th). They've been
          through it. Don't ask about schools — ask about the <em>game</em>.
        </p>
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {MIKE_RUTH_QS.map((q, i) => {
            const qid = `q_mikeruth_${i}`;
            return (
              <label key={qid} style={{
                display: "flex", gap: 12, alignItems: "flex-start", cursor: "pointer",
              }}>
                <input
                  type="checkbox"
                  className="check"
                  checked={!!checked[qid]}
                  onChange={() => toggle(qid)}
                  style={{
                    borderColor: "rgba(245,239,230,0.4)",
                    background: checked[qid] ? "var(--gold)" : "transparent",
                  }}
                />
                <span style={{
                  fontSize: 13.5, lineHeight: 1.55,
                  color: checked[qid] ? "rgba(245,239,230,0.45)" : "rgba(245,239,230,0.92)",
                  textDecoration: checked[qid] ? "line-through" : "none",
                }}>{q}</span>
              </label>
            );
          })}
        </div>
        <div style={{
          marginTop: 22, paddingTop: 16,
          borderTop: "1px solid rgba(245,239,230,0.12)",
          fontFamily: "var(--serif)", fontStyle: "italic",
          fontSize: 13, color: "rgba(245,239,230,0.55)",
        }}>
          Bring a notebook. Drink water between glasses. They went to JTD parent night last week — ask.
        </div>
      </div>

      <p className="serif" style={{
        margin: "0 0 6px",
        fontSize: 22,
        lineHeight: 1.4,
        color: "var(--ink)",
        fontStyle: "italic",
      }}>
        Questions for the visit.
      </p>
      <p style={{
        margin: "0 0 36px",
        fontSize: 14,
        lineHeight: 1.7,
        color: "var(--ink-2)",
      }}>
        Ordered by your priorities, with an AI-readiness category added. Check them off as you go.
      </p>

      {TOUR_QS.map((cat, ci) => {
        const catDone = cat.qs.filter((_, i) => checked[`q_${cat.cat}_${i}`]).length;
        return (
          <div key={cat.cat} style={{ marginBottom: 40 }}>
            <div style={{
              display: "flex",
              alignItems: "baseline",
              justifyContent: "space-between",
              gap: 12,
              paddingBottom: 12,
              borderBottom: "1px solid var(--line)",
              marginBottom: 18,
            }}>
              <div style={{ display: "flex", alignItems: "baseline", gap: 12 }}>
                <span className="serif" style={{
                  fontSize: 14,
                  fontStyle: "italic",
                  color: "var(--gold)",
                }}>0{ci + 1}</span>
                <h3 className="serif" style={{
                  margin: 0,
                  fontSize: 22,
                  fontWeight: 400,
                  lineHeight: 1.2,
                  color: "var(--ink)",
                  letterSpacing: "-0.01em",
                }}>{cat.cat}</h3>
              </div>
              <span className="serif" style={{
                fontSize: 13,
                fontStyle: "italic",
                color: catDone > 0 ? "var(--forest)" : "var(--ink-3)",
              }}>{catDone} / {cat.qs.length}</span>
            </div>

            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              {cat.qs.map((q, i) => {
                const qid = `q_${cat.cat}_${i}`;
                return (
                  <label key={qid} style={{
                    display: "flex",
                    gap: 12,
                    alignItems: "flex-start",
                    cursor: "pointer",
                  }}>
                    <input
                      type="checkbox"
                      className="check"
                      checked={!!checked[qid]}
                      onChange={() => toggle(qid)}
                    />
                    <span style={{
                      fontSize: 14.5,
                      lineHeight: 1.65,
                      color: checked[qid] ? "var(--ink-3)" : "var(--ink-2)",
                      textDecoration: checked[qid] ? "line-through" : "none",
                    }}>{q}</span>
                  </label>
                );
              })}
            </div>
          </div>
        );
      })}
    </div>
  );
}

window.TourTab = TourTab;