// fnb-solutions-cream.jsx
// Cream variant of the "Solutions for this sector" section.
// 5 rows · Paper Cream surface · sits between a Wise Blue section (above)
// and a Paper White section (below).

// ============================================================
// FnbSolutionsCream — 5-row interactive solutions table on cream.
// 01 Energy Audits · 02 LED · 03 Solar PV · 04 Battery · 05 Electrical Infra
// ============================================================
const FnbSolutionsCream = () => {
  const rows = [
    { idx: '01', icon: 'clipboard-list',   name: 'Energy Audits',          zone: 'Whole facility',  tag: "Identify what's driving consumption.",        why: 'Facility energy audits establish where electricity is being consumed, what systems drive demand charges, and which upgrades create the strongest operational and financial impact.', href: '/solutions/energy-audits/' },
    { idx: '02', icon: 'lightbulb',        name: 'LED Lighting',           zone: 'Production · cold',tag: 'Reduce baseline demand.',                     why: 'LED retrofits reduce lighting load immediately while improving illumination levels in production, warehousing, and refrigerated environments.', href: '/solutions/led-lighting/' },
    { idx: '03', icon: 'sun',              name: 'Solar PV',               zone: 'Rooftop',         tag: 'Offset daytime production demand.',           why: 'Large rooftops and continuous daytime operation make many food facilities strong candidates for rooftop solar generation.', href: '/solutions/commercial-solar/' },
    { idx: '04', icon: 'battery-charging', name: 'Battery Storage',        zone: 'Mechanical pad',  tag: 'Manage refrigeration-driven demand peaks.',    why: 'Battery storage helps reduce demand charges by supplementing refrigeration and processing loads during peak utility intervals.', href: '/solutions/battery-storage/' },
    // GI Link Audit (Fix 4): Electrical Infrastructure has no dedicated service page;
    // routes to /about/contact/ for tailored scoping (consistent with fnb-v2.jsx).
    { idx: '05', icon: 'plug-zap',         name: 'Electrical Infrastructure', zone: 'Service · distribution', tag: 'Build around future capacity.', why: 'Service upgrades, distribution planning, and electrical coordination ensure the facility can support future expansion, storage, and electrification.', href: '/about/contact/' },
  ];

  const [active, setActive] = React.useState(0);

  return (
    <section data-gi-resp="fnb-solutions-cream" style={{
      background: 'var(--gi-soft-green)',
      color: 'var(--gi-paper-white)',
      padding: '128px 0',
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* Hairline ticks at the top — visual handshake with the dark blue section above */}
      <span aria-hidden="true" style={{
        position: 'absolute', top: 0, left: 48, width: 64, height: 2,
        background: 'var(--gi-amber)',
      }} />

      <div data-gi-resp="container" style={{ position: 'relative', zIndex: 1, maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
        <div data-gi-reveal data-gi-resp="fnb-sol-head" style={{
          display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 96,
          alignItems: 'end', marginBottom: 64,
          justifyItems: 'flex-end'
        }}>
          <div>
            <div style={{ marginBottom: 22 }}>
              <Eyebrow className="gi-eyebrow--gold">Solutions for this sector</Eyebrow>
            </div>
            <h2 style={{
              font: '500 48px/54px var(--ff-sans)', letterSpacing: '-0.026em',
              color: 'var(--gi-paper-white)', margin: 0, textWrap: 'balance', maxWidth: 760,
            }}>What food &amp; beverage projects typically involve.</h2>
          </div>
          <p style={{
            font: '400 16px/26px var(--ff-sans)',
            color: 'rgba(255,255,255,0.72)', margin: 0, maxWidth: 480, paddingBottom: 6, textWrap: 'pretty',
          }}>
            A complete F&amp;B program moves from understanding consumption, to reducing baseline
            load, to generating on-site, to managing demand peaks — with electrical infrastructure
            built around future capacity.
          </p>
        </div>

        <div data-gi-reveal data-gi-resp="fnb-sol-body" style={{
          display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 56,
          alignItems: 'stretch',
        }}>

          {/* LEFT — facility schematic on soft green */}
          <div style={{
            background: 'transparent',
            border: '1px solid rgba(255,255,255,0.18)',
            padding: '32px 36px 28px',
            display: 'flex', flexDirection: 'column',
            alignSelf: 'stretch',
          }}>
            <div style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
              marginBottom: 24,
            }}>
              <div style={{
                fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.18em',
                textTransform: 'uppercase', color: 'var(--gi-amber-soft)', fontWeight: 500,
              }}>INTEGRTED ENERGY SYSTEMS</div>

            </div>

            <div style={{
              flex: 1,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              padding: '8px 0',
            }}>
              <FnbFacilitySchematicCream activeIndex={active} services={rows} />
            </div>

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

          {/* RIGHT — service list */}
          <div style={{ display: 'flex', flexDirection: 'column', alignSelf: 'stretch' }}>
            {rows.map((r, i) => {
              const isActive = active === i;
              return (
                <a
                  key={r.name}
                  data-gi-resp="fnb-sol-row"
                  href={r.href}
                  onMouseEnter={() => setActive(i)}
                  onFocus={() => setActive(i)}
                  onClick={() => setActive(i)}
                  style={{
                    display: 'grid',
                    flex: 1,
                    gridTemplateColumns: '44px 48px 1fr 24px',
                    gap: 18, alignItems: 'center',
                    padding: '22px 4px 22px 14px',
                    borderTop: i === 0 ? '1px solid rgba(255,255,255,0.18)' : 'none',
                    borderBottom: '1px solid rgba(255,255,255,0.18)',
                    position: 'relative',
                    transition: 'background 220ms cubic-bezier(.2,0,0,1)',
                    background: isActive ? 'rgba(233,199,134,0.10)' : 'transparent',
                    cursor: 'pointer',
                    color: 'inherit',
                    borderRadius: 0,
                  }}>
                  <span aria-hidden="true" style={{
                    position: 'absolute', left: 0, top: 0, bottom: 0, width: 2,
                    background: 'var(--gi-amber)',
                    opacity: isActive ? 1 : 0,
                    transition: 'opacity 220ms cubic-bezier(.2,0,0,1)',
                  }} />

                  <div style={{
                    fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.18em',
                    textTransform: 'uppercase', fontWeight: 600,
                    color: isActive ? 'var(--gi-amber-soft)' : 'rgba(255,255,255,0.55)',
                    paddingTop: 6, transition: 'color 220ms',
                  }}>{r.idx}</div>

                  <div style={{
                    width: 44, height: 44,
                    border: `1px solid ${isActive ? 'var(--gi-amber-soft)' : 'rgba(255,255,255,0.28)'}`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    background: isActive ? 'rgba(233,199,134,0.14)' : 'transparent',
                    transition: 'background 220ms cubic-bezier(.2,0,0,1), border-color 220ms',
                  }}>
                    <i data-lucide={r.icon} style={{
                      width: 22, height: 22, strokeWidth: 1.4,
                      color: isActive ? 'var(--gi-amber-soft)' : 'rgba(255,255,255,0.78)',
                    }} />
                  </div>

                  <div style={{ minWidth: 0 }}>
                    <div style={{
                      display: 'flex', alignItems: 'baseline',
                      columnGap: 14, rowGap: 4,
                      marginBottom: 6, flexWrap: 'wrap',
                    }}>
                      <h3 style={{
                        font: '500 21px/26px var(--ff-sans)', letterSpacing: '-0.014em',
                        color: 'var(--gi-paper-white)', margin: 0, whiteSpace: 'nowrap',
                      }}>{r.name}</h3>
                      <span style={{
                        font: '500 13px/20px var(--ff-sans)', letterSpacing: '-0.005em',
                        color: 'rgba(255,255,255,0.62)', whiteSpace: 'nowrap', fontStyle: 'italic',
                      }}>— {r.tag}</span>
                    </div>
                    <p style={{
                      font: '400 14px/22px var(--ff-sans)',
                      color: 'rgba(255,255,255,0.72)', margin: 0, textWrap: 'pretty',
                      maxWidth: 540,
                    }}>{r.why}</p>
                  </div>

                  <span aria-hidden="true" style={{
                    fontFamily: 'var(--ff-mono)', fontSize: 18,
                    color: isActive ? 'var(--gi-amber-soft)' : 'rgba(255,255,255,0.40)',
                    paddingTop: 4,
                    transform: isActive ? 'translateX(2px)' : 'translateX(0)',
                    transition: 'transform 220ms cubic-bezier(.2,0,0,1), color 220ms',
                  }}>→</span>
                </a>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
};

// ============================================================
// FnbFacilitySchematicCream — schematic redrawn for cream surface.
// 5 zones now: 01 Audit ring · 02 LED · 03 Solar · 04 BESS · 05 Electrical room
// ============================================================
const FnbFacilitySchematicCream = ({ activeIndex }) => {
  const W = 540;
  const H = 360;
  // On soft-green surface: amber stays for highlight, all other strokes/text become white-on-green.
  const amber    = 'rgba(233,199,134,1)';   /* --gi-amber-soft for legibility on dark */
  const amberFill= 'rgba(233,199,134,0.18)';
  const ink      = 'rgba(255,255,255,0.55)';
  const inkDim   = 'rgba(255,255,255,0.32)';
  const inkFaint = 'rgba(255,255,255,0.18)';
  const inkText  = 'rgba(255,255,255,0.62)';

  const zones = [
    // 01 Energy Audits — whole facility ring
    { id: 0, label: '01', cx: 270, cy: 200,
      hl: <rect x="80" y="120" width="380" height="160" fill="none" stroke={amber} strokeWidth="1.5" strokeDasharray="4 5" /> },
    // 02 LED Lighting — production floor ceiling band
    { id: 1, label: '02', cx: 250, cy: 134,
      hl: <rect x="92" y="124" width="246" height="22" fill={amberFill} stroke={amber} strokeWidth="1.5" /> },
    // 03 Solar PV — rooftop
    { id: 2, label: '03', cx: 270, cy: 96,
      hl: <rect x="80" y="78" width="380" height="40" fill="none" stroke={amber} strokeWidth="1.5" /> },
    // 04 Battery — BESS pad
    { id: 3, label: '04', cx: 502, cy: 244,
      hl: <rect x="468" y="220" width="68" height="62" fill={amberFill} stroke={amber} strokeWidth="1.5" /> },
    // 05 Electrical Infrastructure — service entrance / switchgear
    { id: 4, label: '05', cx: 110, cy: 246,
      hl: <rect x="88" y="222" width="46" height="58" fill={amberFill} stroke={amber} strokeWidth="1.5" /> },
  ];

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

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

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

        {/* COLD STORAGE BLOCK — permanent feature */}
        <line x1="340" y1="148" x2="340" y2="282" stroke={inkDim} strokeWidth="1" />
        <text x="400" y="200" textAnchor="middle"
          fontFamily="ui-monospace, monospace" fontSize="9" fill={inkText}
          letterSpacing="1.4">COLD STORAGE</text>
        {[350, 370, 390, 410, 430].map(x => (
          <line key={`fin${x}`} x1={x} y1="156" x2={x} y2="172" stroke={inkDim} strokeWidth="0.75" />
        ))}
        <rect x="356" y="158" width="24" height="6" fill="none" stroke={inkDim} strokeWidth="0.75" />
        <rect x="396" y="158" width="24" height="6" fill="none" stroke={inkDim} strokeWidth="0.75" />

        {/* Roof solar panels — Solar PV zone (03)
            Drawn as thin side-profile cross-sections sitting on small
            standoff legs above the pitched roof. Each panel is a thin
            rectangle (the panel's edge as seen from the side), tilted
            parallel to the roof slope, with two short legs to the deck. */}
        <g opacity={activeIndex === 2 ? 1 : 0.65}>
          {(() => {
            const panelLen   = 26;   // panel length seen edge-on
            const panelThick = 2;    // panel thickness (very thin)
            const legH       = 5;    // standoff height above roof
            const slope = 40 / 190;  // rise/run from eave to peak
            const angleDeg = Math.atan(slope) * 180 / Math.PI;
            const positions = [];
            for (let i = 0; i < 5; i++) {
              const cx = 110 + i * 30;
              const roofY = 118 - (cx - 80) * slope;
              positions.push({ cx, roofY, angle: -angleDeg, key: `L${i}` });
            }
            for (let i = 0; i < 5; i++) {
              const cx = 310 + i * 30;
              const roofY = 78 + (cx - 270) * slope;
              positions.push({ cx, roofY, angle: angleDeg, key: `R${i}` });
            }
            const panelStroke = activeIndex === 2 ? amber : ink;
            const panelFill   = activeIndex === 2 ? amber : ink;
            const legStroke   = activeIndex === 2 ? amber : inkDim;
            return positions.map(({ cx, roofY, angle, key }) => {
              const x0 = cx - panelLen / 2;
              const x1 = cx + panelLen / 2;
              const yPanelTop = roofY - legH - panelThick;
              const yLegTop = roofY - legH;
              const legInset = 4;
              return (
                <g key={key} transform={`rotate(${angle} ${cx} ${roofY})`}>
                  {/* Two standoff legs */}
                  <line x1={x0 + legInset} y1={yLegTop}
                        x2={x0 + legInset} y2={roofY}
                        stroke={legStroke} strokeWidth="0.9" />
                  <line x1={x1 - legInset} y1={yLegTop}
                        x2={x1 - legInset} y2={roofY}
                        stroke={legStroke} strokeWidth="0.9" />
                  {/* Panel — thin side-profile bar */}
                  <rect x={x0} y={yPanelTop}
                        width={panelLen} height={panelThick}
                        fill={panelFill} stroke={panelStroke} strokeWidth="0.6" />
                </g>
              );
            });
          })()}
        </g>

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

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

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

        {/* Electrical service room — Electrical Infrastructure (05) */}
        <g opacity={activeIndex === 4 ? 1 : 0.55}>
          {/* service entrance box on left exterior */}
          <rect x="92" y="226" width="36" height="54"
            fill={activeIndex === 4 ? amberFill : 'transparent'}
            stroke={activeIndex === 4 ? amber : ink} strokeWidth="1" />
          {/* meter rectangles */}
          <rect x="98" y="232" width="10" height="8"
            fill="none" stroke={activeIndex === 4 ? amber : ink} strokeWidth="0.75" />
          <rect x="112" y="232" width="10" height="8"
            fill="none" stroke={activeIndex === 4 ? amber : ink} strokeWidth="0.75" />
          {/* switchgear breakers row */}
          {[0,1,2,3].map(i => (
            <line key={`br${i}`} x1={98} y1={250 + i*6} x2={122} y2={250 + i*6}
              stroke={activeIndex === 4 ? amber : ink} strokeWidth="0.75" />
          ))}
          {/* mast / utility pole connection (drop from above the line) */}
          <line x1="60" y1="118" x2="60" y2="226" stroke={activeIndex === 4 ? amber : inkDim} strokeWidth="0.75" strokeDasharray="2 3" />
          <line x1="60" y1="226" x2="92" y2="240" stroke={activeIndex === 4 ? amber : inkDim} strokeWidth="0.75" strokeDasharray="2 3" />
          <text x="110" y="220" textAnchor="middle"
            fontFamily="ui-monospace, monospace" fontSize="9"
            fill={activeIndex === 4 ? amber : inkText}
            letterSpacing="1.4">SERVICE</text>
        </g>

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

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

        {zones.map((z, i) => {
          const isActive = i === activeIndex;
          return (
            <g key={z.id}>
              <circle cx={z.cx} cy={z.cy} r={isActive ? 13 : 11}
                fill={isActive ? amber : 'var(--gi-soft-green, #375844)'}
                stroke={isActive ? amber : 'rgba(255,255,255,0.78)'} strokeWidth="1.25" />
              <text x={z.cx} y={z.cy + 3} textAnchor="middle"
                fontFamily="ui-monospace, monospace" fontSize="10" fontWeight="600"
                letterSpacing="0.5"
                fill={isActive ? '#375844' : 'rgba(255,255,255,0.92)'}>
                {z.label}
              </text>
            </g>
          );
        })}
      </svg>
    </div>
  );
};

Object.assign(window, { FnbSolutionsCream, FnbFacilitySchematicCream });