/* global React */
const { useEffect, useRef, useState } = React;

function Problem() {
  const { t } = window.useT();
  const s = t.shift;
  return (
    <section id="shift" className="section">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>{s.eyebrow}</span>
          <h2>{s.h2line1}<br />{s.h2line2}</h2>
          <p className="lead">{s.lead1}<strong style={{ color: 'var(--fg-0)' }}>{s.leadStrong}</strong>{s.lead2}</p>
        </div>

        <div className="problem-grid">
          {s.cells.map((it, i) => (
            <div className="problem-cell" key={i}>
              <span className="num">{it.num} / {s.cellNum}</span>
              <h3>{it.title}</h3>
              <p>{it.body}</p>
              <div className="strike">{it.tag}</div>
            </div>
          ))}
        </div>

        <div className="banner-quote">
          <div className="q">{s.banner.split('\n').map((ln, i) => <React.Fragment key={i}>{ln}{i === 0 && <br />}</React.Fragment>)}</div>
          <div className="meta">{s.bannerMeta}</div>
        </div>
      </div>
    </section>
  );
}

function Framework() {
  const { t } = window.useT();
  const m = t.method;
  const [active, setActive] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setActive(a => (a + 1) % m.stages.length), 2600);
    return () => clearInterval(id);
  }, [m.stages.length]);

  return (
    <section id="solution" className="section">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>{m.eyebrow}</span>
          <h2>{m.h2line1}<br />{m.h2line2}</h2>
          <p className="lead">{m.lead}</p>
        </div>

        <div className="flow">
          <div className="flow-row">
            {m.stages.map((s, i) => (
              <div key={i} className={`flow-step ${i === active ? 'active' : ''}`} onMouseEnter={() => setActive(i)}>
                <span className="step-n">{m.stageLabel} {s.n}</span>
                <h4>{s.title}</h4>
                <p>{s.body}</p>
              </div>
            ))}
          </div>
          <div className="flow-pipe">
            <span className="dot"></span>
            <span>{m.pipeLabel}</span>
            <div className="pipe"></div>
            <span>{m.pipeStatus}</span>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Problem = Problem;
window.Framework = Framework;