/* global React, window */

function CallFlow() {
  const { L } = useLang();
  const T = L.callFlow;
  if (!T) return null;

  return (
    <section className="section" id="callflow">
      <div className="container">
        <Reveal><div className="section-eyebrow">{T.eyebrow}</div></Reveal>
        <Reveal delay={60}>
          <h2 className="h-section">{T.headline[0]}<br/>{T.headline[1]}</h2>
        </Reveal>
        <Reveal delay={120}><p className="lead">{T.sub}</p></Reveal>

        <div className="cf-grid">
          {T.phases.map((p, i) => (
            <Reveal key={p.title} className="cf-card" delay={i * 70}>
              <div className="cf-head">
                <span className="cf-n mono">{p.n}</span>
                <span className="cf-time mono">{p.time}</span>
              </div>
              <h4>{p.title}</h4>
              <p>{p.body}</p>
            </Reveal>
          ))}
        </div>

        <Reveal className="cf-stakes" delay={120}>{T.stakes}</Reveal>

        <Reveal className="cf-own" delay={160}>
          <h4>{T.ownership.title}</h4>
          <ul>
            {T.ownership.items.map(it => (
              <li key={it}>
                <span className="d" aria-hidden="true"></span>
                <span>{it}</span>
              </li>
            ))}
          </ul>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { CallFlow });