@tribe-nest/forge 1.13.0

package/src/ui/styled/EventTickets.tsx

@@ -0,0 +1,548 @@
+import { type CSSProperties, type ReactNode, useEffect, useMemo, useState } from "react";
+import { AlertCircle, Clock, X } from "lucide-react";
+import type { IEvent, ITicket } from "../../types/models";
+import { useEventCheckout } from "../headless/event/useEventCheckout";
+import { useForgeTheme, type ForgeTheme } from "../theme/ForgeThemeProvider";
+import { useAmountFormatter } from "../format/useFormatCurrency";
+import { PriceDisplay, summarizeTaxQuote } from "../format/PriceDisplay";
+import { usePricesIncludeTax } from "../../data/queries/useWebsite";
+import { Loading } from "./Loading";
+import { usePaymentRenderer, type PaymentRenderProps } from "../payment/ForgePaymentProvider";
+import { buttonStyle } from "./Button";
+import {
+  DialogRoot,
+  DialogTrigger,
+  DialogPortal,
+  DialogOverlay,
+  DialogContent,
+  DialogTitle,
+  DialogClose,
+} from "../headless/dialog";
+
+export interface EventTicketsProps {
+  /** Event slug (resolves the event + drives the purchase flow). */
+  slug?: string;
+  /** Trigger button label. */
+  triggerText?: string;
+  /** Format a numeric amount for display. */
+  formatAmount?: (amount: number) => string;
+  /** Optional payment renderer — falls back to a registered <ForgePaymentProvider>. */
+  renderPayment?: (props: PaymentRenderProps) => ReactNode;
+  /** Stripe return URL for a PAID purchase. Default `/i/events/:slug/finalise`. */
+  finalisePath?: (slug: string, orderId: string) => string;
+  /** Host-owned navigation on FREE completion (e.g. router navigate). */
+  onComplete?: (info: { slug: string; orderId: string }) => void;
+}
+
+/** Append an alpha to a 6-digit hex color (mirrors frontend-shared addAlphaToHexCode). */
+const a = (hex: string, alpha: number) => hex + Math.round(alpha * 255).toString(16).padStart(2, "0");
+
+/**
+ * Themed event ticket purchase — a "Buy tickets" trigger + modal running the
+ * three-step flow (tickets → details → payment) on `useEventCheckout`. Port of
+ * the client app's EventTickets modal, styled from `ForgeThemeProvider`.
+ */
+export function EventTickets({
+  slug,
+  triggerText = "Buy tickets",
+  formatAmount,
+  renderPayment,
+  finalisePath,
+  onComplete,
+}: EventTicketsProps) {
+  const theme = useForgeTheme();
+  const registered = usePaymentRenderer();
+  const fmt = useAmountFormatter(formatAmount);
+  const c = useEventCheckout(slug, { finalisePath, onComplete });
+  const renderPay = renderPayment ?? registered ?? undefined;
+
+  const [open, setOpen] = useState(false);
+
+  const tryClose = (next: boolean) => {
+    if (!next && c.step !== "tickets" && typeof window !== "undefined") {
+      if (!window.confirm("Are you sure you want to leave checkout?")) return;
+    }
+    setOpen(next);
+  };
+
+  return (
+    <DialogRoot open={open} onOpenChange={tryClose}>
+      <DialogTrigger asChild>
+        <button style={triggerButtonStyle(theme)}>{triggerText}</button>
+      </DialogTrigger>
+      <DialogPortal>
+        <DialogOverlay style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.5)", zIndex: 50 }} />
+        <DialogContent
+          style={{
+            position: "fixed",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            width: "min(640px, calc(100vw - 24px))",
+            maxHeight: "88vh",
+            overflowY: "auto",
+            background: theme.colors.background,
+            color: theme.colors.text,
+            borderRadius: theme.cornerRadius,
+            padding: 24,
+            zIndex: 51,
+            fontFamily: theme.fontFamily,
+          }}
+          aria-describedby={undefined}
+        >
+          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
+            <DialogTitle style={{ fontSize: 18, fontWeight: 700, margin: 0 }}>{c.event?.title ?? "Tickets"}</DialogTitle>
+            <DialogClose asChild>
+              <button aria-label="Close" style={closeButtonStyle(theme)}>
+                <X size={18} />
+              </button>
+            </DialogClose>
+          </div>
+
+          {c.isLoading && <Loading />}
+          {!c.isLoading && !c.event && <p style={{ marginTop: 8 }}>Event not found.</p>}
+          {c.event && <EventTicketsBody c={c} event={c.event} fmt={fmt} renderPayment={renderPay} />}
+        </DialogContent>
+      </DialogPortal>
+    </DialogRoot>
+  );
+}
+
+type Checkout = ReturnType<typeof useEventCheckout>;
+
+function EventTicketsBody({
+  c,
+  event,
+  fmt,
+  renderPayment,
+}: {
+  c: Checkout;
+  event: IEvent;
+  fmt: (n: number) => string;
+  renderPayment?: (props: PaymentRenderProps) => ReactNode;
+}) {
+  const stepIndex = c.step === "tickets" ? 0 : c.step === "details" ? 1 : 2;
+  return (
+    <div style={{ width: "100%" }}>
+      <Progress current={stepIndex} />
+      {c.step === "tickets" && <TicketStep c={c} event={event} fmt={fmt} />}
+      {c.step === "details" && <DetailsStep c={c} event={event} fmt={fmt} />}
+      {c.step === "payment" && <PaymentStep c={c} fmt={fmt} renderPayment={renderPayment} />}
+    </div>
+  );
+}
+
+// ── Progress indicator (3 numbered steps) ────────────────────────────────────
+function Progress({ current }: { current: number }) {
+  const theme = useForgeTheme();
+  const steps = [0, 1, 2];
+  return (
+    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 24 }}>
+      {steps.map((s, index) => (
+        <div key={s} style={{ display: "flex", alignItems: "center", flex: index < steps.length - 1 ? 1 : "0 0 auto" }}>
+          <div
+            style={{
+              width: 32,
+              height: 32,
+              borderRadius: "9999px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: 14,
+              fontWeight: 600,
+              border: `1px solid ${index <= current ? theme.colors.primary : a(theme.colors.primary, 0.25)}`,
+              background: index <= current ? theme.colors.primary : "transparent",
+              color: index <= current ? "#fff" : theme.colors.primary,
+            }}
+          >
+            {index + 1}
+          </div>
+          {index < steps.length - 1 && (
+            <div
+              style={{
+                flex: 1,
+                height: 2,
+                margin: "0 16px",
+                background: index < current ? theme.colors.primary : a(theme.colors.primary, 0.13),
+              }}
+            />
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ── Step 1: ticket selection (with live expiry/urgency + sold-out/max) ────────
+function TicketStep({ c, event, fmt }: { c: Checkout; event: IEvent; fmt: (n: number) => string }) {
+  const theme = useForgeTheme();
+  // Inclusive stores caption ticket prices as tax-inclusive (display only).
+  const pricesIncludeTax = usePricesIncludeTax();
+  const [now, setNow] = useState(() => Date.now());
+
+  useEffect(() => {
+    const id = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(id);
+  }, []);
+
+  const urgency = (expiresAt?: string) => {
+    if (!expiresAt) return null;
+    const diff = new Date(expiresAt).getTime() - now;
+    if (diff <= 0) return { expired: true, color: "#ef4444", alert: true, message: "This ticket has expired" };
+    const hours = Math.floor(diff / 3_600_000);
+    const minutes = Math.floor((diff % 3_600_000) / 60_000);
+    const totalMinutes = hours * 60 + minutes;
+    if (totalMinutes < 30) return { expired: false, color: "#dc2626", alert: true, message: `⚠️ Only ${minutes} minute${minutes !== 1 ? "s" : ""} left!` };
+    if (totalMinutes < 60) return { expired: false, color: "#f59e0b", alert: true, message: "⏰ Less than 1 hour remaining!" };
+    if (hours < 6) return { expired: false, color: "#f97316", alert: false, message: `⏰ Expires in ${hours} hour${hours !== 1 ? "s" : ""}!` };
+    if (hours < 24) return { expired: false, color: theme.colors.primary, alert: false, message: `Expires in ${hours} hours` };
+    const days = Math.floor(hours / 24);
+    return { expired: false, color: theme.colors.primary, alert: false, message: `Expires in ${days} day${days !== 1 ? "s" : ""}` };
+  };
+
+  const setQty = (ticket: ITicket, qty: number) => {
+    const remaining = ticket.quantity - ticket.sold;
+    const maxAllowed = Math.min(remaining, ticket.maxPerPerson ?? remaining);
+    c.setTicketQty(ticket.id, Math.max(0, Math.min(qty, maxAllowed)));
+  };
+
+  return (
+    <div>
+      <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 16 }}>Select Tickets</h2>
+      <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+        {event.tickets.length === 0 && <p style={{ opacity: 0.7 }}>No tickets available.</p>}
+        {event.tickets.map((ticket) => {
+          const selectedQty = c.selectedTickets[ticket.id] ?? 0;
+          const remaining = ticket.quantity - ticket.sold;
+          const maxAllowed = Math.min(remaining, ticket.maxPerPerson ?? remaining);
+          const isSoldOut = remaining <= 0;
+          const u = urgency(ticket.expiresAt);
+          const isExpired = !!u?.expired;
+          const borderColor = isExpired ? "#ef4444" : u && !u.expired ? a(u.color, 0.5) : a(theme.colors.primary, 0.25);
+          return (
+            <div
+              key={ticket.id}
+              style={{
+                padding: 16,
+                border: `2px solid ${borderColor}`,
+                background: theme.colors.background,
+                borderRadius: theme.cornerRadius,
+                opacity: isSoldOut || isExpired ? 0.5 : 1,
+              }}
+            >
+              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 8 }}>
+                <div style={{ flex: 1 }}>
+                  <h3 style={{ fontSize: 17, fontWeight: 600, marginBottom: 6 }}>{ticket.title}</h3>
+                  {u && !u.expired && (
+                    <div
+                      style={{
+                        display: "inline-flex",
+                        alignItems: "center",
+                        gap: 4,
+                        padding: "2px 8px",
+                        borderRadius: 6,
+                        fontSize: 12,
+                        fontWeight: 700,
+                        marginBottom: 6,
+                        background: a(u.color, 0.05),
+                        color: u.color,
+                        border: `1px solid ${a(u.color, 0.3)}`,
+                      }}
+                    >
+                      {u.alert ? <AlertCircle size={12} /> : <Clock size={12} />}
+                      {u.message}
+                    </div>
+                  )}
+                  <div style={{ fontSize: 22, fontWeight: 700, color: theme.colors.primary }}>
+                    {ticket.compareAtPrice != null && Number(ticket.compareAtPrice) > Number(ticket.price) && (
+                      <span style={{ textDecoration: "line-through", opacity: 0.6, marginRight: 8, fontWeight: 400, fontSize: 16 }}>
+                        {fmt(Number(ticket.compareAtPrice))}
+                      </span>
+                    )}
+                    <PriceDisplay amount={Number(ticket.price)} pricesIncludeTax={pricesIncludeTax} formatAmount={fmt} mutedColor={theme.colors.text} captionStyle={{ opacity: 0.65 }} />
+                  </div>
+                </div>
+                <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+                  <button
+                    onClick={() => setQty(ticket, selectedQty - 1)}
+                    disabled={selectedQty === 0 || isSoldOut}
+                    style={stepperStyle(theme, false)}
+                  >
+                    −
+                  </button>
+                  <span style={{ fontSize: 18, fontWeight: 700, minWidth: 32, textAlign: "center" }}>
+                    {isSoldOut ? "SOLD OUT" : selectedQty}
+                  </span>
+                  <button
+                    onClick={() => setQty(ticket, selectedQty + 1)}
+                    disabled={selectedQty >= maxAllowed || isSoldOut || isExpired}
+                    style={stepperStyle(theme, true)}
+                  >
+                    +
+                  </button>
+                </div>
+              </div>
+              {ticket.description && (
+                <p dangerouslySetInnerHTML={{ __html: ticket.description }} style={{ marginTop: 12, fontSize: 14 }} />
+              )}
+              {isExpired && (
+                <div
+                  style={{
+                    marginTop: 12,
+                    padding: "8px 12px",
+                    borderRadius: 6,
+                    fontSize: 14,
+                    fontWeight: 600,
+                    background: a("#ef4444", 0.1),
+                    color: "#ef4444",
+                    border: `1px solid ${a("#ef4444", 0.3)}`,
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 8,
+                  }}
+                >
+                  <AlertCircle size={16} />
+                  This ticket has expired and is no longer available
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {c.error && <p style={{ color: "#ef4444", fontSize: 14, marginTop: 12 }}>{c.error}</p>}
+      <ActionBar c={c} fmt={fmt} onNext={c.goToDetails} nextLabel="Continue" />
+    </div>
+  );
+}
+
+// ── Step 2: buyer details + questionnaire ─────────────────────────────────────
+function DetailsStep({ c, event, fmt }: { c: Checkout; event: IEvent; fmt: (n: number) => string }) {
+  const theme = useForgeTheme();
+  const [confirmEmail, setConfirmEmail] = useState("");
+  const [answers, setAnswers] = useState<Record<string, string>>({});
+  const [localError, setLocalError] = useState<string | null>(null);
+
+  const questions = useMemo(() => event.questionnaire ?? [], [event.questionnaire]);
+
+  const onAnswer = (qid: string, value: string) => {
+    const next = { ...answers, [qid]: value };
+    setAnswers(next);
+    c.setQuestionnaire(questions.map((q) => ({ ...q, answer: next[q.id] ?? "" })));
+  };
+
+  const onContinue = () => {
+    setLocalError(null);
+    if (!c.firstName.trim() || !c.lastName.trim()) return setLocalError("Please enter your name.");
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(c.email)) return setLocalError("Please enter a valid email.");
+    if (c.email !== confirmEmail) return setLocalError("Emails do not match.");
+    for (const q of questions) {
+      if (!q.optional && !(answers[q.id] ?? "").trim()) return setLocalError(`Please answer: ${q.question}`);
+    }
+    c.continueToPayment();
+  };
+
+  return (
+    <div>
+      <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 16 }}>Your details</h2>
+      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+        <div style={{ display: "flex", gap: 8 }}>
+          <input placeholder="First name" value={c.firstName} onChange={(e) => c.setFirstName(e.target.value)} style={inputStyle(theme)} />
+          <input placeholder="Last name" value={c.lastName} onChange={(e) => c.setLastName(e.target.value)} style={inputStyle(theme)} />
+        </div>
+        <div>
+          <input placeholder="Email" type="email" value={c.email} onChange={(e) => c.setEmail(e.target.value)} style={inputStyle(theme)} />
+          {c.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(c.email) && <FieldError>Please enter a valid email address</FieldError>}
+        </div>
+        <div>
+          <input placeholder="Confirm email" type="email" value={confirmEmail} onChange={(e) => setConfirmEmail(e.target.value)} style={inputStyle(theme)} />
+          {confirmEmail && c.email !== confirmEmail && <FieldError>Email addresses do not match</FieldError>}
+        </div>
+
+        {questions.map((q) => {
+          const missing = !q.optional && !(answers[q.id] ?? "").trim();
+          return (
+            <label key={q.id} style={{ display: "flex", flexDirection: "column", gap: 6, fontSize: 14 }}>
+              <span>
+                {q.question}
+                {!q.optional && <span style={{ color: "#ef4444" }}> *</span>}
+              </span>
+              {q.options && q.options.length > 0 ? (
+                <select value={answers[q.id] ?? ""} onChange={(e) => onAnswer(q.id, e.target.value)} style={inputStyle(theme)}>
+                  <option value="">Select…</option>
+                  {q.options.map((opt) => (
+                    <option key={opt} value={opt}>
+                      {opt}
+                    </option>
+                  ))}
+                </select>
+              ) : (
+                <input value={answers[q.id] ?? ""} onChange={(e) => onAnswer(q.id, e.target.value)} style={inputStyle(theme)} />
+              )}
+              {missing && <FieldError>This field is required</FieldError>}
+            </label>
+          );
+        })}
+
+        {(localError || c.error) && <p style={{ color: "#ef4444", fontSize: 14 }}>{localError ?? c.error}</p>}
+      </div>
+      <ActionBar
+        c={c}
+        fmt={fmt}
+        onBack={() => c.setStep("tickets")}
+        onNext={onContinue}
+        nextLabel={c.isProcessing ? "Processing…" : "Continue to payment"}
+        nextDisabled={c.isProcessing}
+      />
+    </div>
+  );
+}
+
+// ── Step 3: payment ───────────────────────────────────────────────────────────
+function PaymentStep({
+  c,
+  fmt,
+  renderPayment,
+}: {
+  c: Checkout;
+  fmt: (n: number) => string;
+  renderPayment?: (props: PaymentRenderProps) => ReactNode;
+}) {
+  const theme = useForgeTheme();
+  // Authoritative tax quote from start-payment: exclusive stores get a "Tax"
+  // row (already contained in the charged total below); inclusive stores get a
+  // muted "Includes X tax" caption. Display only.
+  const taxSummary = summarizeTaxQuote(c.taxQuote);
+  return (
+    <div>
+      <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 8 }}>Payment</h2>
+      <p style={{ fontSize: 14, opacity: 0.7, marginBottom: 16 }}>Complete your purchase to secure your tickets.</p>
+      <div
+        style={{
+          padding: 20,
+          border: `2px solid ${a(theme.colors.primary, 0.25)}`,
+          borderRadius: theme.cornerRadius,
+          marginBottom: 16,
+        }}
+      >
+        {taxSummary?.mode === "exclusive" && (
+          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
+            <span style={{ fontSize: 14, opacity: 0.75 }}>Tax</span>
+            <span style={{ fontSize: 14, opacity: 0.75 }}>{taxSummary.formattedTax}</span>
+          </div>
+        )}
+        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+          <span style={{ fontSize: 16 }}>Total Amount</span>
+          <span style={{ fontSize: 22, fontWeight: 700, color: theme.colors.primary, textAlign: "right" }}>
+            {fmt(c.totalAmount)}
+            {taxSummary?.mode === "inclusive" && (
+              <span style={{ display: "block", fontSize: 12, fontWeight: 400, color: theme.colors.text, opacity: 0.65 }}>
+                {taxSummary.label}
+              </span>
+            )}
+          </span>
+        </div>
+      </div>
+      {!renderPayment ? (
+        <p style={{ color: "#ef4444", fontSize: 14 }}>Payment is not configured.</p>
+      ) : c.clientSecret ? (
+        renderPayment({ clientSecret: c.clientSecret, returnUrl: c.returnUrl, amount: c.totalAmount, mode: "redirect" })
+      ) : (
+        <p style={{ opacity: 0.7 }}>Preparing payment…</p>
+      )}
+      <button onClick={() => c.setStep("details")} style={{ ...secondaryButtonStyle(theme), marginTop: 16 }}>
+        Back
+      </button>
+    </div>
+  );
+}
+
+function FieldError({ children }: { children: ReactNode }) {
+  return <p style={{ color: "#ef4444", fontSize: 13, marginTop: 4 }}>{children}</p>;
+}
+
+// ── Shared bits ───────────────────────────────────────────────────────────────
+function ActionBar({
+  c,
+  fmt,
+  onBack,
+  onNext,
+  nextLabel,
+  nextDisabled,
+}: {
+  c: Checkout;
+  fmt: (n: number) => string;
+  onBack?: () => void;
+  onNext: () => void;
+  nextLabel: string;
+  nextDisabled?: boolean;
+}) {
+  const theme = useForgeTheme();
+  return (
+    <div style={{ marginTop: 24 }}>
+      <div
+        style={{
+          padding: 16,
+          border: `1px solid ${a(theme.colors.primary, 0.25)}`,
+          borderRadius: theme.cornerRadius,
+          marginBottom: 16,
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
+        <span style={{ fontWeight: 600 }}>Total</span>
+        <span style={{ fontSize: 18, fontWeight: 700, color: theme.colors.primary }}>{fmt(c.totalAmount)}</span>
+      </div>
+      <div style={{ display: "flex", gap: 8, justifyContent: "space-between" }}>
+        <button onClick={onBack} disabled={!onBack} style={{ ...secondaryButtonStyle(theme), opacity: onBack ? 1 : 0.4 }}>
+          Back
+        </button>
+        <button onClick={onNext} disabled={nextDisabled} style={{ ...primaryButtonStyle(theme), opacity: nextDisabled ? 0.6 : 1 }}>
+          {nextLabel}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+const triggerButtonStyle = (t: ForgeTheme): CSSProperties => buttonStyle(t, { variant: "primary", fullWidth: true });
+
+const primaryButtonStyle = (t: ForgeTheme): CSSProperties => buttonStyle(t, { variant: "primary" });
+
+const secondaryButtonStyle = (t: ForgeTheme): CSSProperties => buttonStyle(t, { variant: "outline" });
+
+const closeButtonStyle = (t: ForgeTheme): CSSProperties => ({
+  background: "transparent",
+  border: "none",
+  color: t.colors.text,
+  cursor: "pointer",
+  fontSize: 16,
+  lineHeight: 1,
+  opacity: 0.7,
+});
+
+const stepperStyle = (t: ForgeTheme, filled: boolean): CSSProperties => ({
+  width: 40,
+  height: 40,
+  borderRadius: t.cornerRadius,
+  border: `2px solid ${t.colors.primary}`,
+  background: filled ? t.colors.primary : "transparent",
+  color: filled ? "#fff" : t.colors.primary,
+  fontSize: 20,
+  fontWeight: 700,
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+});
+
+const inputStyle = (t: ForgeTheme): CSSProperties => ({
+  width: "100%",
+  padding: 10,
+  border: `1px solid ${a(t.colors.primary, 0.25)}`,
+  borderRadius: t.cornerRadius,
+  background: t.colors.background,
+  color: t.colors.text,
+  fontFamily: t.fontFamily,
+});

package/src/ui/styled/EventsList.tsx

@@ -0,0 +1,83 @@
+import { useEvents } from "../../data/queries/useEvents";
+import type { IEvent } from "../../types/models";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import { Loading } from "./Loading";
+
+export interface EventsListProps {
+  limit?: number;
+  onSelect?: (event: IEvent) => void;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+function formatDate(dateTime: string, timezone?: string) {
+  return new Date(dateTime).toLocaleString("en-US", {
+    weekday: "short",
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true,
+    timeZone: timezone || "UTC",
+  });
+}
+
+function locationText(event: IEvent): string {
+  if (event.type === "virtual") return "Virtual";
+  if (event.address) return event.address.name || event.address.city;
+  return "Virtual";
+}
+
+/** Themed upcoming-events list, built on `useEvents`. */
+export function EventsList({ limit, onSelect, className, style }: EventsListProps) {
+  const t = useThemeTokens();
+  const { data, isLoading } = useEvents();
+  const events = (data ?? []).slice(0, limit ?? 100);
+
+  if (isLoading) return <Loading />;
+  if (!events.length) return <p style={{ color: t.text, opacity: 0.7 }}>No upcoming events.</p>;
+
+  return (
+    <div className={className} style={{ display: "flex", flexDirection: "column", gap: 12, fontFamily: t.fontFamily, ...style }}>
+      {events.map((ev) => {
+        const cover = ev.media?.find((m) => m.type === "image")?.url ?? ev.media?.[0]?.url;
+        return (
+          <button
+            key={ev.id}
+            onClick={() => onSelect?.(ev)}
+            style={{
+              display: "flex",
+              gap: 12,
+              alignItems: "center",
+              textAlign: "left",
+              cursor: onSelect ? "pointer" : "default",
+              background: t.surface,
+              border: `1px solid ${t.primary}20`,
+              borderRadius: t.cornerRadius,
+              padding: 10,
+              color: t.text,
+            }}
+          >
+            <div
+              style={{
+                width: 72,
+                height: 72,
+                borderRadius: t.cornerRadius,
+                overflow: "hidden",
+                flexShrink: 0,
+                background: `${t.primary}10`,
+              }}
+            >
+              {cover && <img src={cover} alt={ev.title} style={{ width: "100%", height: "100%", objectFit: "cover" }} />}
+            </div>
+            <div>
+              <div style={{ fontWeight: 600 }}>{ev.title}</div>
+              <div style={{ fontSize: 13, opacity: 0.75 }}>{formatDate(ev.dateTime, ev.timezone)}</div>
+              <div style={{ fontSize: 13, opacity: 0.75 }}>{locationText(ev)}</div>
+            </div>
+          </button>
+        );
+      })}
+    </div>
+  );
+}