// Direction C — Like B but without the right meta sidebar.

const DirectionC = () => {
  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 + 820 }}><div style={{ maxWidth: 820 }}>
          <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>

      {/* 2-column body — TOC + article only */}
      <div style={{
        maxWidth: 1280, margin: "0 auto", padding: "0 32px 40px",
        display: "grid", gridTemplateColumns: "240px minmax(0, 820px)",
        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>
      </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, 820px)",
        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 style={{ maxWidth: 1280, margin: "0 auto", padding: "0 32px 40px" }}>
        <RelatedSection />
      </div>
    </div>
  );
};

window.DirectionC = DirectionC;