/* ===================================================================
   ROVIA — Why Choose Rovia (engineering benefit cards)
   =================================================================== */

const BENEFITS = [
  {
    icon: "precision",
    title: "Precision Workmanship",
    desc: "Every joint, course and reveal is set to the drawing — tolerances measured, not estimated.",
    annot: ["Set to drawing", "Measured tolerances"],
    spec: "± 1 mm joint accuracy",
  },
  {
    icon: "specialists",
    title: "Experienced Specialists",
    desc: "Stonemasons and installers who have spent years on natural stone, facades and detailed work.",
    annot: ["Trained masons", "In-house crews"],
    spec: "10+ yrs avg. on the tools",
  },
  {
    icon: "materials",
    title: "Quality Materials",
    desc: "Sourced natural stone with verified origin, grading and finish — specified before a single cut.",
    annot: ["Verified origin", "Graded & sampled"],
    spec: "Certified stone supply",
  },
  {
    icon: "delivery",
    title: "Reliable Project Delivery",
    desc: "Clear schedule, clean site and defined milestones — handed over complete, on the agreed date.",
    annot: ["Defined milestones", "Clean handover"],
    spec: "On-schedule delivery",
  },
];

function BenefitCard({ b, idx }) {
  const [hover, setHover] = useState(false);
  return (
    <div
      className={"benefit-card reveal d" + ((idx % 4) + 1)}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
    >
      <div className="benefit-corner mono">{String(idx + 1).padStart(2, "0")}</div>
      <div className="benefit-icon">
        <Icon name={b.icon} size={46} stroke={hover ? "#D99041" : "#264653"} />
      </div>
      <h3 className="h5 benefit-title">{b.title}</h3>
      <p className="body-sm benefit-desc">{b.desc}</p>

      <div className="benefit-annot" style={{ opacity: hover ? 1 : 0 }}>
        {b.annot.map((a) => (
          <span key={a} className="benefit-tag mono">
            <span className="benefit-tag-dot" />
            {a}
          </span>
        ))}
      </div>

      <div className="benefit-spec mono" style={{ color: hover ? "#D99041" : "#667085" }}>
        {b.spec}
      </div>
    </div>
  );
}

function WhyChoose() {
  return (
    <section className="section why-section" id="why">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="kicker reveal">Why GlobalStaff</span>
            <h2 className="h2 reveal d1">Built on precision and accountability</h2>
          </div>
          <p className="body section-head-sub reveal d2">
            Four principles that hold from the first site visit to the final joint. Hover any card
            for the detail behind it.
          </p>
        </div>
        <div className="benefits-grid">
          {BENEFITS.map((b, i) => (
            <BenefitCard key={b.title} b={b} idx={i} />
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { WhyChoose });