// src/account.jsx — Account + Address-picker screens. Both real, both interactive.
// AccountScreen: identity + standing + saved addresses + payment + preferences + recent orders + neighborhood credits.
// AddressPicker: full-screen overlay; saved addresses, recent searches, "current location" tile, map preview, etc.

// ─── AccountScreen ─────────────────────────────────────────────────────────
function AccountScreen({ onNav }) {
  const isMobile = useMedia("(max-width: 720px)");

  // Local state for toggles & defaults — feels real on click.
  const [defaultAddrId, setDefaultAddrId] = React.useState("home");
  const [defaultPay, setDefaultPay] = React.useState("amex");
  const [prefs, setPrefs] = React.useState({
    plasticReturn: true,
    sundayDigest: true,
    notifyOpenLate: false,
    roundUp: true,
    leaveAtDoor: true,
  });
  const togglePref = (k) => setPrefs(p => ({ ...p, [k]: !p[k] }));

  const orders = [
    { id: "4821", status: "Out for delivery", store: "Kalymnos Deli", items: 3, total: 28.40, eta: "9 min", when: "Today, 6:42 PM" },
    { id: "4799", status: "Pickup ready",    store: "Fig & Thistle",  items: 2, total: 41.00, eta: "Held til 8:30 PM", when: "Today, 5:10 PM" },
    { id: "4754", status: "Delivered",       store: "Verde Produce",  items: 7, total: 32.18, eta: "",                 when: "Tue, 7:18 PM" },
    { id: "4691", status: "Delivered",       store: "Liu's 24hr",     items: 4, total: 18.62, eta: "",                 when: "Sun, 11:24 PM" },
  ];

  const addresses = [
    { id: "home",   label: "Home",    line1: "98 Orchard St, Apt 4B",   line2: "New York, NY 10002",  note: "Buzz 4B — door is unmarked",   icon: "Pin" },
    { id: "work",   label: "Studio",  line1: "315 W 36th St, Floor 9", line2: "New York, NY 10018",  note: "Reception accepts after 6pm",  icon: "Store" },
    { id: "moms",   label: "Mom's",   line1: "1142 Carroll St",        line2: "Brooklyn, NY 11225",  note: "Stairs on the left",            icon: "Heart" },
  ];

  const payments = [
    { id: "amex",   brand: "Amex",       last4: "1004", exp: "06/27" },
    { id: "visa",   brand: "Visa",       last4: "8821", exp: "11/26" },
    { id: "ebt",    brand: "EBT",        last4: "—",     exp: "" },
  ];

  return (
    <div style={{ maxWidth: 1100, margin: "0 auto",
                  padding: isMobile ? "16px 16px 100px" : "32px 28px 80px" }}>

      {/* Header band */}
      <div style={{
        display: "grid", gap: 18,
        gridTemplateColumns: isMobile ? "1fr" : "1.4fr 1fr",
        marginBottom: 28,
      }}>
        <div style={{
          padding: "22px 24px", borderRadius: "var(--radius-lg)",
          background: "var(--navy-fill)", color: "#fff",
          position: "relative", overflow: "hidden",
        }}>
          {/* Decorative arcs */}
          <svg viewBox="0 0 200 200" aria-hidden style={{ position: "absolute", right: -30, bottom: -60,
              width: 240, height: 240, opacity: 0.15, color: "#fff" }}>
            <circle cx="100" cy="100" r="80" fill="none" stroke="currentColor" />
            <circle cx="100" cy="100" r="56" fill="none" stroke="currentColor" />
            <circle cx="100" cy="100" r="32" fill="none" stroke="currentColor" />
          </svg>

          <div style={{ position: "relative", display: "flex", alignItems: "center", gap: 14 }}>
            <div style={{ width: 56, height: 56, borderRadius: 999,
                          background: "rgba(255,255,255,0.12)", display: "grid", placeItems: "center",
                          fontSize: 22, fontWeight: 600, fontFamily: "inherit",
                          border: "1px solid rgba(255,255,255,0.18)" }}>
              NG
            </div>
            <div style={{ minWidth: 0 }}>
              <div className="serif" style={{ fontSize: 22, lineHeight: 1.1, letterSpacing: "-0.01em" }}>Nikhil Gupta</div>
              <div style={{ fontSize: 12.5, opacity: 0.75, marginTop: 4 }}>
                Member since Mar 2024 · 84 orders · 6 stores supported
              </div>
            </div>
          </div>

          <div style={{ position: "relative", marginTop: 22, display: "flex", gap: 10, flexWrap: "wrap" }}>
            <Btn variant="inverse" size="sm" icon={<Icons.User size={13} stroke={1.8} />}>Edit profile</Btn>
            <Btn variant="ghost" size="sm" style={{ color: "rgba(255,255,255,0.85)" }}>Sign out</Btn>
          </div>
        </div>

        {/* Standing card — neighborhood credits */}
        <div style={{
          padding: "20px 22px", borderRadius: "var(--radius-lg)",
          background: "var(--ok-tint)", border: "1px solid oklch(from var(--ok) l c h / 0.22)",
        }}>
          <div className="uppercase-mono" style={{ marginBottom: 8, color: "var(--ok)" }}>
            Block standing
          </div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
            <span className="num" style={{ fontSize: 30, fontWeight: 600, color: "var(--ink)", letterSpacing: "-0.01em" }}>
              $14.20
            </span>
            <span style={{ fontSize: 12.5, color: "var(--ink-3)" }}>in store credits</span>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 10, marginTop: 16 }}>
            {[
              { k: "212", l: "bags saved" },
              { k: "$32", l: "given pantry" },
              { k: "9", l: "shared trips" },
            ].map(s => (
              <div key={s.l}>
                <div className="num" style={{ fontSize: 17, fontWeight: 600, color: "var(--ink)" }}>{s.k}</div>
                <div style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 2 }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Two-column layout: orders left, settings right (stack on mobile) */}
      <div style={{ display: "grid", gap: 28,
                    gridTemplateColumns: isMobile ? "1fr" : "1.4fr 1fr" }}>

        {/* LEFT — orders + addresses */}
        <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>

          {/* Recent orders */}
          <section>
            <SectionHeader eyebrow="Activity" title="Recent orders"
              action={<Btn variant="ghost" size="sm" iconRight={<Icons.Chevron size={14} stroke={2} />}>All orders</Btn>} />
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {orders.map(o => {
                const live = o.status === "Out for delivery" || o.status === "Pickup ready";
                return (
                  <div key={o.id} style={{
                    display: "flex", alignItems: "center", gap: 14,
                    padding: "14px 16px", borderRadius: 14,
                    background: "var(--surface)", border: "1px solid var(--line)",
                  }}>
                    <div style={{ width: 44, height: 44, borderRadius: 12,
                                  background: live ? "var(--ok-tint)" : "var(--surface-2)",
                                  color: live ? "var(--ok)" : "var(--ink-3)",
                                  display: "grid", placeItems: "center", flexShrink: 0 }}>
                      <Icons.Bag size={18} stroke={1.8} />
                    </div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ display: "flex", alignItems: "baseline", gap: 8, flexWrap: "wrap" }}>
                        <strong style={{ fontSize: 14, color: "var(--ink)" }}>{o.store}</strong>
                        <span style={{ fontSize: 12, color: "var(--ink-4)" }}>· {o.items} items · <span className="num">{money(o.total)}</span></span>
                      </div>
                      <div style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 2,
                                    display: "flex", gap: 8, flexWrap: "wrap" }}>
                        {live && <span style={{ color: "var(--ok)", fontWeight: 600 }}>● {o.status}{o.eta && ` · ${o.eta}`}</span>}
                        {!live && <span>{o.status}</span>}
                        <span style={{ color: "var(--ink-4)" }}>· {o.when}</span>
                        <span style={{ color: "var(--ink-4)", fontFamily: '"JetBrains Mono", monospace' }}>· #{o.id}</span>
                      </div>
                    </div>
                    {live ? (
                      <Btn size="sm" variant="primary">Track</Btn>
                    ) : (
                      <Btn size="sm" variant="secondary" icon={<Icons.Plus size={12} stroke={2} />}>Reorder</Btn>
                    )}
                  </div>
                );
              })}
            </div>
          </section>

          {/* Saved addresses */}
          <section>
            <SectionHeader eyebrow="Where to" title="Saved addresses"
              action={<Btn variant="ghost" size="sm" icon={<Icons.Plus size={13} stroke={2} />}>Add</Btn>} />
            <div style={{ display: "grid",
                          gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: 10 }}>
              {addresses.map(a => {
                const isDefault = defaultAddrId === a.id;
                const Icon = Icons[a.icon] || Icons.Pin;
                return (
                  <button key={a.id} className="btn-reset" onClick={() => setDefaultAddrId(a.id)}
                    style={{
                      textAlign: "left",
                      padding: "14px 16px", borderRadius: 14,
                      background: "var(--surface)",
                      border: `1.5px solid ${isDefault ? "var(--navy)" : "var(--line)"}`,
                      display: "flex", flexDirection: "column", gap: 8,
                      transition: "border-color 0.15s",
                    }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                      <span style={{ width: 32, height: 32, borderRadius: 10,
                                     background: "var(--navy-tint)", color: "var(--navy)",
                                     display: "grid", placeItems: "center" }}>
                        <Icon size={15} stroke={1.8} />
                      </span>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ fontSize: 13.5, fontWeight: 600, color: "var(--ink)" }}>{a.label}</div>
                        <div style={{ fontSize: 11.5, color: "var(--ink-4)" }}>{a.line2}</div>
                      </div>
                      {isDefault && <Pill tone="navy">Default</Pill>}
                    </div>
                    <div style={{ fontSize: 13, color: "var(--ink-2)", lineHeight: 1.4 }}>{a.line1}</div>
                    {a.note && (
                      <div style={{ fontSize: 11.5, color: "var(--ink-4)", borderLeft: "2px solid var(--line)",
                                    paddingLeft: 8 }}>
                        Note: {a.note}
                      </div>
                    )}
                  </button>
                );
              })}
            </div>
          </section>
        </div>

        {/* RIGHT — payment, preferences, support */}
        <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>

          {/* Payment methods */}
          <section>
            <SectionHeader eyebrow="Pay with" title="Payment methods"
              action={<Btn variant="ghost" size="sm" icon={<Icons.Plus size={13} stroke={2} />}>Add</Btn>} />
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {payments.map(p => {
                const isDefault = defaultPay === p.id;
                return (
                  <button key={p.id} className="btn-reset" onClick={() => setDefaultPay(p.id)}
                    style={{
                      display: "flex", alignItems: "center", gap: 12,
                      padding: "12px 14px", borderRadius: 12,
                      background: "var(--surface)",
                      border: `1.5px solid ${isDefault ? "var(--navy)" : "var(--line)"}`,
                      textAlign: "left",
                    }}>
                    <span style={{ width: 36, height: 26, borderRadius: 5,
                                   background: "var(--navy-tint)", color: "var(--navy)",
                                   fontSize: 10, fontWeight: 700, letterSpacing: "0.02em",
                                   display: "grid", placeItems: "center", flexShrink: 0,
                                   fontFamily: "inherit" }}>
                      {p.brand}
                    </span>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 13, color: "var(--ink)", fontWeight: 500 }}>
                        {p.brand} {p.last4 !== "—" && <>···· <span className="num">{p.last4}</span></>}
                      </div>
                      {p.exp && <div style={{ fontSize: 11, color: "var(--ink-4)" }}>Expires {p.exp}</div>}
                      {!p.exp && <div style={{ fontSize: 11, color: "var(--ink-4)" }}>For SNAP-eligible items</div>}
                    </div>
                    {isDefault && <Pill tone="navy">Default</Pill>}
                  </button>
                );
              })}
            </div>
          </section>

          {/* Preferences */}
          <section>
            <SectionHeader eyebrow="How you shop" title="Preferences" />
            <div style={{ display: "flex", flexDirection: "column",
                          background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 14, overflow: "hidden" }}>
              {[
                { k: "leaveAtDoor",    label: "Leave at door",                  hint: "Default for all deliveries" },
                { k: "plasticReturn",  label: "Return bags & containers",       hint: "Driver picks up empty totes" },
                { k: "roundUp",        label: "Round up for the LES pantry",    hint: "$0.18 average per order" },
                { k: "sundayDigest",   label: "Sunday digest from your block",  hint: "What's new at your shops" },
                { k: "notifyOpenLate", label: "Tell me when shops stay open late", hint: "Push only, no email" },
              ].map((row, i, arr) => (
                <button key={row.k} className="btn-reset" onClick={() => togglePref(row.k)}
                  style={{
                    display: "flex", alignItems: "center", gap: 12,
                    padding: "12px 14px",
                    borderBottom: i < arr.length - 1 ? "1px solid var(--line)" : "none",
                    textAlign: "left",
                  }}>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13.5, color: "var(--ink)", fontWeight: 500 }}>{row.label}</div>
                    <div style={{ fontSize: 11.5, color: "var(--ink-4)", marginTop: 1 }}>{row.hint}</div>
                  </div>
                  <Switch on={prefs[row.k]} />
                </button>
              ))}
            </div>
          </section>

          {/* Support / legal */}
          <section>
            <div style={{ display: "flex", flexDirection: "column",
                          background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 14, overflow: "hidden" }}>
              {[
                { label: "Help center", icon: "Sparkle" },
                { label: "Contact your last driver", icon: "Mic" },
                { label: "Privacy & data", icon: "User" },
                { label: "Terms", icon: "Receipt" },
              ].map((row, i, arr) => {
                const Icon = Icons[row.icon] || Icons.Chevron;
                return (
                  <button key={row.label} className="btn-reset"
                    style={{
                      display: "flex", alignItems: "center", gap: 12,
                      padding: "12px 14px",
                      borderBottom: i < arr.length - 1 ? "1px solid var(--line)" : "none",
                      textAlign: "left",
                    }}>
                    <Icon size={16} stroke={1.8} style={{ color: "var(--ink-3)", flexShrink: 0 }} />
                    <span style={{ flex: 1, fontSize: 13.5, color: "var(--ink)" }}>{row.label}</span>
                    <Icons.Chevron size={14} stroke={2} style={{ color: "var(--ink-4)" }} />
                  </button>
                );
              })}
            </div>
            <div style={{ fontSize: 11, color: "var(--ink-4)", textAlign: "center", marginTop: 14,
                          fontFamily: '"JetBrains Mono", monospace' }}>
              Opa v2.0 · build 4821 · made on Orchard St
            </div>
          </section>
        </div>
      </div>
    </div>
  );
}

// ─── Switch ────────────────────────────────────────────────────────────────
function Switch({ on }) {
  return (
    <span style={{
      width: 36, height: 22, borderRadius: 99,
      background: on ? "var(--navy)" : "var(--line)",
      position: "relative", flexShrink: 0,
      transition: "background 0.15s",
    }}>
      <span style={{
        position: "absolute", top: 2, left: on ? 16 : 2,
        width: 18, height: 18, borderRadius: 99,
        background: "#fff", boxShadow: "0 1px 3px rgba(0,0,0,0.2)",
        transition: "left 0.15s",
      }} />
    </span>
  );
}

// ─── AddressPicker ─────────────────────────────────────────────────────────
// Full-screen overlay. Triggered from the topbar address pill.
function AddressPicker({ open, current, onClose, onPick }) {
  const isMobile = useMedia("(max-width: 720px)");
  const [q, setQ] = React.useState("");
  const inputRef = React.useRef(null);

  React.useEffect(() => {
    if (open) setTimeout(() => inputRef.current?.focus(), 100);
    if (!open) setQ("");
  }, [open]);

  // Lock body scroll
  React.useEffect(() => {
    if (!open) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => { document.body.style.overflow = prev; };
  }, [open]);

  // ESC closes
  React.useEffect(() => {
    if (!open) return;
    const fn = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", fn);
    return () => window.removeEventListener("keydown", fn);
  }, [open, onClose]);

  if (!open) return null;

  const saved = [
    { id: "home",  label: "Home",   line: "98 Orchard St, Apt 4B · NY 10002",       eta: "Default · 28 stores within 0.5 mi", icon: "Pin",   tone: "navy"  },
    { id: "work",  label: "Studio", line: "315 W 36th St, Floor 9 · NY 10018",      eta: "12 stores within 0.5 mi",            icon: "Store", tone: "navy"  },
    { id: "moms",  label: "Mom's",  line: "1142 Carroll St · Brooklyn, NY 11225",   eta: "9 stores within 0.5 mi",             icon: "Heart", tone: "navy"  },
  ];
  const recent = [
    { line: "55 Hudson Yards · NY 10001",     last: "Tue" },
    { line: "Brooklyn Bridge Park, Pier 2",   last: "Sat — picnic order" },
    { line: "230 5th Ave Rooftop · NY 10001", last: "Last month" },
  ];

  // crude filter
  const matches = q.trim()
    ? [...saved, ...recent.map(r => ({ id: r.line, label: r.line.split(" · ")[0], line: r.line }))]
        .filter(s => (s.label + " " + s.line).toLowerCase().includes(q.toLowerCase()))
    : null;

  return (
    <div role="dialog" aria-modal="true"
      style={{
        position: "fixed", inset: 0, zIndex: 1000,
        background: "rgba(10, 31, 68, 0.40)",
        backdropFilter: "blur(8px)",
        WebkitBackdropFilter: "blur(8px)",
        display: "flex", alignItems: isMobile ? "stretch" : "flex-start",
        justifyContent: "center", padding: isMobile ? 0 : "60px 24px",
        animation: "fadeIn 0.12s ease",
      }}
      onClick={(e) => { if (e.currentTarget === e.target) onClose(); }}>

      <div style={{
        background: "var(--bg)", color: "var(--ink)",
        width: "100%", maxWidth: 640,
        borderRadius: isMobile ? 0 : 18,
        boxShadow: "0 24px 60px rgba(0,0,0,0.25)",
        border: "1px solid var(--line)",
        display: "flex", flexDirection: "column",
        maxHeight: isMobile ? "100vh" : "calc(100vh - 120px)",
        overflow: "hidden",
      }}>

        {/* Header / search */}
        <div style={{ padding: "16px 18px", borderBottom: "1px solid var(--line)" }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between",
                        marginBottom: 14 }}>
            <div className="serif" style={{ fontSize: 20, letterSpacing: "-0.01em" }}>Where are we delivering?</div>
            <button className="btn-reset" onClick={onClose}
              style={{ width: 32, height: 32, borderRadius: 99, display: "grid", placeItems: "center",
                       color: "var(--ink-3)", background: "var(--surface-2)" }}>
              <Icons.X size={14} stroke={2} />
            </button>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 10,
                        padding: "10px 14px",
                        background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 12 }}>
            <Icons.Search size={16} stroke={1.8} style={{ color: "var(--ink-3)" }} />
            <input ref={inputRef} value={q} onChange={(e) => setQ(e.target.value)}
              placeholder="Address, intersection, or landmark"
              style={{ flex: 1, height: 28, border: 0, background: "transparent", outline: 0,
                       color: "var(--ink)", fontSize: 14.5, fontFamily: "inherit" }} />
            {q && (
              <button className="btn-reset" onClick={() => setQ("")}
                style={{ color: "var(--ink-4)", fontSize: 11 }}>Clear</button>
            )}
          </div>
        </div>

        {/* Body — scrolls */}
        <div style={{ overflowY: "auto", padding: 18, display: "flex", flexDirection: "column", gap: 18 }}>
          {/* Use current location */}
          <button className="btn-reset" onClick={() => { onPick({ id: "current", label: "Current location" }); onClose(); }}
            style={{
              display: "flex", alignItems: "center", gap: 14,
              padding: "14px 16px", borderRadius: 14,
              background: "var(--navy-tint)", border: "1px solid transparent",
              textAlign: "left", color: "var(--ink)",
            }}>
            <span style={{ width: 38, height: 38, borderRadius: 99,
                           background: "var(--navy)", color: "#fff",
                           display: "grid", placeItems: "center", flexShrink: 0,
                           position: "relative" }}>
              <Icons.Pin size={16} stroke={1.8} />
              <span style={{ position: "absolute", inset: -3, borderRadius: 99,
                             border: "2px solid var(--navy)", opacity: 0.3,
                             animation: "pulseRing 1.6s ease-out infinite" }} />
            </span>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 600, color: "var(--navy)" }}>Use current location</div>
              <div style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 1 }}>~Lower East Side · accuracy ±15m</div>
            </div>
            <Icons.Chevron size={14} stroke={2} style={{ color: "var(--navy)" }} />
          </button>

          {!matches && (
            <>
              {/* Saved */}
              <div>
                <div className="uppercase-mono" style={{ marginBottom: 10 }}>Saved</div>
                <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                  {saved.map(s => {
                    const Icon = Icons[s.icon] || Icons.Pin;
                    const isCurrent = current === s.id;
                    return (
                      <button key={s.id} className="btn-reset"
                        onClick={() => { onPick(s); onClose(); }}
                        style={{
                          display: "flex", alignItems: "center", gap: 12,
                          padding: "12px 14px", borderRadius: 12,
                          background: "var(--surface)",
                          border: `1.5px solid ${isCurrent ? "var(--navy)" : "var(--line)"}`,
                          textAlign: "left",
                        }}>
                        <span style={{ width: 32, height: 32, borderRadius: 10,
                                       background: "var(--navy-tint)", color: "var(--navy)",
                                       display: "grid", placeItems: "center", flexShrink: 0 }}>
                          <Icon size={14} stroke={1.8} />
                        </span>
                        <div style={{ flex: 1, minWidth: 0 }}>
                          <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
                            <strong style={{ fontSize: 13.5, color: "var(--ink)" }}>{s.label}</strong>
                            {isCurrent && <Pill tone="navy">Current</Pill>}
                          </div>
                          <div style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 2,
                                        overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{s.line}</div>
                          <div style={{ fontSize: 11, color: "var(--ink-4)", marginTop: 2 }}>{s.eta}</div>
                        </div>
                        <Icons.Chevron size={14} stroke={2} style={{ color: "var(--ink-4)" }} />
                      </button>
                    );
                  })}
                </div>
              </div>

              {/* Recent */}
              <div>
                <div className="uppercase-mono" style={{ marginBottom: 10 }}>Recent</div>
                <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                  {recent.map((r) => (
                    <button key={r.line} className="btn-reset"
                      onClick={() => { onPick({ id: r.line, label: r.line.split(" · ")[0], line: r.line }); onClose(); }}
                      style={{
                        display: "flex", alignItems: "center", gap: 12,
                        padding: "10px 12px", borderRadius: 10,
                        background: "transparent", textAlign: "left",
                      }}>
                      <Icons.Clock size={14} stroke={1.8} style={{ color: "var(--ink-4)", flexShrink: 0 }} />
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ fontSize: 13, color: "var(--ink-2)",
                                      overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.line}</div>
                        <div style={{ fontSize: 11, color: "var(--ink-4)" }}>{r.last}</div>
                      </div>
                    </button>
                  ))}
                </div>
              </div>

              {/* Schedule for later */}
              <div style={{
                display: "flex", alignItems: "center", gap: 12,
                padding: "12px 14px", borderRadius: 12,
                background: "var(--surface)", border: "1px dashed var(--line)",
              }}>
                <Icons.Clock size={16} stroke={1.8} style={{ color: "var(--ink-3)" }} />
                <div style={{ flex: 1, fontSize: 13, color: "var(--ink-2)" }}>
                  Need it later? <span style={{ color: "var(--ink-4)" }}>Tonight · Tomorrow · Pick a time</span>
                </div>
                <Icons.Chevron size={14} stroke={2} style={{ color: "var(--ink-4)" }} />
              </div>
            </>
          )}

          {matches && (
            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              <div className="uppercase-mono" style={{ marginBottom: 4 }}>{matches.length} matches</div>
              {matches.map(m => (
                <button key={m.id} className="btn-reset"
                  onClick={() => { onPick(m); onClose(); }}
                  style={{
                    display: "flex", alignItems: "center", gap: 12,
                    padding: "10px 12px", borderRadius: 10,
                    background: "var(--surface)", border: "1px solid var(--line)",
                    textAlign: "left",
                  }}>
                  <Icons.Pin size={14} stroke={1.8} style={{ color: "var(--ink-3)" }} />
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 500 }}>{m.label}</div>
                    <div style={{ fontSize: 11.5, color: "var(--ink-4)" }}>{m.line}</div>
                  </div>
                </button>
              ))}
              {matches.length === 0 && (
                <div style={{ padding: 20, fontSize: 13, color: "var(--ink-3)" }}>
                  No saved or recent address matches "{q}". <button className="btn-reset"
                    style={{ color: "var(--navy)", fontWeight: 600 }}>Add it</button>.
                </div>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AccountScreen, AddressPicker, Switch });