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

/* ============ APP ============ */
const ACCENT_PALETTE = [
{ name: 'Azul Marinho', accent: '#2E5BFF', soft: '#E8F0FF', ink: '#0A1F44' },
{ name: 'Royal', accent: '#1E40AF', soft: '#DBE4FF', ink: '#0B1736' },
{ name: 'Azul Céu', accent: '#0EA5E9', soft: '#E0F2FE', ink: '#082F49' },
{ name: 'Teal', accent: '#0D9488', soft: '#CCFBF1', ink: '#0B3B38' },
{ name: 'Esmeralda', accent: '#059669', soft: '#D1FAE5', ink: '#0A2F1F' },
{ name: 'Grafite', accent: '#1F2937', soft: '#E5E7EB', ink: '#111827' },
{ name: 'Vinho', accent: '#9F1239', soft: '#FFE4E6', ink: '#3F0A1A' },
{ name: 'Âmbar', accent: '#C2410C', soft: '#FFEDD5', ink: '#2C1106' }];


function useTweaks() {
  const [theme, setTheme] = useState(() => {
    try {return JSON.parse(localStorage.getItem('ig_tweaks') || '{}').theme || 'light';} catch {return 'light';}
  });
  const [palette, setPalette] = useState(() => {
    try {
      const saved = JSON.parse(localStorage.getItem('ig_tweaks') || '{}');
      if (saved.accent) {
        const p = ACCENT_PALETTE.find((x) => x.accent === saved.accent);
        return p || ACCENT_PALETTE[0];
      }
    } catch {}
    return ACCENT_PALETTE[0];
  });

  useEffect(() => {
    const root = document.documentElement;
    if (theme === 'dark') root.setAttribute('data-theme', 'dark');else root.removeAttribute('data-theme');
    root.style.setProperty('--accent', palette.accent);
    root.style.setProperty('--accent-soft', theme === 'dark' ? '#1A2340' : palette.soft);
    if (theme === 'light') root.style.setProperty('--ink', palette.ink);else
    root.style.removeProperty('--ink');
    localStorage.setItem('ig_tweaks', JSON.stringify({ theme, accent: palette.accent }));
  }, [theme, palette]);

  return { theme, setTheme, palette, setPalette };
}

function TweaksPanel({ theme, setTheme, palette, setPalette }) {
  const [open, setOpen] = useState(false);
  return (
    <div style={{ position: 'fixed', bottom: 20, right: 20, zIndex: 100 }}>
      {open &&
      <div style={{
        position: 'absolute', bottom: 56, right: 0,
        background: 'var(--white)', border: '1px solid var(--line)', borderRadius: 16,
        padding: 22, width: 300,
        boxShadow: '0 20px 50px -20px rgba(0,0,0,0.25)'
      }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
            <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink)' }}>Personalizar</div>
            <button onClick={() => setOpen(false)} style={{ fontSize: 18, color: 'var(--muted)', lineHeight: 1, padding: 2 }}>×</button>
          </div>

          {/* Theme */}
          <div className="eyebrow" style={{ fontSize: 10, marginBottom: 10 }}>Tema</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, marginBottom: 20, padding: 4, background: 'var(--bg-2)', borderRadius: 10 }}>
            {['light', 'dark'].map((t) =>
          <button key={t} onClick={() => setTheme(t)} style={{
            padding: '9px 10px', borderRadius: 7, fontSize: 12.5, fontWeight: 500,
            background: theme === t ? 'var(--white)' : 'transparent',
            color: theme === t ? 'var(--ink)' : 'var(--muted)',
            boxShadow: theme === t ? '0 1px 2px rgba(0,0,0,0.06)' : 'none',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6
          }}>
                {t === 'light' ? <SunIcon /> : <MoonIcon />}
                {t === 'light' ? 'Claro' : 'Escuro'}
              </button>
          )}
          </div>

          {/* Palette */}
          <div className="eyebrow" style={{ fontSize: 10, marginBottom: 10 }}>Cor principal</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 8 }}>
            {ACCENT_PALETTE.map((p) =>
          <button key={p.name} onClick={() => setPalette(p)} title={p.name} style={{
            aspectRatio: '1', borderRadius: 10, background: p.accent, position: 'relative',
            border: '2px solid ' + (palette.accent === p.accent ? 'var(--ink)' : 'transparent'),
            outline: '1px solid var(--line)',
            transition: 'transform .15s'
          }}>
                {palette.accent === p.accent &&
            <span style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', color: '#fff', fontSize: 14, fontWeight: 700 }}>✓</span>
            }
              </button>
          )}
          </div>
          <div style={{ marginTop: 12, fontSize: 11, color: 'var(--muted)' }}>{palette.name}</div>
        </div>
      }
      <button onClick={() => setOpen((o) => !o)} style={{
        width: 48, height: 48, borderRadius: 99, background: 'var(--ink)', color: 'var(--bg)',
        display: 'grid', placeItems: 'center',
        boxShadow: '0 10px 30px -10px rgba(0,0,0,0.3)'
      }}>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.6" /><path d="M12 3a9 9 0 0 0 0 18" fill="currentColor" /></svg>
      </button>
    </div>);

}

const SunIcon = () => <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" /></svg>;
const MoonIcon = () => <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z" /></svg>;

/* ============ UTIL HOOKS ============ */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {if (e.isIntersecting) {e.target.classList.add('in');io.unobserve(e.target);}});
    }, { threshold: 0.12 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  });
}

function useScrollY() {
  const [y, setY] = useState(0);
  useEffect(() => {
    const onScroll = () => setY(window.scrollY);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return y;
}

/* ============ ICONS (simple geometric) ============ */
const Dot = ({ c = 'var(--ink)' }) => <span style={{ display: 'inline-block', width: 6, height: 6, background: c, borderRadius: 99 }} />;
const ArrowUR = ({ s = 14 }) =>
<svg width={s} height={s} viewBox="0 0 16 16" fill="none" style={{ display: 'inline-block', verticalAlign: 'middle' }}>
    <path d="M4.5 11.5 11.5 4.5M6 4.5h5.5V10" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
  </svg>;

const ArrowR = ({ s = 14 }) =>
<svg width={s} height={s} viewBox="0 0 16 16" fill="none" style={{ display: 'inline-block', verticalAlign: 'middle' }}>
    <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
  </svg>;

const Check = ({ s = 14 }) =>
<svg width={s} height={s} viewBox="0 0 16 16" fill="none"><path d="M3 8.5 6.5 12 13 4.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg>;

const Minus = ({ s = 14 }) =>
<svg width={s} height={s} viewBox="0 0 16 16"><rect x="3" y="7.3" width="10" height="1.4" rx=".7" fill="currentColor" /></svg>;

const Plus = ({ s = 14 }) =>
<svg width={s} height={s} viewBox="0 0 16 16"><rect x="3" y="7.3" width="10" height="1.4" rx=".7" fill="currentColor" /><rect x="7.3" y="3" width="1.4" height="10" rx=".7" fill="currentColor" /></svg>;


/* ============ NAV ============ */
function Nav() {
  const y = useScrollY();
  const scrolled = y > 40;
  return (
    <div style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      padding: '14px 0', transition: 'all .3s ease',
      background: scrolled ? 'color-mix(in srgb, var(--bg) 85%, transparent)' : 'transparent',
      backdropFilter: scrolled ? 'blur(14px) saturate(1.1)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(14px) saturate(1.1)' : 'none',
      borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent'
    }}>
      <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <a href="#top" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <Monogram />
          <div style={{ lineHeight: 1 }}>
            <div style={{ fontSize: 15, fontWeight: 600, letterSpacing: '-0.01em' }}>Igor Gabriel</div>
            <div className="eyebrow" style={{ fontSize: 9, marginTop: 3 }}>Contabilidade Estratégica</div>
          </div>
        </a>
        <nav style={{ display: 'flex', alignItems: 'center', gap: 28 }} className="nav-links">
          <a href="#dores" className="nav-link">Diagnóstico</a>
          <a href="#impostos" className="nav-link">Tributos</a>
          <a href="#indicadores" className="nav-link">Solução</a>
          <a href="#contato" className="nav-link">Contato</a>
          <a href={WHATS_URL} target="_blank" rel="noopener" className="cta-pill" style={{
            background: 'var(--ink)', color: 'var(--bg)', padding: '10px 18px', borderRadius: 99,
            fontSize: 13, fontWeight: 500, display: 'inline-flex', alignItems: 'center', gap: 8
          }}>
            Diagnóstico gratuito <ArrowUR s={13} />
          </a>
        </nav>
      </div>
      <style>{`
        .nav-link{font-size:13.5px;color:var(--ink-soft);font-weight:450;transition:color .2s}
        .nav-link:hover{color:var(--ink)}
        @media (max-width:820px){ .nav-links a:not(.cta-pill){display:none} }
        @media (max-width:480px){ .hero-meta-sep,.hero-meta-crc{display:none} }
      `}</style>
    </div>);

}

function Monogram() {
  return (
    <div style={{
      width: 36, height: 36, borderRadius: 10, background: 'var(--ink)',
      overflow: 'hidden', flexShrink: 0,
      boxShadow: '0 2px 6px -2px rgba(10,31,68,0.2)'
    }}>
      <img src="assets/igor-gabriel.jpeg" alt="Igor Gabriel" style={{
        width: '100%', height: '100%', objectFit: 'cover', objectPosition: '50% 25%'
      }} />
    </div>);

}

/* ============ HERO AMBIENT, subtle animated backdrop ============ */
function HeroAmbient() {
  return (
    <div className="hero-ambient" aria-hidden="true" style={{
      position: 'absolute', inset: 0, zIndex: 1, pointerEvents: 'none', overflow: 'hidden'
    }}>
      {/* soft radial glow */}
      <div style={{
        position: 'absolute', top: '-10%', left: '50%', transform: 'translateX(-50%)',
        width: '1100px', height: '1100px', borderRadius: '50%',
        background: 'radial-gradient(circle, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 60%)',
        filter: 'blur(20px)'
      }} />

      {/* grid */}
      <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.35 }} preserveAspectRatio="none">
        <defs>
          <pattern id="heroGrid" width="64" height="64" patternUnits="userSpaceOnUse">
            <path d="M64 0H0V64" fill="none" stroke="var(--line)" strokeWidth="1" />
          </pattern>
          <linearGradient id="gridMask" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor="#000" stopOpacity="0" />
            <stop offset="40%" stopColor="#000" stopOpacity="1" />
            <stop offset="100%" stopColor="#000" stopOpacity="0" />
          </linearGradient>
          <mask id="gridFade">
            <rect width="100%" height="100%" fill="url(#gridMask)" />
          </mask>
        </defs>
        <rect width="100%" height="100%" fill="url(#heroGrid)" mask="url(#gridFade)" />
      </svg>

      {/* growth line, left */}
      <svg viewBox="0 0 400 240" preserveAspectRatio="none" className="hero-line hero-line-left" style={{
        position: 'absolute', left: '-2%', top: '18%', width: '32%', height: '200px', opacity: .18
      }}>
        <defs>
          <linearGradient id="lineFillL" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.18" />
            <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
          </linearGradient>
        </defs>
        <path d="M0,200 L40,195 L80,188 L120,170 L160,172 L200,150 L240,140 L280,120 L320,100 L360,70 L400,40 L400,240 L0,240 Z"
        fill="url(#lineFillL)" />
        <path className="ha-draw" d="M0,200 L40,195 L80,188 L120,170 L160,172 L200,150 L240,140 L280,120 L320,100 L360,70 L400,40"
        fill="none" stroke="var(--accent)" strokeWidth="1.6" vectorEffect="non-scaling-stroke" strokeLinecap="round" />
      </svg>

      {/* growth line, right */}
      <svg viewBox="0 0 400 240" preserveAspectRatio="none" className="hero-line hero-line-right" style={{
        position: 'absolute', right: '-2%', bottom: '14%', width: '34%', height: '220px', opacity: .15, transform: 'scaleX(-1)'
      }}>
        <defs>
          <linearGradient id="lineFillR" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor="var(--ink)" stopOpacity="0.14" />
            <stop offset="100%" stopColor="var(--ink)" stopOpacity="0" />
          </linearGradient>
        </defs>
        <path d="M0,210 L40,200 L80,205 L120,180 L160,185 L200,160 L240,150 L280,130 L320,115 L360,90 L400,60 L400,240 L0,240 Z"
        fill="url(#lineFillR)" />
        <path className="ha-draw ha-draw-2" d="M0,210 L40,200 L80,205 L120,180 L160,185 L200,160 L240,150 L280,130 L320,115 L360,90 L400,60"
        fill="none" stroke="var(--ink-soft)" strokeWidth="1.3" vectorEffect="non-scaling-stroke" strokeLinecap="round" />
      </svg>

      {/* floating dots */}
      <div className="ha-dot ha-dot-1" />
      <div className="ha-dot ha-dot-2" />
      <div className="ha-dot ha-dot-3" />
      <div className="ha-dot ha-dot-4" />

      <style>{`
        .ha-draw{
          stroke-dasharray:1400;
          stroke-dashoffset:1400;
          animation: haDraw 6s cubic-bezier(.4,0,.2,1) .3s forwards;
        }
        .ha-draw-2{ animation-duration:7.5s; animation-delay:.8s }
        @keyframes haDraw{ to{ stroke-dashoffset:0 } }

        .ha-dot{
          position:absolute; width:8px; height:8px; border-radius:99px;
          background:var(--accent);
          box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent);
          opacity:0;
          animation: haPulse 5s ease-in-out infinite;
        }
        .ha-dot-1{ top:22%; left:28%; animation-delay:1.2s }
        .ha-dot-2{ top:58%; left:72%; width:6px; height:6px; background:var(--ink); box-shadow:0 0 0 4px color-mix(in srgb, var(--ink) 10%, transparent); animation-delay:2.8s }
        .ha-dot-3{ top:38%; right:18%; width:5px; height:5px; animation-delay:3.6s }
        .ha-dot-4{ bottom:28%; left:18%; width:6px; height:6px; animation-delay:4.4s }
        @keyframes haPulse{
          0%,100%{ opacity:0; transform:scale(.6) }
          20%,70%{ opacity:.9; transform:scale(1) }
        }

        @media (max-width:820px){
          .hero-ambient{ display:none }
        }
      `}</style>
    </div>);

}

/* ============ HERO ============ */
function Hero() {
  return (
    <section id="top" style={{ position: 'relative', paddingTop: 120, paddingBottom: 100, display: 'flex', alignItems: 'center', overflow: 'hidden' }}>
      <HeroAmbient />
      <div className="container" style={{ position: 'relative', width: '100%', zIndex: 2 }}>
        {/* Top meta row */}
        <div className="reveal hero-meta" style={{ display: 'flex', gap: 16, alignItems: 'center', marginBottom: 28, flexWrap: 'wrap', justifyContent: 'center' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ width: 8, height: 8, borderRadius: 99, background: 'var(--good)', boxShadow: '0 0 0 4px color-mix(in srgb, var(--good) 20%, transparent)', animation: 'pulse 2s infinite' }} />
            <span style={{ fontSize: 12, color: 'var(--ink-soft)' }}>Atendendo empresários em todo o Brasil</span>
          </div>
          <div style={{ width: 1, height: 14, background: 'var(--line-2)' }} className="hero-meta-sep" />
          <div className="eyebrow hero-meta-crc">CRC ativo • CFC certificado</div>
        </div>

        <h1 className="reveal serif hero-title" style={{
          fontSize: 'clamp(32px, 5vw, 72px)',
          lineHeight: 1.05, letterSpacing: '-0.025em',
          color: 'var(--ink)', marginBottom: 36,
          textWrap: 'balance', textAlign: 'center',
          maxWidth: 1100, marginLeft: 'auto', marginRight: 'auto'
        }}>
          Você sabe exatamente quanto <span className="display italic" style={{ color: 'var(--accent)', fontWeight: 400 }}>sobra</span> da sua empresa no fim do mês <span style={{ color: 'var(--muted)' }}>, ou apenas acha que sabe?</span>
        </h1>

        <p className="reveal hero-lede" style={{
          fontSize: 'clamp(15px,1.1vw,17px)', lineHeight: 1.6,
          color: 'var(--ink-soft)', maxWidth: 680, margin: '0 auto 44px',
          textWrap: 'pretty', textAlign: 'center'
        }}>
          Controle financeiro, indicadores em tempo real e visibilidade total sobre
          impostos, encargos e custos bancários. Tudo em um só lugar, para você
          decidir com <em className="display" style={{ fontSize: '1.12em', fontWeight: 400 }}>dados</em>, não com intuição.
        </p>

        <div className="reveal hero-ctas" style={{ display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap', justifyContent: 'center', marginBottom: 72 }}>
          <a href={WHATS_URL} target="_blank" rel="noopener" className="btn-primary">
            Quero controle do meu financeiro <ArrowR s={15} />
          </a>
          <a href="#dores" className="btn-ghost">
            Começar pelo diagnóstico
          </a>
        </div>

        {/* Hero dashboard visual */}
        <div className="reveal" style={{ maxWidth: 1100, margin: '0 auto 72px', position: 'relative' }}>
          <HeroDashboard />
        </div>

        {/* Trust strip */}
        <div className="reveal" style={{ paddingTop: 40, borderTop: '1px solid var(--line)', display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 32, maxWidth: 900, margin: '0 auto' }}>
          <TrustStat n="1.200+" l="empresas atendidas" />
          <TrustStat n="+30%" l="em margem líquida gerada" />
          <TrustStat n="5 anos" l="de atuação estratégica" />
        </div>
      </div>

      <style>{`
        @keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(31,122,85,.3)} 50%{box-shadow:0 0 0 8px rgba(31,122,85,0)} }
        @media (max-width:640px){
          .hero-meta{ justify-content:flex-start !important; }
          .hero-title{ text-align:left !important; font-size:37px !important; }
          .hero-lede{ text-align:left !important; margin-left:0 !important; font-size:16px !important; }
          .hero-ctas{ justify-content:flex-start !important; }
          .hero-ctas .btn-primary, .hero-ctas .btn-ghost{ flex:1 1 100%; justify-content:center; }
        }
        .btn-primary{
          background:var(--ink); color:var(--bg); padding:16px 24px; border-radius:99;
          font-size:14.5px; font-weight:500; display:inline-flex; align-items:center; gap:10px;
          transition:transform .2s, opacity .2s;
        }
        .btn-primary:hover{transform:translateY(-1px); opacity:.92}
        .btn-ghost{
          padding:16px 20px; border-radius:99; font-size:14.5px; color:var(--ink);
          font-weight:450; border:1px solid var(--line-2); background:transparent;
          display:inline-flex; align-items:center; gap:8px; transition:background .2s;
        }
        .btn-ghost:hover{background:var(--bg-2)}
      `}</style>
    </section>);

}

function HeroDashboard() {
  return (
    <div style={{
      background: 'var(--white)', border: '1px solid var(--line)', borderRadius: 20,
      boxShadow: '0 40px 80px -40px rgba(10,31,68,0.25), 0 2px 6px -2px rgba(10,31,68,0.08)',
      overflow: 'hidden'
    }}>
      {/* chrome */}
      <div style={{ padding: '12px 18px', borderBottom: '1px solid var(--line)', background: 'var(--bg-2)', display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ display: 'flex', gap: 6 }}>
          <span style={{ width: 10, height: 10, borderRadius: 99, background: '#E57263' }} />
          <span style={{ width: 10, height: 10, borderRadius: 99, background: '#E8B94B' }} />
          <span style={{ width: 10, height: 10, borderRadius: 99, background: '#87BF70' }} />
        </div>
        <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', marginLeft: 8 }}>painel.igorgabriel.com.br · dashboard</div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr', gap: 1, background: 'var(--line)' }} className="hd-grid">
        {/* Main KPI */}
        <div style={{ background: 'var(--white)', padding: 28 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
            <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.05em' }}>MARGEM LÍQUIDA · 12M</div>
            <div style={{ fontSize: 11, color: 'var(--good)', fontWeight: 600, background: 'var(--good-soft)', padding: '3px 8px', borderRadius: 99 }} className="mono">▲ +8.4pp</div>
          </div>
          <div className="display" style={{ fontSize: 'clamp(48px,5.5vw,68px)', lineHeight: 1, letterSpacing: '-0.03em', color: 'var(--ink)', marginBottom: 14 }}>24,8%</div>
          <div style={{ height: 90, position: 'relative' }}>
            <svg viewBox="0 0 200 60" preserveAspectRatio="none" style={{ width: '100%', height: '100%' }}>
              <defs>
                <linearGradient id="heroFill" x1="0" x2="0" y1="0" y2="1">
                  <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.22" />
                  <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
                </linearGradient>
              </defs>
              <path d="M0,50 L15,48 L30,45 L45,46 L60,40 L75,38 L90,35 L105,30 L120,28 L135,22 L150,20 L165,16 L180,12 L200,8 L200,60 L0,60 Z" fill="url(#heroFill)" />
              <path d="M0,50 L15,48 L30,45 L45,46 L60,40 L75,38 L90,35 L105,30 L120,28 L135,22 L150,20 L165,16 L180,12 L200,8" fill="none" stroke="var(--accent)" strokeWidth="1.5" vectorEffect="non-scaling-stroke" />
              <circle cx="200" cy="8" r="3" fill="var(--accent)" />
            </svg>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10.5, color: 'var(--muted)', marginTop: 8 }} className="mono">
            <span>JAN</span><span>MAR</span><span>MAI</span><span>JUL</span><span>SET</span><span>NOV</span>
          </div>
        </div>

        {/* Column 2, stacked KPIs */}
        <div style={{ background: 'var(--white)', display: 'flex', flexDirection: 'column' }}>
          <div style={{ padding: 22, borderBottom: '1px solid var(--line)' }}>
            <div className="mono" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.05em', marginBottom: 8 }}>CARGA TRIBUTÁRIA</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 10 }}>
              <div className="display" style={{ fontSize: 34, lineHeight: 1, letterSpacing: '-0.02em' }}>32,4%</div>
              <div style={{ fontSize: 11, color: 'var(--good)' }} className="mono">▼ −8,2%</div>
            </div>
            <div style={{ height: 5, background: 'var(--bg-2)', borderRadius: 99, overflow: 'hidden' }}>
              <div style={{ width: '68%', height: '100%', background: 'var(--ink)' }} />
            </div>
          </div>
          <div style={{ padding: 22, borderBottom: '1px solid var(--line)', flex: 1 }}>
            <div className="mono" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.05em', marginBottom: 8 }}>CET BANCÁRIO</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
              <div className="display" style={{ fontSize: 34, lineHeight: 1, letterSpacing: '-0.02em' }}>47,8%</div>
              <div style={{ fontSize: 11, color: 'var(--good)' }} className="mono">▼ −14,1%</div>
            </div>
          </div>
          <div style={{ padding: 22, flex: 1 }}>
            <div className="mono" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.05em', marginBottom: 8 }}>PONTO DE EQUILÍBRIO</div>
            <div className="display" style={{ fontSize: 28, lineHeight: 1, letterSpacing: '-0.02em' }}>R$ 148k</div>
            <div style={{ fontSize: 11, color: 'var(--muted)', marginTop: 4 }}>break-even mensal</div>
          </div>
        </div>

        {/* Column 3, bars + cashflow */}
        <div style={{ background: 'var(--white)', padding: 22, display: 'flex', flexDirection: 'column', gap: 18 }}>
          <div>
            <div className="mono" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.05em', marginBottom: 12 }}>FLUXO DE CAIXA · PRÓX. 90D</div>
            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 5, height: 90 }}>
              {[40, 55, 35, 70, 60, 80, 65, 88, 72, 95, 82, 100].map((h, i) =>
              <div key={i} style={{ flex: 1, height: `${h}%`, background: i === 11 ? 'var(--accent)' : 'var(--accent-soft)', borderRadius: '3px 3px 0 0', transition: 'all .3s' }} />
              )}
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: 'var(--muted)', marginTop: 6 }} className="mono">
              <span>30d</span><span>60d</span><span>90d</span>
            </div>
          </div>
          <div style={{ paddingTop: 14, borderTop: '1px solid var(--line)' }}>
            <div className="mono" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.05em', marginBottom: 6 }}>SALDO PROJETADO</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
              <div className="display" style={{ fontSize: 28, lineHeight: 1, letterSpacing: '-0.02em' }}>R$ 412k</div>
              <div style={{ fontSize: 11, color: 'var(--good)' }} className="mono">+R$ 86k</div>
            </div>
          </div>
        </div>
      </div>
      <style>{`@media (max-width:780px){ .hd-grid{grid-template-columns:1fr !important} }`}</style>
    </div>);

}

function TrustStat({ n, l }) {
  return (
    <div style={{ textAlign: 'center' }}>
      <div className="display" style={{ fontSize: 'clamp(24px,2.4vw,32px)', lineHeight: 1, color: 'var(--ink)', letterSpacing: '-0.02em', marginBottom: 8 }}>{n}</div>
      <div style={{ fontSize: 12.5, color: 'var(--muted)', lineHeight: 1.4, textWrap: 'balance' }}>{l}</div>
    </div>);

}

function PhotoCard({ yOffset = 0 }) {
  return (
    <div style={{ position: 'relative' }}>
      {/* Floating KPI card top */}
      <div style={{
        position: 'absolute', top: -24, left: -32, zIndex: 3,
        background: 'var(--white)', padding: '14px 18px', borderRadius: 14,
        boxShadow: '0 20px 40px -20px rgba(10,31,68,0.25), 0 2px 0 rgba(10,31,68,0.04)',
        display: 'flex', alignItems: 'center', gap: 12, transform: `translateY(${-yOffset}px)`,
        border: '1px solid var(--line)'
      }}>
        <div style={{ width: 34, height: 34, borderRadius: 10, background: '#E8F0FF', display: 'grid', placeItems: 'center' }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M3 17l6-6 4 4 8-8" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /><path d="M15 7h6v6" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
        </div>
        <div>
          <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '-0.01em' }}>MARGEM LÍQUIDA</div>
          <div className="mono" style={{ fontSize: 16, fontWeight: 600, color: 'var(--ink)' }}>+24,8% <span style={{ color: 'var(--good)', fontSize: 11 }}>▲</span></div>
        </div>
      </div>

      {/* Image */}
      <div style={{
        borderRadius: 18, overflow: 'hidden', aspectRatio: '3/4',
        background: 'linear-gradient(180deg, #1b2d52 0%, #0a1f44 100%)',
        position: 'relative', boxShadow: '0 40px 80px -30px rgba(10,31,68,0.4)',
        transform: `translateY(${yOffset}px)`
      }}>
        <img src="assets/igor-gabriel.jpeg" alt="Igor Gabriel" style={{
          width: '100%', height: '100%', objectFit: 'cover',
          filter: 'contrast(1.02) saturate(1.05)'
        }} />
        {/* Name label */}
        <div style={{
          position: 'absolute', bottom: 18, left: 18, right: 18,
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
          color: '#fff', mixBlendMode: 'normal'
        }}>
          <div>
            <div className="serif italic" style={{ fontSize: 28, lineHeight: 1, letterSpacing: '-0.01em' }}>Igor Gabriel</div>
            <div style={{ fontSize: 11.5, opacity: .8, marginTop: 6, letterSpacing: '0.04em', textTransform: 'uppercase' }}>Contador & consultor financeiro</div>
          </div>
          <div style={{ fontSize: 11, opacity: .7 }} className="mono">01 / 08</div>
        </div>
      </div>

      {/* Floating tax card bottom */}
      <div style={{
        position: 'absolute', bottom: -28, right: -24, zIndex: 3,
        background: 'var(--ink)', color: 'var(--bg)', padding: '16px 20px', borderRadius: 14,
        boxShadow: '0 20px 40px -20px rgba(10,31,68,0.45)',
        width: 220, transform: `translateY(${yOffset * 0.5}px)`
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
          <div className="mono" style={{ fontSize: 10, opacity: .6, letterSpacing: '0.05em' }}>CARGA TRIBUTÁRIA</div>
          <Dot c="var(--bg)" />
        </div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginBottom: 12 }}>
          <div className="serif" style={{ fontSize: 36, lineHeight: 1, letterSpacing: '-0.02em' }}>32,4</div>
          <div className="mono" style={{ fontSize: 14, opacity: .7 }}>%</div>
          <div style={{ marginLeft: 'auto', fontSize: 11, color: '#FF9B6A' }} className="mono">−8,2%</div>
        </div>
        <div style={{ height: 6, background: 'rgba(255,255,255,0.12)', borderRadius: 99, overflow: 'hidden' }}>
          <div style={{ width: '68%', height: '100%', background: 'var(--bg)' }} />
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8, fontSize: 10, opacity: .6 }} className="mono">
          <span>Antes</span><span>Depois</span>
        </div>
      </div>
    </div>);

}

/* ============ MARQUEE ============ */
function Marquee() {
  const items = ["DRE Gerencial", "Fluxo de Caixa", "Margem de Contribuição", "Ponto de Equilíbrio", "Capital de Giro", "Carga Tributária", "CET Bancário", "ROI por Ação", "Custo Real da Folha", "Inadimplência"];
  return (
    <div style={{ borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)', padding: '22px 0', overflow: 'hidden', background: 'var(--bg-2)' }}>
      <div style={{ display: 'flex', gap: 48, animation: 'marq 40s linear infinite', whiteSpace: 'nowrap' }}>
        {[...items, ...items, ...items].map((it, i) =>
        <div key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 16, fontSize: 14, color: 'var(--ink-soft)' }}>
            <span className="serif italic" style={{ fontSize: 22, color: 'var(--ink)' }}>{it}</span>
            <span style={{ color: 'var(--line-2)' }}>✦</span>
          </div>
        )}
      </div>
      <style>{`@keyframes marq { 0%{transform:translateX(0)} 100%{transform:translateX(-33.333%)} }`}</style>
    </div>);

}

/* ============ DORES ============ */
function Dores() {
  const [selected, setSelected] = useState([]);
  const dores = [
  { t: "Falta de visibilidade", d: "Não sabe ao certo qual produto ou serviço dá lucro de verdade.", tag: "Lucro" },
  { t: "Fluxo de caixa no escuro", d: "Descobre o problema quando a conta já está no vermelho.", tag: "Caixa" },
  { t: "Impostos surpresa", d: "DAS, IRPJ, CSLL, PIS, COFINS chegam, e não há reserva planejada.", tag: "Tributos" },
  { t: "Custo bancário invisível", d: "Juros, cheque especial e antecipação corroem a margem sem você perceber.", tag: "Bancos" },
  { t: "Folha de pagamento pesada", d: "Você sabe o salário bruto, mas não calcula o custo real do funcionário.", tag: "Pessoas" },
  { t: "Decisões no feeling", d: "Sem DRE, sem fluxo de caixa, sem margem de contribuição de verdade.", tag: "Gestão" },
  { t: "Mistura de contas", d: "PF e PJ misturadas. Impossível saber a saúde real do negócio.", tag: "Estrutura" },
  { t: "Inadimplência sem controle", d: "Não tem visão clara do que está a receber e quando entra.", tag: "Recebíveis" }];


  const toggle = (i) => setSelected((s) => s.includes(i) ? s.filter((x) => x !== i) : [...s, i]);
  const alert = selected.length >= 3;

  return (
    <section id="dores" style={{ padding: '140px 0 120px', background: 'var(--bg)', position: 'relative' }}>
      <div className="container">
        <div className="reveal" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 64, gap: 40, flexWrap: 'wrap' }}>
          <div style={{ maxWidth: 720 }}>
            <div className="eyebrow" style={{ marginBottom: 24 }}>02, Diagnóstico</div>
            <h2 className="serif" style={{ fontSize: 'clamp(28px,3.6vw,48px)', lineHeight: 1.08, letterSpacing: '-0.02em', color: 'var(--ink)', textWrap: 'balance' }}>
              Se você se identifica com pelo menos <span className="display italic" style={{ color: 'var(--accent)', fontWeight: 400 }}>três</span> desses pontos,
              sua empresa está deixando <span className="display italic" style={{ fontWeight: 400 }}>dinheiro na mesa.</span>
            </h2>
          </div>
          <div style={{ maxWidth: 280, fontSize: 13.5, color: 'var(--muted)', lineHeight: 1.55, paddingBottom: 8 }}>
            Toque nos cards que acontecem com você. A maioria dos empresários marca cinco ou mais na primeira leitura.
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1, background: 'var(--line)', border: '1px solid var(--line)', borderRadius: 16, overflow: 'hidden' }} className="dor-grid">
          {dores.map((d, i) => {
            const on = selected.includes(i);
            return (
              <button key={i} onClick={() => toggle(i)} className="dor-cell reveal" style={{
                background: on ? 'var(--ink)' : 'var(--bg)',
                color: on ? 'var(--bg)' : 'var(--ink)',
                padding: '28px 24px 24px', textAlign: 'left', minHeight: 220,
                display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
                transition: 'background .3s, color .3s',
                position: 'relative'
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                  <span className="mono" style={{ fontSize: 11, opacity: .6 }}>0{i + 1}</span>
                  <span style={{ fontSize: 10.5, letterSpacing: '0.1em', textTransform: 'uppercase', opacity: .6 }}>{d.tag}</span>
                </div>
                <div>
                  <div className="serif" style={{ fontSize: 22, lineHeight: 1.1, letterSpacing: '-0.01em', marginBottom: 10, textWrap: 'balance' }}>{d.t}</div>
                  <div style={{ fontSize: 13, opacity: on ? .85 : .65, lineHeight: 1.45, textWrap: 'pretty' }}>{d.d}</div>
                </div>
                <div style={{ position: 'absolute', bottom: 14, right: 14, width: 22, height: 22, borderRadius: 99, border: '1px solid ' + (on ? 'var(--bg)' : 'var(--line-2)'), display: 'grid', placeItems: 'center', background: on ? 'var(--bg)' : 'transparent', color: on ? 'var(--ink)' : 'var(--muted)' }}>
                  {on ? <Check s={12} /> : <Plus s={10} />}
                </div>
              </button>);

          })}
        </div>

        <div className="reveal" style={{
          marginTop: 36, padding: '22px 28px', borderRadius: 14,
          background: alert ? 'var(--ink)' : 'transparent',
          color: alert ? 'var(--bg)' : 'var(--ink-soft)',
          border: alert ? 'none' : '1px dashed var(--line-2)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 20, flexWrap: 'wrap',
          transition: 'all .3s ease'
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <div className="mono" style={{ fontSize: 28, fontWeight: 600 }}>{selected.length}/8</div>
            <div style={{ fontSize: 14, maxWidth: 500, lineHeight: 1.45 }}>
              {alert ?
              <><strong style={{ fontWeight: 600 }}>Exatamente como pensamos.</strong> Vamos te mostrar como recuperar essa margem, começa com um diagnóstico gratuito.</> :
              selected.length === 0 ?
              "Comece marcando os pontos acima. A maioria marca entre 5 e 7." :
              `Continue marcando. Com ${3 - selected.length} ponto${3 - selected.length > 1 ? 's' : ''} a mais você entra no perfil que mais atendemos.`
              }
            </div>
          </div>
          {alert &&
          <a href={WHATS_URL} target="_blank" rel="noopener" style={{
            background: 'var(--bg)', color: 'var(--ink)', padding: '12px 18px', borderRadius: 99, fontSize: 13.5, fontWeight: 500,
            display: 'inline-flex', alignItems: 'center', gap: 8
          }}>Quero um diagnóstico <ArrowR s={13} /></a>
          }
        </div>
      </div>

      <style>{`
        .dor-cell{cursor:pointer; font-family:inherit; border:0;}
        .dor-cell:hover{filter:brightness(.98)}
        @media (max-width:900px){ .dor-grid{grid-template-columns:repeat(2,1fr) !important} }
        @media (max-width:500px){ .dor-grid{grid-template-columns:1fr !important} }
      `}</style>
    </section>);

}

/* ============ IMPOSTOS ============ */
function Impostos() {
  const [regime, setRegime] = useState('presumido');
  const regimes = {
    simples: {
      label: "Simples Nacional",
      sub: "Faixa progressiva via DAS",
      rows: [
      ["IRPJ", "Incluso no DAS"],
      ["CSLL", "Incluso no DAS"],
      ["PIS", "Incluso no DAS"],
      ["COFINS", "Incluso no DAS"],
      ["ISS / ICMS", "Incluso no DAS"],
      ["DAS Total", "4%, 19% sobre faturamento"]],

      total: "4%, 19%",
      note: "Unificado, mas nem sempre é o mais vantajoso."
    },
    presumido: {
      label: "Lucro Presumido",
      sub: "Tributação sobre percentual presumido de lucro",
      rows: [
      ["IRPJ", "15% + 10% adicional"],
      ["CSLL", "9%"],
      ["PIS", "0,65%"],
      ["COFINS", "3%"],
      ["ISS / ICMS", "Separado"],
      ["DAS", ","]],

      total: "até 34%",
      note: "Sobre o lucro, antes de qualquer distribuição."
    },
    real: {
      label: "Lucro Real",
      sub: "Tributação sobre lucro efetivo apurado",
      rows: [
      ["IRPJ", "15% + 10% adicional"],
      ["CSLL", "9%"],
      ["PIS", "1,65%"],
      ["COFINS", "7,6%"],
      ["ISS / ICMS", "Separado"],
      ["DAS", ","]],

      total: "até 34%+",
      note: "Maior complexidade, mas permite créditos tributários."
    }
  };
  const r = regimes[regime];

  return (
    <section id="impostos" style={{ padding: '140px 0', background: 'var(--bg-2)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="container">
        <div className="reveal" style={{ marginBottom: 56, maxWidth: 820 }}>
          <div className="eyebrow" style={{ marginBottom: 24 }}>03, Carga tributária</div>
          <h2 className="serif" style={{ fontSize: 'clamp(28px,3.6vw,48px)', lineHeight: 1.08, letterSpacing: '-0.02em', textWrap: 'balance' }}>
            O que o governo <span className="display italic" style={{ fontWeight: 400 }}>tira</span> da sua empresa ,
            <span style={{ color: 'var(--muted)' }}> todo mês.</span>
          </h2>
        </div>

        {/* Regime selector */}
        <div className="reveal" style={{ display: 'flex', gap: 8, marginBottom: 28, flexWrap: 'wrap' }}>
          {Object.entries(regimes).map(([k, v]) =>
          <button key={k} onClick={() => setRegime(k)} style={{
            padding: '10px 18px', borderRadius: 99,
            background: regime === k ? 'var(--ink)' : 'var(--bg)',
            color: regime === k ? 'var(--bg)' : 'var(--ink)',
            border: '1px solid ' + (regime === k ? 'var(--ink)' : 'var(--line-2)'),
            fontSize: 13.5, fontWeight: 500, transition: 'all .2s'
          }}>
              {v.label}
            </button>
          )}
        </div>

        {/* Table / card */}
        <div className="reveal" style={{ background: 'var(--white)', border: '1px solid var(--line)', borderRadius: 20, overflow: 'hidden', display: 'grid', gridTemplateColumns: '1.2fr 1fr' }} className="imp-grid">
          <div style={{ padding: '40px 40px 32px', borderRight: '1px solid var(--line)' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 28 }}>
              <div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.05em' }}>REGIME SELECIONADO</div>
                <div className="serif" style={{ fontSize: 34, letterSpacing: '-0.02em', lineHeight: 1, marginTop: 6 }}>{r.label}</div>
                <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 6 }}>{r.sub}</div>
              </div>
            </div>
            <table style={{ width: '100%', borderCollapse: 'collapse' }}>
              <tbody>
                {r.rows.map((row, i) =>
                <tr key={i} style={{ borderBottom: '1px solid var(--line)' }}>
                    <td style={{ padding: '14px 0', fontSize: 13.5, color: 'var(--ink)', fontWeight: 500 }}>{row[0]}</td>
                    <td className="mono" style={{ padding: '14px 0', fontSize: 13, color: 'var(--ink-soft)', textAlign: 'right' }}>{row[1]}</td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
          <div style={{ padding: 40, background: 'var(--ink)', color: 'var(--bg)', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <div>
              <div className="mono" style={{ fontSize: 11, opacity: .6, letterSpacing: '0.05em', marginBottom: 20 }}>TOTAL APROXIMADO</div>
              <div className="serif" style={{ fontSize: 'clamp(56px,7vw,96px)', lineHeight: 0.9, letterSpacing: '-0.03em' }}>{r.total}</div>
              <div style={{ fontSize: 14, opacity: .75, marginTop: 16, maxWidth: 320, lineHeight: 1.5, textWrap: 'pretty' }}>{r.note}</div>
            </div>
            <div style={{ marginTop: 40, paddingTop: 28, borderTop: '1px solid rgba(255,253,248,0.14)' }}>
              <div className="serif italic" style={{ fontSize: 22, lineHeight: 1.25, letterSpacing: '-0.01em', textWrap: 'balance' }}>
                “Saber em qual regime você está e se ele ainda é o mais vantajoso pode representar economia de <span style={{ color: '#FFD59E' }}>20% a 40%</span> na carga tributária.”
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 18, fontSize: 12, opacity: .7 }}>
                <div style={{ width: 28, height: 28, borderRadius: 99, background: 'var(--bg)', overflow: 'hidden' }}>
                  <img src="assets/igor-gabriel.jpeg" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: '50% 30%' }} />
                </div>
                Igor Gabriel, Contador responsável
              </div>
            </div>
          </div>
        </div>
      </div>
      <style>{`@media (max-width:820px){ .imp-grid{grid-template-columns:1fr !important} .imp-grid > div:first-child{border-right:0;border-bottom:1px solid var(--line)} }`}</style>
    </section>);

}

/* ============ FOLHA ============ */
function Folha() {
  const [salary, setSalary] = useState(3000);
  const encargos = [
  ["INSS Patronal", 20],
  ["FGTS", 8],
  ["FGTS Multa Rescisória (provisão)", 4],
  ["Férias + 1/3 (provisão)", 11.1],
  ["13º Salário (provisão)", 8.3],
  ["RAT / FAP", 3.5, "1% a 6%"],
  ["Sistema S (SESI, SENAI, SEBRAE)", 5.8]];

  const totalPct = encargos.reduce((s, e) => s + e[1], 0);
  const extra = salary * totalPct / 100;
  const realCost = salary + extra;
  const brl = (n) => n.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL', minimumFractionDigits: 0, maximumFractionDigits: 0 });

  return (
    <section style={{ padding: '140px 0', background: 'var(--bg)' }}>
      <div className="container">
        <div className="reveal" style={{ marginBottom: 56, maxWidth: 820 }}>
          <div className="eyebrow" style={{ marginBottom: 24 }}>04, Folha de pagamento</div>
          <h2 className="serif" style={{ fontSize: 'clamp(28px,3.6vw,48px)', lineHeight: 1.08, letterSpacing: '-0.02em', textWrap: 'balance' }}>
            Contratou por <span className="display italic" style={{ fontWeight: 400 }}>R$&nbsp;3.000</span> ,
            mas o <span style={{ color: 'var(--accent)' }}>custo real</span> é quanto?
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40 }} className="folha-grid">
          {/* Calculator */}
          <div className="reveal" style={{ background: 'var(--white)', border: '1px solid var(--line)', borderRadius: 20, padding: 36 }}>
            <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.05em', marginBottom: 14 }}>SIMULADOR, SALÁRIO BRUTO</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 20 }}>
              <span className="serif" style={{ fontSize: 52, letterSpacing: '-0.02em', lineHeight: 1 }}>{brl(salary)}</span>
            </div>
            <input type="range" min="1500" max="15000" step="100" value={salary} onChange={(e) => setSalary(+e.target.value)} style={{ width: '100%', accentColor: 'var(--ink)', marginBottom: 8 }} />
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--muted)' }} className="mono">
              <span>R$ 1.500</span><span>R$ 15.000</span>
            </div>

            <div style={{ marginTop: 32, padding: '22px 24px', background: 'var(--ink)', color: 'var(--bg)', borderRadius: 14 }}>
              <div className="mono" style={{ fontSize: 11, opacity: .6, letterSpacing: '0.05em', marginBottom: 6 }}>CUSTO REAL PARA A EMPRESA</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, flexWrap: 'wrap' }}>
                <div className="serif" style={{ fontSize: 52, letterSpacing: '-0.02em', lineHeight: 1 }}>{brl(realCost)}</div>
                <div className="mono" style={{ fontSize: 13, opacity: .7 }}>+ {brl(extra)} em encargos</div>
              </div>
              <div style={{ height: 8, background: 'rgba(255,253,248,0.1)', borderRadius: 99, overflow: 'hidden', marginTop: 18 }}>
                <div style={{ width: `${salary / realCost * 100}%`, height: '100%', background: 'var(--bg)' }} />
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, marginTop: 8, opacity: .7 }} className="mono">
                <span>Salário: {Math.round(salary / realCost * 100)}%</span>
                <span>Encargos: {Math.round(100 - salary / realCost * 100)}%</span>
              </div>
            </div>

            <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 16, lineHeight: 1.5 }}>
              Não inclui VT, VR, plano de saúde, bônus ou benefícios contratuais. O custo pode subir outros <strong style={{ color: 'var(--ink)' }}>10,20%</strong> conforme a política de benefícios.
            </div>
          </div>

          {/* Encargos list */}
          <div className="reveal">
            <div style={{ borderTop: '1px solid var(--line-2)' }}>
              {encargos.map(([label, pct, range], i) =>
              <div key={i} style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto', alignItems: 'center', gap: 20, padding: '20px 0', borderBottom: '1px solid var(--line)' }}>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>0{i + 1}</span>
                  <div>
                    <div style={{ fontSize: 15, color: 'var(--ink)', fontWeight: 500 }}>{label}</div>
                    {range && <div style={{ fontSize: 11.5, color: 'var(--muted)', marginTop: 2 }}>Faixa: {range}</div>}
                  </div>
                  <div style={{ minWidth: 110, textAlign: 'right' }}>
                    <div className="mono serif" style={{ fontFamily: 'Instrument Serif', fontSize: 28, letterSpacing: '-0.01em', color: 'var(--ink)' }}>{pct}%</div>
                    <div style={{ height: 3, background: 'var(--line)', borderRadius: 99, width: 80, marginLeft: 'auto', marginTop: 4, overflow: 'hidden' }}>
                      <div style={{ width: `${Math.min(pct * 4, 100)}%`, height: '100%', background: 'var(--accent)' }} />
                    </div>
                  </div>
                </div>
              )}
              <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto', alignItems: 'center', gap: 20, padding: '24px 0 0' }}>
                <span className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>Σ</span>
                <div style={{ fontSize: 15, color: 'var(--ink)', fontWeight: 600 }}>Total aproximado</div>
                <div className="serif" style={{ fontSize: 42, letterSpacing: '-0.02em', color: 'var(--accent)' }}>~{totalPct.toFixed(0)}%</div>
              </div>
            </div>

            <div style={{ marginTop: 32, padding: '22px 24px', border: '1px solid var(--line-2)', borderRadius: 14, background: 'var(--bg-2)' }}>
              <div className="serif italic" style={{ fontSize: 20, lineHeight: 1.3, color: 'var(--ink)', textWrap: 'balance' }}>
                “A maioria dos empresários precifica sem considerar o custo real da mão de obra. Resultado: margem negativa sem perceber.”
              </div>
            </div>
          </div>
        </div>
      </div>
      <style>{`@media (max-width:900px){ .folha-grid{grid-template-columns:1fr !important} }`}</style>
    </section>);

}

/* ============ JUROS ============ */
function Juros() {
  const modalidades = [
  { m: "Cheque Especial PJ", mes: "7%, 12%", ano: "+140%", risk: 95 },
  { m: "Cartão de Crédito PJ", mes: "10%, 15%", ano: "+200%", risk: 100 },
  { m: "Capital de Giro", mes: "2,5%, 5%", ano: "34%, 80%", risk: 55 },
  { m: "Antecipação de Recebíveis", mes: "2%, 4%", ano: "27%, 60%", risk: 42 },
  { m: "Desconto de Duplicatas", mes: "1,5%, 3,5%", ano: "20%, 50%", risk: 32 }];


  return (
    <section style={{ padding: '140px 0', background: 'var(--ink)', color: 'var(--bg)', position: 'relative', overflow: 'hidden' }}>
      {/* decorative */}
      <div aria-hidden style={{ position: 'absolute', top: 0, right: '-10%', width: '60%', height: '100%', background: 'radial-gradient(ellipse at center, rgba(46,91,255,0.18), transparent 60%)' }} />

      <div className="container" style={{ position: 'relative' }}>
        <div className="reveal" style={{ marginBottom: 64, maxWidth: 900 }}>
          <div className="eyebrow" style={{ color: 'rgba(255,253,248,0.5)', marginBottom: 24 }}>05, Custo bancário</div>
          <h2 className="serif" style={{ fontSize: 'clamp(28px,3.6vw,48px)', lineHeight: 1.08, letterSpacing: '-0.02em', textWrap: 'balance' }}>
            O banco é seu <span className="display italic" style={{ fontWeight: 400 }}>parceiro</span> ,
            <span style={{ color: 'rgba(255,253,248,0.55)' }}> ou seu maior custo fixo?</span>
          </h2>
        </div>

        <div className="reveal" style={{ display: 'grid', gridTemplateColumns: 'repeat(12,1fr)', gap: 16, alignItems: 'end', marginBottom: 60 }} className="juros-head">
          {/* Legend */}
          <div style={{ gridColumn: 'span 4' }}>
            <div className="mono" style={{ fontSize: 11, opacity: .5, letterSpacing: '0.05em', marginBottom: 8 }}>REFERÊNCIA</div>
            <div style={{ fontSize: 14, opacity: .75, lineHeight: 1.5, maxWidth: 340, textWrap: 'pretty' }}>Taxas médias praticadas no mercado, Banco Central, média móvel 12m.</div>
          </div>
          {/* Header row */}
          <div className="mono juros-col-h" style={{ gridColumn: 'span 3', fontSize: 11, opacity: .5, letterSpacing: '0.05em', textAlign: 'right' }}>TAXA MÊS</div>
          <div className="mono juros-col-h" style={{ gridColumn: 'span 3', fontSize: 11, opacity: .5, letterSpacing: '0.05em', textAlign: 'right' }}>TAXA ANO</div>
          <div className="mono juros-col-h" style={{ gridColumn: 'span 2', fontSize: 11, opacity: .5, letterSpacing: '0.05em', textAlign: 'right' }}>RISCO</div>
        </div>

        <div style={{ borderTop: '1px solid rgba(255,253,248,0.14)' }}>
          {modalidades.map((x, i) =>
          <div key={i} className="reveal juros-row" style={{
            display: 'grid', gridTemplateColumns: 'repeat(12,1fr)', gap: 16, alignItems: 'center',
            padding: '28px 0', borderBottom: '1px solid rgba(255,253,248,0.14)'
          }}>
              <div style={{ gridColumn: 'span 4', display: 'flex', alignItems: 'center', gap: 16 }}>
                <span className="mono" style={{ fontSize: 11, opacity: .4 }}>0{i + 1}</span>
                <span className="serif" style={{ fontSize: 28, letterSpacing: '-0.01em', lineHeight: 1.1 }}>{x.m}</span>
              </div>
              <div className="mono" style={{ gridColumn: 'span 3', fontSize: 16, textAlign: 'right', opacity: .9 }}>{x.mes}<span style={{ opacity: .5, fontSize: 11 }}> /m</span></div>
              <div className="mono" style={{ gridColumn: 'span 3', fontSize: 16, textAlign: 'right', color: '#FFB28A' }}>{x.ano}<span style={{ opacity: .5, fontSize: 11 }}> /a</span></div>
              <div style={{ gridColumn: 'span 2' }}>
                <div style={{ height: 6, background: 'rgba(255,253,248,0.1)', borderRadius: 99, overflow: 'hidden' }}>
                  <div style={{ width: `${x.risk}%`, height: '100%', background: x.risk > 70 ? '#FF8866' : x.risk > 50 ? '#FFB28A' : '#C9DEFF' }} />
                </div>
              </div>
            </div>
          )}
        </div>

        <div className="reveal" style={{ marginTop: 56, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'center' }} className="juros-foot">
          <div className="serif italic" style={{ fontSize: 'clamp(18px,1.8vw,24px)', lineHeight: 1.35, letterSpacing: '-0.01em', textWrap: 'balance' }}>
            Empresas que não monitoram o custo do dinheiro tomado frequentemente têm uma taxa efetiva <span style={{ color: '#FFB28A' }}>acima de 60% ao ano</span>, sem saber disso.
          </div>
          <div style={{ textAlign: 'right' }}>
            <a href={WHATS_URL} target="_blank" rel="noopener" style={{
              background: 'var(--bg)', color: 'var(--ink)', padding: '16px 24px', borderRadius: 99,
              fontSize: 14.5, fontWeight: 500, display: 'inline-flex', alignItems: 'center', gap: 10
            }}>
              Calcular meu CET real <ArrowUR s={14} />
            </a>
          </div>
        </div>
      </div>
      <style>{`
        .juros-row{transition:background .2s}
        .juros-row:hover{background:rgba(255,253,248,0.02)}
        @media (max-width:780px){
          .juros-head{display:none !important}
          .juros-row{grid-template-columns:1fr 1fr !important; gap:10px !important; padding:22px 0 !important}
          .juros-row > *:nth-child(1){grid-column:1/-1 !important}
          .juros-row > *:nth-child(2),.juros-row > *:nth-child(3){grid-column:auto !important;text-align:left !important;font-size:14px !important}
          .juros-row > *:nth-child(4){grid-column:1/-1 !important}
          .juros-foot{grid-template-columns:1fr !important; text-align:left !important}
          .juros-foot > div:last-child{text-align:left !important}
        }
      `}</style>
    </section>);

}

/* ============ INDICADORES ============ */
function Indicadores() {
  const [active, setActive] = useState(0);
  const indicadores = [
  { k: "DRE Gerencial", d: "Receita, custos, despesas e lucro real, separados por unidade, produto ou cliente.", metric: "R$ 2.4M", sub: "receita últimos 12 meses", delta: "+18,2%" },
  { k: "Fluxo de Caixa", d: "Projeção dos próximos 30, 60 e 90 dias, com entradas e saídas conciliadas.", metric: "R$ 412k", sub: "saldo projetado 90d", delta: "+R$ 86k" },
  { k: "Margem de Contribuição", d: "Por produto, serviço ou cliente, descubra quem realmente sustenta o negócio.", metric: "38,4%", sub: "margem média ponderada", delta: "+4,2pp" },
  { k: "Ponto de Equilíbrio", d: "Quanto você precisa faturar por mês apenas para não perder dinheiro.", metric: "R$ 148k", sub: "break-even mensal", delta: "−R$ 22k" },
  { k: "Capital de Giro", d: "Quanto precisa manter em caixa para operar com tranquilidade.", metric: "45 dias", sub: "cobertura operacional", delta: "+12d" },
  { k: "Custo Real da Folha", d: "Com todos os encargos, provisões e benefícios, por colaborador.", metric: "R$ 5.040", sub: "p/ salário base de R$ 3.000", delta: "68% add" },
  { k: "Carga Tributária Efetiva", d: "Quanto % do seu faturamento vai para tributos, não o que te dizem, o que é.", metric: "32,4%", sub: "tributos sobre receita", delta: "−8,2%" },
  { k: "CET Bancário", d: "Custo Efetivo Total de cada operação bancária contratada.", metric: "47,8%", sub: "CET médio ponderado", delta: "−14,1%" },
  { k: "Inadimplência", d: "Percentual e valor em aberto por faixa de atraso, 30, 60, 90+ dias.", metric: "R$ 78k", sub: "em aberto 60+ dias", delta: "3,2%" },
  { k: "ROI por Ação", d: "Retorno sobre cada real investido em marketing, equipe ou expansão.", metric: "3,8×", sub: "retorno médio campanhas", delta: "+0,6×" }];

  const a = indicadores[active];

  return (
    <section id="indicadores" style={{ padding: '140px 0', background: 'var(--bg)' }}>
      <div className="container">
        <div className="reveal" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 40, flexWrap: 'wrap', marginBottom: 60 }}>
          <div style={{ maxWidth: 720 }}>
            <div className="eyebrow" style={{ marginBottom: 24 }}>06, A solução</div>
            <h2 className="serif" style={{ fontSize: 'clamp(28px,3.6vw,48px)', lineHeight: 1.08, letterSpacing: '-0.02em', textWrap: 'balance' }}>
              O painel que <span className="display italic" style={{ fontWeight: 400 }}>todo empresário</span><br />precisa ter.
            </h2>
          </div>
          <div style={{ fontSize: 13.5, color: 'var(--muted)', maxWidth: 340, textWrap: 'pretty', lineHeight: 1.55 }}>
            Dez indicadores que transformam intuição em decisão. Entregues mensalmente, apresentados por quem os calculou.
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 40, alignItems: 'start' }} className="ind-grid">
          {/* List */}
          <div className="reveal" style={{ borderTop: '1px solid var(--line)' }}>
            {indicadores.map((x, i) =>
            <React.Fragment key={i}>
                <button onMouseEnter={() => setActive(i)} onClick={() => setActive(i)} style={{
                width: '100%', display: 'grid', gridTemplateColumns: 'auto 1fr auto', alignItems: 'center', gap: 16,
                padding: '20px 0', borderBottom: '1px solid var(--line)', textAlign: 'left',
                color: active === i ? 'var(--ink)' : 'var(--ink-soft)',
                transition: 'color .2s', cursor: 'pointer'
              }}>
                  <span className="mono" style={{ fontSize: 11, opacity: .5, width: 22 }}>{String(i + 1).padStart(2, '0')}</span>
                  <span className="serif" style={{ fontSize: active === i ? 26 : 22, transition: 'font-size .2s', letterSpacing: '-0.01em', lineHeight: 1.15 }}>{x.k}</span>
                  <span style={{ width: 20, height: 20, borderRadius: 99, border: '1px solid var(--line-2)', display: 'grid', placeItems: 'center', background: active === i ? 'var(--ink)' : 'transparent', color: active === i ? 'var(--bg)' : 'var(--muted)', transition: 'all .2s' }}>
                    <ArrowR s={10} />
                  </span>
                </button>
                {active === i &&
              <div className="ind-preview-mobile" style={{ padding: '20px 0 12px', borderBottom: '1px solid var(--line)' }}>
                    <PreviewCard a={x} active={i} />
                  </div>
              }
              </React.Fragment>
            )}
          </div>

          {/* Preview card (desktop) */}
          <div className="reveal ind-preview-desktop" style={{ position: 'sticky', top: 100 }}>
            <PreviewCard a={a} active={active} />
          </div>
        </div>
      </div>
      <style>{`
        .ind-preview-mobile{ display:none }
        @media (max-width:900px){
          .ind-grid{ grid-template-columns:1fr !important }
          .ind-grid > div:last-child{ position:relative !important; top:auto !important }
          .ind-preview-desktop{ display:none }
          .ind-preview-mobile{ display:block }
        }
      `}</style>
    </section>);

}

function PreviewCard({ a, active }) {
  return (
    <>
      <div style={{ background: 'var(--white)', border: '1px solid var(--line)', borderRadius: 20, overflow: 'hidden', boxShadow: '0 30px 60px -30px rgba(10,31,68,0.18)' }}>
        {/* Window chrome */}
        <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--line)', background: 'var(--bg-2)', display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ display: 'flex', gap: 6 }}>
            <span style={{ width: 10, height: 10, borderRadius: 99, background: '#E57263' }} />
            <span style={{ width: 10, height: 10, borderRadius: 99, background: '#E8B94B' }} />
            <span style={{ width: 10, height: 10, borderRadius: 99, background: '#87BF70' }} />
          </div>
          <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', marginLeft: 8 }}>painel.igorgabriel.com.br / {a.k.toLowerCase().replace(/\s+/g, '-')}</div>
        </div>
        <div style={{ padding: 36 }}>
          <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.05em', marginBottom: 12 }}>{String(active + 1).padStart(2, '0')} / INDICADOR</div>
          <div className="serif" style={{ fontSize: 34, letterSpacing: '-0.02em', lineHeight: 1.05, marginBottom: 10 }}>{a.k}</div>
          <div style={{ fontSize: 14, color: 'var(--ink-soft)', marginBottom: 32, maxWidth: 440, lineHeight: 1.5, textWrap: 'pretty' }}>{a.d}</div>

          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24, paddingBottom: 24, borderBottom: '1px solid var(--line)' }}>
            <div>
              <div className="serif" style={{ fontSize: 'clamp(40px,5.5vw,64px)', lineHeight: 0.95, letterSpacing: '-0.03em' }}>{a.metric}</div>
              <div style={{ fontSize: 12.5, color: 'var(--muted)', marginTop: 8 }}>{a.sub}</div>
            </div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '6px 12px', background: '#E8F5EE', color: 'var(--good)', borderRadius: 99, fontSize: 12, fontWeight: 500 }} className="mono">
              <span>▲</span>{a.delta}
            </div>
          </div>

          {/* Sparkline */}
          <div style={{ marginTop: 24, height: 80, position: 'relative' }}>
            <Sparkline seed={active} />
          </div>
        </div>
      </div>

      <div style={{ marginTop: 20, fontSize: 12, color: 'var(--muted)', display: 'flex', alignItems: 'center', gap: 8 }}>
        <Dot c="var(--muted)" /> Dados de exemplo. Relatórios reais são personalizados por negócio.
      </div>
    </>);

}

function Sparkline({ seed = 0 }) {
  const pts = useMemo(() => {
    const n = 40;
    const rng = (i) => Math.sin((i + seed * 7.3) * 1.13) * 0.5 + Math.cos((i + seed * 2.1) * 0.7) * 0.3 + i * 0.015;
    const arr = Array.from({ length: n }, (_, i) => rng(i));
    const min = Math.min(...arr),max = Math.max(...arr);
    return arr.map((v) => (v - min) / (max - min));
  }, [seed]);

  const path = pts.map((p, i) => `${i === 0 ? 'M' : 'L'} ${i / (pts.length - 1) * 100} ${100 - p * 100}`).join(' ');
  const area = path + ` L 100 100 L 0 100 Z`;

  return (
    <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{ width: '100%', height: '100%' }}>
      <defs>
        <linearGradient id="sparkFill" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.18" />
          <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
        </linearGradient>
      </defs>
      <path d={area} fill="url(#sparkFill)" />
      <path d={path} fill="none" stroke="var(--accent)" strokeWidth="1.4" vectorEffect="non-scaling-stroke" />
      <circle cx="100" cy={100 - pts[pts.length - 1] * 100} r="2" fill="var(--accent)" />
    </svg>);

}

/* ============ PROVA SOCIAL ============ */
function Prova() {
  const stats = [
  { n: "15,30%", l: "de redução de custos no primeiro ano em empresas com controle estruturado" },
  { n: "73%", l: "dos empresários não sabem sua margem líquida real" },
  { n: "2,5×", l: "mais chance de sobreviver aos 5 anos com fluxo de caixa projetado" }];

  return (
    <section style={{ padding: '120px 0', background: 'var(--bg-2)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="container">
        <div className="reveal" style={{ marginBottom: 56 }}>
          <div className="eyebrow" style={{ marginBottom: 20 }}>07, O que dizem os números</div>
          <h2 className="serif" style={{ fontSize: 'clamp(26px,3.2vw,40px)', letterSpacing: '-0.02em', lineHeight: 1.1, maxWidth: 820, textWrap: 'balance' }}>
            Não é sobre acreditar.<br />É sobre o que <span className="display italic" style={{ fontWeight: 400 }}>os dados</span> mostram.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 1, background: 'var(--line)', border: '1px solid var(--line)', borderRadius: 16, overflow: 'hidden' }} className="prova-grid">
          {stats.map((s, i) =>
          <div key={i} className="reveal" style={{ background: 'var(--bg)', padding: '44px 36px', minHeight: 280, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
              <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.05em' }}>EVIDÊNCIA {String(i + 1).padStart(2, '0')}</div>
              <div>
                <div className="serif" style={{ fontSize: 'clamp(52px,6.5vw,84px)', lineHeight: 0.9, letterSpacing: '-0.03em', color: 'var(--ink)' }}>{s.n}</div>
                <div style={{ fontSize: 14.5, color: 'var(--ink-soft)', marginTop: 18, lineHeight: 1.45, maxWidth: 280, textWrap: 'pretty' }}>{s.l}</div>
              </div>
            </div>
          )}
        </div>
        <div style={{ marginTop: 20, fontSize: 11.5, color: 'var(--muted)', display: 'flex', alignItems: 'center', gap: 8 }}>
          <Dot c="var(--muted)" /> Fontes: SEBRAE, IBGE Demografia das Empresas, Endeavor Brasil. Médias de mercado.
        </div>
      </div>
      <style>{`@media (max-width:900px){ .prova-grid{grid-template-columns:1fr !important} }`}</style>
    </section>);

}

/* ============ FAQ ============ */
function FAQ() {
  const [open, setOpen] = useState(0);
  const items = [
  { q: "Vocês substituem meu contador atual ou trabalham junto?", a: "Os dois cenários funcionam. Podemos assumir toda a sua contabilidade fiscal e gerencial, ou atuar como camada estratégica acima do seu contador atual, focando em indicadores, DRE gerencial e tomada de decisão." },
  { q: "Para qual porte de empresa vocês atendem?", a: "De micro a médias empresas, com faturamento entre R$ 30k/mês e R$ 4M/mês. O formato do serviço se adapta ao estágio, começamos pelo diagnóstico gratuito para entender o melhor ponto de entrada." },
  { q: "Quanto tempo até eu ter o painel rodando?", a: "Em média 15 dias úteis: levantamento (3d), organização do plano de contas (5d), integração com o banco e sistemas (4d), e validação (3d). No mês seguinte, você já recebe o primeiro fechamento completo." },
  { q: "Como é cobrado?", a: "Honorário mensal fixo baseado no porte e complexidade. Diagnóstico inicial é sem custo. Você recebe uma proposta clara antes de qualquer decisão." },
  { q: "Meus dados ficam seguros?", a: "Sim. Seguimos LGPD, usamos plataformas com criptografia em trânsito e em repouso, e todo colaborador assina NDA. Você pode revogar acesso a qualquer momento." }];


  return (
    <section style={{ padding: '120px 0', background: 'var(--bg)' }}>
      <div className="container" style={{ maxWidth: 980 }}>
        <div className="reveal" style={{ marginBottom: 48 }}>
          <div className="eyebrow" style={{ marginBottom: 20 }}>08, Perguntas frequentes</div>
          <h2 className="serif" style={{ fontSize: 'clamp(26px,3.2vw,40px)', letterSpacing: '-0.02em', lineHeight: 1.1, textWrap: 'balance' }}>
            Antes de marcar o <span className="display italic" style={{ fontWeight: 400 }}>diagnóstico</span>.
          </h2>
        </div>
        <div style={{ borderTop: '1px solid var(--line)' }}>
          {items.map((it, i) =>
          <div key={i} className="reveal" style={{ borderBottom: '1px solid var(--line)' }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{
              width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24,
              padding: '26px 0', textAlign: 'left'
            }}>
                <span className="serif" style={{ fontSize: 'clamp(18px,1.8vw,23px)', letterSpacing: '-0.01em', color: 'var(--ink)', textWrap: 'balance' }}>{it.q}</span>
                <span style={{ width: 34, height: 34, borderRadius: 99, border: '1px solid var(--line-2)', display: 'grid', placeItems: 'center', flexShrink: 0, background: open === i ? 'var(--ink)' : 'transparent', color: open === i ? 'var(--bg)' : 'var(--ink)', transition: 'all .2s' }}>
                  {open === i ? <Minus s={14} /> : <Plus s={14} />}
                </span>
              </button>
              <div style={{ maxHeight: open === i ? 400 : 0, overflow: 'hidden', transition: 'max-height .4s ease' }}>
                <div style={{ paddingBottom: 28, fontSize: 15.5, color: 'var(--ink-soft)', lineHeight: 1.6, maxWidth: 680, textWrap: 'pretty' }}>{it.a}</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ============ CTA FINAL ============ */
function CTAFinal() {
  const FATURAMENTOS = ["até 30k", "30k a 100k", "100k a 500k", "500k+"];
  const SETORES = ["Serviço", "Comércio", "Indústria"];
  const REGIMES = ["Simples Nacional", "Lucro Presumido", "Lucro Real"];
  const [name, setName] = useState('');
  const [company, setCompany] = useState('');
  const [phone, setPhone] = useState('');
  const [faturamento, setFaturamento] = useState(FATURAMENTOS[1]);
  const [setores, setSetores] = useState([]);
  const [regime, setRegime] = useState('');
  const [sent, setSent] = useState(false);

  const toggleSetor = (s) => {
    setSetores((prev) => prev.includes(s) ? prev.filter((x) => x !== s) : [...prev, s]);
  };

  const submit = (e) => {
    e.preventDefault();
    const msg =
      `Olá, Igor! Vim pelo site e quero agendar um diagnóstico.\n\n` +
      `*Nome:* ${name || '-'}\n` +
      `*Empresa:* ${company || '-'}\n` +
      `*WhatsApp:* ${phone || '-'}\n` +
      `*Tipo de empresa:* ${setores.length ? setores.join(', ') : '-'}\n` +
      `*Regime de tributação:* ${regime || '-'}\n` +
      `*Faturamento mensal:* ${faturamento}`;
    const url = `https://wa.me/${WHATS_NUMBER}?text=${encodeURIComponent(msg)}`;
    window.open(url, '_blank', 'noopener');
    setSent(true);
  };

  return (
    <section id="contato" style={{ padding: '140px 0 120px', background: 'var(--ink)', color: 'var(--bg)', position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at 70% 30%, rgba(46,91,255,0.22), transparent 55%)' }} />

      <div className="container" style={{ position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 80, alignItems: 'start' }} className="cta-grid">
          <div className="reveal">
            <div className="eyebrow" style={{ color: 'rgba(255,253,248,0.5)', marginBottom: 28 }}>09, Próximo passo</div>
            <h2 className="serif" style={{ fontSize: 'clamp(34px,4.4vw,64px)', lineHeight: 1.02, letterSpacing: '-0.025em', marginBottom: 32, textWrap: 'balance' }}>
              Chega de gerir <span className="display italic" style={{ color: '#C9DEFF', fontWeight: 400 }}>no escuro.</span> <span style={{ color: 'rgba(255,253,248,0.55)', display: 'block' }}>Seu financeiro merece clareza.</span>
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.55, opacity: .78, maxWidth: 500, marginBottom: 40, textWrap: 'pretty' }}>
              Fale com um especialista e descubra em quanto tempo você pode ter controle total do seu negócio, com diagnóstico gratuito e sem compromisso.
            </p>

            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <a href={WHATS_URL} target="_blank" rel="noopener" style={{
                background: 'var(--bg)', color: 'var(--ink)', padding: '16px 24px', borderRadius: 99,
                fontSize: 14.5, fontWeight: 500, display: 'inline-flex', alignItems: 'center', gap: 10
              }}>Diagnóstico gratuito <ArrowR s={15} /></a>
              <a href={WHATS_URL} target="_blank" rel="noopener" style={{
                border: '1px solid rgba(255,253,248,0.25)', color: 'var(--bg)', padding: '16px 24px', borderRadius: 99,
                fontSize: 14.5, fontWeight: 450, display: 'inline-flex', alignItems: 'center', gap: 10
              }}>
                <WhatsIcon /> Falar no WhatsApp
              </a>
            </div>

            <div style={{ marginTop: 64, paddingTop: 32, borderTop: '1px solid rgba(255,253,248,0.14)', display: 'flex', alignItems: 'center', gap: 18 }}>
              <div style={{ width: 56, height: 56, borderRadius: 99, overflow: 'hidden', background: '#1a2e54', flexShrink: 0 }}>
                <img src="assets/igor-gabriel.jpeg" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: '50% 25%' }} />
              </div>
              <div>
                <div style={{ fontSize: 15, fontWeight: 500 }}>Igor Gabriel</div>
                <div style={{ fontSize: 12.5, opacity: .6, marginTop: 2 }}>Contador & consultor financeiro · responde em até 1h</div>
              </div>
            </div>
          </div>

          {/* Form card */}
          <form id="form-diag" onSubmit={submit} className="reveal" style={{
            background: 'var(--white)', color: 'var(--ink)', borderRadius: 20, padding: 36,
            boxShadow: '0 40px 80px -30px rgba(0,0,0,0.4)'
          }}>
            {!sent ?
            <>
                <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.05em', marginBottom: 10 }}>AGENDAR DIAGNÓSTICO</div>
                <div className="serif" style={{ fontSize: 30, letterSpacing: '-0.02em', lineHeight: 1.05, marginBottom: 28 }}>
                  30 minutos. Sem compromisso.
                </div>

                <Field label="Seu nome" value={name} onChange={setName} placeholder="Ex: Ricardo Almeida" />
                <Field label="Empresa" value={company} onChange={setCompany} placeholder="Razão social ou nome fantasia" />
                <Field label="WhatsApp" value={phone} onChange={setPhone} placeholder="(11) 9 0000-0000" />

                <div style={{ marginTop: 10, marginBottom: 22 }}>
                  <label style={{ fontSize: 12, color: 'var(--muted)', letterSpacing: '0.04em', textTransform: 'uppercase' }}>Tipo de empresa <span style={{ textTransform: 'none', letterSpacing: 0, opacity: .7 }}>(pode marcar mais de uma)</span></label>
                  <div style={{ display: 'flex', gap: 6, marginTop: 8, flexWrap: 'wrap' }}>
                    {SETORES.map((s, i) =>
                  <label key={i} style={{ flex: '1 1 auto', minWidth: 110 }}>
                        <input type="checkbox" name="setor" value={s} checked={setores.includes(s)} onChange={() => toggleSetor(s)} style={{ display: 'none' }} />
                        <span className="fat-opt">{s}</span>
                      </label>
                  )}
                  </div>
                </div>

                <div style={{ marginTop: 10, marginBottom: 22 }}>
                  <label style={{ fontSize: 12, color: 'var(--muted)', letterSpacing: '0.04em', textTransform: 'uppercase' }}>Regime de tributação</label>
                  <div style={{ display: 'flex', gap: 6, marginTop: 8, flexWrap: 'wrap' }}>
                    {REGIMES.map((r, i) =>
                  <label key={i} style={{ flex: '1 1 auto', minWidth: 110 }}>
                        <input type="radio" name="regime" value={r} checked={regime === r} onChange={() => setRegime(r)} style={{ display: 'none' }} />
                        <span className="fat-opt">{r}</span>
                      </label>
                  )}
                  </div>
                </div>

                <div style={{ marginTop: 10, marginBottom: 22 }}>
                  <label style={{ fontSize: 12, color: 'var(--muted)', letterSpacing: '0.04em', textTransform: 'uppercase' }}>Faturamento mensal</label>
                  <div style={{ display: 'flex', gap: 6, marginTop: 8, flexWrap: 'wrap' }}>
                    {FATURAMENTOS.map((x, i) =>
                  <label key={i} style={{ flex: '1 1 auto', minWidth: 110 }}>
                        <input type="radio" name="fat" value={x} checked={faturamento === x} onChange={() => setFaturamento(x)} style={{ display: 'none' }} />
                        <span className="fat-opt">{x}</span>
                      </label>
                  )}
                  </div>
                </div>

                <button type="submit" style={{
                width: '100%', background: 'var(--ink)', color: 'var(--bg)',
                padding: '16px', borderRadius: 99, fontSize: 14.5, fontWeight: 500,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10
              }}>
                  Solicitar meu diagnóstico <ArrowR s={15} />
                </button>
                <div style={{ marginTop: 14, fontSize: 11.5, color: 'var(--muted)', textAlign: 'center', lineHeight: 1.5 }}>
                  Ao enviar, você concorda com nossa política de privacidade. Seus dados nunca serão compartilhados.
                </div>
              </> :

            <div style={{ textAlign: 'center', padding: '40px 20px' }}>
                <div style={{ width: 56, height: 56, borderRadius: 99, background: '#E8F5EE', color: 'var(--good)', display: 'grid', placeItems: 'center', margin: '0 auto 20px' }}>
                  <Check s={24} />
                </div>
                <div className="serif" style={{ fontSize: 28, letterSpacing: '-0.02em', marginBottom: 10 }}>Recebido, {name || 'empresário'}.</div>
                <div style={{ fontSize: 14.5, color: 'var(--ink-soft)', lineHeight: 1.5, maxWidth: 380, margin: '0 auto' }}>
                  O Igor entra em contato em até 1 hora útil pelo WhatsApp informado. Enquanto isso, separe seu último fechamento para acelerar o diagnóstico.
                </div>
              </div>
            }
          </form>
        </div>
      </div>
      <style>{`
        .fat-opt{
          display:block; text-align:center; padding:10px 14px; border:1px solid var(--line);
          border-radius:10px; font-size:13px; color:var(--ink-soft); cursor:pointer; transition:all .15s;
        }
        input[type=radio]:checked + .fat-opt,
        input[type=checkbox]:checked + .fat-opt{background:var(--ink);color:var(--bg);border-color:var(--ink)}
        @media (max-width:900px){ .cta-grid{grid-template-columns:1fr !important; gap:48px !important} }
      `}</style>
    </section>);

}

function Field({ label, value, onChange, placeholder }) {
  return (
    <div style={{ marginBottom: 18 }}>
      <label style={{ fontSize: 12, color: 'var(--muted)', letterSpacing: '0.04em', textTransform: 'uppercase', display: 'block', marginBottom: 6 }}>{label}</label>
      <input value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder} style={{
        width: '100%', padding: '14px 16px', border: '1px solid var(--line)', borderRadius: 10,
        fontSize: 15, fontFamily: 'inherit', color: 'var(--ink)', background: 'var(--bg)', outline: 'none',
        transition: 'border-color .2s'
      }} onFocus={(e) => e.target.style.borderColor = 'var(--ink)'} onBlur={(e) => e.target.style.borderColor = 'var(--line)'} />
    </div>);

}

function WhatsIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style={{ display: 'inline-block', verticalAlign: 'middle' }}>
      <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347M12.05 21.785h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z" />
    </svg>);

}

/* ============ WHATSAPP FLOATING BUTTON ============ */
const WHATS_NUMBER = '558597698025';
const WHATS_MSG = 'Olá, Igor Gabriel. Tudo bem? Vim pelo seu site e gostaria de entender melhor como você pode me ajudar com a contabilidade da minha empresa.';
const WHATS_URL = `https://wa.me/${WHATS_NUMBER}?text=${encodeURIComponent(WHATS_MSG)}`;

function WhatsFloat() {
  return (
    <>
      <a href={WHATS_URL} target="_blank" rel="noopener" aria-label="Falar no WhatsApp" className="whats-float">
        <svg width="30" height="30" viewBox="0 0 24 24" fill="#fff">
          <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z" />
        </svg>
      </a>
      <style>{`
        .whats-float{
          position:fixed; right:20px; bottom:20px; z-index:90;
          width:60px; height:60px; border-radius:50%;
          display:grid; place-items:center;
          background:#25D366;
          background-image:linear-gradient(135deg, #128C7E 0%, #25D366 60%, #25D366 100%);
          box-shadow:0 10px 28px -8px rgba(18,140,126,0.55), 0 2px 6px rgba(0,0,0,0.15);
          transition: transform .2s, box-shadow .3s;
        }
        .whats-float:hover{ transform:scale(1.06); box-shadow:0 14px 34px -10px rgba(18,140,126,0.7), 0 2px 6px rgba(0,0,0,0.2); }
        .whats-float:before, .whats-float:after{
          content:''; position:absolute; inset:-6px; border-radius:50%;
          border:2px solid #25D366; opacity:0;
          animation: whatsPulse 2s linear infinite;
        }
        .whats-float:after{ animation-delay:1s; }
        @keyframes whatsPulse{
          0%{ transform:scale(.8); opacity:.8 }
          100%{ transform:scale(1.5); opacity:0 }
        }
        @media (max-width:640px){
          .whats-float{ right:14px; bottom:14px; width:54px; height:54px; }
        }
      `}</style>
    </>);

}

/* ============ FOOTER ============ */
function Footer() {
  return (
    <footer style={{ padding: '60px 0 40px', background: 'var(--bg)', borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 40, flexWrap: 'wrap' }} className="footer-top">
          <div style={{ maxWidth: 380 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
              <Monogram />
              <div className="serif" style={{ fontSize: 22, letterSpacing: '-0.01em' }}>Igor Gabriel</div>
            </div>
            <div style={{ fontSize: 13, color: 'var(--muted)', lineHeight: 1.5 }}>
              Contabilidade estratégica e consultoria financeira para empresários que querem decidir com dados.
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,auto)', gap: 40, fontSize: 13 }} className="footer-cols">
            <div>
              <div className="eyebrow" style={{ marginBottom: 14 }}>Contato</div>
              <div style={{ color: 'var(--ink-soft)', lineHeight: 1.9 }}>
                <div><a href="mailto:igorgabrielnds@gmail.com" style={{ color: 'inherit' }}>igorgabrielnds@gmail.com</a></div>
                <div><a href={WHATS_URL} target="_blank" rel="noopener" style={{ color: 'inherit' }}>+55 85 9769-8025</a></div>
              </div>
            </div>
            <div>
              <div className="eyebrow" style={{ marginBottom: 14 }}>Social</div>
              <div style={{ color: 'var(--ink-soft)', lineHeight: 1.9 }}>
                <div><a href="https://www.instagram.com/igorgabrielnds/" target="_blank" rel="noopener" style={{ color: 'inherit' }}>Instagram</a></div>
                <div><a href="https://www.linkedin.com/in/igor-gabriel-baba60125/" target="_blank" rel="noopener" style={{ color: 'inherit' }}>LinkedIn</a></div>
              </div>
            </div>
            <div>
              <div className="eyebrow" style={{ marginBottom: 14 }}>Legal</div>
              <div style={{ color: 'var(--ink-soft)', lineHeight: 1.9 }}>
                <div>Privacidade</div>
                <div>CRC ativo</div>
              </div>
            </div>
          </div>
        </div>
        <div style={{ marginTop: 48, paddingTop: 24, borderTop: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }}>
          <div style={{ fontSize: 11.5, color: 'var(--muted)' }}>© 2026 Igor Gabriel Contabilidade. Todos os direitos reservados.</div>
          <div className="mono" style={{ fontSize: 11.5, color: 'var(--muted)' }}>Decidir com dados, não com intuição.</div>
        </div>
      </div>
      <style>{`
        @media (max-width:640px){
          .footer-cols{grid-template-columns:1fr 1fr !important; gap:28px !important; width:100%}
        }
        @media (max-width:380px){
          .footer-cols{grid-template-columns:1fr !important}
        }
      `}</style>
    </footer>);

}

/* ============ SOBRE ============ */
function Sobre() {
  return (
    <section id="sobre" style={{ padding: '140px 0', background: 'var(--bg)', borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.25fr', gap: 72, alignItems: 'center' }} className="sobre-grid">
          <div className="reveal" style={{ position: 'relative' }}>
            <div style={{
              borderRadius: 18, overflow: 'hidden', aspectRatio: '3/4',
              background: 'var(--bg-2)',
              boxShadow: '0 30px 60px -30px rgba(0,0,0,0.25)'
            }}>
              <img src="assets/igor-gabriel.jpeg" alt="Igor Gabriel" style={{
                width: '100%', height: '100%', objectFit: 'cover', filter: 'contrast(1.02) saturate(1.05)'
              }} />
            </div>
            {/* Credential badge */}
            <div style={{
              position: 'absolute', bottom: -24, right: -16, background: 'var(--white)',
              border: '1px solid var(--line)', borderRadius: 14, padding: '14px 18px',
              boxShadow: '0 20px 40px -20px rgba(0,0,0,0.2)', display: 'flex', alignItems: 'center', gap: 12
            }}>
              <div style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--accent-soft)', color: 'var(--accent)', display: 'grid', placeItems: 'center' }}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 2 4 6v6c0 5 3.5 8.5 8 10 4.5-1.5 8-5 8-10V6l-8-4z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" /><path d="m8.5 12 2.5 2.5L16 9.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg>
              </div>
              <div>
                <div style={{ fontSize: 12, color: 'var(--muted)' }}>Contador responsável</div>
                <div style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--ink)' }}>CRC ativo · CFC</div>
              </div>
            </div>
          </div>

          <div>
            <div className="reveal eyebrow" style={{ marginBottom: 24 }}>10, Quem está por trás</div>
            <h2 className="reveal serif" style={{ fontSize: 'clamp(26px,3.2vw,40px)', lineHeight: 1.1, letterSpacing: '-0.025em', marginBottom: 28, textWrap: 'balance' }}>
              Eu sou <span className="display italic" style={{ fontWeight: 400, color: 'var(--accent)' }}>Igor Gabriel</span>, contador e consultor financeiro.
            </h2>
            <p className="reveal" style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--ink-soft)', marginBottom: 22, textWrap: 'pretty' }}>
              Sou contador com mais de <strong style={{ color: 'var(--ink)', fontWeight: 600 }}>5 anos de experiência</strong> na área contábil e, ao longo da minha trajetória, já atendi mais de <strong style={{ color: 'var(--ink)', fontWeight: 600 }}>1.200 empresas</strong>. Minha atuação é voltada para uma contabilidade estratégica, com foco em organização financeira, análise de custos e tomada de decisão mais segura para empresas de diferentes segmentos.
            </p>

            <div className="reveal" style={{ borderLeft: '2px solid var(--accent)', paddingLeft: 20, margin: '32px 0' }}>
              <div className="display italic" style={{ fontSize: 'clamp(17px,1.6vw,21px)', lineHeight: 1.4, color: 'var(--ink)', textWrap: 'balance' }}>
                “Acredito que a contabilidade deve ir além das obrigações fiscais. Por isso, trabalho para ajudar meus clientes a reduzirem despesas, melhorarem sua gestão e alcançarem resultados mais sólidos. Com esse direcionamento, já contribuí para empresas aumentarem em mais de 30% sua margem líquida, por meio de decisões mais precisas e inteligentes.”
              </div>
            </div>

            <div className="reveal" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20, marginTop: 36, paddingTop: 28, borderTop: '1px solid var(--line)' }}>
              <SobreStat n="1.200+" l="empresas atendidas" />
              <SobreStat n="+30%" l="margem líquida gerada" />
              <SobreStat n="5 anos" l="de atuação estratégica" />
            </div>

            <div className="reveal" style={{ marginTop: 36, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a href={WHATS_URL} target="_blank" rel="noopener" className="btn-primary" style={{ background: 'var(--ink)', color: 'var(--bg)', padding: '14px 22px', borderRadius: 99, fontSize: 14, fontWeight: 500, display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                Quero conversar com o Igor <ArrowR s={14} />
              </a>
            </div>
          </div>
        </div>
      </div>
      <style>{`@media (max-width:900px){ .sobre-grid{grid-template-columns:1fr !important; gap:48px !important} }`}</style>
    </section>);

}

function SobreStat({ n, l }) {
  return (
    <div>
      <div className="display" style={{ fontSize: 34, lineHeight: 1, color: 'var(--ink)', letterSpacing: '-0.02em', marginBottom: 6 }}>{n}</div>
      <div style={{ fontSize: 12.5, color: 'var(--muted)', lineHeight: 1.4 }}>{l}</div>
    </div>);

}

/* ============ APP ============ */
function App() {
  useReveal();
  useEffect(() => {
    document.querySelectorAll('a[href^="#"]').forEach((a) => {
      a.addEventListener('click', (e) => {
        const id = a.getAttribute('href');
        if (id.length > 1) {
          const el = document.querySelector(id);
          if (el) {e.preventDefault();window.scrollTo({ top: el.offsetTop - 60, behavior: 'smooth' });}
        }
      });
    });
  }, []);

  return (
    <>
      <Nav />
      <Hero />
      <Marquee />
      <Dores />
      <Impostos />
      <Folha />
      <Juros />
      <Indicadores />
      <Prova />
      <Sobre />
      <FAQ />
      <CTAFinal />
      <Footer />
      <WhatsFloat />
    </>);

}

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