// Monjez landing — "What we build": custom AI agents, org-style, with live previews
const { useState: useStateBuild } = React;

function av2(a) {
  return a === 'teal' ? { c: 'var(--teal-signal)', soft: 'var(--teal-soft)' } : { c: 'var(--blue-400)', soft: 'var(--blue-soft)' };
}

function AgentsSection() {
  const t = window.useT();
  const B = t.build;
  const agents = B.agents;
  const [active, setActive] = useStateBuild(0);
  const A = agents[active];
  const av = av2(A.accent);

  return (
    <section id="build" style={{ position: 'relative', padding: '96px 0', background: 'var(--graphite-600)', borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)' }}>
      <window.Container>
        <window.Reveal>
          <window.SectionHead
            eyebrow={B.eyebrow}
            title={<span>{B.title.pre}<window.Accent>{B.title.accent}</window.Accent>{B.title.post}</span>}
            sub={B.sub}
          />
        </window.Reveal>

        <window.Reveal delay={0.05}>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: 48 }}>
            <div style={{ width: 168, borderRadius: 'var(--radius-lg)', border: '1px solid var(--border-strong)', background: 'radial-gradient(120% 120% at 50% 0%, rgba(37,99,235,0.18), transparent 65%), var(--graphite)', padding: '18px 14px', textAlign: 'center' }}>
              <div style={{ width: 48, height: 48, borderRadius: 14, margin: '0 auto 10px', display: 'grid', placeItems: 'center', background: 'var(--blue-soft)', border: '1px solid var(--blue-400)', color: 'var(--blue-400)' }}>
                <window.IconCrown size={24} />
              </div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14.5, lineHeight: 1.25 }}>{B.overseer}</div>
              <div style={{ fontSize: 10.5, color: 'var(--text-muted)', marginTop: 6 }}>{B.oversees}</div>
            </div>
            <div style={{ width: 1, height: 26, background: 'linear-gradient(var(--border-strong), transparent)' }} />
          </div>
        </window.Reveal>

        <window.Reveal delay={0.08}>
          <div className="mj-agentgrid" style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 12 }}>
            {agents.map((ag, i) => {
              const on = i === active; const c = av2(ag.accent);
              return (
                <button key={ag.id} onClick={() => setActive(i)}
                  style={{ cursor: 'pointer', textAlign: 'center', borderRadius: 'var(--radius-lg)', padding: '18px 10px',
                    background: on ? 'var(--graphite)' : 'transparent',
                    border: '1px solid ' + (on ? c.c : 'var(--border-subtle)'),
                    boxShadow: on ? '0 10px 30px rgba(0,0,0,0.35)' : 'none', transition: 'all .2s ease', transform: on ? 'translateY(-3px)' : 'none' }}>
                  <div style={{ width: 44, height: 44, borderRadius: 12, margin: '0 auto 11px', display: 'grid', placeItems: 'center', background: on ? c.soft : 'var(--graphite-400)', color: on ? c.c : 'var(--slate-gray)', border: '1px solid ' + (on ? c.c : 'var(--border-subtle)'), transition: 'all .2s' }}>
                    {React.createElement(window[ag.icon], { size: 21 })}
                  </div>
                  <div style={{ fontSize: 12.5, fontWeight: on ? 600 : 500, color: on ? 'var(--cloud-white)' : 'var(--slate-gray)', lineHeight: 1.25 }}>{ag.name}</div>
                </button>
              );
            })}
          </div>
        </window.Reveal>

        <div className="mj-agent-detail" style={{ marginTop: 28, display: 'grid', gridTemplateColumns: '0.92fr 1.08fr', gap: 28, alignItems: 'center' }}>
          <div key={'ai' + active} style={{ animation: 'mjFadeUp .4s ease' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
              <span style={{ width: 50, height: 50, borderRadius: 14, flexShrink: 0, display: 'grid', placeItems: 'center', background: av.soft, color: av.c, border: `1px solid ${av.c}` }}>
                {React.createElement(window[A.icon], { size: 24 })}
              </span>
              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 23, letterSpacing: '-0.02em' }}>{A.name}</div>
                <div style={{ fontSize: 14, color: 'var(--text-secondary)' }}>{A.role}</div>
              </div>
            </div>
            <div style={{ marginBottom: 16 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em', color: 'var(--danger)', opacity: 0.85, marginBottom: 6 }}>{B.problem}</div>
              <p style={{ margin: 0, fontSize: 15, lineHeight: 1.6, color: 'var(--text-secondary)' }}>{A.problem}</p>
            </div>
            <div style={{ marginBottom: 20 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em', color: av.c, marginBottom: 6 }}>{B.deliver}</div>
              <p style={{ margin: 0, fontSize: 15, lineHeight: 1.6, color: 'var(--cloud-white)' }}>{A.deliver}</p>
            </div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '10px 16px', borderRadius: 'var(--radius-pill)', background: av.soft, border: `1px solid ${av.c}` }}>
              <window.IconClock size={17} stroke={av.c} />
              <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--cloud-white)' }}>{B.savesPrefix}{A.save}</span>
            </div>
          </div>

          <window.Card padding={0} key={'ap' + active} style={{ overflow: 'hidden', animation: 'mjFade .45s ease' }}>
            <AgentPreview type={A.preview} av={av} />
          </window.Card>
        </div>
      </window.Container>
    </section>
  );
}

function AgentHeader({ url }) {
  return (
    <div style={{ height: 38, borderBottom: '1px solid var(--border-subtle)', display: 'flex', alignItems: 'center', gap: 7, padding: '0 14px', background: 'var(--graphite-600)' }}>
      {['#EF4444', '#F59E0B', '#A78BFA'].map((c) => <span key={c} style={{ width: 9, height: 9, borderRadius: '50%', background: c, opacity: 0.8 }} />)}
      <span style={{ marginInlineStart: 10, fontSize: 11.5, color: 'var(--text-muted)', fontFamily: 'var(--font-mono)', direction: 'ltr' }}>{url}</span>
    </div>
  );
}

function AgentPreview({ type, av }) {
  const t = window.useT();
  const pv = t.pv;
  if (type === 'chat') {
    const p = pv.chat;
    return (
      <div style={{ background: 'var(--midnight)' }}>
        <AgentHeader url={p.url} />
        <div style={{ padding: 18 }}>
          {p.msgs.map(([who, app, time, text], i) => (
            <div key={i} style={{ display: 'flex', gap: 10, marginBottom: 13 }}>
              <div style={{ width: 30, height: 30, borderRadius: 8, flexShrink: 0, display: 'grid', placeItems: 'center', fontSize: 12, fontWeight: 700, fontFamily: 'var(--font-display)', color: '#fff', background: app ? 'var(--accent)' : 'var(--graphite-400)' }}>{app ? 'AI' : who[0]}</div>
              <div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 4 }}>
                  <span style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--cloud-white)' }}>{who}</span>
                  {app && <span style={{ fontSize: 9, fontWeight: 700, letterSpacing: '0.06em', color: 'var(--blue-400)', background: 'var(--blue-soft)', padding: '1px 5px', borderRadius: 4 }}>APP</span>}
                  <span style={{ fontSize: 11, color: 'var(--text-muted)', fontFamily: 'var(--font-mono)' }}>{time}</span>
                </div>
                <div style={{ fontSize: 13, lineHeight: 1.5, color: 'var(--text-secondary)' }}>{text}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }
  if (type === 'report') {
    const p = pv.report;
    return (
      <div style={{ background: 'var(--midnight)' }}>
        <AgentHeader url={p.url} />
        <div style={{ padding: 18 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
            <div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 16 }}>{p.title}</div>
              <div style={{ fontSize: 11.5, color: 'var(--text-muted)' }}>{p.gen}</div>
            </div>
            <span style={{ fontSize: 11, color: av.c, background: av.soft, border: `1px solid ${av.c}`, borderRadius: 99, padding: '3px 9px' }}>{p.aiBuilt}</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, height: 92, padding: '0 2px', marginBottom: 12 }}>
            {[42, 55, 48, 67, 73, 61, 88].map((hh, i) => (
              <div key={i} style={{ flex: 1, height: `${hh}%`, borderRadius: 4, background: i === 6 ? 'var(--teal-signal)' : 'var(--graphite-400)' }} />
            ))}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
            {p.stats.map(([k, v]) => (
              <div key={k} style={{ borderRadius: 9, border: '1px solid var(--border-subtle)', background: 'var(--graphite)', padding: '9px 11px' }}>
                <div style={{ fontSize: 10.5, color: 'var(--text-muted)' }}>{k}</div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 17, marginTop: 2 }}>{v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }
  if (type === 'adcopy') {
    const p = pv.adcopy;
    return (
      <div style={{ background: 'var(--midnight)' }}>
        <AgentHeader url={p.url} />
        <div style={{ padding: 18 }}>
          {p.drafts.map(([tag, copy, score], i) => (
            <div key={i} style={{ borderRadius: 11, border: '1px solid ' + (i === 0 ? av.c : 'var(--border-subtle)'), background: i === 0 ? av.soft : 'var(--graphite)', padding: 13, marginBottom: 10 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 7 }}>
                <span style={{ fontSize: 11, fontWeight: 600, color: i === 0 ? av.c : 'var(--text-muted)' }}>{tag}</span>
                <span style={{ fontSize: 11, fontFamily: 'var(--font-mono)', color: av.c }}>score {score}</span>
              </div>
              <div style={{ fontSize: 13, lineHeight: 1.5, color: 'var(--cloud-white)' }}>{copy}</div>
            </div>
          ))}
          <div style={{ fontSize: 11.5, color: 'var(--text-muted)', fontFamily: 'var(--font-mono)', display: 'flex', alignItems: 'center', gap: 6, marginTop: 4 }}>
            <window.IconRefresh size={13} stroke="var(--text-muted)" /> {p.audited}
          </div>
        </div>
      </div>
    );
  }
  const p = pv.kanban;
  return (
    <div style={{ background: 'var(--midnight)' }}>
      <AgentHeader url={p.url} />
      <div style={{ padding: 18, display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 10 }}>
        {p.cols.map(([title, items]) => (
          <div key={title}>
            <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-muted)', marginBottom: 9 }}>{title}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {items.map((it) => (
                <div key={it} style={{ borderRadius: 9, border: '1px solid var(--border-subtle)', background: 'var(--graphite)', padding: '10px 11px', fontSize: 12, color: 'var(--cloud-white)' }}>{it}</div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { AgentsSection });