// sections.jsx — NewB LP sections

// ── Hooks ───────────────────────────────────────
function useReveal() {
  React.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, rootMargin: '0px 0px -60px 0px' });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

function useCountUp(target, trigger, opts = {}) {
  const { duration = 1800, decimals = 0 } = opts;
  const [val, setVal] = React.useState(0);
  React.useEffect(() => {
    if (!trigger) return;
    let raf, start;
    const step = (t) => {
      if (!start) start = t;
      const p = Math.min(1, (t - start) / duration);
      const eased = 1 - Math.pow(1 - p, 3);
      setVal(target * eased);
      if (p < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [trigger, target, duration]);
  return decimals === 0 ? Math.round(val) : val.toFixed(decimals);
}

function useInView(ref) {
  const [seen, setSeen] = React.useState(false);
  React.useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {setSeen(true);io.disconnect();}
    }, { threshold: 0.3 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, [ref]);
  return seen;
}

// ── Forex ticker ────────────────────────────────
const TICKER_DATA = [
{ pair: 'EUR/USD', px: '1.0842', d: '+0.12%', up: true },
{ pair: 'GBP/USD', px: '1.2718', d: '+0.34%', up: true },
{ pair: 'USD/JPY', px: '149.86', d: '−0.21%', up: false },
{ pair: 'USD/BRL', px: '5.0214', d: '+0.48%', up: true },
{ pair: 'AUD/USD', px: '0.6592', d: '−0.08%', up: false },
{ pair: 'USD/CHF', px: '0.8814', d: '+0.06%', up: true },
{ pair: 'NZD/USD', px: '0.6184', d: '−0.14%', up: false },
{ pair: 'USD/CAD', px: '1.3622', d: '+0.18%', up: true },
{ pair: 'EUR/GBP', px: '0.8527', d: '−0.05%', up: false },
{ pair: 'USD/MXN', px: '17.214', d: '+0.22%', up: true }];

function Ticker() {
  const items = [...TICKER_DATA, ...TICKER_DATA];
  return (
    <div className="ticker" style={{ fontSize: "18px" }}>
      <div className="ticker-track">
        {items.map((t, i) =>
        <span key={i} className="tk-item">
            <span className="tk-pair">{t.pair}</span>
            <span className="tk-px">{t.px}</span>
            <span className={t.up ? 'tk-up' : 'tk-dn'}>{t.d}</span>
          </span>
        )}
      </div>
    </div>);

}

// ── Header ──────────────────────────────────────
function Header({ ctaLabel, onCTA }) {
  const [open, setOpen] = React.useState(false);

  // Close on Escape
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    document.addEventListener('keydown', onKey);
    // Lock background scroll while menu open
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = prev;
    };
  }, [open]);

  const closeMenu = () => setOpen(false);

  return (
    <header className="hdr">
      <div className="hdr-inner">
        <a className="wm" href="#top" style={{ fontFamily: "Garamond", fontWeight: "100", fontSize: "31px", opacity: "0.85", letterSpacing: "0px", gap: "12px", alignItems: "center" }}>
          <img className="wm-logo wm-logo-dark" src="assets/newb-logo-white.png" alt="" aria-hidden="true" />
          <img className="wm-logo wm-logo-light" src="assets/newb-logo.png" alt="" aria-hidden="true" />
          <span className="wm-name">NewB</span><span className="wm-dot" aria-hidden="true" style={{ borderRadius: "0px", width: "0px" }}></span>
        </a>
        <nav className="nav" aria-label="Principal" style={{ fontSize: "17px" }}>
          <a href="#operacao" style={{ fontWeight: "400", fontFamily: "\"DM Sans\"" }}>A operação</a>
          <a href="#beneficios" style={{ fontWeight: "400", fontFamily: "\"DM Sans\"" }}>Benefícios</a>
          <a href="#prova" style={{ fontFamily: "\"DM Sans\"" }}>Histórico</a>
          <a href="#faq" style={{ fontFamily: "\"DM Sans\"" }}>FAQ</a>
        </nav>
        <div className="hdr-right">
          <a className="btn hdr-cta" href={window.NEWB_WHATSAPP || "https://wa.me/551153045331"} target="_blank" rel="noopener noreferrer" onClick={onCTA} style={{ fontFamily: "\"DM Sans\"", fontWeight: "700", fontSize: "13px" }}>
            {ctaLabel} <span className="arrow">→</span>
          </a>
          <button
            type="button"
            className={`hamburger ${open ? 'is-open' : ''}`}
            aria-label={open ? "Fechar menu" : "Abrir menu"}
            aria-expanded={open}
            aria-controls="mobile-menu"
            onClick={() => setOpen(o => !o)}>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
          </button>
        </div>
      </div>

      {/* Mobile dropdown menu */}
      <div
        id="mobile-menu"
        className={`mobile-menu ${open ? 'is-open' : ''}`}
        aria-hidden={!open}>
        <nav className="mobile-nav" aria-label="Principal (mobile)">
          <a href="#operacao" onClick={closeMenu}>A operação</a>
          <a href="#beneficios" onClick={closeMenu}>Benefícios</a>
          <a href="#prova" onClick={closeMenu}>Histórico</a>
          <a href="#faq" onClick={closeMenu}>FAQ</a>
        </nav>
        <a
          className="btn mobile-menu-cta"
          href={window.NEWB_WHATSAPP || "https://wa.me/551153045331"}
          target="_blank"
          rel="noopener noreferrer"
          onClick={() => { closeMenu(); onCTA && onCTA(); }}>
          {ctaLabel} <span className="arrow">→</span>
        </a>
      </div>
      {open && <div className="mobile-menu-backdrop" onClick={closeMenu} aria-hidden="true"></div>}
    </header>);

}

// ── Hero ────────────────────────────────────────
const HEADLINES = {
  A:
  <>
      Seu dinheiro no exterior. <em>Seu controle.</em><br />
      Nossa operação.
    </>,

  B:
  <>
      O investimento que a poupança <em style={{ fontWeight: "500" }}>nunca</em> vai te oferecer.
    </>,

  C:
  <>
      Existe um mercado onde seu dinheiro <em>trabalha</em><br />
      enquanto você vive.
    </>

};
function FloatingPaths({ position }) {
  const paths = Array.from({ length: 36 }, (_, i) => ({
    id: i,
    d: `M-${380 - i * 5 * position} -${189 + i * 6}C-${380 - i * 5 * position} -${189 + i * 6} -${312 - i * 5 * position} ${216 - i * 6} ${152 - i * 5 * position} ${343 - i * 6}C${616 - i * 5 * position} ${470 - i * 6} ${684 - i * 5 * position} ${875 - i * 6} ${684 - i * 5 * position} ${875 - i * 6}`,
    width: 0.5 + i * 0.03,
    dur: 20 + i * 0.7 % 10,
    delay: -(i * 0.4 + (position > 0 ? 0 : 1.2))
  }));
  return (
    <div className="bg-paths" aria-hidden="true">
      <svg viewBox="0 0 696 316" fill="none" preserveAspectRatio="xMidYMid slice">
        {paths.map((p) =>
        <path
          key={p.id}
          className="bg-path"
          d={p.d}
          stroke="currentColor"
          strokeWidth={p.width}
          strokeOpacity={0.12 + p.id * 0.022}
          pathLength="1"
          style={{
            animationDuration: `${p.dur}s`,
            animationDelay: `${p.delay}s`
          }} />

        )}
      </svg>
    </div>);

}

function SparklesCanvas({
  height = 140,
  density = 0.6, // particles per 1000px²
  color = '#ffffff',
  speed = 1
}) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const cvs = ref.current;
    if (!cvs) return;
    const ctx = cvs.getContext('2d');
    let raf,w = 0,h = 0,dpr = Math.min(window.devicePixelRatio || 1, 2);
    let particles = [];

    function resize() {
      const r = cvs.getBoundingClientRect();
      w = r.width;h = r.height;
      cvs.width = Math.round(w * dpr);
      cvs.height = Math.round(h * dpr);
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
      const count = Math.max(40, Math.round(w * h * density / 100));
      particles = new Array(count).fill(0).map(() => spawn());
    }
    function spawn() {
      return {
        x: Math.random() * w,
        y: Math.random() * h,
        r: 0.3 + Math.random() * 1.1,
        // opacity oscillation
        a: Math.random(),
        // angular speed of opacity wave
        ph: Math.random() * Math.PI * 2,
        sp: (0.4 + Math.random() * 1.2) * speed,
        // tiny drift
        vx: (Math.random() - 0.5) * 0.15,
        vy: (Math.random() - 0.5) * 0.15
      };
    }
    let t0 = performance.now();
    function frame(t) {
      const dt = Math.min(0.05, (t - t0) / 1000);t0 = t;
      ctx.clearRect(0, 0, w, h);
      for (const p of particles) {
        p.ph += dt * p.sp;
        const op = 0.15 + 0.85 * (0.5 + 0.5 * Math.sin(p.ph));
        p.x += p.vx;p.y += p.vy;
        if (p.x < -2) p.x = w + 2;
        if (p.x > w + 2) p.x = -2;
        if (p.y < -2) p.y = h + 2;
        if (p.y > h + 2) p.y = -2;
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
        ctx.fillStyle = color;
        ctx.globalAlpha = op;
        ctx.fill();
      }
      ctx.globalAlpha = 1;
      raf = requestAnimationFrame(frame);
    }
    resize();
    const ro = new ResizeObserver(resize);
    ro.observe(cvs);
    raf = requestAnimationFrame(frame);
    return () => {cancelAnimationFrame(raf);ro.disconnect();};
  }, [density, color, speed]);

  return (
    <div className="sparkles" style={{ height }}>
      <span className="sparkles-line sparkles-line-wide" />
      <span className="sparkles-line sparkles-line-wide sparkles-line-thin" />
      <span className="sparkles-line sparkles-line-narrow" />
      <span className="sparkles-line sparkles-line-narrow sparkles-line-thin" />
      <canvas ref={ref} className="sparkles-canvas" />
      <span className="sparkles-mask" />
    </div>);

}

function DottedSurface({ color = '#f5f1e8' }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el || !window.THREE) return;
    const THREE = window.THREE;

    const SEPARATION = 150;
    const AMOUNTX = 40;
    const AMOUNTY = 60;

    const scene = new THREE.Scene();

    const camera = new THREE.PerspectiveCamera(60, el.clientWidth / el.clientHeight, 1, 10000);
    camera.position.set(0, 355, 1220);

    const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    renderer.setSize(el.clientWidth, el.clientHeight);
    renderer.setClearColor(0x000000, 0);
    el.appendChild(renderer.domElement);

    const positions = [];
    const colors = [];
    const c = new THREE.Color(color);
    for (let ix = 0; ix < AMOUNTX; ix++) {
      for (let iy = 0; iy < AMOUNTY; iy++) {
        const x = ix * SEPARATION - AMOUNTX * SEPARATION / 2;
        const z = iy * SEPARATION - AMOUNTY * SEPARATION / 2;
        positions.push(x, 0, z);
        colors.push(c.r, c.g, c.b);
      }
    }
    const geometry = new THREE.BufferGeometry();
    geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
    geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));

    const material = new THREE.PointsMaterial({
      size: 8,
      vertexColors: true,
      transparent: true,
      opacity: 0.55,
      sizeAttenuation: true
    });
    const points = new THREE.Points(geometry, material);
    scene.add(points);

    let count = 0;
    let raf;
    const animate = () => {
      raf = requestAnimationFrame(animate);
      const pa = geometry.attributes.position;
      const arr = pa.array;
      let i = 0;
      for (let ix = 0; ix < AMOUNTX; ix++) {
        for (let iy = 0; iy < AMOUNTY; iy++) {
          const idx = i * 3;
          arr[idx + 1] = Math.sin((ix + count) * 0.3) * 50 + Math.sin((iy + count) * 0.5) * 50;
          i++;
        }
      }
      pa.needsUpdate = true;
      renderer.render(scene, camera);
      count += 0.1;
    };

    const handleResize = () => {
      const w = el.clientWidth,h = el.clientHeight;
      camera.aspect = w / h;
      camera.updateProjectionMatrix();
      renderer.setSize(w, h);
    };
    const ro = new ResizeObserver(handleResize);
    ro.observe(el);
    animate();

    return () => {
      cancelAnimationFrame(raf);
      ro.disconnect();
      geometry.dispose();
      material.dispose();
      renderer.dispose();
      if (renderer.domElement.parentNode === el) el.removeChild(renderer.domElement);
    };
  }, [color]);
  return <div ref={ref} className="hero-dots" aria-hidden="true" />;
}

function Hero({ headline, ctaLabel, ctaNote }) {
  return (
    <section className="hero" id="top">
      <div className="hero-inner">
        <h1 className="h-display reveal" style={{ fontFamily: '"Cormorant Garamond", serif', maxWidth: "1187px", fontWeight: "100" }}>
          {HEADLINES[headline]}
        </h1>

        <p className="lede reveal" style={{ maxWidth: 720, marginTop: 24, fontSize: "21px", fontWeight: "400", fontFamily: "\"DM Sans\"" }}>A NewB opera no maior mercado financeiro do mundo há mais de 7 anos. Você participa dos resultados, sem abrir mão do controle, sem precisar entender de Forex, sem contrato de permanência.



        </p>

        <div className="hero-cta-row reveal">
          <a className="btn lg" href={window.NEWB_WHATSAPP || "https://wa.me/551153045331"} target="_blank" rel="noopener noreferrer" style={{ fontFamily: "\"DM Sans\"", fontWeight: "700", fontSize: "15px" }}>
            {ctaLabel} <span className="arrow">→</span>
          </a>
          <span className="hero-cta-note" style={{ fontWeight: "700", fontSize: "13px" }}>{ctaNote}</span>
        </div>

        <div className="hero-figs reveal">
          <HeroFig num="20" suffix="+" label="Anos de operação" />
          <HeroFig num="7" suffix="T" label="Dólares · volume diário Forex" prefix="US$ " />
          <HeroFig num="100" suffix="%" label="Capital permanece na sua conta" />
        </div>
      </div>
    </section>);
}
function HeroFig({ num, suffix, label, prefix = '' }) {
  const ref = React.useRef(null);
  const seen = useInView(ref);
  const val = useCountUp(parseFloat(num), seen);
  return (
    <div className="fig" ref={ref}>
      <span className="fig-num">{prefix}{val}<em>{suffix}</em></span>
      <span className="fig-lbl" style={{ fontSize: "13px" }}>{label}</span>
    </div>);

}

// ── Opening proposition ─────────────────────────
function Opening() {
  return (
    <section className="sec" id="mercado">
      <span className="secnum"></span>
      <div className="wrap-narrow">
        <div className="eyebrow reveal" style={{ fontSize: "15px" }}>Por que olhar para fora</div>
        <h2 className="h-section reveal" style={{ fontFamily: "\"DM Sans\"" }}>
          Poupança, CDB e Tesouro são <em>seguros</em>.<br />
          Mas seguro não significa ser <em>
o melhor</em>.
        </h2>
        <p className="lede reveal">
          O mercado Forex movimenta mais de <strong>7 trilhões de dólares por dia</strong>.
          É o maior mercado financeiro do planeta. Durante mais de 20 anos, a nossa
          corretora parceira fornece acesso a um ambiente de negociação confiável,
          rápido e justo. A NewB opera neste ambiente, com uma estratégia que
          busca lucrar em qualquer fase do mercado.
        </p>
        <p className="lede reveal" style={{ marginTop: 18, textAlign: "left" }}>O que antes era acessível apenas para grandes investidores institucionais,
hoje está disponível para qualquer pessoa, com total controle sobre o próprio dinheiro, dentro de uma corretora regulamentada, sem que ninguém precise tocar no seu capital.



        </p>


        <a className="broker-card reveal" href="https://www.gomarkets.com/pt-latam/about-go-markets" target="_blank" rel="noopener noreferrer">
          <div className="broker-card-rule" aria-hidden="true"></div>
          <div className="broker-card-body">
            <div className="broker-card-meta">
              <span className="broker-seal" aria-hidden="true">
                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M9 12l2 2 4-4" />
                  <circle cx="12" cy="12" r="10" />
                </svg>
              </span>
              <span className="broker-eyebrow" style={{ fontFamily: "\"DM Sans\"" }}>Corretora parceira oficial</span>
            </div>
            <div className="broker-name">Go Markets</div>
            <p className="broker-tagline" style={{ fontFamily: "\"DM Sans\"" }}>Onde seu capital fica depositado, sob seu controle. Regulamentada internacionalmente.</p>
          </div>
          <div className="broker-card-stats" aria-hidden="true">
            <div className="broker-stat">
              <span className="broker-stat-num">20<em>+</em></span>
              <span className="broker-stat-lbl" style={{ fontFamily: "\"DM Sans\"" }}>Anos<br />de operação</span>
            </div>
            <div className="broker-stat">
              <span className="broker-stat-num">ASIC<em>·</em>FSC</span>
              <span className="broker-stat-lbl" style={{ fontFamily: "\"DM Sans\"" }}>Regulação<br />internacional</span>
            </div>
          </div>
          <div className="broker-card-cta">
            <span style={{ fontFamily: "\"DM Sans\"" }}>Conheça a Go Markets</span>
            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <path d="M7 17L17 7" />
              <path d="M8 7h9v9" />
            </svg>
          </div>
        </a>
        <p className="reveal" style={{ marginTop: 32, fontFamily: 'Raleway, sans-serif', fontStyle: 'italic', fontSize: 22, color: 'var(--gold)', textAlign: "center" }}>
          Você não precisa saber operar. Você só precisa conhecer a NewB.
        </p>
      </div>
    </section>);
}

// ── Pain points ────────────────────────────────
const PAINS = [
{ q: 'A inflação corrói o que a poupança rende.', r: 'E você sabe que isso não bate.\nCada mês parado é capital que escorre em poder de compra.' },
{ q: 'Já ouviu falar em investir fora, mas onde começar?', r: 'A informação está fragmentada, em inglês, ou cercada de jargão.\nA entrada virou um muro.' },
{ q: 'Desconfia de tudo que promete muito.', r: 'Faz sentido. Você já viu gente perder dinheiro com promessa fácil. Ceticismo é proteção.' },
{ q: 'Quer diversificar, sem abrir mão do controle.', r: 'Transferir capital para terceiros não é uma opção.\nO dinheiro precisa continuar sendo seu.' },
{ q: 'Não tem tempo pra aprender um mercado novo.', r: 'Curva técnica longa, decisões em tempo real,\nplataformas complexas. Não cabe no seu dia.' },
{ q: 'Procura algo que faça sentido, não hype.', r: 'Sem milagre, sem urgência fabricada.\nResultado consistente é o único critério que importa.' }];

function Pains() {
  return (
    <section className="sec" id="dor" style={{ paddingTop: 80 }}>
      <span className="secnum"></span>
      <div className="wrap">
        <div className="eyebrow reveal" style={{ fontSize: "15px" }}>Se algo aqui te toca</div>
        <h2 className="h-section reveal" style={{ maxWidth: 880, fontFamily: "Raleway" }}>
          Você trabalhou para ter esse dinheiro.<br />
          E sente que ele <em style={{ fontFamily: "Raleway", fontWeight: "400" }}>poderia estar trabalhando melhor</em>.
        </h2>
        <p className="lede reveal" style={{ maxWidth: 720, marginBottom: 48, fontSize: "22px" }}>Leia atentamente cada item para entender melhor.
Você provavelmente se identifica com mais de um.

        </p>
        <div className="pain-grid reveal">
          {PAINS.map((p, i) =>
          <div className="pain-item" key={i}>
              <span className="pain-num" style={{ fontSize: "13px" }}>{String(i + 1).padStart(2, '0')}</span>
              <h3 className="pain-q">{p.q}</h3>
              <p className="pain-r" style={{ fontFamily: "Raleway", fontSize: "18px", whiteSpace: "pre-line" }}>{p.r}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ── Solution + PAMM ────────────────────────────
function Solution() {
  return (
    <section className="sec" id="operacao">
      <span className="secnum"></span>
      <div className="wrap two-col">
        <div>
          <div className="eyebrow reveal" style={{ fontSize: "15px" }}>Como funciona</div>
          <h2 className="h-section reveal" style={{ fontFamily: "Raleway" }}>
            A NewB <em style={{ fontWeight: "500", fontFamily: "Raleway" }}>não gerencia</em> o seu dinheiro.
          </h2>
          <p className="lede reveal" style={{ fontSize: "22px" }}>Essa é a primeira coisa que precisamos dizer, porque é o que nos diferencia de tudo que você já viu nesse mercado.


          </p>
          <div className="reveal" style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 18 }}>
            <Step n="01" t="Você abre sua conta">
              Diretamente numa corretora parceira regulamentada.<br />
              O dinheiro é seu, fica na sua conta, sob o seu controle.
            </Step>
            <Step n="02" t="A NewB opera o Forex">
              Com estratégia própria,<br />
              buscando consistência em qualquer fase do mercado.
            </Step>
            <Step n="03" t="O PAMM espelha automaticamente">
              Toda operação que realizamos é replicada<br />
              proporcionalmente na sua conta, você não precisa fazer nada.
            </Step>
            <Step n="04" t="Você acompanha em tempo real">
              Saque quando quiser. Sem contrato de permanência,<br />
              sem multa, sem carência. O controle sempre foi seu.
            </Step>
          </div>
        </div>
        <div className="reveal" style={{ position: 'sticky', top: 96 }}>
          <PammDiagram />
        </div>
      </div>
    </section>);

}
function Step({ n, t, children }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '52px 1fr', gap: 20, paddingBottom: 18, borderBottom: '1px solid var(--hair)' }}>
      <span style={{ fontFamily: 'var(--mono)', letterSpacing: '.1em', color: 'var(--gold)', fontSize: "13px" }}>{n}</span>
      <div>
        <h4 style={{ fontFamily: 'var(--serif)', fontWeight: 400, fontSize: 19, margin: '0 0 6px' }}>{t}</h4>
        <p style={{ margin: 0, fontSize: 15, lineHeight: 1.55, color: 'color-mix(in oklab, currentColor 75%, transparent)', fontFamily: "Raleway" }}>{children}</p>
      </div>
    </div>);

}

function PammDiagram() {
  // Animated mirroring SVG
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setTick((t) => (t + 1) % 1000), 60);
    return () => clearInterval(id);
  }, []);
  // wave centered: pulses emit from NewB hub and propagate to clients
  return (
    <div className="pamm-card">
      <div style={{ fontFamily: 'var(--mono)', letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--gold)', marginBottom: 12, fontSize: "13px" }}>
        PAMM · Espelhamento proporcional
      </div>
      <svg className="pamm-svg" viewBox="0 0 520 360" fill="none">
        <defs>
          <radialGradient id="hub" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#c9a55c" stopOpacity="0.95" />
            <stop offset="100%" stopColor="#c9a55c" stopOpacity="0.3" />
          </radialGradient>
          <linearGradient id="line" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stopColor="#c9a55c" stopOpacity="0.6" />
            <stop offset="100%" stopColor="#c9a55c" stopOpacity="0.15" />
          </linearGradient>
        </defs>

        {/* Connection lines from hub to clients */}
        {[
        [120, 70], [400, 70],
        [80, 200], [440, 200],
        [120, 320], [400, 320]].
        map(([x, y], i) =>
        <line key={i} x1="260" y1="180" x2={x} y2={y} stroke="url(#line)" strokeWidth="1" strokeDasharray="2 4" />
        )}

        {/* Pulses traveling along lines */}
        {[
        [120, 70], [400, 70],
        [80, 200], [440, 200],
        [120, 320], [400, 320]].
        map(([x, y], i) => {
          const phase = (tick / 60 + i * 0.18) % 1.4;
          const t = phase > 1 ? 0 : phase;
          const cx = 260 + (x - 260) * t;
          const cy = 180 + (y - 180) * t;
          return (
            <circle key={`p${i}`} cx={cx} cy={cy} r={t > 0 && t < 1 ? 3.5 : 0} fill="#c9a55c" opacity={1 - t * 0.4} />);

        })}

        {/* Hub */}
        <circle cx="260" cy="180" r="56" fill="url(#hub)" />
        <circle cx="260" cy="180" r="40" fill="#0a1628" stroke="#c9a55c" strokeWidth="1" />
        <text x="260" y="178" textAnchor="middle" fontFamily="DM Sans, sans-serif" fontWeight="500" fontSize="18" fill="#f5f1e8" fontStyle="italic">NewB</text>
        <text x="260" y="195" textAnchor="middle" fontFamily="DM Sans, sans-serif" fontSize="8" fill="#c9a55c" letterSpacing="2">OPERAÇÃO</text>

        {/* Client nodes */}
        {[
        [120, 70, 'A'], [400, 70, 'B'],
        [80, 200, 'C'], [440, 200, 'D'],
        [120, 320, 'E'], [400, 320, 'F']].
        map(([x, y, l], i) =>
        <g key={`n${i}`}>
            <circle cx={x} cy={y} r="22" fill="#13243f" stroke="rgba(245,241,232,.25)" strokeWidth="1" />
            <text x={x} y={y + 4} textAnchor="middle" fontFamily="DM Sans, sans-serif" fontWeight="500" fontSize="14" fill="#f5f1e8">{l}</text>
            <text x={x} y={y + 38} textAnchor="middle" fontFamily="DM Sans, sans-serif" fontSize="8" fill="rgba(245,241,232,.45)" letterSpacing="1">CLIENTE</text>
          </g>
        )}
      </svg>
      <div className="pamm-legend">
        <span><i className="swatch" style={{ background: '#c9a55c' }}></i>Operação NewB</span>
        <span><i className="swatch" style={{ background: '#13243f', border: '1px solid rgba(245,241,232,.3)' }}></i>Conta do cliente</span>
        <span></span>
      </div>
    </div>);

}

// ── Benefits ───────────────────────────────────
const BENEFITS = [
{ h: 'Em dólar.', p: 'Seu dinheiro cresce numa moeda mais forte,\nprotegido da desvalorização do real.' },
{ h: 'Controle total.', p: 'O capital nunca sai da sua conta.\nVocê entra e sai quando quiser.' },
{ h: 'Sem precisar operar.', p: 'A NewB faz isso.\nVocê só acompanha os resultados na plataforma da corretora.' },
{ h: 'Alta performance.', p: 'Acesso a um mercado de elite com a consistência\nde quem opera há mais de 20 anos.' },
{ h: 'Suporte humano.', p: 'Da abertura da conta ao acompanhamento contínuo,\numa pessoa real, disponível.' }];

function Benefits() {
  return (
    <section className="sec" id="beneficios">
      <span className="secnum"></span>
      <div className="wrap">
        <div className="eyebrow reveal" style={{ fontSize: "15px" }}>Benefícios concretos</div>
        <h2 className="h-section reveal" style={{ maxWidth: 760, fontFamily: "Raleway" }}>
          Seis vantagens que <em style={{ fontFamily: "Raleway", fontWeight: "400" }}>investimentos tradicionais</em> não entregam.
        </h2>
        <div className="bene-grid reveal" style={{ marginTop: 56 }}>
          {BENEFITS.map((b, i) =>
          <div className="bene" key={i}>
              <span className="bene-num" style={{ fontSize: "13px" }}>0{i + 1}</span>
              <h3 className="bene-h">{b.h}</h3>
              <p className="bene-p" style={{ fontFamily: "Raleway", fontSize: "18px", whiteSpace: "pre-line" }}>{b.p}</p>
            </div>
          )}
          <div className="bene" style={{ background: 'rgba(201,165,92,.06)' }}>
            <span className="bene-num">06</span>
            <h3 className="bene-h"><em>Diversifica com inteligência.</em></h3>
            <p className="bene-p" style={{ fontFamily: "Raleway", fontSize: "18px" }}>Sem abrir mão do que já tem no Brasil,
você adiciona uma camada internacional à sua carteira.</p>
          </div>
        </div>
      </div>
    </section>);
}

// ── Prova social ───────────────────────────────
function Prova() {
  return (
    <section className="prova" id="prova">
      <span className="secnum"></span>
      <div className="wrap">
        <div className="eyebrow reveal" style={{ fontSize: "15px" }}>Histórico verificável</div>
        <h2 className="h-section reveal" style={{ maxWidth: 760, fontFamily: "Raleway" }}>
          Vinte anos não se explicam em uma página.<br />
          <em style={{ fontFamily: "Raleway", fontWeight: "400" }}>Os números sim.</em>
        </h2>

        <div className="stats reveal">
          <Stat target={20} suffix="+" label="Anos de operação" />
          <Stat target={150} suffix="+" label="Países usufruem dessa estrutura" />
          <Stat target={0.7} decimals={1} suffix="%" label="Drawdown médio últimos 6m" />
        </div>

        <div className="quotes reveal">
          <Quote initials="MR" name="M. R." meta=""
          text="Comecei com pouco e não precisei entender nada de Forex para ver meu dinheiro crescer. O processo todo foi explicado no WhatsApp." />
          <Quote initials="LF" name="L. F." meta=""
          text="O que me convenceu foi saber que meu dinheiro nunca saiu da minha conta. Posso ver tudo em tempo real na plataforma da corretora." />
          <Quote initials="AS" name="A. S." meta=""
          text="Já acompanho a NewB há um bom tempo, e a consistência é o que me mantém aqui. Mês após mês, sem surpresas, sem promessas." />
        </div>

        <p className="placeholder-note"></p>
      </div>
    </section>);

}
function Stat({ target, decimals = 0, suffix, label }) {
  const ref = React.useRef(null);
  const seen = useInView(ref);
  const v = useCountUp(target, seen, { decimals });
  return (
    <div className="stat" ref={ref}>
      <span className="stat-num">{v}<span className={`sfx${/[a-zA-Z]/.test(suffix) ? ' sfx-word' : ''}`} style={{ fontFamily: "\"DM Sans\"", fontSize: "59px" }}>{suffix}</span></span>
      <span className="stat-lbl" style={{ fontSize: "13px", textAlign: "left" }}>{label}</span>
    </div>);

}
function Quote({ initials, name, meta, text }) {
  return (
    <figure className="quote">
      <span className="quote-mark">“</span>
      <p className="quote-p">{text}</p>
    </figure>);

}

// ── Offer ──────────────────────────────────────
const OFFER = [
'Acesso à operação NewB via sistema PAMM',
'Conta própria em corretora regulamentada (seu dinheiro, seu controle)',
'Espelhamento automático das operações, sem você precisar fazer nada',
'Acompanhamento em tempo real pela plataforma da corretora',
'Suporte direto pelo WhatsApp com a equipe NewB',
'Sem contrato de permanência, saque quando quiser'];

function Offer() {
  return (
    <section className="sec" id="oferta">
      <span className="secnum"></span>
      <div className="wrap-narrow">
        <div className="eyebrow reveal" style={{ fontSize: "15px" }}>O que você recebe</div>
        <h2 className="h-section reveal" style={{ fontFamily: "Raleway" }}>
          Não existe produto para comprar.<br />
          <em style={{ fontFamily: "Raleway", fontWeight: "400" }}>Existe acesso para conquistar.</em>
        </h2>
        <p className="lede reveal" style={{ fontSize: "20px" }}>O que a NewB oferece é acesso a uma operação extremamente consistente.
Veja o que você tem ao participar:

        </p>
        <ul className="offer-list reveal">
          {OFFER.map((o, i) =>
          <li key={i} style={{ fontSize: "18px" }}>
              <span className="offer-check" style={{ fontFamily: "\"DM Sans\"", fontSize: "6px" }}>✓</span>
              <span style={{ fontFamily: "\"DM Sans\"", fontSize: "17px" }}>{o}</span>
            </li>
          )}
        </ul>
      </div>
    </section>);

}

// ── Objections ─────────────────────────────────
const OBJECTIONS = [
{ q: 'Parece golpe. Como sei que é confiável?',
  a: 'Faz todo sentido desconfiar, o mercado financeiro digital está cheio de esquemas. A diferença da NewB é estrutural: seu dinheiro nunca sai da sua conta. Você abre a conta diretamente na corretora, você mesmo faz o depósito, você mesmo pode sacar. A NewB nunca toca no seu capital. Sete anos de operação contínua e clientes reais que você pode conhecer são a nossa prova.' },
{ q: 'Preciso saber alguma coisa sobre Forex?',
  a: 'Não é necessário. A operação é feita pela NewB, você não precisa tomar nenhuma decisão técnica. O sistema PAMM espelha automaticamente o que fazemos na sua conta. Dito isso, entender o mínimo do mercado é sempre uma escolha saudável, e a equipe da NewB está disponível para conversar sobre isso quando você quiser.' },
{ q: 'E se eu perder tudo?',
  a: 'Nossa estratégia é conservadora por escolha, não por limitação. Operamos buscando consistência em qualquer fase do mercado, com drawdowns historicamente baixos. Nenhum investimento é isento de risco, e somos transparentes sobre isso. O que podemos mostrar é um histórico que fala por si. Antes de qualquer decisão, você conversa com a nossa equipe, acessa os dados e decide com segurança.' }];

function Objections() {
  return (
    <section className="sec" id="objecoes">
      <span className="secnum"></span>
      <div className="wrap">
        <div className="eyebrow reveal" style={{ fontSize: "15px" }}>Conversa honesta</div>
        <h2 className="h-section reveal" style={{ maxWidth: 760, fontFamily: "Raleway" }}>
          As perguntas que você está fazendo <em style={{ fontFamily: "Raleway", fontWeight: "400" }}>agora mesmo</em>.
        </h2>
        <p className="lede reveal" style={{ maxWidth: 680, marginBottom: 48 }}>Clique para ler a resposta completa.

        </p>
        <div className="obj-grid reveal">
          {OBJECTIONS.map((o, i) =>
          <div className="obj" key={i}>
              <h3 className="obj-q" style={{ fontFamily: "Raleway" }}>{o.q}</h3>
              <p className="obj-a" style={{ fontFamily: "\"DM Sans\"" }}>{o.a}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ── FAQ ────────────────────────────────────────
const FAQ = [
{ q: 'O meu dinheiro fica com a NewB?',
  a: 'Não. Seu dinheiro fica na sua conta, dentro da corretora parceira. A NewB nunca tem acesso direto ao seu capital, apenas espelha as operações via sistema PAMM.' },
{ q: 'Preciso saber operar Forex?',
  a: 'Não é necessário. A operação é 100% conduzida pela NewB. Você acompanha os resultados pela plataforma da corretora, em tempo real, sem precisar tomar nenhuma decisão técnica.' },
{ q: 'Quanto preciso ter para começar?',
  a: 'O depósito mínimo para ter acesso à operação é de US$ 1.000. Esse valor é depositado diretamente na sua conta da corretora, e segue sob o seu controle, a NewB nunca toca no capital.' },
{ q: 'E se eu quiser sacar meu dinheiro?',
  a: 'Você saca quando quiser. Não há contrato de permanência, não há multa e não há carência.\nO controle é seu.' },
{ q: 'Como funciona o atendimento?',
  a: 'Nossa equipe te atende diretamente no WhatsApp. De lá, conduzimos você em cada passo:\nabertura da conta na corretora, configuração do PAMM e acompanhamento contínuo.' },
{ q: 'Quanto a NewB cobra?',
  a: 'Nada. O depósito mínimo não é uma taxa de entrada.' },
{ q: 'Isso serve para quem nunca investiu fora do Brasil?',
  a: 'Sim. A maioria dos nossos clientes começou exatamente assim.\nO processo de abertura de conta é simples, e nossa equipe te acompanha em cada etapa.' }];

function Faq() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="sec" id="faq">
      <span className="secnum"></span>
      <div className="wrap-narrow">
        <div className="eyebrow reveal" style={{ fontSize: "15px" }}>Perguntas frequentes</div>
        <h2 className="h-section reveal" style={{ fontFamily: "Raleway" }}>
          O que normalmente <em style={{ fontFamily: "Raleway", fontWeight: "400" }}>perguntam</em> primeiro.
        </h2>
        <div className="faq reveal" style={{ marginTop: 48 }}>
          {FAQ.map((f, i) =>
          <div className={`faq-item ${open === i ? 'open' : ''}`} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                <span>{f.q}</span>
                <span className="faq-icn" aria-hidden="true"></span>
              </button>
              <div className="faq-a"><div className="faq-a-inner" style={{ whiteSpace: "pre-line", fontWeight: "500" }}>{f.a}</div></div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ── Final CTA + PS ─────────────────────────────
function Final({ ctaLabel, ctaNote }) {
  return (
    <section className="final" id="contato">
      <DottedSurface color="#c9a55c" />
      <span className="secnum"></span>
      <div className="wrap-narrow" style={{ position: 'relative', zIndex: 1 }}>
        <div className="eyebrow reveal" style={{ justifyContent: 'center', fontSize: "15px" }}>O próximo passo</div>
        <h2 className="h-section reveal" style={{ fontFamily: "Raleway" }}>
          Você chegou até aqui porque <em style={{ fontWeight: "400" }}>algo fez sentido</em>.
        </h2>
        <p className="lede reveal" style={{ textAlign: "left", maxWidth: 620, margin: "48px auto 0", fontSize: "18px" }}>
          Talvez seja a ideia de investir em dólar sem abrir mão do controle.<br />
          Talvez seja a possibilidade de ir além da poupança, do CDB, do Tesouro.<br />
          Talvez seja simplesmente a curiosidade de entender como isso funciona.
        </p>
        <p className="reveal" style={{
          marginTop: 32, fontFamily: 'var(--serif)', fontStyle: 'italic',
          fontWeight: 300, color: 'var(--gold)', fontSize: "22px"
        }}>
          Uma conversa. Sem compromisso. Sem pressão.
        </p>

        <div className="reveal" style={{ marginTop: 48, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
          <a className="btn lg" href={window.NEWB_WHATSAPP || "https://wa.me/551153045331"} target="_blank" rel="noopener noreferrer" style={{ padding: '20px 40px', fontSize: 14, fontFamily: "\"DM Sans\"", fontWeight: "600" }}>
            {ctaLabel} <span className="arrow">→</span>
          </a>
          <span className="hero-cta-note" style={{ fontSize: "15px" }}>{ctaNote}</span>
        </div>

        <p className="eternal reveal" style={{ fontSize: "15px" }}></p>

        <aside className="ps reveal">
          <div className="ps-lbl" style={{ fontSize: "13px" }}>P.S.</div>
          <p className="ps-text" style={{ fontFamily: "\"DM Sans\"" }}>
            Se você ainda está aqui, provavelmente o que te segura é a
            dúvida sobre confiar. Faz sentido. Nossa sugestão:
            <em style={{ color: 'var(--gold)', fontWeight: "500" }}> não confie ainda</em>.
            Venha conversar primeiro. Veja o histórico. Conheça a operação.
            Aí você decide.
          </p>
          <p className="ps-text" style={{ marginBottom: 0 }}>
             
            <em></em>
          </p>
        </aside>
      </div>
    </section>);

}

// ── Sticky CTA ─────────────────────────────────
function StickyCTA({ ctaLabel }) {
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY;
      const max = document.body.scrollHeight - window.innerHeight;
      setShow(y > 800 && y < max - 600);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <div className={`sticky-cta ${show ? 'show' : ''}`}>
      <span className="text" style={{ fontSize: "17px" }}>
        Sete anos de operação. <em style={{ fontSize: "18px" }}>Seu controle.</em> Uma conversa.
      </span>
      <a className="btn" href={window.NEWB_WHATSAPP || "https://wa.me/551153045331"} target="_blank" rel="noopener noreferrer" style={{ fontSize: "15px", fontFamily: "\"DM Sans\"" }}>
        {ctaLabel} <span className="arrow">→</span>
      </a>
    </div>);

}

// ── Footer ─────────────────────────────────────
function Footer() {
  return (
    <footer className="ftr">
      <div style={{ fontSize: "13px", fontFamily: "Raleway" }}>NewB · 2026</div>
      <div style={{ fontSize: "13px", fontFamily: "Raleway" }}>Operação Forex · Sistema PAMM · Corretoras regulamentadas</div>
    </footer>);

}

Object.assign(window, {
  Ticker, Header, Hero, Opening, Pains, Solution,
  Benefits, Prova, Offer, Objections, Faq, Final,
  StickyCTA, Footer, useReveal
});