// mun-page-3.jsx
// Municipal & Institutional Industry Page — Part 3
// MunSubsectors (6 facility-type cards on cream)
// MunDiscovery (3 process steps)
// MunFAQ (5 sector questions)
// MunClosingCTA (soft green)

// ============================================================
// MunSubsectors — 6 public-sector facility types in a 3×2 grid.
// Cream background, image placeholders, headline + body per card.
// Mirrors the F&B "Different food operations" layout.
// ============================================================
const MUN_SUBSECTORS = [
  {
    n: '01', stamp: 'Continuous load · 24/7',
    title: 'Social Housing',
    desc: 'Continuous occupancy with predictable daytime load. Suitable rooftop area for solar and a strong fit for federal funding pathways targeted at affordable housing.',
    placeholder: 'ROOFTOP · MULTI-FAMILY',
    img: `${window.GI_BASE}assets/industries/social_housing.webp`
  },
  {
    n: '02', stamp: 'BEPS focus',
    title: 'Municipal Offices & City Halls',
    desc: 'Standard weekday load profile. BEPS compliance positioning, lighting and HVAC controls, and a measurable foundation for council-reported net-zero commitments.',
    placeholder: 'CITY HALL · ADMIN',
    img: `${window.GI_BASE}assets/industries/municipal_offices_city_halls.webp`
  },
  {
    n: '03', stamp: 'Year-round consumption',
    title: 'Recreation & Community Centres',
    desc: 'Refrigeration and pool heating drive year-round consumption. Energy audits often surface significant savings before a single solar panel is specified.',
    placeholder: 'ARENA · POOL · COMMUNITY',
    img: `${window.GI_BASE}assets/industries/recreation_community_centres.webp`
  },
  {
    n: '04', stamp: 'Fleet electrification',
    title: 'Fleet Depots & Yards',
    desc: 'Municipal fleet electrification timelines drive EV infrastructure planning. Co-located solar provides a cost-effective charging power source for the depot.',
    placeholder: 'DEPOT · EV CHARGING',
    img: `${window.GI_BASE}assets/industries/fleet_depots_yards.webp`
  },
  {
    n: '05', stamp: 'Academic-year profile',
    title: 'Schools & Post-Secondary',
    desc: 'Predictable academic-year load profiles and large rooftop and parking areas. Strong educational visibility for board-reported sustainability commitments.',
    placeholder: 'SCHOOL · CAMPUS',
    img: `${window.GI_BASE}assets/industries/schools_post-secondary.webp`
  },
  {
    n: '06', stamp: 'Critical load',
    title: 'Healthcare & Institutions',
    desc: 'Critical-load facilities where battery storage and grid resilience matter. Audits document baseline before any operational change is scoped.',
    placeholder: 'HOSPITAL · INSTITUTION',
    img: `${window.GI_BASE}assets/industries/healthcare_institutions.webp`
  },
];

const MunSubsectorTile = ({ s }) => {
  const [hover, setHover] = React.useState(false);
  return (
  <article
    onMouseEnter={() => setHover(true)}
    onMouseLeave={() => setHover(false)}
    style={{
      background: 'transparent',
      display: 'flex', flexDirection: 'column', gap: 0,
    }}>
    <div style={{
      position: 'relative',
      aspectRatio: '4 / 3',
      overflow: 'hidden',
      background:
        'repeating-linear-gradient(45deg, rgba(15,33,51,0.04) 0 1px, transparent 1px 18px),' +
        'linear-gradient(135deg, var(--gi-wise-blue) 0%, #1B3450 100%)',
      border: '1px solid rgba(15,33,51,0.10)',
    }}>
      {/* corner crops */}
      {[
        { top: 10, left: 10, br: ['top', 'left'] },
        { top: 10, right: 10, br: ['top', 'right'] },
        { bottom: 10, left: 10, br: ['bottom', 'left'] },
        { bottom: 10, right: 10, br: ['bottom', 'right'] },
      ].map((c, i) => (
        <span key={i} aria-hidden="true" style={{
          position: 'absolute',
          top: c.top, left: c.left, right: c.right, bottom: c.bottom,
          width: 14, height: 14,
          borderTop:    c.top    != null ? '1.5px solid rgba(255,255,255,0.55)' : 'none',
          borderBottom: c.bottom != null ? '1.5px solid rgba(255,255,255,0.55)' : 'none',
          borderLeft:   c.left   != null ? '1.5px solid rgba(255,255,255,0.55)' : 'none',
          borderRight:  c.right  != null ? '1.5px solid rgba(255,255,255,0.55)' : 'none',
        }} />
      ))}

      {/* stamp top-left */}
      <span style={{
        position: 'absolute', left: 14, top: 14,
        display: 'inline-flex', alignItems: 'center', gap: 8,
        padding: '5px 9px',
        background: 'rgba(15,33,51,0.85)',
        backdropFilter: 'blur(4px)',
        fontFamily: 'var(--ff-mono)', fontSize: 9.5, letterSpacing: '0.16em',
        textTransform: 'uppercase', color: '#fff', fontWeight: 500,
      }}>
        <span>{s.stamp}</span>
      </span>

      {/* center placeholder text */}
      <div style={{
        position: 'absolute', inset: 0,
        display: 'grid', placeItems: 'center',
        color: 'rgba(255,255,255,0.32)',
        fontFamily: 'var(--ff-mono)', fontSize: 10.5, letterSpacing: '0.20em',
        textTransform: 'uppercase', textAlign: 'center', padding: 16,
      }}>[ {s.placeholder} ]</div>
      {s.img ? (
        <img src={s.img} alt={s.title}
          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
      ) : null}
    </div>

    <h3 style={{
      font: '500 19px/26px var(--ff-sans)', letterSpacing: '-0.012em',
      color: 'var(--gi-deep-ink)', margin: '20px 0 10px',
      textWrap: 'balance',
    }}>{s.title}</h3>
    <p style={{
      font: '400 14px/22px var(--ff-sans)',
      color: 'var(--gi-slate)', margin: 0, textWrap: 'pretty',
    }}>{s.desc}</p>

    {/* <div style={{
      marginTop: 14, paddingTop: 14,
      borderTop: '1px solid rgba(15,33,51,0.16)',
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      fontFamily: 'var(--ff-mono)', fontSize: 10.5,
      letterSpacing: '0.18em', textTransform: 'uppercase',
      color: 'var(--gi-deep-ink)', fontWeight: 500,
    }}>
      <span>Explore application</span>
      <span aria-hidden="true" style={{
        color: 'var(--gi-amber)', fontSize: 14,
        transform: hover ? 'translateX(6px)' : 'none',
        transition: 'transform 300ms cubic-bezier(.2,.6,.2,1)',
      }}>→</span>
    </div> */}
  </article>
  );
};

const MunSubsectors = () => (
  <section data-screen-label="07 Subsectors" data-gi-resp="mun-subsectors" style={{
    background: 'var(--gi-paper-cream)', padding: '128px 0',
  }}>
    <div data-gi-resp="container" style={{
      maxWidth: 1440, margin: '0 auto', padding: '0 48px',
    }}>
      <div data-gi-reveal data-gi-resp="mun-subsectors-head" className="gi-section-head" style={{
        display: 'flex', justifyContent: 'space-between', gap: 96,
        alignItems: 'flex-end', marginBottom: 56,
      }}>
        <div>
          <div style={{ marginBottom: 22 }}>
            <Eyebrow className="gi-eyebrow--green">Sector applications</Eyebrow>
          </div>
          <h2 style={{
            font: '500 44px/52px var(--ff-sans)', letterSpacing: '-0.024em',
            color: 'var(--gi-deep-ink)', margin: 0, textWrap: 'balance', maxWidth: 720,
          }}>
            Different public facilities.{' '}
            <span style={{ color: 'var(--gi-sage-accent)', fontStyle: 'italic', fontWeight: 400 }}>
              Different energy profiles.
            </span>
          </h2>
        </div>
        <p style={{
          font: '400 16px/26px var(--ff-sans)',
          color: 'var(--gi-slate)', margin: 0, maxWidth: 480, paddingBottom: 6,
          textWrap: 'pretty',
        }}>
          Municipal and institutional buildings span very different operating profiles
          — from continuous-occupancy social housing to seasonal recreation facilities
          to fleet depots planning electrification. Each calls for a different
          sequencing of measures.
        </p>
      </div>


      <div data-gi-reveal-stagger data-gi-resp="mun-subsectors-grid" style={{
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
        gap: '40px 28px',
      }}>
        {MUN_SUBSECTORS.map((s) => <MunSubsectorTile key={s.n} s={s} />)}
      </div>

      <div data-gi-resp="mun-subsectors-cta" style={{
        marginTop: 56, paddingTop: 32,
        borderTop: '1px solid rgba(15,33,51,0.18)',
        display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 40,
        alignItems: 'center',
      }}>
        <p style={{
          font: '400 15px/24px var(--ff-sans)',
          color: 'var(--gi-slate)', margin: 0, textWrap: 'pretty', maxWidth: 640,
        }}>
          Not sure which sub-sector best describes your facility?{' '}
          <span style={{ color: 'var(--gi-sage-accent)', fontStyle: 'italic' }}>
            That's usually the right place to start a conversation.
          </span>{' '}
          A 20-minute call is enough to map your load profile against the right scope of work.
        </p>
        <div data-gi-resp="mun-subsectors-cta-buttons" style={{ display: 'flex', gap: 12, justifyContent: 'flex-end', flexWrap: 'wrap' }}>
          <Button target="_blank" variant="ink" size="md" href="https://zfrmz.com/DFbsr7h1BGUMoyOYlJid">Book a sector consult →</Button>
          <Button variant="outline" size="md" href="/projects/?category=government">See all public sector projects</Button>
        </div>
      </div>
    </div>
  </section>
);


// ============================================================
// MunDiscovery — 3 process steps on Paper Cream.
// ============================================================
const MunDiscovery = () => {
  const step02bullets = [
    'demand-charge exposure',
    'operating load profile',
    'time-of-use consumption',
    'seasonal usage trends',
    'potential solar & storage economics',
  ];

  return (
    <section data-gi-resp="mun-discovery" data-screen-label="08 Discovery Process" style={{
      background: 'var(--gi-paper-cream)', padding: '0 0 128px',
    }}>
      <div data-gi-resp="container" style={{
        maxWidth: 1440, margin: '0 auto', padding: '0 48px',
      }}>
        <div data-gi-reveal data-gi-resp="mun-discovery-head" className="gi-section-head" style={{
          display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80,
          alignItems: 'end', justifyItems: 'flex-end',
        }}>
          <div>
            <div style={{ marginBottom: 22 }}>
              <Eyebrow className="gi-eyebrow--green">Our discovery process</Eyebrow>
            </div>
            <h2 style={{
              font: '500 56px/62px var(--ff-sans)', letterSpacing: '-0.028em',
              color: 'var(--gi-deep-ink)', margin: 0, textWrap: 'balance', maxWidth: 720,
            }}>
              Start with a baseline.{' '}
              <span style={{ color: 'var(--gi-sage-accent)', fontStyle: 'italic', fontWeight: 400 }}>
                Not a commitment.
              </span>
            </h2>
          </div>
          <p style={{
            font: '400 16px/26px var(--ff-sans)',
            color: 'var(--gi-slate)', margin: 0, maxWidth: 480, paddingBottom: 6,
            textWrap: 'pretty',
          }}>
            Most municipal and institutional facilities already have enough operational
            and utility data to identify meaningful energy-saving opportunities. The
            first step is understanding how the facility consumes power and where the
            strongest financial and compliance positioning exists.
          </p>
        </div>

        <div data-gi-reveal-stagger data-gi-resp="mun-discovery-grid" style={{
          marginTop: 80,
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
        }}>
          {/* Step 01 */}
          <article style={{
            background: 'var(--gi-paper-white)',
            border: '1px solid rgba(15,33,51,0.12)',
            padding: '40px 32px', display: 'flex', flexDirection: 'column',
          }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 12, marginBottom: 32,
            }}>
              <span style={{
                fontFamily: 'var(--ff-mono)', fontSize: 12, letterSpacing: '0.18em',
                color: 'var(--gi-amber)', fontWeight: 600,
              }}>STEP 01</span>
              <span aria-hidden="true" style={{
                flex: 1, height: 1, background: 'rgba(15,33,51,0.14)',
              }} />
            </div>
            <h3 style={{
              font: '500 24px/30px var(--ff-sans)', letterSpacing: '-0.014em',
              color: 'var(--gi-deep-ink)', margin: '0 0 16px',
              textWrap: 'balance',
            }}>Quick 20-minute discovery call.</h3>
            <p style={{
              font: '400 15px/24px var(--ff-sans)',
              color: 'var(--gi-slate)', margin: 0, textWrap: 'pretty',
            }}>
              We review your facility type, procurement context, BEPS exposure,
              net-zero commitments, and current priorities. No commitment required.
            </p>
          </article>

          {/* Step 02 */}
          <article style={{
            background: 'var(--gi-paper-white)',
            border: '1px solid rgba(15,33,51,0.12)',
            padding: '40px 32px', display: 'flex', flexDirection: 'column',
          }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 12, marginBottom: 32,
            }}>
              <span style={{
                fontFamily: 'var(--ff-mono)', fontSize: 12, letterSpacing: '0.18em',
                color: 'var(--gi-amber)', fontWeight: 600,
              }}>STEP 02</span>
              <span aria-hidden="true" style={{
                flex: 1, height: 1, background: 'rgba(15,33,51,0.14)',
              }} />
            </div>
            <h3 style={{
              font: '500 24px/30px var(--ff-sans)', letterSpacing: '-0.014em',
              color: 'var(--gi-deep-ink)', margin: '0 0 14px',
              textWrap: 'balance',
            }}>12 months of utility bills.</h3>
            <p style={{
              font: '400 15px/24px var(--ff-sans)',
              color: 'var(--gi-slate)', margin: '0 0 16px', textWrap: 'pretty',
            }}>
              Interval and utility billing data help identify:
            </p>
            <ul style={{
              listStyle: 'none', padding: 0, margin: 0,
              display: 'flex', flexDirection: 'column', gap: 8,
            }}>
              {step02bullets.map((b) => (
                <li key={b} style={{
                  display: 'grid', gridTemplateColumns: '14px 1fr', gap: 12,
                  font: '400 14px/22px var(--ff-sans)',
                  color: 'var(--gi-deep-ink)',
                }}>
                  <span aria-hidden="true" style={{
                    width: 6, height: 6, marginTop: 8,
                    background: 'var(--gi-sage-accent)', display: 'inline-block',
                  }} />
                  <span>{b}</span>
                </li>
              ))}
            </ul>
          </article>

          {/* Step 03 */}
          <article style={{
            background: 'var(--gi-paper-white)',
            border: '1px solid rgba(15,33,51,0.12)',
            padding: '40px 32px', display: 'flex', flexDirection: 'column',
          }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 12, marginBottom: 32,
            }}>
              <span style={{
                fontFamily: 'var(--ff-mono)', fontSize: 12, letterSpacing: '0.18em',
                color: 'var(--gi-amber)', fontWeight: 600,
              }}>STEP 03</span>
              <span aria-hidden="true" style={{
                flex: 1, height: 1, background: 'rgba(15,33,51,0.14)',
              }} />
            </div>
            <h3 style={{
              font: '500 24px/30px var(--ff-sans)', letterSpacing: '-0.014em',
              color: 'var(--gi-deep-ink)', margin: '0 0 16px',
              textWrap: 'balance',
            }}>Documented facility baseline.</h3>
            <p style={{
              font: '400 15px/24px var(--ff-sans)',
              color: 'var(--gi-slate)', margin: 0, textWrap: 'pretty',
            }}>
              We produce a facility-specific baseline covering consumption, GHG
              emissions, and a ranked list of measures — the reference point for
              BEPS submissions and council reporting.
            </p>
          </article>
        </div>

        <div data-gi-resp="mun-discovery-cta" style={{
          marginTop: 48, display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap',
        }}>
          <Button target="_blank" variant="primary" size="lg" href="https://zfrmz.com/vjBUOoKTlKt4YAOW19oO">Book a 20-minute discovery call</Button>
          <span style={{
            fontFamily: 'var(--ff-mono)', fontSize: 12, letterSpacing: '0.10em',
            color: 'var(--gi-graphite)', textTransform: 'uppercase',
          }}>No commitment required.</span>
        </div>
      </div>
    </section>
  );
};


// ============================================================
// MunFAQ — Paper White. 5 sector questions.
// ============================================================
const MunFAQ = () => {
  const items = [
    {
      q: 'Does BEPS apply to municipal buildings in Ontario?',
      a: "Yes — Ontario's Building Emissions Performance Standard applies to buildings above the size threshold regardless of ownership type. Municipal buildings, social housing, and public institutions that meet the threshold are subject to the same compliance requirements as privately owned commercial buildings.\n\nBuildings that begin GHG reduction programs earlier have more options and lower costs than those acting under deadline pressure."
    },
    {
      q: 'Can social housing properties install rooftop solar?',
      a: "Yes — rooftop solar is technically and financially viable for social housing properties with suitable roof area. The TCHC Torbolton project in Etobicoke, commissioned October 2025, demonstrates delivery within a Toronto Community Housing Corporation context.\n\nFederal funding programs including the Canada Greener Buildings Initiative have specific pathways for affordable housing and social housing properties."
    },
    {
      q: 'How do you work with public procurement requirements for energy projects?',
      a: "Public procurement requirements typically include documented competitive process, clear performance specifications, and accountability for delivery against agreed milestones.\n\nWe have experience delivering within procurement frameworks that require these elements. Project documentation, milestone tracking, and post-installation reporting are standard parts of our delivery scope — which aligns with what public reporting requirements demand."
    },
    {
      q: 'What net-zero documentation does an energy audit produce for institutional reporting?',
      a: "A commercial energy audit produces a facility-specific baseline for electricity consumption and GHG emissions, a ranked list of measures with estimated emissions reductions, and a model for tracking progress against a council- or board-approved net-zero target.\n\nThis documentation is the reference point for BEPS submissions, internal capital planning, and external sustainability reporting."
    },
    {
      q: 'Is there an incentive program specifically for public sector energy projects?',
      a: "Public sector projects qualify for the federal Clean Technology Investment Tax Credit, the Canada Greener Buildings Initiative (with specific pathways for institutional and social housing buildings), accelerated CCA where applicable, and Ontario's saveONenergy program.\n\nWe scope incentive eligibility against current program criteria during project development — program intake and eligibility evolve year-over-year."
    },
  ];
  const [open, setOpen] = React.useState(0);

  return (
    <section data-screen-label="09 FAQ" data-gi-resp="mun-faq" style={{ background: 'var(--gi-paper-white)', color: 'var(--gi-deep-ink)', padding: '128px 0' }}>
      <div data-gi-resp="container" style={{ maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
        <div data-gi-reveal style={{
          display: 'flex', justifyContent: 'space-between', gap: 96,
          alignItems: 'flex-end', marginBottom: 64,
        }}>
          <div>
            <div style={{ marginBottom: 22 }}>
              <Eyebrow>Questions from facility managers &amp; procurement teams</Eyebrow>
            </div>
            <h2 style={{
              font: '500 48px/54px var(--ff-sans)', letterSpacing: '-0.026em',
              color: 'var(--gi-deep-ink)', margin: 0, textWrap: 'balance',
            }}>Frequently asked questions.</h2>
          </div>
          <p style={{
            font: '400 16px/26px var(--ff-sans)',
            color: 'var(--gi-slate)', margin: 0, maxWidth: 480, paddingBottom: 6,
          }}>
            Municipal and institutional energy questions — specific to public sector
            procurement and compliance.
          </p>
        </div>

        <div>
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{
                borderTop: i === 0 ? '1px solid rgba(15,33,51,0.14)' : 'none',
                borderBottom: '1px solid rgba(15,33,51,0.14)',
              }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} data-gi-resp="faq-trigger" style={{
                  width: '100%', background: 'transparent', border: 'none', cursor: 'pointer',
                  padding: '32px 0', textAlign: 'left',
                  display: 'grid', gridTemplateColumns: '70px 1fr 40px', gap: 24, alignItems: 'center',
                  color: 'var(--gi-deep-ink)',
                }}>
                  <span style={{
                    fontFamily: 'var(--ff-mono)', fontSize: 12, letterSpacing: '0.14em',
                    color: 'var(--gi-sage-accent)', fontWeight: 600,
                  }}>Q · {String(i+1).padStart(2, '0')}</span>
                  <h3 style={{
                    font: '500 22px/30px var(--ff-sans)', letterSpacing: '-0.014em',
                    color: 'var(--gi-deep-ink)', margin: 0, textWrap: 'balance',
                  }}>{it.q}</h3>
                  <span style={{
                    fontFamily: 'var(--ff-sans)', fontSize: 26, fontWeight: 300,
                    color: 'var(--gi-deep-ink)', justifySelf: 'end',
                    transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)',
                    transition: 'transform 260ms cubic-bezier(.2,0,0,1)', lineHeight: 1,
                  }}>+</span>
                </button>
                <div className="gi-faq-answer" data-open={isOpen ? 'true' : 'false'}>
                  <div className="gi-faq-answer-inner" data-gi-resp="faq-answer-inner" style={{
                    padding: isOpen ? '0 0 32px' : '0',
                    transition: 'padding 260ms cubic-bezier(0.4,0,0.2,1)',
                    display: 'grid', gridTemplateColumns: '70px 1fr 40px', gap: 24,
                  }}>
                    <span />
                    <p style={{
                      font: '400 16px/28px var(--ff-sans)',
                      color: 'var(--gi-slate)', margin: 0,
                      textWrap: 'pretty', maxWidth: 820, whiteSpace: 'pre-line',
                    }}>{it.a}</p>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};


// ============================================================
// MunClosingCTA — Soft Green
// ============================================================
const MunClosingCTA = () => (
  <section data-screen-label="10 Closing CTA" data-gi-resp="mun-closing-cta" style={{
    background: 'var(--gi-soft-green)', color: '#fff',
    padding: '128px 0', position: 'relative', overflow: 'hidden',
  }}>
    <div aria-hidden="true" style={{
      position: 'absolute', right: -120, top: -120, opacity: 0.08, pointerEvents: 'none',
    }}>
      <img src={`${window.GI_BASE}assets/logos/monogram-white.svg`} alt="" style={{ width: 640, height: 640 }} />
    </div>
    <div data-gi-resp="container" style={{ position: 'relative', maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
      <div style={{ maxWidth: 920 }}>
        <div style={{ marginBottom: 28 }}>
          <Eyebrow onDark className="gi-eyebrow--gold">Start your assessment</Eyebrow>
        </div>
        <h2 style={{
          font: '500 64px/70px var(--ff-sans)', letterSpacing: '-0.03em',
          color: '#fff', margin: 0, textWrap: 'balance',
        }}>
          Energy infrastructure for{' '}
          <span style={{ color: '#D4A24C' }}>public buildings</span>.
        </h2>
        <p style={{
          font: '400 19px/30px var(--ff-sans)',
          color: 'rgba(255,255,255,0.86)', margin: '28px 0 44px', maxWidth: 720, textWrap: 'pretty',
        }}>
          Public facilities operate on longer timelines, with additional procurement
          requirements and accountability for delivery. We identify practical upgrades
          that fit the realities of public sector operation.
        </p>
        <div data-gi-resp="mun-closing-cta-buttons" style={{ display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
          <Button variant="onDark" size="lg" href="/about/contact/">Start your assessment</Button>
          <Button target="_blank" variant="outlineOnDark" size="lg" href="https://zfrmz.com/vjBUOoKTlKt4YAOW19oO">Book a 20-minute call</Button>
        </div>
        <p data-gi-resp="mun-closing-cta-no-commitment" style={{
          font: '400 13px/20px var(--ff-sans)',
          color: 'rgba(255,255,255,0.62)', margin: '32px 0 0', fontStyle: 'italic',
        }}>
          No commitment required.
        </p>
      </div>
    </div>
  </section>
);

Object.assign(window, { MunSubsectors, MunDiscovery, MunFAQ, MunClosingCTA });