/* global React, SiteCore */
const { Photo, Brand, waLink, WA_MAIN, WA_ESSANS, WA_NATUS, WAIcon } = window.SiteCore;

// ---------- Approach + Path/Atalho (combined, no-scroll) ----------
const Approach = () =>
<section className="section approach-combined" id="abordagem">
    <div className="container">
      <div className="ac-head">
        <div className="ac-eyebrow eyebrow">A abordagem</div>
        <h2>
          Uma queixa raramente é o problema.{" "}
          <span className="italic-accent">Geralmente é a pista.</span>
        </h2>
        <p className="ac-lead">
          Cansaço, oscilação de peso, mau humor, sono ruim, intestino lento.
          Sinais que costumam vir juntos — e que raramente se resolvem com uma
          prescrição isolada. Minha prática é encontrar o que está por trás.
        </p>
      </div>

      <div className="ac-vs">
        <div className="ac-col atalho">
          <div className="ac-tag">Modelo antigo</div>
          <div className="ac-label">i. O atalho</div>
          <h3>Tratar a queixa.</h3>
          <p>Receita, exame solto, retorno. O sintoma some por um tempo. Volta com outro nome.</p>
        </div>
        <div className="ac-divider" aria-hidden="true"></div>
        <div className="ac-col caminho">
          <div className="ac-tag featured">Prática contemporânea</div>
          <div className="ac-label">ii. O caminho</div>
          <h3>
            Entender a causa. <span className="italic-accent">E desenhar a rota.</span>
          </h3>
          <p>Investigação clínica, acompanhamento contínuo, ajustes vivos. O sintoma é a porta. A saúde é o destino.</p>
        </div>
      </div>
    </div>
  </section>;


// PathVsShortcut kept as no-op so app.jsx import doesn't break
const PathVsShortcut = () => null;

// ---------- Areas ----------
const AREAS = [
{
  n: "01",
  title: "Nutrologia clínica",
  body: "Avaliação nutricional e metabólica para identificar carências, excessos e desequilíbrios."
},
{
  n: "02",
  title: "Medicina do estilo de vida",
  body: "Alimentação, sono, movimento, estresse e conexões — abordagem científica e integrada."
},
{
  n: "03",
  title: "Pré e pós-bariátrica",
  body: "Suporte antes e depois da cirurgia: segurança, adaptação e prevenção de deficiências."
},
{
  n: "04",
  title: "Saúde intestinal e metabolismo",
  body: "Equilíbrio da microbiota e funcionamento metabólico — energia, imunidade e peso."
},
{
  n: "05",
  title: "Suporte oncológico",
  body: "Acompanhamento preventivo, durante e após o tratamento — reduzir efeitos colaterais, fortalecer o organismo. Apoio em conjunto à equipe assistente, como parceria para melhor evolução e resposta ao tratamento convencional."
},
{
  n: "06",
  title: "Controle glicêmico",
  body: "Estratégias para reverter ou controlar resistência à insulina e prevenir diabetes tipo 2."
},
{
  n: "07",
  title: "Medicina de precisão",
  body: "Decisões clínicas guiadas por marcadores individuais — genética, metabolismo e contexto. Tratamento desenhado para o seu corpo, não para a média."
}];


const Areas = () =>
<section className="section areas" id="areas">
    <div className="container">
      <div className="section-head">
        <div>
          <div className="eyebrow">Áreas de atuação</div>
          <h2 style={{ marginTop: 20 }}>
            Sete áreas de prática clínica.
          </h2>
        </div>
        <div className="intro">
          <p>
            Cada paciente chega com uma demanda específica. Atendimento em nutrologia,
            medicina do estilo de vida e cuidados associados — sempre com investigação
            clínica e plano individual.
          </p>
        </div>
      </div>
      <div className="areas-grid">
        {AREAS.map((a, i) =>
      <div key={a.n} className={`area-card${i === AREAS.length - 1 ? " area-card--feature" : ""}`}>
            <div className="area-num">{a.n}</div>
            <h3>{a.title}</h3>
            <p>{a.body}</p>
          </div>
      )}
      </div>
    </div>
  </section>;


// ---------- About ----------
const About = () =>
<section className="section about" id="sobre">
    <div className="container">
      <div className="about-photo">
        <img src="assets/photos/sobre.jpg" alt="Dra. Carolina Paulillo, retrato pensativo em estúdio" loading="lazy" />
      </div>
      <div>
        <div className="eyebrow">Sobre</div>
        <h2 style={{ marginTop: 20 }}>Dra. Carolina Paulillo</h2>
        <p>Médica formada pela Universidade São Francisco em 2006, com fellowship e pós-graduação em Nutrologia pelo Hospital Israelita Albert Einstein, certificação internacional em Medicina do Estilo de Vida (IBLM - ACLM - CBMEV).



      </p>
        <p>Voluntária do Programa de Mudança de Hábito e Estilo de Vida (PROMEV) do Instituto de Psiquiatria do HCFMUSP e co-autora de capítulos em livros de Nutrologia Hospitalar. Minha missão é oferecer uma medicina baseada em evidência, com olhar individual para cada pessoa.



      </p>
        <div className="signature">
          Carolina Paulillo
          <small>CRM 125346 · São Paulo</small>
        </div>
      </div>
    </div>
  </section>;


// ---------- Testimonials ----------
const TESTIMONIALS = [
{
  quote: "Mudou minha vida. De maneira leve, ela te auxilia na mudança do estilo de vida.",
  name: "Gabriela G.",
  sub: "Google Reviews"
},
{
  quote: "Atenciosa e dedicada. Tratamento eficaz e personalizado, atendimento humanizado.",
  name: "Natalia V.",
  sub: "Google Reviews"
},
{
  quote: "Esclareceu todas as minhas dúvidas com paciência. Recomendo de olhos fechados.",
  name: "Helen R.",
  sub: "Google Reviews"
}];


const Testimonials = () =>
<section className="testimonials">
    <div className="container">
      <div className="eyebrow">Depoimentos</div>
      <h2>
        Quem acompanha conta —<br />
        <em style={{ color: "var(--accent-bright)" }}>com palavras próprias.</em>
      </h2>
      <div className="testimonials-grid">
        {TESTIMONIALS.map((t, i) =>
      <div key={i} className="tcard">
            <p className="quote">{t.quote}</p>
            <div className="attribution">
              {t.name}
              <small>{t.sub}</small>
            </div>
          </div>
      )}
      </div>
    </div>
  </section>;


// ---------- Locations ----------
const LOCATIONS = [
{
  city: "São Paulo",
  name: "ESSANS Instituto",
  address: "Rua Cristiano Viana, 328, cj. 204\nCerqueira César · 05411-000",
  wa: WA_ESSANS
},
{
  city: "Bragança Paulista",
  name: "Clínica Natus",
  address: "Av. Salvador Markowicz, 135, sala 304\nEdif. Carraro Tower · 12916-010",
  wa: WA_NATUS
},
{
  city: "Em qualquer lugar",
  name: "Online e domiciliar",
  address: "Consultas remotas e atendimentos\nem casa quando indicado.",
  wa: WA_MAIN
}];


const Locations = () =>
<section className="section locations" id="consultorios">
    <div className="container">
      <div className="eyebrow">Consultórios</div>
      <h2>Três pontos de atendimento, uma prática só.</h2>
      <div className="loc-grid">
        {LOCATIONS.map((l) =>
      <div key={l.city} className="loc-card">
            <div className="city">{l.city}</div>
            <h3>{l.name}</h3>
            <div className="address">{l.address}</div>
            <a href={waLink(l.wa)} target="_blank" rel="noopener" className="wa">
              <WAIcon /> Falar pelo WhatsApp
            </a>
          </div>
      )}
      </div>
    </div>
  </section>;


// ---------- Final CTA ----------
const FinalCTA = () =>
<section className="final-cta">
    <div className="container">
      <div className="eyebrow">Vamos começar</div>
      <h2>
        Sua saúde merece um plano<br />
        feito <span className="italic-accent">a partir de você.</span>
      </h2>
      <p>
        A primeira consulta é onde a escuta começa. O resto vem juntos,
        no ritmo do seu cotidiano.
      </p>
      <a href={waLink(WA_MAIN)} target="_blank" rel="noopener" className="btn btn-primary">
        <WAIcon /> Agendar pelo WhatsApp
      </a>
    </div>
  </section>;


// ---------- Footer ----------
const Footer = ({ brandStyle = "minimal" }) =>
<footer className="site-footer">
    <div className="container">
      <div className="top">
      <Brand inFooter={true} variant={brandStyle} />
        <div className="site-footer-links">
          <a href="https://instagram.com/dra.carolpaulillo" target="_blank" rel="noopener">Instagram</a>
          <a href="https://www.linkedin.com/in/maria-carolina-paulillo-de-camargo-a68b0334/" target="_blank" rel="noopener">LinkedIn</a>
          <a href={waLink(WA_MAIN)} target="_blank" rel="noopener">WhatsApp</a>
        </div>
      </div>
      <div className="bottom">
        <div>© 2026 — Todos os direitos reservados</div>
        <div>São Paulo · Bragança Paulista · Online</div>
      </div>
    </div>
  </footer>;


// ---------- Floating WA ----------
const WAFloat = () =>
<a href={waLink(WA_MAIN)} target="_blank" rel="noopener" className="wa-float" aria-label="WhatsApp">
    <WAIcon /> Marcar consulta
  </a>;


window.SiteSections = { Approach, PathVsShortcut, Areas, About, Testimonials, Locations, FinalCTA, Footer, WAFloat };