function VivaFlowLanding() {
  const [viewportWidth, setViewportWidth] = React.useState(window.innerWidth);

  React.useEffect(() => {
    const onResize = () => setViewportWidth(window.innerWidth);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  const isTablet = viewportWidth <= 1100;
  const isMobile = viewportWidth <= 760;
  const padX = isMobile ? 20 : isTablet ? 32 : 56;
  const p = isMobile ? {
    heroH: 720, sectionY: 84, heroTitle: 52, h2: 38, body: 16,
  } : isTablet ? {
    heroH: 760, sectionY: 104, heroTitle: 76, h2: 50, body: 17,
  } : {
    heroH: 860, sectionY: 140, heroTitle: 104, h2: 64, body: 18,
  };

  return (
    <div style={{
      fontFamily: VF.sans, background: VF.bg, color: VF.fg,
      width: '100%', overflowX: 'hidden',
    }}>
      {/* ── NAV ───────────────────────────── */}
      <nav style={{
        position: 'absolute', top: 0, left: 0, right: 0, zIndex: 10,
        padding: isMobile ? '22px 20px' : isTablet ? '24px 32px' : '28px 56px', display: 'flex',
        alignItems: 'center', justifyContent: 'space-between',
        gap: 20,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <img src="assets/logo-mark.png" alt="" style={{ height: 32, width: 'auto', filter: 'brightness(0) invert(1)' }} />
          <div style={{ fontFamily: VF.serif, fontSize: isMobile ? 18 : 22, fontWeight: 400, letterSpacing: '-0.01em', color: '#fff' }}>
            Viva Flow
          </div>
        </div>
        <div style={{ display: 'flex', gap: isMobile ? 12 : isTablet ? 20 : 32, alignItems: 'center', flexShrink: 0 }}>
          {!isMobile && <a href="#como" style={{ fontFamily: VF.sans, fontSize: 13, color: 'rgba(255,255,255,0.85)', textDecoration: 'none' }}>Como funciona</a>}
          {!isMobile && <a href="#quem" style={{ fontFamily: VF.sans, fontSize: 13, color: 'rgba(255,255,255,0.85)', textDecoration: 'none' }}>Quem está por trás</a>}
          <a href="#contato" style={{
            fontFamily: VF.sans, fontSize: 13, color: '#fff',
            border: '1px solid rgba(255,255,255,0.4)', padding: isMobile ? '8px 14px' : '9px 18px',
            borderRadius: 999, textDecoration: 'none',
          }}>Falar conosco</a>
        </div>
      </nav>

      {/* ── HERO ───────────────────────────── */}
      <section style={{
        position: 'relative', height: p.heroH,
        overflow: 'hidden',
      }}>
        <img src="assets/hero-lifestyle.jpg" alt="" style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%',
          objectFit: 'cover',
        }} />
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(21,40,31,0.35) 0%, rgba(21,40,31,0.2) 40%, rgba(21,40,31,0.75) 100%)',
        }} />

        <div style={{
          position: 'absolute', left: padX, right: padX, bottom: isMobile ? 36 : 64,
          color: '#fff',
        }}>
          <div style={{
            fontFamily: VF.sans, fontSize: 11, fontWeight: 500,
            letterSpacing: '0.2em', textTransform: 'uppercase',
            color: 'rgba(255,255,255,0.75)', marginBottom: isMobile ? 16 : 20,
          }}>
            São Paulo
          </div>
          <h1 style={{
            fontFamily: VF.serif, fontSize: p.heroTitle, fontWeight: 300,
            lineHeight: 0.98, letterSpacing: '-0.035em',
            margin: 0, maxWidth: isMobile ? 320 : isTablet ? 620 : 900,
          }}>
            Bem‑estar<br/>
            que já <em style={{ fontStyle: 'italic', fontWeight: 300 }}>mora</em> no<br/>
            seu condomínio.
          </h1>
          <div style={{
            display: 'flex', alignItems: isMobile ? 'flex-start' : 'flex-end',
            flexDirection: isMobile ? 'column' : 'row',
            justifyContent: 'space-between', marginTop: isMobile ? 28 : 48, gap: isMobile ? 24 : 40,
          }}>
            <p style={{
              fontFamily: VF.sans, fontSize: p.body, fontWeight: 300,
              lineHeight: 1.6, color: 'rgba(255,255,255,0.85)',
              maxWidth: isMobile ? '100%' : 440, margin: 0,
            }}>
              Ativamos a operação de atividades nos espaços que já existem — piscina, academia,
              sala de massagem, quadra — com profissionais curados e zero esforço para a gestão.
            </p>
            <a href="#contato" style={{
              fontFamily: VF.sans, fontSize: 14, fontWeight: 500,
              background: VF.greenFg, color: VF.green,
              padding: '16px 28px', borderRadius: 999,
              textDecoration: 'none', whiteSpace: 'nowrap', alignSelf: isMobile ? 'stretch' : 'auto',
              textAlign: 'center',
            }}>
              Avaliar para meu condomínio →
            </a>
          </div>
        </div>
      </section>

      {/* ── PROMESSA CURTA / PROBLEMA ───── */}
      <section style={{ padding: `${p.sectionY}px ${padX}px`, background: VF.bg }}>
        <div style={{ display: 'grid', gridTemplateColumns: isTablet ? '1fr' : '1fr 1.2fr', gap: isMobile ? 36 : isTablet ? 56 : 120, alignItems: 'center', maxWidth: 1200, margin: '0 auto' }}>
          <div>
            <Eyebrow>O que observamos</Eyebrow>
            <h2 style={{
              fontFamily: VF.serif, fontSize: p.h2, fontWeight: 300,
              lineHeight: 1.05, letterSpacing: '-0.025em',
              margin: '20px 0 0', color: VF.fg,
            }}>
              Os espaços<br/>estão prontos.<br/>
              <em style={{ fontStyle: 'italic', color: VF.greenMid }}>A vida dentro deles,<br/>nem sempre.</em>
            </h2>
          </div>
          <div style={{ display: 'grid', gap: 24 }}>
            {[
              ['Áreas subutilizadas', 'Piscina vazia na semana. Academia com equipamento e sem rotina. Sala de massagem fechada.'],
              ['Operação dispersa', 'Cada morador procura profissional por conta. Nenhuma curadoria, nenhuma padronização.'],
              ['Gestão sobrecarregada', 'O síndico não tem tempo para estruturar aulas, contratar professores e mediar conflitos.'],
            ].map(([t, d]) => (
              <div key={t} style={{ borderTop: `1px solid ${VF.border}`, paddingTop: 22 }}>
                <div style={{ fontFamily: VF.sans, fontSize: 15, fontWeight: 500, color: VF.fg, marginBottom: 8 }}>{t}</div>
                <div style={{ fontFamily: VF.sans, fontSize: 14.5, lineHeight: 1.65, color: VF.fgMuted }}>{d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── SOLUÇÃO / ATIVIDADES ───────── */}
      <section style={{
        padding: `${p.sectionY}px ${padX}px`,
        background: VF.green, color: VF.greenFg,
      }}>
        <div style={{ maxWidth: 1000, margin: '0 auto' }}>
          <Eyebrow dark>A proposta</Eyebrow>
          <h2 style={{
            fontFamily: VF.serif, fontSize: p.h2, fontWeight: 300,
            lineHeight: 1.05, letterSpacing: '-0.025em',
            margin: '20px 0 40px',
          }}>
            Trazemos a operação<br/>pronta. Vocês mantêm<br/>o padrão de sempre.
          </h2>
          <p style={{
            fontFamily: VF.sans, fontSize: 19, fontWeight: 300,
            lineHeight: 1.6, color: 'rgba(240,235,216,0.78)',
            maxWidth: 680, margin: 0,
          }}>
            A Viva Flow estrutura a agenda, seleciona os profissionais e conduz toda a comunicação
            com moradores. Natação, hidroginástica, pilates, yoga, personal, massagem, aulas infantis —
            o mix é desenhado a partir do que o condomínio já tem.
          </p>
        </div>

        {/* Imagens mood */}
        <div style={{
          marginTop: 80, display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : isTablet ? '1fr 1fr' : '1.4fr 1fr 1fr', gap: 16,
          maxWidth: 1200, marginLeft: 'auto', marginRight: 'auto',
        }}>
          <div style={{ height: isMobile ? 260 : 420, overflow: 'hidden', borderRadius: 4, gridColumn: isMobile ? 'auto' : isTablet ? 'span 2' : 'auto' }}>
            <img src="https://images.unsplash.com/photo-1560090995-01632a28895b?w=900&q=80" alt=""
                 style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'brightness(0.92)' }} />
          </div>
          <div style={{ height: isMobile ? 260 : 420, overflow: 'hidden', borderRadius: 4 }}>
            <img src="https://images.unsplash.com/photo-1540497077202-7c8a3999166f?w=700&q=80" alt=""
                 style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'brightness(0.92)' }} />
          </div>
          <div style={{ height: isMobile ? 260 : 420, overflow: 'hidden', borderRadius: 4 }}>
            <img src="https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=700&q=80" alt=""
                 style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'brightness(0.92)' }} />
          </div>
        </div>
      </section>

      {/* ── COMO FUNCIONA ───────────────── */}
      <section id="como" style={{ padding: `${p.sectionY}px ${padX}px`, background: VF.bgCream }}>
        <div style={{ textAlign: 'center', marginBottom: isMobile ? 48 : 80 }}>
          <Eyebrow>Como funciona</Eyebrow>
          <h2 style={{
            fontFamily: VF.serif, fontSize: p.h2, fontWeight: 300,
            lineHeight: 1.05, letterSpacing: '-0.025em',
            margin: '20px 0 0', color: VF.fg,
          }}>
            Um processo <em style={{ fontStyle: 'italic' }}>calmo</em>,<br/>três conversas.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isTablet ? '1fr' : 'repeat(3, 1fr)', gap: isMobile ? 36 : 48, maxWidth: 1100, margin: '0 auto' }}>
          {[
            ['01', 'Conversa inicial', 'Entendemos o condomínio: áreas disponíveis, perfil dos moradores, expectativa da administradora.'],
            ['02', 'Desenho da operação', 'A Viva Flow monta a grade de atividades, seleciona os profissionais e apresenta para aprovação.'],
            ['03', 'Ativação sem custo', 'As atividades começam. O condomínio não investe nada. Se não engrenar, encerramos sem ônus.'],
          ].map(([n, t, d]) => (
            <div key={n}>
              <div style={{
                fontFamily: VF.serif, fontSize: 56, fontWeight: 300,
                color: VF.greenMid, letterSpacing: '-0.02em', lineHeight: 1,
                marginBottom: 24,
              }}>{n}</div>
              <div style={{ fontFamily: VF.sans, fontSize: 17, fontWeight: 500, color: VF.fg, marginBottom: 12 }}>{t}</div>
              <div style={{ fontFamily: VF.sans, fontSize: 15, lineHeight: 1.65, color: VF.fgMuted }}>{d}</div>
            </div>
          ))}
        </div>
      </section>

      {/* ── ICARO ──────────────────────── */}
      <section id="quem" style={{ padding: `${p.sectionY}px ${padX}px`, background: VF.bg }}>
        <div style={{
          display: 'grid', gridTemplateColumns: isTablet ? '1fr' : '1fr 1.1fr', gap: isMobile ? 36 : 80,
          alignItems: 'center', maxWidth: 1200, margin: '0 auto',
        }}>
          <div style={{ borderRadius: 4, overflow: 'hidden', aspectRatio: '4/5' }}>
            <img src="assets/icaro-full.jpg" alt="Icaro"
                 style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          </div>
          <div>
            <Eyebrow>Quem está por trás</Eyebrow>
            <h2 style={{
              fontFamily: VF.serif, fontSize: p.h2 - 8, fontWeight: 300,
              lineHeight: 1.05, letterSpacing: '-0.025em',
              margin: '20px 0 28px', color: VF.fg,
            }}>
              Icaro.<br/>
              <em style={{ fontStyle: 'italic', color: VF.greenMid }}>Quinze anos de Londres,<br/>uma vida na água.</em>
            </h2>
            <div style={{ fontFamily: VF.sans, fontSize: 16.5, lineHeight: 1.7, color: VF.fgMuted, display: 'grid', gap: 16 }}>
              <p style={{ margin: 0 }}>
                Icaro vive em Londres desde 2008, onde construiu mais de duas décadas de atuação como
                professor de natação — ensinando crianças, adolescentes e adultos em clubes, famílias
                e instituições britânicas, com rigor de curadoria e cuidado humano.
              </p>
              <p style={{ margin: 0 }}>
                A Viva Flow nasce dessa bagagem: trazer para condomínios de São Paulo o padrão de
                operação, seleção de profissionais e experiência que ele viveu no exterior.
              </p>
            </div>
            <div style={{ marginTop: 36, display: 'flex', gap: 16, flexDirection: isMobile ? 'column' : 'row' }}>
              <a href="mailto:contato@vivaflow.fit" style={{
                fontFamily: VF.sans, fontSize: 13.5, fontWeight: 500,
                color: VF.green, border: `1px solid ${VF.borderStrong}`,
                padding: '11px 22px', borderRadius: 999, textDecoration: 'none', textAlign: 'center',
              }}>contato@vivaflow.fit</a>
              <a href="#contato" style={{
                fontFamily: VF.sans, fontSize: 13.5, fontWeight: 500,
                color: VF.greenFg, background: VF.green,
                padding: '11px 22px', borderRadius: 999, textDecoration: 'none', textAlign: 'center',
              }}>Conversar diretamente →</a>
            </div>
          </div>
        </div>
      </section>

      {/* ── FAQ ────────────────────────── */}
      <section style={{ padding: `${p.sectionY}px ${padX}px`, background: VF.bgCream }}>
        <div style={{ display: 'grid', gridTemplateColumns: isTablet ? '1fr' : '340px 1fr', gap: isMobile ? 36 : 100, maxWidth: 1100, margin: '0 auto' }}>
          <div>
            <Eyebrow>Dúvidas frequentes</Eyebrow>
            <h2 style={{
              fontFamily: VF.serif, fontSize: 42, fontWeight: 300,
              lineHeight: 1.05, letterSpacing: '-0.02em',
              margin: '18px 0 20px', color: VF.fg,
            }}>
              O que síndicos<br/>costumam perguntar.
            </h2>
            <p style={{ fontFamily: VF.sans, fontSize: 14.5, lineHeight: 1.65, color: VF.fgMuted, margin: 0 }}>
              Se faltar alguma resposta, pergunte diretamente pelo formulário abaixo.
            </p>
          </div>
          <FAQ />
        </div>
      </section>

      {/* ── FORMULÁRIO / CTA FINAL ─────── */}
      <section id="contato" style={{
        padding: `${p.sectionY}px ${padX}px`, background: VF.green, color: VF.greenFg,
      }}>
        <div style={{ display: 'grid', gridTemplateColumns: isTablet ? '1fr' : '1fr 520px', gap: isMobile ? 40 : 100, maxWidth: 1160, margin: '0 auto' }}>
          <div>
            <Eyebrow dark>Viva Flow · São Paulo</Eyebrow>
            <h2 style={{
              fontFamily: VF.serif, fontSize: p.h2, fontWeight: 300,
              lineHeight: 1.0, letterSpacing: '-0.025em',
              margin: '20px 0 32px',
            }}>
              Vamos conversar<br/>sobre o seu<br/>condomínio.
            </h2>
            <p style={{
              fontFamily: VF.sans, fontSize: 16.5, lineHeight: 1.7,
              color: 'rgba(240,235,216,0.75)', maxWidth: 440, margin: 0,
            }}>
              Conte quais áreas comuns vocês têm e como é a rotina dos moradores. Retornamos
              em até 48h com uma avaliação honesta sobre fazer sentido ou não.
            </p>
            <div style={{ marginTop: 48, display: 'grid', gap: 14, fontFamily: VF.sans, fontSize: 14, color: 'rgba(240,235,216,0.7)' }}>
              <div>· Exclusivo para condomínios de São Paulo</div>
              <div>· Atendimento: Icaro (fundador)</div>
              <div>· Contato também por <a href="mailto:contato@vivaflow.fit" style={{ color: VF.greenFg }}>e-mail</a></div>
            </div>
          </div>
          <div>
            <ContactForm dark />
          </div>
        </div>
      </section>

      {/* ── FOOTER ─────────────────────── */}
      <footer style={{
        padding: `40px ${padX}px`, background: VF.greenDark, color: 'rgba(240,235,216,0.5)',
        fontFamily: VF.sans, fontSize: 12,
        display: 'flex', justifyContent: 'space-between', alignItems: isMobile ? 'flex-start' : 'center',
        flexDirection: isMobile ? 'column' : 'row', gap: isMobile ? 16 : 24,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <img src="assets/logo-mark.png" alt="" style={{ height: 24, filter: 'brightness(0) invert(1)', opacity: 0.55 }} />
          <span>© 2026 Viva Flow · www.vivaflow.fit</span>
        </div>
        <div>São Paulo · Brasil</div>
      </footer>
    </div>
  );
}

window.VivaFlowLanding = VivaFlowLanding;
