/* global React, CodeBlock, RoutingViz */

const HERO_CODE = `import { synapse } from '@synapse-foundry/sdk';

// One install. One API key. Best provider per query.
const results = await synapse.search('Q4 PBM market trends');
const page    = await synapse.crawl('https://www.cms.gov/...');
const safe    = await synapse.privacy(patientNote);`;

function Hero() {
  const [copied, setCopied] = React.useState(false);
  const copyInstall = () => {
    navigator.clipboard && navigator.clipboard.writeText("npm install @synapse-foundry/sdk");
    setCopied(true);
    setTimeout(() => setCopied(false), 1400);
  };

  return (
    <section className="hero">
      <div className="wrap">
        <div className="eyebrow">
          <span className="pip" />
          <span>Agent infrastructure for regulated industries</span>
        </div>
        <h1 className="headline">
          <span className="head-claim">Knowledge is <em>power.</em></span>
          <span className="head-aside">Give your agents both.</span>
        </h1>
        <p className="subhead">
          <span className="hl">One SDK.</span> One API key. Routed across the best agent services
          for search and crawl, with <span className="hl">published benchmarks</span> for every
          provider and HIPAA-safe defaults when you need them.
        </p>
        <div className="cta-row">
          <a href="#" className="btn btn-primary" data-soon="Coming June 2026">
            Get API key <span className="arrow">→</span>
          </a>
          <a href="#benchmarks" className="btn btn-secondary">
            View benchmarks <span className="arrow">↗</span>
          </a>
          <button className="install" onClick={copyInstall} title="Copy">
            <span className="prompt">$</span>
            <span>npm install @synapse-foundry/sdk</span>
            <span className="copy">{copied ? "copied" : "copy"}</span>
          </button>
        </div>

        <div className="hero-meta">
          <div><b>7</b>providers benchmarked</div>
          <div><b>2</b>capabilities, one SDK</div>
          <div><b>HIPAA</b>BAA on enterprise</div>
          <div><b>SOC 2</b>type II in progress</div>
        </div>

        <RoutingViz />

        <div style={{marginTop: 28, display: "grid", gridTemplateColumns: "1fr", gap: 16}}>
          <CodeBlock file="agent.ts" code={HERO_CODE} />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero });