// ============================================================
// FnbSectors — Six F&B sub-sectors section · Paper Cream
// Sits between FnbCaseStudyV2 (05 Featured Project) and FnbDiscovery (06 Our Discovery Process).
//
// Converted from design source: "Industries F&B Section.html" (May 2026).
// The design HTML included a dev "Tweaks" panel that toggled layout/imagery/
// header treatments. The TWEAK_DEFAULTS represented the designer's final
// production choices:
//
//   layout:        "grid"   (3-column tile grid)
//   imgTreatment:  "mono"   (mono → color on hover)
//   showStamp:     true     (sector label badge over each photo)
//   showIndexRail: false    (the "01 Cold storage / 02 Processing / ..." top rail is hidden)
//   accentHeadline:true     (italic-serif "One energy approach." accent in green)
//
// If you want a different look later, edit the SECTOR_CONFIG flags below or
// adjust the relevant CSS in inline/style.html (all rules prefixed .fbsec-).
// All CSS for this section is namespaced under .fbsec-section so it does not
// leak into other parts of the F&B page.
// ============================================================

const SECTOR_CONFIG = {
  imgTreatment:   'mono',   // 'color' | 'duotone' | 'mono'
  showStamp:      true,
  showIndexRail:  false,
  accentHeadline: true,
};

// ---------- 6 sub-sectors data ----------
// Photos are external Unsplash URLs (placeholders). Replace with real GI
// project photography when available — each tile auto-falls back to the
// solid `fallback` color + alt text label if the image URL 404s.
const FNB_SECTORS = [
  {
    n: '01',
    title: 'Cold Storage',
    stamp: 'Continuous load · 24/7',
    desc:  "Continuous refrigeration creates stable, high electrical demand profiles with significant exposure to demand charges. Solar and storage can offset daytime load and reduce peak demand events.",
    tags:  ['Solar', 'Battery Storage', 'Demand Management'],
    img:   `${window.GI_BASE}assets/industries/cold_storage_logistics.webp`,
    fallback: '#1f3a4d',
    label: 'Cold storage facility',
  },
  {
    n: '02',
    title: 'Food Processing Facilities',
    stamp: 'Sequenced uptime',
    desc:  "Production schedules, sanitation windows, and process equipment require carefully sequenced upgrades. Lighting, electrical, and solar projects are planned around uptime requirements.",
    tags:  ['LED Lighting', 'Solar', 'Electrical Upgrades'],
    img:   `${window.GI_BASE}assets/industries/food_processing_facilities.webp`,
    fallback: '#2b3a2a',
    label: 'Food processing line',
  },
  {
    n: '03',
    title: 'Beverage Manufacturing',
    stamp: 'Rooftop ready',
    desc:  "Large roof areas and daytime production loads make beverage facilities strong candidates for rooftop solar and electrical infrastructure improvements.",
    tags:  ['Commercial Solar', 'Main Service Upgrades'],
    img:   `${window.GI_BASE}assets/industries/beverage_manufacturing.jpeg`,
    fallback: '#3a3024',
    label: 'Beverage bottling line',
  },
  {
    n: '04',
    title: 'Meat & Protein Processing',
    stamp: 'Cold-chain critical',
    desc:  "Cold-chain reliability, ventilation systems, and continuous processing loads make operational continuity critical. Energy projects must align with food-safety and production requirements.",
    tags:  ['Battery Storage', 'Electrical Infrastructure', 'O&M'],
    img:   `${window.GI_BASE}assets/industries/meat_protein_processing.webp`,
    fallback: '#3d2828',
    label: 'Protein processing facility',
  },
  {
    n: '05',
    title: 'Food Distribution & Logistics',
    stamp: 'High runtime hours',
    desc:  "Warehousing and refrigerated logistics operations typically operate with long runtime hours and large lighting loads, creating strong ROI opportunities for LED retrofits and solar generation.",
    tags:  ['LED Lighting', 'Solar', 'EV Infrastructure'],
    img:   'https://images.unsplash.com/photo-1553413077-190dd305871c?w=1200&q=80&auto=format&fit=crop',
    fallback: '#26303b',
    label: 'Distribution warehouse',
  },
  {
    n: '06',
    title: 'Retail Food Operations',
    stamp: 'Portfolio scale',
    desc:  "Multi-site operators benefit from standardized lighting upgrades, portfolio-wide energy assessments, and scalable rooftop solar planning.",
    tags:  ['LED Retrofits', 'Portfolio Assessments'],
    img:   'https://images.unsplash.com/photo-1604719312566-8912e9227c6a?w=1200&q=80&auto=format&fit=crop',
    fallback: '#2a3a2e',
    label: 'Retail grocery operations',
  },
];

// ---------- Tile component ----------
const FnbSectorTile = ({ s, i, observerRef }) => {
  const tileRef = React.useRef(null);

  React.useEffect(() => {
    const node = tileRef.current;
    if (!node || !observerRef.current) return;
    observerRef.current.observe(node);
    return () => observerRef.current && observerRef.current.unobserve(node);
  }, [observerRef]);

  // onError handler — replace broken <img> with a coloured fallback box
  const handleImgError = (e) => {
    const fb = document.createElement('div');
    fb.className = 'fbsec-fallback';
    fb.innerHTML = '<span>' + s.label + '</span>';
    e.target.replaceWith(fb);
  };

  return (
    <article
      ref={tileRef}
      className="fbsec-tile"
      data-i={i}
      style={{ '--fbsec-fb': s.fallback }}
    >
      <div className="fbsec-frame" style={{ background: s.fallback }}>
        <img src={s.img} alt={s.label} loading="lazy" onError={handleImgError} />
        <span className="fbsec-br-bl" />
        <span className="fbsec-br-br" />
        {SECTOR_CONFIG.showStamp && (
          <span className="fbsec-stamp">
            {s.stamp}
          </span>
        )}
      </div>

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

// ---------- Main section component ----------
const FnbSectors = () => {
  const observerRef = React.useRef(null);

  // IntersectionObserver for reveal-on-scroll (staggered 90ms per tile)
  React.useEffect(() => {
    observerRef.current = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            const delay = Number(e.target.dataset.i || 0) * 90;
            setTimeout(() => e.target.classList.add('fbsec-in'), delay);
            observerRef.current.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12 }
    );
    return () => observerRef.current && observerRef.current.disconnect();
  }, []);

  return (
    <section data-gi-resp="fnb-subsectors"
      className={`fbsec-section${SECTOR_CONFIG.accentHeadline ? ' fbsec-accent' : ''} fbsec-img-${SECTOR_CONFIG.imgTreatment}`}
      data-screen-label="F&B Sub-Sectors"
    >
      <div className="fbsec-page">
        {/* Header */}
        <header
          className="fbsec-head 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">Inside food &amp; beverage</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,
            }}>
              Different food operations.{' '}
              {SECTOR_CONFIG.accentHeadline ? (
                <span style={{ color: 'var(--gi-sage-accent)', fontStyle: 'italic', fontWeight: 400 }}>
                  Different energy profiles.
                </span>
              ) : (
                'Different energy profiles.'
              )}
            </h2>
          </div>
          <p style={{
            font: '400 16px/26px var(--ff-sans)',
            color: 'var(--gi-slate)', margin: 0, maxWidth: 480, paddingBottom: 6,
            textWrap: 'pretty',
          }}>
            Every food & beverage facility operates differently. Refrigerated warehouses, processing plants, beverage lines, distributors, and retail operations all carry different load profiles, operating schedules, and infrastructure requirements — which changes how energy projects are planned.
          </p>
        </header>

        {/* Index rail (hidden by default per design) */}
        {SECTOR_CONFIG.showIndexRail && (
          <nav className="fbsec-index-rail" aria-label="Sub-sectors index">
            {FNB_SECTORS.map((s) => (
              <div key={s.n} className="fbsec-tick">
                <span className="fbsec-tick-n">{s.n}</span>{s.title.split(' ').slice(0, 2).join(' ')}
              </div>
            ))}
          </nav>
        )}

        {/* Tile grid */}
        <div className="fbsec-grid">
          {FNB_SECTORS.map((s, i) => (
            <FnbSectorTile key={s.n} s={s} i={i} observerRef={observerRef} />
          ))}
        </div>

        {/* Closing rail */}
        <div className="fbsec-closing">
          <p className="fbsec-closing-copy">
            Not sure which sub-sector best describes your operation?{' '}
            <em>That's usually the right place to start a conversation.</em>{' '}
            A 20-minute call is enough to map your load profile against the right scope of work.
          </p>
          <div className="fbsec-ctas" data-gi-resp="fnb-subsectors-cta-buttons">
              <Button target="_blank" variant="outline" size="lg" href="https://zfrmz.com/Ub3c8eUalGfwZwcRscVB">Book a sector consult →</Button>

              <Button variant="primary" size="lg" href="/projects/?category=food-beverage">See all Food & Beverage projects</Button>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { FnbSectors });