import { useState, useRef, useEffect } from "react";
import PageMeta from "../../components/common/PageMeta";
import PageHeader from "../../components/common/PageHeader";
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,
  HelpCircleIcon
} from "../../icons";
import { useLocation } from "react-router-dom";

interface TableOfContentsItem {
  id: string;
  title: string;
  level: number;
}

// Visual Pipeline Component with Cards and Arrows
function WorkflowPipeline() {
  const stages = [
    { name: "Keywords", color: "bg-brand-500", description: "Import & organize search terms" },
    { name: "Clusters", color: "bg-purple-500", description: "Group related keywords" },
    { name: "Ideas", color: "bg-warning-500", description: "Generate content concepts" },
    { name: "Tasks", color: "bg-success-500", description: "Create writing assignments" },
    { name: "Content", color: "bg-brand-500", description: "AI-generate articles" },
    { name: "Images", color: "bg-purple-500", description: "Create visuals" },
    { name: "Review", color: "bg-warning-500", description: "Edit & approve" },
    { name: "Published", color: "bg-success-500", description: "Live on your site" },
  ];

  return (
    <div className="my-8">
      {/* Desktop View - Horizontal */}
      <div className="hidden lg:block">
        <div className="flex items-center justify-between gap-2">
          {stages.map((stage, index) => (
            <div key={stage.name} className="flex items-center">
              <div className="flex flex-col items-center">
                <div className={`${stage.color} text-white rounded-xl p-3 shadow-lg min-w-[100px] text-center`}>
                  <div className="font-bold text-sm">{stage.name}</div>
                </div>
                <div className="text-xs text-gray-500 dark:text-gray-400 mt-2 text-center max-w-[100px]">
                  {stage.description}
                </div>
              </div>
              {index < stages.length - 1 && (
                <ArrowRightIcon className="size-5 text-gray-400 mx-1 flex-shrink-0" />
              )}
            </div>
          ))}
        </div>
      </div>

      {/* Mobile View - Vertical */}
      <div className="lg:hidden space-y-3">
        {stages.map((stage, index) => (
          <div key={stage.name} className="flex items-center gap-3">
            <div className={`${stage.color} text-white rounded-lg p-3 shadow-md min-w-[100px] text-center`}>
              <div className="font-bold text-sm">{stage.name}</div>
            </div>
            <div className="text-sm text-gray-600 dark:text-gray-400 flex-1">
              {stage.description}
            </div>
            {index < stages.length - 1 && (
              <div className="text-gray-400 text-xl">↓</div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

// Automation Pipeline Visual
function AutomationPipelineVisual() {
  const automationStages = [
    { from: "Keywords", to: "Clusters", color: "border-brand-500", bg: "bg-brand-50 dark:bg-brand-900/20" },
    { from: "Clusters", to: "Ideas", color: "border-purple-500", bg: "bg-purple-50 dark:bg-purple-900/20" },
    { from: "Ideas", to: "Tasks", color: "border-warning-500", bg: "bg-warning-50 dark:bg-warning-900/20" },
    { from: "Tasks", to: "Content", color: "border-success-500", bg: "bg-success-50 dark:bg-success-900/20" },
    { from: "Content", to: "Images", color: "border-brand-500", bg: "bg-brand-50 dark:bg-brand-900/20" },
    { from: "Images", to: "Review", color: "border-purple-500", bg: "bg-purple-50 dark:bg-purple-900/20" },
    { from: "Review", to: "Published", color: "border-success-500", bg: "bg-success-50 dark:bg-success-900/20" },
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 my-6">
      {automationStages.map((stage, index) => (
        <div key={index} className={`${stage.bg} border-l-4 ${stage.color} rounded-lg p-3`}>
          <div className="flex items-center gap-2">
            <span className="font-semibold text-gray-900 dark:text-white text-sm">{stage.from}</span>
            <ArrowRightIcon className="size-4 text-gray-500" />
            <span className="font-semibold text-gray-900 dark:text-white text-sm">{stage.to}</span>
          </div>
          <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">Automated handoff</div>
        </div>
      ))}
    </div>
  );
}

// Credit System Visual
function CreditSystemVisual() {
  const operations = [
    { name: "Content Generation", credits: "Token-based", color: "bg-brand-100 dark:bg-brand-900/30 border-brand-300" },
    { name: "Image Generation (Basic)", credits: "5 credits", color: "bg-purple-100 dark:bg-purple-900/30 border-purple-300" },
    { name: "Image Generation (Premium)", credits: "25 credits", color: "bg-warning-100 dark:bg-warning-900/30 border-warning-300" },
    { name: "Keyword Clustering", credits: "Token-based", color: "bg-success-100 dark:bg-success-900/30 border-success-300" },
    { name: "Idea Generation", credits: "Token-based", color: "bg-brand-100 dark:bg-brand-900/30 border-brand-300" },
  ];

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 my-4">
      {operations.map((op) => (
        <div key={op.name} className={`${op.color} border rounded-lg p-3`}>
          <div className="font-medium text-gray-900 dark:text-white text-sm">{op.name}</div>
          <div className="text-xs text-gray-600 dark:text-gray-400 mt-1">{op.credits}</div>
        </div>
      ))}
    </div>
  );
}

// Module Card Component
function ModuleCard({ title, icon, color, children }: { title: string; icon: React.ReactNode; color: string; children: React.ReactNode }) {
  return (
    <Card className={`p-5 border-l-4 ${color}`}>
      <h4 className="font-semibold text-gray-900 dark:text-white mb-2 flex items-center gap-2">
        {icon}
        {title}
      </h4>
      <div className="text-sm text-gray-600 dark:text-gray-400">
        {children}
      </div>
    </Card>
  );
}

export default function Help() {
  const [activeSection, setActiveSection] = useState<string | null>(null);
  const [openAccordions, setOpenAccordions] = useState<Set<string>>(new Set());
  const sectionRefs = useRef<Record<string, HTMLDivElement | null>>({});
  const location = useLocation();

  // Handle URL hash navigation and auto-expand accordions
  useEffect(() => {
    const hash = location.hash.replace('#', '');
    if (hash) {
      // Small delay to ensure DOM is ready
      setTimeout(() => {
        scrollToSection(hash, true);
      }, 100);
    }
  }, [location.hash]);

  const scrollToSection = (id: string, fromHash = false) => {
    const element = sectionRefs.current[id];
    if (element) {
      // Open the accordion if the section is inside one
      if (fromHash) {
        setOpenAccordions(prev => new Set([...prev, id]));
      }
      
      const offset = 100;
      const elementPosition = element.getBoundingClientRect().top;
      const offsetPosition = elementPosition + window.pageYOffset - offset;

      window.scrollTo({
        top: offsetPosition,
        behavior: "smooth"
      });
      setActiveSection(id);
    }
  };

  const tableOfContents: TableOfContentsItem[] = [
    { id: "getting-started", title: "Getting Started", level: 1 },
    { id: "quick-start", title: "Quick Start Guide", level: 2 },
    { id: "workflow-pipeline", title: "8-Stage Workflow Pipeline", level: 2 },
    { id: "dashboard", title: "Dashboard", level: 1 },
    { id: "setup", title: "Setup & Onboarding", level: 1 },
    { id: "onboarding-wizard", title: "Onboarding Wizard", level: 2 },
    { id: "keywords-library", title: "Keywords Library", level: 2 },
    { id: "content-settings", title: "Content Settings", level: 2 },
    { id: "sites", title: "Sites Management", 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: "review-publish", title: "Review & Publish", level: 2 },
    { id: "automation", title: "Automation Pipeline", level: 1 },
    { id: "publisher", title: "Publisher & Calendar", level: 1 },
    { id: "integrations", title: "Integrations", level: 1 },
    { id: "wordpress", title: "WordPress Integration", level: 2 },
    { id: "ai-providers", title: "AI Providers", level: 2 },
    { id: "account", title: "Account & Billing", level: 1 },
    { id: "credits", title: "Credits System", level: 2 },
    { id: "plans-billing", title: "Plans & Billing", level: 2 },
    { id: "usage", title: "Usage & Limits", level: 2 },
    { id: "team", title: "Team Management", level: 2 },
    { id: "faq", title: "Frequently Asked Questions", level: 1 },
  ];

  const faqItems = [
    {
      question: "How do I add keywords to my workflow?",
      answer: "Navigate to Keywords Library in the sidebar. Browse available keywords by industry and sector, use filters to find relevant ones, and click 'Add to Workflow' on individual keywords or use bulk selection to add multiple keywords at once. You can also import keywords via CSV upload."
    },
    {
      question: "What is the difference between Keywords and Clusters?",
      answer: "Keywords are individual search terms. Clusters are groups of related keywords organized together for content planning. Clusters help you create comprehensive content that covers multiple related search queries for better topical authority."
    },
    {
      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 topic 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 complete workflow from keywords to published content?",
      answer: "IGNY8 follows an 8-stage pipeline: 1) Add keywords from Opportunities or CSV, 2) Cluster related keywords, 3) Generate content ideas from clusters, 4) Create tasks from ideas, 5) Generate AI content from tasks, 6) Generate featured and in-article images, 7) Review and approve content, 8) Publish to your site. You can automate most of these steps in the Automation page."
    },
    {
      question: "How do I set up automation?",
      answer: "Go to the Automation page from the main menu. Enable automation for each stage (Clustering, Ideas, Tasks, Content, Images, Publishing) and configure settings like batch sizes and schedules. You can run automation Daily, Weekly, or Monthly, or trigger it manually."
    },
    {
      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 HTML editor, and make your changes. You can also regenerate content if needed."
    },
    {
      question: "How are images generated?",
      answer: "Images are generated using IGNY8 AI (Premium quality or Basic quality) based on your content. Go to Writer → Images to see all generated images. You can generate featured images and in-article images, regenerate them if needed, and they automatically sync to your site when publishing."
    },
    {
      question: "What is the difference between Tasks and Content?",
      answer: "Tasks are content ideas converted into actionable writing assignments with status tracking. Content is the actual generated articles created from tasks. Tasks track what needs to be written and its progress, 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: "How do credits work?",
      answer: "Credits are your currency for AI operations. Text operations (content, clustering, ideas) are token-based - actual tokens used are converted to credits. Image generation uses fixed credits: 5 credits for basic images, 25 credits for premium images. Your plan includes monthly credits that reset each billing period."
    },
    {
      question: "What are the 4 usage limits?",
      answer: "IGNY8 has 4 simplified limits: 1) Content Generation - monthly words/tokens for AI content, 2) Image Generation - monthly images (basic + premium), 3) Storage - total content and media storage, 4) API Calls - monthly API request limit. View these in Account → Usage."
    },
    {
      question: "How do I purchase more credits?",
      answer: "Go to Account → Purchase Credits. Select a credit package and complete the purchase via Stripe, PayPal, or Bank Transfer. Credits are added to your balance immediately and never expire."
    },
    {
      question: "How do I connect WordPress?",
      answer: "Go to Sites, select your site, and click 'Connect WordPress'. Install the IGNY8 WP Bridge plugin on your WordPress site, then enter your WordPress URL and API key. The plugin provides secure REST API access for publishing content and syncing media."
    },
    {
      question: "Why isn't my content syncing to WordPress?",
      answer: "Check: 1) WordPress credentials are correct in Site Settings, 2) IGNY8 WP Bridge plugin is installed and activated, 3) REST API is enabled on your WordPress site, 4) The content status is 'Approved' or 'Published'. You can manually sync individual posts from the Content page."
    },
    {
      question: "Can I schedule content publishing?",
      answer: "Yes! Use the Publisher → Calendar to schedule content for specific dates and times. You can set up scheduled publishing to automatically publish approved content at your preferred times."
    },
    {
      question: "What payment methods are supported?",
      answer: "IGNY8 supports Stripe (credit/debit cards), PayPal, and Bank Transfer (for annual plans). Payment method availability varies by country - the system automatically shows available options based on your location."
    },
    {
      question: "How do team roles work?",
      answer: "IGNY8 has 5 roles: Developer (all accounts), Admin (full account access), Manager (content + billing), Editor (AI content only), Viewer (read-only). Admins can invite team members and assign roles in Account → Settings → Team."
    },
    {
      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: "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 unlinked but not deleted."
    },
    {
      question: "How do I cancel my subscription?",
      answer: "Go to Account → Plans & Billing, and click 'Cancel Plan' on the Current Plan tab. You'll be asked to confirm. Your subscription remains active until the end of the billing period, and remaining credits are preserved for 30 days."
    }
  ];

  return (
    <>
      <PageMeta title="Help Center - IGNY8" description="Comprehensive guides and tutorials to help you create amazing content at scale" />
      <PageHeader
        title="Help Center"
        description="Learn how to use IGNY8 to create and publish amazing SEO content at scale"
        badge={{ icon: <HelpCircleIcon className="w-4 h-4" />, color: 'blue' }}
      />

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* 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" />
            What Do You Want to Learn?
          </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" />
            I'm New - Help Me Get 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 create your first AI-powered content:
                </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">Complete the Setup Wizard</h4>
                      <p className="text-gray-600 dark:text-gray-400 text-sm">
                        If you haven't already, complete the onboarding wizard to set up your first site, configure content settings, and add initial 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">
                      2
                    </div>
                    <div className="flex-1">
                      <h4 className="font-semibold text-gray-900 dark:text-white mb-1">Add Keywords to Your Workflow</h4>
                      <p className="text-gray-600 dark:text-gray-400 text-sm">
                        Go to Setup → Add Keywords to browse our curated keyword database. Select keywords relevant to your industry and add them to your workflow.
                      </p>
                    </div>
                  </div>

                  <div className="flex gap-4">
                    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-purple-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">Cluster Related Keywords</h4>
                      <p className="text-gray-600 dark:text-gray-400 text-sm">
                        Go to Planner → Keywords, select your keywords, and click "Auto Cluster" to group them by topic using AI.
                      </p>
                    </div>
                  </div>

                  <div className="flex gap-4">
                    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-warning-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 Content Ideas</h4>
                      <p className="text-gray-600 dark:text-gray-400 text-sm">
                        Go to Planner → Clusters, select your clusters, and click "Generate Ideas". AI will create content concepts for each cluster.
                      </p>
                    </div>
                  </div>

                  <div className="flex gap-4">
                    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-success-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 Tasks & Generate Content</h4>
                      <p className="text-gray-600 dark:text-gray-400 text-sm">
                        Convert ideas to tasks in Planner → Ideas, then go to Writer → Tasks to generate full AI articles.
                      </p>
                    </div>
                  </div>

                  <div className="flex gap-4">
                    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-purple-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 to generate featured and in-article images for your content using AI.
                      </p>
                    </div>
                  </div>

                  <div className="flex gap-4">
                    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-warning-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">Review & Approve</h4>
                      <p className="text-gray-600 dark:text-gray-400 text-sm">
                        Review your content in Writer → Content, make edits as needed, and approve content ready for publishing.
                      </p>
                    </div>
                  </div>

                  <div className="flex gap-4">
                    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-success-500 text-white flex items-center justify-center font-bold">
                      8
                    </div>
                    <div className="flex-1">
                      <h4 className="font-semibold text-gray-900 dark:text-white mb-1">Publish to WordPress</h4>
                      <p className="text-gray-600 dark:text-gray-400 text-sm">
                        Click "Publish" to send your content to WordPress, or use Publisher → Calendar to schedule publications.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </AccordionItem>

            <AccordionItem title="8-Stage Workflow Pipeline">
              <div className="space-y-4">
                <p className="text-gray-700 dark:text-gray-300">
                  IGNY8 transforms keywords into published content through an 8-stage automated pipeline:
                </p>

                <WorkflowPipeline />

                <div className="bg-brand-50 dark:bg-brand-900/10 p-4 rounded-lg border border-brand-200 dark:border-brand-800">
                  <p className="text-sm text-brand-800 dark:text-brand-300">
                    <strong>Pro Tip:</strong> Enable automation to run this pipeline automatically! Go to the Automation page to configure auto-processing for each stage.
                  </p>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
                  <ModuleCard title="Planner Module" icon={<ListIcon className="size-5 text-brand-500" />} color="border-brand-500">
                    <p>Handles the first 3 stages: Keywords, Clusters, and Ideas. This is where your content strategy begins.</p>
                  </ModuleCard>

                  <ModuleCard title="Writer Module" icon={<FileIcon className="size-5 text-success-500" />} color="border-success-500">
                    <p>Handles stages 4-7: Tasks, Content, Images, and Review. This is where content gets created and polished.</p>
                  </ModuleCard>
                </div>
              </div>
            </AccordionItem>
          </Accordion>
        </div>

        {/* Dashboard Section */}
        <div ref={(el) => (sectionRefs.current["dashboard"] = 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" />
            Dashboard
          </h2>

          <Card className="p-6">
            <p className="text-gray-700 dark:text-gray-300 mb-4">
              Your command center showing workflow progress, key metrics, and quick actions.
            </p>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="border-l-4 border-brand-500 pl-4">
                <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Workflow Pipeline</h4>
                <p className="text-sm text-gray-600 dark:text-gray-400">
                  Visual pipeline showing counts at each stage. Click any stage to navigate directly to that page.
                </p>
              </div>

              <div className="border-l-4 border-purple-500 pl-4">
                <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Key Metrics</h4>
                <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
                  <li>Total keywords in workflow</li>
                  <li>Articles created & published</li>
                  <li>Images generated</li>
                  <li>Completion percentage</li>
                </ul>
              </div>

              <div className="border-l-4 border-success-500 pl-4">
                <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Quick Actions</h4>
                <p className="text-sm text-gray-600 dark:text-gray-400">
                  Common tasks: Add Keywords, Run Automation, View Content Calendar, Access Settings.
                </p>
              </div>

              <div className="border-l-4 border-warning-500 pl-4">
                <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Setup Checklist</h4>
                <p className="text-sm text-gray-600 dark:text-gray-400">
                  Track your setup progress. Complete all items to unlock the full platform experience.
                </p>
              </div>
            </div>
          </Card>
        </div>

        {/* Setup Module Section */}
        <div ref={(el) => (sectionRefs.current["setup"] = 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">
            <CheckCircleIcon className="size-8 text-success-600 dark:text-success-400" />
            Setup & Onboarding
          </h2>

          <Accordion>
            <AccordionItem title="Onboarding Wizard" defaultOpen>
              <div className="space-y-4">
                <p className="text-gray-700 dark:text-gray-300">
                  The setup wizard guides you through initial configuration in 4 steps:
                </p>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="bg-gray-50 dark:bg-gray-800/50 p-4 rounded-lg">
                    <Badge variant="solid" color="blue" size="sm" className="mb-2">Step 1</Badge>
                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Create Your Site</h4>
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      Set up your first site with name, industry, and sectors.
                    </p>
                  </div>

                  <div className="bg-gray-50 dark:bg-gray-800/50 p-4 rounded-lg">
                    <Badge variant="solid" color="green" size="sm" className="mb-2">Step 2</Badge>
                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Content Settings</h4>
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      Configure AI content generation preferences and brand voice.
                    </p>
                  </div>

                  <div className="bg-gray-50 dark:bg-gray-800/50 p-4 rounded-lg">
                    <Badge variant="solid" color="amber" size="sm" className="mb-2">Step 3</Badge>
                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Add Keywords</h4>
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      Import initial keywords from our database or upload via CSV.
                    </p>
                  </div>

                  <div className="bg-gray-50 dark:bg-gray-800/50 p-4 rounded-lg">
                    <Badge variant="solid" color="purple" size="sm" className="mb-2">Step 4</Badge>
                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Connect WordPress</h4>
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      Link your WordPress site for one-click publishing.
                    </p>
                  </div>
                </div>
              </div>
            </AccordionItem>

            <AccordionItem title="Add Keywords" forceOpen={openAccordions.has('importing-keywords')}>
              <div id="importing-keywords" ref={(el) => (sectionRefs.current["importing-keywords"] = el)} className="space-y-4 scroll-mt-24">
                <p className="text-gray-700 dark:text-gray-300">
                  Browse and add keywords from our curated database organized by 100+ industry sectors.
                </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">How to Add Keywords:</h4>
                  <ol className="list-decimal list-inside space-y-2 text-sm text-gray-600 dark:text-gray-400">
                    <li>Navigate to <strong>Setup → Add Keywords</strong></li>
                    <li>Keywords are filtered by your site's industry/sector</li>
                    <li>Use filters: search, country, difficulty, volume range</li>
                    <li>Toggle "Not Yet Added Only" to see available keywords</li>
                    <li>Select keywords using checkboxes (individual or bulk)</li>
                    <li>Click <strong>"Add to Workflow"</strong> button</li>
                    <li>Proceed to Planner to cluster and generate ideas</li>
                  </ol>
                </div>

                <div className="bg-brand-50 dark:bg-brand-900/10 p-4 rounded-lg border border-brand-200 dark:border-brand-800">
                  <p className="text-sm text-brand-800 dark:text-brand-300">
                    <strong>CSV Import:</strong> You can also upload keywords via CSV. Click the "Import CSV" button and upload a file with columns for keyword, volume, and difficulty.
                  </p>
                </div>
              </div>
            </AccordionItem>

            <AccordionItem title="Content Settings" forceOpen={openAccordions.has('content-settings')}>
              <div id="content-settings" ref={(el) => (sectionRefs.current["content-settings"] = el)} className="space-y-4 scroll-mt-24">
                <p className="text-gray-700 dark:text-gray-300">
                  Configure how AI generates and publishes your content.
                </p>

                <div className="space-y-3">
                  <div className="border-l-4 border-brand-500 pl-4">
                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Content Generation Tab</h4>
                    <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
                      <li><strong>Default Tone:</strong> Professional, Casual, Friendly, Authoritative</li>
                      <li><strong>Default Length:</strong> Short (500-1000), Medium (1000-2000), Long (2000-5000+)</li>
                      <li><strong>Content Type:</strong> Article, Guide, Tutorial, Listicle</li>
                      <li><strong>Custom Prompts:</strong> Additional AI instructions for your brand voice</li>
                    </ul>
                  </div>

                  <div className="border-l-4 border-success-500 pl-4">
                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Publishing Tab</h4>
                    <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
                      <li><strong>Auto-Publish:</strong> Automatically publish approved content</li>
                      <li><strong>Auto-Sync:</strong> Keep your site in sync with changes</li>
                      <li><strong>Default Post Status:</strong> Draft, Pending, or Publish</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">Image Settings Tab</h4>
                    <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
                      <li><strong>Image Quality:</strong> Basic or Premium (powered by IGNY8 AI)</li>
                      <li><strong>Image Style:</strong> Photorealistic, Illustrated, Abstract</li>
                      <li><strong>Default Size:</strong> 1024x1024, 1792x1024, 1024x1792</li>
                    </ul>
                  </div>
                </div>
              </div>
            </AccordionItem>

            <AccordionItem title="Sites Management">
              <div className="space-y-4">
                <p className="text-gray-700 dark:text-gray-300">
                  Manage your websites and their integration settings. Each site can have multiple sectors for content organization.
                </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">Setting Up a Site:</h4>
                  <ol className="list-decimal list-inside space-y-2 text-sm text-gray-600 dark:text-gray-400">
                    <li>Go to <strong>Sites</strong> in the main menu</li>
                    <li>Click <strong>"Add Site"</strong> button</li>
                    <li>Enter site name and domain</li>
                    <li>Select industry from 100+ categories</li>
                    <li>Add sectors for content organization</li>
                    <li>Configure site integration (WordPress or other platforms)</li>
                    <li>Save and start adding keywords</li>
                  </ol>
                </div>

                <div className="space-y-3 mt-4">
                  <div className="flex items-start gap-3">
                    <CheckCircleIcon className="size-5 text-success-500 mt-0.5 flex-shrink-0" />
                    <div>
                      <h4 className="font-semibold text-gray-900 dark:text-white">Site Dashboard</h4>
                      <p className="text-sm text-gray-600 dark:text-gray-400">
                        View setup progress, content stats, and quick actions for each site.
                      </p>
                    </div>
                  </div>

                  <div className="flex items-start gap-3">
                    <CheckCircleIcon className="size-5 text-success-500 mt-0.5 flex-shrink-0" />
                    <div>
                      <h4 className="font-semibold text-gray-900 dark:text-white">Multi-Site Support</h4>
                      <p className="text-sm text-gray-600 dark:text-gray-400">
                        Manage multiple sites from one account. Use the site selector to switch between sites.
                      </p>
                    </div>
                  </div>
                </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-brand-600 dark:text-brand-400" />
            Planner Module
          </h2>

          <Accordion>
            <AccordionItem title="Keywords Management" defaultOpen forceOpen={openAccordions.has('managing-keywords')}>
              <div id="managing-keywords" ref={(el) => (sectionRefs.current["managing-keywords"] = el)} className="space-y-4 scroll-mt-24">
                <p className="text-gray-700 dark:text-gray-300">
                  Keywords are the foundation of your content strategy. Manage, filter, and organize your keywords here.
                </p>

                <div className="space-y-3">
                  <div className="flex items-start gap-3">
                    <CheckCircleIcon className="size-5 text-success-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 shows: Search Volume, Difficulty Score (0-100), Search Intent (Informational, Commercial, Transactional, Navigational), and Cluster status.
                      </p>
                    </div>
                  </div>

                  <div className="flex items-start gap-3">
                    <CheckCircleIcon className="size-5 text-success-500 mt-0.5 flex-shrink-0" />
                    <div>
                      <h4 className="font-semibold text-gray-900 dark:text-white">Filtering & Sorting</h4>
                      <p className="text-sm text-gray-600 dark:text-gray-400">
                        Filter by intent, difficulty range, volume range, cluster status. Sort by any column. Use column visibility to customize your view.
                      </p>
                    </div>
                  </div>

                  <div className="flex items-start gap-3">
                    <CheckCircleIcon className="size-5 text-success-500 mt-0.5 flex-shrink-0" />
                    <div>
                      <h4 className="font-semibold text-gray-900 dark:text-white">Bulk Actions</h4>
                      <p className="text-sm text-gray-600 dark:text-gray-400">
                        Select multiple keywords to: Auto-Cluster, Assign to Cluster, Export to CSV, or Delete.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </AccordionItem>

            <AccordionItem title="Keyword Clusters" forceOpen={openAccordions.has('keyword-clustering')}>
              <div id="keyword-clustering" ref={(el) => (sectionRefs.current["keyword-clustering"] = el)} className="space-y-4 scroll-mt-24">
                <p className="text-gray-700 dark:text-gray-300">
                  Clusters group related keywords for comprehensive content planning and topical authority building.
                </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">How Clustering Works:</h4>
                  <ol className="list-decimal list-inside space-y-2 text-sm text-gray-600 dark:text-gray-400">
                    <li>Select keywords in the Keywords page</li>
                    <li>Click <strong>"Auto Cluster"</strong></li>
                    <li>AI analyzes semantic similarity and search intent</li>
                    <li>Keywords are grouped into topic clusters</li>
                    <li>Each cluster gets a name and description</li>
                    <li>Generate content ideas from clusters</li>
                  </ol>
                </div>

                <div className="space-y-3 mt-4">
                  <div className="border-l-4 border-brand-500 pl-4">
                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Cluster Metrics</h4>
                    <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
                      <li>Total search volume (sum of all keywords)</li>
                      <li>Keyword count per cluster</li>
                      <li>Ideas generated from cluster</li>
                      <li>Content pieces created</li>
                    </ul>
                  </div>
                </div>
              </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 article concepts based on your keyword clusters.
                </p>

                <div className="space-y-3">
                  <div className="border-l-4 border-brand-500 pl-4">
                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Idea Components</h4>
                    <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
                      <li><strong>Title:</strong> Suggested article headline</li>
                      <li><strong>Structure:</strong> How-To, List, Guide, Comparison, etc.</li>
                      <li><strong>Content Type:</strong> Blog Post, Article, Tutorial</li>
                      <li><strong>Target Keyword:</strong> Primary keyword to target</li>
                      <li><strong>Estimated Word Count:</strong> Suggested article length</li>
                    </ul>
                  </div>

                  <div className="border-l-4 border-success-500 pl-4">
                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Idea to Task</h4>
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      Select ideas and click "Convert to Tasks" to create writing assignments. Tasks appear in Writer → Tasks for content generation.
                    </p>
                  </div>
                </div>
              </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-success-600 dark:text-success-400" />
            Writer Module
          </h2>

          <Accordion>
            <AccordionItem title="Tasks Management" defaultOpen forceOpen={openAccordions.has('editing-content')}>
              <div id="editing-content" ref={(el) => (sectionRefs.current["editing-content"] = el)} className="space-y-4 scroll-mt-24">
                <p className="text-gray-700 dark:text-gray-300">
                  Tasks are content ideas converted into actionable writing assignments with status tracking.
                </p>

                <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                  <div className="bg-gray-100 dark:bg-gray-800 p-3 rounded-lg text-center">
                    <div className="font-bold text-gray-900 dark:text-white">Pending</div>
                    <div className="text-sm text-gray-500">Awaiting content generation</div>
                  </div>
                  <div className="bg-brand-100 dark:bg-brand-900/30 p-3 rounded-lg text-center">
                    <div className="font-bold text-brand-700 dark:text-brand-300">In Progress</div>
                    <div className="text-sm text-brand-600 dark:text-brand-400">Content being generated</div>
                  </div>
                  <div className="bg-success-100 dark:bg-success-900/30 p-3 rounded-lg text-center">
                    <div className="font-bold text-success-700 dark:text-success-300">Completed</div>
                    <div className="text-sm text-success-600 dark:text-success-400">Content created</div>
                  </div>
                </div>

                <div className="bg-brand-50 dark:bg-brand-900/10 p-4 rounded-lg border border-brand-200 dark:border-brand-800">
                  <p className="text-sm text-brand-800 dark:text-brand-300">
                    <strong>Generate Content:</strong> Select pending tasks and click "Generate Content". AI will create full articles based on each task's requirements.
                  </p>
                </div>
              </div>
            </AccordionItem>

            <AccordionItem title="Content Generation" forceOpen={openAccordions.has('content-generation')}>
              <div id="content-generation" ref={(el) => (sectionRefs.current["content-generation"] = el)} className="space-y-4 scroll-mt-24">
                <p className="text-gray-700 dark:text-gray-300">
                  Generate, edit, and manage your AI-created 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 with headings, paragraphs, and SEO metadata.
                      </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 any content to open the HTML editor. Edit text, formatting, add links, and adjust SEO metadata (title, description, slug).
                      </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">Approve</h4>
                      <p className="text-sm text-gray-600 dark:text-gray-400">
                        Change status to "Approved" when content is ready for publishing. Approved content can be published to your site.
                      </p>
                    </div>
                  </div>
                </div>

                <div className="border-l-4 border-purple-500 pl-4 mt-4">
                  <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Content Statuses</h4>
                  <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
                    <li><strong>Draft:</strong> Initial AI-generated content</li>
                    <li><strong>In Review:</strong> Being edited/reviewed</li>
                    <li><strong>Approved:</strong> Ready for publishing</li>
                    <li><strong>Published:</strong> Live on your site</li>
                  </ul>
                </div>
              </div>
            </AccordionItem>

            <AccordionItem title="Image Generation" forceOpen={openAccordions.has('image-generation') || openAccordions.has('image-settings') || openAccordions.has('managing-images')}>
              <div id="image-generation" ref={(el) => (sectionRefs.current["image-generation"] = el)} className="space-y-4 scroll-mt-24">
                <div id="image-settings" ref={(el) => (sectionRefs.current["image-settings"] = el)}></div>
                <div id="managing-images" ref={(el) => (sectionRefs.current["managing-images"] = el)}></div>
                <p className="text-gray-700 dark:text-gray-300">
                  Generate AI images for your content using IGNY8 AI (Premium or Basic quality).
                </p>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="border-l-4 border-brand-500 pl-4">
                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Featured Images</h4>
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      Main image for each article. Automatically used as the featured image when publishing to your site.
                    </p>
                  </div>

                  <div className="border-l-4 border-purple-500 pl-4">
                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">In-Article Images</h4>
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      Additional images placed throughout the content. Enhances reader engagement and SEO.
                    </p>
                  </div>
                </div>

                <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">Image Generation Options:</h4>
                  <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
                    <li><strong>Basic (5 credits):</strong> Fast generation, good quality</li>
                    <li><strong>Premium (25 credits):</strong> Highest quality</li>
                    <li><strong>Sizes:</strong> 1024x1024, 1792x1024, 1024x1792</li>
                    <li><strong>Styles:</strong> Photorealistic, Illustrated, Abstract</li>
                  </ul>
                </div>
              </div>
            </AccordionItem>

            <AccordionItem title="Review & Publish" forceOpen={openAccordions.has('content-workflow')}>
              <div id="content-workflow" ref={(el) => (sectionRefs.current["content-workflow"] = el)} className="space-y-4 scroll-mt-24">
                <p className="text-gray-700 dark:text-gray-300">
                  Final review stage before publishing to your site.
                </p>

                <div className="space-y-3">
                  <div className="flex items-start gap-3">
                    <CheckCircleIcon className="size-5 text-success-500 mt-0.5 flex-shrink-0" />
                    <div>
                      <h4 className="font-semibold text-gray-900 dark:text-white">Review Checklist</h4>
                      <ul className="text-sm text-gray-600 dark:text-gray-400 list-disc list-inside">
                        <li>Content is accurate and well-written</li>
                        <li>SEO metadata is complete (title, description)</li>
                        <li>Featured image is set</li>
                        <li>Categories and tags are assigned</li>
                        <li>Internal links are added</li>
                      </ul>
                    </div>
                  </div>

                  <div className="flex items-start gap-3">
                    <CheckCircleIcon className="size-5 text-success-500 mt-0.5 flex-shrink-0" />
                    <div>
                      <h4 className="font-semibold text-gray-900 dark:text-white">Publishing Options</h4>
                      <ul className="text-sm text-gray-600 dark:text-gray-400 list-disc list-inside">
                        <li><strong>Publish Now:</strong> Immediately send to WordPress</li>
                        <li><strong>Schedule:</strong> Set future publish date/time</li>
                        <li><strong>Draft:</strong> Send as draft to WordPress</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </AccordionItem>
          </Accordion>
        </div>

        {/* Automation Section */}
        <div ref={(el) => (sectionRefs.current["automation"] = el)} className="mb-12 scroll-mt-24">
          <div id="automation-setup" ref={(el) => (sectionRefs.current["automation-setup"] = el)}></div>
          <div id="auto-publishing" ref={(el) => (sectionRefs.current["auto-publishing"] = el)}></div>
          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-3">
            <BoltIcon className="size-8 text-warning-600 dark:text-warning-400" />
            Automation Pipeline
          </h2>

          <Card className="p-6">
            <p className="text-gray-700 dark:text-gray-300 mb-4">
              Automate your entire content workflow with the 7-stage automation pipeline. Each stage can be configured independently.
            </p>

            <AutomationPipelineVisual />

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
              <div className="border-l-4 border-brand-500 pl-4">
                <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Schedule Options</h4>
                <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
                  <li><strong>Daily:</strong> Run every day at set time</li>
                  <li><strong>Weekly:</strong> Run on specific days</li>
                  <li><strong>Monthly:</strong> Run on specific dates</li>
                  <li><strong>Manual:</strong> Trigger on demand</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">Batch Configuration</h4>
                <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
                  <li>Set items per batch (5, 10, 25, 50)</li>
                  <li>Configure credit limits per run</li>
                  <li>Enable/disable individual stages</li>
                  <li>Set quality thresholds</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>Credit Estimation:</strong> Before running automation, the system shows estimated credit usage. You can review and adjust before confirming.
              </p>
            </div>
          </Card>
        </div>

        {/* Publisher Section */}
        <div ref={(el) => (sectionRefs.current["publisher"] = 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-purple-600 dark:text-purple-400" />
            Publisher & Calendar
          </h2>

          <Card className="p-6">
            <p className="text-gray-700 dark:text-gray-300 mb-4">
              Schedule and manage content publication with the visual content calendar.
            </p>

            <div className="space-y-4">
              <div className="border-l-4 border-brand-500 pl-4">
                <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Content Calendar</h4>
                <p className="text-sm text-gray-600 dark:text-gray-400">
                  Visual calendar showing scheduled and published content. Drag and drop to reschedule. Click to view content details.
                </p>
              </div>

              <div className="border-l-4 border-success-500 pl-4">
                <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Scheduling</h4>
                <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
                  <li>Set specific publish date and time</li>
                  <li>Configure auto-publish for approved content</li>
                  <li>Bulk schedule multiple pieces</li>
                  <li>View upcoming publications</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">Publishing History</h4>
                <p className="text-sm text-gray-600 dark:text-gray-400">
                  Track all published content with timestamps, post IDs, and sync status.
                </p>
              </div>
            </div>
          </Card>
        </div>

        {/* Integrations Section */}
        <div ref={(el) => (sectionRefs.current["integrations"] = 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-brand-600 dark:text-brand-400" />
            Integrations
          </h2>

          <Accordion>
            <AccordionItem title="WordPress Integration" defaultOpen forceOpen={openAccordions.has('publishing-wordpress') || openAccordions.has('wordpress-integration')}>
              <div id="publishing-wordpress" ref={(el) => (sectionRefs.current["publishing-wordpress"] = el)} className="space-y-4 scroll-mt-24">
                <div id="wordpress-integration" ref={(el) => (sectionRefs.current["wordpress-integration"] = el)}></div>
                <p className="text-gray-700 dark:text-gray-300">
                  Connect your WordPress site for seamless content publishing.
                </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">Setup Steps:</h4>
                  <ol className="list-decimal list-inside space-y-2 text-sm text-gray-600 dark:text-gray-400">
                    <li>Install the <strong>IGNY8 WP Bridge</strong> plugin on your WordPress site</li>
                    <li>Activate the plugin and generate an API key</li>
                    <li>In IGNY8, go to Sites → Your Site → WordPress Settings</li>
                    <li>Enter your WordPress URL and API key</li>
                    <li>Click "Test Connection" to verify</li>
                    <li>Save settings</li>
                  </ol>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                  <div className="border-l-4 border-success-500 pl-4">
                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">What Syncs</h4>
                    <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
                      <li>Content body (HTML)</li>
                      <li>Featured images</li>
                      <li>In-article images</li>
                      <li>SEO metadata</li>
                      <li>Categories & tags</li>
                      <li>Publication status</li>
                    </ul>
                  </div>

                  <div className="border-l-4 border-brand-500 pl-4">
                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Bidirectional Sync</h4>
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      Changes made on your WordPress site (post edits, status changes) sync back to IGNY8. Keep content in sync across platforms.
                    </p>
                  </div>
                </div>
              </div>
            </AccordionItem>

            <AccordionItem title="AI Providers" forceOpen={openAccordions.has('prompt-management') || openAccordions.has('author-profiles')}>
              <div id="prompt-management" ref={(el) => (sectionRefs.current["prompt-management"] = el)} className="space-y-4 scroll-mt-24">
                <div id="author-profiles" ref={(el) => (sectionRefs.current["author-profiles"] = el)}></div>
                <p className="text-gray-700 dark:text-gray-300">
                  IGNY8 integrates with multiple AI providers for content and image generation.
                </p>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="border-l-4 border-brand-500 pl-4">
                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Content Generation</h4>
                    <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
                      <li>Powered by IGNY8 AI</li>
                      <li>Advanced language models for high-quality content</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">Image Generation</h4>
                    <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
                      <li><strong>Premium Quality:</strong> Highest quality images</li>
                      <li><strong>Basic Quality:</strong> Fast, cost-effective images</li>
                      <li><strong>Image Editing:</strong> Background removal & editing</li>
                    </ul>
                  </div>
                </div>
              </div>
            </AccordionItem>
          </Accordion>
        </div>

        {/* Account & Billing Section */}
        <div ref={(el) => (sectionRefs.current["account"] = 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" />
            Account & Billing
          </h2>

          <Accordion>
            <AccordionItem title="Credits System" defaultOpen forceOpen={openAccordions.has('credit-system') || openAccordions.has('purchasing-credits') || openAccordions.has('usage-tracking')}>
              <div id="credit-system" ref={(el) => (sectionRefs.current["credit-system"] = el)} className="space-y-4 scroll-mt-24">
                <div id="purchasing-credits" ref={(el) => (sectionRefs.current["purchasing-credits"] = el)}></div>
                <div id="usage-tracking" ref={(el) => (sectionRefs.current["usage-tracking"] = el)}></div>
                <p className="text-gray-700 dark:text-gray-300">
                  Credits are your currency for AI operations. Understand how credits work:
                </p>

                <CreditSystemVisual />

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                  <div className="border-l-4 border-brand-500 pl-4">
                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Token-Based Operations</h4>
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      Content generation, clustering, and idea generation use tokens. Actual tokens consumed are converted to credits at your plan's rate.
                    </p>
                  </div>

                  <div className="border-l-4 border-purple-500 pl-4">
                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Fixed-Cost Operations</h4>
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      Image generation uses fixed credits: 5 for Basic quality, 25 for Premium quality.
                    </p>
                  </div>
                </div>

                <div className="bg-success-50 dark:bg-success-900/10 p-4 rounded-lg border border-success-200 dark:border-success-800">
                  <p className="text-sm text-success-800 dark:text-success-300">
                    <strong>Credit Tracking:</strong> View real-time credit usage in Account → Usage. Credits reset monthly on your billing date.
                  </p>
                </div>
              </div>
            </AccordionItem>

            <AccordionItem title="Plans & Billing">
              <div className="space-y-4">
                <p className="text-gray-700 dark:text-gray-300">
                  Manage your subscription, view invoices, and track payments.
                </p>

                <div className="space-y-3">
                  <div className="border-l-4 border-brand-500 pl-4">
                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Current Plan</h4>
                    <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
                      <li>View plan name and features</li>
                      <li>Check credit balance and usage</li>
                      <li>See renewal date</li>
                      <li>Upgrade or cancel subscription</li>
                    </ul>
                  </div>

                  <div className="border-l-4 border-success-500 pl-4">
                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Payment Methods</h4>
                    <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
                      <li><strong>Stripe:</strong> Credit/debit cards (Visa, MasterCard, Amex)</li>
                      <li><strong>PayPal:</strong> PayPal account or cards</li>
                      <li><strong>Bank Transfer:</strong> Annual plans only</li>
                    </ul>
                  </div>

                  <div className="border-l-4 border-warning-500 pl-4">
                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Invoices</h4>
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      Download PDF invoices from Account → Plans & Billing → History. Invoices include company details and tax information.
                    </p>
                  </div>
                </div>
              </div>
            </AccordionItem>

            <AccordionItem title="Usage & Limits">
              <div className="space-y-4">
                <p className="text-gray-700 dark:text-gray-300">
                  IGNY8 has 4 simplified usage limits. Track your usage in Account → Usage.
                </p>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="bg-brand-50 dark:bg-brand-900/30 p-4 rounded-lg">
                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Content Generation</h4>
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      Monthly words/tokens for AI content. Resets each billing cycle.
                    </p>
                  </div>

                  <div className="bg-purple-50 dark:bg-purple-900/30 p-4 rounded-lg">
                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Image Generation</h4>
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      Monthly images (basic + premium). Resets each billing cycle.
                    </p>
                  </div>

                  <div className="bg-success-50 dark:bg-success-900/30 p-4 rounded-lg">
                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Storage</h4>
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      Total content and media storage. Does not reset.
                    </p>
                  </div>

                  <div className="bg-warning-50 dark:bg-warning-900/30 p-4 rounded-lg">
                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">API Calls</h4>
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      Monthly API requests. Resets each billing cycle.
                    </p>
                  </div>
                </div>

                <div className="bg-warning-50 dark:bg-warning-900/10 p-4 rounded-lg border border-warning-200 dark:border-warning-800 mt-4">
                  <p className="text-sm text-warning-800 dark:text-warning-300">
                    <strong>Usage Alerts:</strong> You'll receive automatic notifications at 80%, 90%, and 100% of your limits.
                  </p>
                </div>
              </div>
            </AccordionItem>

            <AccordionItem title="Team Management" forceOpen={openAccordions.has('team-collaboration') || openAccordions.has('user-roles')}>
              <div id="team-collaboration" ref={(el) => (sectionRefs.current["team-collaboration"] = el)} className="space-y-4 scroll-mt-24">
                <div id="user-roles" ref={(el) => (sectionRefs.current["user-roles"] = el)}></div>
                <p className="text-gray-700 dark:text-gray-300">
                  Invite team members and manage roles in Account → Settings → Team.
                </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">User Roles:</h4>
                  <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-400">
                    <li><strong>Developer:</strong> Full access across all accounts (internal only)</li>
                    <li><strong>Admin:</strong> Full account access, billing, team management</li>
                    <li><strong>Manager:</strong> Content + billing, no team management</li>
                    <li><strong>Editor:</strong> Content creation only, no billing access</li>
                    <li><strong>Viewer:</strong> Read-only access to content</li>
                  </ul>
                </div>
              </div>
            </AccordionItem>
          </Accordion>
        </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">
            <HelpCircleIcon 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">
              <a
                href="mailto:support@igny8.com?subject=Support Request"
                className="px-6 py-3 bg-white text-brand-600 rounded-lg font-semibold hover:bg-gray-100 transition-colors inline-block"
              >
                Contact Support
              </a>
              <a
                href="mailto:feedback@igny8.com?subject=Feature Request"
                className="px-6 py-3 bg-white/10 text-white rounded-lg font-semibold hover:bg-white/20 transition-colors border border-white/20 inline-block"
              >
                Feature Request
              </a>
            </div>
          </div>
        </Card>
      </div>
    </>
  );
}