web/src/components/UserGuide.tsx

import React from 'react';
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from './ui/accordion';

export function UserGuide() {
  return (
    <div className="space-y-3">
      <h3 className="mb-4">User Guide</h3>
      
      <Accordion type="single" collapsible className="space-y-2">
        <AccordionItem value="getting-started" className="border rounded-lg px-4">
          <AccordionTrigger>Getting Started</AccordionTrigger>
          <AccordionContent className="text-sm text-muted-foreground space-y-2">
            <p>Welcome to Clare! To begin:</p>
            <ol className="list-decimal list-inside space-y-1 ml-2">
              <li>Log in using your student credentials</li>
              <li>Select your preferred learning mode</li>
              <li>Upload course materials (optional)</li>
              <li>Start asking questions!</li>
            </ol>
          </AccordionContent>
        </AccordionItem>

        <AccordionItem value="modes" className="border rounded-lg px-4">
          <AccordionTrigger>Learning Modes</AccordionTrigger>
          <AccordionContent className="text-sm text-muted-foreground space-y-2">
            <p><strong>Concept Explainer:</strong> Get detailed explanations of complex topics with examples.</p>
            <p><strong>Socratic Tutor:</strong> Learn through guided questions and discovery.</p>
            <p><strong>Exam Prep/Quiz:</strong> Test your knowledge with practice questions.</p>
            <p><strong>Assignment Helper:</strong> Get step-by-step guidance on homework.</p>
            <p><strong>Quick Summary:</strong> Receive concise summaries of key concepts.</p>
          </AccordionContent>
        </AccordionItem>

        <AccordionItem value="how-it-works" className="border rounded-lg px-4">
          <AccordionTrigger>How Clare Works</AccordionTrigger>
          <AccordionContent className="text-sm text-muted-foreground space-y-2">
            <p>Clare uses advanced AI to provide personalized tutoring:</p>
            <ul className="list-disc list-inside space-y-1 ml-2">
              <li>Analyzes your questions and learning style</li>
              <li>References uploaded course materials</li>
              <li>Adapts explanations to your level</li>
              <li>Tracks your learning progress over time</li>
            </ul>
          </AccordionContent>
        </AccordionItem>

        <AccordionItem value="memory-line" className="border rounded-lg px-4">
          <AccordionTrigger>Memory Line</AccordionTrigger>
          <AccordionContent className="text-sm text-muted-foreground space-y-2">
            <p>The Memory Line tracks your retention using spaced repetition:</p>
            <ul className="list-disc list-inside space-y-1 ml-2">
              <li><strong>T+0:</strong> Initial learning</li>
              <li><strong>T+7:</strong> First review (1 week)</li>
              <li><strong>T+14:</strong> Second review (2 weeks)</li>
              <li><strong>T+30:</strong> Final review (1 month)</li>
            </ul>
            <p>Regular reviews help solidify your understanding!</p>
          </AccordionContent>
        </AccordionItem>

        <AccordionItem value="progress" className="border rounded-lg px-4">
          <AccordionTrigger>Learning Progress Report</AccordionTrigger>
          <AccordionContent className="text-sm text-muted-foreground">
            <p>Your progress report shows:</p>
            <ul className="list-disc list-inside space-y-1 ml-2">
              <li>Topics covered and mastered</li>
              <li>Time spent learning</li>
              <li>Quiz scores and performance</li>
              <li>Recommended review topics</li>
            </ul>
          </AccordionContent>
        </AccordionItem>

        <AccordionItem value="files" className="border rounded-lg px-4">
          <AccordionTrigger>Using Your Files</AccordionTrigger>
          <AccordionContent className="text-sm text-muted-foreground">
            <p>Upload course materials to enhance Clare's responses:</p>
            <ul className="list-disc list-inside space-y-1 ml-2">
              <li>Supported formats: .docx, .pdf, .pptx</li>
              <li>Clare will reference your materials in answers</li>
              <li>Files are processed securely and privately</li>
              <li>You can remove files anytime</li>
            </ul>
          </AccordionContent>
        </AccordionItem>

        <AccordionItem value="quiz" className="border rounded-lg px-4">
          <AccordionTrigger>Micro-Quiz</AccordionTrigger>
          <AccordionContent className="text-sm text-muted-foreground">
            <p>Test your understanding with quick quizzes:</p>
            <ul className="list-disc list-inside space-y-1 ml-2">
              <li>Generated based on your conversation</li>
              <li>Multiple choice and short answer questions</li>
              <li>Instant feedback and explanations</li>
              <li>Track your quiz performance over time</li>
            </ul>
          </AccordionContent>
        </AccordionItem>

        <AccordionItem value="summarization" className="border rounded-lg px-4">
          <AccordionTrigger>Summarization</AccordionTrigger>
          <AccordionContent className="text-sm text-muted-foreground">
            <p>Get concise summaries of your learning session:</p>
            <ul className="list-disc list-inside space-y-1 ml-2">
              <li>Key concepts discussed</li>
              <li>Important takeaways</li>
              <li>Topics to review</li>
              <li>Next steps for learning</li>
            </ul>
          </AccordionContent>
        </AccordionItem>

        <AccordionItem value="export" className="border rounded-lg px-4">
          <AccordionTrigger>Export Conversation</AccordionTrigger>
          <AccordionContent className="text-sm text-muted-foreground">
            <p>Save your conversation for later review:</p>
            <ul className="list-disc list-inside space-y-1 ml-2">
              <li>Export as PDF or text file</li>
              <li>Includes all messages and references</li>
              <li>Perfect for study notes</li>
              <li>Share with study groups (optional)</li>
            </ul>
          </AccordionContent>
        </AccordionItem>

        <AccordionItem value="faq" className="border rounded-lg px-4">
          <AccordionTrigger>FAQ</AccordionTrigger>
          <AccordionContent className="text-sm text-muted-foreground space-y-3">
            <div>
              <p className="font-medium text-foreground">Is my data private?</p>
              <p>Yes! Your conversations and files are encrypted and never shared.</p>
            </div>
            <div>
              <p className="font-medium text-foreground">Can Clare do my homework?</p>
              <p>Clare is designed to help you learn, not do work for you. It provides guidance and explanations to help you understand concepts.</p>
            </div>
            <div>
              <p className="font-medium text-foreground">How accurate is Clare?</p>
              <p>Clare is highly accurate but should be used as a learning aid. Always verify important information with course materials.</p>
            </div>
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </div>
  );
}