// ─────────────────────────────────────────────────────────────
// ABA CONSULTA — Tela única dedicada ao agendamento
// CTA grande LOGO NO TOPO. Sem rolagem para encontrar.
// ─────────────────────────────────────────────────────────────

function ConsultaScreen({ t, onSaibaMais }) {
  return (
    <div style={{
      position: "absolute", inset: 0,
      background: t.bg0, color: t.ink1,
      paddingTop: 56, paddingBottom: 100,
      overflowY: "auto", overflowX: "hidden",
      WebkitOverflowScrolling: "touch",
      display: "flex", flexDirection: "column",
    }}>
      {/* HEADER + CTA GRANDE — visível sem rolar */}
      <div style={{ padding: "20px 20px 4px" }}>
        <div style={{
          fontFamily: TYPE.sans, fontSize: 10, color: t.ink3,
          letterSpacing: "0.22em", textTransform: "uppercase", fontWeight: 700,
          marginBottom: 12,
        }}>Consulta</div>

        <h1 style={{
          fontFamily: TYPE.display, fontSize: 64, lineHeight: 0.92, color: t.ink1,
          letterSpacing: "-0.015em", margin: "0 0 22px", textTransform: "uppercase",
        }}>Agendar<br/>consulta</h1>

        {/* CTA principal GRANDE no topo */}
        <a
          href={waLink("Olá Dr. Ulisses, gostaria de agendar uma consulta.")}
          target="_blank" rel="noreferrer"
          className="cta-agendar"
          style={{
            position: "relative", overflow: "hidden",
            display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 4,
            padding: "20px 20px",
            background: t.ink1, color: t.bg0,
            borderRadius: RADIUS.md, textDecoration: "none",
            fontFamily: TYPE.sans,
            textAlign: "center",
            boxShadow: "0 10px 28px rgba(0,0,0,0.4)",
          }}
        >
          <span style={{
            fontSize: 16, fontWeight: 800, letterSpacing: "0.10em",
            textTransform: "uppercase", lineHeight: 1.1,
          }}>Agendar Consulta</span>
          <span style={{
            fontSize: 11, fontWeight: 700, letterSpacing: "0.16em",
            textTransform: "uppercase", opacity: 0.72, lineHeight: 1.1,
          }}>Com o Dr. Ulisses Nakagawa</span>
          <span aria-hidden="true" className="cta-sheen"></span>
        </a>

        {/* SAIBA MAIS — abre o detalhamento do atendimento */}
        <button
          onClick={onSaibaMais}
          style={{
            display: "flex", alignItems: "center", justifyContent: "center", gap: 8,
            width: "100%", marginTop: 10, padding: "15px 18px",
            background: "transparent", color: t.ink1,
            border: `1px solid ${t.border}`, borderRadius: RADIUS.md,
            cursor: "pointer", boxSizing: "border-box",
            fontFamily: TYPE.sans, fontSize: 13, fontWeight: 800,
            letterSpacing: "0.10em", textTransform: "uppercase", whiteSpace: "nowrap",
          }}
        >
          Saiba mais
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <path d="m5 12h14M13 6l6 6-6 6"></path>
          </svg>
        </button>

        <div style={{
          marginTop: 10,
          fontFamily: TYPE.sans, fontSize: 11, color: t.ink3, lineHeight: 1.55,
          textAlign: "center",
        }}>
          Resposta em até 24h em dias úteis.
        </div>
      </div>

      {/* DESCRIÇÃO DO MÉDICO — abaixo do botão, antes das modalidades */}
      <div style={{
        margin: "18px 16px 0", padding: "18px 20px",
        background: t.bg1, border: `1px solid ${t.border}`,
        borderRadius: RADIUS.lg, textAlign: "center",
      }}>
        <div style={{
          fontFamily: TYPE.display, fontSize: 22, color: t.ink1,
          letterSpacing: "-0.005em", lineHeight: 1.1, textTransform: "uppercase",
          marginBottom: 6,
        }}>Dr. Ulisses Nakagawa</div>
        <div style={{
          fontFamily: TYPE.sans, fontSize: 12.5, color: t.ink2, fontWeight: 600,
          lineHeight: 1.5,
        }}>Médico e Farmacêutico</div>
        <div style={{
          fontFamily: TYPE.sans, fontSize: 10.5, color: t.ink3, fontWeight: 700,
          letterSpacing: "0.14em", textTransform: "uppercase", marginTop: 4,
        }}>CRM-MS 16293</div>
      </div>

      {/* MODALIDADES — 100% online + trilíngue */}
      <div style={{ padding: "22px 16px 12px", flex: 1, display: "flex", flexDirection: "column" }}>
        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8,
        }}>
          <div style={{
            padding: "16px 14px",
            background: t.bg1, border: `1px solid ${t.border}`,
            borderRadius: RADIUS.md,
          }}>
            <div style={{
              fontFamily: TYPE.sans, fontSize: 9.5, color: t.ink3,
              letterSpacing: "0.16em", textTransform: "uppercase", fontWeight: 700,
              marginBottom: 6,
            }}>100% Online</div>
            <div style={{
              fontFamily: TYPE.display, fontSize: 18, color: t.ink1,
              letterSpacing: "-0.005em", lineHeight: 1.1, textTransform: "uppercase",
            }}>Mundo<br/>inteiro</div>
            <div style={{
              fontFamily: TYPE.sans, fontSize: 11.5, color: t.ink3, marginTop: 6, lineHeight: 1.5,
            }}>{nl2br("Por videochamada, no conforto da tua casa")}</div>
          </div>
          <div style={{
            padding: "16px 14px",
            background: t.bg1, border: `1px solid ${t.border}`,
            borderRadius: RADIUS.md,
          }}>
            <div style={{
              fontFamily: TYPE.sans, fontSize: 9.5, color: t.ink3,
              letterSpacing: "0.16em", textTransform: "uppercase", fontWeight: 700,
              marginBottom: 6,
            }}>Trilíngue</div>
            <div style={{
              fontFamily: TYPE.display, fontSize: 18, color: t.ink1,
              letterSpacing: "-0.005em", lineHeight: 1.1, textTransform: "uppercase",
            }}>PT · ES · EN</div>
            <div style={{
              fontFamily: TYPE.sans, fontSize: 11.5, color: t.ink3, marginTop: 6, lineHeight: 1.5,
            }}>Atendimento em português, espanhol e inglês</div>
          </div>
        </div>
      </div>

      {/* RODAPÉ */}
      <div style={{
        padding: "20px 24px 12px",
        fontFamily: TYPE.sans, fontSize: 10.5, color: t.ink3, lineHeight: 1.6,
        textAlign: "center",
        borderTop: `1px solid ${t.border}`,
        marginTop: 18,
      }}>
        Conteúdo educativo no app não substitui consulta médica.
      </div>
    </div>
  );
}

Object.assign(window, { ConsultaScreen });