// Direction A — Classic centered single column (Medium-style, editorial calm)

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

      <article style={{ maxWidth: 720, margin: "0 auto", padding: "56px 32px 0" }}>
        <div style={{ fontSize: 13, marginBottom: 4 }}>
          <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>
        <h1 style={{
          fontSize: 48, fontWeight: 600, lineHeight: 1.2, color: "#0A0B0D",
          margin: "16px 0 24px", textWrap: "balance", letterSpacing: "-0.01em"
        }}>
          Nasdaq 100 Kursprognose 2026: Wo könnte der Index in den nächsten 12 Monaten stehen?
        </h1>

        {/* Row 2: meta */}
        <div style={{ display: "flex", flexWrap: "wrap", gap: 12, alignItems: "center", color: "#5B616E", fontSize: 14, marginBottom: 24 }}>
          <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", paddingBottom: 28, borderBottom: "1px solid #EEF0F3", 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 style={{ marginLeft: "auto" }}>
            <ShareBar />
          </div>
        </div>

        <div style={{ paddingTop: 32, fontSize: 18, lineHeight: 1.7, color: "#3D3D3D" }}>
          <p style={{ fontSize: 18, lineHeight: 1.6, color: "#5B616E", marginTop: 0, fontWeight: 400 }}>
            {a.dek}
          </p>
          <ArticleBody />
          <AffiliateDisclaimer />
        </div>

        {/* Author byline card at bottom */}
        <aside style={{
          margin: "40px 0", padding: 28, background: "#F5F8FF", borderRadius: 16,
          display: "flex", gap: 20, alignItems: "flex-start"
        }}>
          <Avatar initials={a.author.initials} color={a.author.color} image={a.author.image} alt={a.author.name} size={64} />
          <div>
            <div style={{ fontSize: 12, fontWeight: 700, color: "#0052FF", letterSpacing: 1.5, marginBottom: 4 }}>ÜBER DEN AUTOR</div>
            <div style={{ fontSize: 20, fontWeight: 700, color: "#0A0B0D", marginBottom: 4 }}>{a.author.name}</div>
            <div style={{ fontSize: 14, color: "#5B616E", marginBottom: 10 }}>{a.author.role}</div>
            <p style={{ margin: 0, fontSize: 15, lineHeight: 1.6, color: "#3D3D3D" }}>
              {a.author.bio}
            </p>
            <a href="#" style={{ display: "inline-block", marginTop: 12, color: "#0052FF", fontWeight: 600, fontSize: 14, textDecoration: "none" }}>Alle Artikel von Karsten ›</a>
          </div>
        </aside>

        <RelatedSection />
      </article>
    </div>
  );
};

window.DirectionA = DirectionA;