/* global React, UI */
const { useState } = React;
const { Avatar, IconBack, IconCheck, IconClose, IconMic, IconLock, IconArrow, IconSparkle, IconChevron } = window.UI;

// ====================================================================
// BOOKING (modal sheet)
// ====================================================================
function BookingSheet({ go, onClose }) {
  const [step, setStep] = useState(1);
  const [type, setType] = useState("in-person");
  const [picked, setPicked] = useState([0,2]);
  const slots = [
    { d: "WED 6 MAY", t: "08:30 — 09:15" },
    { d: "WED 6 MAY", t: "16:00 — 16:45" },
    { d: "FRI 8 MAY", t: "10:00 — 10:45" },
    { d: "MON 11 MAY", t: "11:30 — 12:15" },
  ];

  const togglePick = (i) => setPicked(p => p.includes(i) ? p.filter(x=>x!==i) : [...p, i].slice(-3));

  return (
    <div className="screen page-in" style={{ background: "var(--surface)" }}>
      <div className="topbar">
        <button className="icon-btn" onClick={onClose}><IconClose/></button>
        <div className="mono" style={{ fontSize: 11, letterSpacing: "0.08em", color: "var(--text-3)" }}>{step} / 3</div>
        <div style={{ width: 36 }}/>
      </div>

      <div className="screen-pad">
        <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "8px 0 24px", borderBottom: "1px solid var(--border-soft)" }}>
          <Avatar seed={2} size={44} name="Eliza Hart" />
          <div>
            <div className="mono" style={{ fontSize: 10, letterSpacing: "0.1em", color: "var(--text-3)" }}>REQUESTING 1to1 WITH</div>
            <div style={{ fontWeight: 500, marginTop: 2 }}>Eliza Hart</div>
          </div>
        </div>

        {step === 1 && (
          <div style={{ paddingTop: 28 }}>
            <h2 className="serif" style={{ fontSize: 28, margin: 0, letterSpacing: "-0.01em" }}>Why this meeting?</h2>
            <p className="muted" style={{ fontSize: 14, marginTop: 8 }}>A line or two. She'll see this with your Meet Sheet.</p>
            <textarea className="field" rows={5} style={{ marginTop: 20 }}
              defaultValue="Saw you work with owner-operators on the Coast — I think there's overlap with my SME buyers. Would love 30 min to compare notes and see who I can intro you to."/>
            <div className="mono" style={{ fontSize: 11, color: "var(--text-3)", marginTop: 8, textAlign: "right" }}>187 / 280</div>
          </div>
        )}

        {step === 2 && (
          <div style={{ paddingTop: 28 }}>
            <h2 className="serif" style={{ fontSize: 28, margin: 0, letterSpacing: "-0.01em" }}>How shall we meet?</h2>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginTop: 24 }}>
              <TypeChoice active={type==="in-person"} onClick={() => setType("in-person")} t="In person" d="Coffee, lunch, or office" />
              <TypeChoice active={type==="video"} onClick={() => setType("video")} t="Video" d="Zoom, Meet or in-app" />
            </div>
          </div>
        )}

        {step === 3 && (
          <div style={{ paddingTop: 28 }}>
            <h2 className="serif" style={{ fontSize: 28, margin: 0, letterSpacing: "-0.01em" }}>Propose three times.</h2>
            <p className="muted" style={{ fontSize: 14, marginTop: 8 }}>Showing slots that work for both of you.</p>
            <div style={{ marginTop: 20 }}>
              {slots.map((s, i) => (
                <button key={i} onClick={() => togglePick(i)} className="row" style={{ width: "100%", textAlign: "left", background: "transparent", border: "none", cursor: "pointer", padding: "16px 0", borderBottom: "1px solid var(--border-soft)" }}>
                  <div style={{ width: 22, height: 22, borderRadius: 6, border: "1.5px solid " + (picked.includes(i) ? "var(--accent)" : "var(--border)"), background: picked.includes(i) ? "var(--accent)" : "transparent", display: "grid", placeItems: "center", color: "#0E0D0B" }}>
                    {picked.includes(i) && <IconCheck size={14} strokeWidth={2.5}/>}
                  </div>
                  <div style={{ flex: 1 }}>
                    <div className="mono" style={{ fontSize: 11, letterSpacing: "0.08em", color: "var(--text-3)" }}>{s.d}</div>
                    <div style={{ fontWeight: 500, marginTop: 2 }} className="mono">{s.t}</div>
                  </div>
                  {picked.includes(i) && (
                    <div className="mono" style={{ fontSize: 10, color: "var(--accent)", letterSpacing: "0.08em" }}>
                      OPTION {picked.indexOf(i)+1}
                    </div>
                  )}
                </button>
              ))}
            </div>
          </div>
        )}
      </div>

      <div className="sticky-cta" style={{ background: "linear-gradient(to top, var(--surface) 60%, transparent)" }}>
        {step < 3 ? (
          <button className="btn btn-primary btn-block" onClick={() => setStep(s => s+1)}>Continue</button>
        ) : (
          <button className="btn btn-primary btn-block" onClick={() => go("booking-sent")}>Send request</button>
        )}
      </div>
    </div>
  );
}
function TypeChoice({ active, onClick, t, d }) {
  return (
    <button onClick={onClick} className="card" style={{
      cursor: "pointer", textAlign: "left",
      borderColor: active ? "var(--accent)" : "var(--border-soft)",
      background: active ? "var(--accent-soft)" : "var(--surface-2)",
      color: "var(--text)"
    }}>
      <div style={{ fontWeight: 500, fontSize: 15 }}>{t}</div>
      <div className="muted" style={{ fontSize: 13, marginTop: 4 }}>{d}</div>
    </button>
  );
}

function BookingSent({ go }) {
  return (
    <div className="screen page-in" style={{ display: "flex", flexDirection: "column" }}>
      <div className="topbar"><div/><div/><button className="icon-btn" onClick={() => go("home")}><IconClose/></button></div>
      <div style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "center", padding: "0 var(--pad-edge)" }}>
        <div className="mono" style={{ fontSize: 11, letterSpacing: "0.1em", color: "var(--accent)" }}>SENT</div>
        <h1 className="serif" style={{ fontSize: 36, margin: "12px 0 0", letterSpacing: "-0.015em", lineHeight: 1.1 }}>
          We'll let you know<br/>
          <span className="serif-i">when Eliza responds.</span>
        </h1>
        <p className="muted" style={{ fontSize: 15, marginTop: 16, lineHeight: 1.5 }}>
          Most replies come within 48 hours. We'll add it to your calendar the moment it's confirmed.
        </p>
      </div>
      <div className="sticky-cta">
        <button className="btn btn-ghost btn-block" onClick={() => go("home")}>Return home</button>
      </div>
    </div>
  );
}

// ====================================================================
// BRIEF
// ====================================================================
function BriefScreen({ go }) {
  return (
    <div className="screen page-in">
      <div className="topbar">
        <button className="icon-btn" onClick={() => go("home")}><IconBack/></button>
        <div className="mono" style={{ fontSize: 11, letterSpacing: "0.08em", color: "var(--text-3)" }}>BRIEF</div>
        <button className="icon-btn">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9V2h12v7M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2M6 14h12v8H6z"/></svg>
        </button>
      </div>
      <div className="screen-pad">
        <div style={{ display: "flex", gap: 14, alignItems: "center", paddingBottom: 24, borderBottom: "1px solid var(--border-soft)" }}>
          <Avatar seed={3} size={64} name="Priya Anand"/>
          <div>
            <div className="serif" style={{ fontSize: 26, letterSpacing: "-0.01em" }}>Priya Anand</div>
            <div className="muted" style={{ fontSize: 13 }}>Commercial mortgage broker · Stride Finance</div>
            <div className="mono" style={{ fontSize: 11, marginTop: 6, color: "var(--accent)" }}>TODAY · 10:30 · THE PANTRY · 8 MIN AWAY</div>
          </div>
        </div>

        <Block label="The headline" serif>
          <p style={{ margin: 0, lineHeight: 1.6, fontSize: 16 }}>
            Priya is a senior broker who's just gone independent. She places <span style={{color:"var(--accent)"}}>$60–80M of commercial</span> annually
            for SE QLD owner-operators — exactly your buyer profile. She's actively looking for solicitors who don't make her clients feel stupid.
          </p>
        </Block>

        <Block label="Where you overlap">
          <Bullet>Both serve SME owners buying $1–4M premises</Bullet>
          <Bullet>Both newly-independent within the past 12 months</Bullet>
          <Bullet>3 mutual group members in BNI Robina</Bullet>
        </Block>

        <Block label="Their asks you can help with">
          <Bullet>Solicitors who explain easements without billing for the conversation</Bullet>
          <Bullet>Intro to a town planner familiar with Burleigh DAs</Bullet>
        </Block>

        <Block label="Your asks they can help with">
          <Bullet>Brokers placing first-commercial deals under $4M</Bullet>
          <Bullet>Their accountant network — particularly Coast Ledger</Bullet>
        </Block>

        <Block label="Suggested questions">
          <Numbered n="01" t="What does a great solicitor referral look like to you, in practice?" />
          <Numbered n="02" t="When a deal goes wrong, what's usually the first sign?" />
          <Numbered n="03" t="Who else should I be talking to on the Coast?" />
        </Block>

        <div style={{ height: 100 }}/>
      </div>
      <div className="sticky-cta">
        <button className="btn btn-primary btn-block" onClick={() => go("consent")}>
          Start 1to1 <IconArrow size={16}/>
        </button>
      </div>
    </div>
  );
}

function Block({ label, serif, children }) {
  return (
    <div style={{ padding: "28px 0", borderBottom: "1px solid var(--border-soft)" }}>
      <div className="eyebrow" style={{ marginBottom: 12 }}>{label}</div>
      <div style={{ fontFamily: serif ? "var(--serif)" : "var(--sans)" }}>{children}</div>
    </div>
  );
}
function Bullet({ children }) {
  return (
    <div style={{ display: "flex", gap: 14, padding: "10px 0", alignItems: "flex-start" }}>
      <div style={{ width: 4, height: 4, borderRadius: 2, background: "var(--accent)", marginTop: 9, flex: "0 0 4px" }}/>
      <div style={{ flex: 1, lineHeight: 1.55 }}>{children}</div>
    </div>
  );
}
function Numbered({ n, t }) {
  return (
    <div style={{ display: "flex", gap: 16, padding: "12px 0", alignItems: "flex-start" }}>
      <span className="mono" style={{ color: "var(--text-3)", fontSize: 11, marginTop: 4 }}>{n}</span>
      <div className="serif-i" style={{ flex: 1, fontSize: 18, lineHeight: 1.4 }}>"{t}"</div>
    </div>
  );
}

// ====================================================================
// CONSENT (the trust moment)
// ====================================================================
function ConsentScreen({ go }) {
  const [meConsent, setMeConsent] = useState(false);
  const [theirConsent, setTheirConsent] = useState(false);

  // Auto-advance: after user consents, simulate the other party
  React.useEffect(() => {
    if (meConsent && !theirConsent) {
      const t = setTimeout(() => setTheirConsent(true), 1400);
      return () => clearTimeout(t);
    }
  }, [meConsent, theirConsent]);

  React.useEffect(() => {
    if (meConsent && theirConsent) {
      const t = setTimeout(() => go("meeting"), 900);
      return () => clearTimeout(t);
    }
  }, [meConsent, theirConsent]);

  return (
    <div className="screen page-in" style={{ display: "flex", flexDirection: "column" }}>
      <div className="topbar">
        <button className="icon-btn" onClick={() => go("brief")}><IconBack/></button>
        <div className="mono" style={{ fontSize: 11, letterSpacing: "0.1em", color: "var(--text-3)" }}>STEP 1 OF 2</div>
        <div style={{ width: 36 }}/>
      </div>
      <div className="screen-pad" style={{ paddingTop: 24 }}>
        <div style={{ width: 56, height: 56, borderRadius: 16, background: "var(--accent-soft)", color: "var(--accent)", display: "grid", placeItems: "center", marginBottom: 20 }}>
          <IconLock size={22}/>
        </div>
        <h1 className="serif" style={{ fontSize: 32, margin: 0, lineHeight: 1.1, letterSpacing: "-0.015em" }}>
          Recording requires<br/><span className="serif-i" style={{ color: "var(--accent)" }}>both of you to agree.</span>
        </h1>
        <p className="muted" style={{ fontSize: 15, marginTop: 16, lineHeight: 1.55 }}>
          Audio stays encrypted. We retain the recording for 30 days, then keep only the transcript. Either of you can delete it at any time.
        </p>

        <div className="perf"></div>

        {/* Two-party consent */}
        <ConsentRow
          name="Marcus Chen"
          subtitle="You"
          checked={meConsent}
          onClick={() => setMeConsent(true)}
          waiting={false}
          self
        />
        <ConsentRow
          name="Priya Anand"
          subtitle="The other party"
          checked={theirConsent}
          waiting={meConsent && !theirConsent}
        />

        <div style={{ marginTop: 24, padding: 16, background: "var(--surface)", borderRadius: 12, border: "1px solid var(--border-soft)" }}>
          <div style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
            <IconSparkle size={16} stroke="var(--text-3)"/>
            <div style={{ fontSize: 13, color: "var(--text-2)", lineHeight: 1.55 }}>
              AI will produce a private summary and action items afterwards. Nothing is shared without you tapping <em className="serif-i">submit</em>.
            </div>
          </div>
        </div>

        {/* live status */}
        <div style={{ marginTop: 24, textAlign: "center" }}>
          {!meConsent && <div className="muted" style={{ fontSize: 13 }}>Tap to consent.</div>}
          {meConsent && !theirConsent && (
            <div className="mono" style={{ fontSize: 12, letterSpacing: "0.08em", color: "var(--text-3)" }}>
              <span className="rec-dot" style={{ display: "inline-block", marginRight: 8, verticalAlign: "middle", background: "var(--text-3)" }}/>
              WAITING FOR PRIYA…
            </div>
          )}
          {meConsent && theirConsent && (
            <div className="mono" style={{ fontSize: 12, letterSpacing: "0.08em", color: "var(--accent)" }}>
              ● BOTH CONSENTED — STARTING
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
function ConsentRow({ name, subtitle, checked, onClick, waiting, self }) {
  return (
    <button
      onClick={onClick}
      disabled={!self || checked}
      style={{
        width: "100%", display: "flex", alignItems: "center", gap: 14,
        padding: "16px 4px", background: "transparent", border: "none",
        borderBottom: "1px solid var(--border-soft)",
        cursor: self && !checked ? "pointer" : "default",
        opacity: !self && !checked && !waiting ? 0.6 : 1,
      }}>
      <Avatar seed={self ? 1 : 3} size={44} name={name}/>
      <div style={{ flex: 1, textAlign: "left" }}>
        <div style={{ fontWeight: 500, color: "var(--text)" }}>{name}</div>
        <div className="muted" style={{ fontSize: 13 }}>{subtitle}</div>
      </div>
      <div style={{
        height: 32, padding: "0 14px", borderRadius: 999, display: "flex", alignItems: "center", gap: 8,
        background: checked ? "var(--accent)" : (self ? "var(--surface-2)" : "transparent"),
        color: checked ? "#0E0D0B" : "var(--text-2)",
        border: checked ? "none" : "1px solid var(--border)",
        fontSize: 12, fontWeight: 500,
      }}>
        {checked ? (<><IconCheck size={14} strokeWidth={2.5}/> CONSENTED</>) : waiting ? (<>WAITING…</>) : (self ? "TAP TO CONSENT" : "AWAITING")}
      </div>
    </button>
  );
}

// ====================================================================
// IN-MEETING
// ====================================================================
function MeetingScreen({ go }) {
  const [seconds, setSeconds] = useState(742); // 12:22
  const [checked, setChecked] = useState([true, false, false, false]);
  React.useEffect(() => {
    const t = setInterval(() => setSeconds(s => s+1), 1000);
    return () => clearInterval(t);
  }, []);
  const mm = String(Math.floor(seconds/60)).padStart(2,"0");
  const ss = String(seconds%60).padStart(2,"0");
  const items = [
    "Their broker network — top 3",
    "Your ideal SME buyer profile",
    "Cross-referral mechanics",
    "Action: intro to Coast Ledger",
  ];
  return (
    <div className="screen page-in" style={{ background: "var(--bg)", display: "flex", flexDirection: "column" }}>
      {/* persistent recording banner */}
      <div style={{ background: "var(--accent-ink)", borderBottom: "1px solid var(--accent-soft)", padding: "10px var(--pad-edge)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <span className="rec-dot"/>
          <span className="mono" style={{ fontSize: 11, letterSpacing: "0.1em", color: "var(--accent)" }}>RECORDING · BOTH CONSENTED</span>
        </div>
        <span className="mono" style={{ fontSize: 13, color: "var(--accent)" }}>{mm}:{ss}</span>
      </div>

      <div className="screen-pad" style={{ paddingTop: 24, flex: 1 }}>
        <div className="eyebrow">In conversation with</div>
        <div className="serif" style={{ fontSize: 28, margin: "8px 0 24px", letterSpacing: "-0.01em" }}>
          Priya Anand <span className="serif-i muted" style={{ fontSize: 18 }}>· Stride Finance</span>
        </div>

        <div className="card-2" style={{ padding: 0 }}>
          <div style={{ padding: "16px 20px", display: "flex", justifyContent: "space-between", alignItems: "center", borderBottom: "1px solid var(--border-soft)" }}>
            <div className="eyebrow">Agenda · private to you</div>
            <div className="mono" style={{ fontSize: 11, color: "var(--text-3)" }}>1 OF 4</div>
          </div>
          {items.map((item, i) => (
            <button key={i} onClick={() => setChecked(c => c.map((x,j)=>j===i?!x:x))}
              style={{ width: "100%", textAlign: "left", background: "transparent", border: "none", display: "flex", gap: 12, padding: "14px 20px", borderBottom: i<items.length-1 ? "1px solid var(--border-soft)" : "none", cursor: "pointer" }}>
              <div style={{ width: 18, height: 18, borderRadius: 5, border: "1.5px solid " + (checked[i] ? "var(--accent)" : "var(--border)"), background: checked[i] ? "var(--accent)" : "transparent", display: "grid", placeItems: "center", color: "#0E0D0B", marginTop: 1, flex: "0 0 18px" }}>
                {checked[i] && <IconCheck size={11} strokeWidth={3}/>}
              </div>
              <div style={{ flex: 1, color: checked[i] ? "var(--text-3)" : "var(--text)", textDecoration: checked[i] ? "line-through" : "none", fontSize: 14 }}>{item}</div>
            </button>
          ))}
        </div>

        {/* AI nudge */}
        <div style={{ marginTop: 20, padding: 16, background: "var(--accent-soft)", borderRadius: 12, display: "flex", gap: 12, alignItems: "flex-start" }}>
          <IconSparkle size={16} stroke="var(--accent)"/>
          <div style={{ fontSize: 13, lineHeight: 1.5, color: "var(--accent)" }}>
            You haven't asked about her ideal client. ~28 min remaining.
          </div>
        </div>
      </div>

      {/* End meeting CTA */}
      <div style={{ padding: "16px var(--pad-edge) calc(16px + env(safe-area-inset-bottom))", display: "flex", gap: 12 }}>
        <button className="btn btn-ghost" style={{ flex: 1 }}>
          <IconMic size={16}/> Pause
        </button>
        <button className="btn btn-primary" style={{ flex: 1 }} onClick={() => go("debrief")}>End 1to1</button>
      </div>
    </div>
  );
}

// ====================================================================
// DEBRIEF
// ====================================================================
function DebriefScreen({ go }) {
  const [attribution, setAttribution] = useState(null);
  return (
    <div className="screen page-in">
      <div className="topbar">
        <button className="icon-btn" onClick={() => go("home")}><IconClose/></button>
        <div className="mono" style={{ fontSize: 11, letterSpacing: "0.1em", color: "var(--text-3)" }}>DEBRIEF</div>
        <div style={{ width: 36 }}/>
      </div>
      <div className="screen-pad">
        <div className="eyebrow" style={{ marginTop: 8 }}>1to1 · 5 May, 10:30 · 47 minutes</div>
        <h1 className="serif" style={{ fontSize: 34, margin: "10px 0 24px", lineHeight: 1.1, letterSpacing: "-0.015em" }}>
          Your debrief from<br/>
          <span className="serif-i">Priya Anand.</span>
        </h1>

        {/* AI SUMMARY CARD — the centerpiece */}
        <div style={{ position: "relative", border: "1px solid var(--accent-soft)", borderRadius: 14, padding: 24, background: "linear-gradient(180deg, var(--accent-soft) 0%, var(--surface) 80%)" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 14 }}>
            <IconSparkle size={14} stroke="var(--accent)"/>
            <span className="mono" style={{ fontSize: 11, letterSpacing: "0.1em", color: "var(--accent)" }}>AI SUMMARY</span>
            <span className="mono" style={{ fontSize: 11, color: "var(--text-3)", marginLeft: "auto" }}>3 MIN AGO</span>
          </div>
          <div className="serif" style={{ fontSize: 19, lineHeight: 1.5, letterSpacing: "-0.005em", color: "var(--text)" }}>
            A productive first meeting. Priya places <span className="serif-i" style={{ color: "var(--accent)" }}>commercial deals under $4M</span> for owner-operators across SE QLD and is actively looking for solicitors who won't bill her clients for explanations. You committed to introducing her to <span className="serif-i">Coast Ledger</span> by Friday; she'll send you two prospects this week.
          </div>
          <div style={{ marginTop: 18, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <div style={{ display: "flex", gap: 8 }}>
              <span className="mono" style={{ fontSize: 11, color: "var(--text-3)" }}>4 ACTIONS · 2 ATTRIBUTIONS</span>
            </div>
            <button style={{ background: "transparent", border: "none", color: "var(--accent)", fontSize: 13, cursor: "pointer" }}>Edit</button>
          </div>
        </div>

        <h3 className="section-h" style={{ marginTop: 36 }}>Action items</h3>
        <Action who="You" t="Intro Priya to James at Coast Ledger" by="By Friday 8 May" />
        <Action who="Priya" t="Send two prospect briefs (warehouse + retail fit-out)" by="This week" />
        <Action who="Both" t="Calendar follow-up in 6 weeks" by="By 16 June" />

        <h3 className="section-h" style={{ marginTop: 36 }}>Did Priya make a connection for you?</h3>
        <p className="muted" style={{ fontSize: 14, marginTop: -6 }}>Attributions feed your reputation — only she can tag what came of it.</p>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8, marginTop: 14 }}>
          <AttBtn t="Yes" active={attribution==="yes"} onClick={() => setAttribution("yes")}/>
          <AttBtn t="Maybe" active={attribution==="maybe"} onClick={() => setAttribution("maybe")}/>
          <AttBtn t="Not yet" active={attribution==="no"} onClick={() => setAttribution("no")}/>
        </div>

        {attribution === "yes" && (
          <div style={{ marginTop: 14, padding: 16, background: "var(--surface-2)", borderRadius: 12 }}>
            <div className="eyebrow" style={{ marginBottom: 8 }}>What was the intro?</div>
            <textarea className="field" rows={3} placeholder="e.g. Connected me with Coast Ledger's principal accountant…" style={{ background: "var(--surface)" }}/>
          </div>
        )}

        <h3 className="section-h" style={{ marginTop: 36 }}>How was the meeting?</h3>
        <Rating l="Was Priya prepared?" v={5}/>
        <Rating l="Was the meeting productive?" v={5}/>
        <Rating l="Did she bring value?" v={4}/>

        <div style={{ height: 100 }}/>
      </div>
      <div className="sticky-cta">
        <button className="btn btn-primary btn-block" onClick={() => go("home")}>Submit debrief</button>
      </div>
    </div>
  );
}
function Action({ who, t, by }) {
  return (
    <div style={{ padding: "14px 0", borderBottom: "1px solid var(--border-soft)", display: "flex", gap: 14, alignItems: "flex-start" }}>
      <span className="mono" style={{ fontSize: 10, padding: "3px 8px", border: "1px solid var(--border)", borderRadius: 4, color: "var(--text-2)", whiteSpace: "nowrap", marginTop: 2 }}>{who.toUpperCase()}</span>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 15 }}>{t}</div>
        <div className="muted-2" style={{ fontSize: 12, marginTop: 3 }}>{by}</div>
      </div>
    </div>
  );
}
function AttBtn({ t, active, onClick }) {
  return (
    <button onClick={onClick} className="btn" style={{
      height: 44, fontSize: 14,
      background: active ? "var(--accent)" : "var(--surface-2)",
      color: active ? "#0E0D0B" : "var(--text)",
      fontWeight: active ? 600 : 500,
    }}>{t}</button>
  );
}
function Rating({ l, v }) {
  return (
    <div style={{ padding: "14px 0", borderBottom: "1px solid var(--border-soft)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
      <div style={{ fontSize: 14 }}>{l}</div>
      <div style={{ display: "flex", gap: 4 }}>
        {[1,2,3,4,5].map(i => (
          <svg key={i} width="16" height="16" viewBox="0 0 24 24" fill={i<=v?"var(--accent)":"none"} stroke={i<=v?"var(--accent)":"var(--border)"} strokeWidth="1.5"><path d="M12 2l3 6.5 7 1-5 5 1.5 7L12 18l-6.5 3.5L7 14.5l-5-5 7-1z"/></svg>
        ))}
      </div>
    </div>
  );
}

window.BookingSheet = BookingSheet;
window.BookingSent = BookingSent;
window.BriefScreen = BriefScreen;
window.ConsentScreen = ConsentScreen;
window.MeetingScreen = MeetingScreen;
window.DebriefScreen = DebriefScreen;