// Kahla Labs — Live System Diagram
// Shows booking → AI chat → SEO → automation flow with animated signal pulses.

const SystemDiagram = ({ focus = null }) => {
  const [tick, setTick] = React.useState(0);
  const [msgIdx, setMsgIdx] = React.useState(0);
  const [bookingStep, setBookingStep] = React.useState(0);

  // When a step is focused (driven by the pinned scrollytelling), spotlight the
  // matching node and dim the rest. focus === null → all nodes equal.
  const nodeState = (i) => (focus === null ? '' : focus === i ? ' is-focus' : ' is-dim');

  React.useEffect(() => {
    const id = setInterval(() => setTick(t => t + 1), 80);
    return () => clearInterval(id);
  }, []);
  React.useEffect(() => {
    const id = setInterval(() => setMsgIdx(i => i + 1), 2800);
    return () => clearInterval(id);
  }, []);
  React.useEffect(() => {
    const id = setInterval(() => setBookingStep(s => (s + 1) % 4), 2200);
    return () => clearInterval(id);
  }, []);

  const chatMessages = [
    { role: 'user', text: 'Do you have Saturday openings?' },
    { role: 'bot',  text: 'Yes — 10am, 2pm, 4:30pm. Which works?' },
    { role: 'user', text: '2pm please' },
    { role: 'bot',  text: 'Booked. Confirmation sent.' },
  ];
  const visibleMsgs = chatMessages.slice(0, (msgIdx % 5) + 1);

  // SEO keyword rotation
  const keywords = [
    { term: 'emergency dentist',     rank: 3, delta: '+4' },
    { term: 'invisalign near me',    rank: 7, delta: '+2' },
    { term: 'dentist open saturday', rank: 5, delta: '+8' },
  ];

  const bookingSlots = ['09:00', '10:30', '13:00', '14:30', '16:00', '17:30'];

  return (
    <div className="sys-frame">
      {/* Frame chrome */}
      <div className="sys-chrome">
        <div className="sys-chrome-dots">
          <span /><span /><span />
        </div>
        <div className="sys-chrome-title">kahlalabs.com / live systems</div>
        <div className="sys-chrome-status">
          <span className="sys-pulse" />
          <span>online</span>
        </div>
      </div>

      {/* Body */}
      <div className="sys-body">

        {/* NODE 1 — Booking */}
        <div className={`sys-node sys-node--booking${nodeState(0)}`}>
          <div className="sys-node-head">
            <span className="sys-node-idx">01</span>
            <span className="sys-node-title">Booking engine</span>
            <span className="sys-node-live">
              <span className="sys-dot-live" /> live
            </span>
          </div>
          <div className="sys-booking-grid">
            {bookingSlots.map((t, i) => (
              <div key={i} className={`sys-slot ${i === bookingStep ? 'is-selected' : ''} ${i < bookingStep ? 'is-booked' : ''}`}>
                {t}
              </div>
            ))}
          </div>
          <div className="sys-node-foot">
            <span>week of apr 20</span>
            <span className="sys-metric">74% utilized</span>
          </div>
        </div>

        {/* Connector arrow 1 → 2 */}
        <Connector label="confirm" tick={tick} />

        {/* NODE 2 — AI chat */}
        <div className={`sys-node sys-node--chat${nodeState(1)}`}>
          <div className="sys-node-head">
            <span className="sys-node-idx">02</span>
            <span className="sys-node-title">AI receptionist</span>
            <span className="sys-node-live">
              <span className="sys-dot-live" /> gpt‑4o
            </span>
          </div>
          <div className="sys-chat">
            {visibleMsgs.map((m, i) => (
              <div key={`${msgIdx}-${i}`} className={`sys-msg sys-msg--${m.role}`}>
                {m.text}
              </div>
            ))}
            <div className="sys-typing">
              <span /><span /><span />
            </div>
          </div>
        </div>

        {/* Connector arrow 2 → 3 */}
        <Connector label="log" tick={tick + 20} />

        {/* NODE 3 — SEO pipeline */}
        <div className={`sys-node sys-node--seo${nodeState(2)}`}>
          <div className="sys-node-head">
            <span className="sys-node-idx">03</span>
            <span className="sys-node-title">SEO pipeline</span>
            <span className="sys-node-live">
              <span className="sys-dot-live" /> crawling
            </span>
          </div>
          <div className="sys-seo">
            {keywords.map((k, i) => (
              <div key={i} className="sys-kw">
                <span className="sys-kw-term">{k.term}</span>
                <span className="sys-kw-rank">#{k.rank}</span>
                <span className="sys-kw-delta">{k.delta}</span>
              </div>
            ))}
          </div>
          <div className="sys-spark">
            <Sparkline tick={tick} />
          </div>
        </div>

      </div>

      {/* Foot bar */}
      <div className="sys-foot">
        <div className="sys-foot-col">
          <span className="sys-foot-label">Uptime</span>
          <span className="sys-foot-value">99.97%</span>
        </div>
        <div className="sys-foot-col">
          <span className="sys-foot-label">Bookings / mo</span>
          <span className="sys-foot-value">412 <em>+38</em></span>
        </div>
        <div className="sys-foot-col">
          <span className="sys-foot-label">Avg response</span>
          <span className="sys-foot-value">1.2s</span>
        </div>
        <div className="sys-foot-col">
          <span className="sys-foot-label">Keywords ranking</span>
          <span className="sys-foot-value">148 <em>top‑10</em></span>
        </div>
      </div>
    </div>
  );
};

const Connector = ({ label, tick }) => {
  const pulse = (tick % 60) / 60;
  return (
    <div className="sys-conn">
      <svg width="100%" height="48" viewBox="0 0 200 48" preserveAspectRatio="none">
        <line x1="0" y1="24" x2="200" y2="24" stroke="#C9A34F" strokeWidth="0.5" opacity="0.5" />
        <circle cx={pulse * 200} cy="24" r="2" fill="#E2C27A" />
        <circle cx={pulse * 200} cy="24" r="5" fill="none" stroke="#E2C27A" strokeWidth="0.5" opacity={1 - pulse} />
      </svg>
      <span className="sys-conn-label">{label}</span>
    </div>
  );
};

const Sparkline = ({ tick }) => {
  const pts = React.useMemo(() => {
    return Array.from({ length: 24 }, (_, i) => 20 + Math.sin(i * 0.5) * 8 + Math.random() * 4);
  }, []);
  const path = pts.map((y, i) => `${i === 0 ? 'M' : 'L'} ${(i / (pts.length - 1)) * 180} ${40 - y}`).join(' ');
  return (
    <svg width="100%" height="40" viewBox="0 0 180 40" preserveAspectRatio="none">
      <path d={path} fill="none" stroke="#C9A34F" strokeWidth="0.8" opacity="0.8" />
      <path d={`${path} L 180 40 L 0 40 Z`} fill="#C9A34F" opacity="0.08" />
    </svg>
  );
};

Object.assign(window, { SystemDiagram });