// All page sections
const C_S = {
  primary: '#5B50F0', primaryDark: '#4339D4', primaryLight: '#7B72F4',
  navy: '#1A1035', navyMid: '#2D1B69',
  lavender: '#F0EFFE', lavenderMid: '#E4E1FC',
  white: '#FFFFFF', body: '#4A4A6A', muted: '#8888AA', border: '#E8E5FF',
  green: '#22C55E', amber: '#F59E0B', red: '#EF4444',
  telegram: '#229ED9', whatsapp: '#25D366',
};

const HUBLAR_WHATSAPP =
  'https://wa.me/5511948209782?text=' +
  encodeURIComponent('Olá! Quero conhecer o HUBLAR para gestão de encomendas no meu condomínio.');
const HUBLAR_WHATSAPP_ORCAMENTO_GRANDE =
  'https://wa.me/5511948209782?text=' +
  encodeURIComponent(
    'Olá! Meu condomínio tem mais de 1.000 apartamentos e quero um orçamento personalizado com condições especiais.',
  );

/** sm <600, md <960, lg resto (mobile empilha grids) */
function useRedesignBp() {
  const [bp, setBp] = React.useState('lg');
  React.useEffect(() => {
    const run = () => {
      const w = window.innerWidth;
      if (w < 600) setBp('sm');
      else if (w < 960) setBp('md');
      else setBp('lg');
    };
    run();
    window.addEventListener('resize', run);
    return () => window.removeEventListener('resize', run);
  }, []);
  return bp;
}

const sectionPad = (bp) => (bp === 'lg' ? '108px 5vw' : '72px 5vw');

/* ─── LOGO ─── */
function HublarLogo({ light = false }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <img src="/redesign/assets/icone-hublar.png" alt="HUBLAR" style={{ width: 36, height: 36, display: 'block', flexShrink: 0 }}/>
      <img src="/redesign/assets/logo-hublar.png" alt="HUBLAR" style={{ height: 22, display: 'block', width: 'auto', maxWidth: 'min(160px, 42vw)' }}/>
    </div>
  );
}

/* ─── NAV ─── */
function Nav({ variant }) {
  const bp = useRedesignBp();
  const narrow = bp !== 'lg';
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', fn);
    return () => window.removeEventListener('scroll', fn);
  }, []);
  React.useEffect(() => {
    if (!narrow) setMenuOpen(false);
  }, [narrow]);
  const isDark = variant === 'B';
  const navHasBg = scrolled || (narrow && menuOpen);
  const textCol = isDark && !navHasBg ? 'rgba(255,255,255,0.78)' : (isDark ? 'rgba(255,255,255,0.86)' : C_S.body);
  const burgerCol = isDark && !navHasBg ? 'rgba(255,255,255,0.9)' : (isDark ? 'rgba(255,255,255,0.92)' : C_S.navy);
  const navLinks = [['Como funciona', '#fluxo'], ['Apps', '#apps'], ['Recursos', '#recursos'], ['Preço', '#preco']];
  const ctaStyle = {
    fontFamily: 'Plus Jakarta Sans', fontWeight: 700, fontSize: narrow ? 13 : 14,
    color: C_S.white, background: C_S.primary,
    padding: narrow ? '10px 16px' : '11px 22px', borderRadius: 10, textDecoration: 'none',
    boxShadow: `0 4px 14px ${C_S.primary}44`, whiteSpace: 'nowrap',
  };
  const waNavStyle = {
    fontFamily: 'Plus Jakarta Sans', fontWeight: 700, fontSize: narrow ? 13 : 14,
    color: C_S.white, background: C_S.whatsapp,
    padding: narrow ? '10px 16px' : '11px 18px', borderRadius: 10, textDecoration: 'none',
    boxShadow: `0 4px 14px ${C_S.whatsapp}55`, whiteSpace: 'nowrap',
    display: 'inline-flex', alignItems: 'center', gap: 8,
  };
  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 200,
      padding: narrow ? '12px 5vw' : '0 5vw',
      minHeight: narrow ? 56 : 66,
      display: 'flex', flexDirection: narrow ? 'column' : 'row',
      alignItems: narrow ? 'stretch' : 'center',
      justifyContent: narrow ? 'flex-start' : 'space-between',
      background: navHasBg ? (isDark ? 'rgba(26,16,53,0.96)' : 'rgba(255,255,255,0.96)') : 'transparent',
      backdropFilter: navHasBg ? 'blur(18px) saturate(150%)' : 'none',
      borderBottom: navHasBg ? `1px solid ${isDark ? 'rgba(255,255,255,0.10)' : C_S.border}` : 'none',
      transition: 'all 0.3s ease',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%', gap: 12 }}>
        <HublarLogo light={isDark && !navHasBg} />
        {!narrow && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 36 }}>
            {navLinks.map(([l, h]) => (
              <a key={l} href={h} style={{
                fontFamily: 'Plus Jakarta Sans', fontWeight: 500, fontSize: 14,
                color: textCol, textDecoration: 'none',
              }}>{l}</a>
            ))}
          </div>
        )}
        {!narrow && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <a href={HUBLAR_WHATSAPP} target="_blank" rel="noreferrer" style={waNavStyle}>
              <Icon name="whatsapp" size={17} color={C_S.white} strokeWidth={2} />
              WhatsApp
            </a>
            <a href="#preco" style={ctaStyle}>Testar grátis</a>
          </div>
        )}
        {narrow && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <button
              type="button"
              aria-expanded={menuOpen}
              aria-label={menuOpen ? 'Fechar menu' : 'Abrir menu'}
              onClick={() => setMenuOpen((o) => !o)}
              style={{
                display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 5,
                width: 44, height: 44, padding: 0, border: 'none', borderRadius: 10,
                background: navHasBg ? (isDark ? 'rgba(255,255,255,0.10)' : C_S.lavender) : (isDark ? 'rgba(255,255,255,0.12)' : C_S.white),
                cursor: 'pointer', flexShrink: 0,
                boxShadow: `0 0 0 1px ${isDark ? 'rgba(255,255,255,0.12)' : C_S.border}`,
              }}
            >
              <span style={{ display: 'block', width: 20, height: 2, background: burgerCol, margin: '0 auto' }} />
              <span style={{ display: 'block', width: 20, height: 2, background: burgerCol, margin: '0 auto' }} />
              <span style={{ display: 'block', width: 20, height: 2, background: burgerCol, margin: '0 auto' }} />
            </button>
          </div>
        )}
      </div>
      {narrow && menuOpen && (
        <div style={{
          width: '100%',
          marginTop: 14,
          paddingTop: 14,
          borderTop: `1px solid ${isDark ? 'rgba(255,255,255,0.1)' : C_S.border}`,
          display: 'flex', flexDirection: 'column', gap: 4,
        }}>
          {navLinks.map(([l, h]) => (
            <a
              key={l}
              href={h}
              onClick={() => setMenuOpen(false)}
              style={{
                fontFamily: 'Plus Jakarta Sans', fontWeight: 600, fontSize: 15,
                color: textCol, textDecoration: 'none', padding: '12px 6px', borderRadius: 10,
                background: isDark ? 'rgba(255,255,255,0.06)' : 'rgba(240,239,254,0.75)',
              }}
            >{l}</a>
          ))}
          <a
            href={HUBLAR_WHATSAPP}
            target="_blank"
            rel="noreferrer"
            onClick={() => setMenuOpen(false)}
            style={{
              marginTop: 8,
              fontFamily: 'Plus Jakarta Sans', fontWeight: 700, fontSize: 15,
              color: C_S.white, textDecoration: 'none', padding: '14px 16px', borderRadius: 10,
              background: C_S.whatsapp,
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
              boxShadow: `0 6px 18px ${C_S.whatsapp}44`,
            }}
          >
            <Icon name="whatsapp" size={20} color={C_S.white} strokeWidth={2} />
            WhatsApp
          </a>
        </div>
      )}
    </nav>
  );
}

/* ─── HERO ─── */
function Hero({ variant }) {
  const bp = useRedesignBp();
  const isDark = variant === 'B';
  const bg = isDark ? C_S.navy : C_S.lavender;
  const headCol = isDark ? C_S.white : C_S.navy;
  const bodyCol = isDark ? 'rgba(255,255,255,0.65)' : C_S.body;
  const accentBg = isDark ? 'rgba(91,80,240,0.18)' : `${C_S.primary}13`;
  const accentBorder = isDark ? 'rgba(91,80,240,0.35)' : `${C_S.primary}28`;
  const accentColor = isDark ? C_S.primaryLight : C_S.primary;

  const navTop = bp === 'lg' ? 66 : 80;
  return (
    <section style={{
      minHeight: bp === 'lg' ? '100vh' : 'auto',
      background: bg,
      paddingTop: navTop, display: 'flex', alignItems: 'center',
      position: 'relative', overflow: 'hidden',
    }}>
      {isDark && (
        <>
          <div style={{ position: 'absolute', inset: 0, backgroundImage: `linear-gradient(rgba(91,80,240,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(91,80,240,0.07) 1px, transparent 1px)`, backgroundSize: '56px 56px', pointerEvents: 'none' }}/>
          <div style={{ position: 'absolute', top: '15%', left: '40%', width: 700, height: 500, borderRadius: '50%', background: `radial-gradient(ellipse, ${C_S.primary}2A 0%, transparent 65%)`, filter: 'blur(50px)', pointerEvents: 'none' }}/>
        </>
      )}
      {!isDark && (
        <div style={{ position: 'absolute', top: -160, right: -160, width: 640, height: 640, borderRadius: '50%', background: `radial-gradient(circle, ${C_S.primary}18 0%, transparent 70%)`, pointerEvents: 'none' }}/>
      )}

      <div style={{
        width: '100%', maxWidth: 1240, margin: '0 auto',
        padding: bp === 'lg' ? '70px 5vw' : '32px 5vw 56px',
        display: 'grid',
        gridTemplateColumns: bp === 'lg' ? '1.1fr 1fr' : '1fr',
        gap: bp === 'lg' ? 56 : 36,
        alignItems: 'center', position: 'relative',
      }}>
        <div style={{ minWidth: 0, maxWidth: '100%' }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            background: accentBg, border: `1px solid ${accentBorder}`,
            borderRadius: 100, padding: '7px 16px', marginBottom: 26,
            maxWidth: '100%', flexWrap: 'wrap', boxSizing: 'border-box',
          }}>
            <div style={{ width: 6, height: 6, borderRadius: '50%', background: accentColor, animation: isDark ? 'pulse 2s infinite' : 'none' }}/>
            <span style={{ fontFamily: 'Plus Jakarta Sans', fontWeight: 600, fontSize: 13, color: accentColor }}>
              Gestão de encomendas para condomínios
            </span>
          </div>

          <h1 style={{
            fontFamily: 'Plus Jakarta Sans', fontWeight: 800,
            fontSize: 'clamp(38px, 4.6vw, 64px)',
            lineHeight: 1.05, letterSpacing: '-0.04em',
            color: headCol, marginBottom: 22,
          }}>
            Sem caderno.<br/>
            Sem planilha.<br/>
            <span style={{
              ...(isDark ? {
                background: `linear-gradient(135deg, ${C_S.primaryLight}, #C4BFFF)`,
                WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
              } : { color: C_S.primary })
            }}>Sem confusão.</span>
          </h1>

          <p style={{ fontSize: 18, lineHeight: 1.65, color: bodyCol, maxWidth: 480, marginBottom: 30 }}>
            A HUBLAR organiza o fluxo de encomendas do seu condomínio em um processo padronizado e rastreável, do registro na portaria à retirada pelo morador.
          </p>

          {/* Price highlight: price vertically centered with the text block */}
          <div style={{
            display: 'flex',
            alignItems: 'center',
            gap: 12,
            background: isDark ? 'rgba(255,255,255,0.05)' : C_S.white,
            border: `1px solid ${isDark ? 'rgba(255,255,255,0.1)' : C_S.border}`,
            borderRadius: 14, padding: '14px 20px',
            marginBottom: 28,
            maxWidth: '100%',
          }}>
            <div style={{
              fontFamily: 'Plus Jakarta Sans', fontWeight: 800,
              fontSize: 30, color: accentColor, letterSpacing: '-0.03em',
              lineHeight: 1,
              whiteSpace: 'nowrap',
              flexShrink: 0,
            }}>R$ 0,97</div>
            <div style={{
              fontSize: 13, color: bodyCol, lineHeight: 1.3,
              minWidth: 0,
              display: 'grid',
              gridAutoRows: 'min-content',
              gap: bp === 'sm' ? 2 : 0,
            }}>
              <div style={{ fontWeight: 700, color: headCol }}>por apto / mês</div>
              <div style={{ fontSize: 11, color: isDark ? 'rgba(255,255,255,0.55)' : C_S.muted }}>Mínimo R$ 69,90/mês</div>
              <div style={{ fontSize: 11, color: isDark ? 'rgba(255,255,255,0.55)' : C_S.muted }}>7 dias grátis</div>
            </div>
          </div>

          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a href="#preco" style={{
              fontFamily: 'Plus Jakarta Sans', fontWeight: 700, fontSize: 15,
              color: C_S.white,
              background: isDark ? `linear-gradient(135deg, ${C_S.primary}, ${C_S.primaryLight})` : C_S.primary,
              padding: '14px 28px', borderRadius: 12, textDecoration: 'none',
              boxShadow: `0 12px 28px ${C_S.primary}55`,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              width: bp === 'sm' ? '100%' : 'auto',
            }}>Começar 7 dias grátis</a>
            <a href="#fluxo" style={{
              fontFamily: 'Plus Jakarta Sans', fontWeight: 600, fontSize: 15,
              color: isDark ? 'rgba(255,255,255,0.85)' : C_S.primary,
              background: isDark ? 'rgba(255,255,255,0.07)' : C_S.white,
              border: `1.5px solid ${isDark ? 'rgba(255,255,255,0.12)' : C_S.border}`,
              padding: '14px 24px', borderRadius: 12, textDecoration: 'none',
              display: 'inline-flex', alignItems: 'center', gap: 8,
              justifyContent: 'center',
              width: bp === 'sm' ? '100%' : 'auto',
            }}>
              Ver como funciona
              <Icon name="arrowRight" size={15} color={isDark ? 'rgba(255,255,255,0.85)' : C_S.primary} />
            </a>
          </div>
        </div>

        <div style={{ position: 'relative', width: '100%', maxWidth: '100%', minWidth: 0 }}>
          <AdminMockup
            scale={bp === 'lg' ? 1.08 : 1}
          />
          {/* Float badge */}
          <div style={{
            position: bp === 'lg' ? 'absolute' : 'relative',
            bottom: bp === 'lg' ? -22 : 'auto',
            left: 0,
            marginTop: bp === 'lg' ? 0 : 20,
            background: C_S.white, borderRadius: 14,
            padding: '12px 16px',
            boxShadow: `0 12px 32px ${C_S.primary}25`,
            display: 'flex', alignItems: 'center', gap: 11,
            border: `1px solid ${C_S.border}`,
            animation: bp === 'lg' ? 'floatBadge 3.5s ease-in-out infinite' : 'none',
            maxWidth: '100%',
          }}>
            <div style={{ width: 36, height: 36, borderRadius: 10, background: `${C_S.green}18`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name="check" size={17} color={C_S.green} />
            </div>
            <div>
              <div style={{ fontFamily: 'Plus Jakarta Sans', fontWeight: 700, fontSize: 12, color: C_S.navy }}>Encomenda entregue</div>
              <div style={{ fontSize: 10, color: C_S.muted }}>Ap. 304 · agora</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── ANTES & DEPOIS ─── */
function AntesDepois({ variant }) {
  const bp = useRedesignBp();
  const isDark = variant === 'B';
  const bg = isDark ? '#120D2A' : C_S.white;
  const headCol = isDark ? C_S.white : C_S.navy;
  const bodyCol = isDark ? 'rgba(255,255,255,0.6)' : C_S.body;

  const antes = [
    { icon: 'book', text: 'Caderno na portaria com letra que ninguém entende' },
    { icon: 'spreadsheet', text: 'Planilhas paralelas que nunca batem' },
    { icon: 'whatsapp', text: 'Avisos no WhatsApp pessoal de quem está na operação' },
    { icon: 'x', text: 'Encomenda entregue para a pessoa errada' },
  ];
  const depois = [
    { icon: 'package', text: 'Registro padrão por leitura ou digitação' },
    { icon: 'telegram', text: 'Aviso automático para o morador' },
    { icon: 'key', text: 'Código diário de retirada' },
    { icon: 'audit', text: 'Histórico e auditoria completos' },
  ];

  return (
    <section style={{ background: bg, padding: sectionPad(bp) }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: bp === 'lg' ? 56 : 40 }}>
          <div style={{ fontFamily: 'Plus Jakarta Sans', fontWeight: 700, fontSize: 12, color: C_S.primary, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 14 }}>O problema</div>
          <h2 style={{
            fontFamily: 'Plus Jakarta Sans', fontWeight: 800,
            fontSize: 'clamp(28px, 3.5vw, 44px)',
            letterSpacing: '-0.03em', color: headCol, marginBottom: 16, lineHeight: 1.12,
          }}>
            A portaria do seu condomínio<br/>
            ainda funciona em 2010?
          </h2>
          <p style={{ fontSize: 17, color: bodyCol, maxWidth: 540, margin: '0 auto', lineHeight: 1.65 }}>
            A HUBLAR substitui o caos do controle manual por um fluxo digital simples para a operação, moradores e síndicos.
          </p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: bp === 'lg' ? '1fr auto 1fr' : '1fr',
          gap: bp === 'lg' ? 32 : 24,
          alignItems: 'stretch',
        }}>
          {/* Antes */}
          <div style={{
            background: isDark ? 'rgba(239,68,68,0.06)' : '#FEF5F5',
            border: `1px solid ${isDark ? 'rgba(239,68,68,0.18)' : '#FBE2E2'}`,
            borderRadius: 22, padding: 32,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 24 }}>
              <div style={{ width: 36, height: 36, borderRadius: 10, background: `${C_S.red}18`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name="x" size={18} color={C_S.red} strokeWidth={2.2} />
              </div>
              <div>
                <div style={{ fontFamily: 'Plus Jakarta Sans', fontWeight: 800, fontSize: 18, color: headCol }}>Antes do HUBLAR</div>
                <div style={{ fontSize: 12, color: bodyCol }}>Caos disfarçado de organização</div>
              </div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {antes.map((item, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <div style={{ width: 36, height: 36, borderRadius: 9, background: isDark ? 'rgba(255,255,255,0.05)' : C_S.white, border: `1px solid ${isDark ? 'rgba(255,255,255,0.07)' : C_S.border}`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <Icon name={item.icon} size={16} color={isDark ? 'rgba(255,255,255,0.5)' : C_S.muted} />
                  </div>
                  <span style={{ fontSize: 14, color: bodyCol, lineHeight: 1.55 }}>{item.text}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Arrow */}
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            padding: bp === 'lg' ? 0 : '8px 0',
          }}>
            <div style={{
              width: 56, height: 56, borderRadius: '50%',
              background: C_S.primary,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: `0 12px 32px ${C_S.primary}55`,
              transform: bp === 'lg' ? 'none' : 'rotate(90deg)',
            }}>
              <Icon name="arrowRight" size={22} color={C_S.white} strokeWidth={2.2} />
            </div>
          </div>

          {/* Depois */}
          <div style={{
            background: isDark ? 'rgba(34,197,94,0.06)' : '#F0FDF6',
            border: `1px solid ${isDark ? 'rgba(34,197,94,0.18)' : '#D6F4E0'}`,
            borderRadius: 22, padding: 32,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 24 }}>
              <div style={{ width: 36, height: 36, borderRadius: 10, background: `${C_S.green}18`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name="check" size={18} color={C_S.green} strokeWidth={2.2} />
              </div>
              <div>
                <div style={{ fontFamily: 'Plus Jakarta Sans', fontWeight: 800, fontSize: 18, color: headCol }}>Com HUBLAR</div>
                <div style={{ fontSize: 12, color: bodyCol }}>Fluxo padronizado e rastreável</div>
              </div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {depois.map((item, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <div style={{ width: 36, height: 36, borderRadius: 9, background: `${C_S.primary}15`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <Icon name={item.icon} size={16} color={C_S.primary} />
                  </div>
                  <span style={{ fontSize: 14, color: bodyCol, lineHeight: 1.55, fontWeight: 500 }}>{item.text}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── COMO FUNCIONA ─── */
function Fluxo({ variant }) {
  const bp = useRedesignBp();
  const isDark = variant === 'B';
  const bg = isDark ? C_S.navy : C_S.lavender;
  const headCol = isDark ? C_S.white : C_S.navy;
  const bodyCol = isDark ? 'rgba(255,255,255,0.6)' : C_S.body;
  const cardBg = isDark ? 'rgba(255,255,255,0.04)' : C_S.white;
  const cardBorder = isDark ? 'rgba(255,255,255,0.07)' : C_S.border;

  const steps = [
    { num: '01', icon: 'barcode', title: 'Operação registra', desc: 'A equipe da operação escaneia a etiqueta ou digita os dados no app da operação. Em segundos, a encomenda fica vinculada ao apartamento.' },
    { num: '02', icon: 'telegram', title: 'Morador é avisado', desc: 'Aviso automático via Telegram (gratuito) ou WhatsApp (opcional). O morador sabe na hora que tem encomenda.' },
    { num: '03', icon: 'key', title: 'Morador consulta o código', desc: 'O app gera um código diário de retirada (válido só hoje), único por morador, simples de usar.' },
    { num: '04', icon: 'check', title: 'Retirada fica registrada', desc: 'Operação confirma a entrega no app. Tudo fica em histórico de auditoria, com data, hora e responsável.' },
  ];

  const fluxoCols = bp === 'lg' ? 'repeat(4, 1fr)' : bp === 'md' ? 'repeat(2, 1fr)' : '1fr';
  return (
    <section id="fluxo" style={{ background: bg, padding: sectionPad(bp) }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: bp === 'lg' ? 64 : 40 }}>
          <div style={{ fontFamily: 'Plus Jakarta Sans', fontWeight: 700, fontSize: 12, color: C_S.primary, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 14 }}>Como funciona</div>
          <h2 style={{
            fontFamily: 'Plus Jakarta Sans', fontWeight: 800,
            fontSize: 'clamp(28px, 3.5vw, 44px)',
            letterSpacing: '-0.03em', color: headCol, marginBottom: 16, lineHeight: 1.1,
          }}>
            Quatro passos.<br/>Zero confusão.
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: fluxoCols, gap: 18, position: 'relative' }}>
          {steps.map((step, i) => (
            <div key={i} style={{
              background: cardBg, border: `1px solid ${cardBorder}`,
              borderRadius: 18, padding: 24, position: 'relative',
            }}>
              <div style={{
                fontFamily: 'Plus Jakarta Sans', fontWeight: 800, fontSize: 32,
                color: isDark ? 'rgba(91,80,240,0.3)' : `${C_S.primary}25`,
                letterSpacing: '-0.04em', lineHeight: 1, marginBottom: 18,
              }}>{step.num}</div>
              <div style={{
                width: 44, height: 44, borderRadius: 12,
                background: `${C_S.primary}15`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 16,
              }}>
                <Icon name={step.icon} size={20} color={C_S.primary} />
              </div>
              <div style={{ fontFamily: 'Plus Jakarta Sans', fontWeight: 700, fontSize: 16, color: headCol, marginBottom: 8 }}>{step.title}</div>
              <p style={{ fontSize: 13, color: bodyCol, lineHeight: 1.65 }}>{step.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── 3 APPS EM AÇÃO ─── */
function TresApps({ variant }) {
  const bp = useRedesignBp();
  const isDark = variant === 'B';
  const bg = isDark ? '#120D2A' : C_S.white;
  const headCol = isDark ? C_S.white : C_S.navy;
  const bodyCol = isDark ? 'rgba(255,255,255,0.6)' : C_S.body;
  const [active, setActive] = React.useState('admin');

  const apps = {
    admin: {
      icon: 'monitor',
      title: 'Painel Admin',
      sub: 'Para o síndico ou administradora',
      desc: 'Controle total do condomínio em um painel web. Configure operadores, gerencie moradores, envie comunicados e acompanhe tudo com auditoria completa.',
      bullets: [
        'Dashboard com pendentes, recebidas e entregues',
        'Gestão de moradores e operadores',
        'Comunicados para o condomínio',
        'Chamados e suporte interno',
        'Histórico e auditoria de todas as ações',
        'Links de acesso por perfil (PWA)',
      ],
      mockup: 'admin',
    },
    operacao: {
      icon: 'smartphone',
      title: 'App da Operação (PWA)',
      sub: 'Para a portaria e a zeladoria',
      desc: 'A equipe registra encomendas no app da operação, escaneando a etiqueta ou digitando os dados. Na retirada, valida pelo código diário ou pela assinatura digital do morador na própria tela.',
      bullets: [
        'Registro por leitura ou digitação manual',
        'Busca por apartamento, morador, código',
        'Retirada por código diário OU assinatura digital',
        'Listas: pendentes, entregues, histórico',
        'Respeita horário de operação configurado',
        'Funciona em qualquer celular, sem instalar app',
      ],
      mockup: 'operacao',
    },
    morador: {
      icon: 'users',
      title: 'App do Morador (PWA)',
      sub: 'Para quem mora no condomínio',
      desc: 'O app é por apartamento: todos os moradores veem as encomendas que chegaram. Encomendas privadas só aparecem para quem cadastrou. Avisos no Telegram, código diário e modo ausência inclusos.',
      bullets: [
        'Visualizar encomendas do apto (compartilhado entre moradores)',
        'Encomenda privada: só você vê',
        'Código diário de retirada',
        'Avisos no Telegram (gratuito)',
        'Modo ausência: avisar a portaria ou autorizar outro morador',
        'Confirmação de vínculo: "essa encomenda é sua?"',
      ],
      mockup: 'morador',
    },
  };

  const a = apps[active];
              const tabShort = { admin: 'Admin', operacao: 'Operação', morador: 'Morador' };

  return (
    <section id="apps" style={{ background: bg, padding: sectionPad(bp) }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: bp === 'lg' ? 56 : 40 }}>
          <div style={{ fontFamily: 'Plus Jakarta Sans', fontWeight: 700, fontSize: 12, color: C_S.primary, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 14 }}>Três apps integrados</div>
          <h2 style={{
            fontFamily: 'Plus Jakarta Sans', fontWeight: 800,
            fontSize: 'clamp(28px, 3.5vw, 44px)',
            letterSpacing: '-0.03em', color: headCol, marginBottom: 16, lineHeight: 1.1,
          }}>
            Cada perfil vê só<br/>o que importa pra ele.
          </h2>
        </div>

        {/* Tabs */}
        <div style={{
          display: 'flex',
          justifyContent: 'center',
          gap: bp === 'sm' ? 10 : 8,
          marginBottom: bp === 'lg' ? 48 : 32,
          flexWrap: bp === 'sm' ? 'nowrap' : 'wrap',
          width: '100%',
        }}>
          {Object.entries(apps).map(([key, app]) => (
            <button key={key} onClick={() => setActive(key)} style={{
              fontFamily: 'Plus Jakarta Sans', fontWeight: 700, fontSize: 14,
              color: active === key ? C_S.white : (isDark ? 'rgba(255,255,255,0.7)' : C_S.body),
              background: active === key ? C_S.primary : (isDark ? 'rgba(255,255,255,0.04)' : C_S.lavender),
              border: `1px solid ${active === key ? 'transparent' : (isDark ? 'rgba(255,255,255,0.08)' : C_S.border)}`,
              padding: bp === 'sm' ? '11px 10px' : '11px 22px', borderRadius: 12, cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', gap: 8,
              transition: 'all 0.2s',
              flex: bp === 'sm' ? 1 : 'unset',
              minWidth: bp === 'sm' ? 0 : 'unset',
              justifyContent: 'center',
            }}>
              <Icon name={app.icon} size={16} color={active === key ? C_S.white : (isDark ? 'rgba(255,255,255,0.7)' : C_S.body)} />
              {bp === 'sm' ? tabShort[key] : app.title.split(' (')[0]}
            </button>
          ))}
        </div>

        {/* Content */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: bp === 'lg' ? '1fr 1fr' : '1fr',
          gap: bp === 'lg' ? 64 : 36,
          alignItems: 'center',
        }}>
          <div style={{ minWidth: 0, maxWidth: '100%' }}>
            <div style={{ fontSize: 13, color: C_S.primary, fontWeight: 700, marginBottom: 6, letterSpacing: '0.04em', textTransform: 'uppercase' }}>{a.sub}</div>
            <h3 style={{
              fontFamily: 'Plus Jakarta Sans', fontWeight: 800,
              fontSize: 'clamp(24px, 2.6vw, 34px)',
              letterSpacing: '-0.025em', color: headCol, marginBottom: 16, lineHeight: 1.15,
            }}>{a.title}</h3>
            <p style={{ fontSize: 16, color: bodyCol, lineHeight: 1.7, marginBottom: 28 }}>{a.desc}</p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {a.bullets.map((b, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                  <div style={{ width: 22, height: 22, borderRadius: '50%', background: `${C_S.primary}15`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 1 }}>
                    <Icon name="check" size={12} color={C_S.primary} strokeWidth={2.2} />
                  </div>
                  <span style={{ fontSize: 14.5, color: bodyCol, lineHeight: 1.6 }}>{b}</span>
                </div>
              ))}
            </div>
          </div>
          <div style={{
            display: 'flex', justifyContent: 'center', alignItems: 'center',
            minHeight: bp === 'lg' ? 520 : 'auto',
            width: '100%', maxWidth: '100%', minWidth: 0,
          }}>
            {a.mockup === 'admin' && <AdminMockup />}
            {a.mockup === 'operacao' && <OperacaoMockup theme={isDark ? 'dark' : 'dark'} />}
            {a.mockup === 'morador' && <MoradorMockup theme={isDark ? 'dark' : 'light'} />}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── RECURSOS-DESTAQUE ─── */
function Recursos({ variant }) {
  const bp = useRedesignBp();
  const isDark = variant === 'B';
  const bg = isDark ? C_S.navy : C_S.lavender;
  const headCol = isDark ? C_S.white : C_S.navy;
  const bodyCol = isDark ? 'rgba(255,255,255,0.6)' : C_S.body;
  const cardBg = isDark ? 'rgba(255,255,255,0.04)' : C_S.white;
  const cardBorder = isDark ? 'rgba(255,255,255,0.07)' : C_S.border;

  const features = [
    { icon: 'key', title: 'Código diário + assinatura', desc: 'Retirada por código único que muda todo dia, ou pela assinatura digital do morador na tela do app da operação. Ambos com a mesma rastreabilidade.' },
    { icon: 'users', title: 'Compartilhado por apartamento', desc: 'Todos os moradores do apto veem as encomendas que chegaram. Cada um tem seu código, mas a visão é da família inteira.' },
    { icon: 'lock', title: 'Encomenda privada', desc: 'Cadastre pelo código de rastreio. Quando chegar, só você vê, e só você retira, com código único daquela encomenda.' },
    { icon: 'sparkles', title: 'Vínculo automático', desc: 'Encomenda registrada sem rastreio chegou no seu nome? O app pergunta se é a privada que você cadastrou. Você decide vincular ou não.' },
    { icon: 'moon', title: 'Modo ausência, do seu jeito', desc: 'Avise a portaria que você não está, sem autorizar ninguém. Ou libere outro morador para retirar no período. Você escolhe.' },
    { icon: 'audit', title: 'Auditoria completa', desc: 'Cada ação registrada com data, hora e responsável. Sem dúvida sobre quem fez o quê.' },
  ];

  const recursoCols = bp === 'lg' ? 'repeat(3, 1fr)' : bp === 'md' ? 'repeat(2, 1fr)' : '1fr';
  return (
    <section id="recursos" style={{ background: bg, padding: sectionPad(bp) }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: bp === 'lg' ? 56 : 40 }}>
          <div style={{ fontFamily: 'Plus Jakarta Sans', fontWeight: 700, fontSize: 12, color: C_S.primary, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 14 }}>Recursos que fazem diferença</div>
          <h2 style={{
            fontFamily: 'Plus Jakarta Sans', fontWeight: 800,
            fontSize: 'clamp(28px, 3.5vw, 44px)',
            letterSpacing: '-0.03em', color: headCol, marginBottom: 16, lineHeight: 1.1,
          }}>
            Pensado para a operação<br/>real do condomínio.
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: recursoCols, gap: 18 }}>
          {features.map((f, i) => (
            <div key={i} style={{
              background: cardBg, border: `1px solid ${cardBorder}`,
              borderRadius: 18, padding: 26,
              transition: 'transform 0.2s, box-shadow 0.2s',
            }}
            onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = `0 16px 40px ${C_S.primary}18`; }}
            onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}
            >
              <div style={{ width: 44, height: 44, borderRadius: 12, background: `${C_S.primary}15`, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}>
                <Icon name={f.icon} size={20} color={C_S.primary} />
              </div>
              <div style={{ fontFamily: 'Plus Jakarta Sans', fontWeight: 700, fontSize: 16, color: headCol, marginBottom: 8 }}>{f.title}</div>
              <p style={{ fontSize: 13.5, color: bodyCol, lineHeight: 1.65 }}>{f.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── NOTIFICAÇÕES (Telegram + WhatsApp) ─── */
function Notificacoes({ variant }) {
  const bp = useRedesignBp();
  const isDark = variant === 'B';
  const bg = isDark ? '#120D2A' : C_S.white;
  const headCol = isDark ? C_S.white : C_S.navy;
  const bodyCol = isDark ? 'rgba(255,255,255,0.6)' : C_S.body;
  const cardBorder = isDark ? 'rgba(255,255,255,0.08)' : C_S.border;

  return (
    <section style={{ background: bg, padding: sectionPad(bp) }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: bp === 'lg' ? 48 : 36 }}>
          <div style={{ fontFamily: 'Plus Jakarta Sans', fontWeight: 700, fontSize: 12, color: C_S.primary, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 14 }}>Notificações ao morador</div>
          <h2 style={{
            fontFamily: 'Plus Jakarta Sans', fontWeight: 800,
            fontSize: 'clamp(28px, 3.5vw, 42px)',
            letterSpacing: '-0.03em', color: headCol, marginBottom: 16, lineHeight: 1.1,
          }}>
            Telegram incluído.<br/>WhatsApp se você precisar.
          </h2>
          <p style={{ fontSize: 16, color: bodyCol, maxWidth: 560, margin: '0 auto', lineHeight: 1.65 }}>
            Você não paga a mais pela notificação padrão. Escolha o canal que faz sentido pro seu condomínio.
          </p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: bp === 'sm' ? '1fr' : '1fr 1fr',
          gap: 20,
        }}>
          {/* Telegram */}
          <div style={{
            background: isDark ? 'rgba(34,158,217,0.08)' : '#F0F9FE',
            border: `1.5px solid ${C_S.telegram}`,
            borderRadius: 20, padding: bp === 'sm' ? 24 : 32,
            position: 'relative',
          }}>
            <div style={{
              position: 'absolute', top: bp === 'sm' ? 16 : 20, right: bp === 'sm' ? 16 : 20,
              fontFamily: 'Plus Jakarta Sans', fontWeight: 800, fontSize: 11,
              color: C_S.white, background: C_S.telegram,
              padding: '4px 12px', borderRadius: 100,
              letterSpacing: '0.04em',
            }}>INCLUÍDO</div>
            <div style={{ width: 52, height: 52, borderRadius: 14, background: `${C_S.telegram}25`, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}>
              <Icon name="telegram" size={24} color={C_S.telegram} strokeWidth={2} />
            </div>
            <h3 style={{ fontFamily: 'Plus Jakarta Sans', fontWeight: 800, fontSize: 22, color: headCol, marginBottom: 8, letterSpacing: '-0.02em' }}>Telegram</h3>
            <p style={{ fontSize: 14, color: bodyCol, lineHeight: 1.7, marginBottom: 22 }}>
              Canal padrão da HUBLAR. Sem custo adicional, sem dependência de operadora, sem limite de mensagens. O morador conecta uma vez e pronto.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
              {['Sem custo extra', 'Sem limite de mensagens', 'Ativação simples pelo app do morador', 'Notificação na hora do registro'].map((b, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <Icon name="check" size={14} color={C_S.telegram} strokeWidth={2.4} />
                  <span style={{ fontSize: 13, color: bodyCol }}>{b}</span>
                </div>
              ))}
            </div>
          </div>

          {/* WhatsApp */}
          <div style={{
            background: isDark ? 'rgba(255,255,255,0.03)' : '#FAFAFE',
            border: `1px solid ${cardBorder}`,
            borderRadius: 20, padding: bp === 'sm' ? 24 : 32,
            position: 'relative',
          }}>
            <div style={{
              position: 'absolute', top: bp === 'sm' ? 16 : 20, right: bp === 'sm' ? 16 : 20,
              fontFamily: 'Plus Jakarta Sans', fontWeight: 800, fontSize: 11,
              color: C_S.amber, background: `${C_S.amber}20`,
              padding: '4px 12px', borderRadius: 100,
              letterSpacing: '0.04em',
            }}>OPCIONAL</div>
            <div style={{ width: 52, height: 52, borderRadius: 14, background: `${C_S.whatsapp}20`, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}>
              <Icon name="whatsapp" size={24} color={C_S.whatsapp} strokeWidth={2} />
            </div>
            <h3 style={{ fontFamily: 'Plus Jakarta Sans', fontWeight: 800, fontSize: 22, color: headCol, marginBottom: 8, letterSpacing: '-0.02em' }}>WhatsApp</h3>
            <p style={{ fontSize: 14, color: bodyCol, lineHeight: 1.7, marginBottom: 22 }}>
              Implementamos a integração com a API oficial do WhatsApp Business. O custo da API é repassado e cobrado conforme uso. Combine com a gente.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
              {['Implementação sob demanda', 'Custo da API repassado por uso', 'Ideal para condomínios sem cultura de Telegram', 'Mesmo conteúdo da notificação padrão'].map((b, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <Icon name="check" size={14} color={C_S.whatsapp} strokeWidth={2.4} />
                  <span style={{ fontSize: 13, color: bodyCol }}>{b}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── PREÇO + CALCULADORA ─── */
function Preco({ variant }) {
  const bp = useRedesignBp();
  const isDark = variant === 'B';
  const bg = isDark ? C_S.navy : C_S.lavender;
  const headCol = isDark ? C_S.white : C_S.navy;
  const bodyCol = isDark ? 'rgba(255,255,255,0.6)' : C_S.body;
  const [aps, setAps] = React.useState(120);

  const cfg = typeof window !== 'undefined' ? window.__HUBLAR_PRECIFICACAO_PUBLICA : null;
  const PRICE = cfg ? cfg.PRECO_PUBLICO_POR_UNIDADE_MENSAL : 0.97;
  const MIN_TOTAL = cfg ? cfg.MENSALIDADE_MINIMA_PUBLICA : 69.9;
  const mensalidade = cfg
    ? (u) => cfg.mensalidadePrecoPublicoPorUnidades(u)
    : (u) => {
        const q = Math.min(100000, Math.max(0, Math.floor(Number(u) || 0)));
        const c = q * PRICE;
        return Math.round(Math.max(MIN_TOTAL, c) * 100) / 100;
      };
  const calc = aps * PRICE;
  const total = mensalidade(aps);
  const isFloor = calc < MIN_TOTAL;
  const maxUnidadesFaixaMinima = Math.max(1, Math.floor(MIN_TOTAL / PRICE));
  const fmt = (v) => v.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
  const fmtPrecoUnit = PRICE.toLocaleString('pt-BR', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  });

  const precoTwoCol = bp !== 'sm';
  const bottomCols = bp === 'lg' ? 'repeat(4, 1fr)' : (bp === 'md' ? 'repeat(2, 1fr)' : '1fr');
  return (
    <section id="preco" style={{ background: bg, padding: sectionPad(bp) }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: bp === 'lg' ? 48 : 36 }}>
          <div style={{ fontFamily: 'Plus Jakarta Sans', fontWeight: 700, fontSize: 12, color: C_S.primary, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 14 }}>Preço</div>
          <h2 style={{
            fontFamily: 'Plus Jakarta Sans', fontWeight: 800,
            fontSize: 'clamp(30px, 4vw, 50px)',
            letterSpacing: '-0.03em', color: headCol, marginBottom: 16, lineHeight: 1.06,
          }}>
            R$ <span style={{ color: C_S.primary }}>{fmtPrecoUnit}</span> centavos<br/>
            por apto. Por mês.{' '}
            <span style={{ color: C_S.primary, whiteSpace: 'nowrap' }}>Só&nbsp;isso.</span>
          </h2>
          <p style={{ fontSize: 17, color: bodyCol, maxWidth: 600, margin: '0 auto', lineHeight: 1.65 }}>
            Mensalidade mínima de <strong style={{ color: headCol }}>R$ {fmt(MIN_TOTAL)}</strong> para condomínios de até {maxUnidadesFaixaMinima} apartamentos/unidades. Sem cobrança por encomenda, operador ou morador.
          </p>
        </div>

        {/* Calculator */}
        <div style={{
          background: isDark ? 'rgba(255,255,255,0.04)' : C_S.white,
          border: `1px solid ${isDark ? 'rgba(255,255,255,0.08)' : C_S.border}`,
          borderRadius: 24, padding: bp === 'lg' ? 40 : 24,
          boxShadow: isDark ? 'none' : `0 24px 60px ${C_S.primary}15`,
          marginBottom: 32,
        }}>
          <div style={{
            display: 'grid',
            gridTemplateColumns: precoTwoCol ? '1fr 1fr' : '1fr',
            gap: precoTwoCol ? 48 : 28,
            alignItems: 'center',
          }}>
            <div>
              <div style={{ fontFamily: 'Plus Jakarta Sans', fontWeight: 700, fontSize: 14, color: headCol, marginBottom: 6 }}>
                Quantos apartamentos/unidades seu condomínio tem?
              </div>
              <div style={{ fontSize: 13, color: bodyCol, marginBottom: 28 }}>
                Arraste para simular o valor mensal.
              </div>

              {/* Slider */}
              <div style={{ marginBottom: 8 }}>
                <input
                  type="range" min="20" max="1000" step="1" value={aps}
                  onChange={e => setAps(parseInt(e.target.value))}
                  style={{
                    width: '100%', height: 8, borderRadius: 100,
                    background: `linear-gradient(to right, ${C_S.primary} 0%, ${C_S.primary} ${(aps-20)/9.8}%, ${isDark ? 'rgba(255,255,255,0.1)' : C_S.lavender} ${(aps-20)/9.8}%, ${isDark ? 'rgba(255,255,255,0.1)' : C_S.lavender} 100%)`,
                    appearance: 'none', WebkitAppearance: 'none',
                    outline: 'none', cursor: 'pointer',
                  }}
                />
                <style>{`
                  input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: ${C_S.primary}; cursor: pointer; box-shadow: 0 4px 12px ${C_S.primary}66, 0 0 0 4px ${C_S.white}; border: none; }
                  input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: ${C_S.primary}; cursor: pointer; box-shadow: 0 4px 12px ${C_S.primary}66; border: 4px solid ${C_S.white}; }
                `}</style>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: isDark ? 'rgba(255,255,255,0.4)' : C_S.muted, marginBottom: 24 }}>
                <span>20</span><span>500</span><span>1.000</span>
              </div>

              {/* Manual input */}
              <div style={{
                display: 'flex', alignItems: 'center', gap: 10,
                background: isDark ? 'rgba(255,255,255,0.05)' : C_S.lavender,
                border: `1px solid ${isDark ? 'rgba(255,255,255,0.08)' : C_S.border}`,
                borderRadius: 10, padding: '10px 14px',
              }}>
                <span style={{ fontSize: 13, color: bodyCol, fontWeight: 500 }}>Apartamentos/unidades:</span>
                <input
                  type="number" value={aps} min="1" max="9999"
                  onChange={e => setAps(Math.max(1, Math.min(9999, parseInt(e.target.value) || 1)))}
                  style={{
                    flex: 1, fontSize: 16, fontWeight: 700,
                    color: headCol, background: 'transparent',
                    border: 'none', outline: 'none', textAlign: 'right',
                    fontFamily: 'Plus Jakarta Sans',
                  }}
                />
              </div>
              {aps >= 1000 && (
                <a
                  href={HUBLAR_WHATSAPP_ORCAMENTO_GRANDE}
                  target="_blank"
                  rel="noreferrer"
                  style={{
                    marginTop: 12,
                    display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                    background: C_S.white,
                    color: C_S.primary,
                    padding: '12px 18px', borderRadius: 10,
                    textDecoration: 'none', fontWeight: 700, fontSize: 14,
                    boxShadow: `0 6px 20px ${C_S.primary}33`,
                    width: bp === 'sm' ? '100%' : 'fit-content',
                  }}
                >
                  Acima de 1.000 aptos: condições especiais
                  <Icon name="arrowRight" size={14} color={C_S.primary} />
                </a>
              )}
            </div>

            <div style={{
              background: `linear-gradient(135deg, ${C_S.primary}, ${C_S.primaryLight})`,
              borderRadius: 18, padding: 32,
              color: C_S.white, position: 'relative', overflow: 'hidden',
              boxShadow: `0 20px 50px ${C_S.primary}55`,
            }}>
              <div style={{ position: 'absolute', top: -30, right: -30, width: 140, height: 140, borderRadius: '50%', background: 'rgba(255,255,255,0.08)' }}/>
              <div style={{ position: 'relative' }}>
                <div style={{ fontSize: 12, fontWeight: 600, opacity: 0.85, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 8 }}>Seu investimento mensal</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 6, flexWrap: 'wrap' }}>
                  <span style={{ fontFamily: 'Plus Jakarta Sans', fontWeight: 600, fontSize: bp === 'sm' ? 18 : 22, opacity: 0.85 }}>R$</span>
                  <span style={{
                    fontFamily: 'Plus Jakarta Sans', fontWeight: 800,
                    fontSize: bp === 'sm' ? 'clamp(36px, 11vw, 52px)' : 60,
                    lineHeight: 1, letterSpacing: '-0.04em', fontVariantNumeric: 'tabular-nums',
                  }}>{fmt(total)}</span>
                </div>
                <div style={{ fontSize: 12.5, opacity: 0.78, marginBottom: 18 }}>
                  {isFloor ? (
                    <>mensalidade mínima · {aps} aptos/unid. × R$ {fmtPrecoUnit} = R$ {fmt(calc)}</>
                  ) : (
                    <>por mês · {aps} apartamentos/unidades × R$ {fmtPrecoUnit}</>
                  )}
                </div>

                <a href={`/novo-condominio?unidades=${encodeURIComponent(String(aps))}`} target="_top" rel="noreferrer" style={{
                  display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                  background: C_S.white, color: C_S.primary,
                  padding: '12px 18px', borderRadius: 10,
                  textDecoration: 'none', fontWeight: 700, fontSize: 14,
                  marginBottom: 16,
                  boxShadow: '0 6px 20px rgba(0,0,0,0.15)',
                  width: bp === 'sm' ? '100%' : 'auto',
                }}>
                  Criar conta do condomínio
                  <Icon name="arrowRight" size={14} color={C_S.primary} />
                </a>

                <div style={{ height: 1, background: 'rgba(255,255,255,0.18)', marginBottom: 14 }}/>

                <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
                  {['Encomendas, operadores e moradores ilimitados', 'Telegram incluído · Pix ou cartão', '7 dias grátis · sem fidelidade · cancele quando quiser'].map((b, i) => (
                    <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 9 }}>
                      <Icon name="check" size={13} color={C_S.white} strokeWidth={2.4} />
                      <span style={{ fontSize: 12.5, lineHeight: 1.45 }}>{b}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Bottom info row */}
        <div style={{
          background: isDark ? 'rgba(255,255,255,0.04)' : C_S.white,
          border: `1px solid ${isDark ? 'rgba(255,255,255,0.07)' : C_S.border}`,
          borderRadius: 16, padding: bp === 'sm' ? '18px 20px' : '20px 28px',
          display: 'grid', gridTemplateColumns: bottomCols, gap: bp === 'sm' ? 16 : 18,
          justifyItems: bp === 'sm' ? 'start' : 'stretch',
        }}>
          {[
            { icon: 'sparkles', t: '7 dias grátis', s: 'Sem cartão de crédito' },
            { icon: 'check', t: 'Pix ou cartão', s: 'Pagamento mensal recorrente' },
            { icon: 'shield', t: 'Sem fidelidade', s: 'Cancele a qualquer momento' },
            { icon: 'package', t: 'Mensalidade mínima', s: `R$ ${fmt(MIN_TOTAL)} · até ${maxUnidadesFaixaMinima} aptos/unid.` },
          ].map((it, i) => (
            <div key={i} style={{
              display: 'flex',
              alignItems: 'flex-start',
              gap: 11,
              justifyContent: 'flex-start',
            }}>
              <div style={{ width: 32, height: 32, borderRadius: 9, background: `${C_S.primary}15`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <Icon name={it.icon} size={15} color={C_S.primary} />
              </div>
              <div>
                <div style={{ fontFamily: 'Plus Jakarta Sans', fontWeight: 700, fontSize: 13.5, color: headCol, lineHeight: 1.25 }}>{it.t}</div>
                <div style={{ fontSize: 12, color: bodyCol, marginTop: 2, lineHeight: 1.35 }}>{it.s}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── CTA FINAL ─── */
function CTAFinal({ variant }) {
  const bp = useRedesignBp();
  const isDark = variant === 'B';
  return (
    <section style={{
      background: isDark ? C_S.navyMid : C_S.primary,
      padding: sectionPad(bp), textAlign: 'center',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', width: 700, height: 400, borderRadius: '50%', background: 'radial-gradient(ellipse, rgba(255,255,255,0.06) 0%, transparent 65%)', pointerEvents: 'none' }}/>
      <div style={{ maxWidth: 660, margin: '0 auto', position: 'relative' }}>
        <h2 style={{
          fontFamily: 'Plus Jakarta Sans', fontWeight: 800,
          fontSize: 'clamp(30px, 4.5vw, 52px)',
          letterSpacing: '-0.03em', color: C_S.white, marginBottom: 18, lineHeight: 1.08,
        }}>
          Coloque o caderno<br/>na gaveta. Pra sempre.
        </h2>
        <p style={{ fontSize: 17, color: 'rgba(255,255,255,0.72)', marginBottom: 40, lineHeight: 1.65 }}>
          Cadastre seu condomínio, conecte sua equipe e veja a operação fluir já no primeiro dia. Sete dias grátis pra testar com calma.
        </p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap', marginBottom: 28, width: '100%' }}>
          <a href="/novo-condominio" target="_top" rel="noreferrer" style={{
            fontFamily: 'Plus Jakarta Sans', fontWeight: 700, fontSize: 15,
            color: C_S.primary, background: C_S.white,
            padding: '16px 32px', borderRadius: 12, textDecoration: 'none',
            boxShadow: '0 8px 30px rgba(0,0,0,0.15)',
            display: 'inline-flex', alignItems: 'center', gap: 8,
            justifyContent: 'center',
            width: bp === 'sm' ? '100%' : 'auto',
          }}>
            Criar conta do condomínio
            <Icon name="arrowRight" size={15} color={C_S.primary} />
          </a>
          <a href={HUBLAR_WHATSAPP} target="_blank" rel="noreferrer" style={{
            fontFamily: 'Plus Jakarta Sans', fontWeight: 600, fontSize: 15,
            color: C_S.white,
            background: C_S.whatsapp,
            border: '1px solid rgba(255,255,255,0.18)',
            padding: '16px 24px', borderRadius: 12, textDecoration: 'none',
            display: 'inline-flex', alignItems: 'center', gap: 8,
            justifyContent: 'center',
            width: bp === 'sm' ? '100%' : 'auto',
            boxShadow: '0 8px 24px rgba(0,0,0,0.2)',
          }}>
            <Icon name="whatsapp" size={18} color={C_S.white} strokeWidth={2} />
            Falar no WhatsApp
          </a>
        </div>
        <p style={{ fontSize: 13, color: 'rgba(255,255,255,0.4)' }}>
          7 dias grátis · Pix ou cartão · Sem fidelidade · Cancele quando quiser
        </p>
      </div>
    </section>
  );
}

/* ─── FOOTER ─── */
function Footer({ variant }) {
  const bp = useRedesignBp();
  const isDark = variant === 'B';
  const bg = isDark ? '#0D0820' : '#F5F3FF';
  const textCol = isDark ? 'rgba(255,255,255,0.4)' : C_S.muted;
  const narrowFooter = bp !== 'lg';
  return (
    <footer style={{ background: bg, padding: narrowFooter ? '32px 5vw' : '40px 5vw', borderTop: `1px solid ${isDark ? 'rgba(255,255,255,0.06)' : C_S.border}` }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto', display: 'flex',
        flexDirection: narrowFooter ? 'column' : 'row',
        justifyContent: narrowFooter ? 'center' : 'space-between',
        alignItems: narrowFooter ? 'center' : 'center',
        textAlign: narrowFooter ? 'center' : 'left',
        flexWrap: 'wrap', gap: narrowFooter ? 20 : 16,
      }}>
        <HublarLogo light={isDark} />
        <p style={{ fontSize: 13, color: textCol, margin: 0 }}>
          HUBLAR © 2026 · Gestão de encomendas para condomínios
        </p>
        <div style={{ display: 'flex', gap: 22, flexWrap: 'wrap', justifyContent: 'center' }}>
          {[['Privacidade', '/privacidade'], ['Termos', '/termos'], ['Contato', 'mailto:contato@hublar.com.br']].map(([l, h]) => (
            <a key={l} href={h} target={h.startsWith('/') ? '_top' : undefined} rel={h.startsWith('/') ? 'noreferrer' : undefined} style={{ fontSize: 13, color: textCol, textDecoration: 'none' }}>{l}</a>
          ))}
        </div>
      </div>
    </footer>
  );
}

window.Nav = Nav;
window.Hero = Hero;
window.AntesDepois = AntesDepois;
window.Fluxo = Fluxo;
window.TresApps = TresApps;
window.Recursos = Recursos;
window.Notificacoes = Notificacoes;
window.Preco = Preco;
window.CTAFinal = CTAFinal;
window.Footer = Footer;