/* "Most systems see transcripts." — layered conversational-signal visualization */

const SIGNALS = [
  { name: "Transcript",        kind: "blockwave",    color: "var(--mute)",    num: "",         faded: true },
  { name: "Interruption",      kind: "ticks",        color: "var(--ink-soft)",num: "4 events" },
  { name: "Silence",           kind: "gaps",         color: "var(--ink-soft)",num: "3.4s avg" },
  { name: "Hesitation",        kind: "dotbursts",    color: "var(--ink-soft)",num: "12 hits" },
  { name: "Tone & sentiment",  kind: "smoothwave",   color: "var(--ink-soft)",num: "-0.42 Δ" },
  { name: "Pacing & overlap",  kind: "densitybars",  color: "var(--ink-soft)",num: "63 wpm" },
  { name: "Tool latency",      kind: "latencybars",  color: "var(--ink-soft)",num: "p99 4.2s" },
  { name: "Recovery",          kind: "recoverysteps",color: "var(--ink-soft)",num: "2 failed" },
];

function SignalsSection() {
  return (
    <section className="block section-soft" data-screen-label="02 signals">
      <div className="wrap">
        <div className="signals-lede">
          <div className="section-eyebrow">Conversational layer</div>
          <h2 className="signals-statement">
            Most systems see transcripts.{" "}
            <span className="ink-soft">We see what the agent heard and what the system did.</span>
          </h2>
        </div>

        <div className="signals-frame unboxed" data-comment-anchor="signals-frame">

          {SIGNALS.map((s, i) => (
            <React.Fragment key={i}>
              {i === 0 && (
                <div style={{
                  display: "grid", gridTemplateColumns: "132px 1fr 70px", gap: 18,
                  alignItems: "center", padding: "20px 0 12px"
                }}>
                  <div style={{
                    display: "flex", alignItems: "center", gap: 8
                  }}>
                    <span style={{
                      width: 6, height: 6, borderRadius: "50%",
                      background: "var(--mute-2)"
                    }}/>
                    <span style={{
                      fontFamily: "Geist Mono, monospace", fontSize: 11.5,
                      color: "var(--mute)", letterSpacing: "0.06em", textTransform: "uppercase",
                      fontWeight: 500
                    }}>
                      Typical observability
                    </span>
                  </div>
                  <div/>
                  <div/>
                </div>
              )}
              {i === 1 && (
                <React.Fragment>
                  <div style={{
                    height: 1, background: "var(--hair-strong)",
                    marginTop: 36, marginBottom: 0
                  }}/>
                  <div style={{
                    display: "grid", gridTemplateColumns: "132px 1fr 70px", gap: 18,
                    alignItems: "center", padding: "22px 0 6px"
                  }}>
                    <div style={{
                      display: "flex", alignItems: "center", gap: 8
                    }}>
                      <span style={{
                        width: 6, height: 6, borderRadius: "50%",
                        background: "oklch(0.74 0.20 145)",
                        boxShadow: "0 0 0 3px color-mix(in oklab, oklch(0.74 0.20 145) 30%, transparent)"
                      }}/>
                      <span style={{
                        fontFamily: "Geist Mono, monospace", fontSize: 11.5,
                        color: "var(--ink)", letterSpacing: "0.06em", textTransform: "uppercase",
                        fontWeight: 500
                      }}>
                        Audia's observability
                      </span>
                    </div>
                    <div style={{ display: "flex", justifyContent: "flex-end", gridColumn: "2 / 4" }}>
                      <span className="pill" style={{ color: "var(--ink)", borderColor: "var(--hair-strong)", fontSize: 12.5, padding: "5px 11px" }}>7 signal channels</span>
                    </div>
                  </div>
                  <div style={{
                    display: "grid", gridTemplateColumns: "132px 1fr 70px", gap: 18,
                    alignItems: "center", padding: "6px 0 10px"
                  }}>
                    <div style={{ paddingLeft: 0 }}>
                      <span className="pill" style={{ color: "var(--ink)", borderColor: "var(--hair-strong)", fontSize: 12.5, padding: "5px 11px" }}>Acoustic</span>
                    </div>
                    <div/>
                    <div/>
                  </div>
                </React.Fragment>
              )}
              {i === 6 && (
                <div style={{
                  display: "grid", gridTemplateColumns: "132px 1fr 70px", gap: 18,
                  alignItems: "center", padding: "16px 0 10px"
                }}>
                  <div style={{ paddingLeft: 0 }}>
                    <span className="pill" style={{ color: "var(--ink)", borderColor: "var(--hair-strong)", fontSize: 12.5, padding: "5px 11px" }}>Structural</span>
                  </div>
                  <div/>
                  <div/>
                </div>
              )}
              <div className="signal-row" style={
                s.faded
                  ? { opacity: 0.8, borderBottom: "none" }
                  : null
              }>
                <div className="lbl">
                  <span className="sw" style={{ background: s.color }}/>
                  <span className="name">{s.name}</span>
                </div>
                <div className="lane">
                  <SignalLane kind={s.kind} color={s.color} seed={i * 7 + 3}/>
                </div>
                <div className="num">{s.num}</div>
              </div>
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SignalsSection });