{/* Header overview and status */}

System Campaign Broadcasting Center

Reach users directly via SMS, WhatsApp, and Native Push notifications. Monitor open rates and clicks.

{/* Column 1 & 2: Broadcast Composer & Campaigns History */}

{/* Section 1: Composer */}

Direct Campaign Composer

Schedules immediate or recurring broadcasts

SMS Gateway: Active

Select Channel

Target User Cohort

Notification Title setTitle(e.target.value)} />

Notification Text Message

setMessage(e.target.value)}
                                    />
                                </div>

<button type="submit" className="w-full py-3 bg-[#0F6E56] text-white rounded-xl text-[10px] font-black uppercase tracking-widest shadow-md hover:bg-[#085041] flex items-center justify-center gap-1.5">
                                    <Send className="w-4 h-4" />
                                    <span>Broadcast System Campaign</span>
                                </button>
                            </form>
                        </div>

{/* Section 2: Campaigns History */}
                        <div className="bg-white border border-slate-200 rounded-3xl p-6 shadow-sm overflow-hidden">
                            <div className="mb-4">
                                <h3 className="text-sm font-black text-slate-800 uppercase tracking-widest flex items-center gap-1.5">
                                    <History className="w-4 h-4 text-slate-600" />
                                    <span>Broadcast Campaign Logs</span>
                                </h3>
                                <p className="text-[10px] text-slate-400 font-semibold mt-0.5">Logs of recently delivered campaigns</p>
                            </div>

<div className="divide-y divide-slate-100">
                                {campaigns.map((camp) => (
                                    <div key={camp.id} className="py-4 hover:bg-slate-50/50 transition-colors flex items-start justify-between gap-4 text-xs font-bold text-slate-700">
                                        <div className="space-y-1.5 flex-1">
                                            <div className="flex items-center space-x-2">
                                                <Badge className="bg-blue-50 text-blue-700 border-none font-bold uppercase text-[8px]">{camp.channel}</Badge>
                                                <span className="text-[10px] text-slate-400 font-semibold">Cohort: {camp.recipient_type}</span>
                                            </div>
                                            <h4 className="text-sm font-black text-slate-900">{camp.title}</h4>
                                            <p className="text-slate-500 font-medium text-[11px] leading-relaxed">{camp.message}</p>
                                        </div>
                                        <div className="text-right">
                                            <span className="text-[9px] text-slate-400 font-mono block">{camp.sent_at}</span>
                                            <div className="mt-2 text-[10px] font-black text-emerald-600 uppercase tracking-wide">
                                                {camp.delivery_rate} Delivered • {camp.clicks}
                                            </div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>

</div>

{/* Column 3: Pre-approved WhatsApp Templates */}
                    <div className="space-y-6">
                        <div className="bg-white border border-slate-200 rounded-3xl p-6 shadow-sm space-y-4">
                            <div>
                                <h3 className="text-sm font-black text-slate-800 uppercase tracking-widest flex items-center gap-1">
                                    <MessageCircle className="w-4.5 h-4.5 text-emerald-600" />
                                    <span>WhatsApp Templates</span>
                                </h3>
                                <p className="text-[10px] text-slate-400 mt-0.5">Meta pre-approved utility check-in templates</p>
                            </div>

<div className="space-y-3">
                                {whatsapp_templates.map((tpl, i) => (
                                    <div key={i} className="p-3 bg-slate-50 rounded-xl border border-slate-100 text-xs font-bold text-slate-700 space-y-2">
                                        <div className="flex items-center justify-between">
                                            <span className="font-black text-slate-800 text-[10px] font-mono leading-none">{tpl.name}</span>
                                            <Badge className={`border-none text-[8px] font-black uppercase ${
                                                tpl.status === 'Approved' ? 'bg-emerald-50 text-emerald-700' : 'bg-amber-50 text-amber-700'
                                            }`}>{tpl.status}</Badge>
                                        </div>
                                        <p className="text-[10px] text-slate-500 font-medium leading-relaxed bg-white p-2 rounded-lg border border-slate-100">{tpl.text}</p>
                                        <div className="text-[8px] text-slate-400 uppercase tracking-widest font-black">Category: {tpl.category} • Language: {tpl.language}</div>
                                    </div>
                                ))}
                            </div>
                        </div>

{/* Interactive campaign delivery metrics */}
                        <div className="bg-blue-50/40 border border-blue-100 p-5 rounded-3xl shadow-sm space-y-3 text-xs font-bold text-slate-700">
                            <span className="text-[10px] font-black text-blue-900 uppercase tracking-widest flex items-center gap-1">
                                <TrendingUp className="w-4 h-4" />
                                <span>Engagement Metrics</span>
                            </span>
                            <div className="grid grid-cols-2 gap-4 pt-1">
                                <div className="bg-white p-3 rounded-xl border border-blue-50 text-center">
                                    <span className="text-[9px] text-slate-400 uppercase tracking-wider block">Push Open Rate</span>
                                    <span className="text-lg font-black text-slate-800">42.8%</span>
                                </div>
                                <div className="bg-white p-3 rounded-xl border border-blue-50 text-center">
                                    <span className="text-[9px] text-slate-400 uppercase tracking-wider block">WhatsApp Click Rate</span>
                                    <span className="text-lg font-black text-emerald-600">68.5%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </AdminLayout>
    );
}