// inner-pages.jsx — Sobre, Serviços (full), Equipe, Blog, Contato

// ── SOBRE ────────────────────────────────────────────────────────────────
const SobrePage = ({ navigate }) =>
<div className="page-enter" data-screen-label="03 Sobre">
    <section className="banner">
      <div className="banner__inner">
        <nav className="banner__crumbs">
          <button className="crumb-back" onClick={() => navigate("home")}>← Início</button>
          <span>/</span><span>A Clínica</span>
        </nav>
        <h1>Uma clínica feita para o <em>tempo</em> certo do cuidado.</h1>
        <p>Mais de três décadas de experiência clínica dedicadas à saúde da mulher — em um só lugar, com a calma que o cuidado exige.</p>
      </div>
    </section>

    <section className="section">
      <div className="intro">
        <div className="intro__media">
          <img src="assets/recepcao.png" alt="Fachada da Clínica Longevidade e Saúde" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "50% 50%", display: "block" }} />
        </div>
        <div className="intro__copy">
          <span className="eyebrow">Nossa história</span>
          <h2>Onde <em>ciência</em> e acolhimento se encontram.</h2>
          <p>
            Fundada pela Dra. Neusa Brisolla, a Clínica Longevidade e Saúde nasceu
            da insatisfação com a medicina tradicional — e da busca por uma
            abordagem mais profunda. Com mais de 30 anos de experiência clínica, unimos hormônios,
            metabolismo e longevidade em um cuidado integrado, dedicado à saúde
            da mulher.
          </p>
          <p>
            Acreditamos que cuidar do tempo é cuidar de você. Cada consulta tem o
            ritmo certo. Cada plano é construído com você. Cada resultado respeita
            quem você é.
          </p>
        </div>
      </div>
    </section>

    <section className="section">
      <div className="section__head">
        <span className="eyebrow">Pilares</span>
        <h2>Missão, visão & <em>valores</em>.</h2>
      </div>
      <div className="about-grid">
        <div className="about-card">
          <div className="about-card__num">01 · MISSÃO</div>
          <h3>Cuidar com tempo</h3>
          <p>Cuidar da saúde integral da mulher em todas as fases da vida — unindo hormônios, metabolismo e longevidade com escuta, ciência e tempo para cada história.</p>
        </div>
        <div className="about-card">
          <div className="about-card__num">02 · VISÃO</div>
          <h3>Referência em longevidade</h3>
          <p>Ser referência em saúde feminina e longevidade integrada — um lugar onde cada mulher encontra cuidado profundo para envelhecer com vitalidade, equilíbrio e autonomia.</p>
        </div>
        <div className="about-card">
          <div className="about-card__num">03 · VALORES</div>
          <h3>Acolhimento & ciência</h3>
          <p>Escuta verdadeira, ética, ciência atualizada e respeito a cada mulher — resultados naturais que valorizam quem você é, no seu tempo.</p>
        </div>
      </div>
    </section>

    <section className="section section--soft section--full">
      <div className="section" style={{ padding: "96px 32px" }}>
        <div className="section__head">
          <span className="eyebrow">Estrutura</span>
          <h2>Um <em>ambiente</em> pensado para o seu cuidado.</h2>
          <p>Mais de 280m² distribuídos em recepção, salas de consulta, sala de procedimentos e espaços de descompressão.</p>
        </div>
        <div className="gallery">
          <div className="gallery__photo">
            <img src="assets/sala-principal.jpg" alt="Sala principal — recepção interna" />
          </div>
          <div className="gallery__photo">
            <img src="assets/recepcao.png" alt="Entrada da Clínica Longevidade e Saúde" />
          </div>
          <div className="gallery__photo">
            <img src="assets/sala-procedimento.jpg" alt="Sala de procedimentos" />
          </div>
          <div className="gallery__photo">
            <img src="assets/sala-espera.jpg" alt="Sala de espera" />
          </div>
          <div className="gallery__photo">
            <img src="assets/detalhe.jpg" alt="Detalhe da fachada da clínica" />
          </div>
        </div>
      </div>
    </section>

    <HomeCta navigate={navigate} />
  </div>;


// ── SERVIÇOS ────────────────────────────────────────────────────────────
const ServicosPage = ({ navigate }) =>
<div className="page-enter" data-screen-label="04 Serviços">
    <section className="banner">
      <div className="banner__inner">
        <nav className="banner__crumbs">
          <button className="crumb-back" onClick={() => navigate("home")}>← Início</button>
          <span>/</span><span>Serviços</span>
        </nav>
        <h1>Tratamentos que <em>conversam</em> entre si.</h1>
        <p>Seis frentes, um único cuidado, passando por longevidade e bem-estar.
      </p>
      </div>
    </section>

    <Services navigate={navigate} />

    <section className="section section--soft section--full">
      <div className="section">
        <div className="section__head">
          <span className="eyebrow">Como funciona</span>
          <h2>Do <em>primeiro contato</em> ao acompanhamento.</h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 24, position: "relative" }} className="process-grid">
          <style>{`@media (max-width:880px){.process-grid{grid-template-columns:1fr 1fr!important;}}
                   @media (max-width:540px){.process-grid{grid-template-columns:1fr!important;}}`}</style>
          {[
        { n: "01", t: "Agendamento", d: "Pelo site ou WhatsApp. Confirmamos em até um dia útil." },
        { n: "02", t: "Avaliação", d: "Consulta de até 90 minutos para entender sua história." },
        { n: "03", t: "Plano de cuidado", d: "Construído com você, no seu ritmo, em etapas claras." },
        { n: "04", t: "Acompanhamento", d: "Retornos periódicos para refinar resultados juntas." }].
        map((s) =>
        <div key={s.n} style={{
          padding: "36px 28px", background: "#fff", borderRadius: "var(--tk-radius)",
          border: "1px solid var(--border)", display: "flex", flexDirection: "column", gap: 12
        }}>
              <div style={{
            fontFamily: "var(--font-display)", fontSize: 48, fontWeight: 200,
            color: "var(--rosa-tempo)", letterSpacing: ".02em", lineHeight: 1
          }}>{s.n}</div>
              <h4 style={{ margin: 0, fontSize: 18, letterSpacing: ".04em",
            color: "var(--vinho-profundo)", fontFamily: "var(--font-display)",
            textTransform: "uppercase", fontWeight: 500 }}>{s.t}</h4>
              <p style={{ margin: 0, fontSize: 14, color: "var(--fg-muted)", lineHeight: 1.55 }}>{s.d}</p>
            </div>
        )}
        </div>
      </div>
    </section>

    <FAQ />
    <HomeCta navigate={navigate} />
  </div>;


// ── EQUIPE ──────────────────────────────────────────────────────────────
const EquipePage = ({ navigate }) =>
<div className="page-enter" data-screen-label="05 Equipe">
    <section className="banner">
      <div className="banner__inner">
        <nav className="banner__crumbs">
          <button className="crumb-back" onClick={() => navigate("home")}>← Início</button>
          <span>/</span><span>Equipe</span>
        </nav>
        <h1>Quem cuida da sua <em>saúde</em>.</h1>
        <p>Uma equipe de especialistas integradas — sob a coordenação da Dra. Neusa Brisolla — para olhar o seu corpo de forma completa, com profundidade e estratégia.</p>
      </div>
    </section>

    <section className="section">
      <div className="section__head">
        <span className="eyebrow">Especialistas</span>
        <h2>Uma equipe que <em>conversa</em> entre si.</h2>
        <p>Cada profissional traz uma camada de leitura ao seu plano de cuidado, sob a coordenação da Dra. Neusa Brisolla.</p>
      </div>

      <div className="team-grid">
        {[
      { name: "Dra. Neusa Brisolla", role: "Médica responsável", spec: "Hormônios · Metabolismo · Longevidade",
        photo: "assets/avatar-neusa-07.png", focal: "50% 20%",
        body: "Especialista em saúde feminina com abordagem integrada. Cada protocolo é construído sobre ciência e refinado pelo olhar atento ao que faz sentido para a sua história." },
      { name: "Dra. Mayra Messias", role: "Médica", spec: "Estética íntima & saúde da mulher",
        photo: "assets/team-mayra.jpg", focal: "50% 30%",
        body: "Cuidado especializado em saúde íntima feminina, com olhar técnico e acolhedor para todas as fases da mulher." },
      { name: "Dra. Leila Lima", role: "Terapeuta", spec: "Análise de sangue vivo · Terapia capilar",
        photo: "assets/team-leila.jpg", focal: "40% 30%",
        body: "Especialista em análise de sangue vivo e em protocolos integrativos para saúde dos fios e do couro cabeludo." },
      { name: "Dra. Aline Morais", role: "Biomédica", spec: "Terapia capilar",
        photo: "assets/team-aline.jpg", focal: "50% 25%",
        body: "Avaliação tricológica e protocolos personalizados para investigação e tratamento da queda capilar." },
      { name: "Dra. Zaira Cristina", role: "Nutricionista", spec: "Nutrição integrativa",
        photo: "assets/team-zaira.jpg", focal: "55% 30%",
        body: "Plano nutricional estratégico que olha para metabolismo, hormônios e estilo de vida — alimentação como cuidado." },
      { name: "Dra. Aparecida Simônia", role: "Psicóloga", spec: "Psicologia clínica",
        photo: "assets/team-aparecida.jpg", focal: "50% 25%",
        body: "Acompanhamento psicológico para mulheres em fase de mudança — porque saúde mental é parte da longevidade." }].
      map((p) =>
      <article key={p.name} className="team-mini">
            <div className="team-mini__media">
              {p.photo ?
          <img src={p.photo} alt={p.name} style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: p.focal || "50% 30%", display: "block" }} /> :
          <PhotoPlaceholder label={p.name} ratio="auto" />
          }
            </div>
            <div className="team-mini__copy">
              <span className="team-mini__role">{p.role}</span>
              <h4>{p.name}</h4>
              <p>{p.body}</p>
              <div className="team-mini__spec">{p.spec}</div>
            </div>
          </article>
      )}
      </div>

      {/* Filosofia */}
      <div style={{
      marginTop: 64, padding: "64px 56px", borderRadius: "var(--tk-radius)",
      background: "var(--bg-soft)", textAlign: "center"
    }}>
        <span className="eyebrow">Filosofia</span>
        <blockquote style={{
        fontFamily: "var(--font-display)",
        fontSize: "clamp(24px,3vw,38px)", fontWeight: 300, fontStyle: "italic",
        color: "var(--vinho-profundo)", lineHeight: 1.3, margin: "24px auto 24px",
        maxWidth: 780, letterSpacing: ".01em", textWrap: "balance"
      }}>
          "Cuidar de alguém é, antes de tudo, ouvir. Cada pele tem uma história,
          e cada história merece um plano que respeite o tempo e a singularidade
          de quem a vive."
        </blockquote>
        <span className="signature" style={{
        fontFamily: "var(--font-script)", fontSize: 36, color: "var(--accent-gold)"
      }}>Dra. Neusa Brisolla</span>
      </div>
    </section>
    <HomeCta navigate={navigate} />
  </div>;


// ── BLOG ────────────────────────────────────────────────────────────────
const BLOG_POSTS = [
{ id: 1, cat: "Diagnóstico", date: "12 MAI 2026", read: "7 min",
  title: "Microscopia de sangue vivo: o exame que vê o corpo em movimento",
  excerpt: "Uma única gota de sangue, observada em tempo real, conta o que os exames laboratoriais não conseguem traduzir. Entenda como funciona e o que pode revelar.",
  img: "assets/blog-microscopia.jpg" },
{ id: 2, cat: "Hormônios", date: "05 MAI 2026", read: "9 min",
  title: "Menopausa não é doença — mas merece cuidado",
  excerpt: "Sintomas, mitos e o que mudou na medicina hormonal feminina. Por que essa fase pode (e deve) ser vivida com energia, lucidez e qualidade de vida.",
  img: "assets/blog-menopausa.jpg" },
{ id: 3, cat: "Saúde da mulher", date: "28 ABR 2026", read: "6 min",
  title: "Queda de cabelo: o que ela está te dizendo?",
  excerpt: "Queda capilar quase nunca é um problema isolado. Hormônios, nutrição, estresse, intestino — quando o fio cai, o corpo está mandando recado.",
  img: "https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?w=900&q=80&auto=format&fit=crop" },
{ id: 4, cat: "Longevidade", date: "20 ABR 2026", read: "10 min",
  title: "Emagrecer sem efeito sanfona: o que a ciência atual mostra",
  excerpt: "A conta não fecha só com dieta e exercício. Resistência insulínica, hormônios e comportamento alimentar precisam entrar na equação para o resultado durar.",
  img: "https://images.unsplash.com/photo-1490645935967-10de6ba17061?w=900&q=80&auto=format&fit=crop" },
{ id: 5, cat: "Bem-estar", date: "13 ABR 2026", read: "5 min",
  title: "Soroterapia: para quem é (e para quem não é)",
  excerpt: "A reposição endovenosa vem ganhando espaço — e merece critério. Quando ela faz sentido, o que esperar e por que não é \"pacote pronto\".",
  img: "assets/blog-soroterapia.jpg" },
{ id: 6, cat: "Saúde da mulher", date: "06 ABR 2026", read: "8 min",
  title: "Saúde íntima: cuidados que vão muito além da estética",
  excerpt: "Ressecamento, atrofia, perda de libido, escurecimento — sintomas comuns que ainda são pouco falados. Conheça as abordagens modernas para essa região.",
  img: "https://images.unsplash.com/photo-1545205597-3d9d02c29597?w=900&q=80&auto=format&fit=crop" },
{ id: 7, cat: "Longevidade", date: "30 MAR 2026", read: "11 min",
  title: "Inflamação subclínica: o vilão silencioso da longevidade",
  excerpt: "Não dói, não aparece em exames simples — mas acelera o envelhecimento e abre porta para doenças crônicas. Como identificar e por onde começar a tratar.",
  img: "https://images.unsplash.com/photo-1505252585461-04db1eb84625?w=900&q=80&auto=format&fit=crop" },
{ id: 8, cat: "Bem-estar", date: "23 MAR 2026", read: "6 min",
  title: "Sono profundo e hormônios: a conexão que sua rotina ignora",
  excerpt: "Dormir pouco não é só cansaço no dia seguinte. É cortisol elevado, fome desregulada, perda de massa muscular e envelhecimento acelerado. Vamos por partes.",
  img: "https://images.unsplash.com/photo-1686828752370-c0398d724e82?w=900&q=80&auto=format&fit=crop" },
{ id: 9, cat: "Nutrição", date: "16 MAR 2026", read: "7 min",
  title: "Alimentação anti-inflamatória: por onde começar",
  excerpt: "Não é dieta da moda. É um jeito de comer baseado em evidências que reduz inflamação, melhora energia e sustenta resultados de qualquer tratamento.",
  img: "https://images.unsplash.com/photo-1512621776951-a57141f2eefd?w=900&q=80&auto=format&fit=crop" }];


const BlogPage = ({ navigate }) => {
  const [search, setSearch] = React.useState("");
  const [cat, setCat] = React.useState("Todos");
  const [openId, setOpenId] = React.useState(null);
  const cats = ["Todos", "Diagnóstico", "Hormônios", "Saúde da mulher", "Longevidade", "Bem-estar", "Nutrição"];
  const openPost = BLOG_POSTS.find((p) => p.id === openId) || null;

  const filtered = BLOG_POSTS.filter((p) => {
    if (cat !== "Todos" && p.cat !== cat) return false;
    if (search && !(p.title + p.excerpt).toLowerCase().includes(search.toLowerCase())) return false;
    return true;
  });

  return (
    <div className="page-enter" data-screen-label="06 Blog">
      <section className="banner">
        <div className="banner__inner">
          <nav className="banner__crumbs">
            <button className="crumb-back" onClick={() => navigate("home")}>← Início</button>
            <span>/</span><span>Artigos</span>
          </nav>
          <h1>Cartas de <em>longevidade</em>.</h1>
          <p>Conteúdo cuidado, sem pressa, vitalidade e o tempo bem-vivido — escrito pela Dra. Neusa e pela equipe da clínica.</p>
        </div>
      </section>

      <section className="section">
        <div className="blog-tools">
          <div className="blog-search">
            <Icon name="search" size={18} />
            <input value={search} onChange={(e) => setSearch(e.target.value)}
            placeholder="Buscar artigos…" />
          </div>
          <div className="blog-cats">
            {cats.map((c) =>
            <button key={c} data-on={cat === c ? "1" : "0"}
            onClick={() => setCat(c)}>{c}</button>
            )}
          </div>
        </div>

        {filtered.length === 0 ?
        <div style={{ textAlign: "center", padding: "64px 0", color: "var(--fg-muted)" }}>
            Nenhum artigo encontrado para "{search}".
          </div> :

        <div className="blog-grid">
            {filtered.map((p) =>
          <article key={p.id} className="blog-card" onClick={() => setOpenId(p.id)} style={{ cursor: "pointer" }}>
                <div className="blog-card__media">
                  {p.img ?
                    <img src={p.img} alt={p.title} loading="lazy" className="blog-card__img" /> :
                    <PhotoPlaceholder label={p.cat} ratio="4/3" />
                  }
                </div>
                <div className="blog-card__body">
                  <div className="blog-card__meta">
                    <span className="blog-card__cat">{p.cat}</span>
                    <span>{p.date}</span>
                    <span>· {p.read}</span>
                  </div>
                  <h3>{p.title}</h3>
                  <p>{p.excerpt}</p>
                  <button className="blog-card__more"
                    onClick={(e) => { e.stopPropagation(); setOpenId(p.id); }}>
                    Ler artigo <Icon name="arrow" size={12} />
                  </button>
                </div>
              </article>
          )}
          </div>
        }
      </section>
      <ArticleDrawer post={openPost} onClose={() => setOpenId(null)} navigate={navigate}/>
    </div>);

};

// ── CONTATO ─────────────────────────────────────────────────────────────
const ContatoPage = ({ navigate }) => {
  const [sent, setSent] = React.useState(false);
  const [data, setData] = React.useState({
    name: "", phone: "", email: "", subject: "Agendamento", message: ""
  });
  const update = (k, v) => setData((d) => ({ ...d, [k]: v }));
  const sendWhatsApp = (e) => {
    if (e) e.preventDefault();
    const lines = [
      "*Nova mensagem pelo site*",
      "",
      `*Nome:* ${data.name}`,
      `*Telefone:* ${data.phone}`,
      `*E-mail:* ${data.email}`,
      `*Assunto:* ${data.subject}`,
    ];
    if (data.message && data.message.trim()) {
      lines.push("", `*Mensagem:* ${data.message.trim()}`);
    }
    lines.push("", "_Enviado pelo formulário de contato da Clínica Longevidade e Saúde._");
    const text = encodeURIComponent(lines.join("\n"));
    window.open(`https://wa.me/5562991323402?text=${text}`, "_blank", "noopener");
    setSent(true);
  };
  return (
    <div className="page-enter" data-screen-label="07 Contato">
      <section className="banner">
        <div className="banner__inner">
          <nav className="banner__crumbs">
            <button className="crumb-back" onClick={() => navigate("home")}>← Início</button>
            <span>/</span><span>Contato</span>
          </nav>
          <h1>Vamos <em>conversar</em>.</h1>
          <p>Por onde for mais confortável: telefone, WhatsApp, e-mail ou pessoalmente. Estamos aqui para te ouvir.</p>
        </div>
      </section>

      <section className="section">
        <div className="contact-grid">
          <div className="contact-info">
            <div className="contact-card">
              <div className="contact-card__icon"><Icon name="pin" size={20} /></div>
              <div>
                <h4>Endereço</h4>
                <p>Rua 25-A esquina com Rua 6-A, Qd 59-A, Lt 14</p>
                <small>Goiânia · GO</small>
              </div>
            </div>
            <div className="contact-card">
              <div className="contact-card__icon"><Icon name="phone" size={20} /></div>
              <div>
                <h4>Telefone</h4>
                <p>(62) 3213-3721</p>
                <small>WhatsApp: (62) 99132-3402</small>
              </div>
            </div>
            <div className="contact-card">
              <div className="contact-card__icon"><Icon name="mail" size={20} /></div>
              <div>
                <h4>E-mail</h4>
                <p>atendimento.clinicalongevidade@gmail.com</p>
                <small>Respondemos em até 1 dia útil</small>
              </div>
            </div>
            <div className="contact-card">
              <div className="contact-card__icon"><Icon name="clock" size={20} /></div>
              <div>
                <h4>Horário</h4>
                <p>Seg–Sex · 08h às 18h</p>
                <small>Fechado aos sábados e domingos</small>
              </div>
            </div>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 8 }}>
              <Btn variant="primary" icon="wa"
              onClick={() => window.open("https://wa.me/5562991323402", "_blank")}>
                WhatsApp direto
              </Btn>
              <Btn variant="outline" icon="calendar"
              onClick={() => navigate("agendamento")}>
                Agendar avaliação
              </Btn>
            </div>
          </div>

          <form className="book__form" onSubmit={sendWhatsApp}
          style={{ margin: 0 }}>
            {sent ?
            <div className="book__sent">
                <div className="book__sent-icon"><Icon name="check" size={32} /></div>
                <span className="eyebrow">Quase lá!</span>
                <h3>Falta um toque{data.name && `, ${data.name.split(" ")[0]}`}.</h3>
                <p>Abrimos o WhatsApp da clínica com a sua mensagem já preenchida. É só tocar em <strong>enviar</strong> que retornamos em até um dia útil.</p>
                <div style={{ display: "flex", gap: 12, marginTop: 24, justifyContent: "center", flexWrap: "wrap" }}>
                  <Btn variant="primary" icon="wa" onClick={sendWhatsApp}>
                    Reabrir WhatsApp
                  </Btn>
                  <Btn variant="outline" onClick={() => navigate("home")}>
                    Voltar ao início
                  </Btn>
                </div>
              </div> :

            <>
                <div className="book__form-head">
                  <h3>Envie uma mensagem</h3>
                  <p>Conte um pouco sobre você e o que motivou o contato. Sua mensagem chega no WhatsApp da clínica.</p>
                </div>
                <div className="field">
                  <label>Nome</label>
                  <input value={data.name} onChange={(e) => update("name", e.target.value)}
                    placeholder="Seu nome" required />
                </div>
                <div className="row-2">
                  <div className="field">
                    <label>Telefone</label>
                    <input value={data.phone} onChange={(e) => update("phone", e.target.value)}
                      placeholder="(62) 0 0000-0000" required />
                  </div>
                  <div className="field">
                    <label>E-mail</label>
                    <input type="email" value={data.email} onChange={(e) => update("email", e.target.value)}
                      placeholder="seu@email.com" required />
                  </div>
                </div>
                <div className="field">
                  <label>Assunto</label>
                  <select value={data.subject} onChange={(e) => update("subject", e.target.value)}>
                    <option>Agendamento</option>
                    <option>Dúvida sobre tratamentos</option>
                    <option>Pós-procedimento</option>
                    <option>Outros</option>
                  </select>
                </div>
                <div className="field">
                  <label>Mensagem</label>
                  <textarea rows="4" value={data.message} onChange={(e) => update("message", e.target.value)}
                    placeholder="Como podemos te ajudar?" />
                </div>
                <div style={{ display: "flex", justifyContent: "flex-end" }}>
                  <Btn variant="primary" type="submit" icon="wa">Enviar pelo WhatsApp</Btn>
                </div>
              </>
            }
          </form>
        </div>

        <div className="map">
          <iframe
            title="Localização da Clínica Longevidade e Saúde"
            src="https://www.google.com/maps?q=Rua+25-A+esquina+com+Rua+6-A,+Setor+Aeroporto,+Goi%C3%A2nia+-+GO&output=embed"
            width="100%"
            height="100%"
            style={{ border: 0, display: "block" }}
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
            allowFullScreen>
          </iframe>
          <a className="map__cta"
          href="https://www.google.com/maps/dir/?api=1&destination=Rua+25-A+esquina+com+Rua+6-A,+Qd+59-A,+Lt+14,+Setor+Aeroporto,+Goi%C3%A2nia+-+GO"
          target="_blank"
          rel="noopener noreferrer">
            <Icon name="pin" size={16} />
            Como chegar
          </a>
        </div>
      </section>
    </div>);

};

// ── RESULTADOS ──────────────────────────────────────────────────────────
const DEPOIMENTOS = [
  { instagram: "DY8ai-YAQie" },
  { instagram: "DYqGVVyA_79" },
  { instagram: "DYX8fupPpbh" },
];

const ResultadosPage = ({ navigate }) =>
<div className="page-enter" data-screen-label="08 Resultados">
    <section className="banner">
      <div className="banner__inner">
        <nav className="banner__crumbs">
          <button className="crumb-back" onClick={() => navigate("home")}>← Início</button>
          <span>/</span><span>Resultados</span>
        </nav>
        <h1>Histórias que <em>inspiram</em>.</h1>
        <p>Mulheres reais, transformações reais. Depoimentos de quem viveu o cuidado da Clínica Longevidade e Saúde.</p>
      </div>
    </section>

    <section className="section">
      <div className="section__head">
        <span className="eyebrow">Depoimentos em vídeo</span>
        <h2>Resultados que <em>falam</em> por si.</h2>
        <p>Cada história é única — como cada plano de cuidado que construímos.</p>
      </div>

      {DEPOIMENTOS.length === 0 ?
      <div style={{
          textAlign: "center", padding: "80px 24px",
          background: "var(--bg-soft)", borderRadius: "var(--tk-radius)",
          display: "flex", flexDirection: "column", alignItems: "center", gap: 16
        }}>
          <div style={{
            width: 72, height: 72, borderRadius: "999px",
            background: "var(--tk-primary-strong)", display: "flex",
            alignItems: "center", justifyContent: "center"
          }}>
            <Icon name="heart" size={28} style={{ color: "var(--rosa-tempo)" }} />
          </div>
          <span className="eyebrow">Em breve</span>
          <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 300, fontSize: "clamp(22px,3vw,30px)", color: "var(--vinho-profundo)", margin: 0 }}>
            Os depoimentos chegam em breve.
          </h3>
          <p style={{ color: "var(--fg-muted)", maxWidth: 480, fontSize: 15, lineHeight: 1.6, margin: 0 }}>
            Estamos reunindo as histórias das nossas pacientes para compartilhar com você. Volte em breve.
          </p>
          <Btn variant="primary" icon="calendar" onClick={() => navigate("agendamento")} style={{ marginTop: 8 }}>
            Agendar avaliação
          </Btn>
        </div> :

      <div className="video-grid">
          {DEPOIMENTOS.map((d, i) =>
          <div key={i} className={`video-card${d.instagram ? " video-card--reel" : ""}`}>
              <div className="video-card__player">
                {d.instagram ?
                <iframe
                    src={`https://www.instagram.com/reel/${d.instagram}/embed/`}
                    title={`Depoimento ${i + 1}`}
                    scrolling="no"
                    frameBorder="0"
                    allowTransparency="true"
                    allow="encrypted-media; picture-in-picture" /> :
                d.youtube ?
                <iframe
                    src={`https://www.youtube.com/embed/${d.youtube}`}
                    title={d.nome || `Depoimento ${i + 1}`}
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowFullScreen /> :
                <video src={d.src} controls playsInline />
                }
              </div>
              {(d.nome || d.tratamento || d.quote) &&
              <div className="video-card__body">
                  {d.nome && <p className="video-card__name">{d.nome}</p>}
                  {d.tratamento && <p className="video-card__tag">{d.tratamento}</p>}
                  {d.quote && <p className="video-card__quote">"{d.quote}"</p>}
                </div>
              }
            </div>
          )}
        </div>
      }
    </section>

    <HomeCta navigate={navigate} />
  </div>;


Object.assign(window, { SobrePage, ServicosPage, EquipePage, BlogPage, ContatoPage, ResultadosPage });