// ConstructionDaily article primitives — V3 Dense desktop building blocks.
// Adapted from /tmp/gcd-news-article-v2/design_handoff_v3_dense/article-primitives.jsx.
// All numeric design tokens preserved verbatim.

const { useState: cdUseState, useEffect: cdUseEffect, useRef: cdUseRef } = React;

function scrollToBook(e) {
  if (e && e.preventDefault) e.preventDefault();
  const el = document.getElementById('book');
  if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

function PlaceholderImage({ caption, ratio = "16/9", label = "PHOTOGRAPH", style = {} }) {
  return (
    <figure style={{ margin: 0, ...style }}>
      <div
        style={{
          width: "100%",
          aspectRatio: ratio,
          background:
            "repeating-linear-gradient(135deg, #ececec 0 8px, #f4f4f4 8px 16px)",
          border: "1px solid #d6d6d6",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          color: "#6a6a6a",
          fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
          fontSize: 11,
          letterSpacing: 1,
          textTransform: "uppercase",
        }}
      >
        [ {label} ]
      </div>
      {caption && (
        <figcaption
          style={{
            marginTop: 8,
            fontSize: 12,
            lineHeight: 1.4,
            color: "#5a5a5a",
            fontFamily: "var(--body-font)",
          }}
        >
          <span style={{ color: "#000", fontWeight: 600 }}>Photograph </span>
          {caption}
        </figcaption>
      )}
    </figure>
  );
}

function Masthead({ dense = false }) {
  const navItems = [
    "Roofing",
    "Concrete",
    "Framing",
    "Trades",
    "Permits & Code",
    "Contracts",
    "Investigations",
    "Tools",
  ];
  return (
    <header
      style={{
        borderBottom: "1px solid #000",
        borderTop: dense ? "3px solid #000" : "none",
        background: "#fff",
      }}
    >
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          padding: "8px 32px",
          borderBottom: "1px solid #d4d4d4",
          fontFamily: "var(--body-font)",
          fontSize: 11,
          letterSpacing: 0.5,
          color: "#3a3a3a",
        }}
      >
        <span>Monday, May 4, 2026 &middot; Vol. XII, No. 124</span>
        <span style={{ display: "flex", gap: 16 }}>
          <span>Today's Paper</span>
          <span>Newsletters</span>
          <span style={{ borderLeft: "1px solid #999", paddingLeft: 16 }}>
            Subscribe
          </span>
        </span>
      </div>
      <div
        style={{
          textAlign: "center",
          padding: dense ? "16px 32px 12px" : "28px 32px 20px",
          fontFamily: "var(--headline-font)",
          fontWeight: 800,
          fontSize: dense ? 36 : 52,
          letterSpacing: -1,
          lineHeight: 1,
        }}
      >
        ConstructionDaily<span style={{ fontWeight: 400, fontStyle: "italic" }}>.com</span>
      </div>
      <nav
        style={{
          display: "flex",
          justifyContent: "center",
          gap: 28,
          padding: "10px 32px",
          borderTop: "1px solid #d4d4d4",
          fontFamily: "var(--body-font)",
          fontSize: 13,
          fontWeight: 500,
          textTransform: "uppercase",
          letterSpacing: 0.6,
        }}
      >
        {navItems.map((n) => (
          <span key={n} style={{ color: n === "Investigations" ? "#000" : "#444" }}>
            {n}
          </span>
        ))}
      </nav>
    </header>
  );
}

function SectionLabel({ section, eyebrow }) {
  return (
    <div
      style={{
        display: "flex",
        gap: 12,
        alignItems: "center",
        fontFamily: "var(--body-font)",
        fontSize: 11,
        letterSpacing: 1.5,
        textTransform: "uppercase",
        fontWeight: 700,
      }}
    >
      <span>{section}</span>
      <span style={{ color: "#999" }}>|</span>
      <span style={{ color: "#666", fontWeight: 500 }}>{eyebrow}</span>
    </div>
  );
}

function Byline({ author, title, date, readTime }) {
  return (
    <div
      style={{
        fontFamily: "var(--body-font)",
        fontSize: 13,
        lineHeight: 1.5,
        color: "#333",
        display: "flex",
        flexWrap: "wrap",
        gap: 8,
        alignItems: "baseline",
      }}
    >
      <span>
        By <span style={{ fontWeight: 700, color: "#000" }}>{author}</span>
      </span>
      <span style={{ color: "#888" }}>&middot;</span>
      <span style={{ color: "#666" }}>{title}</span>
      <span style={{ color: "#888" }}>&middot;</span>
      <span>{date}</span>
      <span style={{ color: "#888" }}>&middot;</span>
      <span style={{ color: "#666" }}>{readTime}</span>
    </div>
  );
}

function H2({ id, children }) {
  return (
    <h2
      id={id}
      style={{
        fontFamily: "var(--headline-font)",
        fontWeight: 700,
        fontSize: "1.55em",
        lineHeight: 1.2,
        margin: "1.6em 0 0.6em",
        letterSpacing: -0.3,
      }}
    >
      {children}
    </h2>
  );
}

function PullQuote({ quote, attr }) {
  return (
    <blockquote
      style={{
        margin: "32px 0",
        padding: "20px 0",
        borderTop: "3px solid #000",
        borderBottom: "1px solid #000",
        textAlign: "center",
      }}
    >
      <p
        style={{
          margin: 0,
          fontFamily: "var(--headline-font)",
          fontSize: "1.7em",
          lineHeight: 1.25,
          fontWeight: 600,
          maxWidth: "90%",
          marginInline: "auto",
        }}
      >
        &ldquo;{quote}&rdquo;
      </p>
      <p
        style={{
          margin: "14px 0 0",
          fontSize: 12,
          letterSpacing: 0.5,
          textTransform: "uppercase",
          color: "#555",
          fontWeight: 600,
        }}
      >
        &mdash; {attr}
      </p>
    </blockquote>
  );
}

function ArticleBody({ topic, bodySize = 18 }) {
  return (
    <div
      style={{
        fontFamily: "var(--body-font)",
        fontSize: bodySize,
        lineHeight: 1.65,
        color: "#1a1a1a",
      }}
    >
      <p
        style={{
          margin: "0 0 0.6em",
          fontFamily: "var(--body-font)",
          fontSize: 11,
          letterSpacing: 1.5,
          fontWeight: 700,
          lineHeight: 1.4,
        }}
      >
        {topic.location} &mdash;
      </p>
      <p style={{ margin: 0 }}>
        <span style={{ float: "left", fontFamily: "var(--headline-font)", fontSize: bodySize * 3.6, lineHeight: 0.85, paddingRight: 8, paddingTop: 4, fontWeight: 700 }}>
          {topic.intro.charAt(0)}
        </span>
        {topic.intro.slice(1)}
      </p>
      <p style={{ marginTop: "1em", marginBottom: 0 }}>{topic.intro2}</p>

      <H2 id="h2-1">{topic.h2_1}</H2>
      <p style={{ margin: 0 }}>{topic.p1}</p>
      <p style={{ marginTop: "1em", marginBottom: 0 }}>{topic.p2}</p>

      <PullQuote quote={topic.pullquote} attr={topic.pullattr} />

      <H2 id="h2-2">{topic.h2_2}</H2>
      <p style={{ margin: 0 }}>{topic.p3}</p>
      <p style={{ marginTop: "1em", marginBottom: 0 }}>{topic.list_intro}</p>
      <ol style={{ marginTop: "1em", paddingLeft: "1.4em", marginBottom: 0 }}>
        {topic.list.map((item, i) => (
          <li key={i} style={{ marginBottom: "0.6em" }}>
            <strong>{item[0]}</strong>
            {item[1]}
          </li>
        ))}
      </ol>
    </div>
  );
}

function ArticleBodyTail({ topic, bodySize = 18 }) {
  return (
    <div
      style={{
        fontFamily: "var(--body-font)",
        fontSize: bodySize,
        lineHeight: 1.65,
        color: "#1a1a1a",
      }}
    >
      <H2 id="h2-3">{topic.h2_3}</H2>
      <p style={{ margin: 0 }}>{topic.p4}</p>
      <p style={{ marginTop: "1em", marginBottom: 0 }}>{topic.p5}</p>

      <H2 id="h2-4">{topic.h2_4}</H2>
      <p style={{ margin: 0 }}>{topic.p6}</p>
      <p style={{ marginTop: "1em", marginBottom: 0 }}>{topic.p7}</p>
      <p style={{ marginTop: "1em", marginBottom: 0 }}>{topic.p8}</p>

      <hr style={{ border: 0, borderTop: "1px solid #ccc", margin: "32px 0 16px" }} />
      <p
        style={{
          fontStyle: "italic",
          fontSize: bodySize - 4,
          color: "#555",
          margin: 0,
          lineHeight: 1.5,
        }}
      >
        {topic.kicker}
      </p>
    </div>
  );
}

// Trust row — GCD-substantiable values.
// Renders with QBCC institutional badge + 150+ renos + 0 surprise variations.
function TrustRow() {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "space-between",
        gap: 12,
        paddingTop: 12,
        borderTop: "1px solid #eee",
      }}
    >
      {/* TODO: CEO_CONFIRM exact figure */}
      <div>
        <div style={{ fontFamily: "var(--headline-font)", fontWeight: 700, fontSize: 22, lineHeight: 1 }}>
          QBCC
        </div>
        <div style={{ fontSize: 10, letterSpacing: 0.8, textTransform: "uppercase", color: "#666", marginTop: 2 }}>
          Licensed
        </div>
      </div>
      {/* TODO: CEO_CONFIRM exact figure */}
      <div>
        <div style={{ fontFamily: "var(--headline-font)", fontWeight: 700, fontSize: 22, lineHeight: 1 }}>
          150<span style={{ fontSize: 12 }}>+ renos</span>
        </div>
        <div style={{ fontSize: 10, letterSpacing: 0.8, textTransform: "uppercase", color: "#666", marginTop: 2 }}>
          Renovations delivered
        </div>
      </div>
      {/* TODO: CEO_CONFIRM exact figure */}
      <div>
        <div style={{ fontFamily: "var(--headline-font)", fontWeight: 700, fontSize: 22, lineHeight: 1 }}>
          0
        </div>
        <div style={{ fontSize: 10, letterSpacing: 0.8, textTransform: "uppercase", color: "#666", marginTop: 2 }}>
          Surprise variations
        </div>
      </div>
    </div>
  );
}

function SidebarPromo({ sticky = false, compact = false }) {
  return (
    <aside
      style={{
        border: "1px solid #000",
        background: "#fff",
        padding: compact ? 18 : 22,
        position: sticky ? "sticky" : "static",
        top: 24,
        fontFamily: "var(--body-font)",
      }}
    >
      <div
        style={{
          fontSize: 10,
          letterSpacing: 1.5,
          textTransform: "uppercase",
          fontWeight: 700,
          color: "#666",
          marginBottom: 10,
          paddingBottom: 8,
          borderBottom: "1px solid #ddd",
        }}
      >
        Sponsored by ConstructionDaily Verified
      </div>
      <h3
        style={{
          fontFamily: "var(--headline-font)",
          fontWeight: 700,
          fontSize: compact ? 22 : 26,
          lineHeight: 1.15,
          margin: "0 0 10px",
          letterSpacing: -0.3,
        }}
      >
        Get a no-cost contract review with a Verified builder.
      </h3>
      <p
        style={{
          margin: "0 0 14px",
          fontSize: 14,
          lineHeight: 1.5,
          color: "#333",
        }}
      >
        Before you sign, schedule a 30-minute consultation with a Verified local builder. We'll review your contract, flag the provisional-sum lines, and tell you which variations clauses to negotiate before you commit.
      </p>
      <TrustRow />
      <button
        type="button"
        className="cd-cta-btn"
        onClick={scrollToBook}
        style={{
          display: "block",
          width: "100%",
          marginTop: 16,
          padding: "14px 16px",
          background: "#000",
          color: "#fff",
          border: "none",
          fontFamily: "var(--body-font)",
          fontSize: 14,
          fontWeight: 700,
          letterSpacing: 0.5,
          textTransform: "uppercase",
        }}
      >
        Schedule Consultation &rarr;
      </button>
      <p
        style={{
          margin: "10px 0 0",
          fontSize: 11,
          color: "#777",
          textAlign: "center",
        }}
      >
        Free &middot; No obligation &middot; Takes 90 seconds to book
      </p>
    </aside>
  );
}

function InlinePromo() {
  return (
    <aside
      style={{
        margin: "40px 0",
        padding: "28px 32px",
        borderTop: "3px double #000",
        borderBottom: "3px double #000",
        background: "#fafafa",
        fontFamily: "var(--body-font)",
      }}
    >
      <div
        style={{
          fontSize: 10,
          letterSpacing: 1.5,
          textTransform: "uppercase",
          fontWeight: 700,
          color: "#666",
          marginBottom: 10,
        }}
      >
        A note from our sponsor &middot; ConstructionDaily Verified
      </div>
      <div style={{ display: "flex", gap: 28, alignItems: "flex-start", flexWrap: "wrap" }}>
        <div style={{ flex: "1 1 320px" }}>
          <h3
            style={{
              fontFamily: "var(--headline-font)",
              fontWeight: 700,
              fontSize: 26,
              lineHeight: 1.15,
              margin: "0 0 8px",
              letterSpacing: -0.3,
            }}
          >
            Reading this article in the middle of getting bids?
          </h3>
          <p style={{ margin: 0, fontSize: 15, lineHeight: 1.55, color: "#222" }}>
            Schedule a 30-minute call with a Verified local builder. We'll review your contract, walk you through the four mechanisms above, and tell you exactly which clauses to redline before you sign. Free, no obligation, no sales pitch.
          </p>
        </div>
        <div style={{ flex: "0 0 240px", display: "flex", flexDirection: "column", gap: 10 }}>
          <button
            type="button"
            className="cd-cta-btn"
            onClick={scrollToBook}
            style={{
              width: "100%",
              padding: "16px 18px",
              background: "#000",
              color: "#fff",
              border: "none",
              fontFamily: "var(--body-font)",
              fontSize: 14,
              fontWeight: 700,
              letterSpacing: 0.5,
              textTransform: "uppercase",
            }}
          >
            Schedule a Free Review &rarr;
          </button>
          {/* TODO: CEO_CONFIRM exact figures */}
          <div style={{ fontSize: 11, color: "#666", textAlign: "center", lineHeight: 1.5 }}>
            QBCC licensed &middot; 150+ renovations &middot; 0 surprise variations
          </div>
        </div>
      </div>
    </aside>
  );
}

function Footer() {
  return (
    <footer
      style={{
        marginTop: 60,
        borderTop: "3px solid #000",
        padding: "28px 32px 40px",
        fontFamily: "var(--body-font)",
        fontSize: 12,
        color: "#444",
        background: "#fff",
      }}
    >
      <div style={{ fontFamily: "var(--headline-font)", fontWeight: 800, fontSize: 22, color: "#000", marginBottom: 16 }}>
        ConstructionDaily<span style={{ fontWeight: 400, fontStyle: "italic" }}>.com</span>
      </div>
      <div style={{ display: "flex", gap: 40, flexWrap: "wrap", marginBottom: 24 }}>
        <div style={{ flex: "1 1 160px" }}>
          <div style={{ fontWeight: 700, color: "#000", marginBottom: 8, textTransform: "uppercase", fontSize: 11, letterSpacing: 1 }}>News</div>
          <div>Roofing</div>
          <div>Concrete</div>
          <div>Framing</div>
          <div>Permits & Code</div>
        </div>
        <div style={{ flex: "1 1 160px" }}>
          <div style={{ fontWeight: 700, color: "#000", marginBottom: 8, textTransform: "uppercase", fontSize: 11, letterSpacing: 1 }}>Tools</div>
          <div>Find a Verified Builder</div>
          <div>Contract Review</div>
          <div>Bid Calculator</div>
        </div>
        <div style={{ flex: "1 1 160px" }}>
          <div style={{ fontWeight: 700, color: "#000", marginBottom: 8, textTransform: "uppercase", fontSize: 11, letterSpacing: 1 }}>Company</div>
          <div>About</div>
          <div>Editorial Standards</div>
          <div>Contact</div>
        </div>
      </div>
      <div style={{ paddingTop: 16, borderTop: "1px solid #ddd", color: "#888" }}>
        &copy; 2026 ConstructionDaily, Inc. Editorial independent of sponsored placements. Sponsored content is clearly labeled.
      </div>
    </footer>
  );
}

Object.assign(window, {
  CDPlaceholderImage: PlaceholderImage,
  CDMasthead: Masthead,
  CDSectionLabel: SectionLabel,
  CDByline: Byline,
  CDH2: H2,
  CDPullQuote: PullQuote,
  CDArticleBody: ArticleBody,
  CDArticleBodyTail: ArticleBodyTail,
  CDTrustRow: TrustRow,
  CDSidebarPromo: SidebarPromo,
  CDInlinePromo: InlinePromo,
  CDFooter: Footer,
  cdScrollToBook: scrollToBook,
});