/* ===================================================================
   GLOBALSTAFF — Services (stone pattern cards)
   Reuses the .region-card layout; route fragments → masonry patterns.
   =================================================================== */

function StonePattern({ kind, hover }) {
  const base = "#D8DAD6";
  const on = "#264653";
  const acc = "#D99041";
  const common = {
    fill: "none",
    stroke: on,
    strokeWidth: 1.6,
    strokeLinejoin: "round",
    strokeLinecap: "round",
    style: { transition: "stroke 300ms ease, opacity 360ms ease", opacity: hover ? 0.22 : 0.78 },
  };
  // drawn-in leader/section line
  const draw = (extra = {}) => ({
    fill: "none", stroke: acc, strokeWidth: 1.3, strokeLinecap: "round", strokeLinejoin: "round",
    pathLength: 1, strokeDasharray: 1, strokeDashoffset: hover ? 0 : 1,
    style: { transition: `stroke-dashoffset 600ms var(--ease) ${extra.d || 0}ms` },
  });
  const lbl = (delay) => ({
    fontFamily: "'Space Mono', monospace", fontSize: 8.5, letterSpacing: "0.04em", fill: acc,
    style: { opacity: hover ? 1 : 0, transition: `opacity 320ms ease ${delay || 200}ms` },
  });

  const patterns = {
    ashlar: (
      <g {...common}>
        <path d="M20 48 h260 M20 84 h260 M20 120 h260" stroke={base} />
        <path d="M20 48 h260 M20 84 h260 M20 120 h260" />
        <path d="M70 30 v18 M150 30 v18 M220 30 v18" />
        <path d="M50 48 v36 M120 48 v36 M200 48 v36 M260 48 v36" />
        <path d="M90 84 v36 M170 84 v36 M240 84 v36" />
        <path d="M60 120 v32 M140 120 v32 M210 120 v32 M270 120 v32" />
      </g>
    ),
    facade: (
      <g {...common}>
        <rect x="34" y="28" width="232" height="124" stroke={base} />
        <path d="M34 69 h232 M34 110 h232" stroke={base} />
        <path d="M34 69 h232 M34 110 h232" />
        <path d="M112 28 v124 M188 28 v124" />
        <path d="M73 28 v124 M150 28 v124 M227 28 v124" strokeDasharray="3 4" opacity="0.6" />
      </g>
    ),
    herringbone: (
      <g {...common}>
        {Array.from({ length: 7 }).map((_, r) =>
          Array.from({ length: 5 }).map((_, c) => {
            const x = 30 + c * 52 + (r % 2) * 26;
            const y = 24 + r * 20;
            return <path key={r + "-" + c} d={`M${x} ${y} l18 10 l-18 10`} />;
          })
        )}
      </g>
    ),
    flagstone: (
      <g {...common}>
        <rect x="26" y="28" width="248" height="124" stroke={base} />
        <path d="M26 78 L96 60 L150 92 L120 152" />
        <path d="M96 60 L168 36 L222 70 L150 92" />
        <path d="M168 36 L274 52 M222 70 L274 110 L210 152 L150 92" />
        <path d="M26 120 L120 152 M210 152 L120 152" />
        <path d="M222 70 L274 70" opacity="0.6" />
      </g>
    ),
  };

  // hover construction-section overlays
  const details = {
    // Natural Stone — joint spacing, alignment guide, dimension markers
    ashlar: (
      <g>
        <g stroke={on} strokeWidth="1.4" fill="none" style={{ opacity: hover ? 1 : 0, transition: "opacity 300ms ease" }}>
          <rect x="60" y="52" width="90" height="30" />
          <rect x="60" y="90" width="90" height="30" />
        </g>
        {/* joint dimension */}
        <path {...draw({ d: 60 })} d="M158 82 v8 M158 90 v-8 M158 86 h-0.5" />
        <path {...draw({ d: 60 })} d="M154 82 h8 M154 90 h8" />
        <text x="166" y="89" {...lbl(360)}>JOINT 10</text>
        {/* alignment guide */}
        <path {...draw({ d: 120 })} d="M40 67 H270" strokeDasharray="6 6" />
        <text x="210" y="62" {...lbl(420)}>ALIGN</text>
        {/* length dim */}
        <path {...draw({ d: 180 })} d="M60 132 H150 M60 128 v8 M150 128 v8" />
        <text x="92" y="145" {...lbl(480)}>L 600</text>
      </g>
    ),
    // Facade — ventilated section build-up
    facade: (
      <g>
        <g fill="none" stroke={on} strokeWidth="1.4" style={{ opacity: hover ? 1 : 0, transition: "opacity 320ms ease 60ms" }}>
          <rect x="40" y="44" width="20" height="92" />
          <path d="M40 50 L60 44 M40 62 L60 56 M40 74 L60 68 M40 86 L60 80 M40 98 L60 92 M40 110 L60 104 M40 122 L60 116 M40 134 L60 128" strokeWidth="0.8" />
          <rect x="60" y="44" width="22" height="92" strokeDasharray="3 3" />
          <rect x="104" y="44" width="8" height="92" />
          <path d="M82 90 h22" />
          <rect x="120" y="44" width="120" height="92" />
        </g>
        {/* air cavity arrow */}
        <path {...draw({ d: 80 })} d="M88 120 v-58 M88 62 l-3 5 M88 62 l3 5" />
        {/* layer leaders + labels */}
        <text x="40" y="156" {...lbl(260)}>SUBSTRATE</text>
        <text x="84" y="40" {...lbl(320)}>INSULATION</text>
        <text x="96" y="156" {...lbl(380)}>AIR · FIX</text>
        <text x="150" y="40" {...lbl(440)}>STONE PANEL</text>
      </g>
    ),
    // Decorative — set-out construction logic
    herringbone: (
      <g>
        <path {...draw({ d: 40 })} d="M150 20 V160" strokeDasharray="6 6" />
        <path {...draw({ d: 120 })} d="M40 30 L260 150" strokeDasharray="4 5" />
        <path {...draw({ d: 120 })} d="M260 30 L40 150" strokeDasharray="4 5" />
        <path {...draw({ d: 220 })} d="M132 90 a18 18 0 0 1 18 -18" />
        <text x="156" y="86" {...lbl(360)}>45°</text>
        <text x="120" y="30" {...lbl(420)}>SET-OUT AXIS</text>
      </g>
    ),
    // Landscape — paving / drainage build-up (section)
    flagstone: (
      <g>
        <g fill="none" stroke={on} strokeWidth="1.4" style={{ opacity: hover ? 1 : 0, transition: "opacity 320ms ease 60ms" }}>
          <rect x="44" y="40" width="212" height="16" />
          <rect x="44" y="56" width="212" height="20" />
          <rect x="44" y="76" width="212" height="30" />
          <path d="M44 106 h212" strokeDasharray="4 4" />
          <path d="M50 76 v30 M70 76 v30 M90 76 v30 M110 76 v30 M130 76 v30 M150 76 v30 M170 76 v30 M190 76 v30 M210 76 v30 M230 76 v30" strokeWidth="0.7" />
        </g>
        <text x="44" y="36" {...lbl(240)}>PAVING</text>
        <text x="262" y="69" {...lbl(320)} textAnchor="end" style={{ ...lbl(320).style }}>BEDDING</text>
        <text x="44" y="124" {...lbl(380)}>SUB-BASE</text>
        {/* drainage arrow */}
        <path {...draw({ d: 160 })} d="M150 112 v22 M150 134 l-4 -5 M150 134 l4 -5" />
        <text x="156" y="130" {...lbl(440)}>DRAIN</text>
      </g>
    ),
  };

  return (
    <svg viewBox="0 0 300 180" width="100%" height="100%" aria-hidden="true">
      <defs>
        <pattern id={`sgrid-${kind}`} width="20" height="20" patternUnits="userSpaceOnUse">
          <path d="M20 0H0V20" fill="none" stroke="#D8DAD6" strokeWidth="0.5" opacity="0.5" />
        </pattern>
      </defs>
      <rect width="300" height="180" fill={`url(#sgrid-${kind})`} />
      {patterns[kind]}
      {details[kind]}
    </svg>
  );
}

const SERVICES = [
  {
    key: "installation",
    name: "Natural Stone Installation",
    code: "S-01",
    pattern: "ashlar",
    desc: "Coursed and random ashlar walls, interior and exterior surfaces in granite, limestone and marble.",
    tags: ["Granite", "Limestone", "Marble"],
    scope: "Interior · Exterior",
  },
  {
    key: "facade",
    name: "Facade Cladding",
    code: "S-02",
    pattern: "facade",
    desc: "Ventilated and adhered stone facades engineered for weather, movement and clean panel reveals.",
    tags: ["Ventilated", "Adhered", "Anchored"],
    scope: "Commercial · Residential",
  },
  {
    key: "decorative",
    name: "Decorative Stonework",
    code: "S-03",
    pattern: "herringbone",
    desc: "Feature walls, fireplaces and detailed patterns — herringbone, mosaic and bespoke stone inlays.",
    tags: ["Feature walls", "Mosaic", "Inlay"],
    scope: "Bespoke detail",
  },
  {
    key: "landscape",
    name: "Landscape Stone Construction",
    code: "S-04",
    pattern: "flagstone",
    desc: "Paving, steps, retaining walls and garden stonework built to drain, settle and last.",
    tags: ["Paving", "Steps", "Retaining"],
    scope: "Exterior · Hardscape",
  },
];

function ServiceCard({ s, idx }) {
  const [hover, setHover] = useState(false);
  return (
    <div
      className={"region-card reveal d" + ((idx % 4) + 1)}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
    >
      <div className="region-route svc-pattern">
        <StonePattern kind={s.pattern} hover={hover} />
      </div>

      <div className="region-body">
        <div className="region-head">
          <h3 className="h4 region-name">{s.name}</h3>
          <span className="region-code mono">{s.code}</span>
        </div>
        <p className="body-sm region-desc">{s.desc}</p>

        <div className="region-details" style={{ opacity: hover ? 1 : 0 }}>
          <div className="region-hubs">
            {s.tags.map((t) => (
              <span key={t} className="region-hub mono">{t}</span>
            ))}
          </div>
        </div>

        <div className="region-foot">
          <span className="caption mono region-transit">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="4" y="4" width="16" height="16" rx="1"/><path d="M4 12h16M12 4v16"/></svg>
            {s.scope}
          </span>
          <span className="region-go" style={{ opacity: hover ? 1 : 0.4 }}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </span>
        </div>
      </div>
    </div>
  );
}

function Services() {
  return (
    <section className="section regions-section" id="services">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="kicker reveal">Services</span>
            <h2 className="h2 reveal d1">Stone, worked four ways</h2>
          </div>
          <p className="body section-head-sub reveal d2">
            From structural masonry to decorative detail, every service starts as a drawing and
            ends as a finished surface. Hover a card to read its techniques.
          </p>
        </div>

        <div className="regions-grid">
          {SERVICES.map((s, i) => (
            <ServiceCard key={s.key} s={s} idx={i} />
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Services });