// home.jsx — Home page sections

// ── HERO ───────────────────────────────────────────────────────────────────
const Hero = ({ tweaks, navigate }) =>
<section className="hero" data-layout={tweaks.heroLayout} data-screen-label="01 Home — Hero">
    <div className="hero__copy">
      <span className="eyebrow">Saúde feminina · Hormônios · Metabolismo · Longevidade</span>
      <h1 className="hero__title">
        Seu corpo <em>mudou</em>.<br />
        A gente te ajuda<br />a entender <em>por quê</em>.
        <small>Saúde feminina com abordagem integrada</small>
      </h1>
      <p className="hero__lead">
        Saúde feminina com abordagem integrada, focada em metabolismo, hormônios
        e longevidade. Aqui, não tratamos apenas sintomas — investigamos a causa.
      </p>
      <div className="hero__ctas">
        <Btn variant="primary" size="lg" icon="calendar"
      onClick={() => navigate("agendamento")}>
          Agendar avaliação
        </Btn>
        <Btn variant="ghost" size="lg" icon="wa"
      onClick={() => window.open("https://wa.me/5562991323402", "_blank")}>
          Falar no WhatsApp
        </Btn>
      </div>
      <div className="hero__meta">
        <div><strong>+30</strong><span>anos de experiência</span></div>
        <div><strong>5</strong><span>especialistas integradas</span></div>
        <div><strong>VIDA</strong><span>método exclusivo</span></div>
      </div>
    </div>
    <div className="hero__media">
      <div className="hero__pattern hero__pattern--tl" aria-hidden="true"></div>
      <div className="hero__pattern hero__pattern--br" aria-hidden="true"></div>
      <div className="hero__portrait-wrap">
        <img src="assets/avatar-neusa-03.png" alt="Dra. Neusa Brisolla" />
      </div>
      <div className="hero__badge"><i></i>{[0,6].includes(new Date().getDay()) ? "Atendemos seg–sex" : "Atendendo hoje"}</div>
    </div>
  </section>;


// ── MARQUEE ───────────────────────────────────────────────────────────────
const TrustMarquee = () => {
  const items = [
  "Saúde feminina integrada", "Hormônios & metabolismo", "Terapia capilar",
  "Microscopia de sangue vivo", "Soroterapia", "Método VIDA"];

  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee__track">
        {[...items, ...items, ...items].map((it, i) =>
        <span key={i} className="marquee__item">{it}</span>
        )}
      </div>
    </div>);

};

// ── INTRO (Identificação + Posicionamento + Método VIDA) ─────────────────
const Intro = () =>
<section className="section section--narrow" data-screen-label="01 Home — Você se sente assim?">
    <div className="intro">
      <div className="intro__media">
        <img src="assets/avatar-neusa-06.png" alt="Dra. Neusa Brisolla na clínica" />
      </div>
      <div className="intro__copy">
        <span className="eyebrow">Você se sente assim?</span>
        <h2>Seus exames podem estar <em>normais</em>… mas isso não significa que está tudo bem.</h2>
        <p>
          Na Clínica Longevidade e Saúde, não tratamos apenas sintomas. Nós
          investigamos a causa. Olhamos o corpo de forma completa, integrada e
          estratégica, respeitando os sinais que ele já está dando.
        </p>
        <div className="intro__pillars">
          <div className="intro__pillar">
            <div className="intro__pillar-icon"><Icon name="heart" size={20} /></div>
            <div>
              <h4>Cansaço constante</h4>
              <p>Sensação de falta de energia que não passa com descanso.</p>
            </div>
          </div>
          <div className="intro__pillar">
            <div className="intro__pillar-icon"><Icon name="flask" size={20} /></div>
            <div>
              <h4>Dificuldade para emagrecer</h4>
              <p>O corpo não responde como antes, mesmo com esforço.</p>
            </div>
          </div>
          <div className="intro__pillar">
            <div className="intro__pillar-icon"><Icon name="feather" size={20} /></div>
            <div>
              <h4>Queda de cabelo</h4>
              <p>Um sinal importante que o corpo está dando.</p>
            </div>
          </div>
          <div className="intro__pillar">
            <div className="intro__pillar-icon"><Icon name="leaf" size={20} /></div>
            <div>
              <h4>Alterações hormonais</h4>
              <p>Humor, sono e ciclo desregulados há tempos.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>;


// ── MÉTODO VIDA ──────────────────────────────────────────────────────────
const MetodoVida = () => {
  const pillars = [
  { letter: "V", title: "Vitalidade celular", body: "Energia, função e regeneração das células — base de tudo." },
  { letter: "I", title: "Inflamação subclínica", body: "Sinais silenciosos que o corpo dá antes da doença aparecer." },
  { letter: "D", title: "Desintoxicação", body: "Como seu organismo elimina o que não serve — e o que pesa." },
  { letter: "A", title: "Antioxidação", body: "Equilíbrio entre o que envelhece e o que protege o corpo." }];

  return (
    <section className="section section--soft section--full" data-screen-label="01 Home — Método VIDA">
      <div className="section">
        <div className="section__head">
          <span className="eyebrow">Método VIDA</span>
          <h2>Uma nova forma de olhar para a sua <em>saúde</em>.</h2>
          <p>Uma abordagem que permite entender o organismo antes que a doença apareça.</p>
        </div>
        <div className="metodo-grid">
          {pillars.map((p) =>
          <article key={p.letter} className="metodo-card">
              <div className="metodo-card__letter">{p.letter}</div>
              <div className="metodo-card__copy">
                <h3 className="metodo-card__title">{p.title}</h3>
                <p className="metodo-card__body">{p.body}</p>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

};

// ── SERVICES ──────────────────────────────────────────────────────────────
const SERVICES = [
{
  n: "01", icon: "droplet",
  title: "Análise de sangue vivo",
  body: "Uma gota de sangue observada em tempo real revela o que exames convencionais não mostram.",
  items: ["Análise em tempo real", "Diagnóstico funcional", "Plano direcionado"],
  badge: "Exclusivo",
  img: "assets/blog-microscopia.jpg"
},
{
  n: "02", icon: "user",
  title: "Consulta integrativa",
  body: "Avaliação que olha para o todo — porta de entrada do Método VIDA.",
  items: ["Anamnese profunda", "Visão integrada", "Plano individual"],
  img: "assets/blog-consulta.jpg", imgPos: "center 30%"
},
{
  n: "03", icon: "feather",
  title: "Terapia capilar",
  body: "Queda de cabelo não é só estética — é um sinal do corpo que merece ser escutado.",
  items: ["Avaliação tricológica", "Protocolos personalizados", "Acompanhamento contínuo"],
  img: "https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?w=600&q=80&auto=format&fit=crop"
},
{
  n: "04", icon: "flask",
  title: "Metabolismo & emagrecimento",
  body: "Seu corpo precisa de estratégia, não apenas restrição.",
  items: ["Avaliação metabólica", "Nutrição integrativa", "Acompanhamento psicológico"],
  img: "assets/blog-emagrecimento.jpg", imgPos: "center 25%"
},
{
  n: "05", icon: "heart",
  title: "Hormônios",
  body: "Equilíbrio hormonal transforma energia, humor e qualidade de vida.",
  items: ["Avaliação hormonal", "Modulação personalizada", "Saúde e longevidade"],
  badge: "Premium",
  img: "https://images.unsplash.com/photo-1656331797721-b593b8f00297?w=600&q=80&auto=format&fit=crop"
},
{
  n: "06", icon: "sparkle",
  title: "Soroterapia",
  body: "Reposição endovenosa personalizada para devolver energia ao corpo.",
  items: ["Vitaminas e minerais", "Protocolos exclusivos", "Resultado imediato"],
  img: "assets/blog-soroterapia.jpg"
},
{
  n: "07", icon: "leaf",
  title: "Estética íntima",
  body: "Cuidado especializado em saúde íntima feminina com técnicas modernas.",
  items: ["Cirurgia íntima a laser", "Peeling íntimo", "Preenchimento íntimo", "Implante hormonal"],
  solo: true,
  img: "assets/estetica-intima.jpg", imgPos: "center 55%"
}];


const Services = ({ navigate }) => {
  const [openId, setOpenId] = React.useState(null);
  const openService = SERVICES.find((s) => s.n === openId) || null;
  return (
  <section className="section" id="servicos" data-screen-label="01 Home — Serviços">
    <div className="section__head">
      <span className="eyebrow">Tratamentos</span>
      <h2>Tratamentos personalizados para cada <em>fase</em> da sua vida.</h2>
      <p>Tratar a causa muda tudo. Saúde é construção.
Longevidade é estratégia.</p>
    </div>
    <div className="services-grid">
      {SERVICES.map((s) => <article key={s.n} className={"service" + (s.solo ? " service--solo" : "")}>
          {s.badge && <span className="service__badge">{s.badge}</span>}
          {s.img && <div className="service__media"><img src={s.img} alt={s.title} loading="lazy" style={{objectPosition: s.imgPos || "center center"}} /></div>}
          <div className="service__content">
            <div className="service__num">{s.n}</div>
            <div className="service__icon"><Icon name={s.icon} size={24} /></div>
            <h3 className="service__title">{s.title}</h3>
            <p className="service__body">{s.body}</p>
            <ul className="service__list">
              {s.items.map((it) => <li key={it}>{it}</li>)}
            </ul>
            <button className="service__more" onClick={() => setOpenId(s.n)}>
              Saber mais <Icon name="arrow" size={14} />
            </button>
          </div>
        </article>
    )}
    </div>
    <ServiceDrawer service={openService} onClose={() => setOpenId(null)} navigate={navigate} />
    <div style={{ textAlign: "center", marginTop: 48 }}>
      <Btn variant="outline" size="md" iconRight="arrow"
    onClick={() => navigate("servicos")}>
        Ver todos os tratamentos
      </Btn>
    </div>
  </section>);

};


// ── DIFERENCIAIS ──────────────────────────────────────────────────────────
const Diferenciais = () => {
  const items = [
  { icon: "leaf", title: "Abordagem integrada", body: "Hormônios, metabolismo, nutrição e mente — porque tudo no seu corpo conversa." },
  { icon: "sparkle", title: "Método VIDA", body: "Protocolo exclusivo da clínica, construído ao longo de mais de 30 anos de prática clínica." },
  { icon: "flask", title: "Ciência atual", body: "Microscopia de sangue vivo e diagnóstico funcional — tecnologia além do exame tradicional." },
  { icon: "heart", title: "Tratar a causa", body: "Não tratamos apenas o sintoma. Buscamos a raiz — para resultados duradouros." }];

  return (
    <section className="section section--vinho section--full" data-screen-label="01 Home — Diferenciais">
      <div className="section" style={{ padding: "0 32px" }}>
        <div className="section__head">
          <span className="eyebrow" style={{ color: "var(--areia-essencial)" }}>Diferenciais</span>
          <h2>Quatro coisas que você só encontra <em>aqui</em>.</h2>
        </div>
        <div className="diffs">
          {items.map((it) =>
          <div key={it.title} className="diff">
              <div className="diff__icon"><Icon name={it.icon} size={22} /></div>
              <h4>{it.title}</h4>
              <p>{it.body}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

};

// ── DOCTOR ────────────────────────────────────────────────────────────────
const DoctorBlock = ({ navigate }) =>
<section className="section" id="equipe" data-screen-label="01 Home — Dra. Neusa">
    <div className="doc">
      <div className="doc__media">
        <img src="assets/avatar-neusa-07.png" alt="Dra. Neusa Brisolla" />
      </div>
      <div className="doc__copy">
        <span className="eyebrow">Quem vai cuidar de você</span>
        <h2>Dra. Neusa Brisolla — uma medicina que <em>busca a causa</em>.</h2>
        <p>
          Ao longo da prática médica, ficou claro que muitos pacientes apresentavam
          sintomas reais… mas exames considerados "normais". Foi a partir disso que
          nasceu a abordagem da clínica: uma medicina que busca entender a causa,
          não apenas tratar o sintoma.
        </p>
        <p>
          Cada protocolo é construído sobre ciência e refinado pelo olhar atento
          ao que faz sentido para a sua história — com profundidade, individualidade
          e estratégia.
        </p>
        <div className="doc__credits">
          <div className="doc__credit"><strong>Atuação</strong><span>Saúde da mulher · Longevidade</span></div>
          <div className="doc__credit"><strong>Especialidades</strong><span>Hormônios · Metabolismo</span></div>
          <div className="doc__credit"><strong>Método</strong><span>VIDA — protocolo exclusivo</span></div>
          <div className="doc__credit"><strong>Experiência</strong><span>+30 anos de prática clínica</span></div>
        </div>
        <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
          <Btn variant="primary" icon="calendar" onClick={() => navigate("agendamento")}>
            Agendar com a Dra. Neusa
          </Btn>
          <Btn variant="outline" iconRight="arrow" onClick={() => navigate("equipe")}>
            Conhecer a equipe
          </Btn>
        </div>
        <div className="doc__sign">
          <span className="signature">Dra. Neusa Brisolla</span>
          <small>Médica responsável · Clínica Longevidade e Saúde · Goiânia</small>
        </div>
      </div>
    </div>
  </section>;


// ── TESTIMONIALS ──────────────────────────────────────────────────────────
const Testimonials = () => {
  const items = [
  {
    stars: 5,
    quote: "Eu não me reconhecia mais… hoje eu me sinto viva de novo.",
    name: "Marina A.", role: "Paciente", initial: "M"
  },
  {
    stars: 5,
    quote: "Aqui eu entendi o que estava acontecendo com o meu corpo.",
    name: "Patrícia L.", role: "Paciente", initial: "P"
  },
  {
    stars: 5,
    quote: "Não foi só emagrecimento. Foi transformação.",
    name: "Camila R.", role: "Paciente", initial: "C"
  }];

  return (
    <section className="testimonial-stage" data-screen-label="01 Home — Depoimentos">
      <div className="testimonial-stage__pattern" aria-hidden="true"></div>
      <div style={{ maxWidth: 1320, margin: "0 auto", width: "100%", padding: "0 32px" }}>
        <div className="section__head">
          <span className="eyebrow" style={{ color: "var(--areia-essencial)" }}>Depoimentos</span>
          <h2 style={{ color: "var(--marfim-sereno)" }}>O que nossas <em>pacientes</em> dizem.</h2>
        </div>
        <div className="testimonials">
          {items.map((t, i) =>
          <figure key={i} className="tstm">
              <div className="tstm__stars">
                {Array.from({ length: t.stars }).map((_, j) => <Icon key={j} name="star" size={14} />)}
              </div>
              <blockquote>"{t.quote}"</blockquote>
              <figcaption>
                <div className="tstm__avatar">{t.initial}</div>
                <div>
                  <strong>{t.name}</strong>
                  <span>{t.role}</span>
                </div>
              </figcaption>
            </figure>
          )}
        </div>
      </div>
    </section>);

};

// ── CTA ──────────────────────────────────────────────────────────────────
const HomeCta = ({ navigate }) =>
<section className="section section--narrow" data-screen-label="01 Home — CTA">
    <div className="cta">
      <div className="cta__inner">
        <span className="eyebrow">Comece o seu cuidado</span>
        <h2>Se você sente que seu corpo <em>mudou</em>… talvez esteja na hora de entender por quê.</h2>
        <p>Entre em contato com a nossa equipe. A gente te ajuda a entender o que está acontecendo.</p>
        <div className="cta__ctas">
          <Btn variant="marfim" size="lg" icon="calendar"
        onClick={() => navigate("agendamento")}>
            Agendar avaliação
          </Btn>
          <Btn variant="outline" size="lg" icon="wa"
        onClick={() => window.open("https://wa.me/5562991323402", "_blank")}
        style={{ borderColor: "rgba(255,251,244,.4)", color: "var(--marfim-sereno)" }}>
            Falar no WhatsApp
          </Btn>
        </div>
      </div>
    </div>
  </section>;


// ── FAQ ───────────────────────────────────────────────────────────────────
const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  const items = [
  { q: "Como funciona a primeira consulta?", a: "A consulta integrativa é uma avaliação ampla — conversamos sobre seu histórico, sintomas, rotina, hábitos e exames. A partir disso, construímos um plano personalizado e estratégico para o seu caso." },
  { q: "O que é o Método VIDA?", a: "É o protocolo exclusivo da Clínica Longevidade e Saúde, construído ao longo de mais de 30 anos de prática. Une hormônios, metabolismo, nutrição e estilo de vida em um cuidado integrado para tratar a causa, não apenas os sintomas." },
  { q: "O que é a microscopia de sangue vivo?", a: "É uma análise em tempo real de uma gota de sangue, observada ao microscópio. Permite avaliar funcionalidades que exames tradicionais não revelam — uma ferramenta poderosa para o diagnóstico funcional." },
  { q: "Como é o acompanhamento após o início do tratamento?", a: "Você tem acompanhamento contínuo da equipe e contato direto da clínica para qualquer dúvida. Os retornos são agendados conforme o seu plano." },
  { q: "Quais formas de pagamento são aceitas?", a: "Aceitamos PIX, todos os cartões de crédito e transferência. Para programas de longo prazo, oferecemos planos personalizados." }];

  return (
    <section className="section" data-screen-label="01 Home — FAQ">
      <div className="section__head">
        <span className="eyebrow">Perguntas Frequentes</span>
        <h2>Dúvidas que ouvimos com <em>frequência</em>.</h2>
      </div>
      <div className="faq">
        {items.map((it, i) =>
        <div key={i} className="faq__item" data-open={open === i ? "1" : "0"}>
            <button className="faq__btn" onClick={() => setOpen(open === i ? -1 : i)}>
              <span>{it.q}</span>
              <span className="faq__icon"><Icon name="plus" size={16} /></span>
            </button>
            <div className="faq__panel">
              <div className="faq__panel-inner">{it.a}</div>
            </div>
          </div>
        )}
      </div>
    </section>);

};

// ── PAGE ──────────────────────────────────────────────────────────────────
const HomePage = ({ tweaks, navigate }) =>
<>
    <Hero tweaks={tweaks} navigate={navigate} />
    <TrustMarquee />
    <Intro />
    <MetodoVida />
    <Services navigate={navigate} />
    <Diferenciais />
    <DoctorBlock navigate={navigate} />
    <Testimonials />
    <FAQ />
    <HomeCta navigate={navigate} />
  </>;


window.HomePage = HomePage;