"use client";

export default function StainingProcess() {
  const steps = [
    {
      num: "01",
      title: "Quote & assess",
      desc: "We review your fence, deck, or structure — in person or from photos — and provide a clear quote covering prep, product, labour, and timeline. No hidden steps added later."
    },
    {
      num: "02",
      title: "Clean & prep",
      desc: "Every surface is cleaned and brightened with Expert Stain & Seal Clean & Bright before any stain is applied. Surrounding plants, surfaces, and structures are masked. The wood dries fully before we continue."
    },
    {
      num: "03",
      title: "Stain application",
      desc: "Expert Stain & Seal is applied to the clean, open wood grain — one or two coats depending on wood age, condition, and absorption. We work methodically by section to ensure even coverage and no lap marks."
    },
    {
      num: "04",
      title: "Walkthrough & done",
      desc: "We walk the finished project with you before we leave — checking coverage, any areas of concern, and reviewing care instructions. You only sign off when you're satisfied with the result."
    }
  ];

  return (
    <section className="process-section" id="process">
      <div className="reveal">
        <div className="section-eyebrow text-white-50">How every job runs</div>
        <h2 className="sh sh-white">Our staining process —<br /><span>no shortcuts.</span></h2>
      </div>
      <div className="process-grid reveal">
        {steps.map((step, index) => (
          <div key={index} className="process-step">
            <div className="step-num">{step.num}</div>
            <div className="step-title">{step.title}</div>
            <div className="step-desc">{step.desc}</div>
          </div>
        ))}
      </div>
    </section>
  );
}