/* Tuo v3.1 — Hero: Organic Field (bubbles + gradient field + yield line) */

// ── Bubbles Layer ──
function Bubbles({ count = 30 }) {
  const reduce = fm ? useReducedMotion() : true;
  const bubbles = React.useMemo(() =>
    Array.from({ length: count }, (_, i) => ({
      id: i,
      left: Math.random() * 100,
      size: 2 + Math.random() * 4,
      opacity: 0.10 + Math.random() * 0.80,
      duration: 8 + Math.random() * 12,
      delay: Math.random() * 20,
      glow: Math.random() > 0.7
    })), [count]);

  if (reduce) {
    // Static field: show bubbles at distributed positions
    return React.createElement('div', { className: 'bubbles-layer', 'aria-hidden': true },
      bubbles.map(b => React.createElement('div', {
        key: b.id, className: 'bubble',
        style: { left: `${b.left}%`, bottom: `${(b.id / count) * 80 + 10}%`, width: b.size, height: b.size, opacity: b.opacity * 0.5,
          filter: b.glow ? 'drop-shadow(0 0 4px #3ecf8e)' : 'none' }
      }))
    );
  }

  return React.createElement('div', { className: 'bubbles-layer', 'aria-hidden': true },
    bubbles.map(b => React.createElement(fm.div, {
      key: b.id, className: 'bubble',
      style: {
        left: `${b.left}%`, width: b.size, height: b.size,
        filter: b.glow ? 'drop-shadow(0 0 4px #3ecf8e)' : 'none'
      },
      animate: { y: ['0vh', '-105vh'], opacity: [0, b.opacity, b.opacity, 0] },
      transition: {
        y: { duration: b.duration, repeat: Infinity, ease: 'linear', delay: b.delay },
        opacity: { duration: b.duration, repeat: Infinity, times: [0, 0.1, 0.85, 1], delay: b.delay }
      }
    }))
  );
}

// ── Hero Section v3.1 — Organic Field ──
function HeroSection() {
  const lang = useLang();
  const en = lang === 'en';
  const reduce = fm ? useReducedMotion() : true;
  const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;

  return React.createElement('section', { id: 'hero', className: 'hero-section', 'data-section': 'hero' },

    // Layer 1: Gradient field
    React.createElement('div', { className: 'organic-field' }),

    // Layer 2: Bubbles
    React.createElement(Bubbles, { count: isMobile ? 18 : 45 }),

    // Layer 3 (yield-line) removed per design feedback — it created a stray horizontal line behind the hero text.

    // Content layer
    React.createElement('div', { className: 'hero-content' },
      React.createElement('h1', null,
        React.createElement('span', { className: 'hero-h1-accent' },
          en ? 'Crypto-native yield.' : 'Yield cripto.'),
        React.createElement('br'),
        React.createElement(Typewriter, {
          lines: en ? ['Hedged by design.', 'Yours by custody.'] : ['Cobertura por diseño.', 'Custodia tuya.'],
          delay: 0.8, speed: 55
        })
      ),
      React.createElement(Entrance, { delay: 2.8, y: 8 },
        React.createElement('p', { className: 'hero-sub' }, en
          ? React.createElement(React.Fragment, null,
              'Tuo runs three on-chain strategies that earn from providing ',
              React.createElement(Term, { name: 'liquidity' }, 'liquidity'),
              ' to decentralized exchanges and ',
              React.createElement(Term, { name: 'hedge' }, 'hedge'),
              ' the resulting market exposure. Backtested across 5 years. Zero ',
              React.createElement(Term, { name: 'liquidations' }, 'liquidations'),
              '. ', React.createElement(Term, { name: 'drawdown' }, 'Drawdowns'), ' kept under 10%.')
          : React.createElement(React.Fragment, null,
              'Tuo opera tres estrategias on-chain que ganan proveyendo ',
              React.createElement(Term, { name: 'liquidity' }, 'liquidez'),
              ' en exchanges descentralizados y cubren la exposición con derivados. 5 años backtested. Cero ',
              React.createElement(Term, { name: 'liquidations' }, 'liquidaciones'),
              '. ', React.createElement(Term, { name: 'drawdown' }, 'Drawdowns'), ' por debajo del 10%.')
        )
      ),
      React.createElement(Entrance, { delay: 3.0, y: 8 },
        React.createElement('div', { className: 'hero-ctas' },
          React.createElement(PillBtn, { href: 'https://app.tuo.app', variant: 'primary', comingSoon: true }, en ? 'Launch app' : 'Abrir la app'),
          React.createElement(PillBtn, { href: '#simulator', variant: 'secondary' }, en ? 'Run the 5-year simulator →' : 'Correr el simulador 5 años →')
        )
      ),
    ),

    // Hero numbers — BP Core flagship's 5y backtest on Arbitrum (canonical headline).
    // CAGR +38%, Max DD 13.6% (worst across all 144 entry-exit pairs in seasonality matrix), 0 liquidations.
    React.createElement('div', { className: 'hero-numbers' },
      React.createElement(Entrance, { delay: 3.4 },
        React.createElement('div', { className: 'hero-num hero-num-yield' },
          React.createElement('span', { className: 'hero-num-val' },
            '+',
            React.createElement(Counter, { value: 38, startFrom: 0, suffix: '%', duration: 2.4, synced: true })
          ),
          React.createElement('span', { className: 'hero-num-label' }, en ? 'BP Core CAGR · 5y backtest' : 'CAGR BP Core · backtest 5 años')
        )
      ),
      React.createElement(Entrance, { delay: 3.4 },
        React.createElement('div', { className: 'hero-num' },
          React.createElement('span', { className: 'hero-num-val' },
            React.createElement(Counter, { value: 13.6, startFrom: 100, suffix: '%', duration: 2.4, decimals: 1, synced: true })
          ),
          React.createElement('span', { className: 'hero-num-label' }, en ? 'Max Drawdown' : 'Drawdown máx.')
        )
      ),
      React.createElement(Entrance, { delay: 3.4 },
        React.createElement('div', { className: 'hero-num hero-num-liq' },
          React.createElement('span', { className: 'hero-num-val hero-num-val-green' },
            React.createElement(Counter, { value: 0, startFrom: 999, duration: 2.4, synced: true })
          ),
          React.createElement('span', { className: 'hero-num-label' }, en ? 'Liquidations' : 'Liquidaciones')
        )
      )
    ),

    // Climax removed per design feedback — the 25–35% in hero-numbers is now the primary green focal number.

    // Micro-disclaimer
    React.createElement('p', { className: 'hero-micro-disclaimer' }, en
      ? 'Backtested performance is hypothetical. Past results do not guarantee future outcomes.'
      : 'Resultados backtested son hipotéticos. El desempeño pasado no garantiza resultados futuros.')
  );
}

Object.assign(window, { HeroSection });