// Direction C — Architectural Blueprint / Research Dossier
// Ink-on-vellum, cyanotype blue, technical mono labels, blueprint grid lines.
// Most "Tartaria research dossier" feel.

const bpStyles = {
  page: {
    background: "var(--bp-bg, #0d1620)",
    color: "var(--bp-fg, #d6e1ec)",
    fontFamily: "'Inter Tight', sans-serif",
    minHeight: "100%",
    width: "100%",
  },
  mono: { fontFamily: "'IBM Plex Mono', monospace", letterSpacing: "0.12em", textTransform: "uppercase", fontSize: 11 },
  serif: { fontFamily: "'IBM Plex Serif', serif" },
};

const gridBg = "linear-gradient(rgba(122,166,196,0.06) 1px, transparent 1px) 0 0 / 100% 48px, linear-gradient(90deg, rgba(122,166,196,0.06) 1px, transparent 1px) 0 0 / 48px 100%";

function BpCorner({ pos }) {
  const s = { position: "absolute", width: 18, height: 18, borderColor: "var(--bp-accent, #7aa6c4)" };
  if (pos === "tl") return <div style={{ ...s, top: 12, left: 12, borderTop: "1px solid", borderLeft: "1px solid" }} />;
  if (pos === "tr") return <div style={{ ...s, top: 12, right: 12, borderTop: "1px solid", borderRight: "1px solid" }} />;
  if (pos === "bl") return <div style={{ ...s, bottom: 12, left: 12, borderBottom: "1px solid", borderLeft: "1px solid" }} />;
  return <div style={{ ...s, bottom: 12, right: 12, borderBottom: "1px solid", borderRight: "1px solid" }} />;
}

function BpNav() {
  return (
    <nav style={{ borderBottom: "1px solid rgba(122,166,196,0.25)", background: "var(--bp-bg, #0d1620)" }}>
      <div style={{ maxWidth: 1200, margin: "0 auto", padding: "14px 32px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <div style={{ width: 16, height: 16, border: "1px solid var(--bp-accent, #7aa6c4)", transform: "rotate(45deg)" }} />
          <div style={{ ...bpStyles.mono, color: "var(--bp-accent, #7aa6c4)", fontSize: 12 }}>R. G. CLAYTON / DOSSIER</div>
        </div>
        <div style={{ display: "flex", gap: 24, ...bpStyles.mono, fontSize: 11, color: "rgba(214,225,236,0.6)" }}>
          {[["#vol-i", "VOL I"], ["#bridge", "BRIDGE"], ["#vol-ii", "VOL II"], ["#author", "AUTHOR"]].map(([h, l], i) => (
            <a key={i} href={h} style={{ color: "inherit", textDecoration: "none" }}>{l}</a>
          ))}
        </div>
      </div>
    </nav>
  );
}

function BpHero({ id, book, vol, kicker, coords }) {
  return (
    <section id={id} style={{ position: "relative", padding: "80px 32px", borderBottom: "1px solid rgba(122,166,196,0.25)", background: gridBg }}>
      <BpCorner pos="tl" /><BpCorner pos="tr" /><BpCorner pos="bl" /><BpCorner pos="br" />
      <style>{`
        .bp-hero { display: grid; grid-template-columns: 1fr; gap: 32px; max-width: 1180px; margin: 0 auto; align-items: start; }
        .bp-hero-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px 24px; padding-top: 16px; border-top: 1px solid rgba(122,166,196,0.25); }
        @media (min-width: 880px) {
          .bp-hero { grid-template-columns: 280px 1fr; gap: 40px; }
          .bp-hero-meta { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }
        }
        @media (min-width: 1100px) {
          .bp-hero { grid-template-columns: 300px 1fr 220px; gap: 40px; }
          .bp-hero-meta { grid-column: 3; grid-template-columns: 1fr; padding-top: 0; border-top: none; padding-left: 16px; border-left: 1px solid rgba(122,166,196,0.25); align-self: stretch; }
        }
      `}</style>
      <div className="bp-hero">
        <div style={{ position: "relative" }}>
          <img src={book.cover} alt={book.title} style={{ width: "100%", maxWidth: 320, height: "auto", display: "block", filter: "saturate(0.95) contrast(1.05)", boxShadow: "0 10px 30px rgba(0,0,0,0.6)" }} />
        </div>
        <div style={{ minWidth: 0 }}>
          <div style={{ ...bpStyles.mono, color: "var(--bp-accent, #7aa6c4)", marginBottom: 16 }}>VOL {vol} · {kicker}</div>
          <h1 style={{ ...bpStyles.serif, fontSize: "clamp(48px, 7vw, 78px)", fontWeight: 500, lineHeight: 0.95, margin: "0 0 20px", letterSpacing: "-0.02em" }}>
            {book.title}
          </h1>
          <p style={{ fontSize: 19, lineHeight: 1.5, color: "rgba(214,225,236,0.75)", maxWidth: 480, margin: "0 0 28px" }}>{book.tagline}</p>
          <a href={book.amazon} target="_blank" rel="noopener" style={{
            display: "inline-flex", alignItems: "center", gap: 10,
            padding: "10px 18px", border: "1px solid var(--bp-accent, #7aa6c4)",
            color: "var(--bp-accent, #7aa6c4)", textDecoration: "none",
            ...bpStyles.mono, fontSize: 11,
          }}>
            <span>ACQUIRE / AMAZON</span><span>→</span>
          </a>
        </div>
        <div className="bp-hero-meta" style={{ ...bpStyles.mono, fontSize: 10, color: "rgba(214,225,236,0.55)", lineHeight: 1.7 }}>
          <div>
            <div style={{ color: "var(--bp-accent, #7aa6c4)" }}>FILE</div>
            <div style={{ wordBreak: "break-word" }}>{book.title.replace(/ /g, "_").toUpperCase()}</div>
          </div>
          <div>
            <div style={{ color: "var(--bp-accent, #7aa6c4)" }}>SETTING</div>
            <div style={{ color: "rgba(214,225,236,0.75)", textTransform: "none", letterSpacing: "0.04em" }}>{book.setting.split("·")[0].trim()}</div>
          </div>
          <div>
            <div style={{ color: "var(--bp-accent, #7aa6c4)" }}>GENRE</div>
            <div style={{ color: "rgba(214,225,236,0.75)", textTransform: "none", letterSpacing: "0.04em" }}>{book.genre}</div>
          </div>
          <div>
            <div style={{ color: "var(--bp-accent, #7aa6c4)" }}>COORDS</div>
            <div style={{ color: "rgba(214,225,236,0.75)" }}>{coords}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function BpSection({ kicker, paras, n }) {
  return (
    <section style={{ padding: "80px 32px", borderBottom: "1px solid rgba(122,166,196,0.15)" }}>
      <div style={{ maxWidth: 1100, margin: "0 auto", display: "grid", gridTemplateColumns: "180px 1fr", gap: 48 }}>
        <div>
          <div style={{ ...bpStyles.mono, color: "var(--bp-accent, #7aa6c4)" }}>§ {n}</div>
          <div style={{ ...bpStyles.mono, fontSize: 10, color: "rgba(214,225,236,0.55)", marginTop: 4 }}>{kicker}</div>
        </div>
        <div style={{ maxWidth: 720 }}>
          {paras.map((p, i) => (
            <p key={i} style={{ fontSize: 17, lineHeight: 1.7, color: "rgba(214,225,236,0.85)", margin: "0 0 18px" }}>{p}</p>
          ))}
        </div>
      </div>
    </section>
  );
}

function BpPillars({ pillars, title }) {
  return (
    <section style={{ padding: "80px 32px", borderBottom: "1px solid rgba(122,166,196,0.15)", background: gridBg }}>
      <div style={{ maxWidth: 1100, margin: "0 auto" }}>
        <div style={{ ...bpStyles.mono, color: "var(--bp-accent, #7aa6c4)", marginBottom: 32 }}>SCHEMATIC · {title}</div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr", gap: 16 }}>
          {pillars.map((p, i) => (
            <div key={i} style={{ position: "relative", border: "1px solid rgba(122,166,196,0.3)", padding: 20, background: "rgba(13,22,32,0.6)" }}>
              <div style={{ ...bpStyles.mono, fontSize: 10, color: "var(--bp-accent, #7aa6c4)" }}>FIG.{String(i + 1).padStart(2, "0")}</div>
              <div style={{ ...bpStyles.mono, fontSize: 12, color: "var(--bp-fg, #d6e1ec)", marginTop: 6, marginBottom: 10 }}>{p.label}</div>
              <p style={{ fontSize: 13, lineHeight: 1.6, color: "rgba(214,225,236,0.7)", margin: 0 }}>{p.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function BpBridge() {
  return (
    <section id="bridge" style={{ padding: "100px 32px", borderBottom: "1px solid rgba(122,166,196,0.25)", position: "relative", background: gridBg }}>
      <BpCorner pos="tl" /><BpCorner pos="tr" /><BpCorner pos="bl" /><BpCorner pos="br" />
      <div style={{ maxWidth: 900, margin: "0 auto" }}>
        <div style={{ ...bpStyles.mono, color: "var(--bp-accent, #7aa6c4)", marginBottom: 24, textAlign: "center" }}>BRIDGE / VOL I → VOL II</div>
        <blockquote style={{ ...bpStyles.serif, fontSize: 28, lineHeight: 1.4, margin: 0, fontStyle: "italic", color: "rgba(214,225,236,0.95)", textAlign: "center", fontWeight: 400 }}>
          “Not what happened, but what was lost. Not a religion but a practice. The mercury, the stone, and the remnant — waiting for someone willing to sit down, go quiet, and listen.”
        </blockquote>
      </div>
    </section>
  );
}

function BpTimeline({ items }) {
  return (
    <section style={{ padding: "80px 32px", borderBottom: "1px solid rgba(122,166,196,0.15)" }}>
      <div style={{ maxWidth: 1100, margin: "0 auto" }}>
        <div style={{ ...bpStyles.mono, color: "var(--bp-accent, #7aa6c4)", marginBottom: 32 }}>CHRONOLOGY / 6 NODES</div>
        <div style={{ position: "relative" }}>
          <div style={{ position: "absolute", top: 30, left: 0, right: 0, height: 1, background: "rgba(122,166,196,0.3)" }} />
          <div style={{ display: "grid", gridTemplateColumns: `repeat(${items.length}, 1fr)`, gap: 8 }}>
            {items.map((it, i) => (
              <div key={i} style={{ position: "relative", paddingTop: 50 }}>
                <div style={{ position: "absolute", top: 26, left: 0, width: 9, height: 9, background: "var(--bp-accent, #7aa6c4)", border: "2px solid var(--bp-bg, #0d1620)" }} />
                <div style={{ ...bpStyles.mono, color: "var(--bp-accent, #7aa6c4)", marginBottom: 6 }}>{it.year}</div>
                <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 6 }}>{it.label}</div>
                <p style={{ fontSize: 12, lineHeight: 1.55, color: "rgba(214,225,236,0.65)", margin: 0 }}>{it.body}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function BpResearchVolume({ data, volLabel, volIndex }) {
  const [expanded, setExpanded] = React.useState(false);
  const initial = 6;
  const visible = expanded ? data.items : data.items.slice(0, initial);
  const hasMore = data.items.length > initial;
  return (
    <div style={{ marginBottom: 56 }}>
      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 24, marginBottom: 6, flexWrap: "wrap" }}>
        <div style={{ ...bpStyles.mono, color: "var(--bp-accent, #7aa6c4)", fontSize: 11 }}>
          {data.label} · {String(data.items.length).padStart(2, "0")} DOSSIERS
        </div>
        <div style={{ ...bpStyles.mono, color: "rgba(214,225,236,0.4)", fontSize: 10 }}>VOLUME {volIndex}</div>
      </div>
      <p style={{ ...bpStyles.serif, fontSize: 17, lineHeight: 1.55, color: "rgba(214,225,236,0.78)", margin: "0 0 24px", fontStyle: "italic", maxWidth: 640 }}>
        {data.note}
      </p>
      <div style={{ borderTop: "1px solid rgba(122,166,196,0.25)" }}>
        {visible.map((item, i) => {
          const inner = (
            <div style={{
              display: "grid", gridTemplateColumns: "60px 1fr 24px", gap: 24,
              padding: "20px 0", borderBottom: "1px solid rgba(122,166,196,0.12)", alignItems: "baseline",
            }}>
              <div style={{ ...bpStyles.mono, fontSize: 10, color: "var(--bp-accent, #7aa6c4)", letterSpacing: "0.08em" }}>
                {String(i + 1).padStart(2, "0")} /
              </div>
              <div>
                <div style={{ ...bpStyles.serif, fontSize: 19, fontWeight: 500, lineHeight: 1.3, marginBottom: 6, color: "rgba(214,225,236,0.96)" }}>
                  {item.topic}
                </div>
                <div style={{ fontSize: 14, lineHeight: 1.6, color: "rgba(214,225,236,0.62)" }}>
                  {item.note}
                </div>
              </div>
              {item.slug ? (
                <div style={{ ...bpStyles.mono, fontSize: 14, color: "var(--bp-accent, #7aa6c4)" }}>↗</div>
              ) : null}
            </div>
          );
          return item.slug ? (
            <a key={i} href={`research/index.html#topic-${item.slug}`} style={{ display: "block", textDecoration: "none", color: "inherit" }}>
              {inner}
            </a>
          ) : (
            <div key={i}>{inner}</div>
          );
        })}
      </div>
      {hasMore ? (
        <button
          onClick={() => setExpanded(!expanded)}
          style={{
            ...bpStyles.mono, fontSize: 11, marginTop: 20, padding: "10px 18px",
            background: "transparent", color: "var(--bp-accent, #7aa6c4)",
            border: "1px solid rgba(122,166,196,0.4)", cursor: "pointer", letterSpacing: "0.1em",
          }}
        >
          {expanded ? "— COLLAPSE" : `+ SHOW ${data.items.length - initial} MORE`}
        </button>
      ) : null}
    </div>
  );
}

function BpResearch({ research }) {
  const total = research.volOne.items.length + research.volTwo.items.length;
  return (
    <section id="research" style={{ padding: "100px 32px", borderBottom: "1px solid rgba(122,166,196,0.15)", background: gridBg }}>
      <div style={{ maxWidth: 1100, margin: "0 auto" }}>
        <div style={{ ...bpStyles.mono, color: "var(--bp-accent, #7aa6c4)", marginBottom: 12 }}>
          DOSSIER INDEX / {String(total).padStart(2, "0")} ENTRIES
        </div>
        <h2 style={{ ...bpStyles.serif, fontSize: 44, fontWeight: 500, margin: "0 0 16px", maxWidth: 760, letterSpacing: "-0.01em", lineHeight: 1.15 }}>
          The novels are fiction. The questions are not.
        </h2>
        <p style={{ fontSize: 16, lineHeight: 1.7, color: "rgba(214,225,236,0.72)", maxWidth: 640, margin: "0 0 24px" }}>
          Each chapter of the books is anchored to a research dossier — Wikipedia and Britannica entries, museum and university archives, peer-reviewed papers, period photography. The list below is the topic index. Click any topic to read the dossiers.
        </p>
        <a href="research/index.html" style={{
          display: "inline-block", marginBottom: 56, padding: "10px 20px",
          ...bpStyles.mono, fontSize: 11,
          color: "var(--bp-accent, #7aa6c4)", textDecoration: "none",
          border: "1px solid var(--bp-accent, #7aa6c4)", letterSpacing: "0.12em",
        }}>BROWSE FULL ARCHIVE →</a>

        <BpResearchVolume data={research.volOne} volIndex="I" />
        <BpResearchVolume data={research.volTwo} volIndex="II" />

        <div style={{
          marginTop: 24, padding: 24, border: "1px dashed rgba(122,166,196,0.3)",
          ...bpStyles.mono, fontSize: 11, color: "rgba(214,225,236,0.55)", lineHeight: 1.7,
        }}>
          NOTE — THESE ARE WORKING RESEARCH NOTES, NOT ACADEMIC PUBLICATIONS.<br />
          VOL II DOSSIERS ARE RELEASED ON THE SCHEDULE TIED TO GROUND TRUTH.<br />
          FOR VIDEO TREATMENTS OF SELECTED SUBJECTS, SEE <a href="https://www.youtube.com/@tartariavault" target="_blank" rel="noopener" style={{ color: "var(--bp-accent, #7aa6c4)" }}>YOUTUBE.COM/@TARTARIAVAULT</a>.
        </div>
      </div>
    </section>
  );
}

function BpReviews({ reviews }) {
  return (
    <section style={{ padding: "80px 32px", borderBottom: "1px solid rgba(122,166,196,0.15)" }}>
      <div style={{ maxWidth: 1100, margin: "0 auto" }}>
        <div style={{ ...bpStyles.mono, color: "var(--bp-accent, #7aa6c4)", marginBottom: 32 }}>FIELD NOTES / EARLY READERS</div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 24 }}>
          {reviews.map((r, i) => (
            <figure key={i} style={{ margin: 0, padding: 24, border: "1px solid rgba(122,166,196,0.25)", background: "rgba(13,22,32,0.4)" }}>
              <div style={{ ...bpStyles.mono, color: "var(--bp-accent, #7aa6c4)", fontSize: 10, marginBottom: 12 }}>NOTE / {String(i + 1).padStart(2, "0")}</div>
              <blockquote style={{ ...bpStyles.serif, fontSize: 17, lineHeight: 1.55, fontStyle: "italic", margin: "0 0 12px", color: "rgba(214,225,236,0.92)" }}>
                “{r.quote}”
              </blockquote>
              <figcaption style={{ ...bpStyles.mono, fontSize: 10, color: "rgba(214,225,236,0.55)" }}>{r.source}</figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function BpAuthor({ author }) {
  return (
    <section id="author" style={{ padding: "80px 32px", borderBottom: "1px solid rgba(122,166,196,0.15)", background: gridBg }}>
      <div style={{ maxWidth: 900, margin: "0 auto", display: "grid", gridTemplateColumns: "180px 1fr", gap: 48 }}>
        <div>
          <div style={{ ...bpStyles.mono, color: "var(--bp-accent, #7aa6c4)" }}>AUTHOR / 01</div>
          <div style={{ ...bpStyles.mono, fontSize: 10, color: "rgba(214,225,236,0.55)", marginTop: 6 }}>SLOCAN VALLEY · BC</div>
        </div>
        <div>
          <h2 style={{ ...bpStyles.serif, fontSize: 48, fontWeight: 500, margin: "0 0 24px", letterSpacing: "-0.02em" }}>{author.name}</h2>
          {author.bio.map((p, i) => (
            <p key={i} style={{ fontSize: 17, lineHeight: 1.7, color: "rgba(214,225,236,0.85)", margin: "0 0 20px" }}>{p}</p>
          ))}
        </div>
      </div>
    </section>
  );
}

function BpFooter() {
  return (
    <footer style={{ padding: "24px 32px", display: "flex", justifyContent: "space-between", ...bpStyles.mono, fontSize: 10, color: "rgba(214,225,236,0.45)" }}>
      <span>© {new Date().getFullYear()} R. G. CLAYTON</span>
      <span>DOSSIER / THE REMNANT · GROUND TRUTH</span>
    </footer>
  );
}

function SiteBlueprint({ palette = "default" }) {
  const { BOOKS, TIMELINE, REVIEWS, AUTHOR, RESEARCH_INDEX } = window.SITE_DATA;
  const PALETTES = {
    default: { bg: "#0d1620", fg: "#d6e1ec", accent: "#7aa6c4" },
    cyanotype: { bg: "#0a1a2e", fg: "#cfe0f0", accent: "#5fb8d4" },
    rust: { bg: "#161210", fg: "#e8dfca", accent: "#c89a4d" },
  };
  const p = PALETTES[palette] || PALETTES.default;
  return (
    <div style={{
      ...bpStyles.page,
      "--bp-bg": p.bg, "--bp-fg": p.fg, "--bp-accent": p.accent,
      background: p.bg, color: p.fg,
    }}>
      <BpNav />
      <BpHero id="vol-i" book={BOOKS.remnant} vol="I" kicker="LITERARY THRILLER" coords="51.5°N · 0.1°W" />
      <BpSection kicker="THE PREMISE" n="01" paras={BOOKS.remnant.premise} />
      <BpSection kicker="THE JOURNEY" n="02" paras={BOOKS.remnant.journey} />
      <BpPillars pillars={BOOKS.remnant.pillars} title="VOL I — THE WORLD" />
      <BpBridge />
      <BpHero id="vol-ii" book={BOOKS.groundTruth} vol="II" kicker="TECHNO-THRILLER" coords="49.7°N · 117.5°W" />
      <BpSection kicker="THE SPINE" n="03" paras={BOOKS.groundTruth.spine} />
      <BpPillars pillars={BOOKS.groundTruth.pillars} title="VOL II — THE MODERN REMNANT" />
      <BpTimeline items={TIMELINE} />
      <BpReviews reviews={REVIEWS} />
      <BpAuthor author={AUTHOR} />
      <BpFooter />
    </div>
  );
}

window.SiteBlueprint = SiteBlueprint;
