// fnb-v2.jsx
// Food & Beverage Industry Page — restructured v2
// Flow: Hero → Operational Reality → Incentives → Solutions
//       → Featured Project → Discovery Process → FAQ → CTA
// Style follows the Partners page rhythm: minimal, real imagery, clean grid.

// ============================================================
// FnbHeroV2 — Wise Blue. Single-view hero (label/title/subtitle/desc/buttons
// must be visible on load — no vitals ribbon, no full-bleed image below).
// Opens with "Industries / Food & Beverage" breadcrumb (no "Industry Brief").
// ============================================================
const FnbHeroV2 = () => (
  <section data-screen-label="01 Hero" data-gi-resp="hero" style={{
    background: 'var(--gi-wise-blue)', color: '#fff',
    position: 'relative', overflow: 'hidden',
    paddingTop: 56, paddingBottom: 88,
  }}>
    <div data-gi-resp="container" style={{
      maxWidth: 1440, margin: '0 auto', padding: '0 48px',
      position: 'relative', zIndex: 1,
    }}>
      {/* Breadcrumb / running header */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        paddingBottom: 18,
        borderBottom: '1px solid rgba(255,255,255,0.14)',
        fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.14em',
        textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)',
        gap: 24, flexWrap: 'wrap',
      }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
          <span aria-hidden="true" style={{
            width: 8, height: 8, background: '#D4A24C', display: 'inline-block',
          }} />
          <span style={{ color: 'rgba(255,255,255,0.55)' }}>Industries</span>
          <span style={{ color: 'rgba(255,255,255,0.30)' }}>/</span>
          <span style={{ color: '#fff' }}>Food &amp; Beverage</span>
        </span>
        <span>Sector 03 / 06</span>
      </div>
    </div>

    <div data-gi-resp="container" style={{
      maxWidth: 1440, margin: '0 auto', padding: '0 48px',
      position: 'relative', zIndex: 1, marginTop: 72,
    }}>
      <div data-gi-resp="hero-split" style={{
        display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 80,
        alignItems: 'center',
      }}>
        <div className="gi-hero-animate">
          <div style={{ marginBottom: 24 }}>
            <span className="gi-eyebrow gi-eyebrow--gold">Industries · Food &amp; Beverage</span>
          </div>

          <h1 style={{
            font: '500 64px/70px var(--ff-sans)', letterSpacing: '-0.030em',
            color: '#fff', margin: 0, textWrap: 'balance', maxWidth: 760,
          }}>
            Energy infrastructure for food &amp; beverage facilities.{' '}
            <span style={{ fontStyle: 'italic', fontWeight: 400, color: '#D4A24C' }}>
              Built around the process.
            </span>
          </h1>

          <p style={{
            font: '500 20px/30px var(--ff-sans)', letterSpacing: '-0.010em',
            color: '#fff', margin: '28px 0 14px', maxWidth: 620, textWrap: 'pretty',
          }}>
            High consumption. Continuous operation. Tight margins.
          </p>

          <p style={{
            font: '400 16px/26px var(--ff-sans)',
            color: 'rgba(255,255,255,0.74)', margin: 0, maxWidth: 620, textWrap: 'pretty',
          }}>
            We work with Ontario food manufacturers, processors, and distributors to
            reduce operating costs through solar, storage, lighting, and electrical
            upgrades — planned around production schedules and refrigeration loads.
          </p>

          <div style={{
            display: 'flex', gap: 14, flexWrap: 'wrap', marginTop: 36,
          }}>
            <a href="/about/contact/" style={{
              fontFamily: 'var(--ff-sans)', fontSize: 15, fontWeight: 500,
              letterSpacing: '-0.003em',
              padding: '15px 28px', borderRadius: 2,
              background: '#fff', color: 'var(--gi-wise-blue)',
              display: 'inline-flex', alignItems: 'center', gap: 12,
              textDecoration: 'none', border: 'none',
              transition: 'background 200ms cubic-bezier(.2,0,0,1)',
            }}
            onMouseOver={(e) => e.currentTarget.style.background = 'rgba(255,255,255,0.92)'}
            onMouseOut={(e) => e.currentTarget.style.background = '#fff'}>
              Start your assessment
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </a>
            <a href="/projects/" style={{
              fontFamily: 'var(--ff-sans)', fontSize: 15, fontWeight: 500,
              letterSpacing: '-0.003em',
              padding: '15px 28px', borderRadius: 2,
              background: 'transparent', color: '#fff',
              border: '1px solid rgba(255,255,255,0.5)',
              display: 'inline-flex', alignItems: 'center', gap: 12,
              textDecoration: 'none',
            }}>
              See our projects →
            </a>
          </div>
        </div>

        {/* Hero image — real F&B project photo */}
        <div data-gi-resp="hero-image" className="gi-image-settle" style={{
          height: 480, overflow: 'hidden',
          border: '1px solid rgba(255,255,255,0.14)',
          position: 'relative',
        }}>
          <img
            src={`${window.GI_BASE}assets/projects/rabba-coopers-aerial.jpg`}
            alt="Rabba Fine Foods 1,270 kW rooftop solar installation in Mississauga, Ontario — a Green Integrations project"
            style={{
              width: '100%', height: '100%', objectFit: 'cover', display: 'block',
              filter: 'saturate(0.96) contrast(1.02)',
            }}
          />
          <div aria-hidden="true" style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(180deg, rgba(15,33,51,0.10) 0%, rgba(15,33,51,0.45) 100%)',
          }} />
          <div style={{
            position: 'absolute', top: 20, left: 24,
            fontFamily: 'var(--ff-mono)', fontSize: 10.5,
            letterSpacing: '0.14em', textTransform: 'uppercase',
            color: 'rgba(255,255,255,0.85)',
          }}>IMG · 01 / Hero</div>
          <div style={{
            position: 'absolute', left: 24, bottom: 22,
            fontFamily: 'var(--ff-mono)', fontSize: 11.5,
            letterSpacing: '0.06em',
            color: 'rgba(255,255,255,0.92)', lineHeight: '18px',
          }}>
            Rabba Fine Foods · 1,270 kW · Mississauga, ON
          </div>
        </div>
      </div>
    </div>
  </section>
);


// ============================================================
// FnbReality — Operational Reality / Why energy matters in F&B
// Paper Cream. Title left + 4 cards in a row to the right.
// ============================================================
const FnbReality = () => {
  const points = [
    {
      n: '#1',
      head: 'High consumption. High energy cost.',
      body: 'Food manufacturing facilities operate with large electrical loads that run continuously — especially refrigeration, processing, and ventilation systems.',
    },
    {
      n: '#2',
      head: 'Electricity costs continue to rise.',
      body: 'High-consumption facilities are increasingly exposed to rising utility rates, demand charges, and long-term energy cost volatility.',
    },
    {
      n: '#3',
      head: 'Margins are tight.',
      body: 'Rising operating costs directly impact profitability in competitive food manufacturing and distribution environments.',
    },
    {
      n: '#4',
      head: 'Energy infrastructure is cost control.',
      body: 'Solar, storage, lighting, and electrical upgrades help reduce operating costs and improve long-term energy predictability.',
    },
  ];

  return (
    <section data-screen-label="02 Operational Reality" data-gi-resp="fnb-reality" 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-fnb-reality-grid style={{
          display: 'grid',
          gridTemplateColumns: '260px 1fr',
          gap: 40,
          alignItems: 'start',
        }}>
          {/* Title block — left */}
          <div data-gi-reveal style={{marginTop: '17px'}}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              marginBottom: 13,
            }}>
              <span style={{
                fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.18em',
                textTransform: 'uppercase', color: '#5E8F6D', fontWeight: 600,
              }}>Operational reality</span>
            </div>
            <h2 style={{
              font: '500 38px/46px var(--ff-sans)', letterSpacing: '-0.022em',
              color: 'var(--gi-deep-ink)', margin: 0,
              textWrap: 'balance',
            }}>
              Why energy matters in food &amp; beverage.
            </h2>
          </div>

          {/* Four reality cards */}
          <div
            data-fnb-reality-cards
            data-gi-reveal-stagger
            style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(4, 1fr)',
              gridTemplateRows: 'auto auto auto',
              gap: '0 40px',
            }}>
            {points.map((p) => (
              <article key={p.n} data-gi-resp="fnb-reality-card" style={{
                paddingTop: 26,
                borderTop: '1px solid rgba(15,33,51,0.20)',
                display: 'grid',
                gridTemplateRows: 'subgrid',
                gridRow: 'span 3',
              }}>
                <div style={{
                  fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.18em',
                  textTransform: 'uppercase', fontWeight: 600,
                  color: 'var(--gi-color-green)',
                  marginBottom: 22,
                }}>
                  <span style={{ color: '#5E8F6D' }}>{p.n}</span>
                  <span style={{
                    marginLeft: 10,
                    color: 'var(--gi-graphite)', fontWeight: 500,
                  }}>Reality</span>
                </div>
                <h3 style={{
                  font: '500 21px/28px var(--ff-sans)', letterSpacing: '-0.014em',
                  color: 'var(--gi-deep-ink)', margin: '0 0 14px',
                  textWrap: 'balance',
                  alignSelf: 'start',
                }}>
                  {p.head}
                </h3>
                <p style={{
                  font: '400 14.5px/22px var(--ff-sans)',
                  color: 'var(--gi-slate)', margin: 0, textWrap: 'pretty',
                  alignSelf: 'start',
                }}>{p.body}</p>
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};


// ============================================================
// FnbIncentivesV2 — moved up. Wise Blue. Lighter, cleaner version of the
// existing incentives table.
// ============================================================
const FnbIncentivesV2 = () => {
  const rows = [
    { cat: 'Federal',    qty: 'Up to 30%', name: 'Clean Technology Investment Tax Credit',     body: 'Refundable tax credit on eligible solar, battery storage, and electrification capital. Applies regardless of the facility\u2019s current tax position in the claim year.' },
    { cat: 'Provincial', qty: '$860 per kW',  name: 'Save On Energy Rebate', body: '$860 per kW-AC of installed capacity — or 50% of total project costs, whichever is less — up to a maximum of $860,000 per project. On a ~1 MW-AC rooftop, that\'s hundreds of thousands in direct rebate.' },
    { cat: 'Federal',    qty: '100% CCA',  name: 'Enhanced First Year Capital Cost Allowance', body: 'Accelerated depreciation on eligible clean energy investments — improving first-year cash flow in the year of installation.' }
  ];

  return (
    <section data-screen-label="03 Incentives" data-gi-resp="fnb-incentives-v2" style={{
      background: 'var(--gi-wise-blue)', color: '#fff',
      padding: '128px 0', position: 'relative', overflow: 'hidden',
    }}>
      <div data-gi-resp="container" style={{
        position: 'relative', maxWidth: 1440, margin: '0 auto', padding: '0 48px',
      }}>
        <SectionHeader
          eyebrow="Incentives & rebates"
          eyebrowClassName="gi-eyebrow--gold"
          title="The ultimate food & beverage incentive stack."
          sub="Food & beverage facilities can qualify for stacked federal and provincial incentives that materially reduce project cost. Between the Clean Technology ITC, accelerated depreciation, and utility rebates, eligible commercial solar projects can achieve funding support of up to 75% of total project cost."
          onDark
        />

        <div data-gi-resp="fnb-incentives-grid" data-gi-reveal-stagger style={{
          marginTop: 64,
          border: '1px solid rgba(255,255,255,0.20)',
          borderTop: '1px solid var(--gi-amber)',
        }}>
          {rows.map((r, i) => (
            <div key={r.name} data-gi-resp="fnb-incentive-row" style={{
              display: 'grid', gridTemplateColumns: '20px 200px 220px 1fr',
              gap: 32, alignItems: 'start',
              padding: '32px',
              borderBottom: i < rows.length - 1 ? '1px solid rgba(255,255,255,0.14)' : 'none',
            }}>
              <div data-gi-resp="fnb-incentive-row-numeral" style={{
                fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.16em',
                color: 'var(--gi-amber)', fontWeight: 600, paddingTop: 6,
              }}>0{i+1}</div>

              <div>
                <div style={{
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                  padding: '5px 10px',
                  border: '1px solid var(--gi-amber)',
                  fontFamily: 'var(--ff-mono)', fontSize: 10.5, letterSpacing: '0.16em',
                  textTransform: 'uppercase', color: 'var(--gi-amber)', fontWeight: 600,
                  marginBottom: 12,
                }}>
                  <span aria-hidden="true" style={{
                    width: 5, height: 5, background: 'var(--gi-amber)', display: 'inline-block',
                  }} />
                  {r.cat}
                </div>
                <div style={{
                  font: '500 22px/28px var(--ff-sans)', letterSpacing: '-0.014em',
                  color: '#fff',
                }}>{r.qty}</div>
              </div>
              <h3 style={{
                font: '500 19px/26px var(--ff-sans)', letterSpacing: '-0.012em',
                color: '#fff', margin: 0, textWrap: 'balance',
              }}>{r.name}</h3>
              <p style={{
                font: '400 15px/24px var(--ff-sans)',
                color: 'rgba(255,255,255,0.78)', margin: 0, textWrap: 'pretty', maxWidth: 720,
              }}>{r.body}</p>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 32, display: 'flex', alignItems: 'center', gap: 16 }}>
          <span aria-hidden="true" style={{
            display: 'inline-block', width: 8, height: 8,
            background: 'var(--gi-amber)',
          }} />
          <a href="/resources/rebates-and-incentives/" style={{
            font: '500 14px/22px var(--ff-sans)', color: 'var(--gi-amber)',
            borderBottom: '1px solid currentColor', paddingBottom: 2,
            display: 'inline-flex', gap: 8,
          }}>See the full Canadian incentives guide →</a>
        </div>
      </div>
    </section>
  );
};


// ============================================================
// FnbSolutionsV2 — 5-step solution flow (per spec).
// 01 Energy Audits → 02 LED → 03 Solar PV → 04 Battery → 05 Electrical Infra.
// "Understand → Reduce → Generate → Manage peaks → Build long-term."
// Paper Cream background, clean rows, real photography on each.
// ============================================================
const FnbSolutionsV2 = () => {
  const rows = [
    {
      idx: '01', kicker: 'Energy Audits',
      title: 'Identify what\u2019s driving consumption.',
      body: 'Facility energy audits establish where electricity is being consumed, what systems drive demand charges, and which upgrades create the strongest operational and financial impact.',
      img: `${window.GI_BASE}assets/projects/energy-audit.webp`,
      href: '/solutions/energy-audits/',
    },
    {
      idx: '02', kicker: 'LED Lighting',
      title: 'Reduce baseline demand.',
      body: 'LED retrofits reduce lighting load immediately while improving illumination levels in production, warehousing, and refrigerated environments.',
      img: `${window.GI_BASE}assets/projects/led-lift-install.jpg`,
      href: '/solutions/led-lighting/',
    },
    {
      idx: '03', kicker: 'Solar PV',
      title: 'Offset daytime production demand.',
      body: 'Large rooftops and continuous daytime operation make many food facilities strong candidates for rooftop solar generation.',
      img: `${window.GI_BASE}assets/projects/sunny-crunch-aerial.jpg`,
      href: '/solutions/commercial-solar/',
    },
    {
      idx: '04', kicker: 'Battery Storage',
      title: 'Manage refrigeration-driven demand peaks.',
      body: 'Battery storage helps reduce demand charges by supplementing refrigeration and processing loads during peak utility intervals.',
      img: `${window.GI_BASE}assets/solar-battery-storage.webp`,
      href: '/solutions/battery-storage/',
    },
    {
      idx: '05', kicker: 'Electrical Infrastructure',
      title: 'Build around future capacity.',
      body: 'Service upgrades, distribution planning, and electrical coordination ensure the facility can support future expansion, storage, and electrification.',
      img: `${window.GI_BASE}assets/projects/vicwest-mississauga-winter.jpg`,
      href: '/about/contact/',
    },
  ];

  const flow = [
    'Understand the facility',
    'Reduce load',
    'Generate power',
    'Manage peaks',
    'Build long-term infrastructure',
  ];

  return (
    <section data-screen-label="04 Solutions" data-gi-resp="fnb-solutions-v2" style={{
      background: 'var(--gi-paper-cream)', padding: '128px 0',
    }}>
      <div data-gi-resp="container" style={{
        maxWidth: 1440, margin: '0 auto', padding: '0 48px',
      }}>
        <SectionHeader
          eyebrow="Solutions for this sector"
          eyebrowClassName="gi-eyebrow--green"
          title="A complete energy stack for food & beverage."
          sub="Five layers, sequenced so each one earns the next. Most facilities benefit from at least three — and the strongest projects combine all five."
        />

        {/* Flow rail */}
        <div data-gi-reveal style={{
          marginTop: 56,
          display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap',
          padding: '20px 24px',
          background: 'var(--gi-paper-white)',
          border: '1px solid rgba(15,33,51,0.10)',
        }}>
          <span style={{
            fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.16em',
            textTransform: 'uppercase', color: 'var(--gi-graphite)', fontWeight: 500,
            whiteSpace: 'nowrap',
          }}>The story</span>
          <span aria-hidden="true" style={{
            width: 1, height: 14, background: 'rgba(15,33,51,0.20)',
          }} />
          {flow.map((f, i) => (
            <React.Fragment key={f}>
              <span style={{
                font: '500 14px/20px var(--ff-sans)', letterSpacing: '-0.005em',
                color: 'var(--gi-deep-ink)', whiteSpace: 'nowrap',
              }}>{f}</span>
              {i < flow.length - 1 && (
                <span aria-hidden="true" style={{
                  fontFamily: 'var(--ff-mono)', fontSize: 14,
                  color: 'var(--gi-sage-accent)',
                }}>→</span>
              )}
            </React.Fragment>
          ))}
        </div>

        {/* Rows */}
        <div data-gi-reveal-stagger style={{
          marginTop: 24,
          display: 'flex', flexDirection: 'column',
        }}>
          {rows.map((r, i) => (
            <a key={r.idx} href={r.href}
              className="gi-fnb-sol-row"
              style={{
                display: 'grid',
                gridTemplateColumns: '80px 260px 1fr 56px',
                gap: 40, alignItems: 'center',
                padding: '28px 4px',
                borderTop: i === 0 ? '1px solid rgba(15,33,51,0.18)' : 'none',
                borderBottom: '1px solid rgba(15,33,51,0.14)',
                color: 'var(--gi-deep-ink)', border: 'none',
                borderBottomWidth: 1, borderBottomStyle: 'solid',
                borderBottomColor: 'rgba(15,33,51,0.14)',
                borderTopWidth: i === 0 ? 1 : 0,
                borderTopStyle: 'solid',
                borderTopColor: 'rgba(15,33,51,0.18)',
                textDecoration: 'none',
                transition: 'background 220ms cubic-bezier(.2,0,0,1)',
              }}>
              <span style={{
                fontFamily: 'var(--ff-mono)', fontSize: 13, letterSpacing: '0.10em',
                color: 'var(--gi-amber)', fontWeight: 600,
              }}>{r.idx} —</span>

              <div style={{
                height: 140, overflow: 'hidden',
                background: 'var(--gi-wise-blue)', position: 'relative',
              }}>
                <img src={r.img} alt={r.kicker + ' — Green Integrations project'}
                  style={{
                    width: '100%', height: '100%', objectFit: 'cover',
                    display: 'block', filter: 'saturate(0.96) contrast(1.02)',
                  }} />
                <span style={{
                  position: 'absolute', left: 10, bottom: 10,
                  padding: '4px 8px',
                  background: 'rgba(255,255,255,0.92)',
                  fontFamily: 'var(--ff-mono)', fontSize: 9.5, letterSpacing: '0.16em',
                  textTransform: 'uppercase', color: 'var(--gi-deep-ink)', fontWeight: 600,
                }}>{r.kicker}</span>
              </div>

              <div>
                <div style={{
                  fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.18em',
                  textTransform: 'uppercase', color: 'var(--gi-sage-accent)',
                  fontWeight: 600, marginBottom: 10,
                }}>{r.kicker}</div>
                <h3 style={{
                  font: '500 28px/34px var(--ff-sans)', letterSpacing: '-0.018em',
                  color: 'var(--gi-deep-ink)', margin: '0 0 10px',
                  textWrap: 'balance', maxWidth: 720,
                }}>{r.title}</h3>
                <p style={{
                  font: '400 15px/24px var(--ff-sans)',
                  color: 'var(--gi-slate)', margin: 0, textWrap: 'pretty', maxWidth: 760,
                }}>{r.body}</p>
              </div>

              <span aria-hidden="true" style={{
                justifySelf: 'end',
                fontFamily: 'var(--ff-mono)', fontSize: 22,
                color: 'var(--gi-sage-accent)',
                transition: 'transform 220ms cubic-bezier(.2,0,0,1)',
              }}>→</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};


// ============================================================
// FnbCaseStudyV2 — Featured Project (without the IMPACT plate).
// Sunny Crunch, 593 kW · Markham, ON.
// ============================================================
const FnbCaseStudyV2 = () => {
  // ----- Slider images for the Sunny Crunch project -----
  // Trimmed to 4 representative aerials so the thumbnail strip stays readable.
  // Drop replacement files into /assets/projects/sunny-crunch/ and update src + alt.
  // Order = display order. Slide 01 is shown on page load.
  const slides = [
    {
      label:   'Construction In Progress',
      caption: '593 kW · 200 Shields Court · Markham, ON',
      src: `${window.GI_BASE}assets/projects/sunny-crunch/sunny-crunch_01.webp`,
      alt: 'Sunny Crunch Foods, Markham — 593 kW rooftop solar installation, aerial view',
    },
    {
      label:   'Sunny Crunch · Racking Completed',
      caption: '593 kW · 200 Shields Court · Markham, ON',
      src: `${window.GI_BASE}assets/projects/sunny-crunch/sunny-crunch_02.webp`,
      alt: 'Sunny Crunch Foods — rooftop array, aerial view 02',
    },
    {
      label:   'Sunny Crunch · Electrical',
      caption: '593 kW · 200 Shields Court · Markham, ON',
      src: `${window.GI_BASE}assets/projects/sunny-crunch/sunny-crunch_03.webp`,
      alt: 'Sunny Crunch Foods — rooftop array, aerial view 03',
    },
    {
      label:   'Sunny Crunch · Inverter',
      caption: '593 kW · 200 Shields Court · Markham, ON',
      src: `${window.GI_BASE}assets/projects/sunny-crunch/sunny-crunch_04.webp`,
      alt: 'Sunny Crunch Foods — rooftop array, aerial view 04',
    },
  ];

  const [slideIdx, setSlideIdx] = React.useState(0);
  const total = slides.length;
  const slide = slides[slideIdx];
  const go = (n) => setSlideIdx(((n % total) + total) % total);

  const stats = [
    { big: '593 kW',    label: 'DC system size',         sub: '1,236 × Hanwha Q Cells 480W' },
    { big: '613,400',   label: 'kWh generated annually', sub: 'Across the 30-year model' },
    { big: '35.2%',     label: 'Solar offset achieved',  sub: 'Limited by refrigeration scale' },
    { big: 'Dec 2023',  label: 'Commercial operation',   sub: '17 × Fronius Symo 24kW' },
  ];

  const spec = [
    { l: 'Location',     v: '200 Shields Court, Markham, ON' },
    { l: 'System size',  v: '593.3 kW DC / 408 kW AC' },
    { l: 'Modules',      v: '1,236 × Hanwha Q Cells 480W' },
    { l: 'Inverters',    v: '17 × Fronius USA Symo 24kW' },
    { l: 'Racking',      v: 'TerraGen' },
    { l: 'Commissioned', v: 'December 2023' },
  ];

  const also = [
    { name: 'Rabba Fine Foods · 260 Brunel',    loc: 'Mississauga, ON', size: '137 kW DC',    off: '87.3% solar offset',  com: 'Commissioned December 2023' },
    { name: 'Rabba Fine Foods · 5876 Coopers',  loc: 'Mississauga, ON', size: '1,270 kW DC',  off: '67.2% solar offset',  com: 'Commissioned August 2024' },
    { name: 'Gerber Meats Ltd.',                loc: 'Millbank, ON',    size: '86 kW DC',     off: '89.2% solar offset',  com: 'Commissioned June 2024' },
    { name: 'Ce De Candy',                 loc: 'Newmarket, ON',     size: '966 kW DC',   off: '100% solar offset',   com: 'Commissioned August 2025' },
  ];

  return (
    <section data-screen-label="05 Featured Project" data-gi-resp="fnb-case-study-v2" style={{
      background: 'var(--gi-paper-white)',
      padding: '128px 0',
      borderTop: '1px solid rgba(15,33,51,0.08)',
      borderBottom: '1px solid rgba(15,33,51,0.08)',
    }}>
      <div data-gi-resp="container" style={{
        position: 'relative', maxWidth: 1440, margin: '0 auto', padding: '0 48px',
      }}>
        <SectionHeader
          eyebrow="Featured project"
          eyebrowClassName="gi-eyebrow--green"
          title="Sunny Crunch Foods — 593 kW rooftop solar."
          sub="A food processing facility in Markham, Ontario. Rooftop solar designed around continuous production and a 24/7 operating load profile."
        />

        {/* ===== SLIDER ===== */}
        <div data-gi-image-reveal
          role="region"
          aria-roledescription="carousel"
          aria-label="Sunny Crunch Foods project photos"
          style={{
            marginTop: 64,
            position: 'relative',
            border: '1px solid rgba(15,33,51,0.14)',
            background: 'var(--gi-wise-blue)',
          }}>
          <div style={{
            position: 'relative', height: 520, overflow: 'hidden',
          }}>
            {slides.map((s, i) => (
              <div key={i} style={{
                position: 'absolute', inset: 0,
                opacity: i === slideIdx ? 1 : 0,
                transition: 'opacity 380ms cubic-bezier(.2,0,0,1)',
                pointerEvents: i === slideIdx ? 'auto' : 'none',
              }}>
                <img src={s.src} alt={s.alt}
                  style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
            ))}

            {/* Photo location/spec strip */}
            <div style={{
              position: 'absolute', top: 18, left: 18,
              display: 'flex', gap: 8, flexWrap: 'wrap',
              zIndex: 2,
            }}>
              {/* <div style={{
                padding: '8px 12px', background: 'rgba(255,255,255,0.94)',
                fontFamily: 'var(--ff-mono)', fontSize: 10.5, letterSpacing: '0.14em',
                color: 'var(--gi-deep-ink)', fontWeight: 500, textTransform: 'uppercase',
              }}>200 SHIELDS COURT · MARKHAM, ON</div> */}
              <div style={{
                padding: '8px 12px', background: 'var(--gi-wise-blue)',
                fontFamily: 'var(--ff-mono)', fontSize: 10.5, letterSpacing: '0.14em',
                color: '#fff', fontWeight: 500, textTransform: 'uppercase',
                display: 'inline-flex', alignItems: 'center', gap: 6,
              }}>
                <span aria-hidden="true" style={{
                  width: 6, height: 6, borderRadius: '50%',
                  background: 'var(--gi-amber)', display: 'inline-block',
                }} />
                593 kW · COMMERCIAL OPERATION
              </div>
            </div>

            {/* Slide caption (bottom) */}
            {/* <div style={{
              position: 'absolute', left: 0, right: 0, bottom: 0,
              padding: '36px 24px 18px',
              background: 'linear-gradient(to top, rgba(15,33,51,0.85), transparent)',
              color: '#fff',
              fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.14em',
              textTransform: 'uppercase', fontWeight: 500,
              display: 'flex', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap',
              zIndex: 2,
            }}>
              <span style={{ color: 'var(--gi-amber)' }}>{slide.label}</span>
              <span style={{ color: 'rgba(255,255,255,0.82)' }}>{slide.caption}</span>
            </div> */}

            {/* Prev / Next */}
            <button onClick={() => go(slideIdx - 1)} aria-label="Previous photo" style={{
              position: 'absolute', left: 18, top: '50%', transform: 'translateY(-50%)',
              width: 44, height: 44, border: '1px solid rgba(255,255,255,0.45)',
              background: 'rgba(15,33,51,0.55)', color: '#fff',
              cursor: 'pointer', fontSize: 18, lineHeight: 1,
              display: 'grid', placeItems: 'center', zIndex: 3,
            }}>‹</button>
            <button onClick={() => go(slideIdx + 1)} aria-label="Next photo" style={{
              position: 'absolute', right: 18, top: '50%', transform: 'translateY(-50%)',
              width: 44, height: 44, border: '1px solid rgba(255,255,255,0.45)',
              background: 'rgba(15,33,51,0.55)', color: '#fff',
              cursor: 'pointer', fontSize: 18, lineHeight: 1,
              display: 'grid', placeItems: 'center', zIndex: 3,
            }}>›</button>
          </div>

          {/* Thumbnail strip */}
          <div data-gi-resp="fnb-slider-tabs" style={{
            display: 'flex', gap: 0, borderTop: '1px solid rgba(255,255,255,0.14)',
            background: 'var(--gi-wise-blue)',
          }}>
            {slides.map((s, i) => (
              <button key={i} onClick={() => setSlideIdx(i)}
                aria-label={'View ' + s.label}
                aria-current={i === slideIdx ? 'true' : 'false'}
                style={{
                  flex: 1,
                  padding: '14px 14px',
                  background: i === slideIdx ? 'rgba(255,255,255,0.08)' : 'transparent',
                  border: 'none',
                  borderRight: i < slides.length - 1 ? '1px solid rgba(255,255,255,0.14)' : 'none',
                  borderTop: i === slideIdx ? '2px solid var(--gi-amber)' : '2px solid transparent',
                  cursor: 'pointer',
                  display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 6,
                  fontFamily: 'var(--ff-mono)', textAlign: 'left',
                  color: i === slideIdx ? '#fff' : 'rgba(255,255,255,0.55)',
                  transition: 'all 220ms cubic-bezier(.2,0,0,1)',
                }}>
                <span style={{
                  fontSize: 11.5, letterSpacing: '0.10em',
                  textTransform: 'uppercase',
                }}>{s.label.split(' · ')[1] || s.label}</span>
              </button>
            ))}
          </div>
        </div>

        {/* Results */}
        <div style={{ marginTop: 48 }}>
          <div style={{
            fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.16em',
            textTransform: 'uppercase', color: '#5E8F6D', fontWeight: 500,
            marginBottom: 28,
          }}>Project results</div>

          <div data-gi-reveal-stagger data-gi-resp="fnb-stats" style={{
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
            borderTop: '1px solid rgba(15,33,51,0.18)',
            borderBottom: '1px solid rgba(15,33,51,0.18)',
          }}>
            {stats.map((s, i) => (
              <div className="mfg-stats-item" key={s.label} style={{
                padding: '40px 28px 40px 0',
                paddingLeft: i > 0 ? 28 : 0,
                borderRight: i < stats.length - 1 ? '1px solid rgba(15,33,51,0.14)' : 'none',
              }}>
                <div style={{
                  font: '500 48px/1 var(--ff-sans)', letterSpacing: '-0.030em',
                  color: 'var(--gi-deep-ink)', marginBottom: 18,
                }}>{s.big}</div>
                <div style={{
                  font: '500 14px/20px var(--ff-sans)', color: 'var(--gi-deep-ink)',
                  marginBottom: 4, letterSpacing: '-0.005em',
                }}>{s.label}</div>
                <div style={{
                  font: '400 13px/20px var(--ff-sans)',
                  color: 'var(--gi-slate)', textWrap: 'pretty', maxWidth: 240,
                }}>{s.sub}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Spec + Also-in-sector */}
        <div data-gi-resp="fnb-spec-split" style={{
          marginTop: 64,
          display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 64,
          alignItems: 'start',
        }}>
          <div style={{
            border: '1px solid rgba(15,33,51,0.18)',
            background: 'var(--gi-paper-cream)',
            padding: '36px 36px 24px',
          }}>
            <div style={{
              fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.16em',
              textTransform: 'uppercase', color: 'var(--gi-sage-accent)', fontWeight: 500,
              marginBottom: 24,
            }}>System details · Sunny Crunch Foods</div>
            <dl style={{ margin: 0, padding: 0 }}>
              {spec.map((s, i) => (
                <div key={s.l} data-gi-resp="fnb-spec-row" style={{
                  display: 'grid', gridTemplateColumns: '160px 1fr', gap: 24,
                  padding: '14px 0',
                  borderTop: i === 0 ? '1px solid rgba(15,33,51,0.14)' : 'none',
                  borderBottom: '1px solid rgba(15,33,51,0.14)',
                }}>
                  <dt style={{
                    fontFamily: 'var(--ff-mono)', fontSize: 10.5, letterSpacing: '0.16em',
                    textTransform: 'uppercase', color: 'var(--gi-graphite)', fontWeight: 500,
                    paddingTop: 3,
                  }}>{s.l}</dt>
                  <dd style={{
                    margin: 0, font: '400 15px/22px var(--ff-sans)', color: 'var(--gi-deep-ink)',
                  }}>{s.v}</dd>
                </div>
              ))}
            </dl>

            <div style={{ marginTop: 28 }}>
              <Button variant="primary" size="md" href="/projects/sunny-crunch-foods">View full project breakdown →</Button>
            </div>
          </div>

          <div>
            <div style={{
              fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.16em',
              textTransform: 'uppercase', color: '#5E8F6D', fontWeight: 500,
              marginBottom: 24,
            }}>Also in this sector</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
              {also.map((p, i) => (
                <li key={p.name} style={{
                  padding: '20px 0',
                  borderTop: i === 0 ? '1px solid rgba(15,33,51,0.18)' : 'none',
                  borderBottom: '1px solid rgba(15,33,51,0.18)',
                }}>
                  <div style={{
                    font: '500 18px/24px var(--ff-sans)', letterSpacing: '-0.010em',
                    color: 'var(--gi-deep-ink)', marginBottom: 4,
                  }}>{p.name}</div>
                  <div style={{
                    font: '400 13px/20px var(--ff-sans)', color: 'var(--gi-slate)',
                    marginBottom: 10,
                  }}>{p.loc}</div>
                  <div style={{
                    fontFamily: 'var(--ff-mono)', fontSize: 10.5, letterSpacing: '0.12em',
                    textTransform: 'uppercase', color: 'var(--gi-sage-accent)', fontWeight: 500,
                    display: 'flex', flexWrap: 'wrap', gap: '6px 16px',
                  }}>
                    <span>{p.size}</span>
                    <span style={{ color: 'rgba(15,33,51,0.30)' }}>·</span>
                    <span>{p.off}</span>
                    <span style={{ color: 'rgba(15,33,51,0.30)' }}>·</span>
                    <span style={{ color: 'var(--gi-graphite)' }}>{p.com}</span>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
};


// ============================================================
// FnbDiscovery — Our Discovery Process. 3 steps.
// Paper Cream. Headline left, paragraph right; then 3 step blocks.
// ============================================================
const FnbDiscovery = () => {
  const step02bullets = [
    'demand-charge exposure',
    'operating load profile',
    'refrigeration-driven consumption',
    'seasonal usage trends',
    'potential solar and storage economics',
  ];

  return (
    <section data-screen-label="06 Our Discovery Process" data-gi-resp="fnb-discovery" 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 className="gi-section-head" style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 80
        }}>
          <div>
            <div style={{ marginBottom: 22 }}>
              <span className="gi-eyebrow gi-eyebrow--green">Our discovery process</span>
            </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 conversation.{' '}
              <span style={{ color: 'var(--gi-sage-accent)', fontStyle: 'italic', fontWeight: 400 }}>
              We’ll help identify what’s worth exploring.
              </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 food manufacturing 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
            opportunities exist.
          </p>
        </div>

        <div data-gi-reveal-stagger data-gi-resp="fnb-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, operating schedule, refrigeration profile,
              production constraints, and current energy concerns.
            </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',
            }}>Receive a facility opportunity overview.</h3>
            <p style={{
              font: '400 15px/24px var(--ff-sans)',
              color: 'var(--gi-slate)', margin: 0, textWrap: 'pretty',
            }}>
              We provide high-level insight into where solar, storage, lighting, electrical
              upgrades, or energy audits may create operational and financial value.
            </p>
          </article>
        </div>

        <div data-gi-resp="fnb-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>
  );
};

// ============================================================
// FnbHeroCover — full-bleed facility photo that sits directly under the hero.
// Paper Cream surround. FIG · 01 caption rail above, image with corner ticks,
// inset datasheet plate naming the reference facility.
// ============================================================
const FnbHeroCover = () => (
  <section data-screen-label="02 Hero cover" style={{
    background: 'var(--gi-paper-cream)', position: 'relative',
  }}>
    <div data-gi-resp="container" style={{
      position: 'relative', maxWidth: 1440, margin: '0 auto',
      padding: '0 48px',
    }}>
      

      <div data-gi-reveal style={{ position: 'relative', overflow: 'hidden', height: 520 }}>
        <img
          src={`${window.GI_BASE}assets/projects/rabba-fine-foods/rabba-fine-foods.webp`}
          alt="Aerial view of expansive rooftop solar installation on a Rabba Fine Foods distribution facility in Mississauga, Ontario"
          style={{
            width: '100%', height: '100%', objectFit: 'cover',
            objectPosition: 'center 35%',
            display: 'block',
          }}
        />

        {/* Corner ticks */}
        {[
          { top: 12, left: 12 },
          { top: 12, right: 12 },
          { bottom: 12, left: 12 },
          { bottom: 12, right: 12 },
        ].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: 18, height: 18,
            borderTop:    c.top    != null ? '1.5px solid rgba(255,255,255,0.78)' : 'none',
            borderBottom: c.bottom != null ? '1.5px solid rgba(255,255,255,0.78)' : 'none',
            borderLeft:   c.left   != null ? '1.5px solid rgba(255,255,255,0.78)' : 'none',
            borderRight:  c.right  != null ? '1.5px solid rgba(255,255,255,0.78)' : 'none',
          }} />
        ))}

        {/* Bottom-left datasheet plate */}
        <div style={{
          position: 'absolute', left: 24, bottom: 24,
          display: 'inline-flex', flexDirection: 'column', gap: 2,
        }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '8px 12px',
            background: 'var(--gi-wise-blue)',
            fontFamily: 'var(--ff-mono)', fontSize: 10.5, letterSpacing: '0.14em',
            color: '#fff', fontWeight: 500, textTransform: 'uppercase',
          }}>
            <span aria-hidden="true" style={{
              width: 6, height: 6, background: 'var(--gi-amber)', display: 'inline-block',
            }} />
            <span>Rabba Fine Foods · 1,270 kW · Mississauga ON</span>
          </div>
        </div>
      </div>
    </div>
  </section>
);


Object.assign(window, {
  FnbHeroV2, FnbHeroCover, FnbReality, FnbIncentivesV2,
  FnbSolutionsV2, FnbCaseStudyV2, FnbDiscovery
});