// Strahl landing — section components

const Eyebrow = ({ num, label }) => (
  <div className="eyebrow">
    <span className="eyebrow-num">{num}</span>
    <span className="eyebrow-rule" />
    <span className="eyebrow-label">{label}</span>
  </div>
);

const Reveal = ({ children, delay = 0, as: Tag = "div", className = "", style = {} }) => {
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let rafId;
    let io;
    // rAF ensures initial opacity:0 paint has committed before we observe,
    // so the CSS transition has a real "from" state to animate from.
    rafId = requestAnimationFrame(() => {
      io = new IntersectionObserver((entries) => {
        entries.forEach(e => {
          if (e.isIntersecting) {
            setTimeout(() => setShown(true), delay);
            io.disconnect();
          }
        });
      }, { threshold: 0.12 });
      io.observe(el);
    });
    return () => { cancelAnimationFrame(rafId); if (io) io.disconnect(); };
  }, [delay]);
  return (
    <Tag
      ref={ref}
      className={`reveal ${shown ? "reveal--in" : ""} ${className}`}
      style={style}
    >
      {children}
    </Tag>
  );
};

// Hero ---------------------------------------------------------
const Hero = ({ logoVariant }) => {
  const Mark = window.LOGO_VARIANTS[logoVariant].mark;
  const [beamPos, setBeamPos] = React.useState(0);
  React.useEffect(() => {
    let raf;
    let t = 0;
    const tick = () => {
      t += 0.004;
      setBeamPos((Math.sin(t) + 1) / 2);
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);
  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="hero-mark">
        <Mark size={120} animated/>
      </div>
      <h1 className="hero-headline">
        <span className="reveal-line"><span style={{animationDelay: "60ms"}}>The trust layer</span></span>
        <span className="reveal-line"><span style={{animationDelay: "180ms"}}>for agentic systems.</span></span>
      </h1>
      <p className="hero-sub reveal-fade" style={{animationDelay: "440ms"}}>
        Runtime security for AI agents. Every tool call, dataflow edge,
        and state transition, verified before it executes.
      </p>
      <div className="hero-thesis reveal-fade" style={{animationDelay: "560ms"}}>
        <p>The bottleneck on agentic deployment is not capability. It is <em>trust</em>.</p>
        <p>Models will keep getting faster than the humans assigned to review them.
        The answer is not slower agents. The answer is verifiable agents,
        with mathematical, machine-checked guarantees about what they will and will not do.</p>
      </div>
      <div className="hero-cta reveal-fade" style={{animationDelay: "640ms"}}>
        <a className="btn btn-primary" href="#exploits">Read the research →</a>
        <a className="btn btn-ghost" href="#contact">Talk to founders</a>
      </div>
      <div className="hero-beam" aria-hidden="true">
        <div className="hero-beam-track" />
        <div
          className="hero-beam-dot"
          style={{ left: `${beamPos * 100}%` }}
        />
        <div className="hero-beam-labels">
          <span>prompt</span>
          <span>policy</span>
          <span>proof</span>
          <span>action</span>
        </div>
      </div>
    </section>
  );
};

// Terminal -----------------------------------------------------
const TerminalSnippet = () => {
  const lines = [
    { p: "$ ", t: "strahl monitor-realtime --session x98jd", k: "cmd" },
    { p: "  ", t: "↳ parsing 28 tool calls, 14 dataflow edges", k: "muted" },
    { p: "  ", t: "↳ checking policy: no_pii_egress, no_unbound_writes", k: "muted" },
    { p: "  ", t: "↳ IFC labels: {customer:secret, system:trusted}", k: "muted" },
    { p: "  ", t: "✓ 27/28 actions provably safe", k: "ok" },
    { p: "  ", t: "✗ step 19 → http.post to *.ngrok.io  (untrusted sink)", k: "bad" },
    { p: "  ", t: "  ↳ blocked. flow: customer:secret → untrusted_sink", k: "muted" },
    { p: "$ ", t: "strahl explain step:19", k: "cmd" },
    { p: "  ", t: "obligation: ∀ a∈Action. label(a.sink) ⊇ label(a.data)", k: "muted" },
    { p: "  ", t: "counterexample: post(host=u, body=d), label(u)=public", k: "muted" },
  ];
  const [shown, setShown] = React.useState(0);
  const [charIdx, setCharIdx] = React.useState(0);
  const [started, setStarted] = React.useState(false);
  const ref = React.useRef(null);
  const bodyRef = React.useRef(null);

  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) setStarted(true); });
    }, { threshold: 0.15 });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  React.useEffect(() => {
    if (!started) return;
    if (shown >= lines.length) return;
    const target = lines[shown].t;
    if (charIdx < target.length) {
      const id = setTimeout(() => setCharIdx(c => c + 1), 18);
      return () => clearTimeout(id);
    } else {
      const id = setTimeout(() => { setShown(s => s + 1); setCharIdx(0); }, 220);
      return () => clearTimeout(id);
    }
  }, [shown, charIdx, started]);

  // Keep latest line in view as content grows
  React.useEffect(() => {
    if (bodyRef.current) {
      bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
    }
  }, [shown, charIdx]);

  return (
    <div className="terminal" ref={ref}>
      <div className="terminal-bar">
        <span>strahl ▸ verifier</span>
        <span className="terminal-pid">pid 04812</span>
      </div>
      <pre className="terminal-body" ref={bodyRef}>
        {lines.slice(0, shown).map((l, i) => (
          <div key={i} className={`tline tline--${l.k}`}>
            <span className="tprefix">{l.p}</span>{l.t}
          </div>
        ))}
        {shown < lines.length && (
          <div className={`tline tline--${lines[shown].k}`}>
            <span className="tprefix">{lines[shown].p}</span>
            {lines[shown].t.slice(0, charIdx)}
            <span className="caret">▍</span>
          </div>
        )}
      </pre>
    </div>
  );
};

// Problem ------------------------------------------------------
const Problem = () => (
  <section className="section" id="problem" data-screen-label="02 Problem">
    <Eyebrow num="01" label="The problem" />
    <Reveal as="h2" className="section-h">
      Agents act faster than humans can audit.
    </Reveal>
    <div className="grid-3">
      {[
        ["Prompt injection", "Untrusted text in retrieved documents reroutes agents into unauthorized tools and exfiltration paths."],
        ["Dataflow corruption", "Sensitive context — credentials, customer data, internal docs — leaks across tool boundaries with no audit trail."],
        ["Verification gap", "Reviewers can't keep pace with agent throughput. Trust collapses; deployments stall in pilot purgatory."],
      ].map(([h, p], i) => (
        <Reveal key={h} delay={i * 80} className="card">
          <div className="card-num">0{i+1}</div>
          <h3 className="card-h">{h}</h3>
          <p className="card-p">{p}</p>
        </Reveal>
      ))}
    </div>
  </section>
);

// How it works -------------------------------------------------
const HowItWorks = () => (
  <section id="how" data-screen-label="03 How it works">
    <Eyebrow num="02" label="How it works" />
    <Reveal as="h2" className="section-h">
      A proof-checked perimeter around every agent action.
    </Reveal>
    <div className="how-grid">
      <Reveal className="how-copy">
        <p>
          Strahl sits between your agent runtime and the outside world.
          We combine two layers of defense: <em>formal verification</em> of
          agent trajectories and tool calls, and <em>information flow control</em>
          applied at the model-weight level for advanced threat detection.
        </p>
        <p>
          Every tool call, every dataflow edge, every state transition is
          checked against a typed policy and enforced in Rust at microsecond
          latency. Sensitive context is tagged and tracked through the model
          itself — not just around it.
        </p>
        <ul className="how-list">
          <li><span>01</span>Trajectory ingest. Streaming JSONL from your agent runtime.</li>
          <li><span>02</span>Dual-layer policy. Trajectory checks + IFC labels carried through model weights.</li>
          <li><span>03</span>Per-action enforcement. Every tool call carries a signed obligation.</li>
          <li><span>04</span>Block, allow, or escalate. With a counterexample trace for humans.</li>
        </ul>
      </Reveal>
      <Reveal delay={120} className="how-terminal">
        <TerminalSnippet />
      </Reveal>
    </div>
  </section>
);

// Exploits log -------------------------------------------------
const EXPLOITS = [
  {
    id: "STR-2025-001",
    target: "GitHub Copilot",
    severity: "high",
    title: "Cross-Origin Context Poisoning (XOXO) — SQL injection via semantics-preserving rename",
    summary: "A malicious collaborator on a shared project renames a global variable in a sibling file. Copilot's automatic context-gathering pulls that file into the prompt, and the rename — semantically a no-op, invisible to code review and regression tests — flips Copilot's completion in views.py from a sanitized ORM query to a raw, SQL-injection-vulnerable one. Discovered via GCGS, our greedy Cayley-graph search over semantics-preserving transformations.",
    cve: "private disclosure",
    date: "2025·03",
    href: "writeups/copilot-greedy-tree-search.html",
  },
];

const Exploits = () => (
  <section className="section section--dark" id="exploits" data-screen-label="04 Exploits">
    <Eyebrow num="03" label="Exploits we've found" />
    <Reveal as="h2" className="section-h">
      A standing log of agentic vulnerabilities, disclosed responsibly.
    </Reveal>
    <Reveal as="p" className="section-lede">
      Findings from our internal red-team. Vendors notified before publication.
      Full advisories available on request.
    </Reveal>
    <div className="exploits">
      <div className="exploit-head">
        <span>ID</span>
        <span>Target</span>
        <span>Finding</span>
        <span>Severity</span>
        <span>Date</span>
      </div>
      {EXPLOITS.map((e, i) => (
        <Reveal key={e.id} delay={i * 60} className="exploit-row">
          <span className="exploit-id">{e.id}</span>
          <span className="exploit-target">{e.target}</span>
          <span className="exploit-finding">
            <strong>
              <a href={e.href} style={{color:"inherit", textDecoration:"none", borderBottom:"1px solid rgba(255,255,255,0.4)"}}>{e.title} →</a>
            </strong>
            <span className="exploit-summary">{e.summary}</span>
          </span>
          <span className={`sev sev--${e.severity}`}>{e.severity}</span>
          <span className="exploit-date">{e.date}</span>
        </Reveal>
      ))}
      <Reveal delay={120} className="exploit-row exploit-row--placeholder">
        <span className="exploit-id">—</span>
        <span className="exploit-target">More forthcoming</span>
        <span className="exploit-finding">
          <strong>Active red-team in progress</strong>
          <span className="exploit-summary">
            Additional findings will be published here after coordinated disclosure.
            Researchers and vendors: <a href="mailto:security@strahl.io" style={{color:"inherit", textDecoration:"underline"}}>security@strahl.io</a>.
          </span>
        </span>
        <span className="sev sev--medium" style={{opacity: 0.4}}>—</span>
        <span className="exploit-date">—</span>
      </Reveal>
    </div>
  </section>
);

// Use cases ----------------------------------------------------
const UseCases = () => (
  <section className="section" id="use-cases" data-screen-label="05 Use cases">
    <Eyebrow num="04" label="Where Strahl fits" />
    <Reveal as="h2" className="section-h">
      Built for industries that can't afford to be wrong.
    </Reveal>
    <div className="grid-3">
      {[
        ["Banking", "Self-hosted agent reasoning over internal data, with provable bounds on what leaves the perimeter."],
        ["Legal", "Document review agents whose every retrieval, summary, and citation is auditable end-to-end."],
        ["Finance & ops", "Trading and back-office automations where unbounded tool calls are an existential risk."],
      ].map(([h, p], i) => (
        <Reveal key={h} delay={i * 80} className="usecase">
          <h3 className="usecase-h">{h}</h3>
          <p className="usecase-p">{p}</p>
        </Reveal>
      ))}
    </div>
  </section>
);

// Manifesto removed
const Manifesto = () => null;

// Team ---------------------------------------------------------
const Team = () => (
  <section className="section" id="team" data-screen-label="07 Team">
    <Eyebrow num="06" label="Team" />
    <Reveal as="h2" className="section-h">
      Research at the intersection of formal methods, information flow control, and LLM security.
    </Reveal>
    <div className="grid-2">
      <Reveal className="bio">
        <div className="bio-photo" aria-label="founder portrait placeholder">
          <span>portrait</span>
        </div>
        <div>
          <h3 className="bio-name">Founder, ML Security</h3>
          <p className="bio-line">Adversarial ML, IFC at the model-weight level, prompt-injection taxonomies.</p>
          <p className="bio-line bio-line--muted">Prior: agent safety research, industry collaborations with frontier labs.</p>
        </div>
      </Reveal>
      <Reveal delay={100} className="bio">
        <div className="bio-photo" aria-label="founder portrait placeholder">
          <span>portrait</span>
        </div>
        <div>
          <h3 className="bio-name">Founder, Formal Verification</h3>
          <p className="bio-line">Typed policies, dependent types, real-time proof-carrying execution.</p>
          <p className="bio-line bio-line--muted">Prior: verified-systems research; collaborations on agent dataflow proofs.</p>
        </div>
      </Reveal>
    </div>
  </section>
);

// Footer form --------------------------------------------------
const FooterForm = () => {
  const [done, setDone] = React.useState(false);
  const handleSubmit = (e) => {
    e.preventDefault();
    const email = e.target.querySelector('input[type="email"]').value;
    window.location.href = `mailto:info@strahl.io?subject=Access request&body=Requesting access: ${encodeURIComponent(email)}`;
    setDone(true);
  };
  if (done) return <p style={{fontFamily:'var(--mono)',fontSize:'12px',color:'var(--ink-56)',margin:0}}>Thanks — we'll be in touch.</p>;
  return (
    <form className="footer-form" onSubmit={handleSubmit}>
      <input type="email" placeholder="you@enterprise.com" required/>
      <button type="submit">Request access →</button>
    </form>
  );
};

// Footer -------------------------------------------------------
const Footer = ({ logoVariant }) => {
  const Mark = window.LOGO_VARIANTS[logoVariant].mark;
  return (
    <footer className="footer" id="contact" data-screen-label="08 Footer">
      <div className="footer-top">
        <div className="footer-mark">
          <Mark size={32}/>
          <span className="footer-word">strahl</span>
        </div>
        <div className="footer-tag">
          The trust layer for agentic systems.
        </div>
      </div>
      <div className="footer-grid">
        <div>
          <div className="footer-h">Research</div>
          <a href="whitepaper.html">Whitepaper</a>
          <a href="#exploits">Exploit log</a>
        </div>
        <div>
          <div className="footer-h">Pilot</div>
          <a href="mailto:hello@strahl.io">hello@strahl.io</a>
          <a href="mailto:security@strahl.io">security@strahl.io</a>
          <a href="#">Press kit</a>
        </div>
        <div>
          <div className="footer-h">Company</div>
          <a href="#team">Team</a>
          <a href="mailto:press@strahl.io">Press</a>
        </div>
        <div className="footer-cta">
          <div className="footer-h">Pilots open Q3 2026</div>
          <FooterForm />
        </div>
      </div>
      <div className="footer-bot">
        <span>© 2026 Strahl Research, Inc.</span>
        <span>strahl /ʃtʁaːl/ · German, n. — a ray of light.</span>
      </div>
    </footer>
  );
};

Object.assign(window, {
  Eyebrow, Reveal, Hero, TerminalSnippet,
  Problem, HowItWorks, Exploits, UseCases,
  Manifesto, Team, Footer,
});