// Services.jsx — premium service grid with featured AI agents card
function Services() {
  return (
    <section className="section" id="services">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow"><span className="dot"></span>What we do</span>
          <h2>Ten services. <em>One operating partner.</em></h2>
          <p>
            From recruiting to AI agents, DuckTask covers the operational, software, and
            automation work most teams have to glue together. We staff the team, build the
            systems, and keep them running.
          </p>
        </div>

        <div className="services-grid">
          <a className="service feature reveal" href="#contact">
            <div className="ic-bg">
              <i data-lucide="bot" className="ic"></i>
            </div>
            <h3>AI Agents &amp; AI Automation</h3>
            <p>
              Production-grade agents that handle email triage, customer support,
              research, scheduling, and back-office workflows. Built on the latest
              models, wired into the tools you already use, monitored end-to-end.
            </p>
            <span className="arrow">
              See how it works
              <i data-lucide="arrow-right" className="ic"></i>
            </span>
          </a>

          <ServiceCard ic="users-round" title="Human Resources" desc="Recruiting, onboarding, payroll cadence, leave tracking. Real operators backed by automated workflows." />

          <ServiceCard ic="package" title="Inventory Systems" desc="Nightly counts, reorder triggers, supplier sync, and shrink monitoring — connected to your POS and accounting." />

          <ServiceCard ic="clipboard-check" title="Admin Task Automation" desc="The repetitive stuff: data entry, invoicing, reconciliation, document filing. Automated by agents, audited by humans." />

          <ServiceCard ic="megaphone" title="Social Media Management" desc="Content planning, design, and scheduling across Instagram, Facebook, and TikTok — on-brand and on-cadence." />

          <ServiceCard ic="workflow" title="Workflow Automation" desc="Connect Xero, Slack, Google Workspace, Notion, Shopify. Replace 5 tabs of copy-paste with one reliable pipeline." />

          <ServiceCard ic="code" title="Web Development" desc="Marketing sites, landing pages, and customer portals — built for speed, SEO, and conversion." />

          <ServiceCard ic="cpu" title="SaaS Development" desc="Custom software for the gap no off-the-shelf product fills. Built lean with a senior team, shipped in weeks." />

          <ServiceCard ic="git-branch" title="Process Optimization" desc="We map your operation, find the friction, and rebuild the bottlenecks. Measurable hours back, week one." />
        </div>
      </div>
    </section>
  );
}

function ServiceCard({ ic, title, desc }) {
  return (
    <a className="service reveal" href="#contact">
      <div className="ic-bg">
        <i data-lucide={ic} className="ic"></i>
      </div>
      <h3>{title}</h3>
      <p>{desc}</p>
      <span className="arrow">
        Learn more
        <i data-lucide="arrow-right" className="ic"></i>
      </span>
    </a>
  );
}

window.Services = Services;