/* ===================================================================
   GLOBALSTAFF — Stone Solutions (blueprint construction details)
   Same card structure as the old Fleet; vehicles → stone systems.
   =================================================================== */

const SOLUTIONS = [
  {
    type: "natural",
    name: "Natural Stone",
    code: "M-01",
    tagline: "Limestone · Marble · Sandstone",
    specs: [
      { k: "Format", v: "Cut-to-size / random" },
      { k: "Thickness", v: "20–40 mm" },
      { k: "Finish", v: "Honed · Brushed · Split" },
    ],
    apps: ["Interior walls", "Flooring", "Feature surfaces"],
  },
  {
    type: "granite",
    name: "Granite",
    code: "M-02",
    tagline: "High-durability igneous stone",
    specs: [
      { k: "Format", v: "Slab / tile" },
      { k: "Thickness", v: "30 mm slab" },
      { k: "Finish", v: "Polished · Flamed" },
    ],
    apps: ["Worktops", "High-traffic floors", "Exterior steps"],
  },
  {
    type: "facade",
    name: "Facade Systems",
    code: "M-03",
    tagline: "Ventilated & adhered cladding",
    specs: [
      { k: "System", v: "Ventilated rail" },
      { k: "Air gap", v: "40 mm" },
      { k: "Fixing", v: "Concealed anchor" },
    ],
    apps: ["Building facades", "Soffits", "Column cladding"],
  },
];

function SolutionCard({ v, idx }) {
  const [hover, setHover] = useState(false);
  return (
    <div
      className={"fleet-card reveal d" + ((idx % 3) + 1)}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
    >
      <div className="fleet-head">
        <span className="fleet-code mono">{v.code}</span>
        <span className="fleet-sheet mono">DETAIL</span>
      </div>

      <div className="fleet-drawing">
        <BlueprintStone type={v.type} hover={hover} />
      </div>

      <div className="fleet-meta">
        <h3 className="h4 fleet-name">{v.name}</h3>
        <p className="caption mono fleet-tag">{v.tagline}</p>
      </div>

      <div className="fleet-specs">
        {v.specs.map((s, i) => (
          <div
            className="fleet-spec"
            key={s.k}
            style={{
              opacity: hover ? 1 : 0.85,
              transform: hover ? "translateX(0)" : "translateX(-2px)",
              transition: `all 300ms ease ${i * 60}ms`,
            }}
          >
            <span className="fleet-spec-k caption mono">{s.k}</span>
            <span className="fleet-spec-line" />
            <span className="fleet-spec-v body-sm">{s.v}</span>
          </div>
        ))}
      </div>

      <div className="fleet-suitable">
        <span className="fleet-suitable-title caption mono">Recommended use</span>
        <div className="fleet-apps">
          {v.apps.map((a) => (
            <div className="fleet-app" key={a}>
              <span className="fleet-app-dot" />
              <span className="fleet-app-text">{a}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function Solutions() {
  return (
    <section className="section fleet-section" id="solutions">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="kicker reveal">Stone Solutions</span>
            <h2 className="h2 reveal d1">Drawn as details, built as systems</h2>
          </div>
          <p className="body section-head-sub reveal d2">
            Each material is presented as a construction detail. Hover a card to reveal its layers,
            fixing method and section callout — the way it reads on a drawing.
          </p>
        </div>

        <div className="fleet-grid">
          {SOLUTIONS.map((v, i) => (
            <SolutionCard key={v.type} v={v} idx={i} />
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Solutions });