const { useState, useEffect, useRef } = React; // --- Icons --- const AlertIcon = () => ; const ChartIcon = () => ; const ArrowUpIcon = () => ; const ArrowDownIcon = () => ; const LinkedInIcon = () => ; const GithubIcon = () => ; // --- TRANSLATIONS --- const CONTENT = { en: { meta: { date: "December 3, 2025", class: "Buenos Aires, Argentina", author: "Author:" }, header: { tag: "MACRO-STRATEGIC RISK ASSESSMENT", title: "The AI Liquidity Trap", subtitle: "Structural Fragility in the Generative Economy" }, nav: { summary: "1. Executive Summary", macro: "2. The Macro Indicator", circular: "3. Circular Financing", hardware: "4. The Hardware Cliff", subprime: "5. Subprime Data Crisis", security: "6. National Security Put", geo: "7. The Geopolitical Trap", pivot: "8. The Pivot", disclaimer: "DISCLAIMER", disclaimerText: "This article is the opinion of the author and does not represent an official analysis and is not financial advice. For institutional use only." }, sections: { summary: { title: "Executive Summary", p1: "The global equity markets, specifically the S&P 500 and Nasdaq 100, are currently exhibiting signs of a late-stage asset bubble driven by a \"Circular Financing\" dynamic within the Artificial Intelligence sector.", p2: "While valuations remain near all-time highs—supported by Federal Reserve rate cut expectations—fundamental indicators suggest a decoupling of asset prices from realizable revenue. We have identified three critical vectors of systemic failure:", card1: { title: "The \"ROI Gap\" & Circular Financing", text: "Revenue streams are currently artificially inflated by vendor-financed capital expenditures rather than legitimate end-user utility.", impact: "Capital Inefficiency" }, card2: { title: "The \"Hardware Cliff\" (TPU Transition)", text: "The monopolistic hardware moat enjoyed by Nvidia is eroding faster than priced in, driven by a structural shift from Training to Inference.", impact: "Margin Compression" }, card3: { title: "The \"Subprime Data\" Crisis", text: "A degradation in professional services quality due to unverified AI reliance, creating immense, unpriced liability risk.", impact: "Systemic Liability" } }, macro: { title: "The Macro Indicator", text: "The Buffett Indicator (Total Market Cap / GDP) sits at approximately 220%, a level historically associated with \"Strong Overvaluation.\" This is significantly higher than the Dot-com peak (~150%) or the 2021 peak (~193%).", capitalTrap: { title: "The \"Capital Intensity\" Trap", text: "Big Tech is fundamentally shifting from a \"Capital-Light\" model (high margin software) to a \"Capital-Heavy\" model (data centers, energy, chips)." }, card1: { title: "The Anomaly", text: "Markets continue to \"erase losses\" rapidly. This resilience is not driven by earnings quality but by macro-gambling on Federal Reserve policy." }, card2: { title: "The Divergence", text: "A widening spread between High Yield Credit (HYGH) and Equities (SPY) suggests that while stock investors bet on growth, bond investors are pricing in credit stress." } }, circular: { title: "The \"Circular Financing\" Mechanism", intro: "The current valuation of the \"AI Stack\" relies on a closed-loop capital flow that mimics the telecom bubble of 2000.", cycle: { title: "A. The Cycle of Debt", l1: "Capital Injection: VC and Sovereign Wealth Funds (SoftBank) inject cash into AI startups.", l2: "Immediate Transfer: Startups pay this cash to Cloud/Hardware Vendors (Oracle, Nvidia).", l3: "Revenue Recognition: Nvidia/Oracle book this as \"Revenue,\" boosting stock price.", l4: "Leverage: Oracle borrows against this projected revenue to build more data centers." }, breakdown: { title: "B. The Breakdown (The \"Negative Asset\")", text: "Evidence from the Financial Times suggests Oracle’s $300B deal with OpenAI is effectively \"underwater\" by ~$60 billion. The cost of servicing the debt to build the infrastructure exceeds the reliable cash flow OpenAI can generate." } }, hardware: { title: "The Hardware Cliff", intro: "The market assumes Nvidia’s 70%+ margins are sustainable indefinitely. This assumption is false due to the \"Inference Transition.\"", list: { l1: "Training vs. Inference: The boom was built on Training (requires Nvidia GPUs). The future is Inference (running models), which requires cost-efficiency, not brute force.", l2: "The Threat: Major customers (Meta) are negotiating to switch to Google’s TPUs and custom ASICs, offering ~30-40% better cost-efficiency.", l3: "The Pivot: Nvidia’s recent $2B investment in Synopsys (EDA software) signals a defensive pivot to become the \"taxman\" of chip design." } }, subprime: { title: "The \"Subprime Data\" Crisis", intro: "A silent risk factor is the erosion of competence in the Service Economy (Consulting, Auditing, Legal). This vector represents an arbitrage of ignorance where human oversight is removed from the loop.", box: { title: "The \"Human API\" Problem", l1: "Epistemic Trespassing: Junior associates use AI to draft technical documents without the expertise to verify the output.", l2: "Liability Shift: As seen in Moffatt v. Air Canada, companies are being held legally liable for AI hallucinations.", l3: "Systemic Contagion: If AI-generated audits are found to be hallucinatory, the \"Trust Premium\" of the Big 4 collapses.", l4: "The Brain Drain: Layoffs aimed at replacing staff with AI may backfire by destroying institutional knowledge." } }, security: { title: "The Endgame: National Security Put", text: "Unlike 2008, the U.S. Government views AI infrastructure not as a commercial asset but as Critical National Infrastructure essential for competition with China.", quote: "If OpenAI or Oracle faces insolvency, the U.S. government will likely intervene via the Defense Budget (NDAA), citing National Security.", text2: "The result is likely \"Privatized Gains, Socialized Losses.\"" }, geo: { title: "The Geopolitical Trap: US vs. China", intro: "The disparity in AI spending between the U.S. and China creates a dangerous trap. The U.S. is betting on Financial Returns (Stock Price), while China is focusing on Industrial Productivity (GDP).", box: { title: "The \"Containment Failure\"", text: "Despite sanctions, Chinese firms like Zhipu AI are growing rapidly. This signals that the \"containment\" strategy is leaking." }, card1: { title: "The US Model", text: "High Capex (~$400B). Financialized AI. Risk: Massive Asset Bubble if returns fail." }, card2: { title: "The China Model", text: "Low Capex (~$50B). Integrated Industrial AI. Risk: Slower rollout, but sustainable integration." } }, pivot: { title: "The Pivot", intro: "To navigate this environment, capital should be rotated out of \"Commercial Hype\" and into \"Sovereign Fortresses.\"", short: { title: "The \"Short\" Basket (Avoid/Hedge)", rationale: "Rationale: Exposure to the \"ROI Gap\" and circular financing unwinding." }, long: { title: "The \"Long\" Basket (The Fortress)", cat1: "GovTech / Defense", cat2: "Physical Infrastructure" }, deep: { title: "The Deep Tech Hedge", text: "World Labs / Spatial Intelligence: Monitor for partnerships involving Fei-Fei Li’s approach." }, global: { title: "Global Diversification", text: "\"A portfolio of international small caps, real estate, and emerging equity was the one to own [in 2000].\" — Ben Inker, GMO." } } }, footer: "Copyright © 2025 Parallax Publications, All Rights Reserved.", canvas: { buffett: { dot: "Dot-Com (150%)", curr: "Current (220%)" }, circular: { inv: "Investors", rev: "Revenue", col: "Collateral" }, capex: { title: "The Capex Divergence (US vs. China)", sub: "Projected AI Infrastructure Spending 2022-2027 (Billions USD)", us: "US AI Capex (Hyper-Scale)", cn: "China AI Capex (Flat)" } } }, es: { meta: { date: "3 de Diciembre, 2025", class: "Buenos Aires, Argentina", author: "Autor:" }, header: { tag: "EVALUACIÓN DE RIESGO MACRO-ESTRATÉGICO", title: "La Trampa de Liquidez IA", subtitle: "Fragilidad Estructural en la Economía Generativa" }, nav: { summary: "1. Resumen Ejecutivo", macro: "2. El Indicador Macro", circular: "3. Financiación Circular", hardware: "4. El Precipicio de Hardware", subprime: "5. Crisis de Datos Subprime", security: "6. Seguridad Nacional", geo: "7. La Trampa Geopolítica", pivot: "8. El Pivote", disclaimer: "AVISO LEGAL", disclaimerText: "Este artículo es opinión del autor y no representa un análisis oficial ni asesoramiento financiero. Solo para uso institucional." }, sections: { summary: { title: "Resumen Ejecutivo", p1: "Los mercados globales, específicamente el S&P 500 y Nasdaq 100, exhiben signos de una burbuja de activos impulsada por una dinámica de \"Financiación Circular\" en el sector de IA.", p2: "Aunque las valoraciones siguen cerca de máximos históricos, los indicadores fundamentales sugieren un desacoplamiento entre precios de activos e ingresos realizables. Identificamos tres vectores de fallo sistémico:", card1: { title: "Brecha de ROI y Financiación Circular", text: "Los flujos de ingresos están inflados artificialmente por gastos de capital financiados por proveedores, no por utilidad real del usuario.", impact: "Ineficiencia de Capital" }, card2: { title: "El \"Precipicio de Hardware\" (TPU)", text: "El foso monopolístico de Nvidia se erosiona más rápido de lo previsto, impulsado por un cambio estructural de Entrenamiento a Inferencia.", impact: "Compresión de Márgenes" }, card3: { title: "La Crisis de \"Datos Subprime\"", text: "Una degradación en la calidad de servicios profesionales por dependencia no verificada de IA, creando un riesgo de responsabilidad inmenso.", impact: "Responsabilidad Sistémica" } }, macro: { title: "El Indicador Macro", text: "El Indicador Buffett (Cap. Mercado / PIB) se sitúa en aprox. 220%, un nivel asociado con \"Sobrevaloración Fuerte\". Significativamente mayor al pico Dot-com (~150%).", capitalTrap: { title: "La Trampa de \"Intensidad de Capital\"", text: "Big Tech está cambiando de un modelo \"Capital-Light\" (software) a uno \"Capital-Heavy\" (data centers, energía, chips)." }, card1: { title: "La Anomalía", text: "Los mercados \"borran pérdidas\" rápidamente. Esta resiliencia no es por calidad de ganancias, sino por apuestas macro sobre la Reserva Federal." }, card2: { title: "La Divergencia", text: "La brecha entre Crédito de Alto Rendimiento (HYGH) y Acciones (SPY) sugiere que los bonistas están valorando estrés crediticio." } }, circular: { title: "El Mecanismo de \"Financiación Circular\"", intro: "La valoración actual del \"Stack de IA\" depende de un flujo de capital de bucle cerrado que imita la burbuja de telecomunicaciones del 2000.", cycle: { title: "A. El Ciclo de Deuda", l1: "Inyección: VC y Fondos Soberanos (SoftBank) inyectan efectivo en startups de IA.", l2: "Transferencia: Startups pagan este efectivo a proveedores de Nube/Hardware (Oracle, Nvidia).", l3: "Reconocimiento: Nvidia/Oracle registran esto como \"Ingresos\", subiendo la acción.", l4: "Apalancamiento: Oracle pide prestado contra estos ingresos para construir más data centers." }, breakdown: { title: "B. El Colapso (El \"Activo Negativo\")", text: "Evidencia del Financial Times sugiere que el acuerdo de Oracle con OpenAI está \"sumergido\" por ~$60 mil millones. El costo de la deuda supera el flujo de caja confiable." } }, hardware: { title: "El Precipicio de Hardware", intro: "El mercado asume que los márgenes del 70%+ de Nvidia son sostenibles. Esto es falso debido a la \"Transición de Inferencia\".", list: { l1: "Entrenamiento vs. Inferencia: El auge fue Entrenamiento (Nvidia). El futuro es Inferencia (ejecutar modelos), que requiere eficiencia de costos.", l2: "La Amenaza: Clientes mayores (Meta) negocian cambiar a TPUs de Google y ASICs, ofreciendo ~30-40% mejor eficiencia.", l3: "El Pivote: La inversión de Nvidia en Synopsys (software EDA) señala un pivote defensivo." } }, subprime: { title: "La Crisis de \"Datos Subprime\"", intro: "Un factor de riesgo silencioso es la erosión de competencia en la Economía de Servicios. Esto representa un arbitraje de ignorancia donde la supervisión humana se elimina.", box: { title: "El Problema de la \"API Humana\"", l1: "Intrusión Epistémica: Juniors usan IA para documentos técnicos sin experiencia para verificar.", l2: "Cambio de Responsabilidad: Como en Moffatt v. Air Canada, las empresas son responsables por alucinaciones de IA.", l3: "Contagio Sistémico: Si las auditorías generadas por IA son alucinatorias, la \"Prima de Confianza\" colapsa.", l4: "Fuga de Cerebros: Despidos para reemplazar personal con IA pueden destruir el conocimiento institucional." } }, security: { title: "Juego Final: Seguridad Nacional", text: "A diferencia de 2008, el Gobierno de EE.UU. ve la infraestructura de IA como Infraestructura Nacional Crítica esencial para competir con China.", quote: "Si OpenAI u Oracle enfrentan insolvencia, el gobierno probablemente intervendrá vía Presupuesto de Defensa (NDAA).", text2: "El resultado probable es \"Ganancias Privatizadas, Pérdidas Socializadas\"." }, geo: { title: "La Trampa Geopolítica: EE.UU. vs China", intro: "La disparidad en gasto de IA crea una trampa. EE.UU. apuesta por Retornos Financieros (Acciones), China por Productividad Industrial (PIB).", box: { title: "Fallo de Contención", text: "A pesar de sanciones, firmas chinas como Zhipu AI crecen rápidamente. La estrategia de \"contención\" está fallando." }, card1: { title: "Modelo EE.UU.", text: "Alto Capex (~$400B). IA Financierizada. Riesgo: Burbuja Masiva si los retornos fallan." }, card2: { title: "Modelo China", text: "Bajo Capex (~$50B). IA Industrial Integrada. Riesgo: Despliegue más lento, pero sostenible." } }, pivot: { title: "El Pivote", intro: "Para navegar este entorno, el capital debe rotar fuera del \"Hype Comercial\" hacia \"Fortalezas Soberanas\".", short: { title: "Canasta \"Corta\" (Evitar/Cobertura)", rationale: "Razón: Exposición a la \"Brecha de ROI\" y desenrollado de financiación circular." }, long: { title: "Canasta \"Larga\" (La Fortaleza)", cat1: "GovTech / Defensa", cat2: "Infraestructura Física" }, deep: { title: "Cobertura Deep Tech", text: "World Labs / Inteligencia Espacial: Monitorear asociaciones con el enfoque de Fei-Fei Li." }, global: { title: "Diversificación Global", text: "\"Un portafolio de small caps internacionales y bienes raíces era lo ideal [en 2000].\" — Ben Inker, GMO." } } }, footer: "Copyright © 2025 Parallax Publications, Todos Los Derechos Reservados.", canvas: { buffett: { dot: "Dot-Com (150%)", curr: "Actual (220%)" }, circular: { inv: "Inversores", rev: "Ingresos", col: "Colateral" }, capex: { title: "Divergencia de Capex (EE.UU vs China)", sub: "Gasto Proyectado en Infraestructura IA 2022-2027 (Billones USD)", us: "Capex IA EE.UU (Hyper-Scale)", cn: "Capex IA China (Plano)" } } }, fr: { meta: { date: "3 Décembre 2025", class: "Buenos Aires, Argentine", author: "Auteur:" }, header: { tag: "ÉVALUATION DES RISQUES MACRO-STRATÉGIQUES", title: "Le Piège de la Liquidité IA", subtitle: "Fragilité Structurelle de l'Économie Générative" }, nav: { summary: "1. Résumé Exécutif", macro: "2. L'Indicateur Macro", circular: "3. Financement Circulaire", hardware: "4. La Falaise Matérielle", subprime: "5. Crise des Données Subprimes", security: "6. Sécurité Nationale", geo: "7. Le Piège Géopolitique", pivot: "8. Le Pivot", disclaimer: "AVIS DE NON-RESPONSABILITÉ", disclaimerText: "Cet article est l'opinion de l'auteur et ne représente pas une analyse officielle ni un conseil financier." }, sections: { summary: { title: "Résumé Exécutif", p1: "Les marchés actions mondiaux (S&P 500, Nasdaq 100) montrent des signes de bulle d'actifs, alimentée par une dynamique de \"Financement Circulaire\" dans le secteur de l'IA.", p2: "Bien que les valorisations restent proches des sommets historiques, les indicateurs fondamentaux suggèrent un découplage entre prix des actifs et revenus réalisables. Trois vecteurs d'échec systémique identifiés :", card1: { title: "L'Écart de ROI & Financement Circulaire", text: "Les revenus sont artificiellement gonflés par des dépenses d'investissement financées par les fournisseurs, et non par l'utilité réelle.", impact: "Inefficacité du Capital" }, card2: { title: "La \"Falaise Matérielle\" (TPU)", text: "Le monopole matériel de Nvidia s'érode plus vite que prévu, poussé par un changement structurel de l'Entraînement vers l'Inférence.", impact: "Compression des Marges" }, card3: { title: "La Crise des \"Données Subprimes\"", text: "Une dégradation de la qualité des services professionnels due à une dépendance non vérifiée à l'IA, créant un risque de responsabilité immense.", impact: "Responsabilité Systémique" } }, macro: { title: "L'Indicateur Macro", text: "L'Indicateur Buffett (Cap. Boursière / PIB) est à environ 220%, un niveau historiquement associé à une \"Forte Surévaluation\". Nettement supérieur au pic Dot-com (~150%).", capitalTrap: { title: "Le Piège de \"L'Intensité Capitale\"", text: "La Big Tech passe d'un modèle \"Capital-Light\" (logiciel) à un modèle \"Capital-Heavy\" (centres de données, énergie, puces)." }, card1: { title: "L'Anomalie", text: "Les marchés \"effacent les pertes\" rapidement. Cette résilience n'est pas due à la qualité des bénéfices mais aux paris macro sur la Réserve Fédérale." }, card2: { title: "La Divergence", text: "L'écart entre le Crédit à Haut Rendement (HYGH) et les Actions (SPY) suggère que les investisseurs obligataires anticipent un stress de crédit." } }, circular: { title: "Le Mécanisme de \"Financement Circulaire\"", intro: "La valorisation actuelle de la \"Pile IA\" repose sur un flux de capitaux en boucle fermée qui imite la bulle des télécoms de 2000.", cycle: { title: "A. Le Cycle de la Dette", l1: "Injection : VC et Fonds Souverains (SoftBank) injectent du cash dans les startups IA.", l2: "Transfert : Les startups paient ce cash aux fournisseurs Cloud/Matériel (Oracle, Nvidia).", l3: "Reconnaissance : Nvidia/Oracle enregistrent cela comme \"Revenu\", augmentant l'action.", l4: "Levier : Oracle emprunte contre ce revenu projeté pour construire plus de centres de données." }, breakdown: { title: "B. La Rupture (L'\"Actif Négatif\")", text: "Le Financial Times suggère que l'accord d'Oracle avec OpenAI est \"sous l'eau\" de ~60 milliards $. Le coût de la dette dépasse le flux de trésorerie fiable." } }, hardware: { title: "La Falaise Matérielle", intro: "Le marché suppose que les marges de 70%+ de Nvidia sont durables. C'est faux en raison de la \"Transition vers l'Inférence\".", list: { l1: "Entraînement vs Inférence : Le boom était l'Entraînement (Nvidia). L'avenir est l'Inférence (exécution de modèles), qui exige l'efficacité des coûts.", l2: "La Menace : Les clients majeurs (Meta) négocient pour passer aux TPU de Google et ASIC.", l3: "Le Pivot : L'investissement de Nvidia dans Synopsys signale un pivot défensif." } }, subprime: { title: "La Crise des \"Données Subprimes\"", intro: "Un facteur de risque silencieux est l'érosion de la compétence dans l'Économie des Services. Cela représente un arbitrage de l'ignorance.", box: { title: "Le Problème de \"L'API Humaine\"", l1: "Intrusion Épistémique : Les juniors utilisent l'IA pour rédiger sans expertise pour vérifier.", l2: "Transfert de Responsabilité : Comme dans Moffatt c. Air Canada, les entreprises sont responsables des hallucinations de l'IA.", l3: "Contagion Systémique : Si les audits générés par l'IA sont hallucinatoires, la \"Prime de Confiance\" s'effondre.", l4: "Fuite des Cerveaux : Les licenciements pour remplacer le personnel par l'IA peuvent détruire le savoir institutionnel." } }, security: { title: "Fin de Partie : Sécurité Nationale", text: "Contrairement à 2008, le gouvernement américain considère l'infrastructure IA comme une Infrastructure Nationale Critique essentielle.", quote: "Si OpenAI ou Oracle fait face à l'insolvabilité, le gouvernement interviendra probablement via le Budget de la Défense (NDAA).", text2: "Le résultat probable est \"Gains Privatisés, Pertes Socialisées\"." }, geo: { title: "Le Piège Géopolitique : USA vs Chine", intro: "La disparité des dépenses en IA crée un piège. Les USA parient sur les Rendements Financiers, la Chine sur la Productivité Industrielle.", box: { title: "Échec du Confinement", text: "Malgré les sanctions, les firmes chinoises comme Zhipu AI croissent rapidement. La stratégie de \"confinement\" échoue." }, card1: { title: "Modèle USA", text: "Capex Élevé (~400 Mrd $). IA Financiarisée. Risque : Bulle massive si les rendements échouent." }, card2: { title: "Modèle Chine", text: "Capex Faible (~50 Mrd $). IA Industrielle Intégrée. Risque : Déploiement plus lent, mais durable." } }, pivot: { title: "Le Pivot", intro: "Pour naviguer dans cet environnement, le capital doit être transféré du \"Hype Commercial\" vers les \"Forteresses Souveraines\".", short: { title: "Panier \"Short\" (Éviter/Couverture)", rationale: "Raison : Exposition à l'écart de ROI et au dénouement du financement circulaire." }, long: { title: "Panier \"Long\" (La Forteresse)", cat1: "GovTech / Défense", cat2: "Infrastructure Physique" }, deep: { title: "Couverture Deep Tech", text: "World Labs / Intelligence Spatiale : Surveiller les partenariats impliquant l'approche de Fei-Fei Li." }, global: { title: "Diversification Mondiale", text: "\"Un portefeuille de small caps internationales et d'immobilier était idéal [en 2000].\" — Ben Inker, GMO." } } }, footer: "Copyright © 2025 Parallax Publications, Tous Les Droits Réservés.", canvas: { buffett: { dot: "Dot-Com (150%)", curr: "Actuel (220%)" }, circular: { inv: "Investisseurs", rev: "Revenus", col: "Garantie" }, capex: { title: "Divergence des Capex (USA vs Chine)", sub: "Dépenses d'Infrastructure IA Projetées 2022-2027 (Milliards USD)", us: "Capex IA USA (Hyper-Scale)", cn: "Capex IA Chine (Plat)" } } } }; // --- Navbar Component (With Lens Distortion) --- const Navbar = ({ lang, setLang }) => { const [visible, setVisible] = useState(true); const lastScrollY = useRef(0); useEffect(() => { const handleScroll = () => { const currentScrollY = window.scrollY; if (currentScrollY > lastScrollY.current && currentScrollY > 100) { setVisible(false); } else { setVisible(true); } lastScrollY.current = currentScrollY; }; window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, []); return ( ) } // --- Canvas Components (With Safety Logic) --- const BuffettCanvas = ({ labels }) => { const canvasRef = useRef(null); useEffect(() => { const draw = () => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); const dpr = window.devicePixelRatio || 1; const rect = canvas.getBoundingClientRect(); canvas.width = rect.width * dpr; canvas.height = rect.height * dpr; ctx.scale(dpr, dpr); const w = rect.width; const h = rect.height; ctx.clearRect(0, 0, w, h); ctx.beginPath(); // RESET PATH const gradient = ctx.createLinearGradient(0, 0, 0, h); gradient.addColorStop(0, 'rgba(220, 38, 38, 0.1)'); gradient.addColorStop(1, 'rgba(255, 255, 255, 0)'); const points = [{x: 0, y: h*0.8}, {x: w*0.2, y: h*0.4}, {x: w*0.4, y: h*0.6}, {x: w*0.8, y: h*0.2}, {x: w, y: h*0.1}]; ctx.moveTo(points[0].x, h); ctx.lineTo(points[0].x, points[0].y); for (let i = 0; i < points.length - 1; i++) { const midX = (points[i].x + points[i+1].x) / 2; ctx.quadraticCurveTo(points[i].x, points[i].y, midX, (points[i].y + points[i+1].y)/2); } ctx.lineTo(points[points.length-1].x, points[points.length-1].y); ctx.lineTo(w, h); ctx.closePath(); ctx.fillStyle = gradient; ctx.fill(); ctx.beginPath(); ctx.moveTo(points[0].x, points[0].y); for (let i = 0; i < points.length - 1; i++) { const midX = (points[i].x + points[i+1].x) / 2; ctx.quadraticCurveTo(points[i].x, points[i].y, points[i+1].x, points[i+1].y); } ctx.strokeStyle = '#94a3b8'; ctx.lineWidth = 2; ctx.stroke(); const lastPoint = points[points.length - 1]; ctx.beginPath(); ctx.arc(lastPoint.x - 10, lastPoint.y, 6, 0, 2 * Math.PI); ctx.fillStyle = '#dc2626'; ctx.fill(); ctx.strokeStyle = '#fff'; ctx.lineWidth = 2; ctx.stroke(); ctx.beginPath(); ctx.fillStyle = '#64748b'; ctx.font = '10px MyBodyFont, sans-serif'; ctx.fillText(labels.dot, w * 0.15, h * 0.35); ctx.fillText(labels.curr, w * 0.82, h * 0.08); }; // Wait for font before drawing document.fonts.ready.then(() => { requestAnimationFrame(draw); }); }, [labels]); return ; }; const CircularDiagramCanvas = ({ labels }) => { const canvasRef = useRef(null); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); const dpr = window.devicePixelRatio || 1; const resize = () => { const rect = canvas.getBoundingClientRect(); canvas.width = rect.width * dpr; canvas.height = rect.height * dpr; ctx.scale(dpr, dpr); }; resize(); window.addEventListener('resize', resize); const particles = []; const particleCount = 8; for (let i = 0; i < particleCount; i++) { particles.push({pathIdx: 0, t: i * (1 / particleCount)}); } let animationId; const animate = () => { const w = canvas.width / dpr; const h = canvas.height / dpr; const top = { x: w/2, y: 40 }; const right = { x: w - 80, y: h/2 }; const bottom = { x: w/2, y: h - 40 }; const left = { x: 80, y: h/2 }; const paths = [{start: top, end: right}, {start: right, end: bottom}, {start: bottom, end: left}, {start: left, end: top}]; ctx.clearRect(0, 0, w, h); ctx.beginPath(); ctx.strokeStyle = '#cbd5e1'; ctx.lineWidth = 2; ctx.setLineDash([5, 5]); paths.forEach(p => { ctx.moveTo(p.start.x, p.start.y); ctx.lineTo(p.end.x, p.end.y); }); ctx.stroke(); ctx.setLineDash([]); ctx.fillStyle = '#10b981'; particles.forEach(p => { p.t += 0.005; if (p.t >= 1) { p.t = 0; p.pathIdx = (p.pathIdx + 1) % 4; } const currentPath = paths[p.pathIdx]; const x = currentPath.start.x + (currentPath.end.x - currentPath.start.x) * p.t; const y = currentPath.start.y + (currentPath.end.y - currentPath.start.y) * p.t; ctx.beginPath(); ctx.arc(x, y, 4, 0, 2 * Math.PI); ctx.fill(); }); animationId = requestAnimationFrame(animate); }; document.fonts.ready.then(() => { animationId = requestAnimationFrame(animate); }); return () => { cancelAnimationFrame(animationId); window.removeEventListener('resize', resize); }; }, [labels]); return (
{labels.inv}
SoftBank / VC
Conduit
OpenAI
{labels.rev}
Nvidia / Oracle
{labels.col}
Stock Price
); }; const CapexCanvas = ({ labels }) => { const canvasRef = useRef(null); useEffect(() => { const draw = () => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); const dpr = window.devicePixelRatio || 1; const rect = canvas.getBoundingClientRect(); canvas.width = rect.width * dpr; canvas.height = rect.height * dpr; ctx.scale(dpr, dpr); const w = rect.width; const h = rect.height; const padding = 30; ctx.clearRect(0, 0, w, h); ctx.beginPath(); // RESET PATH ctx.strokeStyle = '#e2e8f0'; ctx.lineWidth = 1; for(let i=0; i<=5; i++) { const y = padding + (h - 2*padding) * (i/5); ctx.beginPath(); ctx.moveTo(padding, y); ctx.lineTo(w - padding, y); ctx.stroke(); } const usData = [20, 40, 90, 150, 250, 420, 380]; ctx.beginPath(); ctx.moveTo(padding, h - padding - (usData[0]/450)*(h-2*padding)); usData.forEach((val, i) => { const x = padding + (w - 2*padding) * (i/(usData.length-1)); const y = h - padding - (val/450)*(h-2*padding); ctx.lineTo(x, y); }); ctx.strokeStyle = '#3b82f6'; ctx.lineWidth = 3; ctx.stroke(); const cnData = [20, 25, 30, 35, 40, 45, 48]; ctx.beginPath(); ctx.moveTo(padding, h - padding - (cnData[0]/450)*(h-2*padding)); cnData.forEach((val, i) => { const x = padding + (w - 2*padding) * (i/(cnData.length-1)); const y = h - padding - (val/450)*(h-2*padding); ctx.lineTo(x, y); }); ctx.strokeStyle = '#ef4444'; ctx.lineWidth = 3; ctx.stroke(); ctx.beginPath(); ctx.font = 'bold 12px MyBodyFont, sans-serif'; ctx.textAlign = 'right'; ctx.fillStyle = '#3b82f6'; ctx.fillText(labels.us, w - 20, h * 0.10); ctx.fillStyle = '#ef4444'; ctx.fillText(labels.cn, w - 20, h * 0.85); }; document.fonts.ready.then(() => { requestAnimationFrame(draw); }); }, [labels]); return (

{labels.title}

{labels.sub}

Source: Bloomberg Intelligence Data
); }; const QuoteBlock = ({ text, author, source, date }) => (

"{text}"

{author} {source} • {date}
); const StockCard = ({ symbol, name, initialPrice, initialChange, type }) => { const [flash, setFlash] = useState(''); const [currentPrice, setCurrentPrice] = useState(initialPrice); const [currentChange, setCurrentChange] = useState(initialChange); const [fetchError, setFetchError] = useState(false); const isSimulation = false; const fetchRealData = async () => { if (isSimulation) return; try { const proxyUrl = "https://corsproxy.io/?"; const targetUrl = `https://query1.finance.yahoo.com/v8/finance/chart/${symbol}?interval=1d&range=1d`; const response = await fetch(proxyUrl + encodeURIComponent(targetUrl)); if (!response.ok) throw new Error("Network response was not ok"); const data = await response.json(); const result = data.chart.result[0]; const meta = result.meta; const price = meta.regularMarketPrice; const prevClose = meta.chartPreviousClose; const percentChange = ((price - prevClose) / prevClose) * 100; if (price !== currentPrice) { setFlash(price > currentPrice ? 'flash-up' : 'flash-down'); } setCurrentPrice(price); setCurrentChange(percentChange); setFetchError(false); } catch (error) { setFetchError(true); } }; const runSimulationStep = () => { const move = (Math.random() - 0.5) * (currentPrice * 0.005); const newPrice = currentPrice + move; setFlash(newPrice > currentPrice ? 'flash-up' : 'flash-down'); setCurrentPrice(newPrice); }; useEffect(() => { let intervalId; if (isSimulation || fetchError) { intervalId = setInterval(runSimulationStep, 2000 + Math.random() * 3000); } else { fetchRealData(); intervalId = setInterval(fetchRealData, 30000); } return () => clearInterval(intervalId); }, [isSimulation, symbol, fetchError]); const displayChange = currentChange; const isPositive = displayChange >= 0; const bgClass = type === 'short' ? 'bg-slate-900' : 'bg-slate-800'; const borderClass = type === 'short' ? 'border-red-500/20' : (type === 'long' ? 'border-emerald-500/20' : 'border-yellow-500/20'); return (
{name}
{symbol}
{isPositive ? : } {Math.abs(displayChange).toFixed(2)}%
${currentPrice.toFixed(2)}
{isSimulation ? 'SIM' : (fetchError ? 'SIM (ERR)' : 'LIVE')}
); }; // --- Main Component --- const Whitepaper = () => { const [activeSection, setActiveSection] = useState('executive-summary'); const [lang, setLang] = useState('en'); const T = CONTENT[lang]; useEffect(() => { const handleScroll = () => { const sections = ['executive-summary', 'macro-indicator', 'circular-financing', 'hardware-cliff', 'subprime-data', 'national-security', 'geopolitical-trap', 'the-pivot']; for (const section of sections) { const element = document.getElementById(section); if (element) { const rect = element.getBoundingClientRect(); if (rect.top >= 0 && rect.top <= 300) { setActiveSection(section); break; } } } }; window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, []); const NavItem = ({ id, title }) => ( {title} ); return (
{/* The New Top Navbar */} {/* Main Content Container (Added top padding pt-24) */}
{/* Header (Cleaned up) */}
{T.header.tag}

{T.header.title}

{T.header.subtitle}

{/* Author Tag & Socials */}

{T.meta.author} Nicolas Airolde

{/* Social Links */}
{T.meta.date}
{T.meta.class} {T.meta.priority}
{/* Sidebar Navigation */} {/* Main Content Area */}
{/* Sections 1-8 ... Identical to previous file, no changes needed here */}

01 {T.sections.summary.title}

{T.sections.summary.p1}

{T.sections.summary.p2}

01

{T.sections.summary.card1.title}

{T.sections.summary.card1.text}

Impact: {T.sections.summary.card1.impact}
02

{T.sections.summary.card2.title}

{T.sections.summary.card2.text}

Impact: {T.sections.summary.card2.impact}
03

{T.sections.summary.card3.title}

{T.sections.summary.card3.text}

Impact: {T.sections.summary.card3.impact}

02 {T.sections.macro.title}

{T.sections.macro.text}

{T.sections.macro.capitalTrap.title}

{T.sections.macro.capitalTrap.text}

{T.sections.macro.card1.title}

{T.sections.macro.card1.text}

{T.sections.macro.card2.title}

{T.sections.macro.card2.text}

03 {T.sections.circular.title}

{T.sections.circular.intro}

{T.sections.circular.cycle.title}

  1. {T.sections.circular.cycle.l1}
  2. {T.sections.circular.cycle.l2}
  3. {T.sections.circular.cycle.l3}
  4. {T.sections.circular.cycle.l4}

{T.sections.circular.breakdown.title}

{T.sections.circular.breakdown.text}

04 {T.sections.hardware.title}

{T.sections.hardware.intro}

  • {T.sections.hardware.list.l1}
  • {T.sections.hardware.list.l2}
  • {T.sections.hardware.list.l3}

05 {T.sections.subprime.title}

{T.sections.subprime.intro}

{T.sections.subprime.box.title}

  • {T.sections.subprime.box.l1}
  • {T.sections.subprime.box.l2}
  • {T.sections.subprime.box.l3}
  • {T.sections.subprime.box.l4}

06 {T.sections.security.title}

{T.sections.security.text}

"{T.sections.security.quote}"

{T.sections.security.text2}

07 {T.sections.geo.title}

{T.sections.geo.intro}

{T.sections.geo.box.title}

{T.sections.geo.box.text}

{T.sections.geo.card1.title}

{T.sections.geo.card1.text}

{T.sections.geo.card2.title}

{T.sections.geo.card2.text}

08 {T.sections.pivot.title}

{T.sections.pivot.intro}

▼ {T.sections.pivot.short.title}

{T.sections.pivot.short.rationale}

▲ {T.sections.pivot.long.title}

{T.sections.pivot.long.cat1}

{T.sections.pivot.long.cat2}

{T.sections.pivot.deep.title}

{T.sections.pivot.deep.text}

{T.sections.pivot.global.title}

{T.sections.pivot.global.text}

{T.footer}

); }; const root = ReactDOM.createRoot(document.getElementById("root")); root.render();