/* global React */
// OurProcess: the engagement process in four steps (was HowItWorks).
//
//   1. A full-width colour band. The colour is one variable, --op-band,
//      at the top of OP_CSS below.
//   2. Compact rows, so all four steps fit on one screen. The text runs wide;
//      the image sits in a reserved zone on the right of each row, centred in
//      that zone, and does not set the row's height.
//   3. A reveal animation: rows fade up one after another as the section
//      scrolls into view, and each row's image fades in just after its text.
//      Runs once; off for reduced motion.
//
// Each step has a pixel-art image in components/ (set by bgImg below).
// Every style here is scoped to #our-process, so nothing in site.css needs
// to change. The old .hiw-dark block in site.css is no longer used.


const OP_CSS = `
#our-process {
  --op-band: #CCDDF5;                       /* band colour */
  --op-line: rgba(32, 36, 38, 0.14);        /* row dividers on the band */
  --op-zone: clamp(150px, 21vw, 400px);     /* reserved image zone on the right */
  --op-img: clamp(101px, 7.475vw, 133px);     /* image size */
  --op-title: #54585F;                      /* heading colour */
  background: var(--op-band);
  padding-top: clamp(48px, 7vh, 80px);
  padding-bottom: clamp(48px, 7vh, 80px);
}
#our-process .op-title {
  color: var(--op-title);
  font-size: clamp(1.75rem, 2.2vw, 2.125rem);   /* same size as the panel headings */
  margin: 0;
}
#our-process .wwd-list { margin-top: clamp(24px, 4vh, 40px); }
#our-process .wwd-row { border-top-color: var(--op-line); padding-top: 0; padding-bottom: 0; }
#our-process .wwd-row:last-child { border-bottom-color: var(--op-line); }
#our-process .wwd-row,
#our-process .wwd-inner,
#our-process .wwd-text { min-height: 0; height: auto; }
#our-process .wwd-inner {
  padding-top: clamp(16px, 2.6vh, 28px);
  padding-bottom: clamp(16px, 2.6vh, 28px);
}
#our-process .wwd-text {
  position: relative;
  flex: 1 1 auto;
  max-width: none;
  padding-right: var(--op-zone);
}
#our-process .wwd-text .col-head { margin-top: 0; margin-bottom: 8px; }
#our-process .wwd-text .p { margin: 0; max-width: none; }
#our-process .wwd-bg-img {
  position: absolute;
  right: calc((var(--op-zone) - var(--op-img)) / 2);
  top: 50%;
  width: var(--op-img);
  height: var(--op-img);
  margin: 0;
  transform: translateY(-50%);
  /* the PNGs are mid-grey marks; deepen them so they hold up on a coloured band */
  filter: brightness(0.45);
}
@media (max-width: 900px) {
  #our-process .wwd-text { padding-right: 0; }
  #our-process .wwd-bg-img {
    position: static;
    display: block;
    width: 74px;
    height: 74px;
    margin-top: 12px;
    transform: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  #our-process .wwd-row {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 600ms ease, transform 600ms ease;
    transition-delay: calc(var(--op-i, 0) * 130ms);
  }
  #our-process.op-in .wwd-row { opacity: 1; transform: none; }
  #our-process .wwd-bg-img {
    opacity: 0;
    transition: opacity 700ms ease;
    transition-delay: calc(var(--op-i, 0) * 130ms + 250ms);
  }
  #our-process.op-in .wwd-bg-img { opacity: 0.95; }
}
`;

function OurProcess() {
  const sectionRef = React.useRef(null);
  const [shown, setShown] = React.useState(false);

  React.useEffect(() => {
    const el = sectionRef.current;
    if (!el || typeof IntersectionObserver === 'undefined') {
      setShown(true);
      return undefined;
    }
    const io = new IntersectionObserver((entries) => {
      if (entries.some((e) => e.isIntersecting)) {
        setShown(true);
        io.disconnect();
      }
    }, { threshold: 0.2 });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  const steps = [
    {
      bgImg: 'components/pixel-layers-data.png',
      head: 'Discover.',
      body: 'Every engagement starts inside your environment, mapping how your firm actually works: your clients, your products, your advice, and the rules that govern them. We also measure how the work performs today, so there is a baseline to improve on. Nothing is built until that understanding is in place.',
    },
    {
      bgImg: 'components/pixel-tree-data.png',
      head: 'Design and build.',
      body: 'We start with a single workflow you choose: a client review, a reconciliation, a record of advice. It is designed around your data boundaries, your obligations, and the systems you already run. Once it has proven itself, the next one builds on the same foundation.',
    },
    {
      bgImg: 'components/pixel-squares-data.png',
      head: 'Prove it works.',
      body: "Each capability is tested against your firm's own cases and measured against the baseline from discovery. Your team sees exactly what it does and signs off before anything touches live work.",
    },
    {
      bgImg: 'components/pixel-blueprint-data.png',
      head: 'Govern and improve.',
      body: 'We stay on after deployment, monitoring how capabilities behave and tuning as your firm changes. New ones plug into the same secure base and build on what is already mapped, so each one is faster to deliver.',
    },
  ];

  return (
    <section ref={sectionRef} className={'section' + (shown ? ' op-in' : '')} id="our-process">
      <style>{OP_CSS}</style>
      <div className="page">
        <h2 className="h2 op-title">Our Process</h2>
        <div className="wwd-list">
          {steps.map(({ bgImg, head, body }, i) => (
            <div key={head} className="wwd-row" style={{ '--op-i': i }}>
              <span className="wwd-bar" aria-hidden="true"></span>
              <div className="wwd-inner">
                <div className="wwd-text">
                  <h3 className="col-head">{head}</h3>
                  <p className="p p-muted">{body}</p>
                  <img src={bgImg} className="wwd-bg-img" alt="" aria-hidden="true" />
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.OurProcess = OurProcess;