// Direction B — Three-column: TOC + article + meta sidebar (the user's pick)

const DirectionB = () => {
  const a = ARTICLE;
  return (
    <div style={{ background: "#fff", color: "#3D3D3D", fontFamily: "var(--kt-font-sans, -apple-system, system-ui, sans-serif)", fontSize: 17, lineHeight: 1.7 }}>
      <WebinarBar />
      <SiteHeader />

      {/* Breadcrumb */}
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "48px 32px 0", fontSize: 13 }}>
        <div style={{ paddingLeft: 288 }}>
          <a href="#" style={{ color: "#0052FF", textDecoration: "none", fontWeight: 600 }}>Blog</a>
          <span style={{ margin: "0 8px", color: "#C8C8C8" }}>›</span>
          <a href="#" style={{ color: "#0052FF", textDecoration: "none", fontWeight: 600 }}>{a.category}</a>
          <span style={{ margin: "0 8px", color: "#C8C8C8" }}>›</span>
          <span style={{ color: "#5B616E" }}>Nasdaq 100 Kursprognose 2026</span>
        </div>
      </div>

      {/* Article header — left-aligned to article column (TOC width + gap) */}
      <header style={{ maxWidth: 1280, margin: "0 auto", padding: "24px 32px 40px" }}>
        <div style={{ paddingLeft: 288 /* 240 TOC + 48 gap */, maxWidth: 288 + 684 }}><div style={{ maxWidth: 684 }}>
          <h1 style={{
            fontSize: 52, fontWeight: 600, lineHeight: 1.15, color: "#0A0B0D",
            margin: "16px 0 20px", textWrap: "balance", letterSpacing: "-0.015em"
          }}>
            Nasdaq 100 Kursprognose 2026: Wo könnte der Index in den nächsten 12 Monaten stehen?
          </h1>
          <p style={{ fontSize: 20, lineHeight: 1.5, color: "#5B616E", margin: "0 0 28px" }}>{a.dek}</p>
          {/* Row 2: meta */}
          <div style={{ display: "flex", flexWrap: "wrap", gap: 12, alignItems: "center", color: "#5B616E", fontSize: 14, marginBottom: 20 }}>
            <span>Zuletzt aktualisiert: {a.date}</span>
            <span style={{ color: "#C8C8C8" }}>|</span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
              <ClockIcon /> {a.readMin} Min
            </span>
          </div>

          {/* Row 3: author + reviewer */}
          <div style={{ display: "flex", gap: 24, alignItems: "center", flexWrap: "wrap" }}>
            <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
              <Avatar initials={a.author.initials} color={a.author.color} image={a.author.image} alt={a.author.name} size={42} />
              <div style={{ lineHeight: 1.3 }}>
                <div style={{ fontSize: 11, color: "#5B616E", textTransform: "uppercase", letterSpacing: 1, fontWeight: 700 }}>Autor</div>
                <div style={{ fontWeight: 700, color: "#0A0B0D", fontSize: 15 }}>{a.author.name}</div>
              </div>
            </div>
            <div style={{ width: 1, height: 32, background: "#EEF0F3" }} />
            <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
              <Avatar initials={a.reviewer.initials} color={a.reviewer.color} image={a.reviewer.image} alt={a.reviewer.name} size={42} />
              <div style={{ lineHeight: 1.3 }}>
                <div style={{ fontSize: 11, color: "#5B616E", textTransform: "uppercase", letterSpacing: 1, fontWeight: 700 }}>Geprüft von</div>
                <div style={{ fontWeight: 700, color: "#0A0B0D", fontSize: 15 }}>{a.reviewer.name}</div>
              </div>
            </div>
          </div>
        </div>
        </div>
      </header>

      {/* 3-column body */}
      <div style={{
        maxWidth: 1280, margin: "0 auto", padding: "0 32px 40px",
        display: "grid", gridTemplateColumns: "240px minmax(0, 1fr) 260px",
        gap: 48, alignItems: "flex-start"
      }}>
        {/* TOC */}
        <aside style={{ position: "sticky", top: 90 }}>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 2, color: "#5B616E", marginBottom: 14, textTransform: "uppercase" }}>
            Inhalt
          </div>
          <nav style={{ display: "flex", flexDirection: "column", gap: 2, borderLeft: "2px solid #EEF0F3" }}>
            {a.toc.map((t, i) => (
              <a key={t.id} href={`#${t.id}`} style={{
                padding: "10px 0 10px 16px",
                fontSize: 14, lineHeight: 1.4,
                color: i === 1 ? "#0A0B0D" : "#5B616E",
                fontWeight: i === 1 ? 700 : 500,
                textDecoration: "none",
                marginLeft: -2,
                borderLeft: i === 1 ? "2px solid #0052FF" : "2px solid transparent"
              }}>{t.label}</a>
            ))}
          </nav>
          <div style={{ marginTop: 28, padding: "16px 14px", background: "#F5F8FF", borderRadius: 12 }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 1, color: "#5B616E", marginBottom: 10, textTransform: "uppercase" }}>Teilen</div>
            <ShareBar />
          </div>
        </aside>

        {/* Article body */}
        <article id="article-body" style={{ minWidth: 0, fontSize: 18, lineHeight: 1.75, color: "#3D3D3D" }}>
          <ArticleBody />
        </article>

        {/* Meta sidebar */}
        <aside style={{ position: "sticky", top: 90, display: "flex", flexDirection: "column", gap: 20 }}>
          <div style={{ padding: 20, border: "1px solid #EEF0F3", borderRadius: 14, background: "linear-gradient(180deg, #FFF9ED 0%, #fff 100%)" }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 2, color: "#5B616E", marginBottom: 8, textTransform: "uppercase" }}>Newsletter</div>
            <div style={{ fontSize: 16, fontWeight: 600, color: "#0A0B0D", marginBottom: 8, lineHeight: 1.35 }}>Marktanalyse jeden Sonntag.</div>
            <div style={{ fontSize: 13, color: "#5B616E", marginBottom: 14, lineHeight: 1.5 }}>Saisonalität, Setups und Risiko-Ausblick — kompakt.</div>
            <a href="#" style={{
              display: "block", textAlign: "center",
              background: "#FFD814", color: "#0A0B0D", textDecoration: "none",
              fontWeight: 700, fontSize: 14, padding: "10px 16px", borderRadius: 12
            }}>Kostenlos abonnieren</a>
          </div>

          {/* Ad slot — image ad */}
          <div>
            <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: 2, color: "#9aa1ab", marginBottom: 8, textTransform: "uppercase" }}>Anzeige</div>
            <a href="#" style={{
              textDecoration: "none", color: "#fff",
              borderRadius: 14, overflow: "hidden",
              background: "linear-gradient(160deg, #0052FF 0%, #003ACC 55%, #113355 100%)",
              boxShadow: "0px 4px 18px rgba(0,82,255,0.20)",
              minHeight: 360, position: "relative",
              display: "flex", flexDirection: "column", justifyContent: "space-between",
              padding: 20, boxSizing: "border-box"
            }}>
              <div>
                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 2, color: "#FFD814", textTransform: "uppercase", marginBottom: 10 }}>
                  Daytrading Signale
                </div>
                <div style={{ fontSize: 22, fontWeight: 600, lineHeight: 1.2, marginBottom: 8 }}>
                  Präzise Einstiege für Nasdaq, DAX &amp; Co.
                </div>
                <div style={{ fontSize: 13, opacity: 0.85, lineHeight: 1.5 }}>
                  Mehrfach täglich Live-Setups direkt aufs Smartphone. 14 Tage testen.
                </div>
              </div>
              <div style={{
                position: "absolute", right: -30, top: 90, width: 200, height: 130,
                opacity: 0.25, pointerEvents: "none"
              }}>
                <svg viewBox="0 0 200 130" width="200" height="130">
                  <path d="M0 100 L30 90 L60 95 L90 70 L120 80 L150 50 L180 60 L200 30"
                        fill="none" stroke="#FFD814" strokeWidth="2.5" />
                  <circle cx="180" cy="60" r="4" fill="#FFD814" />
                </svg>
              </div>
              <div style={{
                background: "#FFD814", color: "#0A0B0D", textAlign: "center",
                fontWeight: 700, fontSize: 14, padding: "10px 16px", borderRadius: 12
              }}>Jetzt 14 Tage testen ›</div>
            </a>
          </div>
        </aside>
      </div>

      {/* Author byline — same grid as the body so widths match exactly */}
      <div style={{
        maxWidth: 1280, margin: "0 auto", padding: "0 32px 40px",
        display: "grid", gridTemplateColumns: "240px minmax(0, 1fr) 260px",
        gap: 48
      }}>
        <div />
        <div>
          <AffiliateDisclaimer />
          <aside style={{
            margin: "20px 0 0", padding: 32, background: "linear-gradient(135deg, #F5F8FF 0%, #fff 100%)",
            border: "1px solid #EEF0F3", borderRadius: 16,
            display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 24, alignItems: "center"
          }}>
            <Avatar initials={a.author.initials} color={a.author.color} image={a.author.image} alt={a.author.name} size={72} />
            <div>
              <div style={{ fontSize: 12, fontWeight: 700, color: "#0052FF", letterSpacing: 1.5, marginBottom: 4 }}>ÜBER DEN AUTOR</div>
              <div style={{ fontSize: 22, fontWeight: 700, color: "#0A0B0D", marginBottom: 4 }}>{a.author.name}</div>
              <div style={{ fontSize: 14, color: "#5B616E", marginBottom: 8 }}>{a.author.role}</div>
              <p style={{ margin: 0, fontSize: 15, lineHeight: 1.6, color: "#3D3D3D" }}>
                {a.author.bio}
              </p>
            </div>
            <a href="#" style={{
              border: "1px solid #0052FF", color: "#0052FF", textDecoration: "none",
              fontWeight: 700, fontSize: 14, padding: "10px 18px", borderRadius: 12, whiteSpace: "nowrap"
            }}>Alle Artikel ›</a>
          </aside>
        </div>
        <div />
      </div>

      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 32px 40px" }}>
        <RelatedSection />
      </div>
    </div>
  );
};

const Stat = ({ label, value, sub, tone, last }) => {
  const colors = { up: "#11ba82", down: "#ed0f0f", warn: "#ffa500", neutral: "#0A0B0D" };
  return (
    <div style={{
      display: "flex", justifyContent: "space-between", alignItems: "center",
      padding: "12px 0", borderBottom: last ? "none" : "1px solid #EEF0F3"
    }}>
      <div>
        <div style={{ fontSize: 12, color: "#5B616E", marginBottom: 2 }}>{label}</div>
        <div style={{ fontSize: 11, color: "#9aa1ab" }}>{sub}</div>
      </div>
      <div style={{ fontFamily: "ui-monospace, monospace", fontSize: 16, fontWeight: 700, color: colors[tone] }}>
        {value}
      </div>
    </div>
  );
};

window.DirectionB = DirectionB;