Study Title setData('title', e.target.value)} className="w-full rounded-2xl border border-border bg-[#FAFAF8] px-5 py-3 outline-none focus:ring-2 focus:ring-primary/20 transition-all" placeholder="e.g. From ₦300k wasted monthly to 3× inquiry volume" /> {errors.title &&

{errors.title}

}

Tag / Service setData('tag', e.target.value)} className="w-full rounded-xl border border-[#E8E6DF] bg-[#FAFAF8] px-5 py-3 text-[13px] outline-none focus:border-primary/50" placeholder="e.g. Brand strategy + Social" />

Location setData('location', e.target.value)} className="w-full rounded-xl border border-[#E8E6DF] bg-[#FAFAF8] px-5 py-3 text-[13px] outline-none focus:border-primary/50" placeholder="e.g. Lagos, Nigeria" />

Short Excerpt (for grid)

setData('excerpt', e.target.value)}
                                rows={3}
                                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 brief summary for the main list..."
                            />
                            {errors.excerpt && <p className="text-red-500 text-xs mt-1">{errors.excerpt}</p>}
                        </div>

<div>
                            <label className="block text-sm font-semibold mb-2">Full Content</label>
                            <textarea
                                value={data.content || ''}
                                onChange={(e) => setData('content', e.target.value)}
                                rows={10}
                                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="The full story: Situation, Diagnosis, System, Results..."
                            />
                            {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">
                    {/* Metrics Repeater */}
                    <div className="rounded-3xl border border-border bg-white p-8 shadow-sm">
                        <div className="flex items-center justify-between mb-6">
                            <label className="text-xs font-semibold uppercase tracking-widest text-[#8C92AC]">Real Numbers</label>
                            <button
                                type="button"
                                onClick={addMetric}
                                className="inline-flex items-center gap-1 text-[11px] font-bold text-primary hover:underline"
                            >
                                <Plus className="h-3 w-3" /> Add Metric
                            </button>
                        </div>
                        <div className="space-y-6">
                            {data.metrics.map((metric, index) => (
                                <div key={index} className="relative pt-4 border-t border-[#F0EDE8] first:border-0 first:pt-0 group">
                                    <button
                                        type="button"
                                        onClick={() => removeMetric(index)}
                                        className="absolute -top-1 -right-2 p-1.5 text-[#C0BDBA] hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity"
                                    >
                                        <X className="h-3.5 w-3.5" />
                                    </button>
                                    <div className="grid grid-cols-12 gap-3">
                                        <div className="col-span-4">
                                            <label className="text-[9px] font-bold text-[#C0BDBA] uppercase block mb-1">Key</label>
                                            <input
                                                type="text"
                                                value={metric.k}
                                                onChange={(e) => updateMetric(index, 'k', e.target.value)}
                                                className="w-full rounded-xl border border-border bg-[#FAFAF8] px-3 py-2 text-[12px] outline-none focus:ring-1 focus:ring-primary/20"
                                                placeholder="58%"
                                            />
                                        </div>
                                        <div className="col-span-8">
                                            <label className="text-[9px] font-bold text-[#C0BDBA] uppercase block mb-1">Label</label>
                                            <input
                                                type="text"
                                                value={metric.v}
                                                onChange={(e) => updateMetric(index, 'v', e.target.value)}
                                                className="w-full rounded-xl border border-border bg-[#FAFAF8] px-3 py-2 text-[12px] outline-none focus:ring-1 focus:ring-primary/20"
                                                placeholder="Revenue growth"
                                            />
                                        </div>
                                    </div>
                                </div>
                            ))}
                            {data.metrics.length === 0 && (
                                <p className="text-xs text-muted-foreground text-center py-2 italic">No metrics added.</p>
                            )}
                        </div>
                    </div>

<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-[4/3] 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 className="pt-4">
                            <button
                                type="submit"
                                disabled={processing}
                                className="w-full inline-flex h-14 items-center justify-center gap-3 rounded-[1.5rem] bg-ink text-white text-[15px] font-bold hover:bg-primary transition-all shadow-xl shadow-ink/10 disabled:opacity-50"
                            >
                                <Save className="h-5 w-5" />
                                {isEditing ? 'Update Case Study' : 'Publish Study'}
                            </button>
                        </div>
                    </div>
                </div>
            </form>

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

{isEditing ? 'Edit Case Study' : 'New Case Study'}