← back to Norma
components/agents/AdvocacyToolkit.tsx
695 lines
'use client';
import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import {
Target, Building2, MapPin, Search, Sparkles, Mail, Phone,
MessageCircle, Twitter, Linkedin, Facebook, Instagram, Copy,
CheckCircle2, Download, Users, FileText, Mic, ChevronDown, ChevronUp,
ExternalLink, AlertCircle,
} from 'lucide-react';
import { useToast } from '../ToastProvider';
interface Organization {
id: string;
name: string;
city: string | null;
state: string | null;
}
interface Politician {
id: string;
name: string;
title: string | null;
party: string | null;
state: string | null;
district: string | null;
phone: string | null;
email: string | null;
website: string | null;
}
interface Staffer {
id: string;
full_name: string;
title: string | null;
email: string | null;
phone: string | null;
handles_education: boolean;
is_key_contact: boolean;
}
interface AdvocacyContent {
talking_points: string[];
email_template: { subject: string; body: string };
social_media_kit: {
twitter: string[];
facebook: string;
instagram: string;
linkedin: string;
};
call_script: string;
key_facts: string[];
}
const ISSUE_OPTIONS = [
'Education Access', 'Education Funding', 'Workforce Development',
'Healthcare Access', 'Housing Affordability', 'Economic Justice',
'Racial Equity', 'Climate Action', 'Immigration Reform',
'Voting Rights', 'Criminal Justice Reform', 'Food Security',
'Mental Health', 'Child Welfare', 'Disability Rights',
];
interface AdvocacyToolkitProps {
selectedOrgId: string;
onOrgChange: (id: string) => void;
}
export default function AdvocacyToolkit({ selectedOrgId, onOrgChange }: AdvocacyToolkitProps) {
const { addToast } = useToast();
const [orgs, setOrgs] = useState<Organization[]>([]);
const [campaignName, setCampaignName] = useState('');
const [issue, setIssue] = useState('');
const [zip, setZip] = useState('');
const [congressMembers, setCongressMembers] = useState<Politician[]>([]);
const [staffers, setStaffers] = useState<Staffer[]>([]);
const [loadingMembers, setLoadingMembers] = useState(false);
const [selectedTargets, setSelectedTargets] = useState<string[]>([]);
const [generating, setGenerating] = useState(false);
const [content, setContent] = useState<AdvocacyContent | null>(null);
const [activeSection, setActiveSection] = useState<string>('talking_points');
const [copiedField, setCopiedField] = useState<string | null>(null);
const [expandedMember, setExpandedMember] = useState<string | null>(null);
// Load organizations
useEffect(() => {
(async () => {
try {
const res = await fetch('/api/orgs?limit=200&sort=name&sort_dir=asc');
if (res.ok) {
const data = await res.json();
setOrgs(data.rows || []);
}
} catch {}
})();
}, []);
// Load congress members by ZIP
async function loadByZip() {
if (!zip || zip.length < 5) return;
setLoadingMembers(true);
setCongressMembers([]);
setStaffers([]);
try {
const res = await fetch(`/api/agents/congress-by-zip?zip=${zip}`);
if (res.ok) {
const data = await res.json();
setCongressMembers(data.members || []);
setStaffers(data.staffers || []);
}
} catch {}
setLoadingMembers(false);
}
function toggleTarget(id: string) {
setSelectedTargets(prev =>
prev.includes(id) ? prev.filter(t => t !== id) : [...prev, id],
);
}
async function handleGenerate() {
if (!selectedOrgId) {
addToast('Please select an organization', 'error');
return;
}
if (!campaignName.trim()) {
addToast('Please enter a campaign name', 'error');
return;
}
if (!issue) {
addToast('Please select an issue', 'error');
return;
}
setGenerating(true);
setContent(null);
try {
const res = await fetch('/api/agents/advocacy/generate', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
org_id: selectedOrgId,
campaign_name: campaignName.trim(),
issue,
zip: zip || null,
target_ids: selectedTargets.length > 0 ? selectedTargets : null,
}),
});
if (!res.ok) {
const data = await res.json();
throw new Error(data.error || 'Generation failed');
}
const data = await res.json();
setContent({
talking_points: data.talking_points || [],
email_template: data.email_template || { subject: '', body: '' },
social_media_kit: data.social_media_kit || { twitter: [], facebook: '', instagram: '', linkedin: '' },
call_script: data.call_script || '',
key_facts: data.key_facts || [],
});
setActiveSection('talking_points');
addToast('Advocacy toolkit generated', 'success');
} catch (err) {
addToast((err as Error).message || 'Failed to generate toolkit', 'error');
}
setGenerating(false);
}
function copyToClipboard(text: string, label: string) {
navigator.clipboard.writeText(text);
setCopiedField(label);
addToast(`${label} copied to clipboard`, 'success');
setTimeout(() => setCopiedField(null), 2000);
}
function exportAsText() {
if (!content) return;
const lines = [
`ADVOCACY TOOLKIT: ${campaignName}`,
`Issue: ${issue}`,
`Generated for: ${orgs.find(o => o.id === selectedOrgId)?.name || 'Unknown'}`,
'',
'--- TALKING POINTS ---',
...content.talking_points.map((p, i) => `${i + 1}. ${p}`),
'',
'--- EMAIL TEMPLATE ---',
`Subject: ${content.email_template.subject}`,
'',
content.email_template.body,
'',
'--- CALL SCRIPT ---',
content.call_script,
'',
'--- KEY FACTS ---',
...content.key_facts.map((f, i) => `${i + 1}. ${f}`),
'',
'--- SOCIAL MEDIA ---',
'Twitter:',
...content.social_media_kit.twitter.map((t, i) => ` ${i + 1}. ${t}`),
'',
'Facebook:',
content.social_media_kit.facebook,
'',
'Instagram:',
content.social_media_kit.instagram,
'',
'LinkedIn:',
content.social_media_kit.linkedin,
];
const blob = new Blob([lines.join('\n')], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `advocacy-toolkit-${campaignName.toLowerCase().replace(/\s+/g, '-')}.txt`;
a.click();
URL.revokeObjectURL(url);
addToast('Toolkit exported as text file', 'success');
}
const SECTIONS = [
{ key: 'talking_points', label: 'Talking Points', icon: MessageCircle },
{ key: 'email', label: 'Email Template', icon: Mail },
{ key: 'social', label: 'Social Media Kit', icon: Twitter },
{ key: 'call_script', label: 'Call Script', icon: Phone },
{ key: 'facts', label: 'Key Facts', icon: FileText },
];
return (
<div style={{ padding: 24, maxWidth: 1200, margin: '0 auto' }}>
{/* Header */}
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24 }}>
<div style={{
width: 40, height: 40, borderRadius: 12,
backgroundColor: 'rgba(139,92,246,0.12)',
display: 'flex', alignItems: 'center', justifyContent: 'center',
}}>
<Target size={20} style={{ color: '#8b5cf6' }} />
</div>
<div>
<h1 style={{ fontSize: 22, fontWeight: 700, color: 'var(--color-text)', margin: 0 }}>
Advocacy Toolkit
</h1>
<p style={{ fontSize: 13, color: 'var(--color-text-muted)', margin: 0 }}>
AI-powered grassroots advocacy campaign generator
</p>
</div>
</div>
<div style={{ display: 'grid', gridTemplateColumns: '340px 1fr', gap: 20 }}>
{/* Left: Configuration */}
<div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
{/* Organization */}
<div className="card" style={{ padding: 14 }}>
<label style={{ fontSize: 11, fontWeight: 600, color: 'var(--color-text-muted)', display: 'flex', alignItems: 'center', gap: 4, marginBottom: 6, textTransform: 'uppercase', letterSpacing: '0.05em' }}>
<Building2 size={12} /> Organization
</label>
<select className="input" value={selectedOrgId} onChange={e => onOrgChange(e.target.value)}>
<option value="">-- Select Org --</option>
{orgs.map(o => <option key={o.id} value={o.id}>{o.name}</option>)}
</select>
</div>
{/* Campaign Info */}
<div className="card" style={{ padding: 14 }}>
<label style={{ fontSize: 11, fontWeight: 600, color: 'var(--color-text-muted)', display: 'flex', alignItems: 'center', gap: 4, marginBottom: 6, textTransform: 'uppercase', letterSpacing: '0.05em' }}>
<Target size={12} /> Campaign
</label>
<input
className="input"
value={campaignName}
onChange={e => setCampaignName(e.target.value)}
placeholder="Campaign name..."
style={{ marginBottom: 8 }}
/>
<select className="input" value={issue} onChange={e => setIssue(e.target.value)}>
<option value="">-- Select Issue --</option>
{ISSUE_OPTIONS.map(i => <option key={i} value={i}>{i}</option>)}
</select>
</div>
{/* ZIP Lookup */}
<div className="card" style={{ padding: 14 }}>
<label style={{ fontSize: 11, fontWeight: 600, color: 'var(--color-text-muted)', display: 'flex', alignItems: 'center', gap: 4, marginBottom: 6, textTransform: 'uppercase', letterSpacing: '0.05em' }}>
<MapPin size={12} /> District Lookup
</label>
<div style={{ display: 'flex', gap: 8 }}>
<input
className="input"
value={zip}
onChange={e => setZip(e.target.value)}
placeholder="ZIP Code"
maxLength={5}
style={{ flex: 1 }}
/>
<button
className="btn btn-secondary btn-sm"
onClick={loadByZip}
disabled={!zip || zip.length < 5 || loadingMembers}
>
{loadingMembers ? <span className="spinner" style={{ width: 12, height: 12 }} /> : <Search size={14} />}
Lookup
</button>
</div>
{/* Congress Members */}
{congressMembers.length > 0 && (
<div style={{ marginTop: 10 }}>
<div style={{ fontSize: 11, fontWeight: 600, color: 'var(--color-text-muted)', marginBottom: 6 }}>
YOUR REPRESENTATIVES
</div>
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
{congressMembers.map(m => (
<div key={m.id}>
<div
style={{
padding: '8px 10px', borderRadius: 8,
backgroundColor: selectedTargets.includes(m.id) ? 'rgba(139,92,246,0.12)' : 'var(--color-surface-el)',
border: `1px solid ${selectedTargets.includes(m.id) ? 'rgba(139,92,246,0.3)' : 'var(--color-border)'}`,
cursor: 'pointer', transition: 'all 0.15s',
}}
onClick={() => toggleTarget(m.id)}
>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<div>
<div style={{ fontSize: 13, fontWeight: 600, color: 'var(--color-text)' }}>
{m.title ? `${m.title} ` : ''}{m.name}
</div>
<div style={{ fontSize: 11, color: 'var(--color-text-muted)' }}>
{m.party || '?'}-{m.state || '?'}{m.district ? ` Dist. ${m.district}` : ''}
</div>
</div>
<div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
{m.phone && (
<a
href={`tel:${m.phone}`}
onClick={e => e.stopPropagation()}
style={{ color: '#34d399' }}
title={m.phone}
>
<Phone size={13} />
</a>
)}
{m.email && (
<a
href={`mailto:${m.email}`}
onClick={e => e.stopPropagation()}
style={{ color: '#34d399' }}
title={m.email}
>
<Mail size={13} />
</a>
)}
<button
onClick={(e) => { e.stopPropagation(); setExpandedMember(expandedMember === m.id ? null : m.id); }}
style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--color-text-muted)', padding: 2 }}
>
{expandedMember === m.id ? <ChevronUp size={13} /> : <ChevronDown size={13} />}
</button>
<input
type="checkbox"
checked={selectedTargets.includes(m.id)}
onChange={() => toggleTarget(m.id)}
onClick={e => e.stopPropagation()}
style={{ accentColor: '#8b5cf6' }}
/>
</div>
</div>
</div>
{/* Staffers */}
<AnimatePresence>
{expandedMember === m.id && (
<motion.div
initial={{ height: 0, opacity: 0 }}
animate={{ height: 'auto', opacity: 1 }}
exit={{ height: 0, opacity: 0 }}
style={{ overflow: 'hidden' }}
>
<div style={{ paddingLeft: 16, paddingTop: 4 }}>
{staffers.filter(s => (s as any).politician_id === m.id).length > 0 ? (
staffers.filter(s => (s as any).politician_id === m.id).slice(0, 5).map(s => (
<div key={s.id} style={{
padding: '4px 8px', fontSize: 11, color: 'var(--color-text-secondary)',
display: 'flex', alignItems: 'center', gap: 6,
}}>
<Users size={10} style={{ color: 'var(--color-text-muted)', flexShrink: 0 }} />
<span style={{ fontWeight: 500 }}>{s.full_name}</span>
{s.title && <span style={{ color: 'var(--color-text-muted)' }}>({s.title})</span>}
{s.handles_education && <span className="badge badge-success" style={{ fontSize: 8, padding: '1px 5px' }}>EDU</span>}
{s.is_key_contact && <span className="badge badge-warning" style={{ fontSize: 8, padding: '1px 5px' }}>KEY</span>}
</div>
))
) : (
<div style={{ fontSize: 11, color: 'var(--color-text-muted)', padding: '4px 8px' }}>
No staffers found
</div>
)}
</div>
</motion.div>
)}
</AnimatePresence>
</div>
))}
</div>
</div>
)}
</div>
{/* Generate Button */}
<button
className="btn btn-primary btn-lg"
onClick={handleGenerate}
disabled={generating || !selectedOrgId || !campaignName.trim() || !issue}
style={{ width: '100%' }}
>
{generating ? (
<>
<span className="spinner" style={{ width: 16, height: 16 }} />
Generating Toolkit...
</>
) : (
<>
<Sparkles size={16} />
Generate Advocacy Toolkit
</>
)}
</button>
</div>
{/* Right: Generated Content */}
<div>
{!content && !generating && (
<div className="card" style={{ padding: 48, textAlign: 'center' }}>
<div style={{
width: 56, height: 56, borderRadius: 16, margin: '0 auto 16px',
backgroundColor: 'rgba(139,92,246,0.1)',
display: 'flex', alignItems: 'center', justifyContent: 'center',
}}>
<Target size={26} style={{ color: '#8b5cf6', opacity: 0.6 }} />
</div>
<h3 style={{ fontSize: 16, fontWeight: 600, color: 'var(--color-text)', margin: '0 0 8px' }}>
Build Your Campaign
</h3>
<p style={{ fontSize: 13, color: 'var(--color-text-muted)', maxWidth: 360, margin: '0 auto' }}>
Select your organization, name your campaign, choose an issue, and optionally
look up your congress members by ZIP code.
</p>
</div>
)}
{generating && (
<div className="card" style={{ padding: 48, textAlign: 'center' }}>
<div className="spinner" style={{ width: 32, height: 32, margin: '0 auto 16px' }} />
<p style={{ fontSize: 14, color: 'var(--color-text-secondary)' }}>
Generating your advocacy toolkit...
</p>
</div>
)}
{content && !generating && (
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
{/* Section tabs */}
<div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
{SECTIONS.map(s => (
<button
key={s.key}
onClick={() => setActiveSection(s.key)}
style={{
padding: '6px 14px', borderRadius: 20, border: 'none',
cursor: 'pointer', fontSize: 12, fontWeight: 600,
display: 'flex', alignItems: 'center', gap: 6,
backgroundColor: activeSection === s.key ? 'rgba(139,92,246,0.2)' : 'var(--color-surface-el)',
color: activeSection === s.key ? '#a78bfa' : 'var(--color-text-secondary)',
transition: 'all 0.15s',
}}
>
<s.icon size={13} />
{s.label}
</button>
))}
<div style={{ flex: 1 }} />
<button className="btn btn-ghost btn-sm" onClick={exportAsText}>
<Download size={14} />
Export All
</button>
</div>
{/* Content Panel */}
<AnimatePresence mode="wait">
<motion.div
key={activeSection}
initial={{ opacity: 0, y: 8 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -8 }}
transition={{ duration: 0.15 }}
>
{/* Talking Points */}
{activeSection === 'talking_points' && (
<div className="card" style={{ padding: 20 }}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
<h3 style={{ fontSize: 15, fontWeight: 600, color: 'var(--color-text)', margin: 0 }}>Talking Points</h3>
<button className="btn btn-ghost btn-sm" onClick={() => copyToClipboard(content.talking_points.join('\n'), 'Talking Points')}>
{copiedField === 'Talking Points' ? <CheckCircle2 size={13} style={{ color: '#22c55e' }} /> : <Copy size={13} />}
</button>
</div>
<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
{content.talking_points.map((point, i) => (
<div key={i} style={{
display: 'flex', gap: 10, padding: '10px 12px', borderRadius: 8,
backgroundColor: 'var(--color-surface-el)',
}}>
<span style={{
width: 22, height: 22, borderRadius: 6, flexShrink: 0,
backgroundColor: 'rgba(139,92,246,0.15)',
color: '#a78bfa', fontSize: 11, fontWeight: 700,
display: 'flex', alignItems: 'center', justifyContent: 'center',
}}>
{i + 1}
</span>
<span style={{ fontSize: 13, color: 'var(--color-text-secondary)', lineHeight: 1.5 }}>{point}</span>
</div>
))}
</div>
</div>
)}
{/* Email Template */}
{activeSection === 'email' && (
<div className="card" style={{ padding: 20 }}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
<h3 style={{ fontSize: 15, fontWeight: 600, color: 'var(--color-text)', margin: 0 }}>Email Template</h3>
<button className="btn btn-ghost btn-sm" onClick={() => copyToClipboard(`Subject: ${content.email_template.subject}\n\n${content.email_template.body}`, 'Email')}>
{copiedField === 'Email' ? <CheckCircle2 size={13} style={{ color: '#22c55e' }} /> : <Copy size={13} />}
</button>
</div>
<div style={{
padding: 16, borderRadius: 8,
backgroundColor: 'var(--color-surface-el)',
border: '1px solid var(--color-border)',
}}>
<div style={{ fontSize: 12, color: 'var(--color-text-muted)', marginBottom: 4 }}>SUBJECT</div>
<div style={{ fontSize: 14, fontWeight: 600, color: 'var(--color-text)', marginBottom: 16 }}>
{content.email_template.subject}
</div>
<div style={{ fontSize: 12, color: 'var(--color-text-muted)', marginBottom: 4 }}>BODY</div>
<div style={{ fontSize: 13, color: 'var(--color-text-secondary)', lineHeight: 1.7, whiteSpace: 'pre-wrap' }}>
{content.email_template.body}
</div>
</div>
</div>
)}
{/* Social Media Kit */}
{activeSection === 'social' && (
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
{/* Twitter */}
<div className="card" style={{ padding: 16 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
<Twitter size={16} style={{ color: '#34d399' }} />
<h4 style={{ fontSize: 14, fontWeight: 600, color: 'var(--color-text)', margin: 0 }}>Twitter/X Posts</h4>
</div>
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
{content.social_media_kit.twitter.map((tweet, i) => (
<div key={i} style={{
padding: '10px 12px', borderRadius: 8,
backgroundColor: 'var(--color-surface-el)',
border: '1px solid var(--color-border)',
display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8,
}}>
<span style={{ fontSize: 13, color: 'var(--color-text-secondary)', lineHeight: 1.5 }}>{tweet}</span>
<button
className="btn btn-ghost btn-sm"
style={{ flexShrink: 0, padding: '4px 8px' }}
onClick={() => copyToClipboard(tweet, `Tweet ${i + 1}`)}
>
{copiedField === `Tweet ${i + 1}` ? <CheckCircle2 size={12} style={{ color: '#22c55e' }} /> : <Copy size={12} />}
</button>
</div>
))}
</div>
</div>
{/* Facebook */}
<div className="card" style={{ padding: 16 }}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<Facebook size={16} style={{ color: '#34d399' }} />
<h4 style={{ fontSize: 14, fontWeight: 600, color: 'var(--color-text)', margin: 0 }}>Facebook</h4>
</div>
<button className="btn btn-ghost btn-sm" onClick={() => copyToClipboard(content.social_media_kit.facebook, 'Facebook')}>
{copiedField === 'Facebook' ? <CheckCircle2 size={12} style={{ color: '#22c55e' }} /> : <Copy size={12} />}
</button>
</div>
<div style={{ fontSize: 13, color: 'var(--color-text-secondary)', lineHeight: 1.6, whiteSpace: 'pre-wrap', padding: 12, borderRadius: 8, backgroundColor: 'var(--color-surface-el)' }}>
{content.social_media_kit.facebook}
</div>
</div>
{/* Instagram */}
<div className="card" style={{ padding: 16 }}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<Instagram size={16} style={{ color: '#e879f9' }} />
<h4 style={{ fontSize: 14, fontWeight: 600, color: 'var(--color-text)', margin: 0 }}>Instagram</h4>
</div>
<button className="btn btn-ghost btn-sm" onClick={() => copyToClipboard(content.social_media_kit.instagram, 'Instagram')}>
{copiedField === 'Instagram' ? <CheckCircle2 size={12} style={{ color: '#22c55e' }} /> : <Copy size={12} />}
</button>
</div>
<div style={{ fontSize: 13, color: 'var(--color-text-secondary)', lineHeight: 1.6, whiteSpace: 'pre-wrap', padding: 12, borderRadius: 8, backgroundColor: 'var(--color-surface-el)' }}>
{content.social_media_kit.instagram}
</div>
</div>
{/* LinkedIn */}
<div className="card" style={{ padding: 16 }}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<Linkedin size={16} style={{ color: '#34d399' }} />
<h4 style={{ fontSize: 14, fontWeight: 600, color: 'var(--color-text)', margin: 0 }}>LinkedIn</h4>
</div>
<button className="btn btn-ghost btn-sm" onClick={() => copyToClipboard(content.social_media_kit.linkedin, 'LinkedIn')}>
{copiedField === 'LinkedIn' ? <CheckCircle2 size={12} style={{ color: '#22c55e' }} /> : <Copy size={12} />}
</button>
</div>
<div style={{ fontSize: 13, color: 'var(--color-text-secondary)', lineHeight: 1.6, whiteSpace: 'pre-wrap', padding: 12, borderRadius: 8, backgroundColor: 'var(--color-surface-el)' }}>
{content.social_media_kit.linkedin}
</div>
</div>
</div>
)}
{/* Call Script */}
{activeSection === 'call_script' && (
<div className="card" style={{ padding: 20 }}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
<h3 style={{ fontSize: 15, fontWeight: 600, color: 'var(--color-text)', margin: 0, display: 'flex', alignItems: 'center', gap: 8 }}>
<Mic size={16} style={{ color: '#8b5cf6' }} /> Call Script
</h3>
<button className="btn btn-ghost btn-sm" onClick={() => copyToClipboard(content.call_script, 'Call Script')}>
{copiedField === 'Call Script' ? <CheckCircle2 size={13} style={{ color: '#22c55e' }} /> : <Copy size={13} />}
</button>
</div>
<div style={{
fontSize: 13, color: 'var(--color-text-secondary)', lineHeight: 1.7,
whiteSpace: 'pre-wrap', padding: 16, borderRadius: 8,
backgroundColor: 'var(--color-surface-el)',
border: '1px solid var(--color-border)',
}}>
{content.call_script}
</div>
</div>
)}
{/* Key Facts */}
{activeSection === 'facts' && (
<div className="card" style={{ padding: 20 }}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
<h3 style={{ fontSize: 15, fontWeight: 600, color: 'var(--color-text)', margin: 0 }}>Key Facts & Statistics</h3>
<button className="btn btn-ghost btn-sm" onClick={() => copyToClipboard(content.key_facts.join('\n'), 'Key Facts')}>
{copiedField === 'Key Facts' ? <CheckCircle2 size={13} style={{ color: '#22c55e' }} /> : <Copy size={13} />}
</button>
</div>
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
{content.key_facts.map((fact, i) => (
<div key={i} style={{
display: 'flex', gap: 10, padding: '10px 12px', borderRadius: 8,
backgroundColor: 'var(--color-surface-el)',
}}>
<span style={{
width: 6, height: 6, borderRadius: '50%', flexShrink: 0, marginTop: 6,
backgroundColor: '#8b5cf6',
}} />
<span style={{ fontSize: 13, color: 'var(--color-text-secondary)', lineHeight: 1.5 }}>{fact}</span>
</div>
))}
</div>
</div>
)}
</motion.div>
</AnimatePresence>
</div>
)}
</div>
</div>
</div>
);
}