popsite-ui 1.0.0

package/dist/popsite-ui.es.js

@@ -0,0 +1,4368 @@
+import et, { useState as p, useEffect as $, useRef as Bt } from "react";
+var De = { exports: {} }, ne = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var Qe;
+function Rt() {
+  if (Qe) return ne;
+  Qe = 1;
+  var m = et, o = Symbol.for("react.element"), n = Symbol.for("react.fragment"), j = Object.prototype.hasOwnProperty, u = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, N = { key: !0, ref: !0, __self: !0, __source: !0 };
+  function h(A, l, T) {
+    var x, k = {}, g = null, W = null;
+    T !== void 0 && (g = "" + T), l.key !== void 0 && (g = "" + l.key), l.ref !== void 0 && (W = l.ref);
+    for (x in l) j.call(l, x) && !N.hasOwnProperty(x) && (k[x] = l[x]);
+    if (A && A.defaultProps) for (x in l = A.defaultProps, l) k[x] === void 0 && (k[x] = l[x]);
+    return { $$typeof: o, type: A, key: g, ref: W, props: k, _owner: u.current };
+  }
+  return ne.Fragment = n, ne.jsx = h, ne.jsxs = h, ne;
+}
+var le = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var Xe;
+function Dt() {
+  return Xe || (Xe = 1, process.env.NODE_ENV !== "production" && function() {
+    var m = et, o = Symbol.for("react.element"), n = Symbol.for("react.portal"), j = Symbol.for("react.fragment"), u = Symbol.for("react.strict_mode"), N = Symbol.for("react.profiler"), h = Symbol.for("react.provider"), A = Symbol.for("react.context"), l = Symbol.for("react.forward_ref"), T = Symbol.for("react.suspense"), x = Symbol.for("react.suspense_list"), k = Symbol.for("react.memo"), g = Symbol.for("react.lazy"), W = Symbol.for("react.offscreen"), y = Symbol.iterator, C = "@@iterator";
+    function B(s) {
+      if (s === null || typeof s != "object")
+        return null;
+      var c = y && s[y] || s[C];
+      return typeof c == "function" ? c : null;
+    }
+    var D = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    function P(s) {
+      {
+        for (var c = arguments.length, v = new Array(c > 1 ? c - 1 : 0), E = 1; E < c; E++)
+          v[E - 1] = arguments[E];
+        S("error", s, v);
+      }
+    }
+    function S(s, c, v) {
+      {
+        var E = D.ReactDebugCurrentFrame, z = E.getStackAddendum();
+        z !== "" && (c += "%s", v = v.concat([z]));
+        var L = v.map(function(_) {
+          return String(_);
+        });
+        L.unshift("Warning: " + c), Function.prototype.apply.call(console[s], console, L);
+      }
+    }
+    var d = !1, b = !1, M = !1, I = !1, r = !1, t;
+    t = Symbol.for("react.module.reference");
+    function a(s) {
+      return !!(typeof s == "string" || typeof s == "function" || s === j || s === N || r || s === u || s === T || s === x || I || s === W || d || b || M || typeof s == "object" && s !== null && (s.$$typeof === g || s.$$typeof === k || s.$$typeof === h || s.$$typeof === A || s.$$typeof === l || // This needs to include all possible module reference object
+      // types supported by any Flight configuration anywhere since
+      // we don't know which Flight build this will end up being used
+      // with.
+      s.$$typeof === t || s.getModuleId !== void 0));
+    }
+    function i(s, c, v) {
+      var E = s.displayName;
+      if (E)
+        return E;
+      var z = c.displayName || c.name || "";
+      return z !== "" ? v + "(" + z + ")" : v;
+    }
+    function f(s) {
+      return s.displayName || "Context";
+    }
+    function F(s) {
+      if (s == null)
+        return null;
+      if (typeof s.tag == "number" && P("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof s == "function")
+        return s.displayName || s.name || null;
+      if (typeof s == "string")
+        return s;
+      switch (s) {
+        case j:
+          return "Fragment";
+        case n:
+          return "Portal";
+        case N:
+          return "Profiler";
+        case u:
+          return "StrictMode";
+        case T:
+          return "Suspense";
+        case x:
+          return "SuspenseList";
+      }
+      if (typeof s == "object")
+        switch (s.$$typeof) {
+          case A:
+            var c = s;
+            return f(c) + ".Consumer";
+          case h:
+            var v = s;
+            return f(v._context) + ".Provider";
+          case l:
+            return i(s, s.render, "ForwardRef");
+          case k:
+            var E = s.displayName || null;
+            return E !== null ? E : F(s.type) || "Memo";
+          case g: {
+            var z = s, L = z._payload, _ = z._init;
+            try {
+              return F(_(L));
+            } catch {
+              return null;
+            }
+          }
+        }
+      return null;
+    }
+    var w = Object.assign, R = 0, q, oe, de, ce, Ie, Ae, Pe;
+    function Ee() {
+    }
+    Ee.__reactDisabledLog = !0;
+    function tt() {
+      {
+        if (R === 0) {
+          q = console.log, oe = console.info, de = console.warn, ce = console.error, Ie = console.group, Ae = console.groupCollapsed, Pe = console.groupEnd;
+          var s = {
+            configurable: !0,
+            enumerable: !0,
+            value: Ee,
+            writable: !0
+          };
+          Object.defineProperties(console, {
+            info: s,
+            log: s,
+            warn: s,
+            error: s,
+            group: s,
+            groupCollapsed: s,
+            groupEnd: s
+          });
+        }
+        R++;
+      }
+    }
+    function st() {
+      {
+        if (R--, R === 0) {
+          var s = {
+            configurable: !0,
+            enumerable: !0,
+            writable: !0
+          };
+          Object.defineProperties(console, {
+            log: w({}, s, {
+              value: q
+            }),
+            info: w({}, s, {
+              value: oe
+            }),
+            warn: w({}, s, {
+              value: de
+            }),
+            error: w({}, s, {
+              value: ce
+            }),
+            group: w({}, s, {
+              value: Ie
+            }),
+            groupCollapsed: w({}, s, {
+              value: Ae
+            }),
+            groupEnd: w({}, s, {
+              value: Pe
+            })
+          });
+        }
+        R < 0 && P("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
+      }
+    }
+    var fe = D.ReactCurrentDispatcher, ve;
+    function pe(s, c, v) {
+      {
+        if (ve === void 0)
+          try {
+            throw Error();
+          } catch (z) {
+            var E = z.stack.trim().match(/\n( *(at )?)/);
+            ve = E && E[1] || "";
+          }
+        return `
+` + ve + s;
+      }
+    }
+    var be = !1, me;
+    {
+      var at = typeof WeakMap == "function" ? WeakMap : Map;
+      me = new at();
+    }
+    function Fe(s, c) {
+      if (!s || be)
+        return "";
+      {
+        var v = me.get(s);
+        if (v !== void 0)
+          return v;
+      }
+      var E;
+      be = !0;
+      var z = Error.prepareStackTrace;
+      Error.prepareStackTrace = void 0;
+      var L;
+      L = fe.current, fe.current = null, tt();
+      try {
+        if (c) {
+          var _ = function() {
+            throw Error();
+          };
+          if (Object.defineProperty(_.prototype, "props", {
+            set: function() {
+              throw Error();
+            }
+          }), typeof Reflect == "object" && Reflect.construct) {
+            try {
+              Reflect.construct(_, []);
+            } catch (U) {
+              E = U;
+            }
+            Reflect.construct(s, [], _);
+          } else {
+            try {
+              _.call();
+            } catch (U) {
+              E = U;
+            }
+            s.call(_.prototype);
+          }
+        } else {
+          try {
+            throw Error();
+          } catch (U) {
+            E = U;
+          }
+          s();
+        }
+      } catch (U) {
+        if (U && E && typeof U.stack == "string") {
+          for (var O = U.stack.split(`
+`), Y = E.stack.split(`
+`), V = O.length - 1, H = Y.length - 1; V >= 1 && H >= 0 && O[V] !== Y[H]; )
+            H--;
+          for (; V >= 1 && H >= 0; V--, H--)
+            if (O[V] !== Y[H]) {
+              if (V !== 1 || H !== 1)
+                do
+                  if (V--, H--, H < 0 || O[V] !== Y[H]) {
+                    var J = `
+` + O[V].replace(" at new ", " at ");
+                    return s.displayName && J.includes("<anonymous>") && (J = J.replace("<anonymous>", s.displayName)), typeof s == "function" && me.set(s, J), J;
+                  }
+                while (V >= 1 && H >= 0);
+              break;
+            }
+        }
+      } finally {
+        be = !1, fe.current = L, st(), Error.prepareStackTrace = z;
+      }
+      var ie = s ? s.displayName || s.name : "", ee = ie ? pe(ie) : "";
+      return typeof s == "function" && me.set(s, ee), ee;
+    }
+    function it(s, c, v) {
+      return Fe(s, !1);
+    }
+    function rt(s) {
+      var c = s.prototype;
+      return !!(c && c.isReactComponent);
+    }
+    function he(s, c, v) {
+      if (s == null)
+        return "";
+      if (typeof s == "function")
+        return Fe(s, rt(s));
+      if (typeof s == "string")
+        return pe(s);
+      switch (s) {
+        case T:
+          return pe("Suspense");
+        case x:
+          return pe("SuspenseList");
+      }
+      if (typeof s == "object")
+        switch (s.$$typeof) {
+          case l:
+            return it(s.render);
+          case k:
+            return he(s.type, c, v);
+          case g: {
+            var E = s, z = E._payload, L = E._init;
+            try {
+              return he(L(z), c, v);
+            } catch {
+            }
+          }
+        }
+      return "";
+    }
+    var re = Object.prototype.hasOwnProperty, We = {}, Me = D.ReactDebugCurrentFrame;
+    function xe(s) {
+      if (s) {
+        var c = s._owner, v = he(s.type, s._source, c ? c.type : null);
+        Me.setExtraStackFrame(v);
+      } else
+        Me.setExtraStackFrame(null);
+    }
+    function nt(s, c, v, E, z) {
+      {
+        var L = Function.call.bind(re);
+        for (var _ in s)
+          if (L(s, _)) {
+            var O = void 0;
+            try {
+              if (typeof s[_] != "function") {
+                var Y = Error((E || "React class") + ": " + v + " type `" + _ + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof s[_] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
+                throw Y.name = "Invariant Violation", Y;
+              }
+              O = s[_](c, _, E, v, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
+            } catch (V) {
+              O = V;
+            }
+            O && !(O instanceof Error) && (xe(z), P("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", E || "React class", v, _, typeof O), xe(null)), O instanceof Error && !(O.message in We) && (We[O.message] = !0, xe(z), P("Failed %s type: %s", v, O.message), xe(null));
+          }
+      }
+    }
+    var lt = Array.isArray;
+    function je(s) {
+      return lt(s);
+    }
+    function ot(s) {
+      {
+        var c = typeof Symbol == "function" && Symbol.toStringTag, v = c && s[Symbol.toStringTag] || s.constructor.name || "Object";
+        return v;
+      }
+    }
+    function dt(s) {
+      try {
+        return Oe(s), !1;
+      } catch {
+        return !0;
+      }
+    }
+    function Oe(s) {
+      return "" + s;
+    }
+    function _e(s) {
+      if (dt(s))
+        return P("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", ot(s)), Oe(s);
+    }
+    var ze = D.ReactCurrentOwner, ct = {
+      key: !0,
+      ref: !0,
+      __self: !0,
+      __source: !0
+    }, Le, $e;
+    function pt(s) {
+      if (re.call(s, "ref")) {
+        var c = Object.getOwnPropertyDescriptor(s, "ref").get;
+        if (c && c.isReactWarning)
+          return !1;
+      }
+      return s.ref !== void 0;
+    }
+    function mt(s) {
+      if (re.call(s, "key")) {
+        var c = Object.getOwnPropertyDescriptor(s, "key").get;
+        if (c && c.isReactWarning)
+          return !1;
+      }
+      return s.key !== void 0;
+    }
+    function ht(s, c) {
+      typeof s.ref == "string" && ze.current;
+    }
+    function xt(s, c) {
+      {
+        var v = function() {
+          Le || (Le = !0, P("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", c));
+        };
+        v.isReactWarning = !0, Object.defineProperty(s, "key", {
+          get: v,
+          configurable: !0
+        });
+      }
+    }
+    function ut(s, c) {
+      {
+        var v = function() {
+          $e || ($e = !0, P("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", c));
+        };
+        v.isReactWarning = !0, Object.defineProperty(s, "ref", {
+          get: v,
+          configurable: !0
+        });
+      }
+    }
+    var gt = function(s, c, v, E, z, L, _) {
+      var O = {
+        // This tag allows us to uniquely identify this as a React Element
+        $$typeof: o,
+        // Built-in properties that belong on the element
+        type: s,
+        key: c,
+        ref: v,
+        props: _,
+        // Record the component responsible for creating this element.
+        _owner: L
+      };
+      return O._store = {}, Object.defineProperty(O._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: !1
+      }), Object.defineProperty(O, "_self", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !1,
+        value: E
+      }), Object.defineProperty(O, "_source", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !1,
+        value: z
+      }), Object.freeze && (Object.freeze(O.props), Object.freeze(O)), O;
+    };
+    function yt(s, c, v, E, z) {
+      {
+        var L, _ = {}, O = null, Y = null;
+        v !== void 0 && (_e(v), O = "" + v), mt(c) && (_e(c.key), O = "" + c.key), pt(c) && (Y = c.ref, ht(c, z));
+        for (L in c)
+          re.call(c, L) && !ct.hasOwnProperty(L) && (_[L] = c[L]);
+        if (s && s.defaultProps) {
+          var V = s.defaultProps;
+          for (L in V)
+            _[L] === void 0 && (_[L] = V[L]);
+        }
+        if (O || Y) {
+          var H = typeof s == "function" ? s.displayName || s.name || "Unknown" : s;
+          O && xt(_, H), Y && ut(_, H);
+        }
+        return gt(s, O, Y, z, E, ze.current, _);
+      }
+    }
+    var Ne = D.ReactCurrentOwner, qe = D.ReactDebugCurrentFrame;
+    function ae(s) {
+      if (s) {
+        var c = s._owner, v = he(s.type, s._source, c ? c.type : null);
+        qe.setExtraStackFrame(v);
+      } else
+        qe.setExtraStackFrame(null);
+    }
+    var we;
+    we = !1;
+    function Ce(s) {
+      return typeof s == "object" && s !== null && s.$$typeof === o;
+    }
+    function Ve() {
+      {
+        if (Ne.current) {
+          var s = F(Ne.current.type);
+          if (s)
+            return `
+
+Check the render method of \`` + s + "`.";
+        }
+        return "";
+      }
+    }
+    function kt(s) {
+      return "";
+    }
+    var He = {};
+    function ft(s) {
+      {
+        var c = Ve();
+        if (!c) {
+          var v = typeof s == "string" ? s : s.displayName || s.name;
+          v && (c = `
+
+Check the top-level render call using <` + v + ">.");
+        }
+        return c;
+      }
+    }
+    function Ye(s, c) {
+      {
+        if (!s._store || s._store.validated || s.key != null)
+          return;
+        s._store.validated = !0;
+        var v = ft(c);
+        if (He[v])
+          return;
+        He[v] = !0;
+        var E = "";
+        s && s._owner && s._owner !== Ne.current && (E = " It was passed a child from " + F(s._owner.type) + "."), ae(s), P('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', v, E), ae(null);
+      }
+    }
+    function Ue(s, c) {
+      {
+        if (typeof s != "object")
+          return;
+        if (je(s))
+          for (var v = 0; v < s.length; v++) {
+            var E = s[v];
+            Ce(E) && Ye(E, c);
+          }
+        else if (Ce(s))
+          s._store && (s._store.validated = !0);
+        else if (s) {
+          var z = B(s);
+          if (typeof z == "function" && z !== s.entries)
+            for (var L = z.call(s), _; !(_ = L.next()).done; )
+              Ce(_.value) && Ye(_.value, c);
+        }
+      }
+    }
+    function vt(s) {
+      {
+        var c = s.type;
+        if (c == null || typeof c == "string")
+          return;
+        var v;
+        if (typeof c == "function")
+          v = c.propTypes;
+        else if (typeof c == "object" && (c.$$typeof === l || // Note: Memo only checks outer props here.
+        // Inner props are checked in the reconciler.
+        c.$$typeof === k))
+          v = c.propTypes;
+        else
+          return;
+        if (v) {
+          var E = F(c);
+          nt(v, s.props, "prop", E, s);
+        } else if (c.PropTypes !== void 0 && !we) {
+          we = !0;
+          var z = F(c);
+          P("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", z || "Unknown");
+        }
+        typeof c.getDefaultProps == "function" && !c.getDefaultProps.isReactClassApproved && P("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
+      }
+    }
+    function bt(s) {
+      {
+        for (var c = Object.keys(s.props), v = 0; v < c.length; v++) {
+          var E = c[v];
+          if (E !== "children" && E !== "key") {
+            ae(s), P("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", E), ae(null);
+            break;
+          }
+        }
+        s.ref !== null && (ae(s), P("Invalid attribute `ref` supplied to `React.Fragment`."), ae(null));
+      }
+    }
+    var Ge = {};
+    function Je(s, c, v, E, z, L) {
+      {
+        var _ = a(s);
+        if (!_) {
+          var O = "";
+          (s === void 0 || typeof s == "object" && s !== null && Object.keys(s).length === 0) && (O += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
+          var Y = kt();
+          Y ? O += Y : O += Ve();
+          var V;
+          s === null ? V = "null" : je(s) ? V = "array" : s !== void 0 && s.$$typeof === o ? (V = "<" + (F(s.type) || "Unknown") + " />", O = " Did you accidentally export a JSX literal instead of a component?") : V = typeof s, P("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", V, O);
+        }
+        var H = yt(s, c, v, z, L);
+        if (H == null)
+          return H;
+        if (_) {
+          var J = c.children;
+          if (J !== void 0)
+            if (E)
+              if (je(J)) {
+                for (var ie = 0; ie < J.length; ie++)
+                  Ue(J[ie], s);
+                Object.freeze && Object.freeze(J);
+              } else
+                P("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
+            else
+              Ue(J, s);
+        }
+        if (re.call(c, "key")) {
+          var ee = F(s), U = Object.keys(c).filter(function(Tt) {
+            return Tt !== "key";
+          }), Se = U.length > 0 ? "{key: someKey, " + U.join(": ..., ") + ": ...}" : "{key: someKey}";
+          if (!Ge[ee + Se]) {
+            var St = U.length > 0 ? "{" + U.join(": ..., ") + ": ...}" : "{}";
+            P(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`, Se, ee, St, ee), Ge[ee + Se] = !0;
+          }
+        }
+        return s === j ? bt(H) : vt(H), H;
+      }
+    }
+    function jt(s, c, v) {
+      return Je(s, c, v, !0);
+    }
+    function Nt(s, c, v) {
+      return Je(s, c, v, !1);
+    }
+    var wt = Nt, Ct = jt;
+    le.Fragment = j, le.jsx = wt, le.jsxs = Ct;
+  }()), le;
+}
+process.env.NODE_ENV === "production" ? De.exports = Rt() : De.exports = Dt();
+var e = De.exports;
+const ue = {
+  storeName: "PopSite Originals",
+  categories: ["All", "Apparel", "Accessories", "Footwear", "Tech"],
+  products: [
+    {
+      id: "p1",
+      name: "Prismatic Hoodie",
+      price: 89.99,
+      category: "Apparel",
+      image: "https://images.unsplash.com/photo-1556821840-3a63f95609a7?auto=format&fit=crop&w=800&q=80",
+      description: "Premium cotton hoodie featuring a subtle iridescent logo. Perfect for chilly evenings and casual flexes.",
+      sizes: ["S", "M", "L", "XL"],
+      colors: ["Black", "Heather Grey", "Lavender"],
+      inStock: !0,
+      rating: 4.8,
+      reviews: 124
+    },
+    {
+      id: "p2",
+      name: "Aerodynamic Runners",
+      price: 145,
+      category: "Footwear",
+      image: "https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&w=800&q=80",
+      description: "Ultralight sneakers designed for maximum comfort. Carbon-infused sole brings explosive returns.",
+      sizes: ["8", "9", "10", "11", "12"],
+      colors: ["Neon Red", "Obsidian"],
+      inStock: !0,
+      rating: 4.9,
+      reviews: 89
+    },
+    {
+      id: "p3",
+      name: "Minimalist Chronograph",
+      price: 210,
+      category: "Accessories",
+      image: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&w=800&q=80",
+      description: "Matte black stainless steel with a sleek sapphire crystal face. Water resistant to 50 meters.",
+      sizes: ["One Size"],
+      colors: ["Matte Black"],
+      inStock: !1,
+      rating: 4.7,
+      reviews: 56
+    },
+    {
+      id: "p4",
+      name: "Noise-Cancelling Pods Pro",
+      price: 199.99,
+      category: "Tech",
+      image: "https://images.unsplash.com/photo-1606220588913-b3aecb2ac201?auto=format&fit=crop&w=800&q=80",
+      description: "Immersive audio experience with active noise cancellation and 24-hour battery life.",
+      sizes: [],
+      colors: ["White", "Space Gray"],
+      inStock: !0,
+      rating: 4.5,
+      reviews: 210
+    },
+    {
+      id: "p5",
+      name: "Urban Backpack",
+      price: 75,
+      category: "Accessories",
+      image: "https://images.unsplash.com/photo-1553062407-98eeb64c6a62?auto=format&fit=crop&w=800&q=80",
+      description: "Water-resistant commuter backpack with padded laptop sleeve and hidden anti-theft pockets.",
+      sizes: ["One Size"],
+      colors: ["Charcoal", "Olive Drab"],
+      inStock: !0,
+      rating: 4.6,
+      reviews: 178
+    },
+    {
+      id: "p6",
+      name: "Graphic Tee - The Wave",
+      price: 35,
+      category: "Apparel",
+      image: "https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?auto=format&fit=crop&w=800&q=80",
+      description: "Heavyweight boxy organic cotton tee with a retro wave graphic.",
+      sizes: ["S", "M", "L"],
+      colors: ["White", "Sand"],
+      inStock: !0,
+      rating: 4.3,
+      reviews: 45
+    }
+  ]
+};
+function It({ message: m, type: o = "success", onClose: n, duration: j = 3e3 }) {
+  const [u, N] = p(!0);
+  return $(() => {
+    const h = setTimeout(() => {
+      N(!1), setTimeout(() => {
+        n && n();
+      }, 300);
+    }, j);
+    return () => clearTimeout(h);
+  }, [j, n]), !u && !n ? null : /* @__PURE__ */ e.jsxs("div", { className: `pk-toast ${o} ${u ? "" : "pk-fade-out"}`, style: { opacity: u ? 1 : 0, transition: "opacity 0.3s ease-out" }, children: [
+    /* @__PURE__ */ e.jsx("div", { style: { fontSize: "1.25rem" }, children: o === "success" ? "✅" : o === "error" ? "❌" : "ℹ️" }),
+    /* @__PURE__ */ e.jsxs("div", { style: { flex: 1 }, children: [
+      /* @__PURE__ */ e.jsx("p", { className: "pk-label", style: { margin: 0, textTransform: "capitalize" }, children: o }),
+      /* @__PURE__ */ e.jsx("p", { className: "pk-text-sm", style: { margin: 0 }, children: m })
+    ] }),
+    /* @__PURE__ */ e.jsx(
+      "button",
+      {
+        onClick: () => {
+          N(!1), n && setTimeout(n, 300);
+        },
+        style: { background: "none", border: "none", cursor: "pointer", fontSize: "1.25rem", color: "var(--pk-text-muted)" },
+        children: "×"
+      }
+    )
+  ] });
+}
+function G() {
+  const [m, o] = p([]), n = (N, h = "success") => {
+    const A = Date.now();
+    o((l) => [...l, { id: A, message: N, type: h }]);
+  }, j = (N) => {
+    o((h) => h.filter((A) => A.id !== N));
+  };
+  return { showToast: n, ToastContainer: () => /* @__PURE__ */ e.jsx("div", { className: "pk-toast-container", children: m.map((N) => /* @__PURE__ */ e.jsx(
+    It,
+    {
+      message: N.message,
+      type: N.type,
+      onClose: () => j(N.id)
+    },
+    N.id
+  )) }) };
+}
+function Pt() {
+  const [m, o] = p("grid"), [n, j] = p(null), [u, N] = p([]), [h, A] = p(""), [l, T] = p("All"), [x, k] = p(!1), { showToast: g, ToastContainer: W } = G();
+  $(() => {
+    const t = localStorage.getItem("popsite_cart");
+    if (t)
+      try {
+        N(JSON.parse(t));
+      } catch {
+        console.error("Failed to parse cart");
+      }
+  }, []), $(() => {
+    localStorage.setItem("popsite_cart", JSON.stringify(u));
+  }, [u]);
+  const y = (t, a = 1500) => {
+    k(!0), setTimeout(() => {
+      k(!1), t();
+    }, a);
+  }, C = (t) => {
+    window.scrollTo({ top: 0, behavior: "smooth" }), j({ ...t, selectedSize: t.sizes[0] || null, selectedColor: t.colors[0] || null }), o("details");
+  }, B = () => {
+    if (!n.inStock) {
+      g("Product is currently out of stock", "error");
+      return;
+    }
+    const t = u.findIndex(
+      (i) => i.id === n.id && i.selectedSize === n.selectedSize && i.selectedColor === n.selectedColor
+    ), a = [...u];
+    t >= 0 ? a[t].quantity += 1 : a.push({ ...n, quantity: 1 }), N(a), g(`${n.name} added to cart!`, "success");
+  }, D = (t) => {
+    const a = [...u];
+    a.splice(t, 1), N(a), g("Item removed from cart", "info");
+  }, P = () => {
+    if (u.length === 0) {
+      g("Your cart is empty", "error");
+      return;
+    }
+    y(() => {
+      o("success"), N([]), g("Order placed successfully!", "success");
+    });
+  }, S = () => {
+    const t = `ID,Name,Category,Price,InStock,Rating
+`, a = ue.products.map(
+      (w) => `${w.id},"${w.name}","${w.category}",${w.price},${w.inStock},${w.rating}`
+    ).join(`
+`), i = new Blob([t + a], { type: "text/csv" }), f = URL.createObjectURL(i), F = document.createElement("a");
+    F.href = f, F.download = `products_export_${Date.now()}.csv`, F.click(), g("Catalog exported to CSV", "success");
+  }, d = u.reduce((t, a) => t + a.price * a.quantity, 0), b = () => {
+    const t = ue.products.filter((a) => {
+      const i = a.name.toLowerCase().includes(h.toLowerCase()), f = l === "All" || a.category === l;
+      return i && f;
+    });
+    return /* @__PURE__ */ e.jsxs("div", { className: "pk-container animate-fade-in", children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "pk-flex pk-justify-between pk-items-center", style: { marginBottom: "2rem", flexWrap: "wrap", gap: "1rem" }, children: [
+        /* @__PURE__ */ e.jsxs("div", { children: [
+          /* @__PURE__ */ e.jsx("h1", { className: "pk-heading-lg", style: { marginBottom: "0.5rem" }, children: ue.storeName }),
+          /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", children: "Discover premium gear for modern living." })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { className: "pk-flex pk-items-center", style: { gap: "1rem" }, children: [
+          /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-outline", onClick: S, children: "⬇️ Export CSV" }),
+          /* @__PURE__ */ e.jsxs("button", { className: "pk-btn pk-btn-primary", onClick: () => o("checkout"), children: [
+            "🛒 Cart (",
+            u.length,
+            ")"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { className: "pk-card pk-glass", style: { padding: "1.5rem", marginBottom: "2rem", display: "flex", gap: "1rem", flexWrap: "wrap", alignItems: "center" }, children: [
+        /* @__PURE__ */ e.jsx("div", { className: "pk-input-group", style: { margin: 0, flex: 1, minWidth: "250px" }, children: /* @__PURE__ */ e.jsx(
+          "input",
+          {
+            type: "text",
+            className: "pk-input",
+            placeholder: "Search products...",
+            value: h,
+            onChange: (a) => A(a.target.value)
+          }
+        ) }),
+        /* @__PURE__ */ e.jsx("div", { className: "pk-flex", style: { gap: "0.5rem", overflowX: "auto", paddingBottom: "4px" }, children: ue.categories.map((a) => /* @__PURE__ */ e.jsx(
+          "button",
+          {
+            className: l === a ? "pk-badge" : "pk-btn pk-btn-outline",
+            style: l !== a ? { padding: "0.25rem 0.75rem", borderRadius: "var(--pk-radius-full)", border: "1px solid var(--pk-border)" } : { cursor: "pointer" },
+            onClick: () => T(a),
+            children: a
+          },
+          a
+        )) })
+      ] }),
+      t.length === 0 ? /* @__PURE__ */ e.jsxs("div", { className: "pk-empty-state", children: [
+        /* @__PURE__ */ e.jsx("div", { className: "pk-empty-icon", children: "🏜️" }),
+        /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", children: "No products found" }),
+        /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", children: "Try adjusting your filters or search query." }),
+        /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-secondary", style: { marginTop: "1rem" }, onClick: () => {
+          A(""), T("All");
+        }, children: "Clear Filters" })
+      ] }) : /* @__PURE__ */ e.jsx("div", { className: "pk-grid pk-grid-responsive", children: t.map((a) => /* @__PURE__ */ e.jsxs("div", { className: "pk-card pk-card-interactive", onClick: () => C(a), style: { cursor: "pointer", display: "flex", flexDirection: "column" }, children: [
+        /* @__PURE__ */ e.jsxs("div", { style: { height: "250px", width: "100%", overflow: "hidden", backgroundColor: "var(--pk-primary-light)" }, children: [
+          /* @__PURE__ */ e.jsx(
+            "img",
+            {
+              src: a.image,
+              alt: a.name,
+              className: "pk-object-cover pk-w-full pk-h-full",
+              style: { transition: "transform 0.5s" },
+              onError: (i) => {
+                i.target.style.display = "none", i.target.nextSibling.style.display = "flex";
+              }
+            }
+          ),
+          /* @__PURE__ */ e.jsx("div", { style: { display: "none", width: "100%", height: "100%", background: "linear-gradient(135deg, var(--pk-primary), var(--pk-secondary))", color: "white", alignItems: "center", justifyContent: "center", fontSize: "2rem", fontWeight: "bold" }, children: a.name.substring(0, 2).toUpperCase() })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { className: "pk-card-body", style: { flex: 1, display: "flex", flexDirection: "column" }, children: [
+          /* @__PURE__ */ e.jsxs("div", { className: "pk-flex pk-justify-between pk-items-center", style: { marginBottom: "0.5rem" }, children: [
+            /* @__PURE__ */ e.jsx("span", { className: "pk-badge", children: a.category }),
+            /* @__PURE__ */ e.jsxs("span", { style: { fontSize: "0.875rem", color: "#f59e0b", fontWeight: 600 }, children: [
+              "★ ",
+              a.rating
+            ] })
+          ] }),
+          /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", style: { marginBottom: "0.5rem" }, children: a.name }),
+          /* @__PURE__ */ e.jsx("div", { className: "pk-text-body", style: { display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden", marginBottom: "1rem", flex: 1 }, children: a.description }),
+          /* @__PURE__ */ e.jsxs("div", { className: "pk-flex pk-justify-between pk-items-center", style: { marginTop: "auto" }, children: [
+            /* @__PURE__ */ e.jsxs("span", { className: "pk-heading-md", style: { color: "var(--pk-primary)" }, children: [
+              "$",
+              a.price.toFixed(2)
+            ] }),
+            !a.inStock && /* @__PURE__ */ e.jsx("span", { className: "pk-text-sm", style: { color: "var(--pk-danger)" }, children: "Out of Stock" })
+          ] })
+        ] })
+      ] }, a.id)) })
+    ] });
+  }, M = () => {
+    if (!n) return null;
+    const t = n;
+    return /* @__PURE__ */ e.jsxs("div", { className: "pk-container animate-fade-in", children: [
+      /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-outline", style: { marginBottom: "2rem" }, onClick: () => o("grid"), children: "← Back to Catalog" }),
+      /* @__PURE__ */ e.jsxs("div", { className: "pk-card", style: { display: "flex", flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ e.jsxs("div", { style: { flex: "1 1 400px", height: "500px", backgroundColor: "var(--pk-primary-light)", padding: "2rem" }, children: [
+          /* @__PURE__ */ e.jsx(
+            "img",
+            {
+              src: t.image,
+              alt: t.name,
+              className: "pk-object-cover pk-w-full pk-h-full",
+              style: { borderRadius: "var(--pk-radius-lg)", boxShadow: "var(--pk-shadow-lg)" },
+              onError: (a) => {
+                a.target.style.display = "none", a.target.nextSibling.style.display = "flex";
+              }
+            }
+          ),
+          /* @__PURE__ */ e.jsx("div", { style: { display: "none", width: "100%", height: "100%", background: "linear-gradient(135deg, var(--pk-primary), var(--pk-secondary))", color: "white", alignItems: "center", justifyContent: "center", fontSize: "4rem", fontWeight: "bold", borderRadius: "var(--pk-radius-lg)", boxShadow: "var(--pk-shadow-lg)" }, children: t.name.substring(0, 2).toUpperCase() })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { style: { flex: "1 1 400px", padding: "3rem" }, children: [
+          /* @__PURE__ */ e.jsxs("div", { className: "pk-flex pk-items-center", style: { gap: "1rem", marginBottom: "1rem" }, children: [
+            /* @__PURE__ */ e.jsx("span", { className: "pk-badge", children: t.category }),
+            /* @__PURE__ */ e.jsxs("span", { style: { fontSize: "1rem", color: "#f59e0b", fontWeight: 600 }, children: [
+              "★ ",
+              t.rating,
+              " (",
+              t.reviews,
+              " reviews)"
+            ] })
+          ] }),
+          /* @__PURE__ */ e.jsx("h1", { className: "pk-heading-xl", style: { marginBottom: "1rem" }, children: t.name }),
+          /* @__PURE__ */ e.jsxs("p", { className: "pk-heading-lg", style: { color: "var(--pk-primary)", marginBottom: "1.5rem" }, children: [
+            "$",
+            t.price.toFixed(2)
+          ] }),
+          /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", style: { fontSize: "1.125rem", marginBottom: "2rem" }, children: t.description }),
+          t.sizes && t.sizes.length > 0 && /* @__PURE__ */ e.jsxs("div", { style: { marginBottom: "1.5rem" }, children: [
+            /* @__PURE__ */ e.jsx("h4", { className: "pk-label", style: { marginBottom: "0.5rem" }, children: "Select Size" }),
+            /* @__PURE__ */ e.jsx("div", { className: "pk-flex", style: { gap: "0.5rem", flexWrap: "wrap" }, children: t.sizes.map((a) => /* @__PURE__ */ e.jsx(
+              "button",
+              {
+                className: t.selectedSize === a ? "pk-btn pk-btn-primary" : "pk-btn pk-btn-outline",
+                style: { padding: "0.5rem 1rem" },
+                onClick: () => j({ ...t, selectedSize: a }),
+                children: a
+              },
+              a
+            )) })
+          ] }),
+          t.colors && t.colors.length > 0 && /* @__PURE__ */ e.jsxs("div", { style: { marginBottom: "2.5rem" }, children: [
+            /* @__PURE__ */ e.jsx("h4", { className: "pk-label", style: { marginBottom: "0.5rem" }, children: "Select Color" }),
+            /* @__PURE__ */ e.jsx("div", { className: "pk-flex", style: { gap: "0.5rem", flexWrap: "wrap" }, children: t.colors.map((a) => /* @__PURE__ */ e.jsx(
+              "button",
+              {
+                className: t.selectedColor === a ? "pk-btn pk-btn-secondary" : "pk-btn pk-btn-outline",
+                onClick: () => j({ ...t, selectedColor: a }),
+                children: a
+              },
+              a
+            )) })
+          ] }),
+          /* @__PURE__ */ e.jsx(
+            "button",
+            {
+              className: `pk-btn pk-btn-primary pk-w-full ${t.inStock ? "" : "pk-btn-outline"}`,
+              style: { fontSize: "1.25rem", padding: "1rem" },
+              disabled: !t.inStock,
+              onClick: B,
+              children: t.inStock ? "🛒 Add to Cart" : "Out of Stock"
+            }
+          )
+        ] })
+      ] })
+    ] });
+  }, I = () => /* @__PURE__ */ e.jsxs("div", { className: "pk-container animate-fade-in", children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "pk-flex pk-justify-between pk-items-center", style: { marginBottom: "2rem" }, children: [
+      /* @__PURE__ */ e.jsx("h1", { className: "pk-heading-lg", children: "Your Cart" }),
+      /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-outline", onClick: () => o("grid"), children: "Keep Shopping" })
+    ] }),
+    u.length === 0 ? /* @__PURE__ */ e.jsxs("div", { className: "pk-empty-state", children: [
+      /* @__PURE__ */ e.jsx("div", { className: "pk-empty-icon", children: "🛍️" }),
+      /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", children: "Your cart is empty" }),
+      /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", style: { marginBottom: "2rem" }, children: "Looks like you haven't added anything yet." }),
+      /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-primary", onClick: () => o("grid"), children: "Start Shopping" })
+    ] }) : /* @__PURE__ */ e.jsxs("div", { className: "pk-grid", style: { gridTemplateColumns: "minmax(300px, 2fr) minmax(300px, 1fr)" }, children: [
+      /* @__PURE__ */ e.jsx("div", { className: "pk-flex pk-flex-col pk-gap-4", children: u.map((t, a) => /* @__PURE__ */ e.jsxs("div", { className: "pk-card pk-flex pk-items-center", style: { padding: "1rem", gap: "1.5rem" }, children: [
+        /* @__PURE__ */ e.jsx("div", { style: { width: "100px", height: "100px", borderRadius: "var(--pk-radius-md)", overflow: "hidden", background: "var(--pk-primary-light)" }, children: /* @__PURE__ */ e.jsx("img", { src: t.image, alt: t.name, className: "pk-object-cover pk-w-full pk-h-full" }) }),
+        /* @__PURE__ */ e.jsxs("div", { style: { flex: 1 }, children: [
+          /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", style: { fontSize: "1.25rem", marginBottom: "0.25rem" }, children: t.name }),
+          /* @__PURE__ */ e.jsxs("p", { className: "pk-text-sm", children: [
+            t.selectedColor && `Color: ${t.selectedColor}`,
+            t.selectedColor && t.selectedSize && " | ",
+            t.selectedSize && `Size: ${t.selectedSize}`
+          ] }),
+          /* @__PURE__ */ e.jsxs("p", { className: "pk-text-body", style: { fontWeight: 600, marginTop: "0.5rem" }, children: [
+            "Qty: ",
+            t.quantity
+          ] })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { className: "pk-flex pk-flex-col pk-items-center", style: { gap: "1rem", minWidth: "80px", alignItems: "flex-end" }, children: [
+          /* @__PURE__ */ e.jsxs("span", { className: "pk-heading-md", children: [
+            "$",
+            (t.price * t.quantity).toFixed(2)
+          ] }),
+          /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-outline", style: { padding: "0.25rem 0.5rem", color: "var(--pk-danger)", border: "none", background: "var(--pk-danger-light)" }, onClick: () => D(a), children: "Remove" })
+        ] })
+      ] }, a)) }),
+      /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsxs("div", { className: "pk-card", style: { position: "sticky", top: "100px" }, children: [
+        /* @__PURE__ */ e.jsx("div", { className: "pk-card-header", children: /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", children: "Order Summary" }) }),
+        /* @__PURE__ */ e.jsxs("div", { className: "pk-card-body pk-flex pk-flex-col pk-gap-4", children: [
+          /* @__PURE__ */ e.jsxs("div", { className: "pk-flex pk-justify-between", children: [
+            /* @__PURE__ */ e.jsx("span", { className: "pk-text-body", children: "Subtotal" }),
+            /* @__PURE__ */ e.jsxs("span", { style: { fontWeight: 600 }, children: [
+              "$",
+              d.toFixed(2)
+            ] })
+          ] }),
+          /* @__PURE__ */ e.jsxs("div", { className: "pk-flex pk-justify-between", children: [
+            /* @__PURE__ */ e.jsx("span", { className: "pk-text-body", children: "Shipping" }),
+            /* @__PURE__ */ e.jsx("span", { style: { fontWeight: 600 }, children: "Free" })
+          ] }),
+          /* @__PURE__ */ e.jsxs("div", { className: "pk-flex pk-justify-between", children: [
+            /* @__PURE__ */ e.jsx("span", { className: "pk-text-body", children: "Tax (Estimated)" }),
+            /* @__PURE__ */ e.jsxs("span", { style: { fontWeight: 600 }, children: [
+              "$",
+              (d * 0.08).toFixed(2)
+            ] })
+          ] }),
+          /* @__PURE__ */ e.jsx("hr", { style: { border: 0, borderTop: "1px solid var(--pk-border)", margin: "0.5rem 0" } }),
+          /* @__PURE__ */ e.jsxs("div", { className: "pk-flex pk-justify-between pk-items-center", children: [
+            /* @__PURE__ */ e.jsx("span", { className: "pk-heading-md", children: "Total" }),
+            /* @__PURE__ */ e.jsxs("span", { className: "pk-heading-lg", style: { color: "var(--pk-primary)" }, children: [
+              "$",
+              (d * 1.08).toFixed(2)
+            ] })
+          ] }),
+          /* @__PURE__ */ e.jsx(
+            "button",
+            {
+              className: "pk-btn pk-btn-primary pk-w-full",
+              style: { marginTop: "1rem", fontSize: "1.25rem", padding: "1rem" },
+              onClick: P,
+              children: "Proceed to Payment"
+            }
+          )
+        ] })
+      ] }) })
+    ] })
+  ] }), r = () => /* @__PURE__ */ e.jsx("div", { className: "pk-container animate-fade-in", style: { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "60vh" }, children: /* @__PURE__ */ e.jsxs("div", { className: "pk-card pk-text-center", style: { padding: "4rem 2rem", maxWidth: "600px" }, children: [
+    /* @__PURE__ */ e.jsx("div", { style: { fontSize: "5rem", marginBottom: "1rem" }, children: "🎉" }),
+    /* @__PURE__ */ e.jsx("h1", { className: "pk-heading-xl", style: { marginBottom: "1rem" }, children: "Order Confirmed!" }),
+    /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", style: { fontSize: "1.25rem", marginBottom: "2rem" }, children: "Thank you for your purchase. We've sent a receipt to your email and your items will ship shortly." }),
+    /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-primary", onClick: () => o("grid"), children: "Return to Store" })
+  ] }) });
+  return /* @__PURE__ */ e.jsxs("div", { style: { position: "relative", minHeight: "100vh", backgroundColor: "var(--pk-bg-main)" }, children: [
+    x && /* @__PURE__ */ e.jsxs("div", { style: { position: "fixed", inset: 0, backgroundColor: "rgba(255,255,255,0.7)", zIndex: 100, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", backdropFilter: "blur(4px)" }, children: [
+      /* @__PURE__ */ e.jsx("div", { className: "pk-skeleton", style: { width: "80px", height: "80px", borderRadius: "50%", marginBottom: "1rem" } }),
+      /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", children: "Processing..." })
+    ] }),
+    /* @__PURE__ */ e.jsx("style", { children: `
+        .animate-fade-in { animation: popsiteFadeIn 0.4s ease-out; }
+        @keyframes popsiteFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+      ` }),
+    m === "grid" && b(),
+    m === "details" && M(),
+    m === "checkout" && I(),
+    m === "success" && r(),
+    /* @__PURE__ */ e.jsx(W, {})
+  ] });
+}
+const te = {
+  cinemaName: "Starlight Cinemas",
+  movies: [
+    {
+      id: "m1",
+      title: "Neon Horizon",
+      genre: "Sci-Fi / Cyberpunk",
+      runtime: "2h 15m",
+      rating: "PG-13",
+      image: "https://images.unsplash.com/photo-1536440136628-849c177e76a1?auto=format&fit=crop&w=800&q=80",
+      synopsis: "In a dystopian cyberpunk future, a rogue hacker discovers a code that could alter reality itself.",
+      showtimes: ["14:00", "17:30", "20:00", "22:45"]
+    },
+    {
+      id: "m2",
+      title: "The Silent Peak",
+      genre: "Thriller / Mystery",
+      runtime: "1h 50m",
+      rating: "R",
+      image: "https://images.unsplash.com/photo-1478720568477-152d9b164e26?auto=format&fit=crop&w=800&q=80",
+      synopsis: "A group of mountaineers gets trapped during a blizzard, only to realize they are not alone on the mountain.",
+      showtimes: ["15:15", "18:45", "21:30"]
+    },
+    {
+      id: "m3",
+      title: "Echoes of Eternity",
+      genre: "Romance / Drama",
+      runtime: "2h 05m",
+      rating: "PG",
+      image: "https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=800&q=80",
+      synopsis: "Two lovers from different centuries communicate through an ancient artifact, fighting time to be together.",
+      showtimes: ["13:00", "16:00", "19:00"]
+    },
+    {
+      id: "m4",
+      title: "Galactic Drift",
+      genre: "Action / Adventure",
+      runtime: "2h 30m",
+      rating: "PG-13",
+      image: "https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=800&q=80",
+      synopsis: "An epic space opera following a band of smugglers trying to outrun a massive intergalactic empire.",
+      showtimes: ["12:00", "16:30", "20:15", "23:00"]
+    }
+  ],
+  pricing: {
+    standard: 12,
+    vip: 25
+  }
+};
+function Et() {
+  const [m, o] = p("grid"), [n, j] = p(null), [u, N] = p(""), [h, A] = p([]), [l, T] = p([]), [x, k] = p(""), [g, W] = p(!1), { showToast: y, ToastContainer: C } = G();
+  $(() => {
+    const t = localStorage.getItem("popsite_movie_tickets");
+    if (t)
+      try {
+        T(JSON.parse(t));
+      } catch {
+      }
+  }, []), $(() => {
+    l.length > 0 && localStorage.setItem("popsite_movie_tickets", JSON.stringify(l));
+  }, [l]);
+  const B = (t, a = 1500) => {
+    W(!0), setTimeout(() => {
+      W(!1), t();
+    }, a);
+  }, D = (t) => {
+    window.scrollTo({ top: 0, behavior: "smooth" }), j(t), N(""), A([]), o("details");
+  }, P = (t) => {
+    A(
+      (a) => a.includes(t) ? a.filter((i) => i !== t) : [...a, t]
+    );
+  }, S = () => h.reduce((t, a) => {
+    const i = a.startsWith("V");
+    return t + (i ? te.pricing.vip : te.pricing.standard);
+  }, 0), d = () => {
+    if (h.length === 0) {
+      y("Please select at least one seat", "error");
+      return;
+    }
+    B(() => {
+      const t = {
+        id: `TK-${Math.floor(Math.random() * 1e5)}`,
+        movie: n,
+        showtime: u,
+        seats: h,
+        total: S()
+      };
+      T((a) => [...a, t]), y("Payment successful! Enjoy the movie.", "success"), o("ticket");
+    });
+  }, b = () => {
+    const t = te.movies.filter(
+      (a) => a.title.toLowerCase().includes(x.toLowerCase()) || a.genre.toLowerCase().includes(x.toLowerCase())
+    );
+    return /* @__PURE__ */ e.jsxs("div", { className: "pk-container animate-fade-in", children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "pk-flex pk-justify-between pk-items-center", style: { marginBottom: "2rem" }, children: [
+        /* @__PURE__ */ e.jsxs("div", { children: [
+          /* @__PURE__ */ e.jsx("h1", { className: "pk-heading-lg", style: { marginBottom: "0.5rem" }, children: te.cinemaName }),
+          /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", children: "Experience the magic of cinema." })
+        ] }),
+        /* @__PURE__ */ e.jsxs(
+          "button",
+          {
+            className: "pk-btn pk-btn-outline",
+            onClick: () => {
+              l.length > 0 ? o("ticket") : y("No tickets booked yet.", "info");
+            },
+            children: [
+              "🎫 My Tickets (",
+              l.length,
+              ")"
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e.jsx("div", { className: "pk-card pk-glass", style: { padding: "1.5rem", marginBottom: "2rem" }, children: /* @__PURE__ */ e.jsx(
+        "input",
+        {
+          type: "text",
+          className: "pk-input pk-w-full",
+          placeholder: "Search movies by title or genre...",
+          value: x,
+          onChange: (a) => k(a.target.value)
+        }
+      ) }),
+      t.length === 0 ? /* @__PURE__ */ e.jsxs("div", { className: "pk-empty-state", children: [
+        /* @__PURE__ */ e.jsx("div", { className: "pk-empty-icon", children: "🍿" }),
+        /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", children: "No movies found" })
+      ] }) : /* @__PURE__ */ e.jsx("div", { className: "pk-grid pk-grid-responsive", children: t.map((a) => /* @__PURE__ */ e.jsxs("div", { className: "pk-card pk-card-interactive", onClick: () => D(a), style: { cursor: "pointer" }, children: [
+        /* @__PURE__ */ e.jsxs("div", { style: { height: "350px", background: "var(--pk-primary-light)" }, children: [
+          /* @__PURE__ */ e.jsx(
+            "img",
+            {
+              src: a.image,
+              alt: a.title,
+              className: "pk-w-full pk-h-full pk-object-cover",
+              onError: (i) => {
+                i.target.style.display = "none", i.target.nextSibling.style.display = "flex";
+              }
+            }
+          ),
+          /* @__PURE__ */ e.jsx("div", { style: { display: "none", width: "100%", height: "100%", background: "linear-gradient(135deg, var(--pk-primary), var(--pk-secondary))", color: "white", alignItems: "center", justifyContent: "center", fontSize: "2rem", fontWeight: "bold" }, children: a.title[0] })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { className: "pk-card-body", children: [
+          /* @__PURE__ */ e.jsx("span", { className: "pk-badge", style: { marginBottom: "0.5rem", display: "inline-block" }, children: a.rating }),
+          /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", style: { marginBottom: "0.25rem" }, children: a.title }),
+          /* @__PURE__ */ e.jsxs("p", { className: "pk-text-sm", style: { marginBottom: "0.5rem" }, children: [
+            a.genre,
+            " • ",
+            a.runtime
+          ] })
+        ] })
+      ] }, a.id)) })
+    ] });
+  }, M = () => /* @__PURE__ */ e.jsxs("div", { className: "pk-container animate-fade-in", children: [
+    /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-outline", style: { marginBottom: "2rem" }, onClick: () => o("grid"), children: "← Back" }),
+    /* @__PURE__ */ e.jsxs("div", { className: "pk-card pk-flex", style: { overflow: "hidden", flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ e.jsx("div", { style: { flex: "1 1 300px", minHeight: "400px" }, children: /* @__PURE__ */ e.jsx("img", { src: n.image, alt: n.title, className: "pk-w-full pk-h-full pk-object-cover" }) }),
+      /* @__PURE__ */ e.jsxs("div", { style: { flex: "2 1 400px", padding: "3rem" }, children: [
+        /* @__PURE__ */ e.jsxs("div", { className: "pk-flex pk-items-center pk-gap-4", style: { marginBottom: "1rem" }, children: [
+          /* @__PURE__ */ e.jsx("span", { className: "pk-badge", children: n.rating }),
+          /* @__PURE__ */ e.jsxs("span", { className: "pk-text-sm", children: [
+            n.genre,
+            " • ",
+            n.runtime
+          ] })
+        ] }),
+        /* @__PURE__ */ e.jsx("h1", { className: "pk-heading-xl", style: { marginBottom: "1rem" }, children: n.title }),
+        /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", style: { fontSize: "1.125rem", marginBottom: "2rem" }, children: n.synopsis }),
+        /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", style: { marginBottom: "1rem" }, children: "Select Showtime" }),
+        /* @__PURE__ */ e.jsx("div", { className: "pk-flex", style: { gap: "1rem", flexWrap: "wrap", marginBottom: "2rem" }, children: n.showtimes.map((t) => /* @__PURE__ */ e.jsx(
+          "button",
+          {
+            className: u === t ? "pk-btn pk-btn-primary" : "pk-btn pk-btn-outline",
+            onClick: () => N(t),
+            children: t
+          },
+          t
+        )) }),
+        /* @__PURE__ */ e.jsx(
+          "button",
+          {
+            className: "pk-btn pk-btn-primary",
+            style: { fontSize: "1.25rem", padding: "1rem 2rem" },
+            disabled: !u,
+            onClick: () => o("selector"),
+            children: "Continue to Seat Selection"
+          }
+        )
+      ] })
+    ] })
+  ] }), I = () => {
+    const t = ["A", "B", "C", "D", "E", "V1", "V2"], a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+    return /* @__PURE__ */ e.jsxs("div", { className: "pk-container animate-fade-in pk-flex pk-flex-col pk-items-center", children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "pk-w-full pk-flex pk-justify-between", style: { marginBottom: "2rem" }, children: [
+        /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-outline", onClick: () => o("details"), children: "← Back" }),
+        /* @__PURE__ */ e.jsxs("h2", { className: "pk-heading-md", children: [
+          n.title,
+          " - ",
+          u
+        ] })
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { className: "pk-card", style: { padding: "3rem", width: "100%", maxWidth: "800px" }, children: [
+        /* @__PURE__ */ e.jsx("div", { style: { borderBottom: "6px solid var(--pk-primary-light)", paddingBottom: "1rem", textAlign: "center", marginBottom: "3rem", borderRadius: "50% 50% 0 0 / 20px 20px 0 0" }, children: /* @__PURE__ */ e.jsx("span", { className: "pk-text-muted", style: { letterSpacing: "0.5em", textTransform: "uppercase" }, children: "Screen" }) }),
+        /* @__PURE__ */ e.jsx("div", { className: "pk-flex pk-flex-col pk-items-center pk-gap-4", children: t.map((i) => /* @__PURE__ */ e.jsxs("div", { className: "pk-flex pk-items-center", style: { gap: "0.5rem" }, children: [
+          /* @__PURE__ */ e.jsx("span", { style: { width: "30px", textAlign: "center", fontWeight: "bold", color: "var(--pk-text-muted)" }, children: i }),
+          /* @__PURE__ */ e.jsx("div", { className: "pk-flex", style: { gap: "0.5rem" }, children: a.map((f) => {
+            const F = `${i}${f}`, w = h.includes(F), R = i.startsWith("V"), q = (i.charCodeAt(0) + f) % 7 === 0;
+            return /* @__PURE__ */ e.jsx(
+              "button",
+              {
+                disabled: q,
+                style: {
+                  width: "40px",
+                  height: "40px",
+                  borderRadius: "8px 8px 4px 4px",
+                  border: "none",
+                  cursor: q ? "not-allowed" : "pointer",
+                  background: q ? "var(--pk-border)" : w ? "var(--pk-primary)" : R ? "#f59e0b" : "var(--pk-primary-light)",
+                  color: w ? "white" : "transparent",
+                  transition: "all 0.2s"
+                },
+                onClick: () => P(F),
+                children: w ? "✓" : ""
+              },
+              F
+            );
+          }) }),
+          /* @__PURE__ */ e.jsx("span", { style: { width: "30px" } })
+        ] }, i)) }),
+        /* @__PURE__ */ e.jsxs("div", { className: "pk-flex pk-justify-center", style: { marginTop: "3rem", gap: "2rem" }, children: [
+          /* @__PURE__ */ e.jsxs("div", { className: "pk-flex pk-items-center pk-gap-4", children: [
+            /* @__PURE__ */ e.jsx("div", { style: { width: 20, height: 20, background: "var(--pk-border)", borderRadius: "4px" } }),
+            " Unavailable"
+          ] }),
+          /* @__PURE__ */ e.jsxs("div", { className: "pk-flex pk-items-center pk-gap-4", style: { gap: "0.5rem" }, children: [
+            /* @__PURE__ */ e.jsx("div", { style: { width: 20, height: 20, background: "var(--pk-primary-light)", borderRadius: "4px" } }),
+            " Standard ($",
+            te.pricing.standard,
+            ")"
+          ] }),
+          /* @__PURE__ */ e.jsxs("div", { className: "pk-flex pk-items-center pk-gap-4", style: { gap: "0.5rem" }, children: [
+            /* @__PURE__ */ e.jsx("div", { style: { width: 20, height: 20, background: "#f59e0b", borderRadius: "4px" } }),
+            " VIP ($",
+            te.pricing.vip,
+            ")"
+          ] })
+        ] })
+      ] }),
+      h.length > 0 && /* @__PURE__ */ e.jsxs("div", { className: "pk-card", style: { position: "fixed", bottom: "2rem", width: "calc(100% - 4rem)", maxWidth: "800px", zIndex: 10, padding: "1.5rem", display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+        /* @__PURE__ */ e.jsxs("div", { children: [
+          /* @__PURE__ */ e.jsxs("div", { className: "pk-text-sm", children: [
+            "Selected Seats: ",
+            /* @__PURE__ */ e.jsx("span", { style: { fontWeight: 600 }, children: h.join(", ") })
+          ] }),
+          /* @__PURE__ */ e.jsxs("div", { className: "pk-heading-md", style: { color: "var(--pk-primary)" }, children: [
+            "Total: $",
+            S().toFixed(2)
+          ] })
+        ] }),
+        /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-primary", style: { padding: "1rem 2rem", fontSize: "1.125rem" }, onClick: d, children: "Pay Now" })
+      ] })
+    ] });
+  }, r = () => {
+    const t = l[l.length - 1];
+    return t ? /* @__PURE__ */ e.jsx("div", { className: "pk-container animate-fade-in pk-flex pk-justify-center pk-items-center", style: { minHeight: "80vh" }, children: /* @__PURE__ */ e.jsxs("div", { className: "pk-card", style: { width: "100%", maxWidth: "600px", overflow: "hidden" }, children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "pk-card-header", style: { background: "linear-gradient(135deg, var(--pk-primary), var(--pk-secondary))", color: "white", padding: "3rem 2rem", textAlign: "center" }, children: [
+        /* @__PURE__ */ e.jsx("h1", { className: "pk-heading-lg", style: { marginBottom: "0.5rem" }, children: te.cinemaName }),
+        /* @__PURE__ */ e.jsxs("p", { className: "pk-text-body", style: { color: "rgba(255,255,255,0.8)" }, children: [
+          "Admit ",
+          t.seats.length
+        ] })
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { className: "pk-card-body", style: { padding: "3rem 2rem" }, children: [
+        /* @__PURE__ */ e.jsx("h2", { className: "pk-heading-xl", style: { marginBottom: "1rem" }, children: t.movie.title }),
+        /* @__PURE__ */ e.jsxs("div", { className: "pk-grid", style: { gridTemplateColumns: "1fr 1fr", gap: "2rem", marginBottom: "2rem" }, children: [
+          /* @__PURE__ */ e.jsxs("div", { children: [
+            /* @__PURE__ */ e.jsx("p", { className: "pk-label pk-text-muted", children: "Date & Time" }),
+            /* @__PURE__ */ e.jsxs("p", { className: "pk-heading-md", children: [
+              "Today, ",
+              t.showtime
+            ] })
+          ] }),
+          /* @__PURE__ */ e.jsxs("div", { children: [
+            /* @__PURE__ */ e.jsx("p", { className: "pk-label pk-text-muted", children: "Seats" }),
+            /* @__PURE__ */ e.jsx("p", { className: "pk-heading-md", style: { color: "var(--pk-primary)" }, children: t.seats.join(", ") })
+          ] }),
+          /* @__PURE__ */ e.jsxs("div", { children: [
+            /* @__PURE__ */ e.jsx("p", { className: "pk-label pk-text-muted", children: "Screen" }),
+            /* @__PURE__ */ e.jsx("p", { className: "pk-heading-md", children: "IMAX 3" })
+          ] }),
+          /* @__PURE__ */ e.jsxs("div", { children: [
+            /* @__PURE__ */ e.jsx("p", { className: "pk-label pk-text-muted", children: "Booking ID" }),
+            /* @__PURE__ */ e.jsx("p", { className: "pk-heading-md", children: t.id })
+          ] })
+        ] }),
+        /* @__PURE__ */ e.jsx("div", { style: { borderTop: "2px dashed var(--pk-border)", paddingTop: "2rem", display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ e.jsx("div", { style: { height: "60px", width: "80%", background: "linear-gradient(90deg, black 0%, black 5%, transparent 5%, transparent 10%, black 10%, black 20%, transparent 20%, transparent 25%, black 25%, black 40%, transparent 40%, transparent 45%, black 45%, black 50%, transparent 50%, transparent 60%, black 60%, black 75%, transparent 75%, transparent 80%, black 80%, black 95%, transparent 95%, transparent 100%)" } }) })
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { className: "pk-card-footer pk-flex pk-justify-between", children: [
+        /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-outline", onClick: () => o("grid"), children: "Home" }),
+        /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-secondary", onClick: () => window.print(), children: "Print Ticket" })
+      ] })
+    ] }) }) : null;
+  };
+  return /* @__PURE__ */ e.jsxs("div", { style: { position: "relative", minHeight: "100vh" }, children: [
+    g && /* @__PURE__ */ e.jsxs("div", { style: { position: "fixed", inset: 0, backgroundColor: "rgba(255,255,255,0.7)", zIndex: 100, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", backdropFilter: "blur(4px)" }, children: [
+      /* @__PURE__ */ e.jsx("div", { className: "pk-skeleton", style: { width: "80px", height: "80px", borderRadius: "50%", marginBottom: "1rem" } }),
+      /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", children: "Processing..." })
+    ] }),
+    m === "grid" && b(),
+    m === "details" && M(),
+    m === "selector" && I(),
+    m === "ticket" && r(),
+    /* @__PURE__ */ e.jsx(C, {})
+  ] });
+}
+const Z = {
+  currentUser: {
+    id: "me",
+    name: "Alex Designer",
+    avatar: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=150&q=80"
+  },
+  conversations: [
+    {
+      id: "c1",
+      contact: {
+        id: "u1",
+        name: "Sarah Engineering",
+        avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=150&q=80",
+        status: "online"
+      },
+      messages: [
+        { id: "m1", senderId: "u1", text: "Hey! Did you get a chance to look at the new PopSite UI designs?", timestamp: "10:05 AM" },
+        { id: "m2", senderId: "me", text: "Yes! They look absolutely stunning. The glassmorphism is on point.", timestamp: "10:12 AM" },
+        { id: "m3", senderId: "u1", text: "Awesome! We should deploy the new modules by tomorrow.", timestamp: "10:14 AM" }
+      ],
+      unread: 0
+    },
+    {
+      id: "c2",
+      contact: {
+        id: "u2",
+        name: "PopSite AI Assistant",
+        avatar: "https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?auto=format&fit=crop&w=150&q=80",
+        status: "online"
+      },
+      messages: [
+        { id: "m1", senderId: "u2", text: "Hello! I'm your virtual UI assistant. How can I help you today?", timestamp: "09:00 AM" }
+      ],
+      unread: 1
+    },
+    {
+      id: "c3",
+      contact: {
+        id: "u3",
+        name: "Marketing Team",
+        avatar: "https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=150&q=80",
+        status: "offline"
+      },
+      messages: [
+        { id: "m1", senderId: "u3", text: "The new campaign numbers are looking good.", timestamp: "Yesterday" }
+      ],
+      unread: 0
+    }
+  ],
+  autoReplies: [
+    "That sounds great!",
+    "I completely agree. Let's make it happen.",
+    "Could you clarify that a bit more?",
+    "Fascinating! The possibilities are endless.",
+    "I've updated the system parameters accordingly.",
+    "Let me think about that for a second..."
+  ]
+};
+function Ft() {
+  var I;
+  const [m, o] = p(Z.conversations), [n, j] = p(((I = Z.conversations[0]) == null ? void 0 : I.id) || null), [u, N] = p(""), [h, A] = p(""), [l, T] = p(!1), [x, k] = p(!1), [g, W] = p(!1), y = Bt(null), { showToast: C, ToastContainer: B } = G(), D = m.find((r) => r.id === n);
+  $(() => {
+    const r = localStorage.getItem("popsite_chats");
+    if (r)
+      try {
+        o(JSON.parse(r));
+      } catch {
+      }
+  }, []), $(() => {
+    localStorage.setItem("popsite_chats", JSON.stringify(m));
+  }, [m]), $(() => {
+    y.current && y.current.scrollIntoView({ behavior: "smooth" });
+  }, [D == null ? void 0 : D.messages, l]);
+  const P = (r, t = 1500) => {
+    W(!0), setTimeout(() => {
+      W(!1), r();
+    }, t);
+  }, S = (r) => {
+    if (r.preventDefault(), !u.trim() || !D) return;
+    const t = {
+      id: `msg-${Date.now()}`,
+      senderId: Z.currentUser.id,
+      text: u.trim(),
+      timestamp: (/* @__PURE__ */ new Date()).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
+    }, a = m.map(
+      (i) => i.id === n ? { ...i, messages: [...i.messages, t], unread: 0 } : i
+    );
+    o(a), N(""), T(!0), setTimeout(() => {
+      T(!1);
+      const i = Z.autoReplies, f = i[Math.floor(Math.random() * i.length)], F = {
+        id: `msg-bot-${Date.now()}`,
+        senderId: D.contact.id,
+        text: f,
+        timestamp: (/* @__PURE__ */ new Date()).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
+      };
+      o((w) => w.map(
+        (R) => R.id === n ? { ...R, messages: [...R.messages, F] } : R
+      )), Math.random() > 0.5 && C(`New message from ${D.contact.name}`, "info");
+    }, 2e3);
+  }, d = (r) => {
+    o((t) => t.map((a) => a.id === r ? { ...a, unread: 0 } : a)), j(r), k(!1);
+  }, b = () => {
+    P(() => {
+      C("Profile updated successfully", "success"), k(!1);
+    });
+  }, M = m.filter(
+    (r) => r.contact.name.toLowerCase().includes(h.toLowerCase())
+  );
+  return /* @__PURE__ */ e.jsxs("div", { className: "pk-flex animate-fade-in", style: { height: "100vh", backgroundColor: "var(--pk-bg-main)", overflow: "hidden" }, children: [
+    g && /* @__PURE__ */ e.jsxs("div", { style: { position: "fixed", inset: 0, backgroundColor: "rgba(255,255,255,0.7)", zIndex: 100, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", backdropFilter: "blur(4px)" }, children: [
+      /* @__PURE__ */ e.jsx("div", { className: "pk-skeleton", style: { width: "80px", height: "80px", borderRadius: "50%", marginBottom: "1rem" } }),
+      /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", children: "Processing..." })
+    ] }),
+    /* @__PURE__ */ e.jsxs("div", { className: "pk-card", style: { width: "350px", height: "100%", borderRadius: 0, borderRight: "1px solid var(--pk-border)", display: "flex", flexDirection: "column", zIndex: 10 }, children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "pk-card-header pk-flex pk-justify-between pk-items-center", style: { padding: "1.5rem", background: "var(--pk-bg-glass)", backdropFilter: "blur(10px)" }, children: [
+        /* @__PURE__ */ e.jsxs("div", { className: "pk-flex pk-items-center pk-gap-4", style: { cursor: "pointer" }, onClick: () => k(!0), children: [
+          /* @__PURE__ */ e.jsx(
+            "img",
+            {
+              src: Z.currentUser.avatar,
+              alt: "Me",
+              style: { width: "40px", height: "40px", borderRadius: "50%", objectFit: "cover" },
+              onError: (r) => {
+                r.target.style.display = "none", r.target.nextSibling.style.display = "flex";
+              }
+            }
+          ),
+          /* @__PURE__ */ e.jsx("div", { style: { display: "none", width: "40px", height: "40px", background: "var(--pk-primary)", color: "white", alignItems: "center", justifyContent: "center", borderRadius: "50%", fontWeight: "bold" }, children: "ME" }),
+          /* @__PURE__ */ e.jsxs("div", { children: [
+            /* @__PURE__ */ e.jsx("h3", { className: "pk-label", children: Z.currentUser.name }),
+            /* @__PURE__ */ e.jsx("span", { className: "pk-text-sm", style: { color: "var(--pk-success)" }, children: "● Online" })
+          ] })
+        ] }),
+        /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-outline", style: { padding: "0.5rem", borderRadius: "50%" }, children: "+ 💬" })
+      ] }),
+      /* @__PURE__ */ e.jsx("div", { style: { padding: "1rem" }, children: /* @__PURE__ */ e.jsx(
+        "input",
+        {
+          type: "text",
+          className: "pk-input pk-w-full",
+          placeholder: "Search conversations...",
+          value: h,
+          onChange: (r) => A(r.target.value)
+        }
+      ) }),
+      /* @__PURE__ */ e.jsx("div", { style: { flex: 1, overflowY: "auto" }, children: M.length === 0 ? /* @__PURE__ */ e.jsx("div", { className: "pk-empty-state", style: { padding: "2rem", border: "none" }, children: /* @__PURE__ */ e.jsx("div", { className: "pk-text-sm", children: "No chats found." }) }) : M.map((r) => {
+        var t;
+        return /* @__PURE__ */ e.jsxs(
+          "div",
+          {
+            className: `pk-flex pk-items-center pk-gap-4 ${n === r.id ? "pk-bg-glass" : ""}`,
+            style: { padding: "1rem 1.5rem", cursor: "pointer", borderBottom: "1px solid var(--pk-border)", transition: "background 0.2s", background: n === r.id ? "var(--pk-primary-light)" : "transparent" },
+            onClick: () => d(r.id),
+            children: [
+              /* @__PURE__ */ e.jsxs("div", { style: { position: "relative" }, children: [
+                /* @__PURE__ */ e.jsx(
+                  "img",
+                  {
+                    src: r.contact.avatar,
+                    alt: "",
+                    style: { width: "50px", height: "50px", borderRadius: "50%", objectFit: "cover" },
+                    onError: (a) => {
+                      a.target.style.display = "none", a.target.nextSibling.style.display = "flex";
+                    }
+                  }
+                ),
+                /* @__PURE__ */ e.jsx("div", { style: { display: "none", width: "50px", height: "50px", background: "var(--pk-secondary)", color: "white", alignItems: "center", justifyContent: "center", borderRadius: "50%", fontWeight: "bold" }, children: r.contact.name[0] }),
+                /* @__PURE__ */ e.jsx("div", { style: { position: "absolute", bottom: 2, right: 2, width: 12, height: 12, borderRadius: "50%", background: r.contact.status === "online" ? "var(--pk-success)" : "var(--pk-text-muted)", border: "2px solid white" } })
+              ] }),
+              /* @__PURE__ */ e.jsxs("div", { style: { flex: 1, overflow: "hidden" }, children: [
+                /* @__PURE__ */ e.jsxs("div", { className: "pk-flex pk-justify-between pk-items-center", children: [
+                  /* @__PURE__ */ e.jsx("h4", { className: "pk-label", style: { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: r.contact.name }),
+                  r.messages.length > 0 && /* @__PURE__ */ e.jsx("span", { className: "pk-text-sm", style: { fontSize: "0.75rem" }, children: r.messages[r.messages.length - 1].timestamp })
+                ] }),
+                /* @__PURE__ */ e.jsxs("div", { className: "pk-flex pk-justify-between pk-items-center", children: [
+                  /* @__PURE__ */ e.jsx("p", { className: "pk-text-sm", style: { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", fontWeight: r.unread > 0 ? 600 : 400, color: r.unread > 0 ? "var(--pk-text-main)" : "var(--pk-text-muted)" }, children: ((t = r.messages[r.messages.length - 1]) == null ? void 0 : t.text) || "No messages yet." }),
+                  r.unread > 0 && /* @__PURE__ */ e.jsx("span", { className: "pk-badge", style: { background: "var(--pk-primary)", color: "white", minWidth: "20px", textAlign: "center" }, children: r.unread })
+                ] })
+              ] })
+            ]
+          },
+          r.id
+        );
+      }) })
+    ] }),
+    /* @__PURE__ */ e.jsx("div", { style: { flex: 1, display: "flex", flexDirection: "column", backgroundColor: "var(--pk-bg-main)", position: "relative" }, children: x ? /* @__PURE__ */ e.jsx("div", { className: "pk-container", style: { flex: 1, display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ e.jsxs("div", { className: "pk-card", style: { width: "100%", maxWidth: "500px", padding: "3rem" }, children: [
+      /* @__PURE__ */ e.jsx("h2", { className: "pk-heading-lg", style: { marginBottom: "2rem", textAlign: "center" }, children: "My Profile" }),
+      /* @__PURE__ */ e.jsx("div", { className: "pk-flex pk-justify-center", style: { marginBottom: "2rem" }, children: /* @__PURE__ */ e.jsx("img", { src: Z.currentUser.avatar, alt: "Profile", style: { width: "120px", height: "120px", borderRadius: "50%", boxShadow: "var(--pk-shadow-md)" } }) }),
+      /* @__PURE__ */ e.jsxs("div", { className: "pk-input-group", children: [
+        /* @__PURE__ */ e.jsx("label", { className: "pk-label", children: "Display Name" }),
+        /* @__PURE__ */ e.jsx("input", { type: "text", className: "pk-input", defaultValue: Z.currentUser.name })
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { className: "pk-input-group", children: [
+        /* @__PURE__ */ e.jsx("label", { className: "pk-label", children: "Status Message" }),
+        /* @__PURE__ */ e.jsx("input", { type: "text", className: "pk-input", defaultValue: "Building great UIs! 💻" })
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { className: "pk-flex pk-justify-between", style: { marginTop: "2rem" }, children: [
+        /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-outline", onClick: () => k(!1), children: "Cancel" }),
+        /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-primary", onClick: b, children: "Save Changes" })
+      ] })
+    ] }) }) : D ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "pk-card", style: { borderRadius: 0, padding: "1rem 2rem", display: "flex", alignItems: "center", gap: "1rem", borderBottom: "1px solid var(--pk-border)", zIndex: 5 }, children: [
+        /* @__PURE__ */ e.jsx("img", { src: D.contact.avatar, alt: "", style: { width: "40px", height: "40px", borderRadius: "50%" } }),
+        /* @__PURE__ */ e.jsxs("div", { children: [
+          /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", style: { fontSize: "1.25rem" }, children: D.contact.name }),
+          /* @__PURE__ */ e.jsx("span", { className: "pk-text-sm", children: D.contact.status === "online" ? "Active Now" : "Offline" })
+        ] })
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { style: { flex: 1, padding: "2rem", overflowY: "auto", display: "flex", flexDirection: "column", gap: "1.5rem", background: 'linear-gradient(rgba(248, 250, 252, 0.9), rgba(248, 250, 252, 0.9)), url("https://www.transparenttextures.com/patterns/cubes.png")' }, children: [
+        D.messages.length === 0 && /* @__PURE__ */ e.jsx("div", { className: "pk-empty-state", style: { margin: "auto", border: "none", background: "transparent" }, children: "Say Hello 👋" }),
+        D.messages.map((r) => {
+          const t = r.senderId === Z.currentUser.id;
+          return /* @__PURE__ */ e.jsxs("div", { className: "pk-flex", style: { justifyContent: t ? "flex-end" : "flex-start" }, children: [
+            !t && /* @__PURE__ */ e.jsx("img", { src: D.contact.avatar, alt: "", style: { width: "32px", height: "32px", borderRadius: "50%", marginRight: "0.75rem", alignSelf: "flex-end" } }),
+            /* @__PURE__ */ e.jsxs("div", { style: { maxWidth: "70%" }, children: [
+              /* @__PURE__ */ e.jsx("div", { style: {
+                padding: "1rem 1.25rem",
+                background: t ? "linear-gradient(135deg, var(--pk-primary), var(--pk-primary-hover))" : "var(--pk-bg-card)",
+                color: t ? "white" : "var(--pk-text-main)",
+                borderRadius: t ? "16px 16px 4px 16px" : "16px 16px 16px 4px",
+                boxShadow: "var(--pk-shadow-md)"
+              }, children: r.text }),
+              /* @__PURE__ */ e.jsx("div", { className: "pk-text-sm", style: { marginTop: "0.25rem", textAlign: t ? "right" : "left", fontSize: "0.75rem" }, children: r.timestamp })
+            ] })
+          ] }, r.id);
+        }),
+        l && /* @__PURE__ */ e.jsxs("div", { className: "pk-flex", style: { justifyContent: "flex-start" }, children: [
+          /* @__PURE__ */ e.jsx("img", { src: D.contact.avatar, alt: "", style: { width: "32px", height: "32px", borderRadius: "50%", marginRight: "0.75rem", alignSelf: "flex-end" } }),
+          /* @__PURE__ */ e.jsxs("div", { style: { padding: "1rem", background: "var(--pk-bg-card)", borderRadius: "16px 16px 16px 4px", boxShadow: "var(--pk-shadow-sm)", display: "flex", gap: "4px" }, children: [
+            /* @__PURE__ */ e.jsx("span", { className: "typing-dot" }),
+            /* @__PURE__ */ e.jsx("span", { className: "typing-dot", style: { animationDelay: "0.2s" } }),
+            /* @__PURE__ */ e.jsx("span", { className: "typing-dot", style: { animationDelay: "0.4s" } })
+          ] })
+        ] }),
+        /* @__PURE__ */ e.jsx("div", { ref: y })
+      ] }),
+      /* @__PURE__ */ e.jsx("div", { className: "pk-card", style: { borderRadius: 0, padding: "1.5rem", borderTop: "1px solid var(--pk-border)" }, children: /* @__PURE__ */ e.jsxs("form", { onSubmit: S, className: "pk-flex pk-gap-4 pk-items-center", children: [
+        /* @__PURE__ */ e.jsx("button", { type: "button", className: "pk-btn pk-btn-outline", style: { borderRadius: "50%", padding: "0.75rem" }, children: "📎" }),
+        /* @__PURE__ */ e.jsx(
+          "input",
+          {
+            type: "text",
+            className: "pk-input",
+            style: { flex: 1, borderRadius: "var(--pk-radius-full)", padding: "1rem 1.5rem" },
+            placeholder: "Type your message...",
+            value: u,
+            onChange: (r) => N(r.target.value)
+          }
+        ),
+        /* @__PURE__ */ e.jsx("button", { type: "submit", className: "pk-btn pk-btn-primary", style: { borderRadius: "50%", padding: "0.75rem", aspectRatio: "1", width: "50px" }, children: "➤" })
+      ] }) })
+    ] }) : /* @__PURE__ */ e.jsx("div", { className: "pk-flex pk-items-center pk-justify-center", style: { flex: 1 }, children: /* @__PURE__ */ e.jsxs("div", { className: "pk-empty-state", style: { border: "none", background: "transparent" }, children: [
+      /* @__PURE__ */ e.jsx("div", { className: "pk-empty-icon", style: { fontSize: "5rem" }, children: "💬" }),
+      /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", children: "Welcome to PopSite Messages" }),
+      /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", children: "Select a conversation from the sidebar to begin." })
+    ] }) }) }),
+    /* @__PURE__ */ e.jsx("style", { children: `
+         .typing-dot { width: 8px; height: 8px; background-color: var(--pk-text-muted); border-radius: 50%; opacity: 0.5; animation: typingBounce 1.4s infinite ease-in-out; }
+         @keyframes typingBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
+       ` }),
+    /* @__PURE__ */ e.jsx(B, {})
+  ] });
+}
+const X = {
+  airlineName: "Skyward Wings",
+  airports: ["JFK (New York)", "LAX (Los Angeles)", "LHR (London)", "HND (Tokyo)", "SYD (Sydney)", "DXB (Dubai)"],
+  flights: [
+    {
+      id: "f1",
+      flightNumber: "SW-402",
+      from: "JFK (New York)",
+      to: "LHR (London)",
+      departureTime: "08:00 AM",
+      arrivalTime: "08:00 PM",
+      duration: "7h 00m",
+      price: 450,
+      businessPrice: 1200,
+      image: "https://images.unsplash.com/photo-1436491865332-7a61a109cc05?auto=format&fit=crop&w=800&q=80"
+    },
+    {
+      id: "f2",
+      flightNumber: "SW-819",
+      from: "LAX (Los Angeles)",
+      to: "HND (Tokyo)",
+      departureTime: "11:30 AM",
+      arrivalTime: "03:15 PM (+1)",
+      duration: "11h 45m",
+      price: 780,
+      businessPrice: 2100,
+      image: "https://images.unsplash.com/photo-1542296332-2e4473faf563?auto=format&fit=crop&w=800&q=80"
+    },
+    {
+      id: "f3",
+      flightNumber: "SW-211",
+      from: "LHR (London)",
+      to: "DXB (Dubai)",
+      departureTime: "10:15 PM",
+      arrivalTime: "08:10 AM (+1)",
+      duration: "6h 55m",
+      price: 320,
+      businessPrice: 850,
+      image: "https://images.unsplash.com/photo-1512453979798-5ea266f8880c?auto=format&fit=crop&w=800&q=80"
+    },
+    {
+      id: "f4",
+      flightNumber: "SW-505",
+      from: "JFK (New York)",
+      to: "LAX (Los Angeles)",
+      departureTime: "06:00 AM",
+      arrivalTime: "09:15 AM",
+      duration: "6h 15m",
+      price: 199,
+      businessPrice: 600,
+      image: "https://images.unsplash.com/photo-1499591934245-40b55745b905?auto=format&fit=crop&w=800&q=80"
+    }
+  ],
+  addOns: {
+    checkedBag: 50
+  }
+};
+function Wt() {
+  const [m, o] = p("search"), [n, j] = p({
+    from: X.airports[0],
+    to: X.airports[1],
+    date: (/* @__PURE__ */ new Date()).toISOString().split("T")[0],
+    passengers: 1
+  }), [u, N] = p(null), [h, A] = p("economy"), [l, T] = p(0), [x, k] = p({ firstName: "", lastName: "", passport: "" }), [g, W] = p(null), [y, C] = p(!1), { showToast: B, ToastContainer: D } = G();
+  $(() => {
+    const i = localStorage.getItem("popsite_flight");
+    if (i)
+      try {
+        W(JSON.parse(i));
+      } catch {
+      }
+  }, []), $(() => {
+    g && localStorage.setItem("popsite_flight", JSON.stringify(g));
+  }, [g]);
+  const P = (i, f = 1500) => {
+    C(!0), setTimeout(() => {
+      C(!1), i();
+    }, f);
+  }, S = (i) => {
+    if (i.preventDefault(), n.from === n.to) {
+      B("Destination cannot be the same as origin", "error");
+      return;
+    }
+    P(() => {
+      o("results"), B("Flights loaded successfully", "success");
+    });
+  }, d = (i) => {
+    N(i), o("passenger");
+  }, b = () => {
+    if (!u) return 0;
+    const i = h === "business" ? u.businessPrice : u.price, f = l * X.addOns.checkedBag;
+    return i * n.passengers + f;
+  }, M = (i) => {
+    if (i.preventDefault(), !x.firstName || !x.lastName || !x.passport) {
+      B("Please fill out all passenger details", "error");
+      return;
+    }
+    P(() => {
+      const f = {
+        bookingRef: `PNR${Math.random().toString(36).substring(2, 8).toUpperCase()}`,
+        flight: u,
+        seatClass: h,
+        baggage: l,
+        passenger: x,
+        date: n.date,
+        total: b()
+      };
+      W(f), o("pass"), B("Booking confirmed!", "success");
+    }, 2e3);
+  }, I = () => /* @__PURE__ */ e.jsxs("div", { className: "pk-container animate-fade-in", style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", minHeight: "80vh" }, children: [
+    /* @__PURE__ */ e.jsxs("div", { style: { textAlign: "center", marginBottom: "3rem" }, children: [
+      /* @__PURE__ */ e.jsx("h1", { className: "pk-heading-xl", style: { marginBottom: "1rem" }, children: X.airlineName }),
+      /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", style: { fontSize: "1.25rem" }, children: "Where will your next adventure take you?" })
+    ] }),
+    /* @__PURE__ */ e.jsx("div", { className: "pk-card pk-glass", style: { width: "100%", maxWidth: "900px", padding: "3rem" }, children: /* @__PURE__ */ e.jsxs("form", { onSubmit: S, className: "pk-grid", style: { gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: "1.5rem", alignItems: "end" }, children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "pk-input-group", style: { margin: 0 }, children: [
+        /* @__PURE__ */ e.jsx("label", { className: "pk-label", children: "From" }),
+        /* @__PURE__ */ e.jsx(
+          "select",
+          {
+            className: "pk-input",
+            value: n.from,
+            onChange: (i) => j({ ...n, from: i.target.value }),
+            children: X.airports.map((i) => /* @__PURE__ */ e.jsx("option", { value: i, children: i }, i))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { className: "pk-input-group", style: { margin: 0 }, children: [
+        /* @__PURE__ */ e.jsx("label", { className: "pk-label", children: "To" }),
+        /* @__PURE__ */ e.jsx(
+          "select",
+          {
+            className: "pk-input",
+            value: n.to,
+            onChange: (i) => j({ ...n, to: i.target.value }),
+            children: X.airports.map((i) => /* @__PURE__ */ e.jsx("option", { value: i, children: i }, i))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { className: "pk-input-group", style: { margin: 0 }, children: [
+        /* @__PURE__ */ e.jsx("label", { className: "pk-label", children: "Departure Date" }),
+        /* @__PURE__ */ e.jsx(
+          "input",
+          {
+            type: "date",
+            className: "pk-input",
+            value: n.date,
+            onChange: (i) => j({ ...n, date: i.target.value })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { className: "pk-input-group", style: { margin: 0 }, children: [
+        /* @__PURE__ */ e.jsx("label", { className: "pk-label", children: "Passengers" }),
+        /* @__PURE__ */ e.jsx(
+          "input",
+          {
+            type: "number",
+            min: "1",
+            max: "9",
+            className: "pk-input",
+            value: n.passengers,
+            onChange: (i) => j({ ...n, passengers: parseInt(i.target.value) || 1 })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e.jsx("button", { type: "submit", className: "pk-btn pk-btn-primary", style: { padding: "1.25rem", height: "100%" }, children: "Search Flights" })
+    ] }) }),
+    g && /* @__PURE__ */ e.jsxs("button", { className: "pk-btn pk-btn-outline", style: { marginTop: "2rem" }, onClick: () => o("pass"), children: [
+      "View Upcoming Trip (",
+      g.bookingRef,
+      ")"
+    ] })
+  ] }), r = () => {
+    const i = X.flights.filter(
+      (f) => f.from.includes(n.from.split(" ")[0]) || f.to.includes(n.to.split(" ")[0]) || !0
+      // Just return all so demo looks populated
+    );
+    return /* @__PURE__ */ e.jsxs("div", { className: "pk-container animate-fade-in", children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "pk-flex pk-justify-between pk-items-center", style: { marginBottom: "2rem" }, children: [
+        /* @__PURE__ */ e.jsxs("div", { children: [
+          /* @__PURE__ */ e.jsx("h2", { className: "pk-heading-lg", children: "Select Departure Flight" }),
+          /* @__PURE__ */ e.jsxs("p", { className: "pk-text-body", children: [
+            n.from,
+            " → ",
+            n.to,
+            " | ",
+            n.date,
+            " | ",
+            n.passengers,
+            " Passenger(s)"
+          ] })
+        ] }),
+        /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-outline", onClick: () => o("search"), children: "Edit Search" })
+      ] }),
+      /* @__PURE__ */ e.jsx("div", { className: "pk-flex pk-flex-col pk-gap-6", children: i.map((f) => /* @__PURE__ */ e.jsxs("div", { className: "pk-card pk-card-interactive", style: { padding: "2rem", display: "flex", flexWrap: "wrap", gap: "2rem", alignItems: "center" }, children: [
+        /* @__PURE__ */ e.jsxs("div", { style: { flex: "1 1 300px" }, children: [
+          /* @__PURE__ */ e.jsxs("div", { className: "pk-flex pk-justify-between pk-items-center", style: { marginBottom: "1rem" }, children: [
+            /* @__PURE__ */ e.jsx("span", { className: "pk-badge", children: f.flightNumber }),
+            /* @__PURE__ */ e.jsx("span", { className: "pk-text-sm", style: { color: "var(--pk-primary)", fontWeight: 600 }, children: f.duration })
+          ] }),
+          /* @__PURE__ */ e.jsxs("div", { className: "pk-flex pk-justify-between pk-items-center", children: [
+            /* @__PURE__ */ e.jsxs("div", { className: "pk-text-center", children: [
+              /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", children: f.departureTime }),
+              /* @__PURE__ */ e.jsx("p", { className: "pk-text-muted", children: f.from.split(" ")[0] })
+            ] }),
+            /* @__PURE__ */ e.jsxs("div", { style: { flex: 1, margin: "0 1rem", display: "flex", alignItems: "center", justifyItems: "center" }, children: [
+              /* @__PURE__ */ e.jsx("div", { style: { height: "2px", background: "var(--pk-border)", flex: 1 } }),
+              /* @__PURE__ */ e.jsx("span", { style: { margin: "0 1rem", fontSize: "1.5rem", opacity: 0.5 }, children: "✈️" }),
+              /* @__PURE__ */ e.jsx("div", { style: { height: "2px", background: "var(--pk-border)", flex: 1 } })
+            ] }),
+            /* @__PURE__ */ e.jsxs("div", { className: "pk-text-center", children: [
+              /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", children: f.arrivalTime }),
+              /* @__PURE__ */ e.jsx("p", { className: "pk-text-muted", children: f.to.split(" ")[0] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ e.jsx("div", { style: { width: "1px", background: "var(--pk-border)", height: "100px", alignSelf: "stretch" }, className: "pk-hidden-mobile" }),
+        /* @__PURE__ */ e.jsxs("div", { style: { flex: "0 0 auto", display: "flex", flexDirection: "column", gap: "1rem", minWidth: "150px" }, children: [
+          /* @__PURE__ */ e.jsxs("div", { className: "pk-text-center", children: [
+            /* @__PURE__ */ e.jsx("span", { className: "pk-text-sm pk-text-muted", children: "Economy from" }),
+            /* @__PURE__ */ e.jsxs("h3", { className: "pk-heading-lg", style: { color: "var(--pk-secondary)" }, children: [
+              "$",
+              f.price
+            ] })
+          ] }),
+          /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-outline", onClick: () => {
+            A("economy"), d(f);
+          }, children: "Select Economy" })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { style: { flex: "0 0 auto", display: "flex", flexDirection: "column", gap: "1rem", minWidth: "150px" }, children: [
+          /* @__PURE__ */ e.jsxs("div", { className: "pk-text-center", children: [
+            /* @__PURE__ */ e.jsx("span", { className: "pk-text-sm pk-text-muted", children: "Business from" }),
+            /* @__PURE__ */ e.jsxs("h3", { className: "pk-heading-lg", style: { color: "var(--pk-primary)" }, children: [
+              "$",
+              f.businessPrice
+            ] })
+          ] }),
+          /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-primary", onClick: () => {
+            A("business"), d(f);
+          }, children: "Select Business" })
+        ] })
+      ] }, f.id)) })
+    ] });
+  }, t = () => /* @__PURE__ */ e.jsxs("div", { className: "pk-container animate-fade-in", children: [
+    /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-outline", style: { marginBottom: "2rem" }, onClick: () => o("results"), children: "← Back to Flights" }),
+    /* @__PURE__ */ e.jsxs("div", { className: "pk-grid", style: { gridTemplateColumns: "minmax(300px, 2fr) minmax(300px, 1fr)" }, children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "pk-flex pk-flex-col pk-gap-6", children: [
+        /* @__PURE__ */ e.jsxs("div", { className: "pk-card", style: { padding: "2rem" }, children: [
+          /* @__PURE__ */ e.jsx("h2", { className: "pk-heading-md", style: { marginBottom: "1.5rem", borderBottom: "1px solid var(--pk-border)", paddingBottom: "0.5rem" }, children: "Primary Passenger" }),
+          /* @__PURE__ */ e.jsxs("form", { onSubmit: M, id: "booking-form", children: [
+            /* @__PURE__ */ e.jsxs("div", { className: "pk-grid", style: { gridTemplateColumns: "1fr 1fr" }, children: [
+              /* @__PURE__ */ e.jsxs("div", { className: "pk-input-group", children: [
+                /* @__PURE__ */ e.jsx("label", { className: "pk-label", children: "First Name" }),
+                /* @__PURE__ */ e.jsx("input", { type: "text", className: "pk-input", value: x.firstName, onChange: (i) => k({ ...x, firstName: i.target.value }), required: !0 })
+              ] }),
+              /* @__PURE__ */ e.jsxs("div", { className: "pk-input-group", children: [
+                /* @__PURE__ */ e.jsx("label", { className: "pk-label", children: "Last Name" }),
+                /* @__PURE__ */ e.jsx("input", { type: "text", className: "pk-input", value: x.lastName, onChange: (i) => k({ ...x, lastName: i.target.value }), required: !0 })
+              ] })
+            ] }),
+            /* @__PURE__ */ e.jsxs("div", { className: "pk-input-group", children: [
+              /* @__PURE__ */ e.jsx("label", { className: "pk-label", children: "Passport Number" }),
+              /* @__PURE__ */ e.jsx("input", { type: "text", className: "pk-input", value: x.passport, onChange: (i) => k({ ...x, passport: i.target.value }), required: !0 })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { className: "pk-card", style: { padding: "2rem" }, children: [
+          /* @__PURE__ */ e.jsx("h2", { className: "pk-heading-md", style: { marginBottom: "1.5rem", borderBottom: "1px solid var(--pk-border)", paddingBottom: "0.5rem" }, children: "Customize Your Trip" }),
+          /* @__PURE__ */ e.jsxs("div", { className: "pk-flex pk-items-center pk-justify-between", style: { padding: "1rem", background: "var(--pk-bg-main)", borderRadius: "var(--pk-radius-md)", marginBottom: "1rem" }, children: [
+            /* @__PURE__ */ e.jsxs("div", { children: [
+              /* @__PURE__ */ e.jsx("h4", { className: "pk-label", children: "Checked Baggage" }),
+              /* @__PURE__ */ e.jsxs("p", { className: "pk-text-sm", children: [
+                "Up to 23kg per bag ($",
+                X.addOns.checkedBag,
+                " each)"
+              ] })
+            ] }),
+            /* @__PURE__ */ e.jsxs("div", { className: "pk-flex pk-items-center pk-gap-4", children: [
+              /* @__PURE__ */ e.jsx("button", { type: "button", className: "pk-btn pk-btn-outline", style: { padding: "0.5rem", borderRadius: "50%", width: 40, height: 40 }, onClick: () => T(Math.max(0, l - 1)), children: "-" }),
+              /* @__PURE__ */ e.jsx("span", { className: "pk-heading-md", children: l }),
+              /* @__PURE__ */ e.jsx("button", { type: "button", className: "pk-btn pk-btn-outline", style: { padding: "0.5rem", borderRadius: "50%", width: 40, height: 40 }, onClick: () => T(l + 1), children: "+" })
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsxs("div", { className: "pk-card", style: { position: "sticky", top: "100px" }, children: [
+        /* @__PURE__ */ e.jsxs("div", { className: "pk-card-header bg-gradient", style: { background: "linear-gradient(135deg, var(--pk-bg-main), var(--pk-primary-light))", padding: "2rem" }, children: [
+          /* @__PURE__ */ e.jsx("span", { className: "pk-badge", style: { marginBottom: "1rem", display: "inline-block" }, children: h.toUpperCase() }),
+          /* @__PURE__ */ e.jsxs("h3", { className: "pk-heading-md", children: [
+            u.from.split(" ")[0],
+            " ✈ ",
+            u.to.split(" ")[0]
+          ] }),
+          /* @__PURE__ */ e.jsx("p", { className: "pk-text-sm", children: n.date })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { className: "pk-card-body pk-flex pk-flex-col pk-gap-4", children: [
+          /* @__PURE__ */ e.jsxs("div", { className: "pk-flex pk-justify-between", children: [
+            /* @__PURE__ */ e.jsx("span", { className: "pk-text-body", children: "1x Ticket" }),
+            /* @__PURE__ */ e.jsxs("span", { style: { fontWeight: 600 }, children: [
+              "$",
+              h === "business" ? u.businessPrice : u.price
+            ] })
+          ] }),
+          l > 0 && /* @__PURE__ */ e.jsxs("div", { className: "pk-flex pk-justify-between", children: [
+            /* @__PURE__ */ e.jsxs("span", { className: "pk-text-body", children: [
+              l,
+              "x Checked Bag"
+            ] }),
+            /* @__PURE__ */ e.jsxs("span", { style: { fontWeight: 600 }, children: [
+              "$",
+              l * X.addOns.checkedBag
+            ] })
+          ] }),
+          /* @__PURE__ */ e.jsx("hr", { style: { border: 0, borderTop: "1px solid var(--pk-border)" } }),
+          /* @__PURE__ */ e.jsxs("div", { className: "pk-flex pk-justify-between pk-items-center", children: [
+            /* @__PURE__ */ e.jsx("span", { className: "pk-heading-md", children: "Total" }),
+            /* @__PURE__ */ e.jsxs("span", { className: "pk-heading-lg", style: { color: "var(--pk-primary)" }, children: [
+              "$",
+              b()
+            ] })
+          ] }),
+          /* @__PURE__ */ e.jsx("button", { type: "submit", form: "booking-form", className: "pk-btn pk-btn-primary pk-w-full", style: { marginTop: "1rem", padding: "1.25rem" }, children: "Confirm & Pay" })
+        ] })
+      ] }) })
+    ] })
+  ] }), a = () => g ? /* @__PURE__ */ e.jsx("div", { className: "pk-container animate-fade-in pk-flex pk-justify-center pk-items-center", style: { minHeight: "80vh" }, children: /* @__PURE__ */ e.jsxs("div", { className: "pk-card", style: { width: "100%", maxWidth: "400px", overflow: "hidden", boxShadow: "var(--pk-shadow-xl)" }, children: [
+    /* @__PURE__ */ e.jsxs("div", { style: { background: "var(--pk-primary)", color: "white", padding: "2rem", textAlign: "center", position: "relative" }, children: [
+      /* @__PURE__ */ e.jsx("h2", { className: "pk-heading-md", style: { opacity: 0.9 }, children: X.airlineName }),
+      /* @__PURE__ */ e.jsx("h1", { className: "pk-heading-xl", style: { margin: "1rem 0" }, children: "BOARDING" }),
+      /* @__PURE__ */ e.jsx("p", { style: { letterSpacing: "2px", opacity: 0.8 }, children: "PASS" }),
+      /* @__PURE__ */ e.jsx("div", { style: { position: "absolute", bottom: "-10px", left: "-10px", width: "20px", height: "20px", background: "var(--pk-bg-main)", borderRadius: "50%" } }),
+      /* @__PURE__ */ e.jsx("div", { style: { position: "absolute", bottom: "-10px", right: "-10px", width: "20px", height: "20px", background: "var(--pk-bg-main)", borderRadius: "50%" } })
+    ] }),
+    /* @__PURE__ */ e.jsxs("div", { className: "pk-card-body", style: { padding: "2rem", position: "relative" }, children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "pk-flex pk-justify-between pk-items-center", style: { marginBottom: "2rem", borderBottom: "1px solid var(--pk-border)", paddingBottom: "1rem" }, children: [
+        /* @__PURE__ */ e.jsxs("div", { className: "pk-text-center", children: [
+          /* @__PURE__ */ e.jsx("h2", { className: "pk-heading-xl", style: { color: "var(--pk-text-main)" }, children: g.flight.from.split(" ")[0] }),
+          /* @__PURE__ */ e.jsx("p", { className: "pk-text-sm pk-text-muted", children: g.flight.departureTime })
+        ] }),
+        /* @__PURE__ */ e.jsx("span", { style: { fontSize: "2rem", color: "var(--pk-primary)" }, children: "✈️" }),
+        /* @__PURE__ */ e.jsxs("div", { className: "pk-text-center", children: [
+          /* @__PURE__ */ e.jsx("h2", { className: "pk-heading-xl", style: { color: "var(--pk-text-main)" }, children: g.flight.to.split(" ")[0] }),
+          /* @__PURE__ */ e.jsx("p", { className: "pk-text-sm pk-text-muted", children: g.flight.arrivalTime })
+        ] })
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { className: "pk-grid", style: { gridTemplateColumns: "1fr 1fr", gap: "1.5rem", marginBottom: "2rem" }, children: [
+        /* @__PURE__ */ e.jsxs("div", { children: [
+          /* @__PURE__ */ e.jsx("p", { className: "pk-label pk-text-muted", children: "Passenger" }),
+          /* @__PURE__ */ e.jsxs("p", { className: "pk-heading-sm", style: { fontWeight: 600 }, children: [
+            g.passenger.firstName,
+            " ",
+            g.passenger.lastName
+          ] })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { children: [
+          /* @__PURE__ */ e.jsx("p", { className: "pk-label pk-text-muted", children: "Flight" }),
+          /* @__PURE__ */ e.jsx("p", { className: "pk-heading-sm", style: { fontWeight: 600 }, children: g.flight.flightNumber })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { children: [
+          /* @__PURE__ */ e.jsx("p", { className: "pk-label pk-text-muted", children: "Date" }),
+          /* @__PURE__ */ e.jsx("p", { className: "pk-heading-sm", style: { fontWeight: 600 }, children: g.date })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { children: [
+          /* @__PURE__ */ e.jsx("p", { className: "pk-label pk-text-muted", children: "Class" }),
+          /* @__PURE__ */ e.jsx("p", { className: "pk-heading-sm", style: { fontWeight: 600, textTransform: "capitalize" }, children: g.seatClass })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { children: [
+          /* @__PURE__ */ e.jsx("p", { className: "pk-label pk-text-muted", children: "Seat" }),
+          /* @__PURE__ */ e.jsx("p", { className: "pk-heading-sm", style: { fontWeight: 800, color: "var(--pk-primary)", fontSize: "1.5rem" }, children: "12A" })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { children: [
+          /* @__PURE__ */ e.jsx("p", { className: "pk-label pk-text-muted", children: "Gate" }),
+          /* @__PURE__ */ e.jsx("p", { className: "pk-heading-sm", style: { fontWeight: 800, fontSize: "1.5rem" }, children: "G4" })
+        ] })
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { style: { textAlign: "center", marginTop: "2rem" }, children: [
+        /* @__PURE__ */ e.jsx("div", { style: { display: "inline-block", padding: "10px", border: "2px solid var(--pk-border)", borderRadius: "12px" }, children: /* @__PURE__ */ e.jsx("div", { style: { width: "120px", height: "120px", background: "repeating-linear-gradient(45deg, #000, #000 10px, transparent 10px, transparent 20px), repeating-linear-gradient(135deg, #000, #000 10px, transparent 10px, transparent 20px)" } }) }),
+        /* @__PURE__ */ e.jsx("p", { className: "pk-text-sm", style: { marginTop: "0.5rem", letterSpacing: "4px", fontFamily: "monospace" }, children: g.bookingRef })
+      ] })
+    ] }),
+    /* @__PURE__ */ e.jsx("div", { className: "pk-card-footer pk-flex pk-justify-center", style: { gap: "1rem", background: "var(--pk-primary-light)" }, children: /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-outline", style: { background: "white" }, onClick: () => o("search"), children: "New Booking" }) })
+  ] }) }) : null;
+  return /* @__PURE__ */ e.jsxs("div", { style: { position: "relative", minHeight: "100vh", backgroundColor: "var(--pk-bg-main)" }, children: [
+    y && /* @__PURE__ */ e.jsxs("div", { style: { position: "fixed", inset: 0, backgroundColor: "rgba(255,255,255,0.7)", zIndex: 100, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", backdropFilter: "blur(4px)" }, children: [
+      /* @__PURE__ */ e.jsx("div", { className: "pk-skeleton", style: { width: "80px", height: "80px", borderRadius: "50%", marginBottom: "1rem" } }),
+      /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", children: "Searching Global Skies..." })
+    ] }),
+    m === "search" && I(),
+    m === "results" && r(),
+    m === "passenger" && t(),
+    m === "pass" && a(),
+    /* @__PURE__ */ e.jsx(D, {})
+  ] });
+}
+const se = {
+  organizationName: "Global Tech Solutions",
+  kpis: {
+    revenue: { value: "$124,500", trend: 12.5 },
+    users: { value: "14,245", trend: 8.2 },
+    conversionRate: { value: "4.8%", trend: -1.2 },
+    bounceRate: { value: "32.1%", trend: -5.4 }
+  },
+  financialReports: [
+    { id: "RPT-001", period: "Q1 2026", revenue: 124500, expenses: 84e3, net: 40500, status: "Finalized" },
+    { id: "RPT-002", period: "Q4 2025", revenue: 118e3, expenses: 82e3, net: 36e3, status: "Finalized" },
+    { id: "RPT-003", period: "Q3 2025", revenue: 105e3, expenses: 76e3, net: 29e3, status: "Finalized" },
+    { id: "RPT-004", period: "Q2 2025", revenue: 98e3, expenses: 71e3, net: 27e3, status: "Finalized" }
+  ],
+  systemLogs: [
+    { id: "log1", timestamp: "2026-04-08 10:15:00", level: "INFO", message: "User array successfully synchronized.", service: "AuthService" },
+    { id: "log2", timestamp: "2026-04-08 10:12:45", level: "WARN", message: "API rate limit approaching for endpoint /v2/data.", service: "APIGateway" },
+    { id: "log3", timestamp: "2026-04-08 10:05:12", level: "ERROR", message: "Database connection timeout after 3000ms.", service: "DBService" },
+    { id: "log4", timestamp: "2026-04-08 09:45:00", level: "INFO", message: "Daily backup completed successfully.", service: "BackupAgent" },
+    { id: "log5", timestamp: "2026-04-08 09:30:22", level: "INFO", message: "New deployment v4.5.1 rolled out.", service: "CI/CD" },
+    { id: "log6", timestamp: "2026-04-08 09:15:00", level: "WARN", message: "High memory trace detected in worker node 4.", service: "ComputeEngine" }
+  ],
+  chartData: [
+    { label: "Mon", value: 30 },
+    { label: "Tue", value: 45 },
+    { label: "Wed", value: 25 },
+    { label: "Thu", value: 60 },
+    { label: "Fri", value: 85 },
+    { label: "Sat", value: 40 },
+    { label: "Sun", value: 50 }
+  ]
+};
+function ge({ title: m, value: o, icon: n, trend: j, trendLabel: u }) {
+  const N = j && j > 0, h = j && j < 0;
+  return /* @__PURE__ */ e.jsxs("div", { className: "pk-card pk-card-interactive", style: { padding: "1.5rem", display: "flex", flexDirection: "column", gap: "1rem" }, children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "pk-flex pk-justify-between pk-items-center", children: [
+      /* @__PURE__ */ e.jsx("h3", { className: "pk-label", style: { color: "var(--pk-text-muted)" }, children: m }),
+      /* @__PURE__ */ e.jsx("span", { style: { fontSize: "1.5rem", opacity: 0.8 }, children: n })
+    ] }),
+    /* @__PURE__ */ e.jsxs("div", { children: [
+      /* @__PURE__ */ e.jsx("div", { className: "pk-heading-md", style: { marginBottom: "0.5rem" }, children: o }),
+      j !== void 0 && /* @__PURE__ */ e.jsxs("div", { className: "pk-flex pk-items-center", style: { gap: "0.5rem", fontSize: "0.875rem" }, children: [
+        /* @__PURE__ */ e.jsxs("span", { style: {
+          fontWeight: 600,
+          color: N ? "var(--pk-success)" : h ? "var(--pk-danger)" : "var(--pk-text-muted)"
+        }, children: [
+          N ? "↑" : h ? "↓" : "-",
+          " ",
+          Math.abs(j),
+          "%"
+        ] }),
+        /* @__PURE__ */ e.jsx("span", { style: { color: "var(--pk-text-muted)" }, children: u || "vs last month" })
+      ] })
+    ] })
+  ] });
+}
+function Mt() {
+  const [m, o] = p("summary"), [n, j] = p(""), [u, N] = p(!1), { showToast: h, ToastContainer: A } = G(), l = (y, C = 1e3) => {
+    N(!0), setTimeout(() => {
+      N(!1), y();
+    }, C);
+  }, T = (y, C) => {
+    l(() => {
+      if (!y || y.length === 0) {
+        h("No data to export", "error");
+        return;
+      }
+      const B = Object.keys(y[0]).join(","), D = y.map(
+        (b) => Object.values(b).map((M) => typeof M == "string" ? `"${M}"` : M).join(",")
+      ).join(`
+`), P = new Blob([`${B}
+${D}`], { type: "text/csv" }), S = URL.createObjectURL(P), d = document.createElement("a");
+      d.href = S, d.download = `${C}_${Date.now()}.csv`, d.click(), h("Export successful", "success");
+    });
+  }, x = () => /* @__PURE__ */ e.jsxs("div", { className: "pk-card", style: { marginBottom: "2rem", padding: "1rem", display: "flex", gap: "1rem", overflowX: "auto" }, children: [
+    /* @__PURE__ */ e.jsx(
+      "button",
+      {
+        className: m === "summary" ? "pk-btn pk-btn-primary" : "pk-btn pk-btn-outline",
+        onClick: () => o("summary"),
+        children: "Executive Summary"
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      "button",
+      {
+        className: m === "financial" ? "pk-btn pk-btn-primary" : "pk-btn pk-btn-outline",
+        onClick: () => o("financial"),
+        children: "Financial Reports"
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      "button",
+      {
+        className: m === "logs" ? "pk-btn pk-btn-primary" : "pk-btn pk-btn-outline",
+        onClick: () => o("logs"),
+        children: "System Logs"
+      }
+    )
+  ] }), k = () => {
+    const y = se.kpis, C = Math.max(...se.chartData.map((B) => B.value));
+    return /* @__PURE__ */ e.jsxs("div", { className: "animate-fade-in", children: [
+      /* @__PURE__ */ e.jsx("h2", { className: "pk-heading-lg", style: { marginBottom: "2rem" }, children: "Executive Overview" }),
+      /* @__PURE__ */ e.jsxs("div", { className: "pk-grid", style: { gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))", marginBottom: "2rem" }, children: [
+        /* @__PURE__ */ e.jsx(ge, { title: "Total Revenue", value: y.revenue.value, trend: y.revenue.trend, icon: "💰" }),
+        /* @__PURE__ */ e.jsx(ge, { title: "Active Users", value: y.users.value, trend: y.users.trend, icon: "👥" }),
+        /* @__PURE__ */ e.jsx(ge, { title: "Conversion Rate", value: y.conversionRate.value, trend: y.conversionRate.trend, icon: "🔥" }),
+        /* @__PURE__ */ e.jsx(ge, { title: "Bounce Rate", value: y.bounceRate.value, trend: y.bounceRate.trend, icon: "📉" })
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { className: "pk-card", style: { padding: "2rem" }, children: [
+        /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", style: { marginBottom: "2rem" }, children: "Weekly Traffic Activity" }),
+        /* @__PURE__ */ e.jsx("div", { style: { display: "flex", alignItems: "flex-end", height: "250px", gap: "2%", paddingBottom: "2rem", borderBottom: "1px solid var(--pk-border)" }, children: se.chartData.map((B, D) => {
+          const P = B.value / C * 100;
+          return /* @__PURE__ */ e.jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", alignItems: "center", height: "100%", justifyContent: "flex-end" }, children: [
+            /* @__PURE__ */ e.jsxs("div", { style: { opacity: 0, transition: "opacity 0.2s", fontSize: "0.75rem", marginBottom: "0.25rem" }, className: "chart-tooltip", children: [
+              B.value,
+              "k"
+            ] }),
+            /* @__PURE__ */ e.jsx(
+              "div",
+              {
+                style: {
+                  width: "100%",
+                  height: `${P}%`,
+                  background: "linear-gradient(to top, var(--pk-primary), var(--pk-secondary))",
+                  borderRadius: "4px 4px 0 0",
+                  transition: "height 1s cubic-bezier(0.1, 0.8, 0.2, 1)"
+                },
+                className: "chart-bar"
+              }
+            ),
+            /* @__PURE__ */ e.jsx("span", { style: { marginTop: "1rem", fontSize: "0.875rem", color: "var(--pk-text-muted)" }, children: B.label })
+          ] }, D);
+        }) })
+      ] }),
+      /* @__PURE__ */ e.jsx("style", { children: `
+          .chart-bar:hover { filter: brightness(1.2); cursor: pointer; }
+          .chart-bar:hover + span { font-weight: bold; color: var(--pk-text-main); }
+          .chart-bar:hover ~ .chart-tooltip, .chart-tooltip:focus { opacity: 1 !important; }
+        ` })
+    ] });
+  }, g = () => /* @__PURE__ */ e.jsxs("div", { className: "animate-fade-in", children: [
+    /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "2rem" }, children: [
+      /* @__PURE__ */ e.jsx("h2", { className: "pk-heading-lg", children: "Financial Reports" }),
+      /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-primary", onClick: () => T(se.financialReports, "Financial_Report"), children: "⬇️ Export CSV" })
+    ] }),
+    /* @__PURE__ */ e.jsx("div", { className: "pk-card", style: { overflowX: "auto" }, children: /* @__PURE__ */ e.jsxs("table", { style: { width: "100%", borderCollapse: "collapse", textAlign: "left" }, children: [
+      /* @__PURE__ */ e.jsx("thead", { children: /* @__PURE__ */ e.jsxs("tr", { style: { background: "var(--pk-bg-main)", borderBottom: "1px solid var(--pk-border)" }, children: [
+        /* @__PURE__ */ e.jsx("th", { style: { padding: "1rem 1.5rem", color: "var(--pk-text-muted)", fontWeight: 600 }, children: "Period" }),
+        /* @__PURE__ */ e.jsx("th", { style: { padding: "1rem 1.5rem", color: "var(--pk-text-muted)", fontWeight: 600 }, children: "Revenue" }),
+        /* @__PURE__ */ e.jsx("th", { style: { padding: "1rem 1.5rem", color: "var(--pk-text-muted)", fontWeight: 600 }, children: "Expenses" }),
+        /* @__PURE__ */ e.jsx("th", { style: { padding: "1rem 1.5rem", color: "var(--pk-text-muted)", fontWeight: 600 }, children: "Net Profit" }),
+        /* @__PURE__ */ e.jsx("th", { style: { padding: "1rem 1.5rem", color: "var(--pk-text-muted)", fontWeight: 600 }, children: "Status" })
+      ] }) }),
+      /* @__PURE__ */ e.jsx("tbody", { children: se.financialReports.map((y, C) => /* @__PURE__ */ e.jsxs("tr", { style: { borderBottom: "1px solid var(--pk-border)", transition: "background 0.2s" }, children: [
+        /* @__PURE__ */ e.jsx("td", { style: { padding: "1rem 1.5rem", fontWeight: 600 }, children: y.period }),
+        /* @__PURE__ */ e.jsxs("td", { style: { padding: "1rem 1.5rem", color: "var(--pk-success)" }, children: [
+          "+$",
+          y.revenue.toLocaleString()
+        ] }),
+        /* @__PURE__ */ e.jsxs("td", { style: { padding: "1rem 1.5rem", color: "var(--pk-danger)" }, children: [
+          "-$",
+          y.expenses.toLocaleString()
+        ] }),
+        /* @__PURE__ */ e.jsxs("td", { style: { padding: "1rem 1.5rem", fontWeight: "bold" }, children: [
+          "$",
+          y.net.toLocaleString()
+        ] }),
+        /* @__PURE__ */ e.jsx("td", { style: { padding: "1rem 1.5rem" }, children: /* @__PURE__ */ e.jsx("span", { className: "pk-badge", children: y.status }) })
+      ] }, C)) })
+    ] }) })
+  ] }), W = () => {
+    const y = se.systemLogs.filter(
+      (C) => C.message.toLowerCase().includes(n.toLowerCase()) || C.service.toLowerCase().includes(n.toLowerCase())
+    );
+    return /* @__PURE__ */ e.jsxs("div", { className: "animate-fade-in", children: [
+      /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "2rem", flexWrap: "wrap", gap: "1rem" }, children: [
+        /* @__PURE__ */ e.jsx("h2", { className: "pk-heading-lg", children: "System Logs" }),
+        /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", gap: "1rem" }, children: [
+          /* @__PURE__ */ e.jsx(
+            "input",
+            {
+              type: "text",
+              className: "pk-input",
+              placeholder: "Search logs...",
+              value: n,
+              onChange: (C) => j(C.target.value)
+            }
+          ),
+          /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-outline", onClick: () => T(y, "System_Logs"), children: "⬇️ Export" })
+        ] })
+      ] }),
+      /* @__PURE__ */ e.jsx("div", { className: "pk-card", style: { background: "#0f172a", color: "#e2e8f0", padding: "1rem", fontFamily: "monospace", borderRadius: "var(--pk-radius-lg)", overflowX: "auto", maxHeight: "600px", overflowY: "auto" }, children: y.length === 0 ? /* @__PURE__ */ e.jsx("div", { style: { padding: "2rem", textAlign: "center" }, children: "No logs found matching query." }) : y.map((C) => {
+        const B = C.level === "ERROR" ? "#ef4444" : C.level === "WARN" ? "#f59e0b" : "#38bdf8";
+        return /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", gap: "1rem", padding: "0.75rem", borderBottom: "1px solid #1e293b" }, children: [
+          /* @__PURE__ */ e.jsxs("span", { style: { color: "#64748b", whiteSpace: "nowrap" }, children: [
+            "[",
+            C.timestamp,
+            "]"
+          ] }),
+          /* @__PURE__ */ e.jsx("span", { style: { color: B, fontWeight: "bold", width: "60px" }, children: C.level }),
+          /* @__PURE__ */ e.jsxs("span", { style: { color: "#cbd5e1", width: "120px" }, children: [
+            "[",
+            C.service,
+            "]"
+          ] }),
+          /* @__PURE__ */ e.jsx("span", { style: { flex: 1 }, children: C.message })
+        ] }, C.id);
+      }) })
+    ] });
+  };
+  return /* @__PURE__ */ e.jsxs("div", { className: "pk-container", style: { minHeight: "100vh" }, children: [
+    u && /* @__PURE__ */ e.jsxs("div", { style: { position: "fixed", inset: 0, backgroundColor: "rgba(255,255,255,0.8)", zIndex: 100, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", backdropFilter: "blur(4px)" }, children: [
+      /* @__PURE__ */ e.jsx("div", { className: "pk-skeleton", style: { width: "80px", height: "80px", borderRadius: "50%", marginBottom: "1rem" } }),
+      /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", children: "Processing Data..." })
+    ] }),
+    /* @__PURE__ */ e.jsxs("div", { style: { marginBottom: "2rem" }, children: [
+      /* @__PURE__ */ e.jsxs("h1", { className: "pk-heading-xl", children: [
+        se.organizationName,
+        " Engine"
+      ] }),
+      /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", children: "Real-time metrics and system health monitoring." })
+    ] }),
+    x(),
+    /* @__PURE__ */ e.jsxs("div", { style: { position: "relative", minHeight: "500px" }, children: [
+      m === "summary" && k(),
+      m === "financial" && g(),
+      m === "logs" && W()
+    ] }),
+    /* @__PURE__ */ e.jsx(A, {})
+  ] });
+}
+const K = {
+  companyInfo: {
+    name: "PopSite Agency",
+    address: "123 Creative Blvd, Tech District",
+    email: "billing@popsite.com",
+    taxRate: 8.5
+  },
+  clients: [
+    { id: "cli_1", name: "Acme Corp", email: "finance@acme.inc", phone: "+1 555-0100" },
+    { id: "cli_2", name: "Stark Industries", email: "accounts@stark.com", phone: "+1 555-0101" },
+    { id: "cli_3", name: "Wayne Enterprises", email: "billing@wayne.ent", phone: "+1 555-0102" },
+    { id: "cli_4", name: "Umbrella Corp", email: "finance@umbrella.com", phone: "+1 555-0103" }
+  ],
+  recentInvoices: [
+    { id: "INV-2026-001", client: "Acme Corp", date: "2026-04-01", amount: 4500, status: "Paid" },
+    { id: "INV-2026-002", client: "Stark Industries", date: "2026-04-05", amount: 12500, status: "Pending" },
+    { id: "INV-2026-003", client: "Wayne Enterprises", date: "2026-04-07", amount: 8e3, status: "Overdue" }
+  ]
+};
+function Ot() {
+  const [m, o] = p("dashboard"), [n, j] = p(K.recentInvoices), [u, N] = p(""), [h, A] = p(""), [l, T] = p(K.companyInfo.taxRate), [x, k] = p([
+    { id: 1, description: "Website Redesign", qty: 1, rate: 2500 },
+    { id: 2, description: "Hosting (Annual)", qty: 1, rate: 150 }
+  ]), { showToast: g, ToastContainer: W } = G();
+  $(() => {
+    const t = localStorage.getItem("popsite_invoices");
+    if (t)
+      try {
+        j(JSON.parse(t));
+      } catch {
+      }
+  }, []), $(() => {
+    localStorage.setItem("popsite_invoices", JSON.stringify(n));
+  }, [n]);
+  const y = x.reduce((t, a) => t + a.qty * a.rate, 0), C = y * (l / 100), B = y + C, D = () => {
+    k([...x, { id: Date.now(), description: "", qty: 1, rate: 0 }]);
+  }, P = (t) => {
+    k(x.filter((a) => a.id !== t));
+  }, S = (t, a, i) => {
+    k(x.map(
+      (f) => f.id === t ? { ...f, [a]: i } : f
+    ));
+  }, d = () => {
+    var a;
+    if (!h) {
+      g("Please select a client", "error");
+      return;
+    }
+    const t = {
+      id: `INV-${(/* @__PURE__ */ new Date()).getFullYear()}-${Math.floor(Math.random() * 1e3)}`,
+      client: ((a = K.clients.find((i) => i.id === h)) == null ? void 0 : a.name) || "Unknown",
+      date: (/* @__PURE__ */ new Date()).toISOString().split("T")[0],
+      amount: B,
+      status: "Pending"
+    };
+    j([t, ...n]), g(`Invoice ${t.id} generated!`, "success"), o("dashboard");
+  }, b = () => /* @__PURE__ */ e.jsxs("div", { className: "pk-card no-print", style: { marginBottom: "2rem", padding: "1rem", display: "flex", gap: "1rem", overflowX: "auto" }, children: [
+    /* @__PURE__ */ e.jsx("button", { className: m === "dashboard" ? "pk-btn pk-btn-primary" : "pk-btn pk-btn-outline", onClick: () => o("dashboard"), children: "Overview" }),
+    /* @__PURE__ */ e.jsx("button", { className: m === "creator" ? "pk-btn pk-btn-primary" : "pk-btn pk-btn-outline", onClick: () => o("creator"), children: "Create Invoice" }),
+    /* @__PURE__ */ e.jsx("button", { className: m === "clients" ? "pk-btn pk-btn-primary" : "pk-btn pk-btn-outline", onClick: () => o("clients"), children: "Client Directory" })
+  ] }), M = () => /* @__PURE__ */ e.jsxs("div", { className: "animate-fade-in no-print", children: [
+    /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "2rem" }, children: [
+      /* @__PURE__ */ e.jsx("h2", { className: "pk-heading-lg", children: "Recent Invoices" }),
+      /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-primary", onClick: () => o("creator"), children: "+ New Invoice" })
+    ] }),
+    /* @__PURE__ */ e.jsx("div", { className: "pk-card", style: { overflowX: "auto" }, children: /* @__PURE__ */ e.jsxs("table", { style: { width: "100%", borderCollapse: "collapse", textAlign: "left" }, children: [
+      /* @__PURE__ */ e.jsx("thead", { children: /* @__PURE__ */ e.jsxs("tr", { style: { background: "var(--pk-bg-main)", borderBottom: "1px solid var(--pk-border)" }, children: [
+        /* @__PURE__ */ e.jsx("th", { style: { padding: "1rem 1.5rem", color: "var(--pk-text-muted)" }, children: "Invoice ID" }),
+        /* @__PURE__ */ e.jsx("th", { style: { padding: "1rem 1.5rem", color: "var(--pk-text-muted)" }, children: "Client" }),
+        /* @__PURE__ */ e.jsx("th", { style: { padding: "1rem 1.5rem", color: "var(--pk-text-muted)" }, children: "Date" }),
+        /* @__PURE__ */ e.jsx("th", { style: { padding: "1rem 1.5rem", color: "var(--pk-text-muted)" }, children: "Amount" }),
+        /* @__PURE__ */ e.jsx("th", { style: { padding: "1rem 1.5rem", color: "var(--pk-text-muted)" }, children: "Status" })
+      ] }) }),
+      /* @__PURE__ */ e.jsx("tbody", { children: n.map((t, a) => /* @__PURE__ */ e.jsxs("tr", { style: { borderBottom: "1px solid var(--pk-border)" }, children: [
+        /* @__PURE__ */ e.jsx("td", { style: { padding: "1rem 1.5rem", fontWeight: 600 }, children: t.id }),
+        /* @__PURE__ */ e.jsx("td", { style: { padding: "1rem 1.5rem" }, children: t.client }),
+        /* @__PURE__ */ e.jsx("td", { style: { padding: "1rem 1.5rem" }, children: t.date }),
+        /* @__PURE__ */ e.jsxs("td", { style: { padding: "1rem 1.5rem", fontWeight: "bold" }, children: [
+          "$",
+          t.amount.toLocaleString(void 0, { minimumFractionDigits: 2 })
+        ] }),
+        /* @__PURE__ */ e.jsx("td", { style: { padding: "1rem 1.5rem" }, children: /* @__PURE__ */ e.jsx("span", { className: "pk-badge", style: {
+          background: t.status === "Paid" ? "var(--pk-success)" : t.status === "Overdue" ? "var(--pk-danger)" : "var(--pk-warning)",
+          color: "white"
+        }, children: t.status }) })
+      ] }, a)) })
+    ] }) })
+  ] }), I = () => {
+    const t = K.clients.filter((a) => a.name.toLowerCase().includes(u.toLowerCase()));
+    return /* @__PURE__ */ e.jsxs("div", { className: "animate-fade-in no-print", children: [
+      /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "2rem" }, children: [
+        /* @__PURE__ */ e.jsx("h2", { className: "pk-heading-lg", children: "Client Directory" }),
+        /* @__PURE__ */ e.jsx(
+          "input",
+          {
+            type: "text",
+            className: "pk-input",
+            placeholder: "Search clients...",
+            value: u,
+            onChange: (a) => N(a.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e.jsx("div", { className: "pk-grid", style: { gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))" }, children: t.map((a) => /* @__PURE__ */ e.jsxs("div", { className: "pk-card", style: { padding: "1.5rem" }, children: [
+        /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", style: { marginBottom: "1rem" }, children: a.name }),
+        /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+          /* @__PURE__ */ e.jsxs("a", { href: `mailto:${a.email}`, className: "pk-text-body", style: { color: "var(--pk-primary)", textDecoration: "none" }, children: [
+            "✉️ ",
+            a.email
+          ] }),
+          /* @__PURE__ */ e.jsxs("a", { href: `tel:${a.phone}`, className: "pk-text-body", style: { color: "var(--pk-text-main)", textDecoration: "none" }, children: [
+            "📞 ",
+            a.phone
+          ] })
+        ] }),
+        /* @__PURE__ */ e.jsx(
+          "button",
+          {
+            className: "pk-btn pk-btn-outline",
+            style: { width: "100%", marginTop: "1.5rem" },
+            onClick: () => {
+              A(a.id), o("creator");
+            },
+            children: "Invoice Client"
+          }
+        )
+      ] }, a.id)) })
+    ] });
+  }, r = () => {
+    var t, a;
+    return /* @__PURE__ */ e.jsxs("div", { className: "animate-fade-in print-container", style: { background: "white", padding: "2rem", borderRadius: "var(--pk-radius-lg)", boxShadow: "var(--pk-shadow-lg)" }, children: [
+      /* @__PURE__ */ e.jsx("style", { children: `
+          @media print {
+            body * { visibility: hidden; }
+            .print-container, .print-container * { visibility: visible; }
+            .print-container { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none; padding: 0; }
+            .no-print { display: none !important; }
+            .pk-container { padding: 0 !important; max-width: 100% !important; margin: 0 !important; }
+            @page { margin: 1cm; }
+          }
+       ` }),
+      /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: "3rem", borderBottom: "2px solid var(--pk-border)", paddingBottom: "2rem" }, children: [
+        /* @__PURE__ */ e.jsxs("div", { children: [
+          /* @__PURE__ */ e.jsx("h1", { className: "pk-heading-xl", style: { color: "var(--pk-primary)", marginBottom: "0.5rem" }, children: "INVOICE" }),
+          /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", children: "ID: INV-DRAFT" }),
+          /* @__PURE__ */ e.jsxs("p", { className: "pk-text-body", children: [
+            "Date: ",
+            (/* @__PURE__ */ new Date()).toISOString().split("T")[0]
+          ] })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { style: { textAlign: "right" }, children: [
+          /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", children: K.companyInfo.name }),
+          /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", style: { whiteSpace: "pre-line" }, children: K.companyInfo.address }),
+          /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", children: K.companyInfo.email })
+        ] })
+      ] }),
+      /* @__PURE__ */ e.jsx("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: "3rem" }, children: /* @__PURE__ */ e.jsxs("div", { style: { flex: 1 }, children: [
+        /* @__PURE__ */ e.jsx("h4", { className: "pk-label", style: { marginBottom: "0.5rem", color: "var(--pk-text-muted)" }, children: "Bill To:" }),
+        /* @__PURE__ */ e.jsxs(
+          "select",
+          {
+            className: "pk-input no-print",
+            value: h,
+            onChange: (i) => A(i.target.value),
+            style: { width: "100%", maxWidth: "300px", marginBottom: "0.5rem" },
+            children: [
+              /* @__PURE__ */ e.jsx("option", { value: "", children: "-- Select Client --" }),
+              K.clients.map((i) => /* @__PURE__ */ e.jsx("option", { value: i.id, children: i.name }, i.id))
+            ]
+          }
+        ),
+        /* @__PURE__ */ e.jsxs("div", { style: { display: "none", display: h ? "block" : "none" }, children: [
+          /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", children: (t = K.clients.find((i) => i.id === h)) == null ? void 0 : t.name }),
+          /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", children: (a = K.clients.find((i) => i.id === h)) == null ? void 0 : a.email })
+        ] }),
+        !h && /* @__PURE__ */ e.jsx("div", { style: { display: "none" }, children: "_____________" })
+      ] }) }),
+      /* @__PURE__ */ e.jsxs("table", { style: { width: "100%", borderCollapse: "collapse", marginBottom: "2rem" }, children: [
+        /* @__PURE__ */ e.jsx("thead", { children: /* @__PURE__ */ e.jsxs("tr", { style: { background: "var(--pk-primary-light)", color: "var(--pk-primary)" }, children: [
+          /* @__PURE__ */ e.jsx("th", { style: { padding: "1rem", textAlign: "left" }, children: "Description" }),
+          /* @__PURE__ */ e.jsx("th", { style: { padding: "1rem", textAlign: "center", width: "100px" }, children: "Qty" }),
+          /* @__PURE__ */ e.jsx("th", { style: { padding: "1rem", textAlign: "right", width: "150px" }, children: "Rate" }),
+          /* @__PURE__ */ e.jsx("th", { style: { padding: "1rem", textAlign: "right", width: "150px" }, children: "Total" }),
+          /* @__PURE__ */ e.jsx("th", { className: "no-print", style: { width: "50px" } })
+        ] }) }),
+        /* @__PURE__ */ e.jsx("tbody", { children: x.map((i, f) => /* @__PURE__ */ e.jsxs("tr", { style: { borderBottom: "1px solid var(--pk-border)" }, children: [
+          /* @__PURE__ */ e.jsx("td", { style: { padding: "1rem" }, children: /* @__PURE__ */ e.jsx(
+            "input",
+            {
+              type: "text",
+              className: "pk-input",
+              style: { width: "100%", border: "none", background: "transparent" },
+              value: i.description,
+              onChange: (F) => S(i.id, "description", F.target.value),
+              placeholder: "Item description"
+            }
+          ) }),
+          /* @__PURE__ */ e.jsx("td", { style: { padding: "1rem", textAlign: "center" }, children: /* @__PURE__ */ e.jsx(
+            "input",
+            {
+              type: "number",
+              className: "pk-input",
+              style: { width: "60px", textAlign: "center" },
+              value: i.qty,
+              onChange: (F) => S(i.id, "qty", parseFloat(F.target.value) || 0)
+            }
+          ) }),
+          /* @__PURE__ */ e.jsx("td", { style: { padding: "1rem", textAlign: "right" }, children: /* @__PURE__ */ e.jsx(
+            "input",
+            {
+              type: "number",
+              className: "pk-input",
+              style: { width: "100px", textAlign: "right" },
+              value: i.rate,
+              onChange: (F) => S(i.id, "rate", parseFloat(F.target.value) || 0)
+            }
+          ) }),
+          /* @__PURE__ */ e.jsxs("td", { style: { padding: "1rem", textAlign: "right", fontWeight: 600 }, children: [
+            "$",
+            (i.qty * i.rate).toFixed(2)
+          ] }),
+          /* @__PURE__ */ e.jsx("td", { className: "no-print", style: { padding: "1rem", textAlign: "center" }, children: /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-outline", style: { padding: "0.25rem 0.5rem", color: "var(--pk-danger)", border: "none" }, onClick: () => P(i.id), children: "×" }) })
+        ] }, i.id)) })
+      ] }),
+      /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-outline no-print", onClick: D, style: { marginBottom: "2rem" }, children: "+ Add Line Item" }),
+      /* @__PURE__ */ e.jsx("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ e.jsxs("div", { style: { width: "300px" }, children: [
+        /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: "1rem" }, children: [
+          /* @__PURE__ */ e.jsx("span", { className: "pk-text-body", children: "Subtotal" }),
+          /* @__PURE__ */ e.jsxs("span", { children: [
+            "$",
+            y.toFixed(2)
+          ] })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "1rem" }, children: [
+          /* @__PURE__ */ e.jsx("span", { className: "pk-text-body", children: "Tax Rate (%)" }),
+          /* @__PURE__ */ e.jsx("input", { type: "number", className: "pk-input no-print", style: { width: "80px", textAlign: "right" }, value: l, onChange: (i) => T(parseFloat(i.target.value) || 0) }),
+          /* @__PURE__ */ e.jsxs("span", { style: { display: "none" }, children: [
+            l,
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: "1rem", color: "var(--pk-text-muted)" }, children: [
+          /* @__PURE__ */ e.jsx("span", { className: "pk-text-body", children: "Tax Amount" }),
+          /* @__PURE__ */ e.jsxs("span", { children: [
+            "$",
+            C.toFixed(2)
+          ] })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: "1rem", borderTop: "2px solid var(--pk-border)", paddingTop: "1rem" }, children: [
+          /* @__PURE__ */ e.jsx("span", { className: "pk-heading-md", children: "Total Due" }),
+          /* @__PURE__ */ e.jsxs("span", { className: "pk-heading-lg", style: { color: "var(--pk-primary)" }, children: [
+            "$",
+            B.toFixed(2)
+          ] })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ e.jsxs("div", { className: "no-print", style: { display: "flex", justifyContent: "flex-end", gap: "1rem", marginTop: "3rem" }, children: [
+        /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-secondary", onClick: () => window.print(), children: "🖨️ Print to PDF" }),
+        /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-primary", onClick: d, children: "✅ Save Invoice" })
+      ] })
+    ] });
+  };
+  return /* @__PURE__ */ e.jsxs("div", { className: "pk-container", style: { minHeight: "100vh" }, children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "no-print", style: { marginBottom: "2rem" }, children: [
+      /* @__PURE__ */ e.jsx("h1", { className: "pk-heading-xl", children: "Billing & Invoicing" }),
+      /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", children: "Manage clients and generate dynamic invoices." })
+    ] }),
+    b(),
+    /* @__PURE__ */ e.jsxs("div", { style: { position: "relative" }, children: [
+      m === "dashboard" && M(),
+      m === "clients" && I(),
+      m === "creator" && r()
+    ] }),
+    /* @__PURE__ */ e.jsx(W, {})
+  ] });
+}
+const Te = {
+  platformName: "PopBites Delivery",
+  categories: ["All", "Pizza", "Sushi", "Healthy", "Burgers", "Vegan"],
+  restaurants: [
+    {
+      id: "r1",
+      name: "Truffle & Crust",
+      category: "Pizza",
+      rating: 4.8,
+      deliveryTime: "25-40 min",
+      deliveryFee: 2.99,
+      image: "https://images.unsplash.com/photo-1513104890138-7c749659a591?auto=format&fit=crop&w=800&q=80",
+      menu: [
+        { id: "m1", name: "Margherita Truffle", description: "Fresh mozzarella, truffle oil, basil.", price: 18, dietary: ["Vegetarian"] },
+        { id: "m2", name: "Spicy Soppressata", description: "Hot honey, chili flakes, cured meats.", price: 21, dietary: [] },
+        { id: "m3", name: "Garlic Knots", description: "Oven-baked with pesto dip.", price: 6.5, dietary: ["Vegetarian"] }
+      ]
+    },
+    {
+      id: "r2",
+      name: "Ocean Zen",
+      category: "Sushi",
+      rating: 4.9,
+      deliveryTime: "30-45 min",
+      deliveryFee: 4.99,
+      image: "https://images.unsplash.com/photo-1579871494447-9811cf80d66c?auto=format&fit=crop&w=800&q=80",
+      menu: [
+        { id: "m4", name: "Spicy Tuna Roll", description: "Fresh tuna, spicy mayo, crispy tempura bits.", price: 14, dietary: ["Pescatarian", "Gluten-Free"] },
+        { id: "m5", name: "Dragon Roll", description: "Eel, cucumber, topped with avocado.", price: 16, dietary: [] },
+        { id: "m6", name: "Edamame", description: "Steamed soybeans with sea salt.", price: 5, dietary: ["Vegan", "Gluten-Free"] }
+      ]
+    },
+    {
+      id: "r3",
+      name: "Green Machine",
+      category: "Vegan",
+      rating: 4.6,
+      deliveryTime: "15-25 min",
+      deliveryFee: 1.99,
+      image: "https://images.unsplash.com/photo-1512621776951-a57141f2eefd?auto=format&fit=crop&w=800&q=80",
+      menu: [
+        { id: "m7", name: "Buddha Bowl", description: "Quinoa, roasted sweet potato, kale, tahini.", price: 15, dietary: ["Vegan", "Gluten-Free"] },
+        { id: "m8", name: "Beyond Burger", description: "Plant-based patty with vegan cheddar.", price: 16, dietary: ["Vegan"] },
+        { id: "m9", name: "Acai Smoothie", description: "Mixed berries, banana, oat milk.", price: 8, dietary: ["Vegan", "Gluten-Free"] }
+      ]
+    }
+  ]
+};
+function _t() {
+  const [m, o] = p("directory"), [n, j] = p(null), [u, N] = p("All"), [h, A] = p(""), [l, T] = p([]), [x, k] = p(0), [g, W] = p(null), { showToast: y, ToastContainer: C } = G();
+  $(() => {
+    const I = localStorage.getItem("popsite_food_cart");
+    if (I)
+      try {
+        T(JSON.parse(I));
+      } catch {
+      }
+  }, []), $(() => {
+    localStorage.setItem("popsite_food_cart", JSON.stringify(l));
+  }, [l]);
+  const B = (I) => {
+    const r = l.find((t) => t.item.id === I.id);
+    T(r ? l.map((t) => t.item.id === I.id ? { ...t, qty: t.qty + 1 } : t) : [...l, { item: I, qty: 1 }]), y(`Added ${I.name} to cart`, "success");
+  }, D = (I, r) => {
+    T(l.map((t) => t.item.id === I ? { ...t, qty: Math.max(0, t.qty + r) } : t).filter((t) => t.qty > 0));
+  }, P = () => {
+    if (l.length === 0) return;
+    const I = l.reduce((r, t) => r + t.item.price * t.qty, 0) + n.deliveryFee;
+    W({
+      id: `ORD-${Math.floor(Math.random() * 1e4)}`,
+      restaurant: n,
+      items: [...l],
+      total: I
+    }), T([]), k(0), o("tracker"), y("Order confirmed!", "success"), setTimeout(() => {
+      k(1), y("Your order is out for delivery!", "info"), setTimeout(() => {
+        k(2), y("Your order has arrived. Enjoy!", "success");
+      }, 5e3);
+    }, 4e3);
+  }, S = () => {
+    if (!n) return null;
+    const I = l.reduce((t, a) => t + a.item.price * a.qty, 0), r = I + n.deliveryFee;
+    return /* @__PURE__ */ e.jsxs("div", { className: "pk-card", style: { position: "sticky", top: "20px", display: "flex", flexDirection: "column", height: "calc(100vh - 40px)" }, children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "pk-card-header", style: { paddingBottom: "1rem", borderBottom: "1px solid var(--pk-border)" }, children: [
+        /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", children: "Your Order" }),
+        /* @__PURE__ */ e.jsx("p", { className: "pk-text-sm", children: n.name })
+      ] }),
+      /* @__PURE__ */ e.jsx("div", { className: "pk-card-body", style: { flex: 1, overflowY: "auto", padding: "1rem" }, children: l.length === 0 ? /* @__PURE__ */ e.jsxs("div", { className: "pk-empty-state", style: { padding: "2rem 1rem", border: "none" }, children: [
+        /* @__PURE__ */ e.jsx("div", { style: { fontSize: "3rem", opacity: 0.5, marginBottom: "1rem" }, children: "🛒" }),
+        /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", children: "Cart is empty." })
+      ] }) : /* @__PURE__ */ e.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: l.map((t, a) => /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+        /* @__PURE__ */ e.jsxs("div", { style: { flex: 1 }, children: [
+          /* @__PURE__ */ e.jsx("p", { className: "pk-label", style: { marginBottom: "0.25rem" }, children: t.item.name }),
+          /* @__PURE__ */ e.jsxs("p", { className: "pk-text-sm", children: [
+            "$",
+            (t.item.price * t.qty).toFixed(2)
+          ] })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", background: "var(--pk-bg-main)", borderRadius: "var(--pk-radius-full)", padding: "0.25rem" }, children: [
+          /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-outline", style: { borderRadius: "50%", width: 28, height: 28, padding: 0, display: "flex", alignItems: "center", justifyItems: "center", justifyContent: "center" }, onClick: () => D(t.item.id, -1), children: "-" }),
+          /* @__PURE__ */ e.jsx("span", { style: { width: "20px", textAlign: "center", fontWeight: "bold" }, children: t.qty }),
+          /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-outline", style: { borderRadius: "50%", width: 28, height: 28, padding: 0, display: "flex", alignItems: "center", justifyItems: "center", justifyContent: "center" }, onClick: () => D(t.item.id, 1), children: "+" })
+        ] })
+      ] }, a)) }) }),
+      /* @__PURE__ */ e.jsxs("div", { className: "pk-card-footer", style: { padding: "1.5rem", background: "var(--pk-bg-main)" }, children: [
+        /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: "0.5rem" }, children: [
+          /* @__PURE__ */ e.jsx("span", { className: "pk-text-body", children: "Subtotal" }),
+          /* @__PURE__ */ e.jsxs("span", { children: [
+            "$",
+            I.toFixed(2)
+          ] })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: "1rem" }, children: [
+          /* @__PURE__ */ e.jsx("span", { className: "pk-text-body", children: "Delivery Fee" }),
+          /* @__PURE__ */ e.jsxs("span", { children: [
+            "$",
+            n.deliveryFee.toFixed(2)
+          ] })
+        ] }),
+        /* @__PURE__ */ e.jsxs(
+          "button",
+          {
+            className: "pk-btn pk-btn-primary",
+            style: { width: "100%", padding: "1rem", fontSize: "1.125rem" },
+            disabled: l.length === 0,
+            onClick: P,
+            children: [
+              "Checkout • $",
+              r.toFixed(2)
+            ]
+          }
+        )
+      ] })
+    ] });
+  }, d = () => {
+    const I = Te.restaurants.filter((r) => {
+      const t = u === "All" || r.category === u, a = r.name.toLowerCase().includes(h.toLowerCase());
+      return t && a;
+    });
+    return /* @__PURE__ */ e.jsxs("div", { className: "pk-container animate-fade-in", children: [
+      /* @__PURE__ */ e.jsxs("div", { style: { marginBottom: "2rem" }, children: [
+        /* @__PURE__ */ e.jsx("h1", { className: "pk-heading-xl", style: { marginBottom: "0.5rem" }, children: Te.platformName }),
+        /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", children: "Cravings delivered to your door." })
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { className: "pk-card pk-glass", style: { padding: "1.5rem", marginBottom: "2rem", display: "flex", flexDirection: "column", gap: "1.5rem" }, children: [
+        /* @__PURE__ */ e.jsx(
+          "input",
+          {
+            type: "text",
+            className: "pk-input",
+            placeholder: "Search restaurants...",
+            style: { width: "100%", maxWidth: "500px" },
+            value: h,
+            onChange: (r) => A(r.target.value)
+          }
+        ),
+        /* @__PURE__ */ e.jsx("div", { style: { display: "flex", gap: "0.75rem", overflowX: "auto", paddingBottom: "0.5rem" }, children: Te.categories.map((r) => /* @__PURE__ */ e.jsx(
+          "button",
+          {
+            className: u === r ? "pk-btn pk-btn-primary" : "pk-btn pk-btn-outline",
+            style: { borderRadius: "var(--pk-radius-full)", padding: "0.5rem 1.25rem", whiteSpace: "nowrap" },
+            onClick: () => N(r),
+            children: r
+          },
+          r
+        )) })
+      ] }),
+      /* @__PURE__ */ e.jsx("div", { className: "pk-grid", style: { gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))" }, children: I.map((r) => /* @__PURE__ */ e.jsxs("div", { className: "pk-card pk-card-interactive", style: { cursor: "pointer", display: "flex", flexDirection: "column" }, onClick: () => {
+        j(r), o("menu");
+      }, children: [
+        /* @__PURE__ */ e.jsxs("div", { style: { height: "200px", width: "100%" }, children: [
+          /* @__PURE__ */ e.jsx("img", { src: r.image, alt: r.name, style: { width: "100%", height: "100%", objectFit: "cover" }, onError: (t) => {
+            t.target.style.display = "none", t.target.nextSibling.style.display = "flex";
+          } }),
+          /* @__PURE__ */ e.jsx("div", { style: { display: "none", width: "100%", height: "100%", background: "var(--pk-secondary)", color: "white", alignItems: "center", justifyContent: "center", fontSize: "2rem" }, children: r.name[0] })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { className: "pk-card-body", style: { flex: 1 }, children: [
+          /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: "0.5rem" }, children: [
+            /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", children: r.name }),
+            /* @__PURE__ */ e.jsxs("span", { style: { background: "#f59e0b", color: "white", padding: "0.25rem 0.5rem", borderRadius: "var(--pk-radius-sm)", fontWeight: "bold", fontSize: "0.875rem" }, children: [
+              "★ ",
+              r.rating
+            ] })
+          ] }),
+          /* @__PURE__ */ e.jsxs("p", { className: "pk-text-sm", style: { marginBottom: "1rem" }, children: [
+            r.category,
+            " • ",
+            r.deliveryTime
+          ] }),
+          /* @__PURE__ */ e.jsxs("span", { className: "pk-badge", style: { background: "var(--pk-primary-light)", color: "var(--pk-primary)" }, children: [
+            "Delivery: $",
+            r.deliveryFee
+          ] })
+        ] })
+      ] }, r.id)) })
+    ] });
+  }, b = () => /* @__PURE__ */ e.jsxs("div", { className: "pk-container animate-fade-in", style: { display: "flex", gap: "2rem", alignItems: "flex-start" }, children: [
+    /* @__PURE__ */ e.jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "2rem" }, children: [
+      /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-outline", style: { alignSelf: "flex-start" }, onClick: () => o("directory"), children: "← Back" }),
+      /* @__PURE__ */ e.jsxs("div", { style: { height: "300px", width: "100%", borderRadius: "var(--pk-radius-lg)", overflow: "hidden", position: "relative" }, children: [
+        /* @__PURE__ */ e.jsx("img", { src: n.image, alt: n.name, style: { width: "100%", height: "100%", objectFit: "cover" } }),
+        /* @__PURE__ */ e.jsxs("div", { style: { position: "absolute", bottom: 0, left: 0, width: "100%", padding: "2rem", background: "linear-gradient(transparent, rgba(0,0,0,0.8))", color: "white" }, children: [
+          /* @__PURE__ */ e.jsx("h1", { className: "pk-heading-xl", style: { marginBottom: "0.5rem" }, children: n.name }),
+          /* @__PURE__ */ e.jsxs("p", { style: { fontSize: "1.125rem", opacity: 0.9 }, children: [
+            n.category,
+            " • ",
+            n.rating,
+            " Rating"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { children: [
+        /* @__PURE__ */ e.jsx("h2", { className: "pk-heading-lg", style: { marginBottom: "1.5rem" }, children: "Menu" }),
+        /* @__PURE__ */ e.jsx("div", { className: "pk-grid", style: { gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))" }, children: n.menu.map((I) => /* @__PURE__ */ e.jsxs("div", { className: "pk-card", style: { padding: "1.5rem", display: "flex", flexDirection: "column" }, children: [
+          /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: "0.5rem" }, children: [
+            /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", children: I.name }),
+            /* @__PURE__ */ e.jsxs("span", { className: "pk-heading-md", style: { color: "var(--pk-primary)" }, children: [
+              "$",
+              I.price.toFixed(2)
+            ] })
+          ] }),
+          /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", style: { marginBottom: "1rem", flex: 1 }, children: I.description }),
+          /* @__PURE__ */ e.jsx("div", { style: { display: "flex", gap: "0.5rem", flexWrap: "wrap", marginBottom: "1.5rem" }, children: I.dietary.map((r) => /* @__PURE__ */ e.jsx("span", { className: "pk-badge", style: { background: "rgba(16, 185, 129, 0.1)", color: "var(--pk-success)" }, children: r }, r)) }),
+          /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-outline", style: { marginTop: "auto" }, onClick: () => B(I), children: "+ Add to Cart" })
+        ] }, I.id)) })
+      ] })
+    ] }),
+    /* @__PURE__ */ e.jsx("div", { style: { width: "350px", flexShrink: 0 }, className: "pk-hidden-mobile", children: S() })
+  ] }), M = () => {
+    if (!g) return null;
+    const I = x === 0 ? 33 : x === 1 ? 66 : 100, r = ["Preparing", "Out for Delivery", "Arrived"];
+    return /* @__PURE__ */ e.jsxs("div", { className: "pk-container animate-fade-in", style: { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "80vh" }, children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "pk-card", style: { width: "100%", maxWidth: "600px", overflow: "hidden" }, children: [
+        /* @__PURE__ */ e.jsxs("div", { style: { height: "250px", background: "linear-gradient(135deg, #e2e8f0, #cbd5e1)", position: "relative", overflow: "hidden", display: "flex", alignItems: "center", justifyContent: "center" }, children: [
+          /* @__PURE__ */ e.jsx("div", { style: { position: "absolute", width: "200%", height: "200%", background: "radial-gradient(circle, transparent 20%, rgba(255,255,255,0.4) 20%, rgba(255,255,255,0.4) 80%, transparent 80%, transparent) 0 0, radial-gradient(circle, transparent 20%, rgba(255,255,255,0.4) 20%, rgba(255,255,255,0.4) 80%, transparent 80%, transparent) 50px 50px", backgroundSize: "100px 100px", opacity: 0.5 } }),
+          /* @__PURE__ */ e.jsx("div", { style: { position: "relative", fontSize: "4rem", filter: "drop-shadow(0 10px 10px rgba(0,0,0,0.2))", animation: x === 1 ? "bounce 2s infinite" : "none" }, children: x === 0 ? "🧑‍🍳" : x === 1 ? "🛵" : "🎉" })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { className: "pk-card-body", style: { padding: "3rem 2rem" }, children: [
+          /* @__PURE__ */ e.jsxs("h2", { className: "pk-heading-xl", style: { textAlign: "center", marginBottom: "1rem" }, children: [
+            "Order ",
+            r[x]
+          ] }),
+          /* @__PURE__ */ e.jsxs("p", { className: "pk-text-body", style: { textAlign: "center", marginBottom: "3rem" }, children: [
+            g.id,
+            " • ",
+            g.restaurant.name
+          ] }),
+          /* @__PURE__ */ e.jsxs("div", { style: { position: "relative", marginBottom: "3rem" }, children: [
+            /* @__PURE__ */ e.jsx("div", { style: { position: "absolute", top: "50%", left: 0, width: "100%", height: "4px", background: "var(--pk-bg-main)", transform: "translateY(-50%)", zIndex: 0 } }),
+            /* @__PURE__ */ e.jsx("div", { style: { position: "absolute", top: "50%", left: 0, width: `${I}%`, height: "4px", background: "var(--pk-primary)", transform: "translateY(-50%)", zIndex: 1, transition: "width 1s cubic-bezier(0.4, 0, 0.2, 1)" } }),
+            /* @__PURE__ */ e.jsx("div", { style: { display: "flex", justifyContent: "space-between", position: "relative", zIndex: 2 }, children: [0, 1, 2].map((t) => /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "0.5rem", width: "33.33%" }, children: [
+              /* @__PURE__ */ e.jsx("div", { style: {
+                width: "24px",
+                height: "24px",
+                borderRadius: "50%",
+                background: t <= x ? "var(--pk-primary)" : "var(--pk-bg-main)",
+                border: `4px solid ${t <= x ? "var(--pk-primary-light)" : "var(--pk-border)"}`,
+                transition: "all 0.5s"
+              } }),
+              /* @__PURE__ */ e.jsx("span", { className: "pk-text-sm", style: { fontWeight: t === x ? 600 : 400, color: t <= x ? "var(--pk-text-main)" : "var(--pk-text-muted)" }, children: r[t] })
+            ] }, t)) })
+          ] }),
+          /* @__PURE__ */ e.jsxs("div", { style: { background: "var(--pk-bg-main)", padding: "1.5rem", borderRadius: "var(--pk-radius-md)" }, children: [
+            /* @__PURE__ */ e.jsx("h4", { className: "pk-label", style: { marginBottom: "1rem" }, children: "Order Summary" }),
+            g.items.map((t, a) => /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: "0.5rem" }, children: [
+              /* @__PURE__ */ e.jsxs("span", { className: "pk-text-sm", children: [
+                t.qty,
+                "x ",
+                t.item.name
+              ] }),
+              /* @__PURE__ */ e.jsxs("span", { className: "pk-text-sm", children: [
+                "$",
+                (t.item.price * t.qty).toFixed(2)
+              ] })
+            ] }, a)),
+            /* @__PURE__ */ e.jsxs("div", { style: { borderTop: "1px solid var(--pk-border)", marginTop: "1rem", paddingTop: "1rem", display: "flex", justifyContent: "space-between" }, children: [
+              /* @__PURE__ */ e.jsx("span", { className: "pk-heading-md", children: "Total" }),
+              /* @__PURE__ */ e.jsxs("span", { className: "pk-heading-md", children: [
+                "$",
+                g.total.toFixed(2)
+              ] })
+            ] })
+          ] })
+        ] }),
+        x === 2 && /* @__PURE__ */ e.jsx("div", { className: "pk-card-footer", style: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-primary", onClick: () => {
+          W(null), o("directory");
+        }, children: "Back to Restaurants" }) })
+      ] }),
+      /* @__PURE__ */ e.jsx("style", { children: `
+             @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
+           ` })
+    ] });
+  };
+  return /* @__PURE__ */ e.jsxs("div", { style: { position: "relative", minHeight: "100vh", backgroundColor: "var(--pk-bg-main)" }, children: [
+    m === "directory" && d(),
+    m === "menu" && b(),
+    m === "tracker" && M(),
+    /* @__PURE__ */ e.jsx(C, {})
+  ] });
+}
+const Ke = {
+  institutionName: "PopSite Academy",
+  subjects: [
+    {
+      id: "sub_1",
+      title: "Advanced React Patterns",
+      duration: 15,
+      // in minutes
+      passingScore: 70,
+      // percentage
+      icon: "⚛️",
+      questions: [
+        { id: "q1", text: "Which hook should be used to memoize an expensive calculation?", type: "multiple-choice", options: ["useMemo", "useCallback", "useEffect", "useState"], correct: "useMemo" },
+        { id: "q2", text: "What is the primary purpose of useCallback?", type: "multiple-choice", options: ["Memoizing a value", "Memoizing a function", "Managing side effects", "Accessing DOM nodes"], correct: "Memoizing a function" },
+        { id: "q3", text: "React components must return a single outer element.", type: "true-false", options: ["True", "False"], correct: "True" },
+        { id: "q4", text: "Which method is completely forbidden in modern React 'State' arrays to avoid mutation?", type: "multiple-choice", options: ["concat", "filter", "map", "push"], correct: "push" },
+        { id: "q5", text: "useEffect cleanup functions run BEFORE the component unmounts.", type: "true-false", options: ["True", "False"], correct: "True" }
+      ]
+    },
+    {
+      id: "sub_2",
+      title: "Modern CSS Mastery",
+      duration: 10,
+      passingScore: 80,
+      icon: "🎨",
+      questions: [
+        { id: "q1", text: "What property is used to create glassmorphism?", type: "multiple-choice", options: ["opacity", "backdrop-filter", "background-blend-mode", "filter"], correct: "backdrop-filter" },
+        { id: "q2", text: "Which display type enables a 2D layout matrix?", type: "multiple-choice", options: ["flex", "block", "grid", "inline-block"], correct: "grid" },
+        { id: "q3", text: "Variables defined in :root have global scope.", type: "true-false", options: ["True", "False"], correct: "True" }
+      ]
+    }
+  ]
+};
+function zt() {
+  const [m, o] = p("selection"), [n, j] = p(null), [u, N] = p(0), [h, A] = p({}), [l, T] = p(0), [x, k] = p(0), [g, W] = p(!1), [y, C] = p(!1), { showToast: B, ToastContainer: D } = G(), P = (i, f = 1e3) => {
+    C(!0), setTimeout(() => {
+      C(!1), i();
+    }, f);
+  };
+  $(() => {
+    let i;
+    return m === "exam" && l > 0 ? i = setInterval(() => T((f) => f - 1), 1e3) : m === "exam" && l === 0 && S(), () => clearInterval(i);
+  }, [m, l]);
+  const S = () => {
+    B("Time's up! Auto-submitting exam.", "info"), b();
+  }, d = (i) => {
+    P(() => {
+      j(i), A({}), N(0), T(i.duration * 60), o("exam"), B(`Started: ${i.title}`, "success");
+    });
+  }, b = () => {
+    P(() => {
+      let i = 0;
+      n.questions.forEach((F) => {
+        h[F.id] === F.correct && i++;
+      });
+      const f = i / n.questions.length * 100;
+      k(f), W(f >= n.passingScore), o("results"), B("Exam submitted successfully.", "success");
+    }, 2e3);
+  }, M = (i) => {
+    const f = Math.floor(i / 60).toString().padStart(2, "0"), F = (i % 60).toString().padStart(2, "0");
+    return `${f}:${F}`;
+  }, I = (i, f) => {
+    A((F) => ({ ...F, [i]: f }));
+  }, r = () => /* @__PURE__ */ e.jsxs("div", { className: "pk-container animate-fade-in", style: { minHeight: "80vh", display: "flex", flexDirection: "column", justifyContent: "center" }, children: [
+    /* @__PURE__ */ e.jsxs("div", { style: { textAlign: "center", marginBottom: "3rem" }, children: [
+      /* @__PURE__ */ e.jsxs("h1", { className: "pk-heading-xl", style: { marginBottom: "1rem" }, children: [
+        Ke.institutionName,
+        " Portal"
+      ] }),
+      /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", style: { fontSize: "1.25rem" }, children: "Select a subject to begin your assessment." })
+    ] }),
+    /* @__PURE__ */ e.jsx("div", { className: "pk-grid", style: { gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))" }, children: Ke.subjects.map((i) => /* @__PURE__ */ e.jsxs("div", { className: "pk-card pk-card-interactive", style: { padding: "2rem", display: "flex", flexDirection: "column" }, children: [
+      /* @__PURE__ */ e.jsx("div", { style: { fontSize: "3rem", marginBottom: "1rem", opacity: 0.9 }, children: i.icon }),
+      /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", style: { marginBottom: "0.5rem" }, children: i.title }),
+      /* @__PURE__ */ e.jsxs("div", { style: { marginBottom: "2rem", flex: 1, display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+        /* @__PURE__ */ e.jsxs("p", { className: "pk-text-sm", children: [
+          "⏱️ Duration: ",
+          /* @__PURE__ */ e.jsxs("span", { style: { fontWeight: 600 }, children: [
+            i.duration,
+            " Minutes"
+          ] })
+        ] }),
+        /* @__PURE__ */ e.jsxs("p", { className: "pk-text-sm", children: [
+          "📝 Questions: ",
+          /* @__PURE__ */ e.jsx("span", { style: { fontWeight: 600 }, children: i.questions.length })
+        ] }),
+        /* @__PURE__ */ e.jsxs("p", { className: "pk-text-sm", children: [
+          "🎯 Passing Score: ",
+          /* @__PURE__ */ e.jsxs("span", { style: { fontWeight: 600 }, children: [
+            i.passingScore,
+            "%"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-primary pk-w-full", onClick: () => d(i), children: "Start Exam" })
+    ] }, i.id)) })
+  ] }), t = () => {
+    const i = n.questions[u], f = u === n.questions.length - 1, F = (u + 1) / n.questions.length * 100;
+    return /* @__PURE__ */ e.jsxs("div", { className: "pk-container animate-fade-in", style: { display: "flex", flexDirection: "column", alignItems: "center", paddingTop: "4rem" }, children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "pk-card pk-glass", style: { width: "100%", maxWidth: "800px", display: "flex", justifyContent: "space-between", alignItems: "center", padding: "1.5rem", marginBottom: "2rem", position: "sticky", top: "1rem", zIndex: 10 }, children: [
+        /* @__PURE__ */ e.jsxs("div", { children: [
+          /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", children: n.title }),
+          /* @__PURE__ */ e.jsxs("p", { className: "pk-text-sm", children: [
+            "Question ",
+            u + 1,
+            " of ",
+            n.questions.length
+          ] })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "1rem" }, children: [
+          /* @__PURE__ */ e.jsx("span", { className: "pk-text-sm", children: "Time Remaining:" }),
+          /* @__PURE__ */ e.jsx("span", { className: "pk-badge", style: { fontSize: "1.5rem", background: l < 120 ? "var(--pk-danger)" : "var(--pk-primary)", color: "white", padding: "0.5rem 1rem" }, children: M(l) })
+        ] })
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { className: "pk-card", style: { width: "100%", maxWidth: "800px", padding: "3rem", minHeight: "400px", display: "flex", flexDirection: "column" }, children: [
+        /* @__PURE__ */ e.jsx("h2", { className: "pk-heading-lg", style: { marginBottom: "2.5rem" }, children: i.text }),
+        /* @__PURE__ */ e.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", flex: 1 }, children: i.options.map((w, R) => {
+          const q = h[i.id] === w;
+          return /* @__PURE__ */ e.jsxs(
+            "button",
+            {
+              className: q ? "pk-btn pk-btn-primary" : "pk-btn pk-btn-outline",
+              style: {
+                justifyContent: "flex-start",
+                padding: "1.5rem",
+                fontSize: "1.125rem",
+                textAlign: "left",
+                border: q ? "2px solid var(--pk-primary)" : "2px solid var(--pk-border)"
+              },
+              onClick: () => I(i.id, w),
+              children: [
+                /* @__PURE__ */ e.jsx("span", { style: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  width: "24px",
+                  height: "24px",
+                  borderRadius: "50%",
+                  marginRight: "1rem",
+                  background: q ? "white" : "transparent",
+                  color: q ? "var(--pk-primary)" : "var(--pk-text-muted)",
+                  border: q ? "none" : "2px solid var(--pk-border)",
+                  fontWeight: "bold",
+                  fontSize: "0.875rem"
+                }, children: String.fromCharCode(65 + R) }),
+                w
+              ]
+            },
+            R
+          );
+        }) }),
+        /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: "3rem", paddingTop: "2rem", borderTop: "1px solid var(--pk-border)" }, children: [
+          /* @__PURE__ */ e.jsx(
+            "button",
+            {
+              className: "pk-btn pk-btn-outline",
+              disabled: u === 0,
+              onClick: () => N((w) => w - 1),
+              children: "← Previous"
+            }
+          ),
+          /* @__PURE__ */ e.jsx("div", { style: { width: "150px", background: "var(--pk-bg-main)", height: "6px", borderRadius: "3px", position: "relative" }, children: /* @__PURE__ */ e.jsx("div", { style: { position: "absolute", top: 0, left: 0, height: "100%", background: "var(--pk-primary)", borderRadius: "3px", width: `${F}%`, transition: "width 0.3s" } }) }),
+          f ? /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-primary", onClick: b, children: "Submit Exam ✅" }) : /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-primary", onClick: () => N((w) => w + 1), children: "Next →" })
+        ] })
+      ] })
+    ] });
+  }, a = () => {
+    const i = 283 - 283 * x / 100, f = g ? "var(--pk-success)" : "var(--pk-danger)";
+    return /* @__PURE__ */ e.jsx("div", { className: "pk-container animate-fade-in", style: { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "80vh" }, children: /* @__PURE__ */ e.jsxs("div", { className: "pk-card", style: { width: "100%", maxWidth: "600px", textAlign: "center", overflow: "hidden" }, children: [
+      /* @__PURE__ */ e.jsxs("div", { style: { background: g ? "var(--pk-success)" : "var(--pk-danger)", color: "white", padding: "2rem" }, children: [
+        /* @__PURE__ */ e.jsx("h1", { className: "pk-heading-xl", style: { marginBottom: "0.5rem" }, children: g ? "Congratulations!" : "Exam Failed" }),
+        /* @__PURE__ */ e.jsx("p", { style: { fontSize: "1.25rem", opacity: 0.9 }, children: n.title })
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { className: "pk-card-body", style: { padding: "4rem 2rem", display: "flex", flexDirection: "column", alignItems: "center" }, children: [
+        /* @__PURE__ */ e.jsxs("div", { style: { position: "relative", width: "160px", height: "160px", marginBottom: "2rem" }, children: [
+          /* @__PURE__ */ e.jsxs("svg", { viewBox: "0 0 100 100", style: { width: "100%", height: "100%", transform: "rotate(-90deg)" }, children: [
+            /* @__PURE__ */ e.jsx("circle", { cx: "50", cy: "50", r: "45", fill: "none", stroke: "var(--pk-border)", strokeWidth: "8" }),
+            /* @__PURE__ */ e.jsx(
+              "circle",
+              {
+                cx: "50",
+                cy: "50",
+                r: "45",
+                fill: "none",
+                stroke: f,
+                strokeWidth: "8",
+                strokeDasharray: "283",
+                strokeDashoffset: i,
+                strokeLinecap: "round",
+                style: { transition: "stroke-dashoffset 1.5s ease-out" }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e.jsx("div", { style: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ e.jsxs("span", { className: "pk-heading-lg", style: { lineHeight: 1 }, children: [
+            Math.round(x),
+            "%"
+          ] }) })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", gap: "3rem", marginBottom: "2rem" }, children: [
+          /* @__PURE__ */ e.jsxs("div", { children: [
+            /* @__PURE__ */ e.jsx("p", { className: "pk-text-muted pk-label", children: "Passing Score" }),
+            /* @__PURE__ */ e.jsxs("p", { className: "pk-heading-md", children: [
+              n.passingScore,
+              "%"
+            ] })
+          ] }),
+          /* @__PURE__ */ e.jsxs("div", { children: [
+            /* @__PURE__ */ e.jsx("p", { className: "pk-text-muted pk-label", children: "Time Spent" }),
+            /* @__PURE__ */ e.jsx("p", { className: "pk-heading-md", children: M(n.duration * 60 - l) })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ e.jsx("div", { className: "pk-card-footer", style: { padding: "1.5rem", display: "flex", justifyContent: "center", gap: "1rem" }, children: /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-outline", onClick: () => o("selection"), children: "Return to Dashboard" }) })
+    ] }) });
+  };
+  return /* @__PURE__ */ e.jsxs("div", { style: { position: "relative", minHeight: "100vh", backgroundColor: "var(--pk-bg-main)" }, children: [
+    y && /* @__PURE__ */ e.jsxs("div", { style: { position: "fixed", inset: 0, backgroundColor: "rgba(255,255,255,0.8)", zIndex: 100, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", backdropFilter: "blur(4px)" }, children: [
+      /* @__PURE__ */ e.jsx("div", { className: "pk-skeleton", style: { width: "80px", height: "80px", borderRadius: "50%", marginBottom: "1rem" } }),
+      /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", children: "Processing..." })
+    ] }),
+    m === "selection" && r(),
+    m === "exam" && t(),
+    m === "results" && a(),
+    /* @__PURE__ */ e.jsx(D, {})
+  ] });
+}
+const ye = {
+  schoolName: "PopSite University",
+  departments: ["Computer Science", "Design", "Business Administration", "Engineering"],
+  enrolledStudents: [
+    { id: "STU-2026-001", firstName: "Alice", lastName: "Johnson", email: "alice.j@popsite.edu", phone: "555-0101", department: "Computer Science", year: "Freshman", gpa: 3.8 },
+    { id: "STU-2026-002", firstName: "Bob", lastName: "Smith", email: "bob.s@popsite.edu", phone: "555-0102", department: "Design", year: "Sophomore", gpa: 3.5 },
+    { id: "STU-2026-003", firstName: "Charlie", lastName: "Brown", email: "charlie.b@popsite.edu", phone: "555-0103", department: "Engineering", year: "Senior", gpa: 3.9 }
+  ]
+};
+function Lt() {
+  const [m, o] = p("roster"), [n, j] = p(ye.enrolledStudents), [u, N] = p(""), [h, A] = p(1), [l, T] = p({
+    firstName: "",
+    lastName: "",
+    email: "",
+    phone: "",
+    department: "",
+    year: ""
+  }), [x, k] = p(null), { showToast: g, ToastContainer: W } = G();
+  $(() => {
+    const r = localStorage.getItem("popsite_students");
+    if (r)
+      try {
+        j(JSON.parse(r));
+      } catch {
+      }
+  }, []), $(() => {
+    localStorage.setItem("popsite_students", JSON.stringify(n));
+  }, [n]);
+  const y = (r) => /^[0-9\-\+\s\(\)]{7,15}$/.test(r), C = (r) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(r), B = () => {
+    if (h === 1) {
+      if (!l.firstName || !l.lastName || !l.email || !l.phone) {
+        g("All fields required", "error");
+        return;
+      }
+      if (!C(l.email)) {
+        g("Invalid email format", "error");
+        return;
+      }
+      if (!y(l.phone)) {
+        g("Invalid phone format", "error");
+        return;
+      }
+    } else if (h === 2 && (!l.department || !l.year)) {
+      g("Please select department and year", "error");
+      return;
+    }
+    A((r) => r + 1);
+  }, D = () => {
+    const r = {
+      ...l,
+      id: `STU-2026-${Math.floor(Math.random() * 1e3).toString().padStart(3, "0")}`,
+      gpa: 0
+    };
+    j([...n, r]), g(`${l.firstName} registered successfully!`, "success"), o("roster");
+  }, P = () => {
+    j((r) => r.map((t) => t.id === x.id ? x : t)), g("Profile updated!", "success"), o("roster");
+  }, S = () => {
+    if (n.length === 0) return;
+    const r = Object.keys(n[0]), t = r.join(",") + `
+` + n.map((F) => r.map((w) => `"${F[w]}"`).join(",")).join(`
+`), a = new Blob([t], { type: "text/csv" }), i = URL.createObjectURL(a), f = document.createElement("a");
+    f.href = i, f.download = `student_roster_${Date.now()}.csv`, f.click(), g("Roster Exported to CSV", "success");
+  }, d = () => {
+    T({ firstName: "", lastName: "", email: "", phone: "", department: "", year: "" }), A(1), o("wizard");
+  }, b = () => {
+    const r = n.filter(
+      (t) => `${t.firstName} ${t.lastName}`.toLowerCase().includes(u.toLowerCase()) || t.email.toLowerCase().includes(u.toLowerCase())
+    );
+    return /* @__PURE__ */ e.jsxs("div", { className: "pk-container animate-fade-in", children: [
+      /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: "2rem", flexWrap: "wrap", gap: "1rem" }, children: [
+        /* @__PURE__ */ e.jsxs("div", { children: [
+          /* @__PURE__ */ e.jsx("h1", { className: "pk-heading-xl", style: { marginBottom: "0.5rem" }, children: ye.schoolName }),
+          /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", children: "Admissions & Roster Management" })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", gap: "1rem" }, children: [
+          /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-outline", onClick: S, children: "⬇️ Export CSV" }),
+          /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-primary", onClick: d, children: "+ New Admission" })
+        ] })
+      ] }),
+      /* @__PURE__ */ e.jsx("div", { style: { marginBottom: "2rem" }, children: /* @__PURE__ */ e.jsx("input", { type: "text", className: "pk-input", style: { width: "100%", maxWidth: "400px" }, placeholder: "Search students by name or email...", value: u, onChange: (t) => N(t.target.value) }) }),
+      /* @__PURE__ */ e.jsx("div", { className: "pk-grid", style: { gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))" }, children: r.map((t) => /* @__PURE__ */ e.jsxs("div", { className: "pk-card pk-card-interactive", style: { padding: "1.5rem" }, children: [
+        /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: "1rem" }, children: [
+          /* @__PURE__ */ e.jsx("span", { className: "pk-badge", children: t.id }),
+          /* @__PURE__ */ e.jsxs("span", { style: { fontWeight: "bold", color: t.gpa >= 3.5 ? "var(--pk-success)" : "var(--pk-text-main)" }, children: [
+            "GPA: ",
+            t.gpa.toFixed(1)
+          ] })
+        ] }),
+        /* @__PURE__ */ e.jsxs("h3", { className: "pk-heading-md", style: { marginBottom: "0.25rem" }, children: [
+          t.firstName,
+          " ",
+          t.lastName
+        ] }),
+        /* @__PURE__ */ e.jsxs("p", { className: "pk-text-sm", style: { color: "var(--pk-primary)", marginBottom: "1rem" }, children: [
+          t.department,
+          " • ",
+          t.year
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem", marginBottom: "1.5rem" }, children: [
+          /* @__PURE__ */ e.jsxs("span", { className: "pk-text-sm", children: [
+            "📧 ",
+            t.email
+          ] }),
+          /* @__PURE__ */ e.jsxs("span", { className: "pk-text-sm", children: [
+            "📞 ",
+            t.phone
+          ] })
+        ] }),
+        /* @__PURE__ */ e.jsx(
+          "button",
+          {
+            className: "pk-btn pk-btn-outline pk-w-full",
+            onClick: () => {
+              k(t), o("edit");
+            },
+            children: "Edit Profile"
+          }
+        )
+      ] }, t.id)) })
+    ] });
+  }, M = () => /* @__PURE__ */ e.jsx("div", { className: "pk-container animate-fade-in", style: { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "80vh" }, children: /* @__PURE__ */ e.jsxs("div", { className: "pk-card", style: { width: "100%", maxWidth: "600px" }, children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "pk-card-header", style: { padding: "2rem", borderBottom: "1px solid var(--pk-border)" }, children: [
+      /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "1.5rem" }, children: [
+        /* @__PURE__ */ e.jsx("h2", { className: "pk-heading-lg", children: "Admission Wizard" }),
+        /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-outline", style: { border: "none" }, onClick: () => o("roster"), children: "✕ Cancel" })
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", justifyContent: "space-between", position: "relative" }, children: [
+        /* @__PURE__ */ e.jsx("div", { style: { position: "absolute", top: "50%", left: "0", width: "100%", height: "2px", background: "var(--pk-border)", zIndex: 0, transform: "translateY(-50%)" } }),
+        /* @__PURE__ */ e.jsx("div", { style: { position: "absolute", top: "50%", left: "0", width: `${(h - 1) / 2 * 100}%`, height: "2px", background: "var(--pk-primary)", zIndex: 1, transform: "translateY(-50%)", transition: "width 0.3s" } }),
+        ["Personal", "Academic", "Review"].map((r, t) => /* @__PURE__ */ e.jsxs("div", { style: { position: "relative", zIndex: 2, display: "flex", flexDirection: "column", alignItems: "center", width: "40px" }, children: [
+          /* @__PURE__ */ e.jsx("div", { style: { width: "24px", height: "24px", borderRadius: "50%", background: h > t ? "var(--pk-primary)" : "var(--pk-bg-main)", border: `2px solid ${h >= t + 1 ? "var(--pk-primary)" : "var(--pk-border)"}`, color: "white", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "10px" }, children: h > t ? "✓" : t + 1 }),
+          /* @__PURE__ */ e.jsx("span", { style: { position: "absolute", bottom: "-20px", fontSize: "0.75rem", color: h >= t + 1 ? "var(--pk-text-main)" : "var(--pk-text-muted)" }, children: r })
+        ] }, t))
+      ] })
+    ] }),
+    /* @__PURE__ */ e.jsxs("div", { className: "pk-card-body", style: { padding: "3rem 2rem" }, children: [
+      h === 1 && /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "1.5rem" }, children: [
+        /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", gap: "1rem" }, children: [
+          /* @__PURE__ */ e.jsxs("div", { className: "pk-input-group", style: { flex: 1 }, children: [
+            /* @__PURE__ */ e.jsx("label", { className: "pk-label", children: "First Name *" }),
+            /* @__PURE__ */ e.jsx("input", { type: "text", className: "pk-input", value: l.firstName, onChange: (r) => T({ ...l, firstName: r.target.value }) })
+          ] }),
+          /* @__PURE__ */ e.jsxs("div", { className: "pk-input-group", style: { flex: 1 }, children: [
+            /* @__PURE__ */ e.jsx("label", { className: "pk-label", children: "Last Name *" }),
+            /* @__PURE__ */ e.jsx("input", { type: "text", className: "pk-input", value: l.lastName, onChange: (r) => T({ ...l, lastName: r.target.value }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { className: "pk-input-group", children: [
+          /* @__PURE__ */ e.jsx("label", { className: "pk-label", children: "Email Address *" }),
+          /* @__PURE__ */ e.jsx("input", { type: "email", className: "pk-input", value: l.email, onChange: (r) => T({ ...l, email: r.target.value }), placeholder: "student@example.com" })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { className: "pk-input-group", children: [
+          /* @__PURE__ */ e.jsx("label", { className: "pk-label", children: "Phone Number *" }),
+          /* @__PURE__ */ e.jsx("input", { type: "tel", className: "pk-input", value: l.phone, onChange: (r) => T({ ...l, phone: r.target.value }), placeholder: "555-0100" })
+        ] })
+      ] }),
+      h === 2 && /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "1.5rem" }, children: [
+        /* @__PURE__ */ e.jsxs("div", { className: "pk-input-group", children: [
+          /* @__PURE__ */ e.jsx("label", { className: "pk-label", children: "Target Department *" }),
+          /* @__PURE__ */ e.jsxs("select", { className: "pk-input", value: l.department, onChange: (r) => T({ ...l, department: r.target.value }), children: [
+            /* @__PURE__ */ e.jsx("option", { value: "", children: "-- Select Department --" }),
+            ye.departments.map((r) => /* @__PURE__ */ e.jsx("option", { value: r, children: r }, r))
+          ] })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { className: "pk-input-group", children: [
+          /* @__PURE__ */ e.jsx("label", { className: "pk-label", children: "Entry Year *" }),
+          /* @__PURE__ */ e.jsxs("select", { className: "pk-input", value: l.year, onChange: (r) => T({ ...l, year: r.target.value }), children: [
+            /* @__PURE__ */ e.jsx("option", { value: "", children: "-- Select Level --" }),
+            /* @__PURE__ */ e.jsx("option", { value: "Freshman", children: "Freshman" }),
+            /* @__PURE__ */ e.jsx("option", { value: "Transfer", children: "Transfer" }),
+            /* @__PURE__ */ e.jsx("option", { value: "Graduate", children: "Graduate" })
+          ] })
+        ] })
+      ] }),
+      h === 3 && /* @__PURE__ */ e.jsxs("div", { children: [
+        /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", style: { marginBottom: "1.5rem" }, children: "Review Application" }),
+        /* @__PURE__ */ e.jsx("div", { style: { background: "var(--pk-bg-main)", padding: "1.5rem", borderRadius: "var(--pk-radius-md)" }, children: /* @__PURE__ */ e.jsx("table", { style: { width: "100%", textAlign: "left" }, children: /* @__PURE__ */ e.jsxs("tbody", { children: [
+          /* @__PURE__ */ e.jsxs("tr", { children: [
+            /* @__PURE__ */ e.jsx("td", { style: { padding: "0.5rem", color: "var(--pk-text-muted)" }, children: "Name" }),
+            /* @__PURE__ */ e.jsxs("td", { style: { fontWeight: 600 }, children: [
+              l.firstName,
+              " ",
+              l.lastName
+            ] })
+          ] }),
+          /* @__PURE__ */ e.jsxs("tr", { children: [
+            /* @__PURE__ */ e.jsx("td", { style: { padding: "0.5rem", color: "var(--pk-text-muted)" }, children: "Email" }),
+            /* @__PURE__ */ e.jsx("td", { style: { fontWeight: 600 }, children: l.email })
+          ] }),
+          /* @__PURE__ */ e.jsxs("tr", { children: [
+            /* @__PURE__ */ e.jsx("td", { style: { padding: "0.5rem", color: "var(--pk-text-muted)" }, children: "Phone" }),
+            /* @__PURE__ */ e.jsx("td", { style: { fontWeight: 600 }, children: l.phone })
+          ] }),
+          /* @__PURE__ */ e.jsxs("tr", { children: [
+            /* @__PURE__ */ e.jsx("td", { style: { padding: "0.5rem", color: "var(--pk-text-muted)" }, children: "Dept" }),
+            /* @__PURE__ */ e.jsx("td", { style: { fontWeight: 600 }, children: l.department })
+          ] }),
+          /* @__PURE__ */ e.jsxs("tr", { children: [
+            /* @__PURE__ */ e.jsx("td", { style: { padding: "0.5rem", color: "var(--pk-text-muted)" }, children: "Year" }),
+            /* @__PURE__ */ e.jsx("td", { style: { fontWeight: 600 }, children: l.year })
+          ] })
+        ] }) }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ e.jsxs("div", { className: "pk-card-footer", style: { display: "flex", justifyContent: "space-between", padding: "1.5rem 2rem" }, children: [
+      /* @__PURE__ */ e.jsx(
+        "button",
+        {
+          className: "pk-btn pk-btn-outline",
+          style: { visibility: h === 1 ? "hidden" : "visible" },
+          onClick: () => A((r) => r - 1),
+          children: "← Previous"
+        }
+      ),
+      h < 3 ? /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-primary", onClick: B, children: "Next Step →" }) : /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-primary", style: { background: "var(--pk-success)" }, onClick: D, children: "Confirm Admission ✅" })
+    ] })
+  ] }) }), I = () => x ? /* @__PURE__ */ e.jsx("div", { className: "pk-container animate-fade-in", style: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ e.jsxs("div", { className: "pk-card", style: { width: "100%", maxWidth: "600px", padding: "3rem" }, children: [
+    /* @__PURE__ */ e.jsxs("h2", { className: "pk-heading-lg", style: { marginBottom: "2rem" }, children: [
+      "Edit Profile: ",
+      x.id
+    ] }),
+    /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", gap: "1rem", marginBottom: "1rem" }, children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "pk-input-group", style: { flex: 1 }, children: [
+        /* @__PURE__ */ e.jsx("label", { className: "pk-label", children: "First Name" }),
+        /* @__PURE__ */ e.jsx("input", { type: "text", className: "pk-input", value: x.firstName, onChange: (r) => k({ ...x, firstName: r.target.value }) })
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { className: "pk-input-group", style: { flex: 1 }, children: [
+        /* @__PURE__ */ e.jsx("label", { className: "pk-label", children: "Last Name" }),
+        /* @__PURE__ */ e.jsx("input", { type: "text", className: "pk-input", value: x.lastName, onChange: (r) => k({ ...x, lastName: r.target.value }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ e.jsxs("div", { className: "pk-input-group", style: { marginBottom: "1rem" }, children: [
+      /* @__PURE__ */ e.jsx("label", { className: "pk-label", children: "Department" }),
+      /* @__PURE__ */ e.jsx("select", { className: "pk-input", value: x.department, onChange: (r) => k({ ...x, department: r.target.value }), children: ye.departments.map((r) => /* @__PURE__ */ e.jsx("option", { value: r, children: r }, r)) })
+    ] }),
+    /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: "1rem", marginTop: "3rem" }, children: [
+      /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-outline", onClick: () => o("roster"), children: "Cancel" }),
+      /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-primary", onClick: P, children: "Save Profile" })
+    ] })
+  ] }) }) : null;
+  return /* @__PURE__ */ e.jsxs("div", { style: { position: "relative", minHeight: "100vh", backgroundColor: "var(--pk-bg-main)" }, children: [
+    m === "roster" && b(),
+    m === "wizard" && M(),
+    m === "edit" && I(),
+    /* @__PURE__ */ e.jsx(W, {})
+  ] });
+}
+const ke = {
+  hospitalName: "PopSite Medical Center",
+  specialties: ["All", "Cardiology", "Pediatrics", "Neurology", "Orthopedics", "General Practice"],
+  doctors: [
+    {
+      id: "dr1",
+      name: "Dr. Sarah Chen",
+      specialty: "Cardiology",
+      rating: 4.9,
+      image: "https://images.unsplash.com/photo-1559839734-2b71ea197ec2?auto=format&fit=crop&w=300&q=80",
+      availableTimeSlots: ["09:00 AM", "10:30 AM", "01:00 PM", "03:00 PM"]
+    },
+    {
+      id: "dr2",
+      name: "Dr. James Miller",
+      specialty: "Pediatrics",
+      rating: 4.8,
+      image: "https://images.unsplash.com/photo-1612349317150-e413f6a5b16d?auto=format&fit=crop&w=300&q=80",
+      availableTimeSlots: ["08:30 AM", "09:00 AM", "11:00 AM", "02:15 PM", "04:00 PM"]
+    },
+    {
+      id: "dr3",
+      name: "Dr. Elena Rodriguez",
+      specialty: "Neurology",
+      rating: 4.7,
+      image: "https://images.unsplash.com/photo-1594824432258-297ebce5b326?auto=format&fit=crop&w=300&q=80",
+      availableTimeSlots: ["10:00 AM", "11:30 AM"]
+    },
+    {
+      id: "dr4",
+      name: "Dr. William Foster",
+      specialty: "Orthopedics",
+      rating: 4.9,
+      image: "https://images.unsplash.com/photo-1537368910025-7028a609b183?auto=format&fit=crop&w=300&q=80",
+      availableTimeSlots: ["01:00 PM", "02:30 PM", "04:45 PM"]
+    }
+  ],
+  patientHistory: [
+    {
+      id: "APT-882",
+      doctorName: "Dr. Sarah Chen",
+      date: "2025-11-15",
+      time: "10:30 AM",
+      status: "Completed",
+      diagnosis: "Routine checkup. All healthy."
+    }
+  ]
+  // Real-time booked slots will go here
+};
+function $t() {
+  const [m, o] = p("directory"), [n, j] = p(ke.doctors), [u, N] = p(ke.patientHistory), [h, A] = p(""), [l, T] = p("All"), [x, k] = p(null), [g, W] = p((/* @__PURE__ */ new Date()).toISOString().split("T")[0]), [y, C] = p(!1), { showToast: B, ToastContainer: D } = G();
+  $(() => {
+    const t = localStorage.getItem("popsite_hosp_docs"), a = localStorage.getItem("popsite_hosp_hist");
+    if (t) try {
+      j(JSON.parse(t));
+    } catch {
+    }
+    if (a) try {
+      N(JSON.parse(a));
+    } catch {
+    }
+  }, []), $(() => {
+    localStorage.setItem("popsite_hosp_docs", JSON.stringify(n)), localStorage.setItem("popsite_hosp_hist", JSON.stringify(u));
+  }, [n, u]);
+  const P = (t, a = 1e3) => {
+    C(!0), setTimeout(() => {
+      C(!1), t();
+    }, a);
+  }, S = (t) => {
+    P(() => {
+      const a = {
+        id: `APT-${Math.floor(Math.random() * 1e4)}`,
+        doctorName: x.name,
+        doctorId: x.id,
+        date: g,
+        time: t,
+        status: "Scheduled",
+        diagnosis: "--"
+      };
+      N((i) => [a, ...i]), j((i) => i.map((f) => f.id === x.id ? { ...f, availableTimeSlots: f.availableTimeSlots.filter((F) => F !== t) } : f)), B(`Appointment confirmed for ${t}`, "success"), o("history");
+    }, 1500);
+  }, d = (t) => {
+    P(() => {
+      N((a) => a.map((i) => i.id === t.id ? { ...i, status: "Cancelled" } : i)), j((a) => a.map((i) => {
+        if (i.id === t.doctorId) {
+          const f = [...i.availableTimeSlots, t.time].sort();
+          return { ...i, availableTimeSlots: f };
+        }
+        return i;
+      })), B(`Appointment ${t.id} cancelled successfully`, "info");
+    });
+  }, b = () => /* @__PURE__ */ e.jsxs("div", { className: "pk-card", style: { marginBottom: "2rem", padding: "1rem", display: "flex", gap: "1rem", overflowX: "auto" }, children: [
+    /* @__PURE__ */ e.jsx("button", { className: m === "directory" ? "pk-btn pk-btn-primary" : "pk-btn pk-btn-outline", onClick: () => o("directory"), children: "Find a Doctor" }),
+    /* @__PURE__ */ e.jsx("button", { className: m === "history" ? "pk-btn pk-btn-primary" : "pk-btn pk-btn-outline", onClick: () => o("history"), children: "My Appointments" })
+  ] }), M = () => {
+    const t = n.filter((a) => {
+      const i = l === "All" || a.specialty === l, f = a.name.toLowerCase().includes(h.toLowerCase());
+      return i && f;
+    });
+    return /* @__PURE__ */ e.jsxs("div", { className: "animate-fade-in", children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "pk-card pk-glass", style: { padding: "1.5rem", marginBottom: "2rem", display: "flex", flexDirection: "column", gap: "1.5rem" }, children: [
+        /* @__PURE__ */ e.jsx(
+          "input",
+          {
+            type: "text",
+            className: "pk-input",
+            placeholder: "Search doctors by name...",
+            style: { width: "100%", maxWidth: "500px" },
+            value: h,
+            onChange: (a) => A(a.target.value)
+          }
+        ),
+        /* @__PURE__ */ e.jsx("div", { style: { display: "flex", gap: "0.75rem", overflowX: "auto", paddingBottom: "0.5rem" }, children: ke.specialties.map((a) => /* @__PURE__ */ e.jsx(
+          "button",
+          {
+            className: l === a ? "pk-btn pk-btn-primary" : "pk-btn pk-btn-outline",
+            style: { borderRadius: "var(--pk-radius-full)", padding: "0.5rem 1.25rem", whiteSpace: "nowrap" },
+            onClick: () => T(a),
+            children: a
+          },
+          a
+        )) })
+      ] }),
+      /* @__PURE__ */ e.jsx("div", { className: "pk-grid", style: { gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))" }, children: t.map((a) => {
+        var i;
+        return /* @__PURE__ */ e.jsxs("div", { className: "pk-card pk-card-interactive", style: { padding: "2rem", display: "flex", flexDirection: "column", alignItems: "center" }, children: [
+          /* @__PURE__ */ e.jsx("img", { src: a.image, alt: a.name, style: { width: "120px", height: "120px", borderRadius: "50%", objectFit: "cover", marginBottom: "1.5rem", boxShadow: "var(--pk-shadow-md)" }, onError: (f) => {
+            f.target.style.display = "none", f.target.nextSibling.style.display = "flex";
+          } }),
+          /* @__PURE__ */ e.jsx("div", { style: { display: "none", width: "120px", height: "120px", borderRadius: "50%", background: "var(--pk-primary-light)", color: "var(--pk-primary)", alignItems: "center", justifyContent: "center", fontSize: "2rem", fontWeight: "bold", marginBottom: "1.5rem" }, children: ((i = a.name.split(" ")[1]) == null ? void 0 : i[0]) || "D" }),
+          /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", style: { marginBottom: "0.5rem" }, children: a.name }),
+          /* @__PURE__ */ e.jsx("span", { className: "pk-badge", style: { marginBottom: "1rem", background: "var(--pk-bg-main)", color: "var(--pk-text-muted)" }, children: a.specialty }),
+          /* @__PURE__ */ e.jsxs("span", { style: { fontSize: "0.875rem", color: "#f59e0b", fontWeight: 600, marginBottom: "1.5rem" }, children: [
+            "★ ",
+            a.rating,
+            " Rating"
+          ] }),
+          /* @__PURE__ */ e.jsx(
+            "button",
+            {
+              className: "pk-btn pk-btn-primary pk-w-full",
+              onClick: () => {
+                k(a), o("booking");
+              },
+              children: "Book Appointment"
+            }
+          )
+        ] }, a.id);
+      }) })
+    ] });
+  }, I = () => {
+    if (!x) return null;
+    const t = n.find((a) => a.id === x.id);
+    return /* @__PURE__ */ e.jsx("div", { className: "animate-fade-in", style: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ e.jsxs("div", { className: "pk-card", style: { width: "100%", maxWidth: "800px", padding: "3rem" }, children: [
+      /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-outline", style: { marginBottom: "2rem" }, onClick: () => o("directory"), children: "← Back" }),
+      /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", gap: "2rem", alignItems: "center", marginBottom: "3rem", borderBottom: "1px solid var(--pk-border)", paddingBottom: "2rem" }, children: [
+        /* @__PURE__ */ e.jsx("img", { src: t.image, alt: "", style: { width: "100px", height: "100px", borderRadius: "50%", objectFit: "cover" }, onError: (a) => {
+          a.target.style.display = "none";
+        } }),
+        /* @__PURE__ */ e.jsxs("div", { children: [
+          /* @__PURE__ */ e.jsx("h2", { className: "pk-heading-lg", children: t.name }),
+          /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", children: t.specialty })
+        ] })
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { className: "pk-input-group", style: { marginBottom: "3rem", maxWidth: "300px" }, children: [
+        /* @__PURE__ */ e.jsx("label", { className: "pk-label", children: "Select Date: " }),
+        /* @__PURE__ */ e.jsx("input", { type: "date", className: "pk-input", value: g, onChange: (a) => W(a.target.value) })
+      ] }),
+      /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", style: { marginBottom: "1.5rem" }, children: "Available Time Slots" }),
+      t.availableTimeSlots.length === 0 ? /* @__PURE__ */ e.jsxs("div", { className: "pk-empty-state", style: { padding: "2rem", border: "1px solid var(--pk-border)" }, children: [
+        /* @__PURE__ */ e.jsx("h4", { className: "pk-heading-md", children: "Fully Booked" }),
+        /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", children: "No remaining slots available for this doctor." })
+      ] }) : /* @__PURE__ */ e.jsx("div", { className: "pk-grid", style: { gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))" }, children: t.availableTimeSlots.map((a) => /* @__PURE__ */ e.jsx(
+        "button",
+        {
+          className: "pk-btn pk-btn-outline",
+          style: { padding: "1rem", fontSize: "1.125rem" },
+          onClick: () => S(a),
+          children: a
+        },
+        a
+      )) })
+    ] }) });
+  }, r = () => /* @__PURE__ */ e.jsxs("div", { className: "animate-fade-in", children: [
+    /* @__PURE__ */ e.jsx("h2", { className: "pk-heading-lg", style: { marginBottom: "2rem" }, children: "Patient History" }),
+    u.length === 0 ? /* @__PURE__ */ e.jsxs("div", { className: "pk-empty-state", children: [
+      /* @__PURE__ */ e.jsx("div", { className: "pk-empty-icon", style: { fontSize: "4rem" }, children: "🏥" }),
+      /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", children: "No Appointments Found" }),
+      /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", children: "You have not scheduled any appointments yet." })
+    ] }) : /* @__PURE__ */ e.jsx("div", { className: "pk-grid pk-flex-col pk-gap-4", children: u.map((t) => /* @__PURE__ */ e.jsxs("div", { className: "pk-card", style: { padding: "1.5rem", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: "1rem", borderLeft: t.status === "Cancelled" ? "4px solid var(--pk-danger)" : t.status === "Completed" ? "4px solid var(--pk-success)" : "4px solid var(--pk-primary)" }, children: [
+      /* @__PURE__ */ e.jsxs("div", { children: [
+        /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", children: t.doctorName }),
+        /* @__PURE__ */ e.jsxs("p", { className: "pk-text-sm", style: { color: "var(--pk-primary)", fontWeight: 600, marginBottom: "0.5rem" }, children: [
+          t.date,
+          " • ",
+          t.time
+        ] }),
+        /* @__PURE__ */ e.jsxs("p", { className: "pk-text-sm", children: [
+          "ID: ",
+          t.id
+        ] })
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-end", gap: "0.5rem" }, children: [
+        /* @__PURE__ */ e.jsx("span", { className: "pk-badge", style: { background: t.status === "Scheduled" ? "var(--pk-primary-light)" : "var(--pk-bg-main)", color: t.status === "Cancelled" ? "var(--pk-danger)" : "var(--pk-text-main)" }, children: t.status }),
+        t.status === "Scheduled" && /* @__PURE__ */ e.jsx(
+          "button",
+          {
+            className: "pk-btn pk-btn-outline",
+            style: { color: "var(--pk-danger)", border: "none", padding: "0.5rem 1rem" },
+            onClick: () => d(t),
+            children: "Cancel Appointment"
+          }
+        )
+      ] })
+    ] }, t.id)) })
+  ] });
+  return /* @__PURE__ */ e.jsxs("div", { className: "pk-container", style: { minHeight: "100vh" }, children: [
+    y && /* @__PURE__ */ e.jsxs("div", { style: { position: "fixed", inset: 0, backgroundColor: "rgba(255,255,255,0.8)", zIndex: 100, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", backdropFilter: "blur(4px)" }, children: [
+      /* @__PURE__ */ e.jsx("div", { className: "pk-skeleton", style: { width: "80px", height: "80px", borderRadius: "50%", marginBottom: "1rem" } }),
+      /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", children: "Processing..." })
+    ] }),
+    /* @__PURE__ */ e.jsxs("div", { style: { marginBottom: "2rem" }, children: [
+      /* @__PURE__ */ e.jsx("h1", { className: "pk-heading-xl", children: ke.hospitalName }),
+      /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", children: "Patient portal and reservation network." })
+    ] }),
+    b(),
+    /* @__PURE__ */ e.jsxs("div", { style: { position: "relative" }, children: [
+      m === "directory" && M(),
+      m === "booking" && I(),
+      m === "history" && r()
+    ] }),
+    /* @__PURE__ */ e.jsx(D, {})
+  ] });
+}
+const Q = {
+  hero: {
+    title: "Build Faster, Ship Better.",
+    subtitle: "The ultimate zero-config React component architecture designed for the future of the web.",
+    cta1: "Get Started Free",
+    cta2: "View Documentation"
+  },
+  stats: {
+    users: 15400,
+    deployments: 89e3,
+    uptime: 99.9
+  },
+  features: [
+    { id: "f1", title: "Zero Configuration", description: "No complex webpack or babel setups. Just import and go.", icon: "⚡" },
+    { id: "f2", title: "Vanilla CSS Engine", description: "Powered entirely by native CSS variables for maximum portability.", icon: "🎨" },
+    { id: "f3", title: "State Perseverance", description: "Built-in localStorage binding keeps user sessions active instantly.", icon: "💾" },
+    { id: "f4", title: "Glassmorphism UI", description: "Premium, frosted-glass aesthetics out of the box.", icon: "🔍" }
+  ],
+  testimonials: [
+    { id: "t1", name: "Sarah Jenkins", role: "Frontend Lead at Acme", avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=150&q=80", text: "PopSite UI completely changed how we prototype apps. The modules are instantly plug-and-play." },
+    { id: "t2", name: "David Chen", role: "Fullstack Developer", avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=150&q=80", text: "I love the anti-Tailwind philosophy. The pure CSS approach feels so clean and blazing fast." },
+    { id: "t3", name: "Elena Rostova", role: "Product Designer", avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=150&q=80", text: "The default drop shadows and glass effects give it a distinct 2026 enterprise feel. Absolutely stunning." }
+  ],
+  pricing: [
+    { id: "p1", tier: "Hobby", price: "$0", features: ["1 Project", "Basic Modules", "Community Discord"], cta: "Start Free" },
+    { id: "p2", tier: "Pro", price: "$29/mo", featured: !0, features: ["Unlimited Projects", "All Pro Modules", "Premium Support", "Priority Updates"], cta: "Upgrade to Pro" },
+    { id: "p3", tier: "Enterprise", price: "Custom", features: ["Dedicated Account Manager", "Custom SLA", "Source Code Access"], cta: "Contact Sales" }
+  ]
+};
+function qt() {
+  const [m, o] = p("hero"), [n, j] = p(0), [u, N] = p(0);
+  $(() => {
+    if (m !== "hero") return;
+    const k = 2e3, g = 60, W = Q.stats.users / g, y = Q.stats.deployments / g;
+    let C = 0;
+    const B = setInterval(() => {
+      C++, C <= g ? (j(Math.floor(W * C)), N(Math.floor(y * C))) : (j(Q.stats.users), N(Q.stats.deployments), clearInterval(B));
+    }, k / g);
+    return () => clearInterval(B);
+  }, [m]);
+  const h = () => /* @__PURE__ */ e.jsxs("nav", { className: "pk-nav pk-glass", children: [
+    /* @__PURE__ */ e.jsx("div", { className: "pk-heading-md pk-gradient-text", style: { cursor: "pointer" }, onClick: () => o("hero"), children: "PopSite" }),
+    /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", gap: "1.5rem" }, className: "pk-hidden-mobile", children: [
+      /* @__PURE__ */ e.jsx("button", { style: { background: "none", border: "none", cursor: "pointer", fontWeight: 600, color: m === "hero" ? "var(--pk-primary)" : "var(--pk-text-main)" }, onClick: () => o("hero"), children: "Home" }),
+      /* @__PURE__ */ e.jsx("button", { style: { background: "none", border: "none", cursor: "pointer", fontWeight: 600, color: m === "features" ? "var(--pk-primary)" : "var(--pk-text-main)" }, onClick: () => o("features"), children: "Features" }),
+      /* @__PURE__ */ e.jsx("button", { style: { background: "none", border: "none", cursor: "pointer", fontWeight: 600, color: m === "testimonials" ? "var(--pk-primary)" : "var(--pk-text-main)" }, onClick: () => o("testimonials"), children: "Testimonials" }),
+      /* @__PURE__ */ e.jsx("button", { style: { background: "none", border: "none", cursor: "pointer", fontWeight: 600, color: m === "pricing" ? "var(--pk-primary)" : "var(--pk-text-main)" }, onClick: () => o("pricing"), children: "Pricing" })
+    ] }),
+    /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-primary", onClick: () => o("pricing"), children: "Get Started" })
+  ] }), A = () => /* @__PURE__ */ e.jsxs("div", { className: "pk-container animate-fade-in", style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", minHeight: "80vh", textAlign: "center" }, children: [
+    /* @__PURE__ */ e.jsx("div", { style: { position: "absolute", top: "20%", left: "10%", width: "150px", height: "150px", background: "radial-gradient(circle, var(--pk-primary), transparent 70%)", opacity: 0.2, filter: "blur(20px)", animation: "floatA 6s infinite ease-in-out" } }),
+    /* @__PURE__ */ e.jsx("div", { style: { position: "absolute", bottom: "20%", right: "10%", width: "250px", height: "250px", background: "radial-gradient(circle, var(--pk-secondary), transparent 70%)", opacity: 0.15, filter: "blur(30px)", animation: "floatB 8s infinite ease-in-out reverse" } }),
+    /* @__PURE__ */ e.jsx("div", { className: "pk-badge", style: { marginBottom: "2rem", padding: "0.5rem 1rem", fontSize: "0.875rem" }, children: "✨ v1.0 is now live" }),
+    /* @__PURE__ */ e.jsx("h1", { className: "pk-heading-xl", style: { fontSize: "4.5rem", marginBottom: "1.5rem", lineHeight: 1.1 }, children: /* @__PURE__ */ e.jsx("span", { className: "pk-gradient-text", children: Q.hero.title }) }),
+    /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", style: { fontSize: "1.5rem", maxWidth: "800px", marginBottom: "3rem" }, children: Q.hero.subtitle }),
+    /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", gap: "1rem", marginBottom: "4rem" }, children: [
+      /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-primary", style: { fontSize: "1.125rem", padding: "1rem 2rem" }, onClick: () => o("pricing"), children: Q.hero.cta1 }),
+      /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-outline", style: { fontSize: "1.125rem", padding: "1rem 2rem" }, onClick: () => o("features"), children: Q.hero.cta2 })
+    ] }),
+    /* @__PURE__ */ e.jsxs("div", { className: "pk-grid pk-glass", style: { gridTemplateColumns: "repeat(3, 1fr)", gap: "4rem", padding: "2rem 4rem", borderRadius: "var(--pk-radius-lg)", background: "var(--pk-bg-glass)", display: "inline-grid" }, children: [
+      /* @__PURE__ */ e.jsxs("div", { children: [
+        /* @__PURE__ */ e.jsxs("h2", { className: "pk-heading-lg", style: { color: "var(--pk-primary)" }, children: [
+          n.toLocaleString(),
+          "+"
+        ] }),
+        /* @__PURE__ */ e.jsx("p", { className: "pk-text-muted pk-label", children: "Developers" })
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { children: [
+        /* @__PURE__ */ e.jsxs("h2", { className: "pk-heading-lg", style: { color: "var(--pk-secondary)" }, children: [
+          u.toLocaleString(),
+          "+"
+        ] }),
+        /* @__PURE__ */ e.jsx("p", { className: "pk-text-muted pk-label", children: "Deployments" })
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { children: [
+        /* @__PURE__ */ e.jsxs("h2", { className: "pk-heading-lg", style: { color: "var(--pk-success)" }, children: [
+          Q.stats.uptime,
+          "%"
+        ] }),
+        /* @__PURE__ */ e.jsx("p", { className: "pk-text-muted pk-label", children: "Uptime SLA" })
+      ] })
+    ] }),
+    /* @__PURE__ */ e.jsx("style", { children: `
+         @keyframes floatA { 0%, 100% { transform: translateY(0px) scale(1); } 50% { transform: translateY(-30px) scale(1.1); } }
+         @keyframes floatB { 0%, 100% { transform: translateY(0px) scale(1); } 50% { transform: translateY(40px) scale(0.9); } }
+       ` })
+  ] }), l = () => /* @__PURE__ */ e.jsxs("div", { className: "pk-container animate-fade-in", style: { padding: "4rem 2rem" }, children: [
+    /* @__PURE__ */ e.jsxs("div", { style: { textAlign: "center", marginBottom: "4rem" }, children: [
+      /* @__PURE__ */ e.jsx("h2", { className: "pk-heading-xl", style: { marginBottom: "1rem" }, children: "Architected for Speed" }),
+      /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", style: { fontSize: "1.25rem" }, children: "Everything you need to build scalable interfaces without the bloat." })
+    ] }),
+    /* @__PURE__ */ e.jsx("div", { className: "pk-grid", style: { gridTemplateColumns: "repeat(auto-fit, minmax(350px, 1fr))", gap: "3rem" }, children: Q.features.map((k) => /* @__PURE__ */ e.jsxs("div", { className: "pk-card pk-card-interactive", style: { padding: "3rem 2rem", textAlign: "center", background: "var(--pk-bg-glass)", border: "1px solid rgba(255,255,255,0.4)", backdropFilter: "blur(10px)" }, children: [
+      /* @__PURE__ */ e.jsx("div", { style: { fontSize: "3rem", marginBottom: "1.5rem", filter: "drop-shadow(0 10px 10px rgba(0,0,0,0.1))" }, children: k.icon }),
+      /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", style: { marginBottom: "1rem" }, children: k.title }),
+      /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", children: k.description })
+    ] }, k.id)) })
+  ] }), T = () => /* @__PURE__ */ e.jsxs("div", { className: "pk-container animate-fade-in", style: { padding: "4rem 2rem" }, children: [
+    /* @__PURE__ */ e.jsxs("div", { style: { textAlign: "center", marginBottom: "4rem" }, children: [
+      /* @__PURE__ */ e.jsx("h2", { className: "pk-heading-xl", style: { marginBottom: "1rem" }, children: "Loved by Engineers" }),
+      /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", style: { fontSize: "1.25rem" }, children: "Here's what the community is saying." })
+    ] }),
+    /* @__PURE__ */ e.jsx("div", { className: "pk-grid", style: { gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: "2rem" }, children: Q.testimonials.map((k) => /* @__PURE__ */ e.jsxs("div", { className: "pk-card pk-card-interactive", style: { padding: "2rem", display: "flex", flexDirection: "column", gap: "1.5rem" }, children: [
+      /* @__PURE__ */ e.jsx("div", { style: { color: "#f59e0b", fontSize: "1.5rem", letterSpacing: "4px" }, children: "★★★★★" }),
+      /* @__PURE__ */ e.jsxs("p", { className: "pk-text-body", style: { fontSize: "1.125rem", fontStyle: "italic", flex: 1 }, children: [
+        '"',
+        k.text,
+        '"'
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "1rem" }, children: [
+        /* @__PURE__ */ e.jsx("img", { src: k.avatar, alt: k.name, style: { width: "50px", height: "50px", borderRadius: "50%", objectFit: "cover" } }),
+        /* @__PURE__ */ e.jsxs("div", { children: [
+          /* @__PURE__ */ e.jsx("h4", { className: "pk-label", children: k.name }),
+          /* @__PURE__ */ e.jsx("p", { className: "pk-text-sm", style: { color: "var(--pk-primary)" }, children: k.role })
+        ] })
+      ] })
+    ] }, k.id)) })
+  ] }), x = () => /* @__PURE__ */ e.jsxs("div", { className: "pk-container animate-fade-in", style: { padding: "4rem 2rem" }, children: [
+    /* @__PURE__ */ e.jsxs("div", { style: { textAlign: "center", marginBottom: "4rem" }, children: [
+      /* @__PURE__ */ e.jsx("h2", { className: "pk-heading-xl", style: { marginBottom: "1rem" }, children: "Simple, transparent pricing" }),
+      /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", style: { fontSize: "1.25rem" }, children: "No hidden fees. Absolute freedom." })
+    ] }),
+    /* @__PURE__ */ e.jsx("div", { className: "pk-grid", style: { gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: "2rem", alignItems: "center" }, children: Q.pricing.map((k) => /* @__PURE__ */ e.jsxs("div", { className: "pk-card", style: { padding: "3rem 2rem", position: "relative", border: k.featured ? "2px solid var(--pk-primary)" : "1px solid var(--pk-border)", transform: k.featured ? "scale(1.05)" : "scale(1)", zIndex: k.featured ? 10 : 1 }, children: [
+      k.featured && /* @__PURE__ */ e.jsx("div", { style: { position: "absolute", top: 0, left: "50%", transform: "translate(-50%, -50%)", background: "var(--pk-primary)", color: "white", padding: "0.25rem 1rem", borderRadius: "var(--pk-radius-full)", fontWeight: 600, fontSize: "0.875rem" }, children: "Most Popular" }),
+      /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", style: { marginBottom: "0.5rem", textAlign: "center" }, children: k.tier }),
+      /* @__PURE__ */ e.jsx("div", { className: "pk-heading-xl pk-gradient-text", style: { textAlign: "center", marginBottom: "2rem" }, children: k.price }),
+      /* @__PURE__ */ e.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", marginBottom: "3rem" }, children: k.features.map((g) => /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.75rem" }, children: [
+        /* @__PURE__ */ e.jsx("span", { style: { color: "var(--pk-success)" }, children: "✓" }),
+        /* @__PURE__ */ e.jsx("span", { className: "pk-text-body", children: g })
+      ] }, g)) }),
+      /* @__PURE__ */ e.jsx("button", { className: `pk-btn pk-w-full ${k.featured ? "pk-btn-primary" : "pk-btn-outline"}`, style: { padding: "1rem" }, children: k.cta })
+    ] }, k.id)) })
+  ] });
+  return /* @__PURE__ */ e.jsxs("div", { style: { position: "relative", minHeight: "100vh", backgroundColor: "var(--pk-bg-main)", overflow: "hidden" }, children: [
+    h(),
+    m === "hero" && A(),
+    m === "features" && l(),
+    m === "testimonials" && T(),
+    m === "pricing" && x()
+  ] });
+}
+const Be = {
+  platformName: "Voyager Lodgings",
+  amenities: ["WiFi", "Pool", "Gym", "Spa", "Restaurant", "Parking"],
+  hotels: [
+    {
+      id: "h1",
+      name: "The Obsidian Resort",
+      destination: "Maldives",
+      rating: 5,
+      pricePerNight: 450,
+      amenities: ["WiFi", "Pool", "Spa", "Restaurant"],
+      image: "https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&w=800&q=80",
+      description: "Experience luxury in crystal clear waters. Wake up to ocean views.",
+      gallery: [
+        "https://images.unsplash.com/photo-1582719508461-905c673771fd?auto=format&fit=crop&w=800&q=80",
+        "https://images.unsplash.com/photo-1571896349842-33c89424de2d?auto=format&fit=crop&w=800&q=80"
+      ]
+    },
+    {
+      id: "h2",
+      name: "Alpine Retreat",
+      destination: "Swiss Alps",
+      rating: 4,
+      pricePerNight: 280,
+      amenities: ["WiFi", "Gym", "Restaurant", "Parking"],
+      image: "https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?auto=format&fit=crop&w=800&q=80",
+      description: "Cozy cabin living with ski-in, ski-out access and a roaring fireplace.",
+      gallery: [
+        "https://images.unsplash.com/photo-1621293954908-907159247fc8?auto=format&fit=crop&w=800&q=80"
+      ]
+    },
+    {
+      id: "h3",
+      name: "Neon Towers Hotel",
+      destination: "Tokyo",
+      rating: 5,
+      pricePerNight: 350,
+      amenities: ["WiFi", "Gym", "Restaurant"],
+      image: "https://images.unsplash.com/photo-1503899036084-c55cdd92da26?auto=format&fit=crop&w=800&q=80",
+      description: "Ultra-modern rooms suspended above the neon-drenched city streets.",
+      gallery: [
+        "https://images.unsplash.com/photo-1518548419970-58e3b4079ab2?auto=format&fit=crop&w=800&q=80"
+      ]
+    },
+    {
+      id: "h4",
+      name: "Hacienda Horizon",
+      destination: "Tulum",
+      rating: 3,
+      pricePerNight: 120,
+      amenities: ["WiFi", "Pool", "Parking"],
+      image: "https://images.unsplash.com/photo-1510798831971-661eb04b3739?auto=format&fit=crop&w=800&q=80",
+      description: "Boutique eco-resort nestled deeply in the Mayan jungle.",
+      gallery: [
+        "https://images.unsplash.com/photo-1590073844006-33379778ae09?auto=format&fit=crop&w=800&q=80"
+      ]
+    }
+  ]
+};
+function Vt() {
+  const [m, o] = p("search"), n = (/* @__PURE__ */ new Date()).toISOString().split("T")[0], j = new Date(Date.now() + 864e5 * 3).toISOString().split("T")[0], [u, N] = p(""), [h, A] = p(n), [l, T] = p(j), [x, k] = p(0), [g, W] = p([]), [y, C] = p(null), [B, D] = p(3), [P, S] = p(!1), { showToast: d, ToastContainer: b } = G();
+  $(() => {
+    const w = new Date(h), R = new Date(l), q = Math.ceil((R - w) / (1e3 * 60 * 60 * 24));
+    q > 0 ? D(q) : D(0);
+  }, [h, l]);
+  const M = (w, R = 1500) => {
+    S(!0), setTimeout(() => {
+      S(!1), w();
+    }, R);
+  }, I = (w) => {
+    if (w.preventDefault(), B <= 0) {
+      d("Check-out must be after Check-in", "error");
+      return;
+    }
+    M(() => {
+      o("listing");
+    });
+  }, r = (w) => {
+    g.includes(w) ? W((R) => R.filter((q) => q !== w)) : W((R) => [...R, w]);
+  }, t = () => {
+    M(() => {
+      d(`Success! Your booking for ${y.name} is confirmed.`, "success"), o("search");
+    }, 2e3);
+  }, a = () => /* @__PURE__ */ e.jsxs("div", { className: "pk-container animate-fade-in", style: { minHeight: "80vh", display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center" }, children: [
+    /* @__PURE__ */ e.jsxs("div", { style: { textAlign: "center", marginBottom: "3rem" }, children: [
+      /* @__PURE__ */ e.jsx("h1", { className: "pk-heading-xl", style: { marginBottom: "1rem" }, children: Be.platformName }),
+      /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", style: { fontSize: "1.25rem" }, children: "Find your perfect escape anywhere in the world." })
+    ] }),
+    /* @__PURE__ */ e.jsx("div", { className: "pk-card pk-glass", style: { width: "100%", maxWidth: "800px", padding: "3rem" }, children: /* @__PURE__ */ e.jsxs("form", { onSubmit: I, style: { display: "flex", flexDirection: "column", gap: "1.5rem" }, children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "pk-input-group", children: [
+        /* @__PURE__ */ e.jsx("label", { className: "pk-label", children: "Where are you going?" }),
+        /* @__PURE__ */ e.jsx("input", { type: "text", className: "pk-input", placeholder: "e.g. Tokyo, Swiss Alps, Maldives", value: u, onChange: (w) => N(w.target.value), required: !0 })
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", gap: "1.5rem" }, children: [
+        /* @__PURE__ */ e.jsxs("div", { className: "pk-input-group", style: { flex: 1 }, children: [
+          /* @__PURE__ */ e.jsx("label", { className: "pk-label", children: "Check In" }),
+          /* @__PURE__ */ e.jsx("input", { type: "date", className: "pk-input", value: h, onChange: (w) => A(w.target.value), required: !0 })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { className: "pk-input-group", style: { flex: 1 }, children: [
+          /* @__PURE__ */ e.jsx("label", { className: "pk-label", children: "Check Out" }),
+          /* @__PURE__ */ e.jsx("input", { type: "date", className: "pk-input", value: l, onChange: (w) => T(w.target.value), required: !0 })
+        ] })
+      ] }),
+      B > 0 && /* @__PURE__ */ e.jsxs("p", { className: "pk-text-sm pk-text-center", style: { color: "var(--pk-primary)" }, children: [
+        "Duration: ",
+        B,
+        " nights"
+      ] }),
+      /* @__PURE__ */ e.jsx("button", { type: "submit", className: "pk-btn pk-btn-primary pk-w-full", style: { padding: "1.25rem", fontSize: "1.125rem", marginTop: "1rem" }, children: "Search Accommodations" })
+    ] }) })
+  ] }), i = () => {
+    const w = Be.hotels.filter((R) => {
+      const q = !u || R.destination.toLowerCase().includes(u.toLowerCase()), oe = x === 0 || R.rating >= x, de = g.every((ce) => R.amenities.includes(ce));
+      return q && oe && de;
+    });
+    return /* @__PURE__ */ e.jsxs("div", { className: "pk-container animate-fade-in", style: { display: "flex", gap: "2rem", alignItems: "flex-start" }, children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "pk-card pk-hidden-mobile", style: { width: "300px", padding: "1.5rem", flexShrink: 0 }, children: [
+        /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-outline pk-w-full", style: { marginBottom: "2rem" }, onClick: () => o("search"), children: "← Modifiy Search" }),
+        /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", style: { marginBottom: "1rem" }, children: "Star Rating" }),
+        /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem", marginBottom: "2rem" }, children: [
+          [5, 4, 3].map((R) => /* @__PURE__ */ e.jsxs("label", { style: { display: "flex", alignItems: "center", gap: "0.5rem", cursor: "pointer" }, children: [
+            /* @__PURE__ */ e.jsx("input", { type: "radio", name: "rating", checked: x === R, onChange: () => k(R), style: { accentColor: "var(--pk-primary)" } }),
+            /* @__PURE__ */ e.jsx("span", { style: { color: "#f59e0b" }, children: "★".repeat(R) }),
+            /* @__PURE__ */ e.jsx("span", { className: "pk-text-muted", children: "& up" })
+          ] }, R)),
+          /* @__PURE__ */ e.jsxs("label", { style: { display: "flex", alignItems: "center", gap: "0.5rem", cursor: "pointer", marginTop: "0.5rem" }, children: [
+            /* @__PURE__ */ e.jsx("input", { type: "radio", name: "rating", checked: x === 0, onChange: () => k(0), style: { accentColor: "var(--pk-primary)" } }),
+            /* @__PURE__ */ e.jsx("span", { className: "pk-text-main", children: "Show All" })
+          ] })
+        ] }),
+        /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", style: { marginBottom: "1rem" }, children: "Amenities" }),
+        /* @__PURE__ */ e.jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem" }, children: Be.amenities.map((R) => /* @__PURE__ */ e.jsx(
+          "button",
+          {
+            className: g.includes(R) ? "pk-btn pk-btn-primary" : "pk-btn pk-btn-outline",
+            style: { padding: "0.25rem 0.5rem", borderRadius: "4px", fontSize: "0.75rem" },
+            onClick: () => r(R),
+            children: R
+          },
+          R
+        )) })
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "2rem" }, children: [
+        /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+          /* @__PURE__ */ e.jsx("h2", { className: "pk-heading-lg", children: u || "All Destinations" }),
+          /* @__PURE__ */ e.jsxs("span", { className: "pk-text-muted", children: [
+            w.length,
+            " properties found"
+          ] })
+        ] }),
+        w.length === 0 ? /* @__PURE__ */ e.jsxs("div", { className: "pk-empty-state", children: [
+          /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", children: "No properties found" }),
+          /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", children: "Try removing some filters." })
+        ] }) : w.map((R) => /* @__PURE__ */ e.jsxs("div", { className: "pk-card pk-card-interactive", style: { display: "flex", flexWrap: "wrap", overflow: "hidden" }, children: [
+          /* @__PURE__ */ e.jsx("div", { style: { flex: "1 1 300px", height: "250px" }, children: /* @__PURE__ */ e.jsx("img", { src: R.image, alt: R.name, style: { width: "100%", height: "100%", objectFit: "cover" } }) }),
+          /* @__PURE__ */ e.jsxs("div", { style: { flex: "2 1 300px", padding: "2rem", display: "flex", flexDirection: "column" }, children: [
+            /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: "0.5rem" }, children: [
+              /* @__PURE__ */ e.jsxs("div", { children: [
+                /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-lg", children: R.name }),
+                /* @__PURE__ */ e.jsxs("p", { className: "pk-text-sm", style: { color: "var(--pk-primary)", display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
+                  "📍 ",
+                  R.destination
+                ] })
+              ] }),
+              /* @__PURE__ */ e.jsx("span", { style: { background: "#f59e0b", color: "white", padding: "0.25rem 0.5rem", borderRadius: "4px", fontWeight: "bold" }, children: "★".repeat(R.rating) })
+            ] }),
+            /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", style: { margin: "1rem 0", flex: 1 }, children: R.description }),
+            /* @__PURE__ */ e.jsx("div", { style: { display: "flex", gap: "0.5rem", flexWrap: "wrap", marginBottom: "1.5rem" }, children: R.amenities.map((q) => /* @__PURE__ */ e.jsx("span", { className: "pk-badge", children: q }, q)) }),
+            /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-end", borderTop: "1px solid var(--pk-border)", paddingTop: "1rem" }, children: [
+              /* @__PURE__ */ e.jsxs("div", { children: [
+                /* @__PURE__ */ e.jsxs("span", { className: "pk-heading-lg", style: { color: "var(--pk-primary)" }, children: [
+                  "$",
+                  R.pricePerNight
+                ] }),
+                /* @__PURE__ */ e.jsx("span", { className: "pk-text-muted", children: " / night" })
+              ] }),
+              /* @__PURE__ */ e.jsx(
+                "button",
+                {
+                  className: "pk-btn pk-btn-primary",
+                  onClick: () => {
+                    C(R), o("gallery");
+                  },
+                  children: "View Deal"
+                }
+              )
+            ] })
+          ] })
+        ] }, R.id))
+      ] })
+    ] });
+  }, f = () => y ? /* @__PURE__ */ e.jsxs("div", { className: "pk-container animate-fade-in", children: [
+    /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-outline", style: { marginBottom: "2rem" }, onClick: () => o("listing"), children: "← Back" }),
+    /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: "2rem" }, children: [
+      /* @__PURE__ */ e.jsxs("div", { children: [
+        /* @__PURE__ */ e.jsx("h1", { className: "pk-heading-xl", style: { marginBottom: "0.5rem" }, children: y.name }),
+        /* @__PURE__ */ e.jsxs("p", { className: "pk-text-body", style: { fontSize: "1.125rem" }, children: [
+          "📍 ",
+          y.destination
+        ] })
+      ] }),
+      /* @__PURE__ */ e.jsxs("button", { className: "pk-btn pk-btn-primary", style: { padding: "1rem 2rem", fontSize: "1.25rem" }, onClick: () => o("summary"), children: [
+        "Reserve • $",
+        y.pricePerNight * B,
+        " Total"
+      ] })
+    ] }),
+    /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: "1rem" }, children: [
+      /* @__PURE__ */ e.jsx("div", { style: { flex: "2 1 500px", height: "400px", borderRadius: "var(--pk-radius-lg)", overflow: "hidden" }, children: /* @__PURE__ */ e.jsx("img", { src: y.image, alt: "", style: { width: "100%", height: "100%", objectFit: "cover" } }) }),
+      /* @__PURE__ */ e.jsx("div", { style: { flex: "1 1 300px", display: "flex", flexDirection: "column", gap: "1rem" }, children: y.gallery.map((w, R) => /* @__PURE__ */ e.jsx("div", { style: { flex: 1, height: "192px", borderRadius: "var(--pk-radius-lg)", overflow: "hidden" }, children: /* @__PURE__ */ e.jsx("img", { src: w, alt: "", style: { width: "100%", height: "100%", objectFit: "cover" } }) }, R)) })
+    ] }),
+    /* @__PURE__ */ e.jsxs("div", { className: "pk-card", style: { marginTop: "2rem", padding: "2rem" }, children: [
+      /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", style: { marginBottom: "1rem" }, children: "About this property" }),
+      /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", children: y.description }),
+      /* @__PURE__ */ e.jsx("h4", { className: "pk-label", style: { marginTop: "2rem", marginBottom: "1rem" }, children: "Popular Amenities" }),
+      /* @__PURE__ */ e.jsx("div", { style: { display: "flex", gap: "1rem", flexWrap: "wrap" }, children: y.amenities.map((w) => /* @__PURE__ */ e.jsxs("span", { className: "pk-badge", style: { fontSize: "1rem", padding: "0.5rem 1rem" }, children: [
+        "✓ ",
+        w
+      ] }, w)) })
+    ] })
+  ] }) : null, F = () => {
+    if (!y) return null;
+    const w = y.pricePerNight * B;
+    return /* @__PURE__ */ e.jsx("div", { className: "pk-container animate-fade-in", style: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ e.jsxs("div", { className: "pk-card", style: { width: "100%", maxWidth: "600px", padding: "3rem" }, children: [
+      /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "2rem" }, children: [
+        /* @__PURE__ */ e.jsx("h2", { className: "pk-heading-lg", children: "Review Booking" }),
+        /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-outline", style: { border: "none" }, onClick: () => o("gallery"), children: "Cancel" })
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", gap: "1.5rem", marginBottom: "2rem", background: "var(--pk-bg-main)", padding: "1rem", borderRadius: "var(--pk-radius-md)" }, children: [
+        /* @__PURE__ */ e.jsx("img", { src: y.image, alt: "", style: { width: "80px", height: "80px", borderRadius: "var(--pk-radius-sm)", objectFit: "cover" } }),
+        /* @__PURE__ */ e.jsxs("div", { children: [
+          /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", children: y.name }),
+          /* @__PURE__ */ e.jsx("p", { className: "pk-text-sm", style: { color: "var(--pk-primary)" }, children: y.destination })
+        ] })
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", gap: "1rem", marginBottom: "2rem" }, children: [
+        /* @__PURE__ */ e.jsxs("div", { className: "pk-card", style: { flex: 1, padding: "1rem", textAlign: "center" }, children: [
+          /* @__PURE__ */ e.jsx("p", { className: "pk-label pk-text-muted", children: "Check-In" }),
+          /* @__PURE__ */ e.jsx("p", { className: "pk-heading-sm", children: h })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { className: "pk-card", style: { flex: 1, padding: "1rem", textAlign: "center" }, children: [
+          /* @__PURE__ */ e.jsx("p", { className: "pk-label pk-text-muted", children: "Check-Out" }),
+          /* @__PURE__ */ e.jsx("p", { className: "pk-heading-sm", children: l })
+        ] })
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { style: { borderTop: "1px solid var(--pk-border)", borderBottom: "1px solid var(--pk-border)", padding: "1.5rem 0", marginBottom: "2rem" }, children: [
+        /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", style: { marginBottom: "1rem" }, children: "Price Details" }),
+        /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: "0.5rem" }, children: [
+          /* @__PURE__ */ e.jsxs("span", { className: "pk-text-body", children: [
+            "$",
+            y.pricePerNight,
+            " x ",
+            B,
+            " nights"
+          ] }),
+          /* @__PURE__ */ e.jsxs("span", { children: [
+            "$",
+            w
+          ] })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: "0.5rem" }, children: [
+          /* @__PURE__ */ e.jsx("span", { className: "pk-text-body", children: "Taxes and fees" }),
+          /* @__PURE__ */ e.jsxs("span", { children: [
+            "$",
+            (w * 0.1).toFixed(0)
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "2rem" }, children: [
+        /* @__PURE__ */ e.jsx("span", { className: "pk-heading-lg", children: "Total (USD)" }),
+        /* @__PURE__ */ e.jsxs("span", { className: "pk-heading-xl", style: { color: "var(--pk-primary)" }, children: [
+          "$",
+          (w * 1.1).toFixed(0)
+        ] })
+      ] }),
+      /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-primary pk-w-full", style: { padding: "1.25rem", fontSize: "1.125rem" }, onClick: t, children: "Confirm & Pay" })
+    ] }) });
+  };
+  return /* @__PURE__ */ e.jsxs("div", { style: { position: "relative", minHeight: "100vh", backgroundColor: "var(--pk-bg-main)" }, children: [
+    P && /* @__PURE__ */ e.jsxs("div", { style: { position: "fixed", inset: 0, backgroundColor: "rgba(255,255,255,0.8)", zIndex: 100, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", backdropFilter: "blur(4px)" }, children: [
+      /* @__PURE__ */ e.jsx("div", { className: "pk-skeleton", style: { width: "80px", height: "80px", borderRadius: "50%", marginBottom: "1rem" } }),
+      /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", children: "Searching Global Availability..." })
+    ] }),
+    m === "search" && a(),
+    m === "listing" && i(),
+    m === "gallery" && f(),
+    m === "summary" && F(),
+    /* @__PURE__ */ e.jsx(b, {})
+  ] });
+}
+const Re = {
+  libraryName: "PopSite Central Library",
+  catalog: [
+    { id: "b1", title: "The Pragmatic Programmer", author: "David Thomas", cover: "https://images.unsplash.com/photo-1544947950-fa07a98d237f?auto=format&fit=crop&w=400&q=80", genre: "Technology", available: !0 },
+    { id: "b2", title: "Clean Architecture", author: "Robert C. Martin", cover: "https://images.unsplash.com/photo-1589829085413-56de8ae18c73?auto=format&fit=crop&w=400&q=80", genre: "Technology", available: !0 },
+    { id: "b3", title: "Dune", author: "Frank Herbert", cover: "https://images.unsplash.com/photo-1616422285623-13ff0162193c?auto=format&fit=crop&w=400&q=80", genre: "Science Fiction", available: !1 },
+    { id: "b4", title: "The Martian", author: "Andy Weir", cover: "https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=400&q=80", genre: "Science Fiction", available: !0 },
+    { id: "b5", title: "Thinking, Fast and Slow", author: "Daniel Kahneman", cover: "https://images.unsplash.com/photo-1532012197267-da84d127e765?auto=format&fit=crop&w=400&q=80", genre: "Psychology", available: !0 }
+  ],
+  myBooks: [
+    {
+      book: { id: "bX", title: "1984", author: "George Orwell", cover: "https://images.unsplash.com/photo-1541963463532-d68292c34b19?auto=format&fit=crop&w=400&q=80", genre: "Dystopian" },
+      borrowDate: "2026-03-01",
+      dueDate: "2026-03-15"
+      // Purposefully in the past to trigger "Overdue" flag
+    }
+  ]
+};
+function Ht() {
+  const [m, o] = p("catalog"), [n, j] = p(Re.catalog), [u, N] = p(Re.myBooks), [h, A] = p(""), [l, T] = p(!1), { showToast: x, ToastContainer: k } = G();
+  $(() => {
+    const S = localStorage.getItem("popsite_library_cat"), d = localStorage.getItem("popsite_library_my");
+    if (S) try {
+      j(JSON.parse(S));
+    } catch {
+    }
+    if (d) try {
+      N(JSON.parse(d));
+    } catch {
+    }
+  }, []), $(() => {
+    localStorage.setItem("popsite_library_cat", JSON.stringify(n)), localStorage.setItem("popsite_library_my", JSON.stringify(u));
+  }, [n, u]);
+  const g = (S, d = 800) => {
+    T(!0), setTimeout(() => {
+      T(!1), S();
+    }, d);
+  }, W = (S) => {
+    g(() => {
+      const d = /* @__PURE__ */ new Date();
+      d.setDate(d.getDate() + 14);
+      const b = {
+        book: S,
+        borrowDate: (/* @__PURE__ */ new Date()).toISOString().split("T")[0],
+        dueDate: d.toISOString().split("T")[0]
+      };
+      N([...u, b]), j(n.map((M) => M.id === S.id ? { ...M, available: !1 } : M)), x(`You have borrowed "${S.title}"`, "success");
+    });
+  }, y = (S) => {
+    g(() => {
+      N(u.filter((b) => b.book.id !== S.book.id));
+      const d = n.find((b) => b.id === S.book.id);
+      j(d ? n.map((b) => b.id === S.book.id ? { ...b, available: !0 } : b) : [...n, { ...S.book, available: !0 }]), x(`Returned "${S.book.title}" successfully`, "info");
+    });
+  }, C = (S) => {
+    const d = new Date(S);
+    return /* @__PURE__ */ new Date() > d;
+  }, B = () => /* @__PURE__ */ e.jsxs("div", { className: "pk-card", style: { marginBottom: "2rem", padding: "1rem", display: "flex", gap: "1rem" }, children: [
+    /* @__PURE__ */ e.jsx("button", { className: m === "catalog" ? "pk-btn pk-btn-primary" : "pk-btn pk-btn-outline", onClick: () => o("catalog"), children: "Public Catalog" }),
+    /* @__PURE__ */ e.jsxs("button", { className: m === "dashboard" ? "pk-btn pk-btn-primary" : "pk-btn pk-btn-outline", onClick: () => o("dashboard"), children: [
+      "My Books (",
+      u.length,
+      ")"
+    ] })
+  ] }), D = () => {
+    const S = n.filter(
+      (d) => d.title.toLowerCase().includes(h.toLowerCase()) || d.author.toLowerCase().includes(h.toLowerCase())
+    );
+    return /* @__PURE__ */ e.jsxs("div", { className: "animate-fade-in", children: [
+      /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "2rem" }, children: [
+        /* @__PURE__ */ e.jsx("h2", { className: "pk-heading-lg", children: "Browse Collection" }),
+        /* @__PURE__ */ e.jsx("input", { type: "text", className: "pk-input", placeholder: "Search title or author...", value: h, onChange: (d) => A(d.target.value) })
+      ] }),
+      /* @__PURE__ */ e.jsx("div", { className: "pk-grid", style: { gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))" }, children: S.map((d) => /* @__PURE__ */ e.jsxs("div", { className: "pk-card pk-card-interactive", style: { display: "flex", flexDirection: "column" }, children: [
+        /* @__PURE__ */ e.jsx("div", { style: { height: "300px", width: "100%" }, children: /* @__PURE__ */ e.jsx("img", { src: d.cover, alt: d.title, style: { width: "100%", height: "100%", objectFit: "cover" }, onError: (b) => {
+          b.target.style.display = "none";
+        } }) }),
+        /* @__PURE__ */ e.jsxs("div", { className: "pk-card-body", style: { flex: 1, display: "flex", flexDirection: "column" }, children: [
+          /* @__PURE__ */ e.jsx("span", { className: "pk-badge", style: { alignSelf: "flex-start", marginBottom: "0.5rem", background: "var(--pk-bg-main)", color: "var(--pk-text-muted)" }, children: d.genre }),
+          /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", style: { marginBottom: "0.25rem" }, children: d.title }),
+          /* @__PURE__ */ e.jsx("p", { className: "pk-text-sm", style: { marginBottom: "1rem", flex: 1 }, children: d.author }),
+          d.available ? /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-primary pk-w-full", onClick: () => W(d), children: "Borrow Book" }) : /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-outline pk-w-full", disabled: !0, children: "Currently Rented" })
+        ] })
+      ] }, d.id)) })
+    ] });
+  }, P = () => /* @__PURE__ */ e.jsxs("div", { className: "animate-fade-in", children: [
+    /* @__PURE__ */ e.jsx("h2", { className: "pk-heading-lg", style: { marginBottom: "2rem" }, children: "My Bookshelf" }),
+    u.length === 0 ? /* @__PURE__ */ e.jsxs("div", { className: "pk-empty-state", children: [
+      /* @__PURE__ */ e.jsx("div", { className: "pk-empty-icon", children: "📚" }),
+      /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", children: "Your shelf is empty" }),
+      /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", children: "Go to the catalog to borrow some books." })
+    ] }) : /* @__PURE__ */ e.jsx("div", { className: "pk-grid pk-flex-col pk-gap-4", children: u.map((S, d) => {
+      const b = C(S.dueDate);
+      return /* @__PURE__ */ e.jsxs("div", { className: "pk-card", style: { display: "flex", alignItems: "center", gap: "1.5rem", padding: "1rem", borderLeft: b ? "4px solid var(--pk-danger)" : "1px solid var(--pk-border)" }, children: [
+        /* @__PURE__ */ e.jsx("div", { style: { width: "80px", height: "110px", borderRadius: "4px", overflow: "hidden" }, children: /* @__PURE__ */ e.jsx("img", { src: S.book.cover, alt: "", style: { width: "100%", height: "100%", objectFit: "cover" } }) }),
+        /* @__PURE__ */ e.jsxs("div", { style: { flex: 1 }, children: [
+          /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", style: { marginBottom: "0.25rem" }, children: S.book.title }),
+          /* @__PURE__ */ e.jsx("p", { className: "pk-text-sm", style: { marginBottom: "1rem" }, children: S.book.author }),
+          /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", gap: "2rem" }, children: [
+            /* @__PURE__ */ e.jsxs("div", { children: [
+              /* @__PURE__ */ e.jsx("p", { className: "pk-label pk-text-muted", style: { fontSize: "0.75rem" }, children: "Borrowed" }),
+              /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", style: { fontWeight: 600 }, children: S.borrowDate })
+            ] }),
+            /* @__PURE__ */ e.jsxs("div", { children: [
+              /* @__PURE__ */ e.jsx("p", { className: "pk-label pk-text-muted", style: { fontSize: "0.75rem" }, children: "Due Date" }),
+              /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", style: { fontWeight: 600, color: b ? "var(--pk-danger)" : "var(--pk-text-main)" }, children: S.dueDate })
+            ] }),
+            b && /* @__PURE__ */ e.jsx("div", { style: { alignSelf: "flex-end", background: "var(--pk-danger)", color: "white", padding: "0.1rem 0.5rem", borderRadius: "var(--pk-radius-sm)", fontSize: "0.75rem", fontWeight: "bold" }, children: "OVERDUE" })
+          ] })
+        ] }),
+        /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-outline", onClick: () => y(S), children: "Return Book" })
+      ] }, d);
+    }) })
+  ] });
+  return /* @__PURE__ */ e.jsxs("div", { className: "pk-container", style: { minHeight: "100vh" }, children: [
+    l && /* @__PURE__ */ e.jsxs("div", { style: { position: "fixed", inset: 0, backgroundColor: "rgba(255,255,255,0.7)", zIndex: 100, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", backdropFilter: "blur(4px)" }, children: [
+      /* @__PURE__ */ e.jsx("div", { className: "pk-skeleton", style: { width: "80px", height: "80px", borderRadius: "50%", marginBottom: "1rem" } }),
+      /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", children: "Syncing Library Database..." })
+    ] }),
+    /* @__PURE__ */ e.jsxs("div", { style: { marginBottom: "2rem" }, children: [
+      /* @__PURE__ */ e.jsx("h1", { className: "pk-heading-xl", children: Re.libraryName }),
+      /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", children: "Your portal to infinite knowledge." })
+    ] }),
+    B(),
+    /* @__PURE__ */ e.jsxs("div", { style: { position: "relative" }, children: [
+      m === "catalog" && D(),
+      m === "dashboard" && P()
+    ] }),
+    /* @__PURE__ */ e.jsx(k, {})
+  ] });
+}
+const Ze = {
+  platformName: "PopSite Tickets",
+  upcomingEvents: [
+    {
+      id: "ev1",
+      title: "Global Tech Summit 2026",
+      date: new Date(Date.now() + 864e5 * 5).toISOString(),
+      // 5 days from now
+      location: "San Francisco Convention Center",
+      image: "https://images.unsplash.com/photo-1540575467063-178a50c2df87?auto=format&fit=crop&w=800&q=80",
+      description: "The premier gathering of global tech leaders discussing AI, web architecture, and edge computing.",
+      speakers: ["Dr. Evelyn Stone (AI Lead, Acme)", "Marcus Chen (Founder, WebCorp)"],
+      agenda: ["09:00 - Keynote", "11:30 - The Future of Vanilla CSS", "15:00 - Networking Mixer"],
+      tiers: [
+        { id: "t1", name: "General Admission", price: 299, capacity: 50 },
+        { id: "t2", name: "VIP Backstage", price: 899, capacity: 0 }
+        // Sold out mock
+      ]
+    },
+    {
+      id: "ev2",
+      title: "Electronic Music Paradise",
+      date: new Date(Date.now() + 864e5 * 12).toISOString(),
+      // 12 days from now
+      location: "Miami Beach Outdoor Arena",
+      image: "https://images.unsplash.com/photo-1470229722913-7c090be5f524?auto=format&fit=crop&w=800&q=80",
+      description: "A 3-day outdoor electronic music festival featuring top global DJs and immersive light shows.",
+      speakers: ["DJ Nova", "The Synthetics"],
+      agenda: ["Day 1 - Opening Ceremony", "Day 2 - Sunset Stage", "Day 3 - Fireworks Finale"],
+      tiers: [
+        { id: "t3", name: "3-Day Pass", price: 349, capacity: 1500 },
+        { id: "t4", name: "VIP + Artist Meet", price: 1200, capacity: 15 }
+      ]
+    }
+  ]
+};
+function Yt() {
+  const [m, o] = p("feed"), [n, j] = p(null), [u, N] = p(!1), [h, A] = p(null), [l, T] = p(!1), [x, k] = p([]), { showToast: g, ToastContainer: W } = G();
+  $(() => {
+    const d = localStorage.getItem("popsite_events");
+    if (d)
+      try {
+        k(JSON.parse(d));
+      } catch {
+      }
+  }, []), $(() => {
+    localStorage.setItem("popsite_events", JSON.stringify(x));
+  }, [x]);
+  const y = (d) => {
+    const [b, M] = p({ days: 0, hours: 0, minutes: 0, seconds: 0 });
+    return $(() => {
+      const I = new Date(d).getTime(), r = setInterval(() => {
+        const t = (/* @__PURE__ */ new Date()).getTime(), a = I - t;
+        a <= 0 ? (clearInterval(r), M({ days: 0, hours: 0, minutes: 0, seconds: 0 })) : M({
+          days: Math.floor(a / (1e3 * 60 * 60 * 24)),
+          hours: Math.floor(a % (1e3 * 60 * 60 * 24) / (1e3 * 60 * 60)),
+          minutes: Math.floor(a % (1e3 * 60 * 60) / (1e3 * 60)),
+          seconds: Math.floor(a % (1e3 * 60) / 1e3)
+        });
+      }, 1e3);
+      return () => clearInterval(r);
+    }, [d]), b;
+  }, C = (d, b = 1500) => {
+    T(!0), setTimeout(() => {
+      T(!1), d();
+    }, b);
+  }, B = () => {
+    C(() => {
+      const d = {
+        eventId: n.id,
+        ticketId: `TKT-${Math.floor(Math.random() * 1e4)}-${Date.now().toString().slice(-4)}`,
+        tier: h
+      };
+      k((b) => [...b, d]), N(!1), A(null), g("Payment successful! Your ticket is secured.", "success");
+    });
+  }, D = () => /* @__PURE__ */ e.jsxs("div", { className: "pk-container animate-fade-in", children: [
+    /* @__PURE__ */ e.jsxs("div", { style: { textAlign: "center", marginBottom: "3rem" }, children: [
+      /* @__PURE__ */ e.jsx("h1", { className: "pk-heading-xl", style: { marginBottom: "1rem" }, children: Ze.platformName }),
+      /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", style: { fontSize: "1.25rem" }, children: "Secure your spot at the world's most exclusive events." })
+    ] }),
+    /* @__PURE__ */ e.jsx("div", { className: "pk-grid pk-flex-col pk-gap-6", children: Ze.upcomingEvents.map((d) => {
+      const b = new Date(d.date);
+      return /* @__PURE__ */ e.jsxs("div", { className: "pk-card pk-card-interactive", style: { display: "flex", flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ e.jsx("div", { style: { flex: "1 1 300px", height: "250px" }, children: /* @__PURE__ */ e.jsx("img", { src: d.image, alt: d.title, style: { width: "100%", height: "100%", objectFit: "cover" } }) }),
+        /* @__PURE__ */ e.jsxs("div", { className: "pk-card-body", style: { flex: "2 1 400px", display: "flex", flexDirection: "column" }, children: [
+          /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: "0.5rem" }, children: [
+            /* @__PURE__ */ e.jsx("span", { className: "pk-badge", children: b.toLocaleDateString(void 0, { month: "long", day: "numeric", year: "numeric" }) }),
+            x.find((M) => M.eventId === d.id) && /* @__PURE__ */ e.jsx("span", { style: { color: "var(--pk-success)", fontWeight: "bold" }, children: "✓ Ticket Owned" })
+          ] }),
+          /* @__PURE__ */ e.jsx("h2", { className: "pk-heading-lg", style: { marginBottom: "0.5rem" }, children: d.title }),
+          /* @__PURE__ */ e.jsxs("p", { className: "pk-text-sm pk-text-muted", style: { marginBottom: "1rem" }, children: [
+            "📍 ",
+            d.location
+          ] }),
+          /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", style: { flex: 1 }, children: d.description }),
+          /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-primary", style: { alignSelf: "flex-start", marginTop: "1.5rem" }, onClick: () => {
+            j(d), o("details");
+          }, children: "View Details & Tickets" })
+        ] })
+      ] }, d.id);
+    }) })
+  ] }), P = () => n ? /* @__PURE__ */ e.jsxs("div", { className: "pk-container animate-fade-in", children: [
+    /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-outline", style: { marginBottom: "2rem" }, onClick: () => o("feed"), children: "← Back to Events" }),
+    /* @__PURE__ */ e.jsxs("div", { style: { position: "relative", height: "400px", borderRadius: "var(--pk-radius-lg)", overflow: "hidden", marginBottom: "3rem" }, children: [
+      /* @__PURE__ */ e.jsx("img", { src: n.image, alt: "", style: { width: "100%", height: "100%", objectFit: "cover" } }),
+      /* @__PURE__ */ e.jsxs("div", { style: { position: "absolute", inset: 0, background: "linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.8))", display: "flex", flexDirection: "column", justifyContent: "flex-end", padding: "3rem" }, children: [
+        /* @__PURE__ */ e.jsx("h1", { className: "pk-heading-xl", style: { color: "white", marginBottom: "0.5rem" }, children: n.title }),
+        /* @__PURE__ */ e.jsxs("p", { style: { color: "rgba(255,255,255,0.8)", fontSize: "1.25rem" }, children: [
+          "📍 ",
+          n.location
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ e.jsxs("div", { className: "pk-grid", style: { gridTemplateColumns: "minmax(300px, 2fr) minmax(300px, 1fr)" }, children: [
+      /* @__PURE__ */ e.jsxs("div", { children: [
+        /* @__PURE__ */ e.jsx("h2", { className: "pk-heading-lg", style: { marginBottom: "1.5rem" }, children: "About this Event" }),
+        /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", style: { fontSize: "1.125rem", marginBottom: "3rem" }, children: n.description }),
+        /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", style: { marginBottom: "1rem" }, children: "Who's Speaking" }),
+        /* @__PURE__ */ e.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem", marginBottom: "3rem" }, children: n.speakers.map((d, b) => /* @__PURE__ */ e.jsxs("div", { className: "pk-card", style: { padding: "1rem" }, children: [
+          "👤 ",
+          d
+        ] }, b)) }),
+        /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", style: { marginBottom: "1rem" }, children: "Agenda" }),
+        /* @__PURE__ */ e.jsx("div", { style: { borderLeft: "2px solid var(--pk-border)", paddingLeft: "1.5rem", display: "flex", flexDirection: "column", gap: "1rem" }, children: n.agenda.map((d, b) => /* @__PURE__ */ e.jsxs("div", { style: { position: "relative" }, children: [
+          /* @__PURE__ */ e.jsx("div", { style: { position: "absolute", left: "-1.5rem", top: "5px", transform: "translateX(-50%)", width: "12px", height: "12px", borderRadius: "50%", background: "var(--pk-primary)" } }),
+          /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", style: { fontWeight: 600 }, children: d })
+        ] }, b)) })
+      ] }),
+      /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsxs("div", { className: "pk-card", style: { position: "sticky", top: "20px", padding: "2rem" }, children: [
+        /* @__PURE__ */ e.jsx(S, { targetDate: n.date }),
+        /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-primary pk-w-full", style: { padding: "1.25rem", fontSize: "1.125rem" }, onClick: () => N(!0), children: "Get Tickets" }),
+        x.find((d) => d.eventId === n.id) && /* @__PURE__ */ e.jsx("p", { className: "pk-text-sm pk-text-center", style: { marginTop: "1rem", color: "var(--pk-success)", fontWeight: "bold" }, children: "You have a ticket for this event!" })
+      ] }) })
+    ] }),
+    u && /* @__PURE__ */ e.jsx("div", { style: { position: "fixed", inset: 0, background: "rgba(0,0,0,0.5)", zIndex: 100, display: "flex", alignItems: "center", justifyContent: "center", backdropFilter: "blur(5px)" }, children: /* @__PURE__ */ e.jsxs("div", { className: "pk-card animate-fade-in", style: { width: "100%", maxWidth: "600px", padding: "2rem" }, children: [
+      /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: "2rem" }, children: [
+        /* @__PURE__ */ e.jsx("h2", { className: "pk-heading-lg", children: "Select Tier" }),
+        /* @__PURE__ */ e.jsx("button", { className: "pk-btn pk-btn-outline", style: { border: "none" }, onClick: () => N(!1), children: "✕" })
+      ] }),
+      /* @__PURE__ */ e.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", marginBottom: "2rem" }, children: n.tiers.map((d) => {
+        const b = d.capacity <= 0;
+        return /* @__PURE__ */ e.jsxs(
+          "button",
+          {
+            disabled: b,
+            className: (h == null ? void 0 : h.id) === d.id ? "pk-btn pk-btn-primary" : "pk-btn pk-btn-outline",
+            style: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: "1.5rem", textAlign: "left", opacity: b ? 0.5 : 1 },
+            onClick: () => A(d),
+            children: [
+              /* @__PURE__ */ e.jsxs("div", { children: [
+                /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", style: { color: (h == null ? void 0 : h.id) === d.id ? "white" : "var(--pk-text-main)" }, children: d.name }),
+                b ? /* @__PURE__ */ e.jsx("span", { style: { color: "var(--pk-danger)", fontWeight: "bold", fontSize: "0.875rem" }, children: "SOLD OUT" }) : /* @__PURE__ */ e.jsx("span", { style: { fontSize: "0.875rem", opacity: 0.8 }, children: "Available" })
+              ] }),
+              /* @__PURE__ */ e.jsxs("span", { className: "pk-heading-lg", style: { color: (h == null ? void 0 : h.id) === d.id ? "white" : "var(--pk-primary)" }, children: [
+                "$",
+                d.price
+              ] })
+            ]
+          },
+          d.id
+        );
+      }) }),
+      /* @__PURE__ */ e.jsx(
+        "button",
+        {
+          className: "pk-btn pk-btn-primary pk-w-full",
+          style: { padding: "1.25rem" },
+          disabled: !h,
+          onClick: B,
+          children: "Confirm Checkout"
+        }
+      )
+    ] }) })
+  ] }) : null, S = ({ targetDate: d }) => {
+    const b = y(d);
+    return /* @__PURE__ */ e.jsxs("div", { style: { textAlign: "center", marginBottom: "2rem" }, children: [
+      /* @__PURE__ */ e.jsx("p", { className: "pk-text-muted pk-label", style: { marginBottom: "1rem" }, children: "Event Starts In" }),
+      /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", justifyContent: "space-between", gap: "0.5rem" }, children: [
+        /* @__PURE__ */ e.jsxs("div", { style: { background: "var(--pk-bg-main)", padding: "0.75rem", borderRadius: "var(--pk-radius-md)", flex: 1 }, children: [
+          /* @__PURE__ */ e.jsx("div", { className: "pk-heading-md", children: b.days }),
+          /* @__PURE__ */ e.jsx("div", { className: "pk-text-sm", children: "Days" })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { style: { background: "var(--pk-bg-main)", padding: "0.75rem", borderRadius: "var(--pk-radius-md)", flex: 1 }, children: [
+          /* @__PURE__ */ e.jsx("div", { className: "pk-heading-md", children: b.hours }),
+          /* @__PURE__ */ e.jsx("div", { className: "pk-text-sm", children: "Hrs" })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { style: { background: "var(--pk-bg-main)", padding: "0.75rem", borderRadius: "var(--pk-radius-md)", flex: 1 }, children: [
+          /* @__PURE__ */ e.jsx("div", { className: "pk-heading-md", children: b.minutes }),
+          /* @__PURE__ */ e.jsx("div", { className: "pk-text-sm", children: "Min" })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { style: { background: "var(--pk-bg-main)", padding: "0.75rem", borderRadius: "var(--pk-radius-md)", flex: 1 }, children: [
+          /* @__PURE__ */ e.jsx("div", { className: "pk-heading-md", children: b.seconds }),
+          /* @__PURE__ */ e.jsx("div", { className: "pk-text-sm", children: "Sec" })
+        ] })
+      ] })
+    ] });
+  };
+  return /* @__PURE__ */ e.jsxs("div", { style: { position: "relative", minHeight: "100vh", backgroundColor: "var(--pk-bg-main)" }, children: [
+    l && /* @__PURE__ */ e.jsxs("div", { style: { position: "fixed", inset: 0, backgroundColor: "rgba(255,255,255,0.8)", zIndex: 100, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", backdropFilter: "blur(4px)" }, children: [
+      /* @__PURE__ */ e.jsx("div", { className: "pk-skeleton", style: { width: "80px", height: "80px", borderRadius: "50%", marginBottom: "1rem" } }),
+      /* @__PURE__ */ e.jsx("h3", { className: "pk-heading-md", children: "Processing Reservation..." })
+    ] }),
+    m === "feed" && D(),
+    m === "details" && P(),
+    /* @__PURE__ */ e.jsx(W, {})
+  ] });
+}
+function Ut({ title: m, subtitle: o, bgImage: n, children: j }) {
+  return /* @__PURE__ */ e.jsxs(
+    "div",
+    {
+      className: "pk-card pk-glass",
+      style: {
+        position: "relative",
+        margin: "2rem 0",
+        padding: "4rem 2rem",
+        textAlign: "center",
+        overflow: "hidden",
+        background: n ? `linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url(${n}) center/cover` : "var(--pk-bg-glass)",
+        color: n ? "white" : "inherit"
+      },
+      children: [
+        /* @__PURE__ */ e.jsxs("div", { style: { position: "relative", zIndex: 10 }, children: [
+          /* @__PURE__ */ e.jsx("h1", { className: n ? "pk-heading-xl" : "pk-heading-xl pk-gradient-text", style: { marginBottom: "1rem" }, children: m }),
+          /* @__PURE__ */ e.jsx("p", { className: "pk-text-body", style: { color: n ? "rgba(255,255,255,0.9)" : "var(--pk-text-muted)", fontSize: "1.25rem", maxWidth: "600px", margin: "0 auto 2rem" }, children: o }),
+          /* @__PURE__ */ e.jsx("div", { children: j })
+        ] }),
+        !n && /* @__PURE__ */ e.jsx("div", { style: {
+          position: "absolute",
+          top: "-50%",
+          left: "-10%",
+          width: "500px",
+          height: "500px",
+          background: "radial-gradient(circle, var(--pk-primary-light) 0%, transparent 70%)",
+          opacity: 0.5,
+          zIndex: 0,
+          borderRadius: "50%",
+          pointerEvents: "none"
+        } })
+      ]
+    }
+  );
+}
+export {
+  Mt as AnalyticsDashboardModule,
+  Ft as ChatMessagingModule,
+  Pt as EcommerceStoreModule,
+  Yt as EventTicketBookingModule,
+  Wt as FlightBookingModule,
+  _t as FoodOrderingModule,
+  $t as HospitalAppointmentModule,
+  Vt as HotelBookingModule,
+  Ot as InvoiceBillingModule,
+  qt as LandingPageModule,
+  Ht as LibraryManagementModule,
+  Et as MovieBookingModule,
+  zt as QuizExamModule,
+  Lt as StudentRegistrationModule,
+  Ut as SystemHero,
+  ge as SystemSummaryCard,
+  It as Toast,
+  G as useToast
+};