import { FaBook, FaCircleQuestion, FaKeyboard } from 'react-icons/fa6'
import { PageHeader, Card } from '../components/ui'

export default function DocsPage() {
  const sections = [
    { icon: FaBook, title: 'Erste Schritte', content: 'Tickets, Rechnungen und Dokumente in der Plattform verwalten.' },
    { icon: FaCircleQuestion, title: 'FAQ', content: 'Haeufige Fragen zum System.' },
    { icon: FaKeyboard, title: 'Tipps', content: 'Schneller arbeiten mit der Plattform.' },
  ]

  return (
    <div className="page">
      <PageHeader title="Dokumentation" subtitle="Hilfe und Anleitungen" />
      <div className="kpi-grid">
        {sections.map(({ icon: Icon, title, content }) => (
          <Card key={title}>
            <div className="flex items-center gap-3" style={{ marginBottom: 8 }}>
              <Icon size={22} style={{ color: 'var(--accent)' }} />
              <strong>{title}</strong>
            </div>
            <p className="muted" style={{ margin: 0 }}>{content}</p>
          </Card>
        ))}
      </div>
    </div>
  )
}
