// service-detail.jsx — Detail drawer for each treatment

const SERVICE_DETAILS = {
  "01": {
    tagline: "Veja, em tempo real, o que está acontecendo dentro do seu organismo.",
    intro: "Uma gota de sangue. Uma tela. Você e a equipe acompanhando juntos — em poucos minutos, uma janela funcional para o que seus exames convencionais não mostram.",
    whatIs: "Observação ao microscópio de campo escuro de uma única gota de sangue fresca, em movimento. Revelamos marcadores funcionais que exames laboratoriais padrão não capturam.",
    forWhom: [
      "Cansaço crônico ou baixa imunidade sem causa definida",
      "Inflamações recorrentes, retenção ou oxidação acelerada",
      "Quem quer prevenir antes da doença se instalar"
    ],
    benefits: [
      "Diagnóstico funcional precoce",
      "Visualiza o que exames padrão não revelam",
      "Personaliza protocolos com precisão"
    ],
    duration: "Sessão de 60 minutos",
    note: "Exclusivo da Clínica Longevidade e Saúde em Goiânia.",
    video: "videos/sangue-vivo.mp4"
  },

  "02": {
    tagline: "A porta de entrada do Método VIDA — uma consulta que escuta o todo.",
    intro: "A base de tudo. Aqui, sua história, sintomas, exames e estilo de vida se encontram para revelar o que o corpo está pedindo.",
    whatIs: "Consulta longa e integrativa, olhando para o organismo de forma sistêmica. Investigamos a causa, a interação entre os sistemas e o seu momento de vida.",
    forWhom: [
      "Toda paciente nova da clínica",
      "Quem tem múltiplos sintomas sem diagnóstico claro",
      "Quem quer envelhecer com saúde e qualidade de vida"
    ],
    benefits: [
      "Visão integrada do organismo",
      "Plano construído com você, no seu ritmo",
      "Consulta de até 90 minutos"
    ],
    duration: "Consulta de até 90 minutos",
    note: "Recomendamos chegar com 15 min de antecedência para preencher a ficha inicial.",
    video: "videos/consulta-integrativa.mp4"
  },

  "03": {
    tagline: "Queda de cabelo não é só estética. É um sinal do corpo — e tem causa.",
    intro: "Tratamos a queda capilar a partir da origem: hormônios, nutrientes, inflamação, estresse. Um protocolo que devolve densidade e saúde aos fios.",
    whatIs: "Programa de investigação e tratamento capilar com avaliação tricológica, exames laboratoriais e protocolos personalizados.",
    forWhom: [
      "Queda excessiva ou afinamento progressivo",
      "Alopecia androgenética, pós-parto ou pós-menopausa",
      "Queda associada a estresse, dietas ou pós-COVID"
    ],
    benefits: [
      "Trata a causa, não só o sintoma",
      "Resultados visíveis a partir de 3 a 6 meses",
      "Acompanhamento próximo até a estabilização"
    ],
    duration: "Avaliação inicial de 60 min · retornos de 30 min",
    note: "Para resultados consistentes, a continuidade por pelo menos 6 meses é essencial.",
    photo: "https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?w=800&auto=format&fit=crop"
  },

  "04": {
    tagline: "Seu corpo precisa de estratégia, não de mais uma dieta restritiva.",
    intro: "Emagrecer com saúde é uma construção. Metabolismo, hormônios, intestino, sono e comportamento alimentar — só com esse olhar integrado o resultado é duradouro.",
    whatIs: "Programa integrativo de saúde metabólica com avaliação médica, plano nutricional individualizado, apoio psicológico quando necessário e revisões periódicas.",
    forWhom: [
      "Dificuldade de emagrecer apesar dos esforços",
      "Resistência insulínica, pré-diabetes ou esteatose",
      "Mulheres no climatério ou pós-menopausa"
    ],
    benefits: [
      "Emagrecimento saudável e sustentável",
      "Melhora dos marcadores metabólicos",
      "Relação mais leve com a comida"
    ],
    duration: "Programa contínuo · consultas mensais nos 3 primeiros meses",
    note: "Inclui suporte da nutricionista e da psicóloga quando indicado.",
    video: "videos/emagrecimento.mp4"
  },

  "05": {
    tagline: "Hormônios em equilíbrio mudam tudo — energia, humor, libido, sono.",
    intro: "A modulação hormonal personalizada é poderosa quando feita com critério. Avaliamos seu momento, suas queixas e seus exames para construir um protocolo que respeita a sua fisiologia.",
    whatIs: "Avaliação e modulação dos hormônios sexuais, tireoide, cortisol e insulina, usando — quando indicado — hormônios bioidênticos, fitoterápicos e ajustes de estilo de vida.",
    forWhom: [
      "Climatério e menopausa com sintomas",
      "Queda de libido, fadiga ou alterações de humor",
      "Mulheres que querem envelhecer com vitalidade"
    ],
    benefits: [
      "Mais energia e estabilidade emocional",
      "Melhora do sono e da libido",
      "Proteção óssea, cardiovascular e cognitiva"
    ],
    duration: "Avaliação inicial de 60 min · 3 retornos no primeiro ano",
    note: "Toda indicação é cuidadosa, baseada em evidência e ajustada à sua história.",
    photo: "https://images.unsplash.com/photo-1656331797721-b593b8f00297?w=800&auto=format&fit=crop"
  },

  "06": {
    tagline: "Reposição endovenosa: o que falta, na dose certa, direto onde precisa.",
    intro: "Quando o organismo precisa de uma resposta rápida, a soroterapia entrega vitaminas, minerais e antioxidantes direto na corrente sanguínea — com biodisponibilidade total.",
    whatIs: "Aplicação endovenosa de protocolos personalizados de vitaminas, minerais, aminoácidos e antioxidantes, sob prescrição médica.",
    forWhom: [
      "Fadiga e baixa imunidade",
      "Recuperação de gripes, viroses ou pós-operatório",
      "Quem busca suporte para pele, cabelo e unhas"
    ],
    benefits: [
      "Resultado rápido e perceptível",
      "Biodisponibilidade total — 100% de absorção",
      "Protocolos personalizados, não de prateleira"
    ],
    duration: "Sessão de 45 a 60 minutos",
    note: "Os protocolos são definidos individualmente após avaliação médica.",
    video: "videos/soroterapia.mp4"
  },

  "07": {
    tagline: "Cuidado especializado, técnico e acolhedor para a sua saúde íntima.",
    intro: "A saúde íntima é parte da saúde geral — e merece o mesmo nível de cuidado, ciência e privacidade.",
    whatIs: "Procedimentos médicos para a região íntima feminina voltados ao bem-estar, funcionalidade, estética e equilíbrio hormonal — em ambiente clínico, com técnica e privacidade.",
    forWhom: [
      "Ressecamento, atrofia ou desconforto vaginal",
      "Sintomas urogenitais do climatério",
      "Pós-parto e pacientes com incontinência urinária leve"
    ],
    services: [
      { t: "Laser íntimo", d: "Estimula colágeno, melhora lubrificação e firmeza. Sem cortes, recuperação imediata." },
      { t: "Peeling íntimo", d: "Clareia e renova a pele da região íntima com protocolo seriado." },
      { t: "Preenchimento íntimo", d: "Hidratação profunda e conforto local com ácido hialurônico." },
      { t: "Implante hormonal", d: "Liberação contínua de hormônios bioidênticos para libido, energia e humor." }
    ],
    benefits: [
      "Procedimentos seguros realizados por equipe médica",
      "Ambiente reservado e acolhedor",
      "Resultados desde a primeira sessão"
    ],
    duration: "Sessões de 30 a 60 min · indicação após avaliação médica",
    note: "Toda paciente passa por consulta de avaliação antes de qualquer procedimento.",
    photo: "assets/estetica-intima.jpg"
  }
};


const ServiceDrawer = ({ service, onClose, navigate }) => {
  const d = service ? SERVICE_DETAILS[service.n] : null;

  React.useEffect(() => {
    if (!service) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = prev;
      window.removeEventListener("keydown", onKey);
    };
  }, [service, onClose]);

  if (!service || !d) return null;

  return (
    <div className="sv-drawer" onClick={onClose} role="dialog" aria-modal="true" aria-label={service.title}>
      <div className="sv-drawer__panel" onClick={(e) => e.stopPropagation()}>
        <button className="sv-drawer__back" onClick={onClose} aria-label="Fechar">
          <Icon name="arrow" size={14} style={{transform:"rotate(180deg)"}}/>
          <span>Voltar</span>
        </button>

        <header className="sv-drawer__head">
          <div className="sv-drawer__num">{service.n}</div>
          <div className="sv-drawer__icon"><Icon name={service.icon} size={28}/></div>
          <span className="sv-drawer__eyebrow">Tratamento</span>
          <h2>{service.title}</h2>
          <p className="sv-drawer__tagline">{d.tagline}</p>
        </header>

        <div className="sv-drawer__body">

          {d.video && (
            <div className="sv-media">
              <video
                src={d.video}
                controls
                playsInline
                preload="metadata"
                style={{width:"100%",borderRadius:12,display:"block",background:"#000"}}
              />
            </div>
          )}

          {!d.video && d.photo && (
            <div className="sv-media">
              <img
                src={d.photo}
                alt={service.title}
                style={{width:"100%",borderRadius:12,display:"block",objectFit:"cover",maxHeight:260}}
              />
            </div>
          )}

          <p className="sv-drawer__intro">{d.intro}</p>

          <section className="sv-block">
            <h3>O que é</h3>
            <p>{d.whatIs}</p>
          </section>

          <section className="sv-block">
            <h3>Para quem é indicado</h3>
            <ul className="sv-bullets">
              {d.forWhom.map((it) => <li key={it}>{it}</li>)}
            </ul>
          </section>

          {d.services && (
            <section className="sv-block">
              <h3>Procedimentos disponíveis</h3>
              <div className="sv-procs">
                {d.services.map((s) => (
                  <div key={s.t} className="sv-proc">
                    <strong>{s.t}</strong>
                    <p>{s.d}</p>
                  </div>
                ))}
              </div>
            </section>
          )}

          <section className="sv-block">
            <h3>Benefícios</h3>
            <ul className="sv-checks">
              {d.benefits.map((b) => (
                <li key={b}>
                  <Icon name="check" size={16}/>
                  <span>{b}</span>
                </li>
              ))}
            </ul>
          </section>

          <section className="sv-block sv-meta">
            <div>
              <span className="sv-meta__lbl">Duração</span>
              <strong>{d.duration}</strong>
            </div>
            {d.note && (
              <div>
                <span className="sv-meta__lbl">Importante</span>
                <p>{d.note}</p>
              </div>
            )}
          </section>

          <footer className="sv-drawer__foot">
            <Btn variant="primary" size="lg" icon="calendar"
                 onClick={() => { onClose(); navigate("agendamento"); }}>
              Agendar avaliação
            </Btn>
            <Btn variant="outline" size="lg" icon="wa"
                 onClick={() => window.open("https://wa.me/5562991323402", "_blank")}>
              Tirar dúvidas no WhatsApp
            </Btn>
          </footer>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { SERVICE_DETAILS, ServiceDrawer });