// agents-work.jsx — Agents showcase, Workflow steps, Solutions
window.DZ = window.DZ || {};
function Agents({ onCta }) {
  const { Card, Badge, Button } = window.DelzAILabsDesignSystem_bfa572 || {};
  const agents = window.SITE.agents;
  const filters = ['All', 'Support', 'Sales', 'Ops', 'Automation', 'Research', 'Personal'];
  const [active, setActive] = React.useState('All');
  const shown = active === 'All' ? agents : agents.filter((a) => a.tag === active);

  return (
    <section id="agents" style={{ padding: 'clamp(48px, 7vw, 96px) clamp(20px, 5vw, 56px)', scrollMarginTop: 80 }}>
      <div style={{ maxWidth: 'var(--container-xl)', margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap', marginBottom: 36 }}>
          <div style={{ maxWidth: 600 }}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>THE AGENT ROSTER</div>
            <h2 style={{ fontSize: 'clamp(30px, 4vw, 46px)', margin: '0 0 14px' }}>Agents for the work you keep putting off</h2>
            <p style={{ fontSize: 17, color: 'var(--text-muted)', margin: 0, lineHeight: 1.6, maxWidth: 520 }}>Start from a proven agent or commission a bespoke one. Each is wired to your channels and tools, and asks before it acts.</p>
          </div>
        </div>

        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginBottom: 30 }}>
          {filters.map((f) => {
            const on = f === active;
            return (
              <button key={f} onClick={() => setActive(f)}
                style={{ padding: '8px 16px', borderRadius: 'var(--radius-pill)', cursor: 'pointer', fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 500,
                  color: on ? 'var(--text-on-brand)' : 'var(--text-body)',
                  background: on ? 'var(--action-primary)' : 'var(--surface-card)',
                  border: `1px solid ${on ? 'transparent' : 'var(--border-default)'}`,
                  boxShadow: on ? 'var(--shadow-sm)' : 'var(--shadow-xs)',
                  transition: 'all var(--dur-fast) var(--ease-standard)' }}>{f}</button>
            );
          })}
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(310px, 1fr))', gap: 22 }}>
          {shown.map((a) => (
            <Card key={a.id} interactive padding="lg" style={{ display: 'flex', flexDirection: 'column' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
                <span style={{ width: 50, height: 50, borderRadius: 'var(--radius-md)', background: a.tone === 'accent' ? 'var(--gradient-flame)' : 'var(--gradient-cobalt)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#fff' }}>
                  <i data-lucide={a.icon} style={{ width: 24, height: 24 }} />
                </span>
                {Badge && <Badge tone={a.tone === 'accent' ? 'accent' : 'brand'}>{a.tag}</Badge>}
              </div>
              <h4 style={{ fontSize: 22, margin: '0 0 9px' }}>{a.title}</h4>
              <p style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--text-muted)', margin: '0 0 20px', flex: 1 }}>{a.body}</p>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: 16, borderTop: '1px solid var(--border-subtle)' }}>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 13.5, fontWeight: 600, color: 'var(--success-500)' }}>
                  <i data-lucide="trending-up" style={{ width: 15, height: 15 }} />{a.metric}
                </span>
                <a href="#" onClick={(e) => { e.preventDefault(); onCta(); }} style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 14, fontWeight: 500, color: 'var(--text-link)' }}>
                  Deploy <i data-lucide="arrow-right" style={{ width: 15, height: 15 }} />
                </a>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}
window.DZ.Agents = Agents;

function Workflow() {
  return (
    <section id="how" style={{ padding: 'clamp(48px, 7vw, 96px) clamp(20px, 5vw, 56px)', scrollMarginTop: 80 }}>
      <div style={{ maxWidth: 'var(--container-lg)', margin: '0 auto' }}>
        <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto 56px' }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>HOW IT WORKS</div>
          <h2 style={{ fontSize: 'clamp(30px, 4vw, 46px)', margin: 0 }}>From idea to automated in three steps</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 'clamp(24px, 4vw, 44px)', position: 'relative' }}>
          {window.SITE.steps.map((s, i) => (
            <div key={s.n} style={{ position: 'relative' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 20 }}>
                <span style={{ width: 56, height: 56, borderRadius: 'var(--radius-md)', background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', boxShadow: 'var(--shadow-sm)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--blue-500)', flex: 'none' }}>
                  <i data-lucide={s.icon} style={{ width: 26, height: 26 }} />
                </span>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 38, color: 'var(--neutral-300)' }}>{s.n}</span>
              </div>
              <h4 style={{ fontSize: 23, margin: '0 0 11px' }}>{s.title}</h4>
              <p style={{ fontSize: 15.5, lineHeight: 1.65, color: 'var(--text-muted)', margin: 0, maxWidth: 340 }}>{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.DZ.Workflow = Workflow;

function Solutions({ onCta }) {
  const { Button } = window.DelzAILabsDesignSystem_bfa572 || {};
  return (
    <section style={{ padding: 'clamp(24px, 4vw, 48px) clamp(20px, 5vw, 56px) clamp(48px, 7vw, 96px)' }}>
      <div style={{ maxWidth: 'var(--container-xl)', margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 24 }}>
        {window.SITE.solutions.map((s) => (
          <div key={s.who} style={{ position: 'relative', overflow: 'hidden', borderRadius: 'var(--radius-lg)', border: '1px solid var(--border-subtle)', background: 'var(--surface-card)', boxShadow: 'var(--shadow-md)', padding: 'clamp(28px, 4vw, 44px)' }}>
            <div aria-hidden style={{ position: 'absolute', top: -40, right: -40, width: 180, height: 180, borderRadius: '50%', background: s.tone === 'accent' ? 'radial-gradient(circle, rgba(242,106,31,0.12), transparent 70%)' : 'radial-gradient(circle, rgba(27,63,196,0.12), transparent 70%)' }} />
            <div style={{ position: 'relative' }}>
              <span style={{ width: 52, height: 52, borderRadius: 'var(--radius-md)', background: s.tone === 'accent' ? 'var(--gradient-flame)' : 'var(--gradient-cobalt)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#fff', marginBottom: 20 }}>
                <i data-lucide={s.icon} style={{ width: 25, height: 25 }} />
              </span>
              <div className="eyebrow" style={{ color: s.tone === 'accent' ? 'var(--action-accent)' : 'var(--blue-500)', marginBottom: 10 }}>{s.who}</div>
              <h3 style={{ fontSize: 'clamp(24px, 3vw, 32px)', margin: '0 0 22px' }}>{s.head}</h3>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 13, marginBottom: 28 }}>
                {s.points.map((p) => (
                  <div key={p} style={{ display: 'flex', alignItems: 'flex-start', gap: 11 }}>
                    <i data-lucide="circle-check" style={{ width: 19, height: 19, color: s.tone === 'accent' ? 'var(--action-accent)' : 'var(--blue-500)', flex: 'none', marginTop: 1 }} />
                    <span style={{ fontSize: 15, color: 'var(--text-body)', lineHeight: 1.5 }}>{p}</span>
                  </div>
                ))}
              </div>
              {Button && <Button variant={s.tone === 'accent' ? 'accent' : 'primary'} onClick={onCta} iconRight={<i data-lucide="arrow-right" />}>{s.tone === 'accent' ? 'Book a build' : 'Talk to us'}</Button>}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}
window.DZ.Solutions = Solutions;