import React from 'react';
import ReactDOM from 'react-dom';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { BrowserRouter } from 'react-router-dom';
import { Box, Typography, Paper, Container } from '@mui/material';

// Import the backstoryTheme

// BackstoryAnalysisDisplay component
const BackstoryAppAnalysisPage = () => {
  return (
    <Box sx={{ backgroundColor: 'background.default', minHeight: '100vh', py: 4 }}>
      <Container maxWidth="lg">
        <Paper sx={{ p: 4, boxShadow: 2 }}>
          <Typography variant="h1" component="h1" sx={{ mb: 3, color: 'primary.main' }}>
            Backstory Application Analysis
          </Typography>
          
          <Typography variant="h2" component="h2">
            Core Concept
          </Typography>
          <Typography variant="body1">
            Backstory is a dual-purpose platform designed to bridge the gap between job candidates and 
            employers/recruiters with an AI-powered approach to professional profiles and resume generation.
          </Typography>

          <Typography variant="h3" component="h3" sx={{ mt: 3 }}>
            Primary User Types
          </Typography>
          <Box component="ol" sx={{ pl: 4 }}>
            <li>
              <Typography variant="body1" component="div">
                <strong>Job Candidates</strong> - Upload and manage comprehensive professional histories 
                and generate tailored resumes for specific positions
              </Typography>
            </li>
            <li>
              <Typography variant="body1" component="div">
                <strong>Employers/Recruiters</strong> - Search for candidates, directly interact with AI 
                assistants about candidate experiences, and generate position-specific resumes
              </Typography>
            </li>
          </Box>

          <Typography variant="h2" component="h2" sx={{ mt: 4 }}>
            Key Features
          </Typography>
          
          <Typography variant="h3" component="h3" sx={{ mt: 3 }}>
            For Candidates
          </Typography>
          <Box component="ul" sx={{ pl: 4 }}>
            <li>
              <Typography variant="body1" component="div">
                <strong>Complete Profile Management</strong> - Create detailed professional histories beyond typical resume constraints
              </Typography>
            </li>
            <li>
              <Typography variant="body1" component="div">
                <strong>AI-Assisted Q&A Setup</strong> - Configure an AI assistant to answer employer questions about your experience
              </Typography>
            </li>
            <li>
              <Typography variant="body1" component="div">
                <strong>Smart Resume Generator</strong> - Create tailored resumes for specific positions using AI
              </Typography>
            </li>
            <li>
              <Typography variant="body1" component="div">
                <strong>Analytics Dashboard</strong> - Track profile views, resume downloads, and employer engagement
              </Typography>
            </li>
            <li>
              <Typography variant="body1" component="div">
                <strong>Privacy Controls</strong> - Manage visibility and access to your professional information
              </Typography>
            </li>
          </Box>

          <Typography variant="h3" component="h3" sx={{ mt: 3 }}>
            For Employers
          </Typography>
          <Box component="ul" sx={{ pl: 4 }}>
            <li>
              <Typography variant="body1" component="div">
                <strong>Advanced Candidate Search</strong> - Find candidates with specific skills, experience levels, and qualifications
              </Typography>
            </li>
            <li>
              <Typography variant="body1" component="div">
                <strong>Interactive Q&A</strong> - Ask questions directly to candidate AI assistants to learn more about their experience
              </Typography>
            </li>
            <li>
              <Typography variant="body1" component="div">
                <strong>Resume Generation</strong> - Generate candidate resumes tailored to specific job requirements
              </Typography>
            </li>
            <li>
              <Typography variant="body1" component="div">
                <strong>Talent Pool Management</strong> - Create and manage groups of candidates for different positions
              </Typography>
            </li>
            <li>
              <Typography variant="body1" component="div">
                <strong>Job Posting Management</strong> - Create, manage, and track applications for job postings
              </Typography>
            </li>
          </Box>

          <Typography variant="h2" component="h2" sx={{ mt: 4 }}>
            Design Analysis
          </Typography>

          <Typography variant="h3" component="h3" sx={{ mt: 3 }}>
            Navigation Structure
          </Typography>
          <Typography variant="body1">
            The application uses a role-based navigation system with:
          </Typography>
          <Box component="ul" sx={{ pl: 4 }}>
            <li>
              <Typography variant="body1" component="div">
                <strong>Public Navigation</strong> - Home, About, Pricing, Login/Register accessible to all users
              </Typography>
            </li>
            <li>
              <Typography variant="body1" component="div">
                <strong>Candidate Dashboard Navigation</strong> - Profile, Backstory, Resumes, Q&A Setup, Analytics, Settings
              </Typography>
            </li>
            <li>
              <Typography variant="body1" component="div">
                <strong>Employer Dashboard Navigation</strong> - Dashboard, Search, Saved, Jobs, Company, Analytics, Settings
              </Typography>
            </li>
          </Box>

          <Typography variant="h3" component="h3" sx={{ mt: 3 }}>
            UI Patterns
          </Typography>
          <Box component="ol" sx={{ pl: 4 }}>
            <li>
              <Typography variant="body1" component="div">
                <strong>Dashboard Cards</strong> - Both user types have dashboards with card-based information displays
              </Typography>
            </li>
            <li>
              <Typography variant="body1" component="div">
                <strong>Tab-Based Content Organization</strong> - Many screens use horizontal tabs to organize related content
              </Typography>
            </li>
            <li>
              <Typography variant="body1" component="div">
                <strong>Form-Based Editors</strong> - Profile and content editors use structured forms with varied input types
              </Typography>
            </li>
            <li>
              <Typography variant="body1" component="div">
                <strong>Three-Column Layouts</strong> - Many screens follow a left sidebar, main content, right sidebar pattern
              </Typography>
            </li>
            <li>
              <Typography variant="body1" component="div">
                <strong>Preview/Edit Toggle</strong> - Resume and profile editing screens offer both editing and preview modes
              </Typography>
            </li>
            <li>
              <Typography variant="body1" component="div">
                <strong>Filter-Based Search</strong> - Employer search uses multiple filter categories to refine candidate results
              </Typography>
            </li>
          </Box>

          <Typography variant="h3" component="h3" sx={{ mt: 3 }}>
            Mobile Adaptations
          </Typography>
          <Typography variant="body1">
            The mobile designs show a simplified navigation structure with bottom tabs and a hamburger menu, 
            maintaining the core functionality while adapting to smaller screens.
          </Typography>

          <Typography variant="h2" component="h2" sx={{ mt: 4 }}>
            Technology Integration
          </Typography>

          <Typography variant="h3" component="h3" sx={{ mt: 3 }}>
            AI Components
          </Typography>
          <Box component="ul" sx={{ pl: 4 }}>
            <li>
              <Typography variant="body1" component="div">
                <strong>LLM Integration</strong> - Supports multiple AI models (Claude, GPT-4, self-hosted models)
              </Typography>
            </li>
            <li>
              <Typography variant="body1" component="div">
                <strong>Candidate AI Assistant</strong> - Personalized AI chatbot that answers questions about candidate experience
              </Typography>
            </li>
            <li>
              <Typography variant="body1" component="div">
                <strong>Resume Generation</strong> - AI-powered resume creation based on job requirements
              </Typography>
            </li>
            <li>
              <Typography variant="body1" component="div">
                <strong>Skills Matching</strong> - Automated matching between candidate skills and job requirements
              </Typography>
            </li>
          </Box>

          <Typography variant="h3" component="h3" sx={{ mt: 3 }}>
            External Integrations
          </Typography>
          <Box component="ul" sx={{ pl: 4 }}>
            <li>
              <Typography variant="body1" component="div">
                <strong>Authentication</strong> - OAuth with Google, LinkedIn, GitHub
              </Typography>
            </li>
            <li>
              <Typography variant="body1" component="div">
                <strong>Data Import</strong> - LinkedIn profile import, resume parsing (PDF, DOCX), CSV/JSON import
              </Typography>
            </li>
            <li>
              <Typography variant="body1" component="div">
                <strong>ATS Compatibility</strong> - Integration with employer Applicant Tracking Systems
              </Typography>
            </li>
            <li>
              <Typography variant="body1" component="div">
                <strong>Vector Databases</strong> - Semantic search capabilities for candidate matching
              </Typography>
            </li>
          </Box>

          <Typography variant="h2" component="h2" sx={{ mt: 4 }}>
            Key Differentiators
          </Typography>
          <Box component="ol" sx={{ pl: 4 }}>
            <li>
              <Typography variant="body1" component="div">
                <strong>Beyond the Resume</strong> - Focuses on comprehensive professional stories rather than just resume highlights
              </Typography>
            </li>
            <li>
              <Typography variant="body1" component="div">
                <strong>AI-Mediated Communication</strong> - Uses AI to facilitate deeper understanding of candidate experiences
              </Typography>
            </li>
            <li>
              <Typography variant="body1" component="div">
                <strong>Bidirectional Resume Generation</strong> - Both candidates and employers can generate tailored resumes
              </Typography>
            </li>
            <li>
              <Typography variant="body1" component="div">
                <strong>Configurable AI Personalities</strong> - Candidates can customize how their AI assistant responds to questions
              </Typography>
            </li>
            <li>
              <Typography variant="body1" component="div">
                <strong>Deep Analytics</strong> - Both candidates and employers receive insights about their engagement
              </Typography>
            </li>
          </Box>

          <Typography variant="h2" component="h2" sx={{ mt: 4 }}>
            Deployment Options
          </Typography>
          <Typography variant="body1">
            The system supports multiple deployment architectures:
          </Typography>
          <Box component="ul" sx={{ pl: 4 }}>
            <li>
              <Typography variant="body1">Self-hosted (on-premises)</Typography>
            </li>
            <li>
              <Typography variant="body1">Cloud-hosted (SaaS model)</Typography>
            </li>
            <li>
              <Typography variant="body1">Hybrid deployment (mixed cloud/on-premises)</Typography>
            </li>
          </Box>

          <Typography variant="h2" component="h2" sx={{ mt: 4 }}>
            Security and Privacy Considerations
          </Typography>
          <Box component="ul" sx={{ pl: 4 }}>
            <li>
              <Typography variant="body1">Granular candidate privacy controls</Typography>
            </li>
            <li>
              <Typography variant="body1">Role-based access for employer teams</Typography>
            </li>
            <li>
              <Typography variant="body1">Data management options for compliance requirements</Typography>
            </li>
          </Box>
        </Paper>
      </Container>
    </Box>
  );
};


export {
  BackstoryAppAnalysisPage
}