// dobras.jsx — dobras 2 a 8 (excluding hero=1 and CTA=9)
const { IconSearch, IconShield, IconCoins, IconHammer, IconChat, IconCheck, IconChart, IconLayers, IconTimer, IconArrowRight, IconArrowUpRight, IconBell, IconFolder, IconCompass, IconKey, IconHandshake, IconBrain, IconHouse, IconDoc } = window.Icons;

// ========== Dobra 2 — Tensão do mercado (variantes) ==========

const PARALLEL_TOOLS_PATH = '/assets/tools/';

// Ferramentas reais usadas hoje em paralelo por quem opera flip imobiliário
const TENSAO_TOOLS = [
  { name: 'WhatsApp',     logo: 'whatsapp.jpg',     hint: 'Leads & corretores' },
  { name: 'Excel',        logo: 'excel.png',        hint: 'Planilha financeira' },
  { name: 'OLX',          logo: 'olx.png',          hint: 'Garimpo' },
  { name: 'Adobe PDF',    logo: 'adobe_pdf.png',    hint: 'Matrícula & editais' },
  { name: 'Google Drive', logo: 'google_drive.png', hint: 'Pasta da operação' },
  { name: 'Conta Azul',   logo: 'conta_azul.png',   hint: 'Financeiro' },
  { name: 'Notas',        logo: 'notas_apple.png',  hint: 'Orçamento de obra' },
  { name: 'Autentique',   logo: 'autentique.webp',  hint: 'Contratos' },
  { name: 'Google Maps',  logo: 'google_maps.png',  hint: 'Análise de região' },
];

// Categorias para a vista "antes": ferramentas reais agrupadas por função
// operacional. Cada stack mostra 4 logos visíveis + um contador "+N" pra
// transmitir profundidade sem virar inventário.
const TENSAO_CATEGORIES = [
  {
    label: 'Garimpo de oportunidades',
    logos: ['olx.png', 'zap.jpg', 'viva_real.png', 'chaves_na_mao.png'],
    extra: 4, // sites de leiloeiro, portais regionais, indicações
  },
  {
    label: 'Análise de mercado',
    logos: ['google_maps.png', 'ibge.jpg', 'gpt.jpg', 'excel.png'],
    extra: 3, // calculadoras, comparáveis, relatórios próprios
  },
  {
    label: 'Jurídico & risco',
    logos: ['adobe_pdf.png', 'word.png', 'gpt.jpg', 'google_drive.png'],
    extra: 3, // sites de tribunais, matrículas, editais
  },
  {
    label: 'Comunicação & leads',
    logos: ['whatsapp.jpg', 'email.webp', 'instagram.png', 'telegram.jpeg'],
    extra: 2, // Facebook, GPT
  },
  {
    label: 'CRM & negociação',
    logos: ['monday_crm.webp', 'click_up_crm.png', 'asana_crm.png', 'trello.png'],
    extra: 2, // HubSpot free, Pipedrive
  },
  {
    label: 'Documentos & contratos',
    logos: ['google_drive.png', 'adobe_pdf.png', 'autentique.webp', 'dropbox.png'],
    extra: 3, // OneDrive, Word, Notas
  },
  {
    label: 'Financeiro & repasses',
    logos: ['excel.png', 'conta_azul.png', 'omie.png', 'pix.png'],
    extra: 3, // Split Wise, recibos PDF, extratos
  },
  {
    label: 'Reforma & prestadores',
    logos: ['canva.png', 'word.png', 'notas_apple.png', 'whatsapp.jpg'],
    extra: 4, // orçamentos, fotos, recibos, escopos
  },
  {
    label: 'Tarefas & cronograma',
    logos: ['google_calendar.png', 'trello.png', 'asana_crm.png', 'notas_apple.png'],
    extra: 3, // post-its, lembretes do celular, planilha de prazos
  },
];

// Conjunto extra (usado em windows como abas) — combina garimpo + comunicação + CRMs reais
const TENSAO_BROWSER_TABS = [
  { logo: 'olx.png',          title: 'OLX · imóveis em São Paulo',    url: 'olx.com.br/imoveis' },
  { logo: 'whatsapp.jpg',     title: 'WhatsApp Web · 47 não lidas',   url: 'web.whatsapp.com' },
  { logo: 'zap.jpg',          title: 'ZAP · Vila Vera 2 dorm',        url: 'zapimoveis.com.br' },
  { logo: 'excel.png',        title: 'Casa Vila Vera — Planilha.xlsx', url: 'onedrive · Excel' },
  { logo: 'adobe_pdf.png',    title: 'Matricula-345-vila-vera.pdf',   url: 'Adobe Acrobat' },
  { logo: 'autentique.webp',  title: 'Contrato compra · Autentique',  url: 'app.autentique.com.br' },
  { logo: 'trello.png',       title: 'Pipeline reforma · Trello',     url: 'trello.com/b/operacao' },
];

const TENSAO_ETAPAS = () => [
  { icon: <IconSearch size={14} />, lbl: 'Garimpo' },
  { icon: <IconShield size={14} />, lbl: 'Jurídica' },
  { icon: <IconCoins size={14} />, lbl: 'Financeiro' },
  { icon: <IconHammer size={14} />, lbl: 'Reforma' },
  { icon: <IconChat size={14} />, lbl: 'Comercial' },
  { icon: <IconCheck size={14} />, lbl: 'Fechamento' },
];

function TensaoHead() {
  return (
    <div className="section-head">
      <h2 className="h-display lg">O mercado evoluiu.<br/>A gestão ficou espalhada</h2>
      <p className="lede">Hoje, quem opera flip imobiliário precisa lidar com muitas frentes ao mesmo tempo — e boa parte delas ainda acontece em ferramentas separadas, conversas soltas e controles paralelos. O problema não é só organização. É tomar decisões importantes sem uma visão realmente integrada da operação.</p>
    </div>
  );
}

// ── Variante 1: Cards (card único de fragmentação, largura total) ────────────
//
// Coreografia em 6 fases scroll-scrubbed dentro do MESMO card:
//   A. Anticipation (0.00–0.10): stacks recuam levemente, aura insinua, setas
//      aparecem — telegrafa magnetismo antes da sucção.
//   B. Suction (0.10–0.50): stacks seguem motionPath curvo (control point
//      perpendicular) com per-card random delays + per-card duração variando
//      por depth-tier (far first, near last) — gravidade, não marcha.
//   C. Impact (0.50–0.62): pill flinch (squash+stretch real), brightness flash,
//      duas shockwave rings em stagger — sela a absorção.
//   D. Connector (0.58–0.66): linha vertical sai pela base do banner.
//   E. Birth (0.62–0.86): clip-path do frame de vídeo expande da silhueta
//      do pill (inset 50% round 999px → inset 0 round 18px) — frame nasce
//      do portal, não escala como modal.
//   F. Settle (0.86–1.00): caption SplitType caractere a caractere.
function TensaoCards() {
  const cardRef = React.useRef(null);

  React.useEffect(() => {
    const card = cardRef.current;
    if (!card) return;
    const win = window;
    const gsap = win.gsap;
    const ST = win.ScrollTrigger;
    if (!gsap || !ST) return;
    if (win.FH && win.FH.prefersReduced) return;

    const stacks = Array.from(card.querySelectorAll('.tool-stack'));
    const target = card.querySelector('.tensao-absorb-target');
    const aura   = card.querySelector('.tensao-absorb-aura');
    const arrows = card.querySelectorAll('.tensao-absorb-arrow');
    const conn   = card.querySelector('.tensao-absorb-conn');
    const shocks = card.querySelectorAll('.tensao-absorb-shock');
    const emerge = card.querySelector('.tensao-emerge');
    const stage  = card.querySelector('.tensao-emerge-stage');
    const frame  = card.querySelector('.tensao-emerge-frame');
    const caption = card.querySelector('.tensao-emerge-caption');
    if (!target || !emerge || !frame || !stage) return;

    // Mapeamento espelhado pela geometria do grid 3×3:
    //   - row (0=topo, 2=base) → tier de timing (linha mais distante do banner sai primeiro).
    //   - col (0=esq, 1=centro, 2=dir) → swirl (-1 = arco esq→centro, 0 = reto, +1 = arco dir→centro).
    // Resultado: pares mirror (col 0 ↔ col 2) deixam o grid no mesmo instante,
    // com curvas perfeitamente espelhadas; coluna central desce reta.
    stacks.forEach((s, i) => {
      const row = Math.floor(i / 3);
      const col = i % 3;
      const colOffset = col - 1; // -1, 0, +1
      s.dataset.row    = row.toString();
      s.dataset.col    = col.toString();
      s.dataset.swirl  = colOffset.toString();
      s.dataset.depth  = row.toString();
    });

    // Per-stack: dx, dy, control point perpendicular to direct line for arc.
    const compute = () => {
      const tRect = target.getBoundingClientRect();
      const tx = tRect.left + tRect.width / 2;
      const ty = tRect.top  + tRect.height / 2;
      stacks.forEach((s) => {
        const r = s.getBoundingClientRect();
        const sx = r.left + r.width / 2;
        const sy = r.top  + r.height / 2;
        const dx = tx - sx;
        const dy = ty - sy;
        const len = Math.hypot(dx, dy) || 1;
        const px = -dy / len;            // perpendicular
        const py =  dx / len;
        const swirl = parseInt(s.dataset.swirl || '1', 10);
        const cpDist = 60 + Math.abs(dx) * 0.18;
        s.dataset.dx  = dx.toFixed(1);
        s.dataset.dy  = dy.toFixed(1);
        s.dataset.cpx = (dx * 0.4 + px * cpDist * swirl).toFixed(1);
        s.dataset.cpy = (dy * 0.4 + py * cpDist * swirl).toFixed(1);
      });
    };
    compute();

    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: card,
        start: 'top 45%',
        // Timeline encerra quando o TOP do stage está a 180px do topo da
        // viewport — chrome do demo bem visível abaixo da header do site,
        // com respiro acima. Offset em pixels (não %) garante mesma posição
        // visual em qualquer tamanho de tela.
        endTrigger: stage,
        end: 'top 180px',
        scrub: 0.35,
        invalidateOnRefresh: true,
        onRefresh: compute,
      },
    });

    // ── A · Aura + setas insinuam (0.00 – 0.06) — sem recoil dos stacks ────
    tl.fromTo(aura, { scale: 0.4, opacity: 0 },
      { scale: 0.7, opacity: 0.35, ease: 'sine.out', duration: 0.08 }, 0);
    tl.fromTo(arrows, { opacity: 0, y: -8 },
      { opacity: 0.7, y: 0, ease: 'power2.out', stagger: 0.018, duration: 0.12 }, 0.02);

    // ── B · Suction (0.00 – 0.46) — simétrico, espelhado por coluna ────────
    stacks.forEach((s) => {
      const row = parseInt(s.dataset.row || '0', 10);
      const col = parseInt(s.dataset.col || '1', 10);
      const colOffset = col - 1; // -1, 0, +1
      const tierDelay = row === 0 ? 0    : (row === 1 ? 0.04 : 0.08);
      const dur       = row === 0 ? 0.34 : (row === 1 ? 0.40 : 0.46);
      const finalScl  = row === 0 ? 0.10 : (row === 1 ? 0.14 : 0.18);
      const blurPx    = row === 0 ? 3    : (row === 1 ? 4    : 5);
      // Rotação espelhada: esq tilta CW, centro 0, dir tilta CCW.
      const rotEnd    = -colOffset * 14;
      tl.to(s, {
        motionPath: {
          path: () => [
            { x: 0, y: 0 },
            { x: parseFloat(s.dataset.cpx || '0'), y: parseFloat(s.dataset.cpy || '0') },
            { x: parseFloat(s.dataset.dx  || '0'), y: parseFloat(s.dataset.dy  || '0') },
          ],
          curviness: 1.5,
        },
        scale: finalScl,
        opacity: 0,
        rotate: rotEnd,
        filter: `blur(${blurPx}px)`,
        ease: 'power4.in',
        duration: dur,
      }, tierDelay);
    });

    tl.fromTo(target,
      { scale: 0.9, opacity: 0, filter: 'brightness(1)' },
      { scale: 1, opacity: 1, ease: 'back.out(1.4)', duration: 0.22 }, 0.10);
    tl.to(aura, { scale: 1.15, opacity: 0.95, ease: 'power2.out', duration: 0.26 }, 0.10);

    // ── C · Impact (0.46 – 0.58): pulse de scale uniforme + brightness flash
    //   Sem squash X/Y separado — o lockup tem texto nativo, mas pulse uniforme
    //   preserva proporção. Brightness mais contido (1.18) evita flash duro. ─
    tl.to(target, {
      scale: 1.06,
      filter: 'brightness(1.18)',
      ease: 'power3.out', duration: 0.07,
    }, 0.46);
    tl.to(target, {
      scale: 1,
      filter: 'brightness(1)',
      ease: 'back.out(2)', duration: 0.16,
    }, 0.53);

    if (shocks[0]) {
      tl.fromTo(shocks[0], { scale: 0, opacity: 0.55 },
        { scale: 2.6, opacity: 0, ease: 'power2.out', duration: 0.40 }, 0.46);
    }
    if (shocks[1]) {
      tl.fromTo(shocks[1], { scale: 0, opacity: 0.4 },
        { scale: 2.0, opacity: 0, ease: 'power2.out', duration: 0.36 }, 0.50);
    }
    tl.to(arrows, { opacity: 0, y: 10, ease: 'power2.in', duration: 0.12 }, 0.40);

    // ── D · Connector (0.54 – 0.62) ────────────────────────────────────────
    tl.fromTo(conn, { scaleY: 0, opacity: 0 },
      { scaleY: 1, opacity: 1, ease: 'expo.out', duration: 0.14 }, 0.54);

    // ── E · Birth (0.58 – 0.86) — frame de vídeo nasce do portal ───────────
    tl.fromTo(emerge, { opacity: 0 },
      { opacity: 1, ease: 'power1.out', duration: 0.10 }, 0.58);
    tl.fromTo(frame,
      {
        '--inset-tb': '50%', '--inset-lr': '45%', '--inset-radius': '999px',
        y: -22, rotateX: 7, transformPerspective: 900, opacity: 0,
      },
      {
        '--inset-tb': '0%', '--inset-lr': '0%', '--inset-radius': '18px',
        y: 0, rotateX: 0, opacity: 1,
        ease: 'expo.out', duration: 0.26,
      }, 0.60);

    // ── F · Settle (0.86 – 1.00) — disclaimer overlay sobe suavemente ──────
    if (caption) {
      tl.fromTo(caption,
        { opacity: 0, y: 12 },
        { opacity: 1, y: 0, ease: 'power3.out', duration: 0.18 }, 0.86);
    }

    // ── Gate de resistência ────────────────────────────────────────────────
    //   Quando o stage centraliza, capturamos o scroll: rolar pra baixo
    //   "carrega" o anel circular como se fosse uma resistência. Ao
    //   completar, dispara a explosão (partículas + ondas) e libera.
    //   É o momento de intencionalidade — o usuário precisa demonstrar
    //   intenção pra passar do recorte do produto.
    const gate     = card.querySelector('.tensao-gate');
    const handle   = card.querySelector('.tensao-gate-handle');
    const label    = card.querySelector('.tensao-gate-label');
    const burst    = card.querySelector('.tensao-gate-burst');
    const sparks   = card.querySelectorAll('.tensao-gate-spark');
    const closeBtn = card.querySelector('.tec-caption-close');

    // ── Auto-dismiss do disclaimer ─────────────────────────────────────────
    let dismissTimer = 0;
    let captionDismissed = false;
    const dismissCaption = () => {
      if (captionDismissed || !caption) return;
      captionDismissed = true;
      clearTimeout(dismissTimer);
      gsap.to(caption, {
        opacity: 0, y: 6, duration: 0.35, ease: 'power2.out',
        onComplete: () => { caption.style.pointerEvents = 'none'; },
      });
    };
    const scheduleDismiss = () => {
      if (captionDismissed) return;
      clearTimeout(dismissTimer);
      dismissTimer = setTimeout(dismissCaption, 7000);
    };
    if (closeBtn) closeBtn.addEventListener('click', dismissCaption);

    let charge = 0;
    let locked = false;
    let unlocked = false;

    const setCharge = (t) => {
      charge = Math.max(0, Math.min(1, t));
      if (gate) gate.style.setProperty('--charge', charge.toString());
    };

    const explode = () => {
      if (unlocked) return;
      unlocked = true;
      locked = false;
      if (win.FH) win.FH.gateLocked = false;
      if (label) label.textContent = 'Pronto';
      gate.classList.add('is-unlocked');
      // Punch no handle ao "encaixar" no fim do trilho
      if (handle) {
        gsap.fromTo(handle,
          { scale: 1 },
          { scale: 1.18, duration: 0.12, ease: 'power3.out',
            onComplete: () => gsap.to(handle, { scale: 1, duration: 0.25, ease: 'back.out(2.4)' }) });
      }
      // Onda de choque expandindo a partir do handle
      if (burst) {
        gsap.fromTo(burst,
          { scale: 0, opacity: 0.85 },
          { scale: 8, opacity: 0, duration: 0.75, ease: 'expo.out' });
      }
      // Partículas radiais a partir do handle
      sparks.forEach((sp, i) => {
        const angle = (i / sparks.length) * Math.PI * 2;
        const dist = 90 + Math.random() * 30;
        gsap.fromTo(sp,
          { x: 0, y: 0, opacity: 1, scale: 1 },
          {
            x: Math.cos(angle) * dist,
            y: Math.sin(angle) * dist,
            opacity: 0, scale: 0.3,
            duration: 0.7, ease: 'expo.out',
            delay: Math.random() * 0.05,
          });
      });
      // Gate fade-out
      gsap.to(gate, {
        y: -10, opacity: 0, duration: 0.45, delay: 0.25, ease: 'power2.out',
        onComplete: () => { gate.style.pointerEvents = 'none'; }
      });
    };

    const showGate = () => {
      if (unlocked) return;
      locked = true;
      // Lock só pra baixo — Lenis continua rodando pra rolagem pra cima
      // funcionar normalmente. Bloqueio é via preventDefault no wheel/touch.
      if (win.FH) win.FH.gateLocked = true;
      gsap.fromTo(gate,
        { opacity: 0, y: 8 },
        { opacity: 1, y: 0, duration: 0.5, ease: 'power3.out' });
      // Inicia auto-dismiss do disclaimer (7s) — usuário já está parado
      // contemplando a tela do demo, é o momento certo de começar a contar.
      scheduleDismiss();
    };

    const resetGate = () => {
      locked = false;
      unlocked = false;
      if (win.FH) win.FH.gateLocked = false;
      setCharge(0);
      if (label) label.textContent = 'Mantenha rolando para liberar';
      gate.classList.remove('is-unlocked');
      gate.style.pointerEvents = '';
      gsap.to(gate, { opacity: 0, duration: 0.3 });
    };

    const lockTrigger = ST.create({
      trigger: stage,
      // Lock engata quando o TOP do stage atinge 180px da viewport — mesmo
      // ponto do fim da timeline. Chrome visível acima, gate visível abaixo.
      // Stage tem max-height: calc(100vh - 360px) no CSS, fitting garantido.
      start: 'top 180px',
      end: 'top 100px',
      onEnter: showGate,
      onLeaveBack: resetGate,
    });

    // Decay da carga quando o usuário para de rolar — sensação de elástico
    let decayRAF = 0;
    const startDecay = () => {
      cancelAnimationFrame(decayRAF);
      const tick = () => {
        if (!locked || unlocked) return;
        if (charge > 0) {
          setCharge(charge - 0.008);
          decayRAF = requestAnimationFrame(tick);
        }
      };
      decayRAF = requestAnimationFrame(tick);
    };
    let decayTimer = 0;
    const scheduleDecay = () => {
      clearTimeout(decayTimer);
      decayTimer = setTimeout(startDecay, 220);
    };

    const onWheel = (e) => {
      if (!locked || unlocked) return;
      // Subida (deltaY <= 0) passa direto — Lenis processa normalmente.
      if (e.deltaY <= 0) return;
      e.preventDefault();
      // stopImmediatePropagation impede o listener do Lenis (mesmo target)
      // de processar a roda pra baixo enquanto o gate tá ativo.
      e.stopImmediatePropagation();
      // Carga leve — ~5 cliques de scroll wheel preenchem (deltaY típico ~100).
      setCharge(charge + Math.abs(e.deltaY) / 600);
      scheduleDecay();
      if (charge >= 1) explode();
    };

    let touchStart = 0;
    const onTouchStart = (e) => {
      if (e.touches[0]) touchStart = e.touches[0].clientY;
    };
    const onTouchMove = (e) => {
      if (!locked || unlocked) return;
      if (!e.touches[0]) return;
      const dy = touchStart - e.touches[0].clientY;
      // Swipe pra cima (dy <= 0) passa direto — só bloqueia descida.
      if (dy <= 0) return;
      e.preventDefault();
      e.stopImmediatePropagation();
      // Touch também mais leve — preenche em 1-2 swipes curtos.
      setCharge(charge + dy / 450);
      touchStart = e.touches[0].clientY;
      scheduleDecay();
      if (charge >= 1) explode();
    };

    win.addEventListener('wheel', onWheel, { passive: false, capture: true });
    win.addEventListener('touchstart', onTouchStart, { passive: true });
    win.addEventListener('touchmove', onTouchMove, { passive: false, capture: true });

    return () => {
      tl.scrollTrigger && tl.scrollTrigger.kill();
      tl.kill();
      lockTrigger.kill();
      win.removeEventListener('wheel', onWheel, { capture: true });
      win.removeEventListener('touchstart', onTouchStart);
      win.removeEventListener('touchmove', onTouchMove, { capture: true });
      cancelAnimationFrame(decayRAF);
      clearTimeout(decayTimer);
      clearTimeout(dismissTimer);
      if (closeBtn) closeBtn.removeEventListener('click', dismissCaption);
      if (win.FH) win.FH.gateLocked = false;
      const lenis = win.FH && win.FH.lenis;
      if (lenis && lenis.start) lenis.start();
      gsap.set(stacks, { clearProps: 'all' });
    };
  }, []);

  return (
    <div className="contrast-grid contrast-grid--full">
      <div className="contrast-card before tensao-card" ref={cardRef}>
        <span className="card-eyebrow">Antes · Hoje</span>
        <h3>Operação espalhada em diversas ferramentas</h3>
        <div className="tool-stacks tool-stacks--full">
          {TENSAO_CATEGORIES.map((cat, i) => (
            <div key={i} className="tool-stack">
              <div className="ts-logos">
                {cat.logos.map((logo, j) => (
                  <span key={j} className="ts-logo" style={{ '--i': j }}>
                    <img src={PARALLEL_TOOLS_PATH + logo} alt="" />
                  </span>
                ))}
                <span className="ts-more">+{cat.extra}</span>
              </div>
              <div className="ts-label">{cat.label}</div>
            </div>
          ))}
        </div>
        <div className="tool-stacks-footer">
          + post-its no monitor, anotações no celular, e o que você lembra de cabeça
        </div>

        {/* Outro de absorção + emergência — mesma card. */}
        <div className="tensao-absorb" aria-hidden="true">
          <span className="tensao-absorb-arrow">↓</span>
          <span className="tensao-absorb-arrow">↓</span>
          <span className="tensao-absorb-arrow">↓</span>
          <div className="tensao-absorb-aura"></div>
          {/* Shockwave rings — sob o banner, expandem no impacto */}
          <span className="tensao-absorb-shock"></span>
          <span className="tensao-absorb-shock"></span>
          <div className="tensao-absorb-target">
            <span className="tensao-absorb-lockup">
              <img className="tensao-absorb-mark"
                   src="assets/logo-mark-white.png"
                   alt="" aria-hidden="true" />
              <span className="tensao-absorb-wordmark">Flipper Hub</span>
            </span>
            <span className="tensao-absorb-divider" aria-hidden="true"></span>
            <span className="tensao-absorb-tag">Tudo conectado ao imóvel certo</span>
          </div>
          {/* Linha conectora — banner → vídeo */}
          <div className="tensao-absorb-conn"></div>
        </div>

        {/* Frame interativo — demo clicável do Flipper Hub.
            Emerge da silhueta do banner durante a fase E (clip-path birth). */}
        <div className="tensao-emerge">
          <div className="tensao-emerge-stage">
          <div className="tensao-emerge-frame">
            <div className="tensao-emerge-chrome">
              <span className="tec-dot"></span>
              <span className="tec-dot"></span>
              <span className="tec-dot"></span>
              <span className="tec-url">app.flipperhub.com.br</span>
            </div>
            <div className="tensao-emerge-demo">
              {window.FlipperDemo ? <window.FlipperDemo /> : null}
            </div>
            <div className="tensao-emerge-caption" role="note">
              <span className="tec-caption-icon" aria-hidden="true">
                <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
                  <circle cx="8" cy="8" r="7" stroke="currentColor" strokeWidth="1.4"/>
                  <path d="M8 7v4M8 5h.01" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
                </svg>
              </span>
              <span className="tec-caption-text">
                <strong>Visualização ilustrativa.</strong> Explore livremente — o produto completo tem mais módulos, profundidade operacional e configurabilidade por operação. Layout e design da plataforma podem variar.
              </span>
              <button
                className="tec-caption-close"
                aria-label="Fechar aviso"
                onClick={(e) => {
                  const cap = e.currentTarget.closest('.tensao-emerge-caption');
                  if (cap) cap.style.display = 'none';
                }}
              >
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                  <path d="M2 2l8 8M10 2l-8 8" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
                </svg>
              </button>
            </div>
          </div>
          </div>
          {/* Gate de resistência — slider horizontal estilo iOS unlock,
              com o mark do Flipper Hub como handle. Conforme o usuário
              rola, o mark desliza pro fim do trilho. Ao chegar: explosão. */}
          <div className="tensao-gate" aria-hidden="true">
            <div className="tensao-gate-track">
              <span className="tensao-gate-trail"></span>
              <span className="tensao-gate-target"></span>
              <span className="tensao-gate-burst"></span>
              <span className="tensao-gate-handle">
                <img src="assets/logo-mark-blue.png" alt="" />
              </span>
              {Array.from({ length: 14 }).map((_, i) => (
                <span key={i} className="tensao-gate-spark" style={{ '--i': i, '--n': 14 }}></span>
              ))}
            </div>
            <span className="tensao-gate-label">Mantenha rolando para liberar</span>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Variante 2: Windows (abas/janelas sobrepostas vs Hub único) ──────────────
function TensaoWindows() {
  const tabs = TENSAO_BROWSER_TABS.slice(0, 5);
  const etapas = TENSAO_ETAPAS();
  return (
    <div className="contrast-grid windows-grid">
      <div className="contrast-card before windows-before">
        <span className="card-eyebrow">Antes · Hoje</span>
        <h3>Sete abas. Sete contextos</h3>
        <div className="window-stack">
          {tabs.map((t, i) => (
            <div key={i} className={`fake-window depth-${i}`} style={{ '--depth': i }}>
              <div className="fw-chrome">
                <div className="fw-dots"><span /><span /><span /></div>
                <div className="fw-favicon"><img src={PARALLEL_TOOLS_PATH + t.logo} alt="" /></div>
                <div className="fw-url">{t.url}</div>
              </div>
              <div className="fw-tabline">{t.title}</div>
              <div className="fw-content">
                <div className="fw-line w70" />
                <div className="fw-line w90" />
                <div className="fw-line w50" />
                <div className="fw-line w80" />
                <div className="fw-line w40" />
              </div>
            </div>
          ))}
        </div>
      </div>
      <div className="contrast-card after windows-after">
        <span className="card-eyebrow">Com Flipper Hub</span>
        <h3>Uma única tela. Todas as etapas</h3>
        <div className="hub-window">
          <div className="hw-chrome">
            <div className="fw-dots"><span /><span /><span /></div>
            <div className="hw-title">Flipper Hub · Casa Vila Vera</div>
          </div>
          <div className="hw-tabs">
            {etapas.map((e, i) => (
              <div key={i} className={`hw-tab ${i === 2 ? 'active' : ''}`}>
                {e.icon}<span>{e.lbl}</span>
              </div>
            ))}
          </div>
          <div className="hw-pane">
            <div className="hw-pane-h">
              <span>Financeiro</span>
              <span className="hw-pane-meta">R$ 418K aportado · margem projetada 18%</span>
            </div>
            <div className="hw-grid">
              <div className="hw-stat"><span className="hw-stat-l">Aporte</span><span className="hw-stat-v">R$ 418K</span></div>
              <div className="hw-stat"><span className="hw-stat-l">Custos</span><span className="hw-stat-v">R$ 92K</span></div>
              <div className="hw-stat"><span className="hw-stat-l">Margem</span><span className="hw-stat-v hw-pos">+18%</span></div>
            </div>
            <div className="hw-bar"><div className="hw-bar-fill" style={{ width: '62%' }} /></div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Variante 3: Constellation (visual único, imóvel central) ─────────────────
function TensaoConstellation() {
  const etapas = TENSAO_ETAPAS();
  const tools = TENSAO_TOOLS;
  // Inner ring: 6 etapas at hex angles
  const innerR = 145;
  const outerR = 270;
  const inner = etapas.map((e, i) => {
    const a = (i / 6) * Math.PI * 2 - Math.PI / 2;
    return { ...e, x: Math.cos(a) * innerR, y: Math.sin(a) * innerR, a };
  });
  const outer = tools.map((t, i) => {
    const a = (i / tools.length) * Math.PI * 2 - Math.PI / 2 + 0.18;
    const jitter = ((i * 37) % 28) - 14;
    return { ...t, x: Math.cos(a) * (outerR + jitter), y: Math.sin(a) * (outerR + jitter), a };
  });
  return (
    <div className="constellation-wrap">
      <div className="constellation-stage">
        <svg className="constellation-svg" viewBox="-360 -300 720 600" preserveAspectRatio="xMidYMid meet">
          <defs>
            <radialGradient id="conGlow" cx="50%" cy="50%" r="50%">
              <stop offset="0%" stopColor="rgba(58,130,246,0.16)" />
              <stop offset="60%" stopColor="rgba(58,130,246,0.04)" />
              <stop offset="100%" stopColor="rgba(58,130,246,0)" />
            </radialGradient>
            <linearGradient id="conLine" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0%" stopColor="rgba(58,130,246,0.5)" />
              <stop offset="100%" stopColor="rgba(58,130,246,0.1)" />
            </linearGradient>
          </defs>
          <circle cx="0" cy="0" r="180" fill="url(#conGlow)" />
          <circle cx="0" cy="0" r={innerR} fill="none" stroke="rgba(58,130,246,0.18)" strokeDasharray="2 6" />
          <circle cx="0" cy="0" r={outerR} fill="none" stroke="rgba(0,0,0,0.05)" strokeDasharray="1 5" />
          {/* inner connections (clean) */}
          {inner.map((p, i) => (
            <line key={`il-${i}`} x1="0" y1="0" x2={p.x} y2={p.y} stroke="url(#conLine)" strokeWidth="1.25" />
          ))}
          {/* outer broken connections (chaos) */}
          {outer.map((p, i) => (
            <path key={`ol-${i}`}
              d={`M${p.x * 0.55} ${p.y * 0.55} L${p.x * 0.78} ${p.y * 0.78} M${p.x * 0.85} ${p.y * 0.85} L${p.x} ${p.y}`}
              stroke="rgba(0,0,0,0.18)" strokeWidth="0.75" strokeDasharray="2 3" />
          ))}
        </svg>
        {/* Outer fragments (chaos, faded) — ferramentas reais */}
        {outer.map((t, i) => (
          <div key={`of-${i}`} className="con-fragment" style={{ left: `calc(50% + ${t.x}px)`, top: `calc(50% + ${t.y}px)` }}>
            <div className="con-frag-logo"><img src={PARALLEL_TOOLS_PATH + t.logo} alt={t.name} /></div>
            <div className="con-frag-label">{t.name}</div>
          </div>
        ))}
        {/* Inner etapas (orderly) */}
        {inner.map((e, i) => (
          <div key={`ie-${i}`} className="con-etapa" style={{ left: `calc(50% + ${e.x}px)`, top: `calc(50% + ${e.y}px)` }}>
            <div className="con-etapa-icon">{e.icon}</div>
            <div className="con-etapa-lbl">{e.lbl}</div>
          </div>
        ))}
        {/* Center imóvel */}
        <div className="con-center">
          <div className="con-center-card">
            <div className="con-center-thumb"><IconHouse size={20} /></div>
            <div className="con-center-meta">
              <div className="con-center-eyebrow">Operação</div>
              <div className="con-center-title">Casa Vila Vera</div>
              <div className="con-center-sub">São Paulo · ativa</div>
            </div>
          </div>
        </div>
      </div>
      <div className="constellation-caption">
        <div className="cc-left">
          <div className="cc-eyebrow">Antes</div>
          <p>Planilhas, conversas, documentos e controles paralelos vivem soltos, sem se conectarem ao imóvel certo.</p>
        </div>
        <div className="cc-right">
          <div className="cc-eyebrow brand">Com Flipper Hub</div>
          <p>A operação se reorganiza em torno do imóvel — cada etapa com seu lugar, seu histórico e seu próximo passo.</p>
        </div>
      </div>
    </div>
  );
}

// ── Variante 4: Flow (funil horizontal de convergência) ──────────────────────
function TensaoFlow() {
  const etapas = TENSAO_ETAPAS();
  const tools = TENSAO_TOOLS;
  // Position tools on left chaotically; etapas on right neatly
  const leftPositions = [
    { top: '6%', left: '2%' },
    { top: '14%', left: '34%' },
    { top: '24%', left: '8%' },
    { top: '38%', left: '28%' },
    { top: '46%', left: '4%' },
    { top: '60%', left: '32%' },
    { top: '70%', left: '6%' },
    { top: '82%', left: '24%' },
    { top: '90%', left: '40%' },
  ];
  return (
    <div className="flow-wrap">
      <div className="flow-stage">
        <div className="flow-col flow-col-l">
          <div className="flow-col-eyebrow">Antes · Hoje</div>
          <div className="flow-chaos">
            {tools.map((t, i) => (
              <div key={i} className="flow-frag" style={leftPositions[i]}>
                <span className="flow-frag-logo"><img src={PARALLEL_TOOLS_PATH + t.logo} alt={t.name} /></span>
                <span className="flow-frag-lbl">{t.name}</span>
              </div>
            ))}
          </div>
        </div>
        <svg className="flow-curves" viewBox="0 0 100 100" preserveAspectRatio="none">
          <defs>
            <linearGradient id="flowG" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0%" stopColor="rgba(0,0,0,0.18)" />
              <stop offset="55%" stopColor="rgba(58,130,246,0.55)" />
              <stop offset="100%" stopColor="rgba(58,130,246,0.85)" />
            </linearGradient>
          </defs>
          {[10, 25, 40, 55, 70, 85].map((y, i) => (
            <path key={i}
              d={`M0 ${y} C 30 ${y}, 40 50, 50 50 S 70 ${50 + (50 - y) * 0.6}, 100 ${50 + (50 - y) * 0.6}`}
              fill="none" stroke="url(#flowG)" strokeWidth="0.4" />
          ))}
        </svg>
        <div className="flow-col flow-col-c">
          <div className="flow-lens">
            <div className="flow-lens-inner">
              <div className="flow-lens-mark"><IconHouse size={20} /></div>
              <div className="flow-lens-lbl">Imóvel</div>
            </div>
            <div className="flow-lens-aura" />
          </div>
        </div>
        <div className="flow-col flow-col-r">
          <div className="flow-col-eyebrow brand">Com Flipper Hub</div>
          <div className="flow-order">
            {etapas.map((e, i) => (
              <div key={i} className="flow-etapa">
                <div className="flow-etapa-icon">{e.icon}</div>
                <div className="flow-etapa-lbl">{e.lbl}</div>
                <div className="flow-etapa-tick" />
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Variante 5: Convergência (cards à esquerda + diagrama à direita) ─────────
//
// Lado esquerdo: idêntico ao TensaoCards (4 quadrantes com clusters de logos).
// Lado direito: diagrama editorial — 4 streams das categorias do esquerdo
// fluem em curvas convergentes pra um único endpoint (card do imóvel).
// Substitui a grade tipográfica pelo storytelling visual de "muitos vira um".
function TensaoConvergencia() {
  // Convergência mantém 4 categorias pra casar com os 4 streams da SVG abaixo.
  // Pega Garimpo, Comunicação, Documentos e Financeiro.
  const cats = [TENSAO_CATEGORIES[0], TENSAO_CATEGORIES[3], TENSAO_CATEGORIES[5], TENSAO_CATEGORIES[6]];
  const convStreamYs = ['16.6%', '38.9%', '61.1%', '83.3%'];
  return (
    <div className="contrast-grid">
      <div className="contrast-card before">
        <span className="card-eyebrow">Antes · Hoje</span>
        <h3>Operação espalhada em diversas ferramentas</h3>
        <div className="tool-stacks">
          {cats.map((cat, i) => (
            <div key={i} className="tool-stack">
              <div className="ts-logos">
                {cat.logos.map((logo, j) => (
                  <span key={j} className="ts-logo" style={{ '--i': j }}>
                    <img src={PARALLEL_TOOLS_PATH + logo} alt="" />
                  </span>
                ))}
                <span className="ts-more">+{cat.extra}</span>
              </div>
              <div className="ts-label">{cat.label}</div>
            </div>
          ))}
        </div>
        <div className="tool-stacks-footer">
          + post-its no monitor, anotações no celular, e o que você lembra de cabeça
        </div>
      </div>
      <div className="contrast-card after conv-card">
        <span className="card-eyebrow">Com Flipper Hub</span>
        <h3>Tudo conectado em torno do imóvel</h3>
        <div className="conv-stage">
          <svg className="conv-svg" viewBox="0 0 600 360" preserveAspectRatio="none" aria-hidden="true">
            <defs>
              <linearGradient id="conv-grad" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%"   stopColor="rgba(58,130,246,0.18)" />
                <stop offset="55%"  stopColor="rgba(58,130,246,0.55)" />
                <stop offset="100%" stopColor="rgba(58,130,246,0.95)" />
              </linearGradient>
            </defs>
            {/* 4 streams convergindo no merge point (380, 180) */}
            <path d="M 30 60  C 200 60  300 110 380 180" className="conv-stream" />
            <path d="M 30 140 C 200 140 310 158 380 180" className="conv-stream" />
            <path d="M 30 220 C 200 220 310 202 380 180" className="conv-stream" />
            <path d="M 30 300 C 200 300 300 250 380 180" className="conv-stream" />
            {/* Trunk do merge até o destino */}
            <line x1="380" y1="180" x2="465" y2="180" className="conv-trunk" />
            {/* Pontos de origem nas streams */}
            <circle cx="30" cy="60"  r="3.5" className="conv-source" />
            <circle cx="30" cy="140" r="3.5" className="conv-source" />
            <circle cx="30" cy="220" r="3.5" className="conv-source" />
            <circle cx="30" cy="300" r="3.5" className="conv-source" />
            {/* Halo no ponto de merge */}
            <circle cx="380" cy="180" r="6" className="conv-merge" />
          </svg>
          <div className="conv-labels">
            {cats.map((c, i) => (
              <div key={i} className="conv-label" style={{ top: convStreamYs[i] }}>{c.label}</div>
            ))}
          </div>
          <div className="conv-dest">
            <div className="conv-dest-icon"><IconHouse size={18} /></div>
            <div className="conv-dest-title">Casa Vila Vera</div>
            <div className="conv-dest-sub">Operação ativa</div>
            <span className="conv-dest-pulse" aria-hidden="true"></span>
          </div>
        </div>
        <div className="tool-stacks-footer">
          tudo aqui dentro: do garimpo ao fechamento, ao redor do imóvel certo
        </div>
      </div>
    </div>
  );
}

function DobraTensao({ variant = 'cards' }) {
  const valid = ['cards', 'convergencia', 'windows', 'constellation', 'flow'];
  const v = valid.includes(variant) ? variant : 'cards';
  return (
    <section className="section surface" id="plataforma" data-tensao-variant={v}>
      <div className="container">
        <TensaoHead />
        {v === 'windows' && <TensaoWindows />}
        {v === 'constellation' && <TensaoConstellation />}
        {v === 'flow' && <TensaoFlow />}
        {v === 'cards' && <TensaoCards />}
        {v === 'convergencia' && <TensaoConvergencia />}
      </div>
    </section>
  );
}

// ========== Dobra 3 — Dor econômica (padrões de margem) ==========
//
// Demonstrativo editorial de uma operação tipo de R$ 200k. Em vez de
// "−2.0pp" (corporate), cada padrão mostra o que custa em reais — a
// linguagem que o operador brasileiro lê de imediato.
const OP_VALOR = 200000;
const MARGEM_PCT = 22;
const MARGEM_BRL = OP_VALOR * (MARGEM_PCT / 100); // R$ 44.000

const DECAY_DROPS = [
  {
    n: '01',
    title: 'Custos que aparecem só no fechamento',
    quote: '“O dinheiro ficou parado 8 meses. Isso também era custo.”',
    loss: 4000,
  },
  {
    n: '02',
    title: 'Obra que avança no escuro',
    quote: '“Foi semana passada que a obra parou? Ninguém me avisou.”',
    loss: 4000,
  },
  {
    n: '03',
    title: 'Decisão que ninguém lembra mais',
    quote: '“Por que a gente escolheu esse porcelanato mesmo?”',
    loss: 3000,
  },
  {
    n: '04',
    title: 'Versões diferentes da mesma operação',
    quote: '“O sócio achou 28%. O construtor achou 18%.”',
    loss: 5000,
  },
  {
    n: '05',
    title: 'Fechamento que depende de memória',
    quote: '“A prestação de contas atrasou 40 dias e o juro continuou correndo.”',
    loss: 4000,
  },
];

function brl(n) {
  return 'R$ ' + n.toLocaleString('pt-BR');
}


// Demonstrativo editorial em forma de balanço. Cabeçalho com a margem
// projetada, 5 linhas de vazamento (com −pp em tabular-nums), rodapé com a
// margem real e o delta. Estética próxima a um closing statement imobiliário.
function DobraDor() {
  const totalLoss = DECAY_DROPS.reduce((s, d) => s + d.loss, 0); // 20.000
  const realMargem = MARGEM_BRL - totalLoss;                     // 24.000
  const realPct = ((realMargem / OP_VALOR) * 100).toFixed(0);    // ~12

  return (
    <section className="section canvas">
      <div className="container">
        <div className="dor-wrap">
          <aside className="dor-aside">
            <span className="eyebrow">O custo invisível</span>
            <h2 className="h-display lg">A margem não se perde de uma vez.<br/>Ela escapa nos detalhes da operação.</h2>
            <p className="lede">No flip imobiliário, o resultado não é decidido só na entrada. É construído — ou comprometido — em cada decisão pequena que vive fora de uma visão integrada da operação.</p>
            <p className="dor-aside-body">Os exemplos ao lado são apenas alguns dos padrões que aparecem com frequência. Na rotina de quem opera, há dezenas — e cada operação carrega os seus.</p>
            <div className="dor-aside-quote">
              “A margem não se perde apenas na compra. Ela se perde na operação.”
            </div>
          </aside>

          <article className="ledger" aria-label="Demonstrativo de uma operação tipo">
            <header className="ledger-head">
              <span className="ledger-meta-eyebrow">Operação típica</span>
              <span className="ledger-meta-detail">R$ 200.000 investidos · 8 meses · ciclo completo</span>
            </header>

            {/* Barra visual: como os R$ 44.000 viram R$ 24.000 */}
            <div className="ledger-bar-block">
              <div className="ledger-bar-row">
                <div className="ledger-bar-side ledger-bar-side-l">
                  <span className="ledger-bar-side-label">Margem projetada</span>
                  <span className="ledger-bar-side-value">{brl(MARGEM_BRL)}</span>
                </div>
                <div className="ledger-bar" role="img" aria-label={`${brl(totalLoss)} consumidos pelos 5 padrões; ${brl(realMargem)} restantes.`}>
                  {DECAY_DROPS.map((d) => (
                    <span
                      key={d.n}
                      className="ledger-bar-bite"
                      style={{ flexGrow: d.loss }}
                      aria-hidden="true"
                    >
                      <span className="ledger-bar-bite-num">{d.n}</span>
                    </span>
                  ))}
                  <span className="ledger-bar-rest" style={{ flexGrow: realMargem }} aria-hidden="true">
                    <span className="ledger-bar-rest-label">restou</span>
                  </span>
                </div>
                <div className="ledger-bar-side ledger-bar-side-r">
                  <span className="ledger-bar-side-label">Margem real</span>
                  <span className="ledger-bar-side-value">{brl(realMargem)}</span>
                </div>
              </div>
              <div className="ledger-bar-caption">
                <span><strong>{brl(totalLoss)}</strong> escapam em alguns dos padrões mais frequentes</span>
              </div>
            </div>

            <p className="ledger-list-eyebrow">Cinco entre vários</p>
            <ol className="ledger-list">
              {DECAY_DROPS.map((d) => (
                <li key={d.n} className="ledger-row">
                  <span className="ledger-row-num">{d.n}</span>
                  <div className="ledger-row-body">
                    <h4 className="ledger-row-title">{d.title}</h4>
                    <p className="ledger-row-quote">{d.quote}</p>
                  </div>
                  <span className="ledger-row-delta">−{brl(d.loss)}</span>
                </li>
              ))}
              <li className="ledger-row ledger-row-more">
                <span className="ledger-row-num">+</span>
                <div className="ledger-row-body">
                  <h4 className="ledger-row-title">E outros padrões da operação</h4>
                  <p className="ledger-row-quote">Inadimplência de comprador, custo de capital subestimado, retrabalho de regularização, comissão extra de saída — cada operação carrega os seus.</p>
                </div>
              </li>
            </ol>

            <footer className="ledger-foot">
              <span className="ledger-foot-label">Diferença ao final da operação</span>
              <span className="ledger-foot-value">−{brl(totalLoss)}</span>
            </footer>
          </article>
        </div>
      </div>
    </section>
  );
}

// ========== Dobra 4 — Virada conceitual ==========
function DobraVirada() {
  return (
    <section className="section surface">
      <div className="container">
        <div className="concept-stage">

          <h2 className="concept-quote">
            Um imóvel não é só um ativo.<br/>
            <em>É uma operação</em>
          </h2>
          <p className="concept-sub">
            Por trás de cada imóvel existem etapas, decisões, pessoas, prazos, custos e desdobramentos que se conectam. Quando isso fica espalhado, a operação depende mais da memória do que da gestão. O Flipper Hub nasce para mudar essa lógica.
          </p>
        </div>
      </div>
    </section>
  );
}

// ========== Dobra 5 — Produto e prova ==========
function DobraProduto() {
  const points = [
    { icon: <IconHouse size={18} />, t: 'O imóvel como centro de controle', d: 'Cada operação reúne dados, pessoas, custos e próximos passos em uma única visão integrada.' },
    { icon: <IconLayers size={18} />, t: 'Etapas conectadas, não duplicadas', d: 'Garimpo, jurídico, financeiro, obra e comercial deixam de viver em silos paralelos.' },
    { icon: <IconBell size={18} />, t: 'O que está pendente, sempre visível', d: 'Pendências, prazos e decisões em aberto não dependem mais da memória ou de uma conversa solta.' },
    { icon: <IconChart size={18} />, t: 'Resultado por imóvel, em tempo real', d: 'Aportes, custos, receitas e margem se atualizam por operação — não em uma planilha à parte.' },
  ];
  return (
    <section className="section canvas">
      <div className="container">
        <div className="section-head">
          <h2 className="h-display lg">Tudo o que importa,<br/>conectado ao imóvel certo</h2>
          <p className="lede">O Flipper Hub organiza a operação em torno de cada imóvel, para que informações, movimentações e próximos passos deixem de ficar dispersos. Mais do que cadastrar ativos, a plataforma ajuda a acompanhar o que está acontecendo, o que já foi feito e o que vem a seguir.</p>
        </div>

        <div className="showcase">
          <div className="showcase-image">
            <img src="assets/garimpo-v2.png" alt="Tela de garimpo do Flipper Hub mostrando grid de imóveis em leilão." />
          </div>
          <div>
            <ul className="showcase-points">
              {points.map((p, i) => (
                <li key={i} className="showcase-point">
                  <div className="icon">{p.icon}</div>
                  <div>
                    <p className="t">{p.t}</p>
                    <p className="d">{p.d}</p>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

// ========== Dobra 5 — Profundidade e visão (editorial puro) ==========
//
// Tese: o operador profissional toca várias operações ao mesmo tempo. Cada
// uma tem profundidade (financeiro, obra, jurídico, comercial), e juntas
// têm visão de carteira — dois zooms da mesma realidade. Tentamos antes
// "mostrar a UI": gerou dissonância com o produto real. Agora é puramente
// editorial — tipografia massiva, contraste numérico (1 vs 12), zero
// mockup falso. Vende a tese, não simula a tela.
function DobraImovel() {
  return (
    <section className="section surface" id="plataforma">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow muted">05 · Profundidade e visão</div>
          <h2 className="h-display lg">Cada imóvel a fundo.<br/><em className="dv-em">Toda a carteira à vista.</em></h2>
          <p className="lede">Quem opera flip de verdade trabalha com uma carteira: vários imóveis, cada um em sua fase, todos exigindo decisão. O Flipper Hub funciona em duas escalas ao mesmo tempo — a profundidade dentro de cada imóvel e a visão sobre todos juntos.</p>
        </div>

        <div className="dv-edit" aria-label="Duas escalas: por imóvel e por carteira">
          <article className="dv-side">
            <span className="dv-side-eyebrow">Por imóvel</span>
            <div className="dv-orn dv-orn-deep" aria-hidden="true">
              <svg viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet">
                <circle cx="100" cy="100" r="92" fill="none" stroke="currentColor" strokeOpacity="0.10" strokeWidth="1" />
                <circle cx="100" cy="100" r="74" fill="none" stroke="currentColor" strokeOpacity="0.18" strokeWidth="1" />
                <circle cx="100" cy="100" r="56" fill="none" stroke="var(--brand-200)" strokeWidth="1" />
                <circle cx="100" cy="100" r="38" fill="none" stroke="var(--brand-300)" strokeWidth="1.5" />
                <circle cx="100" cy="100" r="20" fill="none" stroke="var(--brand-400)" strokeWidth="2" />
                <circle cx="100" cy="100" r="8" fill="var(--brand-500)" />
              </svg>
            </div>
            <h3 className="dv-side-title">No detalhe.</h3>
            <p className="dv-side-body">
              Tudo se conecta ao imóvel: análise, jurídico, financeiro, obra, comercial, fechamento. Cada decisão informa a próxima. Nada se perde no caminho — nem documento, nem custo, nem combinado.
            </p>
          </article>

          <article className="dv-side">
            <span className="dv-side-eyebrow">Por carteira</span>
            <div className="dv-orn dv-orn-broad" aria-hidden="true">
              {/* 12 cells em grid 4×3, com 4 estados de fase. Alguns sólidos
                 (em curso), alguns com fill claro (em análise/aquisição),
                 alguns só outline (futuros). */}
              {[
                'on','soft','out','on',
                'soft','on','out','on',
                'out','soft','on','out',
              ].map((state, i) => (
                <span key={i} className={`dv-orn-cell dv-orn-cell-${state}`}/>
              ))}
            </div>
            <h3 className="dv-side-title">Na visão geral.</h3>
            <p className="dv-side-body">
              Tudo se conecta à carteira: o que está em curso, o que precisa de você e quanto está em jogo. A soma do que cada imóvel decide, sempre à mão.
            </p>
          </article>
        </div>

        <p className="dv-close">
          Duas escalas da mesma realidade. <em>O imóvel não some na carteira. A carteira não some no imóvel.</em>
        </p>
      </div>
    </section>
  );
}

// ========== Dobra 6 — A jornada (editorial, conexões entre etapas) ==========
//
// Tese: a operação não anda em linha — anda em rede. A margem se decide nas
// CONEXÕES entre etapas, não dentro delas. Cada conexão é uma das tensões
// que BRAND.md já formulou:
//   - "Reforma é decisão financeira em andamento" → Reforma × Comercial
//   - "Venda é operação comercial" → Comercial × Tempo
//   - "Lucro vira sensação sem financeiro por imóvel" → Fechamento × Tudo
//   - "Risco jurídico é parte central" → Jurídico × Financeiro
// Sai do timeline linear (que sugere modelo de produto que não corresponde
// ao real) e entra em manifesto editorial — apple-style, sem feature dump.
function DobraJornada() {
  const conexoes = [
    {
      n: '01',
      pair: 'Jurídico × Financeiro',
      claim: 'Risco é margem.',
      body: 'Penhora a baixar, ônus oculto, débitos condominiais. Quando o jurídico carrega esses números para o financeiro, o aporte projetado já reflete o risco — não vira surpresa depois da escritura.',
    },
    {
      n: '02',
      pair: 'Reforma × Comercial',
      claim: 'Escopo é precificação em andamento.',
      body: 'Cada decisão de acabamento mexe na venda — para cima ou para baixo. Porcelanato premium vale +R$ 40 mil de mercado? Vale. Vale +R$ 6 mil? Não vale. A obra deixa de ser estética. Vira matemática.',
    },
    {
      n: '03',
      pair: 'Comercial × Tempo',
      claim: 'Tempo é capital.',
      body: 'Cada mês com o imóvel parado tem um preço. Quando o comercial vê o relógio da operação, a precificação muda: 5% abaixo agora pode valer mais do que quatro meses esperando o preço cheio.',
    },
    {
      n: '04',
      pair: 'Fechamento × Tudo',
      claim: 'Resultado é consequência.',
      body: 'A DRE final não é planilha de encerramento. É o que sobra quando cada custo, cada receita, cada decisão deixou rastro. A margem projetada vira margem real — sem reconciliação manual no fim.',
    },
  ];
  return (
    <section className="section canvas" id="jornada">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow muted">06 · A jornada</div>
          <h2 className="h-display lg">A margem se decide<br/><em className="jr-em">nas conexões.</em></h2>
          <p className="lede">A operação atravessa análise, jurídico, financeiro, obra, comercial e fechamento. Cada etapa carrega informação para a próxima — e é onde a margem se ganha ou se perde.</p>
        </div>

        <div className="jr-grid" role="list">
          {conexoes.map((c) => (
            <article key={c.n} className="jr-conn" role="listitem">
              <div className="jr-conn-head">
                <span className="jr-num" aria-hidden="true">{c.n}</span>
                <span className="jr-pair">{c.pair}</span>
              </div>
              <h3 className="jr-claim">{c.claim}</h3>
              <p className="jr-body">{c.body}</p>
            </article>
          ))}
        </div>

        <p className="jr-close">
          Do garimpo ao fechamento, cada decisão deixa rastro no imóvel. <em>É assim que a margem deixa de ser sensação.</em>
        </p>
      </div>
    </section>
  );
}

// ========== Dobra 8 — Realidade brasileira (warm light) ==========
function DobraBrasil() {
  const tags = [
    'Leilões judiciais',
    'Editais e matrículas',
    'ITBI',
    'Escritura',
    'Cartórios',
    'Desocupação',
    'IPTU',
    'Condomínio',
    'Imobiliárias parceiras',
    'Agenciamento',
    'Corretores autônomos',
    'WhatsApp',
    'Reforma com prestadores',
    'Bancos brasileiros',
    'Aporte de investidores',
    'Repasses e prestação de contas',
  ];
  return (
    <section className="section br-warm" id="sobre">
      <div className="container">
        <div className="br-grid">
          <div>
            <span className="br-eyebrow">
              <svg className="br-flag" width="20" height="14" viewBox="0 0 20 14" aria-hidden="true">
                <rect width="20" height="14" rx="1.5" fill="#009C3B"/>
                <path d="M10 1.6 L18.4 7 L10 12.4 L1.6 7 Z" fill="#FFDF00"/>
                <circle cx="10" cy="7" r="2.6" fill="#002776"/>
                <path d="M7.6 6.3 Q10 5.4 12.4 6.3" stroke="#FFFFFF" strokeWidth="0.45" fill="none"/>
              </svg>
              Feito no Brasil
            </span>
            <h2 className="h-display lg" style={{ marginTop: 14 }}>Pensado para a realidade<br/>do mercado brasileiro</h2>
            <p className="lede" style={{ marginTop: 18 }}>
              Não é uma adaptação genérica. O Flipper Hub foi desenhado para quem precisa operar em um ambiente que mistura múltiplas fontes de oportunidade, contexto jurídico relevante, transformação física do imóvel, canais de saída diversos e controle financeiro detalhado por operação.
            </p>
            <div className="br-tags">
              {tags.map((t, i) => (
                <span key={i} className="br-tag">{t}</span>
              ))}
            </div>
          </div>

          <div className="br-stage">
            <div className="br-doc br-doc-1">
              <div className="bd-head">
                <div className="bd-eyebrow">Edital de leilão</div>
                <div className="bd-stamp">TJ-SP</div>
              </div>
              <div className="bd-title">Casa Vila Vera · 230m²</div>
              <div className="bd-rows">
                <div className="bd-row"><span>Lance mínimo</span><b>R$ 2.180.000</b></div>
                <div className="bd-row"><span>Praça</span><b>2ª · 18/04</b></div>
                <div className="bd-row"><span>Vara</span><b>14ª Cível · SP</b></div>
              </div>
            </div>

            <div className="br-doc br-doc-2">
              <div className="bd-head">
                <div className="bd-eyebrow">Matrícula nº 12.345</div>
                <div className="bd-stamp">5º RI</div>
              </div>
              <div className="bd-title">Casa Vila Vera</div>
              <div className="bd-rows">
                <div className="bd-row"><span>Ônus</span><b className="bd-pos">2 baixados</b></div>
                <div className="bd-row"><span>IPTU</span><b className="bd-pos">Em dia</b></div>
                <div className="bd-row"><span>Condomínio</span><b className="bd-warn">Pendente</b></div>
              </div>
            </div>

            <div className="br-doc br-doc-3">
              <div className="bd-head">
                <div className="bd-eyebrow">Guia de ITBI</div>
                <div className="bd-stamp">2%</div>
              </div>
              <div className="bd-title">R$ 71.800</div>
              <div className="bd-meta">Recolhido · 22/04 · Município de SP</div>
            </div>

            <div className="br-doc br-doc-4">
              <div className="bd-head">
                <div className="bd-eyebrow">Repasse</div>
                <div className="bd-stamp ok">✓</div>
              </div>
              <div className="bd-title">R$ 418.000</div>
              <div className="bd-meta">Investidor · prestação de contas conferida</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Dobras = { DobraTensao, DobraDor, DobraVirada, DobraProduto, DobraImovel, DobraJornada, DobraBrasil };