'use client'

import { getModuleByHref, metaModules } from '@/lib/navigation'
import { PagePurpose } from '@/components/common/PagePurpose'
import { Compass, Construction } from 'lucide-react'

export default function OnboardingPage() {
  const module = metaModules.find(m => m.id === 'onboarding')

  return (
    <div className="space-y-6">
      {module && (
        <PagePurpose
          title={module.name}
          purpose={module.purpose}
          audience={module.audience}
          collapsible={true}
          defaultCollapsed={true}
        />
      )}

      <div className="bg-white border border-slate-200 rounded-xl p-8 text-center">
        <div className="flex justify-center mb-4">
          <div className="p-4 bg-slate-100 rounded-full">
            <Compass className="w-12 h-12 text-slate-400" />
          </div>
        </div>
        <h2 className="text-xl font-semibold text-slate-800 mb-2">Onboarding</h2>
        <p className="text-slate-600 mb-4">
          Gefuehrte Tutorials und Lern-Wizards fuer neue Benutzer.
        </p>
        <div className="inline-flex items-center gap-2 px-4 py-2 bg-amber-50 border border-amber-200 rounded-lg text-amber-700">
          <Construction className="w-4 h-4" />
          <span className="text-sm font-medium">In Entwicklung</span>
        </div>
      </div>
    </div>
  )
}