/* ===================================================================
   GLOBALSTAFF — About (craftsmanship story + architectural visual)
   =================================================================== */

const ABOUT_DETAILS = [
  { k: "Approach", v: "Drawing-led", sub: "every project starts on paper" },
  { k: "Materials", v: "Natural stone", sub: "verified origin & grade" },
  { k: "Stonework", v: "In-house", sub: "own masons, no subcontract" },
  { k: "Standards", v: "EN-graded", sub: "specified before cutting" },
];

function About() {
  const visualRef = useRef(null);
  const [reveal, setReveal] = useState(false);
  useInView(visualRef, () => setReveal(true), 0.3);

  return (
    <section className="section about-section" id="about">
      <div className="container about-grid">
        <div className="about-copy">
          <span className="kicker reveal">About GlobalStaff</span>
          <h2 className="h2 reveal d1">Craftsmanship, planned like engineering</h2>
          <p className="body-lg about-lead reveal d2">
            GlobalStaff OÜ is a stone construction company that treats masonry as a discipline —
            measured, drawn and built to last.
          </p>
          <p className="body about-text reveal d2">
            We specialise in natural stone installation, facade cladding and architectural
            stonework across Estonia and the Baltics. Every project begins with a site assessment
            and a detailed drawing; nothing is cut until the design is resolved. Our own masons
            then set the stone to that drawing — so the finished surface matches the intent, joint
            for joint.
          </p>

          <div className="about-points reveal d3">
            <div className="about-point">
              <Icon name="check" size={26} stroke="#D99041" />
              <span className="body-sm">In-house stonemasons — no subcontracted labour</span>
            </div>
            <div className="about-point">
              <Icon name="check" size={26} stroke="#D99041" />
              <span className="body-sm">Drawings and samples approved before any stone is cut</span>
            </div>
            <div className="about-point">
              <Icon name="check" size={26} stroke="#D99041" />
              <span className="body-sm">Natural stone with verified origin, grading and finish</span>
            </div>
          </div>
        </div>

        <div className="about-visual reveal d2" ref={visualRef}>
          <div className="about-visual-head">
            <span className="mono about-visual-title">Detail · Ventilated facade</span>
            <span className="about-visual-tag">SECTION 1:10</span>
          </div>

          <div className="fleet-drawing" style={{ margin: 0 }}>
            <BlueprintStone type="facade" hover={reveal} />
          </div>

          <div className="about-detail-grid">
            {ABOUT_DETAILS.map((d) => (
              <div className="about-detail" key={d.k}>
                <div className="about-detail-k">{d.k}</div>
                <div className="about-detail-v">{d.v}</div>
                <div className="about-detail-sub">{d.sub}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { About });