// HowWeWork.jsx — three steps, plain english

function HowWeWork() {
  useLucide();
  const steps = [
  {
    n: "01",
    icon: "list-checks",
    title: "Pick a tool, or talk to us",
    body: "Pick a ready-made tool below, or book a Fit-Out Session if your job's a bit different. No commitment either way."
  },
  {
    n: "02",
    icon: "wrench",
    title: "We fit it",
    body: "We learn your business first. Then we plug AI into the things you already use. You don't change how you work. We change what runs in the background."
  },
  {
    n: "03",
    icon: "shield-check",
    title: "We keep it running",
    body: "We watch it, tweak it, and sort it if anything breaks. You get on with the actual job."
  }];


  return (
    <Section id="how" bg="white">
      <div style={{ marginBottom: 56, maxWidth: 720 }}>
        <Eyebrow>How we work</Eyebrow>
        <h2 style={{
          fontSize: "clamp(36px, 5vw, 56px)", fontWeight: 800,
          letterSpacing: "-0.03em", lineHeight: 1.05,
          margin: "14px 0 0", color: "var(--ink)", textWrap: "balance"
        }}>Three steps.</h2>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20,
        position: "relative" }} className="grid-3">
        {steps.map((s, i) =>
        <div key={s.n} style={{
          background: "var(--sand)", borderRadius: 20,
          padding: "36px 32px 32px",
          position: "relative",
          display: "flex", flexDirection: "column", gap: 18,
          border: "1px solid transparent",
          transition: "transform .2s var(--t-ease), background .2s var(--t-ease)"
        }}
        onMouseEnter={(e) => {e.currentTarget.style.background = "var(--sand-warm)";e.currentTarget.style.transform = "translateY(-3px)";}}
        onMouseLeave={(e) => {e.currentTarget.style.background = "var(--sand)";e.currentTarget.style.transform = "translateY(0)";}}>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
              <FeatureIcon name={s.icon} size={52} iconSize={24} radius={12} />
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 13,
              fontWeight: 500, color: "var(--muted)" }}>{s.n} / 03</span>
            </div>
            <div>
              <h3 style={{ fontSize: 22, fontWeight: 700, letterSpacing: "-0.015em",
              lineHeight: 1.25, margin: "0 0 10px", color: "var(--ink)" }}>{s.title}</h3>
              <p style={{ fontSize: 15.5, color: "var(--ink-soft)", margin: 0,
              lineHeight: 1.55, textWrap: "pretty" }}>{s.body}</p>
            </div>
          </div>
        )}
      </div>
    </Section>);

}
window.HowWeWork = HowWeWork;