<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ConvictionCompass | Prototype</title>
    <style>
        body {
            background-color: #0d0d0d;
            color: #e0e0e0;
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .container {
            text-align: center;
            max-width: 600px;
            width: 100%;
        }

        h1 {
            color: #ffffff;
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        p {
            color: #a0a0a0;
            font-size: 1.2em;
            margin-bottom: 40px;
        }

        .input-group {
            margin-bottom: 30px;
        }

        #coinInput {
            background-color: #1a1a1a;
            border: 1px solid #333;
            color: #ffffff;
            padding: 15px;
            font-size: 1em;
            border-radius: 5px;
            width: 60%;
            margin-right: 10px;
        }

        #analyzeBtn {
            background-color: #00ffff;
            color: #0d0d0d;
            border: none;
            padding: 15px 25px;
            font-size: 1em;
            font-weight: bold;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        #analyzeBtn:hover {
            background-color: #00cccc;
        }

        #resultArea {
            margin-top: 30px;
            padding: 20px;
            background-color: #1a1a1a;
            border: 1px solid #333;
            border-radius: 5px;
            min-height: 50px;
            font-size: 1.5em;
            color: #00ffff;
            text-align: left;
        }

        /* Theme Toggle Styles */
        .theme-toggle-wrapper {
            margin-bottom: 30px;
        }

        .theme-icon {
            font-size: 1.5em;
            margin: 0 10px;
            vertical-align: middle;
            display: inline-block; /* Ensure it's block-level for display: none/block */
        }

        .theme-toggle {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }

        .theme-toggle input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #333;
            transition: .4s;
            border-radius: 34px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        input:checked + .slider {
            background-color: #00ffff;
        }

        input:checked + .slider:before {
            transform: translateX(26px);
        }

        /* Light Theme Styles */
        body.light-theme {
            background-color: #f4f4f4;
            color: #333;
        }

        body.light-theme .container {
            background-color: #ffffff;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        body.light-theme h1 {
            color: #222;
        }

        body.light-theme p {
            color: #555;
        }

        body.light-theme #coinInput {
            background-color: #ffffff;
            border: 1px solid #ccc;
            color: #333;
        }

        body.light-theme #resultArea {
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            color: #007acc;
        }

        /* --- New Report Styles --- */
        .analysis-report {
            border: 1px solid #333;
            border-radius: 5px;
            padding: 20px;
            margin-top: 20px;
            background-color: #1a1a1a;
            text-align: left;
        }

        .report-header {
            text-align: center;
            margin-bottom: 20px;
            border-bottom: 1px solid #333;
            padding-bottom: 15px;
        }

        .report-coin-name {
            font-size: 1.5em;
            color: #ffffff;
            margin: 0;
        }

        .overall-score-bar {
            width: 80%;
            height: 10px;
            background-color: #333;
            border-radius: 5px;
            margin: 10px auto;
            overflow: hidden;
        }

        .overall-score-fill {
            height: 100%;
            background-color: #00ffff;
            transition: width 0.5s ease;
        }

        .overall-score-text {
            font-size: 2em;
            font-weight: bold;
            color: #00ffff;
            margin: 0;
        }

        .pillar {
            margin-top: 20px;
            padding: 15px;
            background-color: #252525;
            border-radius: 5px;
        }

        .pillar-header {
            font-size: 1.2em;
            font-weight: bold;
            color: #ffffff;
            margin-bottom: 10px;
            border-bottom: 1px solid #444;
            padding-bottom: 5px;
        }

        .pillar ul {
            list-style-type: none;
            padding-left: 0;
            margin: 0 0 10px 0;
        }

        .pillar li {
            margin-bottom: 8px;
            color: #e0e0e0;
            font-size: 0.9em;
        }

        .pillar .verdict {
            font-weight: bold;
            color: #a0a0a0;
            font-style: italic;
            margin-top: 10px;
        }

        .pillar.loading {
            color: #666;
            font-style: italic;
        }

        .error-message {
            color: #ff4d4d;
            font-size: 1em;
        }

        .loading {
            color: #00ffff;
            font-style: italic;
            font-size: 1em;
        }
    </style>
</head>
<body>

    <div class="container">
        <h1>The ConvictionCompass</h1>
        <p>A Clarity Tool for Digital Assets</p>
        <div class="theme-toggle-wrapper">
            <span class="theme-icon" id="themeIcon">☀️</span>
            <label class="theme-toggle" for="checkbox">
                <input type="checkbox" id="checkbox">
                <span class="slider"></span>
            </label>
            <span class="theme-icon" id="themeIconOther">🌙</span>
        </div>
        <div class="input-group">
            <input type="text" id="coinInput" placeholder="Enter coin symbol (e.g., BTC)">
            <button id="analyzeBtn">Analyze Conviction</button>
        </div>

        <div id="resultArea">
            <!-- The report will appear here -->
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Get the elements from the page
            const analyzeBtn = document.getElementById('analyzeBtn');
            const coinInput = document.getElementById('coinInput');
            const resultArea = document.getElementById('resultArea');
            const themeToggleCheckbox = document.getElementById('checkbox');
            const sunIcon = document.getElementById('themeIcon');
            const moonIcon = document.getElementById('themeIconOther');

            // --- Theme Toggle Logic ---
            // Load saved theme preference on page load
            const currentTheme = localStorage.getItem('theme');
            if (currentTheme) {
                document.body.classList.add('light-theme');
                themeToggleCheckbox.checked = true;
                sunIcon.style.display = 'none';
                moonIcon.style.display = 'inline-block';
            } else {
                sunIcon.style.display = 'inline-block';
                moonIcon.style.display = 'none';
            }

            // Listen for a click on the toggle switch
            themeToggleCheckbox.addEventListener('change', function() {
                if (this.checked) {
                    document.body.classList.add('light-theme');
                    localStorage.setItem('theme', 'light-theme');
                    sunIcon.style.display = 'none';
                    moonIcon.style.display = 'inline-block';
                } else {
                    document.body.classList.remove('light-theme');
                    localStorage.setItem('theme', '');
                    sunIcon.style.display = 'inline-block';
                    moonIcon.style.display = 'none';
                }
            });

            // --- FAKE Analysis Logic ---
            // Listen for a click on the analyze button
            analyzeBtn.addEventListener('click', async function() {
                const coinSymbol = coinInput.value.toUpperCase();
                if (!coinSymbol) {
                    resultArea.innerHTML = `<div class="error-message">Please enter a coin symbol.</div>`;
                    return;
                }

                // Show a loading state
                resultArea.innerHTML = `<div class="loading">Analyzing ${coinSymbol}... This may take a few seconds.</div>`;

                // --- This is where we will call the AI in the future ---
                // For now, we will use our FAKE data to build the layout
                const analysisData = await getFakeAnalysisData(coinSymbol);

                // Now, build the HTML with the data
                let reportHTML = `
                    <div class="analysis-report">
                        <div class="report-header">
                            <h2 class="report-coin-name">${analysisData.symbol}</h2>
                            <div class="overall-score-bar">
                                <div class="overall-score-fill" style="width: ${analysisData.overallScore * 10}%"></div>
                            </div>
                            <p class="overall-score-text">${analysisData.overallScore}/10</p>
                        </div>

                        <div class="pillar">
                            <div class="pillar-header">--- FUNDAMENTALS (Score: ${analysisData.fundamentals.score}/10) ---</div>
                            <ul>
                                <li><strong>Technology:</strong> ${analysisData.fundamentals.technology}</li>
                                <li><strong>Tokenomics:</strong> ${analysisData.fundamentals.tokenomics}</li>
                                <li><strong>Adoption:</strong> ${analysisData.fundamentals.adoption}</li>
                            </ul>
                            <div class="verdict">Verdict: ${analysisData.fundamentals.verdict}</div>
                        </div>

                        <div class="pillar loading">
                            <div class="pillar-header">--- SOCIAL SENTIMENT (Coming Soon) ---</div>
                            <div>This pillar is under construction.</div>
                        </div>

                        <div class="pillar loading">
                            <div class="pillar-header">--- TECHNICAL ANALYSIS (Coming Soon) ---</div>
                            <div>This pillar is under construction.</div>
                        </div>
                    </div>
                `;

                resultArea.innerHTML = reportHTML;
            });

            // --- FAKE DATA FUNCTION ---
            // We will replace this with a real API call later
            async function getFakeAnalysisData(symbol) {
                // Simulate a network delay
                await new Promise(resolve => setTimeout(resolve, 1500));

                if (symbol === 'KAS') {
                    return {
                        symbol: 'KASPA (KAS)',
                        overallScore: 8,
                        fundamentals: {
                            score: 8,
                            technology: 'BlockDAG (High-Speed Layer-1)',
                            tokenomics: '22.7T / 28.7T Circulating (Nearing Cap, Bullish)',
                            adoption: 'Growing ecosystem of wallets and exchanges.',
                            verdict: 'Strong technical foundation with deflationary pressure.'
                        }
                    };
                } else if (symbol === 'BTC') {
                    return {
                        symbol: 'BITCOIN (BTC)',
                        overallScore: 9,
                        fundamentals: {
                            score: 9,
                            technology: 'Proof-of-Work (Original Digital Gold)',
                            tokenomics: '19.7M / 21M Max (Halving cycle reduces supply)',
                            adoption: 'Universally recognized, held by institutions & nations.',
                            verdict: 'The undisputed king of digital assets, a foundational store of value.'
                        };
                    };
                } else {
                    return {
                        symbol: symbol,
                        overallScore: 3,
                        fundamentals: {
                            score: 3,
                            technology: 'Unknown or weak technology.',
                            tokenomics: 'Undisclosed or unfavorable tokenomics.',
                            adoption: 'Minimal to no real-world adoption.',
                            verdict: 'High risk with little to no fundamental backing.'
                        };
                    };
                }
            }
        });
    </script>
</body>
</html>