// SQSEO marketing, Developer API page
(function init(){
if(!window.LongtailIQDesignSystem_ae8f12 || !window.LTQM || !window.LTQM.PageHeader){return setTimeout(init,30);}
const React = window.React;
const DS = window.LongtailIQDesignSystem_ae8f12;
const { Icon, Button } = DS;
const { PageHeader, SectionWrap, SectionHead, IconTile } = window.LTQM;

const METHOD_TONE = { GET: "var(--viz-green)", POST: "var(--viz-blue)" };

const ENDPOINTS = [
  { m: "POST", p: "/v1/research", d: "Fan one seed into intent-grouped longtail clusters with explainable opportunity scores (job-first: 202 + a jobId, or 200 from cache)." },
  { m: "GET",  p: "/v1/jobs/{id}", d: "Poll a job until it completes, or stream it live at /v1/jobs/{id}/stream (Server-Sent Events)." },
  { m: "GET",  p: "/v1/snapshots/{id}", d: "Read an immutable research snapshot: keywords, clusters, summary. Add /export.csv for CSV." },
  { m: "POST", p: "/v1/visibility", d: "Measure your brand across AI answers: share of voice, cited sources, per-prompt breakdown." },
  { m: "POST", p: "/v1/volumes", d: "Enrich phrases or a snapshot with search volumes + re-scored opportunity." },
  { m: "GET",  p: "/v1/gsc/performance", d: "Your Search Console queries with Performance Labels (striking-distance, untapped CTR…)." },
  { m: "POST", p: "/v1/exports", d: "Queue a CSV export of any snapshot; poll and download when ready." },
];

const FEATURES = [
  { icon: "key-round", t: "Scoped keys", d: "Mint read-only keys for dashboards and integrations, with optional expiry. Secrets are shown once." },
  { icon: "gauge", t: "Per-key rate limits", d: "Every key carries its own requests/minute cap. X-Key-RateLimit headers tell you exactly where you stand." },
  { icon: "radio", t: "Job-first + SSE", d: "Heavy work runs async with caching and dedup. Poll jobs or stream status over Server-Sent Events." },
  { icon: "webhook", t: "Signed webhooks", d: "HMAC-signed deliveries when research or AI-visibility completes, or an alert fires. Verify X-SQSEO-Signature." },
  { icon: "activity", t: "Usage analytics", d: "Per-key request history surfaced in the app, plus daily quota visibility at /v1/usage." },
  { icon: "book-open", t: "OpenAPI 3.1", d: "A machine-readable spec at /v1/openapi.json and interactive docs at api.sqseo.com/docs." },
];

const CODE = `curl -X POST https://api.sqseo.com/v1/research \\
  -H "Authorization: Bearer sqseo_live_…" \\
  -H "Content-Type: application/json" \\
  -d '{
    "seed": "organic hair oil",
    "market": "us"
  }'
# → 202 { "jobId": "…", "poll": "/v1/jobs/…" }
# then read the snapshot:
curl https://api.sqseo.com/v1/snapshots/{id} \\
  -H "Authorization: Bearer sqseo_live_…"`;

const RESP = `{
  "summary": { "seed": "organic hair oil",
    "totalKeywords": 77, "totalClusters": 8,
    "avgOpportunity": 75 },
  "keywords": [
    { "phrase": "best organic hair oil for curly hair",
      "intent": "commercial", "surface": "commercial",
      "volume": 480, "difficulty": 18,
      "opportunity": 82,
      "reason": "Commercial intent, low competition…" }
  ]
}`;

function CodeCard({ title, code, lang }) {
  return (
    <div style={{ borderRadius: 16, background: "#0E0E11", border: "1px solid #232327", overflow: "hidden", boxShadow: "var(--shadow-xl)" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, height: 40, padding: "0 14px", borderBottom: "1px solid #1E1E22" }}>
        <span style={{ display: "flex", gap: 6 }}>
          {["#E5484D","#F0B429","#30A46C"].map((c,i)=><span key={i} style={{ width: 9, height: 9, borderRadius: 999, background: c, opacity: 0.85 }} />)}
        </span>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, color: "rgba(255,255,255,0.5)", marginLeft: 6 }}>{title}</span>
        <span style={{ marginLeft: "auto", fontFamily: "var(--font-mono)", fontSize: 10.5, color: "rgba(255,255,255,0.35)" }}>{lang}</span>
      </div>
      <pre style={{ margin: 0, padding: "18px 18px 20px", overflowX: "auto" }}>
        <code style={{ fontFamily: "var(--font-mono)", fontSize: 12.5, lineHeight: 1.7, color: "rgba(255,255,255,0.82)", whiteSpace: "pre" }}>{code}</code>
      </pre>
    </div>
  );
}

function API() {
  return (
    <div>
      <PageHeader pill="Developer API" pillIcon="terminal"
        title="One endpoint."
        gray="Hundreds of longtails back."
        sub="Pull SQSEO's longtail, AI-search, and competitor data straight into your own tools, dashboards, and content pipelines.">
        <div style={{ display: "flex", justifyContent: "center", gap: 10, flexWrap: "wrap" }}>
          <Button variant="primary" leadingIcon="key-round" onClick={()=>{window.location.href="https://app.sqseo.com/settings?tab=keys";}}>Get an API key</Button>
          <Button variant="secondary" leadingIcon="book-open" onClick={()=>{window.location.href="https://api.sqseo.com/docs";}}>Read the docs</Button>
        </div>
      </PageHeader>

      {/* Quickstart */}
      <SectionWrap>
        <SectionHead pill="Quickstart" pillIcon="zap" title="Your first request" gray="in under a minute." />
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, alignItems: "start" }} className="lt-feat-grid">
          <CodeCard title="request.sh" lang="bash" code={CODE} />
          <CodeCard title="response.json" lang="json" code={RESP} />
        </div>
      </SectionWrap>

      {/* Endpoints */}
      <SectionWrap tone="muted">
        <SectionHead pill="Endpoints" pillIcon="route" title="A small, predictable surface." />
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {ENDPOINTS.map((e,i)=>(
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 16, padding: "16px 20px", borderRadius: 14, border: "1px solid var(--border-subtle)", background: "var(--paper)" }}>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 600, color: METHOD_TONE[e.m], border: "1px solid var(--border-subtle)", borderRadius: 7, padding: "4px 9px", width: 52, textAlign: "center", flex: "none" }}>{e.m}</span>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 13.5, color: "var(--text-strong)", flex: "none", minWidth: 168 }}>{e.p}</span>
              <span style={{ fontSize: 13, color: "var(--text-muted)", lineHeight: 1.5 }}>{e.d}</span>
            </div>
          ))}
        </div>
      </SectionWrap>

      {/* Features */}
      <SectionWrap>
        <SectionHead pill="Built for builders" pillIcon="wrench" title="Everything you'd expect." />
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }} className="lt-feat-grid">
          {FEATURES.map((f,i)=>(
            <div key={i} style={{ display: "flex", gap: 16, padding: 22, borderRadius: 14, border: "1px solid var(--border-subtle)", background: "var(--paper)" }}>
              <IconTile name={f.icon} />
              <div>
                <div style={{ fontSize: 15, fontWeight: 600, color: "var(--text-strong)" }}>{f.t}</div>
                <div style={{ fontSize: 13.5, color: "var(--text-muted)", lineHeight: 1.6, marginTop: 6 }}>{f.d}</div>
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 18, padding: "16px 20px", borderRadius: 12, background: "var(--ink-50)", border: "1px solid var(--border-subtle)", display: "flex", alignItems: "center", gap: 12, fontSize: 13, color: "var(--text-muted)" }}>
          <Icon name="info" size={16} style={{ color: "var(--text-faint)", flex: "none" }} />
          API access is included on every plan; daily quotas scale with <a href="/pricing" style={{ color: "var(--ink-900)", fontWeight: 500 }}>Pro and Team</a>. Keys are managed per workspace in the app.
        </div>
      </SectionWrap>
    </div>
  );
}
window.LTQM = window.LTQM || {};
window.LTQM.API = API;
})();