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>

{/* SEO Settings Panel */}
                    <div className="space-y-6">
                        <h3 className="font-display text-xl font-bold border-b border-border pb-4 mb-4">SEO & Metadata</h3>
                        
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                            <div>
                                <label className="block text-sm font-semibold mb-2">Focus Keyword</label>
                                <input
                                    type="text"
                                    value={data.focus_keyword}
                                    onChange={(e) => setData('focus_keyword', e.target.value)}
                                    className="w-full rounded-2xl border border-border bg-[#FAFAF8] px-5 py-3 text-sm outline-none focus:ring-2 focus:ring-primary/20 transition-all"
                                    placeholder="e.g. ecommerce growth strategies"
                                />
                                {errors.focus_keyword && <p className="text-red-500 text-xs mt-1">{errors.focus_keyword}</p>}
                            </div>
                            <div>
                                <label className="block text-sm font-semibold mb-2">Meta Title Override</label>
                                <input
                                    type="text"
                                    value={data.meta_title}
                                    onChange={(e) => setData('meta_title', e.target.value)}
                                    className="w-full rounded-2xl border border-border bg-[#FAFAF8] px-5 py-3 text-sm outline-none focus:ring-2 focus:ring-primary/20 transition-all"
                                    placeholder="Leave blank to use Article Title"
                                />
                                {errors.meta_title && <p className="text-red-500 text-xs mt-1">{errors.meta_title}</p>}
                            </div>
                        </div>

<div>
                            <label className="block text-sm font-semibold mb-2">Meta Description</label>
                            <textarea
                                value={data.meta_description}
                                onChange={(e) => setData('meta_description', e.target.value)}
                                rows={3}
                                className="w-full rounded-2xl border border-border bg-[#FAFAF8] px-5 py-3 text-sm outline-none focus:ring-2 focus:ring-primary/20 transition-all"
                                placeholder="Search engine description (recommended 150-160 chars)"
                            />
                            {errors.meta_description && <p className="text-red-500 text-xs mt-1">{errors.meta_description}</p>}
                        </div>

<div>
                            <label className="block text-sm font-semibold mb-2">Featured Image Alt Text</label>
                            <input
                                type="text"
                                value={data.featured_image_alt}
                                onChange={(e) => setData('featured_image_alt', e.target.value)}
                                className="w-full rounded-2xl border border-border bg-[#FAFAF8] px-5 py-3 text-sm outline-none focus:ring-2 focus:ring-primary/20 transition-all"
                                placeholder="Describe the image for screen readers and SEO"
                            />
                            {errors.featured_image_alt && <p className="text-red-500 text-xs mt-1">{errors.featured_image_alt}</p>}
                        </div>

<div className="pt-4 border-t border-border">
                            <div className="flex items-center justify-between mb-4">
                                <div>
                                    <h4 className="font-semibold">FAQ Schema (JSON-LD)</h4>
                                    <p className="text-xs text-muted-foreground">Add up to 3 Q&As for rich snippets in Google.</p>
                                </div>
                                <button 
                                    type="button" 
                                    onClick={addFaq}
                                    disabled={data.faq_items.length >= 3}
                                    className="text-xs bg-ink text-white px-3 py-1.5 rounded-full flex items-center gap-1 disabled:opacity-50"
                                >
                                    <Plus className="h-3 w-3" /> Add FAQ
                                </button>
                            </div>

<div className="space-y-4">
                                {data.faq_items.map((faq, index) => (
                                    <div key={index} className="bg-[#FAFAF8] border border-border rounded-xl p-4 relative">
                                        <button 
                                            type="button"
                                            onClick={() => removeFaq(index)}
                                            className="absolute top-4 right-4 text-red-500 hover:bg-red-50 p-1 rounded transition-colors"
                                        >
                                            <Trash2 className="h-4 w-4" />
                                        </button>
                                        <div className="space-y-3 pr-8">
                                            <input 
                                                type="text" 
                                                value={faq.q} 
                                                onChange={(e) => updateFaq(index, 'q', e.target.value)}
                                                placeholder="Question" 
                                                className="w-full rounded-lg border border-border px-3 py-2 text-sm"
                                            />
                                            <textarea 
                                                value={faq.a} 
                                                onChange={(e) => updateFaq(index, 'a', e.target.value)}
                                                placeholder="Answer" 
                                                rows={2} 
                                                className="w-full rounded-lg border border-border px-3 py-2 text-sm"
                                            />
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>

<div className="pt-4 border-t border-border space-y-6">
                            <h4 className="font-semibold flex items-center gap-2"><Settings className="h-4 w-4" /> Advanced Crawler Controls</h4>
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div className="space-y-4">
                                    <label className="flex items-center gap-3">
                                        <input 
                                            type="checkbox" 
                                            checked={data.is_noindex}
                                            onChange={e => setData('is_noindex', e.target.checked)}
                                            className="rounded border-border text-ink focus:ring-ink"
                                        />
                                        <span className="text-sm font-medium">NoIndex (Hide from Search Engines)</span>
                                    </label>
                                    <label className="flex items-center gap-3">
                                        <input 
                                            type="checkbox" 
                                            checked={data.is_nofollow}
                                            onChange={e => setData('is_nofollow', e.target.checked)}
                                            className="rounded border-border text-ink focus:ring-ink"
                                        />
                                        <span className="text-sm font-medium">NoFollow (Don't follow links)</span>
                                    </label>
                                </div>
                                <div>
                                    <label className="block text-sm font-semibold mb-2">Canonical URL Override</label>
                                    <input
                                        type="url"
                                        value={data.canonical_url}
                                        onChange={(e) => setData('canonical_url', e.target.value)}
                                        className="w-full rounded-2xl border border-border bg-[#FAFAF8] px-5 py-3 text-sm outline-none focus:ring-2 focus:ring-primary/20 transition-all"
                                        placeholder="https://example.com/original-article"
                                    />
                                    {errors.canonical_url && <p className="text-red-500 text-xs mt-1">{errors.canonical_url}</p>}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

<div className="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'}