/* Tuo v3 — Sections: Concept, Directional Frame, Products, Performance */

// ── Concept micro-visualization: in-range fees vs out-of-range ──
// Green translucent band = active liquidity range. Price stays mostly inside (fees earn);
// when it spikes out, that segment turns red (no fees).
function FeesMicroViz() {
  const W = 280, H = 60;
  const upper = 18, lower = 42;        // bounds (y-coords)
  // Hand-crafted price walk: dips/spikes outside the band a few times
  const pts = [
    [0, 30], [14, 26], [28, 22], [42, 30], [56, 38], [70, 33],
    [84, 25], [98, 14],   // SPIKE above
    [112, 22], [126, 30], [140, 36], [154, 28], [168, 32],
    [182, 46],            // SPIKE below
    [196, 38], [210, 30], [224, 24], [238, 28], [252, 32], [266, 28], [280, 30]
  ];
  // Build segments — each between consecutive points, classified by whether either endpoint is outside.
  const segs = [];
  for (let i = 1; i < pts.length; i++) {
    const [x0, y0] = pts[i-1], [x1, y1] = pts[i];
    const out = y0 < upper || y0 > lower || y1 < upper || y1 > lower;
    segs.push({ x0, y0, x1, y1, out });
  }
  return React.createElement('svg', { viewBox: `0 0 ${W} ${H}`, className: 'concept-micro-viz', preserveAspectRatio: 'none' },
    // Green range band
    React.createElement('rect', { x: 0, y: upper, width: W, height: lower - upper, fill: 'rgba(62,207,142,0.14)', rx: 2 }),
    // Bound lines
    React.createElement('line', { x1: 0, y1: upper, x2: W, y2: upper, stroke: 'rgba(62,207,142,0.55)', strokeWidth: 1, strokeDasharray: '3,3' }),
    React.createElement('line', { x1: 0, y1: lower, x2: W, y2: lower, stroke: 'rgba(62,207,142,0.55)', strokeWidth: 1, strokeDasharray: '3,3' }),
    // Tiny labels
    React.createElement('text', { x: 4, y: upper - 2, fill: '#3ecf8e', fontSize: 7, fontFamily: "'Source Code Pro'", opacity: 0.7 }, 'UPPER'),
    React.createElement('text', { x: 4, y: lower + 8, fill: '#3ecf8e', fontSize: 7, fontFamily: "'Source Code Pro'", opacity: 0.7 }, 'LOWER'),
    // Price segments: green inside, red outside — staggered draw-in (each segment fades & extends)
    segs.map((s, i) => React.createElement('line', {
      key: i, x1: s.x0, y1: s.y0, x2: s.x1, y2: s.y1,
      stroke: s.out ? '#ff5e6e' : '#3ecf8e',
      strokeWidth: 1.8,
      strokeLinecap: 'round',
      className: 'fees-seg',
      style: {
        filter: `drop-shadow(0 0 ${s.out ? 4 : 3}px ${s.out ? '#ff5e6e' : '#3ecf8e'})`,
        animationDelay: `${i * 70}ms`,
        // Per-segment dash for draw-in: each segment extends from start to end
        strokeDasharray: '20',
        strokeDashoffset: '20',
      }
    })),
    // Out-of-range tips — pulse in after the segment that produced them
    pts.filter(([x,y]) => y < upper || y > lower).map(([x, y], i) => React.createElement('circle', {
      key: 'tip-' + i, cx: x, cy: y, r: 2.5, fill: '#ff5e6e',
      className: 'fees-tip',
      style: { filter: 'drop-shadow(0 0 5px #ff5e6e)', animationDelay: `${1400 + i * 280}ms` }
    }))
  );
}

// ── Concept micro-visualization: hedge bounds with shields when price hits range edges ──
// Volatile price stays strictly inside upper/lower bounds; when it grazes either edge,
// a shield icon appears — the visual metaphor for the perp hedge protecting the position.
function HedgeMicroViz() {
  const W = 280, H = 60;
  const upper = 14, lower = 46;
  // Price never escapes — but kisses both bounds a few times.
  const pts = [
    [0, 30], [16, 25], [32, 20], [48, 14],   // touch upper
    [64, 22], [80, 30], [96, 38], [112, 46], // touch lower
    [128, 40], [144, 30], [160, 22], [176, 14], // touch upper
    [192, 22], [208, 32], [224, 40], [240, 46], // touch lower
    [256, 38], [272, 30], [280, 28]
  ];
  const path = pts.map((p, i) => (i === 0 ? 'M' : 'L') + p[0] + ',' + p[1]).join(' ');
  const touches = pts.filter(([x, y]) => y <= upper + 0.5 || y >= lower - 0.5);
  // Shield icon (small)
  const Shield = ({ x, y, key }) => React.createElement('g', {
    key, transform: `translate(${x - 5}, ${y - 5})`,
    style: { filter: 'drop-shadow(0 0 5px #3ecf8e)' }
  },
    React.createElement('path', {
      d: 'M5 0 L10 2 L10 6 C10 8.5 7.5 10 5 10 C2.5 10 0 8.5 0 6 L0 2 Z',
      fill: 'rgba(62,207,142,0.85)', stroke: '#0a0a0a', strokeWidth: 0.6
    }),
    React.createElement('path', {
      d: 'M3 5 L4.4 6.4 L7 3.6', stroke: '#0a0a0a', strokeWidth: 1.2,
      fill: 'none', strokeLinecap: 'round', strokeLinejoin: 'round'
    })
  );
  // Approx path length for stroke-dash draw-in (the path is ~310px for our W×H).
  // Slight overestimate is fine — the dash just needs to cover it.
  const pathLen = 360;
  return React.createElement('svg', { viewBox: `0 0 ${W} ${H}`, className: 'concept-micro-viz', preserveAspectRatio: 'none' },
    // Bound lines
    React.createElement('line', { x1: 0, y1: upper, x2: W, y2: upper, stroke: '#3ecf8e', strokeWidth: 1, strokeOpacity: 0.5, strokeDasharray: '4,3' }),
    React.createElement('line', { x1: 0, y1: lower, x2: W, y2: lower, stroke: '#3ecf8e', strokeWidth: 1, strokeOpacity: 0.5, strokeDasharray: '4,3' }),
    // Subtle band
    React.createElement('rect', { x: 0, y: upper, width: W, height: lower - upper, fill: 'rgba(62,207,142,0.05)' }),
    // Price — draw-in animation via stroke-dashoffset
    React.createElement('path', {
      d: path, fill: 'none', stroke: '#3ecf8e', strokeWidth: 1.6,
      className: 'hedge-line',
      style: {
        filter: 'drop-shadow(0 0 3px #3ecf8e)',
        strokeDasharray: pathLen,
        strokeDashoffset: pathLen,
      }
    }),
    // Shields at every touch — staggered fade-in after the line completes
    touches.map(([x, y], i) => React.createElement('g', {
      key: i, className: 'hedge-shield', style: { animationDelay: `${1500 + i * 220}ms` }
    }, React.createElement(Shield, { x, y })))
  );
}

function ConceptSection() {
  const en = useLang() === 'en';
  return React.createElement(Section, { id: 'concept' },
    React.createElement(SectionTitle, null, en ? 'We earn from market activity. We hedge the price exposure.' : 'Ganamos de la actividad del mercado. Cubrimos la exposición al precio.'),
    React.createElement(Reveal, null, React.createElement('p', null, en ? 'Two simple ideas, working together:' : 'Dos ideas simples, trabajando juntas:')),
    React.createElement('div', { className: 'concept-cards' },
      React.createElement(Reveal, { delay: 0.1 },
        React.createElement('div', { className: 'concept-card' },
          React.createElement('div', { className: 'concept-num' }, '1'),
          React.createElement(CardTitle, null, en ? 'Earning from activity' : 'Ganar de la actividad'),
          React.createElement('p', null, en
            ? React.createElement(React.Fragment, null, 'Every time someone trades on ', React.createElement(Term, {name:'Uniswap V3'}, 'Uniswap V3'), ', liquidity providers collect a fee. Tuo provides that ', React.createElement(Term, {name:'liquidity'}, 'liquidity'), ', and collects those ', React.createElement(Term, {name:'LP fees'}, 'fees'), '. The more activity, the more we earn.')
            : React.createElement(React.Fragment, null, 'Cada vez que alguien opera en ', React.createElement(Term, {name:'Uniswap V3'}, 'Uniswap V3'), ', los proveedores de ', React.createElement(Term, {name:'liquidity'}, 'liquidez'), ' cobran comisión. Tuo provee esa liquidez y cobra esas ', React.createElement(Term, {name:'LP fees'}, 'comisiones'), '.')),
          React.createElement(FeesMicroViz)
        )),
      React.createElement(Reveal, { delay: 0.2 },
        React.createElement('div', { className: 'concept-card' },
          React.createElement('div', { className: 'concept-num' }, '2'),
          React.createElement(CardTitle, null, en ? 'Hedging the price' : 'Cubrir el precio'),
          React.createElement('p', null, en
            ? React.createElement(React.Fragment, null, 'Providing liquidity exposes us to price. We open a ', React.createElement(Term, {name:'hedge'}, 'hedge'), ' in a ', React.createElement(Term, {name:'perps'}, 'perpetual'), ' market. The fees keep coming; the price exposure is offset.')
            : React.createElement(React.Fragment, null, 'Proveer liquidez nos expone al precio. Abrimos una ', React.createElement(Term, {name:'hedge'}, 'cobertura'), ' en un mercado de ', React.createElement(Term, {name:'perps'}, 'perpetuos'), '. Las comisiones siguen; la exposición se compensa.')),
          React.createElement(HedgeMicroViz)
        ))
    ),
    React.createElement(Reveal, { delay: 0.3 },
      React.createElement('p', { className: 'thesis-highlight' }, en
        ? React.createElement(React.Fragment, null, 'The structural edge is the spread between ', React.createElement(Term, {name:'LP fees'}, 'fees'), ' and ', React.createElement(Term, {name:'funding rate'}, 'funding'), " versus the cost of the hedge. We're not predicting price — we're getting paid for keeping the market liquid.")
        : React.createElement(React.Fragment, null, 'El edge estructural es el spread entre ', React.createElement(Term, {name:'LP fees'}, 'fees'), ' y ', React.createElement(Term, {name:'funding rate'}, 'funding'), ' versus el costo de la cobertura. No predicimos precio — cobramos por mantener el mercado líquido.')))
  );
}

function DirectionalFrameSection() {
  const en = useLang() === 'en';

  // Each strategy: position on hedge↔directional axis, color, hedge %, key trait.
  // Order (left → right): Dynamic Hedge · BP Core (flagship, centered) · BP Bullish · BTC HODL (reference)
  // CAGR + DD numbers per CEO directive 2026-05-06 — Arbitrum 5y backtest.
  // DD values are the WORST DD across the 144 entry-exit pairs in the seasonality matrix
  // (worst-case validation, more conservative than single-window daily NAV DD).
  // BTC HODL: CAGR from chart's perf-data.js (real 5y) · DD from real 5y daily NAV (76.6%).
  const strategies = [
    {
      key: 'dh', name: 'Dynamic Hedge', color: '#7c8bff',
      pos: 0.14, hedge: 100, directional: 0,
      tagline: en ? 'Permanently hedged' : 'Cobertura permanente',
      desc: en ? 'BTC/USD liquidity hedged 1:1 in perps. Pure income, zero net price exposure.' : 'Liquidez BTC/USD cubierta 1:1 en perps. Renta pura, exposición neta cero.',
      cagr: '+20%', dd: '16.4%',
    },
    {
      key: 'core', name: 'BP Core', color: '#3ecf8e',
      pos: 0.42, hedge: 75, directional: 25,
      tagline: en ? 'Balanced default' : 'Default balanceado', flagship: true,
      desc: en ? 'Two strategies blended — stable BTC income + momentum-tuned LP. Survives every regime.' : 'Dos estrategias mezcladas — renta BTC + LP con momentum. Sobrevive todos los regímenes.',
      cagr: '+38%', dd: '13.6%',
    },
    {
      key: 'bull', name: 'BP Bullish', color: '#f5a524',
      pos: 0.70, hedge: 55, directional: 45,
      tagline: en ? 'Crypto upside tilt' : 'Inclinado al upside',
      desc: en ? 'Same DNA as BP Core, weighted toward momentum. More CAGR, slightly larger drawdowns.' : 'Mismo ADN que BP Core, ponderado a momentum. Más CAGR, drawdowns un poco mayores.',
      cagr: '+44%', dd: '12.8%',
    },
    {
      key: 'btc', name: 'BTC HODL', color: '#f7931a',
      pos: 0.95, hedge: 0, directional: 100,
      tagline: en ? 'Reference only' : 'Solo referencia',
      desc: en ? 'Spot Bitcoin, no yield, no hedge. Shown to anchor the spectrum.' : 'Bitcoin spot, sin yield ni cobertura. Solo para anclar el espectro.',
      cagr: '+17%', dd: '76.6%', reference: true,
    },
  ];

  return React.createElement(Section, { id: 'products' },
    React.createElement(SectionTitle, null, en ? 'How exposed do you want to be to crypto?' : '¿Cuánta exposición a cripto quieres tener?'),
    React.createElement(Reveal, null,
      React.createElement('p', { className: 'df-lead' }, en
        ? 'Every Tuo strategy lives on the same axis: how much price exposure you want. Hedged on the left, directional on the right.'
        : 'Cada estrategia de Tuo vive en el mismo eje: cuánta exposición al precio quieres. Cubierto a la izquierda, direccional a la derecha.')),

    // Master spectrum bar with all four markers
    React.createElement(Reveal, { delay: 0.1 },
      React.createElement('div', { className: 'df-spectrum' },
        React.createElement('div', { className: 'df-spectrum-labels' },
          React.createElement('span', null, en ? 'FULLY HEDGED' : 'TOTALMENTE CUBIERTO'),
          React.createElement('span', null, en ? 'FULLY DIRECTIONAL' : 'TOTALMENTE DIRECCIONAL')
        ),
        React.createElement('div', { className: 'df-spectrum-track' },
          React.createElement('div', { className: 'df-spectrum-fill' }),
          strategies.map(s => React.createElement('div', {
            key: s.key, className: 'df-marker' + (s.flagship ? ' flagship' : '') + (s.reference ? ' reference' : ''),
            style: { left: `${s.pos * 100}%`, '--c': s.color }
          },
            React.createElement('span', { className: 'df-marker-dot' }),
            React.createElement('span', { className: 'df-marker-label' }, s.name)
          ))
        )
      )),

    // Independent per-strategy cards
    React.createElement('div', { className: 'df-cards' },
      strategies.map((s, i) => React.createElement(Reveal, { key: s.key, delay: 0.15 + i * 0.08 },
        React.createElement('div', {
          className: 'df-card' + (s.flagship ? ' flagship' : '') + (s.reference ? ' reference' : ''),
          style: { '--c': s.color }
        },
          s.flagship && React.createElement('div', { className: 'df-card-badge' }, 'FLAGSHIP'),
          React.createElement('div', { className: 'df-card-head' },
            React.createElement('span', { className: 'df-card-dot' }),
            React.createElement('h3', null, s.name)
          ),
          React.createElement('p', { className: 'df-card-tagline' }, s.tagline),

          // Mini hedge/directional split bar
          React.createElement('div', { className: 'df-split' },
            React.createElement('div', { className: 'df-split-bar' },
              React.createElement('div', { className: 'df-split-hedge', style: { width: `${s.hedge}%` } }),
              React.createElement('div', { className: 'df-split-dir', style: { width: `${s.directional}%` } })
            ),
            React.createElement('div', { className: 'df-split-legend' },
              React.createElement('span', null, `${s.hedge}% ${en ? 'hedged' : 'cubierto'}`),
              React.createElement('span', null, `${s.directional}% ${en ? 'directional' : 'direccional'}`)
            )
          ),

          React.createElement('p', { className: 'df-card-desc' }, s.desc),

          // Stats row: CAGR + Max DD (worst case from seasonality matrix · validated 2026-05-06).
          React.createElement('div', { className: 'df-card-stats' },
            React.createElement('div', null,
              React.createElement('span', { className: 'df-stat-label' }, en ? 'CAGR · 5y' : 'CAGR · 5a'),
              React.createElement('span', { className: 'df-stat-val' }, s.cagr)),
            React.createElement('div', null,
              React.createElement('span', { className: 'df-stat-label' }, en ? 'Max DD' : 'DD máx.'),
              React.createElement('span', { className: 'df-stat-val' }, s.dd))
          )
        ))))
  );
}

function PerformanceSection() {
  const en = useLang() === 'en';
  const d = window.TUO_PERF_DATA;
  const [capital, setCapital] = React.useState(100000);
  const [windowSel, setWindowSel] = React.useState('5Y'); // 5Y · 3Y · 1Y · YTD

  // Slice weekly series by window
  const sliced = React.useMemo(() => {
    const allLabels = d.weeks;
    const lastIso = allLabels[allLabels.length - 1];
    const lastDate = new Date(lastIso + 'T00:00:00Z');
    let startIdx = 0;
    if (windowSel === '3Y') {
      const cut = new Date(lastDate); cut.setUTCFullYear(cut.getUTCFullYear() - 3);
      startIdx = allLabels.findIndex(d => new Date(d + 'T00:00:00Z') >= cut);
    } else if (windowSel === '1Y') {
      const cut = new Date(lastDate); cut.setUTCFullYear(cut.getUTCFullYear() - 1);
      startIdx = allLabels.findIndex(d => new Date(d + 'T00:00:00Z') >= cut);
    } else if (windowSel === 'YTD') {
      const yr = lastDate.getUTCFullYear();
      startIdx = allLabels.findIndex(d => d.startsWith(yr + '-'));
    }
    if (startIdx < 0) startIdx = 0;

    const labels = allLabels.slice(startIdx);
    // Re-base each series to 100000 at start of window
    const rebase = (arr) => {
      const slice = arr.slice(startIdx);
      const base = slice[0] || 1;
      return slice.map(v => (v / base) * 100000);
    };
    return {
      labels,
      bpCore: rebase(d.bpCoreWeekly),
      bpBullish: rebase(d.bpBullishWeekly),
      dynHedge: rebase(d.dynHedgeWeekly),
      btcHodl: rebase(d.btcHodlWeekly),
    };
  }, [d, windowSel]);

  const series = [
    { name: 'BP Core', data: sliced.bpCore },
    { name: 'BP Bullish', data: sliced.bpBullish },
    { name: 'Dynamic Hedge', data: sliced.dynHedge },
    { name: 'BTC HODL', data: sliced.btcHodl },
  ];

  const tiles = en ? [
    { value: 12160000, prefix: '', suffix: '', startFrom: 1000000, format: 'mShort', label: 'Tape verifications (Arbitrum)' },
    { value: 7780000, prefix: '', suffix: '', startFrom: 1000000, format: 'mShort', label: 'Tape verifications (Mainnet)' },
  ] : [
    { value: 12160000, prefix: '', suffix: '', startFrom: 1000000, format: 'mShort', label: 'Verificaciones tape (Arbitrum)' },
    { value: 7780000, prefix: '', suffix: '', startFrom: 1000000, format: 'mShort', label: 'Verificaciones tape (Mainnet)' },
  ];

  const wins = ['5Y', '3Y', '1Y', 'YTD'];

  return React.createElement(Section, { id: 'performance' },
    React.createElement(SectionTitle, null, en ? 'Five years. Two cycles. Drawdowns kept under control.' : 'Cinco años. Dos ciclos. Drawdowns bajo control.'),
    React.createElement(Reveal, null, React.createElement('p', null, en
      ? 'Each strategy tracked from your starting capital across the window you select. Drawdown periods are shaded on each line. Bitcoin HODL is shown for reference.'
      : 'Cada estrategia rastreada desde tu capital inicial sobre la ventana que elijas. Los períodos de drawdown están sombreados en cada línea. Bitcoin HODL se muestra como referencia.')),
    React.createElement(Reveal, { delay: 0.1 },
      React.createElement('div', { className: 'dash-controls', style: { marginBottom: 14 } },
        React.createElement('label', { className: 'dash-input-wrap' },
          React.createElement('span', { className: 'dash-input-lbl' }, en ? 'Initial capital' : 'Capital inicial'),
          React.createElement('div', { className: 'dash-input-money' },
            React.createElement('span', { className: 'dash-input-prefix' }, '$'),
            React.createElement('input', {
              type: 'number', min: 1000, step: 1000, value: capital,
              onChange: e => setCapital(Math.max(1000, Number(e.target.value) || 0)),
              className: 'dash-input'
            })
          )
        ),
        React.createElement('div', { className: 'dash-pills' },
          wins.map(wkey => React.createElement('button', {
            key: wkey,
            className: 'dash-pill' + (windowSel === wkey ? ' active' : ''),
            onClick: () => setWindowSel(wkey)
          }, wkey))
        )
      ),
      React.createElement(EquityChart, {
        series, labels: sliced.labels,
        colors: ['#3ecf8e', '#f5a524', '#7c8bff', '#f7931a'],
        initialCapital: capital,
        // Default visibility: only BP Core (0) and BTC HODL (3). User toggles the others on demand.
        defaultHidden: [1, 2]
      }),
      React.createElement('p', { className: 'chart-disclaimer' }, en
        ? 'Hypothetical, based on backtest data 2021–2026. Past results do not guarantee future outcomes.'
        : 'Hipotético, basado en datos de backtest 2021–2026. El desempeño pasado no garantiza resultados futuros.')),
    React.createElement(Reveal, { delay: 0.2 },
      React.createElement('div', { className: 'stats-grid' }, tiles.map((t, i) => React.createElement(StatTile, { key: i, ...t }))))
  );
}

Object.assign(window, { ConceptSection, DirectionalFrameSection, PerformanceSection });