// Editorial magazine hero + verification band (Sandy Carter). Portrait is a fillable image-slot.
function Hero({ d, avatars, selAvatar, pickerOpen, togglePicker, copyLabel, copyMcp, sendLabel, sendLink, claudeUrl, openVoice }) {
  const slides = d.heroImages || [];
  const [slide, setSlide] = useState(0);
  const [paused, setPaused] = useState(false);
  useEffect(() => {
    if (paused || slides.length < 2) return;
    const t = setInterval(() => setSlide((n) => (n + 1) % slides.length), 5200);
    return () => clearInterval(t);
  }, [paused, slides.length]);
  return (
    <header data-screen-label="Profile hero" style={{ position: "relative", color: "#fff" }}>
      {slides.length > 0 && (
        <div className="hero-bg" aria-hidden="true" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
          {slides.map((s, i) => (
            <div key={i} className={"hero-slide" + (i === slide ? " on" : "")} style={{ backgroundImage: "url(" + s.src + ")" }}></div>
          ))}
          <div className="hero-scrim"></div>
        </div>
      )}
      <div className="wrap" style={{ position: "relative", zIndex: 2, paddingTop: 26 }}>
        <div className="hero-topbar">
          <span className="mono" style={{ fontSize: 11, letterSpacing: "0.24em", textTransform: "uppercase", color: "rgba(255,255,255,0.82)", fontWeight: 700 }}>ActionBoard.ai — CEO Profile</span>
          <span style={{ fontFamily: "'Playfair Display', Georgia, serif", fontStyle: "italic", fontSize: 15, color: "rgba(255,255,255,0.72)" }}>Agentic Leadership · Issue 01 · 2026</span>
        </div>

        <div className="hero-grid">
          {/* Portrait */}
          <Reveal className="hero-portrait-wrap" y={26}>
            <div className="portrait-frame">
              <image-slot id="sandy-portrait" shape="rect" fit="cover" placeholder="Drop in Sandy's headshot" src="assets/sandy-portrait-crop.jpg" style={{ position: "absolute", inset: 0 }}></image-slot>
              <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(6,3,15,0) 55%, rgba(6,3,15,0.55) 100%)", pointerEvents: "none" }}></div>
              <span className="verified-chip">
                <span className="dot-live"></span> {d.badge}
              </span>
              <button onClick={openVoice} className="vn-trigger" title="Leave Sandy a 30-second voice note">
                <span className="vn-trigger-ava">SC</span>
                <span className="vn-trigger-tx"><b>Voice note</b><span>Say hi to Sandy</span></span>
                <span className="vn-trigger-mic"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="9" y="2" width="6" height="12" rx="3"></rect><path d="M5 10a7 7 0 0 0 14 0"></path><line x1="12" y1="19" x2="12" y2="22"></line></svg></span>
              </button>
              {/* Persona picker */}
              <div style={{ position: "absolute", left: 14, bottom: 14 }}>
                <button onClick={togglePicker} className="persona-btn" title="Choose persona">
                  <span style={{ fontSize: 26, lineHeight: 1 }}>{selAvatar.emoji}</span>
                </button>
                {pickerOpen && (
                  <div className="persona-pop">
                    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }}>
                      <span className="mono" style={{ fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--text-3)", fontWeight: 700 }}>Choose persona</span>
                      <button onClick={togglePicker} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--text-3)", fontSize: 16, lineHeight: 1, padding: "2px 4px" }}>✕</button>
                    </div>
                    <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 10 }}>
                      {avatars.map((a, i) => (
                        <button key={i} onClick={a.pick} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6, background: "rgba(255,255,255,0.04)", border: a.active ? "2px solid var(--violet-bright)" : "1px solid var(--line)", borderRadius: 12, padding: "10px 6px", cursor: "pointer" }}>
                          <span style={{ width: 46, height: 46, borderRadius: 12, background: a.bg, display: "grid", placeItems: "center", fontSize: 26 }}>{a.emoji}</span>
                          <span style={{ fontSize: 10, fontWeight: 700, color: "var(--text-2)", textAlign: "center", lineHeight: 1.2 }}>{a.label}</span>
                        </button>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            </div>
          </Reveal>

          {/* Masthead */}
          <div className="hero-masthead">
            <Reveal delay={0.05}>
              <span className="badge-glass"><span className="dot-live"></span> {d.badge}</span>
            </Reveal>
            <div style={{ position: "relative" }}>
              <div className="name-glow" aria-hidden="true"></div>
              <Reveal delay={0.08}><h1 className="hero-name">{d.name}</h1></Reveal>
            </div>
            <Reveal delay={0.12}><p className="hero-role">{d.role}</p></Reveal>

            <Reveal delay={0.16}>
              <div className="cover-lines">
                {d.coverLines.map((c, i) => (
                  <div key={i} className="cover-line">
                    <span className="cover-no">{String(i + 1).padStart(2, "0")}</span>
                    <span className="cover-text">{c}</span>
                  </div>
                ))}
              </div>
            </Reveal>

            <Reveal delay={0.2}>
              <a href={d.storyUrl} target="_blank" rel="noopener" className="story-link">{d.storyLabel}</a>
            </Reveal>

            <Reveal delay={0.24}>
              <div className="cta-row">
                <div className="mcp-pill">
                  <span className="mono" style={{ fontSize: 11, fontWeight: 800, letterSpacing: "0.1em", color: "var(--text-2)" }}>MCP PROFILE</span>
                  <code className="mono" style={{ fontSize: 13, color: "#fff" }}>{d.mcpUri}</code>
                  <button onClick={copyMcp} className="mcp-copy">{Ico.copy({ size: 12 })} {copyLabel}</button>
                </div>
                <button onClick={sendLink} className="btn btn-light">{sendLabel}</button>
                <a href={claudeUrl} target="_blank" rel="noopener" className="btn btn-dark"><span className="claude-mark">✳</span> Open in Claude</a>
                <a href={d.guideUrl} className="btn btn-light">Build your own AI profile {Ico.arrow({ size: 14 })}</a>
              </div>
            </Reveal>
          </div>
        </div>

        {/* Stat band */}
        <Reveal delay={0.1} className="stat-band">
          {d.stats.map((s, i) => (
            <div key={i} className="stat-cell">
              <div className="stat-value tabular">{s.value}</div>
              <div className="stat-label mono">{s.label}</div>
            </div>
          ))}
        </Reveal>

        {slides.length > 1 && (
          <div className="hero-dots" role="tablist" aria-label="Hero background">
            {slides.map((s, i) => (
              <button key={i} role="tab" aria-selected={i === slide} aria-label={s.label} title={s.label} onClick={() => setSlide(i)} className={"hero-dot" + (i === slide ? " on" : "")}></button>
            ))}
          </div>
        )}
      </div>
    </header>
  );
}

function VerificationBand({ items }) {
  return (
    <section data-screen-label="Verification" className="wrap section-pad-sm" style={{ borderBottom: "1px solid var(--line)" }}>
      <div className="verif-grid">
        {items.map((c, i) => (
          <Reveal key={i} delay={i * 0.05} className="verif-card">
            <span className={"verif-ico " + (c.icon === "star" ? "vi-star" : "vi-check")}>{c.icon === "star" ? Ico.star({ size: 14 }) : Ico.check({ size: 14 })}</span>
            <div>
              <div style={{ fontWeight: 800, fontSize: 13.5, color: "var(--head)" }}>{c.title}</div>
              <div style={{ fontSize: 12, color: "var(--text-3)" }}>{c.sub}</div>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Hero, VerificationBand });