// pages-account.jsx — Account, Manifesto, About, Contact

const { useState: useA1 } = React;

/* ============================ ACCOUNT ============================ */
function AccountPage() {
  const { goto, params, currentUser } = useShop();
  const [tab, setTab] = useA1(params.tab || "pedidos");
  const user = currentUser || { firstName: "—", fullName: "—", email: "—" };

  return (
    <main>
      <div className="wrap" style={{ paddingTop: 32 }}>
        <div className="mono muted">
          <span onClick={() => goto("home")} style={{ cursor: "pointer" }}>home</span> / minha conta
        </div>
      </div>

      <section className="section" style={{ paddingTop: 24 }}>
        <div className="wrap">
          <div className="row" style={{ justifyContent: "space-between", alignItems: "end", marginBottom: 32, flexWrap: "wrap", gap: 16 }}>
            <div>
              <h1 className="t-xl">olá, {user.firstName}.</h1>
              <div style={{ fontFamily: "var(--f-hand)", fontSize: 24, color: "var(--brand)" }}>Deus abençoe seu dia.</div>
            </div>
            <div className="mono muted">cliente desde mai 2026</div>
          </div>

          <div className="tabs">
            {[
              { id: "pedidos", label: "Pedidos", icon: "box" },
              { id: "wish", label: "Desejos", icon: "heart" },
              { id: "dados", label: "Meus dados", icon: "user" },
              { id: "enderecos", label: "Endereços", icon: "pin" },
              { id: "cupons", label: "Cupons", icon: "tag" },
            ].map((t) => (
              <button key={t.id} className={"t " + (tab === t.id ? "active" : "")} onClick={() => setTab(t.id)}>
                <span className="row gap-2"><Icon name={t.icon} size={14} /> {t.label}</span>
              </button>
            ))}
          </div>

          {tab === "pedidos" && <OrdersTab />}
          {tab === "wish" && <WishlistInline />}
          {tab === "dados" && <ProfileTab />}
          {tab === "enderecos" && <AddressesTab />}
          {tab === "cupons" && <CouponsTab />}
        </div>
      </section>
    </main>
  );
}

function OrdersTab() {
  const { goto } = useShop();
  const [open, setOpen] = useA1("#ORAH-0039");

  return (
    <div>
      <div className="kpis" style={{ marginBottom: 24 }}>
        {[
          { l: "pedidos", v: "03" },
          { l: "em trânsito", v: "01" },
          { l: "entregues", v: "01" },
          { l: "preparando", v: "01" },
        ].map((k, i) => (
          <div key={i} className="kpi">
            <div className="label">{k.l}</div>
            <div className="value">{k.v}</div>
          </div>
        ))}
      </div>

      {ORAH_ORDERS.map((o) => {
        const isOpen = open === o.id;
        const items = o.items.map((it) => ({ ...it, product: ORAH_PRODUCTS.find((p) => p.id === it.id) })).filter((x) => x.product);

        return (
          <div key={o.id} className="card" style={{ marginBottom: 12, padding: 0, overflow: "hidden" }}>
            <button onClick={() => setOpen(isOpen ? null : o.id)} style={{
              width: "100%", padding: 18, background: "none", border: "none", cursor: "pointer",
              display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16,
              color: "var(--ink)",
            }}>
              <div className="row gap-4" style={{ flexWrap: "wrap" }}>
                <div>
                  <div style={{ fontFamily: "var(--f-display)", fontSize: 22, textAlign: "left" }}>{o.id}</div>
                  <div className="mono muted" style={{ fontSize: 11 }}>{o.date}</div>
                </div>
                <span className="badge" style={{ background: o.statusColor, color: "#fff", borderColor: o.statusColor }}>
                  {o.status}
                </span>
              </div>
              <div className="row gap-4">
                <div style={{ textAlign: "right" }}>
                  <div className="mono muted" style={{ fontSize: 10 }}>total</div>
                  <div style={{ fontWeight: 700 }}>R$ {o.total.toFixed(2).replace(".", ",")}</div>
                </div>
                <Icon name={isOpen ? "chev" : "chevR"} />
              </div>
            </button>

            {isOpen && (
              <div style={{ padding: "0 18px 18px", borderTop: "1px solid var(--ink-line)", paddingTop: 18 }}>
                {/* tracking visual */}
                {o.status !== "entregue" && (
                  <div style={{ marginBottom: 20 }}>
                    <div className="row" style={{ justifyContent: "space-between", marginBottom: 12 }}>
                      {["pago", "preparando", "a caminho", "entregue"].map((s, i) => {
                        const states = ["pago", "preparando", "a caminho", "entregue"];
                        const cur = states.indexOf(o.status);
                        return (
                          <div key={s} style={{ textAlign: "center", flex: 1 }}>
                            <div style={{
                              width: 24, height: 24, borderRadius: "50%",
                              background: i <= cur ? "var(--brand)" : "var(--bg-alt)",
                              color: i <= cur ? "var(--on-brand)" : "var(--ink-soft)",
                              margin: "0 auto", display: "grid", placeItems: "center",
                              fontSize: 12,
                            }}>{i <= cur ? "✓" : i + 1}</div>
                            <div className="mono" style={{ fontSize: 10, marginTop: 4, color: i <= cur ? "var(--ink)" : "var(--ink-soft)" }}>{s}</div>
                          </div>
                        );
                      })}
                    </div>
                    <div style={{ height: 3, background: "var(--bg-alt)", borderRadius: 999, overflow: "hidden" }}>
                      <div style={{ height: "100%", width: o.status === "preparando" ? "33%" : o.status === "a caminho" ? "66%" : "100%", background: "var(--brand)" }}></div>
                    </div>
                    {o.tracking && <div className="mono muted" style={{ marginTop: 12, fontSize: 11 }}>rastreio: {o.tracking}</div>}
                  </div>
                )}

                {/* items */}
                {items.map((it, i) => (
                  <div key={i} className="row gap-3" style={{ paddingTop: 12, borderTop: i > 0 ? "1px solid var(--ink-line)" : "none", marginTop: i > 0 ? 12 : 0 }}>
                    <div style={{ width: 70, height: 90, borderRadius: 6, overflow: "hidden" }}><ProductVisual product={it.product} /></div>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontFamily: "var(--f-display)", fontSize: 18, textTransform: "uppercase" }}>{it.product.name}</div>
                      <div className="mono muted" style={{ fontSize: 11 }}>Tam. {it.size} · qty {it.qty}</div>
                    </div>
                    <div style={{ fontWeight: 700 }}>R$ {(it.product.price * it.qty).toFixed(2).replace(".", ",")}</div>
                  </div>
                ))}

                <div className="row gap-2" style={{ marginTop: 18 }}>
                  {o.status === "entregue" && <button className="btn ghost sm">comprar novamente</button>}
                  <button className="btn ghost sm">nota fiscal</button>
                  <button className="btn ghost sm">contatar suporte</button>
                </div>
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}

function WishlistInline() {
  const { wish, toggleWish, addToCart, setDrawer, goto } = useShop();
  const items = wish.map((id) => ORAH_PRODUCTS.find((p) => p.id === id)).filter(Boolean);
  if (items.length === 0) {
    const sample = ORAH_PRODUCTS.slice(0, 4);
    return (
      <div>
        <div className="mono muted" style={{ marginBottom: 12 }}>nada salvo ainda — algumas sugestões:</div>
        <div className="products-grid">
          {sample.map((p) => <ProductCard key={p.id} product={p} onClick={(pr) => goto({ name: "product", params: { id: pr.id } })} />)}
        </div>
      </div>
    );
  }
  return (
    <div className="products-grid">
      {items.map((p) => <ProductCard key={p.id} product={p} onClick={(pr) => goto({ name: "product", params: { id: pr.id } })} />)}
    </div>
  );
}

function ProfileTab() {
  const { currentUser } = useShop();
  const user = currentUser || { firstName: "", fullName: "", email: "" };
  const lastName = user.fullName.split(" ").slice(1).join(" ");
  return (
    <div className="card" style={{ maxWidth: 600 }}>
      <h3 className="t-md">seus dados</h3>
      <div style={{ display: "flex", flexDirection: "column", gap: 14, marginTop: 20 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
          <div><label>nome</label><input key={user.firstName} defaultValue={user.firstName} /></div>
          <div><label>sobrenome</label><input key={lastName} defaultValue={lastName} /></div>
        </div>
        <div><label>email</label><input key={user.email} defaultValue={user.email} /></div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
          <div><label>cpf</label><input defaultValue="000.000.000-00" /></div>
          <div><label>celular</label><input defaultValue="(41) 99000-0000" /></div>
        </div>
        <div><label>aniversário</label><input defaultValue="03/06/1999" /></div>
        <button className="btn brand" style={{ alignSelf: "flex-start", marginTop: 8 }}>salvar alterações</button>
      </div>
    </div>
  );
}

function AddressesTab() {
  const { currentUser } = useShop();
  const name = currentUser?.fullName || "";
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
      <div className="card" style={{ borderColor: "var(--brand)", borderWidth: 2 }}>
        <div className="row" style={{ justifyContent: "space-between" }}>
          <span className="badge brand">principal</span>
          <button className="icon-btn"><Icon name="edit" size={14} /></button>
        </div>
        <div style={{ fontFamily: "var(--f-display)", fontSize: 22, marginTop: 12, textTransform: "uppercase" }}>casa</div>
        <div className="muted" style={{ marginTop: 6, fontSize: 14, lineHeight: 1.5 }}>
          {name}<br/>
          Rua das Flores, 123 — Centro<br/>
          Ponta Grossa/PR · 84000-000
        </div>
      </div>
      <div className="card">
        <div className="row" style={{ justifyContent: "space-between" }}>
          <span className="badge">trabalho</span>
          <button className="icon-btn"><Icon name="edit" size={14} /></button>
        </div>
        <div style={{ fontFamily: "var(--f-display)", fontSize: 22, marginTop: 12, textTransform: "uppercase" }}>escritório</div>
        <div className="muted" style={{ marginTop: 6, fontSize: 14, lineHeight: 1.5 }}>
          {name}<br/>
          Av. Sete de Setembro, 5000 — Batel<br/>
          Ponta Grossa/PR · 84050-200
        </div>
      </div>
      <div className="card" style={{ borderStyle: "dashed", display: "grid", placeItems: "center", minHeight: 180, cursor: "pointer" }}>
        <div style={{ textAlign: "center" }}>
          <Icon name="plus" size={28} />
          <div style={{ marginTop: 8, fontWeight: 700 }}>adicionar endereço</div>
        </div>
      </div>
    </div>
  );
}

function CouponsTab() {
  const coupons = [
    { c: "ORAH10", d: "10% off · qualquer pedido", v: "valido até 30/06" },
    { c: "PIX5", d: "5% off no pix", v: "sempre ativo" },
    { c: "PROPOSITO", d: "frete grátis · acima de R$ 199", v: "drop 01" },
  ];
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
      {coupons.map((c) => (
        <div key={c.c} className="card" style={{ background: "var(--brand)", color: "var(--on-brand)", borderColor: "var(--brand)", position: "relative", overflow: "hidden" }}>
          <div className="mono" style={{ opacity: 0.7 }}>cupom</div>
          <div style={{ fontFamily: "var(--f-display)", fontSize: 36, marginTop: 6, letterSpacing: 0.02 }}>{c.c}</div>
          <div style={{ marginTop: 10, fontSize: 15 }}>{c.d}</div>
          <div className="mono" style={{ marginTop: 4, opacity: 0.7, fontSize: 11 }}>{c.v}</div>
          <button className="btn ghost sm" style={{ color: "inherit", borderColor: "currentColor", marginTop: 16 }}>copiar código</button>
          {/* perforation */}
          <div style={{ position: "absolute", right: -12, top: "50%", transform: "translateY(-50%)", width: 24, height: 24, borderRadius: "50%", background: "var(--bg)" }}></div>
          <div style={{ position: "absolute", left: -12, top: "50%", transform: "translateY(-50%)", width: 24, height: 24, borderRadius: "50%", background: "var(--bg)" }}></div>
        </div>
      ))}
    </div>
  );
}

/* ============================ MANIFESTO ============================ */
function ManifestoPage() {
  const { goto } = useShop();
  return (
    <main>
      <section style={{ background: "var(--brand)", color: "var(--on-brand)", padding: "var(--space-8) 0 var(--space-9)", position: "relative", overflow: "hidden" }}>
        <div className="wrap">
          <div className="mono" style={{ opacity: 0.7 }}>manifesto · 001</div>
          <h1 style={{ fontFamily: "var(--f-display)", fontSize: "clamp(48px, 8cqw, 108px)", lineHeight: 0.92, textTransform: "uppercase", marginTop: 16, textWrap: "balance" }}>
            uma marca,<br/>
            um <span style={{ color: "var(--accent-warm)" }}>propósito.</span>
          </h1>
          <div style={{ fontFamily: "var(--f-hand)", fontSize: 36, marginTop: 24, maxWidth: 600 }}>
            ORAH vem de ora.
          </div>
        </div>
        <div style={{
          position: "absolute",
          right: -40, bottom: -60,
          fontFamily: "var(--f-display)",
          fontSize: "clamp(220px, 32cqw, 420px)",
          lineHeight: 0.8,
          opacity: 0.08,
          pointerEvents: "none",
        }}>01</div>
      </section>

      <section className="section">
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "start" }} className="man-grid">
            <div style={{ fontSize: 19, lineHeight: 1.65, color: "var(--ink)" }}>
              <p>
                Criamos a ORAH com a ideia de ser <strong>mais do que camisetas</strong>. ORAH vem de "ora", uma palavra que carrega a ideia de oração e de viver essa cultura no dia a dia.
              </p>
              <p style={{ marginTop: 20 }}>
                São camisetas cristãs <strong>oversized</strong>, masculinas e femininas, com estampas modernas e cheias de significado.
              </p>
              <p style={{ marginTop: 20 }}>
                Queremos impactar pessoas através delas, levar um pouco de <em>Jesus</em> e do <em>Reino</em> por onde passar.
              </p>
              <p style={{ marginTop: 20, fontFamily: "var(--f-hand)", fontSize: 36, color: "var(--brand)" }}>
                Isso é só o começo.
              </p>
              <p style={{ marginTop: 12, fontFamily: "var(--f-hand)", fontSize: 28, color: "var(--accent)" }}>
                Em breve.
              </p>
            </div>

            <div style={{ position: "relative" }}>
              <div className="polaroid" style={{ "--rot": "3deg", maxWidth: 360, marginLeft: "auto" }}>
                <div style={{ aspectRatio: "1", overflow: "hidden" }}>
                  <img src="assets/orah-cover.png" alt="ORAH" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                </div>
                <div className="cap">a marca.</div>
                <span className="tape" style={{ top: -16, left: 12, transform: "rotate(-4deg)" }}>03 · 06</span>
              </div>
              <div className="polaroid" style={{ "--rot": "-4deg", maxWidth: 280, marginTop: -40, marginLeft: 24 }}>
                <div className="img-ph" style={{ aspectRatio: "1", background: "var(--brand)", color: "var(--on-brand)" }}>
                  <div style={{ fontFamily: "var(--f-display)", fontSize: 32, textAlign: "center", padding: 24 }}>VOCÊ NÃO CHEGOU ATÉ AQUI POR ACASO.</div>
                </div>
                <div className="cap">por que ORAH</div>
              </div>
            </div>
          </div>

          {/* values */}
          <div style={{ marginTop: 80 }}>
            <div className="mono muted">o que carregamos</div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, marginTop: 24 }} className="vals-grid">
              {[
                { n: "fé", d: "como bússola — não como costume." },
                { n: "identidade", d: "vestir o que se acredita." },
                { n: "propósito", d: "cada peça com uma palavra." },
              ].map((v, i) => (
                <div key={i} style={{ borderTop: "2px solid var(--ink)", paddingTop: 20 }}>
                  <div className="mono muted">0{i+1}</div>
                  <div style={{ fontFamily: "var(--f-display)", fontSize: 44, textTransform: "uppercase", color: "var(--brand)", marginTop: 8 }}>{v.n}.</div>
                  <div style={{ marginTop: 8 }}>{v.d}</div>
                </div>
              ))}
            </div>
          </div>

          <div style={{ marginTop: 80, textAlign: "center" }}>
            <button className="btn brand lg" onClick={() => goto("shop")}>ver a primeira coleção →</button>
          </div>
        </div>
      </section>

      <style>{`
        .viewport-frame[data-vp="mobile"] .man-grid { grid-template-columns: 1fr; gap: 32px; }
        .viewport-frame[data-vp="mobile"] .vals-grid { grid-template-columns: 1fr; gap: 16px; }
      `}</style>
    </main>
  );
}

/* ============================ ABOUT ============================ */
function AboutPage() {
  const { goto } = useShop();
  return (
    <main>
      <section className="section">
        <div className="wrap">
          <span className="t-eyebrow">quem somos</span>
          <h1 className="t-xl" style={{ marginTop: 12 }}>orah é gente.</h1>
          <p style={{ maxWidth: 600, marginTop: 16, fontSize: 18, lineHeight: 1.55 }}>
            Uma pequena equipe que ora antes de desenhar e desenha pra que alguém ore depois. Ponta Grossa, Brasil. 2026.
          </p>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 32, marginTop: 56, maxWidth: 720 }} className="team-grid">
            {[
              { n: "Amanda", r: "fundadora · direção criativa" },
              { n: "Miguel", r: "fundador · operação" },
            ].map((m) => (
              <div key={m.n}>
                <div className="img-ph" style={{ aspectRatio: "1", borderRadius: 12 }}>
                  <div className="mono">[ retrato ]</div>
                </div>
                <div style={{ fontFamily: "var(--f-display)", fontSize: 28, textTransform: "uppercase", marginTop: 12 }}>{m.n}</div>
                <div className="mono muted">{m.r}</div>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 80, padding: 48, background: "var(--bg-card)", borderRadius: 16, border: "1px solid var(--ink-line)" }}>
            <span className="mono muted">linha do tempo</span>
            <div style={{ marginTop: 24, display: "flex", flexDirection: "column", gap: 18 }}>
              {[
                { d: "mai 2026", t: "ideia nasceu", c: "rabiscos no caderno, oração de início." },
                { d: "jun 2026", t: "drop 01 anunciado", c: "stories no Instagram, primeiros 450 seguidores." },
                { d: "jul 2026", t: "primeira venda", c: "três peças, três cidades. obrigado, Reino." },
                { d: "—", t: "drop 02", c: "em breve.", soon: true },
              ].map((row, i) => (
                <div key={i} className="row gap-4" style={{ alignItems: "flex-start", paddingBottom: 18, borderBottom: i < 3 ? "1px solid var(--ink-line)" : "none" }}>
                  <div className="mono muted" style={{ width: 100, flexShrink: 0 }}>{row.d}</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontFamily: "var(--f-display)", fontSize: 22, textTransform: "uppercase" }}>
                      {row.t}{row.soon && <span className="badge fire" style={{ marginLeft: 8 }}>em breve</span>}
                    </div>
                    <div className="muted" style={{ marginTop: 2 }}>{row.c}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <style>{`.viewport-frame[data-vp="mobile"] .team-grid { grid-template-columns: 1fr; }`}</style>
    </main>
  );
}

/* ============================ CONTACT ============================ */
function ContactPage() {
  return (
    <main>
      <section className="section">
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56 }} className="contact-grid">
            <div>
              <span className="t-eyebrow">contato</span>
              <h1 className="t-xl" style={{ marginTop: 12 }}>fala com a gente.</h1>
              <div style={{ fontFamily: "var(--f-hand)", fontSize: 26, color: "var(--brand)", marginTop: 12 }}>
                a gente responde — prometido.
              </div>

              <div style={{ marginTop: 40, display: "flex", flexDirection: "column", gap: 20 }}>
                {[
                  { i: "instagram", l: "Instagram", v: "@orahculture" },
                  { i: "spotify", l: "Spotify", v: "Playlist do Reino" },
                  { i: "pin", l: "Ponta Grossa/PR", v: "atendimento por DM" },
                ].map((c) => (
                  <div key={c.l} className="row gap-3">
                    <span style={{ width: 44, height: 44, borderRadius: "50%", background: "var(--brand)", color: "var(--on-brand)", display: "grid", placeItems: "center" }}>
                      <Icon name={c.i} size={18} />
                    </span>
                    <div>
                      <div className="mono muted">{c.l}</div>
                      <div style={{ fontWeight: 700 }}>{c.v}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div className="card" style={{ padding: 28 }}>
              <h3 className="t-md">manda sua mensagem</h3>
              <div style={{ display: "flex", flexDirection: "column", gap: 14, marginTop: 18 }}>
                <div><label>nome</label><input /></div>
                <div><label>email</label><input /></div>
                <div><label>assunto</label>
                  <select><option>pedido</option><option>parceria</option><option>imprensa</option><option>outro</option></select>
                </div>
                <div><label>mensagem</label><textarea rows={5}></textarea></div>
                <button className="btn brand">enviar</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <style>{`.viewport-frame[data-vp="mobile"] .contact-grid { grid-template-columns: 1fr; gap: 32px; }`}</style>
    </main>
  );
}

Object.assign(window, { AccountPage, ManifestoPage, AboutPage, ContactPage });