// ─────────────────────────────────────────────────────────────
// TELA ATENDIMENTO ("Saiba mais") — detalhamento da consulta
// Recria o conteúdo do antigo atendimento.html no visual editorial.
// Abre a partir do botão "Saiba mais" na aba Consulta.
// ─────────────────────────────────────────────────────────────

const { useState: _useStateAt } = React;

// EDITAR: os textos dos serviços ficam aqui embaixo, em SERVICOS.
const ATEND_AREAS = ["Emagrecimento", "Performance Esportiva", "Saúde e Longevidade", "Estética e Autoestima"];

const ATEND_ONLINE = ["Consultas", "Exames", "Receitas", "Avaliações Físicas"];

const ATEND_STEPS = [
  {
    n: "01", title: "Avaliação Completa",
    items: [
      "Analiso tua saúde por completo",
      "Entendo tua rotina, contexto e teu bolso",
      "Avaliação de gordura e massa muscular",
      "Exames laboratoriais",
    ],
  },
  {
    n: "02", title: "Estratégia Inteligente",
    items: [
      "Construo uma estratégia inteligente",
      "Medicações, hormônios",
      "Suplementos e manipulados",
      "Receita médica no teu celular",
    ],
    note: "quando necessários",
  },
  {
    n: "03", title: "Esporte e Disciplina",
    items: [
      "Você faz a tua parte",
      "Precisa sair de casa para treinar",
      "Esporte também é remédio",
      "Dieta prática e sem frescura",
    ],
  },
];

const ATEND_SERVICOS = [
  {
    id: "consulta",
    icon: "🩺",
    title: "Consulta Médica",
    headline: "Clareza para você que busca",
    items: [
      "Entender como anda tua saúde",
      "Um médico para te orientar",
      "Medicações, hormônios",
      "Suplementos e manipulados",
      "Exames laboratoriais de forma inteligente",
      "Receita médica direto no celular",
      "Avaliação física sem sair de casa para medir gordura e massa muscular",
    ],
    priceLabel: "Consulta médica completa",
    price: "R$ 450",
    priceNote: null,
    cta: "Agendar consulta",
    wa: "Fala Dr. Ulisses Nakagawa, quero marcar minha consulta médica.",
  },
  {
    id: "acomp",
    icon: "🗓️",
    title: "Acompanhamento",
    headline: "Conduzo todo teu caminho",
    items: [
      "4 consultas médicas em 90 dias",
      "4 avaliações físicas sem sair de casa\npara medir gordura e massa muscular",
      "Medicações, hormônios",
      "Suplementos e manipulados",
      "Exames laboratoriais de forma inteligente",
      "Rotina ajustada para resultados",
      "Contato direto comigo pelo WhatsApp",
      "Dieta sem frescura com nutricionista",
      "Ganhe dinheiro pela sua evolução",
    ],
    priceLabel: "Assessoria esportiva a partir de 90 dias",
    price: "R$ 1.800",
    priceNote: "à vista · ou R$ 2.200 parcelado",
    cashback: "Até R$ 300 de retorno\ncumpra metas e receba automaticamente\ncashback para incentivar tua evolução.",
    condicoes: ["Uso atual ou prévio de hormônios", "Uso de substâncias para fins estéticos"],
    condicoesNota: "Para garantir a condução adequada que esses protocolos exigem, o formato e o investimento do acompanhamento serão proporcionais à complexidade do caso. Condução médica com ética, responsabilidade e evidências para preservar tua saúde.",
    cta: "Começar acompanhamento",
    wa: "Fala Dr. Ulisses Nakagawa, quero começar o acompanhamento de 90 dias.",
  },
];

function AtendimentoScreen({ t, onBack }) {
  const [aberto, setAberto] = _useStateAt("consulta");

  const labelStyle = {
    fontFamily: TYPE.sans, fontSize: 10, color: t.ink3,
    letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700,
  };

  return (
    <div style={{
      position: "absolute", inset: 0,
      background: t.bg0, color: t.ink1,
      paddingTop: 56, paddingBottom: 110,
      overflowY: "auto", overflowX: "hidden",
      WebkitOverflowScrolling: "touch",
    }}>
      {/* TOPO STICKY */}
      <div style={{
        position: "sticky", top: 0, zIndex: 20,
        background: t.bg0,
        backdropFilter: "blur(20px)", WebkitBackdropFilter: "blur(20px)",
        padding: "10px 14px 12px",
        borderBottom: `1px solid ${t.border}`,
        display: "flex", alignItems: "center", gap: 12,
        boxShadow: `0 6px 16px ${t.bg0}`,
      }}>
        <button onClick={onBack} style={{
          flexShrink: 0, width: 38, height: 38, borderRadius: 999,
          background: t.bg1, border: `1px solid ${t.border}`,
          display: "flex", alignItems: "center", justifyContent: "center",
          color: t.ink2, cursor: "pointer",
        }}>
          <Icon name="back" size={16} stroke="currentColor" />
        </button>
        <span style={labelStyle}>Atendimento</span>
      </div>

      {/* HERO */}
      <div style={{ padding: "22px 24px 18px" }}>
        <h1 style={{
          fontFamily: TYPE.display, fontSize: 52, lineHeight: 0.92, color: t.ink1,
          letterSpacing: "-0.015em", margin: "0 0 18px", textTransform: "uppercase",
        }}>Atendimento<br/>Online</h1>
        <div style={{
          fontFamily: TYPE.display, fontSize: 20, color: t.ink1,
          letterSpacing: "-0.005em", lineHeight: 1.1, textTransform: "uppercase",
        }}>Dr. Ulisses Nakagawa</div>
        <div style={{
          fontFamily: TYPE.sans, fontSize: 11, color: t.ink3, marginTop: 8,
          letterSpacing: "0.10em", textTransform: "uppercase", fontWeight: 700,
        }}>Médico e Farmacêutico · CRM-MS 16293</div>
      </div>

      {/* ÁREAS DE ATUAÇÃO */}
      <div style={{ padding: "0 16px 8px" }}>
        <div style={{
          background: t.bg1, border: `1px solid ${t.border}`,
          borderRadius: RADIUS.lg, padding: "20px 22px",
        }}>
          <div style={{ ...labelStyle, marginBottom: 8 }}>Áreas de atuação</div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
            {ATEND_AREAS.map((a, i, arr) => (
              <li key={a} style={{
                display: "flex", gap: 12, padding: "12px 0", alignItems: "center",
                borderBottom: i < arr.length - 1 ? `1px solid ${t.border}` : "none",
                fontFamily: TYPE.sans, fontSize: 14, fontWeight: 600, color: t.ink1,
              }}>
                <span style={{ flexShrink: 0, color: t.ink1 }}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="m5 12 5 5 9-11"/></svg>
                </span>
                <span style={{ flex: 1 }}>{a}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>

      {/* 100% ONLINE */}
      <div style={{ padding: "8px 16px 8px" }}>
        <div style={{
          background: t.bg1, border: `1px solid ${t.border}`,
          borderRadius: RADIUS.lg, padding: "20px 22px",
        }}>
          <div style={{ ...labelStyle, marginBottom: 6 }}>100% Online</div>
          <div style={{
            fontFamily: TYPE.display, fontSize: 22, color: t.ink1,
            letterSpacing: "-0.005em", lineHeight: 1.1, textTransform: "uppercase", marginBottom: 8,
          }}>Tudo no conforto da tua casa</div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
            {ATEND_ONLINE.map((a, i, arr) => (
              <li key={a} style={{
                display: "flex", gap: 12, padding: "12px 0", alignItems: "center",
                borderBottom: i < arr.length - 1 ? `1px solid ${t.border}` : "none",
                fontFamily: TYPE.sans, fontSize: 14, fontWeight: 600, color: t.ink1,
              }}>
                <span style={{ flexShrink: 0, color: t.ink1 }}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="m5 12 5 5 9-11"/></svg>
                </span>
                <span style={{ flex: 1 }}>{a}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>

      {/* COMO FUNCIONA */}
      <div style={{ padding: "16px 24px 8px" }}>
        <div style={{ ...labelStyle, marginBottom: 16 }}>Como funciona</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {ATEND_STEPS.map((s) => (
            <div key={s.n} style={{
              background: t.bg1, border: `1px solid ${t.border}`,
              borderRadius: RADIUS.md, padding: "18px 20px",
            }}>
              <div style={{ display: "flex", alignItems: "baseline", gap: 12, marginBottom: 12 }}>
                <span style={{
                  fontFamily: TYPE.display, fontSize: 26, color: t.ink3,
                  letterSpacing: "-0.01em", lineHeight: 1, fontVariantNumeric: "tabular-nums",
                }}>{s.n}</span>
                <span style={{
                  fontFamily: TYPE.display, fontSize: 19, color: t.ink1,
                  letterSpacing: "-0.005em", lineHeight: 1.05, textTransform: "uppercase",
                }}>{s.title}</span>
              </div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
                {s.items.map((it, i) => (
                  <li key={i} style={{
                    display: "flex", gap: 10, padding: "6px 0",
                    fontFamily: TYPE.sans, fontSize: 13, lineHeight: 1.5, color: t.ink2,
                  }}>
                    <span style={{ flexShrink: 0, marginTop: 4, color: t.ink1 }}>
                      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="m5 12 5 5 9-11"/></svg>
                    </span>
                    <span style={{ flex: 1, whiteSpace: "pre-line" }}>{it}</span>
                  </li>
                ))}
              </ul>
              {s.note && (
                <div style={{
                  marginTop: 6, paddingLeft: 23,
                  fontFamily: TYPE.sans, fontSize: 12, fontStyle: "italic",
                  color: t.ink3, lineHeight: 1.4,
                }}>{s.note}</div>
              )}
            </div>
          ))}
        </div>
      </div>

      {/* PRINCÍPIOS */}
      <div style={{ padding: "8px 16px 8px" }}>
        <div style={{
          background: t.bg1, border: `1px solid ${t.border}`,
          borderRadius: RADIUS.lg, padding: "20px 22px",
          display: "flex", flexDirection: "column", gap: 8, textAlign: "center",
        }}>
          <span style={{ fontFamily: TYPE.sans, fontSize: 12.5, color: t.ink2, lineHeight: 1.5 }}>Totalmente online, para o mundo inteiro</span>
          <span style={{ fontFamily: TYPE.sans, fontSize: 12.5, color: t.ink2, lineHeight: 1.5 }}>Com ética, responsabilidade e evidências</span>
          <span style={{
            fontFamily: TYPE.display, fontSize: 20, color: t.ink1, marginTop: 4,
            letterSpacing: "-0.005em", textTransform: "uppercase",
          }}>Sem inventar moda!</span>
        </div>
      </div>

      {/* SERVIÇOS — acordeões */}
      <div style={{ padding: "16px 24px 8px" }}>
        <div style={{ ...labelStyle, marginBottom: 16 }}>O que você precisa hoje?</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {ATEND_SERVICOS.map((sv) => {
            const open = aberto === sv.id;
            return (
              <div key={sv.id} style={{
                background: t.bg1, border: `1px solid ${open ? t.borderStrong : t.border}`,
                borderRadius: RADIUS.md, overflow: "hidden",
                transition: "border-color 0.2s ease",
              }}>
                <button
                  onClick={() => setAberto(open ? null : sv.id)}
                  style={{
                    width: "100%", padding: "18px 20px",
                    background: "transparent", border: "none", cursor: "pointer",
                    display: "flex", alignItems: "center", gap: 12,
                    fontFamily: TYPE.sans, textAlign: "left",
                  }}
                >
                  <span style={{ fontSize: 20, flexShrink: 0 }}>{sv.icon}</span>
                  <span style={{
                    flex: 1, fontFamily: TYPE.display, fontSize: 19, color: t.ink1,
                    letterSpacing: "-0.005em", textTransform: "uppercase",
                  }}>{sv.title}</span>
                  <span style={{
                    flexShrink: 0, fontSize: 22, color: t.ink3, lineHeight: 1,
                    transform: open ? "rotate(45deg)" : "none", transition: "transform 0.2s ease",
                  }}>+</span>
                </button>

                {open && (
                  <div style={{ padding: "0 20px 22px" }}>
                    <div style={{
                      fontFamily: TYPE.sans, fontSize: 13.5, fontWeight: 700, color: t.ink1,
                      marginBottom: 12,
                    }}>{sv.headline}</div>
                    <ul style={{ listStyle: "none", padding: 0, margin: "0 0 18px" }}>
                      {sv.items.map((it, i) => (
                        <li key={i} style={{
                          display: "flex", gap: 10, padding: "7px 0",
                          borderBottom: i < sv.items.length - 1 ? `1px solid ${t.border}` : "none",
                          fontFamily: TYPE.sans, fontSize: 13, lineHeight: 1.5, color: t.ink2,
                        }}>
                          <span style={{ flexShrink: 0, marginTop: 4, color: t.ink1 }}>
                            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="m5 12 5 5 9-11"/></svg>
                          </span>
                          <span style={{ flex: 1, whiteSpace: "pre-line" }}>{it}</span>
                        </li>
                      ))}
                    </ul>

                    {/* PREÇO + CTA */}
                    <a
                      href={waLink(sv.wa)} target="_blank" rel="noreferrer"
                      style={{
                        display: "block", textDecoration: "none",
                        background: t.bg2, border: `1px solid ${t.border}`,
                        borderRadius: RADIUS.md, padding: "18px 18px", textAlign: "center",
                      }}
                    >
                      <div style={{
                        fontFamily: TYPE.sans, fontSize: 11, color: t.ink3, marginBottom: 6,
                      }}>{sv.priceLabel}</div>
                      <div style={{
                        fontFamily: TYPE.display, fontSize: 36, color: t.ink1,
                        lineHeight: 1, letterSpacing: "-0.01em",
                      }}>{sv.price}</div>
                      {sv.priceNote && (
                        <div style={{
                          fontFamily: TYPE.sans, fontSize: 11.5, color: t.ink3, marginTop: 6,
                        }}>{sv.priceNote}</div>
                      )}
                      <div style={{
                        marginTop: 14, padding: "12px 16px",
                        background: t.ink1, color: t.bg0, borderRadius: RADIUS.sm || 10,
                        fontFamily: TYPE.sans, fontSize: 13, fontWeight: 800,
                        letterSpacing: "0.10em", textTransform: "uppercase",
                      }}>{sv.cta}</div>
                    </a>

                    {sv.cashback && (
                      <div style={{
                        marginTop: 14, padding: "16px 18px",
                        background: "rgba(34,160,90,0.10)", border: `1px solid ${t.success}`,
                        borderRadius: RADIUS.md, textAlign: "center",
                        fontFamily: TYPE.sans, fontSize: 12.5, color: t.success, lineHeight: 1.55,
                        fontWeight: 600, whiteSpace: "pre-line",
                      }}>{sv.cashback}</div>
                    )}

                    {sv.condicoes && (
                      <div style={{
                        marginTop: 14, padding: "16px 18px",
                        background: "transparent", border: `1px solid ${t.border}`,
                        borderRadius: RADIUS.md,
                      }}>
                        <div style={{ ...labelStyle, marginBottom: 10 }}>Condições de acompanhamento</div>
                        <ul style={{ listStyle: "none", padding: 0, margin: "0 0 10px" }}>
                          {sv.condicoes.map((c, i) => (
                            <li key={i} style={{
                              fontFamily: TYPE.sans, fontSize: 12.5, color: t.ink2, lineHeight: 1.5,
                              padding: "3px 0",
                            }}>· {c}</li>
                          ))}
                        </ul>
                        <div style={{
                          fontFamily: TYPE.sans, fontSize: 11.5, color: t.ink3, lineHeight: 1.55,
                          borderTop: `1px solid ${t.border}`, paddingTop: 12, textAlign: "justify",
                        }}>{sv.condicoesNota}</div>
                      </div>
                    )}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>

      {/* FALE COM A EQUIPE */}
      <div style={{ padding: "16px 24px 8px", textAlign: "center" }}>
        <a
          href={waLink("Olá, gostaria de mais informações sobre o atendimento.")}
          target="_blank" rel="noreferrer"
          style={{
            display: "inline-block",
            fontFamily: TYPE.sans, fontSize: 12.5, color: t.ink2, fontWeight: 700,
            letterSpacing: "0.04em", textDecoration: "none",
            padding: "12px 22px", borderRadius: 999, border: `1px solid ${t.border}`,
          }}
        >Ficou com dúvida? Fale com a equipe</a>
      </div>

      {/* NOTA FINAL */}
      <div style={{
        padding: "22px 24px 12px",
        fontFamily: TYPE.sans, fontSize: 11, color: t.ink3, lineHeight: 1.7,
        textAlign: "center",
      }}>
        Atendimento direto comigo e minha equipe.<br/>
        Vagas limitadas.<br/>
        Novas vagas são abertas com reajuste de valor.
      </div>
    </div>
  );
}

Object.assign(window, { AtendimentoScreen });