script.js

// Report data - extracted from the provided files
const reports = {
  arun: {
    title: "Arun Neupane - Next.js Website Development",
    name: "Arun Neupane",
    project: "Sajilo Digital Official Website",
    tech: "Next.js, React, CSS Modules, Vercel",
    duration: "10 weeks",
    highlight:
      "Frontend development of company website using Next.js framework with SSR/SSG for optimal performance and SEO.",
    techTags: [
      "Next.js",
      "React",
      "SSR",
      "Static Generation",
      "Vercel",
      "Performance",
    ],
    sections: [
      {
        title: "Mentor's Recommendation",
        content: `I am delighted to provide my wholehearted recommendation for ARUN NEUPANE based on his outstanding performance during his 10-week internship at Sajilo Digital Pvt. Ltd. As his mentor, I supervised his work on the development of our official company website sajilodigital.com.np using Next.js.

Throughout his internship, Arun demonstrated exceptional technical proficiency, a strong work ethic, and a keen eye for detail. He took ownership of the frontend development process, from initial planning to final deployment, and consistently delivered high-quality, production-ready code. His ability to grasp complex Next.js concepts and apply them to build a performant, scalable, and responsive website was impressive.

Arun showed excellent problem-solving skills, effectively troubleshooting challenges related to routing, state management, and performance optimization. He was proactive in seeking feedback, incorporated suggestions constructively, and worked collaboratively with the team. His dedication to creating a polished user interface that accurately reflects our company's brand and values was evident in the final product.

I hereby endorse the internship report entitled "Design and Development of Sajilo Digital Official Website Using Next.js" prepared by Arun Neupane. This project, completed under my supervision, meets the practical requirements for the Bachelor of Science in Computer Science and Information Technology degree and is highly recommended for evaluation.

Mr. Shailesh Mishra
Project Mentor
Sajilo Digital Pvt. Ltd.
Bhairahawa, Nepal`,
      },
      {
        title: "Supervisor's Recommendation",
        content: `This is to certify that the internship report titled "Design and Development of Sajilo Digital Official Website Using Next.js" has been prepared by Arun Neupane under my academic supervision. This report is submitted in partial fulfillment of the requirements for the Bachelor of Science in Computer Science and Information Technology degree.

As his college supervisor, I monitored Arun's progress during his internship at Sajilo Digital Pvt. Ltd. He successfully translated his academic knowledge of web technologies into a practical, industry-standard project. His report thoroughly documents the technical implementation, development methodology, and learning outcomes, demonstrating a solid understanding of modern frontend development with Next.js.

The report is well-structured, comprehensive, and meets the academic standards expected for the BSc.CSIT program.

Mr. Suraj Pandey
Supervisor, BSc.CSIT
Bhairahawa Multiple Campus`,
      },
      {
        title: "Abstract",
        content: `This report presents a comprehensive account of a 10-week internship undertaken at Sajilo Digital Pvt. Ltd. as a Frontend Developer. The primary objective was to design, develop, and deploy the company's official website, sajilodigital.com.np, utilizing the Next.js framework to create a modern, performant, and scalable digital presence.

The project encompassed the full frontend development lifecycle, from requirement analysis and UI/UX planning to implementation, optimization, and deployment. Key technical focuses included leveraging Next.js features such as Server-Side Rendering (SSR) and Static Site Generation (SSG) for optimal performance and SEO, implementing a component-based architecture for maintainability, and ensuring full responsiveness across all device types. The website features core sections such as Home, About, Services, Portfolio, and Contact, designed to effectively communicate the company's brand and service offerings.

Beyond the main project, the internship included hands-on work on auxiliary projects including a Python WiFi Home Server, a Color Picker web app, and a Quiz Application. These diversified my skill set into backend networking concepts and interactive frontend state management.

The internship served as a critical bridge between academic theory and industry practice, significantly enhancing my competencies in modern web technologies, problem-solving, and professional workflow management within a collaborative team environment.`,
      },
      {
        title: "Introduction",
        content: `In today's digital landscape, a company's website is its primary interface with the world, serving as a cornerstone for brand identity, credibility, and client engagement. For technology firms like Sajilo Digital Pvt. Ltd., a sophisticated, high-performance website is not just a marketing asset but a testament to its technical expertise. This report details my 10-week internship focused on developing the official website for Sajilo Digital using Next.js, a powerful React-based framework.

The project aimed to create a website that is not only visually compelling and informative but also technically robust, leveraging modern web development paradigms. Key considerations included implementing server-side rendering for improved SEO and initial load performance, constructing a reusable component library for future scalability, and ensuring a flawless user experience across all devices through responsive design. This work provided a practical immersion into professional frontend development, translating design concepts into a live, production-grade application.`,
      },
      {
        title: "Problem Statement",
        content: `Prior to this project, Sajilo Digital lacked a dedicated, modern website that could effectively represent its growing portfolio and technical capabilities in the competitive digital solutions market. The existing online presence was insufficient and presented several challenges:

- Absence of a Centralized Digital Hub: No single, authoritative platform to showcase services, projects, and company values cohesively.
- Poor Technical Foundation: The previous online presence was not built with modern frameworks, leading to suboptimal performance, poor search engine visibility, and difficult maintenance.
- Non-Responsive Design: The user experience degraded significantly on mobile and tablet devices, which represent a major portion of web traffic.
- Limited Scalability and Maintainability: The structure of any existing web assets did not follow a modular, component-based architecture, hindering future updates and feature additions.
- Weak Brand Representation: The digital facade did not adequately reflect the company's professionalism, innovation, and technical prowess.

This project was initiated to address these gaps by building a website from the ground up using industry-best practices and technologies.`,
      },
      {
        title: "Objectives",
        content: `The primary objectives of this internship project were:
- To design and develop a professional, visually appealing, and brand-accurate website for Sajilo Digital Pvt. Ltd.
- To utilize the Next.js framework to implement features like Server-Side Rendering (SSR) and Static Site Generation (SSG) for superior performance and SEO.
- To architect the application using a modular, component-based structure to ensure code reusability, ease of maintenance, and future scalability.
- To implement a fully responsive design that delivers an optimal viewing experience across desktops, tablets, and smartphones.
- To optimize the website for fast loading speeds, accessibility, and cross-browser compatibility.
- To integrate clear content presentation for services, portfolio, and contact information to facilitate user engagement.
- To gain hands-on experience with the complete software development lifecycle, including planning, development, testing, and deployment.`,
      },
      {
        title: "Learning Outcomes",
        content: `Technical Skills:
- Mastery of Next.js Framework: Gained extensive experience with App Router, Data Fetching (SSG/SSR), Image Optimization, and Routing, understanding their impact on performance and SEO.
- Advanced React Proficiency: Strengthened concepts of hooks, component lifecycle, context API, and reusable component patterns.
- Performance Optimization Expertise: Learned and applied techniques for bundle splitting, lazy loading, image optimization, and Core Web Vitals improvement.
- Responsive & Accessible Design: Developed the ability to create websites that work flawlessly across all devices and are usable by people with disabilities.
- Deployment & DevOps Basics: Acquired hands-on experience with Vercel platform, CI/CD for frontend projects, and domain management.
- Full-Stack Awareness: Through the Python server project, gained foundational knowledge of backend server mechanics and HTTP protocols.

Professional Skills:
- Project Management: Experienced breaking down a large project into manageable tasks, estimating effort, and working within timelines.
- Collaboration & Communication: Improved skills in articulating technical decisions, participating in code reviews, and working within a team dynamic.
- Problem-Solving: Enhanced ability to debug complex issues, research solutions, and implement effective fixes.
- Professional Workflow: Became proficient with industry-standard tools like Git, VS Code, and agile development practices.
- Documentation: Learned the critical importance of documenting code and processes for future maintainers and one's future self.`,
      },
    ],
  },
  dattey: {
    title: "Ashish GM - ReactJS E-commerce Platform",
    name: "Ashish GM",
    project: "Sushila Fancy Store E-commerce Website",
    tech: "ReactJS, Context API, CSS, Vercel",
    duration: "10 weeks",
    highlight:
      "Frontend development of an e-commerce platform using ReactJS with advanced filtering, cart management, and responsive design.",
    techTags: [
      "ReactJS",
      "E-commerce",
      "Context API",
      "Responsive",
      "Vercel",
      "State Management",
    ],
    sections: [
      {
        title: "Mentor's Recommendation",
        content: `I am pleased to provide my strong recommendation for ASHISH GM based on his performance during his internship at Sajilo Digital Pvt. Ltd. As his mentor, I supervised his work on the Sushila Fancy Store Website project, where he served as a Frontend Developer specializing in ReactJS.

Throughout his internship, Ashish demonstrated exceptional technical aptitude and a keen understanding of modern frontend development principles. He took primary responsibility for implementing the user interface and interactive features of the e-commerce platform, showcasing proficiency in React component design, state management, and responsive web development.

Ashish consistently delivered high-quality code, paid meticulous attention to detail in UI implementation, and showed remarkable problem-solving abilities when addressing technical challenges. His dedication to creating seamless user experiences and his ability to translate design specifications into functional, performant code made him a valuable contributor to the project.

I hereby endorse the internship report entitled "Frontend Development of Sushila Fancy Store E-commerce Platform Using ReactJS" prepared by Ashish GM under my guidance. This work satisfactorily fulfills the practical requirements for the Bachelor of Science in Computer Science and Information Technology degree and is recommended for evaluation.`,
      },
      {
        title: "Abstract",
        content: `This report documents the 10-week internship completed at Sajilo Digital Pvt. Ltd. as a Frontend Developer, focusing on the development of the Sushila Fancy Store e-commerce website using ReactJS. The primary objective was to design and implement a responsive, interactive, and user-friendly online shopping interface for a fashion retail store.

The project involved creating a complete frontend application with features including product catalog display, advanced filtering and sorting, shopping cart management, user authentication interfaces, and an administrative dashboard. Utilizing ReactJS with functional components and hooks, the implementation emphasized component reusability, efficient state management using Context API, and responsive design principles for cross-device compatibility.

Throughout the internship, I gained hands-on experience in modern frontend development workflows, including version control with Git, component-based architecture, API integration with mock data, performance optimization, and deployment on Vercel. The project successfully delivered a fully functional e-commerce frontend that provides an intuitive shopping experience while demonstrating professional-grade ReactJS development practices.`,
      },
      {
        title: "Project Objectives",
        content: `The primary objectives of this frontend development internship project were:

- To develop a fully responsive e-commerce website using ReactJS with optimal performance across all devices.
- To implement advanced product browsing features including filtering, sorting, and search functionality.
- To create an interactive shopping cart with real-time updates and persistent storage.
- To design and implement user authentication interfaces and user profile management.
- To establish efficient state management patterns using React Hooks and Context API.
- To optimize application performance through code splitting, lazy loading, and image optimization.
- To ensure accessibility standards and cross-browser compatibility.
- To deploy the application to a production environment and document the development process.`,
      },
      {
        title: "Technical Implementation",
        content: `The Sushila Fancy Store website was built as a single-page application (SPA) using ReactJS with the following technical specifications:

- Framework: React 18 with functional components and hooks
- State Management: Context API with useReducer for complex state logic
- Routing: React Router v6 for client-side navigation
- Styling: CSS Modules for component-scoped styles with responsive design
- Data Fetching: Mock REST API with axios for HTTP requests
- Build Tool: Create React App with custom configuration
- Deployment: Vercel for continuous deployment

Key Features Implemented:
- Product Catalog: Grid display with hover effects and quick view
- Advanced Filtering: Multi-parameter filtering with checkbox, range, and color selectors
- Sorting System: Multiple sorting options with visual indicators
- Shopping Cart: Persistent cart with quantity adjustments and real-time total calculation
- Responsive Design: Fully adaptive layouts for mobile, tablet, and desktop`,
      },
      {
        title: "Learning Outcomes",
        content: `Technical Competencies:
- Advanced proficiency in ReactJS development with hooks and functional components
- Expertise in component-based architecture and reusable UI patterns
- Practical experience with Context API and useReducer for global state management
- Skills in responsive web design implementation across multiple device breakpoints
- Knowledge of performance optimization techniques for React applications
- Experience with modern CSS methodologies and layout systems
- Understanding of REST API integration and asynchronous data handling
- Proficiency with Git version control and collaborative development workflows

Professional Development:
- Enhanced problem-solving skills through debugging and technical challenges
- Improved collaboration and communication within development teams
- Experience with agile development practices and iterative improvement
- Developed documentation skills for code and project knowledge transfer
- Strengthened attention to detail in UI implementation and user experience
- Gained understanding of project planning and technical decision-making processes`,
      },
    ],
  },
  gayjay: {
    title: "Bijay Kumar Chaudhary - Website Modernization",
    name: "Bijay Kumar Chaudhary",
    project: "Code for Change Nepal Website Redesign",
    tech: "ReactJS, CSS Modules, React Router, Vercel",
    duration: "10 weeks",
    highlight:
      "Complete modernization and redesign of a static HTML website to a dynamic ReactJS application with improved performance and UX.",
    techTags: [
      "ReactJS",
      "Website Redesign",
      "Legacy Migration",
      "Performance",
      "Accessibility",
      "SEO",
    ],
    sections: [
      {
        title: "Mentor's Recommendation",
        content: `I am pleased to provide my strong recommendation for BIJAY KUMAR CHAUDHARY based on his exceptional performance during his internship at Sajilo Digital Pvt. Ltd. As his mentor, I supervised his work on the complete redesign and modernization of the Code for Change Nepal website, where he served as a Frontend Developer specializing in ReactJS.

Throughout his internship, Bijay demonstrated impressive technical skills and creativity in transforming a static HTML-based website into a dynamic, modern React application. He took ownership of the entire frontend redesign process, showcasing proficiency in component architecture, state management, and responsive design implementation.

Bijay exhibited excellent problem-solving abilities when addressing the challenges of migrating from a traditional HTML structure to a component-based React architecture. His attention to detail in implementing the new design system, maintaining visual consistency, and ensuring optimal performance was commendable. He consistently delivered high-quality code and showed remarkable initiative in suggesting and implementing UX improvements.`,
      },
      {
        title: "Project Overview",
        content: `The Code for Change Nepal website modernization project involved transforming a static HTML-based website into a dynamic ReactJS application. The original website, built with traditional HTML, CSS, and JavaScript, faced limitations in maintainability, user engagement, and performance.

The migration to ReactJS provided an opportunity to implement modern web development practices, including component-based architecture, efficient state management, and optimized performance. The redesigned platform aims to better represent the organization's mission of social change through technology while providing an improved user experience for visitors, volunteers, and donors.

This project provided practical experience in analyzing legacy codebases, designing modern architectures, and implementing full website redesigns using contemporary frontend technologies.`,
      },
      {
        title: "Key Challenges",
        content: `The existing Code for Change Nepal website presented several challenges that necessitated a complete redesign:

- Outdated Technology Stack: The website was built with static HTML, making content updates difficult and requiring technical expertise for even minor changes.
- Poor Maintainability: Lack of component reusability led to code duplication and inconsistent implementations across pages.
- Limited Interactivity: Minimal JavaScript functionality resulted in a static user experience with limited engagement opportunities.
- Non-Responsive Design: The website did not adapt well to mobile devices, alienating a significant portion of potential visitors.
- Slow Performance: Unoptimized assets and inefficient code structure resulted in slow loading times and poor user experience.
- Inconsistent Design: Visual inconsistencies across pages undermined the organization's professional image.`,
      },
      {
        title: "Technical Implementation",
        content: `The redesigned website was built with the following technical specifications:

- Frontend Framework: React 18 with functional components and hooks
- Routing: React Router v6 for client-side navigation
- State Management: React Hooks (useState, useEffect, useContext) for local and global state
- Styling: CSS Modules for component-scoped styles with custom design system
- Build Tool: Create React App with custom configuration
- Performance: Code splitting, lazy loading, image optimization
- Deployment: Vercel hosting platform

Key Features Implemented:
- Component-Based Architecture: 40+ reusable React components organized by atomic design principles
- Responsive Design System: Fully responsive layouts with mobile-first approach
- Interactive Elements: Image galleries, event calendars, donation forms with validation
- Performance Optimized: 85+ Lighthouse performance score with optimized assets
- Accessibility Compliant: WCAG 2.1 AA compliance with semantic HTML and ARIA attributes`,
      },
      {
        title: "Learning Outcomes",
        content: `Technical Skills:
- ReactJS Mastery: Gained extensive experience with React hooks, component lifecycle, context API, and modern React patterns.
- Legacy System Analysis: Developed skills in analyzing existing codebases, identifying improvement opportunities, and planning migration strategies.
- Component Architecture Design: Learned to design and implement scalable component architectures following atomic design principles.
- Responsive Web Development: Mastered responsive design techniques using CSS Grid, Flexbox, and media queries with mobile-first approach.
- Performance Optimization: Applied techniques for improving Core Web Vitals including image optimization, code splitting, and bundle size reduction.

Professional Skills:
- Project Planning: Developed ability to plan and execute complex migration projects with multiple phases.
- Problem-Solving: Enhanced debugging and problem-solving skills across the complete modernization process.
- Client Communication: Improved ability to understand client needs and translate them into technical requirements.
- Documentation: Created comprehensive technical documentation for components, styles, and deployment procedures.`,
      },
    ],
  },
  goban: {
    title: "Bal Gobind Chaudhary - Full Stack Tourism Platform",
    name: "Bal Gobind Chaudhary",
    project: "Mount Glacier Trek Tourism Platform",
    tech: "MERN Stack (MongoDB, Express, React, Node.js), JWT, Payment Integration",
    duration: "10 weeks",
    highlight:
      "Full stack development of a complete tourism booking platform with payment integration, user authentication, and admin dashboard.",
    techTags: [
      "MERN Stack",
      "Full Stack",
      "MongoDB",
      "Node.js",
      "Payment",
      "JWT",
    ],
    sections: [
      {
        title: "Mentor's Recommendation",
        content: `I am pleased to provide my enthusiastic recommendation for BAL GOBIND CHAUDHARY based on his exceptional performance during his internship at Sajilo Digital Pvt. Ltd. As his mentor, I supervised his work on the development of the Mount Glacier Trek adventure tourism website, where he served as a Full Stack Developer.

Throughout his internship, Bal Gobind demonstrated remarkable versatility and technical depth, successfully handling both frontend and backend development responsibilities. He played a pivotal role in building a comprehensive booking and information platform for trekking services, showcasing proficiency in ReactJS for the frontend and Node.js with Express for the backend.

Bal Gobind exhibited strong problem-solving skills, architectural thinking, and the ability to integrate complex systems including payment processing, booking management, and user authentication. His attention to detail in both user interface implementation and server-side logic was commendable. He consistently delivered robust, scalable solutions and showed excellent initiative in optimizing both application performance and database design.`,
      },
      {
        title: "Project Overview",
        content: `The Mount Glacier Trek tourism platform is a complete online solution for trekking package management and booking. The project involved building a full-featured web application using the MERN stack (MongoDB, Express.js, React.js, Node.js) that serves both customers seeking trekking adventures and administrators managing the business operations.

The platform was designed to handle the complete customer journey from browsing trek packages and checking availability to making secure bookings and payments. This comprehensive development experience provided practical exposure to database design, REST API development, user authentication, payment gateway integration, and responsive frontend implementation—all essential components of modern full stack web development.`,
      },
      {
        title: "Business Problem",
        content: `Mount Glacier Trek, a growing adventure tourism company, faced several challenges in managing their operations and customer interactions:

- Manual Booking Processes: Reliance on phone/email for bookings led to errors, double bookings, and inefficient customer service.
- Limited Online Presence: Basic website provided only static information without interactive booking capabilities.
- Inefficient Customer Management: No centralized system to track customer inquiries, bookings, or payment status.
- Poor Information Accessibility: Potential clients couldn't easily browse available dates, compare packages, or check real-time availability.
- Administrative Overhead: Staff spent excessive time managing bookings manually rather than focusing on customer service and operations.
- No Payment Integration: Customers couldn't make secure online payments, requiring offline transactions.`,
      },
      {
        title: "Technical Architecture",
        content: `The platform was built using the MERN stack with the following architecture:

- Frontend: ReactJS with Redux Toolkit for state management, React Router for navigation
- Backend: Node.js with Express.js framework, REST API architecture
- Database: MongoDB Atlas (cloud) with Mongoose ODM
- Authentication: JWT (JSON Web Tokens) with refresh token mechanism
- Payment: Integrated payment gateway for secure transactions
- Hosting: Backend on cloud platform, Frontend on Vercel

Key Features:
- User Authentication: Secure registration, login, profile management
- Trek Management: Detailed trek listings with images, descriptions, itineraries
- Booking System: Multi-step booking with real-time availability checking
- Payment Processing: Secure online payment with multiple method support
- Admin Dashboard: Comprehensive management interface for treks, bookings, users
- Responsive Design: Mobile-friendly interface for all device types`,
      },
      {
        title: "Learning Outcomes",
        content: `Technical Skills:
- Full Stack Proficiency: Mastered the complete MERN stack including MongoDB schema design, Express API development, React frontend implementation, and Node.js server management.
- Database Design: Gained expertise in NoSQL database design with MongoDB, including data modeling, indexing, aggregation, and performance optimization.
- API Development: Developed comprehensive RESTful APIs with proper authentication, validation, error handling, and documentation.
- Authentication & Security: Implemented secure JWT-based authentication, password encryption, role-based access control, and secure payment processing.
- Payment Integration: Successfully integrated and tested payment gateway with secure transaction handling.

Professional Skills:
- Project Architecture: Developed ability to design complete system architecture considering scalability, maintainability, and security.
- Problem-Solving: Enhanced debugging and problem-solving skills across the full technology stack.
- Collaboration: Improved teamwork and communication skills through regular code reviews and collaborative development.
- Documentation: Created comprehensive technical documentation for APIs, database schema, and deployment procedures.`,
      },
    ],
  },
  sunil: {
    title: "Sunil Paudyal - QA & Frontend Development",
    name: "Sunil Paudyal",
    project: "Sushila Fancy Store Development & Testing",
    tech: "ReactJS, Manual Testing, QA Methodologies, Vercel",
    duration: "10 weeks",
    highlight:
      "Dual role as Frontend Developer and QA Tester for an e-commerce platform, implementing features and ensuring software quality.",
    techTags: [
      "ReactJS",
      "QA Testing",
      "Frontend",
      "E-commerce",
      "Manual Testing",
      "Bug Tracking",
    ],
    sections: [
      {
        title: "Mentor's Recommendation",
        content: `I am pleased to highly recommend SUNIL PAUDYAL for any future endeavors in the fields of frontend development and software quality assurance. As his mentor during his internship at Sajilo Digital Pvt. Ltd., I had the opportunity to supervise his work on the Sushila Fancy Store Website project.

Throughout his internship, Sunil demonstrated a strong commitment to learning, a keen eye for detail, and a professional work ethic. He effectively balanced his dual role as a Frontend Developer and QA Tester, contributing significantly to both the development and validation phases of the project. He showed excellent problem-solving skills, a willingness to take on challenges, and the ability to work collaboratively within the team.

He successfully utilized ReactJS to build responsive and interactive user interfaces while simultaneously applying systematic testing methodologies to ensure the quality and reliability of the application. His dedication and proactive approach made him a valuable asset to our team.`,
      },
      {
        title: "Dual Role Experience",
        content: `This internship involved a hybrid role encompassing both development and testing duties for the Sushila Fancy Store project:

As a Frontend Developer:
- Developing reusable, modular React components (ProductCard, Navbar, CartSidebar, etc.)
- Implementing application state management using React Hooks (useState, useEffect, useContext)
- Creating responsive page layouts and components using CSS Flexbox, Grid, and media queries
- Implementing client-side routing using react-router-dom for seamless navigation
- Integrating with mock REST APIs to fetch and display product data

As a QA Tester:
- Designing and executing detailed test cases for all implemented features
- Performing functional testing to verify features worked as per requirements
- Conducting UI/UX testing to check for design consistency, alignment, and visual bugs
- Testing cross-browser compatibility (Chrome, Firefox, Safari) and responsiveness on various screen sizes
- Logging identified bugs systematically in a shared spreadsheet`,
      },
      {
        title: "Project Scope",
        content: `The scope of this project encompassed the frontend development and testing of the Sushila Fancy Store website:

Development Scope:
- Creating all user-facing components using ReactJS, managing state, implementing routing, and ensuring responsive design
- Features: Product listing, filtering, shopping cart, user login/signup UI, and a static admin dashboard
- Deployment: Hosting the application on the Vercel platform

Testing Scope:
- Functional testing of all implemented features
- UI/UX testing for design consistency and usability
- Cross-browser compatibility testing
- Responsiveness testing across device types
- Bug tracking and reporting

Limitations:
- Backend Integration: The project focused on the frontend; backend APIs were simulated using mock data
- Advanced Features: Features like real-time chat, advanced analytics, and full CMS were beyond scope
- Performance Testing: In-depth load, stress, and security testing were not conducted due to time constraints`,
      },
      {
        title: "QA Methodology",
        content: `The quality assurance process followed these key methodologies:

1. Test Planning: Created comprehensive test cases covering all user stories and acceptance criteria
2. Functional Testing: Verified all features worked according to requirements
3. UI/UX Testing: Ensured design consistency, proper alignment, and visual appeal
4. Compatibility Testing: Tested across browsers (Chrome, Firefox, Safari) and devices (mobile, tablet, desktop)
5. Regression Testing: Re-tested fixed bugs to ensure no new issues were introduced
6. Bug Tracking: Used a systematic approach to log, prioritize, and track bugs to resolution

Key Testing Activities:
- Wrote and executed 50+ manual test cases
- Identified and reported 15+ bugs with detailed reproduction steps
- Conducted cross-browser testing on 3 different browsers
- Performed responsive testing on 5 different screen sizes
- Validated all user flows from product browsing to checkout simulation`,
      },
      {
        title: "Learning Outcomes",
        content: `Technical Skills:
- Advanced ReactJS Proficiency: Gained deep, hands-on experience with functional components, Hooks, and Context API for state management
- Frontend Development Best Practices: Mastered creating responsive, accessible, and modular user interfaces using modern CSS
- QA Fundamentals: Learned the complete manual testing lifecycle—from writing test cases and executing them to logging bugs and performing regression testing
- Development Tools: Became proficient with essential tools like Git for version control, VS Code, and Vercel for deployment

Professional Skills:
- Agile Methodology Exposure: Experienced working in an iterative development cycle with regular feedback loops
- Problem-Solving: Enhanced ability to debug code, identify root causes of bugs, and devise effective solutions
- Documentation: Learned the importance of clear documentation for code, tests, and project reports
- Dual Perspective: Gained unique insight into both development and testing perspectives, understanding how each informs the other

Overall Growth:
This internship transformed theoretical knowledge into practical competence. It instilled a quality-first mindset and provided the confidence to contribute effectively to software development teams in a professional environment.`,
      },
    ],
  },
};

// DOM elements
const tabBtns = document.querySelectorAll(".tab-btn");
const reportTitle = document.getElementById("report-title");
const reportSections = document.getElementById("report-sections");
const copyAllBtn = document.getElementById("copy-all-btn");
const copyNotification = document.getElementById("copy-notification");

// Stats elements
const statName = document.getElementById("stat-name");
const statProject = document.getElementById("stat-project");
const statTech = document.getElementById("stat-tech");
const statDuration = document.getElementById("stat-duration");
const statSections = document.getElementById("stat-sections");
const statWords = document.getElementById("stat-words");
const highlightText = document.getElementById("highlight-text");
const techTags = document.getElementById("tech-tags");

// Initialize with first report
let currentReport = "arun";
loadReport(currentReport);

// Tab button event listeners
tabBtns.forEach((btn) => {
  btn.addEventListener("click", () => {
    const reportId = btn.getAttribute("data-report");

    // Update active tab
    tabBtns.forEach((b) => b.classList.remove("active"));
    btn.classList.add("active");

    // Load report
    loadReport(reportId);
  });
});

// Load report function
function loadReport(reportId) {
  const report = reports[reportId];
  currentReport = reportId;

  // Update report title
  reportTitle.textContent = report.title;

  // Update stats panel
  statName.textContent = report.name;
  statProject.textContent = report.project;
  statTech.textContent = report.tech;
  statDuration.textContent = report.duration;
  statSections.textContent = report.sections.length;

  // Calculate approximate word count
  let wordCount = 0;
  report.sections.forEach((section) => {
    wordCount += section.content.split(/\s+/).length;
  });
  statWords.textContent = `~${wordCount}`;

  // Update highlight and tech tags
  highlightText.textContent = report.highlight;

  // Update tech tags
  techTags.innerHTML = "";
  report.techTags.forEach((tag) => {
    const tagElement = document.createElement("span");
    tagElement.className = "tech-tag";
    tagElement.textContent = tag;
    techTags.appendChild(tagElement);
  });

  // Clear existing sections
  reportSections.innerHTML = "";

  // Add sections
  report.sections.forEach((section, index) => {
    const sectionElement = document.createElement("div");
    sectionElement.className = "report-section";
    sectionElement.innerHTML = `
                    <div class="section-header">
                        <h3 class="section-title">${section.title}</h3>
                        <button class="copy-section-btn" data-section="${index}">
                            <i class="far fa-copy"></i> Copy Section
                        </button>
                    </div>
                    <div class="section-content">${formatContent(section.content)}</div>
                `;
    reportSections.appendChild(sectionElement);
  });

  // Add event listeners to section copy buttons
  document.querySelectorAll(".copy-section-btn").forEach((btn) => {
    btn.addEventListener("click", () => {
      const sectionIndex = btn.getAttribute("data-section");
      const sectionContent = report.sections[sectionIndex].content;
      copyToClipboard(
        sectionContent,
        `${report.sections[sectionIndex].title} section`,
      );
    });
  });

  // Animate content load
  const sections = document.querySelectorAll(".report-section");
  sections.forEach((section, index) => {
    section.style.animationDelay = `${index * 0.1}s`;
  });
}

// Format content with paragraph breaks
function formatContent(content) {
  // Replace double newlines with paragraph tags
  return content
    .split("\n\n")
    .map((paragraph) => {
      if (paragraph.trim()) {
        // Replace single newlines with line breaks within paragraphs
        const formattedParagraph = paragraph.replace(/\n/g, "<br>");
        return `<p>${formattedParagraph}</p>`;
      }
      return "";
    })
    .join("");
}

// Copy all report content
copyAllBtn.addEventListener("click", () => {
  const report = reports[currentReport];
  let fullText = `${report.title}\n\n`;

  report.sections.forEach((section) => {
    fullText += `${section.title}\n${section.content}\n\n`;
  });

  copyToClipboard(fullText, "entire report");
});

// Copy to clipboard function
function copyToClipboard(text, description) {
  navigator.clipboard
    .writeText(text)
    .then(() => {
      // Show notification
      copyNotification.querySelector("span").textContent =
        `${description} copied to clipboard!`;
      copyNotification.classList.add("show");

      // Hide notification after 3 seconds
      setTimeout(() => {
        copyNotification.classList.remove("show");
      }, 3000);
    })
    .catch((err) => {
      console.error("Failed to copy: ", err);
      alert("Failed to copy text. Please try again.");
    });
}

// Add hover effects to report sections
document.addEventListener("mouseover", (e) => {
  if (e.target.closest(".report-section")) {
    const section = e.target.closest(".report-section");
    section.style.transform = "translateX(5px)";
  }
});

document.addEventListener("mouseout", (e) => {
  if (e.target.closest(".report-section")) {
    const section = e.target.closest(".report-section");
    section.style.transform = "translateX(0)";
  }
});