/* global React */
const { useState: useStateWa, useEffect: useEffectWa, useRef: useRefWa } = React;

const THREAD = [
  { type: "system", text: "Today · Dispatch" },
  { type: "them", text: "Morning boss — any loads for tomorrow?", time: "04:38" },
  { type: "me", text: "Brampton → Buffalo. 06:00 pickup at Maple Lodge.", time: "04:38", card: "load" },
  { type: "them", text: "Trailer?", time: "04:39" },
  { type: "me", text: "DDT-TR-12. Seal 0842. Pre-pass attached.", time: "04:39", card: "doc" },
  { type: "them", text: "Copy. Heading out.", time: "04:40" },
  { type: "system", text: "06:12 — BOL signed ✓" },
  { type: "me", text: "BOL in. ACE filed for Fort Erie 09:10 crossing.", time: "06:14" },
  { type: "system", text: "13:44 — POD received" },
];

function Phone() {
  const [shown, setShown] = useStateWa(0);
  const [typing, setTyping] = useStateWa(false);
  const bodyRef = useRefWa(null);

  useEffectWa(() => {
    let timer;
    const advance = () => {
      setShown(s => {
        if (s >= THREAD.length) return 0;
        return s + 1;
      });
    };
    const schedule = () => {
      const current = THREAD[shown];
      if (!current) { timer = setTimeout(() => setShown(0), 2500); return; }
      const next = THREAD[shown + 1];
      if (next && next.type === "them") {
        setTyping(true);
        timer = setTimeout(() => { setTyping(false); advance(); }, 1400);
      } else {
        timer = setTimeout(advance, 900);
      }
    };
    schedule();
    return () => clearTimeout(timer);
  }, [shown]);

  useEffectWa(() => {
    if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
  }, [shown, typing]);

  const visible = THREAD.slice(0, shown);

  return (
    <div className="phone">
      <div className="phone__screen">
        <div className="phone__header">
          <div className="avatar">G</div>
          <div>
            <div className="name">Gurpreet · Unit 12</div>
            <div className="status">● online · last seen now</div>
          </div>
        </div>
        <div className="phone__body" ref={bodyRef}>
          {visible.map((m, i) => {
            if (m.type === "system") return <div key={i} className="msg system">{m.text}</div>;
            return (
              <div key={i} className={`msg ${m.type}`}>
                <div>{m.text}</div>
                {m.card === "load" && (
                  <div className="load-card">
                    DDT-L0248<br />
                    BRAMPTON, ON → BUFFALO, NY<br />
                    187 KM · $1,420 CAD
                  </div>
                )}
                {m.card === "doc" && (
                  <div className="doc-card">
                    <div className="icn">PDF</div>
                    <div style={{ fontSize: "0.78rem" }}>
                      rate-confirmation.pdf<br />
                      <span style={{ color: "#8696A0", fontSize: "0.7rem" }}>204 KB</span>
                    </div>
                  </div>
                )}
                <span className="time">{m.time} ✓✓</span>
              </div>
            );
          })}
          {typing && <div className="typing"><span /><span /><span /></div>}
        </div>
      </div>
    </div>
  );
}

function WhatsApp() {
  return (
    <section className="section section--alt" id="whatsapp">
      <div className="section__top">
        <div className="section__num">02</div>
        <div className="section__label">
          <span className="eyebrow">The dispatch channel</span>
          <h2 className="display h2">WhatsApp is <em style={{ fontStyle: "normal", background: "linear-gradient(90deg, var(--blue-2), var(--sky))", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>the</em> dispatch channel.</h2>
        </div>
      </div>

      <div className="wa">
        <div className="wa__copy">
          <Reveal>
            <p className="lead">Your drivers use it. Your brokers use it. Your customers use it. The rest of the industry treats it like a problem to solve — we treat it like the system of record it already is.</p>
          </Reveal>
          <ul className="wa__list">
            <Reveal as="li"><span className="num">01</span><div><strong>Two-way load assignment.</strong> Dispatcher sends from the board. Driver accepts from WhatsApp. Nothing typed twice.</div></Reveal>
            <Reveal as="li" delay={80}><span className="num">02</span><div><strong>Documents that know where they belong.</strong> BOLs, PODs, rate cons — auto-filed to the load record by image-recognition.</div></Reveal>
            <Reveal as="li" delay={160}><span className="num">03</span><div><strong>Location without a separate app.</strong> Live-location share kicks off a tracking thread with the customer. No ELD required.</div></Reveal>
            <Reveal as="li" delay={240}><span className="num">04</span><div><strong>No new app to learn.</strong> Drivers work in the chat they already use — the thread is the interface. Nothing to install, nothing to train.</div></Reveal>
          </ul>
          <div className="hero__cta">
            <a href="#" className="btn btn--blue" onClick={(e) => e.preventDefault()}>See the WhatsApp spec <Arrow /></a>
          </div>
        </div>
        <div><Phone /></div>
      </div>
    </section>
  );
}

Object.assign(window, { WhatsApp });