/* ============================================================
   ZERO — Marketing Automation. window.Screens.Marketing
   ============================================================ */
(function () {
  const I = window.Icon;
  const { AreaChart, Bars, Donut } = window.Charts;
  const { Card, SectionHead, Badge } = window.UI;
  const D = window.DATA;

  function Marketing() {
    return (
      <div className="page">
        {/* KPI strip */}
        <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(180px,1fr))', marginBottom: 18 }}>
          {D.marketingKpis.map((k, i) => (
            <Card key={i} className="rise" style={{ padding: 16, animationDelay: i*0.04+'s' }}>
              <div className="row between" style={{ marginBottom: 8 }}>
                <span style={{ fontSize: 12, color: 'var(--tx-2)', fontWeight: 600 }}>{k.label}</span>
                <span style={{ width: 8, height: 8, borderRadius: 3, background: k.accent }} />
              </div>
              <div className="tnum" style={{ fontSize: 25, fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 1 }}>{k.value}</div>
              <span className="badge" style={{ marginTop: 8, color: k.up ? 'var(--green)' : 'var(--rose)', background: k.up ? 'var(--green-soft)' : 'var(--rose-soft)', borderColor: 'transparent', fontSize: 10.5 }}>
                {k.up ? <I.arrowUp w={11} /> : <I.arrowDown w={11} />}{k.delta}
              </span>
            </Card>
          ))}
        </div>

        <div className="grid" style={{ gridTemplateColumns: '1.5fr 1fr', marginBottom: 18 }}>
          {/* performance */}
          <Card style={{ padding: 20 }}>
            <SectionHead icon="trend" title="Desempenho por Canal" sub="Conversões · últimas 12 semanas"
              action={<Badge soft="var(--teal-soft)" color="var(--teal)">+17% sem.</Badge>} />
            <AreaChart data={[20,24,22,30,28,35,40,38,46,52,49,58]} labels={['','','','','','','','','','','','']}
              color="var(--teal)" color2="var(--violet)" h={200} />
            <div className="row gap20" style={{ marginTop: 14 }}>
              {[['Meta','var(--blue)','42%'],['Google','var(--rose)','31%'],['TikTok','var(--teal)','18%'],['Outros','var(--tx-2)','9%']].map(([n,c,p]) => (
                <div key={n} className="row gap6"><span style={{ width: 8, height: 8, borderRadius: 3, background: c }} />
                  <span style={{ fontSize: 11.5, color: 'var(--tx-1)' }}>{n}</span><span className="mono" style={{ fontSize: 11, color: 'var(--tx-3)' }}>{p}</span></div>
              ))}
            </div>
          </Card>

          {/* funnel */}
          <Card style={{ padding: 20 }}>
            <SectionHead icon="funnel" title="Funil de Conversão" />
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 4 }}>
              {D.funnel.map((f, i) => {
                const hue = ['var(--violet)','var(--blue)','var(--teal)','var(--green)','var(--rose)'][i];
                return (
                  <div key={i}>
                    <div className="row between" style={{ marginBottom: 5 }}>
                      <span style={{ fontSize: 12, color: 'var(--tx-1)', fontWeight: 600 }}>{f.stage}</span>
                      <span className="mono" style={{ fontSize: 11.5, color: 'var(--tx-2)' }}>{f.value.toLocaleString()}</span>
                    </div>
                    <div style={{ height: 26, borderRadius: 7, background: 'var(--bg-1)', overflow: 'hidden', position: 'relative' }}>
                      <div style={{ width: f.pct + '%', height: '100%', borderRadius: 7,
                        background: `linear-gradient(90deg, ${hue}, color-mix(in oklab, ${hue}, transparent 50%))`,
                        display: 'flex', alignItems: 'center', paddingLeft: 10, transition: 'width .6s' }}>
                        <span className="mono" style={{ fontSize: 10.5, color: 'white', fontWeight: 600 }}>{f.pct}%</span>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </Card>
        </div>

        {/* campaigns table */}
        <Card style={{ padding: 0, marginBottom: 18 }}>
          <div className="row between" style={{ padding: '16px 18px' }}>
            <SectionHead icon="mega" title="Campanhas de Anúncios" sub="6 canais · auto-otimizadas pela Nova" />
            <button className="btn btn-primary btn-sm"><I.plus w={14} /> Nova campanha</button>
          </div>
          <div className="hr" />
          <div style={{ overflowX: 'auto' }}>
            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
              <thead>
                <tr style={{ color: 'var(--tx-3)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.06em' }}>
                  {['Campanha','Canal','Status','Gasto','ROAS','CTR','Ritmo'].map((h,i) =>
                    <th key={h} style={{ textAlign: i>2?'right':'left', padding: '10px 18px', fontWeight: 600 }}>{h}</th>)}
                </tr>
              </thead>
              <tbody>
                {D.campaigns.map((c, i) => (
                  <tr key={i} style={{ borderTop: '1px solid var(--line)' }}
                    onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-2)'}
                    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                    <td style={{ padding: '13px 18px', fontWeight: 600 }}>{c.name}</td>
                    <td style={{ padding: '13px 18px' }}><span className="row gap6"><span style={{ width: 7, height: 7, borderRadius: 2, background: c.hue }} />{c.channel}</span></td>
                    <td style={{ padding: '13px 18px' }}>
                      <Badge soft={c.status==='Ativa'?'var(--green-soft)':'oklch(1 0 0 /.06)'} color={c.status==='Ativa'?'var(--green)':'var(--tx-2)'} dot>{c.status}</Badge>
                    </td>
                    <td className="mono tnum" style={{ padding: '13px 18px', textAlign: 'right' }}>{c.spend}</td>
                    <td className="mono tnum" style={{ padding: '13px 18px', textAlign: 'right', color: 'var(--green)', fontWeight: 600 }}>{c.roas}</td>
                    <td className="mono tnum" style={{ padding: '13px 18px', textAlign: 'right' }}>{c.ctr}</td>
                    <td style={{ padding: '13px 18px', textAlign: 'right', width: 120 }}>
                      <div className="track" style={{ width: 80, marginLeft: 'auto' }}><i style={{ width: c.prog+'%', background: c.hue }} /></div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </Card>

        {/* editorial calendar */}
        <Card style={{ padding: 18 }}>
          <SectionHead icon="calendar" title="Calendário Editorial" sub="Esta semana · rascunhado pela Nova"
            action={<button className="btn btn-ghost btn-sm">Abrir calendário <I.arrowRight w={13} /></button>} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 12 }}>
            {D.socialPosts.map((p, i) => {
              const sc = { Publicado: 'var(--green)', Agendado: 'var(--teal)', Rascunho: 'var(--tx-2)' }[p.status];
              return (
                <div key={i} className="lift" style={{ padding: 13, borderRadius: 12, background: 'var(--bg-2)', border: '1px solid var(--line)' }}>
                  <div className="row between" style={{ marginBottom: 10 }}>
                    <span className="mono" style={{ fontSize: 11, color: 'var(--tx-3)' }}>{p.day}</span>
                    <Badge soft="oklch(1 0 0 /.05)" color="var(--tx-2)">{p.channel}</Badge>
                  </div>
                  <div className="placeholder-img" style={{ height: 54, marginBottom: 10 }}>arte do post</div>
                  <div style={{ fontSize: 12.5, fontWeight: 600, lineHeight: 1.35, marginBottom: 10, minHeight: 34 }}>{p.title}</div>
                  <div className="row between">
                    <Badge soft={`color-mix(in oklab, ${sc}, transparent 86%)`} color={sc} dot>{p.status}</Badge>
                    <span className="mono" style={{ fontSize: 10.5, color: 'var(--tx-3)' }}>{p.eng}</span>
                  </div>
                </div>
              );
            })}
          </div>
        </Card>
      </div>
    );
  }

  window.Screens = window.Screens || {};
  window.Screens.Marketing = Marketing;
})();