/* Tickets wallet, Profile, Notifications, AI Assistant, Organiser, Create event */

const { useState, useEffect, useRef } = React;

// ─── TICKETS WALLET ───────────────────────────────────────────────
const TicketsScreen = ({ tweaks, isMobile, nav }) => {
  const currency = tweaks.currency || "INR";
  const [activeTab, setActiveTab] = useState("upcoming");
  const upcoming = DATA.events.slice(0,3).map(e => ({...e, qty: e.id==="e1"?2:1, code: e.id.toUpperCase()+"-"+(1000+e.id.charCodeAt(0)) }));
  const past = DATA.events.slice(8,11);

  const QR = ({ size=160, seed=1 }) => (
    <svg viewBox="0 0 21 21" style={{ width:size, height:size, imageRendering:"pixelated" }}>
      <rect width="21" height="21" fill="#fff" />
      {/* corner squares */}
      {[[0,0],[14,0],[0,14]].map(([x,y]) => (
        <g key={`${x}-${y}`}>
          <rect x={x} y={y} width="7" height="7" fill="#000" />
          <rect x={x+1} y={y+1} width="5" height="5" fill="#fff" />
          <rect x={x+2} y={y+2} width="3" height="3" fill="#000" />
        </g>
      ))}
      {/* random fill */}
      {Array.from({length: 220}).map((_, i) => {
        const x = (i * 7 + seed*3) % 21;
        const y = ((i*11 + seed*5) % 21);
        if ((x<7&&y<7)||(x>13&&y<7)||(x<7&&y>13)) return null;
        return <rect key={i} x={x} y={y} width="1" height="1" fill="#000" />;
      })}
    </svg>
  );

  return (
    <div style={{ padding: isMobile?"16px 0 100px":"28px", maxWidth:900, margin:"0 auto" }}>
      <div style={{ padding: isMobile?"0 18px 20px":"0 0 20px" }}>
        <div className="t-eyebrow" style={{ marginBottom:8 }}>Wallet</div>
        <h1 className="t-display" style={{ fontSize: isMobile?28:38 }}>Your tickets</h1>
      </div>
      <div style={{ display:"flex", gap:4, padding: isMobile?"0 18px":0, marginBottom:24, borderBottom:"1px solid var(--line)" }}>
        {[{id:"upcoming",l:`Upcoming (${upcoming.length})`},{id:"past",l:`Past (${past.length})`}].map(t => (
          <button key={t.id} onClick={()=>setActiveTab(t.id)} style={{ padding:"10px 16px", borderBottom: activeTab===t.id?"2px solid var(--primary)":"2px solid transparent", color: activeTab===t.id?"var(--ink)":"var(--ink-3)", fontSize:13, fontWeight:600, marginBottom:-1, whiteSpace:"nowrap" }}>{t.l}</button>
        ))}
      </div>

      {activeTab === "upcoming" ? (
        <div style={{ padding: isMobile?"0 18px":0, display:"flex", flexDirection:"column", gap:14 }}>
          {upcoming.map((t, idx) => (
            <div key={t.id} className="card" style={{ overflow:"hidden", display: isMobile?"block":"flex", position:"relative" }}>
              {/* Image strip */}
              <div style={{ width: isMobile?"100%":160, height: isMobile?120:"auto", flexShrink:0, position:"relative" }}>
                <img src={t.image} alt="" style={{ width:"100%", height: isMobile?"100%":"100%", objectFit:"cover" }} />
                {idx === 0 && (
                  <div style={{ position:"absolute", top:10, left:10, padding:"4px 10px", background:"#10b981", color:"#fff", borderRadius:999, fontSize:10, fontWeight:700, fontFamily:"var(--font-mono)", textTransform:"uppercase", letterSpacing:"0.08em" }}>● Tonight</div>
                )}
              </div>
              {/* Stub line */}
              <div style={{ position:"absolute", top: isMobile?120:0, bottom: isMobile?"auto":0, left: isMobile?0:160, right: isMobile?0:"auto", width: isMobile?"100%":1, height: isMobile?1:"auto", borderTop: isMobile?"2px dashed var(--line-strong)":"none", borderLeft: isMobile?"none":"2px dashed var(--line-strong)" }} />
              {/* Content */}
              <div style={{ flex:1, padding:18 }}>
                <div className="t-eyebrow" style={{ marginBottom:6 }}>{t.tag}</div>
                <h3 className="t-display" style={{ fontSize:17, marginBottom:10 }}>{t.title}</h3>
                <div style={{ display:"grid", gridTemplateColumns:"repeat(2,1fr)", gap:10, fontSize:11, marginBottom:14 }}>
                  <div><div className="t-eyebrow" style={{ fontSize:9, marginBottom:2 }}>When</div><div className="t-mono" style={{ fontWeight:600 }}>{t.date} · {t.time}</div></div>
                  <div><div className="t-eyebrow" style={{ fontSize:9, marginBottom:2 }}>Where</div><div style={{ fontWeight:600 }}>{t.venue}</div></div>
                  <div><div className="t-eyebrow" style={{ fontSize:9, marginBottom:2 }}>Qty</div><div className="t-mono" style={{ fontWeight:600 }}>{t.qty} ticket{t.qty>1?"s":""}</div></div>
                  <div><div className="t-eyebrow" style={{ fontSize:9, marginBottom:2 }}>Code</div><div className="t-mono" style={{ fontWeight:600 }}>{t.code}</div></div>
                </div>
                <div style={{ display:"flex", gap:8 }}>
                  <button className="btn btn-primary" style={{ padding:"7px 14px", fontSize:12, flex:1 }}>Show QR</button>
                  <button className="btn btn-ghost" style={{ padding:"7px 12px", fontSize:12 }}><I.share cls="ico-sm" />Share</button>
                  <button className="btn btn-ghost" style={{ padding:"7px 12px", fontSize:12 }}><I.calendar cls="ico-sm" /></button>
                </div>
              </div>
            </div>
          ))}

          {/* Featured ticket — large QR */}
          <div className="card" style={{ padding:0, overflow:"hidden", marginTop:6 }}>
            <div style={{ background:"linear-gradient(135deg, var(--primary), color-mix(in oklab, var(--primary) 60%, #000))", padding:"18px 18px 14px", color:"var(--ink-on-primary)" }}>
              <div className="t-mono" style={{ fontSize:10, opacity:0.7, textTransform:"uppercase", letterSpacing:"0.1em", marginBottom:4 }}>● Tonight · Use this to enter</div>
              <h3 className="t-display" style={{ fontSize:20 }}>{upcoming[0].title}</h3>
            </div>
            <div style={{ padding: isMobile?"24px 18px":"24px", display:"flex", gap:24, alignItems:"center", flexDirection: isMobile?"column":"row" }}>
              <div style={{ background:"#fff", padding:14, borderRadius:"var(--radius-sm)", flexShrink:0 }}>
                <QR size={isMobile?180:160} seed={3} />
              </div>
              <div style={{ flex:1 }}>
                <div className="t-eyebrow" style={{ marginBottom:8 }}>Booking ref</div>
                <div className="t-mono" style={{ fontSize:18, fontWeight:600, marginBottom:14 }}>{upcoming[0].code}</div>
                <div style={{ display:"grid", gridTemplateColumns:"repeat(2,1fr)", gap:10, fontSize:12, color:"var(--ink-2)" }}>
                  <div><div className="t-eyebrow" style={{ fontSize:9, marginBottom:2 }}>Gate opens</div><div>{upcoming[0].time === "8 PM" ? "7 PM" : "6 PM"}</div></div>
                  <div><div className="t-eyebrow" style={{ fontSize:9, marginBottom:2 }}>Seat</div><div>GA · 2 × Standard</div></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      ) : (
        <div style={{ padding: isMobile?"0 18px":0, display:"flex", flexDirection:"column", gap:8 }}>
          {past.map(p => (
            <div key={p.id} style={{ padding:"12px 0", borderBottom:"1px solid var(--line)", display:"flex", gap:14, opacity:0.7 }}>
              <img src={p.image} alt="" style={{ width:60, height:60, borderRadius:"var(--radius-sm)", objectFit:"cover", filter:"saturate(0.4)" }} />
              <div style={{ flex:1 }}>
                <div style={{ fontSize:13, fontWeight:600 }}>{p.title}</div>
                <div className="t-mono" style={{ fontSize:11, color:"var(--ink-3)", marginTop:3 }}>{p.date} · attended</div>
              </div>
              <button style={{ fontSize:11, color:"var(--primary)", fontWeight:600 }}>Rate ★</button>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

// ─── PROFILE ─────────────────────────────────────────────────────
const ProfileScreen = ({ tweaks, isMobile, nav }) => {
  const stats = [
    { v:"24", l:"Events" },
    { v:"₹18.4k", l:"Spent" },
    { v:"7", l:"Cities" },
    { v:"12", l:"Following" },
  ];

  return (
    <div style={{ padding: isMobile?"0 0 100px":"0", maxWidth:900, margin:"0 auto" }}>
      {/* Header */}
      <div style={{ padding: isMobile?"24px 18px":"40px 28px 24px", background:"linear-gradient(135deg, color-mix(in oklab, var(--primary) 20%, var(--surface)), var(--surface))", marginBottom:24 }}>
        <div style={{ display:"flex", alignItems:"center", gap:18 }}>
          <div style={{ width:74, height:74, borderRadius:"50%", background:"linear-gradient(135deg, var(--primary), color-mix(in oklab, var(--primary) 60%, #000))", display:"flex", alignItems:"center", justifyContent:"center", color:"#fff", fontSize:30, fontWeight:700 }}>A</div>
          <div style={{ flex:1 }}>
            <h1 className="t-display" style={{ fontSize: isMobile?22:30 }}>Aarav K.</h1>
            <div style={{ fontSize:12, color:"var(--ink-2)", marginTop:4 }}>Mumbai · Joined Jun 2024</div>
            <div style={{ display:"flex", gap:6, marginTop:8 }}>
              <span style={{ padding:"3px 10px", background:"var(--bg)", border:"1px solid var(--line)", borderRadius:999, fontSize:10, fontFamily:"var(--font-mono)", textTransform:"uppercase", letterSpacing:"0.08em" }}>● Music head</span>
              <span style={{ padding:"3px 10px", background:"var(--bg)", border:"1px solid var(--line)", borderRadius:999, fontSize:10, fontFamily:"var(--font-mono)", textTransform:"uppercase", letterSpacing:"0.08em" }}>Foodie</span>
            </div>
          </div>
          <button className="btn btn-ghost" style={{ padding:"7px 14px", fontSize:12 }}>Edit</button>
        </div>
        {/* Stats */}
        <div style={{ display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:8, marginTop:24 }}>
          {stats.map(s => (
            <div key={s.l} style={{ padding:"12px 8px", background:"var(--bg)", border:"1px solid var(--line)", borderRadius:"var(--radius-sm)", textAlign:"center" }}>
              <div className="t-display" style={{ fontSize: isMobile?20:24 }}>{s.v}</div>
              <div className="t-eyebrow" style={{ fontSize:9, marginTop:2 }}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Interests */}
      <div style={{ padding: isMobile?"0 18px":"0 28px", marginBottom:24 }}>
        <h2 className="t-display" style={{ fontSize:16, marginBottom:10 }}>Interests</h2>
        <div style={{ display:"flex", flexWrap:"wrap", gap:8 }}>
          {["Indie music","Standup comedy","Jazz","Photography","Football","Tech talks","Whiskey tastings","Art galleries"].map((t,i) => (
            <button key={t} style={{ padding:"6px 12px", background: i<5?"var(--ink)":"var(--surface)", color: i<5?"var(--bg)":"var(--ink-2)", border:`1px solid ${i<5?"var(--ink)":"var(--line)"}`, borderRadius:999, fontSize:12 }}>{i<5?"✓ ":"+ "}{t}</button>
          ))}
        </div>
      </div>

      {/* Saved */}
      <div style={{ padding: isMobile?"0 18px":"0 28px", marginBottom:24 }}>
        <div style={{ display:"flex", justifyContent:"space-between", alignItems:"baseline", marginBottom:12 }}>
          <h2 className="t-display" style={{ fontSize:16 }}>Saved (8)</h2>
          <button className="t-mono" style={{ fontSize:11, color:"var(--ink-3)" }}>SEE ALL →</button>
        </div>
        <div style={{ display:"grid", gridTemplateColumns: isMobile?"repeat(2,1fr)":"repeat(4,1fr)", gap:10 }}>
          {DATA.events.slice(4,8).map(e => (
            <div key={e.id} onClick={()=>nav("detail", e.id)} style={{ cursor:"pointer", aspectRatio:"3/4", borderRadius:"var(--radius)", overflow:"hidden", position:"relative" }}>
              <img src={e.image} alt="" style={{ width:"100%", height:"100%", objectFit:"cover" }} />
              <div style={{ position:"absolute", inset:0, background:"linear-gradient(to top, rgba(0,0,0,0.85), transparent 50%)", padding:"0 10px 10px", display:"flex", flexDirection:"column", justifyContent:"flex-end", color:"#fff" }}>
                <div style={{ fontSize:11, fontWeight:600, lineHeight:1.2 }}>{e.title}</div>
                <div className="t-mono" style={{ fontSize:9, opacity:0.7, marginTop:2 }}>{e.date}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Settings */}
      <div style={{ padding: isMobile?"0 18px":"0 28px" }}>
        <h2 className="t-display" style={{ fontSize:16, marginBottom:10 }}>Settings</h2>
        <div className="card">
          {[
            { l:"Notifications", s:"Reminders, new events", icon:"bell" },
            { l:"Payment methods", s:"3 saved", icon:"ticket" },
            { l:"Privacy", s:"Friends, location", icon:"users" },
            { l:"Help & feedback", s:"FAQ, contact", icon:"sparkle" },
          ].map((s,i) => {
            const Icon = I[s.icon];
            return (
              <button key={s.l} style={{ width:"100%", padding:"14px 16px", display:"flex", alignItems:"center", gap:14, borderBottom: i<3?"1px solid var(--line)":"none", color:"var(--ink)", textAlign:"left" }}>
                <div style={{ width:32, height:32, borderRadius:8, background:"var(--bg)", display:"flex", alignItems:"center", justifyContent:"center", color:"var(--primary)" }}><Icon cls="ico-sm" /></div>
                <div style={{ flex:1 }}>
                  <div style={{ fontSize:13, fontWeight:600 }}>{s.l}</div>
                  <div style={{ fontSize:11, color:"var(--ink-3)", marginTop:2 }}>{s.s}</div>
                </div>
                <span style={{ color:"var(--ink-3)" }}>›</span>
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
};

// ─── AI ASSISTANT (modal-style screen) ──────────────────────────
const AIScreen = ({ tweaks, isMobile, nav }) => {
  const currency = tweaks.currency || "INR";
  const [messages, setMessages] = useState([
    { role:"ai", text:"Hi Aarav 👋 What's the vibe? Give me a night, a budget, or just say 'surprise me'." },
  ]);
  const [input, setInput] = useState("");
  const [loading, setLoading] = useState(false);
  const [recs, setRecs] = useState([]);
  const endRef = useRef(null);

  useEffect(() => { endRef.current?.scrollTo(0, 9999); }, [messages, loading]);

  const send = async (text) => {
    if (!text.trim()) return;
    setMessages(m => [...m, { role:"user", text }]);
    setInput("");
    setLoading(true);

    // Pick fake recs based on keywords
    const lower = text.toLowerCase();
    let picked = DATA.events.slice(0,3);
    if (lower.includes("comedy") || lower.includes("funny")) picked = DATA.events.filter(e=>e.category==="Comedy").slice(0,3);
    else if (lower.includes("music") || lower.includes("gig") || lower.includes("concert")) picked = DATA.events.filter(e=>e.category==="Music").slice(0,3);
    else if (lower.includes("free")) picked = DATA.events.filter(e=>e.price===0).slice(0,3);
    else if (lower.includes("saturday") || lower.includes("weekend")) picked = DATA.events.filter(e=>e.date.includes("14")||e.date.includes("15")).slice(0,3);

    // Simulated AI response
    setTimeout(() => {
      setMessages(m => [...m, { role:"ai", text:`Here's a plan based on what you said. Three picks tonight in ${DATA.city} that fit your style:` }]);
      setRecs(picked);
      setLoading(false);
    }, 900);
  };

  const suggestions = [
    "What's good Saturday night?",
    "Plan a date — under ₹2000",
    "Free things to do this weekend",
    "Comedy + dinner combo",
    "Quiet vibes, jazz or acoustic",
  ];

  return (
    <div style={{ display:"flex", flexDirection:"column", height: isMobile?"100%":"calc(100vh - 64px)" }}>
      {/* Header */}
      <div style={{ padding: isMobile?"14px 18px":"20px 28px", borderBottom:"1px solid var(--line)", display:"flex", alignItems:"center", gap:12 }}>
        <button onClick={()=>nav("home")} style={{ width:32, height:32, color:"var(--ink-2)" }}>←</button>
        <div style={{ flex:1 }}>
          <div style={{ display:"flex", alignItems:"center", gap:8 }}>
            <div style={{ width:8, height:8, borderRadius:"50%", background:"#10b981" }} />
            <h1 className="t-display" style={{ fontSize:18 }}>AI Concierge</h1>
          </div>
          <div className="t-mono" style={{ fontSize:10, color:"var(--ink-3)", marginTop:2 }}>Tell me what you're up for, I'll plan it.</div>
        </div>
      </div>

      {/* Messages */}
      <div ref={endRef} style={{ flex:1, overflow:"auto", padding: isMobile?"18px 18px 16px":"24px 28px", maxWidth:780, margin:"0 auto", width:"100%" }}>
        {messages.map((m, i) => (
          <div key={i} style={{ display:"flex", justifyContent: m.role==="user"?"flex-end":"flex-start", marginBottom:14 }}>
            <div style={{
              maxWidth:"75%",
              padding:"10px 14px",
              background: m.role==="user" ? "var(--primary)" : "var(--surface)",
              color: m.role==="user" ? "var(--ink-on-primary)" : "var(--ink)",
              borderRadius:18,
              borderBottomRightRadius: m.role==="user"?4:18,
              borderBottomLeftRadius: m.role==="user"?18:4,
              fontSize:14, lineHeight:1.5,
            }}>{m.text}</div>
          </div>
        ))}
        {loading && (
          <div style={{ display:"flex", gap:6, padding:"10px 14px", background:"var(--surface)", width:"fit-content", borderRadius:18, marginBottom:14 }}>
            {[0,1,2].map(i => <div key={i} style={{ width:6, height:6, borderRadius:"50%", background:"var(--ink-3)", animation:`bounce 1.4s ease-in-out ${i*0.16}s infinite` }} />)}
          </div>
        )}

        {/* Recommendations */}
        {recs.length > 0 && !loading && (
          <div style={{ marginTop:8, marginBottom:24 }}>
            <div style={{ display:"grid", gridTemplateColumns: isMobile?"1fr":"repeat(3,1fr)", gap:10 }}>
              {recs.map((e, i) => (
                <div key={e.id} onClick={()=>nav("detail", e.id)} className="card" style={{ cursor:"pointer", padding:0, overflow:"hidden" }}>
                  <div style={{ position:"relative", aspectRatio:"4/3" }}>
                    <img src={e.image} alt="" style={{ width:"100%", height:"100%", objectFit:"cover" }} />
                    <div style={{ position:"absolute", top:8, left:8, padding:"3px 9px", background:"var(--bg)", borderRadius:999, fontSize:10, fontFamily:"var(--font-mono)", fontWeight:700 }}>#{i+1} pick</div>
                  </div>
                  <div style={{ padding:12 }}>
                    <div style={{ fontSize:13, fontWeight:600, marginBottom:6 }}>{e.title}</div>
                    <div className="t-mono" style={{ fontSize:11, color:"var(--ink-3)" }}>{e.date} · {fmtPrice(e.price, currency)}</div>
                  </div>
                </div>
              ))}
            </div>
            <button className="btn btn-primary" style={{ marginTop:14, padding:"10px 16px", fontSize:13 }}>Book all 3 as group plan →</button>
          </div>
        )}

        {/* Suggestions */}
        {messages.length === 1 && (
          <div style={{ marginTop:24 }}>
            <div className="t-eyebrow" style={{ marginBottom:10 }}>Try asking</div>
            <div style={{ display:"flex", flexDirection:"column", gap:8 }}>
              {suggestions.map(s => (
                <button key={s} onClick={()=>send(s)} style={{ padding:"12px 14px", textAlign:"left", background:"var(--surface)", border:"1px solid var(--line)", borderRadius:"var(--radius)", color:"var(--ink)", fontSize:13, transition:"all var(--dur)" }}
                  onMouseEnter={e=>{e.currentTarget.style.borderColor="var(--primary)"}}
                  onMouseLeave={e=>{e.currentTarget.style.borderColor="var(--line)"}}
                >
                  <I.sparkle cls="ico-sm" /> {s}
                </button>
              ))}
            </div>
          </div>
        )}
      </div>

      {/* Input */}
      <div style={{ padding:"12px 18px", borderTop:"1px solid var(--line)", maxWidth:780, margin:"0 auto", width:"100%", display:"flex", gap:8 }}>
        <input value={input} onChange={e=>setInput(e.target.value)} onKeyDown={e=>e.key==="Enter"&&send(input)} placeholder="Tell me your vibe…" style={{ flex:1, padding:"12px 14px", background:"var(--surface)", border:"1px solid var(--line)", borderRadius:999, color:"var(--ink)", fontSize:14, outline:"none", fontFamily:"inherit" }} />
        <button onClick={()=>send(input)} className="btn btn-primary" style={{ padding:"12px 18px", borderRadius:999 }}>↑</button>
      </div>
    </div>
  );
};

// ─── NOTIFICATIONS ───────────────────────────────────────────────
const NotificationsScreen = ({ tweaks, isMobile, nav }) => {
  const items = [
    { type:"reminder", icon:"bell", t:"Tonight: Anoushka Shankar at NCPA", s:"Doors at 7 PM · Show your QR at gate", time:"2h ago", urgent:true },
    { type:"social", icon:"users", t:"Ananya is going to The Daily Standup", s:"4 of your friends are interested · 14 Jun", time:"5h ago" },
    { type:"new", icon:"sparkle", t:"New: BLOT Wknd at antiSOCIAL", s:"Matches your 'electronic' interest · 21 Jun", time:"1d ago" },
    { type:"price", icon:"bolt", t:"Lower Parel Lit Fest — selling fast", s:"Last 12 tickets · You saved this", time:"1d ago" },
    { type:"reminder", icon:"calendar", t:"Reminder: Add Sunday market to calendar", s:"15 Jun · 10 AM at Bandra", time:"2d ago" },
    { type:"social", icon:"heart", t:"Rohan saved 3 events you might like", s:"Tap to see picks", time:"3d ago" },
  ];

  return (
    <div style={{ padding: isMobile?"0 0 100px":"28px", maxWidth:740, margin:"0 auto" }}>
      <div style={{ padding: isMobile?"24px 18px 16px":"0 0 20px", display:"flex", justifyContent:"space-between", alignItems:"flex-end" }}>
        <div>
          <div className="t-eyebrow" style={{ marginBottom:6 }}>Inbox</div>
          <h1 className="t-display" style={{ fontSize: isMobile?28:38 }}>Notifications</h1>
        </div>
        <button className="t-mono" style={{ fontSize:10, color:"var(--ink-3)", textTransform:"uppercase", letterSpacing:"0.1em" }}>Mark all read</button>
      </div>

      <div style={{ padding: isMobile?"0 18px":0, display:"flex", flexDirection:"column" }}>
        {items.map((n, i) => {
          const Icon = I[n.icon];
          return (
            <div key={i} style={{ padding:"14px 0", display:"flex", gap:14, borderBottom: i<items.length-1?"1px solid var(--line)":"none" }}>
              <div style={{ width:38, height:38, borderRadius:"50%", background: n.urgent?"color-mix(in oklab, var(--primary) 14%, var(--surface))":"var(--surface)", color: n.urgent?"var(--primary)":"var(--ink-2)", display:"flex", alignItems:"center", justifyContent:"center", flexShrink:0, position:"relative" }}>
                <Icon cls="ico-sm" />
                {n.urgent && <span style={{ position:"absolute", top:-2, right:-2, width:10, height:10, borderRadius:"50%", background:"var(--primary)", border:"2px solid var(--bg)" }} />}
              </div>
              <div style={{ flex:1 }}>
                <div style={{ fontSize:13, fontWeight:600, marginBottom:3 }}>{n.t}</div>
                <div style={{ fontSize:12, color:"var(--ink-2)", marginBottom:4 }}>{n.s}</div>
                <div className="t-mono" style={{ fontSize:10, color:"var(--ink-3)" }}>{n.time}</div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

window.TicketsScreen = TicketsScreen;
window.ProfileScreen = ProfileScreen;
window.AIScreen = AIScreen;
window.NotificationsScreen = NotificationsScreen;