/* Tuo v3 — How It Works: Sticky scroll + UI mocks */

// ── Real wallet logos for Connect Wallet mock ──
function WalletLogo({ name }) {
  if (name === 'MetaMask') {
    // Recognizable orange fox silhouette with white face accents
    return React.createElement('svg', { viewBox: '0 0 32 32', width: 22, height: 22 },
      React.createElement('path', { d: 'M28.5 4.5 L18 11.5 L20 7 Z', fill: '#E2761B' }),
      React.createElement('path', { d: 'M3.5 4.5 L13.9 11.6 L12 7 Z', fill: '#E4761B' }),
      React.createElement('path', { d: 'M24.5 21 L21.5 25.5 L28 27.3 L29.8 21.1 Z', fill: '#E4761B' }),
      React.createElement('path', { d: 'M2.2 21.1 L4 27.3 L10.5 25.5 L7.5 21 Z', fill: '#E4761B' }),
      React.createElement('path', { d: 'M10.2 14 L8.5 16.7 L14.8 17 L14.6 10 Z', fill: '#E4761B' }),
      React.createElement('path', { d: 'M21.8 14 L17.3 9.9 L17.2 17 L23.5 16.7 Z', fill: '#E4761B' }),
      React.createElement('path', { d: 'M10.5 25.5 L14.4 23.6 L11 21.1 Z', fill: '#F6851B' }),
      React.createElement('path', { d: 'M17.6 23.6 L21.5 25.5 L21 21.1 Z', fill: '#F6851B' }),
      React.createElement('path', { d: 'M21.5 25.5 L17.6 23.6 L17.9 26.2 L17.9 27.3 Z', fill: '#D7C1B3' }),
      React.createElement('path', { d: 'M10.5 25.5 L14.1 27.3 L14.1 26.2 L14.4 23.6 Z', fill: '#D7C1B3' }),
      React.createElement('path', { d: 'M14.2 19.6 L11.1 18.7 L13.3 17.7 Z', fill: '#233447' }),
      React.createElement('path', { d: 'M17.8 19.6 L18.7 17.7 L20.9 18.7 Z', fill: '#233447' })
    );
  }
  if (name === 'Rabby') {
    // Rabby blue circular face with simple bunny silhouette
    return React.createElement('svg', { viewBox: '0 0 32 32', width: 22, height: 22 },
      React.createElement('circle', { cx: 16, cy: 16, r: 14, fill: '#7084FF' }),
      React.createElement('path', { d: 'M11.5 11 L13 18 L13 20.5 L19 20.5 L19 18 L20.5 11 L18.5 13 L16 14 L13.5 13 Z', fill: '#fff' }),
      React.createElement('circle', { cx: 13.6, cy: 19, r: 0.7, fill: '#7084FF' }),
      React.createElement('circle', { cx: 18.4, cy: 19, r: 0.7, fill: '#7084FF' }),
      React.createElement('rect', { x: 14.4, y: 19.8, width: 3.2, height: 0.9, rx: 0.4, fill: '#7084FF' })
    );
  }
  if (name === 'WalletConnect') {
    // Iconic blue arc-with-dots
    return React.createElement('svg', { viewBox: '0 0 32 32', width: 22, height: 22 },
      React.createElement('rect', { x: 0, y: 0, width: 32, height: 32, rx: 7, fill: '#3B99FC' }),
      React.createElement('path', {
        d: 'M9 12.6 C 12.4 9.2 19.6 9.2 23 12.6 L 23.7 13.3 C 23.9 13.5 23.9 13.8 23.7 14 L 21.6 16 C 21.5 16.1 21.3 16.1 21.2 16 L 20.2 15 C 17.9 12.7 14.1 12.7 11.8 15 L 10.7 16.1 C 10.6 16.2 10.4 16.2 10.3 16.1 L 8.2 14 C 8 13.8 8 13.5 8.2 13.3 Z M 25.7 15.4 L 27.6 17.3 C 27.8 17.5 27.8 17.8 27.6 18 L 19.1 26.4 C 18.9 26.6 18.6 26.6 18.4 26.4 L 12.4 20.5 C 12.4 20.5 12.3 20.5 12.3 20.5 L 6.4 26.4 C 6.2 26.6 5.9 26.6 5.7 26.4 L -2.8 18 C -3 17.8 -3 17.5 -2.8 17.3 L -0.9 15.4 C -0.7 15.2 -0.4 15.2 -0.2 15.4 L 5.8 21.4 C 5.8 21.4 5.9 21.4 5.9 21.4 L 11.8 15.4 C 12 15.2 12.3 15.2 12.5 15.4 L 18.4 21.4 C 18.5 21.4 18.5 21.4 18.5 21.4 L 24.5 15.4 C 24.7 15.2 25.5 15.2 25.7 15.4 Z',
        fill: '#fff'
      })
    );
  }
  if (name === 'Coinbase Wallet') {
    return React.createElement('svg', { viewBox: '0 0 32 32', width: 22, height: 22 },
      React.createElement('circle', { cx: 16, cy: 16, r: 14, fill: '#0052FF' }),
      React.createElement('rect', { x: 11, y: 11, width: 10, height: 10, rx: 1.6, fill: '#fff' })
    );
  }
  return null;
}

function WalletMock() {
  return React.createElement('div', { className: 'ui-mock-inner' },
    React.createElement('div', { className: 'mock-header' }, 'Connect Wallet'),
    ['MetaMask', 'Rabby', 'WalletConnect', 'Coinbase Wallet'].map(w =>
      React.createElement('div', { key: w, className: 'mock-wallet-row' },
        React.createElement('div', { className: 'mock-wallet-icon' }, React.createElement(WalletLogo, { name: w })),
        React.createElement('span', null, w),
        React.createElement('span', { className: 'mock-wallet-status' }, 'Available')
      )
    ),
    React.createElement('div', { className: 'mock-footer' },
      React.createElement('span', { className: 'mock-connected' }, '0x4f...8a2c'),
      React.createElement('span', { className: 'mock-dot-green' })
    )
  );
}

function DepositMock() {
  const lang = useLang();
  const en = lang === 'en';
  // $2,500 USDC deposit → BP Core target weights: ~33% USDC stay, ~33.5% WBTC, ~33.5% WETH
  // Two swaps: USDC→WBTC and USDC→WETH, each ~0.05% pool fee + 0.15% slippage
  return React.createElement('div', { className: 'ui-mock-inner' },
    React.createElement('div', { className: 'mock-header' }, 'BP Core · ', React.createElement('span', { className: 'mock-flagship-tag' }, 'FLAGSHIP')),
    React.createElement('div', { className: 'mock-input-row' },
      React.createElement('input', { className: 'mock-input', defaultValue: '2,500', readOnly: true }),
      React.createElement('span', { className: 'mock-token-select' }, 'USDC ▾')
    ),
    React.createElement('div', { className: 'mock-section-label' }, en ? 'Execution costs' : 'Costos de ejecución'),
    React.createElement('div', { className: 'mock-info-rows mock-info-tight' },
      [[en ? 'Swap fee' : 'Fee de swap', '0.05%'],
       [en ? 'Slippage (max)' : 'Slippage (máx.)', '0.15%'],
      ].map(([l, v], i) => React.createElement('div', { key: i, className: 'mock-info-row' },
        React.createElement('span', null, l), React.createElement('span', { className: 'mock-info-mono' }, v)))),
    React.createElement('div', { className: 'mock-section-label' }, en ? 'You receive in vault' : 'Recibís en el vault'),
    React.createElement('div', { className: 'mock-tokens-grid' },
      [['USDC','832.50','#2775CA'],['WBTC','≈ 0.00818','#F09242'],['WETH','≈ 0.271','#627EEA']].map(([t,a,c]) =>
        React.createElement('div', { key: t, className: 'mock-token-row' },
          React.createElement('span', { className: 'mock-token-dot', style: { background: c } }),
          React.createElement('span', { className: 'mock-token-sym' }, t),
          React.createElement('span', { className: 'mock-token-amt' }, a)
        ))),
    React.createElement('button', { className: 'mock-deposit-btn' }, en ? 'Deposit & open vault' : 'Depositar y abrir vault')
  );
}

function NFTMock() {
  const lang = useLang();
  const en = lang === 'en';
  const addr = '0x2f2a2543b76a4166549f7aab2e75bef0aefc5b0f';
  return React.createElement('div', { className: 'ui-mock-inner nft-mock' },
    React.createElement('div', { className: 'uni-nft-card' },
      // Inner card
      React.createElement('div', { className: 'uni-nft-inner' },
        React.createElement('div', { className: 'uni-nft-pair' }, 'USDC/WBTC'),
        React.createElement('div', { className: 'uni-nft-fee' }, '0.05%'),
        // Curve glyph
        React.createElement('svg', { className: 'uni-nft-curve', viewBox: '0 0 200 140', preserveAspectRatio: 'none' },
          React.createElement('defs', null,
            React.createElement('linearGradient', { id: 'uniNftCurveGrad', x1: '0', y1: '0', x2: '1', y2: '1' },
              React.createElement('stop', { offset: '0%', stopColor: '#fff', stopOpacity: 0.95 }),
              React.createElement('stop', { offset: '100%', stopColor: '#fff', stopOpacity: 0.55 })
            )
          ),
          React.createElement('path', { d: 'M30,18 C 60,30 80,90 170,118', fill: 'none', stroke: 'url(#uniNftCurveGrad)', strokeWidth: 2.2, strokeLinecap: 'round' }),
          React.createElement('circle', { cx: 30, cy: 18, r: 4, fill: '#fff' }),
          React.createElement('circle', { cx: 170, cy: 118, r: 4, fill: '#fff' })
        ),
        // Tick range stats
        React.createElement('div', { className: 'uni-nft-stats' },
          React.createElement('div', { className: 'uni-nft-stat' }, React.createElement('span', null, 'ID:'), React.createElement('span', null, '5445668')),
          React.createElement('div', { className: 'uni-nft-stat' }, React.createElement('span', null, 'Min Tick:'), React.createElement('span', null, '63970')),
          React.createElement('div', { className: 'uni-nft-stat' }, React.createElement('span', null, 'Max Tick:'), React.createElement('span', null, '68020'))
        ),
        // Bottom curve emblem
        React.createElement('svg', { className: 'uni-nft-emblem', viewBox: '0 0 24 24' },
          React.createElement('path', { d: 'M4,4 C 8,8 10,18 20,20', fill: 'none', stroke: '#fff', strokeWidth: 1.5, strokeLinecap: 'round' })
        ),
        // Horizontal address strip (replaces 4 vertical edge labels)
        React.createElement('div', { className: 'uni-nft-edge-row' }, addr)
      )
    ),
    React.createElement('a', { className: 'mock-opensea-link', href: '#' }, en ? 'View on OpenSea →' : 'Ver en OpenSea →')
  );
}

function DashMock() {
  const lang = useLang();
  const en = lang === 'en';
  const [action, setAction] = React.useState(null);
  return React.createElement('div', { className: 'ui-mock-inner' },
    React.createElement('div', { className: 'mock-header' },
      en ? 'Position #4127' : 'Posición #4127',
      React.createElement('span', { className: 'mock-pos-tag' }, 'BP CORE')
    ),
    React.createElement('div', { className: 'mock-pos-nav' },
      React.createElement('span', { className: 'mock-pos-nav-label' }, 'NAV'),
      React.createElement('span', { className: 'mock-pos-nav-val' }, '$2,560.75'),
      React.createElement('span', { className: 'mock-pos-nav-delta' }, '+2.43%')
    ),
    React.createElement('div', { className: 'mock-mini-chart' },
      React.createElement('svg', { viewBox: '0 0 200 60', className: 'mock-nav-line' },
        React.createElement('defs', null,
          React.createElement('linearGradient', { id: 'navShade', x1: '0', y1: '0', x2: '0', y2: '1' },
            React.createElement('stop', { offset: '0%', stopColor: '#3ecf8e', stopOpacity: 0.35 }),
            React.createElement('stop', { offset: '100%', stopColor: '#3ecf8e', stopOpacity: 0 })
          )
        ),
        React.createElement('path', { d: 'M0,50 C30,48 60,35 90,30 C120,25 150,20 200,15 L200,60 L0,60 Z', fill: 'url(#navShade)' }),
        React.createElement('path', { d: 'M0,50 C30,48 60,35 90,30 C120,25 150,20 200,15', fill: 'none', stroke: '#3ecf8e', strokeWidth: 2 })
      )
    ),
    React.createElement('div', { className: 'mock-stats-grid' },
      [[en ? 'Yield to date' : 'Yield a la fecha', '+2.4%'], [en ? 'Days active' : 'Días activo', '17'],
       [en ? 'Drawdown' : 'Drawdown', '1.1%'], [en ? 'Next harvest' : 'Próximo harvest', '3h']
      ].map(([l, v], i) => React.createElement('div', { key: i, className: 'mock-stat' },
        React.createElement('span', { className: 'mock-stat-val' }, v),
        React.createElement('span', { className: 'mock-stat-label' }, l)))
    ),
    React.createElement('div', { className: 'mock-actions-label' }, en ? 'Manage position' : 'Gestionar posición'),
    React.createElement('div', { className: 'mock-actions-grid' },
      [
        { k: 'deposit',   l: en ? 'Deposit more' : 'Depositar más',          primary: true,
          start: '2025-04-12', end: en ? 'open-ended' : 'sin fecha de fin' },
        { k: 'recurrent', l: en ? 'Recurrent deposit' : 'Depósito recurrente',
          start: '2025-05-01', end: en ? 'until canceled' : 'hasta cancelar' },
        { k: 'wmonthly',  l: en ? 'Withdraw monthly' : 'Retiro mensual',
          start: '2025-05-15', end: en ? 'until canceled' : 'hasta cancelar' },
        { k: 'wall',      l: en ? 'Withdraw all' : 'Retirar todo',
          start: en ? 'on confirm' : 'al confirmar',  end: en ? 'instant unwind' : 'unwind inmediato' },
      ].map(a => React.createElement('div', { key: a.k, className: 'mock-action-wrap' },
        React.createElement('button', {
          className: 'mock-action-btn' + (a.primary ? ' primary' : '') + (action === a.k ? ' selected' : ''),
          onClick: () => setAction(a.k)
        }, a.l),
        React.createElement('div', { className: 'mock-action-tooltip', role: 'tooltip' },
          React.createElement('div', { className: 'mock-action-tooltip-row' },
            React.createElement('span', null, en ? 'Start' : 'Inicio'),
            React.createElement('span', null, a.start)),
          React.createElement('div', { className: 'mock-action-tooltip-row' },
            React.createElement('span', null, en ? 'End' : 'Fin'),
            React.createElement('span', null, a.end))
        )
      ))
    )
  );
}

const MOCKS = [WalletMock, DepositMock, NFTMock, DashMock];

function UIMock({ index, activeIndex }) {
  const offset = index - activeIndex;
  const state = offset === 0 ? 'active' : offset > 0 ? 'behind' : 'past';
  if (!fm) return React.createElement('div', {
    className: 'ui-mock' + (state === 'active' ? ' active' : ''),
    style: { display: state === 'active' ? 'block' : 'none' }
  }, React.createElement(MOCKS[index]));
  const variants = {
    active: { rotateY: 0, scale: 1, opacity: 1, x: 0, filter: 'blur(0px)', zIndex: 10 },
    behind: { rotateY: -6, scale: 0.92, opacity: 0.25, x: 30, filter: 'blur(4px)', zIndex: 5 },
    past: { rotateY: 0, scale: 0.88, opacity: 0, x: -40, filter: 'blur(6px)', zIndex: 1 },
  };
  return React.createElement(fm.div, {
    className: 'ui-mock',
    animate: variants[state],
    transition: { type: 'spring', stiffness: 80, damping: 18 },
    style: { position: 'absolute', inset: 0, transformStyle: 'preserve-3d' }
  }, React.createElement(MOCKS[index]));
}

function HowItWorksSection() {
  const en = useLang() === 'en';
  const [activeStep, setActiveStep] = React.useState(0);

  React.useEffect(() => {
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) setActiveStep(parseInt(entry.target.dataset.step));
      });
    }, { rootMargin: '-40% 0px -40% 0px' });
    document.querySelectorAll('.step-block').forEach(el => observer.observe(el));
    return () => observer.disconnect();
  }, []);

  const steps = en ? [
    { tag: 'STEP 01', title: 'Connect & deposit',
      desc: 'Connect any major Ethereum-compatible wallet — MetaMask, Rabby, Coinbase Wallet, or any wallet that supports WalletConnect. Choose your product: BP Core, BP Bullish, or Dynamic Hedge. Deposit any amount above the $1,000 minimum, in USDC, WBTC, or WETH; the contract automatically swaps your deposit into the ratio each strategy needs at entry. Typical transaction cost on Arbitrum: a few cents.' },
    { tag: 'STEP 02', title: 'A hedged position is opened on your behalf',
      desc: 'A personal vault is deployed for you alone — not a shared pool, not a fund balance, not a basket of other people\u2019s positions. In a single atomic transaction, the vault opens both legs of the strategy: concentrated liquidity in Uniswap V3 to earn fees from market activity, and a corresponding hedge in a derivatives venue to offset the price exposure of the liquidity position. The two legs are designed to work together — fees keep coming in, price risk is taken out of the equation.' },
    { tag: 'STEP 03', title: 'Your position NFT is minted',
      desc: 'An ERC-721 NFT is minted to your wallet. It represents and controls the vault — only the holder of the NFT can withdraw, transfer, or claim from the position. Real-time NAV is queryable on-chain at any time, by anyone, on any block explorer; there is no off-chain dashboard, no privileged data, no information you can\u2019t verify yourself. Send the NFT, sell it on a marketplace, or hold it. The NFT is the key.' },
    { tag: 'STEP 04', title: 'The strategy runs · you exit when you want',
      desc: 'From the moment your position is open, the strategy runs autonomously. A quantitative engine monitors market conditions continuously and triggers rebalances on-chain whenever the strategy calls for them — every action is a signed transaction recorded on Arbitrum, every cost is itemized, nothing happens behind a curtain. When you decide to exit, withdraw in a single transaction: the vault unwinds atomically — closes the liquidity position, closes the hedge, swaps residuals to USDC, returns funds to your wallet. No lock-up, no withdrawal queue, no notice period. Or, if you prefer, transfer the NFT to a secondary buyer at any price you negotiate, and they take over the position as-is.' },
  ] : [
    { tag: 'PASO 01', title: 'Conecta y deposita',
      desc: 'Conecta cualquier wallet compatible con Ethereum — MetaMask, Rabby, Coinbase Wallet, o cualquier wallet que soporte WalletConnect. Elige tu producto: BP Core, BP Bullish o Dynamic Hedge. Deposita cualquier monto superior al mínimo de $1.000, en USDC, WBTC o WETH; el contrato convierte automáticamente tu depósito a la proporción que cada estrategia necesita al entrar. Costo de transacción típico en Arbitrum: pocos centavos.' },
    { tag: 'PASO 02', title: 'Se abre una posición cubierta a tu nombre',
      desc: 'Se despliega un vault personal para ti — no un pool compartido, no un balance del fondo, no una canasta de posiciones de terceros. En una única transacción atómica, el vault abre las dos patas de la estrategia: liquidez concentrada en Uniswap V3 para ganar comisiones de la actividad del mercado, y una cobertura correspondiente en un mercado de derivados que compensa la exposición al precio de la posición de liquidez. Las dos patas están diseñadas para trabajar juntas — las comisiones siguen entrando y el riesgo de precio queda fuera de la ecuación.' },
    { tag: 'PASO 03', title: 'Se emite tu NFT de posición',
      desc: 'Un NFT ERC-721 se emite a tu wallet. Representa y controla el vault — solo el holder del NFT puede retirar, transferir o reclamar desde la posición. El NAV en tiempo real es consultable on-chain en cualquier momento, por cualquier persona, en cualquier block explorer; no hay dashboard off-chain, no hay datos privilegiados, no hay información que no puedas verificar tú mismo. Envía el NFT, véndelo en un marketplace, o consérvalo. El NFT es la llave.' },
    { tag: 'PASO 04', title: 'La estrategia corre · tú sales cuando quieras',
      desc: 'Desde el momento en que tu posición está abierta, la estrategia corre de manera autónoma. Un motor cuantitativo monitorea las condiciones del mercado de forma continua y dispara rebalances on-chain cuando la estrategia lo requiere — cada acción es una transacción firmada registrada en Arbitrum, cada costo está itemizado, nada sucede detrás de una cortina. Cuando decidas salir, retiras en una sola transacción: el vault hace unwind atómico — cierra la posición de liquidez, cierra la cobertura, convierte los residuos a USDC y devuelve los fondos a tu wallet. Sin lock-up, sin cola de retiro, sin período de aviso. O, si prefieres, transfieres el NFT a un comprador secundario al precio que negocien, y él toma la posición tal como está.' },
  ];

  return React.createElement(Section, { id: 'how-it-works' },
    React.createElement(SectionTitle, null, en ? 'How it works, end to end' : 'Cómo funciona, de punta a punta'),
    React.createElement('div', { className: 'how-inner' },
      React.createElement('div', { className: 'how-copy' },
        steps.map((s, i) => React.createElement('div', { key: i, className: 'step-block' + (activeStep === i ? ' active' : ''), 'data-step': i },
          React.createElement('div', { className: 'step-tag' }, s.tag),
          React.createElement(CardTitle, null, s.title),
          React.createElement('p', null, s.desc)
        ))
      ),
      React.createElement('div', { className: 'how-visual' },
        React.createElement('div', { className: 'ui-stack' },
          MOCKS.map((_, i) => React.createElement(UIMock, { key: i, index: i, activeIndex: activeStep }))
        ),
        // Connector dot
        fm && React.createElement('svg', { className: 'ui-connector', width: 2, height: 60 },
          React.createElement('line', { x1: 1, y1: 0, x2: 1, y2: 60, stroke: '#3ecf8e', strokeOpacity: 0.3, strokeWidth: 1 }),
          React.createElement(fm.circle, {
            cx: 1, r: 3, fill: '#3ecf8e',
            style: { filter: 'drop-shadow(0 0 6px #3ecf8e)' },
            animate: { cy: [0, 60] },
            transition: { duration: 2, repeat: Infinity, ease: 'linear' }
          })
        )
      )
    )
  );
}

Object.assign(window, { HowItWorksSection });