// cards-applied.jsx — Apple-polished applied frames.
// All surfaces use rounded corners, frosted glass, soft shadows, subtle
// radial highlights and pill buttons. Shared chrome (GlassCard / Pill /
// Eyebrow / FieldLabel) lives in apple-chrome.jsx.

// ─── PUBLIC / CLÍNICO ────────────────────────────────────────────────────

function FrameLanding({ dir }) {
  return (
    <div style={{
      width: "100%", height: "100%", color: dir.ink, fontFamily: dir.body,
      background: `${dir.bgGradient}, ${dir.bg}`,
      display: "flex", flexDirection: "column", overflow: "hidden",
      position: "relative",
    }}>
      {/* nav as a floating capsule */}
      <div style={{
        position: "absolute", top: 18, left: "50%", transform: "translateX(-50%)",
        zIndex: 5, width: "calc(100% - 36px)", maxWidth: 760,
      }}>
        <GlassCard dir={dir} padding={0} radius={999} style={{ padding: "8px 10px 8px 16px" }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <EixoSymbol variant="hpta" size={20} fg={dir.ink} thick />
              <span style={{ fontFamily: dir.display, fontWeight: 700, fontSize: 15, letterSpacing: "-0.01em" }}>
                EIXO<span style={{ color: dir.accent }}>.</span>
              </span>
            </div>
            <div style={{
              display: "flex", gap: 4, fontFamily: dir.body, fontSize: 12,
              fontWeight: 500, color: dir.inkSoft,
            }}>
              {["Curso", "Consulta", "Comunidade", "Sobre"].map((t) => (
                <span key={t} style={{ padding: "5px 10px", borderRadius: 999 }}>{t}</span>
              ))}
            </div>
            <Pill dir={dir} primary size="sm">Entrar →</Pill>
          </div>
        </GlassCard>
      </div>

      {/* hero */}
      <div style={{
        padding: "94px 36px 24px", display: "grid",
        gridTemplateColumns: "1.4fr 1fr", gap: 28, alignItems: "center",
      }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <Eyebrow dir={dir}>EDUCAÇÃO EM FARMACOLOGIA ESPORTIVA · BR</Eyebrow>
          <div style={{
            fontFamily: dir.display, fontSize: 58, fontWeight: 700,
            letterSpacing: "-0.035em", lineHeight: 0.98, color: dir.ink,
            textWrap: "balance",
          }}>
            O eixo certo<br />
            entre <span style={{ color: dir.accent }}>treino</span>,<br />
            estudo e bloodwork.
          </div>
          <div style={{ fontSize: 15, lineHeight: 1.55, color: dir.inkSoft, maxWidth: 460 }}>
            Conteúdo direto, escrito por gente que treina e estuda. Curso, consulta 1:1 e uma comunidade fechada no Telegram.
          </div>
          <div style={{ display: "flex", gap: 10, marginTop: 8 }}>
            <Pill dir={dir} primary size="lg">Começar pelo curso</Pill>
            <Pill dir={dir} size="lg">Aula 01 grátis</Pill>
          </div>
        </div>

        {/* photo slot inside glass */}
        <GlassCard dir={dir} padding={10} radius={dir.radiusLg}>
          <PhotoSlot h={240} label="HERO · ATLETA" fg={dir.inkSoft} bg={dir.surfaceAlt} radius={dir.radius} />
        </GlassCard>
      </div>

      {/* product strip — three glass cards */}
      <div style={{
        marginTop: "auto", padding: "20px 24px 24px",
        display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12,
      }}>
        {[
          { tag: "01 · CURSO", title: "Farmacologia que treina junto", price: "R$ 197", note: "12 módulos · acesso vitalício" },
          { tag: "02 · CONSULTA", title: "Sessão particular 60 min", price: "R$ 480", note: "agenda online · resumo em 24h" },
          { tag: "03 · COMUNIDADE", title: "Telegram fechado", price: "R$ 39 / mês", note: "grupo + canal + live semanal" },
        ].map((p, i) => (
          <GlassCard key={i} dir={dir} padding={16} radius={dir.radiusLg}>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              <Eyebrow dir={dir}>{p.tag}</Eyebrow>
              <div style={{ fontFamily: dir.display, fontSize: 17, fontWeight: 600, letterSpacing: "-0.015em" }}>
                {p.title}
              </div>
              <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
                <span style={{ fontFamily: dir.display, fontSize: 22, fontWeight: 700, letterSpacing: "-0.025em" }}>{p.price}</span>
                <span style={{ fontFamily: dir.mono, fontSize: 10, color: dir.inkMuted, letterSpacing: "0.06em" }}>{p.note}</span>
              </div>
            </div>
          </GlassCard>
        ))}
      </div>
    </div>
  );
}

function FrameRecibo({ dir }) {
  return (
    <div style={{
      width: "100%", height: "100%", color: dir.ink, fontFamily: dir.body,
      background: `${dir.bgGradient}, ${dir.bg}`, padding: 22,
      display: "flex", flexDirection: "column", gap: 14,
    }}>
      <GlassCard dir={dir} padding={22} radius={dir.radiusLg} style={{ flex: 1, display: "flex", flexDirection: "column", gap: 14 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
            <EixoSymbol variant="hpta" size={22} fg={dir.ink} thick />
            <span style={{ fontFamily: dir.display, fontWeight: 700, fontSize: 15, letterSpacing: "-0.01em" }}>
              EIXO<span style={{ color: dir.accent }}>.</span>
            </span>
          </div>
          <div style={{
            fontFamily: dir.mono, fontSize: 10, letterSpacing: "0.12em",
            color: dir.inkMuted, textAlign: "right",
          }}>
            #EX-2026-0117<br />14 mai 2026
          </div>
        </div>

        <div style={{
          fontFamily: dir.display, fontSize: 26, fontWeight: 700, letterSpacing: "-0.025em",
          paddingBottom: 12, borderBottom: `0.5px solid ${dir.hairline}`,
        }}>Consulta particular · 60 min</div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, fontSize: 12.5 }}>
          <div>
            <FieldLabel dir={dir}>Para</FieldLabel>
            <div>João Pereira</div>
            <div style={{ color: dir.inkSoft }}>joao.p@email.com</div>
          </div>
          <div>
            <FieldLabel dir={dir}>De</FieldLabel>
            <div>Eixo Pharma</div>
            <div style={{ color: dir.inkSoft }}>CNPJ 00.000.000/0001-00</div>
          </div>
          <div>
            <FieldLabel dir={dir}>Sessão</FieldLabel>
            <div>11 mai 2026 · 14:30</div>
            <div style={{ color: dir.inkSoft }}>Online · Meet</div>
          </div>
          <div>
            <FieldLabel dir={dir}>Pagamento</FieldLabel>
            <div>PIX · 09/05</div>
            <div style={{ color: dir.inkSoft }}>****-0042</div>
          </div>
        </div>

        <div style={{
          marginTop: "auto", padding: "12px 0 0", borderTop: `0.5px solid ${dir.hairline}`,
          display: "flex", justifyContent: "space-between", alignItems: "baseline",
        }}>
          <span style={{
            fontFamily: dir.mono, fontSize: 10, letterSpacing: "0.14em",
            color: dir.inkMuted, textTransform: "uppercase",
          }}>Total pago</span>
          <span style={{ fontFamily: dir.display, fontSize: 30, fontWeight: 700, letterSpacing: "-0.03em" }}>
            R$ 480,00
          </span>
        </div>
      </GlassCard>
    </div>
  );
}

function FrameOG({ dir }) {
  return (
    <div style={{
      width: "100%", height: "100%", background: `${dir.bgGradient}, ${dir.bg}`,
      padding: 22, display: "flex", flexDirection: "column", gap: 12,
    }}>
      <div style={{
        fontFamily: dir.mono, fontSize: 10, letterSpacing: "0.14em",
        textTransform: "uppercase", color: dir.inkMuted,
      }}>OG · 1200×630 · preview no WhatsApp/X</div>

      <div style={{
        aspectRatio: "1200/630", background: dir.ink, color: dir.surface,
        padding: 26, display: "flex", flexDirection: "column", justifyContent: "space-between",
        position: "relative", overflow: "hidden", borderRadius: dir.radiusLg,
        boxShadow: dir.shadowSoft,
      }}>
        {/* radial highlight */}
        <div style={{
          position: "absolute", inset: 0, pointerEvents: "none",
          background: "radial-gradient(80% 60% at 110% -10%, rgba(31,79,217,0.45), transparent 50%), radial-gradient(60% 50% at -10% 110%, rgba(31,79,217,0.30), transparent 55%)",
        }} />
        <div style={{ display: "flex", alignItems: "center", gap: 8, position: "relative" }}>
          <EixoSymbol variant="hpta" size={22} fg={dir.accent} thick />
          <span style={{ fontFamily: dir.display, fontWeight: 700, fontSize: 15, letterSpacing: "-0.01em" }}>
            EIXO<span style={{ color: dir.accent }}>.</span>
          </span>
        </div>
        <div style={{
          fontFamily: dir.display, fontSize: 40, fontWeight: 700,
          letterSpacing: "-0.035em", lineHeight: 0.98, position: "relative",
        }}>
          A ciência<br />do hormônio,<br /><span style={{ color: dir.accent }}>sem rodeios.</span>
        </div>
        <div style={{
          fontFamily: dir.mono, fontSize: 10, letterSpacing: "0.18em",
          textTransform: "uppercase", opacity: 0.7, position: "relative",
        }}>eixopharma.com.br</div>
      </div>

      <GlassCard dir={dir} padding={12} radius={dir.radius} style={{ marginTop: 2 }}>
        <div style={{ fontFamily: dir.mono, fontSize: 10, color: dir.inkMuted, letterSpacing: "0.04em" }}>
          eixopharma.com.br
        </div>
        <div style={{ fontFamily: dir.display, fontSize: 13, fontWeight: 600, marginTop: 2 }}>
          Eixo Pharma — farmacologia esportiva, direto.
        </div>
        <div style={{ fontSize: 11, color: dir.inkSoft, lineHeight: 1.4, marginTop: 2 }}>
          Curso, consulta particular e comunidade fechada no Telegram. PT-BR.
        </div>
      </GlassCard>
    </div>
  );
}

// ─── HANDOFF ─────────────────────────────────────────────────────────────

function FrameConfirmacao({ dir, telegramDir }) {
  return (
    <div style={{
      width: "100%", height: "100%", color: dir.ink, fontFamily: dir.body,
      background: `${dir.bgGradient}, ${dir.bg}`, padding: 28,
      display: "flex", flexDirection: "column", gap: 18, position: "relative",
    }}>
      <Eyebrow dir={dir}>PAGAMENTO CONFIRMADO · #EX-2026-0117</Eyebrow>

      <div style={{
        fontFamily: dir.display, fontSize: 40, fontWeight: 700,
        letterSpacing: "-0.03em", lineHeight: 1, maxWidth: "90%",
      }}>
        Você está dentro.<br />
        <span style={{ color: dir.inkSoft, fontWeight: 500 }}>Bem-vindo à Eixo.</span>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
        <GlassCard dir={dir} padding={18} radius={dir.radiusLg} style={{ minHeight: 200, display: "flex", flexDirection: "column", gap: 8 }}>
          <Eyebrow dir={dir} color={dir.inkMuted}>01 · ACESSO AO CURSO</Eyebrow>
          <div style={{ fontFamily: dir.display, fontSize: 18, fontWeight: 600, letterSpacing: "-0.02em" }}>
            Comece pela Aula 01
          </div>
          <div style={{ fontSize: 13, color: dir.inkSoft, lineHeight: 1.45 }}>
            Liberamos os 12 módulos. Em ordem: módulo 1 monta a base do eixo HPTA.
          </div>
          <div style={{ marginTop: "auto" }}>
            <Pill dir={dir} primary>Abrir o curso →</Pill>
          </div>
        </GlassCard>

        {/* Noturno handoff card — dark glass */}
        <div style={{
          minHeight: 200, padding: 18, borderRadius: telegramDir.radiusLg,
          background: `radial-gradient(120% 80% at 50% -10%, ${telegramDir.accent}22, transparent 50%), ${telegramDir.bg}`,
          color: telegramDir.ink,
          border: `0.5px solid ${telegramDir.glassBorder}`,
          boxShadow: telegramDir.shadowGlass,
          display: "flex", flexDirection: "column", gap: 8, position: "relative",
          overflow: "hidden",
        }}>
          <div style={{
            position: "absolute", top: -30, right: -30, width: 140, height: 140,
            borderRadius: "50%", background: `radial-gradient(circle, ${telegramDir.accent}33, transparent 60%)`,
            filter: "blur(10px)", pointerEvents: "none",
          }} />
          <div style={{
            fontFamily: telegramDir.mono, fontSize: 10, letterSpacing: "0.14em",
            textTransform: "uppercase", color: telegramDir.accent,
            display: "inline-flex", alignItems: "center", gap: 8,
          }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: telegramDir.accent, boxShadow: `0 0 12px ${telegramDir.accent}` }} />
            02 · COMUNIDADE
          </div>
          <div style={{ fontFamily: telegramDir.display, fontSize: 18, fontWeight: 600, letterSpacing: "-0.02em" }}>
            Entre no Telegram da Eixo
          </div>
          <div style={{ fontSize: 13, color: telegramDir.inkSoft, lineHeight: 1.45 }}>
            A partir daqui o ambiente muda — é onde a conversa rola direto entre membros.
          </div>
          <div style={{ marginTop: "auto" }}>
            <button style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              background: telegramDir.accent, color: telegramDir.accentOn,
              padding: "11px 18px", border: "none", borderRadius: 999,
              fontFamily: telegramDir.display, fontWeight: 700, fontSize: 13,
              boxShadow: `0 8px 24px -6px ${telegramDir.accent}55, inset 0 0.5px 0 rgba(255,255,255,0.3)`,
            }}>
              <TelegramGlyph c={telegramDir.accentOn} size={14} />
              Abrir convite →
            </button>
          </div>
        </div>
      </div>

      <div style={{
        marginTop: "auto", fontFamily: dir.mono, fontSize: 10,
        letterSpacing: "0.12em", textTransform: "uppercase", color: dir.inkMuted,
        display: "flex", justifyContent: "space-between",
      }}>
        <span>Recibo enviado para joao.p@email.com</span>
        <span>eixopharma.com.br</span>
      </div>
    </div>
  );
}

function FrameEmail({ dir, telegramDir }) {
  return (
    <div style={{
      width: "100%", height: "100%", color: dir.ink, fontFamily: dir.body,
      background: `${dir.bgGradient}, ${dir.bg}`, padding: 20,
      display: "flex", flexDirection: "column", gap: 12, overflow: "hidden",
    }}>
      <div style={{ fontFamily: dir.mono, fontSize: 10, color: dir.inkMuted, letterSpacing: "0.04em", padding: "0 4px" }}>
        Para: joao.p@email.com<br />
        De: contato@eixopharma.com.br<br />
        Assunto: <span style={{ color: dir.ink }}>Você entrou. Aqui está como começar.</span>
      </div>

      <GlassCard dir={dir} padding={22} radius={dir.radiusLg} style={{ flex: 1, display: "flex", flexDirection: "column", gap: 14, overflow: "hidden" }}>
        <EixoSymbol variant="hpta" size={26} fg={dir.ink} thick />
        <div style={{ fontFamily: dir.display, fontSize: 24, fontWeight: 700, letterSpacing: "-0.025em", lineHeight: 1.1 }}>
          João, bem-vindo à Eixo.
        </div>
        <div style={{ fontSize: 13.5, lineHeight: 1.55, color: dir.inkSoft }}>
          Pagamento confirmado. Você tem acesso a três coisas — e a ordem importa:
        </div>

        <ol style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 10 }}>
          {[
            { n: "01", t: "Curso", d: "12 módulos. Começa pela aula 01 — monta a base do eixo HPTA." },
            { n: "02", t: "Comunidade no Telegram", d: "Grupo + canal fechados. Lives semanais, troca direta.", accent: true },
            { n: "03", t: "Consulta 1:1", d: "Se virar atendimento, a agenda fica no site." },
          ].map((it) => (
            <li key={it.n} style={{ display: "flex", gap: 10, fontSize: 13, lineHeight: 1.45 }}>
              <span style={{
                fontFamily: dir.mono, fontSize: 11, color: it.accent ? dir.accent : dir.inkMuted,
                fontWeight: 600, minWidth: 22,
              }}>{it.n}</span>
              <span>
                <strong style={{ color: dir.ink, fontWeight: 600 }}>{it.t}.</strong>{" "}
                <span style={{ color: dir.inkSoft }}>{it.d}</span>
              </span>
            </li>
          ))}
        </ol>

        {/* telegram CTA — dark glass mini-card */}
        <div style={{
          marginTop: 4, padding: 14, borderRadius: telegramDir.radius,
          background: `radial-gradient(120% 90% at 50% -10%, ${telegramDir.accent}22, transparent 60%), ${telegramDir.bg}`,
          border: `0.5px solid ${telegramDir.glassBorder}`,
          color: telegramDir.ink, display: "flex", alignItems: "center", gap: 12,
          boxShadow: telegramDir.shadowGlass,
        }}>
          <div style={{
            width: 38, height: 38, borderRadius: 999,
            background: telegramDir.accent, display: "grid", placeItems: "center",
            boxShadow: `0 0 18px ${telegramDir.accent}55`,
          }}>
            <TelegramGlyph c={telegramDir.accentOn} size={18} />
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontFamily: telegramDir.display, fontSize: 13, fontWeight: 600, letterSpacing: "-0.01em" }}>
              t.me/eixopharma_privado
            </div>
            <div style={{
              fontFamily: telegramDir.mono, fontSize: 10, color: telegramDir.inkSoft,
              letterSpacing: "0.08em", textTransform: "uppercase",
            }}>convite válido por 7 dias</div>
          </div>
          <button style={{
            background: telegramDir.accent, color: telegramDir.accentOn, border: "none",
            padding: "9px 14px", fontFamily: telegramDir.display, fontWeight: 700,
            fontSize: 12, letterSpacing: "-0.005em", borderRadius: 999,
            boxShadow: `0 6px 16px -4px ${telegramDir.accent}66`,
          }}>Entrar →</button>
        </div>

        <div style={{ fontSize: 12.5, color: dir.inkSoft, lineHeight: 1.5 }}>
          Bom treino, bons estudos.<br />— equipe Eixo
        </div>
      </GlassCard>
    </div>
  );
}

// ─── TELEGRAM / NOTURNO ──────────────────────────────────────────────────

function TelegramGlyph({ c = "currentColor", size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M2 12 L22 4 L19 21 L12 14 L8 18 L8 14 L2 12 Z M8 14 L19 5"
            stroke={c} strokeWidth="1.6" strokeLinejoin="round" strokeLinecap="round" fill="none" />
    </svg>
  );
}

function PhoneShell({ dir, children }) {
  // iPhone-style frame: gentle gradient bg, rounded corners, glass status bar.
  return (
    <div style={{
      width: "100%", height: "100%", color: dir.ink, fontFamily: dir.body,
      background: `radial-gradient(120% 60% at 50% 0%, rgba(215,255,58,0.06), transparent 50%), radial-gradient(110% 60% at 50% 100%, rgba(122,229,255,0.05), transparent 55%), ${dir.bg}`,
      display: "flex", flexDirection: "column", overflow: "hidden",
      position: "relative",
    }}>
      {/* status bar */}
      <div style={{
        display: "flex", justifyContent: "space-between", padding: "10px 18px 4px",
        fontFamily: dir.body, fontSize: 12, fontWeight: 600, color: dir.ink,
        letterSpacing: "-0.005em",
      }}>
        <span>9:41</span>
        <span style={{ display: "flex", gap: 5, alignItems: "center" }}>
          <SignalGlyph c={dir.ink} />
          <WifiGlyph c={dir.ink} />
          <BatteryGlyph c={dir.ink} />
        </span>
      </div>
      {children}
    </div>
  );
}

function SignalGlyph({ c = "currentColor" }) {
  return (<svg width="14" height="10" viewBox="0 0 14 10"><rect x="0" y="7" width="2" height="3" fill={c} /><rect x="3" y="5" width="2" height="5" fill={c} /><rect x="6" y="3" width="2" height="7" fill={c} /><rect x="9" y="0" width="2" height="10" fill={c} /></svg>);
}
function WifiGlyph({ c = "currentColor" }) {
  return (<svg width="14" height="10" viewBox="0 0 14 10" fill="none"><path d="M1 4 Q7 -1 13 4" stroke={c} strokeWidth="1.4" /><path d="M3.5 6 Q7 3 10.5 6" stroke={c} strokeWidth="1.4" /><circle cx="7" cy="8.5" r="1" fill={c} /></svg>);
}
function BatteryGlyph({ c = "currentColor" }) {
  return (<svg width="22" height="10" viewBox="0 0 22 10" fill="none"><rect x="0.5" y="0.5" width="18" height="9" rx="2" stroke={c} opacity="0.5" /><rect x="2" y="2" width="14" height="6" rx="1" fill={c} /><rect x="19.5" y="3.5" width="1.5" height="3" rx="0.5" fill={c} opacity="0.5" /></svg>);
}

function TelegramHeader({ dir, title, subtitle, showBack = true }) {
  return (
    <div style={{
      position: "relative", padding: "8px 12px",
      background: "rgba(20,22,28,0.72)",
      WebkitBackdropFilter: "blur(28px) saturate(180%)",
      backdropFilter: "blur(28px) saturate(180%)",
      borderBottom: `0.5px solid ${dir.hairline}`,
      display: "flex", alignItems: "center", gap: 10,
    }}>
      {showBack && (
        <span style={{ color: dir.accent, fontSize: 14, fontWeight: 500, display: "flex", alignItems: "center", gap: 2 }}>
          ‹ <span style={{ fontSize: 11 }}>Conversas</span>
        </span>
      )}
      <div style={{ flex: 1, display: "flex", alignItems: "center", gap: 10, justifyContent: "center" }}>
        <div style={{
          width: 32, height: 32, borderRadius: 999,
          background: `radial-gradient(circle at 30% 25%, ${dir.accent}, ${dir.accent}88)`,
          display: "grid", placeItems: "center",
          boxShadow: `0 0 14px ${dir.accent}44, inset 0 1px 0 rgba(255,255,255,0.3)`,
        }}>
          <EixoSymbol variant="hpta" size={18} fg={dir.accentOn} thick />
        </div>
        <div style={{ lineHeight: 1.1, textAlign: "left" }}>
          <div style={{ fontFamily: dir.display, fontSize: 13.5, fontWeight: 600, letterSpacing: "-0.01em" }}>{title}</div>
          <div style={{ fontSize: 11, color: dir.inkSoft }}>{subtitle}</div>
        </div>
      </div>
      <span style={{ color: dir.accent, fontSize: 18 }}>⋯</span>
    </div>
  );
}

function FrameTelegramPerfil({ dir }) {
  return (
    <PhoneShell dir={dir}>
      <div style={{
        padding: "6px 14px", display: "flex", justifyContent: "space-between",
        color: dir.accent, fontSize: 13, fontWeight: 500,
      }}>
        <span>‹ Conversas</span><span>Editar</span>
      </div>

      {/* hero block */}
      <div style={{
        padding: "20px 18px 22px", display: "flex", flexDirection: "column",
        alignItems: "center", gap: 10,
      }}>
        <div style={{
          width: 104, height: 104, borderRadius: 999,
          background: `radial-gradient(circle at 30% 25%, ${dir.accent}, ${dir.accent}88)`,
          display: "grid", placeItems: "center",
          boxShadow: `0 0 40px ${dir.accent}44, inset 0 2px 0 rgba(255,255,255,0.3), 0 12px 30px -10px rgba(0,0,0,0.6)`,
        }}>
          <EixoSymbol variant="hpta" size={64} fg={dir.accentOn} thick />
        </div>
        <div style={{ fontFamily: dir.display, fontSize: 22, fontWeight: 700, letterSpacing: "-0.025em" }}>
          Eixo · Privado
        </div>
        <div style={{ fontSize: 12, color: dir.inkSoft }}>
          canal · 12.487 inscritos
        </div>
        <div style={{
          marginTop: 2, fontSize: 13, color: dir.inkSoft, textAlign: "center",
          lineHeight: 1.45, padding: "0 14px", maxWidth: 300,
        }}>
          A ciência do hormônio, sem rodeios.<br />Bloodwork · ciclos · PCT · pé-no-chão.
        </div>
      </div>

      {/* action chips */}
      <div style={{ padding: "0 14px 16px", display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr", gap: 6 }}>
        {[
          { l: "Notif.", g: "🔔", on: true },
          { l: "Buscar", g: "🔍" },
          { l: "Stats", g: "📊" },
          { l: "Sair", g: "↗" },
        ].map((a, i) => (
          <div key={i} style={{
            padding: "10px 0", borderRadius: 14,
            background: a.on ? dir.accent : "rgba(255,255,255,0.06)",
            color: a.on ? dir.accentOn : dir.ink,
            display: "flex", flexDirection: "column", alignItems: "center", gap: 4,
            fontSize: 11, fontWeight: 500,
            border: `0.5px solid ${a.on ? "transparent" : dir.hairline}`,
            boxShadow: a.on
              ? `0 6px 18px -6px ${dir.accent}66, inset 0 0.5px 0 rgba(255,255,255,0.3)`
              : "inset 0 0.5px 0 rgba(255,255,255,0.08)",
          }}>
            <span style={{ fontSize: 16 }}>{a.g}</span>{a.l}
          </div>
        ))}
      </div>

      {/* info list — iOS-style grouped */}
      <div style={{ padding: "0 14px 14px" }}>
        <div style={{
          fontSize: 10, letterSpacing: "0.08em", textTransform: "uppercase",
          color: dir.inkMuted, padding: "0 12px 6px", fontFamily: dir.mono,
        }}>Sobre o canal</div>
        <div style={{
          borderRadius: 16, overflow: "hidden",
          background: "rgba(255,255,255,0.05)",
          border: `0.5px solid ${dir.hairline}`,
          boxShadow: "inset 0 0.5px 0 rgba(255,255,255,0.06)",
        }}>
          {[
            { l: "Tipo", v: "Canal privado · convite" },
            { l: "Idioma", v: "Português (BR)" },
            { l: "Regras", v: "Sem fonte, sem post" },
            { l: "Live", v: "Toda quinta · 21h" },
          ].map((r, i, arr) => (
            <div key={i} style={{
              padding: "11px 14px",
              borderBottom: i < arr.length - 1 ? `0.5px solid ${dir.hairline}` : "none",
              display: "flex", justifyContent: "space-between", alignItems: "baseline",
            }}>
              <span style={{ fontSize: 13, color: dir.ink }}>{r.l}</span>
              <span style={{ fontSize: 12, color: dir.inkSoft }}>{r.v}</span>
            </div>
          ))}
        </div>
      </div>

      <div style={{ padding: "0 14px 14px" }}>
        <div style={{
          fontSize: 10, letterSpacing: "0.08em", textTransform: "uppercase",
          color: dir.inkMuted, padding: "0 12px 6px", fontFamily: dir.mono,
        }}>Link de convite</div>
        <div style={{
          borderRadius: 16, padding: "12px 14px",
          background: "rgba(255,255,255,0.05)",
          border: `0.5px solid ${dir.hairline}`,
          fontFamily: dir.mono, fontSize: 13, color: dir.accent,
        }}>
          t.me/eixopharma_privado
        </div>
      </div>
    </PhoneShell>
  );
}

function FrameTelegramFeed({ dir }) {
  return (
    <PhoneShell dir={dir}>
      <TelegramHeader dir={dir} title="Eixo · Privado" subtitle="canal · 12.487 inscritos" />

      {/* pinned banner */}
      <div style={{
        padding: "8px 14px", display: "flex", alignItems: "center", gap: 10,
        background: "rgba(20,22,28,0.6)",
        borderBottom: `0.5px solid ${dir.hairline}`,
        backdropFilter: "blur(20px)",
      }}>
        <span style={{
          width: 3, height: 28, background: dir.accent, borderRadius: 99,
          boxShadow: `0 0 8px ${dir.accent}`,
        }} />
        <div style={{ flex: 1, lineHeight: 1.2 }}>
          <div style={{ fontFamily: dir.mono, fontSize: 9, letterSpacing: "0.12em", textTransform: "uppercase", color: dir.accent }}>
            Fixado · regras
          </div>
          <div style={{ fontSize: 11.5, color: dir.ink, marginTop: 2 }}>
            Sem fonte = sem post. Respeito. Bloodwork primeiro.
          </div>
        </div>
      </div>

      <div style={{
        flex: 1, padding: "12px 14px", display: "flex", flexDirection: "column",
        gap: 10, overflow: "hidden",
      }}>
        <DateChip dir={dir}>14 de maio</DateChip>

        <TgMsg dir={dir} time="09:12" views="1.2k" tag="AULA · NOVA" tagColor={dir.accent}>
          <div style={{ fontFamily: dir.display, fontSize: 14, fontWeight: 700, letterSpacing: "-0.01em" }}>
            Aula 09 — Lendo seu exame sem pirar
          </div>
          <div style={{ fontSize: 12, color: dir.inkSoft, marginTop: 4, lineHeight: 1.4 }}>
            22 min · planilha modelo. Os 3 marcadores que mais importam em on-cycle.
          </div>
          <div style={{
            marginTop: 10, padding: "10px 12px", borderRadius: 14,
            background: "rgba(255,255,255,0.06)",
            border: `0.5px solid ${dir.hairline}`,
            display: "flex", alignItems: "center", gap: 10,
          }}>
            <span style={{
              width: 32, height: 32, borderRadius: 999, background: dir.accent,
              color: dir.accentOn, display: "grid", placeItems: "center", fontSize: 12,
              boxShadow: `0 0 16px ${dir.accent}55`,
            }}>▶</span>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 11.5, color: dir.ink }}>aula-09.mp4</div>
              <div style={{ fontFamily: dir.mono, fontSize: 10, color: dir.inkMuted }}>22:14 · 184 MB</div>
            </div>
          </div>
        </TgMsg>

        <TgMsg dir={dir} time="10:48" views="892" tag="POLL">
          <div style={{ fontSize: 12.5, color: dir.ink, marginBottom: 8 }}>
            Quantos bloodworks você fez nos últimos 12 meses?
          </div>
          {[
            { l: "0", p: 18 }, { l: "1–2", p: 51 },
            { l: "3–5", p: 24 }, { l: "6+", p: 7 },
          ].map((o, i) => (
            <div key={i} style={{ marginBottom: 6 }}>
              <div style={{ display: "flex", justifyContent: "space-between", fontFamily: dir.mono, fontSize: 10, color: dir.inkSoft }}>
                <span>{o.l}</span><span>{o.p}%</span>
              </div>
              <div style={{ height: 5, background: "rgba(255,255,255,0.08)", marginTop: 3, borderRadius: 99, overflow: "hidden" }}>
                <div style={{
                  width: `${o.p}%`, height: "100%",
                  background: `linear-gradient(90deg, ${dir.accent}, ${dir.accent}cc)`,
                  borderRadius: 99,
                }} />
              </div>
            </div>
          ))}
          <div style={{ fontFamily: dir.mono, fontSize: 9, color: dir.inkMuted, marginTop: 6 }}>
            1.847 votos · anônimo
          </div>
        </TgMsg>

        <TgMsg dir={dir} time="11:30" views="640" tag="VOZ · 4min12s">
          <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "4px 0" }}>
            <span style={{
              width: 32, height: 32, borderRadius: 999, background: dir.accent,
              color: dir.accentOn, display: "grid", placeItems: "center", fontSize: 13,
              boxShadow: `0 0 16px ${dir.accent}55`,
            }}>▶</span>
            <svg viewBox="0 0 200 30" preserveAspectRatio="none" style={{ flex: 1, height: 28 }}>
              {Array.from({ length: 60 }).map((_, i) => {
                const h = 6 + Math.abs(Math.sin(i * 0.7) * 9) + (i % 3) * 2;
                return <rect key={i} x={i * 3.4} y={15 - h / 2} width="1.8" height={h}
                              rx="1" fill={dir.accent} opacity={i < 22 ? 1 : 0.32} />;
              })}
            </svg>
            <span style={{ fontFamily: dir.mono, fontSize: 10, color: dir.inkSoft }}>4:12</span>
          </div>
          <div style={{ fontFamily: dir.mono, fontSize: 9, color: dir.inkMuted, marginTop: 4 }}>
            Coach Rafa · sobre o sono antes de mexer em dose
          </div>
        </TgMsg>
      </div>

      <div style={{
        padding: "12px 14px",
        background: "rgba(20,22,28,0.72)",
        WebkitBackdropFilter: "blur(28px) saturate(180%)",
        backdropFilter: "blur(28px) saturate(180%)",
        borderTop: `0.5px solid ${dir.hairline}`,
        fontFamily: dir.body, fontSize: 11, color: dir.inkMuted,
        textAlign: "center",
      }}>
        🔇 canal · <span style={{ color: dir.accent }}>grupo de discussão ›</span>
      </div>
    </PhoneShell>
  );
}

function TgMsg({ dir, time, views, tag, tagColor, children }) {
  return (
    <div style={{
      padding: 12, borderRadius: 18, alignSelf: "stretch",
      background: "rgba(28,30,38,0.6)",
      WebkitBackdropFilter: "blur(18px) saturate(180%)",
      backdropFilter: "blur(18px) saturate(180%)",
      border: `0.5px solid ${dir.hairline}`,
      borderLeft: tagColor ? `2px solid ${tagColor}` : `0.5px solid ${dir.hairline}`,
      boxShadow: "inset 0 0.5px 0 rgba(255,255,255,0.06), 0 2px 8px rgba(0,0,0,0.25)",
    }}>
      {tag && (
        <div style={{
          fontFamily: dir.mono, fontSize: 9, letterSpacing: "0.14em",
          textTransform: "uppercase", color: tagColor || dir.inkMuted, marginBottom: 6,
          display: "inline-flex", alignItems: "center", gap: 6,
        }}>
          <span style={{
            width: 5, height: 5, borderRadius: 99, background: tagColor || dir.inkMuted,
            boxShadow: tagColor ? `0 0 8px ${tagColor}` : "none",
          }} />
          {tag}
        </div>
      )}
      {children}
      <div style={{
        marginTop: 8, display: "flex", justifyContent: "flex-end", gap: 8,
        fontFamily: dir.mono, fontSize: 9, color: dir.inkMuted,
      }}>
        <span>👁 {views}</span><span>{time}</span>
      </div>
    </div>
  );
}

function DateChip({ dir, children }) {
  return (
    <div style={{
      alignSelf: "center", padding: "4px 12px", borderRadius: 999,
      background: "rgba(255,255,255,0.08)",
      WebkitBackdropFilter: "blur(12px)",
      backdropFilter: "blur(12px)",
      border: `0.5px solid ${dir.hairline}`,
      fontFamily: dir.body, fontSize: 10, fontWeight: 500,
      color: dir.inkSoft,
    }}>{children}</div>
  );
}

function FrameTelegramBot({ dir }) {
  return (
    <PhoneShell dir={dir}>
      <TelegramHeader dir={dir} title="@eixo_bot" subtitle="bot · oficial" />

      <div style={{
        flex: 1, padding: "12px 14px", display: "flex", flexDirection: "column",
        gap: 10, overflow: "hidden",
      }}>
        <DateChip dir={dir}>hoje</DateChip>

        <BotBubble dir={dir}>
          <div style={{ fontFamily: dir.display, fontSize: 14, fontWeight: 700, letterSpacing: "-0.01em" }}>
            Bem-vindo, João.
          </div>
          <div style={{ fontSize: 12.5, color: dir.inkSoft, marginTop: 6, lineHeight: 1.45 }}>
            Você está no canal <b style={{ color: dir.ink, fontWeight: 600 }}>Eixo · Privado</b>. Três perguntas rápidas pra te direcionar.
          </div>
        </BotBubble>

        <BotBubble dir={dir}>
          <div style={{ fontSize: 13, color: dir.ink, marginBottom: 10 }}>
            1 · Você já fez algum ciclo?
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
            {["Nunca", "Estou no primeiro", "Já fechei 1 ou 2", "Mais que isso"].map((tt, i) => (
              <div key={tt} style={{
                padding: "9px 12px", borderRadius: 12,
                background: i === 2 ? dir.accent : "rgba(255,255,255,0.06)",
                color: i === 2 ? dir.accentOn : dir.ink,
                fontSize: 12.5, fontWeight: i === 2 ? 600 : 500,
                border: `0.5px solid ${i === 2 ? "transparent" : dir.hairline}`,
                textAlign: "center",
                boxShadow: i === 2
                  ? `0 4px 12px -3px ${dir.accent}55, inset 0 0.5px 0 rgba(255,255,255,0.3)`
                  : "inset 0 0.5px 0 rgba(255,255,255,0.06)",
              }}>{tt}</div>
            ))}
          </div>
          <div style={{ fontFamily: dir.mono, fontSize: 9, color: dir.inkMuted, marginTop: 8, textAlign: "right" }}>
            enviado · 14:32 ✓✓
          </div>
        </BotBubble>

        <BotBubble dir={dir}>
          <div style={{
            fontFamily: dir.mono, fontSize: 9, letterSpacing: "0.14em",
            textTransform: "uppercase", color: dir.accent, marginBottom: 6,
            display: "inline-flex", alignItems: "center", gap: 6,
          }}>
            <span style={{ width: 5, height: 5, borderRadius: 99, background: dir.accent, boxShadow: `0 0 8px ${dir.accent}` }} />
            Próximo passo
          </div>
          <div style={{ fontSize: 13, color: dir.ink, lineHeight: 1.45 }}>
            Beleza. Liberei o grupo de discussão e a aula <b style={{ fontWeight: 600 }}>"Lendo seu exame sem pirar"</b>.
          </div>
          <button style={{
            marginTop: 10, background: dir.accent, color: dir.accentOn, border: "none",
            padding: "10px 14px", fontFamily: dir.display, fontWeight: 700,
            fontSize: 12.5, width: "100%", borderRadius: 999,
            boxShadow: `0 6px 18px -4px ${dir.accent}66, inset 0 0.5px 0 rgba(255,255,255,0.3)`,
          }}>Abrir grupo de discussão →</button>
        </BotBubble>
      </div>
    </PhoneShell>
  );
}

function BotBubble({ dir, children }) {
  return (
    <div style={{
      padding: 12, alignSelf: "flex-start", maxWidth: "88%",
      borderRadius: 18, borderTopLeftRadius: 4,
      background: "rgba(28,30,38,0.6)",
      WebkitBackdropFilter: "blur(18px) saturate(180%)",
      backdropFilter: "blur(18px) saturate(180%)",
      border: `0.5px solid ${dir.hairline}`,
      boxShadow: "inset 0 0.5px 0 rgba(255,255,255,0.06), 0 2px 8px rgba(0,0,0,0.25)",
    }}>{children}</div>
  );
}

function FrameTelegramStickers({ dir }) {
  const stickers = [
    { bg: "rgba(28,30,38,0.6)", c: <EixoSymbol variant="hpta" size={56} fg={dir.accent} thick /> },
    { bg: "rgba(28,30,38,0.6)", c: <span style={{ fontFamily: dir.display, fontSize: 42, fontWeight: 800, letterSpacing: "-0.04em", color: dir.accent }}>OK</span> },
    { bg: `radial-gradient(circle at 30% 25%, ${dir.accent}, ${dir.accent}cc)`, c: <span style={{ fontFamily: dir.display, fontSize: 13, fontWeight: 800, color: dir.accentOn, letterSpacing: "-0.01em", textAlign: "center", lineHeight: 1.05 }}>FONTE<br />OU<br />FORA</span> },
    { bg: "rgba(28,30,38,0.6)", c: <span style={{ fontFamily: dir.display, fontSize: 13, fontWeight: 700, color: dir.ink, textAlign: "center", lineHeight: 1.05 }}>BLOOD<br />WORK<br />PRIMEIRO</span> },
    { bg: "rgba(28,30,38,0.6)", c: Pictograms.syringe(52, dir.accent) },
    { bg: "rgba(28,30,38,0.6)", c: Pictograms.dumbbell(52, dir.ink) },
    { bg: `radial-gradient(circle at 30% 25%, ${dir.accent}, ${dir.accent}cc)`, c: <span style={{ fontFamily: dir.display, fontSize: 32, fontWeight: 800, color: dir.accentOn, letterSpacing: "-0.02em" }}>PCT</span> },
    { bg: "rgba(28,30,38,0.6)", c: Pictograms.cycle(52, dir.accent) },
  ];
  return (
    <div style={{
      width: "100%", height: "100%", color: dir.ink, fontFamily: dir.body,
      background: `radial-gradient(120% 60% at 80% 0%, rgba(215,255,58,0.10), transparent 50%), ${dir.bg}`,
      padding: 24, display: "flex", flexDirection: "column", gap: 14,
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
        <div>
          <Eyebrow dir={dir}>STICKER PACK · CUSTOM EMOJI</Eyebrow>
          <div style={{ fontFamily: dir.display, fontSize: 22, fontWeight: 700, letterSpacing: "-0.025em", marginTop: 6 }}>
            Eixo · figurinhas
          </div>
        </div>
        <div style={{
          fontFamily: dir.mono, fontSize: 11, letterSpacing: "0.04em",
          color: dir.inkSoft,
        }}>t.me/addstickers/eixo</div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 10 }}>
        {stickers.map((s, i) => (
          <div key={i} style={{
            aspectRatio: "1/1", background: s.bg, display: "grid", placeItems: "center",
            borderRadius: 22, padding: 10,
            border: `0.5px solid ${dir.hairline}`,
            WebkitBackdropFilter: "blur(18px) saturate(180%)",
            backdropFilter: "blur(18px) saturate(180%)",
            boxShadow: "inset 0 0.5px 0 rgba(255,255,255,0.08), 0 10px 24px -8px rgba(0,0,0,0.5)",
          }}>{s.c}</div>
        ))}
      </div>

      <div style={{
        fontFamily: dir.mono, fontSize: 11, letterSpacing: "0.06em",
        color: dir.inkMuted, marginTop: "auto",
      }}>
        ● Reações afiadas no lugar do 👍 vazio. Use com economia.
      </div>
    </div>
  );
}

Object.assign(window, {
  FrameLanding, FrameRecibo, FrameOG,
  FrameConfirmacao, FrameEmail,
  FrameTelegramPerfil, FrameTelegramFeed, FrameTelegramBot, FrameTelegramStickers,
  TelegramGlyph, PhoneShell, TelegramHeader, TgMsg, DateChip, BotBubble,
});