// ui_kits/marketing/components.jsx
// Section-level components for the marketing surface. Each section is small,
// cosmetic, and uses primitives + tokens. Source: reference/tehom_ai_landing_page_v6.html

const { useEffect: useEffect2, useState: useState2 } = React;

// ---- Nav — sticky 80px, solid deep, hairline on scroll ----
function Nav() {
  const [scrolled, setScrolled] = useState2(false);
  useEffect2(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav
      style={{
        position: "sticky",
        top: 0,
        zIndex: 20,
        background: "var(--tehom-deep)",
        borderBottom: `1px solid ${scrolled ? "rgba(250,247,242,0.10)" : "transparent"}`,
        transition: "border-color 200ms ease",
      }}
    >
      <Container
        style={{
          height: 80,
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
        }}
      >
        <BrandLockup />
        <div
          style={{
            display: "flex",
            alignItems: "center",
            gap: 32,
            fontSize: 14,
            fontFamily: "var(--font-body)",
            color: "rgba(250,247,242,0.72)",
          }}
        >
          {["Thesis", "Stack", "Principles", "Work", "Origin"].map((label) => (
            <a
              key={label}
              href={`#${label.toLowerCase()}`}
              style={{ color: "inherit", textDecoration: "none", transition: "color 160ms" }}
              onMouseEnter={(e) => (e.currentTarget.style.color = "var(--fg-1)")}
              onMouseLeave={(e) => (e.currentTarget.style.color = "rgba(250,247,242,0.72)")}
            >
              {label}
            </a>
          ))}
        </div>
      </Container>
    </nav>
  );
}

// ---- Hero — full-bleed display, "Form from the deep." ----
function Hero() {
  return (
    <section style={{ padding: "148px 0 128px", borderBottom: "1px solid var(--hairline)" }}>
      <Container>
        <div style={{ maxWidth: 980 }}>
          <Eyebrow>Agentic AI Infrastructure</Eyebrow>
          <h1
            style={{
              marginTop: 24,
              fontFamily: "var(--font-display)",
              fontWeight: 300,
              fontVariationSettings: '"opsz" 144',
              fontSize: "clamp(72px, 10vw, 148px)",
              lineHeight: 0.92,
              letterSpacing: "-0.025em",
              color: "var(--fg-1)",
            }}
          >
            Form from the deep.
          </h1>
          <p
            style={{
              marginTop: 48,
              maxWidth: 720,
              color: "var(--fg-2)",
              fontSize: "clamp(19px, 2vw, 23px)",
              lineHeight: 1.55,
              fontFamily: "var(--font-body)",
            }}
          >
            Tehom AI builds orchestration, memory, and governance infrastructure
            for agentic systems operating in the real world.
          </p>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 32, alignItems: "center", marginTop: 56 }}>
            <TextLink href="#thesis">Read the thesis</TextLink>
            <TextLink href="#work">See the work</TextLink>
          </div>
        </div>
      </Container>
    </section>
  );
}

// ---- SectionHeader — the recurring meta-column + content pattern ----
function SectionHeader({ meta, title, copy }) {
  return (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: "260px minmax(0, 1fr)",
        gap: 80,
        marginBottom: 80,
      }}
    >
      <Eyebrow>{meta}</Eyebrow>
      <div>
        <h2
          style={{
            fontFamily: "var(--font-display)",
            fontWeight: 300,
            fontVariationSettings: '"opsz" 144',
            fontSize: "clamp(42px, 6vw, 86px)",
            lineHeight: 1.0,
            color: "var(--fg-1)",
            letterSpacing: "-0.02em",
            margin: 0,
          }}
        >
          {title}
        </h2>
        {copy && (
          <p
            style={{
              marginTop: 28,
              maxWidth: 660,
              color: "var(--fg-2)",
              fontSize: 18,
              lineHeight: 1.55,
              fontFamily: "var(--font-body)",
            }}
          >
            {copy}
          </p>
        )}
      </div>
    </div>
  );
}

// ---- Thesis — single-column, paragraph cluster ----
function Thesis() {
  return (
    <section id="thesis" style={{ padding: "128px 0", borderBottom: "1px solid var(--hairline)" }}>
      <Container
        style={{ display: "grid", gridTemplateColumns: "260px minmax(0, 1fr)", gap: 80 }}
      >
        <Eyebrow>01 — Thesis</Eyebrow>
        <div>
          <p
            style={{
              fontFamily: "var(--font-display)",
              fontWeight: 300,
              fontVariationSettings: '"opsz" 144',
              fontSize: "clamp(38px, 5.3vw, 80px)",
              lineHeight: 1.02,
              maxWidth: 920,
              color: "var(--fg-1)",
              margin: 0,
              letterSpacing: "-0.02em",
            }}
          >
            The problem is no longer generating intelligence. The problem is governing it.
          </p>
          <div
            style={{
              marginTop: 48,
              display: "grid",
              gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
              gap: 48,
              color: "var(--fg-2)",
              fontSize: 17,
              lineHeight: 1.6,
              fontFamily: "var(--font-body)",
            }}
          >
            <p style={{ margin: 0 }}>
              The first wave of AI infrastructure was built around output: faster
              answers, larger models, more fluent generation. That work matters,
              but it does not solve the operational problem.
            </p>
            <p style={{ margin: 0 }}>
              Real systems require boundaries. They need memory that compounds,
              decisions that can be traced, agents that can be supervised, and
              work that remains intelligible after it ships.
            </p>
            <p style={{ margin: 0 }}>
              Tehom exists for that layer: the ground beneath agentic work. Not a
              spectacle of intelligence, but the structure that lets intelligence
              become durable.
            </p>
          </div>
        </div>
      </Container>
    </section>
  );
}

// ---- StackPrimitive — one of the three cards (Governance / Orchestration / Memory) ----
function StackPrimitive({ icon, title, body }) {
  return (
    <article
      style={{
        minHeight: 360,
        padding: 48,
        borderRight: "1px solid rgba(250,247,242,0.14)",
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between",
      }}
    >
      <div>
        {icon}
        <h3
          style={{
            fontFamily: "var(--font-display)",
            fontWeight: 300,
            fontVariationSettings: '"opsz" 144',
            marginTop: 32,
            fontSize: 34,
            lineHeight: 1.05,
            color: "var(--fg-1)",
            letterSpacing: "-0.015em",
          }}
        >
          {title}
        </h3>
      </div>
      <p
        style={{
          color: "rgba(250,247,242,0.7)",
          fontSize: 16,
          maxWidth: 320,
          fontFamily: "var(--font-body)",
          lineHeight: 1.55,
          margin: 0,
        }}
      >
        {body}
      </p>
    </article>
  );
}

// Inline-loaded SVG so it picks up currentColor from the host context.
const StackIcon = ({ name }) => {
  const [markup, setMarkup] = useState2("");
  useEffect2(() => {
    fetch(`../../assets/icons/${name}.svg`)
      .then((r) => r.text())
      .then((t) => setMarkup(
        t.replace(/<\?xml[^?]*\?>\s*/, "")
         .replace(/<!--[\s\S]*?-->\s*/g, "")
         .replace(/<svg([^>]*)>/, (m, attrs) =>
           `<svg${attrs.replace(/\s(width|height)="[^"]*"/g, "")} width="68" height="68">`
         )
      ));
  }, [name]);
  return <span style={{ color: "var(--fg-1)", display: "inline-flex" }} dangerouslySetInnerHTML={{ __html: markup }} />;
};

function Stack() {
  return (
    <section id="stack" style={{ padding: "112px 0", borderBottom: "1px solid var(--hairline)" }}>
      <Container>
        <SectionHeader
          meta="02 — Stack"
          title="Three layers. One operating field."
          copy="The public surface is simple by design. Tehom organizes agentic work through three primitives: governance, orchestration, and memory."
        />
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
            borderTop: "1px solid rgba(250,247,242,0.14)",
            borderBottom: "1px solid rgba(250,247,242,0.14)",
          }}
        >
          <StackPrimitive
            icon={<StackIcon name="governance" />}
            title="Governance"
            body="Durable constraints for what agents may do, what they must preserve, and where human judgment remains required."
          />
          <StackPrimitive
            icon={<StackIcon name="orchestration" />}
            title="Orchestration"
            body="The routing layer between intent, context, tools, agents, artifacts, review paths, and shipped work."
          />
          <StackPrimitive
            icon={<StackIcon name="memory" />}
            title="Memory"
            body="Continuity across time: decisions, relationships, constraints, artifacts, and institutional context that become usable again."
          />
        </div>
      </Container>
    </section>
  );
}

// ---- Principles — large editorial passage ----
function Principles() {
  return (
    <section id="principles" style={{ padding: "112px 0", borderBottom: "1px solid var(--hairline)" }}>
      <Container>
        <SectionHeader meta="03 — Principles" title="Infrastructure shapes behavior." />
        <div style={{ maxWidth: 900, marginLeft: "auto" }}>
          {[
            "Every system carries assumptions: about truth, authority, optimization, risk, and the people who live with the consequences of its output.",
            "Agentic systems make those assumptions operational. They do not merely answer questions. They route decisions, preserve memory, trigger work, and influence what becomes normal.",
            "Tehom is built on a simple premise: durable systems require durable constraints.",
          ].map((p, i, arr) => (
            <p
              key={i}
              style={{
                color: "var(--fg-2)",
                fontSize: "clamp(21px, 2.5vw, 29px)",
                lineHeight: 1.42,
                marginBottom: i === arr.length - 1 ? 0 : 32,
                fontFamily: "var(--font-body)",
                marginTop: 0,
              }}
            >
              {p}
            </p>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ---- WorkItem ----
function WorkItem({ state, title, body, tag }) {
  return (
    <article
      style={{
        minHeight: 220,
        padding: 28,
        borderRight: "1px solid rgba(250,247,242,0.14)",
        borderBottom: "1px solid rgba(250,247,242,0.14)",
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between",
      }}
    >
      <div>
        <StatusDot state={state} />
        <h3
          style={{
            fontFamily: "var(--font-body)",
            fontWeight: 600,
            fontSize: 20,
            lineHeight: 1.15,
            color: "var(--fg-1)",
            margin: "12px 0 0",
          }}
        >
          {title}
        </h3>
        <p
          style={{
            marginTop: 16,
            color: "rgba(250,247,242,0.66)",
            fontSize: 14,
            lineHeight: 1.55,
            fontFamily: "var(--font-body)",
            margin: "16px 0 0",
          }}
        >
          {body}
        </p>
      </div>
      <span
        style={{
          fontFamily: "var(--font-mono)",
          fontSize: 12,
          letterSpacing: "0.08em",
          textTransform: "uppercase",
          color: "var(--fg-4)",
        }}
      >
        {tag}
      </span>
    </article>
  );
}

function Work() {
  return (
    <section id="work" style={{ padding: "112px 0", borderBottom: "1px solid var(--hairline)" }}>
      <Container>
        <SectionHeader
          meta="04 — Work"
          title="Primitives for governed agents."
          copy="Tehom's work is not packaged as spectacle. It appears as infrastructure: runtime, memory, orchestration, evaluation, and audit."
        />
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(5, minmax(0, 1fr))",
            borderTop: "1px solid rgba(250,247,242,0.14)",
            borderLeft: "1px solid rgba(250,247,242,0.14)",
          }}
        >
          <WorkItem state="active"   title="Runtime"       body="Execution environments where agents operate inside explicit boundaries." tag="active" />
          <WorkItem state="complete" title="Memory"        body="Persistent context that compounds without pretending to replace reality." tag="continuity" />
          <WorkItem state="complete" title="Orchestration" body="Tool routing, multi-agent coordination, review paths, and artifact flow." tag="movement" />
          <WorkItem state="complete" title="Evaluation"    body="Structured judgment over outputs, traces, decisions, and outcomes."     tag="measure" />
          <WorkItem state="complete" title="Audit"         body="Evidence of what was asked, known, changed, approved, and shipped."     tag="record" />
        </div>
      </Container>
    </section>
  );
}

// ---- Origin — short paragraph ----
function Origin() {
  return (
    <section id="origin" style={{ padding: "96px 0", borderBottom: "1px solid var(--hairline)" }}>
      <Container
        style={{
          display: "grid",
          gridTemplateColumns: "260px minmax(0, 720px)",
          gap: 80,
          alignItems: "start",
        }}
      >
        <Eyebrow>05 — Origin</Eyebrow>
        <p
          style={{
            color: "var(--fg-2)",
            fontSize: 17,
            fontFamily: "var(--font-body)",
            margin: 0,
            lineHeight: 1.6,
          }}
        >
          Tehom AI emerged from Covenant Labs: a research and systems effort
          concerned with how agentic work can be governed by durable upstream
          principles instead of optimization alone.
        </p>
      </Container>
    </section>
  );
}

// ---- Footer — lockup, Hebrew origin glyph, links ----
function Footer() {
  return (
    <footer style={{ padding: "64px 0" }}>
      <Container
        style={{
          display: "grid",
          gridTemplateColumns: "1fr auto",
          gap: 64,
          alignItems: "end",
        }}
      >
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <BrandLockup breathing={false} />
          <span
            style={{
              fontFamily: '"SBL Hebrew", "Ezra SIL", "Times New Roman", serif',
              color: "var(--tehom-muted)",
              fontSize: 14,
              letterSpacing: 0,
              direction: "rtl",
            }}
            aria-label="Tehom in Hebrew"
            title="תְּהוֹם — Genesis 1:2"
          >
            תְּהוֹם
          </span>
          <p
            style={{
              marginTop: 24,
              maxWidth: 520,
              color: "rgba(250,247,242,0.62)",
              fontFamily: "var(--font-body)",
              fontSize: 14,
              lineHeight: 1.55,
            }}
          >
            The ground beneath agentic work.
          </p>
        </div>
        <div
          style={{
            display: "flex",
            gap: 24,
            color: "var(--tehom-muted)",
            fontSize: 14,
            fontFamily: "var(--font-body)",
          }}
        >
          <a href="#thesis" style={{ color: "inherit", textDecoration: "none" }}>Thesis</a>
          <a href="#stack" style={{ color: "inherit", textDecoration: "none" }}>Stack</a>
          <a href="mailto:hello@tehom.ai" style={{ color: "inherit", textDecoration: "none" }}>hello@tehom.ai</a>
        </div>
      </Container>
    </footer>
  );
}

Object.assign(window, {
  Nav,
  Hero,
  SectionHeader,
  Thesis,
  Stack,
  StackPrimitive,
  Principles,
  Work,
  WorkItem,
  Origin,
  Footer,
});
