/* Section: Agentic AI highlight + looping agent log terminal */
const { useState: uS3, useEffect: uE3, useRef: uR3 } = React;

function AgentTerminal({ log }) {
  const [n, setN] = uS3(0); // how many lines shown
  uE3(() => {
    let i = 0;
    let timer = 0;
    const step = () => {
      i += 1;
      if (i > log.length) {
        // pause on full log, then reset for the loop
        timer = setTimeout(() => { i = 0; setN(0); timer = setTimeout(step, 700); }, 2600);
        return;
      }
      setN(i);
      timer = setTimeout(step, 900);
    };
    timer = setTimeout(step, 600);
    return () => clearTimeout(timer);
  }, [log]);

  return (
    <div className="ag-term">
      <div className="ag-term-bar">
        <span className="cw-dot r"></span><span className="cw-dot y"></span><span className="cw-dot g"></span>
        <span className="ag-term-title"><span className="live"></span>agent-session.log</span>
      </div>
      <div className="ag-term-body">
        {log.slice(0, n).map((l, i) => (
          <div className="ag-log-line" key={`${n}-${i}`}>
            <span className={`ag-tag ${l.who}`}>{l.who}</span>
            <span className="ag-log-text">{l.text}</span>
            {l.ok && <span className="ag-log-ok">✓</span>}
          </div>
        ))}
        <div className="ag-cursor-line">
          <span>{n >= log.length ? "session complete" : "›"}</span>
          <span className="ag-cursor"></span>
        </div>
      </div>
    </div>
  );
}

function Agentic() {
  const A = window.SITE.agentic;
  return (
    <section className="section" id="agentic">
      <div className="wrap">
        <Reveal className="agentic-panel">
          <span className="ag-orb ag-orb-1"></span>
          <div className="ag-left">
            <span className="eyebrow">{A.eyebrow}</span>
            <div><span className="ag-badge"><span className="spark"></span>{A.badge}</span></div>
            <h2 className="ag-title" dangerouslySetInnerHTML={{ __html: A.title }} />
            <p className="ag-lead">{A.lead}</p>
            <div className="ag-caps">
              {A.capabilities.map((c, i) => (
                <div className="ag-cap" key={i}>
                  <span className="ag-cap-num">{String(i + 1).padStart(2, "0")}</span>
                  <div>
                    <div className="ag-cap-title">{c.title}</div>
                    <div className="ag-cap-text">{c.text}</div>
                  </div>
                </div>
              ))}
            </div>
            <div className="ag-tools">
              {A.tools.map((t, i) => (
                <div className="ag-tool" key={i}>
                  <b>{t.name}</b>
                  <span>{t.note}</span>
                </div>
              ))}
            </div>
          </div>
          <AgentTerminal log={A.log} />
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Agentic });