// Home + Detalhe da fatura screens (entry path to the Agente de Contas).

function ScrollArea({ children, pad = 0, bg = "#fff" }) {
  return (
    <div className="scrollArea" style={{
      flex: 1, overflowY: "auto", overflowX: "hidden", background: bg,
      paddingTop: 54, paddingBottom: pad, WebkitOverflowScrolling: "touch",
    }}>{children}</div>
  );
}

// White outline pill button used on the blue hero.
function HeroBtn({ children, onClick }) {
  return (
    <button className="pressable" onClick={onClick} style={{
      flex: 1, height: 56, borderRadius: 12, border: "1.5px solid #fff",
      background: "transparent", color: "#fff", fontSize: 16, fontWeight: 600,
      fontFamily: "'Hanken Grotesk', system-ui", cursor: "pointer",
    }}>{children}</button>
  );
}

// ── 01 Home — 100% fiel ao Figma (node 1:13840) ───────────────────
const NAVY = "rgb(0,46,70)";
const GRAY_TXT = "rgb(105,105,105)";
const RING = "rgb(49,82,239)";
const FF = "'Hanken Grotesk', system-ui";

// Header / nav icon set, transcribed to match the file's Icon set.
const NIc = {
  timT: (
    <svg width="26" height="23" viewBox="0 0 26 23" fill="none" aria-label="TIM"><path d="M2 3h22" stroke="#fff" strokeWidth="3.6" strokeLinecap="round"/><path d="M13 4.8V20" stroke="#fff" strokeWidth="3.6" strokeLinecap="round"/></svg>
  ),
  libras: (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M8.5 11V6a1.4 1.4 0 0 1 2.8 0v4M11.3 10V4.6a1.4 1.4 0 0 1 2.8 0V10M14.1 10.4V6.4a1.4 1.4 0 0 1 2.8 0V14c0 3.4-2.3 6-6 6-2.6 0-4.4-1.2-5.5-3.4l-1.7-3.3a1.35 1.35 0 0 1 2.3-1.4L8.5 12.4" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
  ),
  contrast: (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="#fff" strokeWidth="1.8"/><path d="M12 3a9 9 0 0 1 0 18z" fill="#fff"/></svg>
  ),
  menu: (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M4 7h16M4 12h16M4 17h16" stroke="#fff" strokeWidth="2" strokeLinecap="round"/></svg>
  ),
  chevDownW: (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M6 9l6 6 6-6" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
  ),
  gridApps: (c) => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><rect x="3.5" y="3.5" width="7" height="7" rx="2" stroke={c} strokeWidth="1.8"/><rect x="13.5" y="3.5" width="7" height="7" rx="2" stroke={c} strokeWidth="1.8"/><rect x="3.5" y="13.5" width="7" height="7" rx="2" stroke={c} strokeWidth="1.8"/><path d="M17 14v6M14 17h6" stroke={c} strokeWidth="1.8" strokeLinecap="round"/></svg>
  ),
  fatura: (c) => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 3.5h9l4 4V20a.5.5 0 0 1-.5.5H6.5A.5.5 0 0 1 6 20V4a.5.5 0 0 1 .5-.5z" stroke={c} strokeWidth="1.8" strokeLinejoin="round"/><path d="M14.5 3.5V8H19" stroke={c} strokeWidth="1.8" strokeLinejoin="round"/><path d="M9 12h6M9 15.5h6" stroke={c} strokeWidth="1.8" strokeLinecap="round"/></svg>
  ),
  recarga: (c) => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><rect x="6.5" y="2.5" width="11" height="19" rx="2.5" stroke={c} strokeWidth="1.8"/><path d="M12.5 8l-2 3h3l-2 3" stroke={c} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/></svg>
  ),
  bag: (c) => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 7.5h12l-1 12.5a.5.5 0 0 1-.5.5H7.5a.5.5 0 0 1-.5-.5L6 7.5z" stroke={c} strokeWidth="1.8" strokeLinejoin="round"/><path d="M9 9V6.5a3 3 0 0 1 6 0V9" stroke={c} strokeWidth="1.8" strokeLinecap="round"/></svg>
  ),
};

function AppIcon({ src, label, ring = RING, fallback, live }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 7, flexShrink: 0, width: 64 }}>
      <div style={{ position: "relative", width: 64, height: 64 }}>
        {src
          ? <img src={src} alt={label} style={{ position: "absolute", top: 3.5, left: 3.5, width: 57, height: 57, borderRadius: "50%", objectFit: "cover" }} />
          : <div style={{ position: "absolute", top: 3.5, left: 3.5, width: 57, height: 57, borderRadius: "50%", background: fallback.bg, display: "grid", placeItems: "center", color: "#fff", fontSize: 20, fontWeight: 700 }}>{fallback.t}</div>}
        <div style={{ position: "absolute", inset: 0, borderRadius: "50%", boxShadow: "inset 0 0 0 2px " + ring }} />
        {live && <span style={{ position: "absolute", bottom: -1, left: "50%", transform: "translateX(-50%)", background: NAVY, color: "#fff", fontSize: 8, fontWeight: 700, letterSpacing: "0.5px", borderRadius: 4, padding: "1px 6px", boxShadow: "inset 0 0 0 1px #fff" }}>LIVE</span>}
      </div>
      <span style={{ fontSize: 10, lineHeight: "18px", color: GRAY_TXT, whiteSpace: "nowrap", fontFamily: FF }}>{label}</span>
    </div>
  );
}

// Menu - BottomMenu (Items=5): 70px, hairline top, equal items, active blue.
function BottomMenu({ active = "Plano", onContas, onPlano }) {
  const items = [
    { t: "Plano", icon: NIc.gridApps, onClick: onPlano },
    { t: "Contas", icon: NIc.fatura, badge: "2", onClick: onContas },
    { t: "Recarga", icon: NIc.recarga },
    { t: "Loja", icon: NIc.bag },
  ];
  return (
    <div style={{ flexShrink: 0, height: 70, background: "#fff", borderTop: "1px solid rgb(229,229,229)", display: "flex", alignItems: "center", padding: "12px 24px" }}>
      {items.map((it, i) => {
        const on = it.t === active;
        const c = on ? TIM.blue : GRAY_TXT;
        return (
          <div key={i} className="pressable" onClick={it.onClick} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 4, cursor: "pointer" }}>
            <span style={{ position: "relative", width: 24, height: 24 }}>
              {it.icon(c)}
              {it.badge && <span style={{ position: "absolute", top: -4, left: 15, minWidth: 15, height: 15, background: TIM.red, color: "#fff", fontSize: 9, fontWeight: 700, borderRadius: 8, display: "grid", placeItems: "center", padding: "0 3px", boxShadow: "0 0 0 1.5px #fff" }}>{it.badge}</span>}
            </span>
            <span style={{ fontSize: 12, lineHeight: "18px", fontWeight: on ? 500 : 400, color: c, fontFamily: FF }}>{it.t}</span>
          </div>
        );
      })}
    </div>
  );
}

function HomeScreen({ onVerDetalhes, onContas }) {
  return (
    <div style={{ flex: 1, display: "flex", flexDirection: "column", background: "#fff", overflow: "hidden" }}>
      <div className="scrollArea" style={{ flex: 1, overflowY: "auto", overflowX: "hidden", background: TIM.blue }}>
        {/* Header - Mobile (blue, retracted) */}
        <div style={{ background: TIM.blue, paddingTop: 54 }}>
          {/* main row: control bars · phone pill · menu */}
          <div style={{ height: 72, display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0 24px" }}>
            {/* TIM logo */}
            <span style={{ width: 38, height: 32, display: "grid", placeItems: "center", flexShrink: 0 }}>
              <img src="logo-tim-mr2qba27.svg" alt="TIM" style={{ width: "80%", height: "100%", objectFit: "contain" }} />
            </span>
            {/* phone pill */}
            <div style={{ display: "flex", alignItems: "center", height: 40, padding: "0 24px", boxShadow: "inset 0 0 0 1.5px rgba(255,255,255,0.9)", borderRadius: 20, color: "#fff" }}>
              <span style={{ fontSize: 16, fontWeight: 400, fontFamily: FF }}>21 99999-1234</span>
            </div>
            {/* menu + red notification dot */}
            <span style={{ position: "relative", width: 24, height: 24, flexShrink: 0 }}>
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M4 7.5h16M4 12h16M4 16.5h11" stroke="#fff" strokeWidth="2" strokeLinecap="round"/></svg>
              <span style={{ position: "absolute", top: 0, right: 0, width: 8, height: 8, borderRadius: "50%", background: TIM.red }} />
            </span>
          </div>
        </div>

        {/* Blue hero */}
        <div style={{ background: TIM.blue, padding: "20px 24px 26px", color: "#fff" }}>
          <div style={{ fontSize: 20, fontWeight: 300, lineHeight: "29px", marginBottom: 12, fontFamily: FF }}>Olá Thaís 😃</div>
          <div style={{ fontSize: 18, lineHeight: "27px", fontWeight: 500, marginBottom: 24, fontFamily: FF }}>
            Disponibilizamos sua conta <b style={{ fontWeight: 700 }}>Maio 2025</b> com valor de <b style={{ fontWeight: 700 }}>R$ 135,78.</b>
          </div>
          <div style={{ display: "flex", gap: 16 }}>
            <HeroBtn>Pagar via Pix</HeroBtn>
            <HeroBtn onClick={onVerDetalhes}>Ver detalhes</HeroBtn>
          </div>
          <div style={{ display: "flex", gap: 7, justifyContent: "center", marginTop: 22 }}>
            {[0,1,2].map(i => <span key={i} style={{ width: 8, height: 8, borderRadius: 9, background: i === 0 ? "#fff" : "rgba(255,255,255,0.45)" }} />)}
          </div>
        </div>

        {/* White sheet (radius 14) */}
        <div style={{ background: "#fff", borderRadius: "14px 14px 0 0", position: "relative", paddingTop: 6, paddingBottom: 8 }}>
          <div style={{ display: "flex", justifyContent: "center", marginBottom: 6 }}>
            <div style={{ width: 44, height: 28, borderRadius: 14, background: "rgb(240,241,242)", display: "grid", placeItems: "center" }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M6 15l6-6 6 6" stroke="#000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </div>
          </div>
          {/* app row */}
          <div style={{ display: "flex", gap: 16, overflowX: "auto", padding: "8px 24px 4px" }}>
            <AppIcon src="proto/img/app-timvantagens.png" label="TIM+Vantag…" ring="rgba(0,0,0,0.1)" />
            <AppIcon src="proto/img/app-prime.png" label="Prime Video" />
            <AppIcon src="proto/img/app-timmusic.png" label="TIM Music" />
            <AppIcon src="proto/img/app-rockinrio.png" label="Rock in Rio" live />
            <AppIcon label="Deezer" fallback={{ bg: "linear-gradient(135deg,#111,#444)", t: "♫" }} />
            <AppIcon label="TIM 5G" fallback={{ bg: "linear-gradient(135deg,#0026D9,#3152EF)", t: "5G" }} />
          </div>

          {/* Total de internet consumida */}
          <div style={{ padding: "24px 24px 0" }}>
            <div style={{ fontSize: 24, fontWeight: 500, lineHeight: "31px", marginBottom: 16, color: "#000", fontFamily: FF }}>Total de internet consumida</div>
            <div style={{ borderRadius: 24, boxShadow: "inset 0 0 0 1px rgb(229,229,229)", padding: 24, boxSizing: "border-box" }}>
              <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", marginBottom: 18 }}>
                <span style={{ fontSize: 32, fontWeight: 500, lineHeight: "32px", color: "#000", fontFamily: FF }}>62<span style={{ fontSize: 24 }}>%</span></span>
                <button className="pressable" style={{ display: "inline-flex", alignItems: "center", gap: 8, background: "none", border: "none", cursor: "pointer", padding: 0, color: TIM.blue, fontSize: 14, fontWeight: 500, fontFamily: FF }}>
                  Ver detalhes
                  <span style={{ width: 24, height: 24, borderRadius: 50, boxShadow: "inset 0 0 0 1.5px #FFFFFF", overflow: "auto", display: "grid", placeItems: "center" }}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M9 5l7 7-7 7" stroke={TIM.blue} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  </span>
                </button>
              </div>
              <div style={{ position: "relative", height: 8, borderRadius: 6, background: "rgb(240,241,242)", marginBottom: 10 }}>
                <div style={{ position: "absolute", top: 0, left: 0, bottom: 0, width: "62%", borderRadius: 6, background: TIM.blue }} />
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 14, fontFamily: FF }}>
                <span style={{ color: "#000" }}>62GB consumidos</span><span style={{ color: GRAY_TXT }}>de 100GB</span>
              </div>
            </div>
          </div>

          {/* Seu saldo */}
          <div style={{ padding: "32px 24px 0" }}>
            <div style={{ fontSize: 24, fontWeight: 500, lineHeight: "31px", marginBottom: 16, color: "#000", fontFamily: FF }}>Seu saldo</div>
            <div style={{ display: "flex", gap: 12, alignItems: "center", padding: "16px 18px", borderRadius: 16, boxShadow: "inset 0 0 0 1px rgb(229,229,229)" }}>
              <span style={{ width: 48, height: 48, borderRadius: 12, boxShadow: "inset 0 0 0 1px rgb(229,229,229)", display: "grid", placeItems: "center", flexShrink: 0 }}>{NIc.gridApps("#000")}</span>
              <div style={{ display: "flex", flex: 1, justifyContent: "space-between", fontSize: 15, lineHeight: "20px", fontFamily: FF }}>
                <span style={{ color: GRAY_TXT }}>Plano<br/><b style={{ fontWeight: 700, color: "#000" }}>TIM Black</b></span>
                <span style={{ color: GRAY_TXT }}>Renova em<br/><b style={{ fontWeight: 700, color: "#000" }}>02/06</b></span>
              </div>
            </div>
            <button className="pressable" style={{ width: "100%", height: 52, marginTop: 16, borderRadius: 12, border: "none", background: TIM.blue, color: "#fff", fontSize: 16, fontWeight: 500, fontFamily: FF, cursor: "pointer" }}>Fazer recarga</button>
          </div>

          {/* Extrato detalhado */}
          <div className="pressable" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", margin: "20px 0 4px", padding: "20px 24px", borderTop: "1px solid rgb(229,229,229)", cursor: "pointer" }}>
            <span style={{ fontSize: 16, fontWeight: 500, color: "#000", fontFamily: FF }}>Extrato detalhado</span>{Ic.chevR("#000", 22)}
          </div>
        </div>
      </div>

      <BottomMenu active="Plano" onContas={onContas} />
    </div>
  );
}

// ── Contas header (blue, retracted — no accessibility bar) ────────
function NavyHeader() {
  return (
    <div style={{ background: TIM.blue, paddingTop: 54, flexShrink: 0 }}>
      {/* main row: control-bars · phone pill · menu */}
      <div style={{ height: 62, display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0 24px" }}>
        <span style={{ width: 24, height: 24, display: "grid", placeItems: "center", flexShrink: 0 }}>
          <img src="logo-tim-mr2ql9pl.svg" alt="TIM" style={{ width: "100%", height: "100%", objectFit: "contain" }} />
        </span>
        <div style={{ display: "flex", alignItems: "center", gap: 8, height: 40, padding: "0 20px", boxShadow: "inset 0 0 0 1.5px rgba(255,255,255,0.85)", borderRadius: 20, color: "#fff" }}>
          <span style={{ fontSize: 16, fontWeight: 400, fontFamily: FF }}>21 99999-1234</span>
          {NIc.chevDownW}
        </div>
        <span style={{ position: "relative", width: 24, height: 24, flexShrink: 0 }}>
          {NIc.menu}
          <span style={{ position: "absolute", top: -1, right: -1, width: 8, height: 8, borderRadius: "50%", background: TIM.red, boxShadow: "0 0 0 1.5px " + TIM.blue }} />
        </span>
      </div>
    </div>
  );
}

// Flag - Flag: radius 8, 2/8 padding, icon + 12px/500 label.
function Flag({ variant }) {
  const cfg = variant === "atraso"
    ? { bg: "rgb(251,204,212)", fg: "rgb(235,0,40)", label: "Em atraso",
        icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M12 3.6L22 20.2H2L12 3.6z" stroke="rgb(235,0,40)" strokeWidth="2" strokeLinejoin="round"/><path d="M12 10v4.2" stroke="rgb(235,0,40)" strokeWidth="2" strokeLinecap="round"/><circle cx="12" cy="17.2" r="1.1" fill="rgb(235,0,40)"/></svg> }
    : { bg: "rgb(254,245,224)", fg: "#000", label: "A vencer",
        icon: Ic.clock("rgb(250,185,50)", 16) };
  return (
    <span style={{ alignSelf: "flex-start", display: "inline-flex", alignItems: "center", gap: 4, background: cfg.bg, color: cfg.fg, borderRadius: 8, padding: "2px 8px", fontSize: 12, fontWeight: 500, lineHeight: "18px", fontFamily: FF }}>
      {cfg.icon}{cfg.label}
    </span>
  );
}

// A single fatura row: month/value, due date, flag, and the two buttons.
function FaturaRow({ month, value, due, flag, onDetalhe }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 24, padding: "24px 0", alignSelf: "stretch" }}>
      <div style={{ display: "flex", flexDirection: "column", gap: 8, padding: "0 24px", alignSelf: "stretch" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 4, alignSelf: "stretch" }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", alignSelf: "stretch" }}>
            <span style={{ fontSize: 16, fontWeight: 500, lineHeight: "24px", color: "#000", fontFamily: FF }}>{month}</span>
            <span style={{ fontSize: 16, fontWeight: 500, lineHeight: "24px", color: "#000", fontFamily: FF }}>{value}</span>
          </div>
          <span style={{ fontSize: 14, fontWeight: 400, lineHeight: "20px", color: GRAY_TXT, fontFamily: FF }}>{due}</span>
        </div>
        <Flag variant={flag} />
      </div>
      <div style={{ display: "flex", gap: 16, padding: "0 24px", alignSelf: "stretch" }}>
        <button className="pressable" onClick={onDetalhe} style={{ width: 160, height: 44, borderRadius: 12, border: "none", boxShadow: "inset 0 0 0 1px " + TIM.blue, background: "#fff", color: TIM.blue, fontSize: 14, fontWeight: 500, fontFamily: FF, cursor: "pointer" }}>Detalhe da conta</button>
        <button className="pressable" style={{ width: 122, height: 44, borderRadius: 12, border: "none", background: TIM.blue, color: "#fff", fontSize: 14, fontWeight: 500, fontFamily: FF, cursor: "pointer" }}>Pagar agora</button>
      </div>
    </div>
  );
}

// ── 02 Contas — 100% fiel ao Figma (node 1:13957) ─────────────────
function ContasScreen({ onDetalhe, onPlano }) {
  return (
    <div style={{ flex: 1, display: "flex", flexDirection: "column", background: "#fff", overflow: "hidden" }}>
      <NavyHeader />
      <div className="scrollArea" style={{ flex: 1, overflowY: "auto", background: "#fff" }}>
        {/* title */}
        <div style={{ padding: "48px 24px", width: 378, height: 86 }}>
          <span style={{ fontSize: 24, fontWeight: 500, lineHeight: "32px", color: "#000", fontFamily: FF }}>Você tem 1 fatura em aberto</span>
        </div>

        <FaturaRow month="Abril 2025" value="R$ 100,16" due="Venceu 05/05/2025" flag="atraso" onDetalhe={onDetalhe} />
        <FaturaRow month="Maio 2025" value="R$ 135,78" due="Venceu 05/05/2025" flag="vencer" onDetalhe={onDetalhe} />

        {/* 8px divider */}
        <div style={{ height: 8, background: "rgb(229,229,229)", alignSelf: "stretch" }} />

        {/* Gerenciamento de conta */}
        <div style={{ padding: "40px 24px 16px" }}>
          <span style={{ fontSize: 24, fontWeight: 500, lineHeight: "32px", color: "#000", fontFamily: FF }}>Gerenciamento de conta</span>
        </div>
        <div style={{ display: "flex", gap: 8, padding: "0 24px 40px" }}>
          <MgmtCard label={<>Histórico de<br/>contas</>} icon={
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 3.5h8l4 4V20a.5.5 0 0 1-.5.5H6.5A.5.5 0 0 1 6 20V4a.5.5 0 0 1 .5-.5z" stroke={TIM.blue} strokeWidth="1.8" strokeLinejoin="round"/><path d="M14 3.5V8h4" stroke={TIM.blue} strokeWidth="1.8" strokeLinejoin="round"/><path d="M8.5 13.6l2 2 4-4.6" stroke={TIM.blue} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
          } />
          <MgmtCard label={<>Configura-<br/>ção de conta</>} icon={
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="3.2" stroke={TIM.blue} strokeWidth="1.8"/><path d="M12 3.5v2.2M12 18.3v2.2M20.5 12h-2.2M5.7 12H3.5M18 6l-1.6 1.6M7.6 16.4L6 18M18 18l-1.6-1.6M7.6 7.6L6 6" stroke={TIM.blue} strokeWidth="1.8" strokeLinecap="round"/></svg>
          } />
        </div>
      </div>
      <BottomMenu active="Contas" onPlano={onPlano} />
    </div>
  );
}

// Management card (Card - FAQ White Small): 104×w, radius 24, 1px ring.
function MgmtCard({ icon, label }) {
  return (
    <button className="pressable" style={{ width: 104, height: 104, boxSizing: "border-box", background: "#fff", borderRadius: 24, border: "none", boxShadow: "inset 0 0 0 1px rgb(229,229,229)", padding: 16, display: "flex", flexDirection: "column", justifyContent: "space-between", textAlign: "left", cursor: "pointer" }}>
      <span style={{ width: 24, height: 24, display: "block" }}>{icon}</span>
      <span style={{ fontSize: 12, fontWeight: 500, lineHeight: "18px", color: "#000", fontFamily: FF }}>{label}</span>
    </button>
  );
}

// ── Detalhe da fatura — 100% fiel ao Figma (node 1:13740) ─────────
// Service icons, 24×24, transcribed to match the file's Icon set.
const DIc = {
  openFinance: (c) => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 3.2a8.8 8.8 0 1 0 8.8 8.8" stroke={c} strokeWidth="2" strokeLinecap="round"/><path d="M12 7.2a4.8 4.8 0 1 0 4.8 4.8" stroke={c} strokeWidth="2" strokeLinecap="round"/><circle cx="18.6" cy="6.4" r="1.7" fill={c}/></svg>
  ),
  pix: (c) => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 3.4l3.5 3.5a2 2 0 0 1 0 2.8L12 13.2 8.5 9.7a2 2 0 0 1 0-2.8L12 3.4z" fill={c}/><path d="M6.8 9.6L3.3 13.1a2 2 0 0 0 0 2.8l3.5 3.5 2.5-2.5a2 2 0 0 1 0-2.8L6.8 9.6zM17.2 9.6l-2.5 2.5a2 2 0 0 1 0 2.8l2.5 2.5 3.5-3.5a2 2 0 0 0 0-2.8L17.2 9.6zM12 14.6l-2.3 2.3L12 19.2l2.3-2.3L12 14.6z" fill={c} opacity="0.5"/></svg>
  ),
  share: (c) => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><circle cx="18" cy="5.6" r="2.6" stroke={c} strokeWidth="1.8"/><circle cx="6" cy="12" r="2.6" stroke={c} strokeWidth="1.8"/><circle cx="18" cy="18.4" r="2.6" stroke={c} strokeWidth="1.8"/><path d="M8.2 10.8l7.6-3.9M8.2 13.2l7.6 3.9" stroke={c} strokeWidth="1.8"/></svg>
  ),
  chat: (c) => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M4 5.5h16v10H10l-4.5 4v-4H4v-10z" stroke={c} strokeWidth="1.8" strokeLinejoin="round"/><circle cx="9" cy="10.5" r="1.05" fill={c}/><circle cx="12.5" cy="10.5" r="1.05" fill={c}/><circle cx="16" cy="10.5" r="1.05" fill={c}/></svg>
  ),
  fileChecked: (c) => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 3.5h8l4 4V20a.5.5 0 0 1-.5.5H6.5A.5.5 0 0 1 6 20V4a.5.5 0 0 1 .5-.5z" stroke={c} strokeWidth="1.8" strokeLinejoin="round"/><path d="M14 3.5V8h4" stroke={c} strokeWidth="1.8" strokeLinejoin="round"/><path d="M8.5 13.6l2 2 4-4.6" stroke={c} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
  ),
  download: (c) => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 4v10m0 0l-4-4m4 4l4-4M5 19h14" stroke={c} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
  ),
};

// Card - FAQ (Type=White, Size=Small): 104×106, radius 24, 1px ring,
// padding 16, icon 24 top / label 12·500 bottom, space-between.
function PayCard({ icon, label, highlight, badge, onClick }) {
  return (
    <button className="pressable" onClick={onClick} style={{
      position: "relative", flex: 1, minWidth: 0, height: 106, textAlign: "left", boxSizing: "border-box",
      background: "#fff", borderRadius: 24, cursor: onClick ? "pointer" : "default", border: "none",
      boxShadow: highlight ? "0 0 0 1.5px " + TIM.blue : "0 0 0 1px rgb(229,229,229)",
      padding: 16, display: "flex", flexDirection: "column", justifyContent: "space-between",
      fontFamily: "'Hanken Grotesk',system-ui",
    }}>
      <span style={{ position: "relative", width: 24, height: 24, display: "block", flexShrink: 0 }}>
        {icon}
        {badge && <span style={{ position: "absolute", top: -7, left: 16, background: TIM.red, color: "#fff", fontSize: 9, fontWeight: 700, lineHeight: "14px", borderRadius: 10, padding: "0 6px", whiteSpace: "nowrap" }}>{badge}</span>}
      </span>
      <span style={{ fontSize: 12, fontWeight: 500, lineHeight: "18px", color: "#000", alignSelf: "stretch" }}>{label}</span>
    </button>
  );
}

function DetailScreen({ onClose, onDiscordo }) {
  return (
    <div style={{ flex: 1, display: "flex", flexDirection: "column", background: "#fff", overflow: "hidden" }}>
      {/* App Bar - Default (Middle=Text): 72px titled bar below the status area */}
      <div style={{ paddingTop: 54, flexShrink: 0 }}>
        <div style={{ height: 72, display: "flex", alignItems: "center", gap: 16, padding: "0 24px 0 64px", borderBottom: "1px solid rgb(229,229,229)", background: "#fff", boxSizing: "border-box" }}>
          <span style={{ flexGrow: 1, textAlign: "center", fontSize: 16, fontWeight: 400, lineHeight: "24px", color: "#000", fontFamily: "'Hanken Grotesk',system-ui" }}>Detalhe da fatura</span>
          <button className="pressable" onClick={onClose} style={{ background: "none", border: "none", cursor: "pointer", padding: 0, width: 24, height: 24, flexShrink: 0 }}>{Ic.close("#000", 24)}</button>
        </div>
      </div>

      <div className="scrollArea" style={{ flex: 1, overflowY: "auto", background: "#fff" }}>
        {/* amount block — 40px vertical padding, gap 24 */}
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 24, padding: "40px 0" }}>
          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8, alignSelf: "stretch" }}>
            <span style={{ fontSize: 16, fontWeight: 500, lineHeight: "24px", color: "#000", fontFamily: "'Hanken Grotesk',system-ui" }}>Maio 2025</span>
            <span style={{ fontSize: 40, fontWeight: 300, letterSpacing: "-1px", lineHeight: "50px", color: "#000", fontFamily: "'Hanken Grotesk',system-ui" }}>R$ 135,78</span>
            {/* Flag - Flag (Color=Yellow, Icon=True) */}
            <span style={{ display: "inline-flex", alignItems: "center", gap: 4, background: "rgb(254,245,224)", color: "#000", borderRadius: 8, padding: "2px 8px", fontSize: 12, fontWeight: 500, lineHeight: "18px", fontFamily: "'Hanken Grotesk',system-ui" }}>
              {Ic.clock("rgb(250,185,50)", 16)} A vencer
            </span>
            <span style={{ fontSize: 16, fontWeight: 400, lineHeight: "24px", color: "#000", fontFamily: "'Hanken Grotesk',system-ui" }}>Vence em 05/05/2025</span>
          </div>
          {/* Button - Pill (Type=Contained, Color=Blue, Size=Large): radius 12 */}
          <button className="pressable" style={{ height: 56, padding: "0 24px", borderRadius: 12, border: "none", background: TIM.blue, color: "#fff", fontSize: 16, fontWeight: 500, fontFamily: "'Hanken Grotesk',system-ui", cursor: "pointer" }}>Pagar agora</button>
        </div>

        {/* gray section rgb(240,241,242) */}
        <div style={{ background: "rgb(240,241,242)", minHeight: 387, paddingBottom: 24 }}>
          {/* Opções de pagamento — 8px hairline frame, padding 32/24/8 */}
          <div style={{ boxSizing: "border-box", border: "8px solid rgb(229,229,229)", padding: "32px 24px 8px 24px" }}>
            <span style={{ fontSize: 18, fontWeight: 500, lineHeight: "27px", color: "#000", fontFamily: "'Hanken Grotesk',system-ui" }}>Opções de pagamento</span>
          </div>
          <div style={{ display: "flex", gap: 9, padding: "0 24px" }}>
            <PayCard icon={DIc.openFinance(TIM.blue)} label={<>Pix no<br/>seu banco</>} />
            <PayCard icon={DIc.pix(TIM.blue)} label={"Copiar Código Pix"} />
            <PayCard icon={DIc.share("rgb(224,224,224)")} label={<>Enviar<br/>Código Pix</>} />
          </div>

          <div style={{ padding: "24px 24px 16px 24px" }}>
            <span style={{ fontSize: 18, fontWeight: 500, lineHeight: "27px", color: "#000", fontFamily: "'Hanken Grotesk',system-ui" }}>Outros serviços</span>
          </div>
          <div style={{ display: "flex", gap: 8, padding: "0 24px" }}>
            <PayCard highlight badge="Novo" onClick={onDiscordo} icon={DIc.chat(TIM.blue)} label={"Discordo do valor"} />
            <PayCard icon={DIc.fileChecked(TIM.blue)} label={"Informar pagamento"} />
            <PayCard icon={DIc.download(TIM.blue)} label={"Baixar 2ª via"} />
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ScrollArea, HomeScreen, ContasScreen, DetailScreen });
