<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="An ADHD-friendly learning hub offering calm clarity and practical strategies for entrepreneurs and professionals. Explore insights on dopamine, executive function, time management, and more.">
    <title>ADHD Guide: Calm Clarity & Practical Strategies for Entrepreneurs</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/layout.css">
    <link rel="stylesheet" href="css/theme-light.css">
    <link rel="stylesheet" href="css/modules/buttons.css">
    <link rel="stylesheet" href="css/modules/cards.css">
    <link rel="stylesheet" href="css/modules/sidebar.css">
    <link rel="stylesheet" href="css/modules/progress-bar.css">
    <link rel="stylesheet" href="css/modules/drawer.css">
    <link rel="stylesheet" href="css/modules/animations.css"> <link rel="stylesheet" href="css/modules/floating-button.css">
    <link rel="stylesheet" href="css/modules/custom-index.css">

    <link rel="icon" href="assets/img/logo.png" sizes="any">
    <link rel="icon" type="image/png" href="assets/img/logo.png">
    <link rel="apple-touch-icon" href="assets/img/logo.png">
</head>
<body>
    <a href="#main-content" class="skip-link">Skip to main content</a>
    <div class="container">
        <header role="banner">
            <div class="header-content">
                <div class="header-branding">
                    <a href="index.html" class="logo-link" aria-label="ADHD Guide Home Page">
                        <img src="assets/img/logo.png" alt="ADHD Guide Logo" class="header-logo" aria-hidden="true">
                    </a>
                    <div class="site-identity"> 
                        <a href="index.html" class="title-link"> 
                            <h1 class="site-title">ADHD Guide</h1>
                        </a>
                        <p class="header-tagline">Your compass for navigating ADHD with clarity.</p>
                    </div>
                </div>
                <div class="header-actions">
                    <button type="button" id="openHelperDrawer" class="btn btn--secondary header-helper-btn" aria-label="Open helper tools" aria-controls="helperDrawerContainer" aria-expanded="false">
                        <span class="helper-btn-icon" aria-hidden="true">⚙</span>
                        <span class="helper-btn-text">Helper</span>
                    </button>
                </div>
            </div>
        </header>

        <div class="progress-bar-container">
            <div class="progress-bar-fill" data-total="14" data-current="0" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="14" aria-labelledby="progress-label"></div>
        </div>
        <p id="progress-label" class="visually-hidden">Overall guide completion: 0% (Explore sections to update progress)</p>

        <main class="grid" id="main-content">
            <aside class="sidebar" role="navigation" id="sidebarNav">
                <nav aria-labelledby="sidebar-nav-title">
                    <h2 id="sidebar-nav-title" class="visually-hidden">Main Navigation</h2>
                    <div class="sidebar-group">
                        <button class="sidebar-group-toggle" aria-expanded="true" aria-controls="understanding-adhd-panel">
                            Understanding ADHD
                        </button>
                        <div id="understanding-adhd-panel" class="sidebar-group-content is-expanded" style="max-height: none;">
                            <ul>
                                <li><a href="pages/dopamine.html"><span class="nav-number">1</span>ADHD &amp; Dopamine</a></li>
                                <li><a href="pages/executive-function.html"><span class="nav-number">2</span>Executive Function</a></li>
                                <li><a href="pages/time-blindness.html"><span class="nav-number">3</span>Time Blindness</a></li>
                                <li><a href="pages/working-memory.html"><span class="nav-number">4</span>Working Memory</a></li>
                                <li><a href="pages/interest-based.html"><span class="nav-number">5</span>Interest-Based System</a></li>
                                <li><a href="pages/emotional-regulation.html"><span class="nav-number">6</span>Emotional Regulation</a></li>
                                <li><a href="pages/motivation.html"><span class="nav-number">7</span>Motivation</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="sidebar-group">
                        <button class="sidebar-group-toggle" aria-expanded="false" aria-controls="strategies-panel">
                            Strategies &amp; Implementation
                        </button>
                        <div id="strategies-panel" class="sidebar-group-content">
                            <ul>
                                <li><a href="pages/adaptations.html"><span class="nav-number">8</span>Adaptations</a></li>
                                <li><a href="pages/daily-framework.html"><span class="nav-number">9</span>Daily Framework</a></li>
                                <li><a href="pages/task-management.html"><span class="nav-number">10</span>Task Management</a></li>
                                <li><a href="pages/environment.html"><span class="nav-number">11</span>Environment</a></li>
                                <li><a href="pages/tech-tools.html"><span class="nav-number">12</span>Tech Tools</a></li>
                                <li><a href="pages/physiological.html"><span class="nav-number">13</span>Physiological</a></li>
                                <li><a href="pages/accountability.html"><span class="nav-number">14</span>Accountability</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="sidebar-group">
                        <button class="sidebar-group-toggle" aria-expanded="false" aria-controls="resources-panel">
                            Additional Resources
                        </button>
                        <div id="resources-panel" class="sidebar-group-content">
                            <ul>
                                <li><a href="#placeholder-glossary">Glossary</a></li>
                                <li><a href="#placeholder-faq">FAQ</a></li>
                                <li><a href="#placeholder-about">About this Guide</a></li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </aside>

            <article class="content" role="main">
                <h2>Welcome to Your ADHD Guide</h2>
                <p class="text-large">
                    This guide is an ADHD-friendly learning hub designed to provide calm clarity and practical strategies for entrepreneurs, professionals, and anyone seeking to better understand and manage ADHD. Our goal is to empower you with actionable insights that work <em>with</em> your unique cognitive style, not against it.
                </p>
                <p>
                    Navigating the world with ADHD can be challenging, but it also comes with unique strengths. This resource is built on principles of progressive disclosure and modular design, aiming to make information accessible without overwhelm. We focus on actionable techniques that you can implement today to harness your potential and thrive.
                </p>
                
                <div class="card-list card-list--two-column" style="margin-top: 1.5rem;">
                    <div class="card"> 
                        <h3 class="card__title">How to Use This Guide</h3>
                        <div class="card__content">
                            <p>
                                Explore topics using the <strong>sidebar navigation</strong>. Each section is designed to be a bite-sized, focused learning module.
                            </p>
                            <p>
                                Use the <strong>Helper Drawer</strong> (⚙️ icon in the header) for quick navigation, note-taking, and display settings to customize your experience.
                            </p>
                        </div>
                    </div>
                    <div class="card card--mint-bar">
                        <h3 class="card__title">Our Core Principles</h3>
                        <div class="card__content">
                            <ul>
                                <li><strong>Calm Clarity:</strong> Low-contrast pastels and ample white space to reduce visual overload.</li>
                                <li><strong>Progressive Disclosure:</strong> See only the information you ask for, minimizing overwhelm.</li>
                                <li><strong>AA-Level Accessibility:</strong> Ensuring content is usable by the widest possible audience.</li>
                                <li><strong>Modular Design:</strong> Bite-sized content for easier processing and cleaner updates.</li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <div class="card card--warning" style="margin-top: 1.25rem;">
                     <h3 class="card__title">Important Disclaimer</h3>
                     <div class="card__content">
                         <p>The information in this guide is for educational purposes only and is <strong>not</strong> medical advice. Always consult a qualified professional for diagnosis or treatment.</p>
                     </div>
                </div>
                
                <h3 style="margin-top: 1.5rem; margin-bottom: 0.75rem;">Ready to Begin?</h3>
                <p>
                    Dive into the sections that resonate most with you. We recommend starting with <a href="pages/dopamine.html">ADHD & Dopamine</a> to understand the core aspects of the ADHD brain, or explore the "Strategies & Implementation" sections for practical daily frameworks.
                </p>
                
                <div class="content-navigation" style="margin-top: 1.5rem;">
                    <span style="flex-grow:1; text-align:center;"><em>Use the sidebar to explore topics.</em></span>
                </div>
            </article>

            <aside class="helper helper-drawer" role="complementary" id="helperDrawerContainer" aria-labelledby="helper-drawer-title" aria-hidden="true">
                <div class="helper-drawer__header">
                    <h2 id="helper-drawer-title" class="visually-hidden">Helper Tools</h2>
                    <button type="button" class="helper-drawer__close-btn" aria-label="Close helper drawer" data-drawer-close>&times;</button>
                </div>
                <div class="helper-drawer__tabs">
                    <div role="tablist" aria-labelledby="helper-drawer-title">
                        <button type="button" role="tab" id="tab-quicknav" aria-selected="true" aria-controls="panel-quicknav" class="helper-drawer__tab">QuickNav</button>
                        <button type="button" role="tab" id="tab-notes" aria-selected="false" aria-controls="panel-notes" class="helper-drawer__tab" tabindex="-1">My Notes</button>
                        <button type="button" role="tab" id="tab-settings" aria-selected="false" aria-controls="panel-settings" class="helper-drawer__tab" tabindex="-1">Settings</button>
                    </div>
                    <div role="tabpanel" id="panel-quicknav" aria-labelledby="tab-quicknav" class="helper-drawer__tabpanel is-active">
                        <h3>Quick Navigation</h3>
                        <p>Jump to any main topic category:</p>
                        <ul>
                            <li><a href="#" onclick="document.querySelector('[aria-controls=understanding-adhd-panel]').click(); document.getElementById('tab-quicknav').focus(); return false;">Understanding ADHD</a></li>
                            <li><a href="#" onclick="document.querySelector('[aria-controls=strategies-panel]').click(); document.getElementById('tab-quicknav').focus(); return false;">Strategies & Implementation</a></li>
                            <li><a href="#" onclick="document.querySelector('[aria-controls=resources-panel]').click(); document.getElementById('tab-quicknav').focus(); return false;">Additional Resources</a></li>
                        </ul>
                        <p style="margin-top: 1rem;">Use the main sidebar for detailed navigation within categories.</p>
                    </div>
                    <div role="tabpanel" id="panel-notes" aria-labelledby="tab-notes" class="helper-drawer__tabpanel" hidden>
                         <label for="drawer-notes-area" class="visually-hidden">My Notes for this page</label>
                         <textarea id="drawer-notes-area" placeholder="Type your notes here..." class="helper-drawer__notes-area"></textarea>
                    </div>
                    <div role="tabpanel" id="panel-settings" aria-labelledby="tab-settings" class="helper-drawer__tabpanel" hidden>
                        <h3>Display Settings</h3>
                        <div class="settings-section">
                            <div class="setting-item">
                                <label for="theme-toggle-checkbox-drawer" class="setting-label">
                                    <span class="setting-title">Dark Mode</span>
                                    <span class="setting-description">Switch to a darker color scheme</span>
                                </label>
                                <input type="checkbox" id="theme-toggle-checkbox-drawer" class="theme-toggle__checkbox">
                            </div>
                            <div class="setting-item">
                                <label for="font-size-slider" class="setting-label">
                                    <span class="setting-title">Font Size</span>
                                    <span class="setting-description">Adjust text size (changes apply globally)</span>
                                </label>
                                <input type="range" id="font-size-slider" min="14" max="20" value="16" step="1" class="setting-slider" aria-labelledby="font-size-value">
                                <span class="setting-value" id="font-size-value">16px</span>
                            </div>
                            <div class="setting-item">
                                <label for="reduce-motion-checkbox" class="setting-label">
                                    <span class="setting-title">Reduce Motion</span>
                                    <span class="setting-description">Minimize animations and transitions</span>
                                </label>
                                <input type="checkbox" id="reduce-motion-checkbox" class="setting-checkbox">
                            </div>
                        </div>
                    </div>
                </div>
            </aside>
        </main>

        <footer role="contentinfo">
            <p>&copy; <span id="current-year"></span> ADHD Guide. All rights reserved. Created by Ray.</p>
            <p><a href="#privacy">Privacy Policy</a> | <a href="#terms">Terms of Service</a></p>
        </footer>
    </div>

    <div class="floating-button-container">
        <button type="button" class="floating-button--mini" aria-label="Scroll to top" data-action="scroll-top">
            <span class="floating-button-icon">↑</span>
            <span class="floating-button-tooltip">Scroll to top</span>
        </button>
        <button type="button" class="floating-button--mini" aria-label="Toggle theme" data-action="toggle-theme">
            <span class="floating-button-icon">🎨</span>
            <span class="floating-button-tooltip">Toggle theme</span>
        </button>
        <button type="button" class="floating-button--mini" aria-label="Open helper" data-action="open-helper">
            <span class="floating-button-icon">?</span>
            <span class="floating-button-tooltip">Open helper</span>
        </button>
        
        <button type="button" class="floating-button" aria-label="Quick actions menu" aria-haspopup="true" aria-expanded="false">
            <span class="floating-button-icon">+</span>
            <span class="visually-hidden">Open quick actions</span>
        </button>
    </div>

    <script src="js/animations.js" defer></script> <script src="js/nav-toggle.js" defer></script>
    <script src="js/progress-bar.js" defer></script>
    <script src="js/drawer-tabs.js" defer></script>
    <script src="js/notes-save.js" defer></script>
    <script src="js/theme-toggle.js" defer></script>
    <script src="js/site.js" defer></script>
</body>
</html>