// Chat + social-feed panel, journal (columns/essays/playbooks), footer (Sandy Carter).
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 where your company is on its AI journey…" />
            <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 cohort update…" />
            <button onClick={p.postFeed} className="btn btn-primary">Post</button>
          </div>
        </div>
      )}
    </div>
  );
}

function ActionChat(props) {
  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="Chat with the assistant"
            lede={<>Describe where your company is on its AI journey and what you’re trying to lead through — Sandy’s assistant scopes it live into a leadership brief. Or switch to the <strong>social feed</strong> to follow the latest cohort and Equs.AI updates.</>} />
          <Reveal delay={0.12} className="chat-note">Every conversation is grounded in the Agentic Leadership Index — scoped to your goal, mapped to a leadership level, and turned into a guided 90-day plan.</Reveal>
        </div>
        <Reveal delay={0.06} y={26}><ChatPanel {...props} /></Reveal>
      </div>
    </section>
  );
}

function JournalColumns() {
  const months = window.SANDY_MONTHS, all = window.SANDY_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 ? " piece" : " pieces"} 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 pieces yet in this period.</div>}
      </div>
    </>
  );
}

function PressReleases() {
  const list = window.SANDY_PRESS_RELEASES;
  return (
    <>
      <Reveal delay={0.08} className="pr-note">
        <span className="pr-note-ico">{Ico.star({ size: 15 })}</span>
        <div className="pr-note-tx">Written backwards, the Amazon way — each release is drafted today as if the milestone already shipped, then Sandy and the cohort work back to make it true. <strong style={{ color: "var(--head)" }}>Commitments, not forecasts.</strong></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">— Sandy Carter, {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");
  return (
    <section id="journal" data-screen-label="Journal" className="wrap section-pad-lg">
      <SectionHead eyebrow="Journal" title="Writing & columns" lede="Forbes AI columns, essays, and operating playbooks on agentic trust and go-to-market — plus the future press releases Sandy is working backwards from, drafted today for the milestones she 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")}>Columns & 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)" }}>CEO profile · Sandy Carter</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 });