'use client'
import { AppShell } from '@/components/shell/AppShell'
import { Breadcrumbs } from '@/components/shell/Breadcrumbs'
import { PageHeader } from '@/components/shell/PageHeader'
import { Card } from '@/components/ui/Card'
import { HelpCircle, BookOpen, MessageSquare, PlayCircle } from 'lucide-react'

export default function Page() {
  const items = [
    { icon: BookOpen, t: 'Documentation', d: 'Guides d\'installation et d\'utilisation' },
    { icon: PlayCircle, t: 'Tutoriels vidéo', d: 'Premiers pas en 5 minutes' },
    { icon: MessageSquare, t: 'Support', d: 'Contacter l\'équipe Structura' },
    { icon: HelpCircle, t: 'FAQ', d: 'Questions fréquentes' },
  ]
  return (
    <AppShell topbarContent={<Breadcrumbs items={[{ label: 'Aide' }]} />}>
      <PageHeader title="Aide" description="Trouver une réponse à votre question" />
      <div className="grid grid-cols-2 gap-4">
        {items.map((s) => {
          const Icon = s.icon
          return (
            <Card key={s.t} padding="lg" interactive>
              <div className="flex items-start gap-3">
                <span className="p-2 rounded-md bg-accent-subtle border border-accent-border">
                  <Icon size={16} strokeWidth={1.5} className="text-accent" />
                </span>
                <div>
                  <h3 className="text-h3 text-text-primary mb-1">{s.t}</h3>
                  <p className="text-caption text-text-secondary">{s.d}</p>
                </div>
              </div>
            </Card>
          )
        })}
      </div>
    </AppShell>
  )
}