const { useState, useEffect, useRef } = React;

// --- Icons ---
const AlertIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-amber-600"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>;
const ChartIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-blue-600"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>;
const ArrowUpIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>;
const ArrowDownIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="m19 12-7 7-7-7"/><path d="M12 5v14"/></svg>;
const LinkedInIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" className="text-slate-400 hover:text-[#0077b5] transition-colors"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>;
const GithubIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" className="text-slate-400 hover:text-black transition-colors"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>;

// --- 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 (
        <nav className={`fixed top-0 w-full z-50 transition-transform duration-300 ${visible ? 'translate-y-0' : '-translate-y-full'} bg-white/95 backdrop-blur border-b border-slate-200 shadow-sm`}>
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex justify-between items-center">
                
                {/* Logo Container */}
                <div className="flex flex-col justify-center group cursor-default">
                    {/* The "Lens Distortion" Effect */}
                    <div className="flex items-baseline select-none">
                        <span className="text-3xl font-black font-title text-slate-900 mr-2 md:mr-2">P</span>
                        <span className="text-3xl font-black font-title text-slate-900 mr-1 md:mr-1">A</span>
                        <span className="text-3xl font-black font-title text-slate-900 mr-1">R</span>
                        <span className="text-3xl font-black font-title text-slate-900 mr-0.5">A</span>
                        <span className="text-3xl font-black font-title text-slate-900 mr-0.5">L</span>
                        <span className="text-3xl font-black font-title text-slate-900 mr-1">L</span>
                        <span className="text-3xl font-black font-title text-slate-900 mr-2 md:mr-2">A</span>
                        <span className="text-3xl font-black font-title text-slate-900">X</span>
                    </div>
                    {/* Subtitle */}
                    <div className="flex justify-between w-full mt-[-2px]">
                        <span className="text-[0.55rem] uppercase tracking-widest text-slate-500 font-title whitespace-nowrap group-hover:texts-slate-600 transition-colors">
                            Depth requires a different angle
                        </span>
                    </div>
                </div>

                {/* Right Actions */}
                <div className="flex items-center gap-4">
                    <div className="flex items-center gap-1 bg-slate-100 p-1 rounded-lg">
                        <button onClick={() => setLang('en')} className={`px-3 py-1 text-xs font-bold rounded-md transition-all ${lang === 'en' ? 'bg-white text-blue-600 shadow-sm' : 'text-slate-400 hover:text-slate-600'}`}>EN</button>
                        <button onClick={() => setLang('es')} className={`px-3 py-1 text-xs font-bold rounded-md transition-all ${lang === 'es' ? 'bg-white text-blue-600 shadow-sm' : 'text-slate-400 hover:text-slate-600'}`}>ES</button>
                        <button onClick={() => setLang('fr')} className={`px-3 py-1 text-xs font-bold rounded-md transition-all ${lang === 'fr' ? 'bg-white text-blue-600 shadow-sm' : 'text-slate-400 hover:text-slate-600'}`}>FR</button>
                    </div>
                </div>
            </div>
        </nav>
    )
}

// --- 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 <canvas ref={canvasRef} className="w-full h-64" />;
};

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 (
        <div className="relative w-full h-[320px]">
            <canvas ref={canvasRef} className="absolute inset-0 w-full h-full z-0" />
            <div className="absolute inset-0 z-10 pointer-events-none">
                <div className="absolute top-0 left-1/2 transform -translate-x-1/2 mt-4">
                     <div className="bg-white p-2 rounded-lg shadow-md border-2 border-blue-100 text-center w-32">
                        <div className="text-[10px] text-slate-400 font-bold uppercase">{labels.inv}</div>
                        <div className="font-bold text-slate-800 text-xs">SoftBank / VC</div>
                    </div>
                </div>
                <div className="absolute top-1/2 right-4 transform -translate-y-1/2">
                    <div className="bg-white p-2 rounded-lg shadow-md border-2 border-slate-100 text-center w-32">
                        <div className="text-[10px] text-slate-400 font-bold uppercase">Conduit</div>
                        <div className="font-bold text-slate-800 text-xs">OpenAI</div>
                    </div>
                </div>
                <div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 mb-4">
                    <div className="bg-white p-2 rounded-lg shadow-md border-2 border-purple-100 text-center w-32">
                        <div className="text-[10px] text-slate-400 font-bold uppercase">{labels.rev}</div>
                        <div className="font-bold text-slate-800 text-xs">Nvidia / Oracle</div>
                    </div>
                </div>
                <div className="absolute top-1/2 left-4 transform -translate-y-1/2">
                    <div className="bg-white p-2 rounded-lg shadow-md border-2 border-amber-100 text-center w-32">
                        <div className="text-[10px] text-slate-400 font-bold uppercase">{labels.col}</div>
                        <div className="font-bold text-slate-800 text-xs">Stock Price</div>
                    </div>
                </div>
            </div>
        </div>
    );
};

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 (
        <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm my-8">
            <div className="mb-4">
                <h4 className="text-sm font-bold text-slate-700 uppercase tracking-wide">{labels.title}</h4>
                <p className="text-xs text-slate-500">{labels.sub}</p>
            </div>
            <canvas ref={canvasRef} className="w-full h-64" />
            <div className="mt-2 text-xs text-slate-500 font-medium text-right">
                Source: Bloomberg Intelligence Data
            </div>
        </div>
    );
};

const QuoteBlock = ({ text, author, source, date }) => (
    <div className="border-l-4 border-blue-500 pl-6 py-2 my-8 bg-blue-50/50 rounded-r-lg">
        <p className="text-lg mb-3 text-slate-700 font-quote">"{text}"</p>
        <div className="flex flex-col text-xs">
            <span className="font-bold text-slate-900">{author}</span>
            <span className="text-slate-500 uppercase tracking-wide">{source} • {date}</span>
        </div>
    </div>
);

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 (
        <div className={`${bgClass} p-4 rounded-lg border ${borderClass} relative overflow-hidden transition-all ${flash}`}>
            <div className="flex justify-between items-start mb-2">
                <div>
                    <span className="text-xs text-slate-400 font-bold uppercase">{name}</span>
                    <div className="text-xl font-bold text-white font-mono">{symbol}</div>
                </div>
                <div className={`flex items-center gap-1 text-xs font-bold px-2 py-1 rounded ${isPositive ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400'}`}>
                    {isPositive ? <ArrowUpIcon /> : <ArrowDownIcon />}
                    {Math.abs(displayChange).toFixed(2)}%
                </div>
            </div>
            <div className="flex justify-between items-end">
                <div className="text-2xl font-mono text-white tracking-tighter">
                    ${currentPrice.toFixed(2)}
                </div>
                <div className="flex items-center gap-1">
                    <div className={`w-2 h-2 rounded-full ${isSimulation || fetchError ? 'bg-amber-500' : 'bg-green-500'} animate-pulse`}></div>
                    <div className="text-[10px] text-slate-500">
                        {isSimulation ? 'SIM' : (fetchError ? 'SIM (ERR)' : 'LIVE')}
                    </div>
                </div>
            </div>
        </div>
    );
};

// --- 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 }) => (
        <a 
            href={`#${id}`} 
            className={`block py-2 px-4 border-l-2 text-sm font-tag transition-all duration-200 ${activeSection === id ? 'border-blue-600 text-blue-700 font-semibold bg-blue-50' : 'border-transparent text-slate-500 hover:text-slate-800 hover:border-slate-300'}`}
        >
            {title}
        </a>
    );

    return (
        <div>
            {/* The New Top Navbar */}
            <Navbar lang={lang} setLang={setLang} />

            {/* Main Content Container (Added top padding pt-24) */}
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 pt-24 font-body">
                
                {/* Header (Cleaned up) */}
                <div className="mb-16 border-b border-slate-200 pb-8 relative">
                    <div className="flex flex-col md:flex-row justify-between items-start gap-6">
                        <div className="flex-1">
                            <span className="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full font-bold tracking-wide mb-4 font-tag">{T.header.tag}</span>
                            <h1 className="text-4xl md:text-6xl font-black text-slate-900 tracking-tight leading-tight mb-4 font-title">
                                {T.header.title}
                            </h1>
                            <h2 className="text-xl md:text-2xl text-slate-500 font-light font-heading mb-6">
                                {T.header.subtitle}
                            </h2>

                            {/* Author Tag & Socials */}
                            <div className="flex flex-col gap-2">
                                <div className="flex items-center gap-3">
                                    <div className="h-px w-10 bg-slate-300"></div>
                                    <p className="text-sm font-tag text-slate-500 font-medium">
                                        {T.meta.author} <span className="font-bold text-slate-900">Nicolas Airolde</span>
                                    </p>
                                </div>
                                
                                {/* Social Links */}
                                <div className="flex items-center gap-3 ml-[52px]"> 
                                    <a href="https://www.linkedin.com/in/YOUR_PROFILE" target="_blank" rel="noopener noreferrer" title="LinkedIn">
                                        <LinkedInIcon />
                                    </a>
                                    <a href="https://github.com/YOUR_USERNAME" target="_blank" rel="noopener noreferrer" title="GitHub">
                                        <GithubIcon />
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div className="flex flex-col items-end gap-4">
                            <div className="hidden md:block text-right font-tag">
                                <div className="text-slate-900 font-bold text-lg">{T.meta.date}</div>
                                <div className="text-slate-500 text-sm">{T.meta.class} <span className="text-red-600 font-semibold">{T.meta.priority}</span></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="flex flex-col lg:flex-row gap-12 relative">
                    {/* Sidebar Navigation */}
                    <aside className="hidden lg:block w-64 flex-shrink-0">
                        <div className="sticky top-24"> {/* Adjusted sticky top for Navbar */}
                            <nav className="space-y-1 mb-8">
                                <NavItem id="executive-summary" title={T.nav.summary} />
                                <NavItem id="macro-indicator" title={T.nav.macro} />
                                <NavItem id="circular-financing" title={T.nav.circular} />
                                <NavItem id="hardware-cliff" title={T.nav.hardware} />
                                <NavItem id="subprime-data" title={T.nav.subprime} />
                                <NavItem id="national-security" title={T.nav.security} />
                                <NavItem id="geopolitical-trap" title={T.nav.geo} />
                                <NavItem id="the-pivot" title={T.nav.pivot} />
                            </nav>

                            <div className="p-4 bg-slate-100 rounded-lg border border-slate-200">
                                <p className="text-xs text-slate-500 mb-2 font-semibold font-tag">{T.nav.disclaimer}</p>
                                <p className="text-xs text-slate-600">
                                    {T.nav.disclaimerText}
                                </p>
                            </div>
                        </div>
                    </aside>

                    {/* Main Content Area */}
                    <main className="flex-1 max-w-3xl">
                        {/* Sections 1-8 ... Identical to previous file, no changes needed here */}
                        <section id="executive-summary" className="mb-16 scroll-mt-24">
                            <h3 className="text-2xl font-bold text-slate-900 mb-6 flex items-center gap-3 font-heading">
                                <span className="text-slate-300">01</span> {T.sections.summary.title}
                            </h3>
                            <div className="prose-text text-slate-700 space-y-4">
                                <p className="font-medium text-slate-900">{T.sections.summary.p1}</p>
                                <p className="mb-8">{T.sections.summary.p2}</p>
                                <div className="grid grid-cols-1 gap-6">
                                    <div className="group bg-white p-6 rounded-lg border-t-4 border-red-600 shadow-sm hover:shadow-md transition-shadow duration-200 relative overflow-hidden">
                                        <div className="absolute top-4 right-4 opacity-10"><span className="text-6xl font-black text-slate-900 font-heading">01</span></div>
                                        <div className="relative z-10">
                                            <h4 className="text-lg font-bold text-slate-900 mb-2 tracking-tight font-heading">{T.sections.summary.card1.title}</h4>
                                            <p className="text-sm text-slate-600 leading-relaxed mb-4">{T.sections.summary.card1.text}</p>
                                            <div className="flex items-center gap-2 text-xs font-semibold text-red-700 bg-red-50 py-2 px-3 rounded inline-block"><span className="uppercase tracking-wider font-tag">Impact:</span> <span>{T.sections.summary.card1.impact}</span></div>
                                        </div>
                                    </div>
                                    <div className="group bg-white p-6 rounded-lg border-t-4 border-amber-500 shadow-sm hover:shadow-md transition-shadow duration-200 relative overflow-hidden">
                                        <div className="absolute top-4 right-4 opacity-10"><span className="text-6xl font-black text-slate-900 font-heading">02</span></div>
                                        <div className="relative z-10">
                                            <h4 className="text-lg font-bold text-slate-900 mb-2 tracking-tight font-heading">{T.sections.summary.card2.title}</h4>
                                            <p className="text-sm text-slate-600 leading-relaxed mb-4">{T.sections.summary.card2.text}</p>
                                            <div className="flex items-center gap-2 text-xs font-semibold text-amber-700 bg-amber-50 py-2 px-3 rounded inline-block"><span className="uppercase tracking-wider font-tag">Impact:</span> <span>{T.sections.summary.card2.impact}</span></div>
                                        </div>
                                    </div>
                                    <div className="group bg-white p-6 rounded-lg border-t-4 border-slate-500 shadow-sm hover:shadow-md transition-shadow duration-200 relative overflow-hidden">
                                        <div className="absolute top-4 right-4 opacity-10"><span className="text-6xl font-black text-slate-900 font-heading">03</span></div>
                                        <div className="relative z-10">
                                            <h4 className="text-lg font-bold text-slate-900 mb-2 tracking-tight font-heading">{T.sections.summary.card3.title}</h4>
                                            <p className="text-sm text-slate-600 leading-relaxed mb-4">{T.sections.summary.card3.text}</p>
                                            <div className="flex items-center gap-2 text-xs font-semibold text-slate-700 bg-slate-100 py-2 px-3 rounded inline-block"><span className="uppercase tracking-wider font-tag">Impact:</span> <span>{T.sections.summary.card3.impact}</span></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>

                        <hr className="border-slate-200 mb-16" />

                        <section id="macro-indicator" className="mb-16 scroll-mt-24">
                            <h3 className="text-2xl font-bold text-slate-900 mb-6 flex items-center gap-3 font-heading"><span className="text-slate-300">02</span> {T.sections.macro.title}</h3>
                            <div className="prose-text text-slate-700 space-y-6">
                                <p>{T.sections.macro.text}</p>
                                <div className="bg-slate-50 p-6 rounded-xl border border-slate-200"><h4 className="font-bold text-slate-900 mb-4 font-heading">{T.sections.macro.capitalTrap.title}</h4><p>{T.sections.macro.capitalTrap.text}</p></div>
                                <BuffettCanvas labels={T.canvas.buffett} />
                                <div className="grid md:grid-cols-2 gap-6 my-8">
                                    <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-200"><h4 className="text-sm font-bold text-slate-500 uppercase mb-2 font-tag">{T.sections.macro.card1.title}</h4><p className="text-sm">{T.sections.macro.card1.text}</p></div>
                                    <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-200"><h4 className="text-sm font-bold text-slate-500 uppercase mb-2 font-tag">{T.sections.macro.card2.title}</h4><p className="text-sm">{T.sections.macro.card2.text}</p></div>
                                </div>
                            </div>
                        </section>

                        <hr className="border-slate-200 mb-16" />

                        <section id="circular-financing" className="mb-16 scroll-mt-24">
                            <h3 className="text-2xl font-bold text-slate-900 mb-6 flex items-center gap-3 font-heading"><span className="text-slate-300">03</span> {T.sections.circular.title}</h3>
                            <div className="prose-text text-slate-700 space-y-6">
                                <p>{T.sections.circular.intro}</p>
                                <CircularDiagramCanvas labels={T.canvas.circular} />
                                <div className="bg-slate-50 p-6 rounded-xl border border-slate-200">
                                    <h4 className="font-bold text-slate-900 mb-4 font-heading">{T.sections.circular.cycle.title}</h4>
                                    <ol className="list-decimal list-inside space-y-2 text-sm"><li><strong>{T.sections.circular.cycle.l1}</strong></li><li><strong>{T.sections.circular.cycle.l2}</strong></li><li><strong>{T.sections.circular.cycle.l3}</strong></li><li><strong>{T.sections.circular.cycle.l4}</strong></li></ol>
                                </div>
                                <div className="bg-red-50 p-6 rounded-xl border border-red-100 mt-6"><h4 className="font-bold text-red-900 mb-2 font-heading">{T.sections.circular.breakdown.title}</h4><p className="text-sm text-red-800">{T.sections.circular.breakdown.text}</p></div>
                            </div>
                        </section>

                        <hr className="border-slate-200 mb-16" />

                        <section id="hardware-cliff" className="mb-16 scroll-mt-24">
                            <h3 className="text-2xl font-bold text-slate-900 mb-6 flex items-center gap-3 font-heading"><span className="text-slate-300">04</span> {T.sections.hardware.title}</h3>
                            <div className="prose-text text-slate-700 space-y-6">
                                <p>{T.sections.hardware.intro}</p>
                                <ul className="space-y-4">
                                    <li className="flex gap-3"><ChartIcon /><div>{T.sections.hardware.list.l1}</div></li>
                                    <li className="flex gap-3"><ChartIcon /><div>{T.sections.hardware.list.l2}</div></li>
                                    <li className="flex gap-3"><ChartIcon /><div>{T.sections.hardware.list.l3}</div></li>
                                </ul>
                            </div>
                        </section>

                        <hr className="border-slate-200 mb-16" />

                        <section id="subprime-data" className="mb-16 scroll-mt-24">
                            <h3 className="text-2xl font-bold text-slate-900 mb-6 flex items-center gap-3 font-heading"><span className="text-slate-300">05</span> {T.sections.subprime.title}</h3>
                            <div className="prose-text text-slate-700 space-y-6">
                                <p>{T.sections.subprime.intro}</p>
                                <div className="bg-slate-50 p-6 rounded-xl border border-slate-200">
                                    <h4 className="font-bold text-slate-900 mb-4 font-heading">{T.sections.subprime.box.title}</h4>
                                    <ul className="list-disc list-inside space-y-2 text-sm"><li>{T.sections.subprime.box.l1}</li><li>{T.sections.subprime.box.l2}</li><li>{T.sections.subprime.box.l3}</li><li>{T.sections.subprime.box.l4}</li></ul>
                                </div>
                            </div>
                        </section>

                        <hr className="border-slate-200 mb-16" />

                        <section id="national-security" className="mb-16 scroll-mt-24">
                            <h3 className="text-2xl font-bold text-slate-900 mb-6 flex items-center gap-3 font-heading"><span className="text-slate-300">06</span> {T.sections.security.title}</h3>
                            <div className="prose-text text-slate-700 space-y-6">
                                <p>{T.sections.security.text}</p>
                                <blockquote className="pl-6 border-l-4 border-slate-300 italic text-slate-600 my-6 font-quote">"{T.sections.security.quote}"</blockquote>
                                <p>{T.sections.security.text2}</p>
                            </div>
                        </section>
                        
                        <hr className="border-slate-200 mb-16" />

                        <section id="geopolitical-trap" className="mb-16 scroll-mt-24">
                            <h3 className="text-2xl font-bold text-slate-900 mb-6 flex items-center gap-3 font-heading"><span className="text-slate-300">07</span> {T.sections.geo.title}</h3>
                            <div className="prose-text text-slate-700 space-y-6">
                                <p>{T.sections.geo.intro}</p>
                                <div className="bg-slate-50 p-6 rounded-xl border border-slate-200 mb-6"><h4 className="font-bold text-slate-900 mb-4 font-heading">{T.sections.geo.box.title}</h4><p className="text-sm">{T.sections.geo.box.text}</p></div>
                                <CapexCanvas labels={T.canvas.capex} />
                                <div className="grid md:grid-cols-2 gap-6 my-8">
                                    <div className="bg-blue-50 p-6 rounded-xl border border-blue-100"><h4 className="text-sm font-bold text-blue-800 uppercase mb-2">{T.sections.geo.card1.title}</h4><p className="text-sm text-slate-700">{T.sections.geo.card1.text}</p></div>
                                    <div className="bg-red-50 p-6 rounded-xl border border-red-100"><h4 className="text-sm font-bold text-red-800 uppercase mb-2">{T.sections.geo.card2.title}</h4><p className="text-sm text-slate-700">{T.sections.geo.card2.text}</p></div>
                                </div>
                            </div>
                        </section>

                        <section id="the-pivot" className="bg-slate-900 text-slate-100 p-8 rounded-2xl scroll-mt-24 shadow-2xl">
                            <h3 className="text-3xl font-bold text-white mb-8 flex items-center gap-3 font-heading"><span className="text-slate-500">08</span> {T.sections.pivot.title}</h3>
                            <p className="mb-8 text-slate-300 text-lg">{T.sections.pivot.intro}</p>
                            <div className="space-y-8">
                                <div className="bg-slate-800/50 p-6 rounded-xl border border-red-500/30">
                                    <h4 className="text-red-400 font-bold mb-4 flex items-center gap-2 font-heading"><span className="bg-red-500/10 p-1 rounded">▼</span> {T.sections.pivot.short.title}</h4>
                                    <div className="grid sm:grid-cols-2 md:grid-cols-3 gap-4 mb-4"><StockCard symbol="NVDA" name="Nvidia" initialPrice={135.40} initialChange={-2.4} type="short" /><StockCard symbol="ORCL" name="Oracle" initialPrice={142.10} initialChange={-3.1} type="short" /><StockCard symbol="SMH" name="Semi ETF" initialPrice={210.55} initialChange={-1.8} type="short" /></div>
                                    <p className="text-sm text-slate-400">{T.sections.pivot.short.rationale}</p>
                                </div>
                                <div className="bg-slate-800/50 p-6 rounded-xl border border-emerald-500/30">
                                    <h4 className="text-emerald-400 font-bold mb-4 flex items-center gap-2 font-heading"><span className="bg-emerald-500/10 p-1 rounded">▲</span> {T.sections.pivot.long.title}</h4>
                                    <div className="mb-6"><p className="text-xs font-bold text-slate-500 uppercase mb-2 font-tag">{T.sections.pivot.long.cat1}</p><div className="grid sm:grid-cols-2 md:grid-cols-3 gap-4"><StockCard symbol="GOOGL" name="Alphabet Inc" initialPrice={185.60} initialChange={0.9} type="long" /><StockCard symbol="PLTR" name="Palantir" initialPrice={62.80} initialChange={1.2} type="long" /><StockCard symbol="BAH" name="Booz Allen" initialPrice={185.20} initialChange={0.8} type="long" /><StockCard symbol="LDOS" name="Leidos" initialPrice={175.90} initialChange={0.5} type="long" /></div></div>
                                    <div><p className="text-xs font-bold text-slate-500 uppercase mb-2 font-tag">{T.sections.pivot.long.cat2}</p><div className="grid sm:grid-cols-2 gap-4"><StockCard symbol="EQIX" name="Equinix" initialPrice={890.00} initialChange={0.3} type="long" /><StockCard symbol="DLR" name="Digital Realty" initialPrice={155.45} initialChange={0.4} type="long" /></div></div>
                                </div>
                                <div className="bg-slate-800/50 p-6 rounded-xl border border-yellow-500/30"><h4 className="text-yellow-400 font-bold mb-2 font-heading">{T.sections.pivot.deep.title}</h4><p className="text-sm text-slate-300">{T.sections.pivot.deep.text}</p></div>
                                <div className="bg-slate-800/50 p-6 rounded-xl border border-blue-500/30"><h4 className="text-blue-400 font-bold mb-2 font-heading">{T.sections.pivot.global.title}</h4><p className="text-sm text-slate-300">{T.sections.pivot.global.text}</p></div>
                            </div>
                        </section>

                        <footer className="mt-24 text-center text-slate-400 text-sm font-tag">
                            <p>{T.footer}</p>
                        </footer>

                    </main>
                </div>
            </div>
        </div>
    );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Whitepaper />);