// Messages — overview / inbox / email campaigns / whatsapp

const Messages = ({ view = 'overview', setRoute }) => {
  if (view === 'inbox') return <MessagesInbox setRoute={setRoute}/>;
  if (view === 'email') return <MessagesEmail setRoute={setRoute}/>;
  if (view === 'whatsapp') return <MessagesWhatsApp setRoute={setRoute}/>;
  return <MessagesOverview setRoute={setRoute}/>;
};

const MessagesEmail = ({ setRoute }) => {
  const [tab, setTab] = React.useState('all');
  const [composerOpen, setComposerOpen] = React.useState(false);

  const campaigns = [
    { id: 1, subject: 'Dein Apparat Ticket ist bereit 🎟', event: 'Apparat · Berghain', audience: 'All ticketholders', channel: 'email', sent: 3240, opened: 2284, clicked: 842, status: 'sent', when: '2h ago' },
    { id: 2, subject: '⚡ Last 200 Balkon tickets', event: 'Apparat · Berghain', audience: 'Newsletter subscribers', channel: 'email', sent: 12400, opened: 6820, clicked: 1640, status: 'sent', when: 'yesterday' },
    { id: 3, subject: 'Hot Chip — Early Bird endet Sonntag', event: 'Hot Chip · Astra', audience: 'Past buyers', channel: 'email', sent: 8400, opened: 4284, clicked: 1260, status: 'sent', when: '3d ago' },
    { id: 4, subject: 'Dein Festivalband — bitte aufbewahren', event: 'Tempelhof Sounds', audience: 'All ticketholders', channel: 'email+sms', sent: 48200, opened: 33740, clicked: 4820, status: 'sent', when: '1w ago' },
    { id: 5, subject: '48h to go — event day checklist', event: 'Roosevelt · Columbiahalle', audience: 'All ticketholders', channel: 'email', scheduled: '27. Apr, 18:00', status: 'scheduled', when: 'in 2 days' },
    { id: 6, subject: 'Pre-sale access for members', event: 'Fred again.. · Ziggo', audience: 'Premium members', channel: 'email+push', status: 'draft', when: 'Draft' },
    { id: 7, subject: 'Waitlist opening — tiered access', event: 'Open Air · Tempelhof', audience: 'Waitlist', channel: 'email', scheduled: '28. Apr, 10:00', status: 'scheduled', when: 'in 3 days' },
  ];

  const filtered = tab === 'all' ? campaigns : campaigns.filter(c => c.status === tab);

  return (
    <div style={{ padding: '24px 36px 60px', maxWidth: 1400, margin: '0 auto' }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', marginBottom: 20 }}>
        <div>
          <h1 className="display" style={{ margin: 0, fontSize: 28, fontWeight: 500, letterSpacing: '-0.02em' }}>Email campaigns</h1>
          <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 4 }}>Broadcast to attendees by event, tier, or segment. Automated reminders live on each event.</div>
        </div>
        <div style={{ flex: 1 }}/>
        <Button variant="secondary" size="md" icon="file">Templates</Button>
        <Button variant="primary" size="md" icon="plus" onClick={() => setComposerOpen(true)} style={{ marginLeft: 8 }}>New campaign</Button>
      </div>

      {/* Stats */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginBottom: 14 }}>
        <Card><Stat label="Sent this month" value="184k" delta="+12%" icon="send"/></Card>
        <Card><Stat label="Avg. open rate" value="68.4%" delta="+3.2%" icon="mail" positive/></Card>
        <Card><Stat label="Avg. click rate" value="22.1%" delta="+1.8%" icon="link"/></Card>
        <Card><Stat label="Remaining credits" value="412k" sub="Email + 18k SMS" icon="bank"/></Card>
      </div>

      {/* AI co-pilot strip */}
      <div style={{
        marginBottom: 20, padding: '12px 16px',
        display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap',
        border: '1px solid oklch(0.85 0.06 280)',
        background: 'linear-gradient(135deg, oklch(0.985 0.01 280) 0%, oklch(0.97 0.025 320) 100%)',
        borderRadius: 12,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{ width: 28, height: 28, borderRadius: 8, background: 'linear-gradient(135deg, var(--accent), var(--indigo))', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon name="sparkle" size={13}/>
          </div>
          <div>
            <div style={{ fontSize: 12.5, fontWeight: 700 }}>Email AI co-pilot</div>
            <div style={{ fontSize: 10.5, color: 'var(--ink-3)' }}>3 ways to boost this week's revenue</div>
          </div>
        </div>
        <div style={{ height: 28, width: 1, background: 'oklch(0.85 0.06 280 / 0.6)' }}/>
        {[
          { icon: 'users', l: 'Re-engage cart abandoners', v: '1,420 people · +€8.2k', tone: 'accent' },
          { icon: 'mail', l: 'Subject A/B winning', v: 'Emoji variant +12% open', tone: 'success' },
          { icon: 'warning', l: 'rhythm-events.de DMARC', v: 'Failing — fix to recover 8% deliverability', tone: 'warning' },
        ].map((s, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <Icon name={s.icon} size={12} style={{ color: s.tone === 'success' ? 'var(--success)' : s.tone === 'warning' ? 'var(--warning)' : 'var(--accent)' }}/>
            <div>
              <div style={{ fontSize: 10.5, color: 'var(--ink-3)', fontWeight: 500 }}>{s.l}</div>
              <div style={{ fontSize: 12, fontWeight: 600 }}>{s.v}</div>
            </div>
          </div>
        ))}
        <div style={{ flex: 1 }}/>
        <Button variant="primary" size="sm" icon="sparkle">Open AI plan</Button>
      </div>

      <Tabs value={tab} onChange={setTab} options={[
        { value: 'all', label: 'All', count: campaigns.length },
        { value: 'scheduled', label: 'Scheduled', count: campaigns.filter(c=>c.status==='scheduled').length },
        { value: 'sent', label: 'Sent', count: campaigns.filter(c=>c.status==='sent').length },
        { value: 'draft', label: 'Drafts', count: campaigns.filter(c=>c.status==='draft').length },
      ]}/>

      <div style={{ marginTop: 16, display: 'grid', gridTemplateColumns: '1fr 320px', gap: 14 }}>
        <Card pad={0}>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
            <thead>
              <tr style={{ background: 'var(--bg-sunken)', borderBottom: '1px solid var(--line)' }}>
                {['Campaign','Audience','Channel','Performance','Status',''].map(h => (
                  <th key={h} style={{ padding: '10px 14px', textAlign: 'left', fontSize: 11, fontWeight: 600, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {filtered.map((c, i) => (
                <tr key={c.id} style={{ borderBottom: i < filtered.length - 1 ? '1px solid var(--line)' : 'none', height: 72 }}>
                  <td style={{ padding: '10px 14px', maxWidth: 320 }}>
                    <div style={{ fontSize: 13.5, fontWeight: 600, marginBottom: 3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.subject}</div>
                    <div style={{ fontSize: 11.5, color: 'var(--ink-3)', display: 'flex', alignItems: 'center', gap: 4 }}>
                      <Icon name="calendar" size={10}/>{c.event}
                    </div>
                  </td>
                  <td style={{ padding: '10px 14px' }}>
                    <div style={{ fontSize: 12.5 }}>{c.audience}</div>
                    {c.sent && <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 2 }}><span className="mono">{c.sent.toLocaleString()}</span> recipients</div>}
                  </td>
                  <td style={{ padding: '10px 14px' }}>
                    <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
                      {c.channel.split('+').map(ch => (
                        <Badge key={ch} variant="neutral"><Icon name={ch==='email'?'mail':ch==='sms'?'phone':'bell'} size={10} style={{ marginRight: 4 }}/>{ch}</Badge>
                      ))}
                    </div>
                  </td>
                  <td style={{ padding: '10px 14px', minWidth: 190 }}>
                    {c.status === 'sent' ? (
                      <div>
                        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, marginBottom: 4 }}>
                          <span style={{ color: 'var(--ink-3)' }}>Open {Math.round((c.opened/c.sent)*100)}% · Click {Math.round((c.clicked/c.sent)*100)}%</span>
                        </div>
                        <div style={{ height: 5, borderRadius: 99, background: 'var(--bg-muted)', position: 'relative', overflow: 'hidden' }}>
                          <div style={{ position: 'absolute', left: 0, top: 0, height: '100%', width: `${(c.opened/c.sent)*100}%`, background: 'var(--success)' }}/>
                          <div style={{ position: 'absolute', left: 0, top: 0, height: '100%', width: `${(c.clicked/c.sent)*100}%`, background: 'var(--accent)' }}/>
                        </div>
                      </div>
                    ) : c.status === 'scheduled' ? (
                      <span style={{ fontSize: 12, color: 'var(--ink-3)', display:'flex', alignItems:'center', gap: 5 }}>
                        <Icon name="clock" size={11}/>{c.scheduled}
                      </span>
                    ) : (
                      <span style={{ fontSize: 12, color: 'var(--ink-4)' }}>—</span>
                    )}
                  </td>
                  <td style={{ padding: '10px 14px' }}>
                    <StatusBadge status={c.status}/>
                    <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 3 }}>{c.when}</div>
                  </td>
                  <td style={{ padding: '10px 14px', textAlign: 'right' }}>
                    <Button variant="ghost" size="sm" icon="more" style={{ padding: '0 8px' }}/>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <Card>
            <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 4 }}>Top-performing campaign</div>
            <div style={{ fontSize: 12, color: 'var(--ink-3)', marginBottom: 12 }}>Last 30 days</div>
            <div style={{ padding: 12, borderRadius: 10, background: 'var(--bg-sunken)' }}>
              <div style={{ fontSize: 13.5, fontWeight: 600, marginBottom: 2 }}>Your Coldplay wristband — keep it safe</div>
              <div style={{ fontSize: 11, color: 'var(--ink-3)', marginBottom: 10 }}>Sent to 48,200 · 1 week ago</div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
                <div>
                  <div className="mono" style={{ fontSize: 18, fontWeight: 600 }}>70%</div>
                  <div style={{ fontSize: 10.5, color: 'var(--ink-3)' }}>Open</div>
                </div>
                <div>
                  <div className="mono" style={{ fontSize: 18, fontWeight: 600 }}>10%</div>
                  <div style={{ fontSize: 10.5, color: 'var(--ink-3)' }}>Click</div>
                </div>
                <div>
                  <div className="mono" style={{ fontSize: 18, fontWeight: 600 }}>1.8%</div>
                  <div style={{ fontSize: 10.5, color: 'var(--ink-3)' }}>Unsub</div>
                </div>
              </div>
            </div>
          </Card>

          <Card>
            <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 12 }}>Templates</div>
            {[
              { i: 'sparkle', n: 'Announce new event', d: '5 sections, cover hero' },
              { i: 'clock', n: 'Last call — 24h', d: 'Urgency banner, CTA' },
              { i: 'ticket', n: 'Order confirmation', d: 'Ticket + QR inline' },
              { i: 'heart', n: 'Post-event thank you', d: 'Feedback CTA' },
            ].map((t, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 0', borderBottom: i<3?'1px solid var(--line)':'none', cursor: 'pointer' }}>
                <div style={{ width: 32, height: 32, borderRadius: 8, background: 'var(--bg-sunken)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name={t.i} size={14}/></div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, fontWeight: 500 }}>{t.n}</div>
                  <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>{t.d}</div>
                </div>
                <Icon name="arrowRight" size={12} style={{ color: 'var(--ink-4)' }}/>
              </div>
            ))}
          </Card>

          <Card>
            <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 12 }}>Sending rules</div>
            {[
              { l: 'Quiet hours', s: '22:00 – 08:00 MEZ', on: true },
              { l: 'Throttle (SMS)', s: 'Max 10k / hr', on: true },
              { l: 'Auto-suppress bounces', s: 'After 2 hard bounces', on: true },
            ].map((r, i) => (
              <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'center', padding: '8px 0', borderBottom: i<2?'1px solid var(--line)':'none' }}>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 12.5, fontWeight: 500 }}>{r.l}</div>
                  <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>{r.s}</div>
                </div>
                <Toggle checked={r.on} onChange={()=>{}}/>
              </div>
            ))}
          </Card>
        </div>
      </div>

      {composerOpen && <ComposerModal onClose={() => setComposerOpen(false)}/>}
    </div>
  );
};

const ComposerModal = ({ onClose }) => {
  const [channel, setChannel] = React.useState('email');
  const [audience, setAudience] = React.useState('all');
  const [subject, setSubject] = React.useState('Quick update about your Apparat tickets');

  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(20,17,14,0.35)', zIndex: 40, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
      <div onClick={e => e.stopPropagation()} style={{
        width: 960, maxWidth: '100%', maxHeight: '90vh', background: 'var(--bg)',
        borderRadius: 18, boxShadow: '0 30px 80px rgba(0,0,0,0.3)', overflow: 'hidden',
        display: 'grid', gridTemplateRows: 'auto 1fr auto',
      }}>
        <div style={{ padding: '16px 24px', borderBottom: '1px solid var(--line)', display: 'flex', alignItems: 'center' }}>
          <div>
            <h3 style={{ margin: 0, fontSize: 16, fontWeight: 600 }}>New campaign</h3>
            <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 2 }}>Message attendees directly from their booking channel.</div>
          </div>
          <div style={{ flex: 1 }}/>
          <Button variant="ghost" size="sm" icon="close" onClick={onClose}/>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', overflow: 'auto' }}>
          {/* Setup */}
          <div style={{ padding: 20, borderRight: '1px solid var(--line)', overflow: 'auto' }}>
            <Field label="Channel">
              <div style={{ display: 'flex', gap: 6 }}>
                {[
                  { k: 'email', i: 'mail', l: 'Email' },
                  { k: 'sms', i: 'phone', l: 'SMS' },
                  { k: 'push', i: 'bell', l: 'Push' },
                ].map(o => (
                  <button key={o.k} onClick={() => setChannel(o.k)} style={{
                    flex: 1, padding: '10px 6px', borderRadius: 8,
                    border: `1px solid ${channel===o.k?'var(--accent)':'var(--line)'}`,
                    background: channel===o.k?'color-mix(in oklch, var(--accent) 6%, var(--bg-raised))':'var(--bg-raised)',
                    color: channel===o.k?'var(--accent)':'var(--ink-2)',
                    fontSize: 12, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit',
                    display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
                  }}><Icon name={o.i} size={14}/>{o.l}</button>
                ))}
              </div>
            </Field>

            <Field label="Event" style={{ marginTop: 14 }}>
              <Select value="apparat" options={[
                { value: 'apparat', label: 'Apparat · Berghain · 24. Mai' },
                { value: 'hotchip', label: 'Hot Chip · Astra · 12. Jun' },
                { value: 'tempelhof', label: 'Open Air · Tempelhof · 28. Jul' },
                { value: 'all', label: 'All events (cross-event)' },
              ]}/>
            </Field>

            <Field label="Audience" style={{ marginTop: 14 }}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                {[
                  { k: 'smart', l: 'Smart audience', ai: true, sub: '12,420 people · lookalike of top buyers · +24% lift', confidence: 'high' },
                  { k: 'retarget', l: 'High-intent retargeting', ai: true, sub: '2,840 people · clicked but didn\'t buy · +34% lift', confidence: 'very high' },
                  { k: 'cross', l: 'Cross-event lookalike', ai: true, sub: '8,240 people · similar genre buyers across DACH · +18% lift', confidence: 'high' },
                  { k: 'all', l: 'All ticketholders', sub: '3,240 people' },
                  { k: 'tier', l: 'Specific tiers', sub: 'VIP / GA / Balkon / Oberrang' },
                  { k: 'unchecked', l: 'Not yet checked-in', sub: '— (use on event day)' },
                  { k: 'waitlist', l: 'Waitlist', sub: '842 people' },
                  { k: 'custom', l: 'Custom segment', sub: 'Build by filters' },
                ].map(o => (
                  <button key={o.k} onClick={() => setAudience(o.k)} style={{
                    textAlign: 'left', padding: '10px 12px', borderRadius: 8,
                    border: `1px solid ${audience===o.k?'var(--accent)':o.ai?'oklch(0.85 0.06 280)':'var(--line)'}`,
                    background: audience===o.k
                      ? 'color-mix(in oklch, var(--accent) 6%, var(--bg-raised))'
                      : o.ai
                        ? 'linear-gradient(135deg, oklch(0.985 0.01 280) 0%, oklch(0.97 0.025 320) 100%)'
                        : 'var(--bg-raised)',
                    fontFamily: 'inherit', cursor: 'pointer', position: 'relative',
                  }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                      {o.ai && <Icon name="sparkle" size={11} style={{ color: 'var(--accent)' }}/>}
                      <span style={{ fontSize: 12.5, fontWeight: 600, color: audience===o.k?'var(--accent)':'var(--ink)' }}>{o.l}</span>
                      {o.ai && <span style={{ fontSize: 9, fontWeight: 700, padding: '1px 5px', borderRadius: 4, background: 'linear-gradient(135deg, var(--accent), var(--indigo))', color: '#fff', textTransform: 'uppercase', letterSpacing: '0.05em' }}>AI</span>}
                    </div>
                    <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 2 }}>{o.sub}</div>
                  </button>
                ))}
              </div>
            </Field>

            <Field label="Send" style={{ marginTop: 14 }}>
              <Select value="now" options={[
                { value: 'now', label: 'Send immediately' },
                { value: 'schedule', label: 'Schedule for later' },
                { value: 'optimal', label: 'Send at optimal time' },
              ]}/>
            </Field>
          </div>

          {/* Editor + preview */}
          <div style={{ display: 'grid', gridTemplateRows: '1fr auto', overflow: 'hidden' }}>
            <div style={{ padding: 20, overflow: 'auto' }}>
              {channel === 'email' && (
                <>
                  <Field label="Subject line" right={<button style={{
                    display: 'flex', alignItems: 'center', gap: 4,
                    fontSize: 11, fontWeight: 600, color: 'var(--accent-ink)',
                    background: 'transparent', border: 0, cursor: 'pointer', fontFamily: 'inherit',
                  }}><Icon name="sparkle" size={11}/>AI variants</button>}>
                    <Input value={subject} onChange={e => setSubject(e.target.value)}/>
                  </Field>
                  {/* AI subject variants */}
                  <div style={{
                    marginTop: 8, padding: 12,
                    border: '1px solid oklch(0.85 0.06 280)',
                    background: 'linear-gradient(135deg, oklch(0.985 0.01 280) 0%, oklch(0.97 0.025 320) 100%)',
                    borderRadius: 10,
                  }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
                      <Icon name="sparkle" size={11} style={{ color: 'var(--accent)' }}/>
                      <span style={{ fontSize: 10.5, fontWeight: 700, color: 'var(--accent-ink)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>AI suggestions · ranked by predicted open rate</span>
                    </div>
                    {[
                      { txt: 'Apparat — dein Ticket für Samstag 🎟', open: '72%', tone: 'warm' },
                      { txt: '⚡ Letzte Infos: Apparat · Berghain · 24. Mai', open: '68%', tone: 'urgent' },
                      { txt: 'Sa 24.05 · Apparat · Einlass ab 21:00', open: '64%', tone: 'concise' },
                    ].map((v, i) => (
                      <button key={i} onClick={() => setSubject(v.txt)} style={{
                        display: 'flex', alignItems: 'center', gap: 8, width: '100%',
                        padding: '7px 8px', border: 0, borderRadius: 6,
                        background: subject === v.txt ? 'var(--bg-raised)' : 'transparent',
                        cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left',
                        marginBottom: i < 2 ? 2 : 0,
                      }}>
                        <span style={{ fontSize: 12.5, flex: 1, fontWeight: subject === v.txt ? 600 : 400 }}>{v.txt}</span>
                        <Chip tone="neutral" size="sm">{v.tone}</Chip>
                        <span className="mono" style={{ fontSize: 11, fontWeight: 600, color: 'var(--success)' }}>{v.open}</span>
                      </button>
                    ))}
                  </div>
                  <Field label="Preview text" style={{ marginTop: 12 }}>
                    <Input value="Event day essentials — gates, entry, prohibited items"/>
                  </Field>
                  <Field label="Message" style={{ marginTop: 12 }}>
                    <div style={{ border: '1px solid var(--line)', borderRadius: 10, overflow: 'hidden' }}>
                      <div style={{ display: 'flex', gap: 2, padding: 6, background: 'var(--bg-sunken)', borderBottom: '1px solid var(--line)' }}>
                        {['B','I','U','·','H1','H2','·','link','image','·','{{name}}','{{event}}'].map((t, i) => (
                          <button key={i} style={{ padding: '4px 8px', border: 0, background: 'transparent', borderRadius: 5, cursor: 'pointer', fontSize: 11, fontFamily: t.startsWith('{{')?'var(--font-mono)':'inherit', color: 'var(--ink-2)' }}>{t}</button>
                        ))}
                      </div>
                      <div style={{ padding: 14, fontSize: 13, lineHeight: 1.6, minHeight: 180 }}>
                        Hey {'{{first_name}}'}, <br/><br/>
                        We can't wait to see you at Apparat · LP5 Live this Saturday at Berghain.<br/><br/>
                        <strong>Einlass ab 21:00.</strong> Please carry a valid photo ID matching your booking name.<br/><br/>
                        <em style={{ color: 'var(--ink-3)' }}>[+ Add section]</em>
                      </div>
                    </div>
                  </Field>
                </>
              )}
              {channel === 'sms' && (
                <Field label="Message (160 char limit per SMS)">
                  <Textarea rows={4} value="Desipass: Dein Apparat Ticket für Sa 24. Mai, Berghain. Einlass 21:00. Ticket beim Einlass zeigen. Info: desipass.de/help"/>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6, fontSize: 11, color: 'var(--ink-3)' }}>
                    <span>133 / 160 chars · 1 SMS</span>
                    <span>Est. cost 259,20 € · 3.240 × 0,08 €</span>
                  </div>
                </Field>
              )}
              {channel === 'push' && (
                <>
                  <Field label="Title"><Input value="Dein Apparat Ticket ist bereit"/></Field>
                  <Field label="Body" style={{ marginTop: 12 }}><Textarea rows={3} value="Einlass Samstag 21:00. Tippe, um Ticket und Gate zu sehen."/></Field>
                  <Field label="Tap action" style={{ marginTop: 12 }}>
                    <Select value="ticket" options={[
                      { value: 'ticket', label: 'Open ticket' },
                      { value: 'event', label: 'Open event page' },
                      { value: 'url', label: 'Custom URL' },
                    ]}/>
                  </Field>
                </>
              )}
            </div>
          </div>
        </div>

        <div style={{ padding: '14px 24px', borderTop: '1px solid var(--line)', display: 'flex', alignItems: 'center', gap: 8, background: 'var(--bg-raised)' }}>
          <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>
            Sending to <strong style={{ color: 'var(--ink-2)' }}>3,240 people</strong> · estimated delivery under 4 minutes
          </div>
          <div style={{ flex: 1 }}/>
          <Button variant="secondary" size="md">Save as draft</Button>
          <Button variant="secondary" size="md" icon="eye">Send test</Button>
          <Button variant="primary" size="md" icon="send">Send campaign</Button>
        </div>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────────────────────
// Overview — cross-channel dashboard
// ─────────────────────────────────────────────────────────────────────────────
const MessagesOverview = ({ setRoute }) => {
  const channels = [
    { k: 'email', icon: 'mail', label: 'Email', sent: '184k', open: '68.4%', click: '22.1%', tone: 'var(--ink)', route: 'messages-email' },
    { k: 'whatsapp', icon: 'whatsapp', label: 'WhatsApp', sent: '42.1k', open: '94.2%', click: '38.6%', tone: 'oklch(0.62 0.16 150)', route: 'messages-whatsapp' },
    { k: 'inbox', icon: 'message', label: 'Inbox', sent: '12 unread', open: '4 awaiting', click: 'Avg 7m reply', tone: 'var(--accent)', route: 'messages-inbox' },
  ];
  const recent = [
    { ch: 'whatsapp', who: 'Apparat ticketholders', subject: 'Reminder template · Einlass 21:00', stat: 'Delivered 3,240 · Read 3,051', when: '2h ago' },
    { ch: 'email', who: 'Newsletter subscribers', subject: '⚡ Last 200 Balkon tickets', stat: 'Open 55% · Click 13%', when: 'yesterday' },
    { ch: 'whatsapp', who: 'Hot Chip · Past buyers', subject: 'Pre-sale broadcast · template_event_announce_de', stat: 'Delivered 8,200 · Read 7,640', when: 'yesterday' },
    { ch: 'inbox', who: 'Sara K.', subject: 'Question about VIP add-on', stat: 'Email reply pending', when: '3h ago' },
    { ch: 'email', who: 'All ticketholders', subject: 'Dein Festivalband — bitte aufbewahren', stat: 'Open 70% · Click 10%', when: '1w ago' },
  ];
  return (
    <div style={{ padding: '24px 36px 60px', maxWidth: 1400, margin: '0 auto' }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', marginBottom: 16 }}>
        <div>
          <h1 className="display" style={{ margin: 0, fontSize: 28, fontWeight: 500, letterSpacing: '-0.02em' }}>Messages</h1>
          <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 4 }}>Cross-channel messaging — Email, WhatsApp, and unified Inbox for replies.</div>
        </div>
        <div style={{ flex: 1 }}/>
        <Button variant="secondary" size="md" icon="file" onClick={() => setRoute('messages-email')}>Email campaigns</Button>
        <Button variant="primary" size="md" icon="whatsapp" onClick={() => setRoute('messages-whatsapp')} style={{ marginLeft: 8 }}>WhatsApp broadcasts</Button>
      </div>

      {/* AI prompt — natural language messaging */}
      <Card pad={16} style={{
        marginBottom: 18,
        border: '1px solid oklch(0.85 0.06 280)',
        background: 'linear-gradient(135deg, oklch(0.985 0.01 280) 0%, oklch(0.97 0.025 320) 100%)',
        display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 14, alignItems: 'center',
      }}>
        <div style={{ width: 36, height: 36, borderRadius: 10, background: 'linear-gradient(135deg, var(--accent), var(--indigo))', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name="sparkle" size={16}/>
        </div>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <span style={{ fontSize: 13, fontWeight: 700 }}>Ask AI to message your audience</span>
            <Chip tone="accent" size="sm">DE · EN · HI · PA</Chip>
          </div>
          <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginTop: 2 }}>"Send a WhatsApp reminder to all Apparat ticketholders 2h before doors" — AI picks channel, audience, template, and schedules.</div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <Input placeholder="Describe what you want to send…" style={{ width: 380 }}/>
          <Button variant="primary" size="md" icon="sparkle">Compose</Button>
        </div>
      </Card>

      {/* Channel cards */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14, marginBottom: 18 }}>
        {channels.map(c => (
          <Card key={c.k} hover onClick={() => setRoute(c.route)} style={{ cursor: 'pointer' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
              <div style={{ width: 32, height: 32, borderRadius: 9, background: 'color-mix(in oklch, ' + c.tone + ' 12%, var(--bg-raised))', color: c.tone, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name={c.icon} size={16}/>
              </div>
              <div style={{ fontSize: 14.5, fontWeight: 600 }}>{c.label}</div>
              <div style={{ flex: 1 }}/>
              <Icon name="chevronRight" size={14} style={{ color: 'var(--ink-4)' }}/>
            </div>
            <div className="mono" style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.01em' }}>{c.sent}</div>
            <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginTop: 2 }}>this month</div>
            <div style={{ display: 'flex', gap: 16, marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--line)' }}>
              <div>
                <div style={{ fontSize: 10.5, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 600 }}>{c.k === 'inbox' ? 'Open' : 'Open / Read'}</div>
                <div className="mono" style={{ fontSize: 13.5, fontWeight: 600, marginTop: 2 }}>{c.open}</div>
              </div>
              <div>
                <div style={{ fontSize: 10.5, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 600 }}>{c.k === 'inbox' ? 'Reply' : 'Click'}</div>
                <div className="mono" style={{ fontSize: 13.5, fontWeight: 600, marginTop: 2 }}>{c.click}</div>
              </div>
            </div>
          </Card>
        ))}
      </div>

      {/* Recent activity + connect status */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 14 }}>
        <Card pad={0}>
          <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--line)', display: 'flex', alignItems: 'center' }}>
            <div style={{ fontSize: 13.5, fontWeight: 600 }}>Recent activity</div>
            <div style={{ flex: 1 }}/>
            <Button variant="ghost" size="sm">View all</Button>
          </div>
          {recent.map((r, i) => {
            const ch = channels.find(c => c.k === r.ch) || channels[0];
            return (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 18px', borderBottom: i < recent.length - 1 ? '1px solid var(--line)' : 'none' }}>
                <div style={{ width: 28, height: 28, borderRadius: 8, background: 'color-mix(in oklch, ' + ch.tone + ' 10%, var(--bg-raised))', color: ch.tone, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <Icon name={ch.icon} size={13}/>
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.subject}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginTop: 2 }}>{r.who} · {r.stat}</div>
                </div>
                <div style={{ fontSize: 11, color: 'var(--ink-4)', flexShrink: 0 }}>{r.when}</div>
              </div>
            );
          })}
        </Card>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <Card style={{
            border: '1px solid oklch(0.85 0.06 280)',
            background: 'linear-gradient(135deg, oklch(0.985 0.01 280) 0%, oklch(0.97 0.025 320) 100%)',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 10 }}>
              <Icon name="sparkle" size={12} style={{ color: 'var(--accent)' }}/>
              <span style={{ fontSize: 10.5, fontWeight: 700, color: 'var(--accent-ink)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>AI weekly digest</span>
            </div>
            {[
              { l: 'Best-performing channel', v: 'WhatsApp · 94% read' },
              { l: 'Top winning subject', v: 'Emoji opener +12%' },
              { l: 'Audience grew', v: '+1,420 opt-ins' },
              { l: 'AI revenue impact', v: '+€18.4k', strong: true },
            ].map((m, i) => (
              <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', borderBottom: i < 3 ? '1px solid oklch(0.88 0.05 280 / 0.5)' : 'none' }}>
                <span style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>{m.l}</span>
                <span className="mono" style={{ fontSize: 11.5, fontWeight: m.strong ? 700 : 600, color: m.strong ? 'var(--success)' : 'var(--ink)' }}>{m.v}</span>
              </div>
            ))}
            <Button variant="secondary" size="sm" icon="external" style={{ marginTop: 12, width: '100%' }} onClick={() => setRoute && setRoute('intelligence')}>Open Intelligence</Button>
          </Card>
          <Card>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
              <Icon name="whatsapp" size={14} style={{ color: 'oklch(0.62 0.16 150)' }}/>
              <div style={{ fontSize: 13, fontWeight: 600 }}>WhatsApp Business</div>
              <div style={{ flex: 1 }}/>
              <Chip tone="success" size="sm" icon="check">Connected</Chip>
            </div>
            <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginBottom: 12 }}>+49 30 1234 5678 · Tier 1k/24h</div>
            <Divider style={{ margin: '0 0 10px' }}/>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: 12 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}><span style={{ color: 'var(--ink-3)' }}>Approved templates</span><span className="mono" style={{ fontWeight: 500 }}>14</span></div>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}><span style={{ color: 'var(--ink-3)' }}>Opted-in audience</span><span className="mono" style={{ fontWeight: 500 }}>28,420</span></div>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}><span style={{ color: 'var(--ink-3)' }}>This month spend</span><span className="mono" style={{ fontWeight: 500 }}>312,40 €</span></div>
            </div>
          </Card>

          <Card>
            <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 4 }}>Sender domain</div>
            <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginBottom: 12 }}>Email deliverability</div>
            {[
              { l: 'desipass.de', s: 'SPF · DKIM · DMARC', ok: true },
              { l: 'rhythm-events.de', s: 'DMARC failing', ok: false },
            ].map((d, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 0', borderBottom: i < 1 ? '1px solid var(--line)' : 'none' }}>
                <div style={{ flex: 1 }}>
                  <div className="mono" style={{ fontSize: 12, fontWeight: 500 }}>{d.l}</div>
                  <div style={{ fontSize: 10.5, color: 'var(--ink-3)' }}>{d.s}</div>
                </div>
                {d.ok
                  ? <Chip tone="success" size="sm" icon="check">OK</Chip>
                  : <Chip tone="warning" size="sm" icon="warning">Fix</Chip>}
              </div>
            ))}
          </Card>
        </div>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────────────────────
// Inbox — unified replies (email + whatsapp)
// ─────────────────────────────────────────────────────────────────────────────
const MessagesInbox = ({ setRoute }) => {
  const threads = [
    { id: 1, ch: 'whatsapp', who: 'Sara König', avatar: 'SK', last: 'Hi, can I transfer my ticket to my sister?', event: 'Apparat · Berghain', when: '3m', unread: 2, status: 'open', aiTag: 'Transfer', aiTone: 'accent' },
    { id: 2, ch: 'email', who: 'Tobias Lang', avatar: 'TL', last: 'Question about VIP add-on pricing', event: 'Hot Chip · Astra', when: '12m', unread: 1, status: 'open', aiTag: 'Sales', aiTone: 'success' },
    { id: 3, ch: 'whatsapp', who: 'Priya Sharma', avatar: 'PS', last: 'Refund request — booking #B-48201', event: 'Roosevelt · Columbiahalle', when: '47m', unread: 1, status: 'open', aiTag: 'Refund · risk', aiTone: 'warning' },
    { id: 4, ch: 'whatsapp', who: 'Max Becker', avatar: 'MB', last: 'Got my QR — danke!', event: 'Apparat · Berghain', when: '2h', unread: 0, status: 'open', aiTag: 'Resolved', aiTone: 'neutral' },
    { id: 5, ch: 'email', who: 'Lena Vogt', avatar: 'LV', last: 'Group of 6 — accessible seating', event: 'Tempelhof Open Air', when: '4h', unread: 0, status: 'open', aiTag: 'Accessibility', aiTone: 'accent' },
    { id: 6, ch: 'email', who: 'Daniel Roth', avatar: 'DR', last: 'Thanks, all sorted!', event: 'Fred again..', when: 'yesterday', unread: 0, status: 'closed', aiTag: 'Resolved', aiTone: 'neutral' },
  ];
  const [selected, setSelected] = React.useState(1);
  const active = threads.find(t => t.id === selected);

  const conversation = [
    { from: 'them', body: 'Hi! I bought 2 tickets for Apparat on 24. Mai but my friend can\'t make it.', when: '14:02' },
    { from: 'them', body: 'Can I transfer one ticket to my sister? Her name is Anna König.', when: '14:02' },
    { from: 'us', body: 'Hi Sara — yes, ticket transfer is free up to 24h before the event. I\'ll send the transfer link to your email shortly.', when: '14:08', agent: 'Priya M.' },
    { from: 'them', body: 'Perfect, thanks! 🙏', when: '14:09' },
  ];

  return (
    <div style={{ padding: 0, height: 'calc(100vh - 56px)', display: 'grid', gridTemplateColumns: '320px 1fr 280px', borderTop: '1px solid var(--line)' }}>
      {/* Thread list */}
      <div style={{ borderRight: '1px solid var(--line)', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        <div style={{ padding: '14px 16px', borderBottom: '1px solid var(--line)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
            <h2 style={{ margin: 0, fontSize: 16, fontWeight: 600 }}>Inbox</h2>
            <Chip tone="accent" size="sm">12 unread</Chip>
          </div>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 6,
            padding: '6px 10px', borderRadius: 8, marginBottom: 10,
            border: '1px solid oklch(0.85 0.06 280)',
            background: 'linear-gradient(135deg, oklch(0.985 0.01 280) 0%, oklch(0.97 0.025 320) 100%)',
          }}>
            <Icon name="sparkle" size={11} style={{ color: 'var(--accent)' }}/>
            <span style={{ fontSize: 11, fontWeight: 600, flex: 1 }}>AI can auto-resolve <strong>4 threads</strong></span>
            <Button variant="ghost" size="sm">Review</Button>
          </div>
          <Tabs value="open" onChange={()=>{}} options={[
            { value: 'open', label: 'Open', count: 5 },
            { value: 'mine', label: 'Mine', count: 2 },
            { value: 'auto', label: 'AI auto', count: 4 },
            { value: 'closed', label: 'Closed' },
          ]}/>
        </div>
        <div style={{ flex: 1, overflow: 'auto' }}>
          {threads.map(t => {
            const sel = t.id === selected;
            return (
              <button key={t.id} onClick={() => setSelected(t.id)} style={{
                display: 'flex', alignItems: 'flex-start', gap: 10, width: '100%',
                padding: '12px 14px', border: 0, textAlign: 'left', cursor: 'pointer',
                background: sel ? 'var(--bg-muted)' : 'transparent',
                borderLeft: sel ? '2px solid var(--accent)' : '2px solid transparent',
                borderBottom: '1px solid var(--line)', fontFamily: 'inherit',
              }}>
                <div style={{ position: 'relative', flexShrink: 0 }}>
                  <Avatar name={t.who} size={32}/>
                  <div style={{
                    position: 'absolute', right: -2, bottom: -2,
                    width: 14, height: 14, borderRadius: 99,
                    background: t.ch === 'whatsapp' ? 'oklch(0.62 0.16 150)' : 'var(--ink-2)',
                    color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
                    border: '2px solid var(--bg)',
                  }}>
                    <Icon name={t.ch === 'whatsapp' ? 'whatsapp' : 'mail'} size={8}/>
                  </div>
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                    <span style={{ fontSize: 12.5, fontWeight: t.unread ? 600 : 500, flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{t.who}</span>
                    <span style={{ fontSize: 10.5, color: 'var(--ink-4)' }}>{t.when}</span>
                  </div>
                  <div style={{ fontSize: 11.5, color: t.unread ? 'var(--ink-2)' : 'var(--ink-3)', marginTop: 2, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', fontWeight: t.unread ? 500 : 400 }}>{t.last}</div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 5, marginTop: 4 }}>
                    <Icon name="calendar" size={9} style={{ color: 'var(--ink-4)' }}/>
                    <span style={{ fontSize: 10.5, color: 'var(--ink-4)', flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{t.event}</span>
                    {t.unread > 0 && <span style={{ fontSize: 9.5, fontWeight: 700, padding: '1px 6px', borderRadius: 99, background: 'var(--accent)', color: '#fff' }}>{t.unread}</span>}
                  </div>
                  {t.aiTag && (
                    <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 5 }}>
                      <Icon name="sparkle" size={8} style={{ color: 'var(--accent)' }}/>
                      <span style={{
                        fontSize: 9.5, fontWeight: 600,
                        padding: '1px 6px', borderRadius: 99,
                        background: t.aiTone === 'warning' ? 'oklch(0.95 0.06 75)' : t.aiTone === 'success' ? 'oklch(0.95 0.05 150)' : t.aiTone === 'accent' ? 'var(--accent-soft)' : 'var(--bg-muted)',
                        color: t.aiTone === 'warning' ? 'oklch(0.4 0.12 75)' : t.aiTone === 'success' ? 'oklch(0.35 0.1 150)' : t.aiTone === 'accent' ? 'var(--accent-ink)' : 'var(--ink-3)',
                      }}>{t.aiTag}</span>
                    </div>
                  )}
                </div>
              </button>
            );
          })}
        </div>
      </div>

      {/* Conversation */}
      <div style={{ display: 'flex', flexDirection: 'column', overflow: 'hidden', background: 'var(--bg-sunken)' }}>
        <div style={{ padding: '12px 20px', borderBottom: '1px solid var(--line)', background: 'var(--bg)', display: 'flex', alignItems: 'center', gap: 10 }}>
          <Avatar name={active?.who || ''} size={32}/>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13.5, fontWeight: 600 }}>{active?.who}</div>
            <div style={{ fontSize: 11, color: 'var(--ink-3)', display: 'flex', alignItems: 'center', gap: 5 }}>
              <Icon name={active?.ch === 'whatsapp' ? 'whatsapp' : 'mail'} size={10}/>
              {active?.ch === 'whatsapp' ? 'WhatsApp · +49 176 ••••84' : 'Email · sara@…'}
              · {active?.event}
            </div>
          </div>
          <Button variant="ghost" size="sm" icon="ticket">Open booking</Button>
          <Button variant="secondary" size="sm" icon="check">Mark resolved</Button>
        </div>
        <div style={{ flex: 1, overflow: 'auto', padding: '20px 24px', display: 'flex', flexDirection: 'column', gap: 12 }}>
          <div style={{ alignSelf: 'center', fontSize: 11, color: 'var(--ink-4)', padding: '4px 10px', borderRadius: 99, background: 'var(--bg)', border: '1px solid var(--line)' }}>Today</div>
          {conversation.map((m, i) => {
            const us = m.from === 'us';
            return (
              <div key={i} style={{ display: 'flex', justifyContent: us ? 'flex-end' : 'flex-start' }}>
                <div style={{ maxWidth: '70%' }}>
                  <div style={{
                    padding: '10px 14px', borderRadius: us ? '14px 14px 4px 14px' : '14px 14px 14px 4px',
                    background: us ? 'var(--ink)' : 'var(--bg)',
                    color: us ? 'var(--bg)' : 'var(--ink)',
                    border: us ? 'none' : '1px solid var(--line)',
                    fontSize: 13.5, lineHeight: 1.5,
                  }}>{m.body}</div>
                  <div style={{ fontSize: 10.5, color: 'var(--ink-4)', marginTop: 4, textAlign: us ? 'right' : 'left' }}>
                    {m.when}{m.agent ? ' · ' + m.agent : ''}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
        <div style={{ padding: '12px 20px', borderTop: '1px solid var(--line)', background: 'var(--bg)' }}>
          {/* AI suggested reply */}
          <div style={{
            border: '1px solid oklch(0.85 0.06 280)',
            background: 'linear-gradient(135deg, oklch(0.985 0.01 280) 0%, oklch(0.97 0.025 320) 100%)',
            borderRadius: 12, padding: 12, marginBottom: 10,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
              <div style={{ width: 22, height: 22, borderRadius: 6, background: 'linear-gradient(135deg, var(--accent), var(--indigo))', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name="sparkle" size={11}/>
              </div>
              <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--accent-ink)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>AI suggested reply</span>
              <Chip tone="success" size="sm">Refund · 92%</Chip>
              <Chip tone="neutral" size="sm">German · DE</Chip>
              <div style={{ flex: 1 }}/>
              <span style={{ fontSize: 10.5, color: 'var(--ink-3)' }}>Based on 1,240 similar threads</span>
            </div>
            <div style={{ fontSize: 13, lineHeight: 1.55, color: 'var(--ink)', padding: '0 2px' }}>
              Hi Sara, klar — Ticket-Transfer ist bis 24h vor dem Event kostenlos. Ich schicke dir gleich den Transfer-Link per E-Mail, du gibst dort einfach Annas Namen und ihre E-Mail-Adresse ein. Sie bekommt das Ticket dann direkt. Liebe Grüße!
            </div>
            <div style={{ display: 'flex', gap: 6, marginTop: 10, paddingTop: 10, borderTop: '1px solid oklch(0.85 0.06 280 / 0.5)' }}>
              <Button variant="primary" size="sm" icon="check">Use draft</Button>
              <Button variant="secondary" size="sm" icon="refresh">Regenerate</Button>
              <Button variant="ghost" size="sm" icon="edit">Edit tone</Button>
              <div style={{ flex: 1 }}/>
              <Button variant="ghost" size="sm" icon="link">Auto-attach: transfer link</Button>
            </div>
          </div>
          <div style={{ border: '1px solid var(--line)', borderRadius: 12, background: 'var(--bg-raised)', padding: 10 }}>
            <Textarea rows={2} placeholder="Reply to Sara on WhatsApp…" style={{ border: 0, background: 'transparent', padding: 0 }}/>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 6 }}>
              <Button variant="ghost" size="sm" icon="image"/>
              <Button variant="ghost" size="sm" icon="ticket">Send ticket</Button>
              <Button variant="ghost" size="sm" icon="file">Template</Button>
              <div style={{ flex: 1 }}/>
              <span style={{ fontSize: 11, color: 'var(--ink-3)' }}>Reply window: 21h 12m</span>
              <Button variant="primary" size="sm" icon="send">Send</Button>
            </div>
          </div>
        </div>
      </div>

      {/* Right rail — context */}
      <div style={{ borderLeft: '1px solid var(--line)', overflow: 'auto', padding: 16, display: 'flex', flexDirection: 'column', gap: 14 }}>
        {/* AI triage */}
        <div style={{
          padding: 12, borderRadius: 10,
          border: '1px solid oklch(0.85 0.06 280)',
          background: 'linear-gradient(135deg, oklch(0.985 0.01 280) 0%, oklch(0.97 0.025 320) 100%)',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
            <Icon name="sparkle" size={11} style={{ color: 'var(--accent)' }}/>
            <span style={{ fontSize: 10, fontWeight: 700, color: 'var(--accent-ink)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>AI triage</span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: 11.5 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}><span style={{ color: 'var(--ink-3)' }}>Intent</span><Chip tone="accent" size="sm">Ticket transfer</Chip></div>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}><span style={{ color: 'var(--ink-3)' }}>Sentiment</span><Chip tone="success" size="sm">Positive</Chip></div>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}><span style={{ color: 'var(--ink-3)' }}>Urgency</span><span style={{ fontWeight: 600 }}>Low · 14d to event</span></div>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}><span style={{ color: 'var(--ink-3)' }}>Refund risk</span><span style={{ fontWeight: 600, color: 'var(--success)' }}>Very low</span></div>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}><span style={{ color: 'var(--ink-3)' }}>Suggested SLA</span><span style={{ fontWeight: 600 }}>Within 4h</span></div>
          </div>
          <div style={{ marginTop: 10, paddingTop: 10, borderTop: '1px solid oklch(0.85 0.06 280 / 0.5)', fontSize: 11, color: 'var(--ink-3)', lineHeight: 1.5 }}>
            <strong style={{ color: 'var(--ink-2)' }}>Summary:</strong> Asking to transfer 1 of 2 GA tickets to her sister Anna. Eligible (event &gt; 24h away). One-click resolution available.
          </div>
        </div>

        <div>
          <div style={{ fontSize: 10.5, fontWeight: 700, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8 }}>Customer</div>
          <div style={{ fontSize: 13, fontWeight: 600 }}>{active?.who}</div>
          <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginTop: 2 }}>4 bookings · since Sept 2024</div>
        </div>
        <Divider/>
        <div>
          <div style={{ fontSize: 10.5, fontWeight: 700, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8 }}>Active booking</div>
          <Card pad={12}>
            <div style={{ fontSize: 12.5, fontWeight: 600 }}>Apparat · LP5 Live</div>
            <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 2 }}>Berghain · Sa 24. Mai</div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8, fontSize: 11.5 }}>
              <span style={{ color: 'var(--ink-3)' }}>2 × GA</span>
              <span className="mono" style={{ fontWeight: 600 }}>78,00 €</span>
            </div>
          </Card>
        </div>
        <div>
          <div style={{ fontSize: 10.5, fontWeight: 700, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8 }}>Quick actions</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            <Button variant="secondary" size="sm" icon="link">Send transfer link</Button>
            <Button variant="secondary" size="sm" icon="cash">Issue refund</Button>
            <Button variant="secondary" size="sm" icon="user">Assign to teammate</Button>
          </div>
        </div>
        <div>
          <div style={{ fontSize: 10.5, fontWeight: 700, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8 }}>Tags</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5 }}>
            <Chip tone="neutral" size="sm">transfer</Chip>
            <Chip tone="neutral" size="sm">repeat-buyer</Chip>
            <Chip tone="neutral" size="sm">+ add</Chip>
          </div>
        </div>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────────────────────
// WhatsApp — broadcasts, templates, audience
// ─────────────────────────────────────────────────────────────────────────────
const MessagesWhatsApp = ({ setRoute }) => {
  const [tab, setTab] = React.useState('broadcasts');

  const broadcasts = [
    { id: 1, name: 'Apparat — Einlass reminder', template: 'event_reminder_de', audience: 'Apparat ticketholders', delivered: 3240, read: 3051, clicked: 842, status: 'sent', when: '2h ago' },
    { id: 2, name: 'Hot Chip pre-sale opening', template: 'event_announce_de', audience: 'Past buyers · Hot Chip', delivered: 8200, read: 7640, clicked: 2120, status: 'sent', when: 'yesterday' },
    { id: 3, name: 'Tempelhof — gates info', template: 'event_logistics_de', audience: 'All ticketholders', scheduled: '28. Apr, 12:00', status: 'scheduled', when: 'in 2 days' },
    { id: 4, name: 'Roosevelt last-call', template: 'urgency_lastcall_de', audience: 'Cart abandoners', status: 'draft', when: 'Draft' },
  ];

  const templates = [
    { name: 'event_reminder_de', cat: 'Utility', lang: 'DE', status: 'approved', preview: 'Hi {{1}}, dein Ticket für {{2}} am {{3}}. Einlass ab {{4}}.' },
    { name: 'event_announce_de', cat: 'Marketing', lang: 'DE', status: 'approved', preview: '🎟 {{1}} — pre-sale jetzt offen. Sichere dein Ticket: {{2}}' },
    { name: 'event_logistics_de', cat: 'Utility', lang: 'DE', status: 'approved', preview: 'Hi {{1}}, hier die Einlass-Infos für {{2}}: Gate {{3}}, ab {{4}}.' },
    { name: 'order_confirmation_de', cat: 'Utility', lang: 'DE', status: 'approved', preview: 'Buchung bestätigt — {{1}} × {{2}}. Ticket: {{3}}' },
    { name: 'urgency_lastcall_de', cat: 'Marketing', lang: 'DE', status: 'pending', preview: '⚡ Letzte 200 Tickets für {{1}}. Jetzt sichern: {{2}}' },
    { name: 'feedback_post_event', cat: 'Marketing', lang: 'DE', status: 'rejected', preview: 'Wie war {{1}}? Teile dein Feedback: {{2}}' },
  ];

  return (
    <div style={{ padding: '24px 36px 60px', maxWidth: 1400, margin: '0 auto' }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', marginBottom: 20 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
            <Icon name="whatsapp" size={18} style={{ color: 'oklch(0.62 0.16 150)' }}/>
            <span style={{ fontSize: 11, fontWeight: 700, color: 'oklch(0.45 0.16 150)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>WhatsApp Business</span>
            <Chip tone="success" size="sm" icon="check">Connected</Chip>
          </div>
          <h1 className="display" style={{ margin: 0, fontSize: 28, fontWeight: 500, letterSpacing: '-0.02em' }}>WhatsApp broadcasts</h1>
          <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 4 }}>Send pre-approved templates to opted-in audiences. 94% read rate.</div>
        </div>
        <div style={{ flex: 1 }}/>
        <Button variant="secondary" size="md" icon="file">Templates</Button>
        <Button variant="primary" size="md" icon="plus" style={{ marginLeft: 8 }}>New broadcast</Button>
      </div>

      {/* Stats */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginBottom: 20 }}>
        <Card><Stat label="Sent this month" value="42.1k" delta="+38%" icon="send" positive/></Card>
        <Card><Stat label="Read rate" value="94.2%" delta="+1.8%" icon="eye" positive/></Card>
        <Card><Stat label="Click-through" value="38.6%" delta="+4.2%" icon="link" positive/></Card>
        <Card><Stat label="Opted-in audience" value="28.4k" sub="+1.2k this week" icon="users"/></Card>
      </div>

      {/* AI co-pilot strip — actionable suggestions */}
      <div style={{
        display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 14, alignItems: 'center',
        padding: '14px 18px', marginBottom: 20,
        border: '1px solid oklch(0.85 0.06 280)',
        background: 'linear-gradient(135deg, oklch(0.985 0.01 280) 0%, oklch(0.97 0.025 320) 100%)',
        borderRadius: 12,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 32, height: 32, borderRadius: 9, background: 'linear-gradient(135deg, var(--accent), var(--indigo))', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon name="sparkle" size={15}/>
          </div>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <span style={{ fontSize: 13, fontWeight: 700 }}>WhatsApp AI co-pilot</span>
              <Chip tone="accent" size="sm">3 suggestions</Chip>
            </div>
            <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginTop: 2 }}>Updated 4 minutes ago · based on your last 90 days</div>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
          {[
            { icon: 'clock', l: 'Best send window today', v: '18:30 – 20:00 CET', tone: 'success' },
            { icon: 'users', l: 'Hot Chip lookalike ready', v: '8,240 people · +18%', tone: 'accent' },
            { icon: 'warning', l: 'Template_announce nearing limit', v: '24h cooldown', tone: 'warning' },
          ].map((s, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 12px', borderRadius: 8, background: 'var(--bg)', border: '1px solid var(--line)' }}>
              <Icon name={s.icon} size={12} style={{ color: s.tone === 'success' ? 'var(--success)' : s.tone === 'warning' ? 'var(--warning)' : 'var(--accent)' }}/>
              <div>
                <div style={{ fontSize: 10.5, color: 'var(--ink-3)', fontWeight: 500 }}>{s.l}</div>
                <div style={{ fontSize: 12, fontWeight: 600 }}>{s.v}</div>
              </div>
            </div>
          ))}
        </div>
        <Button variant="primary" size="sm" icon="sparkle">Open AI plan</Button>
      </div>

      <Tabs value={tab} onChange={setTab} options={[
        { value: 'broadcasts', label: 'Broadcasts', count: broadcasts.length },
        { value: 'templates', label: 'Templates', count: templates.length },
        { value: 'audience', label: 'Audience' },
        { value: 'settings', label: 'Settings' },
      ]}/>

      {tab === 'broadcasts' && (
        <>
        {/* AI suggested broadcast */}
        <Card pad={0} style={{
          marginTop: 16, marginBottom: 14,
          border: '1px solid oklch(0.85 0.06 280)',
          background: 'linear-gradient(135deg, oklch(0.985 0.01 280) 0%, oklch(0.97 0.025 320) 100%)',
          overflow: 'hidden',
        }}>
          <div style={{ padding: '14px 18px', display: 'flex', alignItems: 'center', gap: 10, borderBottom: '1px solid oklch(0.88 0.05 280)' }}>
            <Icon name="sparkle" size={13} style={{ color: 'var(--accent)' }}/>
            <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--accent-ink)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>AI suggested broadcast</span>
            <Chip tone="success" size="sm">Send window opens in 2h 14m</Chip>
            <div style={{ flex: 1 }}/>
            <Button variant="ghost" size="sm">Dismiss</Button>
          </div>
          <div style={{ padding: 18, display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr auto', gap: 18, alignItems: 'center' }}>
            <div>
              <div style={{ fontSize: 10.5, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 600 }}>Event · Template</div>
              <div style={{ fontSize: 14, fontWeight: 600, marginTop: 4 }}>Hot Chip · Astra · Pre-sale opening</div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 2, padding: '2px 6px', borderRadius: 5, background: 'var(--bg-muted)', display: 'inline-block' }}>event_announce_de</div>
            </div>
            <div>
              <div style={{ fontSize: 10.5, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 600 }}>AI audience</div>
              <div style={{ fontSize: 13, fontWeight: 600, marginTop: 4 }}>Cross-event · Punjabi DACH</div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--success)', marginTop: 2, fontWeight: 600 }}>8,240 people · +18% lift</div>
            </div>
            <div>
              <div style={{ fontSize: 10.5, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 600 }}>Predicted outcome</div>
              <div className="mono" style={{ fontSize: 13, fontWeight: 600, marginTop: 4 }}>2,120 clicks · 680 buys</div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--success)', marginTop: 2, fontWeight: 600 }}>+€23,800 revenue</div>
            </div>
            <div style={{ display: 'flex', gap: 6 }}>
              <Button variant="primary" size="md" icon="send">Review &amp; send</Button>
            </div>
          </div>
        </Card>

        <Card pad={0}>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
            <thead>
              <tr style={{ background: 'var(--bg-sunken)', borderBottom: '1px solid var(--line)' }}>
                {['Broadcast','Template','Audience','Performance','Status',''].map(h => (
                  <th key={h} style={{ padding: '10px 14px', textAlign: 'left', fontSize: 11, fontWeight: 600, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {broadcasts.map((b, i) => (
                <tr key={b.id} style={{ borderBottom: i < broadcasts.length - 1 ? '1px solid var(--line)' : 'none', height: 68 }}>
                  <td style={{ padding: '10px 14px' }}>
                    <div style={{ fontSize: 13.5, fontWeight: 600 }}>{b.name}</div>
                    <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 2 }}>{b.when}</div>
                  </td>
                  <td style={{ padding: '10px 14px' }}><span className="mono" style={{ fontSize: 12, padding: '2px 6px', borderRadius: 5, background: 'var(--bg-muted)' }}>{b.template}</span></td>
                  <td style={{ padding: '10px 14px', fontSize: 12.5 }}>
                    {b.audience}
                    {b.delivered && <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 2 }}><span className="mono">{b.delivered.toLocaleString()}</span> recipients</div>}
                  </td>
                  <td style={{ padding: '10px 14px', minWidth: 200 }}>
                    {b.status === 'sent' ? (
                      <div>
                        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, marginBottom: 4 }}>
                          <span style={{ color: 'var(--ink-3)' }}>Read {Math.round((b.read/b.delivered)*100)}% · Click {Math.round((b.clicked/b.delivered)*100)}%</span>
                        </div>
                        <div style={{ height: 5, borderRadius: 99, background: 'var(--bg-muted)', position: 'relative', overflow: 'hidden' }}>
                          <div style={{ position: 'absolute', left: 0, top: 0, height: '100%', width: `${(b.read/b.delivered)*100}%`, background: 'oklch(0.62 0.16 150)' }}/>
                          <div style={{ position: 'absolute', left: 0, top: 0, height: '100%', width: `${(b.clicked/b.delivered)*100}%`, background: 'var(--accent)' }}/>
                        </div>
                      </div>
                    ) : b.status === 'scheduled' ? (
                      <span style={{ fontSize: 12, color: 'var(--ink-3)', display:'flex', alignItems:'center', gap: 5 }}><Icon name="clock" size={11}/>{b.scheduled}</span>
                    ) : (
                      <span style={{ fontSize: 12, color: 'var(--ink-4)' }}>—</span>
                    )}
                  </td>
                  <td style={{ padding: '10px 14px' }}><StatusBadge status={b.status}/></td>
                  <td style={{ padding: '10px 14px', textAlign: 'right' }}><Button variant="ghost" size="sm" icon="more"/></td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>
        </>
      )}

      {tab === 'templates' && (
        <>
        {/* AI template generator */}
        <Card pad={16} style={{
          marginTop: 16, marginBottom: 14,
          border: '1px solid oklch(0.85 0.06 280)',
          background: 'linear-gradient(135deg, oklch(0.985 0.01 280) 0%, oklch(0.97 0.025 320) 100%)',
          display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 14, alignItems: 'center',
        }}>
          <div style={{ width: 36, height: 36, borderRadius: 10, background: 'linear-gradient(135deg, var(--accent), var(--indigo))', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon name="sparkle" size={16}/>
          </div>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <span style={{ fontSize: 13, fontWeight: 700 }}>Generate a template with AI</span>
              <Chip tone="accent" size="sm">DE · EN · HI · PA · TR</Chip>
            </div>
            <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginTop: 2 }}>Describe the message in one line — AI drafts the template, picks variables, and submits for Meta approval (typically 2–24h).</div>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <Input placeholder="e.g. last call reminder for Punjabi concert in Berlin" style={{ width: 360 }}/>
            <Button variant="primary" size="md" icon="sparkle">Generate</Button>
          </div>
        </Card>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }}>
          {templates.map((t, i) => (
            <Card key={i}>
              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10, marginBottom: 10 }}>
                <div style={{ flex: 1 }}>
                  <div className="mono" style={{ fontSize: 12.5, fontWeight: 600 }}>{t.name}</div>
                  <div style={{ display: 'flex', gap: 6, marginTop: 6 }}>
                    <Chip tone="neutral" size="sm">{t.cat}</Chip>
                    <Chip tone="neutral" size="sm">{t.lang}</Chip>
                    {t.status === 'approved' && <Chip tone="success" size="sm" icon="check">Approved</Chip>}
                    {t.status === 'pending' && <Chip tone="warning" size="sm" icon="clock">In review</Chip>}
                    {t.status === 'rejected' && <Chip tone="danger" size="sm" icon="x">Rejected</Chip>}
                  </div>
                </div>
                <Button variant="ghost" size="sm" icon="more"/>
              </div>
              <div style={{ padding: 12, borderRadius: 10, background: 'oklch(0.96 0.02 150 / 0.4)', border: '1px solid oklch(0.85 0.04 150)', fontSize: 12.5, lineHeight: 1.5, color: 'var(--ink-2)' }}>
                {t.preview}
              </div>
              {t.status === 'approved' && (
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 10, paddingTop: 10, borderTop: '1px solid var(--line)' }}>
                  <Icon name="sparkle" size={11} style={{ color: 'var(--accent)' }}/>
                  <span style={{ fontSize: 11, color: 'var(--ink-3)', flex: 1 }}>
                    AI: read rate <strong style={{ color: 'var(--success)' }}>+4.2% vs benchmark</strong> · suggest A/B with shorter opener
                  </span>
                  <Button variant="ghost" size="sm" icon="sparkle">Optimize</Button>
                </div>
              )}
              {t.status === 'rejected' && (
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 10, paddingTop: 10, borderTop: '1px solid var(--line)' }}>
                  <Icon name="sparkle" size={11} style={{ color: 'var(--accent)' }}/>
                  <span style={{ fontSize: 11, color: 'var(--ink-3)', flex: 1 }}>
                    AI: rejection cause likely <strong>marketing tone in utility category</strong> · auto-rewrite available
                  </span>
                  <Button variant="primary" size="sm" icon="sparkle">Fix &amp; resubmit</Button>
                </div>
              )}
            </Card>
          ))}
          <Card style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 140, border: '2px dashed var(--line)', cursor: 'pointer' }}>
            <div style={{ textAlign: 'center' }}>
              <Icon name="plus" size={20} style={{ color: 'var(--ink-3)' }}/>
              <div style={{ fontSize: 13, fontWeight: 600, marginTop: 8 }}>Submit new template</div>
              <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginTop: 2 }}>Approval typically takes 2–24 hours</div>
            </div>
          </Card>
        </div>
        </>
      )}

      {tab === 'audience' && (
        <>
        {/* AI segments — live cohorts the model has built for you */}
        <div style={{ marginTop: 16, marginBottom: 14 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
            <Icon name="sparkle" size={13} style={{ color: 'var(--accent)' }}/>
            <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--accent-ink)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>AI segments · live</span>
            <Chip tone="accent" size="sm">3 ready to broadcast</Chip>
            <div style={{ flex: 1 }}/>
            <Button variant="ghost" size="sm" icon="settings" onClick={() => setRoute && setRoute('intelligence')}>Open Intelligence</Button>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
            {[
              { name: 'Lookalike of Apparat top buyers', basis: 'Audio embedding · Berlin · price band', reach: 12420, lift: '+24%', conf: 'high' },
              { name: 'High-intent retargeting', basis: 'Visited 2+ times · no purchase · 14d', reach: 2840, lift: '+34%', conf: 'very high' },
              { name: 'Cross-event · Punjabi DACH', basis: 'Bought Punjabi concert in 18mo · WA opt-in', reach: 8240, lift: '+18%', conf: 'high' },
            ].map((s, i) => (
              <Card key={i} pad={14} hover style={{
                cursor: 'pointer',
                border: '1px solid oklch(0.85 0.06 280)',
                background: 'linear-gradient(135deg, oklch(0.985 0.01 280) 0%, oklch(0.97 0.025 320) 100%)',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6 }}>
                  <span style={{ fontSize: 9, fontWeight: 700, padding: '1px 5px', borderRadius: 4, background: 'linear-gradient(135deg, var(--accent), var(--indigo))', color: '#fff', textTransform: 'uppercase', letterSpacing: '0.05em' }}>AI</span>
                  {s.conf === 'very high' && <Chip tone="success" size="sm">{s.conf}</Chip>}
                  {s.conf === 'high' && <Chip tone="accent" size="sm">{s.conf}</Chip>}
                </div>
                <div style={{ fontSize: 13, fontWeight: 600 }}>{s.name}</div>
                <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 4, lineHeight: 1.45 }}>{s.basis}</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginTop: 10, paddingTop: 10, borderTop: '1px solid var(--line)' }}>
                  <span className="mono" style={{ fontSize: 16, fontWeight: 700 }}>{s.reach.toLocaleString()}</span>
                  <span style={{ fontSize: 11, color: 'var(--ink-3)' }}>people</span>
                  <div style={{ flex: 1 }}/>
                  <span className="mono" style={{ fontSize: 11.5, fontWeight: 700, color: 'var(--success)' }}>{s.lift} lift</span>
                </div>
                <div style={{ display: 'flex', gap: 6, marginTop: 10 }}>
                  <Button variant="primary" size="sm" icon="send" style={{ flex: 1 }}>Broadcast</Button>
                  <Button variant="ghost" size="sm" icon="eye"/>
                </div>
              </Card>
            ))}
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          <Card>
            <div style={{ fontSize: 13.5, fontWeight: 600, marginBottom: 4 }}>Opt-in growth</div>
            <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginBottom: 16 }}>Opt-ins captured at checkout</div>
            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, height: 120 }}>
              {[42, 58, 51, 68, 78, 92, 88].map((v, i) => (
                <div key={i} style={{ flex: 1, height: `${v}%`, background: 'oklch(0.62 0.16 150)', borderRadius: '4px 4px 0 0', opacity: 0.4 + (i / 14) }}/>
              ))}
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--line)' }}>
              <div><div style={{ fontSize: 11, color: 'var(--ink-3)' }}>Total opted-in</div><div className="mono" style={{ fontSize: 18, fontWeight: 600, marginTop: 2 }}>28,420</div></div>
              <div><div style={{ fontSize: 11, color: 'var(--ink-3)' }}>Opt-in rate</div><div className="mono" style={{ fontSize: 18, fontWeight: 600, marginTop: 2 }}>71.4%</div></div>
              <div><div style={{ fontSize: 11, color: 'var(--ink-3)' }}>Opt-outs / mo</div><div className="mono" style={{ fontSize: 18, fontWeight: 600, marginTop: 2 }}>184</div></div>
            </div>
          </Card>
          <Card>
            <div style={{ fontSize: 13.5, fontWeight: 600, marginBottom: 12 }}>Segments</div>
            {[
              { l: 'All opted-in', c: 28420, def: 'whatsapp_optin = true' },
              { l: 'High intent · clicked last 30d', c: 8420, def: 'clicked broadcast within 30d' },
              { l: 'Past buyers · Berlin', c: 12180, def: 'city = Berlin AND bookings ≥ 1' },
              { l: 'Cart abandoners', c: 1420, def: 'started checkout, no purchase' },
            ].map((s, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 0', borderBottom: i < 3 ? '1px solid var(--line)' : 'none' }}>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, fontWeight: 500 }}>{s.l}</div>
                  <div className="mono" style={{ fontSize: 10.5, color: 'var(--ink-3)', marginTop: 2 }}>{s.def}</div>
                </div>
                <div className="mono" style={{ fontSize: 12.5, fontWeight: 600 }}>{s.c.toLocaleString()}</div>
              </div>
            ))}
          </Card>
        </div>
        </>
      )}

      {tab === 'settings' && (
        <>
        {/* AI deliverability advisor — compact strip */}
        <div style={{
          marginTop: 16, marginBottom: 14,
          padding: '10px 14px',
          display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap',
          border: '1px solid oklch(0.85 0.06 280)',
          background: 'linear-gradient(135deg, oklch(0.985 0.01 280) 0%, oklch(0.97 0.025 320) 100%)',
          borderRadius: 10,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <Icon name="sparkle" size={12} style={{ color: 'var(--accent)' }}/>
            <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--accent-ink)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>AI advisor</span>
            <Chip tone="success" size="sm">Quality 4.6 / 5</Chip>
          </div>
          <div style={{ height: 22, width: 1, background: 'oklch(0.85 0.06 280 / 0.6)' }}/>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12 }}>
            <Icon name="arrowUp" size={11} style={{ color: 'var(--success)' }}/>
            <span style={{ color: 'var(--ink-3)' }}>Tier upgrade in 14d:</span>
            <span className="mono" style={{ fontWeight: 700, color: 'var(--success)' }}>1k → 10k / 24h</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12 }}>
            <Icon name="check" size={11} style={{ color: 'var(--success)' }}/>
            <span style={{ color: 'var(--ink-3)' }}>Block-rate:</span>
            <span className="mono" style={{ fontWeight: 700 }}>0.4% (low)</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12 }}>
            <Icon name="clock" size={11} style={{ color: 'var(--accent)' }}/>
            <span style={{ color: 'var(--ink-3)' }}>Best send today:</span>
            <span className="mono" style={{ fontWeight: 700 }}>18:30 – 20:00</span>
          </div>
          <div style={{ flex: 1 }}/>
          <Button variant="ghost" size="sm" icon="external">Details</Button>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          <Card>
            <div style={{ fontSize: 13.5, fontWeight: 600, marginBottom: 14 }}>Business profile</div>
            <Field label="Display name"><Input defaultValue="Rhythm Events"/></Field>
            <Field label="Business phone" style={{ marginTop: 12 }}><Input defaultValue="+49 30 1234 5678"/></Field>
            <Field label="Category" style={{ marginTop: 12 }}>
              <Select value="events" options={[
                { value: 'events', label: 'Event ticketing' },
                { value: 'entertainment', label: 'Entertainment' },
              ]}/>
            </Field>
            <div style={{ marginTop: 14, padding: 12, borderRadius: 10, background: 'var(--bg-sunken)', display: 'flex', gap: 10, alignItems: 'flex-start' }}>
              <Icon name="check" size={14} style={{ color: 'var(--success)', marginTop: 2 }}/>
              <div>
                <div style={{ fontSize: 12.5, fontWeight: 600 }}>Verified business · Tier 1k/24h</div>
                <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 2 }}>Auto-upgrades to 10k once you cross 90% delivery quality.</div>
              </div>
            </div>
          </Card>
          <Card>
            <div style={{ fontSize: 13.5, fontWeight: 600, marginBottom: 14 }}>Sending rules</div>
            {[
              { l: 'Quiet hours', s: '22:00 – 08:00 MEZ', on: true },
              { l: 'Throttle broadcasts', s: 'Max 1k / hour', on: true },
              { l: 'Auto-pause on 3% block rate', s: 'Protects sender quality', on: true },
              { l: 'Require opt-in proof at checkout', s: 'GDPR-compliant', on: true },
              { l: 'Auto-reply outside hours', s: 'Send fallback template', on: false },
            ].map((r, i) => (
              <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'center', padding: '10px 0', borderBottom: i < 4 ? '1px solid var(--line)' : 'none' }}>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 12.5, fontWeight: 500 }}>{r.l}</div>
                  <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>{r.s}</div>
                </div>
                <Toggle checked={r.on} onChange={()=>{}}/>
              </div>
            ))}
          </Card>
        </div>
        </>
      )}
    </div>
  );
};

window.Messages = Messages;