import { BookOpen } from 'lucide-react'
import { PageMeta } from '@/components/common/PageMeta'
import { categories, guides } from '@/data/guides'
import { GuideCard } from '@/components/guides/GuideCard'

export default function GuidesHubPage() {
  return (
    <div className="overflow-y-auto h-full">
    <PageMeta title="Guides" />
    <div className="p-6 max-w-5xl mx-auto">
      {/* Header */}
      <div className="mb-8">
        <div className="flex items-center gap-3 mb-2">
          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-accent-dim">
            <BookOpen size={20} className="text-primary" />
          </div>
          <h1 className="text-2xl font-heading font-bold text-foreground">User Guides</h1>
        </div>
        <p className="text-sm text-muted-foreground ml-[52px]">
          Learn how to use ResolutionFlow with step-by-step instructions for every feature.
        </p>
      </div>

      {/* Category sections */}
      <div className="space-y-10">
        {categories.map(category => {
          const categoryGuides = guides.filter(g => g.category === category.id)
          if (categoryGuides.length === 0) return null
          return (
            <section key={category.id}>
              <div className="mb-3">
                <h2 className="text-base font-heading font-semibold text-foreground">
                  {category.label}
                </h2>
                <p className="text-xs text-muted-foreground mt-0.5">{category.description}</p>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {categoryGuides.map(guide => (
                  <GuideCard key={guide.slug} guide={guide} />
                ))}
              </div>
            </section>
          )
        })}
      </div>
    </div>
    </div>
  )
}