function FeatureCard({ icon, title, body }) {
  return (
    <div className="nx-feature">
      <div className="nx-feature__icon">
        <i data-lucide={icon} strokeWidth="1.75"></i>
      </div>
      <h3 className="nx-feature__title">{title}</h3>
      <p className="nx-feature__body">{body}</p>
    </div>
  );
}

function Features() {
  return (
    <section className="nx-features" id="services">
      <div className="nx-features__head">
        <div className="nx-eyebrow">What I offer</div>
        <h2 className="nx-features__title">AI systems that win you more work &mdash; not more admin.</h2>
      </div>
      <div className="nx-features__grid">
        <FeatureCard
          icon="target"
          title="Lead generation"
          body="A system that goes out and finds main contractors and developers who could put work your way, and gives you a clean list ready to talk to. No more trawling the internet on a Sunday night for who to ring." />
        <FeatureCard
          icon="send"
          title="Outreach automation"
          body="AI-drafted emails and WhatsApp messages that introduce you to those prospects &mdash; in your voice, not corporate fluff. They go out automatically. You only step in when someone replies." />
        <FeatureCard
          icon="clock"
          title="Quote follow-up"
          body="Every quote you&rsquo;ve sent gets chased at the right moment, automatically. Polite, persistent, in your tone. Nothing falls through the cracks while you&rsquo;re on site." />
        <FeatureCard
          icon="user-plus"
          title="Client onboarding"
          body="When a client says yes, the system collects the project info, sends the contract, and gets them set up. You start the job faster, and look professional doing it." />
      </div>
    </section>
  );
}
window.Features = Features;