// Editorial magazine hero + verification band.
function Hero({ d, avatars, selAvatar, pickerOpen, togglePicker, copyLabel, copyMcp, sendLabel, sendLink, claudeUrl, openVoice }) {
  const slides = d.heroImages || [];
  const firstName = (d.name || "").split(" ")[0];
  const portrait = d.portrait === undefined ? "assets/jarjis-main.jpg" : d.portrait;
  const portraitPos = d.portraitPos || "58% 20%";
  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 — SME Profile</span>
          <span style={{ fontFamily: "'Playfair Display', Georgia, serif", fontStyle: "italic", fontSize: 15, color: "rgba(255,255,255,0.72)" }}>{d.issueLine || "AIOps Field Notes · Issue 07 · 2026"}</span>
        </div>

        <div className="hero-grid">
          {/* Portrait */}
          <Reveal className="hero-portrait-wrap" y={26}>
            <div className="portrait-frame">
              {portrait ? (
                <img src={portrait} alt={d.name} style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: portraitPos, display: "block" }} />
              ) : (
                <div style={{ position: "absolute", inset: 0, background: d.portraitBg || "linear-gradient(155deg,#2a1b48,#4C1D95 55%,#7C3AED)", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", padding: "56px 22px 92px" }}>
                  <div style={{ fontFamily: "'Playfair Display',Georgia,serif", fontWeight: 900, fontSize: "clamp(76px,15vw,132px)", lineHeight: 0.86, color: "#fff", textShadow: "0 6px 34px rgba(0,0,0,0.4)" }}>{d.initials}</div>
                  <div style={{ fontFamily: "'Playfair Display',Georgia,serif", fontStyle: "italic", fontWeight: 600, fontSize: 19, color: "rgba(255,255,255,0.92)", marginTop: 16 }}>{d.name}</div>
                  <div style={{ fontSize: 12, color: "rgba(255,255,255,0.72)", fontWeight: 600, marginTop: 4, letterSpacing: "0.02em" }}>{d.portraitOrg || ""}</div>
                </div>
              )}
              <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 " + firstName + " a 30-second voice note"}>
                <span className="vn-trigger-ava">{d.initials || "JI"}</span>
                <span className="vn-trigger-tx"><b>Voice note</b><span>Say hi to {firstName}</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>
                <a href="Integration.html" className="btn btn-primary">How to connect {Ico.arrow({ size: 14 })}</a>
                <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 SME profile {Ico.arrow({ size: 14 })}</a>
              </div>
            </Reveal>
            <Reveal delay={0.28}><SocialBar d={d} /></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>
  );
}

const SOC_ICONS = {
  linkedin: (<svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5A2.5 2.5 0 1 0 5 8.5 2.5 2.5 0 0 0 4.98 3.5zM3 9h4v12H3zM10 9h3.8v1.7h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V21h-4v-5.4c0-1.3 0-2.95-1.8-2.95s-2.08 1.4-2.08 2.85V21h-4z" /></svg>),
  x: (<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M18.9 2H22l-7.3 8.3L23 22h-6.8l-5-6.5L5.4 22H2.3l7.8-8.9L1.5 2h6.9l4.5 6zM17.7 20h1.7L7.1 4H5.3z" /></svg>),
  github: (<svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a10 10 0 0 0-3.16 19.49c.5.09.68-.22.68-.48v-1.7c-2.78.6-3.37-1.34-3.37-1.34-.45-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.61.07-.61 1 .07 1.53 1.03 1.53 1.03.9 1.53 2.36 1.09 2.94.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.09.39-1.98 1.03-2.68-.1-.25-.45-1.27.1-2.65 0 0 .84-.27 2.75 1.02a9.5 9.5 0 0 1 5 0c1.91-1.29 2.75-1.02 2.75-1.02.55 1.38.2 2.4.1 2.65.64.7 1.03 1.59 1.03 2.68 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85v2.74c0 .27.18.58.69.48A10 10 0 0 0 12 2z" /></svg>),
  youtube: (<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M23 12s0-3.2-.4-4.7a2.5 2.5 0 0 0-1.8-1.8C19.3 5 12 5 12 5s-7.3 0-8.8.5A2.5 2.5 0 0 0 1.4 7.3C1 8.8 1 12 1 12s0 3.2.4 4.7a2.5 2.5 0 0 0 1.8 1.8C4.7 19 12 19 12 19s7.3 0 8.8-.5a2.5 2.5 0 0 0 1.8-1.8C23 15.2 23 12 23 12zM9.8 15.3V8.7l5.7 3.3z" /></svg>),
};
const SOC_DEFAULT = { linkedin: "https://www.linkedin.com/in/jarjisimam/", x: "https://x.com/actionboard_ai", github: "https://github.com/actionboard-ai", youtube: "https://youtube.com/@actionboard" };
const SOC_LABEL = { linkedin: "LinkedIn", x: "X", github: "GitHub", youtube: "YouTube" };

function SocialBar({ d }) {
  const [liked, setLiked] = useState(false);
  const [following, setFollowing] = useState(false);
  const links = { ...SOC_DEFAULT, ...((d && d.socials) || {}) };
  const order = ["linkedin", "x", "github", "youtube"].filter((k) => links[k]);
  const base = (d && d.likeCount) || 1284;
  const likes = base + (liked ? 1 : 0);
  const followCount = (d && d.followCount) || "3.4k";
  return (
    <div className="social-bar">
      <button onClick={() => setLiked((v) => !v)} className={"social-act like" + (liked ? " on" : "")} aria-pressed={liked}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill={liked ? "currentColor" : "none"} stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z" /></svg>
        {liked ? "Liked" : "Like"}<b className="tabular">{likes.toLocaleString()}</b>
      </button>
      <button onClick={() => setFollowing((v) => !v)} className={"social-act follow" + (following ? " on" : "")} aria-pressed={following}>
        {following
          ? <>{Ico.check({ size: 15 })}Following</>
          : <><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"><path d="M12 5v14M5 12h14" /></svg>Follow</>}
        <span className="cnt">{followCount}</span>
      </button>
      <span className="social-div"></span>
      <div className="social-icons">
        {order.map((k) => (
          <a key={k} href={links[k]} target="_blank" rel="noopener" className="social-ico" title={SOC_LABEL[k]} aria-label={SOC_LABEL[k]}>{SOC_ICONS[k]}</a>
        ))}
      </div>
    </div>
  );
}

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