/* Overlay-on-call mockup — shows the Companion as a floating panel
   docked to a video-call window. Conveys "this is an overlay, not a
   separate app" in one glance. Uses the same demo engine so the
   floating panel stays in sync with the bigger LiveDemo. */

const OverlayDemo = ({ height = 560 }) => {
  const { state, running, setRunning } = useDemoState();

  return (
    <div className="ov" style={{ height }}>
      {/* Window chrome */}
      <div className="ov__chrome">
        <div className="ov__lights">
          <span style={{ background: "#FF5F57" }}></span>
          <span style={{ background: "#FEBC2E" }}></span>
          <span style={{ background: "#28C840" }}></span>
        </div>
        <div className="ov__url">
          <Icon name="lock" size={11} />
          meet.google.com / zer-note-room
        </div>
        <span className="ov__chrome-spacer"></span>
      </div>

      {/* Meeting surface */}
      <div className="ov__stage">
        {/* Respondent video */}
        <div className="ov__tile ov__tile--main">
          <div className="ov__avatar" style={{ background: "linear-gradient(135deg, #FEE2C5, #FAC2A0)" }}>
            <span>MP</span>
          </div>
          <div className="ov__tile-name">
            <span className="ov__mic"><Icon name="mic" size={11} color="white"/></span>
            Marina Petrova
          </div>
          <span className="ov__pulse-tile"></span>
        </div>
        {/* Self-view (small) */}
        <div className="ov__tile ov__tile--self">
          <div className="ov__avatar" style={{ background: "linear-gradient(135deg, #CCE4FF, #66B3FF)" }}>
            <span>You</span>
          </div>
          <div className="ov__tile-name">
            <span className="ov__mic ov__mic--off"><Icon name="mic" size={10} color="white"/></span>
            You
          </div>
        </div>

        {/* Companion floating panel — THE overlay */}
        <div className="ov__panel">
          <div className="ov__panel-head">
            <div className="ov__panel-brand">
              <img src="ds/logos/mascot-left-dark.svg" alt="" width="20" height="20" />
              <span>Companion</span>
              <span className="ov__panel-dot"></span>
              <span className="ov__panel-status">listening</span>
            </div>
            <div className="ov__panel-time">00:{String(Math.floor(state.tick / 1000)).padStart(2,"0")}</div>
          </div>

          {/* Mini guide */}
          <div className="ov__panel-section">
            <div className="ov__panel-sechead">
              <span>Guide</span>
              <span className="ov__panel-count">{state.askedIds.size}/{GUIDE_QUESTIONS.length}</span>
            </div>
            <ul className="ov__qs">
              {GUIDE_QUESTIONS.slice(0,3).map(q => {
                const asked = state.askedIds.has(q.id);
                return (
                  <li key={q.id} className={asked ? "is-asked" : ""}>
                    <span className={`ov__qcheck ${asked ? "is-on" : ""}`}>
                      {asked ? <Icon name="check" size={9} color="white"/> : null}
                    </span>
                    <span className="ov__qtext">{q.text}</span>
                  </li>
                );
              })}
            </ul>
          </div>

          {/* Mini suggestion */}
          {state.suggestion && (
            <div className="ov__hint" key={state.suggestion.t}>
              <div className="ov__hint-head">
                <Icon name="sparkle" size={11} color="#66B3FF"/>
                <span>Suggests</span>
              </div>
              <p>{state.suggestion.value}</p>
              <div className="ov__hint-cta">
                <span className="ov__hintbtn">Dismiss</span>
                <span className="ov__hintbtn is-primary">Ask <Icon name="arrow" size={10}/></span>
              </div>
            </div>
          )}

          {/* Mini blocks */}
          <div className="ov__panel-section">
            <div className="ov__panel-sechead"><span>Coverage</span></div>
            <div className="ov__blocks">
              {BLOCKS.slice(0,4).map(b => (
                <div key={b.id} className="ov__block">
                  <span className="ov__bdot" style={{ background: b.color }}></span>
                  <span className="ov__blabel">{b.label}</span>
                  <span className="ov__bbar"><span className="ov__bfill" style={{ width: `${state.blocks[b.id]}%`, background: b.color }}></span></span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Bottom meeting controls (faux) */}
        <div className="ov__controls">
          <span className="ov__ctrl"><Icon name="mic" size={14}/></span>
          <span className="ov__ctrl"><Icon name="eye" size={14}/></span>
          <span className="ov__ctrl ov__ctrl--end">End</span>
          <span className="ov__ctrl"><Icon name="headset" size={14}/></span>
          <span className="ov__ctrl"><Icon name="chart" size={14}/></span>
        </div>
      </div>

    </div>
  );
};

window.OverlayDemo = OverlayDemo;