Article Title setData('title', e.target.value)} className="w-full rounded-2xl border border-border bg-[#FAFAF8] px-5 py-3 text-lg font-medium outline-none focus:ring-2 focus:ring-primary/20 transition-all" placeholder="e.g. 5 Systems Every E-commerce Store Needs in 2026" /> {errors.title &&

{errors.title}

}

Short Excerpt

setData('excerpt', e.target.value)}
                                rows={2}
                                className="w-full rounded-2xl border border-border bg-[#FAFAF8] px-5 py-4 outline-none focus:ring-2 focus:ring-primary/20 transition-all"
                                placeholder="A 1-2 sentence hook for the grid view..."
                            />
                            {errors.excerpt && <p className="text-red-500 text-xs mt-1">{errors.excerpt}</p>}
                        </div>

<div>
                            <label className="block text-sm font-semibold mb-4">Content</label>
                            <RichTextEditor 
                                value={data.content || ''} 
                                onChange={(val) => setData('content', val)}
                                placeholder="Start writing your insight..."
                            />
                            {errors.content && <p className="text-red-500 text-xs mt-1">{errors.content}</p>}
                        </div>
                    </div>
                </div>

<div className="lg:col-span-4 space-y-6">
                    <div className="rounded-3xl border border-border bg-white p-8 shadow-sm space-y-6">
                        <div>
                            <label className="block text-sm font-semibold mb-2">Featured Image</label>
                            <div 
                                onClick={() => setPickerOpen(true)}
                                className="relative cursor-pointer group aspect-[16/9] rounded-2xl border-2 border-dashed border-border flex flex-col items-center justify-center p-4 transition-all hover:border-primary/50 hover:bg-primary/5"
                            >
                                {selectedMedia ? (
                                    <img src={selectedMedia.url} alt="Selected" className="w-full h-full object-cover rounded-xl shadow-sm" />
                                ) : (
                                    <div className="text-center">
                                        <ImageIcon className="h-8 w-8 text-muted-foreground mx-auto mb-2" />
                                        <p className="text-[11px] text-muted-foreground">Select from Library</p>
                                    </div>
                                )}
                            </div>
                        </div>

<div>
                            <label className="block text-sm font-semibold mb-2 text-[#8C92AC] uppercase tracking-wider text-[10px]">Category</label>
                            <Select 
                                value={data.category_id || ""} 
                                onValueChange={(val) => setData('category_id', val)}
                            >
                                <SelectTrigger className="w-full h-12 rounded-2xl border-border bg-[#FAFAF8] px-5 text-sm font-medium focus:ring-2 focus:ring-primary/20 transition-all">
                                    <SelectValue placeholder="Select a category" />
                                </SelectTrigger>
                                <SelectContent className="bg-white border-border rounded-xl shadow-xl">
                                    {categories.map((cat) => (
                                        <SelectItem key={cat.id} value={cat.id.toString()}>{cat.name}</SelectItem>
                                    ))}
                                    {categories.length === 0 && (
                                        <div className="p-2 text-xs text-muted-foreground italic text-center">No categories found</div>
                                    )}
                                </SelectContent>
                            </Select>
                            {errors.category_id && <p className="text-red-500 text-xs mt-1">{errors.category_id}</p>}
                        </div>

<div className="flex items-center justify-between p-4 bg-[#FAFAF8] rounded-2xl border border-[#F0EDE8]">
                            <label className="text-sm font-medium text-ink">Publish Article</label>
                            <button
                                type="button"
                                onClick={() => setData('is_published', !data.is_published)}
                                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
                                    data.is_published ? 'bg-emerald-500' : 'bg-gray-300'
                                }`}
                            >
                                <span
                                    className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                                        data.is_published ? 'translate-x-6' : 'translate-x-1'
                                    }`}
                                />
                            </button>
                        </div>

<button
                            type="submit"
                            disabled={processing}
                            className="w-full inline-flex h-12 items-center justify-center gap-2 rounded-full bg-ink text-white text-sm font-bold hover:bg-primary transition-all shadow-lg disabled:opacity-50"
                        >
                            <Save className="h-4 w-4" />
                            {isEditing ? 'Update Article' : 'Publish Insight'}
                        </button>
                    </div>
                </div>
            </form>

<MediaPicker 
                open={pickerOpen}
                onClose={() => setPickerOpen(false)}
                onSelect={(media) => {
                    setSelectedMedia(media);
                    setData('media_id', media.id);
                }}
                title="Select Featured Image"
            />
        </AdminLayout>
    );
}

{isEditing ? 'Edit Article' : 'Write New Article'}