// components/HelpContent.jsx
"use client";
import ImageSlider from './ImageSlider';
import ExpandableSection from './ExpandableSection';
import StepsSection from './StepsSection';
import ProfileSection from './ProfileSection';
import ListSection from './ListSection';
import HelpQuickLinks from './HelpQuickLinks';
import {
  STEPS_DATA,
  PROFILE_FEATURES,
  LIST_SECTIONS
} from './helpData';
import './styles/HelpContent.css';

const HelpContent = () => {
  return (
    <div className="help-content">
      <h1>Help Center</h1>
      <p className="help-intro">
        Welcome to Learnix! This guide will help you understand how to use all features
        of our platform effectively.
      </p>

      <div className="help-section">
        <h2>Quick Links</h2>
        <p>
          Short explanations with <strong>View more</strong> links.
        </p>
        <HelpQuickLinks />
      </div>

      <ImageSlider />

      <ExpandableSection title="Getting Started">
        <StepsSection steps={STEPS_DATA.gettingStarted} title="Getting Started" />
      </ExpandableSection>

      <ExpandableSection title="Uploading Study Materials">
        <StepsSection steps={STEPS_DATA.uploading} title="Uploading Study Materials" />
      </ExpandableSection>

      <ExpandableSection title="Managing Your Profile">
        <ProfileSection features={PROFILE_FEATURES} />
      </ExpandableSection>

      {LIST_SECTIONS.map((section, index) => (
        <ExpandableSection key={index} title={section.title}>
          <ListSection
            subtitle={section.subtitle}
            intro={section.intro}
            items={section.items}
            imageAlt={section.imageAlt}
            imageSrc={section.imageSrc}
          />
        </ExpandableSection>
      ))}
    </div>
  );
};

export default HelpContent;