/* Escala — Account, Checkout, About, Legal pages */

const { useState: useStateA, useEffect: useEffectA } = React;

// ===================== LOGIN =====================
function LoginPage({ navigate, onLogin }) {
  const [mode, setMode] = useStateA('login');
  const [email, setEmail] = useStateA('');
  const [pwd, setPwd] = useStateA('');
  const [name, setName] = useStateA('');
  const [err, setErr] = useStateA('');

  const submit = (e) => {
    e.preventDefault();
    if (!email.includes('@')) { setErr('Email no válido'); return; }
    if (pwd.length < 6) { setErr('Mínimo 6 caracteres'); return; }
    onLogin({ email, name: name || email.split('@')[0] });
    navigate('/account');
  };

  return (
    <main style={{ minHeight: '80vh', position: 'relative', overflow: 'hidden' }}>
      <div className="aurora"><div className="aurora-3"/><div className="aurora-4"/></div>
      <div className="container" style={{ position: 'relative', zIndex: 2, padding: '80px 32px', display: 'grid', placeItems: 'center' }}>
        <div style={{ width: '100%', maxWidth: 420, background: 'var(--bg)', padding: 40, borderRadius: 'var(--r-lg)', border: '1px solid var(--line-soft)', boxShadow: '0 30px 80px rgba(0,0,0,0.04)' }}>
          <p className="t-eyebrow" style={{ marginBottom: 12 }}>{mode === 'login' ? 'Inicia sesión' : 'Crear cuenta'}</p>
          <h1 className="t-display" style={{ fontSize: 36, margin: 0, marginBottom: 24, letterSpacing: '-0.03em' }}>
            {mode === 'login' ? 'Bienvenida.' : 'Hola.'}
          </h1>

          <button className="btn btn--ghost btn--full" onClick={() => { onLogin({ name: 'Usuario Google', email: 'demo@google.com', google: true }); navigate('/account'); }}>
            <Icon.Google/> Continuar con Google
          </button>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '24px 0', color: 'var(--ink-4)', fontSize: 11, letterSpacing: '0.1em' }}>
            <span style={{ flex: 1, height: 1, background: 'var(--line)' }}/> O CON EMAIL <span style={{ flex: 1, height: 1, background: 'var(--line)' }}/>
          </div>

          <form onSubmit={submit} className="col gap-4">
            {mode === 'register' && (
              <div className="field"><label>Nombre</label><input className="input" value={name} onChange={e => setName(e.target.value)} required/></div>
            )}
            <div className="field"><label>Email</label><input className="input" type="email" value={email} onChange={e => setEmail(e.target.value)} required/></div>
            <div className="field">
              <label>Contraseña</label>
              <input className="input" type="password" value={pwd} onChange={e => setPwd(e.target.value)} required/>
              {mode === 'login' && <a href="#" onClick={e => e.preventDefault()} style={{ fontSize: 11, color: 'var(--ink-3)', textDecoration: 'underline', marginTop: 4 }}>¿Olvidaste tu contraseña?</a>}
            </div>
            {err && <p style={{ color: '#c33', fontSize: 12, margin: 0 }}>{err}</p>}
            <button className="btn btn--full btn--lg" type="submit">{mode === 'login' ? 'Iniciar sesión' : 'Crear cuenta'} <Icon.Arrow/></button>
          </form>

          <p style={{ textAlign: 'center', marginTop: 20, fontSize: 13, color: 'var(--ink-3)' }}>
            {mode === 'login' ? '¿Aún no tienes cuenta?' : '¿Ya tienes cuenta?'}{' '}
            <a href="#" onClick={e => { e.preventDefault(); setMode(mode === 'login' ? 'register' : 'login'); }} style={{ textDecoration: 'underline' }}>
              {mode === 'login' ? 'Regístrate' : 'Inicia sesión'}
            </a>
          </p>
        </div>
      </div>
    </main>
  );
}

// ===================== ACCOUNT =====================
function AccountPage({ navigate, route, user, onLogout }) {
  const orders = window.ESCALA_DATA.orders;
  const sub = route.replace('/account', '').replace(/^\//, '') || 'overview';

  return (
    <main className="container" style={{ padding: '64px 32px 80px' }}>
      <p className="t-eyebrow" style={{ marginBottom: 12 }}>Cuenta</p>
      <h1 className="t-display" style={{ fontSize: 'clamp(36px, 6vw, 64px)', margin: 0, marginBottom: 40 }}>Hola, {user.name.split(' ')[0]}.</h1>

      <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr', gap: 64 }} className="account-grid">
        <aside style={{ borderRight: '1px solid var(--line-soft)' }}>
          {[
            ['overview', 'Resumen', '/account'],
            ['orders',   'Pedidos', '/account/orders'],
            ['addresses','Direcciones', '/account/addresses'],
            ['payments', 'Métodos de pago', '/account/payments'],
            ['settings', 'Ajustes', '/account/settings'],
          ].map(([k, l, p]) => (
            <a key={k} href="#" onClick={e => { e.preventDefault(); navigate(p); }}
               style={{
                 display: 'block', padding: '12px 0', fontSize: 14,
                 color: sub === k || (sub === 'overview' && k === 'overview') ? 'var(--ink)' : 'var(--ink-3)',
                 fontWeight: sub === k ? 500 : 400,
               }}>{l}</a>
          ))}
          <button onClick={onLogout} style={{ background: 'none', border: 'none', color: 'var(--ink-4)', fontSize: 13, padding: '12px 0', cursor: 'pointer', marginTop: 16 }}>
            Cerrar sesión
          </button>
        </aside>

        <div>
          {sub === 'overview' && <AccountOverview user={user} orders={orders} navigate={navigate}/>}
          {sub === 'orders' && <AccountOrders orders={orders}/>}
          {sub === 'addresses' && <AccountAddresses user={user}/>}
          {sub === 'payments' && <AccountPayments user={user}/>}
          {sub === 'settings' && <AccountSettings user={user}/>}
        </div>
      </div>

      <style>{`
        @media (max-width: 720px) {
          .account-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
          .account-grid > aside { border-right: none !important; border-bottom: 1px solid var(--line-soft); padding-bottom: 16px; display: flex; flex-wrap: wrap; gap: 16px; }
        }
      `}</style>
    </main>
  );
}

function AccountOverview({ user, orders, navigate }) {
  const last = orders[0];
  return (
    <div className="col gap-6">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <div style={{ padding: 24, border: '1px solid var(--line)', borderRadius: 'var(--r-lg)' }}>
          <p className="t-mono" style={{ color: 'var(--ink-4)', marginBottom: 8 }}>MIEMBRO DESDE</p>
          <p className="t-display" style={{ fontSize: 28, margin: 0 }}>{user.memberSince || 'Hoy'}</p>
        </div>
        <div style={{ padding: 24, border: '1px solid var(--line)', borderRadius: 'var(--r-lg)' }}>
          <p className="t-mono" style={{ color: 'var(--ink-4)', marginBottom: 8 }}>PEDIDOS</p>
          <p className="t-display" style={{ fontSize: 28, margin: 0 }}>{orders.length}</p>
        </div>
      </div>

      <div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 16 }}>
          <h2 className="t-display" style={{ fontSize: 22, margin: 0 }}>Último pedido</h2>
          <a href="#" onClick={e => { e.preventDefault(); navigate('/account/orders'); }} style={{ fontSize: 13, textDecoration: 'underline' }}>Ver todos</a>
        </div>
        {last && <OrderCard order={last}/>}
      </div>
    </div>
  );
}

function OrderCard({ order }) {
  const statusLabel = { delivered: 'Entregado', 'in-transit': 'En camino', preparing: 'Preparando' }[order.status];
  return (
    <div style={{ padding: 24, border: '1px solid var(--line)', borderRadius: 'var(--r-lg)' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
        <div>
          <p className="t-mono" style={{ color: 'var(--ink-4)' }}>{order.id}</p>
          <p style={{ fontSize: 13, color: 'var(--ink-3)', margin: 0 }}>{new Date(order.date).toLocaleDateString('es-ES', { year: 'numeric', month: 'long', day: 'numeric' })}</p>
        </div>
        <div style={{ textAlign: 'right' }}>
          <span style={{ display: 'inline-block', padding: '4px 10px', borderRadius: 'var(--r-pill)', background: order.status === 'delivered' ? '#e8f5ec' : '#fef6e0', color: order.status === 'delivered' ? '#1d6e3a' : '#8a5d00', fontSize: 11, fontWeight: 500, letterSpacing: '0.04em' }}>{statusLabel}</span>
          <p style={{ fontSize: 16, fontWeight: 500, margin: '8px 0 0' }}>{window.ESCALA_FORMAT(order.total)}</p>
        </div>
      </div>
      <div style={{ borderTop: '1px solid var(--line-soft)', paddingTop: 16 }}>
        {order.items.map((it, i) => (
          <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', fontSize: 13, color: 'var(--ink-3)' }}>
            <span>{it.qty} × {it.product} · {it.color === 'white' ? 'Blanco' : 'Negro'} · {it.size}</span>
            <span>línea {it.line}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function AccountOrders({ orders }) {
  return (
    <div className="col gap-4">
      <h2 className="t-display" style={{ fontSize: 22, margin: 0 }}>Mis pedidos</h2>
      {orders.map(o => <OrderCard key={o.id} order={o}/>)}
    </div>
  );
}

function AccountAddresses({ user }) {
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
        <h2 className="t-display" style={{ fontSize: 22, margin: 0 }}>Direcciones</h2>
        <button className="btn btn--ghost btn--sm"><Icon.Plus/> Nueva dirección</button>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        {user.addresses.map(a => (
          <div key={a.id} style={{ padding: 20, border: '1px solid var(--line)', borderRadius: 'var(--r-lg)' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
              <span style={{ fontWeight: 500 }}>{a.label}</span>
              {a.default && <span className="t-mono" style={{ color: 'var(--ink-4)' }}>POR DEFECTO</span>}
            </div>
            <p style={{ fontSize: 13, color: 'var(--ink-3)', margin: 0, lineHeight: 1.6 }}>
              {a.line1}<br/>{a.zip} {a.city}<br/>{a.country}
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 16, fontSize: 12 }}>
              <a href="#" onClick={e => e.preventDefault()} style={{ textDecoration: 'underline' }}>Editar</a>
              <a href="#" onClick={e => e.preventDefault()} style={{ textDecoration: 'underline', color: 'var(--ink-4)' }}>Eliminar</a>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function AccountPayments({ user }) {
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
        <h2 className="t-display" style={{ fontSize: 22, margin: 0 }}>Métodos de pago</h2>
        <button className="btn btn--ghost btn--sm"><Icon.Plus/> Nueva tarjeta</button>
      </div>
      <p style={{ fontSize: 12, color: 'var(--ink-4)', marginBottom: 24 }}>
        Tus tarjetas se guardan tokenizadas en Stripe. Escala nunca ve los datos completos.
      </p>
      <div className="col gap-3">
        {user.cards.map(c => (
          <div key={c.id} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: 20, border: '1px solid var(--line)', borderRadius: 'var(--r-lg)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
              <div style={{ width: 48, height: 32, background: 'var(--ink)', borderRadius: 4, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--bg)', fontSize: 10, fontWeight: 600 }}>{c.brand.toUpperCase().slice(0,4)}</div>
              <div>
                <p style={{ margin: 0, fontWeight: 500 }}>•••• •••• •••• {c.last4}</p>
                <p style={{ margin: '2px 0 0', fontSize: 12, color: 'var(--ink-4)' }}>Caduca {c.exp}</p>
              </div>
            </div>
            {c.default && <span className="t-mono" style={{ color: 'var(--ink-4)' }}>POR DEFECTO</span>}
          </div>
        ))}
      </div>
    </div>
  );
}

function AccountSettings({ user }) {
  return (
    <div className="col gap-5">
      <h2 className="t-display" style={{ fontSize: 22, margin: 0 }}>Ajustes</h2>
      <div className="field"><label>Nombre</label><input className="input" defaultValue={user.name}/></div>
      <div className="field"><label>Email</label><input className="input" defaultValue={user.email}/></div>
      <div className="field"><label>Idioma</label>
        <select className="input"><option>Español</option><option>English</option><option>Français</option></select>
      </div>
      <div className="field"><label>Moneda</label>
        <select className="input"><option>EUR €</option><option>USD $</option><option>GBP £</option></select>
      </div>
      <div><button className="btn">Guardar cambios</button></div>
    </div>
  );
}

// ===================== CHECKOUT =====================
function CheckoutPage({ navigate }) {
  const lines = window.ESCALA_CART.get();
  const subtotal = window.ESCALA_CART.subtotal();
  const shipping = subtotal > 60 ? 0 : 4.90;
  const total = subtotal + shipping;
  const [coupon, setCoupon] = useStateA('');
  const [discount, setDiscount] = useStateA(0);

  const applyCoupon = () => {
    if (coupon.toUpperCase() === 'SEND10') setDiscount(subtotal * 0.10);
    else if (coupon.toUpperCase() === 'CRAG20') setDiscount(subtotal * 0.20);
    else { setDiscount(0); alert('Cupón no válido'); }
  };

  const placeOrder = () => {
    alert('Pago procesado con Stripe — pedido confirmado.');
    window.ESCALA_CART.clear();
    navigate('/account/orders');
  };

  if (lines.length === 0) {
    return (
      <main className="container" style={{ padding: '120px 32px', textAlign: 'center' }}>
        <h1 className="t-display" style={{ fontSize: 36 }}>Tu bolsa está vacía</h1>
        <button className="btn" onClick={() => navigate('/shop')} style={{ marginTop: 16 }}>Explorar tienda</button>
      </main>
    );
  }

  return (
    <main className="container" style={{ padding: '48px 32px 80px' }}>
      <p className="t-eyebrow" style={{ marginBottom: 8 }}>Pago seguro · Stripe</p>
      <h1 className="t-display" style={{ fontSize: 'clamp(36px, 6vw, 56px)', margin: 0, marginBottom: 40 }}>Checkout</h1>

      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64 }} className="checkout-grid">
        <div className="col gap-6">
          {/* Contact */}
          <section>
            <h3 className="t-display" style={{ fontSize: 20, margin: '0 0 16px' }}>Contacto</h3>
            <input className="input" placeholder="Email" type="email"/>
          </section>
          {/* Shipping */}
          <section>
            <h3 className="t-display" style={{ fontSize: 20, margin: '0 0 16px' }}>Envío</h3>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              <input className="input" placeholder="Nombre"/>
              <input className="input" placeholder="Apellidos"/>
              <input className="input" placeholder="Dirección" style={{ gridColumn: '1 / -1' }}/>
              <input className="input" placeholder="Ciudad"/>
              <input className="input" placeholder="Código postal"/>
              <select className="input" style={{ gridColumn: '1 / -1' }}>
                <option>España</option><option>Portugal</option><option>Francia</option>
              </select>
            </div>
          </section>
          {/* Payment */}
          <section>
            <h3 className="t-display" style={{ fontSize: 20, margin: '0 0 16px' }}>Pago</h3>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 16, border: '1px solid var(--line)', borderRadius: 'var(--r-md)', background: 'var(--bg-soft)' }}>
              <Icon.Stripe/>
              <span style={{ fontSize: 13 }}>Pago seguro mediante Stripe</span>
              <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--ink-4)' }}>SSL · 3D Secure</span>
            </div>
            <div className="col gap-3" style={{ marginTop: 12 }}>
              <input className="input" placeholder="Número de tarjeta"/>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <input className="input" placeholder="MM / AA"/>
                <input className="input" placeholder="CVC"/>
              </div>
            </div>
          </section>
        </div>

        <aside style={{ alignSelf: 'start', padding: 24, border: '1px solid var(--line)', borderRadius: 'var(--r-lg)', background: 'var(--bg-soft)', position: 'sticky', top: 90 }}>
          <h3 className="t-display" style={{ fontSize: 18, margin: '0 0 16px' }}>Resumen</h3>
          <div className="col gap-3" style={{ borderBottom: '1px solid var(--line-soft)', paddingBottom: 16, marginBottom: 16 }}>
            {lines.map((l, i) => (
              <div key={i} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13 }}>
                <span style={{ color: 'var(--ink-3)' }}>{l.qty} × {l.productName} · {l.size}</span>
                <span>{window.ESCALA_FORMAT(l.price * l.qty)}</span>
              </div>
            ))}
          </div>
          <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
            <input className="input" placeholder="Cupón" value={coupon} onChange={e => setCoupon(e.target.value)} style={{ padding: '10px 14px' }}/>
            <button className="btn btn--ghost btn--sm" onClick={applyCoupon}>Aplicar</button>
          </div>
          <div className="col gap-2" style={{ fontSize: 13, marginBottom: 16 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', color: 'var(--ink-3)' }}>
              <span>Subtotal</span><span>{window.ESCALA_FORMAT(subtotal)}</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', color: 'var(--ink-3)' }}>
              <span>Envío</span><span>{shipping === 0 ? 'Gratis' : window.ESCALA_FORMAT(shipping)}</span>
            </div>
            {discount > 0 && (
              <div style={{ display: 'flex', justifyContent: 'space-between', color: '#1d6e3a' }}>
                <span>Descuento</span><span>−{window.ESCALA_FORMAT(discount)}</span>
              </div>
            )}
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 16, fontWeight: 500, paddingTop: 8, borderTop: '1px solid var(--line-soft)' }}>
              <span>Total</span><span>{window.ESCALA_FORMAT(total - discount)}</span>
            </div>
          </div>
          <button className="btn btn--full btn--lg" onClick={placeOrder}>
            Pagar · {window.ESCALA_FORMAT(total - discount)}
          </button>
          <p style={{ fontSize: 11, color: 'var(--ink-4)', textAlign: 'center', marginTop: 12 }}>
            Cupones válidos: SEND10 · CRAG20
          </p>
        </aside>
      </div>

      <style>{`
        @media (max-width: 860px) {
          .checkout-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </main>
  );
}

// ===================== ABOUT =====================
function AboutPage() {
  return (
    <main>
      <section className="hero">
        <div className="aurora"><div className="aurora-3"/><div className="aurora-4"/></div>
        <div className="container hero__inner" style={{ textAlign: 'center' }}>
          <p className="t-eyebrow" style={{ marginBottom: 24 }}>Sobre Escala</p>
          <h1 className="t-display" style={{ fontSize: 'clamp(48px, 9vw, 132px)', margin: 0, lineHeight: 0.95 }}>
            Una camiseta.<br/>Cuatro cortes.<br/>Cero ruido.
          </h1>
        </div>
      </section>
      <section className="section">
        <div className="container" style={{ maxWidth: 720, margin: '0 auto', fontSize: 18, lineHeight: 1.7, color: 'var(--ink-2)' }}>
          <p>
            Escala nace de una frustración compartida: la ropa de escalada o es ruidosa,
            con logos enormes y colores que gritan, o está pensada para una pasarela
            que nunca pisa la roca.
          </p>
          <p>
            Por eso hicimos cuatro camisetas. Una manga corta, en cuatro cortes —
            performance, relajado, ceñido y heavyweight — en blanco o negro.
            Y una sola línea de color en la espalda, en cuatro tonos para elegir.
          </p>
          <p>
            Hechas en Portugal con tejido reciclado certificado. Pensadas para
            durar tantas temporadas como tus pies de gato.
          </p>
        </div>
      </section>
      <section className="section" style={{ background: 'var(--bg-soft)' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 32 }}>
            {[
              ['01', 'Diseño', 'Barcelona — un equipo pequeño, opiniones fuertes.'],
              ['02', 'Producción', 'Fábrica familiar en Vila Nova de Famalicão, Portugal.'],
              ['03', 'Materiales', 'Poliéster reciclado certificado y algodón orgánico GOTS.'],
              ['04', 'Logística', 'Envíos consolidados desde Lisboa.'],
            ].map(([n, t, d]) => (
              <div key={n}>
                <p className="t-mono" style={{ color: 'var(--ink-4)', marginBottom: 12 }}>{n}</p>
                <h3 className="t-display" style={{ fontSize: 20, margin: '0 0 8px' }}>{t}</h3>
                <p style={{ fontSize: 14, color: 'var(--ink-3)', margin: 0, lineHeight: 1.5 }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

// ===================== LEGAL =====================
function LegalPage() {
  return (
    <main className="container" style={{ padding: '64px 32px', maxWidth: 760 }}>
      <p className="t-eyebrow" style={{ marginBottom: 12 }}>Legal</p>
      <h1 className="t-display" style={{ fontSize: 'clamp(36px, 6vw, 56px)', margin: 0, marginBottom: 40 }}>Términos & privacidad</h1>
      <div className="col gap-6" style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.7 }}>
        <section>
          <h2 className="t-display" style={{ fontSize: 22, marginBottom: 8 }}>1. Datos del titular</h2>
          <p>Escala Apparel S.L. — CIF B12345678 — Carrer de la Riera 14, 08003 Barcelona — contacto@escala.shop</p>
        </section>
        <section>
          <h2 className="t-display" style={{ fontSize: 22, marginBottom: 8 }}>2. Tratamiento de datos</h2>
          <p>Tratamos tus datos para gestionar pedidos, contestarte si nos escribes y enviarte la newsletter si te has suscrito. Base legal: ejecución de contrato y consentimiento. No vendemos tus datos a terceros.</p>
        </section>
        <section>
          <h2 className="t-display" style={{ fontSize: 22, marginBottom: 8 }}>3. Pagos</h2>
          <p>Los pagos se procesan a través de Stripe. Escala nunca almacena los datos completos de tu tarjeta — sólo un identificador tokenizado.</p>
        </section>
        <section>
          <h2 className="t-display" style={{ fontSize: 22, marginBottom: 8 }}>4. Devoluciones</h2>
          <p>Tienes 30 días desde la entrega para devolver cualquier producto sin estrenar y con etiqueta. Reembolso en el mismo medio de pago en 5–10 días.</p>
        </section>
        <section>
          <h2 className="t-display" style={{ fontSize: 22, marginBottom: 8 }}>5. Cookies</h2>
          <p>Usamos cookies técnicas (sesión, carrito) y analíticas anónimas. Puedes configurarlas desde tu navegador.</p>
        </section>
      </div>
    </main>
  );
}

Object.assign(window, { LoginPage, AccountPage, CheckoutPage, AboutPage, LegalPage });