// Why.jsx — bento-style "why DuckTask"
function Why() {
  return (
    <section className="section" id="why" style={{ background: "var(--bg-page)" }}>
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow"><span className="dot"></span>Why DuckTask</span>
          <h2>Built like a software company. <em>Operates like a team you already trust.</em></h2>
          <p>
            We're a hybrid: senior operators on the ground, software engineers behind the curtain,
            and AI agents doing the heavy repetition. You get the speed of a tool and the
            judgment of a team.
          </p>
        </div>

        <div className="why-grid">
          {/* Large feature card */}
          <div className="why-card w4 dark reveal">
            <span className="ic-tag"><i data-lucide="zap" style={{ width: 12, height: 12 }}></i>AI-first delivery</span>
            <h4>Every workflow ships with an agent watching it.</h4>
            <p>
              We don't bolt on automation as an afterthought — we design every engagement around
              agents that learn your team's patterns, escalate the edge cases, and never miss a step.
            </p>
            <div className="agent-flow">
              <span className="agent-node"><i data-lucide="inbox" style={{ width: 12, height: 12 }}></i>Inbox</span>
              <span className="arr">→</span>
              <span className="agent-node active"><i data-lucide="bot" style={{ width: 12, height: 12 }}></i>Triage agent</span>
              <span className="arr">→</span>
              <span className="agent-node"><i data-lucide="check" style={{ width: 12, height: 12 }}></i>Action</span>
            </div>
          </div>

          <div className="why-card w2 reveal d1">
            <span className="ic-tag"><i data-lucide="clock" style={{ width: 12, height: 12 }}></i>Fast delivery</span>
            <h4>From kickoff to first workflow in 7 days.</h4>
            <p>One-week setup. No procurement marathon, no migration projects.</p>
          </div>

          {/* Row 2 */}
          <div className="why-card w2 reveal">
            <span className="ic-tag"><i data-lucide="trending-up" style={{ width: 12, height: 12 }}></i>Measurable</span>
            <div className="stat">40%</div>
            <p>Average operating-cost reduction inside the first quarter.</p>
          </div>

          <div className="why-card w2 reveal d1">
            <span className="ic-tag"><i data-lucide="layers" style={{ width: 12, height: 12 }}></i>Custom built</span>
            <h4>Solutions shaped around how you already work.</h4>
            <p>We adapt to your stack — not the other way around.</p>
          </div>

          <div className="why-card w2 reveal d2">
            <span className="ic-tag"><i data-lucide="trending-up" style={{ width: 12, height: 12 }}></i>Throughput</span>
            <div className="bars" aria-hidden="true">
              <div className="b" style={{ height: "30%" }}></div>
              <div className="b" style={{ height: "44%" }}></div>
              <div className="b" style={{ height: "38%" }}></div>
              <div className="b" style={{ height: "60%" }}></div>
              <div className="b" style={{ height: "52%" }}></div>
              <div className="b" style={{ height: "76%" }}></div>
              <div className="b hi" style={{ height: "94%" }}></div>
            </div>
            <p style={{ marginTop: 0 }}>Tasks completed per week before and after DuckTask.</p>
          </div>

          {/* Row 3 */}
          <div className="why-card w3 reveal">
            <span className="ic-tag"><i data-lucide="shield-check" style={{ width: 12, height: 12 }}></i>Professional support</span>
            <h4>A senior team in your channel, not a ticket queue.</h4>
            <p>
              Every account gets a named operations lead. Slack or WhatsApp.
              Response under one business hour, every weekday.
            </p>
          </div>

          <div className="why-card w3 reveal d1">
            <span className="ic-tag"><i data-lucide="cpu" style={{ width: 12, height: 12 }}></i>Modern stack</span>
            <h4>Built on the tools that scale with you.</h4>
            <p>Frontier LLMs, modern data infra, the same toolchain shipping AI products at the top firms — only used to handle your accounting, not pitch a demo.</p>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Why = Why;