// Chat + social-feed panel, journal (research/writing), footer.
function ChatPanel(p) {
  return (
    <div className="chat-panel" data-screen-label="Action chat">
      <div className="chat-head">
        <span className="chat-avatar">A</span>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontWeight: 800, fontSize: 14.5, display: "flex", alignItems: "center", gap: 7, color: "var(--paper-ink)" }}>{p.assistantName} <span style={{ color: "#059669", fontSize: 12 }}>✓</span></div>
          <div style={{ fontSize: 12, color: "var(--paper-muted)", fontWeight: 600, display: "flex", alignItems: "center", gap: 6 }}><span className="dot-live"></span> Online · replies in seconds</div>
        </div>
        <div className="chat-tabs">
          <button onClick={p.showChat} className={"chat-tab " + (p.tab === "chat" ? "on" : "")}>Chat</button>
          <button onClick={p.showFeed} className={"chat-tab " + (p.tab === "feed" ? "on" : "")}>Social feed</button>
        </div>
      </div>

      {p.tab === "chat" ? (
        <div style={{ display: "flex", flexDirection: "column", flex: 1, minHeight: 0 }}>
          <div ref={p.threadRef} className="chat-thread">
            {p.messages.map((m, i) => (
              <div key={i} className={"msg " + (m.from === "you" ? "msg-you" : "msg-pod")}>
                <span className="msg-avatar" style={m.from === "you" ? { background: "#221E29", color: "#fff" } : { background: "var(--violet)", color: "#fff" }}>{m.from === "you" ? "You" : "A"}</span>
                <div className="bubble">{m.text}</div>
              </div>
            ))}
            {p.typing && (
              <div className="msg msg-pod">
                <span className="msg-avatar" style={{ background: "var(--violet)", color: "#fff" }}>A</span>
                <div className="bubble typing"><span></span><span></span><span></span></div>
              </div>
            )}
          </div>
          <div className="chat-suggest">
            {p.suggestions.map((s, i) => <button key={i} onClick={() => p.onPick(s)} className="suggest-chip">{s}</button>)}
          </div>
          <div className="chat-input">
            <textarea value={p.draft} onChange={p.setDraft} onKeyDown={p.onKey} rows={1} placeholder="Describe the action or operation…" />
            <button onClick={p.send} className="chat-send" title="Send">{Ico.arrow({ size: 18 })}</button>
          </div>
        </div>
      ) : (
        <div style={{ display: "flex", flexDirection: "column", flex: 1, minHeight: 0 }}>
          <div className="feed-thread">
            {p.posts.map((post, i) => (
              <div key={i} className="feed-post">
                <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }}>
                  <span className="feed-avatar" style={{ background: post.bg }}>{post.init}</span>
                  <div style={{ minWidth: 0, lineHeight: 1.25 }}>
                    <div style={{ fontWeight: 800, fontSize: 13.5, display: "flex", alignItems: "center", gap: 6, color: "var(--paper-ink)" }}>{post.author} <span style={{ color: "#059669", fontSize: 11 }}>✓</span></div>
                    <div style={{ fontSize: 11.5, color: "var(--paper-muted)", fontWeight: 600 }}>{post.handle} · {post.time}</div>
                  </div>
                  <span className="feed-tag">{post.tag}</span>
                </div>
                <p style={{ fontSize: 13.5, lineHeight: 1.6, color: "var(--paper-ink)", margin: "0 0 12px" }}>{post.text}</p>
                <div className="feed-actions">
                  <button onClick={() => p.onLike(i)} className="feed-like" style={{ color: post.liked ? "var(--violet)" : "var(--paper-muted)" }}><span style={{ fontSize: 15 }}>{post.liked ? "♥" : "♡"}</span> {post.likes + (post.liked ? 1 : 0)}</button>
                  <span style={{ fontSize: 12.5, fontWeight: 700, color: "var(--paper-muted)" }}>Reply · {post.comments}</span>
                  <span style={{ fontSize: 12.5, fontWeight: 700, color: "var(--paper-muted)" }}>Share</span>
                </div>
              </div>
            ))}
          </div>
          <div className="feed-input">
            <input value={p.feedDraft} onChange={p.setFeedDraft} onKeyDown={p.onFeedKey} placeholder="Share a pod update…" />
            <button onClick={p.postFeed} className="btn btn-primary">Post</button>
          </div>
        </div>
      )}
    </div>
  );
}

function ActionChat(props) {
  const cs = (window.SME && window.SME.chatSection) || {};
  return (
    <section id="briefing" className="wrap section-pad" style={{ borderBottom: "1px solid var(--line)" }}>
      <div className="chat-layout">
        <div>
          <SectionHead eyebrow="Chat & social feed" title={cs.title || "Chat with the assistant"}
            lede={cs.lede || <>Describe the operation you want an action model to learn, or the evaluation you need — Jarjis's pod assistant scopes it live into a briefing. Or switch to the <strong>social feed</strong> to follow the latest updates.</>} />
          <Reveal delay={0.12} className="chat-note">{cs.note || "Every conversation is grounded in the AIOps Maturity framework — scoped to your goal, mapped to a maturity level, and turned into a guided 90-day actionflow."}</Reveal>
        </div>
        <Reveal delay={0.06} y={26}><ChatPanel {...props} /></Reveal>
      </div>
    </section>
  );
}

function JournalColumns() {
  const months = window.SME_MONTHS, all = window.SME_JOURNAL;
  const [sel, setSel] = useState(months.length - 1);
  const items = all.filter((j) => j.m <= sel);
  return (
    <>
      <Reveal delay={0.1} className="timeline">
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 12, flexWrap: "wrap", marginBottom: 12 }}>
          <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}><span className="mono" style={{ fontSize: 12, fontWeight: 700, color: "var(--text-3)", letterSpacing: "0.04em" }}>TIMELINE</span><span style={{ fontSize: 18, fontWeight: 800, color: "var(--violet-bright)" }}>{months[sel]} 2026</span></div>
          <span className="mono" style={{ fontSize: 11.5, color: "var(--text-3)" }}>{items.length}{items.length === 1 ? " post" : " posts"} through {months[sel]}</span>
        </div>
        <input type="range" min={0} max={months.length - 1} step={1} value={sel} onChange={(e) => setSel(+e.target.value)} className="range" />
        <div className="mono" style={{ display: "flex", justifyContent: "space-between", marginTop: 6, fontSize: 10.5, color: "var(--text-3)" }}>{months.map((m, i) => <span key={i}>{m}</span>)}</div>
      </Reveal>
      <div className="journal-grid">
        {items.map((j, i) => (
          <Reveal key={j.title} delay={(i % 3) * 0.06} className="journal-card">
            <span className="journal-type" style={{ background: j.soft, color: j.accent }}>{j.type}</span>
            <h3 style={{ margin: 0, fontSize: 19, fontWeight: 800, lineHeight: 1.25, letterSpacing: "-0.01em", color: "var(--head)" }}>{j.title}</h3>
            <div className="mono" style={{ fontSize: 11.5, color: "var(--text-3)" }}>{j.meta}</div>
            <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.6, color: "var(--text-2)" }}>{j.body}</p>
            <a href="#" onClick={(e) => e.preventDefault()} style={{ marginTop: "auto", color: j.accent, fontWeight: 700, fontSize: 13.5, textDecoration: "none" }}>Read →</a>
          </Reveal>
        ))}
        {items.length === 0 && <div style={{ gridColumn: "1/-1", padding: 32, textAlign: "center", color: "var(--text-3)", fontSize: 14 }}>No posts yet in this period.</div>}
      </div>
    </>
  );
}

function PressReleases() {
  const list = window.SME_PRESS_RELEASES;
  const pressName = (window.SME && window.SME.pressName) || "Jarjis Imam";
  const note = (window.SME && window.SME.pressNote) || <>Written backwards, the Amazon way — each release is drafted today as if the milestone already shipped, then Jarjis and the cohort work back to make it true. <strong style={{ color: "var(--head)" }}>Commitments, not forecasts.</strong></>;
  return (
    <>
      <Reveal delay={0.08} className="pr-note">
        <span className="pr-note-ico">{Ico.star({ size: 15 })}</span>
        <div className="pr-note-tx">{note}</div>
      </Reveal>
      <div className="pr-stack">
        {list.map((pr, i) => (
          <Reveal key={pr.headline} delay={i * 0.06} className="pr-card">
            <div className="pr-top">
              <span className="pr-fir">FOR IMMEDIATE RELEASE</span>
              <span className="pr-embargo">{pr.drafted} · {pr.target}</span>
            </div>
            <span className="pr-tag">{pr.tag}</span>
            <div className="pr-dateline">{pr.dateline}</div>
            <h3 className="pr-headline">{pr.headline}</h3>
            <p className="pr-sub">{pr.sub}</p>
            <p className="pr-body">{pr.body}</p>
            {pr.metrics && (
              <div className="pr-metrics">
                {pr.metrics.map((mt, k) => <div key={k} className="pr-metric"><b>{mt.v}</b><span>{mt.k}</span></div>)}
              </div>
            )}
            <div className="pr-quote">
              <span className="pr-qmark">“</span>
              <div><p className="pr-quote-tx">{pr.quote}</p><div className="pr-attr">— {pressName}, {pr.attr}</div></div>
            </div>
            <div className="pr-foot">
              <span className="pr-ends">— ENDS —</span>
              <span className="pr-boiler">{pr.boiler}</span>
            </div>
          </Reveal>
        ))}
      </div>
    </>
  );
}

function Journal() {
  const [view, setView] = useState("writing");
  const js = (window.SME && window.SME.journalSection) || {};
  return (
    <section id="journal" data-screen-label="Journal" className="wrap section-pad-lg">
      <SectionHead eyebrow={js.eyebrow || "Journal"} title={js.title || "Research & writing"} lede={js.lede || "Research blog posts, paper analyses, and white papers on AIOps and multi-agent governance — plus the future press releases Jarjis is working backwards from, drafted today for the milestones he intends to ship."} />
      <div className="jr-tabs" role="tablist">
        <button role="tab" aria-selected={view === "writing"} className={"jr-tab " + (view === "writing" ? "on" : "")} onClick={() => setView("writing")}>Research & essays</button>
        <button role="tab" aria-selected={view === "press"} className={"jr-tab " + (view === "press" ? "on" : "")} onClick={() => setView("press")}>Future press releases</button>
      </div>
      {view === "writing" ? <JournalColumns /> : <PressReleases />}
    </section>
  );
}

function Footer() {
  return (
    <footer className="site-footer">
      <div className="wrap" style={{ display: "flex", alignItems: "center", gap: 24, flexWrap: "wrap", padding: "40px 32px" }}>
        <span style={{ fontWeight: 800, fontSize: 14, color: "var(--head)" }}>ActionBoard.ai · Action Assist Pro</span>
        <span style={{ fontSize: 13, color: "var(--text-2)" }}>SME profile · {(window.SME && window.SME.name) || "Jarjis Imam"}</span>
        <a href="User-Guide.html" style={{ marginLeft: "auto", fontSize: 13, color: "var(--text-2)", textDecoration: "none" }}>Platform user guide →</a>
      </div>
    </footer>
  );
}

Object.assign(window, { ChatPanel, ActionChat, Journal, JournalColumns, PressReleases, Footer });