const WC_BLUE = '#3B6BFF', WC_VIOLET = '#B45CF7', WC_TEAL = '#2FD5DA';
/* Same vertical map as Tag.jsx / CaseArt.jsx. */
const WC_VERT = { igaming:'#7C7CFF', forex:'#2FD5DA', crypto:'#3B6BFF', ecommerce:'#B45CF7', nutra:'#8BB4FF' };

function wcPath(vals, w, h, pad) {
  const max = Math.max(...vals), min = Math.min(...vals);
  const span = max - min || 1;
  const step = (w - pad * 2) / (vals.length - 1);
  return vals.map((v, i) => {
    const x = pad + i * step, y = pad + (h - pad * 2) * (1 - (v - min) / span);
    return (i ? 'L' : 'M') + x.toFixed(1) + ' ' + y.toFixed(1);
  }).join(' ');
}

function WCLegend({ items }) {
  return (
    <div style={{ display:'flex', gap:26, flexWrap:'wrap', marginTop:18 }}>
      {items.map(([c, l, dash]) => (
        <div key={l} style={{ display:'flex', alignItems:'center', gap:9 }}>
          <span style={{ width:18, height:0, borderTop:(dash ? '2px dotted ' : '2px solid ') + c }} />
          <span style={{ fontFamily:'var(--font-mono)', fontSize:10.5, letterSpacing:'.12em',
            textTransform:'uppercase', color:'var(--text-muted)' }}>{l}</span>
        </div>
      ))}
    </div>
  );
}

function WCHead({ icon, title, sub }) {
  return (
    <div style={{ display:'flex', gap:14, alignItems:'flex-start', marginBottom:26 }}>
      <span style={{ color:'var(--accent)', marginTop:1 }}><Icon name={icon} size={18} /></span>
      <div>
        <div className="goat-eyebrow" style={{ color:'var(--text-primary)' }}>{title}</div>
        <div style={{ fontFamily:'var(--font-mono)', fontSize:10.5, letterSpacing:'.12em',
          textTransform:'uppercase', color:'var(--text-faint)', marginTop:7 }}>{sub}</div>
      </div>
    </div>
  );
}

function WCTrajectory() {
  const W = 1000, H = 260, P = 16;
  const spend = [22,31,39,48,55,61,68,74,79,86,92,97];
  const conv  = [12,17,21,29,36,47,55,66,74,83,90,98];
  const cpa   = [88,84,80,77,71,66,62,57,54,50,47,44];
  const months = ['JAN','MAR','MAI','JUL','SET','NOV'];
  return (
    <Card padding={30}>
      <WCHead icon="trending-up" title={L('Acquisition trajectory','Trajetória de aquisição')}
        sub={L('Aggregate portfolio · spend, conversions and cost per acquisition','Portfólio agregado · investimento, conversões e custo por aquisição')} />
      <svg viewBox={'0 0 ' + W + ' ' + H} width="100%" height="260" preserveAspectRatio="none" role="img"
        aria-label={L('Line chart','Gráfico de linhas')}>
        {[0,1,2,3].map(i => (
          <line key={i} x1="0" x2={W} y1={P + i * (H - P*2)/3} y2={P + i * (H - P*2)/3}
            stroke="rgba(255,255,255,.055)" strokeWidth="1" />
        ))}
        <path d={wcPath(cpa, W, H, P)} fill="none" stroke={WC_TEAL} strokeWidth="2" strokeDasharray="2 7" strokeLinecap="round" opacity=".85" />
        <path d={wcPath(spend, W, H, P)} fill="none" stroke={WC_BLUE} strokeWidth="2.5" strokeLinejoin="round" />
        <path d={wcPath(conv, W, H, P)} fill="none" stroke={WC_VIOLET} strokeWidth="2.5" strokeLinejoin="round" />
      </svg>
      <div style={{ display:'flex', justifyContent:'space-between', marginTop:14,
        borderTop:'1px solid var(--border-hairline)', paddingTop:14 }}>
        {months.map(m => (
          <span key={m} style={{ fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'.14em', color:'var(--text-faint)' }}>{m}</span>
        ))}
      </div>
      <WCLegend items={[[WC_BLUE, L('Media spend','Investimento')], [WC_VIOLET, L('Conversions','Conversões')], [WC_TEAL, L('Cost per acquisition','Custo por aquisição'), true]]} />
    </Card>
  );
}

function WCRanking() {
  const rows = [
    [L('iGaming · Brazil','iGaming · Brasil'), '9.4', 94, WC_VERT.igaming],
    [L('Forex · LATAM & Europe','Forex · LATAM e Europa'), '8.7', 87, WC_VERT.forex],
    [L('Crypto · Global','Cripto · Global'), '8.1', 81, WC_VERT.crypto],
    [L('Ecommerce · LATAM · USA','Ecommerce · LATAM · EUA'), '7.6', 76, WC_VERT.ecommerce],
    [L('Nutra · USA','Nutra · EUA'), '6.8', 68, WC_VERT.nutra],
  ];
  return (
    <Card padding={30}>
      <WCHead icon="signal" title={L('Top performing pods','Pods de maior performance')}
        sub={L('Ranked by blended return on ad spend','Ordenado por retorno médio sobre investimento')} />
      <div style={{ display:'grid', gap:22 }}>
        {rows.map(([name, val, pct, c]) => (
          <div key={name}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', gap:16 }}>
              <span style={{ fontSize:15, color:'var(--text-body)' }}>{name}</span>
              <span style={{ fontFamily:'var(--font-display)', fontSize:15, fontWeight:500, color:'var(--text-primary)' }}>{val}x</span>
            </div>
            <div style={{ height:2, background:'rgba(255,255,255,.07)', marginTop:12 }}>
              <div style={{ width:pct + '%', height:'100%', background:c }} />
            </div>
          </div>
        ))}
      </div>
    </Card>
  );
}

function WCDonut() {
  const slices = [
    [L('iGaming','iGaming'), 42, WC_VERT.igaming],
    [L('Forex','Forex'), 26, WC_VERT.forex],
    [L('Crypto','Cripto'), 19, WC_VERT.crypto],
    [L('Ecommerce','Ecommerce'), 13, WC_VERT.ecommerce],
  ];
  const R = 62, C = 2 * Math.PI * R;
  let acc = 0;
  return (
    <Card padding={30}>
      <WCHead icon="target" title={L('Spend distribution','Distribuição do investimento')}
        sub={L('Share of managed budget by vertical','Participação do budget gerido por vertical')} />
      <div style={{ display:'flex', gap:38, alignItems:'center', flexWrap:'wrap' }}>
        <div style={{ position:'relative', width:160, height:160, flexShrink:0 }}>
          <svg viewBox="0 0 160 160" width="160" height="160" style={{ transform:'rotate(-90deg)' }}>
            <circle cx="80" cy="80" r={R} fill="none" stroke="rgba(255,255,255,.06)" strokeWidth="14" />
            {slices.map(([n, p, c]) => {
              const dash = <circle key={n} cx="80" cy="80" r={R} fill="none" stroke={c} strokeWidth="14"
                strokeDasharray={(C * p / 100 - 3) + ' ' + C} strokeDashoffset={-(C * acc / 100)} />;
              acc += p;
              return dash;
            })}
          </svg>
          <div style={{ position:'absolute', inset:0, display:'grid', placeItems:'center', textAlign:'center' }}>
            <div>
              <div style={{ fontFamily:'var(--font-display)', fontSize:28, fontWeight:500, color:'var(--text-primary)' }}>$6M</div>
              <div style={{ fontFamily:'var(--font-mono)', fontSize:9.5, letterSpacing:'.16em', color:'var(--text-faint)' }}>/ {L('MONTH','MÊS')}</div>
            </div>
          </div>
        </div>
        <div style={{ display:'grid', gap:14, flex:1, minWidth:180 }}>
          {slices.map(([n, p, c]) => (
            <div key={n} style={{ display:'flex', alignItems:'center', gap:12 }}>
              <span style={{ width:8, height:8, borderRadius:2, background:c, flexShrink:0 }} />
              <span style={{ fontFamily:'var(--font-mono)', fontSize:10.5, letterSpacing:'.12em',
                textTransform:'uppercase', color:'var(--text-muted)', flex:1 }}>{n}</span>
              <span style={{ fontFamily:'var(--font-display)', fontSize:14, fontWeight:500, color:'var(--text-primary)' }}>{p}%</span>
            </div>
          ))}
        </div>
      </div>
    </Card>
  );
}

function WorkCharts() {
  return (
    <section className="goat-container w-sect" style={{ padding:'56px 24px 8px' }}>
      <WCTrajectory />
      <div className="w-2col" style={{ display:'grid', gridTemplateColumns:'1.25fr 1fr', gap:16, marginTop:16 }}>
        <WCRanking />
        <WCDonut />
      </div>
    </section>
  );
}
Object.assign(window, { WorkCharts });