// LungPilot · landing page React app (Babel inline)
// Uses globals: React, ReactDOM (UMD via CDN)
// Listens for 'lp:headline' CustomEvent dispatched by tweaks-panel.jsx

const { useState, useEffect, useCallback, useRef } = React;

// ===================================================================
// BROWSER WINDOW — chrome (dots + URL bar) + screen
// ===================================================================
function BrowserWindow({ src, alt, path, className, landscape, onLoad }) {
  return (
    <div className={`bw ${landscape ? 'bw-landscape' : ''} ${className || ''}`}>
      <div className="bw-chrome">
        <div className="bw-dots"><span/><span/><span/></div>
        <div className="bw-url">
          <span className="lock" aria-hidden="true"/>
          <span className="path">{path || 'lungpilot.com.br'}</span>
        </div>
        <div style={{ width: 33 }}/>
      </div>
      <img
        className="bw-screen"
        src={src}
        alt={alt || 'LungPilot screenshot'}
        loading="lazy"
        onLoad={onLoad}
      />
    </div>
  );
}

// ===================================================================
// SVG ICONS (inline, stroke-based)
// ===================================================================
const I = {
  bolt: (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
    </svg>
  ),
  steth: (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4.8 2.3A.3.3 0 1 0 5 2H4a2 2 0 0 0-2 2v5a6 6 0 0 0 6 6v0a6 6 0 0 0 6-6V4a2 2 0 0 0-2-2h-1a.2.2 0 1 0 .3.3"/>
      <path d="M8 15v1a6 6 0 0 0 6 6v0a6 6 0 0 0 6-6v-4"/>
      <circle cx="20" cy="10" r="2"/>
    </svg>
  ),
  arrow: (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
      <line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>
    </svg>
  ),
  check: '✓',
  pillar: {
    aval: (
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M3 7h18M3 12h18M3 17h11"/><circle cx="19" cy="17" r="2"/>
      </svg>
    ),
    sim: (
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <rect x="2" y="6" width="20" height="12" rx="2"/>
        <path d="M5 12h2l2-4 3 8 2-5 2 2h3"/>
      </svg>
    ),
    pocus: (
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M12 4v3M12 4a4 4 0 0 0-4 4v2l-3 6h14l-3-6V8a4 4 0 0 0-4-4z"/>
        <circle cx="12" cy="18" r="1.4" fill="currentColor"/>
      </svg>
    ),
  },
  tool: {
    ai: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <rect x="3" y="3" width="18" height="18" rx="3"/>
        <path d="M8 9l2 6 2-4 2 4 2-6"/>
      </svg>
    ),
    search: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="11" cy="11" r="7"/><line x1="20" y1="20" x2="16.5" y2="16.5"/>
      </svg>
    ),
    flask: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M9 3v6L4 19a2 2 0 0 0 1.8 3h12.4a2 2 0 0 0 1.8-3L15 9V3"/>
        <line x1="8" y1="3" x2="16" y2="3"/>
      </svg>
    ),
  },
};

// ===================================================================
// NAV
// ===================================================================
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const h = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', h, { passive: true });
    h();
    return () => window.removeEventListener('scroll', h);
  }, []);
  return (
    <nav className={`main-nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="nav-inner">
        <a href="#top" className="logo">
          <img src="/3d/assets/lungpilot-icon.png" alt="LungPilot" width="32" height="32"/>
          <span className="logo-text">LungPilot</span>
        </a>
        <div className="nav-links">
          <a href="#frentes">Frentes</a>
          <a href="#simulador">Simulador</a>
          <a href="#avaliacao">Avaliação</a>
          <a href="#pocus">POCUS</a>
        </div>
        <div className="nav-right">
          {/* IMPORTANTE 17/05/2026 (Iago) · NÃO TROCAR POR ANCHORS (#entrar/#cadastro)
              Bug recorrente: alguém sincroniza do agencia (que estava correto) ou faz
              revert e os links viram hashes vazios, quebrando o login. Manter rotas
              reais /login e /register que apontam pra React SPA. */}
          <a href="/login" className="nav-link-text">Entrar</a>
          <a href="/register" className="btn-pill">Começar grátis</a>
        </div>
      </div>
    </nav>
  );
}

// ===================================================================
// HERO
// ===================================================================
function Hero() {
  // Initial headline from tweaks (or defaults)
  const initial = (typeof window !== 'undefined' && window.__tweaks) || {};
  const [l1, setL1] = useState(initial.l1 || 'Plantão de UTI não devia te custar o');
  const [l2, setL2] = useState(initial.l2 || 'jantar de casa.');

  useEffect(() => {
    const handler = (e) => {
      if (e.detail) {
        if (typeof e.detail.l1 === 'string') setL1(e.detail.l1);
        if (typeof e.detail.l2 === 'string') setL2(e.detail.l2);
      }
    };
    document.addEventListener('lp:headline', handler);
    return () => document.removeEventListener('lp:headline', handler);
  }, []);

  return (
    <section className="hero" id="top">
      <div className="container">
        {/* Onda anti-SaMD F1.5 (2026-05-20): banner above-fold obrigatório (Renata sev 5) */}
        <div className="samd-banner-hero reveal" role="note" aria-label="Aviso educacional NÃO-SaMD" style={{
          background: '#FFF8E1',
          border: '1px solid #FFC107',
          padding: '12px 18px',
          borderRadius: 12,
          margin: '0 auto 24px auto',
          maxWidth: 720,
          fontSize: 13,
          color: '#5d4e00',
          lineHeight: 1.55,
          textAlign: 'center',
          fontWeight: 500,
        }}>
          <span style={{ marginRight: 6 }}>ⓘ</span>
          Otimizador de tempo pessoal pra médicos · <b>NÃO é dispositivo médico · NÃO substitui prontuário</b> · tudo é rascunho · você transcreve manualmente pro prontuário oficial.
        </div>
        <div className="hero-grid">
          <div className="hero-content">
            <div className="reveal">
              <div className="eyebrow">
                <span className="dot"></span>
                Construído por médico intensivista atuante em UTI terciária pública de São Paulo
              </div>
              <div className="disclaimer-tiny">
                Otimizador de tempo pessoal · não chancelado por sociedade médica · não é dispositivo médico · você transcreve manualmente pro prontuário oficial.
              </div>
            </div>
            <h1 className="reveal">
              <span className="line">{l1}</span>
              <span className="line gradient-text">{l2}</span>
            </h1>
            <p className="hero-subcopy reveal">
              Construído por quem ainda pega plantão. Pensado pro R1 que chega no leito 7 sem saber qual gasometria é de hoje.
            </p>
            <p className="hero-subcopy reveal">
              Ajuda a organizar plantão e evolução · cada minuto economizado fica com você.
            </p>
            <div className="hero-cta-row reveal">
              {/* /register é rota real do React SPA · não trocar por #cadastro (anchor quebra) */}
              <a href="/register" className="btn-pill large">
                Testar no próximo plantão · 7 dias grátis
                <span className="arrow">{I.arrow}</span>
              </a>
              <a href="#frentes" className="btn-pill ghost large">Ver como funciona</a>
            </div>
            <div className="trust-line reveal">
              <span className="check">{I.check}</span>
              <span>R$ 59,90/mês no plano mensal ou R$ 598,80/ano (R$ 49,90/mês no anual) · cancele a qualquer momento no painel sem multa.</span>
            </div>
            <div className="logo-strip reveal">
              <div className="label">Em uso por</div>
              <div className="logos">
                <span>Residentes e plantonistas em hospitais universitários de SP e RJ</span>
              </div>
            </div>
          </div>

          <div className="hero-right reveal">
            <div className="hero-window-wrap">
              <a href="#frentes" className="callout cl1" aria-label="Protocolo rápido">
                <span className="ico" aria-hidden="true">{I.bolt}</span>
                <div>
                  <div className="ttl">Protocolo rápido</div>
                  <div className="sub">consulta no plantão</div>
                </div>
              </a>
              <div className="hero-window">
                <BrowserWindow
                  src="/3d/assets/app-home.png"
                  alt="LungPilot · tela inicial"
                  path="lungpilot.com.br/inicio"
                />
              </div>
              <a href="#avaliacao" className="callout cl2" aria-label="Próxima passagem em 3h24">
                <span className="ico" aria-hidden="true">{I.steth}</span>
                <div>
                  <div className="ttl">Próx. passagem em 3h24</div>
                  <div className="sub">passagem SBAR já montada</div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===================================================================
// SCENES — Em cena (PNL + 3 image-slots)
// ===================================================================
function Scenes() {
  // Render image-slot via dangerouslySetInnerHTML to keep custom-element attribute parsing intact
  const slotHTML = (id, src) => ({
    __html: `<image-slot id="${id}" shape="rounded" radius="22" fit="cover" src="/3d/assets/${src}" placeholder="Arraste outra foto se quiser substituir"></image-slot>`
  });

  return (
    <section id="cenas">
      <div className="container">
        <div className="section-eyebrow reveal">Em cena</div>
        <h2 className="reveal" style={{ marginBottom: 36 }}>
          O que o LungPilot devolve, <span className="gradient-text">enquanto você ainda tá no plantão.</span>
        </h2>

        <div className="scenes-grid">
          {/* CARD 0 — PNL dark */}
          <div className="scene-card scene-dark reveal">
            <div>
              <div className="label">Sem bronca · Sem suor</div>
              <h3>Round limpo. Antes do staff entrar.</h3>
            </div>
            <p>
              <span className="pop">Imagina chegar no round das 7h</span> com a evolução pronta, a passagem SBAR montada e os escores já calculados. <span className="pop">É isso que o LungPilot devolve</span> depois do plantão — você só revisa.
            </p>
          </div>

          {/* CARD 1 — beira do leito */}
          <div className="scene-card reveal">
            <div dangerouslySetInnerHTML={slotHTML('scene-beira-leito', 'scene-beira-leito.png')} />
            <div className="scene-overlay">
              <div className="num">01 · AVALIAÇÃO</div>
              <div className="cap">Evolução por sistemas</div>
            </div>
          </div>

          {/* CARD 2 — ventilador */}
          <div className="scene-card reveal">
            <div dangerouslySetInnerHTML={slotHTML('scene-ventilador', 'scene-ventilador.png')} />
            <div className="scene-overlay">
              <div className="num">02 · SIMULADOR</div>
              <div className="cap">Ajuste fino do ventilador</div>
            </div>
          </div>

          {/* CARD 3 — pocus */}
          <div className="scene-card reveal">
            <div dangerouslySetInnerHTML={slotHTML('scene-pocus', 'scene-pocus.png')} />
            <div className="scene-overlay">
              <div className="num">03 · POCUS</div>
              <div className="cap">POCUS guiado à beira do leito</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===================================================================
// PILLARS — 3 frentes
// ===================================================================
function Pillar({ href, icon, title, desc, screenSrc, screenPath, tag }) {
  return (
    <a href={href} className="pillar-card reveal">
      <div className="icon" aria-hidden="true">{icon}</div>
      <h3>{title}</h3>
      <div className="desc">{desc}</div>
      <div className="mini-bw">
        <BrowserWindow src={screenSrc} path={screenPath} alt={title}/>
      </div>
      <code className="tag">{tag}</code>
    </a>
  );
}

function Pillars() {
  return (
    <section id="frentes">
      <div className="container">
        <div className="section-eyebrow reveal">Três frentes integradas</div>
        <h2 className="reveal">
          Um app pra <span className="gradient-text">organizar o leito</span>, simular ventilador e treinar POCUS.
        </h2>
        <p className="section-sub reveal">
          Tudo conversa entre si. A avaliação UTI exporta o SOAP. O simulador calibra o que você vai propor no round. O POCUS Hub te ensina a janela antes do paciente real.
        </p>
        <div className="pillars-grid" style={{ marginTop: 40 }}>
          <Pillar
            href="#avaliacao"
            icon={I.pillar.aval}
            title="Avaliação UTI"
            desc="Neuro, Resp, Hemo, GI, Renal, Infec. Organiza seu raciocínio · gera rascunho SOAP pra você transcrever manualmente pro prontuário oficial. Calculadoras de apoio educacional."
            screenSrc="/3d/assets/app-avaliacao.png"
            screenPath="lungpilot/exemplo/avaliacao"
            tag="qSOFA · APACHE · Glasgow"
          />
          <Pillar
            href="#simulador"
            icon={I.pillar.sim}
            title="Simulador VM"
            desc="VCV, PCV, PSV, SIMV com mecânica real. 21 patologias: SDRA, DPOC, asma grave, pós-PCR, desmame guiado."
            screenSrc="/3d/assets/app-simulador-running.png"
            screenPath="lungpilot/exemplo/simulador"
            tag="PEEP · FiO₂ · Vt · Tobin"
          />
          <Pillar
            href="#pocus"
            icon={I.pillar.pocus}
            title="POCUS Hub"
            desc="Cardio, Pulmão, Volemia, BLUE, RUSH — posicionamento de probe em manequim, gabarito anatômico e quiz."
            screenSrc="/3d/assets/app-pocus-cardio.png"
            screenPath="lungpilot/exemplo/pocus"
            tag="Cardio · Pulmão · BLUE"
          />
        </div>
      </div>
    </section>
  );
}

// ===================================================================
// SPOTLIGHTS (Simulador / Avaliação / POCUS)
// ===================================================================
function Spotlight({ id, tilt, reverse, eyebrow, headline, headlineHighlight, lead, bullets, screenSrc, screenPath, screenAlt }) {
  return (
    <section id={id} className={tilt}>
      <div className="container">
        <div className={`spotlight ${reverse ? 'reverse' : ''}`}>
          <div className="spotlight-text reveal">
            <div className="section-eyebrow">{eyebrow}</div>
            <h2>
              {headline} <span className="gradient-text">{headlineHighlight}</span>
            </h2>
            <p className="lead">{lead}</p>
            <ul className="spotlight-bullets">
              {bullets.map((b, i) => (
                <li key={i}>
                  <span className="num">{String(i + 1).padStart(2, '0')}</span>
                  <div>
                    <div className="title">{b.title}</div>
                    <div className="desc">{b.desc}</div>
                  </div>
                </li>
              ))}
            </ul>
          </div>
          <div className="spotlight-window reveal">
            <BrowserWindow src={screenSrc} path={screenPath} alt={screenAlt}/>
          </div>
        </div>
      </div>
    </section>
  );
}

function Simulador() {
  return (
    <Spotlight
      id="simulador"
      tilt="tilt-l"
      eyebrow="Simulador VM"
      headline="O ventilador da UTI,"
      headlineHighlight="antes do leito real."
      lead="Treine modos, alarmes e desmame com 21 cenários didáticos calibrados. Mecânica realista · você ajusta PEEP, FiO₂, Vt e a curva responde. Cenários simulados · NÃO afetam paciente real."
      bullets={[
        { title: 'Modos clássicos',     desc: 'VCV, PCV, PSV, SIMV — todos com gatilho, rampa e ciclagem editáveis.' },
        { title: '21 cenários clínicos', desc: 'SDRA, DPOC exacerbada, asma grave, pós-PCR, TCE, pós-op cardíaco e desmame.' },
        { title: 'Desmame · cenário de estudo', desc: 'Material didático sobre TRE, índice de Tobin e checklist de extubação baseado em diretrizes. Não substitui avaliação à beira-leito.' },
        { title: 'Erros pedagógicos',   desc: 'Auto-PEEP, assincronias e hiperdistensão — com correções passo-a-passo.' },
      ]}
      screenSrc="/3d/assets/app-simulador-running.png"
      screenPath="lungpilot/exemplo/simulador-sdra"
      screenAlt="LungPilot · simulador VM · SDRA"
    />
  );
}

function Avaliacao() {
  return (
    <Spotlight
      id="avaliacao"
      tilt="tilt-r"
      reverse={true}
      eyebrow="Avaliação UTI"
      headline="Seis sistemas,"
      headlineHighlight="preenchidos por toque."
      lead="O fluxo da avaliação de UTI já estruturado. Marca o que viu, o app calcula escores, monta evolução SOAP e te entrega a passagem pronta no celular."
      bullets={[
        { title: '6 sistemas guiados',  desc: 'Neuro, Resp, Hemo, GI, Renal, Infec — campos críticos com placeholders inteligentes.' },
        { title: 'Escores no fluxo',    desc: 'qSOFA, SOFA, APACHE II, Glasgow, NIH-SS calculados enquanto você preenche.' },
        { title: 'Rascunho SOAP em 1 toque', desc: 'Gera rascunho da evolução pra você TRANSCREVER MANUALMENTE no MV/Tasy/HiDoctor/Soul MV. Não se integra · não emite documento médico oficial.' },
        { title: 'Passagem SBAR',       desc: 'Plantão organizado por urgência clínica, não por leito numérico.' },
      ]}
      screenSrc="/3d/assets/app-avaliacao.png"
      screenPath="lungpilot/exemplo/avaliacao-caso-A"
      screenAlt="LungPilot · avaliação UTI · 6 sistemas"
    />
  );
}

function POCUS() {
  return (
    <Spotlight
      id="pocus"
      tilt="tilt-l"
      eyebrow="POCUS Hub"
      headline="Ultrassom guiado,"
      headlineHighlight="janela por janela."
      lead="Cardio, Pulmão, Diafragma, Volemia, BLUE, RUSH. Posicionamento de probe sobre manequim anatômico + parâmetros + quiz."
      bullets={[
        { title: '8 protocolos',          desc: 'Cardio, Pulmão, Diafragma, Volemia, BLUE, RUSH, FAST e Vias aéreas.' },
        { title: 'Janelas anatômicas',    desc: 'PLAX, PSAX, A4C, A5C, LVOT VTI · cada uma com gabarito.' },
        { title: 'Cenários de estudo',    desc: 'Choque indiferenciado, dispneia aguda, parada · treina o raciocínio de combinar janelas. A decisão clínica é sua.' },
        { title: 'Quiz validação',        desc: 'Questões de banca + casos reais com gabarito comentado.' },
      ]}
      screenSrc="/3d/assets/app-pocus-cardio.png"
      screenPath="lungpilot/exemplo/pocus-plax"
      screenAlt="LungPilot · POCUS · PLAX"
    />
  );
}

// ===================================================================
// TOOLS — extras na mesma conta
// ===================================================================
function Tools() {
  const items = [
    {
      icon: I.tool.ai,
      title: 'Estação IA',
      desc: 'Foto do ventilador vira CASO HIPOTÉTICO de estudo em segundos, com PMIDs indexados como referência. Caso simulado · NÃO substitui análise clínica do paciente real fotografado.',
    },
    {
      icon: I.tool.search,
      title: 'Buxador USP',
      desc: 'Estimativa: pode ajudar a recuperar até 1h30 por plantão (variável). Busca direta na base USP. Não é promessa de resultado.',
    },
    {
      icon: I.tool.flask,
      title: 'LabMED Quick',
      desc: 'Gasometria CASCATA · 6 passos didáticos. Treina seu raciocínio · você interpreta e decide a conduta.',
    },
  ];
  return (
    <section id="ferramentas">
      <div className="container">
        <div className="section-eyebrow reveal">Na mesma conta</div>
        <h2 className="reveal">Ferramentas que <span className="gradient-text">não cobram à parte</span>.</h2>
        <div className="tools-grid" style={{ marginTop: 40 }}>
          {items.map((t, i) => (
            <a key={i} href="#ferramentas" className="tool-card reveal">
              <div className="icon" aria-hidden="true">{t.icon}</div>
              <h4>{t.title}</h4>
              <p>{t.desc}</p>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===================================================================
// AUDIENCE — para quem
// ===================================================================
function Audience() {
  const cards = [
    { code: 'INT.5/6',     title: 'Internato',         desc: 'Parou de decorar. Começou a entender o porquê. Simulador + POCUS cobrem ambos.' },
    { code: 'R1 CLÍNICA',  title: 'R1 Clínica Médica', desc: 'Primeira UTI fechada do plantão. Avaliação UTI + Buxador te dão tempo de pensar.' },
    { code: 'R1 EMERG.',   title: 'R1 Emergência',     desc: 'Da sala vermelha à UTI em horas. Simulador VM + LabMED te treinam pro pior.' },
    { code: 'R1 UTI',      title: 'R1 Terapia Intensiva', desc: 'Justifica conduta no round. PMIDs + escores calculados = back-up científico no celular.' },
  ];
  return (
    <section id="audiencia">
      <div className="container">
        <div className="section-eyebrow reveal">Para quem</div>
        <h2 className="reveal">4 perfis. <span className="gradient-text">Mesmo app.</span> Diferente uso.</h2>
        <div className="audience-grid reveal" style={{ marginTop: 40 }}>
          {cards.map((c, i) => (
            <div key={i} className="audience-card">
              <div className="code">{c.code}</div>
              <h4>{c.title}</h4>
              <p>{c.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===================================================================
// CTA FINAL
// ===================================================================
function CTA() {
  const [email, setEmail] = useState('');
  const [success, setSuccess] = useState(false);
  const [error, setError] = useState(false);

  const handle = useCallback((e) => {
    e.preventDefault();
    setError(false);
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!re.test(email)) {
      setError(true);
      return;
    }
    setSuccess(true);
    // Per spec: success for 4s
    setTimeout(() => setSuccess(false), 4000);
  }, [email]);

  return (
    <section id="cadastro">
      <div className="container">
        <div className="cta-card reveal">
          <h2>Comece a pilotar hoje.</h2>
          <p className="cta-sub">7 dias grátis. R$ 59,90/mês ou R$ 598,80/ano (R$ 49,90/mês no anual) depois do trial. Cancele a qualquer momento direto no painel.</p>
          {success && (
            <div className="cta-success">✓ Recebemos seu email · você será redirecionado pro cadastro real em /register</div>
          )}
          <form className="cta-form" onSubmit={handle} noValidate>
            <input
              type="email"
              placeholder="seu.email@hospital.org"
              value={email}
              onChange={e => { setEmail(e.target.value); setError(false); }}
              aria-label="Seu email"
              aria-invalid={error}
              required
            />
            <button type="submit">Testar no próximo plantão</button>
          </form>
          <div className="cta-checks">
            <span>✓ Sem cartão no trial</span>
            <span>✓ Cancele a qualquer momento</span>
            <span>✓ Resposta humana em 24h</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===================================================================
// FOOTER
// ===================================================================
function FooterEl() {
  return (
    <footer className="main-footer">
      <div className="container">
        © LungPilot · 2026
        <span className="sep">—</span>
        <a href="/termos">Termos</a>
        <span className="sep">·</span>
        <a href="/privacidade">Privacidade</a>
        <span className="sep">·</span>
        <a href="/dpo">DPO/Encarregado</a>
        <span className="sep">·</span>
        <a href="mailto:contato@lungpilot.com.br">Contato</a>
        <span className="sep">·</span>
        <a href="mailto:dpo@lungpilot.com.br">dpo@lungpilot.com.br</a>
        <span className="sep">—</span>
        São Paulo · Brasil
      </div>
      <div className="container" style={{ fontSize: '11px', color: '#6E6E73', marginTop: '12px', lineHeight: 1.5 }}>
        LungPilot é uma ferramenta de produtividade pessoal pra médicos · otimizador de tempo. <b>NÃO é dispositivo médico regulado pela ANVISA · NÃO é endossado por sociedade médica · NÃO substitui prontuário, prescrição, julgamento clínico nem a relação médico-paciente.</b> Tudo que o app gera é RASCUNHO pessoal do médico · você transcreve manualmente pro prontuário oficial. Citações a diretrizes (AMIB, SBPT, PADIS, Surviving Sepsis, ATS, ESICM) são referências bibliográficas. Conteúdo apoiado por IA deve ser revisado pelo médico. Estimativas de economia de tempo são informacionais, não promessa de resultado.
      </div>
      <div className="container" style={{ fontSize: '11px', color: '#6E6E73', marginTop: '8px' }}>
        Responsável técnico: Dr. Iago Almeida · CRM-SP 232073 · RQE 124743 Clínica Médica
      </div>
    </footer>
  );
}

// ===================================================================
// APP ROOT — reveal pattern with multiple safety nets
// ===================================================================
function App() {
  useEffect(() => {
    document.documentElement.classList.add('js-reveal-ready');

    const inView = (el) => {
      const r = el.getBoundingClientRect();
      return r.top < window.innerHeight * 0.95 && r.bottom > 0;
    };
    const sweepNow = () => {
      document.querySelectorAll('.reveal:not(.in)').forEach(el => {
        if (inView(el)) el.classList.add('in');
      });
    };
    sweepNow();

    const io = new IntersectionObserver((entries) => {
      entries.forEach(en => { if (en.isIntersecting) en.target.classList.add('in'); });
    }, { threshold: 0.01, rootMargin: '0px 0px -50px 0px' });
    document.querySelectorAll('.reveal').forEach(el => io.observe(el));

    const t1 = setTimeout(sweepNow, 200);
    const t2 = setTimeout(sweepNow, 800);
    const safety = setTimeout(() => {
      document.querySelectorAll('.reveal:not(.in)').forEach(el => el.classList.add('in'));
    }, 3000);

    return () => {
      io.disconnect();
      clearTimeout(t1); clearTimeout(t2); clearTimeout(safety);
    };
  }, []);

  return (
    <>
      <Nav />
      <Hero />
      <Scenes />
      <Pillars />
      <Simulador />
      <Avaliacao />
      <POCUS />
      <Tools />
      <Audience />
      <CTA />
      <FooterEl />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('app')).render(<App />);