// Pendura landing page — main app with all sections.
// Tone: Nex-institutional + warm direct voice. Theme: Quente (original brand).

const C = {
  bg: '#FFF8F2',
  bgAlt: '#F1EFE8',
  bgDeep: '#ECE7DD',
  bgDark: '#2C1810',
  ink: '#2C1810',
  ink80: 'rgba(44,24,16,0.85)',
  ink70: 'rgba(44,24,16,0.7)',
  ink50: 'rgba(44,24,16,0.5)',
  ink35: 'rgba(44,24,16,0.35)',
  ink20: 'rgba(44,24,16,0.2)',
  ink10: 'rgba(44,24,16,0.10)',
  ink06: 'rgba(44,24,16,0.06)',
  primary: '#D85A30',
  primaryDark: '#B84A22',
  primarySoft: '#FDE8DF',
  primarySoftDeep: '#F8D4C0',
  primaryOn: '#FFF8F2',
  green: '#1D9E75',
  greenSoft: 'rgba(29,158,117,0.10)',
  red: '#C9412E',
};

// URL do app/painel (subdomínio dashboard). CTAs e "Entrar" levam pra cá.
const DASHBOARD_URL = 'https://dashboard.pendura.app';

// Quente theme tokens for the embedded Painel
const QUENTE = window.APP_THEMES.find((th) => th.id === 'quente').theme;

// ─── Reusable bits ─────────────────────────────────────────────────────
function Container({ children, max = 1240, style, className }) {
  return (
    <div className={`lp-container ${className || ''}`} style={{ maxWidth: max, margin: '0 auto', padding: '0 32px', ...style }}>{children}</div>
  );
}

function Eyebrow({ children, color = C.primary }) {
  return (
    <div style={{
      fontSize: 11.5,
      fontWeight: 500,
      letterSpacing: '0.22em',
      textTransform: 'uppercase',
      color,
    }}>{children}</div>
  );
}

function PrimaryButton({ children, large, style, onClick, className }) {
  const handleClick = onClick || (() => { window.location.href = DASHBOARD_URL; });
  return (
    <button onClick={handleClick} className={className} style={{
      background: C.primary,
      color: C.primaryOn,
      border: 0,
      borderRadius: 14,
      padding: large ? '17px 26px' : '13px 20px',
      fontFamily: 'inherit',
      fontSize: large ? 16 : 14,
      fontWeight: 500,
      letterSpacing: '-0.01em',
      cursor: 'pointer',
      display: 'inline-flex',
      alignItems: 'center',
      gap: 9,
      transition: 'background 0.15s ease, transform 0.1s ease',
      boxShadow: '0 1px 0 rgba(44,24,16,0.04), 0 8px 18px -6px rgba(216,90,48,0.35)',
      ...style,
    }}
    onMouseDown={(e) => (e.currentTarget.style.transform = 'translateY(1px)')}
    onMouseUp={(e) => (e.currentTarget.style.transform = 'translateY(0)')}
    onMouseLeave={(e) => (e.currentTarget.style.transform = 'translateY(0)')}
    >
      {children}
    </button>
  );
}

function SecondaryButton({ children, large, style, className }) {
  return (
    <button className={className} style={{
      background: 'transparent',
      color: C.ink,
      border: `1px solid ${C.ink20}`,
      borderRadius: 14,
      padding: large ? '16px 24px' : '12px 18px',
      fontFamily: 'inherit',
      fontSize: large ? 16 : 14,
      fontWeight: 500,
      cursor: 'pointer',
      display: 'inline-flex',
      alignItems: 'center',
      gap: 8,
      transition: 'all 0.15s ease',
      ...style,
    }}>
      {children}
    </button>
  );
}

function Wordmark() {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 9 }}>
      <LPIcon name="pendura" size={14} color={C.primary} />
      <span style={{ fontSize: 19, fontWeight: 500, letterSpacing: '-0.04em', color: C.ink }}>Pendura</span>
    </div>
  );
}

// ─── Section: Nav ─────────────────────────────────────────────────────
function Nav() {
  return (
    <div style={{
      position: 'sticky',
      top: 0,
      zIndex: 50,
      background: 'rgba(255, 248, 242, 0.85)',
      backdropFilter: 'blur(16px)',
      WebkitBackdropFilter: 'blur(16px)',
      borderBottom: `1px solid ${C.ink06}`,
    }}>
      <Container max={1280}>
        <div className="lp-nav-row" style={{ height: 64, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <Wordmark />
          <div className="lp-nav-links" style={{ display: 'flex', gap: 4 }}>
            {LP_DATA.nav.map((n) => (
              <a key={n.label} href={n.href} style={{
                padding: '8px 14px',
                color: C.ink70,
                fontSize: 13.5,
                fontWeight: 500,
                textDecoration: 'none',
                borderRadius: 8,
                transition: 'all 0.15s ease',
              }}
              onMouseEnter={(e) => (e.currentTarget.style.background = C.bgAlt)}
              onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')}
              >{n.label}</a>
            ))}
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <a href={DASHBOARD_URL} className="lp-nav-entrar" style={{
              color: C.ink70, fontSize: 13.5, fontWeight: 500,
              textDecoration: 'none', padding: '8px 14px',
            }}>Entrar</a>
            <PrimaryButton className="lp-nav-cta" style={{ padding: '10px 16px', fontSize: 13.5 }}>
              Teste grátis <LPIcon name="arrow-right" size={14} strokeWidth={2.2} color={C.primaryOn} />
            </PrimaryButton>
          </div>
        </div>
      </Container>
    </div>
  );
}

// ─── Section: Hero ────────────────────────────────────────────────────
function Hero() {
  const h = LP_DATA.hero;
  return (
    <section className="lp-hero" style={{ background: C.bg, paddingTop: 60, paddingBottom: 0, position: 'relative', overflow: 'hidden' }}>
      {/* Background decoration — large faint Pendura symbol */}
      <div style={{
        position: 'absolute',
        right: -80,
        top: 40,
        width: 260,
        height: 460,
        opacity: 0.04,
        pointerEvents: 'none',
      }}>
        <LPIcon name="pendura" size={260} color={C.primary} />
      </div>

      <Container max={1240}>
        <div style={{ textAlign: 'center', maxWidth: 880, margin: '0 auto', position: 'relative' }}>
          <Eyebrow>{h.eyebrow}</Eyebrow>
          <h1 className="lp-hero-h1" style={{
            fontSize: 'clamp(40px, 5vw, 64px)',
            fontWeight: 500,
            letterSpacing: '-0.035em',
            lineHeight: 1.02,
            color: C.ink,
            margin: '20px 0 22px',
            textWrap: 'balance',
          }}>
            Controla o fiado, emite{' '}
            <span style={{ color: C.primary, whiteSpace: 'nowrap' }}>nota fiscal em 3 segundos</span>{' '}
            e funciona sem internet.
          </h1>
          <p className="lp-hero-sub" style={{
            fontSize: 18,
            lineHeight: 1.5,
            color: C.ink70,
            maxWidth: 640,
            margin: '0 auto 32px',
            textWrap: 'pretty',
          }}>
            {h.sub}
          </p>
          <div className="lp-hero-ctas" style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap', marginBottom: 18 }}>
            <PrimaryButton large>
              {h.ctaPrimary} <LPIcon name="arrow-right" size={16} strokeWidth={2.2} color={C.primaryOn} />
            </PrimaryButton>
            <SecondaryButton large>{h.ctaSecondary}</SecondaryButton>
          </div>
          <div style={{
            fontSize: 13,
            color: C.ink50,
            display: 'inline-flex',
            alignItems: 'center',
            gap: 8,
            flexWrap: 'wrap',
            justifyContent: 'center',
          }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 1 }}>
              {[0, 1, 2, 3, 4].map((i) => <LPIcon key={i} name="star" size={12} color={C.primary} />)}
            </span>
            <span>{h.priceHint}</span>
          </div>
        </div>

        {/* Hero product visual — desktop: embedded Painel; mobile: stylized phone */}
        <div className="lp-hero-painel" style={{ marginTop: 64, position: 'relative' }}>
          <LPDemoVenda />
        </div>

        {/* Mobile alternative: same interactive demo */}
        <div className="lp-hero-painel-mobile" style={{ marginTop: 40, paddingBottom: 0 }}>
          <LPDemoVenda />
        </div>
      </Container>
    </section>
  );
}

// Stylized phone mockup for mobile hero — abstract Painel view
function MobileHeroPhone() {
  return (
    <div style={{
      maxWidth: 280,
      margin: '0 auto',
      background: '#1F1A14',
      borderRadius: 38,
      padding: 8,
      boxShadow: '0 30px 60px -16px rgba(44,24,16,0.28), 0 12px 28px -10px rgba(44,24,16,0.14)',
    }}>
      <div style={{
        background: QUENTE.surface,
        borderRadius: 30,
        overflow: 'hidden',
        position: 'relative',
        minHeight: 540,
      }}>
        {/* status bar */}
        <div style={{
          height: 32,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          padding: '0 22px 0 26px',
          fontSize: 11,
          fontWeight: 500,
          color: C.ink,
        }}>
          <span>9:41</span>
          <span style={{ opacity: 0.6 }}>●●●● 5G</span>
        </div>
        {/* app header */}
        <div style={{ padding: '12px 18px 4px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
            <LPIcon name="pendura" size={10} color={C.primary} />
            <span style={{ fontSize: 15, fontWeight: 500, letterSpacing: '-0.035em', color: C.ink }}>Pendura</span>
          </div>
          <div style={{
            width: 26, height: 26, borderRadius: '50%',
            background: C.primarySoft, color: C.primary,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 11, fontWeight: 500,
          }}>M</div>
        </div>
        {/* hero stat */}
        <div style={{ padding: '14px 18px 0' }}>
          <div style={{
            fontSize: 8.5, fontWeight: 500, letterSpacing: '0.18em',
            textTransform: 'uppercase', color: C.ink50, marginBottom: 6,
          }}>Vendido hoje</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 2 }}>
            <span style={{ fontSize: 14, color: C.ink50 }}>R$</span>
            <span style={{
              fontSize: 32, fontWeight: 500, letterSpacing: '-0.03em',
              color: C.ink, lineHeight: 1, fontVariantNumeric: 'tabular-nums',
            }}>1.247</span>
            <span style={{ fontSize: 16, color: C.ink50 }}>,80</span>
          </div>
          <div style={{ marginTop: 8, display: 'flex', gap: 6, alignItems: 'center', flexWrap: 'wrap', fontSize: 10.5, color: C.ink70 }}>
            <span>8 clientes</span>
            <span style={{
              background: C.primarySoft,
              color: C.primaryDark,
              padding: '2px 7px',
              borderRadius: 99,
              fontSize: 9.5,
              fontWeight: 500,
            }}>3 vencem hoje</span>
          </div>
        </div>
        {/* primary CTA */}
        <div style={{ padding: '18px 18px 0' }}>
          <div style={{
            background: C.primary,
            color: C.primaryOn,
            borderRadius: 12,
            padding: '14px',
            fontSize: 13,
            fontWeight: 500,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            gap: 6,
          }}>
            <LPIcon name="plus-small" size={13} color={C.primaryOn} strokeWidth={2.5} />
            Nova venda
          </div>
        </div>
        {/* mini customer list */}
        <div style={{ padding: '18px 18px 0' }}>
          <div style={{
            fontSize: 10, fontWeight: 500, letterSpacing: '0.16em',
            textTransform: 'uppercase', color: C.ink50, marginBottom: 8,
          }}>Clientes</div>
          {[
            { name: 'Tião do Bar', status: '+30 dias', amount: 'R$ 156,00', color: 'red' },
            { name: 'Seu Antônio', status: 'vence hoje', amount: 'R$ 84,00', color: 'orange' },
            { name: 'Dona Marlene', status: 'vence hoje', amount: 'R$ 47,80', color: 'orange' },
          ].map((c, i) => (
            <div key={i} style={{
              padding: '11px 0',
              display: 'grid',
              gridTemplateColumns: '10px 1fr auto',
              gap: 10,
              alignItems: 'center',
              borderBottom: i < 2 ? `1px solid ${C.ink06}` : '0',
            }}>
              <LPIcon
                name="pendura"
                size={6}
                color={c.color === 'red' ? '#C9412E' : C.primary}
              />
              <div>
                <div style={{ fontSize: 12, fontWeight: 500, color: C.ink }}>{c.name}</div>
                <div style={{ fontSize: 9.5, color: c.color === 'red' ? '#C9412E' : C.primary }}>{c.status}</div>
              </div>
              <div style={{
                fontSize: 12,
                fontWeight: 500,
                color: c.color === 'red' ? '#C9412E' : C.ink,
                fontVariantNumeric: 'tabular-nums',
              }}>{c.amount}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── Section: Trust strip (segments) ──────────────────────────────────
function Segments() {
  return (
    <section className="lp-section" style={{ background: C.bg, padding: '32px 0 60px' }}>
      <Container max={1240}>
        <div style={{
          fontSize: 12,
          fontWeight: 500,
          letterSpacing: '0.2em',
          textTransform: 'uppercase',
          color: C.ink50,
          textAlign: 'center',
          marginBottom: 22,
        }}>
          Feito pra quem vende no balcão
        </div>
        <div style={{
          display: 'flex',
          flexWrap: 'wrap',
          gap: 10,
          justifyContent: 'center',
        }}>
          {LP_DATA.segments.map((s) => (
            <div key={s.name} className="lp-segments-pill" style={{
              background: C.bgAlt,
              padding: '10px 18px',
              borderRadius: 99,
              fontSize: 14,
              fontWeight: 500,
              color: C.ink,
              display: 'inline-flex',
              alignItems: 'center',
              gap: 8,
            }}>
              <span style={{ fontSize: 16 }}>{s.emoji}</span>
              {s.name}
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ─── Section: Pains (interactive checklist) ──────────────────────────
function Pains() {
  const [checked, setChecked] = React.useState(new Set());
  const toggle = (i) => {
    const next = new Set(checked);
    if (next.has(i)) next.delete(i); else next.add(i);
    setChecked(next);
  };
  const total = LP_DATA.pains.items.length;
  const count = checked.size;
  let closing = LP_DATA.pains.closingZero;
  if (count === total) closing = LP_DATA.pains.closingAll;
  else if (count > 0) closing = LP_DATA.pains.closingFew(count);

  return (
    <section className="lp-section" style={{ background: C.bg, padding: '88px 0' }}>
      <Container max={1100}>
        <div style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto 48px' }}>
          <Eyebrow>Identificação da dor</Eyebrow>
          <h2 className="lp-section-h2" style={{
            fontSize: 'clamp(30px, 4vw, 44px)',
            fontWeight: 500,
            letterSpacing: '-0.03em',
            lineHeight: 1.05,
            color: C.ink,
            margin: '14px 0 14px',
            textWrap: 'balance',
          }}>{LP_DATA.pains.title}</h2>
          <p style={{ fontSize: 16.5, lineHeight: 1.55, color: C.ink70 }}>{LP_DATA.pains.sub}</p>
        </div>

        <div className="lp-pains-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
          gap: 10,
          marginBottom: 32,
        }}>
          {LP_DATA.pains.items.map((p, i) => {
            const isChecked = checked.has(i);
            return (
              <button
                key={i}
                onClick={() => toggle(i)}
                style={{
                  background: isChecked ? C.primarySoft : C.bgAlt,
                  border: `1.5px solid ${isChecked ? C.primary : 'transparent'}`,
                  borderRadius: 16,
                  padding: '18px 20px',
                  display: 'grid',
                  gridTemplateColumns: '28px 28px 1fr',
                  gap: 14,
                  alignItems: 'flex-start',
                  cursor: 'pointer',
                  fontFamily: 'inherit',
                  textAlign: 'left',
                  transition: 'all 0.15s ease',
                }}
              >
                {/* checkbox */}
                <div style={{
                  width: 22,
                  height: 22,
                  borderRadius: 6,
                  background: isChecked ? C.primary : C.bg,
                  border: `1.5px solid ${isChecked ? C.primary : C.ink20}`,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  marginTop: 1,
                  flexShrink: 0,
                  transition: 'all 0.15s ease',
                }}>
                  {isChecked && <LPIcon name="check" size={13} color={C.primaryOn} strokeWidth={3} />}
                </div>
                <div style={{ fontSize: 22, lineHeight: 1, marginTop: 1 }}>{p.emoji}</div>
                <div style={{
                  fontSize: 14.5,
                  lineHeight: 1.5,
                  color: isChecked ? C.ink : C.ink80,
                  fontWeight: isChecked ? 500 : 400,
                }}>{p.text}</div>
              </button>
            );
          })}
        </div>

        {/* Closing line with live count */}
        <div style={{
          textAlign: 'center',
          padding: '20px 28px',
          background: count > 0 ? C.primarySoft : 'transparent',
          color: count > 0 ? C.primaryDark : C.ink50,
          borderRadius: 16,
          fontSize: 16,
          fontWeight: count > 0 ? 500 : 400,
          maxWidth: 600,
          margin: '0 auto',
          transition: 'all 0.2s ease',
        }}>{closing}</div>
      </Container>
    </section>
  );
}

// ─── Section: Diferenciais (6 features) ───────────────────────────────
function Features() {
  return (
    <section id="recursos" className="lp-section" style={{ background: C.bgAlt, padding: '88px 0' }}>
      <Container max={1240}>
        <div style={{ maxWidth: 720, marginBottom: 56 }}>
          <Eyebrow>Recursos</Eyebrow>
          <h2 className="lp-section-h2" style={{
            fontSize: 'clamp(32px, 4vw, 48px)',
            fontWeight: 500,
            letterSpacing: '-0.03em',
            lineHeight: 1.05,
            color: C.ink,
            margin: '14px 0 16px',
            textWrap: 'balance',
          }}>
            Todo o sistema da loja em um único aplicativo.
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: C.ink70, maxWidth: 560 }}>
            Fiado, venda, nota fiscal, caixa, estoque e relatório.
            Cada um afiado pra resolver o problema real de quem vende no balcão.
          </p>
        </div>
        <div className="lp-features-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))',
          gap: 14,
        }}>
          {LP_DATA.features.map((f, i) => (
            <article key={i} style={{
              background: C.bg,
              borderRadius: 18,
              padding: '26px 24px 28px',
              border: `1px solid ${C.ink06}`,
              position: 'relative',
              display: 'flex',
              flexDirection: 'column',
              gap: 14,
              minHeight: 220,
            }}>
              <div style={{
                width: 40,
                height: 40,
                borderRadius: 12,
                background: C.primarySoft,
                color: C.primary,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
              }}>
                <LPIcon name={f.icon} size={20} color={C.primary} strokeWidth={1.8} />
              </div>
              <div>
                <h3 style={{
                  fontSize: 19,
                  fontWeight: 500,
                  letterSpacing: '-0.02em',
                  color: C.ink,
                  marginBottom: 6,
                  display: 'flex',
                  alignItems: 'center',
                  gap: 8,
                  flexWrap: 'wrap',
                }}>
                  {f.title}
                  {f.tag && (
                    <span style={{
                      fontSize: 10,
                      fontWeight: 500,
                      letterSpacing: '0.14em',
                      textTransform: 'uppercase',
                      background: C.primary,
                      color: C.primaryOn,
                      padding: '3px 8px',
                      borderRadius: 99,
                    }}>{f.tag}</span>
                  )}
                </h3>
                <p style={{ fontSize: 14, lineHeight: 1.55, color: C.ink70 }}>{f.copy}</p>
              </div>
            </article>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ─── Section: Benefits ───────────────────────────────────────────────
function Benefits() {
  const b = LP_DATA.benefits;
  const cards = b.items.slice(0, 6);
  const hero = b.items[6];
  return (
    <section className="lp-section" style={{ background: C.bgDark, color: C.bg, padding: '88px 0', position: 'relative', overflow: 'hidden' }}>
      <div style={{
        position: 'absolute',
        right: -100,
        top: -80,
        opacity: 0.04,
        pointerEvents: 'none',
      }}>
        <LPIcon name="pendura" size={320} color={C.primary} />
      </div>
      <Container max={1240}>
        <div style={{ maxWidth: 720, marginBottom: 56, position: 'relative' }}>
          <Eyebrow color={C.primary}>{b.eyebrow}</Eyebrow>
          <h2 className="lp-section-h2" style={{
            fontSize: 'clamp(32px, 4vw, 48px)',
            fontWeight: 500,
            letterSpacing: '-0.03em',
            lineHeight: 1.05,
            color: C.bg,
            margin: '14px 0 16px',
            textWrap: 'balance',
          }}>{b.title}</h2>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: 'rgba(255,248,242,0.65)', maxWidth: 560 }}>{b.sub}</p>
        </div>

        {/* 3+3 grid of supporting benefits */}
        <div className="lp-benefits-grid-3" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 12,
          position: 'relative',
          marginBottom: 12,
        }}>
          {cards.map((it, i) => (
            <article key={i} style={{
              background: 'rgba(255,248,242,0.05)',
              border: '1px solid rgba(255,248,242,0.08)',
              borderRadius: 16,
              padding: '22px 22px 24px',
              display: 'flex',
              flexDirection: 'column',
              gap: 12,
            }}>
              <div style={{ fontSize: 26, lineHeight: 1 }}>{it.emoji}</div>
              <div>
                <h3 style={{
                  fontSize: 17,
                  fontWeight: 500,
                  letterSpacing: '-0.015em',
                  color: C.bg,
                  marginBottom: 6,
                }}>{it.title}</h3>
                <p style={{ fontSize: 13.5, lineHeight: 1.55, color: 'rgba(255,248,242,0.65)' }}>{it.copy}</p>
              </div>
            </article>
          ))}
        </div>

        {/* Hero benefit — full-width climactic card */}
        <article className="lp-benefits-hero" style={{
          background: 'linear-gradient(135deg, rgba(216,90,48,0.18) 0%, rgba(255,248,242,0.05) 60%)',
          border: '1px solid rgba(216,90,48,0.22)',
          borderRadius: 22,
          padding: '36px 40px',
          display: 'grid',
          gridTemplateColumns: 'auto 1fr auto',
          gap: 36,
          alignItems: 'center',
          position: 'relative',
          overflow: 'hidden',
        }}>
          {/* big emoji block */}
          <div className="lp-benefits-hero-emoji" style={{
            width: 88,
            height: 88,
            borderRadius: 22,
            background: 'rgba(216,90,48,0.15)',
            border: '1px solid rgba(216,90,48,0.25)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            fontSize: 42,
            flexShrink: 0,
            position: 'relative',
          }}>{hero.emoji}</div>

          {/* copy */}
          <div style={{ position: 'relative' }}>
            <div style={{
              fontSize: 10.5,
              fontWeight: 500,
              letterSpacing: '0.22em',
              textTransform: 'uppercase',
              color: C.primary,
              marginBottom: 8,
            }}>O que sobra de tudo isso</div>
            <h3 className="lp-benefits-hero-h3" style={{
              fontSize: 'clamp(22px, 2.6vw, 30px)',
              fontWeight: 500,
              letterSpacing: '-0.02em',
              lineHeight: 1.15,
              color: C.bg,
              marginBottom: 8,
              textWrap: 'balance',
            }}>{hero.title}</h3>
            <p style={{
              fontSize: 15.5,
              lineHeight: 1.55,
              color: 'rgba(255,248,242,0.78)',
              maxWidth: 580,
            }}>{hero.copy}</p>
          </div>

          {/* WhatsApp message preview "card" floating */}
          <div className="lp-benefits-hero-mock" style={{
            background: C.bg,
            color: C.ink,
            borderRadius: 16,
            padding: '14px 16px',
            minWidth: 230,
            maxWidth: 250,
            boxShadow: '0 12px 28px -8px rgba(0,0,0,0.4)',
            position: 'relative',
            transform: 'rotate(2deg)',
            flexShrink: 0,
          }}>
            <div style={{
              fontSize: 9.5,
              fontWeight: 500,
              letterSpacing: '0.16em',
              textTransform: 'uppercase',
              color: C.ink50,
              marginBottom: 6,
              display: 'flex',
              alignItems: 'center',
              gap: 5,
            }}>
              <LPIcon name="whatsapp" size={10} color={C.green} />
              Extrato via WhatsApp
            </div>
            <div style={{ fontSize: 12.5, fontWeight: 500, color: C.ink, marginBottom: 4 }}>
              Olá, Dona Marlene 👋
            </div>
            <div style={{ fontSize: 11, color: C.ink70, lineHeight: 1.4, marginBottom: 8 }}>
              Seu extrato do mês:<br/>
              <span style={{ color: C.ink, fontWeight: 500 }}>R$ 247,80</span> em 4 compras
            </div>
            <div style={{
              fontSize: 10,
              color: C.green,
              fontWeight: 500,
              display: 'flex',
              alignItems: 'center',
              gap: 4,
            }}>
              <LPIcon name="check" size={10} color={C.green} strokeWidth={3} />
              Visualizado às 14:32
            </div>
          </div>
        </article>
      </Container>
    </section>
  );
}

// ─── Section: Como funciona (3 steps) ─────────────────────────────────
function HowItWorks() {
  return (
    <section id="como-funciona" className="lp-section" style={{ background: C.bg, padding: '88px 0' }}>
      <Container max={1240}>
        <div style={{ maxWidth: 720, marginBottom: 56 }}>
          <Eyebrow>Como funciona</Eyebrow>
          <h2 className="lp-section-h2" style={{
            fontSize: 'clamp(32px, 4vw, 48px)',
            fontWeight: 500,
            letterSpacing: '-0.03em',
            lineHeight: 1.05,
            color: C.ink,
            margin: '14px 0 16px',
            textWrap: 'balance',
          }}>
            Em 10 minutos você faz a primeira venda.
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: C.ink70, maxWidth: 560 }}>
            Abrir conta, cadastrar produto, vender. Não tem treinamento de fim de semana, não tem aula em vídeo de 2 horas.
          </p>
        </div>

        <div className="lp-steps-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: 14,
        }}>
          {LP_DATA.steps.map((s, i) => (
            <div key={i} style={{
              background: C.bgAlt,
              borderRadius: 20,
              padding: '28px 26px 30px',
              position: 'relative',
              display: 'flex',
              flexDirection: 'column',
              gap: 14,
              minHeight: 220,
            }}>
              <div style={{
                fontSize: 40,
                fontWeight: 500,
                letterSpacing: '-0.04em',
                color: C.primary,
                lineHeight: 1,
                fontVariantNumeric: 'tabular-nums',
              }}>{s.n}</div>
              <div style={{ marginTop: 'auto' }}>
                <h3 style={{
                  fontSize: 21,
                  fontWeight: 500,
                  letterSpacing: '-0.02em',
                  color: C.ink,
                  marginBottom: 8,
                }}>{s.title}</h3>
                <p style={{ fontSize: 14.5, lineHeight: 1.55, color: C.ink70 }}>{s.copy}</p>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ─── Section: Integrações ─────────────────────────────────────────────
function Integrations() {
  return (
    <section className="lp-section" style={{ background: C.bgAlt, padding: '88px 0' }}>
      <Container max={1240}>
        <div className="lp-integrations-split" style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 56, alignItems: 'center' }}>
          <div>
            <Eyebrow>Integrações</Eyebrow>
            <h2 className="lp-section-h2" style={{
              fontSize: 'clamp(28px, 3.5vw, 42px)',
              fontWeight: 500,
              letterSpacing: '-0.03em',
              lineHeight: 1.05,
              color: C.ink,
              margin: '14px 0 16px',
              textWrap: 'balance',
            }}>
              Tudo que você já usa, conectado.
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.55, color: C.ink70, marginBottom: 24 }}>
              Pendura conversa com a maquininha, com o WhatsApp do cliente, com a SEFAZ do seu estado e com a impressora do balcão. Sem gambiarra.
            </p>
          </div>
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
            gap: 10,
          }}>
            {LP_DATA.integrations.map((i) => (
              <div key={i.name} style={{
                background: C.bg,
                borderRadius: 14,
                padding: '18px 18px',
                border: `1px solid ${C.ink06}`,
                display: 'flex',
                alignItems: 'center',
                gap: 12,
              }}>
                <div style={{
                  width: 36,
                  height: 36,
                  borderRadius: 10,
                  background: C.bgAlt,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  flexShrink: 0,
                  fontSize: 14,
                  fontWeight: 500,
                  color: C.primary,
                  letterSpacing: '-0.02em',
                }}>{i.name.slice(0, 2).toUpperCase()}</div>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 14, fontWeight: 500, color: C.ink, marginBottom: 2 }}>{i.name}</div>
                  <div style={{ fontSize: 12, color: C.ink50 }}>{i.sub}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}

// ─── Section: Comparação ──────────────────────────────────────────────
function Comparison() {
  return (
    <section className="lp-section" style={{ background: C.bg, padding: '88px 0' }}>
      <Container max={1100}>
        <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 48px' }}>
          <Eyebrow>Caderno · Excel · Pendura</Eyebrow>
          <h2 className="lp-section-h2" style={{
            fontSize: 'clamp(32px, 4vw, 44px)',
            fontWeight: 500,
            letterSpacing: '-0.03em',
            lineHeight: 1.05,
            color: C.ink,
            margin: '14px 0 16px',
            textWrap: 'balance',
          }}>
            O que você ganha trocando o caderno.
          </h2>
          <p style={{ fontSize: 16.5, lineHeight: 1.55, color: C.ink70 }}>
            Não tem nada contra caderno. Mas a sua loja merece um pouco mais.
          </p>
        </div>

        <div className="lp-comparison-desktop" style={{
          background: C.bgAlt,
          borderRadius: 22,
          overflow: 'hidden',
          border: `1px solid ${C.ink06}`,
        }}>
          {/* Header row */}
          <div style={{
            display: 'grid',
            gridTemplateColumns: '1.5fr 1fr 1fr 1.1fr',
            background: C.bgDeep,
            padding: '18px 24px',
            fontSize: 11.5,
            fontWeight: 500,
            letterSpacing: '0.16em',
            textTransform: 'uppercase',
            color: C.ink50,
          }}>
            <div></div>
            <div style={{ textAlign: 'center' }}>Caderno</div>
            <div style={{ textAlign: 'center' }}>Excel</div>
            <div style={{ textAlign: 'center', color: C.primary }}>Pendura</div>
          </div>
          {LP_DATA.comparisonRows.map((r, i) => (
            <div key={i} style={{
              display: 'grid',
              gridTemplateColumns: '1.5fr 1fr 1fr 1.1fr',
              padding: '18px 24px',
              borderTop: `1px solid ${C.ink06}`,
              alignItems: 'center',
              background: i % 2 === 0 ? 'transparent' : 'rgba(255,255,255,0.4)',
            }}>
              <div style={{ fontSize: 14.5, fontWeight: 500, color: C.ink }}>{r.feature}</div>
              <div style={{ textAlign: 'center', fontSize: 13, color: C.ink50 }}>{r.caderno}</div>
              <div style={{ textAlign: 'center', fontSize: 13, color: C.ink50 }}>{r.excel}</div>
              <div style={{
                textAlign: 'center',
                fontSize: 13.5,
                fontWeight: 500,
                color: C.primary,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                gap: 6,
              }}>
                <LPIcon name="check" size={13} color={C.primary} strokeWidth={2.5} />
                {r.pendura}
              </div>
            </div>
          ))}
        </div>

        {/* Mobile cards version */}
        <div className="lp-comparison-mobile">
          {LP_DATA.comparisonRows.map((r, i) => (
            <div key={i} style={{
              background: C.bgAlt,
              borderRadius: 16,
              padding: '18px 18px',
              border: `1px solid ${C.ink06}`,
            }}>
              <div style={{
                fontSize: 14.5,
                fontWeight: 500,
                color: C.ink,
                marginBottom: 14,
                letterSpacing: '-0.01em',
              }}>{r.feature}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12 }}>
                  <span style={{ fontSize: 11, fontWeight: 500, letterSpacing: '0.14em', textTransform: 'uppercase', color: C.ink50 }}>Caderno</span>
                  <span style={{ fontSize: 13, color: C.ink70, textAlign: 'right' }}>{r.caderno}</span>
                </div>
                <div style={{
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  gap: 12,
                  marginTop: 4,
                  padding: '10px 14px',
                  margin: '4px -4px 0',
                  background: C.bg,
                  borderRadius: 10,
                  border: `1.5px solid ${C.primary}`,
                }}>
                  <span style={{ fontSize: 11, fontWeight: 500, letterSpacing: '0.14em', textTransform: 'uppercase', color: C.primary }}>Pendura</span>
                  <span style={{
                    fontSize: 13.5,
                    fontWeight: 500,
                    color: C.primary,
                    display: 'inline-flex',
                    alignItems: 'center',
                    gap: 6,
                    textAlign: 'right',
                  }}>
                    <LPIcon name="check" size={12} color={C.primary} strokeWidth={2.5} />
                    {r.pendura}
                  </span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ─── Section: Pricing ─────────────────────────────────────────────────
function Pricing() {
  const [cycle, setCycle] = React.useState('anual');
  const p = LP_DATA.pricing;

  return (
    <section id="precos" className="lp-section" style={{ background: C.bgAlt, padding: '88px 0' }}>
      <Container max={1100}>
        <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 36px' }}>
          <Eyebrow>Preços</Eyebrow>
          <h2 className="lp-section-h2" style={{
            fontSize: 'clamp(32px, 4vw, 44px)',
            fontWeight: 500,
            letterSpacing: '-0.03em',
            lineHeight: 1.05,
            color: C.ink,
            margin: '14px 0 16px',
          }}>{p.headline}</h2>
          <p style={{ fontSize: 16.5, lineHeight: 1.55, color: C.ink70 }}>{p.sub}</p>
        </div>

        {/* Cycle toggle */}
        <div className="lp-cycle-toggle" style={{
          display: 'inline-flex',
          background: C.bg,
          padding: 4,
          borderRadius: 14,
          margin: '0 auto 40px',
          gap: 2,
          left: '50%',
          position: 'relative',
          transform: 'translateX(-50%)',
          border: `1px solid ${C.ink06}`,
        }}>
          {p.cycles.map((cy) => (
            <button
              key={cy.id}
              onClick={() => setCycle(cy.id)}
              style={{
                background: cycle === cy.id ? C.ink : 'transparent',
                color: cycle === cy.id ? C.bg : C.ink70,
                border: 0,
                borderRadius: 10,
                padding: '10px 18px',
                fontFamily: 'inherit',
                fontSize: 13.5,
                fontWeight: 500,
                cursor: 'pointer',
                transition: 'all 0.15s ease',
                display: 'inline-flex',
                alignItems: 'center',
                gap: 7,
              }}
            >
              {cy.label}
              {cy.hint && cycle !== cy.id && (
                <span style={{
                  background: C.primarySoft,
                  color: C.primary,
                  fontSize: 10,
                  fontWeight: 500,
                  letterSpacing: '0.05em',
                  padding: '2px 7px',
                  borderRadius: 99,
                }}>{cy.hint}</span>
              )}
            </button>
          ))}
        </div>

        {/* Plan cards */}
        <div className="lp-pricing-grid" style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 16,
          maxWidth: 940,
          margin: '0 auto',
        }}>
          {p.plans.map((plan) => {
            const cy = plan.cycles[cycle];
            const isFiscal = plan.id === 'fiscal';
            const cardBg = isFiscal ? C.bgDark : C.bg;
            const cardInk = isFiscal ? C.bg : C.ink;
            const cardInkMute = isFiscal ? 'rgba(255,248,242,0.6)' : C.ink50;
            const cardInkSoft = isFiscal ? 'rgba(255,248,242,0.78)' : C.ink70;
            const cardDivider = isFiscal ? 'rgba(255,248,242,0.10)' : C.ink06;

            return (
              <div key={plan.id} className="lp-plan-card" style={{
                background: cardBg,
                color: cardInk,
                borderRadius: 22,
                padding: '32px 28px 28px',
                border: isFiscal ? 'none' : `1px solid ${C.ink06}`,
                position: 'relative',
                boxShadow: isFiscal ? '0 20px 48px -16px rgba(44,24,16,0.25)' : 'none',
              }}>
                {plan.recommended && (
                  <div style={{
                    position: 'absolute',
                    top: 16,
                    right: 16,
                    background: C.primary,
                    color: C.primaryOn,
                    fontSize: 10.5,
                    fontWeight: 500,
                    letterSpacing: '0.18em',
                    textTransform: 'uppercase',
                    padding: '5px 11px',
                    borderRadius: 99,
                  }}>Recomendado</div>
                )}

                {/* Plan name with accent dot */}
                <div style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: 10,
                  marginBottom: 18,
                }}>
                  <div style={{ width: 10, height: 10, borderRadius: '50%', background: plan.accent }}></div>
                  <div style={{ fontSize: 14, fontWeight: 500, letterSpacing: '-0.01em', color: cardInk }}>
                    Plano {plan.name}
                  </div>
                  <div style={{ fontSize: 12, color: cardInkMute }}>· {plan.sub}</div>
                </div>

                <div style={{ fontSize: 14, color: cardInkSoft, marginBottom: 22, lineHeight: 1.4 }}>
                  {plan.tagline}
                </div>

                {/* Price */}
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginBottom: 6 }}>
                  <span style={{ fontSize: 20, color: cardInkMute, fontWeight: 500 }}>R$</span>
                  <span className="lp-plan-price" style={{
                    fontSize: 54,
                    fontWeight: 500,
                    letterSpacing: '-0.03em',
                    lineHeight: 1,
                    fontVariantNumeric: 'tabular-nums',
                    color: cardInk,
                  }}>{cy.price.split(',')[0]}</span>
                  <span className="lp-plan-price-cents" style={{
                    fontSize: 24,
                    color: cardInkMute,
                    fontWeight: 500,
                    fontVariantNumeric: 'tabular-nums',
                  }}>,{cy.price.split(',')[1]}</span>
                  <span style={{ fontSize: 14, color: cardInkMute, marginLeft: 6 }}>/ mês</span>
                </div>
                <div style={{ fontSize: 12.5, color: cardInkMute, marginBottom: 6 }}>
                  {cy.billedNote}
                </div>
                <div style={{
                  fontSize: 12,
                  fontWeight: 500,
                  color: cy.savings ? (isFiscal ? C.primary : C.green) : 'transparent',
                  marginBottom: 24,
                  minHeight: 18,
                }}>
                  {cy.savings || '·'}
                </div>

                <PrimaryButton large style={{
                  width: '100%',
                  justifyContent: 'center',
                  marginBottom: 24,
                  background: isFiscal ? C.primary : C.ink,
                  color: isFiscal ? C.primaryOn : C.bg,
                  boxShadow: isFiscal
                    ? '0 8px 18px -6px rgba(216,90,48,0.45)'
                    : '0 8px 18px -6px rgba(44,24,16,0.25)',
                }}>
                  {plan.cta} <LPIcon name="arrow-right" size={16} strokeWidth={2.2} color={isFiscal ? C.primaryOn : C.bg} />
                </PrimaryButton>

                <div style={{ height: 1, background: cardDivider, margin: '4px -4px 18px' }}></div>

                <div style={{
                  fontSize: 11,
                  fontWeight: 500,
                  letterSpacing: '0.18em',
                  textTransform: 'uppercase',
                  color: cardInkMute,
                  marginBottom: 14,
                }}>O que tem</div>

                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {plan.features.map((feat, j) => (
                    <li key={j} style={{
                      display: 'flex',
                      gap: 10,
                      alignItems: 'flex-start',
                      fontSize: 13.5,
                      lineHeight: 1.45,
                      color: cardInkSoft,
                    }}>
                      <span style={{ marginTop: 2, flexShrink: 0, color: plan.accent }}>
                        <LPIcon name="check" size={13} color={plan.accent} strokeWidth={2.5} />
                      </span>
                      {feat}
                    </li>
                  ))}
                </ul>
              </div>
            );
          })}
        </div>

        <div style={{
          textAlign: 'center',
          marginTop: 28,
          fontSize: 14,
          color: C.ink50,
          maxWidth: 520,
          margin: '28px auto 0',
        }}>{p.note}</div>
      </Container>
    </section>
  );
}

// ─── Section: Testimonials ────────────────────────────────────────────
function Testimonials() {
  return (
    <section className="lp-section" style={{ background: C.bg, padding: '88px 0' }}>
      <Container max={1240}>
        <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 48px' }}>
          <Eyebrow>Depoimentos</Eyebrow>
          <h2 className="lp-section-h2" style={{
            fontSize: 'clamp(32px, 4vw, 44px)',
            fontWeight: 500,
            letterSpacing: '-0.03em',
            lineHeight: 1.05,
            color: C.ink,
            margin: '14px 0 16px',
          }}>
            Quem já trocou o caderno pelo Pendura.
          </h2>
        </div>

        <div className="lp-testi-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: 16,
        }}>
          {LP_DATA.testimonials.map((t, i) => (
            <figure key={i} style={{
              background: C.bgAlt,
              borderRadius: 20,
              padding: '26px 26px 24px',
              margin: 0,
              display: 'flex',
              flexDirection: 'column',
              gap: 20,
            }}>
              <blockquote style={{
                margin: 0,
                fontSize: 16,
                lineHeight: 1.5,
                color: C.ink,
                letterSpacing: '-0.005em',
              }}>
                <span style={{ color: C.primary, fontSize: 24, lineHeight: 0, verticalAlign: '-8px', marginRight: 4 }}>“</span>
                {t.quote}
              </blockquote>
              <figcaption style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 'auto' }}>
                <div style={{
                  width: 38,
                  height: 38,
                  borderRadius: '50%',
                  background: C.primary,
                  color: C.primaryOn,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  fontSize: 14,
                  fontWeight: 500,
                  flexShrink: 0,
                }}>{t.initials}</div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 500, color: C.ink }}>{t.name}</div>
                  <div style={{ fontSize: 12, color: C.ink50, marginTop: 1 }}>{t.role}</div>
                </div>
              </figcaption>
            </figure>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ─── Section: FAQ ─────────────────────────────────────────────────────
function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" className="lp-section" style={{ background: C.bgAlt, padding: '88px 0' }}>
      <Container max={880}>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <Eyebrow>Perguntas frequentes</Eyebrow>
          <h2 className="lp-section-h2" style={{
            fontSize: 'clamp(30px, 4vw, 42px)',
            fontWeight: 500,
            letterSpacing: '-0.03em',
            lineHeight: 1.05,
            color: C.ink,
            margin: '14px 0 0',
          }}>
            Dúvidas que a gente já respondeu.
          </h2>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {LP_DATA.faq.map((item, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{
                background: C.bg,
                borderRadius: 14,
                border: `1px solid ${C.ink06}`,
                overflow: 'hidden',
              }}>
                <button
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  style={{
                    width: '100%',
                    background: 'none',
                    border: 0,
                    padding: '20px 22px',
                    fontFamily: 'inherit',
                    fontSize: 16,
                    fontWeight: 500,
                    color: C.ink,
                    textAlign: 'left',
                    cursor: 'pointer',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    gap: 16,
                    letterSpacing: '-0.01em',
                  }}
                >
                  <span>{item.q}</span>
                  <span style={{
                    width: 28,
                    height: 28,
                    borderRadius: 8,
                    background: isOpen ? C.primary : C.bgAlt,
                    color: isOpen ? C.primaryOn : C.ink50,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    flexShrink: 0,
                    transition: 'all 0.15s ease',
                  }}>
                    <LPIcon name={isOpen ? 'minus' : 'plus-small'} size={14} color={isOpen ? C.primaryOn : C.ink50} strokeWidth={2.2} />
                  </span>
                </button>
                {isOpen && (
                  <div style={{
                    padding: '0 22px 22px',
                    fontSize: 15,
                    lineHeight: 1.55,
                    color: C.ink70,
                    maxWidth: 700,
                  }}>{item.a}</div>
                )}
              </div>
            );
          })}
        </div>
      </Container>
    </section>
  );
}

// ─── Section: Final CTA ───────────────────────────────────────────────
function FinalCTA() {
  return (
    <section className="lp-section lp-final-cta" style={{ background: C.bgDark, padding: '100px 0 110px', position: 'relative', overflow: 'hidden' }}>
      {/* faint pendura mark */}
      <div style={{
        position: 'absolute',
        left: '50%',
        bottom: -80,
        transform: 'translateX(-50%)',
        opacity: 0.04,
        pointerEvents: 'none',
      }}>
        <LPIcon name="pendura" size={400} color={C.primary} />
      </div>
      <Container max={1100}>
        <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto', position: 'relative' }}>
          <Eyebrow color={C.primary}>Você chegou até aqui</Eyebrow>
          <h2 className="lp-final-h2" style={{
            fontSize: 'clamp(36px, 5vw, 56px)',
            fontWeight: 500,
            letterSpacing: '-0.035em',
            lineHeight: 1.02,
            color: C.bg,
            margin: '20px 0 22px',
            textWrap: 'balance',
          }}>
            Bora deixar o caderno pra trás.
          </h2>
          <p style={{
            fontSize: 18,
            lineHeight: 1.55,
            color: 'rgba(255,248,242,0.7)',
            marginBottom: 36,
            maxWidth: 540,
            margin: '0 auto 36px',
          }}>
            14 dias grátis, sem cartão. Em 10 minutos você tá vendendo no Pendura — e cobrando os atrasados pelo WhatsApp.
          </p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <PrimaryButton large>
              Teste 14 dias grátis <LPIcon name="arrow-right" size={16} strokeWidth={2.2} color={C.primaryOn} />
            </PrimaryButton>
            <button style={{
              background: 'rgba(255,248,242,0.10)',
              color: C.bg,
              border: `1px solid rgba(255,248,242,0.18)`,
              borderRadius: 14,
              padding: '16px 24px',
              fontFamily: 'inherit',
              fontSize: 16,
              fontWeight: 500,
              cursor: 'pointer',
              display: 'inline-flex',
              alignItems: 'center',
              gap: 8,
            }}>
              <LPIcon name="whatsapp" size={16} color={C.bg} />
              Falar no WhatsApp
            </button>
          </div>
        </div>
      </Container>
    </section>
  );
}

// ─── Section: Footer ──────────────────────────────────────────────────
function Footer() {
  return (
    <footer style={{ background: C.bg, padding: '64px 0 32px', borderTop: `1px solid ${C.ink06}` }}>
      <Container max={1240}>
        <div className="lp-footer-grid" style={{
          display: 'grid',
          gridTemplateColumns: '1.5fr 1fr 1fr 1fr',
          gap: 40,
          marginBottom: 48,
        }}>
          <div className="lp-footer-brand">
            <Wordmark />
            <p style={{
              fontSize: 14,
              lineHeight: 1.55,
              color: C.ink50,
              marginTop: 14,
              maxWidth: 280,
            }}>
              Sistema de gestão pro pequeno comércio. Feito em SP, pra todo o Brasil.
            </p>
            <div style={{ marginTop: 22, display: 'flex', gap: 8 }}>
              {[
                { name: 'instagram', label: 'Instagram' },
                { name: 'facebook',  label: 'Facebook'  },
                { name: 'youtube',   label: 'YouTube'   },
                { name: 'tiktok',    label: 'TikTok'    },
              ].map((s) => (
                <a key={s.name} href="#" title={s.label} style={{
                  width: 36,
                  height: 36,
                  borderRadius: 10,
                  background: C.bgAlt,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  color: C.ink50,
                  textDecoration: 'none',
                  transition: 'all 0.15s ease',
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.background = C.primary;
                  e.currentTarget.style.color = C.primaryOn;
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.background = C.bgAlt;
                  e.currentTarget.style.color = C.ink50;
                }}
                >
                  <LPIcon name={s.name} size={16} color="currentColor" />
                </a>
              ))}
            </div>
          </div>
          {[
            { title: 'Produto', links: ['Recursos', 'Preços', 'Integrações', 'Aplicativo', 'NFC-e'] },
            { title: 'Empresa', links: ['Sobre', 'Blog', 'Contato', 'Carreiras'] },
            { title: 'Suporte', links: ['Central de ajuda', 'WhatsApp', 'Status', 'Termos', 'Privacidade'] },
          ].map((col, i) => (
            <div key={i}>
              <div style={{
                fontSize: 11,
                fontWeight: 500,
                letterSpacing: '0.2em',
                textTransform: 'uppercase',
                color: C.ink35,
                marginBottom: 16,
              }}>{col.title}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
                {col.links.map((l) => (
                  <a key={l} href="#" style={{
                    fontSize: 14,
                    color: C.ink70,
                    textDecoration: 'none',
                  }}>{l}</a>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div className="lp-footer-bottom" style={{
          paddingTop: 24,
          borderTop: `1px solid ${C.ink06}`,
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          fontSize: 12,
          color: C.ink50,
          flexWrap: 'wrap',
          gap: 12,
        }}>
          <div>© 2026 Pendura · Sistema de gestão Ltda · CNPJ 00.000.000/0000-00</div>
          <div style={{ display: 'flex', gap: 18 }}>
            <a href="/termos" style={{ color: C.ink50, textDecoration: 'none' }}>Termos</a>
            <a href="/privacidade" style={{ color: C.ink50, textDecoration: 'none' }}>Privacidade</a>
            <a href="#" style={{ color: C.ink50, textDecoration: 'none' }}>Cookies</a>
          </div>
        </div>
      </Container>
    </footer>
  );
}

// ─── App ──────────────────────────────────────────────────────────────
function App() {
  return (
    <div style={{
      fontFamily: `'Inter', system-ui, sans-serif`,
      color: C.ink,
      background: C.bg,
      WebkitFontSmoothing: 'antialiased',
    }}>
      <Nav />
      <Hero />
      <Segments />
      <Pains />
      <Features />
      <Benefits />
      <HowItWorks />
      <Integrations />
      <Comparison />
      <Pricing />
      <Testimonials />
      <FAQ />
      <FinalCTA />
      <Footer />
    </div>
  );
}

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