// Pages: Home, Shop, ProductDetail, Cart, Checkout, Confirmation, Admin

const { useState: useStateP, useEffect: useEffectP, useMemo, useRef: useRefP } = React;

// =============== HOME ===============
function HomePage({ data, currency, rates, setCurrency, hero, onOpenProduct, onAdd, wish, onFav, onGoShop, points }) {
  return (
    <>
      <Hero variant={hero} onCta={onGoShop} brand={data.brand} />

      <div className="section" style={{ paddingBottom: 0 }}>
        <div className="section-head">
          <div>
            <div className="sub">Categorías</div>
            <h2>Explorá por ritual</h2>
          </div>
        </div>
      </div>
      <CategoryRail cats={data.categories} active="all" onChange={() => onGoShop()} />

      <div className="section">
        <div className="section-head">
          <div>
            <div className="sub">Más buscados</div>
            <h2>Lo que enamora</h2>
          </div>
          <a href="#" onClick={(e) => { e.preventDefault(); onGoShop(); }}>Ver todo →</a>
        </div>
        <div className="grid-2">
          {data.products.filter(p => p.isBest).slice(0, 4).map(p => (
            <ProductCard key={p.id} product={p} currency={currency} rates={rates}
              onOpen={onOpenProduct} onAdd={onAdd} onFav={onFav} isFav={wish.has(p.id)} />
          ))}
        </div>
      </div>

      <div className="section">
        <div className="section-head">
          <div>
            <div className="sub">Esta semana</div>
            <h2>Novedades</h2>
          </div>
        </div>
      </div>
      <BannerRail />

      <LoyaltyCard points={points} />

      <div className="section" style={{ paddingTop: 8 }}>
        <div className="section-head">
          <div>
            <div className="sub">Recién llegado</div>
            <h2>Para tu mesita de luz</h2>
          </div>
        </div>
        <div className="grid-2">
          {data.products.filter(p => p.isNew).slice(0, 4).map(p => (
            <ProductCard key={p.id} product={p} currency={currency} rates={rates}
              onOpen={onOpenProduct} onAdd={onAdd} onFav={onFav} isFav={wish.has(p.id)} />
          ))}
        </div>
      </div>

      <div style={{ padding: "30px 18px 8px", textAlign: "center", color: "var(--ink-3)", fontSize: 11, fontFamily: "var(--mono)", letterSpacing: "0.1em" }}>
        mima edit · Belleza elegida con cuidado · 2026
      </div>
    </>
  );
}

// =============== SHOP / CATALOG ===============
function ShopPage({ data, currency, rates, onOpenProduct, onAdd, wish, onFav, filter, setFilter }) {
  const [query, setQuery] = useStateP("");
  const [sort, setSort] = useStateP("relevant");
  const [loading, setLoading] = useStateP(true);

  useEffectP(() => {
    const t = setTimeout(() => setLoading(false), 700);
    return () => clearTimeout(t);
  }, []);

  const filtered = useMemo(() => {
    let arr = data.products;
    if (filter !== "all") arr = arr.filter(p => p.category === filter);
    if (query) {
      const q = query.toLowerCase();
      arr = arr.filter(p => p.name.toLowerCase().includes(q) || p.tagline.toLowerCase().includes(q));
    }
    if (sort === "price-asc") arr = [...arr].sort((a, b) => a.price - b.price);
    if (sort === "price-desc") arr = [...arr].sort((a, b) => b.price - a.price);
    if (sort === "new") arr = [...arr].sort((a, b) => (b.isNew ? 1 : 0) - (a.isNew ? 1 : 0));
    return arr;
  }, [data.products, filter, query, sort]);

  return (
    <>
      <div className="section" style={{ paddingBottom: 8 }}>
        <div className="section-head" style={{ marginBottom: 8 }}>
          <div>
            <div className="sub">La tienda</div>
            <h2>Todos los productos</h2>
          </div>
        </div>
      </div>
      <div className="search-bar">
        <I.Search size={16} />
        <input placeholder="Buscar perfumes, cremas, sérums…" value={query} onChange={(e) => setQuery(e.target.value)} />
      </div>
      <CategoryRail cats={data.categories} active={filter} onChange={setFilter} />
      <div className="filter-row">
        <button className={"filter-pill" + (sort === "relevant" ? " active" : "")} onClick={() => setSort("relevant")}>
          <I.Sliders size={12} /> Relevancia
        </button>
        <button className={"filter-pill" + (sort === "price-asc" ? " active" : "")} onClick={() => setSort("price-asc")}>↑ Precio</button>
        <button className={"filter-pill" + (sort === "price-desc" ? " active" : "")} onClick={() => setSort("price-desc")}>↓ Precio</button>
        <button className={"filter-pill" + (sort === "new" ? " active" : "")} onClick={() => setSort("new")}>Nuevo</button>
      </div>

      <div className="grid-2" style={{ paddingBottom: 24 }}>
        {loading
          ? Array.from({ length: 6 }).map((_, i) => (
            <div key={i} className="product-card">
              <div className="pc-img shimmer" />
              <div className="pc-meta">
                <div className="shimmer" style={{ height: 14, borderRadius: 4, marginBottom: 6, width: "80%" }} />
                <div className="shimmer" style={{ height: 10, borderRadius: 4, width: "55%" }} />
              </div>
            </div>
          ))
          : filtered.length === 0
            ? <div className="empty" style={{ gridColumn: "1 / -1" }}>
              <div className="icon-wrap"><I.Search size={28} /></div>
              <h4>Sin resultados</h4>
              <p>Probá con otros términos o categorías.</p>
            </div>
            : filtered.map(p => (
              <ProductCard key={p.id} product={p} currency={currency} rates={rates}
                onOpen={onOpenProduct} onAdd={onAdd} onFav={onFav} isFav={wish.has(p.id)} />
            ))
        }
      </div>
    </>
  );
}

// =============== PRODUCT DETAIL ===============
function ProductDetailPage({ product, data, currency, rates, setCurrency, onBack, onAdd, isFav, onFav, onOpenProduct }) {
  const [qty, setQty] = useStateP(1);
  const [thumb, setThumb] = useStateP(0);
  const ctaRef = useRefP(null);
  const out = product.stock === 0;
  const low = product.stock > 0 && product.stock < 10;

  const related = data.products.filter(p => p.category === product.category && p.id !== product.id).slice(0, 4);

  return (
    <div className="page">
      <div className="body-scroll" style={{ paddingBottom: 110 }}>
        <div className="pdp-hero">
          <div className="pdp-hero-bg" style={productTones(product)} />
          <div className="bottle" />
          <button className="pdp-back" onClick={onBack} aria-label="Atrás"><I.Back /></button>
          <button className="pdp-fav" onClick={() => onFav(product.id)} aria-label="Favorito">
            <I.Heart size={16} fill={isFav ? "var(--terra-500)" : "none"} />
          </button>
          <div className="pdp-thumbs">
            {[0, 1, 2].map(i => (
              <button key={i} className={"thumb" + (i === thumb ? " active" : "")} onClick={() => setThumb(i)}
                style={{ background: `linear-gradient(${160 + i * 40}deg, ${product.tones[0]}, ${product.tones[1]})` }}
              />
            ))}
          </div>
        </div>

        <div className="pdp-body">
          <div className="pdp-cat">{data.categories.find(c => c.id === product.category)?.label}</div>
          <h1 className="pdp-name">{product.name}</h1>
          <div className="pdp-tagline">{product.tagline}</div>

          <div className="pdp-price-row">
            <span className="pdp-price">{formatPrice(product.price, currency, rates)}</span>
            {product.compareAt && <span className="pdp-compare">{formatPrice(product.compareAt, currency, rates)}</span>}
            <div className="pdp-currency">
              <button className={currency === "ARS" ? "active" : ""} onClick={() => setCurrency("ARS")}>ARS</button>
              <button className={currency === "USD" ? "active" : ""} onClick={() => setCurrency("USD")}>USD</button>
            </div>
          </div>

          <div className="pdp-section">
            <h3>Descripción</h3>
            <p className="pdp-desc">{product.description}</p>
          </div>

          <div className="pdp-section">
            <h3>{product.category === "perfumeria" ? "Notas" : "Activos"}</h3>
            <div className="notes-list">
              {product.notes.map((n, i) => (
                <div className="note-item" key={i}>
                  <span className="dot" />
                  <span>{n}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="qty-row">
            <div className="qty">
              <button onClick={() => setQty(q => Math.max(1, q - 1))} disabled={qty <= 1}><I.Minus /></button>
              <span className="val">{qty}</span>
              <button onClick={() => setQty(q => Math.min(product.stock, q + 1))} disabled={qty >= product.stock || out}><I.Plus /></button>
            </div>
            {out
              ? <span className="stock low">SIN STOCK · TE AVISAMOS CUANDO VUELVA</span>
              : low
                ? <span className="stock low">QUEDAN {product.stock} UNIDADES</span>
                : <span className="stock">EN STOCK · ENVÍO 24-72 HS</span>
            }
          </div>

          {out && (
            <button className="btn btn-ghost btn-block" style={{ marginBottom: 20 }}>
              <I.Bell size={14} /> Avisarme cuando vuelva
            </button>
          )}

          <div className="pdp-section">
            <h3>Reseñas · {product.rating} ★ ({product.reviews})</h3>
            {data.reviews.slice(0, 3).map(r => (
              <div className="review" key={r.id}>
                <div className="review-head">
                  <span className="review-author">{r.author}</span>
                  <span className="review-date">{r.date}</span>
                </div>
                <div className="review-stars">{"★".repeat(r.rating)}{"☆".repeat(5 - r.rating)}</div>
                <p className="review-text">{r.text}</p>
              </div>
            ))}
          </div>

          {related.length > 0 && (
            <div className="pdp-section" style={{ marginLeft: -22, marginRight: -22, paddingLeft: 0, paddingRight: 0 }}>
              <h3 style={{ paddingLeft: 22 }}>También te puede gustar</h3>
              <div className="grid-2" style={{ paddingLeft: 22, paddingRight: 22 }}>
                {related.slice(0, 2).map(p => (
                  <ProductCard key={p.id} product={p} currency={currency} rates={rates}
                    onOpen={onOpenProduct} onAdd={onAdd} onFav={onFav} isFav={false} />
                ))}
              </div>
            </div>
          )}
        </div>
      </div>

      <div className="pdp-cta-bar" ref={ctaRef}>
        <div className="price-mini">
          <span>Total</span>
          <b>{formatPrice(product.price * qty, currency, rates)}</b>
        </div>
        <button className="btn btn-primary btn-lg btn-block" disabled={out}
          onClick={(e) => onAdd(product, ctaRef.current, qty)}
          style={{ flex: 1 }}>
          <I.Bag size={16} /> Agregar al carrito
        </button>
      </div>
    </div>
  );
}

// =============== CART SHEET ===============
function CartSheet({ items, products, currency, rates, onClose, onQty, onRemove, onCheckout, coupon, setCoupon }) {
  const lines = items.map(i => ({ ...i, product: products.find(p => p.id === i.id) })).filter(l => l.product);
  const subtotal = lines.reduce((s, l) => s + l.product.price * l.qty, 0);
  const discount = coupon === "MIMA10" ? subtotal * 0.10 : 0;
  const shipping = subtotal > 0 && subtotal < 35000 ? 4500 : 0;
  const total = subtotal - discount + shipping;
  const empty = lines.length === 0;

  return (
    <>
      <div className="sheet-backdrop" onClick={onClose} />
      <div className="sheet">
        <div className="handle" />
        <div className="sheet-head">
          <h3>Tu carrito {!empty && <span style={{ color: "var(--ink-3)", fontFamily: "var(--sans)", fontSize: 13 }}>· {lines.length} {lines.length === 1 ? "ítem" : "ítems"}</span>}</h3>
          <button className="close-btn" onClick={onClose}><I.Close size={16} /></button>
        </div>
        <div className="sheet-body">
          {empty
            ? <div className="empty" style={{ paddingTop: 30 }}>
              <div className="icon-wrap"><I.Empty size={32} /></div>
              <h4>Tu carrito está vacío</h4>
              <p>Sumá productos y volvé acá.</p>
              <button className="btn btn-primary" onClick={onClose}>Seguir comprando</button>
            </div>
            : lines.map(l => (
              <div className="cart-item" key={l.id}>
                <div className="img" style={productTones(l.product)} />
                <div className="meta">
                  <div className="nm">{l.product.name}</div>
                  <div className="tg">{l.product.tagline}</div>
                  <div className="pr">{formatPrice(l.product.price * l.qty, currency, rates)}</div>
                </div>
                <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 6 }}>
                  <button onClick={() => onRemove(l.id)} style={{ color: "var(--ink-4)" }}><I.Trash /></button>
                  <div className="qty-mini">
                    <button onClick={() => onQty(l.id, l.qty - 1)}><I.Minus size={12} /></button>
                    <span className="v">{l.qty}</span>
                    <button onClick={() => onQty(l.id, l.qty + 1)}><I.Plus size={12} /></button>
                  </div>
                </div>
              </div>
            ))
          }
        </div>
        {!empty && (
          <div className="sheet-foot">
            <div className="coupon">
              <input placeholder="Cupón (probá MIMA10)" value={coupon} onChange={(e) => setCoupon(e.target.value.toUpperCase())} />
              <button className="btn btn-ghost btn-sm">Aplicar</button>
            </div>
            <div className="totals">
              <div className="row"><span>Subtotal</span><span>{formatPrice(subtotal, currency, rates)}</span></div>
              {discount > 0 && <div className="row" style={{ color: "var(--sage-700)" }}><span>Cupón MIMA10</span><span>− {formatPrice(discount, currency, rates)}</span></div>}
              <div className="row"><span>Envío {subtotal >= 35000 && <small style={{ color: "var(--sage-700)" }}>(gratis)</small>}</span><span>{shipping === 0 ? "Gratis" : formatPrice(shipping, currency, rates)}</span></div>
              <div className="row total"><span>Total</span><span>{formatPrice(total, currency, rates)}</span></div>
            </div>
            <button className="btn btn-primary btn-lg btn-block" onClick={onCheckout}>Finalizar compra</button>
          </div>
        )}
      </div>
    </>
  );
}

// =============== CHECKOUT ===============
function CheckoutPage({ items, products, currency, rates, onBack, onPlaceOrder, coupon }) {
  const [step, setStep] = useStateP(1);
  const [shippingMethod, setShippingMethod] = useStateP("envio");
  const [paymentMethod, setPaymentMethod] = useStateP("mp");
  const [form, setForm] = useStateP({
    email: "", nombre: "", telefono: "",
    direccion: "", ciudad: "", provincia: "Buenos Aires", cp: "",
  });

  const lines = items.map(i => ({ ...i, product: products.find(p => p.id === i.id) })).filter(l => l.product);
  const subtotal = lines.reduce((s, l) => s + l.product.price * l.qty, 0);
  const discount = coupon === "MIMA10" ? subtotal * 0.10 : 0;
  const shippingCost = shippingMethod === "envio" ? (subtotal >= 35000 ? 0 : 4500) : shippingMethod === "nacional" ? 6800 : 0;
  const total = subtotal - discount + shippingCost;

  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));

  return (
    <div className="page">
      <header className="topbar">
        <button className="icon-btn" onClick={() => step > 1 ? setStep(step - 1) : onBack()}><I.Back /></button>
        <div className="brand-mark" style={{ fontSize: 14 }}>Finalizar compra</div>
        <div style={{ width: 38 }} />
      </header>
      <div className="body-scroll" style={{ paddingBottom: 120 }}>
        <div className="checkout">
          <div className="steps">
            <span className={"step" + (step === 1 ? " active" : step > 1 ? " done" : "")}>
              <span className="num">{step > 1 ? <I.Check size={12} /> : "1"}</span> Datos
            </span>
            <span className="sep" />
            <span className={"step" + (step === 2 ? " active" : step > 2 ? " done" : "")}>
              <span className="num">{step > 2 ? <I.Check size={12} /> : "2"}</span> Envío
            </span>
            <span className="sep" />
            <span className={"step" + (step === 3 ? " active" : "")}>
              <span className="num">3</span> Pago
            </span>
          </div>

          {step === 1 && (
            <>
              <h3>¿Cómo te contactamos?</h3>
              <div className="field">
                <label>Email</label>
                <input value={form.email} onChange={(e) => update("email", e.target.value)} placeholder="vos@email.com" type="email" />
              </div>
              <div className="field">
                <label>Nombre completo</label>
                <input value={form.nombre} onChange={(e) => update("nombre", e.target.value)} placeholder="María Pérez" />
              </div>
              <div className="field">
                <label>Teléfono</label>
                <input value={form.telefono} onChange={(e) => update("telefono", e.target.value)} placeholder="+54 9 11 ..." />
              </div>
            </>
          )}

          {step === 2 && (
            <>
              <h3>¿Cómo lo recibís?</h3>
              <div className="option-card" onClick={() => setShippingMethod("envio")} style={{ borderColor: shippingMethod === "envio" ? "var(--sage-700)" : "var(--line)" }}>
                <div className="radio" style={{ borderColor: shippingMethod === "envio" ? "var(--sage-700)" : "var(--line)" }}>
                  {shippingMethod === "envio" && <span style={{ position: "absolute", inset: 3, borderRadius: "50%", background: "var(--sage-700)" }} />}
                </div>
                <div className="opt-meta"><div className="nm">Envío a domicilio · CABA / GBA</div><div className="sb">24 a 72 hs hábiles</div></div>
                <span className="opt-price">{subtotal >= 35000 ? "Gratis" : formatPrice(4500, currency, rates)}</span>
              </div>
              <div className="option-card" onClick={() => setShippingMethod("nacional")} style={{ borderColor: shippingMethod === "nacional" ? "var(--sage-700)" : "var(--line)" }}>
                <div className="radio" style={{ borderColor: shippingMethod === "nacional" ? "var(--sage-700)" : "var(--line)" }}>
                  {shippingMethod === "nacional" && <span style={{ position: "absolute", inset: 3, borderRadius: "50%", background: "var(--sage-700)" }} />}
                </div>
                <div className="opt-meta"><div className="nm">Envío nacional · Andreani / OCA</div><div className="sb">3 a 7 días hábiles</div></div>
                <span className="opt-price">{formatPrice(6800, currency, rates)}</span>
              </div>
              <div className="option-card" onClick={() => setShippingMethod("retiro")} style={{ borderColor: shippingMethod === "retiro" ? "var(--sage-700)" : "var(--line)" }}>
                <div className="radio" style={{ borderColor: shippingMethod === "retiro" ? "var(--sage-700)" : "var(--line)" }}>
                  {shippingMethod === "retiro" && <span style={{ position: "absolute", inset: 3, borderRadius: "50%", background: "var(--sage-700)" }} />}
                </div>
                <div className="opt-meta"><div className="nm">Retiro en showroom · Palermo</div><div className="sb">Lu a Vi 11 a 19 hs</div></div>
                <span className="opt-price">Gratis</span>
              </div>

              {shippingMethod !== "retiro" && (
                <>
                  <h3 style={{ marginTop: 22 }}>Dirección de entrega</h3>
                  <div className="field">
                    <label>Calle y número</label>
                    <input value={form.direccion} onChange={(e) => update("direccion", e.target.value)} placeholder="Av. Santa Fe 1234, 4°B" />
                  </div>
                  <div className="field-row">
                    <div className="field">
                      <label>Ciudad</label>
                      <input value={form.ciudad} onChange={(e) => update("ciudad", e.target.value)} placeholder="CABA" />
                    </div>
                    <div className="field">
                      <label>CP</label>
                      <input value={form.cp} onChange={(e) => update("cp", e.target.value)} placeholder="1425" />
                    </div>
                  </div>
                  <div className="field">
                    <label>Provincia</label>
                    <select value={form.provincia} onChange={(e) => update("provincia", e.target.value)}>
                      <option>Buenos Aires</option><option>CABA</option><option>Córdoba</option>
                      <option>Santa Fe</option><option>Mendoza</option><option>Tucumán</option><option>Otra</option>
                    </select>
                  </div>
                </>
              )}
            </>
          )}

          {step === 3 && (
            <>
              <h3>Método de pago</h3>
              {[
                { id: "mp", nm: "Mercado Pago", sb: "Tarjetas, débito, dinero en cuenta" },
                { id: "transfer", nm: "Transferencia bancaria", sb: "5% off · te enviamos los datos" },
                { id: "tarjeta", nm: "Link de pago tarjeta", sb: "Hasta 6 cuotas sin interés" },
                { id: "efectivo", nm: "Efectivo", sb: "Solo retiro en showroom" },
                { id: "wpp", nm: "Coordinar por WhatsApp", sb: "Te escribimos para terminar" },
              ].map(m => (
                <div key={m.id} className={"option-card" + (paymentMethod === m.id ? " selected" : "")}
                  onClick={() => setPaymentMethod(m.id)}>
                  <div className="radio" />
                  <div className="opt-meta"><div className="nm">{m.nm}</div><div className="sb">{m.sb}</div></div>
                </div>
              ))}

              <h3 style={{ marginTop: 22 }}>Resumen</h3>
              <div style={{ background: "var(--cream-2)", borderRadius: "var(--r-md)", padding: 14, fontSize: 13 }}>
                <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}><span>Subtotal</span><span>{formatPrice(subtotal, currency, rates)}</span></div>
                {discount > 0 && <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6, color: "var(--sage-700)" }}><span>Cupón MIMA10</span><span>− {formatPrice(discount, currency, rates)}</span></div>}
                <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}><span>Envío</span><span>{shippingCost === 0 ? "Gratis" : formatPrice(shippingCost, currency, rates)}</span></div>
                <div style={{ display: "flex", justifyContent: "space-between", paddingTop: 8, borderTop: "1px dashed var(--line)", fontWeight: 600, fontSize: 15 }}><span>Total</span><span>{formatPrice(total, currency, rates)}</span></div>
              </div>
            </>
          )}
        </div>
      </div>

      <div className="sticky-cta">
        <div className="price-mini">
          <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.05em" }}>TOTAL</span>
          <b style={{ fontSize: 16, fontWeight: 600 }}>{formatPrice(total, currency, rates)}</b>
        </div>
        <button className="btn btn-primary btn-lg" style={{ flex: 1 }}
          onClick={() => step < 3 ? setStep(step + 1) : onPlaceOrder({ form, shippingMethod, paymentMethod, total })}>
          {step < 3 ? "Continuar" : "Confirmar pedido"}
          <I.ChevR />
        </button>
      </div>
    </div>
  );
}

// =============== CONFIRMATION ===============
function ConfirmationPage({ orderId, onHome }) {
  return (
    <div className="page">
      <div className="confirmation">
        <div className="ok-circle"><I.CheckBig size={36} /></div>
        <h2>¡Listo!</h2>
        <p>Recibimos tu pedido y ya está en preparación.<br />Te enviamos el detalle por email.</p>
        <div className="order-id">PEDIDO #{orderId}</div>
        <button className="btn btn-primary btn-lg btn-block" onClick={onHome}>Volver a la tienda</button>
        <button className="btn btn-ghost btn-block" style={{ marginTop: 8 }}>Seguir mi pedido</button>
      </div>
    </div>
  );
}

// =============== WISHLIST ===============
function WishlistPage({ data, currency, rates, wish, onFav, onOpenProduct, onAdd }) {
  const items = data.products.filter(p => wish.has(p.id));
  return (
    <>
      <div className="section" style={{ paddingBottom: 14 }}>
        <div className="section-head">
          <div>
            <div className="sub">Tu lista</div>
            <h2>Favoritos</h2>
          </div>
          <span style={{ fontSize: 11, fontFamily: "var(--mono)", color: "var(--ink-3)", letterSpacing: "0.06em" }}>
            {items.length} GUARDADOS
          </span>
        </div>
      </div>
      {items.length === 0
        ? <div className="empty">
          <div className="icon-wrap"><I.Heart size={28} /></div>
          <h4>Aún no guardaste nada</h4>
          <p>Tocá el corazón para guardar productos.</p>
        </div>
        : <div className="grid-2" style={{ paddingBottom: 24 }}>
          {items.map(p => (
            <ProductCard key={p.id} product={p} currency={currency} rates={rates}
              onOpen={onOpenProduct} onAdd={onAdd} onFav={onFav} isFav={true} />
          ))}
        </div>
      }
    </>
  );
}

// =============== ACCOUNT ===============
function AccountPage({ points, onOpenAdmin, currency, setCurrency }) {
  return (
    <>
      <div className="section">
        <div className="section-head">
          <div>
            <div className="sub">Hola</div>
            <h2>Magdalena Ríos</h2>
          </div>
          <div style={{ width: 48, height: 48, borderRadius: "50%", background: "linear-gradient(135deg, var(--terra-300), var(--terra-500))", display: "grid", placeItems: "center", color: "var(--cream)", fontFamily: "var(--serif)", fontSize: 20 }}>M</div>
        </div>
      </div>
      <LoyaltyCard points={points} />
      <div style={{ padding: "8px 18px" }}>
        {[
          { i: I.Bag, l: "Mis pedidos", s: "3 activos" },
          { i: I.Heart, l: "Favoritos", s: "" },
          { i: I.Bell, l: "Notificaciones", s: "Avisos de stock activos" },
          { i: I.Settings, l: "Datos y direcciones", s: "" },
        ].map((it, i) => {
          const Ic = it.i;
          return (
            <button key={i} style={{ width: "100%", display: "flex", alignItems: "center", gap: 14, padding: "14px 4px", borderBottom: "1px solid var(--line-2)", textAlign: "left" }}>
              <div style={{ width: 36, height: 36, borderRadius: 10, background: "var(--cream-2)", display: "grid", placeItems: "center", color: "var(--sage-700)" }}><Ic size={16} /></div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 500 }}>{it.l}</div>
                {it.s && <div style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 2 }}>{it.s}</div>}
              </div>
              <I.ChevR size={16} />
            </button>
          );
        })}

        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "14px 4px", borderBottom: "1px solid var(--line-2)" }}>
          <div style={{ fontSize: 14, fontWeight: 500 }}>Moneda</div>
          <div className="pdp-currency">
            <button className={currency === "ARS" ? "active" : ""} onClick={() => setCurrency("ARS")}>ARS</button>
            <button className={currency === "USD" ? "active" : ""} onClick={() => setCurrency("USD")}>USD</button>
          </div>
        </div>

        <button onClick={onOpenAdmin} style={{ width: "100%", marginTop: 18, padding: 14, background: "var(--ink)", color: "var(--cream)", borderRadius: "var(--r-md)", display: "flex", alignItems: "center", gap: 12, justifyContent: "center" }}>
          <I.Shop size={16} /> Panel de admin (vendedora)
        </button>
        <p style={{ textAlign: "center", marginTop: 14, fontSize: 11, color: "var(--ink-3)", fontFamily: "var(--mono)", letterSpacing: "0.08em" }}>mima edit · v1.0</p>
      </div>
    </>
  );
}

Object.assign(window, { HomePage, ShopPage, ProductDetailPage, CartSheet, CheckoutPage, ConfirmationPage, WishlistPage, AccountPage });