/* eslint-disable */
// Section 09 — ESG & Sustainability. Light. 2x2 grid w/ giant watermark numbers.
// Interactive: hover (or tap) a quadrant to bring it forward — it fills with
// deep-brown, inverts its type, and its watermark number lifts to acid-yellow.
// Same visual language as before, now responsive to the pointer.

const ESG_ITEMS = [
  {
    n: '01', title: 'Sustainable material sourcing',
    body: "Responsible procurement of FSC-certified wood, low-VOC paints, and eco-compliant adhesives. Engineering and procurement teams ensure material traceability, supplier audits, and waste optimisation through digital cut-planning and off-cut reuse systems.",
  },
  {
    n: '02', title: 'Employee welfare & training',
    body: "The workforce operates under structured training programs covering equipment safety, material handling, and process efficiency. Regular safety drills, ergonomic workspace design, and continuous upskilling in CNC operation, finishing, and quality control are part of standard factory protocols.",
  },
  {
    n: '03', title: 'Work environment & performance',
    body: "All teams are trained to perform under high-volume production timelines while maintaining precision and quality. The facility is equipped for both handcrafted detailing on bespoke projects and high-capacity production lines for bulk manufacturing.",
  },
  {
    n: '04', title: 'Health & safety compliance',
    body: "Strict HSE standards including PPE usage, ventilation control, noise reduction, and fire-safety systems. Routine inspections and maintenance schedules are managed through internal audits to comply with Saudi labour and industrial safety regulations.",
  },
];

const EsgCell = ({ it, i, active, onActivate }) => {
  const col = i % 2;
  const row = Math.floor(i / 2);
  return (
    <div
      onMouseEnter={() => onActivate(i)}
      onFocus={() => onActivate(i)}
      onClick={() => onActivate(i)}
      tabIndex={0}
      role="button"
      aria-pressed={active}
      className="uc-esg-cell"
      style={{
        position: 'relative',
        padding: '56px 64px 64px',
        minHeight: 320,
        borderRight: col === 0 ? '1px solid rgba(9,11,10,0.15)' : 'none',
        borderBottom: row === 0 ? '1px solid rgba(9,11,10,0.15)' : 'none',
        overflow: 'hidden',
        cursor: 'pointer',
        outline: 'none',
        background: active ? 'var(--color-deep-brown)' : 'transparent',
        transition: 'background 460ms var(--ease-craft), opacity 700ms var(--ease-craft), transform 700ms var(--ease-craft)',
      }}
    >
      {/* top accent bar */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 3,
        background: 'var(--color-acid-yellow)',
        transform: active ? 'scaleX(1)' : 'scaleX(0)',
        transformOrigin: 'left center',
        transition: 'transform 520ms var(--ease-craft)',
      }} />

      {/* giant watermark number */}
      <div style={{
        position: 'absolute',
        right: active ? 4 : -8, bottom: active ? -28 : -36,
        fontFamily: 'var(--font-display)',
        fontWeight: 800,
        fontSize: 'clamp(180px, 22vw, 280px)',
        lineHeight: 0.85, letterSpacing: '-0.06em',
        color: active ? 'var(--color-acid-yellow)' : 'var(--color-deep-brown)',
        opacity: active ? 0.22 : 0.07,
        pointerEvents: 'none',
        transition: 'color 460ms var(--ease-craft), opacity 460ms var(--ease-craft), right 600ms var(--ease-craft), bottom 600ms var(--ease-craft)',
      }}>{it.n}</div>

      <div style={{
        fontFamily: 'var(--font-display)',
        fontWeight: 700,
        fontSize: 13,
        letterSpacing: '0.06em', textTransform: 'none',
        color: active ? 'rgba(253,254,120,0.85)' : 'rgba(9,11,10,0.5)',
        marginBottom: 24,
        transition: 'color 460ms var(--ease-craft)',
        position: 'relative',
      }}>{it.n}</div>

      <h3 style={{
        fontFamily: 'var(--font-display)',
        fontWeight: 700,
        fontSize: 22, lineHeight: 1.18,
        letterSpacing: '-0.015em',
        textTransform: 'none',
        color: active ? 'var(--color-acid-yellow)' : 'var(--color-deep-brown)',
        margin: '0 0 20px',
        position: 'relative',
        transition: 'color 460ms var(--ease-craft)',
      }}>{it.title}</h3>

      <p style={{
        fontFamily: 'var(--font-body)',
        fontSize: 14, lineHeight: 1.75,
        margin: 0, maxWidth: '52ch',
        color: active ? 'rgba(229,229,222,0.86)' : 'rgba(9,11,10,0.85)',
        position: 'relative',
        transition: 'color 460ms var(--ease-craft)',
      }}>{it.body}</p>
    </div>
  );
};

const Esg = () => {
  const [active, setActive] = React.useState(0);
  return (
    <section
      data-screen-label="09 esg"
      style={{
        background: 'var(--color-off-white)',
        color: 'var(--color-near-black)',
        padding: '120px 0',
      }}
    >
      <div className="uc-shell">
        <Reveal>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 24, marginBottom: 56 }}>
            <div className="uc-eyebrow">ESG & sustainability practices</div>
            <div style={{ flex: 1, height: 1, background: 'rgba(9,11,10,0.18)', marginTop: 9 }} />
            <div className="uc-eyebrow">Vision 2030 aligned</div>
          </div>
          <h2 style={{
            fontFamily: 'var(--font-display)',
            fontWeight: 700,
            fontSize: 'clamp(40px, 5.4vw, 72px)',
            lineHeight: 0.98,
            letterSpacing: '-0.03em',
            textTransform: 'none',
            margin: '0 0 80px',
            maxWidth: '18ch',
          }}>Responsibility, built <span className="uc-bracket">in</span>.</h2>
        </Reveal>

        <Reveal stagger>
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(2, 1fr)',
            gridTemplateRows: 'repeat(2, 1fr)',
            border: '1px solid rgba(9,11,10,0.15)',
          }}>
            {ESG_ITEMS.map((it, i) => (
              <EsgCell
                key={it.n}
                it={it}
                i={i}
                active={active === i}
                onActivate={setActive}
              />
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
};

Object.assign(window, { Esg });