/* eslint-disable */
// Lightweight placeholder for pages outside this design pass.

function StubScreen({ title, why, go, label, suggest = [] }) {
  return (
    <div data-screen-label={label}>
      <section className="section section--white" style={{ paddingTop: 96 }}>
        <div className="container">
          <Crumbs items={["Intelligence Assist", title]} />
          <div style={{ marginTop: 24, display: "grid", gridTemplateColumns: "1.2fr .8fr", gap: 64, alignItems: "start" }}>
            <div>
              <h1 className="h-display" style={{ maxWidth: "18ch" }}>
                {title} <em>,  coming next.</em>
              </h1>
              <p className="lede" style={{ marginTop: 22 }}>{why}</p>
              <div className="cta-row">
                <Button variant="primary" size="lg" onClick={() => go("home")}>
                  Back to home <Icon name="arrow-right" size={16} className="arrow" />
                </Button>
                <Button variant="secondary" size="lg" onClick={() => go("blueprint")}>
                  See the AI Blueprint
                </Button>
              </div>
            </div>
            <div className="card" style={{ padding: 28, background: "#fff" }}>
              <Eyebrow>Designed in this pass</Eyebrow>
              <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 14 }}>
                {suggest.map((s) => (
                  <button
                    key={s.id}
                    onClick={() => go(s.id)}
                    style={{
                      display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12,
                      padding: "14px 16px", border: "1px solid var(--hairline)", borderRadius: 12,
                      background: "#fff", cursor: "pointer", fontFamily: "inherit",
                      color: "var(--ink)", textAlign: "left", fontSize: 14, fontWeight: 500,
                    }}
                  >
                    <span>{s.label}</span>
                    <Icon name="arrow-right" size={14} color="var(--ia-blue)" />
                  </button>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

const pageSuggestions = [
  { id: "home",          label: "Home" },
  { id: "services",      label: "Services Overview" },
  { id: "blueprint",     label: "AI Blueprint" },
  { id: "build",         label: "Build" },
  { id: "quick-wins",    label: "Fixed-Scope Builds" },
  { id: "custom-builds", label: "Custom Builds" },
];

function PurposeMissionValuesScreen({ go }) {
  return <StubScreen go={go} label="PMV · stub" title="Purpose, mission & values" why="A sub-page off About with the brand's purpose, mission, values, and guiding principles in long form. Out of scope for this design pass, the About page links here." suggest={pageSuggestions} />;
}

Object.assign(window, { StubScreen, PurposeMissionValuesScreen });