/* global React, Ic, Btn, Field, Input, Select, SearchBar, Checkbox, Pagination, Showing, Table, PageHead, Toast, DATA */
// pages.jsx — one exported component per route

const { useState, useMemo, useEffect } = React;

// ── Customers list ────────────────────────────────────────────
function CustomersPage({ openDetail, showToast }) {
  const [q, setQ] = useState("");
  const [page, setPage] = useState(1);
  const [count, setCount] = useState(20);
  const [sel, setSel] = useState({});
  const rows = useMemo(() =>
    DATA.CUSTOMERS.filter(c => !q || (c.name + c.id + c.email).toLowerCase().includes(q.toLowerCase()))
  , [q]);
  const toggle = id => setSel(s => id === "all" ? (s.all ? {} : { all: true }) : { ...s, [id]: !s[id] });
  const cols = [
    { label: "Customer ID", key: "id", sortable: true, width: 160 },
    { label: "Name", sortable: true, render: r => <span style={{ fontWeight: 700 }}>{r.name}</span> },
    { label: "Points", sortable: true, render: r => <span className="mono">{r.points.toLocaleString()}</span> },
    { label: "Orders", sortable: true, render: r => <span className="mono">{r.orders}</span> },
    { label: "Member since", sortable: true, render: r => r.since },
  ];
  return (
    <div className="page-inner">
      <PageHead title="Customers"/>
      <SearchBar value={q} onChange={setQ} placeholder="Search by name, ID or email"/>
      <Table columns={cols} rows={rows} selected={sel} onToggleSelected={toggle} onRow={openDetail}/>
      <Showing count={count} onCountChange={setCount}/>
      <Pagination page={page} total={10} onPage={setPage}/>
    </div>
  );
}

// ── Customer detail sub-drawer ───────────────────────────────
function CustomerDetail({ customer, onClose }) {
  if (!customer) return null;
  const avatar = DATA.AVATARS[customer.id.charCodeAt(3) % DATA.AVATARS.length];
  return (
    <div className="sub-inner">
      <div className="row jc-e ai-c">
        <button className="iconbtn" onClick={onClose}>{Ic.close(28)}</button>
      </div>
      <div className="row ai-c" style={{ gap: 16 }}>
        <div style={{ width: 72, height: 72, borderRadius: 36, background: avatar.bg, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, overflow: "hidden", border: "1.5px solid var(--forest)" }}>
          <img src={avatar.src} alt={avatar.tag} style={{ width: "84%", height: "84%", objectFit: "contain" }}/>
        </div>
        <h2 className="h-sec" style={{ fontSize: 22, fontWeight: 700, color: "var(--forest)", margin: 0 }}>
          {customer.id} · {customer.name}
        </h2>
      </div>

      <div className="table">
        <table>
          <thead><tr><th colSpan={3} style={{ fontSize: 16 }}>Info</th></tr></thead>
          <tbody>
            <tr><td style={{ width: 180, fontWeight: 700 }}>Name</td><td>{customer.name}</td><td/></tr>
            <tr><td style={{ fontWeight: 700 }}>Username</td><td>{customer.username}</td><td/></tr>
            <tr><td style={{ fontWeight: 700 }}>Phone</td><td>{customer.phone}</td><td style={{ width: 40, color: "var(--forest)" }}>{Ic.phone()}</td></tr>
            <tr><td style={{ fontWeight: 700 }}>Email</td><td>{customer.email}</td><td style={{ color: "var(--forest)" }}>{Ic.mail()}</td></tr>
            <tr><td style={{ fontWeight: 700 }}>Birthday</td><td>{customer.birthday}</td><td/></tr>
            <tr><td style={{ fontWeight: 700 }}>Member since</td><td>{customer.since}</td><td/></tr>
          </tbody>
        </table>
      </div>

      <div className="table">
        <table>
          <thead><tr><th colSpan={3} style={{ fontSize: 16 }}>Stats</th></tr></thead>
          <tbody>
            <tr><td style={{ width: 220, fontWeight: 700 }}>Stored Value Wallet</td><td>${customer.wallet.toFixed(2)}</td><td/></tr>
            <tr><td style={{ fontWeight: 700 }}>Orders</td><td>{customer.orders}</td><td style={{ color: "var(--forest)", width: 40 }}>{Ic.chevR(18)}</td></tr>
            <tr><td style={{ fontWeight: 700 }}>Loyalty Points</td><td className="mono">{customer.points.toLocaleString()}</td><td style={{ color: "var(--forest)" }}>{Ic.chevR(18)}</td></tr>
            <tr><td style={{ fontWeight: 700 }}>Gifts</td><td>{customer.gifts}</td><td style={{ color: "var(--forest)" }}>{Ic.chevR(18)}</td></tr>
            <tr><td style={{ fontWeight: 700 }}>Redemptions</td><td>{customer.redemptions}</td><td style={{ color: "var(--forest)" }}>{Ic.chevR(18)}</td></tr>
          </tbody>
        </table>
      </div>

      <button className="row ai-c" style={{ color: "var(--forest)", fontWeight: 700, fontSize: 18, gap: 6 }}>
        {Ic.plus(22)} Add Remarks
      </button>
      <div className="divider"/>
      <h3 className="h-sec">Remarks</h3>
      <div className="card" style={{ background: "var(--cream)" }}>
        <div className="label" style={{ marginBottom: 8, fontSize: 13, opacity: .75 }}>12 Apr 2025 · 10:42 AM</div>
        <div className="body" style={{ color: "var(--ink)", marginBottom: 8 }}>Customer has been ordering from us continuously for 30 days and has kind words for every staff member. Let's reward our loyal customer!</div>
        <div className="label" style={{ fontSize: 13, color: "var(--mint)" }}>Sent by @adminSasha</div>
      </div>
    </div>
  );
}

// ── Rewards list ──────────────────────────────────────────────
function RewardsPage({ setPage }) {
  const [q, setQ] = useState("");
  const rows = DATA.REWARDS.filter(r => !q || (r.name + r.brand).toLowerCase().includes(q.toLowerCase()));
  const cols = [
    { label: "ID", key: "id", width: 90 },
    { label: "Reward", render: r => <span className="row ai-c" style={{ gap: 10 }}><span style={{ fontSize: 22 }}>{r.emoji}</span><span style={{ fontWeight: 700 }}>{r.name}</span></span> },
    { label: "Brand", key: "brand" },
    { label: "Points", render: r => <span className="mono">{r.points}</span> },
    { label: "Redeemed", render: r => <span className="mono">{r.redeemed}</span> },
    { label: "Status", render: r => <span className={`badge ${r.status === "Active" ? "badge-ok" : r.status === "Draft" ? "badge-pending" : "badge-off"}`}>{r.status}</span> },
  ];
  return (
    <div className="page-inner">
      <PageHead title="Rewards" actions={<Btn icon={Ic.plus(18)} onClick={() => setPage("add-reward")}>Add Reward</Btn>}/>
      <SearchBar value={q} onChange={setQ} placeholder="Search rewards"/>
      <Table columns={cols} rows={rows}/>
    </div>
  );
}

// ── Add Reward form ───────────────────────────────────────────
function AddRewardPage({ setPage, showToast }) {
  const [form, setForm] = useState({ brand: "", name: "", category: "", points: "", description: "", duration: "", validity: "", codeType: "", instructions: "", status: "" });
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const submit = () => { showToast("Reward saved"); setPage("rewards"); };
  return (
    <div className="page-inner">
      <div className="row jc-sb ai-c">
        <button className="iconbtn" onClick={() => setPage("rewards")}>{Ic.chevL(24)}</button>
        <button className="iconbtn" onClick={() => setPage("rewards")}>{Ic.close(24)}</button>
      </div>
      <h1 className="h-sec" style={{ fontSize: 28 }}>Add Reward</h1>
      <Field label="Brand">
        <Select value={form.brand} onChange={v => set("brand", v)} placeholder="Select Brand">
          {DATA.BRANDS.map(b => <option key={b.id} value={b.name}>{b.name}</option>)}
        </Select>
      </Field>
      <Field label="Reward Name"><Input value={form.name} onChange={v => set("name", v)} placeholder="Enter Reward Name"/></Field>
      <div className="row" style={{ gap: 16 }}>
        <div className="grow"><Field label="Category">
          <Select value={form.category} onChange={v => set("category", v)} placeholder="Select Category">
            {["Beverage","Food","Voucher","Lifestyle"].map(o => <option key={o}>{o}</option>)}
          </Select>
        </Field></div>
        <div className="grow"><Field label="Points"><Input value={form.points} onChange={v => set("points", v)} placeholder="Enter Points"/></Field></div>
      </div>
      <Field label="Description">
        <div className="input" style={{ padding: 0, height: "auto" }}>
          <textarea value={form.description} onChange={e => set("description", e.target.value)} placeholder="Enter Description of the Item" style={{ width: "100%", border: 0, background: "transparent", padding: "12px 18px", minHeight: 92, resize: "vertical", color: "var(--forest)", fontWeight: 500 }}/>
        </div>
      </Field>
      <div className="row" style={{ gap: 16 }}>
        <div className="grow"><Field label="Duration"><Input value={form.duration} onChange={v => set("duration", v)} placeholder="DD/MM/YY – DD/MM/YY"/></Field></div>
        <div style={{ flex: "0 0 200px" }}><Field label="Period of Code Validity (days)"><Input value={form.validity} onChange={v => set("validity", v)} placeholder="e.g. 30"/></Field></div>
      </div>
      <Field label="Code Type">
        <Select value={form.codeType} onChange={v => set("codeType", v)} placeholder="Select Code Type">
          <option>One-time use</option><option>Multiple use</option>
        </Select>
      </Field>
      <Field label="Instructions">
        <div className="input" style={{ padding: 0, height: "auto" }}>
          <textarea value={form.instructions} onChange={e => set("instructions", e.target.value)} placeholder="1." style={{ width: "100%", border: 0, background: "transparent", padding: "12px 18px", minHeight: 92, resize: "vertical", color: "var(--forest)", fontWeight: 500 }}/>
        </div>
      </Field>
      <div className="row" style={{ gap: 16 }}>
        <div className="grow"><Field label="Thumbnail Image (600 × 525, max 5MB)"><div className="input ghost">JPG, PNG, GIF</div></Field></div>
        <div style={{ alignSelf: "flex-end" }}><Btn icon={Ic.upload(16)} size="sm">Upload</Btn></div>
      </div>
      <div className="row" style={{ gap: 16 }}>
        <div className="grow"><Field label="Header Image (1000 × 600, max 5MB)"><div className="input ghost">JPG, PNG, GIF</div></Field></div>
        <div style={{ alignSelf: "flex-end" }}><Btn icon={Ic.upload(16)} size="sm">Upload</Btn></div>
      </div>
      <Field label="Status">
        <Select value={form.status} onChange={v => set("status", v)} placeholder="Select Status">
          <option>Active</option><option>Draft</option><option>Inactive</option>
        </Select>
      </Field>
      <div className="col" style={{ gap: 12, alignItems: "center", paddingTop: 8 }}>
        <Btn block onClick={submit}>Add Reward</Btn>
        <button style={{ color: "var(--forest)", fontWeight: 700, textDecoration: "underline" }} onClick={() => setForm({ brand: "", name: "", category: "", points: "", description: "", duration: "", validity: "", codeType: "", instructions: "", status: "" })}>Reset</button>
      </div>
    </div>
  );
}

// ── Generic table page (used for Transactions, Orders, etc.) ──
function TablePage({ title, rows, cols, actions, search = true }) {
  const [q, setQ] = useState("");
  const [page, setPage] = useState(1);
  const [count, setCount] = useState(20);
  const filtered = q ? rows.filter(r => JSON.stringify(r).toLowerCase().includes(q.toLowerCase())) : rows;
  return (
    <div className="page-inner">
      <PageHead title={title} actions={actions}/>
      {search && <SearchBar value={q} onChange={setQ} placeholder={`Search ${title.toLowerCase()}`}/>}
      <Table columns={cols} rows={filtered}/>
      <Showing count={count} onCountChange={setCount}/>
      <Pagination page={page} total={10} onPage={setPage}/>
    </div>
  );
}

// ── Transactions ──────────────────────────────────────────────
function TransactionsPage() {
  const cols = [
    { label: "Txn ID", key: "id", width: 130 },
    { label: "Customer", key: "customer" },
    { label: "Type", key: "type" },
    { label: "Amount", render: r => <span className="mono" style={{ color: r.amount < 0 ? "var(--berry)" : "var(--forest)", fontWeight: 700 }}>{r.amount < 0 ? "–" : "+"}${Math.abs(r.amount).toFixed(2)}</span> },
    { label: "Status", render: r => <span className={`badge ${r.status === "Completed" ? "badge-ok" : r.status === "Pending" ? "badge-pending" : "badge-off"}`}>{r.status}</span> },
    { label: "Date / Time", render: r => <span>{r.date} · {r.time}</span> },
  ];
  return <TablePage title="Transactions" rows={DATA.TRANSACTIONS} cols={cols}/>;
}

// ── Orders ────────────────────────────────────────────────────
function OrdersPage() {
  const cols = [
    { label: "Order ID", key: "id", width: 140 },
    { label: "Customer", key: "customer" },
    { label: "Items", key: "items" },
    { label: "Total", render: r => <span className="mono">${r.total.toFixed(2)}</span> },
    { label: "Store", key: "store" },
    { label: "Status", render: r => <span className={`badge ${r.status === "Completed" ? "badge-ok" : r.status === "Cancelled" ? "badge-off" : "badge-pending"}`}>{r.status}</span> },
    { label: "Placed", key: "date" },
  ];
  return <TablePage title="Orders" rows={DATA.ORDERS} cols={cols}/>;
}

// ── Loyalty ───────────────────────────────────────────────────
function LoyaltyPage() {
  const cols = [
    { label: "Customer", key: "id", width: 120 },
    { label: "Name", render: r => <span style={{ fontWeight: 700 }}>{r.name}</span> },
    { label: "Points", render: r => <span className="mono">{r.points.toLocaleString()}</span> },
    { label: "Tier", render: r => <span className="chip" style={{ padding: "3px 10px", fontSize: 12 }}>{r.points > 3000 ? "Gold" : r.points > 1500 ? "Silver" : "Bronze"}</span> },
    { label: "Earned (30d)", render: r => <span className="mono">+{Math.round(r.points * 0.18)}</span> },
    { label: "Redeemed", render: r => <span className="mono">{r.redemptions}</span> },
  ];
  return <TablePage title="Loyalty" rows={DATA.CUSTOMERS} cols={cols}/>;
}

// ── Gifts ─────────────────────────────────────────────────────
function GiftsPage() {
  const rows = DATA.CUSTOMERS.map(c => ({ id: c.id, name: c.name, gifts: c.gifts, last: c.since }));
  const cols = [
    { label: "Customer", key: "id" },
    { label: "Name", render: r => <span style={{ fontWeight: 700 }}>{r.name}</span> },
    { label: "Gifts sent", render: r => <span className="mono">{r.gifts}</span> },
    { label: "Last gifted", key: "last" },
  ];
  return <TablePage title="Gifts" rows={rows} cols={cols}/>;
}

// ── Redemptions ───────────────────────────────────────────────
function RedemptionsPage() {
  const rows = DATA.REWARDS.slice(0,7).flatMap((r, i) => DATA.CUSTOMERS.slice(i, i+2).map((c, j) => ({
    id: `RD-${800+i*2+j}`, reward: r.name, customer: c.id, date: c.since, code: `${r.id.split("-")[1]}${String(c.id).slice(-3)}`, status: j === 0 ? "Used" : "Active"
  })));
  const cols = [
    { label: "Redemption ID", key: "id" },
    { label: "Reward", key: "reward" },
    { label: "Customer", key: "customer" },
    { label: "Code", render: r => <span className="mono">{r.code}</span> },
    { label: "Redeemed", key: "date" },
    { label: "Status", render: r => <span className={`badge ${r.status === "Used" ? "badge-ok" : "badge-pending"}`}>{r.status}</span> },
  ];
  return <TablePage title="Redemptions" rows={rows} cols={cols}/>;
}

// ── Partner Brands ────────────────────────────────────────────
function BrandsPage({ showToast }) {
  const cols = [
    { label: "Brand ID", key: "id", width: 110 },
    { label: "Name", render: r => <span style={{ fontWeight: 700 }}>{r.name}</span> },
    { label: "Type", render: r => <span className={`chip ${r.type === "Primary" ? "on" : ""}`} style={{ padding: "3px 10px", fontSize: 12 }}>{r.type}</span> },
    { label: "Contact", key: "contact" },
    { label: "Added", key: "added" },
    { label: "Status", render: r => <span className={`badge ${r.active ? "badge-ok" : "badge-off"}`}>{r.active ? "Active" : "Paused"}</span> },
  ];
  return (
    <div className="page-inner">
      <PageHead title="Partner Brands" actions={<Btn icon={Ic.plus(18)} onClick={() => showToast("Opening new brand form")}>Add Brand</Btn>}/>
      <SearchBar placeholder="Search brands"/>
      <Table columns={cols} rows={DATA.BRANDS}/>
      <Pagination page={1} total={3} onPage={() => {}}/>
    </div>
  );
}

// ── Notifications ─────────────────────────────────────────────
function NotificationsPage({ showToast }) {
  const [tab, setTab] = useState("campaigns");
  const [draft, setDraft] = useState({ title: "", body: "", audience: "", schedule: "" });
  return (
    <div className="page-inner">
      <PageHead title="Notifications" actions={<Btn icon={Ic.plus(18)} onClick={() => setTab("compose")}>New</Btn>}/>
      <div className="row" style={{ gap: 12 }}>
        {[["campaigns", "Campaigns"], ["compose", "Compose"]].map(([k, l]) => (
          <button key={k} className={`chip ${tab === k ? "on" : ""}`} onClick={() => setTab(k)}>{l}</button>
        ))}
      </div>
      {tab === "campaigns" && (
        <>
          <Table
            columns={[
              { label: "ID", key: "id", width: 90 },
              { label: "Title", render: r => <span style={{ fontWeight: 700 }}>{r.title}</span> },
              { label: "Audience", key: "audience" },
              { label: "Schedule", key: "schedule" },
              { label: "Sent", render: r => <span className="mono">{r.sent.toLocaleString()}</span> },
              { label: "Status", render: r => <span className={`badge ${r.status === "Active" ? "badge-ok" : r.status === "Draft" ? "badge-pending" : "badge-ok"}`}>{r.status}</span> },
            ]}
            rows={DATA.NOTIFICATIONS}
          />
        </>
      )}
      {tab === "compose" && (
        <>
          <Field label="Title"><Input value={draft.title} onChange={v => setDraft(d => ({ ...d, title: v }))} placeholder="Notification title"/></Field>
          <Field label="Message">
            <div className="input" style={{ padding: 0, height: "auto" }}>
              <textarea value={draft.body} onChange={e => setDraft(d => ({ ...d, body: e.target.value }))} placeholder="What do you want to say?" style={{ width: "100%", border: 0, background: "transparent", padding: "12px 18px", minHeight: 120, resize: "vertical", color: "var(--forest)", fontWeight: 500 }}/>
            </div>
          </Field>
          <div className="row" style={{ gap: 16 }}>
            <div className="grow"><Field label="Audience">
              <Select value={draft.audience} onChange={v => setDraft(d => ({ ...d, audience: v }))} placeholder="Select audience">
                <option>All customers</option><option>Gold tier</option><option>Birthday month</option><option>Inactive &gt; 30 days</option>
              </Select>
            </Field></div>
            <div className="grow"><Field label="Schedule">
              <Select value={draft.schedule} onChange={v => setDraft(d => ({ ...d, schedule: v }))} placeholder="Send…">
                <option>Send now</option><option>Schedule for later</option><option>Recurring</option>
              </Select>
            </Field></div>
          </div>
          <h3 className="h-sec">Preset templates</h3>
          <div className="col" style={{ gap: 10 }}>
            {[
              { t: "Birthday treat", m: "Happy birthday! Here's a cupcake on us 🧁" },
              { t: "We miss you", m: "It's been a while. Come back for 15% off your next order." },
              { t: "Rainy day", m: "Stay warm — free pastry with any hot drink today ☔" },
            ].map((p, i) => (
              <button key={i} className="notif-item" style={{ textAlign: "left" }} onClick={() => setDraft(d => ({ ...d, title: p.t, body: p.m }))}>
                <span className="dot"/>
                <div className="content">
                  <span className="t">{p.t}</span>
                  <span className="m">{p.m}</span>
                </div>
              </button>
            ))}
          </div>
          <Btn block onClick={() => { showToast("Notification scheduled"); setTab("campaigns"); setDraft({ title: "", body: "", audience: "", schedule: "" }); }}>Send</Btn>
        </>
      )}
    </div>
  );
}

// ── Avatars ───────────────────────────────────────────────────
function AvatarsPage({ showToast }) {
  const [sel, setSel] = useState(null);
  return (
    <div className="page-inner">
      <PageHead title="Avatars" actions={<Btn icon={Ic.plus(18)} onClick={() => showToast("Upload avatar")}>Upload</Btn>}/>
      <p className="body" style={{ color: "var(--ink-2)", marginTop: -8 }}>Character packs shown to customers in their profile. Drag to reorder.</p>
      <div className="avatar-grid">
        {DATA.AVATARS.map(a => (
          <button key={a.id} className={`avatar-card ${sel === a.id ? "sel" : ""}`} style={{ background: a.bg }} onClick={() => setSel(a.id)}>
            <img src={a.src} alt={a.tag} style={{ width: "78%", height: "78%", objectFit: "contain" }}/>
            <span className="tag">{a.tag}</span>
          </button>
        ))}
      </div>
      {sel && (
        <div className="card" style={{ background: "var(--cream-2)" }}>
          <div className="row jc-sb ai-c">
            <div>
              <div className="label">Selected</div>
              <div className="h-sec">{DATA.AVATARS.find(a => a.id === sel).tag} pack</div>
            </div>
            <div className="row" style={{ gap: 8 }}>
              <Btn variant="secondary" size="sm" icon={Ic.edit(14)}>Edit</Btn>
              <Btn variant="secondary" size="sm" icon={Ic.trash(14)}>Remove</Btn>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// ── AI Companion (emotional nudges) ───────────────────────────
function AICompanionPage({ showToast }) {
  const [items, setItems] = useState(DATA.NUDGES);
  const toggle = id => setItems(list => list.map(n => n.id === id ? { ...n, active: !n.active } : n));
  return (
    <div className="page-inner">
      <PageHead title="AI Companion" actions={<Btn icon={Ic.plus(18)} onClick={() => showToast("New nudge")}>New nudge</Btn>}/>
      <p className="body" style={{ color: "var(--ink-2)", marginTop: -8 }}>Emotional nudges sent to customers based on context — time, weather, behavior, friends.</p>

      <div className="row" style={{ gap: 12, flexWrap: "wrap" }}>
        {["Active 4","Paused 1","Sent this week 1,204","Avg engagement 34%"].map((s, i) => (
          <div key={i} className="card soft" style={{ flex: 1, minWidth: 140, padding: 14 }}>
            <div className="label" style={{ fontSize: 12, opacity: .7 }}>{s.split(" ").slice(0,-1).join(" ")}</div>
            <div className="h-sec" style={{ fontSize: 22, marginTop: 4 }}>{s.split(" ").slice(-1)[0]}</div>
          </div>
        ))}
      </div>

      <h3 className="h-sec" style={{ marginTop: 8 }}>Nudges</h3>
      <div className="col" style={{ gap: 12 }}>
        {items.map(n => (
          <div key={n.id} className="nudge-card">
            <div className="icon">{n.emoji}</div>
            <div className="col grow" style={{ gap: 4 }}>
              <div className="row jc-sb ai-c">
                <span style={{ fontWeight: 700, color: "var(--forest)", fontSize: 17 }}>{n.name}</span>
                <button className="chip" style={{ background: n.active ? "var(--forest)" : "transparent", color: n.active ? "var(--lime)" : "var(--forest)" }} onClick={() => toggle(n.id)}>
                  {n.active ? "Active" : "Paused"}
                </button>
              </div>
              <span className="body" style={{ color: "var(--ink-2)", fontSize: 13 }}>{Ic.sparkle(14)} Trigger: {n.trigger}</span>
              <span className="body" style={{ color: "var(--ink)", fontStyle: "italic" }}>"{n.message}"</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ── Login ─────────────────────────────────────────────────────
function LoginPage({ onLogin }) {
  const [u, setU] = useState("");
  const [p, setP] = useState("");
  return (
    <div className="login">
      <div className="col" style={{ alignItems: "center", gap: 10 }}>
        <div className="logo">O<span style={{ color: "var(--orange)" }}>•</span>C</div>
        <div className="logo-sub">ADMIN CONSOLE</div>
      </div>
      <div className="col gap-16" style={{ width: 380 }}>
        <Field label="Username"><Input value={u} onChange={setU} placeholder="Enter your username"/></Field>
        <Field label="Password"><Input type="password" value={p} onChange={setP} placeholder="Enter your password" rightIcon={<span style={{ color: "var(--forest)" }}>{Ic.eye(16)}</span>}/></Field>
        <button style={{ textAlign: "right", color: "var(--forest)", fontWeight: 700, fontSize: 14 }}>Forgot password?</button>
      </div>
      <div style={{ width: 260 }}><Btn block onClick={onLogin}>LOG IN</Btn></div>
    </div>
  );
}

Object.assign(window, {
  CustomersPage, CustomerDetail, RewardsPage, AddRewardPage,
  TransactionsPage, OrdersPage, LoyaltyPage, GiftsPage, RedemptionsPage,
  BrandsPage, NotificationsPage, AvatarsPage, AICompanionPage, LoginPage,
});