function App() { // === CONTENT DATA === const content = { "title": "Solana (SOL) Analysis Report on Technical Outlook and Market Resistance Levels", "subtitle": "Comprehensive analysis of Solana (SOL) Analysis Report on Technical Outlook and Market Resistance Levels", "metadata": {}, "sections": [ { "title": "Current Price and Market Metrics", "content": "As of the latest data, Solana (SOL) is trading at **$216.27** with a 24-hour change of **-1.74%**. The market capitalization of Solana stands at **$113.36 billion**. These metrics provide a snapshot of Solana's current market position and recent performance.", "type": "market", "level": 2, "id": "section-0", "importance": 2, "html": "

As of the latest data, Solana (SOL) is trading at $216.27 with a 24-hour change of -1.74%. The market capitalization of Solana stands at $113.36 billion. These metrics provide a snapshot of Solana's current market position and recent performance.

" }, { "title": "Key Metrics:", "content": "- **Current Price**: $216.27\n- **24h Change**: -1.74%\n- **Market Cap**: $113.36 billion", "type": "market", "level": 3, "id": "section-1", "importance": 3, "html": "

Current Price: $216.27
24h Change: -1.74%
Market Cap: $113.36 billion

" }, { "title": "Technical Indicators", "content": "Solana's technical indicators suggest a mixed outlook. Analysts are watching for key resistance levels between **$213-$217**. A breakout above this range could lead to a rally towards **$238**. Weekly charts also indicate a potential cup-and-handle pattern, which, if confirmed, could see long-term targets north of **$300** if resistance at **$260** is breached.", "type": "opportunity", "level": 3, "id": "section-2", "importance": 3, "html": "

Solana's technical indicators suggest a mixed outlook. Analysts are watching for key resistance levels between $213-$217. A breakout above this range could lead to a rally towards $238. Weekly charts also indicate a potential cup-and-handle pattern, which, if confirmed, could see long-term targets north of $300 if resistance at $260 is breached.

" }, { "title": "Market Sentiment", "content": "The social dominance of SOL has risen from **4.73%** to **5.36%** in just one day, reflecting increasing engagement and interest on social media platforms. This growth in social sentiment often correlates with higher market participation and price momentum.", "type": "market", "level": 3, "id": "section-3", "importance": 3, "html": "

The social dominance of SOL has risen from 4.73% to 5.36% in just one day, reflecting increasing engagement and interest on social media platforms. This growth in social sentiment often correlates with higher market participation and price momentum.

" }, { "title": "Team and Background", "content": "Solana's team includes experienced professionals with a strong background in technology and blockchain. The founders and key team members have a track record of successful projects and deep expertise in the field. For detailed information, refer to the Solana Foundation and core concepts documentation.", "type": "technical", "level": 3, "id": "section-4", "importance": 3, "html": "

Solana's team includes experienced professionals with a strong background in technology and blockchain. The founders and key team members have a track record of successful projects and deep expertise in the field. For detailed information, refer to the Solana Foundation and core concepts documentation.

" }, { "title": "Funding and Investors", "content": "Solana has raised significant funding over multiple rounds, with the latest round being a secondary market round in August 2024. The project is backed by 48 investors, including prominent venture capitalists and institutional funds. This robust funding history underscores the confidence of the investment community in Solana's potential.", "type": "opportunity", "level": 3, "id": "section-5", "importance": 3, "html": "

Solana has raised significant funding over multiple rounds, with the latest round being a secondary market round in August 2024. The project is backed by 48 investors, including prominent venture capitalists and institutional funds. This robust funding history underscores the confidence of the investment community in Solana's potential.

" }, { "title": "Partnerships and Collaborations", "content": "Solana has been actively forming partnerships and collaborations to expand its ecosystem. Recent developments include integrations with various DeFi protocols, NFT platforms, and other blockchain solutions. These partnerships are crucial for driving adoption and enhancing the utility of the Solana network.", "type": "general", "level": 3, "id": "section-6", "importance": 3, "html": "

Solana has been actively forming partnerships and collaborations to expand its ecosystem. Recent developments include integrations with various DeFi protocols, NFT platforms, and other blockchain solutions. These partnerships are crucial for driving adoption and enhancing the utility of the Solana network.

" }, { "title": "Blockchain Technology", "content": "Solana's web-scale blockchain is designed for fast, secure, and scalable decentralized applications. The platform can process thousands of transactions per second, making it one of the most performant blockchains in the industry. The architecture is built to handle high throughput and low latency, which is essential for mass adoption.", "type": "technical", "level": 3, "id": "section-7", "importance": 3, "html": "

Solana's web-scale blockchain is designed for fast, secure, and scalable decentralized applications. The platform can process thousands of transactions per second, making it one of the most performant blockchains in the industry. The architecture is built to handle high throughput and low latency, which is essential for mass adoption.

" }, { "title": "Security Audits", "content": "Solana's smart contracts and infrastructure undergo regular security audits by leading firms such as Cyfrin and Hacken. These audits help identify and mitigate potential vulnerabilities, ensuring the security and reliability of the network. The Solana community also maintains a repository of security resources and best practices.", "type": "opportunity", "level": 3, "id": "section-8", "importance": 3, "html": "

Solana's smart contracts and infrastructure undergo regular security audits by leading firms such as Cyfrin and Hacken. These audits help identify and mitigate potential vulnerabilities, ensuring the security and reliability of the network. The Solana community also maintains a repository of security resources and best practices.

" }, { "title": "Token Distribution and Vesting", "content": "Solana's tokenomics include a vesting schedule for allocations to the inflation, community, seed round, founding round, team, foundation, and validator round. Detailed information about the vesting schedule and token distribution can be found in the Solana token unlock and vesting calendar.", "type": "team", "level": 3, "id": "section-9", "importance": 3, "html": "

Solana's tokenomics include a vesting schedule for allocations to the inflation, community, seed round, founding round, team, foundation, and validator round. Detailed information about the vesting schedule and token distribution can be found in the Solana token unlock and vesting calendar.

" }, { "title": "Utility and Use Cases", "content": "The SOL token serves multiple purposes within the Solana ecosystem:\n- **Transaction Fees**: SOL is used to pay for transaction fees and gas costs.\n- **Staking**: Users can stake SOL to participate in the network's consensus mechanism and earn rewards.\n- **Governance**: SOL holders can participate in the governance of the Solana network through voting on proposals.\n- **Smart Contracts**: SOL is used to interact with smart contracts and decentralized applications (dApps).", "type": "recommendation", "level": 3, "id": "section-10", "importance": 3, "html": "

The SOL token serves multiple purposes within the Solana ecosystem:

Transaction Fees: SOL is used to pay for transaction fees and gas costs.
Staking: Users can stake SOL to participate in the network's consensus mechanism and earn rewards.
Governance: SOL holders can participate in the governance of the Solana network through voting on proposals.
Smart Contracts: SOL is used to interact with smart contracts and decentralized applications (dApps).

" }, { "title": "Total Addressable Market (TAM)", "content": "Solana's total addressable market (TAM) is expanding rapidly, driven by its high-performance capabilities and growing ecosystem. The platform not only expands the TAM for trading but also captures value from more layers of the finance stack, including payments and financial services.", "type": "market", "level": 3, "id": "section-11", "importance": 3, "html": "

Solana's total addressable market (TAM) is expanding rapidly, driven by its high-performance capabilities and growing ecosystem. The platform not only expands the TAM for trading but also captures value from more layers of the finance stack, including payments and financial services.

" }, { "title": "DeFi TVL and Volume", "content": "According to DefiLlama and DappRadar, Solana's DeFi TVL and volume metrics are robust. The platform supports a wide range of DeFi protocols, stablecoins, and dApps, contributing to its overall market presence and utility.", "type": "market", "level": 3, "id": "section-12", "importance": 3, "html": "

According to DefiLlama and DappRadar, Solana's DeFi TVL and volume metrics are robust. The platform supports a wide range of DeFi protocols, stablecoins, and dApps, contributing to its overall market presence and utility.

" }, { "title": "Competitors", "content": "Solana competes with other high-performance blockchains such as Ethereum, Binance Smart Chain, and Polkadot. While each platform has its strengths, Solana's focus on speed and scalability gives it a unique advantage in certain use cases.", "type": "opportunity", "level": 3, "id": "section-13", "importance": 3, "html": "

Solana competes with other high-performance blockchains such as Ethereum, Binance Smart Chain, and Polkadot. While each platform has its strengths, Solana's focus on speed and scalability gives it a unique advantage in certain use cases.

" }, { "title": "Opportunities", "content": "- **High Performance**: Solana's ability to process thousands of transactions per second makes it well-suited for high-demand applications.\n- **Growing Ecosystem**: The expanding ecosystem, including DeFi, NFTs, and other dApps, enhances the utility and adoption of SOL.\n- **Strong Community Support**: The active and engaged community contributes to the network's growth and development.", "type": "recommendation", "level": 3, "id": "section-14", "importance": 3, "html": "

High Performance: Solana's ability to process thousands of transactions per second makes it well-suited for high-demand applications.
Growing Ecosystem: The expanding ecosystem, including DeFi, NFTs, and other dApps, enhances the utility and adoption of SOL.
Strong Community Support: The active and engaged community contributes to the network's growth and development.

" }, { "title": "Risks", "content": "- **Network Outages**: Solana has experienced several major outages, which can impact user trust and adoption.\n- **Security Concerns**: The platform has faced security incidents, including wallet hacks, which highlight the importance of ongoing security measures.\n- **Regulatory Uncertainty**: The regulatory landscape for cryptocurrencies is still evolving, and changes in regulations could affect Solana's operations and market position.", "type": "risk", "level": 3, "id": "section-15", "importance": 3, "html": "

Network Outages: Solana has experienced several major outages, which can impact user trust and adoption.
Security Concerns: The platform has faced security incidents, including wallet hacks, which highlight the importance of ongoing security measures.
Regulatory Uncertainty: The regulatory landscape for cryptocurrencies is still evolving, and changes in regulations could affect Solana's operations and market position.

" }, { "title": "Short-Term Strategy", "content": "- **Monitor Key Levels**: Keep an eye on the key resistance levels between $213-$217 and $260. A breakout above these levels could signal a buying opportunity.\n- **Dollar-Cost Averaging (DCA)**: Consider using a DCA approach to build a position in SOL, especially if you believe in its long-term potential.", "type": "opportunity", "level": 3, "id": "section-16", "importance": 3, "html": "

Monitor Key Levels: Keep an eye on the key resistance levels between $213-$217 and $260. A breakout above these levels could signal a buying opportunity.
Dollar-Cost Averaging (DCA): Consider using a DCA approach to build a position in SOL, especially if you believe in its long-term potential.

" }, { "title": "Long-Term Strategy", "content": "- **Focus on Fundamentals**: Invest in Solana based on its strong fundamentals, including its high-performance blockchain, robust funding, and growing ecosystem.\n- **Risk Management**: Diversify your portfolio and limit your exposure to any single asset, including SOL. Maintain a balanced mix of large and mid-cap assets, and keep 20-30% in stablecoins to manage risk.", "type": "risk", "level": 3, "id": "section-17", "importance": 3, "html": "

Focus on Fundamentals: Invest in Solana based on its strong fundamentals, including its high-performance blockchain, robust funding, and growing ecosystem.
Risk Management: Diversify your portfolio and limit your exposure to any single asset, including SOL. Maintain a balanced mix of large and mid-cap assets, and keep 20-30% in stablecoins to manage risk.

" }, { "title": "Action Steps", "content": "1. **Research Phase**: Conduct a deep dive into Solana's technology, team, and tokenomics.\n2. **Due Diligence**: Verify the team's credentials, review the project's whitepaper, and assess the security audits.\n3. **Entry Strategy**: Use limit orders and a DCA approach to enter the market.\n4. **Monitoring**: Set up price alerts and track key metrics, including social sentiment and on-chain activity.\n5. **Review**: Reassess your portfolio quarterly to ensure it aligns with your investment goals and risk profile.", "type": "technical", "level": 3, "id": "section-18", "importance": 3, "html": "

Research Phase: Conduct a deep dive into Solana's technology, team, and tokenomics.
Due Diligence: Verify the team's credentials, review the project's whitepaper, and assess the security audits.
Entry Strategy: Use limit orders and a DCA approach to enter the market.
Monitoring: Set up price alerts and track key metrics, including social sentiment and on-chain activity.
Review: Reassess your portfolio quarterly to ensure it aligns with your investment goals and risk profile.

" }, { "title": "Conclusion", "content": "Solana (SOL) is a high-performance blockchain with a strong market position and growing ecosystem. While it faces some risks, including network outages and security concerns, its fundamental strengths and potential for growth make it an attractive investment opportunity. By following a balanced and well-informed strategy, investors can capitalize on Solana's potential while managing risk effectively.", "type": "risk", "level": 2, "id": "section-19", "importance": 2, "html": "

Solana (SOL) is a high-performance blockchain with a strong market position and growing ecosystem. While it faces some risks, including network outages and security concerns, its fundamental strengths and potential for growth make it an attractive investment opportunity. By following a balanced and well-informed strategy, investors can capitalize on Solana's potential while managing risk effectively.

" } ] }; // === STATE === const [activeSection, setActiveSection] = React.useState(0); const [sidebarOpen, setSidebarOpen] = React.useState(false); // Default closed on mobile const [scrollContainer, setScrollContainer] = React.useState(null); const [isMobile, setIsMobile] = React.useState(window.innerWidth < 1024); // === Find the actual scroll container === const findScrollContainer = () => { // Check document.documentElement first (common in iframes) const htmlStyle = window.getComputedStyle(document.documentElement); if (htmlStyle.overflow === 'auto' || htmlStyle.overflow === 'scroll' || htmlStyle.overflowY === 'auto' || htmlStyle.overflowY === 'scroll') { return document.documentElement; } // Then check body const bodyStyle = window.getComputedStyle(document.body); if (bodyStyle.overflow === 'auto' || bodyStyle.overflow === 'scroll' || bodyStyle.overflowY === 'auto' || bodyStyle.overflowY === 'scroll') { return document.body; } // Check for parent containers let element = document.body.parentElement; while (element && element !== document.documentElement) { const style = window.getComputedStyle(element); if (style.overflow === 'auto' || style.overflow === 'scroll' || style.overflowY === 'auto' || style.overflowY === 'scroll') { return element; } element = element.parentElement; } // Default to null - will use window scrolling return null; }; // === Initialize scroll container on mount === React.useEffect(() => { const container = findScrollContainer(); setScrollContainer(container); }, []); // === Handle window resize === React.useEffect(() => { const handleResize = () => { const mobile = window.innerWidth < 1024; setIsMobile(mobile); // Only auto-manage sidebar on significant layout change if (!isMobile && mobile) { // Desktop to mobile - close sidebar setSidebarOpen(false); } else if (isMobile && !mobile) { // Mobile to desktop - open sidebar setSidebarOpen(true); } }; // Initial setup const mobile = window.innerWidth < 1024; setIsMobile(mobile); if (!mobile) { setSidebarOpen(true); // Open by default on desktop } window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, [isMobile]); // === BEAUTIFUL COLOR PALETTES === const palettes = [ // Ocean Breeze { name: 'Ocean Breeze', primary: '#0EA5E9', primaryDark: '#0284C7', background: '#F0F9FF', surface: '#FFFFFF', text: '#0C4A6E', textMuted: '#0284C7', border: '#BAE6FD', accent: '#06B6D4', gradient: 'linear-gradient(135deg, #0f766e 0%, #0891b2 35%, #0ea5e9 70%, #38bdf8 100%)' }, // Sunset Glow { name: 'Sunset Glow', primary: '#F97316', primaryDark: '#EA580C', background: '#FFF7ED', surface: '#FFFFFF', text: '#7C2D12', textMuted: '#C2410C', border: '#FED7AA', accent: '#FB923C', gradient: 'linear-gradient(135deg, #dc2626 0%, #f97316 30%, #fb923c 60%, #fbbf24 100%)' }, // Forest Deep { name: 'Forest Deep', primary: '#10B981', primaryDark: '#059669', background: '#F0FDF4', surface: '#FFFFFF', text: '#064E3B', textMuted: '#047857', border: '#A7F3D0', accent: '#34D399', gradient: 'linear-gradient(135deg, #065f46 0%, #059669 30%, #10b981 65%, #34d399 100%)' }, // Royal Purple { name: 'Royal Purple', primary: '#8B5CF6', primaryDark: '#7C3AED', background: '#FAF5FF', surface: '#FFFFFF', text: '#581C87', textMuted: '#6D28D9', border: '#DDD6FE', accent: '#A78BFA', gradient: 'linear-gradient(135deg, #6b21a8 0%, #7c3aed 30%, #8b5cf6 60%, #a78bfa 90%, #c4b5fd 100%)' }, // Midnight Blue { name: 'Midnight Blue', primary: '#3B82F6', primaryDark: '#2563EB', background: '#F0F4FF', surface: '#FFFFFF', text: '#1E3A8A', textMuted: '#1E40AF', border: '#DBEAFE', accent: '#60A5FA', gradient: 'linear-gradient(135deg, #1e3a8a 0%, #2563eb 30%, #3b82f6 60%, #60a5fa 90%, #93c5fd 100%)' }, // Autumn Spice { name: 'Autumn Spice', primary: '#DC2626', primaryDark: '#B91C1C', background: '#FEF2F2', surface: '#FFFFFF', text: '#7F1D1D', textMuted: '#991B1B', border: '#FECACA', accent: '#EF4444', gradient: 'linear-gradient(135deg, #991b1b 0%, #dc2626 25%, #ef4444 50%, #f87171 75%, #fca5a5 100%)' }, // Jade Garden { name: 'Jade Garden', primary: '#14B8A6', primaryDark: '#0F766E', background: '#F0FDFA', surface: '#FFFFFF', text: '#134E4A', textMuted: '#0F766E', border: '#A7F3D0', accent: '#2DD4BF', gradient: 'linear-gradient(135deg, #0f766e 0%, #14b8a6 35%, #2dd4bf 70%, #5eead4 100%)' }, // Golden Hour { name: 'Golden Hour', primary: '#EAB308', primaryDark: '#CA8A04', background: '#FEFCE8', surface: '#FFFFFF', text: '#713F12', textMuted: '#A16207', border: '#FEF08A', accent: '#FACC15', gradient: 'linear-gradient(135deg, #d97706 0%, #eab308 30%, #facc15 60%, #fde047 85%, #fef08a 100%)' }, // Lavender Dream { name: 'Lavender Dream', primary: '#A855F7', primaryDark: '#9333EA', background: '#FAF5FF', surface: '#FFFFFF', text: '#581C87', textMuted: '#7E22CE', border: '#E9D5FF', accent: '#C084FC', gradient: 'linear-gradient(135deg, #7c3aed 0%, #9333ea 25%, #a855f7 50%, #c084fc 75%, #e9d5ff 100%)' } ]; // Select random palette const selectedPalette = palettes[2]; const theme = selectedPalette; // === SEMANTIC ICONS (Unicode) === const icons = { // Market & Analysis market: '📊', // Market analysis, trends analysis: '🔍', // Deep analysis, research // Technical technical: '⚙️', // Technical details, mechanisms technology: '💻', // Technology, digital // Risk & Security risk: '🛡️', // Risk assessment, protection risks: '🛡️', // Plural form security: '🔒', // Security, safety // Opportunities & Growth opportunity: '💎', // Opportunities, potential opportunities: '💎', // Plural form growth: '📈', // Growth, upward trends // Financial & Investment financial: '💹', // Financial data, charts investment: '💼', // Investment, business portfolio: '📁', // Portfolio allocation allocation: '📁', // Asset allocation // Strategy & Planning strategy: '🎯', // Strategic planning, targets strategies: '🎯', // Plural form entry: '🚪', // Entry strategies exit: '🚪', // Exit strategies (same as entry) 'entry and exit': '🔄', // Entry and exit strategies 'entry and exit strategies': '🔄', // Execution & Leadership executive: '👔', // Executive summary, leadership summary: '📋', // Summary, overview overview: '🌐', // Overview, big picture // Recommendations & Insights recommendation: '💡', // Recommendations, ideas recommendations: '💡', // Plural form insights: '🔮', // Insights, predictions // Data & Metrics data: '📊', // Data analysis, charts metrics: '📉', // Metrics, measurements statistics: '📈', // Statistics, trends // Reports & Documents report: '📑', // Reports, documents conclusion: '🎬', // Conclusion, ending conclusions: '🎬', // Plural form introduction: '📖', // Introduction, beginning // Tokenomics & Economics tokenomics: '🪙', // Token economics economics: '💴', // Economic analysis revenue: '💵', // Revenue models // Ecosystem & Partnerships ecosystem: '🌍', // Ecosystem, environment partnerships: '🤝', // Partnerships, collaborations integration: '🔗', // Integration, connections integrations: '🔗', // Plural form // DeFi & Blockchain defi: '🏦', // DeFi, decentralized finance blockchain: '⛓️', // Blockchain technology dapp: '📱', // DApps, applications // Fee & Cost fee: '💸', // Fees, costs fees: '💸', // Plural form cost: '🏷️', // Cost analysis // Virtual Machine & Development virtual: '🖥️', // Virtual machine developer: '👨‍💻', // Developer support development: '🛠️', // Development, building // Default fallback general: '📌' // General content }; // === SCROLL HANDLER === React.useEffect(() => { const handleScroll = () => { // Update active section with same offset as scrollToSection const sections = content.sections || []; const headerHeight = 80; const additionalPadding = 20; // Get scroll position from the actual scroll container const scrollTop = scrollContainer ? scrollContainer.scrollTop : window.scrollY; const scrollPosition = scrollTop + headerHeight + additionalPadding; for (let i = sections.length - 1; i >= 0; i--) { const element = document.getElementById(`section-${i}`); if (element && element.offsetTop <= scrollPosition) { setActiveSection(i); break; } } }; // Add listener to both window and scroll container if (scrollContainer) { scrollContainer.addEventListener('scroll', handleScroll); } window.addEventListener('scroll', handleScroll); handleScroll(); // Initial call return () => { if (scrollContainer) { scrollContainer.removeEventListener('scroll', handleScroll); } window.removeEventListener('scroll', handleScroll); }; }, [content.sections, scrollContainer]); // === SCROLL TO SECTION === const scrollToSection = (index) => { const element = document.getElementById(`section-${index}`); if (element) { // Calculate header height and add some padding const headerHeight = 80; // Approximate header height const additionalPadding = 20; // Extra space for better readability const totalOffset = headerHeight + additionalPadding; // Try multiple scrolling strategies // Strategy 1: Use scrollIntoView with block positioning try { // First scroll to element element.scrollIntoView({ behavior: 'smooth', block: 'start' }); // Then adjust for header offset setTimeout(() => { const currentScroll = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop; if (currentScroll > 0) { window.scrollBy(0, -totalOffset); } }, 100); } catch (e) { // Fallback if scrollIntoView fails } // Strategy 2: Check for iframe parent scrolling try { if (window.parent !== window) { // Post message to parent if in iframe window.parent.postMessage({ type: 'scrollTo', elementId: `section-${index}`, offset: totalOffset }, '*'); } } catch (e) { // Cannot access parent window (cross-origin) } // Strategy 3: Find any scrollable parent and use it let scrollableParent = element; while (scrollableParent && scrollableParent !== document.documentElement) { const style = window.getComputedStyle(scrollableParent); const hasVerticalScroll = scrollableParent.scrollHeight > scrollableParent.clientHeight; const canScroll = ['auto', 'scroll'].includes(style.overflowY) || ['auto', 'scroll'].includes(style.overflow); if (hasVerticalScroll && canScroll) { const parentRect = scrollableParent.getBoundingClientRect(); const elementRect = element.getBoundingClientRect(); const relativeTop = element.offsetTop - scrollableParent.offsetTop; scrollableParent.scrollTop = relativeTop - totalOffset; break; } scrollableParent = scrollableParent.parentElement; } // Strategy 4: Use element.focus() to bring it into view if (element.tabIndex === -1) { element.tabIndex = -1; // Make it focusable } // Update active section setActiveSection(index); // Close sidebar on mobile after navigation if (isMobile) { setSidebarOpen(false); } } }; // === STYLES === const styles = { container: { minHeight: '100vh', background: theme.background, fontFamily: 'system-ui, -apple-system, sans-serif' }, header: { background: theme.surface, borderBottom: `1px solid ${theme.border}`, padding: isMobile ? '0.75rem 1rem' : '1rem 2rem', // Less padding on mobile position: 'sticky', top: 0, zIndex: 50, display: 'flex', alignItems: 'center', gap: isMobile ? '0.75rem' : '1rem', boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)' // Subtle shadow for depth }, menuBtn: { background: 'none', border: '1px solid transparent', padding: '0.5rem', cursor: 'pointer', borderRadius: '0.25rem', fontSize: '1.5rem', lineHeight: 1, color: theme.text, display: 'flex', alignItems: 'center', justifyContent: 'center', minWidth: '44px', minHeight: '44px', WebkitTapHighlightColor: 'transparent', touchAction: 'manipulation' }, title: { fontSize: isMobile ? '1rem' : '1.5rem', // Further reduced for mobile fontWeight: '600', // Slightly lighter weight margin: 0, color: theme.text, lineHeight: 1.3, wordBreak: 'break-word', flex: 1 // Take available space }, layout: { display: 'flex', maxWidth: '1200px', margin: '0 auto', gap: isMobile ? '0' : '2rem', padding: isMobile ? '0' : '2rem', position: 'relative' }, sidebar: isMobile ? { // Mobile styles position: 'fixed', top: 0, left: 0, bottom: 0, width: '280px', background: theme.surface, borderRight: `1px solid ${theme.border}`, padding: '1.5rem', paddingTop: '5rem', // Space for header transform: sidebarOpen ? 'translateX(0)' : 'translateX(-100%)', transition: 'transform 0.3s ease', zIndex: 40, overflowY: 'auto' } : { // Desktop styles width: '280px', background: theme.surface, borderRadius: '0.5rem', border: `1px solid ${theme.border}`, padding: '1.5rem', height: 'fit-content', position: 'sticky', top: '6rem', display: sidebarOpen ? 'block' : 'none' }, overlay: { position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0, 0, 0, 0.5)', zIndex: 35, display: isMobile && sidebarOpen ? 'block' : 'none' }, navItem: { display: 'flex', alignItems: 'center', gap: '0.5rem', padding: isMobile ? '0.625rem' : '0.75rem', borderRadius: '0.375rem', textDecoration: 'none', color: theme.text, marginBottom: '0.25rem', transition: 'all 0.2s', border: `1px solid transparent`, fontSize: isMobile ? '0.875rem' : '0.9375rem', lineHeight: 1.4 }, mainContent: { flex: 1, minWidth: 0, padding: isMobile ? '0.75rem' : 0, // Less padding for more content space maxWidth: '100%', overflowX: 'hidden' // Prevent horizontal scroll }, hero: { background: theme.gradient || `linear-gradient(135deg, ${theme.primary} 0%, ${theme.accent} 100%)`, color: 'white', padding: isMobile ? '1.5rem 1.25rem' : '3rem 2rem', // Less vertical padding borderRadius: isMobile ? '0.5rem' : '1rem', marginBottom: isMobile ? '1rem' : '2rem', boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)' }, heroTitle: { fontSize: isMobile ? '1.5rem' : '2.5rem', // Reduced from 1.75rem fontWeight: isMobile ? '600' : 'bold', marginBottom: isMobile ? '0.75rem' : '1rem', margin: 0, lineHeight: isMobile ? 1.3 : 1.2, wordBreak: 'break-word' }, heroSubtitle: { fontSize: isMobile ? '0.875rem' : '1.125rem', // Smaller on mobile opacity: 0.9, margin: 0, lineHeight: isMobile ? 1.5 : 1.4 }, section: { background: theme.surface, border: `1px solid ${theme.border}`, borderRadius: isMobile ? '0.5rem' : '0.75rem', padding: isMobile ? '1.25rem' : '2rem', // Slightly less padding marginBottom: isMobile ? '0.75rem' : '1.5rem', boxShadow: '0 1px 3px rgba(0, 0, 0, 0.05)' }, sectionHeader: { display: 'flex', alignItems: 'center', gap: isMobile ? '0.75rem' : '1rem', marginBottom: isMobile ? '1rem' : '1.5rem' }, sectionIcon: { fontSize: isMobile ? '1.25rem' : '1.5rem', width: isMobile ? '36px' : '40px', height: isMobile ? '36px' : '40px', display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: '0.5rem', background: theme.background, flexShrink: 0 // Prevent icon from shrinking }, sectionTitle: { fontSize: isMobile ? '1.125rem' : '1.5rem', // Reduced from 1.25rem fontWeight: isMobile ? '600' : 'bold', margin: 0, color: theme.text, lineHeight: isMobile ? 1.3 : 1.2, wordBreak: 'break-word' }, sectionContent: { color: theme.textMuted, lineHeight: 1.6, fontSize: isMobile ? '0.9375rem' : '1rem' // Slightly smaller on mobile } }; // === GET ICON HELPER === const getIcon = (section) => { // First try to match the section type if (icons[section.type]) { return icons[section.type]; } // Then try to match key words in the title (case insensitive) const title = section.title.toLowerCase(); // Check for exact matches first if (icons[title]) { return icons[title]; } // Check for keyword matches for (const [key, icon] of Object.entries(icons)) { if (title.includes(key)) { return icon; } } // Special compound matches if (title.includes('entry') && title.includes('exit')) { return icons['entry and exit']; } if (title.includes('portfolio') && title.includes('allocation')) { return icons.portfolio; } // Default fallback return icons.general; }; // === RENDER === return React.createElement('div', { style: styles.container }, // Header React.createElement('header', { style: styles.header }, React.createElement('button', { style: styles.menuBtn, onMouseEnter: (e) => e.target.style.background = theme.background, onMouseLeave: (e) => e.target.style.background = 'none', onTouchStart: (e) => e.target.style.background = theme.background, onTouchEnd: (e) => e.target.style.background = 'none', onClick: (e) => { e.preventDefault(); e.stopPropagation(); setSidebarOpen(!sidebarOpen); } }, '☰'), React.createElement('h1', { style: styles.title }, content.title || 'Investment Report') ), // Layout React.createElement('div', { style: styles.layout }, // Mobile overlay React.createElement('div', { style: styles.overlay, onClick: (e) => { e.preventDefault(); setSidebarOpen(false); } }), // Sidebar React.createElement('nav', { style: styles.sidebar }, React.createElement('div', { style: { fontSize: isMobile ? '0.75rem' : '0.875rem', fontWeight: '700', color: theme.primary, background: theme.background, padding: '0.5rem 0.75rem', borderRadius: '0.375rem', marginBottom: isMobile ? '0.75rem' : '1rem', textTransform: 'uppercase', letterSpacing: '0.1em', textAlign: 'center', border: `1px solid ${theme.border}` } }, 'Contents'), (content.sections || []).map((section, index) => { const isActive = activeSection === index; return React.createElement('a', { key: index, href: `#section-${index}`, style: { ...styles.navItem, background: isActive ? theme.background : 'transparent', borderColor: isActive ? theme.primary : 'transparent' }, onClick: (e) => { try { e.preventDefault(); } catch (preventErr) { // Fallback if preventDefault fails } scrollToSection(index); } }, `${getIcon(section)} ${section.title}` ); }) ), // Main content React.createElement('main', { style: styles.mainContent }, // Hero React.createElement('div', { style: styles.hero }, React.createElement('h1', { style: styles.heroTitle }, content.title), React.createElement('p', { style: styles.heroSubtitle }, content.subtitle) ), // Sections (content.sections || []).map((section, index) => React.createElement('section', { key: index, id: `section-${index}`, style: styles.section }, React.createElement('div', { style: styles.sectionHeader }, React.createElement('div', { style: styles.sectionIcon }, getIcon(section) ), React.createElement('h2', { style: styles.sectionTitle }, section.title) ), React.createElement('div', { style: styles.sectionContent, dangerouslySetInnerHTML: { __html: section.html || section.content || '' } }) ) ) ) ) ); } // Mount the app ReactDOM.render(React.createElement(App), document.getElementById('root'));