/* eslint-disable */
const { useState, useEffect, useRef } = React;
const HD = window.SE_HOME_DATA;

// ============== CountUp hook (animates 0 -> target on mount/in-view) ==============
function useCountUp(target, duration = 1400) {
  const [val, setVal] = useState(0);
  const ref = useRef(null);
  const fired = useRef(false);
  useEffect(() => {
    const el = ref.current;if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !fired.current) {
          fired.current = true;
          const t0 = performance.now();
          const step = (t) => {
            const p = Math.min(1, (t - t0) / duration);
            const eased = 1 - Math.pow(1 - p, 3);
            setVal(target * eased);
            if (p < 1) requestAnimationFrame(step);
          };
          requestAnimationFrame(step);
        }
      });
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, [target, duration]);
  return [val, ref];
}

// Parse a stat string like "$4.5B", "1,100+", "33 yrs", "$657M", "27%", "12 MW", "15M", "$500K+"
// Returns { num, render(v) } so we can animate the numeric portion 0->num.
function parseStat(s) {
  const str = String(s);
  const m = str.match(/-?[\d.,]+/);
  if (!m) return { num: 0, render: () => str };
  const numStr = m[0];
  const num = parseFloat(numStr.replace(/,/g, ''));
  const before = str.slice(0, m.index);
  const after = str.slice(m.index + numStr.length);
  const hasComma = numStr.includes(',');
  const decimals = (numStr.split('.')[1] || '').length;
  const render = (v) => {
    let n;
    if (decimals > 0) n = v.toFixed(decimals);else
    if (hasComma) n = Math.round(v).toLocaleString('en-US');else
    n = Math.round(v).toString();
    return before + n + after;
  };
  return { num, render };
}

function AnimatedStat({ value, style }) {
  const { num, render } = parseStat(value);
  const [v, ref] = useCountUp(num);
  return <span ref={ref} style={style}>{render(v)}</span>;
}

// =============== Public Sector Hero — wide skyline unifying gov + edu + transport ===============
// State capitol on the left (state & local), university campus + bell tower in the center
// (education), airport tower + light rail train + port crane on the right (transportation).
// A power spine runs across the bottom carrying current pulses between them, tying the
// three audiences together as one connected public-sector grid.
function CivicIsoAnim({ accent = '#3DCD58' }) {
  const W = 1400,H = 600;

  return (
    <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
      <defs>
        <linearGradient id="ps-sky" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#0A1A12" />
          <stop offset="55%" stopColor="#0d2418" />
          <stop offset="100%" stopColor="#13301f" />
        </linearGradient>
        <radialGradient id="ps-sun" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#7BE99B" stopOpacity="0.42" />
          <stop offset="55%" stopColor={accent} stopOpacity="0.16" />
          <stop offset="100%" stopColor={accent} stopOpacity="0" />
        </radialGradient>
        <linearGradient id="ps-dome" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={accent} stopOpacity="0.0" />
          <stop offset="100%" stopColor={accent} stopOpacity="0.22" />
        </linearGradient>
        <pattern id="ps-grid" x="0" y="0" width="60" height="60" patternUnits="userSpaceOnUse">
          <path d="M60 0 L0 0 0 60" fill="none" stroke={accent} strokeOpacity="0.05" strokeWidth="1" />
        </pattern>
        <filter id="ps-glow" x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur stdDeviation="2" />
        </filter>
      </defs>

      {/* Sky + grid + sun */}
      <rect x="0" y="0" width={W} height={H} fill="url(#ps-sky)" />
      <rect x="0" y="0" width={W} height={H} fill="url(#ps-grid)" />
      <circle cx="780" cy="220" r="280" fill="url(#ps-sun)" />

      {/* Distant skyline (parallax 1) — unified city behind everything */}
      <g opacity="0.4">
        {[100, 160, 220, 290, 360, 440, 520, 610, 700, 800, 900, 1010, 1130, 1260, 1360].map((x, i) => {
          const h = 70 + i * 41 % 130;
          return <rect key={i} x={x} y={460 - h} width="48" height={h} fill="#0d2418" stroke={accent} strokeOpacity="0.22" />;
        })}
      </g>

      {/* Mid skyline (parallax 2) with lit windows */}
      <g opacity="0.65">
        {[60, 150, 250, 360, 480, 620, 760, 900, 1030, 1170, 1290].map((x, i) => {
          const h = 100 + i * 47 % 150;
          return (
            <g key={i}>
              <rect x={x} y={520 - h} width="58" height={h} fill="#0a1f14" stroke={accent} strokeOpacity="0.38" />
              {Array.from({ length: Math.floor(h / 30) }).map((_, r) =>
              <g key={r}>
                  {[8, 24, 40].map((wx, c) =>
                <rect key={c} x={x + wx} y={520 - h + 8 + r * 30} width="6" height="10"
                fill={accent} fillOpacity={(i * 13 + r * 5 + c * 3) % 4 === 0 ? "0.55" : "0.12"} />
                )}
                </g>
              )}
            </g>);

        })}
      </g>

      {/* ========== STATE & LOCAL — Capitol (left) ========== */}
      <g transform="translate(80,200)">
        {/* Base building */}
        <rect x="0" y="160" width="220" height="180" fill="#0d2418" stroke={accent} strokeOpacity="0.7" strokeWidth="1.4" />
        {/* Wings */}
        <rect x="-60" y="200" width="70" height="140" fill="#0a1f14" stroke={accent} strokeOpacity="0.5" />
        <rect x="210" y="200" width="70" height="140" fill="#0a1f14" stroke={accent} strokeOpacity="0.5" />
        {/* Pediment */}
        <polygon points="20,160 110,118 200,160" fill="#0a1f14" stroke={accent} strokeOpacity="0.7" strokeWidth="1.2" />
        {/* Drum */}
        <rect x="76" y="72" width="68" height="46" fill="#0d2418" stroke={accent} strokeOpacity="0.7" strokeWidth="1.2" />
        {/* Dome */}
        <ellipse cx="110" cy="72" rx="44" ry="42" fill="#0a1f14" stroke={accent} strokeOpacity="0.85" strokeWidth="1.6" />
        <ellipse cx="110" cy="72" rx="44" ry="42" fill="url(#ps-dome)" />
        {/* Cupola + flag */}
        <rect x="105" y="20" width="10" height="14" fill="#0d2418" stroke={accent} strokeOpacity="0.7" />
        <line x1="110" y1="0" x2="110" y2="22" stroke={accent} strokeOpacity="0.85" strokeWidth="1.5" />
        <circle cx="110" cy="-2" r="3" fill={accent}>
          <animate attributeName="r" values="3;4.5;3" dur="3s" repeatCount="indefinite" />
        </circle>
        {/* Columns */}
        {[18, 50, 82, 114, 146, 178].map((x) =>
        <rect key={x} x={x} y="170" width="12" height="160" fill="#13301f" stroke={accent} strokeOpacity="0.55" />
        )}
        {/* Door */}
        <rect x="96" y="260" width="28" height="80" fill={accent} fillOpacity="0.18" stroke={accent} strokeOpacity="0.6" />
        {/* Steps */}
        {[0, 1, 2, 3].map((i) =>
        <rect key={i} x={-26 - i * 12} y={342 + i * 6} width={272 + i * 24} height="6" fill="#0a1f14" stroke={accent} strokeOpacity="0.5" />
        )}
      </g>

      {/* ========== EDUCATION — Campus quad with bell tower (center) ========== */}
      <g transform="translate(500,260)">
        {/* Library / main hall */}
        <rect x="0" y="80" width="200" height="180" fill="#0d2418" stroke={accent} strokeOpacity="0.7" strokeWidth="1.4" />
        {/* Roof line */}
        <polygon points="-6,80 100,42 206,80" fill="#0a1f14" stroke={accent} strokeOpacity="0.7" strokeWidth="1.2" />
        {/* Windows — lit classrooms */}
        {[0, 1, 2, 3].map((r) =>
        <g key={r}>
            {[16, 56, 96, 136, 176].map((x, c) =>
          <rect key={c} x={x - 8} y={92 + r * 36} width="16" height="22"
          fill={accent} fillOpacity={(r * 5 + c * 3) % 3 === 0 ? "0.5" : "0.15"} stroke={accent} strokeOpacity="0.3" />
          )}
          </g>
        )}
        {/* Bell tower */}
        <rect x="220" y="-20" width="48" height="280" fill="#0d2418" stroke={accent} strokeOpacity="0.75" strokeWidth="1.4" />
        <polygon points="216,-20 244,-52 272,-20" fill="#0a1f14" stroke={accent} strokeOpacity="0.75" strokeWidth="1.2" />
        {/* Belfry opening */}
        <rect x="232" y="0" width="24" height="32" fill={accent} fillOpacity="0.22" stroke={accent} strokeOpacity="0.6" />
        {/* Clock face */}
        <circle cx="244" cy="60" r="10" fill="#0a1f14" stroke={accent} strokeOpacity="0.85" strokeWidth="1.3" />
        <line x1="244" y1="60" x2="244" y2="53" stroke={accent} strokeOpacity="0.95" strokeWidth="1.3">
          <animateTransform attributeName="transform" type="rotate" from="0 244 60" to="360 244 60" dur="20s" repeatCount="indefinite" />
        </line>
        {/* Lower facade windows */}
        {[0, 1, 2, 3].map((r) =>
        <rect key={r} x="234" y={90 + r * 36} width="20" height="22"
        fill={accent} fillOpacity={r % 2 === 0 ? "0.42" : "0.14"} stroke={accent} strokeOpacity="0.3" />
        )}
        {/* Side classroom annex */}
        <rect x="-80" y="140" width="76" height="120" fill="#0a1f14" stroke={accent} strokeOpacity="0.55" strokeWidth="1.2" />
        {[0, 1, 2].map((r) =>
        <g key={r}>
            {[8, 32, 56].map((x, c) =>
          <rect key={c} x={-80 + x} y={152 + r * 36} width="14" height="20"
          fill={accent} fillOpacity={(r + c) % 3 === 0 ? "0.45" : "0.13"} stroke={accent} strokeOpacity="0.25" />
          )}
          </g>
        )}
        {/* Solar panels on library roof — shimmer */}
        <g transform="translate(40,76)">
          {[0, 1, 2, 3, 4].map((i) =>
          <rect key={i} x={i * 24} y="-10" width="20" height="10" fill="#0a1f14" stroke={accent} strokeOpacity="0.7" strokeWidth="0.8">
              <animate attributeName="fill" values="#0a1f14;#1a4f2a;#0a1f14" dur="4s" begin={`${i * 0.4}s`} repeatCount="indefinite" />
            </rect>
          )}
        </g>
      </g>

      {/* ========== TRANSPORTATION — Airport + rail + crane (right) ========== */}
      {/* Control tower */}
      <g transform="translate(960,240)">
        <rect x="34" y="0" width="14" height="180" fill="#0d2418" stroke={accent} strokeOpacity="0.7" strokeWidth="1.4" />
        <rect x="22" y="-30" width="38" height="32" rx="3" fill="#0a1f14" stroke={accent} strokeOpacity="0.85" strokeWidth="1.4" />
        <rect x="26" y="-22" width="30" height="14" fill={accent} fillOpacity="0.35" stroke={accent} strokeOpacity="0.6" />
        <circle cx="41" cy="-38" r="4" fill={accent} filter="url(#ps-glow)">
          <animate attributeName="opacity" values="0.3;1;0.3" dur="1.6s" repeatCount="indefinite" />
        </circle>
      </g>
      {/* Terminal building (curved roofs) */}
      <g transform="translate(880,400)">
        <rect x="0" y="0" width="280" height="100" fill="#0d2418" stroke={accent} strokeOpacity="0.6" strokeWidth="1.2" />
        {[0, 1, 2].map((i) =>
        <path key={i} d={`M${i * 93.3} 0 q46.65 -28 93.3 0`} fill="#0a1f14" stroke={accent} strokeOpacity="0.55" strokeWidth="1" />
        )}
        {Array.from({ length: 11 }).map((_, i) =>
        <rect key={i} x={10 + i * 24} y="22" width="14" height="32"
        fill={accent} fillOpacity={i % 3 === 0 ? "0.4" : "0.12"} stroke={accent} strokeOpacity="0.3" />
        )}
      </g>
      {/* Plane on approach — slow drift across the sky */}
      <g>
        <g>
          <animateTransform attributeName="transform" type="translate" from="1500 160" to="-160 220" dur="42s" repeatCount="indefinite" />
          <polygon points="0,0 38,4 46,6 38,8 0,12 -16,16 -10,6 -16,-4" fill="#0a1f14" stroke={accent} strokeOpacity="0.85" strokeWidth="1" />
          <polygon points="6,4 24,-12 30,-12 14,8" fill="#0d2418" stroke={accent} strokeOpacity="0.7" strokeWidth="0.9" />
          <circle cx="40" cy="6" r="1.6" fill={accent}>
            <animate attributeName="opacity" values="0.4;1;0.4" dur="1.4s" repeatCount="indefinite" />
          </circle>
        </g>
      </g>
      {/* Port crane (far right) */}
      <g transform="translate(1240,300)">
        {/* Legs */}
        <line x1="0" y1="200" x2="20" y2="60" stroke={accent} strokeOpacity="0.7" strokeWidth="1.5" />
        <line x1="80" y1="200" x2="60" y2="60" stroke={accent} strokeOpacity="0.7" strokeWidth="1.5" />
        <line x1="100" y1="200" x2="80" y2="60" stroke={accent} strokeOpacity="0.55" strokeWidth="1.2" />
        <line x1="-20" y1="200" x2="0" y2="60" stroke={accent} strokeOpacity="0.55" strokeWidth="1.2" />
        {/* Top beam */}
        <rect x="-30" y="50" width="170" height="14" fill="#0d2418" stroke={accent} strokeOpacity="0.7" strokeWidth="1.2" />
        {/* Operator cabin */}
        <rect x="20" y="64" width="22" height="16" fill="#0a1f14" stroke={accent} strokeOpacity="0.75" strokeWidth="1" />
        {/* Trolley + spreader (animated) */}
        <g>
          <animateTransform attributeName="transform" type="translate" values="-20 0; 110 0; -20 0" dur="14s" repeatCount="indefinite" />
          <rect x="-2" y="62" width="14" height="6" fill={accent} fillOpacity="0.6" stroke={accent} strokeOpacity="0.85" strokeWidth="0.8" />
          <line x1="5" y1="68" x2="5" y2="120" stroke={accent} strokeOpacity="0.7" strokeWidth="0.9" />
          <rect x="-6" y="120" width="22" height="10" fill="#13301f" stroke={accent} strokeOpacity="0.7" strokeWidth="0.8" />
        </g>
        {/* Stacked containers on the ground */}
        {[
        { x: -30, y: 180, c: '#1a4f2a' },
        { x: 0, y: 180, c: '#0d2418' },
        { x: 30, y: 180, c: '#13301f' },
        { x: 60, y: 180, c: '#1a4f2a' },
        { x: 90, y: 180, c: '#0d2418' },
        { x: -15, y: 168, c: '#13301f' },
        { x: 15, y: 168, c: '#1a4f2a' },
        { x: 45, y: 168, c: '#0d2418' },
        { x: 75, y: 168, c: '#13301f' }].
        map((b, i) =>
        <rect key={i} x={b.x} y={b.y} width="28" height="12" fill={b.c} stroke={accent} strokeOpacity="0.5" strokeWidth="0.8" />
        )}
      </g>

      {/* ========== UNIFYING POWER SPINE (across the bottom) ========== */}
      {/* Ground line */}
      <line x1="0" y1="500" x2={W} y2="500" stroke={accent} strokeOpacity="0.35" strokeWidth="1" />
      <rect x="0" y="500" width={W} height="100" fill={accent} fillOpacity="0.04" />
      {/* Light rail track in front of campus */}
      <line x1="380" y1="520" x2="900" y2="520" stroke={accent} strokeOpacity="0.55" strokeWidth="1.2" />
      <line x1="380" y1="528" x2="900" y2="528" stroke={accent} strokeOpacity="0.55" strokeWidth="1.2" />
      {[400, 440, 480, 520, 560, 600, 640, 680, 720, 760, 800, 840, 880].map((x, i) =>
      <line key={i} x1={x} y1="520" x2={x} y2="528" stroke={accent} strokeOpacity="0.4" strokeWidth="1" />
      )}
      {/* Light rail train */}
      <g>
        <animateTransform attributeName="transform" type="translate" from="-180 0" to="1100 0" dur="22s" repeatCount="indefinite" />
        <g transform="translate(380, 488)">
          <rect x="0" y="0" width="64" height="28" rx="4" fill="#13301f" stroke={accent} strokeOpacity="0.85" strokeWidth="1.2" />
          <rect x="6" y="6" width="12" height="10" fill={accent} fillOpacity="0.6" />
          <rect x="22" y="6" width="12" height="10" fill={accent} fillOpacity="0.6" />
          <rect x="38" y="6" width="12" height="10" fill={accent} fillOpacity="0.6" />
          <rect x="54" y="6" width="6" height="10" fill={accent} fillOpacity="0.4" />
          <circle cx="12" cy="30" r="2.4" fill="#0a1f14" stroke={accent} strokeOpacity="0.6" />
          <circle cx="52" cy="30" r="2.4" fill="#0a1f14" stroke={accent} strokeOpacity="0.6" />
          <rect x="68" y="0" width="64" height="28" rx="4" fill="#13301f" stroke={accent} strokeOpacity="0.85" strokeWidth="1.2" />
          {[6, 22, 38].map((x) => <rect key={x} x={68 + x} y="6" width="12" height="10" fill={accent} fillOpacity="0.6" />)}
          <circle cx="80" cy="30" r="2.4" fill="#0a1f14" stroke={accent} strokeOpacity="0.6" />
          <circle cx="120" cy="30" r="2.4" fill="#0a1f14" stroke={accent} strokeOpacity="0.6" />
        </g>
      </g>
      {/* Power poles connecting all three districts */}
      {[120, 320, 520, 720, 920, 1120, 1320].map((x, i) =>
      <g key={i}>
          <line x1={x} y1="500" x2={x} y2="392" stroke={accent} strokeOpacity="0.55" strokeWidth="1.4" />
          <line x1={x - 22} y1="404" x2={x + 22} y2="404" stroke={accent} strokeOpacity="0.55" strokeWidth="1.4" />
          <line x1={x - 16} y1="392" x2={x + 16} y2="392" stroke={accent} strokeOpacity="0.55" strokeWidth="1.4" />
        </g>
      )}
      {/* Sagging power lines — energy pulses travel across, tying districts together */}
      {[400, 404, 408].map((y, lineIdx) =>
      <g key={lineIdx}>
          <path d={`M120 ${y} Q 220 ${y + 18} 320 ${y} T 520 ${y} T 720 ${y} T 920 ${y} T 1120 ${y} T 1320 ${y}`}
        fill="none" stroke={accent} strokeOpacity="0.35" strokeWidth="1" />
          {[0, 1, 2].map((j) =>
        <circle key={j} r="3" fill={accent} opacity="0.85" filter="url(#ps-glow)">
              <animateMotion
            path={`M120 ${y} Q 220 ${y + 18} 320 ${y} T 520 ${y} T 720 ${y} T 920 ${y} T 1120 ${y} T 1320 ${y}`}
            dur={`${11 + lineIdx * 1.4}s`}
            begin={`${j * 3.6 + lineIdx * 0.4}s`}
            repeatCount="indefinite" />
              <animate attributeName="opacity" values="0;0.95;0" dur={`${11 + lineIdx * 1.4}s`} begin={`${j * 3.6 + lineIdx * 0.4}s`} repeatCount="indefinite" />
            </circle>
        )}
        </g>
      )}

      {/* Floating telemetry chips — one per audience, positioned over their district */}
      {[
      { x: 100, y: 130, t: 'CAPITOL · GRID 99.98%' }, // State & Local
      { x: 540, y: 110, t: 'CAMPUS · 38% kWh ↓' }, // Education
      { x: 980, y: 140, t: 'TERMINAL · ON-TIME 96%' } // Transportation
      ].map((c, i) =>
      <g key={i} opacity="0.9">
          <rect x={c.x} y={c.y} width={c.t.length * 6.6 + 18} height="22" rx="3"
        fill="#0a1f14" stroke={accent} strokeOpacity="0.6" strokeWidth="1" />
          <circle cx={c.x + 11} cy={c.y + 11} r="2.5" fill={accent}>
            <animate attributeName="opacity" values="0.3;1;0.3" dur="2.4s" begin={`${i * 0.6}s`} repeatCount="indefinite" />
          </circle>
        </g>
      )}
    </svg>);

}

// =============== Nav (with Insights mega-menu, Support 6 items, working search) ===============
function Nav({ accent }) {
  const [open, setOpen] = useState(null);
  const [search, setSearch] = useState(false);
  const [q, setQ] = useState('');
  const closeT = useRef(null);
  const enter = (k) => {clearTimeout(closeT.current);setOpen(k);};
  const leave = () => {closeT.current = setTimeout(() => setOpen(null), 160);};

  // searchable index — pages, sections, anchors
  const idx = [
  { t: 'Public Sector Homepage', d: 'Overview of solutions for public sector', h: 'PubSec Homepage.html' },
  { t: 'State & Local Government', d: 'Cities, counties, state agencies', h: 'State and Local Landing.html' },
  { t: 'Education', d: 'K-12 districts and higher-ed campuses', h: 'Education Landing.html' },
  { t: 'Transportation', d: 'Airports, rail, transit, ports', h: 'Transportation Landing.html' },
  { t: 'Estimate Savings Calculator', d: 'See your potential savings', h: 'PubSec Homepage.html#calculator' },
  { t: 'Public Sector Challenges', d: 'Pressures and answers', h: 'PubSec Homepage.html#pillars' },
  { t: 'Sector Solutions', d: 'Solutions by industry', h: 'PubSec Homepage.html#industries' },
  { t: 'Customer Stories', d: 'Outcomes from real agencies', h: 'PubSec Homepage.html#insights' },
  { t: 'Talk to a Specialist', d: 'Contact form', h: 'PubSec Homepage.html#cta' },
  { t: 'FAQ', d: 'Common questions from public sector buyers', h: 'PubSec Homepage.html#faq' },
  { t: 'Sustainability Insights', d: 'Insights on sustainability', h: 'https://www.se.com/ww/en/insights/sustainability/' },
  { t: 'New Energy Landscape', d: 'Electricity 4.0 insights', h: 'https://www.se.com/ww/en/insights/electricity-4-0/' },
  { t: 'Next-generation Automation', d: 'Industrial automation insights', h: 'https://www.se.com/ww/en/insights/next-generation-automation/' },
  { t: 'AI & Technology', d: 'AI insights', h: 'https://www.se.com/ww/en/insights/ai-and-technology/' },
  { t: 'Blogs', d: 'Schneider Electric blog', h: 'https://blog.se.com/?utm_source=se.com&utm_medium=referral' },
  // { t: 'Product Selector', d: 'EZ Selectors and online tools', h: 'https://www.se.com/us/en/work/support/resources-and-tools/calculators-and-online-tools/ez-selectors/' },
  { t: 'Get a Quote', d: 'Contact sales', h: 'https://www.se.com/us/en/work/support/customer-care/contact-sales/' },
  // { t: 'Where to Buy?', d: 'Find a partner', h: 'https://www.se.com/us/en/work/support/resources-and-tools/calculators-and-online-tools/ez-selectors/' },
  // { t: 'Help Center', d: 'Support resources', h: 'https://www.se.com/us/en/work/support/' },
  { t: 'Team', d: 'About us', h: 'https://schneiderpublicsectorresilliance.framer.website/' }];

  const results = q.trim() ? idx.filter((r) => (r.t + ' ' + r.d).toLowerCase().includes(q.toLowerCase())).slice(0, 8) : [];

  // Rotating placeholder text for the search input
  const placeholders = [
  'Search "energy savings"...',
  'Try "microgrid"...',
  'Try "K-12 ESPC"...',
  'Try "EV fleet charging"...',
  'Try "airport modernization"...',
  'Try "EcoStruxure"...',
  'Try "decarbonization"...'];

  const [phIdx, setPhIdx] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setPhIdx((i) => (i + 1) % placeholders.length), 2400);
    return () => clearInterval(t);
  }, []);

  const items = [
  { key: 'industry', label: 'Industry', dropdown: [
    { label: 'State & Local', desc: 'Cities, counties, state agencies', href: 'State and Local Landing.html' },
    { label: 'Education', desc: 'K-12 districts & higher-ed campuses', href: 'Education Landing.html' },
    { label: 'Transportation', desc: 'Airports, rail, transit, ports', href: 'Transportation Landing.html' }]
  },
  { key: 'insights', label: 'Insights', mega: true },
  { key: 'support', label: 'Support', dropdown: [
    { label: 'Get a Quote', desc: 'Contact sales', href: 'https://www.se.com/us/en/work/support/customer-care/contact-sales/', external: true },
    { label: 'Team', desc: 'Meet our public sector leaders', href: 'https://schneiderpublicsectorresilliance.framer.website/', external: true }]
  },
  { key: 'about', label: 'About Us', href: 'https://www.se.com/ww/en/about-us/' }];


  const expertHref = 'PubSec Homepage.html#cta';

  return (
    <header style={{ background: '#fff', borderBottom: '1px solid #E5E5E5', position: 'sticky', top: 0, zIndex: 50 }}>
      <div style={{ maxWidth: 1440, margin: '0 auto', padding: '14px 24px', display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', gap: 24 }}>
        <a href="PubSec Homepage.html" style={{ display: 'flex', alignItems: 'center', justifySelf: 'start' }}>
          <img src="logo.svg" alt="Schneider Electric" style={{ height: 42 }} />
        </a>
        <nav style={{ display: 'flex', gap: 4, justifyContent: 'center', position: 'relative' }}>
          {items.map((it) =>
          <div key={it.key} style={{ position: 'relative' }} onMouseEnter={() => enter(it.key)} onMouseLeave={leave}>
              <a href={it.href || '#'} style={{
              fontSize: 14, fontWeight: 600, color: '#1F1F1F', padding: '10px 16px', display: 'inline-flex', alignItems: 'center', gap: 6,
              borderBottom: open === it.key ? `2px solid ${accent}` : '2px solid transparent'
            }}>
                {it.label}
                {(it.dropdown || it.mega) && <span style={{ fontSize: 10, opacity: .5 }}>▾</span>}
              </a>
              {it.dropdown && open === it.key &&
            <div style={{ position: 'absolute', top: '100%', left: 0, background: '#fff', border: '1px solid #E5E5E5', borderRadius: 8, boxShadow: '0 12px 32px rgba(15,15,15,.12)', minWidth: 300, padding: 8, zIndex: 60 }}>
                  {it.dropdown.map((d) =>
              <a key={d.label} href={d.href} target={d.external ? '_blank' : undefined} rel={d.external ? 'noopener' : undefined} style={{ display: 'block', padding: '12px 14px', borderRadius: 6, color: '#1F1F1F', textDecoration: 'none' }}
              onMouseEnter={(e) => e.currentTarget.style.background = '#F5F5F5'}
              onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
                      <div style={{ fontWeight: 700, fontSize: 14 }}>{d.label}</div>
                      <div style={{ fontSize: 12, color: '#6B6B6B', marginTop: 2 }}>{d.desc}</div>
                    </a>
              )}
                </div>
            }
              {it.mega && open === it.key &&
            <div style={{ position: 'absolute', top: '100%', left: '50%', transform: 'translateX(-50%)', background: '#fff', border: '1px solid #E5E5E5', borderRadius: 10, boxShadow: '0 16px 40px rgba(15,15,15,.14)', width: 720, padding: 24, zIndex: 60, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
                  <div>
                    <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: '.14em', color: accent, textTransform: 'uppercase', marginBottom: 14 }}>Thought Leadership</div>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                      {[
                  { l: 'Sustainability', d: 'Climate action and decarbonization', h: 'https://www.se.com/ww/en/insights/sustainability/' },
                  { l: 'New Energy Landscape', d: 'Electricity 4.0 and grid evolution', h: 'https://www.se.com/ww/en/insights/electricity-4-0/' },
                  { l: 'Next-generation Automation', d: 'Software-defined automation', h: 'https://www.se.com/ww/en/insights/next-generation-automation/' },
                  { l: 'AI & Technology', d: 'AI for energy and industry', h: 'https://www.se.com/ww/en/insights/ai-and-technology/' }].
                  map((d) =>
                  <a key={d.l} href={d.h} target="_blank" rel="noopener" style={{ display: 'block', padding: '10px 12px', borderRadius: 6, color: '#1F1F1F', textDecoration: 'none' }}
                  onMouseEnter={(e) => e.currentTarget.style.background = '#F5F5F5'}
                  onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
                          <div style={{ fontWeight: 700, fontSize: 14 }}>{d.l}</div>
                          <div style={{ fontSize: 12, color: '#6B6B6B', marginTop: 2 }}>{d.d}</div>
                        </a>
                  )}
                  <a href="https://cloud.go.se.com/WW_202510_JourneytoAIReadyBuildingsWP_CNT_NONE_BOTF_DE_ALLSEG_AWENG_NA_LP?utm_source=linkedin&utm_medium=display&utm_campaign=2026_jan_ww_de_botf_linkedin_decision-lead_gen_paid-social_global-bu_ai-ready_buildings_whitepaper_webinar&utm_content=journey_to_ai-ready_buildings_white_paper_link&utm_term=ai-ready_buildings&utm_tactic=download_the_whitepaper&campaign_objective=decision-lead_gen&mcl_name=botf" style={{display: 'inline-flex', alignItems: 'center',marginTop: 10,marginLeft: 12,background: accent, color: '#fff', border: 0, fontWeight: 700, padding: '10px 18px', borderRadius: 6, fontSize: 13, cursor: 'pointer', whiteSpace: 'nowrap', textDecoration: 'none' }}>AI-Ready Buildings</a>

                    </div>
                  </div>
                  <div style={{ borderLeft: '1px solid #EEE', paddingLeft: 24 }}>
                    <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: '.14em', color: accent, textTransform: 'uppercase', marginBottom: 14 }}>Blogs</div>
                    <a href="https://blog.se.com/?utm_source=se.com&utm_medium=referral" target="_blank" rel="noopener" style={{ display: 'block', padding: '14px 14px', borderRadius: 8, background: '#FAFAFA', border: '1px solid #EEE', color: '#1F1F1F', textDecoration: 'none' }}>
                      <div style={{ fontWeight: 800, fontSize: 15 }}>Schneider Electric Blog</div>
                      <div style={{ fontSize: 12.5, color: '#6B6B6B', marginTop: 6, lineHeight: 1.5 }}>Perspectives on energy, sustainability, automation, and digital transformation.</div>
                      <div style={{ marginTop: 10, color: '#009530', fontSize: 12, fontWeight: 700 }}>Visit blog.se.com →</div>
                    </a>
                  </div>
                </div>
            }
            </div>
          )}
        </nav>
        <div style={{ display: 'flex', gap: 12, alignItems: 'center', position: 'relative', justifySelf: 'end' }}>
          <div style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#6B6B6B" strokeWidth="2.2" style={{ position: 'absolute', left: 12, pointerEvents: 'none' }}><circle cx="11" cy="11" r="7" /><line x1="21" y1="21" x2="16.65" y2="16.65" /></svg>
            <input
              value={q}
              onChange={(e) => {setQ(e.target.value);setSearch(true);}}
              onFocus={() => setSearch(true)}
              placeholder={placeholders[phIdx]}
              style={{
                width: 240,
                padding: '9px 14px 9px 36px',
                background: 'rgba(0,0,0,.04)',
                border: '1px solid transparent',
                borderRadius: 999,
                fontSize: 13,
                color: '#1F1F1F',
                fontFamily: 'inherit',
                outline: 'none',
                transition: 'background 160ms, border-color 160ms, width 220ms'
              }}
              onMouseEnter={(e) => {e.currentTarget.style.background = 'rgba(0,0,0,.06)';}}
              onMouseLeave={(e) => {if (document.activeElement !== e.currentTarget) e.currentTarget.style.background = 'rgba(0,0,0,.04)';}}
              onBlur={(e) => {e.currentTarget.style.background = 'rgba(0,0,0,.04)';e.currentTarget.style.borderColor = 'transparent';setTimeout(() => setSearch(false), 200);}} />
            
          </div>
          <a href={expertHref} style={{ background: accent, color: '#fff', border: 0, fontWeight: 700, padding: '10px 18px', borderRadius: 6, fontSize: 13, cursor: 'pointer', whiteSpace: 'nowrap', textDecoration: 'none' }}>Talk to an expert</a>
          {search && q.trim() &&
          <div style={{ position: 'absolute', top: '100%', right: 0, marginTop: 10, background: '#fff', border: '1px solid #E5E5E5', borderRadius: 10, boxShadow: '0 16px 40px rgba(15,15,15,.16)', width: 380, padding: 10, zIndex: 70 }}>
              <div style={{ maxHeight: 320, overflowY: 'auto' }}>
                {results.length === 0 ?
              <div style={{ padding: '14px 8px', color: '#6B6B6B', fontSize: 13 }}>No results for "{q}".</div> :
              results.map((r) => {
                const ext = r.h.startsWith('http');
                return (
                  <a key={r.t} href={r.h} target={ext ? '_blank' : undefined} rel={ext ? 'noopener' : undefined} style={{ display: 'block', padding: '10px 10px', borderRadius: 6, color: '#1F1F1F', textDecoration: 'none' }}
                  onMouseEnter={(e) => e.currentTarget.style.background = '#F5F5F5'}
                  onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
                      <div style={{ fontWeight: 700, fontSize: 13.5 }}>{r.t}</div>
                      <div style={{ fontSize: 12, color: '#6B6B6B', marginTop: 2 }}>{r.d}</div>
                    </a>);

              })}
              </div>
            </div>
          }
        </div>
      </div>
    </header>);

}

// =============== Hero ===============
function Hero({ accent }) {
  const h = HD.hero;
  const onPrimary = (e) => {
    e.preventDefault();
    const el = document.getElementById('cta');
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 100, behavior: 'smooth' });
  };
  const onSecondary = (e) => {
    e.preventDefault();
    const el = document.getElementById('industries');
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 100, behavior: 'smooth' });
  };
  return (
    <section style={{ background: '#0A1A12', color: '#fff', position: 'relative', overflow: 'hidden', minHeight: 620 }}>
      <CivicIsoAnim accent={accent} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(10,26,18,.96) 0%, rgba(10,26,18,.88) 42%, rgba(10,26,18,.6) 70%, rgba(10,26,18,.35) 100%)' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at 28% 50%, transparent 30%, rgba(0,0,0,.4) 100%)', pointerEvents: 'none' }} />
      <div style={{ position: 'relative', maxWidth: 1440, margin: '0 auto', padding: '88px 24px 96px', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 48, alignItems: 'center' }}>
        <div>
          <div style={{ fontSize: 12, fontWeight: 800, letterSpacing: '.14em', color: accent, textTransform: 'uppercase' }}>{h.eyebrow}</div>
          <h1 style={{ fontWeight: 800, fontSize: 56, lineHeight: 1.08, marginTop: 16, color: '#fff', textWrap: 'balance', textShadow: '0 2px 16px rgba(0,0,0,.5)' }} dangerouslySetInnerHTML={{ __html: h.h1 }} />
          <p style={{ fontSize: 20, marginTop: 18, color: '#E8E8E8', lineHeight: 1.5, maxWidth: 620, textShadow: '0 1px 8px rgba(0,0,0,.4)' }}>{h.sub}</p>
          {h.body && <p style={{ fontSize: 15, marginTop: 14, color: '#9DAD9D', lineHeight: 1.6, maxWidth: 600 }}>{h.body}</p>}
          <div style={{ display: 'flex', gap: 12, marginTop: 28, flexWrap: 'wrap' }}>
            <a href="#cta" onClick={onPrimary} style={{ background: accent, color: '#0F0F0F', fontWeight: 800, padding: '14px 22px', borderRadius: 6, fontSize: 14, textDecoration: 'none' }}>{h.primaryCta}</a>
            <a href="#industries" onClick={onSecondary} style={{ background: 'transparent', color: '#fff', fontWeight: 700, padding: '14px 22px', borderRadius: 6, fontSize: 14, border: '1px solid rgba(255,255,255,.3)', textDecoration: 'none' }}>{h.secondaryCta}</a>
          </div>
        </div>
      </div>
    </section>);

}

// =============== Intro stats (animated) ===============
function Intro() {
  const d = HD.intro;
  return (
    <section id="intro" style={{ padding: '44px 24px', background: '#fff', borderTop: '1px solid #E5E5E5', borderBottom: '1px solid #E5E5E5' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0 }}>
        {d.quickStats.map((s, i) =>
        <div key={i} style={{ padding: '8px 24px', borderLeft: i === 0 ? 'none' : '1px solid #E5E5E5' }}>
            <AnimatedStat value={s.v} style={{ fontSize: 32, fontWeight: 800, color: '#0F0F0F', lineHeight: 1, letterSpacing: '-0.01em', display: 'block' }} />
            <div style={{ fontSize: 12.5, color: '#4D4D4D', marginTop: 8, lineHeight: 1.45 }}>{s.l}</div>
          </div>
        )}
      </div>
    </section>);

}

// =============== Sticky JumpNav ===============
function JumpNav({ items, active, onJump, accent }) {
  return (
    <div style={{ position: 'sticky', top: 71, background: '#fff', borderBottom: '1px solid #E5E5E5', zIndex: 40 }}>
      <div style={{ maxWidth: 1440, margin: '0 auto', padding: '0 24px', display: 'flex', gap: 0, overflowX: 'auto' }}>
        {items.map((it) =>
        <button key={it.id} onClick={() => onJump(it.id)} style={{
          background: 'transparent', border: 0, padding: '16px 22px', fontSize: 13, fontWeight: 700, cursor: 'pointer',
          color: active === it.id ? accent : '#4D4D4D',
          borderBottom: active === it.id ? `2px solid ${accent}` : '2px solid transparent',
          whiteSpace: 'nowrap'
        }}>{it.label}</button>
        )}
      </div>
    </div>);

}

// =============== Pillars ===============
function Pillars({ accent }) {
  const d = HD.pillars;
  const [idx, setIdx] = useState(0);
  const p = d.items[idx];
  return (
    <section id="pillars" style={{ padding: '64px 24px', background: '#fff' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ fontSize: 12, fontWeight: 800, letterSpacing: '.12em', color: accent, textTransform: 'uppercase' }}>{d.eyebrow}</div>
        <h2 style={{ fontWeight: 800, fontSize: 30, lineHeight: 1.2, marginTop: 12, color: '#0F0F0F', maxWidth: 880, textWrap: 'balance' }}>{d.h2}</h2>
        <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 28, marginTop: 28, alignItems: 'flex-start' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4, borderLeft: '1px solid #E5E5E5' }}>
            {d.items.map((it, i) => {
              const active = idx === i;
              return (
                <button key={i} onClick={() => setIdx(i)} style={{
                  textAlign: 'left', padding: '14px 18px', background: 'transparent', cursor: 'pointer',
                  border: 0, borderLeft: active ? `3px solid ${accent}` : '3px solid transparent', marginLeft: -1,
                  fontWeight: active ? 800 : 600, fontSize: 14, color: active ? '#0F0F0F' : '#4D4D4D', lineHeight: 1.35
                }}>
                  <span style={{ display: 'block', fontSize: 10, fontWeight: 800, letterSpacing: '.12em', color: active ? accent : '#9DA3A8', textTransform: 'uppercase', marginBottom: 4 }}>0{i + 1}</span>
                  {it.eyebrow}
                </button>);

            })}
          </div>
          <div style={{ background: '#FAFAFA', border: '1px solid #E5E5E5', borderRadius: 14, overflow: 'hidden', minHeight: 280, display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
            <div style={{ position: 'relative', minHeight: 240, background: '#0F0F0F' }}>
              <img src={p.image} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block', opacity: .9 }} />
              <div style={{ position: 'absolute', left: 16, top: 16, background: 'rgba(255,255,255,.95)', color: accent, fontSize: 10.5, fontWeight: 800, letterSpacing: '.12em', textTransform: 'uppercase', padding: '5px 10px', borderRadius: 4 }}>{p.eyebrow}</div>
            </div>
            <div style={{ padding: '26px 28px', display: 'flex', flexDirection: 'column' }}>
              <h3 style={{ fontWeight: 800, fontSize: 22, color: '#0F0F0F', lineHeight: 1.25, margin: 0 }}>{p.title}</h3>
              <p style={{ fontSize: 14, color: '#4D4D4D', lineHeight: 1.55, margin: '12px 0 0' }}>{p.body}</p>
              <a href={p.href || "https://www.se.com/us/en/work/solutions/for-business/public-sector/"} target="_blank" rel="noopener" style={{ marginTop: 'auto', alignSelf: 'flex-start', fontWeight: 700, color: '#009530', fontSize: 13, paddingTop: 18 }}>{p.cta}</a>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// =============== Industries ===============
function Industries({ accent }) {
  const d = HD.industries;
  return (
    <section id="industries" style={{ padding: '64px 24px', background: '#F5F5F5' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ fontSize: 12, fontWeight: 800, letterSpacing: '.12em', color: accent, textTransform: 'uppercase' }}>{d.eyebrow}</div>
        <h2 style={{ fontWeight: 800, fontSize: 30, lineHeight: 1.2, marginTop: 12, color: '#0F0F0F', maxWidth: 880, textWrap: 'balance' }}>{d.h2}</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18, marginTop: 28 }}>
          {d.cards.map((c) =>
          <article key={c.id} id={c.id} style={{ background: '#fff', border: '1px solid #E5E5E5', borderRadius: 12, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
              <div style={{ position: 'relative', aspectRatio: '16/9', background: '#0F0F0F' }}>
                <img src={c.image} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                <div style={{ position: 'absolute', left: 14, top: 14, background: '#fff', color: '#009530', fontSize: 10.5, fontWeight: 800, letterSpacing: '.12em', textTransform: 'uppercase', padding: '5px 10px', borderRadius: 4 }}>{c.eyebrow}</div>
              </div>
              <div style={{ padding: '20px 22px 20px', display: 'flex', flexDirection: 'column', flex: 1 }}>
                <h3 style={{ fontWeight: 800, fontSize: 18, color: '#0F0F0F', lineHeight: 1.3, margin: 0 }}>{c.title}</h3>
                <div style={{ display: 'flex', gap: 18, marginTop: 14 }}>
                  {c.stats.slice(0, 2).map((s, i) =>
                <div key={i}>
                      <AnimatedStat value={s.v} style={{ fontWeight: 800, color: '#0F0F0F', fontSize: 17, lineHeight: 1.05, display: 'block' }} />
                      <div style={{ fontSize: 11, color: '#6B6B6B', marginTop: 4, lineHeight: 1.35 }}>{s.l}</div>
                    </div>
                )}
                </div>
                <a href={c.href || '#'} style={{ marginTop: 'auto', paddingTop: 16, alignSelf: 'flex-start', color: '#009530', fontWeight: 700, fontSize: 13, textDecoration: 'none' }}>{c.cta} →</a>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

// =============== Calculator ===============
function Calculator({ accent }) {
  const d = HD.calculator;
  const [vIdx, setVIdx] = useState(0);
  const v = d.verticals[vIdx];
  const [spend, setSpend] = useState(v.unitDefault);
  useEffect(() => {setSpend(v.unitDefault);}, [vIdx]);

  const low = Math.round(spend * v.rate.low),high = Math.round(spend * v.rate.high);
  const fmtShort = (n) => n >= 1e6 ? '$' + (n / 1e6).toFixed(1) + 'M' : n >= 1e3 ? '$' + Math.round(n / 1e3) + 'K' : '$' + n;

  return (
    <section id="calculator" style={{ padding: '72px 24px', background: '#FAFAFA', borderTop: '1px solid #F0F0F0' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 32 }}>
          <div style={{ fontSize: 12, fontWeight: 800, letterSpacing: '.12em', color: accent, textTransform: 'uppercase', marginBottom: 10 }}>{d.eyebrow}</div>
          <h2 style={{ fontWeight: 800, fontSize: 34, color: '#0F0F0F', margin: 0, lineHeight: 1.2, letterSpacing: '-0.005em' }}>{d.h2}</h2>
          <p style={{ maxWidth: 720, margin: '14px auto 0', fontSize: 15, color: '#4D4D4D', lineHeight: 1.6 }}>{d.body}</p>
        </div>

        <div style={{ background: '#fff', borderRadius: 16, border: '1px solid #E5E5E5', overflow: 'hidden', display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
          <div style={{ padding: '36px 36px 32px' }}>
            <label style={{ fontSize: 12, fontWeight: 800, color: '#0F0F0F', display: 'block', marginBottom: 10, letterSpacing: '.08em' }}>1 · CHOOSE YOUR VERTICAL</label>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
              {d.verticals.map((vert, i) => {
                const active = vIdx === i;
                return (
                  <button key={vert.id} onClick={() => setVIdx(i)} style={{
                    padding: '10px 10px', border: active ? `2px solid ${accent}` : '1.5px solid #E5E5E5', background: active ? '#F3FBF4' : '#fff',
                    borderRadius: 8, cursor: 'pointer', textAlign: 'left', fontWeight: 700, fontSize: 13, color: active ? '#009530' : '#0F0F0F'
                  }}>{vert.label}</button>);

              })}
            </div>

            <label style={{ fontSize: 12, fontWeight: 800, color: '#0F0F0F', display: 'block', marginTop: 24, marginBottom: 10, letterSpacing: '.08em' }}>2 · {v.unitLabel.toUpperCase()}</label>
            <div style={{ position: 'relative' }}>
              <input type="number" min={0} step={v.unitStep} value={spend} onChange={(e) => setSpend(Math.max(0, +e.target.value || 0))}
              style={{ width: '100%', padding: '12px 14px', border: '1px solid #D4D4D4', borderRadius: 8, fontSize: 15, fontFamily: 'inherit', background: '#fff', outline: 'none', fontWeight: 700, color: '#0F0F0F' }} />
            </div>
            <input type="range" min={v.unitMin} max={v.unitMax} step={v.unitStep} value={spend} onChange={(e) => setSpend(+e.target.value)} style={{ width: '100%', marginTop: 14, accentColor: accent }} />
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: '#6B6B6B', marginTop: 2 }}>
              <span>{fmtShort(v.unitMin)}</span><span>{fmtShort(v.unitMax)}</span>
            </div>
            <div style={{ marginTop: 14, padding: '12px 14px', background: '#F3FBF4', borderRadius: 8, fontSize: 11.5, color: '#1F4F1F', lineHeight: 1.5 }}>
              Savings band reflects {Math.round(v.rate.low * 100)}-{Math.round(v.rate.high * 100)}% reduction typical for this sector under a Schneider Electric Energy Performance Contract.
            </div>
          </div>

          <div style={{ padding: '36px 36px 32px', background: '#0F0F0F', color: '#fff', display: 'flex', flexDirection: 'column' }}>
            <div style={{ fontSize: 11, fontWeight: 800, color: accent, letterSpacing: '.14em', textTransform: 'uppercase' }}>Illustrative potential</div>
            <div style={{ marginTop: 18 }}>
              <div style={{ fontSize: 13, opacity: .7, fontWeight: 600 }}>Estimated annual savings</div>
              <div style={{ fontSize: 44, fontWeight: 800, color: accent, lineHeight: 1, letterSpacing: '-0.015em', marginTop: 4, fontVariantNumeric: 'tabular-nums' }}>{fmtShort(low)} - {fmtShort(high)}</div>
              <div style={{ fontSize: 12, opacity: .55, marginTop: 6 }}>at {Math.round(v.rate.low * 100)}-{Math.round(v.rate.high * 100)}% reduction vs. baseline</div>
            </div>
            <div style={{ marginTop: 24, paddingTop: 20, borderTop: '1px solid rgba(255,255,255,.15)' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 12 }}>
                <span style={{ fontSize: 13, opacity: .8 }}>10-year cumulative</span>
                <span style={{ fontSize: 22, fontWeight: 800, fontVariantNumeric: 'tabular-nums' }}>{fmtShort(low * 10)} - {fmtShort(high * 10)}</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 12, marginTop: 10 }}>
                <span style={{ fontSize: 13, opacity: .8 }}>Upfront capital required</span>
                <span style={{ fontSize: 16, fontWeight: 700, color: accent }}>$0 via ESPC</span>
              </div>
            </div>

            <div style={{ marginTop: 'auto', paddingTop: 28 }}>
              <a href="#cta" style={{ display: 'block', textAlign: 'center', textDecoration: 'none', background: accent, color: '#0F0F0F', fontWeight: 800, padding: '14px', borderRadius: 8, fontSize: 14, letterSpacing: '.01em' }}>{v.ctaText} →</a>
              <div style={{ marginTop: 8, fontSize: 11.5, opacity: .65, lineHeight: 1.5, textAlign: 'center' }}>for a no-cost preliminary assessment</div>
            </div>
          </div>
        </div>

        <div style={{ marginTop: 18, padding: '16px 20px', background: '#fff', border: '1px solid #E5E5E5', borderRadius: 10, fontSize: 11.5, color: '#4D4D4D', lineHeight: 1.6 }}>
          <strong style={{ color: '#0F0F0F' }}>Methodology and disclaimer.</strong> {d.disclaimer}
        </div>
      </div>
    </section>);

}

// =============== Insights — embedded videos / pdf ===============
function MediaTile({ media, img, title }) {
  const [play, setPlay] = useState(false);
  if (media && media.kind === 'youtube') {
    return play ?
    <iframe
      src={`https://www.youtube.com/embed/${media.id}?autoplay=1&rel=0`}
      title={title}
      frameBorder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowFullScreen
      style={{ width: '100%', height: '100%', border: 0, display: 'block' }} /> :


    <button onClick={() => setPlay(true)} aria-label="Play video" style={{ position: 'relative', width: '100%', height: '100%', padding: 0, border: 0, background: '#000', cursor: 'pointer', display: 'block' }}>
        <img src={`https://i.ytimg.com/vi/${media.id}/hqdefault.jpg`} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', opacity: 0.85 }} />
        <span style={{ position: 'absolute', inset: 0, display: 'flex', justifyContent: 'center', textAlign: "center", alignItems: "center" }}>
          <span style={{ width: 56, height: 56, borderRadius: '50%', background: 'rgba(255,255,255,.95)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 6px 20px rgba(0,0,0,.4)' }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="#0F0F0F"><path d="M8 5v14l11-7z" /></svg>
          </span>
        </span>
      </button>;

  }
  if (media && media.kind === 'pdf') {
    return (
      <object data={media.src} type="application/pdf" style={{ width: '100%', height: '100%', display: 'block', background: '#0F0F0F' }}>
        <img src={img} alt="" style={{ width: '100%', objectFit: 'cover', display: 'block', height: "220px" }} />
      </object>);

  }
  return <img src={media && media.src || img} alt="" style={{ width: '100%', display: 'block', height: "500px", objectFit: "cover" }} />;
}

function Insights({ accent }) {
  const d = HD.insights;
  // Match Education page: horizontal scroll-snap row, 6 items, fixed 320px cards, prev/next green nav buttons.
  const items = d.items.slice(0, 6);
  const trackRef = useRef(null);
  const scroll = (dir) => {
    const el = trackRef.current;
    if (!el) return;
    const card = el.querySelector('article');
    const step = card ? card.getBoundingClientRect().width + 20 : 340;
    el.scrollBy({ left: dir * step, behavior: 'smooth' });
  };
  const navBtnHome = { width: 40, height: 40, borderRadius: '50%', border: '1.5px solid #009530', background: '#fff', color: '#009530', fontSize: 20, fontWeight: 700, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', lineHeight: 1 };
  return (
    <section id="insights" style={{ padding: '48px 24px 56px', background: '#FAFAFA' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 32, flexWrap: 'wrap' }}>
          <div style={{ maxWidth: 680 }}>
            <h2 style={{ fontWeight: 800, fontSize: 30, color: '#0F0F0F', margin: 0, lineHeight: 1.2 }}>{d.h2}</h2>
            <p style={{ marginTop: 10, fontSize: 14.5, color: '#4D4D4D', lineHeight: 1.55 }}>{d.body}</p>
          </div>
          <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
            <button aria-label="Previous" onClick={() => scroll(-1)} style={navBtnHome}>‹</button>
            <button aria-label="Next" onClick={() => scroll(1)} style={navBtnHome}>›</button>
          </div>
        </div>
        <div ref={trackRef} style={{ marginTop: 24, display: 'flex', gap: 20, overflowX: 'auto', scrollSnapType: 'x mandatory', paddingBottom: 12, scrollbarWidth: 'thin' }}>
          {items.map((it, i) =>
          <article key={i} style={{ flex: '0 0 320px', scrollSnapAlign: 'start', background: '#fff', borderRadius: 12, overflow: 'hidden', border: '1px solid #E5E5E5', display: 'flex', flexDirection: 'column', transition: 'box-shadow 200ms' }} onMouseEnter={(e) => e.currentTarget.style.boxShadow = '0 6px 16px rgba(15,15,15,.10)'} onMouseLeave={(e) => e.currentTarget.style.boxShadow = ''}>
              <div style={{ aspectRatio: '16/10', overflow: 'hidden', position: 'relative', background: '#0F0F0F' }}>
                <MediaTile media={it.media} img={it.img} title={it.title} />
                <div style={{ position: 'absolute', top: 12, left: 12, background: '#fff', color: '#009530', fontWeight: 800, fontSize: 10.5, letterSpacing: '.12em', textTransform: 'uppercase', padding: '5px 9px', borderRadius: 4, zIndex: 2 }}>{it.eyebrow || it.vertical}</div>
              </div>
              <div style={{ padding: '16px 18px 20px', display: 'flex', flexDirection: 'column', flex: 1 }}>
                <h3 style={{ fontWeight: 700, fontSize: 15.5, color: '#0F0F0F', margin: 0, lineHeight: 1.3 }}>{it.title}</h3>
                <p style={{ fontSize: 13, color: '#4D4D4D', marginTop: 8, lineHeight: 1.5, flex: 1 }}>{it.body}</p>
                {(() => {
                const isPdf = it.media && it.media.kind === 'pdf' || it.href && /\.pdf($|\?)/i.test(it.href);
                const href = it.href || "https://www.se.com/us/en/work/campaign/innovation/customer-stories.jsp";
                if (isPdf) {
                  return <a href={href} onClick={(e) => {e.preventDefault();window.openGatedPdf && window.openGatedPdf(href, it.title);}} style={{ marginTop: 12, fontWeight: 700, color: '#009530', fontSize: 13, cursor: 'pointer' }}>{it.cta} →</a>;
                }
                return <a href={href} target="_blank" rel="noopener" style={{ marginTop: 12, fontWeight: 700, color: '#009530', fontSize: 13 }}>{it.cta} →</a>;
              })()}
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

// =============== FAQ — show 1,2,4,6 then read more ===============
function FAQ({ accent }) {
  const items = HD.faq;
  const visibleIdx = [0, 1, 3, 5].filter((i) => i < items.length);
  const hiddenIdx = items.map((_, i) => i).filter((i) => !visibleIdx.includes(i));
  const [open, setOpen] = useState(visibleIdx[0]);
  const [expanded, setExpanded] = useState(false);
  const order = expanded ? [...visibleIdx, ...hiddenIdx] : visibleIdx;
  return (
    <section id="faq" style={{ padding: '90px 24px', background: '#fff' }}>
      <div style={{ maxWidth: 960, margin: '0 auto' }}>
        <div style={{ fontSize: 12, fontWeight: 800, letterSpacing: '.12em', color: accent, textTransform: 'uppercase' }}>FAQ</div>
        <h2 style={{ fontWeight: 800, fontSize: 36, lineHeight: 1.2, marginTop: 12, color: '#0F0F0F' }}>FAQs</h2>
        <div style={{ marginTop: 28, borderTop: '1px solid #E5E5E5' }}>
          {order.map((i) => {
            const it = items[i];
            return (
              <div key={i} style={{ borderBottom: '1px solid #E5E5E5' }}>
                <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                  width: '100%', textAlign: 'left', background: 'transparent', border: 0, padding: '20px 0',
                  fontWeight: 700, fontSize: 17, color: '#0F0F0F', cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16
                }}>
                  <span>{it.q}</span>
                  <span style={{ color: accent, fontWeight: 900, fontSize: 22, lineHeight: 1 }}>{open === i ? '−' : '+'}</span>
                </button>
                {open === i && <div style={{ paddingBottom: 20, fontSize: 15, color: '#4D4D4D', lineHeight: 1.65 }}>{it.a}</div>}
              </div>);

          })}
        </div>
        {hiddenIdx.length > 0 &&
        <div style={{ marginTop: 22, textAlign: 'center' }}>
            <button onClick={() => setExpanded((e) => !e)} style={{
            background: expanded ? 'transparent' : accent, color: expanded ? accent : '#0F0F0F',
            border: expanded ? `1.5px solid ${accent}` : 0, fontWeight: 800, padding: '12px 24px', borderRadius: 6, fontSize: 13.5, cursor: 'pointer', letterSpacing: '.02em'
          }}>
              {expanded ? 'Show fewer questions' : `Read more (${hiddenIdx.length} more)`}
            </button>
          </div>
        }
      </div>
    </section>);

}

// =============== CTA / Contact form ===============
function CTACard({ accent }) {
  const d = HD.cta;
  const [form, setForm] = useState({ fn: '', ln: '', email: '', org: '', vertical: 'State & Local Government', role: 'Facilities / Operations', consent: true, newsletter: false });
  const [sent, setSent] = useState(false);
  const [showModal, setShowModal] = useState(false);
  const [btnHover, setBtnHover] = useState(false);
  const upd = (k, v) => setForm((f) => ({ ...f, [k]: v }));
  const valid = form.fn && form.ln && form.email.includes('@') && form.org && form.consent;
  const lbl = { fontSize: 12, fontWeight: 700, color: '#1F1F1F', display: 'block', marginBottom: 4 };
  const inp = { width: '100%', padding: '12px 14px', border: '1px solid #D4D4D4', borderRadius: 6, fontSize: 14, fontFamily: 'inherit', background: '#fff', outline: 'none' };
  return (
    <section id="cta" style={{ padding: '72px 24px', background: '#fff' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', background: '#FAFAFA', border: '1px solid #E5E5E5', borderRadius: 16, overflow: 'hidden', display: 'grid', gridTemplateColumns: '.9fr 1.1fr' }}>
        <div style={{ padding: '44px 40px', background: 'linear-gradient(135deg, rgba(15,15,15,.92) 0%, rgba(15,15,15,.78) 100%), url("https://images.unsplash.com/photo-1486325212027-8081e485255e?auto=format&fit=crop&w=1400&q=80") center/cover', color: '#fff', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <div style={{ fontSize: 12, fontWeight: 800, letterSpacing: '.12em', textTransform: 'uppercase', color: accent, marginBottom: 12 }}>{d.eyebrow}</div>
          <h2 style={{ fontWeight: 800, fontSize: 30, lineHeight: 1.2, margin: 0, color: '#fff' }}>{d.h2}</h2>
          <p style={{ marginTop: 16, fontSize: 14.5, lineHeight: 1.65, color: 'rgba(255,255,255,.92)' }}>{d.body}</p>
          <div style={{ marginTop: 24, display: 'flex', flexDirection: 'column', gap: 12, fontSize: 13.5, opacity: .92 }}>
            <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={accent} strokeWidth="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0 1 22 16.92z" /></svg>
              Tech support: 877-342-5173
            </div>
            <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={accent} strokeWidth="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" /><polyline points="22,6 12,13 2,6" /></svg>
              publicsector@se.com
            </div>
            <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={accent} strokeWidth="2"><path d="M3 21h18M5 21V8l7-5 7 5v13M9 21v-6h6v6" /></svg>
              Public sector procurement specialists
            </div>
          </div>
        </div>
        <div style={{ padding: '44px 40px', background: '#fff' }}>
          {!sent ?
          <>
              <h3 style={{ fontSize: 20, fontWeight: 800, color: '#0F0F0F', margin: 0, marginBottom: 6 }}>Tell us about your organization.</h3>
              <p style={{ fontSize: 13, color: '#6B6B6B', marginBottom: 18, lineHeight: 1.5 }}>All fields marked * required.</p>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <div><label style={lbl}>First name *</label><input style={inp} value={form.fn} onChange={(e) => upd('fn', e.target.value)} /></div>
                <div><label style={lbl}>Last name *</label><input style={inp} value={form.ln} onChange={(e) => upd('ln', e.target.value)} /></div>
              </div>
              <div style={{ marginTop: 12 }}><label style={lbl}>Work email *</label><input type="email" style={inp} value={form.email} onChange={(e) => upd('email', e.target.value)} /></div>
              <div style={{ marginTop: 12 }}><label style={lbl}>Agency / Institution *</label><input style={inp} value={form.org} onChange={(e) => upd('org', e.target.value)} /></div>
              <div style={{ marginTop: 12, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <div><label style={lbl}>Vertical *</label>
                  <select style={inp} value={form.vertical} onChange={(e) => upd('vertical', e.target.value)}>
                    <option>State & Local Government</option>
                    <option>Education (K-12 / Higher Ed)</option>
                    <option>Transportation (Airports / Transit / Rail)</option>
                    <option>Federal Government</option>
                  </select>
                </div>
                <div><label style={lbl}>Role</label>
                  <select style={inp} value={form.role} onChange={(e) => upd('role', e.target.value)}>
                    <option>Facilities / Operations</option>
                    <option>Sustainability / Energy</option>
                    <option>IT / OT</option>
                    <option>Procurement / Purchasing</option>
                    <option>Executive Leadership</option>
                    <option>Other</option>
                  </select>
                </div>
              </div>
              <label style={{ marginTop: 14, display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 12, color: '#4D4D4D', lineHeight: 1.5, cursor: 'pointer' }}>
                <input type="checkbox" checked={form.consent} onChange={(e) => upd('consent', e.target.checked)} style={{ marginTop: 3, accentColor: accent }} />
                <span>I agree to receive communications from Schneider Electric and have read the <a href="#" style={{ color: '#009530', fontWeight: 700 }}>Privacy Policy</a>.</span>
              </label>
              <button
              disabled={!valid}
              onClick={() => {setShowModal(true);setSent(true);}}
              onMouseEnter={() => setBtnHover(true)}
              onMouseLeave={() => setBtnHover(false)}
              style={{
                marginTop: 18, width: '100%',
                background: valid ? btnHover ?
                'linear-gradient(110deg, #00467F 0%, #0066B2 50%, #00467F 100%)' :
                'linear-gradient(110deg, #003B6F 0%, #00457D 50%, #003B6F 100%)' : '#B3B3B3',
                backgroundSize: valid ? '220% 100%' : '100% 100%',
                backgroundPosition: btnHover ? '100% 50%' : '0% 50%',
                color: '#fff', border: 0, fontWeight: 800,
                padding: '15px 20px', borderRadius: 8, fontSize: 15,
                cursor: valid ? 'pointer' : 'not-allowed',
                letterSpacing: '.02em',
                position: 'relative', overflow: 'hidden',
                boxShadow: valid ? btnHover ? '0 14px 30px rgba(0,70,127,.32), 0 2px 0 rgba(0,0,0,.08) inset' : '0 8px 20px rgba(0,70,127,.22)' : 'none',
                transform: btnHover && valid ? 'translateY(-1px)' : 'translateY(0)',
                transition: 'background-position 600ms cubic-bezier(.2,.9,.3,1), box-shadow 220ms, transform 220ms'
              }}>
              
                <span style={{ position: 'relative', zIndex: 2 }}>Submit</span>
                {valid &&
              <span style={{
                position: 'absolute', top: 0, bottom: 0, width: '40%',
                left: btnHover ? '100%' : '-40%',
                background: 'linear-gradient(110deg, transparent 0%, rgba(255,255,255,.28) 50%, transparent 100%)',
                transition: 'left 900ms cubic-bezier(.2,.9,.3,1)',
                pointerEvents: 'none'
              }} />
              }
              </button>
            </> :

          <div style={{ padding: '64px 4px', textAlign: 'center' }}>
              <div style={{ width: 72, height: 72, margin: '0 auto', borderRadius: '50%', background: '#E6F2FB', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#00467F', fontSize: 36, fontWeight: 800 }}>✓</div>
              <h3 style={{ fontSize: 22, fontWeight: 800, color: '#0F0F0F', marginTop: 22 }}>Submitted</h3>
              <p style={{ fontSize: 14.5, color: '#4D4D4D', marginTop: 10, lineHeight: 1.6 }}>You'll see a confirmation message shortly.</p>
              <button onClick={() => {setSent(false);setShowModal(false);setForm({ fn: '', ln: '', email: '', org: '', vertical: 'State & Local Government', role: 'Facilities / Operations', consent: true, newsletter: false });}} style={{ marginTop: 18, background: 'transparent', color: '#00467F', border: '1.5px solid #00467F', fontWeight: 700, padding: '10px 18px', borderRadius: 6, fontSize: 13, cursor: 'pointer' }}>Submit another</button>
            </div>
          }
        </div>
      </div>

      {showModal &&
      <div
        onClick={() => setShowModal(false)}
        style={{
          position: 'fixed', inset: 0, background: 'rgba(10,15,20,.55)',
          backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000,
          animation: 'pubsec-fade-in 220ms ease-out'
        }}>
        
          <div
          onClick={(e) => e.stopPropagation()}
          style={{
            background: '#fff', borderRadius: 16, padding: '44px 44px 36px', maxWidth: 480, width: '90%',
            boxShadow: '0 30px 60px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.08)',
            textAlign: 'center', position: 'relative',
            animation: 'pubsec-modal-pop 520ms cubic-bezier(.34,1.56,.64,1)'
          }}>
          
            <button
            onClick={() => setShowModal(false)}
            aria-label="Close"
            style={{ position: 'absolute', top: 14, right: 14, background: 'transparent', border: 0, fontSize: 22, color: '#9DA3A8', cursor: 'pointer', lineHeight: 1, padding: 4 }}>
            ×</button>
            <div style={{ width: 84, height: 84, margin: '0 auto 18px', position: 'relative' }}>
              <div style={{
              position: 'absolute', inset: 0, borderRadius: '50%',
              background: 'radial-gradient(circle, rgba(0,70,127,.18) 0%, rgba(0,70,127,0) 70%)',
              animation: 'pubsec-pulse 1.8s ease-out infinite'
            }} />
              <div style={{
              width: 84, height: 84, borderRadius: '50%',
              background: 'linear-gradient(135deg, #00467F 0%, #0066B2 100%)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              position: 'relative',
              boxShadow: '0 12px 28px rgba(0,70,127,.32)'
            }}>
                <svg width="44" height="44" viewBox="0 0 52 52" fill="none">
                  <path d="M14 27 L23 36 L40 18" stroke="#fff" strokeWidth="4.5" strokeLinecap="round" strokeLinejoin="round" style={{
                  strokeDasharray: 60, strokeDashoffset: 60,
                  animation: 'pubsec-check-draw 600ms 280ms cubic-bezier(.65,0,.35,1) forwards'
                }} />
                </svg>
              </div>
            </div>
            <h3 style={{ fontSize: 24, fontWeight: 800, color: '#0F0F0F', margin: 0, lineHeight: 1.25 }}>Thanks for reaching out!</h3>
            <p style={{ fontSize: 15, color: '#4D4D4D', marginTop: 14, lineHeight: 1.6 }}>
              Our public sector expert will reach out to you soon.
            </p>
            <button
            onClick={() => setShowModal(false)}
            style={{
              marginTop: 24, background: 'linear-gradient(110deg, #00467F 0%, #0066B2 100%)', color: '#fff',
              border: 0, fontWeight: 700, padding: '12px 28px', borderRadius: 8, fontSize: 14, cursor: 'pointer',
              boxShadow: '0 6px 16px rgba(0,70,127,.24)'
            }}>
            Close</button>
          </div>
          <style>{`
            @keyframes pubsec-fade-in { from { opacity: 0; } to { opacity: 1; } }
            @keyframes pubsec-modal-pop {
              0% { opacity: 0; transform: scale(.7) translateY(20px); }
              60% { opacity: 1; transform: scale(1.04) translateY(0); }
              100% { opacity: 1; transform: scale(1) translateY(0); }
            }
            @keyframes pubsec-check-draw { to { stroke-dashoffset: 0; } }
            @keyframes pubsec-pulse {
              0% { transform: scale(1); opacity: 1; }
              100% { transform: scale(1.6); opacity: 0; }
            }
          `}</style>
        </div>
      }
    </section>);

}

// =============== Footer (shared, modeled on official 4-column structure) ===============
function Footer() {
  // Original-design footer informed by the public site's column structure.
  // External links go to the corresponding canonical pages; internal anchors
  // point to sections within the microsite.
  const cols = [
  { h: 'Company',
    l: [
    { t: 'About us', h: 'https://www.se.com/ww/en/about-us/' },
    { t: 'Newsroom', h: 'https://www.se.com/ww/en/about-us/newsroom/' },
    { t: 'Investors', h: 'https://www.se.com/ww/en/about-us/investor-relations/' },
    { t: 'Careers', h: 'https://www.se.com/ww/en/about-us/careers/' },
    { t: 'Sustainability', h: 'https://www.se.com/ww/en/about-us/sustainability/' }]

  },
  { h: 'Customer Care',
    l: [
    { t: 'Contact us', h: 'PubSec Homepage.html#cta' },
    { t: 'Where to buy', h: 'https://www.se.com/us/en/work/support/resources-and-tools/calculators-and-online-tools/ez-selectors/' },
    { t: 'Help Center', h: 'https://www.se.com/us/en/work/support/' },
    { t: 'Get a Quote', h: 'https://www.se.com/us/en/work/support/customer-care/contact-sales/' },
    { t: 'Product Selector', h: 'https://www.se.com/us/en/work/support/resources-and-tools/calculators-and-online-tools/ez-selectors/' }]

  },
  { h: 'My Schneider Electric',
    l: [
    { t: 'mySchneider', h: 'https://www.se.com/myschneider/' },
    { t: 'Partner Portal', h: 'https://www.se.com/ww/en/partners/' },
    { t: 'Schneider Electric Exchange', h: 'https://exchange.se.com/' },
    { t: 'Community', h: 'https://community.se.com/' }]

  },
  { h: 'Insights',
    l: [
    { t: 'Sustainability', h: 'https://www.se.com/ww/en/insights/sustainability/' },
    { t: 'New Energy Landscape', h: 'https://www.se.com/ww/en/insights/electricity-4-0/' },
    { t: 'Next-generation Automation', h: 'https://www.se.com/ww/en/insights/next-generation-automation/' },
    { t: 'AI & Technology', h: 'https://www.se.com/ww/en/insights/ai-and-technology/' },
    { t: 'Blogs', h: 'https://blog.se.com/?utm_source=se.com&utm_medium=referral' }]

  }];

  const social = [
  { n: 'LinkedIn', h: 'https://www.linkedin.com/company/schneider-electric',
    svg: <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" /></svg> },
  { n: 'X', h: 'https://x.com/SchneiderElec',
    svg: <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" /></svg> },
  { n: 'YouTube', h: 'https://www.youtube.com/user/SchneiderCorporate',
    svg: <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" /></svg> },
  { n: 'Facebook', h: 'https://www.facebook.com/SchneiderElectric',
    svg: <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" /></svg> },
  { n: 'Instagram', h: 'https://www.instagram.com/schneiderelectric/',
    svg: <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z" /></svg> }];

  return (
    <footer id="about" style={{ background: '#0F0F0F', color: '#fff' }}>
      <div style={{ maxWidth: 1440, margin: '0 auto', padding: '60px 24px 24px' }}>
        <div style={{ display: 'flex', gap: 48, alignItems: 'flex-start', flexWrap: 'wrap', marginBottom: 40 }}>
          <div style={{ flex: '0 0 240px' }}>
            <img src="logo.svg" alt="Schneider Electric" style={{ height: 48, filter: 'brightness(0) invert(1)' }} />
            <div style={{ marginTop: 14, fontSize: 13, fontWeight: 700, color: '#3DCD58' }}>Life Is On</div>
            <div style={{ marginTop: 14, fontSize: 12.5, color: '#B3B3B3', lineHeight: 1.6, maxWidth: 260 }}>
              Schneider Electric is the leader in the digital transformation of energy management and automation, with manufacturing and innovation across 40 U.S. states.
            </div>
            <div style={{ marginTop: 18, display: 'flex', gap: 10, alignItems: 'center' }}>
              {social.map((s) =>
              <a key={s.n} href={s.h} target="_blank" rel="noopener" aria-label={s.n} style={{ width: 34, height: 34, borderRadius: '50%', background: 'rgba(255,255,255,.08)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#fff', textDecoration: 'none' }}
              onMouseEnter={(e) => e.currentTarget.style.background = '#3DCD58'}
              onMouseLeave={(e) => e.currentTarget.style.background = 'rgba(255,255,255,.08)'}>
                  {s.svg}
                </a>
              )}
            </div>
          </div>
          <div style={{ flex: 1, display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 24 }}>
            {cols.map((c) =>
            <div key={c.h}>
                <h4 style={{ fontWeight: 800, fontSize: 13, margin: '0 0 14px', color: '#fff', letterSpacing: '.06em', textTransform: 'uppercase' }}>{c.h}</h4>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {c.l.map((li) => {
                  const ext = li.h.startsWith('http');
                  return <li key={li.t}><a href={li.h} target={ext ? '_blank' : undefined} rel={ext ? 'noopener' : undefined} style={{ color: '#fff', opacity: .72, fontSize: 13, textDecoration: 'none' }}>{li.t}</a></li>;
                })}
                </ul>
              </div>
            )}
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderTop: '1px solid rgba(255,255,255,.15)', paddingTop: 18, fontSize: 12, opacity: .65, flexWrap: 'wrap', gap: 12 }}>
          <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>
            <a href="https://www.se.com/ww/en/about-us/legal/privacy-policy.jsp" target="_blank" rel="noopener" style={{ color: '#fff' }}>Privacy Policy</a>
            <a href="https://www.se.com/ww/en/about-us/legal/cookie-policy.jsp" target="_blank" rel="noopener" style={{ color: '#fff' }}>Cookie Notice</a>
            <a href="https://www.se.com/ww/en/about-us/legal/terms-of-use.jsp" target="_blank" rel="noopener" style={{ color: '#fff' }}>Terms of use</a>
            <a href="https://www.se.com/ww/en/about-us/accessibility/" target="_blank" rel="noopener" style={{ color: '#fff' }}>Accessibility</a>
          </div>
          <div>© 2026 Schneider Electric · Public Sector · USA</div>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { Nav, Hero, Intro, JumpNav, Pillars, Industries, Calculator, Insights, FAQ, CTACard, Footer, CivicIsoAnim, AnimatedStat });