// CardioFit — Homepage components

// === Hero (3D heart stage) ===
function HomeHero() {
  return (
    <section className="hero" id="inicio" data-screen-label="Hero">
      <div className="container">
        <div className="hero-stage reveal is-visible">
          <picture className="hero-heart-image" aria-hidden="true">
            <source
              srcSet="assets/hero-heart-mobile.webp"
              type="image/webp"
              media="(max-width: 760px)"
            />
            <source
              srcSet="assets/hero-heart-mobile.jpg"
              type="image/jpeg"
              media="(max-width: 760px)"
            />
            <source
              srcSet="assets/hero-heart.webp"
              type="image/webp"
            />
            <img
              src="assets/hero-heart.jpg"
              alt=""
              loading="eager"
              decoding="async"
              width="1376"
              height="768"
            />
          </picture>

          <div className="hero-stage-inner">
            <div className="hero-meta">
              <span className="hero-meta-line"><span className="hero-meta-dot"></span>Em prática · CRM-MG 48.227</span>
              <span>Vale do Aço · MG</span>
            </div>

            <div className="hero-stage-body">
              <span className="eyebrow">Cardiologia · Cardiometabolismo · Longevidade Cardiovascular</span>
              <h1 className="hero-display">Longevidade cardiovascular com <em>critério</em> científico.</h1>
              <p className="hero-lead">O trabalho do Dr. Bruno Nunes traduz cardiologia preventiva, ecocardiografia e cardiometabolismo em uma leitura clínica integrada. Menos protocolo, mais direção. Menos rastreio por inércia, mais sinal sobre ruído.</p>
              <div className="hero-stage-actions">
                <a className="button button-primary" href="agenda.html" onClick={() => window.fbq && window.fbq("trackCustom", "AgendaCtaClick", { source: "hero_primary" })}>
                  <svg className="button-icon" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <rect x="3" y="4.5" width="14" height="13" rx="2" stroke="currentColor" strokeWidth="1.6"/>
                    <path d="M3 8.5h14" stroke="currentColor" strokeWidth="1.6"/>
                    <path d="M7 3v3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
                    <path d="M13 3v3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
                  </svg>
                  Agendar teleconsulta
                </a>
                <a className="button button-secondary" href="abordagem.html">Conheça a abordagem</a>
              </div>
              <a className="hero-tertiary-link" href="https://checkup.cardiologiaintegrativa.com" target="_blank" rel="noreferrer" onClick={() => window.fbq && window.fbq("trackCustom", "CheckupClick")}>Acesse o Check-up 3.0 →</a>
            </div>

            <div className="hero-stage-foot">
              <span className="hero-scroll-hint">Role para continuar</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// === Sobre (snippet) ===
function HomeSobre() {
  return (
    <section className="sobre" id="sobre" data-screen-label="Sobre Bruno">
      <div className="container">
        <div className="sobre-grid reveal">
          <div className="sobre-portrait">
            <img src="assets/bruno-portrait.jpg" alt="Retrato institucional do Dr. Bruno Nunes" />
            <div className="sobre-portrait-veil"></div>
            <span className="sobre-portrait-tag">Dr. Bruno Nunes</span>
          </div>
          <div className="sobre-copy">
            <span className="eyebrow">Quem assina</span>
            <h2>Cardiologia que começa antes do exame alterado.</h2>
            <p>Cardiologista, ecocardiografista, com prática em cardiometabolismo e longevidade cardiovascular. O trabalho do Dr. Bruno Nunes é construído na linha entre evidência atualizada e leitura individual — onde a conduta deixa de ser protocolo e passa a ser decisão.</p>
            <blockquote className="sobre-quote">Prevenção de verdade exige contexto, critério e leitura integrada — não apenas uma lista de exames soltos.</blockquote>
            <div className="sobre-credentials">
              <span>CRM-MG 48.227</span>
              <span>RQE 39950 · 39951</span>
              <span>Vale do Aço · MG</span>
            </div>
            <a className="sobre-link" href="credenciais.html">Conheça a história</a>
            <a className="sobre-instagram-link" href="https://www.instagram.com/drbrunonunes.longevidade/" target="_blank" rel="noopener noreferrer" onClick={() => window.fbq && window.fbq("trackCustom", "InstagramClickSobre")}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <rect x="3" y="3" width="18" height="18" rx="5" stroke="currentColor" strokeWidth="1.8"/>
                <circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="1.8"/>
                <circle cx="17.5" cy="6.5" r="1.2" fill="currentColor"/>
              </svg>
              Acompanhe no Instagram · @drbrunonunes.longevidade
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// === Pillars row ===
function HomePillars() {
  const pillars = [
    {
      num: "01",
      title: "Cardiometabolismo",
      body: "Risco antes do diagnóstico. Resistência insulínica, ApoB, inflamação subclínica e pressão noturna lidos como uma única leitura — não como exames soltos.",
      glyph: (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M3 12h3l2-6 4 12 2-6h7" />
        </svg>
      ),
      href: "abordagem.html#cardiometabolismo",
    },
    {
      num: "02",
      title: "Longevidade cardiovascular",
      body: "Construir uma curva — não uma fotografia. VO₂ máximo, função diastólica, reserva metabólica e ritmo de envelhecimento entram como variáveis de decisão.",
      glyph: (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M4 18 L9 13 L13 16 L20 6" />
          <path d="M14 6 H20 V12" />
        </svg>
      ),
      href: "abordagem.html#longevidade",
    },
    {
      num: "03",
      title: "Medicina integrativa aplicada",
      body: "Corpo, mente e comportamento como parte do mesmo sistema cardiovascular. Sono, carga alostática e composição corporal entram na conduta clínica.",
      glyph: (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="12" r="9" />
          <path d="M12 3 V21 M3 12 H21" />
          <circle cx="12" cy="12" r="3" />
        </svg>
      ),
      href: "abordagem.html#integrativa",
    },
  ];
  return (
    <section className="pillars" id="abordagem" data-screen-label="A Abordagem">
      <div className="container">
        <div className="pillars-top reveal">
          <span className="eyebrow">A Abordagem</span>
          <h2 className="section-title">Três eixos clínicos que se atravessam em cada decisão.</h2>
          <p className="section-copy">Não são serviços diferentes. São lentes diferentes para o mesmo paciente — coração, metabolismo, comportamento — lidos juntos para que o plano clínico tenha direção e ritmo.</p>
        </div>
        <div className="pillars-grid reveal-stagger">
          {pillars.map(p => (
            <article key={p.num} className="pillar">
              <span className="pillar-num">{p.num}</span>
              <span className="pillar-glyph">{p.glyph}</span>
              <h3>{p.title}</h3>
              <p>{p.body}</p>
              <a className="pillar-link" href={p.href}>Saiba mais</a>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// === Conteúdos (Reels) ===
function ReelArt({ kind }) {
  // Lightweight SVG art per card — decorative placeholder evoking the topic
  const id = React.useId();
  if (kind === "apob") {
    return (
      <svg viewBox="0 0 200 250" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%" }}>
        <defs>
          <radialGradient id={id + "g"} cx="50%" cy="40%" r="60%">
            <stop offset="0%" stopColor="#30608B" stopOpacity="0.5" />
            <stop offset="100%" stopColor="#050a0f" stopOpacity="0" />
          </radialGradient>
        </defs>
        <rect width="200" height="250" fill="#0a121a" />
        <rect width="200" height="250" fill={`url(#${id}g)`} />
        {Array.from({ length: 28 }).map((_, i) => {
          const a = (i / 28) * Math.PI * 2;
          const r = 60 + (i % 3) * 14;
          const cx = 100 + Math.cos(a) * r;
          const cy = 130 + Math.sin(a) * r * 0.8;
          return <circle key={i} cx={cx} cy={cy} r={3 + (i % 3)} fill={i % 4 === 0 ? "#C8102E" : "#5a86ad"} fillOpacity={0.5 + (i % 3) * 0.15} />;
        })}
      </svg>
    );
  }
  if (kind === "vo2") {
    return (
      <svg viewBox="0 0 200 250" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%" }}>
        <rect width="200" height="250" fill="#0a121a" />
        <path d="M 0 200 Q 50 180 80 140 T 160 60 L 200 50 L 200 250 L 0 250 Z" fill="#30608B" fillOpacity="0.2" />
        <path d="M 0 200 Q 50 180 80 140 T 160 60 L 200 50" stroke="#5a86ad" strokeWidth="2" fill="none" />
        {[40, 80, 120, 160].map(x => (
          <line key={x} x1={x} x2={x} y1="40" y2="220" stroke="rgba(159,179,186,0.08)" />
        ))}
        <circle cx="160" cy="60" r="6" fill="#C8102E" />
      </svg>
    );
  }
  if (kind === "sono") {
    return (
      <svg viewBox="0 0 200 250" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%" }}>
        <rect width="200" height="250" fill="#0a121a" />
        <path d="M 20 130 C 60 70, 140 70, 180 130" stroke="rgba(216,199,180,0.4)" strokeWidth="1" fill="none" strokeDasharray="2 4" />
        <circle cx="100" cy="100" r="30" fill="#0f1d2a" stroke="rgba(216,199,180,0.4)" strokeWidth="1" />
        <path d="M 110 90 A 24 24 0 1 1 100 124 A 18 18 0 0 0 110 90 Z" fill="#d8c7b4" fillOpacity="0.85" />
      </svg>
    );
  }
  // mitocondria
  return (
    <svg viewBox="0 0 200 250" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%" }}>
      <rect width="200" height="250" fill="#0a121a" />
      <ellipse cx="100" cy="125" rx="76" ry="42" fill="rgba(200,16,46,0.18)" />
      <ellipse cx="100" cy="125" rx="76" ry="42" fill="none" stroke="rgba(200,16,46,0.5)" strokeWidth="1.5" />
      {Array.from({ length: 8 }).map((_, i) => (
        <path key={i} d={`M ${30 + i * 18} 105 Q ${30 + i * 18} 125 ${30 + i * 18 + 6} 145`} stroke="rgba(200,16,46,0.55)" strokeWidth="1" fill="none" />
      ))}
      <circle cx="100" cy="125" r="4" fill="#C8102E" />
    </svg>
  );
}

function HomeConteudos() {
  const reels = [
    { topic: "ApoB", title: "Por que ApoB importa mais que LDL isolado.", kind: "apob" },
    { topic: "VO₂ máximo", title: "Sua reserva cardiovascular tem idade — e tem teto.", kind: "vo2" },
    { topic: "Sono e pressão", title: "Pressão noturna alterada não é detalhe. É tendência.", kind: "sono" },
    { topic: "Cardiometabolismo", title: "Mitocôndria, glicose e o que sua frequência cardíaca esconde.", kind: "mito" },
  ];
  return (
    <section className="conteudos" id="conteudos" data-screen-label="Conteúdos">
      <div className="container">
        <div className="conteudos-top reveal">
          <span className="eyebrow">Conteúdos · Instagram</span>
          <h2 className="section-title">Material de estudo público, em ritmo editorial.</h2>
          <p className="section-copy">Posts e reels traduzem ciência atualizada em decisão clínica. Sem promessa, sem urgência. Só leitura útil para quem quer entender o que está sob o capô.</p>
        </div>
        <div className="conteudos-grid reveal-stagger">
          {reels.map((r, i) => (
            <a key={i} className="reel-card" href="https://www.instagram.com/drbrunonunes.longevidade/" target="_blank" rel="noreferrer">
              <div className="reel-thumb">
                <div className="reel-thumb-art"><ReelArt kind={r.kind} /></div>
                <span className="reel-play">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg>
                </span>
              </div>
              <div className="reel-card-body">
                <span style={{ fontFamily: "var(--font-sans)", fontSize: "0.7rem", letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--red-soft)", fontWeight: 700 }}>{r.topic}</span>
                <h3>{r.title}</h3>
              </div>
              <div className="reel-meta">
                <span>@drbrunonunes.longevidade</span>
              </div>
            </a>
          ))}
        </div>
        <div style={{ marginTop: 28, display: "flex", justifyContent: "flex-start" }}>
          <a className="link-underline" href="https://www.instagram.com/drbrunonunes.longevidade/" target="_blank" rel="noreferrer">Siga @drbrunonunes.longevidade</a>
        </div>
      </div>
    </section>
  );
}

// === Lead magnet ===
function HomeLeadMagnet() {
  return (
    <section className="leadmagnet" id="checkup" data-screen-label="Check-up 3.0">
      <div className="container">
        <div className="leadmagnet-shell reveal">
          <div className="leadmagnet-cover">
            <img src="assets/checkup-3-cover.jpg" alt="Capa do material Check-up 3.0" />
          </div>
          <div className="leadmagnet-copy">
            <span className="eyebrow">Material gratuito</span>
            <h2>Check-up 3.0 — o que muda quando o exame é lido como leitura, não como lista.</h2>
            <p>Um guia editorial, escrito por dentro da prática clínica, sobre como organizar exames cardiovasculares e metabólicos com critério. Sem captura de lead invasiva.</p>
            <ul className="leadmagnet-list">
              <li>Como separar marcador convencional de marcador realmente útil</li>
              <li>Por que ApoB, Lp(a) e HOMA-IR mudam conduta — e quando não mudam</li>
              <li>O papel da função diastólica e do VO₂ na leitura de longevidade</li>
              <li>Como pedir contexto e continuidade ao próprio cardiologista</li>
            </ul>
            <div className="leadmagnet-actions">
              <a className="button button-primary" href="https://checkup.cardiologiaintegrativa.com" target="_blank" rel="noreferrer" onClick={() => window.fbq && window.fbq("trackCustom", "CheckupClick")}>Acessar o Check-up 3.0</a>
              <a className="button button-secondary" href="abordagem.html">Entender o método antes</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.HomeHero = HomeHero;
window.HomeSobre = HomeSobre;
window.HomePillars = HomePillars;
window.HomeConteudos = HomeConteudos;
window.HomeLeadMagnet = HomeLeadMagnet;
