/* Legal-tech infrastructure & API (dark section). */
const { Button } = window.LexInToshDesignSystem_e187a4;
const Icon = window.Icon;
const SITE = window.SITE;

function CodeCard() {
  return (
    <div className="code">
      <div className="code__bar">
        <span className="code__dots"><i /><i /><i /></span>
        <span className="code__path">POST /v1/answer</span>
        <img src={window.__asset("mark", "assets/lexintosh-mark.png")} alt="" width={16} height={16} className="code__mark" />
      </div>
      <pre className="code__body"><code>{`{
  "query": "Limitation period for a civil appeal?",
  "jurisdiction": "NP",
  "cite": true
}`}</code></pre>
      <div className="code__resp">
        <span className="code__rl"><Icon name="check" size={13} /> 200 OK &middot; grounded &amp; cited</span>
        <pre className="code__body"><code>{`{
  "answer": "An appeal must be filed within 35 days…",
  "citations": [
    { "type": "Act",   "title": "Muluki Civil Procedure Code, 2074", "section": "207" },
    { "type": "Najir", "case": "CASE-2082-0114", "adda": "Supreme Court" }
  ]
}`}</code></pre>
      </div>
    </div>
  );
}

function Infra() {
  return (
    <section className="section section--dark" id="infrastructure">
      <div className="wrap">
        <div className="infra__grid">
          <div className="infra__copy">
            <window.Reveal><window.Eyebrow dark>LegalTech API &middot; Infrastructure as a Service</window.Eyebrow></window.Reveal>
            <window.Reveal delay={60}>
              <h2 className="h2">Legal-tech infrastructure, <span className="accent-sun">as a service</span>.</h2>
            </window.Reveal>
            <window.Reveal delay={120}>
              <p className="lead lead--dark">The knowledge base and APIs behind LexInTosh, opened up for developers and product builders. Ground your applications in Nepal&rsquo;s legal data and ship faster on infrastructure you don&rsquo;t have to build.</p>
            </window.Reveal>
            <window.Reveal delay={180}>
              <div className="infra__cta">
                <window.SalesButton>Contact Us</window.SalesButton>
                <window.TLink href={SITE.contact.mailto} arrow>Request developer access</window.TLink>
              </div>
            </window.Reveal>
          </div>
          <window.Reveal delay={140} className="infra__code"><CodeCard /></window.Reveal>
        </div>
        <window.Reveal delay={80}>
          <div className="infra__features">
            {SITE.infraFeatures.map((f) => (
              <div className="feat feat--dark" key={f.title}>
                <span className="feat__i feat__i--dark"><Icon name={f.icon} size={20} /></span>
                <div><b>{f.title}</b><p>{f.desc}</p></div>
              </div>
            ))}
          </div>
        </window.Reveal>
      </div>
    </section>
  );
}
window.Infra = Infra;