// ============================================================
// Mfg2SolutionsMobile — MOBILE port of the desktop "Solutions for this
// sector" section (Mfg2Solutions) from mfg2-page-2.jsx.
//
// Desktop = interactive facility schematic (left) + 5-row hover list (right),
// on a Soft-Green surface with Paper-White text.
// Mobile keeps the SAME story, palette, type & iconography but swaps hover
// for touch, following the approved EV-Charging mobile pattern:
//   • Intro (eyebrow + headline + supporting copy), stacked
//   • Interactive diagram, always visible, the visual focus
//   • Solution cards as a horizontal swipe carousel below the diagram
//   • Tapping a card / diagram marker -> updates the active diagram zone
//   • A dedicated "Explore …" link inside each card handles navigation,
//     so a first tap activates and the link tap navigates (no touch conflict)
//   • Default active zone: 02 — Battery Storage (per approved screenshot)
// ============================================================

const MFG_AMBER       = 'rgba(233,199,134,1)';   // --gi-amber-soft
const MFG_AMBER_FILL  = 'rgba(233,199,134,0.18)';
const MFG_SOFT_GREEN  = '#375844';

// ============================================================
// Mfg2FacilitySchematicMobile — identical SVG schematic to desktop, with
// the numbered markers made tappable (large invisible hit targets).
// 5 zones · 01 Solar PV (roof) · 02 Battery (pad) · 03 Audit (facility)
//          · 04 LED Lighting (ceiling band) · 05 EV Charging (loading & yard)
// ============================================================
const Mfg2FacilitySchematicMobile = ({ activeIndex, onSelectZone }) => {
  const W = 540;
  const H = 360;
  const amber    = MFG_AMBER;
  const amberFill= MFG_AMBER_FILL;
  const ink      = 'rgba(255,255,255,0.55)';
  const inkDim   = 'rgba(255,255,255,0.32)';
  const inkFaint = 'rgba(255,255,255,0.18)';
  const inkText  = 'rgba(255,255,255,0.62)';

  const zones = [
    { id: 0, label: '01', cx: 270, cy: 96,
      hl: <rect x="80" y="78" width="380" height="40" fill="none" stroke={amber} strokeWidth="1.5" /> },
    { id: 1, label: '02', cx: 502, cy: 244,
      hl: <rect x="468" y="220" width="68" height="62" fill={amberFill} stroke={amber} strokeWidth="1.5" /> },
    { id: 2, label: '03', cx: 270, cy: 200,
      hl: <rect x="80" y="120" width="380" height="160" fill="none" stroke={amber} strokeWidth="1.5" strokeDasharray="4 5" /> },
    { id: 3, label: '04', cx: 270, cy: 134,
      hl: <rect x="92" y="124" width="356" height="22" fill={amberFill} stroke={amber} strokeWidth="1.5" /> },
    { id: 4, label: '05', cx: 80, cy: 308,
      hl: <rect x="20" y="288" width="140" height="40" fill="none" stroke={amber} strokeWidth="1.5" /> },
  ];

  return (
    <div style={{ position: 'relative', width: '100%' }}>
      <svg viewBox={`0 0 ${W} ${H}`} width="100%" height="auto"
        style={{ display: 'block', overflow: 'visible' }}
        aria-label="Stylized manufacturing facility schematic">

        {/* Ground line + horizon */}
        <line x1="0" y1="282" x2={W} y2="282" stroke={ink} strokeWidth="1" />
        <line x1="0" y1="328" x2={W} y2="328" stroke={inkFaint} strokeWidth="1" strokeDasharray="2 4" />

        {/* Building outline */}
        <path d="M 80 282 L 80 118 L 270 78 L 460 118 L 460 282 Z"
          fill="rgba(255,255,255,0.04)" stroke={ink} strokeWidth="1.25" />

        {/* Production-floor divider — permanent feature */}
        <line x1="340" y1="148" x2="340" y2="282" stroke={inkDim} strokeWidth="1" />
        <text x="400" y="200" textAnchor="middle"
          fontFamily="ui-monospace, monospace" fontSize="9" fill={inkText}
          letterSpacing="1.4">WAREHOUSE</text>

        {/* Roof solar panels — Solar PV zone (01) */}
        <g opacity={activeIndex === 0 ? 1 : 0.65}>
          {(() => {
            const panelLen   = 26;
            const panelThick = 2;
            const legH       = 5;
            const slope = 40 / 190;
            const angleDeg = Math.atan(slope) * 180 / Math.PI;
            const positions = [];
            for (let i = 0; i < 5; i++) {
              const cx = 110 + i * 30;
              const roofY = 118 - (cx - 80) * slope;
              positions.push({ cx, roofY, angle: -angleDeg, key: `L${i}` });
            }
            for (let i = 0; i < 5; i++) {
              const cx = 310 + i * 30;
              const roofY = 78 + (cx - 270) * slope;
              positions.push({ cx, roofY, angle: angleDeg, key: `R${i}` });
            }
            const panelStroke = activeIndex === 0 ? amber : ink;
            const panelFill   = activeIndex === 0 ? amber : ink;
            const legStroke   = activeIndex === 0 ? amber : inkDim;
            return positions.map(({ cx, roofY, angle, key }) => {
              const x0 = cx - panelLen / 2;
              const x1 = cx + panelLen / 2;
              const yPanelTop = roofY - legH - panelThick;
              const yLegTop = roofY - legH;
              const legInset = 4;
              return (
                <g key={key} transform={`rotate(${angle} ${cx} ${roofY})`}>
                  <line x1={x0 + legInset} y1={yLegTop}
                        x2={x0 + legInset} y2={roofY}
                        stroke={legStroke} strokeWidth="0.9" />
                  <line x1={x1 - legInset} y1={yLegTop}
                        x2={x1 - legInset} y2={roofY}
                        stroke={legStroke} strokeWidth="0.9" />
                  <rect x={x0} y={yPanelTop}
                        width={panelLen} height={panelThick}
                        fill={panelFill} stroke={panelStroke} strokeWidth="0.6" />
                </g>
              );
            });
          })()}
        </g>

        {/* Ceiling LED fixtures — LED Lighting zone (04) */}
        <g opacity={activeIndex === 3 ? 1 : 0.5}>
          <line x1="92" y1="135" x2="448" y2="135"
            stroke={activeIndex === 3 ? amber : inkDim} strokeWidth="0.75" />
          {[120, 168, 216, 264, 312, 360, 408].map(x => (
            <g key={x}>
              <rect x={x - 8} y="128" width="16" height="6"
                fill={activeIndex === 3 ? amber : 'transparent'}
                stroke={activeIndex === 3 ? amber : ink} strokeWidth="1" />
              {activeIndex === 3 && (
                <path d={`M ${x - 8} 134 L ${x - 18} 168 L ${x + 18} 168 L ${x + 8} 134 Z`}
                  fill="rgba(233,199,134,0.10)" stroke="none" />
              )}
              <line x1={x} y1="120" x2={x} y2="128"
                stroke={activeIndex === 3 ? amber : inkDim} strokeWidth="0.75" />
            </g>
          ))}
        </g>

        {/* Production-floor machine indicators */}
        <g opacity="0.45">
          {[140, 200, 260, 320].map(x => (
            <g key={x}>
              <rect x={x - 8} y={248} width="16" height="34" fill="none"
                stroke={ink} strokeWidth="1" />
              <line x1={x} y1={236} x2={x} y2={248}
                stroke={ink} strokeWidth="1" />
            </g>
          ))}
        </g>

        {/* Outdoor BESS pad — Battery zone (02) */}
        <g opacity={activeIndex === 1 ? 1 : 0.55}>
          <rect x="468" y="278" width="68" height="6"
            fill={activeIndex === 1 ? amber : ink}
            opacity={activeIndex === 1 ? 0.6 : 0.4} />
          <rect x="476" y="232" width="24" height="46"
            fill={activeIndex === 1 ? amberFill : 'transparent'}
            stroke={activeIndex === 1 ? amber : ink} strokeWidth="1" />
          <rect x="504" y="232" width="24" height="46"
            fill={activeIndex === 1 ? amberFill : 'transparent'}
            stroke={activeIndex === 1 ? amber : ink} strokeWidth="1" />
          {[0,1,2,3,4].map(i => (
            <line key={`vL${i}`} x1="479" y1={240 + i*7} x2="497" y2={240 + i*7}
              stroke={activeIndex === 1 ? amber : ink} strokeWidth="0.75" />
          ))}
          {[0,1,2,3,4].map(i => (
            <line key={`vR${i}`} x1="507" y1={240 + i*7} x2="525" y2={240 + i*7}
              stroke={activeIndex === 1 ? amber : ink} strokeWidth="0.75" />
          ))}
          <path d={`M 460 252 L 476 252`} fill="none"
            stroke={activeIndex === 1 ? amber : inkDim} strokeWidth="1"
            strokeDasharray="2 3" />
          <text x="502" y="226" textAnchor="middle"
            fontFamily="ui-monospace, monospace" fontSize="9"
            fill={activeIndex === 1 ? amber : inkText}
            letterSpacing="1.4">BESS</text>
        </g>

        {/* Loading dock + EV chargers — EV zone (05) */}
        <g opacity={activeIndex === 4 ? 1 : 0.55}>
          <rect x="20" y="252" width="56" height="30" fill="none"
            stroke={activeIndex === 4 ? amber : ink} strokeWidth="1" />
          {[28, 56, 96, 124].map(x => (
            <g key={x}>
              <line x1={x} y1="328" x2={x} y2="298"
                stroke={activeIndex === 4 ? amber : ink} strokeWidth="1" />
              <circle cx={x} cy="298" r="3"
                fill={activeIndex === 4 ? amber : 'transparent'}
                stroke={activeIndex === 4 ? amber : ink} strokeWidth="1" />
            </g>
          ))}
          <line x1="0" y1="332" x2="160" y2="332"
            stroke={activeIndex === 4 ? amber : inkDim} strokeWidth="1" />
          <text x="80" y="346" textAnchor="middle"
            fontFamily="ui-monospace, monospace" fontSize="9"
            fill={activeIndex === 4 ? amber : inkText}
            letterSpacing="1.4">LOADING · EV</text>
        </g>

        {/* Whole-facility audit ring — Audit (03) */}
        <g opacity={activeIndex === 2 ? 1 : 0}>
          <rect x="72" y="72" width="396" height="216" fill="none"
            stroke={amber} strokeWidth="1.25" strokeDasharray="4 5" />
        </g>

        <g style={{ pointerEvents: 'none' }}>{zones[activeIndex].hl}</g>

        {/* Numbered markers — tappable */}
        {zones.map((z, i) => {
          const isActive = i === activeIndex;
          return (
            <g key={z.id}
              onClick={() => onSelectZone && onSelectZone(i)}
              role="button" tabIndex={0}
              aria-label={`Show zone ${z.label}`}
              style={{ cursor: 'pointer' }}>
              {/* large invisible touch target */}
              <circle cx={z.cx} cy={z.cy} r="24" fill="transparent" />
              <circle cx={z.cx} cy={z.cy} r={isActive ? 13 : 11}
                fill={isActive ? amber : MFG_SOFT_GREEN}
                stroke={isActive ? amber : 'rgba(255,255,255,0.78)'} strokeWidth="1.25" />
              <text x={z.cx} y={z.cy + 3} textAnchor="middle"
                fontFamily="ui-monospace, monospace" fontSize="10" fontWeight="600"
                letterSpacing="0.5"
                fill={isActive ? '#375844' : 'rgba(255,255,255,0.92)'}>
                {z.label}
              </text>
            </g>
          );
        })}
      </svg>
    </div>
  );
};

// ============================================================
// Mfg2SolutionsMobile — full mobile section
// ============================================================
const Mfg2SolutionsMobile = () => {
  const rows = [
    { idx: '01', icon: 'sun',              name: 'Commercial Solar', zone: 'Rooftop',            tag: 'Offset daytime production load.',       why: 'High annual consumption and large roof areas make manufacturing facilities strong candidates for rooftop solar generation — sized to the optimised load, not the unmanaged one.', href: 'Solutions - Commercial Solar.html' },
    { idx: '02', icon: 'battery-charging', name: 'Battery Storage',  zone: 'Outdoor pad',        tag: 'Cut peak demand charges.',              why: 'Storage captures excess solar generation and shaves the demand spikes that set monthly billing — and unlocks IESO demand-response revenue on flexible loads.', href: 'Solutions - Battery Storage.html' },
    { idx: '03', icon: 'clipboard-list',   name: 'Energy Audits',    zone: 'Whole facility',     tag: 'Establish the baseline first.',         why: 'Audits identify demand reduction opportunities across HVAC, compressed air, lighting, and building controls — before any generation system is sized against the wrong load.', href: 'Solutions - Energy Audits.html' },
    { idx: '04', icon: 'lightbulb',        name: 'LED Lighting',     zone: 'Production ceiling', tag: 'Highest-return retrofit on the floor.', why: 'Manufacturing facilities often have large, poorly lit production areas with legacy HID fixtures. LED retrofits cut both consumption and demand and qualify for saveONenergy incentives.', href: 'Solutions - LED Lighting.html' },
    { idx: '05', icon: 'plug-zap',         name: 'EV Charging',      zone: 'Loading & yard',     tag: 'Fleet electrification on a plan.',      why: 'For facilities with vehicle fleets or planning electrification, on-site solar provides a cost-effective charging infrastructure tied to operational schedules.', href: 'Solutions - EV Charging.html' },
  ];

  // Default active zone: 02 — Battery Storage (index 1), per approved screenshot.
  const [active, setActive] = React.useState(1);
  const scrollerRef = React.useRef(null);
  const cardRefs = React.useRef([]);
  const programmatic = React.useRef(false);
  const rafId = React.useRef(0);
  const settleTimer = React.useRef(0);
  const didInit = React.useRef(false);

  // (Re)draw lucide icons whenever the active card changes.
  React.useEffect(() => {
    const t = setTimeout(() => window.lucide && window.lucide.createIcons({ attrs: { 'stroke-width': 1.4 } }), 20);
    return () => clearTimeout(t);
  }, [active]);

  const scrollToCard = (i, instant) => {
    const sc = scrollerRef.current;
    const card = cardRefs.current[i];
    if (!sc || !card) return;
    programmatic.current = true;
    window.clearTimeout(settleTimer.current);
    const target = card.offsetLeft - (sc.clientWidth - card.clientWidth) / 2;
    const max = sc.scrollWidth - sc.clientWidth;
    const end = Math.max(0, Math.min(max, target));
    const start = sc.scrollLeft;
    const dist = end - start;

    window.cancelAnimationFrame(scrollToCard._raf);
    if (instant) {
      // No CSS scroll-snap to fight us, so a direct jump holds. Re-assert on
      // the next frame in case layout settles a hair after the first paint.
      sc.scrollLeft = end;
      window.requestAnimationFrame(() => {
        sc.scrollLeft = end;
        programmatic.current = false;
      });
      return;
    }
    if (Math.abs(dist) < 1) {
      programmatic.current = false;
      return;
    }
    const dur = 420;
    const t0 = (window.performance || Date).now();
    const ease = (t) => 1 - Math.pow(1 - t, 3); // easeOutCubic
    const step = (now) => {
      const p = Math.min(1, (now - t0) / dur);
      sc.scrollLeft = start + dist * ease(p);
      if (p < 1) {
        scrollToCard._raf = window.requestAnimationFrame(step);
      } else {
        programmatic.current = false;
      }
    };
    scrollToCard._raf = window.requestAnimationFrame(step);
  };

  // Center the default card (02) on first paint. The flex children may not
  // have their final layout on the first frame (offsetLeft still 0), so retry
  // across a few frames until a card reports a non-zero offset, then jump.
  React.useEffect(() => {
    if (didInit.current) return;
    let tries = 0;
    const tryCenter = () => {
      const sc = scrollerRef.current;
      const card = cardRefs.current[1];
      if (sc && card && card.offsetLeft > 0) {
        didInit.current = true;
        scrollToCard(1, true);
        return;
      }
      if (tries++ < 40) requestAnimationFrame(tryCenter);
    };
    requestAnimationFrame(tryCenter);
    // Belt-and-suspenders: also re-center once everything (fonts/images) loads.
    const onLoad = () => { didInit.current = false; tries = 0; requestAnimationFrame(tryCenter); };
    window.addEventListener('load', onLoad);
    return () => window.removeEventListener('load', onLoad);
  }, []);

  // Tap a card OR a diagram marker -> select that zone + center its card.
  const selectZone = (i) => {
    setActive(i);
    scrollToCard(i);
  };

  const nearestCard = () => {
    const sc = scrollerRef.current;
    if (!sc) return 0;
    const center = sc.scrollLeft + sc.clientWidth / 2;
    let best = 0, bestDist = Infinity;
    cardRefs.current.forEach((c, i) => {
      if (!c) return;
      const cc = c.offsetLeft + c.clientWidth / 2;
      const d = Math.abs(cc - center);
      if (d < bestDist) { bestDist = d; best = i; }
    });
    return best;
  };

  // Swipe -> live-update the active zone to the nearest card, then JS-snap to
  // center it once the user stops scrolling (CSS scroll-snap is disabled
  // because mandatory snap reverts programmatic centering to position 0).
  const handleScroll = () => {
    if (programmatic.current) return;
    window.clearTimeout(settleTimer.current);
    settleTimer.current = window.setTimeout(() => {
      const i = nearestCard();
      scrollToCard(i);
    }, 110);
    if (rafId.current) return;
    rafId.current = requestAnimationFrame(() => {
      rafId.current = 0;
      const best = nearestCard();
      setActive((prev) => (prev === best ? prev : best));
    });
  };

  return (
    <section data-screen-label="Solutions for this sector (mobile)" style={{
      background: MFG_SOFT_GREEN, color: 'var(--gi-paper-white)',
      padding: '64px 0 68px', position: 'relative', overflow: 'hidden'
    }}>
      {/* Top amber tick — mirrors desktop */}
      <span aria-hidden="true" style={{
        position: 'absolute', top: 0, left: 24, width: 56, height: 2,
        background: 'var(--gi-amber)'
      }} />

      <div style={{ position: 'relative', zIndex: 1, padding: '0 24px' }}>

        {/* ===== 1 · INTRO ===== */}
        <div data-gi-reveal style={{ marginBottom: 30 }}>
          <div style={{ marginBottom: 18 }}>
            <Eyebrow className="gi-eyebrow--gold">Solutions for this sector</Eyebrow>
          </div>
          <h2 style={{
            font: '500 30px/34px var(--ff-sans)', letterSpacing: '-0.024em',
            color: 'var(--gi-paper-white)', margin: 0, textWrap: 'balance'
          }}>What manufacturing projects typically involve.</h2>
          <p style={{
            font: '400 15px/25px var(--ff-sans)', color: 'rgba(255,255,255,0.72)',
            margin: '20px 0 0', textWrap: 'pretty'
          }}>
            A complete manufacturing program begins with the load baseline, then
            sequences efficiency and generation together — solar, storage, lighting,
            and EV infrastructure planned around production schedules and BEPS positioning.
          </p>
        </div>

        {/* ===== 2 · INTERACTIVE DIAGRAM (always visible) ===== */}
        <div data-gi-reveal style={{
          position: 'relative',
          border: '1px solid rgba(255,255,255,0.18)',
          padding: '18px 18px 16px', marginBottom: 20
        }}>
          {/* header strip — matches updated desktop map title */}
          <div style={{ marginBottom: 6, display: 'inline-block' }}>
            <div style={{
              fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.18em',
              textTransform: 'uppercase', color: 'rgba(255,255,255,0.78)', fontWeight: 500,
              background: 'rgba(255,255,255,0.10)', padding: '4px 8px'
            }}>INTEGRTED ENERGY SYSTEMS</div>
          </div>

          <Mfg2FacilitySchematicMobile activeIndex={active} onSelectZone={selectZone} />

          {/* Caption strip */}
          <div style={{
            marginTop: 14, paddingTop: 14,
            borderTop: '1px solid rgba(255,255,255,0.18)',
            display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap'
          }}>
            <span style={{
              font: '500 14px/20px var(--ff-sans)', color: 'var(--gi-paper-white)',
              letterSpacing: '-0.005em', whiteSpace: 'nowrap'
            }}>{rows[active].zone}</span>
            <span aria-hidden="true" style={{ width: 1, height: 13, background: 'rgba(255,255,255,0.22)' }} />
            <span style={{
              font: '400 13px/20px var(--ff-sans)', color: 'rgba(255,255,255,0.72)'
            }}>{rows[active].name}</span>
          </div>
        </div>

        {/* progress hint */}
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          marginBottom: 14, padding: '0 2px'
        }}>
          <span style={{
            fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.16em',
            textTransform: 'uppercase', color: 'rgba(255,255,255,0.62)', fontWeight: 500
          }}>Tap or swipe to explore</span>
          <span style={{
            fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.16em',
            textTransform: 'uppercase', color: 'rgba(255,255,255,0.62)', fontWeight: 500
          }}>{rows[active].idx} / 05</span>
        </div>
      </div>

      {/* ===== 3 · SOLUTION CARDS — swipe carousel ===== */}
      <div
        ref={scrollerRef}
        onScroll={handleScroll}
        className="mfg-cards"
        style={{
          display: 'flex', gap: 14,
          overflowX: 'auto', overflowY: 'hidden',
          WebkitOverflowScrolling: 'touch',
          paddingInline: '11%', paddingBottom: 4
        }}>
        {rows.map((r, i) => {
          const isActive = active === i;
          const onLinkClick = (e) => {
            // First tap on an inactive card's link only activates — no navigation.
            if (!isActive) { e.preventDefault(); selectZone(i); }
            e.stopPropagation();
          };
          return (
            <article
              key={r.name}
              ref={(el) => (cardRefs.current[i] = el)}
              onClick={() => selectZone(i)}
              style={{
                flex: '0 0 78%',
                position: 'relative',
                background: isActive ? 'rgba(233,199,134,0.10)' : 'rgba(255,255,255,0.04)',
                border: `1px solid ${isActive ? 'rgba(233,199,134,0.45)' : 'rgba(255,255,255,0.18)'}`,
                padding: '24px 22px 22px',
                display: 'flex', flexDirection: 'column',
                cursor: 'pointer',
                transition: 'background 240ms cubic-bezier(.2,0,0,1), border-color 240ms cubic-bezier(.2,0,0,1)',
                minHeight: 300
              }}>
              {/* active accent stripe on left edge */}
              <span aria-hidden="true" style={{
                position: 'absolute', left: 0, top: 0, bottom: 0, width: 2,
                background: 'var(--gi-amber)',
                opacity: isActive ? 1 : 0,
                transition: 'opacity 240ms cubic-bezier(.2,0,0,1)'
              }} />

              <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 22 }}>
                <div style={{
                  width: 44, height: 44, flexShrink: 0,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  border: `1px solid ${isActive ? 'var(--gi-amber-soft)' : 'rgba(255,255,255,0.28)'}`,
                  background: isActive ? 'rgba(233,199,134,0.14)' : 'transparent',
                  transition: 'background 240ms, border-color 240ms'
                }}>
                  <i data-lucide={r.icon} style={{
                    width: 22, height: 22, strokeWidth: 1.4,
                    color: isActive ? 'var(--gi-amber-soft)' : 'rgba(255,255,255,0.78)'
                  }} />
                </div>
                <span style={{
                  fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.18em',
                  textTransform: 'uppercase', fontWeight: 600,
                  color: isActive ? 'var(--gi-amber-soft)' : 'rgba(255,255,255,0.55)',
                  transition: 'color 240ms'
                }}>{r.idx}</span>
              </div>

              <h3 style={{
                font: '500 21px/26px var(--ff-sans)', letterSpacing: '-0.014em',
                color: 'var(--gi-paper-white)', margin: '0 0 6px'
              }}>{r.name}</h3>
              <div style={{
                font: '500 13px/20px var(--ff-sans)', letterSpacing: '-0.005em',
                color: 'rgba(255,255,255,0.62)', fontStyle: 'italic', marginBottom: 14
              }}>— {r.tag}</div>

              <p style={{
                font: '400 14px/22px var(--ff-sans)', color: 'rgba(255,255,255,0.72)',
                margin: 0, textWrap: 'pretty'
              }}>{r.why}</p>

              {/* secondary navigation action */}
              <a
                href={r.href}
                onClick={onLinkClick}
                tabIndex={isActive ? 0 : -1}
                aria-hidden={!isActive}
                style={{
                  marginTop: 'auto', paddingTop: 20,
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                  font: '500 13px/16px var(--ff-sans)', letterSpacing: '0.01em',
                  textDecoration: 'none', alignSelf: 'flex-start',
                  color: isActive ? 'var(--gi-amber-soft)' : 'rgba(255,255,255,0.45)',
                  opacity: isActive ? 1 : 0.55,
                  transition: 'color 240ms, opacity 240ms'
                }}>
                Explore {r.name}
                <span aria-hidden="true" style={{ fontFamily: 'var(--ff-mono)', fontSize: 15 }}>→</span>
              </a>
            </article>
          );
        })}
      </div>

      {/* pagination dots */}
      <div style={{
        display: 'flex', justifyContent: 'center', gap: 8,
        marginTop: 22, marginBottom: 8
      }}>
        {rows.map((r, i) => (
          <button
            key={i}
            onClick={() => selectZone(i)}
            aria-label={`Go to ${r.name}`}
            style={{
              width: active === i ? 22 : 8, height: 8,
              borderRadius: 999, border: 'none', padding: 0, cursor: 'pointer',
              background: active === i ? 'var(--gi-amber-soft)' : 'rgba(255,255,255,0.24)',
              transition: 'background 240ms cubic-bezier(.2,0,0,1), width 240ms cubic-bezier(.2,0,0,1)'
            }} />
        ))}
      </div>
    </section>
  );
};

Object.assign(window, { Mfg2SolutionsMobile, Mfg2FacilitySchematicMobile });