/* HeroDemo — iPhone Messages thread showing the system talking to the operator. */

const MSGS = [
  { from: "natit", kind: "stamp",   text: <>Today <strong>7:02 AM</strong></> },
  { from: "natit", tag: "morning brief", text: <>Good morning. Revenue MTD <span className="num">$2,840,000</span>, <span className="pos">↑ 18%</span> vs last month.</> },
  { from: "natit", text: <>Cost per booked job is down to <span className="pos">$43</span> from <span className="neg">$61</span> last week. Yelp suppression is working.</> },
  { from: "me",     text: <>What does the roofing pipeline look like right now?</> },
  { from: "natit", typing: true },
  { from: "natit", tag: "pipeline", text: <>847 of your customers own homes 18 or more years old with no permit on record. Strong replacement candidates.</> },
  { from: "natit", text: <>Audience is built and ready for Meta. Estimated reach: <span className="num">28,400</span> matched customers. Ready when you are.</> },
  { from: "me",     text: <>Let's run it. What budget do you suggest?</> },
  { from: "natit", typing: true },
  { from: "natit", tag: "recommendation", text: <>Based on your average ticket and current booking rate, <span className="num">$300/day</span> should produce 6 to 8 booked roofing jobs per week.</> },
  { from: "natit", kind: "stamp",   text: <><strong>4:41 PM</strong></> },
  { from: "natit", tag: "attribution", text: <>That roofing campaign just drove a job invoiced this afternoon. <span className="num">$14,200</span>. <span className="pos">Loop closed.</span></> },
  { from: "me",     text: <>Same play on HVAC next week.</> },
];

function HeroDemo() {
  const [count, setCount] = React.useState(0);
  const threadRef = React.useRef(null);

  React.useEffect(() => {
    if (count >= MSGS.length) return;
    const cur = MSGS[count];
    const delay = count === 0 ? 400
      : cur.kind === "stamp" ? 1400
      : cur.typing ? 1800
      : cur.from === "me" ? 2400
      : 3000 + Math.random() * 800;
    const t = setTimeout(() => {
      setCount((c) => c + 1);
      requestAnimationFrame(() => {
        if (threadRef.current) threadRef.current.scrollTop = threadRef.current.scrollHeight;
      });
    }, delay);
    return () => clearTimeout(t);
  }, [count]);

  // restart the loop after holding the final state
  React.useEffect(() => {
    if (count < MSGS.length) return;
    const t = setTimeout(() => {
      setCount(0);
      if (threadRef.current) threadRef.current.scrollTop = 0;
    }, 5000);
    return () => clearTimeout(t);
  }, [count]);

  // Collapse the typing indicator: when the next msg is rendered, the typing item is replaced.
  // We only render typing entries if they are the latest visible item (so they "transform" into the next bubble naturally).
  const items = [];
  for (let i = 0; i < count; i++) {
    const m = MSGS[i];
    if (m.typing && i < count - 1) continue; // skip stale typing indicators once the real msg has arrived
    items.push({ ...m, _i: i });
  }

  return (
    <div className="imsg-wrap" aria-hidden="true">
      <div className="imsg">
        <div className="imsg-notch"></div>
        <div className="imsg-statusbar">
          <span>9:41</span>
          <span className="icons">
            <svg width="18" height="11" viewBox="0 0 18 11" fill="#1d1d1f"><rect x="0" y="6" width="3" height="4" rx="0.5"/><rect x="5" y="4" width="3" height="6" rx="0.5"/><rect x="10" y="2" width="3" height="8" rx="0.5"/><rect x="15" y="0" width="3" height="10" rx="0.5"/></svg>
            <svg width="16" height="11" viewBox="0 0 16 11" fill="none" stroke="#1d1d1f" strokeWidth="1.2"><path d="M1 5.5 a8 8 0 0 1 14 0"/><path d="M3.5 7 a5 5 0 0 1 9 0"/><circle cx="8" cy="9" r="1" fill="#1d1d1f"/></svg>
            <svg width="24" height="11" viewBox="0 0 24 11" fill="none"><rect x="0.5" y="0.5" width="20" height="10" rx="2.5" stroke="#1d1d1f"/><rect x="2" y="2" width="14" height="7" rx="1" fill="#1d1d1f"/><rect x="21" y="3" width="2" height="5" rx="1" fill="#1d1d1f"/></svg>
          </span>
        </div>
        <div className="imsg-header">
          <div className="avatar">
            <img src="assets/logo-mark-purple.png" alt="" style={{filter:'brightness(0) invert(1)'}}/>
          </div>
          <div className="name">natit <span className="verify"></span></div>
          <div className="sub"><span className="live"></span> live system feed</div>
        </div>
        <div className="imsg-thread" ref={threadRef}>
          {items.map((m, idx) => {
            if (m.kind === "stamp") {
              return <div className="imsg-daystamp" key={m._i}>{m.text}</div>;
            }
            if (m.typing) {
              return (
                <div className="imsg-bubble-wrap them" key={m._i}>
                  <div className="imsg-typing"><span></span><span></span><span></span></div>
                </div>
              );
            }
            const side = m.from === "me" ? "me" : "them";
            const prev = idx > 0 ? items[idx - 1] : null;
            const showTag = m.tag && (!prev || prev.tag !== m.tag || prev.from !== m.from);
            return (
              <div className={"imsg-bubble-wrap " + side} key={m._i}>
                {showTag && side === "them" && <div className="imsg-tag">natit · {m.tag}</div>}
                <div className={"imsg-bubble " + side}>{m.text}</div>
              </div>
            );
          })}
        </div>
        <div className="imsg-footer">
          <div className="input">iMessage</div>
          <div className="send">↑</div>
        </div>
        <div className="imsg-homebar"></div>
      </div>
    </div>
  );
}

window.HeroDemo = HeroDemo;