documentation page & help

HELP_PAGE_RECOMMENDATION.md

@@ -0,0 +1,78 @@
+# Help & Documentation Page Recommendation
+
+## Decision: **ONE COMBINED PAGE**
+
+### Analysis
+
+**Current Structure:**
+- `/help` - Help & Support (placeholder)
+- `/help/docs` - Documentation (placeholder)
+- Both shown as separate menu items in sidebar
+
+**Documentation Available:**
+- `/docs` folder with comprehensive technical documentation
+- 6 main documentation files covering architecture, frontend, backend, AI functions
+- Well-organized markdown structure
+
+**Recommendation: Single Combined Page**
+
+### Reasons:
+
+1. **User Experience**
+   - Users don't need to decide between "Help" and "Documentation"
+   - All information in one place
+   - Better discoverability
+
+2. **Content Overlap**
+   - Help content often references documentation
+   - Documentation includes help content
+   - No clear boundary between the two
+
+3. **Modern Pattern**
+   - Most modern apps combine them (GitHub, Stripe, Vercel, etc.)
+   - Single entry point is cleaner
+   - Better for SEO and navigation
+
+4. **WordPress Plugin Pattern**
+   - Uses subpages (`?sp=help`, `?sp=docs`)
+   - Suggests they're meant to be together
+   - Can maintain consistency
+
+5. **Content Size**
+   - Documentation isn't so large it needs separation
+   - Can be organized with tabs/sections
+
+### Proposed Structure:
+
+**Single `/help` page with sections:**
+
+1. **Getting Started** (Tab/Section)
+   - Quick start guide
+   - Common workflows
+   - Video tutorials
+   - Setup instructions
+
+2. **Documentation** (Tab/Section)
+   - Architecture & Tech Stack
+   - Frontend Documentation
+   - Backend Documentation
+   - AI Functions
+   - API Reference
+
+3. **FAQ & Troubleshooting** (Tab/Section)
+   - Common questions
+   - Troubleshooting guides
+   - Known issues
+
+4. **Support** (Tab/Section)
+   - Contact support
+   - Community resources
+   - Feature requests
+
+### Implementation:
+
+- Use tabs or sidebar navigation within the page
+- Smooth transitions between sections
+- Search functionality across all content
+- Mobile-responsive design
+

frontend/src/components/ui/accordion/Accordion.tsx

@@ -0,0 +1,64 @@
+import React, { useState, ReactNode } from 'react';
+import { ChevronDownIcon } from '../../../icons';
+
+interface AccordionItemProps {
+  title: string;
+  children: ReactNode;
+  defaultOpen?: boolean;
+  className?: string;
+}
+
+export const AccordionItem: React.FC<AccordionItemProps> = ({
+  title,
+  children,
+  defaultOpen = false,
+  className = '',
+}) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  return (
+    <div className={`border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden ${className}`}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="w-full px-6 py-4 flex items-center justify-between bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
+      >
+        <h3 className="text-left font-semibold text-gray-900 dark:text-white">{title}</h3>
+        <ChevronDownIcon
+          className={`w-5 h-5 text-gray-500 dark:text-gray-400 transition-transform duration-200 ${
+            isOpen ? 'rotate-180' : ''
+          }`}
+        />
+      </button>
+      <div
+        className={`overflow-hidden transition-all duration-300 ease-in-out ${
+          isOpen ? 'max-h-[5000px] opacity-100' : 'max-h-0 opacity-0'
+        }`}
+      >
+        <div className="px-6 py-4 bg-gray-50 dark:bg-gray-900/50 border-t border-gray-200 dark:border-gray-700">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface AccordionProps {
+  children: ReactNode;
+  className?: string;
+  allowMultiple?: boolean;
+}
+
+export const Accordion: React.FC<AccordionProps> = ({
+  children,
+  className = '',
+  allowMultiple = true,
+}) => {
+  return (
+    <div className={`space-y-3 ${className}`}>
+      {children}
+    </div>
+  );
+};
+
+export default Accordion;
+

frontend/src/components/ui/accordion/index.ts

@@ -0,0 +1,3 @@
+export { Accordion, AccordionItem } from './Accordion';
+export { default } from './Accordion';
+

frontend/src/layout/AppSidebar.tsx

@@ -154,14 +154,9 @@ const AppSidebar: React.FC = () => {
       items: [
         {
           icon: <DocsIcon />,
-          name: "Help & Support",
+          name: "Help & Documentation",
           path: "/help",
         },
-        {
-          icon: <DocsIcon />,
-          name: "Documentation",
-          path: "/help/docs",
-        },
       ],
     },
   ], []);

frontend/src/pages/Help/Help.tsx

@@ -1,22 +1,586 @@
+import { useState, useRef, useEffect } from "react";
 import PageMeta from "../../components/common/PageMeta";
-import ComponentCard from "../../components/common/ComponentCard";
+import { Accordion, AccordionItem } from "../../components/ui/accordion";
+import { Card } from "../../components/ui/card";
+import Badge from "../../components/ui/badge/Badge";
+import { 
+  ListIcon, 
+  BoltIcon, 
+  CheckCircleIcon,
+  ArrowRightIcon,
+  FileIcon,
+  GroupIcon
+} from "../../icons";
+
+interface TableOfContentsItem {
+  id: string;
+  title: string;
+  level: number;
+}
 
 export default function Help() {
+  const [activeSection, setActiveSection] = useState<string | null>(null);
+  const sectionRefs = useRef<Record<string, HTMLDivElement | null>>({});
+
+  const tableOfContents: TableOfContentsItem[] = [
+    { id: "getting-started", title: "Getting Started", level: 1 },
+    { id: "quick-start", title: "Quick Start Guide", level: 2 },
+    { id: "workflow-overview", title: "Workflow Overview", level: 2 },
+    { id: "planner-module", title: "Planner Module", level: 1 },
+    { id: "keywords", title: "Keywords Management", level: 2 },
+    { id: "clusters", title: "Keyword Clusters", level: 2 },
+    { id: "ideas", title: "Content Ideas", level: 2 },
+    { id: "writer-module", title: "Writer Module", level: 1 },
+    { id: "tasks", title: "Tasks Management", level: 2 },
+    { id: "content", title: "Content Generation", level: 2 },
+    { id: "images", title: "Image Generation", level: 2 },
+    { id: "automation", title: "Automation Setup", level: 1 },
+    { id: "faq", title: "Frequently Asked Questions", level: 1 },
+  ];
+
+  const scrollToSection = (id: string) => {
+    const element = sectionRefs.current[id];
+    if (element) {
+      const offset = 100; // Account for fixed header
+      const elementPosition = element.getBoundingClientRect().top;
+      const offsetPosition = elementPosition + window.pageYOffset - offset;
+      
+      window.scrollTo({
+        top: offsetPosition,
+        behavior: "smooth"
+      });
+      setActiveSection(id);
+    }
+  };
+
+  const faqItems = [
+    {
+      question: "How do I add keywords to my workflow?",
+      answer: "Navigate to Planner > Keyword Opportunities. Browse available keywords, use filters to find relevant ones, and click 'Add to Workflow' on individual keywords or use bulk selection to add multiple keywords at once."
+    },
+    {
+      question: "What is the difference between Keywords and Clusters?",
+      answer: "Keywords are individual search terms. Clusters are groups of related keywords that are organized together for content planning. Clusters help you create comprehensive content that covers multiple related search queries."
+    },
+    {
+      question: "How does auto-clustering work?",
+      answer: "Auto-clustering uses AI to analyze your keywords and group them based on semantic similarity and search intent. Select keywords in the Keywords page and click 'Auto Cluster' to automatically organize them into clusters."
+    },
+    {
+      question: "How do I generate content ideas from clusters?",
+      answer: "Go to Planner > Clusters, select one or more clusters, and click 'Generate Ideas'. The AI will analyze the keywords in each cluster and create content ideas that cover the topics comprehensively."
+    },
+    {
+      question: "What is the workflow from keywords to published content?",
+      answer: "1) Add keywords from Opportunities, 2) Cluster related keywords, 3) Generate content ideas from clusters, 4) Create tasks from ideas, 5) Generate content from tasks, 6) Generate images, 7) Review and publish. You can automate most of these steps in the Automation Setup."
+    },
+    {
+      question: "How do I set up automation?",
+      answer: "Go to Dashboard > Automation Setup section. Enable automation for each step (Keywords, Ideas, Content, Images) and configure settings like how many keywords to process per cycle. Advanced settings are available in Schedules page."
+    },
+    {
+      question: "Can I edit AI-generated content?",
+      answer: "Yes! All AI-generated content can be edited. Go to Writer > Content, click on any content piece to open the editor, and make your changes. You can also regenerate content if needed."
+    },
+    {
+      question: "How are images generated?",
+      answer: "Images are generated using AI based on your content. Go to Writer > Images to see all generated images. You can regenerate images, view them in a modal, and manage them per content piece."
+    },
+    {
+      question: "What is the difference between Tasks and Content?",
+      answer: "Tasks are content ideas that have been converted into actionable writing assignments. Content is the actual generated articles/posts created from tasks. Tasks show what needs to be written, Content shows what has been written."
+    },
+    {
+      question: "How do I filter data by site or sector?",
+      answer: "Use the Site and Sector selectors in the page header. Select a site to filter all data to that site. Select a sector for further filtering. The 'All Sectors' option shows all sectors for the selected site."
+    },
+    {
+      question: "What are column visibility settings?",
+      answer: "Each table page has a column selector (icon in the header). Click it to show/hide columns. Your preferences are saved and persist across page reloads. Use 'Show All' to quickly make all columns visible."
+    },
+    {
+      question: "How do I sort table data?",
+      answer: "Click on any column header that has a sort icon. Click once for ascending order, click again for descending order. The current sort is indicated by an arrow icon in the column header."
+    },
+    {
+      question: "What is the Thinker module?",
+      answer: "The Thinker module manages AI prompts, author profiles, and content strategies. Use it to customize how AI generates content, define writing styles, and create reusable prompt templates."
+    },
+    {
+      question: "How do I manage my credits?",
+      answer: "Go to Billing > Credits to view your credit balance, purchase more credits, and see credit usage. Credits are used for AI operations like content generation, clustering, and image generation."
+    },
+    {
+      question: "Can I export my data?",
+      answer: "Yes! Most table pages have export functionality. Look for the export button in the action bar. You can export data as CSV for keywords, clusters, content, and other entities."
+    },
+    {
+      question: "How do I bulk delete items?",
+      answer: "Select multiple items using checkboxes, then use the bulk actions dropdown to delete selected items. Bulk actions are available on most table pages for efficient management."
+    },
+    {
+      question: "What happens if I delete a cluster?",
+      answer: "Deleting a cluster does not delete the keywords in it. Keywords will become unclustered and can be re-clustered later. Content ideas associated with the cluster will also be affected."
+    },
+    {
+      question: "How do I search for specific content?",
+      answer: "Use the search bar at the top of each table page. Search works across multiple fields depending on the page. For example, on Keywords page you can search by keyword text, on Content page you can search by title."
+    },
+    {
+      question: "What filters are available?",
+      answer: "Filters vary by page. Common filters include: Status, Intent (for keywords), Difficulty, Volume range, Content Type, and Date ranges. Use the filter dropdowns to narrow down results."
+    },
+    {
+      question: "How do I view content details?",
+      answer: "Click on any content item in the Content table to open the detailed view. Here you can see the full content, edit it, view associated images, see metadata, and manage publication status."
+    }
+  ];
+
   return (
     <>
-      <PageMeta title="Help & Support - IGNY8" description="Documentation and support" />
+      <PageMeta title="Help & Documentation - IGNY8" description="Complete documentation and guides for IGNY8" />
       
-      <ComponentCard title="Coming Soon" desc="Documentation and support">
-        <div className="text-center py-8">
-          <p className="text-gray-600 dark:text-gray-400">
-            Help & Support - Coming Soon
-          </p>
-          <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">
-            Documentation and support resources for getting started
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">
+            Help & Documentation
+          </h1>
+          <p className="text-lg text-gray-600 dark:text-gray-400">
+            Complete guides and documentation to help you get the most out of IGNY8
           </p>
         </div>
-      </ComponentCard>
+
+        {/* Table of Contents */}
+        <Card className="p-6 mb-8 bg-gradient-to-r from-brand-50 to-purple-50 dark:from-brand-900/10 dark:to-purple-900/10 border-brand-200 dark:border-brand-800">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+            <ListIcon className="size-5 text-brand-600 dark:text-brand-400" />
+            Table of Contents
+          </h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
+            {tableOfContents.map((item) => (
+              <button
+                key={item.id}
+                onClick={() => scrollToSection(item.id)}
+                className={`text-left px-4 py-2 rounded-lg transition-colors ${
+                  item.level === 1
+                    ? "font-semibold text-gray-900 dark:text-white hover:bg-white/50 dark:hover:bg-gray-800/50"
+                    : "text-sm text-gray-600 dark:text-gray-400 hover:bg-white/30 dark:hover:bg-gray-800/30 pl-8"
+                } ${activeSection === item.id ? "bg-brand-100 dark:bg-brand-900/20 text-brand-700 dark:text-brand-400" : ""}`}
+              >
+                {item.title}
+              </button>
+            ))}
+          </div>
+        </Card>
+
+        {/* Getting Started Section */}
+        <div ref={(el) => (sectionRefs.current["getting-started"] = el)} className="mb-12 scroll-mt-24">
+          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-3">
+            <BoltIcon className="size-8 text-brand-600 dark:text-brand-400" />
+            Getting Started
+          </h2>
+
+          <Accordion>
+            <AccordionItem title="Quick Start Guide" defaultOpen>
+              <div className="space-y-4">
+                <p className="text-gray-700 dark:text-gray-300">
+                  Welcome to IGNY8! Follow these steps to get started with content creation:
+                </p>
+                
+                <div className="space-y-3">
+                  <div className="flex gap-4">
+                    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-brand-500 text-white flex items-center justify-center font-bold">
+                      1
+                    </div>
+                    <div className="flex-1">
+                      <h4 className="font-semibold text-gray-900 dark:text-white mb-1">Set Up Your Site</h4>
+                      <p className="text-gray-600 dark:text-gray-400 text-sm">
+                        Go to Settings > Sites and add your WordPress site. Configure the connection details and verify the integration.
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="flex gap-4">
+                    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-brand-500 text-white flex items-center justify-center font-bold">
+                      2
+                    </div>
+                    <div className="flex-1">
+                      <h4 className="font-semibold text-gray-900 dark:text-white mb-1">Discover Keywords</h4>
+                      <p className="text-gray-600 dark:text-gray-400 text-sm">
+                        Navigate to Planner > Keyword Opportunities. Browse the global keyword database and add relevant keywords to your workflow.
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="flex gap-4">
+                    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-brand-500 text-white flex items-center justify-center font-bold">
+                      3
+                    </div>
+                    <div className="flex-1">
+                      <h4 className="font-semibold text-gray-900 dark:text-white mb-1">Organize Keywords</h4>
+                      <p className="text-gray-600 dark:text-gray-400 text-sm">
+                        Go to Planner > Keywords and use Auto Cluster to group related keywords. This helps create comprehensive content.
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="flex gap-4">
+                    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-brand-500 text-white flex items-center justify-center font-bold">
+                      4
+                    </div>
+                    <div className="flex-1">
+                      <h4 className="font-semibold text-gray-900 dark:text-white mb-1">Generate Ideas</h4>
+                      <p className="text-gray-600 dark:text-gray-400 text-sm">
+                        Select clusters in Planner > Clusters and click Generate Ideas. AI will create content ideas based on your keywords.
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="flex gap-4">
+                    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-brand-500 text-white flex items-center justify-center font-bold">
+                      5
+                    </div>
+                    <div className="flex-1">
+                      <h4 className="font-semibold text-gray-900 dark:text-white mb-1">Create Content</h4>
+                      <p className="text-gray-600 dark:text-gray-400 text-sm">
+                        Ideas automatically become tasks. Go to Writer > Tasks, select tasks, and generate content. Review and edit as needed.
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="flex gap-4">
+                    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-brand-500 text-white flex items-center justify-center font-bold">
+                      6
+                    </div>
+                    <div className="flex-1">
+                      <h4 className="font-semibold text-gray-900 dark:text-white mb-1">Generate Images</h4>
+                      <p className="text-gray-600 dark:text-gray-400 text-sm">
+                        Go to Writer > Images and generate featured and in-article images for your content. Images are AI-generated based on your content.
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="flex gap-4">
+                    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-green-500 text-white flex items-center justify-center font-bold">
+                      7
+                    </div>
+                    <div className="flex-1">
+                      <h4 className="font-semibold text-gray-900 dark:text-white mb-1">Publish</h4>
+                      <p className="text-gray-600 dark:text-gray-400 text-sm">
+                        Review your content in Writer > Content, make final edits, and publish to your WordPress site.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </AccordionItem>
+
+            <AccordionItem title="Workflow Overview">
+              <div className="space-y-4">
+                <p className="text-gray-700 dark:text-gray-300">
+                  IGNY8 follows a streamlined workflow from keyword discovery to published content:
+                </p>
+                
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <Card className="p-4 border-l-4 border-blue-500">
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2 flex items-center gap-2">
+                      <ListIcon className="size-5 text-blue-500" />
+                      Planner Module
+                    </h4>
+                    <p className="text-sm text-gray-600 dark:text-gray-400">
+                      Discover keywords, organize them into clusters, and generate content ideas. This is where your content strategy begins.
+                    </p>
+                  </Card>
+
+                  <Card className="p-4 border-l-4 border-green-500">
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2 flex items-center gap-2">
+                      <FileIcon className="size-5 text-green-500" />
+                      Writer Module
+                    </h4>
+                    <p className="text-sm text-gray-600 dark:text-gray-400">
+                      Convert ideas into tasks, generate content, create images, and publish to your WordPress site.
+                    </p>
+                  </Card>
+                </div>
+
+                <div className="bg-blue-50 dark:bg-blue-900/10 p-4 rounded-lg border border-blue-200 dark:border-blue-800">
+                  <p className="text-sm text-blue-800 dark:text-blue-300">
+                    <strong>Tip:</strong> You can automate most of this workflow! Go to Dashboard > Automation Setup to configure automatic processing.
+                  </p>
+                </div>
+              </div>
+            </AccordionItem>
+          </Accordion>
+        </div>
+
+        {/* Planner Module Section */}
+        <div ref={(el) => (sectionRefs.current["planner-module"] = el)} className="mb-12 scroll-mt-24">
+          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-3">
+            <ListIcon className="size-8 text-blue-600 dark:text-blue-400" />
+            Planner Module
+          </h2>
+
+          <Accordion>
+            <AccordionItem title="Keywords Management">
+              <div className="space-y-4">
+                <p className="text-gray-700 dark:text-gray-300">
+                  Keywords are the foundation of your content strategy. Here's how to manage them:
+                </p>
+                
+                <div className="space-y-3">
+                  <div className="flex items-start gap-3">
+                    <CheckCircleIcon className="size-5 text-green-500 mt-0.5 flex-shrink-0" />
+                    <div>
+                      <h4 className="font-semibold text-gray-900 dark:text-white">Adding Keywords</h4>
+                      <p className="text-sm text-gray-600 dark:text-gray-400">
+                        Go to Planner > Keyword Opportunities to browse the global keyword database. Use filters to find relevant keywords, then add them individually or in bulk.
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="flex items-start gap-3">
+                    <CheckCircleIcon className="size-5 text-green-500 mt-0.5 flex-shrink-0" />
+                    <div>
+                      <h4 className="font-semibold text-gray-900 dark:text-white">Organizing Keywords</h4>
+                      <p className="text-sm text-gray-600 dark:text-gray-400">
+                        Use Auto Cluster to automatically group related keywords. You can also manually assign keywords to clusters or create new clusters.
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="flex items-start gap-3">
+                    <CheckCircleIcon className="size-5 text-green-500 mt-0.5 flex-shrink-0" />
+                    <div>
+                      <h4 className="font-semibold text-gray-900 dark:text-white">Keyword Data</h4>
+                      <p className="text-sm text-gray-600 dark:text-gray-400">
+                        Each keyword includes volume, difficulty, intent, and status. Use column visibility to show/hide additional fields like updated dates and overrides.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </AccordionItem>
+
+            <AccordionItem title="Keyword Clusters">
+              <div className="space-y-4">
+                <p className="text-gray-700 dark:text-gray-300">
+                  Clusters group related keywords together for comprehensive content planning:
+                </p>
+                
+                <ul className="list-disc list-inside space-y-2 text-gray-600 dark:text-gray-400">
+                  <li>Clusters help you create content that covers multiple related search queries</li>
+                  <li>Auto-clustering uses AI to group keywords by semantic similarity</li>
+                  <li>Each cluster shows total volume, keyword count, and associated ideas</li>
+                  <li>Generate content ideas directly from clusters</li>
+                </ul>
+              </div>
+            </AccordionItem>
+
+            <AccordionItem title="Content Ideas">
+              <div className="space-y-4">
+                <p className="text-gray-700 dark:text-gray-300">
+                  Content ideas are AI-generated suggestions based on your keyword clusters:
+                </p>
+                
+                <ul className="list-disc list-inside space-y-2 text-gray-600 dark:text-gray-400">
+                  <li>Ideas include title, structure, content type, and target keyword</li>
+                  <li>Ideas automatically convert to tasks in the Writer module</li>
+                  <li>Filter ideas by status, cluster, content type, and structure</li>
+                  <li>Edit ideas before they become tasks</li>
+                </ul>
+              </div>
+            </AccordionItem>
+          </Accordion>
+        </div>
+
+        {/* Writer Module Section */}
+        <div ref={(el) => (sectionRefs.current["writer-module"] = el)} className="mb-12 scroll-mt-24">
+          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-3">
+            <FileIcon className="size-8 text-green-600 dark:text-green-400" />
+            Writer Module
+          </h2>
+
+          <Accordion>
+            <AccordionItem title="Tasks Management">
+              <div className="space-y-4">
+                <p className="text-gray-700 dark:text-gray-300">
+                  Tasks are content ideas converted into actionable writing assignments:
+                </p>
+                
+                <div className="bg-gray-50 dark:bg-gray-800/50 p-4 rounded-lg">
+                  <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Task Workflow:</h4>
+                  <ol className="list-decimal list-inside space-y-1 text-sm text-gray-600 dark:text-gray-400">
+                    <li>Ideas from Planner automatically create tasks</li>
+                    <li>Tasks show status: Pending, In Progress, Completed</li>
+                    <li>Select tasks and generate content using AI</li>
+                    <li>Content is created and linked to the task</li>
+                  </ol>
+                </div>
+              </div>
+            </AccordionItem>
+
+            <AccordionItem title="Content Generation">
+              <div className="space-y-4">
+                <p className="text-gray-700 dark:text-gray-300">
+                  Generate, edit, and manage your content:
+                </p>
+                
+                <div className="space-y-3">
+                  <div className="flex items-start gap-3">
+                    <Badge variant="solid" color="blue" size="sm">Step 1</Badge>
+                    <div>
+                      <h4 className="font-semibold text-gray-900 dark:text-white">Generate Content</h4>
+                      <p className="text-sm text-gray-600 dark:text-gray-400">
+                        Select tasks and click "Generate Content". AI creates full articles based on the task requirements.
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="flex items-start gap-3">
+                    <Badge variant="solid" color="blue" size="sm">Step 2</Badge>
+                    <div>
+                      <h4 className="font-semibold text-gray-900 dark:text-white">Review & Edit</h4>
+                      <p className="text-sm text-gray-600 dark:text-gray-400">
+                        Click on any content to open the editor. Make changes, adjust formatting, and refine the content.
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="flex items-start gap-3">
+                    <Badge variant="solid" color="blue" size="sm">Step 3</Badge>
+                    <div>
+                      <h4 className="font-semibold text-gray-900 dark:text-white">Generate Images</h4>
+                      <p className="text-sm text-gray-600 dark:text-gray-400">
+                        Go to Images page and generate featured and in-article images for your content.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </AccordionItem>
+
+            <AccordionItem title="Image Generation">
+              <div className="space-y-4">
+                <p className="text-gray-700 dark:text-gray-300">
+                  AI-generated images for your content:
+                </p>
+                
+                <ul className="list-disc list-inside space-y-2 text-gray-600 dark:text-gray-400">
+                  <li>Featured images: Main image for your content</li>
+                  <li>In-article images: Multiple images throughout the content</li>
+                  <li>Click any image to view in full size</li>
+                  <li>Regenerate images if needed</li>
+                  <li>Images are automatically linked to content</li>
+                </ul>
+              </div>
+            </AccordionItem>
+          </Accordion>
+        </div>
+
+        {/* Automation Section */}
+        <div ref={(el) => (sectionRefs.current["automation"] = el)} className="mb-12 scroll-mt-24">
+          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-3">
+            <BoltIcon className="size-8 text-orange-600 dark:text-orange-400" />
+            Automation Setup
+          </h2>
+
+          <Card className="p-6">
+            <p className="text-gray-700 dark:text-gray-300 mb-4">
+              Automate your content creation workflow to save time and maintain consistency:
+            </p>
+            
+            <div className="space-y-4">
+              <div className="border-l-4 border-blue-500 pl-4">
+                <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Keywords Automation</h4>
+                <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
+                  Automatically add keywords from opportunities and cluster them:
+                </p>
+                <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
+                  <li>Set how many keywords to process per cycle</li>
+                  <li>Enable auto-clustering for new keywords</li>
+                  <li>Configure cluster size limits</li>
+                </ul>
+              </div>
+
+              <div className="border-l-4 border-orange-500 pl-4">
+                <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Ideas Automation</h4>
+                <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
+                  Automatically generate content ideas from clusters:
+                </p>
+                <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
+                  <li>Auto-generate ideas when clusters are created</li>
+                  <li>Set number of ideas per cluster</li>
+                </ul>
+              </div>
+
+              <div className="border-l-4 border-green-500 pl-4">
+                <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Content Automation</h4>
+                <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
+                  Automatically create tasks and generate content:
+                </p>
+                <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
+                  <li>Auto-create tasks from ideas</li>
+                  <li>Auto-generate content from tasks</li>
+                </ul>
+              </div>
+
+              <div className="border-l-4 border-purple-500 pl-4">
+                <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Images Automation</h4>
+                <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
+                  Automatically generate images for content:
+                </p>
+                <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
+                  <li>Auto-generate featured images</li>
+                  <li>Auto-generate in-article images</li>
+                </ul>
+              </div>
+            </div>
+
+            <div className="mt-6 p-4 bg-brand-50 dark:bg-brand-900/10 rounded-lg border border-brand-200 dark:border-brand-800">
+              <p className="text-sm text-brand-800 dark:text-brand-300">
+                <strong>Note:</strong> Configure automation in Dashboard > Automation Setup. For advanced scheduling, go to Schedules page.
+              </p>
+            </div>
+          </Card>
+        </div>
+
+        {/* FAQ Section */}
+        <div ref={(el) => (sectionRefs.current["faq"] = el)} className="mb-12 scroll-mt-24">
+          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-3">
+            <GroupIcon className="size-8 text-purple-600 dark:text-purple-400" />
+            Frequently Asked Questions
+          </h2>
+
+          <Accordion>
+            {faqItems.map((faq, index) => (
+              <AccordionItem key={index} title={faq.question}>
+                <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
+                  {faq.answer}
+                </p>
+              </AccordionItem>
+            ))}
+          </Accordion>
+        </div>
+
+        {/* Support Section */}
+        <Card className="p-8 bg-gradient-to-r from-brand-500 to-purple-600 text-white">
+          <div className="text-center">
+            <h3 className="text-2xl font-bold mb-4">Still Need Help?</h3>
+            <p className="text-white/90 mb-6">
+              Can't find what you're looking for? Our support team is here to help.
+            </p>
+            <div className="flex flex-wrap justify-center gap-4">
+              <button className="px-6 py-3 bg-white text-brand-600 rounded-lg font-semibold hover:bg-gray-100 transition-colors">
+                Contact Support
+              </button>
+              <button className="px-6 py-3 bg-white/10 text-white rounded-lg font-semibold hover:bg-white/20 transition-colors border border-white/20">
+                Feature Request
+              </button>
+            </div>
+          </div>
+        </Card>
+      </div>
     </>
   );
 }
-