/* ============================================================
   EBTR — Homepage, three switchable layout directions:
   1) Briefing Board   — dense, structured instrument panel
   2) Editorial Stream — cinematic hero + airy magazine flow
   3) Signal Index     — numbered ledger + sticky filter rail
   ============================================================ */
const { Eyebrow: EBEyebrow, Button: EBButton } = window.EBTHubDesignSystem_ccdc9d;

/* Pass-through wrapper — content is always visible (no opacity gating).
   Motion in EBTR comes from reliable interaction transitions (hover lifts,
   progress bar, modal rise, kinetic rows) rather than fragile scroll reveals. */
function EBTRReveal({ children, motion = true, delay = 0, y = 18, style }) {
  return <div style={style}>{children}</div>;
}

function EBTRSectionHead({ eyebrow, title, count }) {
  return (
    <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 20, marginBottom: 26, paddingBottom: 16, borderBottom: "1px solid var(--border-hairline)" }}>
      <div>
        <EBEyebrow>{eyebrow}</EBEyebrow>
        <h2 style={{ fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 30, color: "var(--white)", margin: "12px 0 0", letterSpacing: "-0.01em" }}>{title}</h2>
      </div>
      {count != null && <span style={{ fontFamily: "var(--font-ui)", fontSize: 12, color: "var(--text-muted)", letterSpacing: "0.1em" }}>{String(count).padStart(2, "0")} PIECES</span>}
    </div>
  );
}

/* The homepage identity band (top of every layout) */
function EBTRBand({ layout, motion }) {
  const lines = [
    ["Technology is not the problem.", "Transformation is."],
  ];
  return (
    <EBTRReveal motion={motion} y={10}>
      <div style={{ maxWidth: 1600, margin: "0 auto", padding: "54px var(--space-7) 30px" }}>
        <Eyebrowless />
      </div>
    </EBTRReveal>
  );
  function Eyebrowless() {
    return (
      <div>
        <EBEyebrow color="orange">European Business Transformation Review</EBEyebrow>
        <h1 style={{ fontFamily: "var(--ebtr-display)", fontSize: "clamp(34px, 5vw, 58px)", lineHeight: 1.07, letterSpacing: "0.015em", color: "var(--white)", margin: "18px 0 0", maxWidth: 900, textWrap: "balance", textTransform: "uppercase" }}>
          TECHNOLOGY IS NOT<br />THE PROBLEM. <span style={{ color: "var(--ebt-orange)" }}>TRANSFORMATION IS.</span>
        </h1>
      </div>
    );
  }
}

/* ---------- Layout 1: Briefing Board ---------- */
function EBTRBriefingBoard({ items, lead, onOpen, onCategory, motion }) {
  const rest = items.filter((a) => a.id !== (lead && lead.id));
  const top = rest.slice(0, 3);
  const grid = rest.slice(3);
  return (
    <React.Fragment>
      <div style={{ maxWidth: 1600, margin: "0 auto", padding: "0 var(--space-7)" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.55fr 1fr", gap: 28, alignItems: "stretch" }} className="ebtr-board-top">
          {lead && <EBTRReveal motion={motion}><EBTRArticleCard article={lead} size="lead" onOpen={onOpen} onCategory={onCategory} /></EBTRReveal>}
          <div style={{ display: "flex", flexDirection: "column", gap: 0, borderLeft: "1px solid var(--border-hairline)", paddingLeft: 28 }} className="ebtr-board-side">
            <EBEyebrow>Latest</EBEyebrow>
            <div style={{ marginTop: 6 }}>
              {top.map((a, i) => <EBTRReveal key={a.id} motion={motion} delay={i * 60}><EBTRArticleCard article={a} size="row" onOpen={onOpen} /></EBTRReveal>)}
            </div>
          </div>
        </div>
      </div>
      <div style={{ maxWidth: 1600, margin: "64px auto 0", padding: "0 var(--space-7)" }}>
        <EBTRSectionHead eyebrow="From the Labs & the field" title="More from the Review" count={grid.length} />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }} className="ebtr-grid-3">
          {grid.map((a, i) => <EBTRReveal key={a.id} motion={motion} delay={(i % 3) * 70}><EBTRArticleCard article={a} size="lg" onOpen={onOpen} onCategory={onCategory} /></EBTRReveal>)}
        </div>
      </div>
    </React.Fragment>
  );
}

/* ---------- Layout 2: Editorial Stream ---------- */
function EBTRHero({ article, onOpen, motion }) {
  if (!article) return null;
  const cat = window.EBTR_DATA.categories[article.category];
  const a = window.EBTR_DATA.authors[article.author];
  return (
    <EBTRReveal motion={motion} y={0}>
      <div onClick={() => onOpen(article.id)} style={{ position: "relative", height: 520, cursor: "pointer", borderBottom: "1px solid var(--border-hairline)" }} className="ebtr-hero">
        <EBTRCover cover={article.cover} accent={cat.color} big src={article.coverUrl} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(90deg, rgba(11,12,16,0.92) 0%, rgba(11,12,16,0.62) 45%, transparent 90%)" }} />
        <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center" }}>
          <div style={{ maxWidth: 1600, margin: "0 auto", padding: "0 var(--space-7)", width: "100%" }}>
            <div style={{ maxWidth: 660 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 18 }}>
                <EBTRCategoryTag category={article.category} />
                {article.premium && <EBTRPremiumTag />}
              </div>
              <h1 style={{ fontFamily: "var(--ebtr-display)", fontSize: "clamp(24px, 4.2vw, 52px)", lineHeight: 1.1, letterSpacing: "0.015em", color: "var(--white)", margin: 0, textWrap: "balance", overflowWrap: "anywhere", textTransform: "uppercase" }}>{article.title}</h1>
              <p style={{ fontFamily: "var(--font-body)", fontSize: 19, lineHeight: 1.55, color: "var(--text-secondary)", margin: "22px 0 26px", maxWidth: 560 }}>{article.dek}</p>
              <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
                <EBButton variant="primary" size="md">Read the piece</EBButton>
                <span style={{ fontFamily: "var(--font-ui)", fontSize: 12, color: "var(--text-secondary)", letterSpacing: "0.06em" }}>{a.name} · {article.readingMins} MIN</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </EBTRReveal>
  );
}
function EBTREditorialStream({ items, lead, onOpen, onCategory, motion }) {
  const rest = items.filter((a) => a.id !== (lead && lead.id));
  return (
    <React.Fragment>
      <EBTRHero article={lead} onOpen={onOpen} motion={motion} />
      <div style={{ maxWidth: 1600, margin: "72px auto 0", padding: "0 var(--space-7)" }}>
        <EBTRSectionHead eyebrow="The Review" title="Latest thinking" count={rest.length} />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 28 }} className="ebtr-grid-3">
          {rest.map((a, i) => <EBTRReveal key={a.id} motion={motion} delay={(i % 2) * 80}><EBTRArticleCard article={a} size="lg" onOpen={onOpen} onCategory={onCategory} /></EBTRReveal>)}
        </div>
      </div>
    </React.Fragment>
  );
}

/* ---------- Layout 3: Signal Index ---------- */
function EBTRSignalIndex({ items, lead, onOpen, onCategory, activeCategory, motion }) {
  const cats = window.EBTR_DATA.categories;
  return (
    <div style={{ maxWidth: 1600, margin: "0 auto", padding: "0 var(--space-7)" }}>
      <div style={{ display: "grid", gridTemplateColumns: "230px 1fr", gap: 48, alignItems: "start" }} className="ebtr-signal">
        {/* sticky filter rail */}
        <aside style={{ position: "sticky", top: 92 }} className="ebtr-rail">
          <EBEyebrow>Index</EBEyebrow>
          <div style={{ display: "flex", flexDirection: "column", gap: 2, marginTop: 16 }}>
            <button onClick={() => onCategory("all")} style={railBtn(activeCategory === "all")}>
              <span style={{ width: 9, height: 9, background: "var(--white)" }} /> All signals
            </button>
            {Object.keys(cats).map((k) => (
              <button key={k} onClick={() => onCategory(k)} style={railBtn(activeCategory === k)}>
                <span style={{ width: 9, height: 9, background: ebtrAccentVar(cats[k].color) }} /> {cats[k].label}
              </button>
            ))}
          </div>
          <div style={{ marginTop: 28, paddingTop: 20, borderTop: "1px solid var(--border-hairline)", fontFamily: "var(--font-ui)", fontSize: 11, lineHeight: 1.7, color: "var(--text-muted)", letterSpacing: "0.04em" }}>
            {items.length} pieces · updated weekly<br />Pre-registered · replicated
          </div>
        </aside>
        {/* ledger */}
        <div>
          {items.map((a, i) => <EBTRSignalRow key={a.id} article={a} index={i + 1} onOpen={onOpen} motion={motion} />)}
        </div>
      </div>
    </div>
  );
  function railBtn(active) {
    return { display: "flex", alignItems: "center", gap: 10, textAlign: "left", background: active ? "rgba(255,255,255,0.04)" : "none", border: "none", borderLeft: active ? "2px solid var(--ebt-orange)" : "2px solid transparent", padding: "9px 12px", cursor: "pointer", fontFamily: "var(--font-ui)", fontSize: 11.5, letterSpacing: "0.06em", textTransform: "uppercase", color: active ? "var(--white)" : "var(--text-secondary)" };
  }
}
function EBTRSignalRow({ article, index, onOpen, motion }) {
  const [hover, setHover] = React.useState(false);
  const cat = window.EBTR_DATA.categories[article.category];
  const a = window.EBTR_DATA.authors[article.author];
  const accent = ebtrAccentVar(cat.color);
  return (
    <EBTRReveal motion={motion} y={12}>
      <div onClick={() => onOpen(article.id)} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
        style={{ position: "relative", display: "grid", gridTemplateColumns: "54px 1fr 150px", gap: 22, alignItems: "center", padding: "26px 16px 26px 0", borderBottom: "1px solid var(--border-hairline)", cursor: "pointer", background: hover ? "rgba(255,255,255,0.025)" : "transparent", transition: "background var(--dur-base)" }}>
        <div style={{ fontFamily: "var(--font-ui)", fontSize: 16, color: hover ? accent : "var(--text-muted)", letterSpacing: "0.04em", transition: "color var(--dur-base)" }}>{String(index).padStart(2, "0")}</div>
        <div style={{ minWidth: 0 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 9 }}>
            <EBTRCategoryTag category={article.category} />
            {article.premium && <EBTRPremiumTag />}
          </div>
          <div style={{ fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 23, lineHeight: 1.18, color: hover ? "var(--blue-400)" : "var(--text-primary)", transition: "color var(--dur-base)", transform: hover ? "translateX(6px)" : "none", transitionProperty: "color, transform", transitionDuration: "var(--dur-base)" }}>{article.title}</div>
          <p style={{ fontFamily: "var(--font-body)", fontSize: 15, lineHeight: 1.5, color: "var(--text-secondary)", margin: "8px 0 0", maxWidth: 620, display: hover ? "block" : "block" }}>{article.dek}</p>
        </div>
        <div style={{ textAlign: "right", fontFamily: "var(--font-ui)", fontSize: 11, color: "var(--text-muted)", letterSpacing: "0.04em", lineHeight: 1.7 }}>
          <div style={{ color: "var(--text-secondary)" }}>{a.name}</div>
          <div>{article.readingMins} MIN</div>
          <div style={{ marginTop: 8, color: hover ? accent : "var(--text-muted)", fontSize: 16, transition: "color var(--dur-base)" }}>→</div>
        </div>
      </div>
    </EBTRReveal>
  );
}

/* ---------- Category filtered view (shared) ---------- */
function EBTRCategoryView({ items, category, onOpen, onCategory, motion }) {
  const c = window.EBTR_DATA.categories[category];
  return (
    <div style={{ maxWidth: 1600, margin: "0 auto", padding: "8px var(--space-7) 0" }}>
      <EBTRReveal motion={motion}>
        <div style={{ padding: "20px 0 36px", borderBottom: "1px solid var(--border-hairline)", marginBottom: 36 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
            <span style={{ width: 14, height: 14, background: ebtrAccentVar(c.color) }} />
            <span style={{ fontFamily: "var(--font-ui)", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--text-secondary)" }}>Section</span>
          </div>
          <h1 style={{ fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 44, color: "var(--white)", margin: 0, letterSpacing: "-0.01em" }}>{c.label}</h1>
          <p style={{ fontFamily: "var(--font-body)", fontSize: 18, lineHeight: 1.55, color: "var(--text-secondary)", maxWidth: 620, margin: "16px 0 0" }}>{c.blurb}</p>
        </div>
      </EBTRReveal>
      {items.length === 0 ? (
        <p style={{ fontFamily: "var(--font-body)", color: "var(--text-muted)", padding: "40px 0" }}>No pieces in this section yet — they ship weekly.</p>
      ) : (
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }} className="ebtr-grid-3">
          {items.map((a, i) => <EBTRReveal key={a.id} motion={motion} delay={(i % 3) * 70}><EBTRArticleCard article={a} size="lg" onOpen={onOpen} onCategory={onCategory} /></EBTRReveal>)}
        </div>
      )}
    </div>
  );
}

/* ---------- Layout 0: Research Highlight landing (Sloan-style) ---------- */
function EBTRHighlightLanding({ items, lead, onOpen, onCategory, motion }) {
  const cats = window.EBTR_DATA.categories;
  const author = window.EBTR_DATA.authors[lead.author];
  const leadCat = cats[lead.category];
  const readNext = items.filter((a) => a.id !== lead.id).slice(0, 5);
  const readNextIds = readNext.map((a) => a.id);
  const rest = items.filter((a) => a.id !== lead.id && !readNextIds.includes(a.id));
  const dateStr = new Date(lead.date).toLocaleDateString("en-GB", { day: "numeric", month: "short", year: "numeric" });
  const railHead = { paddingBottom: 12, borderBottom: "2px solid var(--ebt-blue)", marginBottom: 16 };
  const railLabel = { fontFamily: "var(--font-ui)", fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--blue-400)" };

  return (
    <div style={{ maxWidth: 1600, margin: "0 auto", padding: "44px var(--space-7) 0" }}>
      <div className="ebtr-landing-grid" style={{ display: "grid", gridTemplateColumns: "minmax(0, 1fr) 340px", gap: 60, alignItems: "start" }}>

        {/* FEATURED — the research highlight */}
        <EBTRReveal motion={motion}>
          <article onClick={() => onOpen(lead.id)} style={{ cursor: "pointer" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18 }}>
              <span style={{ width: 9, height: 9, background: ebtrAccentVar(leadCat.color) }} />
              <span style={railLabel}>Research Highlight</span>
              {lead.premium && <EBTRPremiumTag />}
            </div>
            <h1 style={{ fontFamily: "var(--ebtr-display)", fontSize: "clamp(26px, 3.8vw, 54px)", lineHeight: 1.08, letterSpacing: "0.015em", color: "var(--white)", margin: 0, textWrap: "balance", overflowWrap: "anywhere", textTransform: "uppercase" }}>{lead.title}</h1>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 20, lineHeight: 1.5, color: "var(--text-secondary)", margin: "22px 0 24px", maxWidth: 760, textWrap: "pretty" }}>{lead.dek}</p>
            <div style={{ display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap", paddingBottom: 26, borderBottom: "1px solid var(--border-hairline)" }}>
              <span style={{ fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 15, color: "var(--white)" }}>{author.name}</span>
              <span style={{ fontFamily: "var(--font-ui)", fontSize: 11, letterSpacing: "0.05em", color: "var(--text-muted)" }}>{dateStr} · {lead.readingMins} MIN READ</span>
            </div>
            <div style={{ height: 500, border: "1px solid var(--border-hairline)", margin: "28px 0 26px" }}><EBTRCover cover={lead.cover} accent={leadCat.color} big src={lead.coverUrl} /></div>
            <EBButton variant="primary" size="lg" className="ebtr-hero-cta">Read the highlight</EBButton>
          </article>
        </EBTRReveal>

        {/* RIGHT SIDEBAR — Topics + What to Read Next */}
        <aside className="ebtr-landing-side" style={{ position: "sticky", top: 92 }}>
          <div>
            <div style={railHead}><span style={railLabel}>Topics</span></div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
              {Object.keys(cats).map((k) => (
                <button key={k} onClick={() => onCategory(k)} className="ebtr-topic" style={{ display: "inline-flex", alignItems: "center", gap: 7, background: "none", border: "1px solid var(--border-strong)", padding: "8px 13px", cursor: "pointer", fontFamily: "var(--font-ui)", fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--text-secondary)", borderRadius: "var(--radius-sm)", whiteSpace: "nowrap", transition: "color var(--dur-base), border-color var(--dur-base)" }}>
                  <span style={{ width: 8, height: 8, background: ebtrAccentVar(cats[k].color) }} />{cats[k].label}
                </button>
              ))}
            </div>
          </div>

          <div style={{ marginTop: 44 }}>
            <div style={{ ...railHead, marginBottom: 6 }}><span style={railLabel}>What to Read Next</span></div>
            {readNext.map((a, i) => {
              const rc = cats[a.category];
              return (
                <button key={a.id} onClick={() => onOpen(a.id)} className="ebtr-next" style={{ display: "block", width: "100%", textAlign: "left", background: "none", border: "none", borderBottom: "1px solid var(--border-hairline)", padding: "18px 0", cursor: "pointer" }}>
                  <div style={{ fontFamily: "var(--font-ui)", fontSize: 14, color: ebtrAccentVar(rc.color), marginBottom: 7 }}>{String(i + 1).padStart(2, "0")}</div>
                  <div className="ebtr-next-t" style={{ fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 16.5, lineHeight: 1.25, color: "var(--text-primary)", transition: "color var(--dur-base)" }}>{a.title}</div>
                  <div style={{ fontFamily: "var(--font-ui)", fontSize: 10, letterSpacing: "0.06em", color: "var(--text-muted)", marginTop: 7 }}>{a.readingMins} MIN{a.premium ? " · PREMIUM" : ""}</div>
                </button>
              );
            })}
          </div>
        </aside>
      </div>

      {/* More from the Review */}
      {rest.length > 0 && (
        <div style={{ marginTop: 88 }}>
          <EBTRSectionHead eyebrow="From the Labs & the field" title="More from the Review" count={rest.length} />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }} className="ebtr-grid-3">
            {rest.map((a, i) => <EBTRReveal key={a.id} motion={motion} delay={(i % 3) * 60}><EBTRArticleCard article={a} size="lg" onOpen={onOpen} onCategory={onCategory} /></EBTRReveal>)}
          </div>
        </div>
      )}
    </div>
  );
}

/* ---------- Home shell ---------- */
function EBTRHome({ layout, activeCategory, onOpen, onCategory, motion }) {
  const all = window.EBTR_DATA.articles;
  const filtered = activeCategory === "all" ? all : all.filter((a) => a.category === activeCategory);
  const lead = all.find((a) => a.featured) || all[0];

  if (activeCategory !== "all") {
    return (
      <main style={{ paddingTop: 40, paddingBottom: 40 }}>
        <EBTRCategoryView items={filtered} category={activeCategory} onOpen={onOpen} onCategory={onCategory} motion={motion} />
      </main>
    );
  }

  return (
    <main style={{ paddingBottom: 40 }}>
      {(layout === "briefing" || layout === "signal") && <EBTRBand layout={layout} motion={motion} />}
      {layout === "highlight" && <EBTRHighlightLanding items={all} lead={lead} onOpen={onOpen} onCategory={onCategory} motion={motion} />}
      {layout === "briefing" && <EBTRBriefingBoard items={all} lead={lead} onOpen={onOpen} onCategory={onCategory} motion={motion} />}
      {layout === "editorial" && <EBTREditorialStream items={all} lead={lead} onOpen={onOpen} onCategory={onCategory} motion={motion} />}
      {layout === "signal" && <div style={{ paddingTop: 8 }}><EBTRSignalIndex items={all} lead={lead} onOpen={onOpen} onCategory={onCategory} activeCategory={activeCategory} motion={motion} /></div>}
    </main>
  );
}

Object.assign(window, { EBTRHome, EBTRReveal });