{showNewForm && (

Question * newForm.setData('question', e.target.value)} placeholder="How does it work?" /> {newForm.errors.question && (

{newForm.errors.question}

)}

Answer *

newForm.setData('answer', e.target.value)}
                                        placeholder="Here's how it works..."
                                        rows={4}
                                    />
                                    {newForm.errors.answer && (
                                        <p className="text-sm text-red-600">{newForm.errors.answer}</p>
                                    )}
                                </div>
                                <div className="space-y-2">
                                    <Label htmlFor="icon">Icon</Label>
                                    <Input
                                        id="icon"
                                        value={newForm.data.icon}
                                        onChange={(e) => newForm.setData('icon', e.target.value)}
                                        placeholder="❓"
                                    />
                                </div>
                                <div className="flex justify-end gap-2">
                                    <Button type="button" variant="outline" onClick={() => setShowNewForm(false)}>
                                        Cancel
                                    </Button>
                                    <Button type="submit" disabled={newForm.processing}>
                                        {newForm.processing ? 'Creating...' : 'Create FAQ'}
                                    </Button>
                                </div>
                            </form>
                        </CardContent>
                    </Card>
                )}

<Card>
                    <CardContent className="pt-6">
                        <Table>
                            <TableHeader>
                                <TableRow>
                                    <TableHead>Icon</TableHead>
                                    <TableHead>Question</TableHead>
                                    <TableHead>Answer</TableHead>
                                    <TableHead>Status</TableHead>
                                    <TableHead className="text-right">Actions</TableHead>
                                </TableRow>
                            </TableHeader>
                            <TableBody>
                                {faqs.length === 0 ? (
                                    <TableRow>
                                        <TableCell colSpan={5} className="text-center text-muted-foreground">
                                            No FAQs yet. Click "Add FAQ" to create one.
                                        </TableCell>
                                    </TableRow>
                                ) : (
                                    faqs.map((faq) => (
                                        <TableRow key={faq.id}>
                                            <TableCell className="text-2xl">{faq.icon || '❓'}</TableCell>
                                            <TableCell className="font-semibold max-w-xs truncate">{faq.question}</TableCell>
                                            <TableCell className="max-w-md truncate">{faq.answer}</TableCell>
                                            <TableCell>
                                                <Badge variant={faq.is_active ? 'default' : 'secondary'}>
                                                    {faq.is_active ? 'Active' : 'Inactive'}
                                                </Badge>
                                            </TableCell>
                                            <TableCell className="text-right">
                                                <Button
                                                    variant="ghost"
                                                    size="sm"
                                                    onClick={() => handleDelete(faq.id)}
                                                >
                                                    <Trash2 className="h-4 w-4" />
                                                </Button>
                                            </TableCell>
                                        </TableRow>
                                    ))
                                )}
                            </TableBody>
                        </Table>
                    </CardContent>
                </Card>
            </div>
        </AppLayout>
    );
}