// ============================================
// Reliq — Documentation page
// Public route: /docs
// ============================================

const DocsPage = ({ go }) => {
  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  // Handle cross-page scroll requests (e.g. "Read the docs → GitHub Action section")
  React.useEffect(() => {
    try {
      const target = sessionStorage.getItem("reliq_scroll_to");
      if (target) {
        sessionStorage.removeItem("reliq_scroll_to");
        const el = document.getElementById(target);
        if (el) setTimeout(() => el.scrollIntoView({ behavior: "smooth", block: "start" }), 80);
      }
    } catch (_) {}
  }, []);

  // ── Quick-start cards ──────────────────────────────────────────────────────────
  const qs = [
    { ic:"upload",     h:"Run your first scan",      anchor:"docs-quick-start",
      d:"Upload an APK, AAB, or IPA and get a store-readiness score in minutes." },
    { ic:"eye",        h:"Understand your score",    anchor:"docs-scan-results",
      d:"Learn how Reliq calculates verdicts, issue severity, and store-specific readiness." },
    { ic:"file-text",  h:"Export and share reports", anchor:"docs-reports",
      d:"Generate PDFs, share read-only links, and preserve full scan history." },
    { ic:"git-branch", h:"Add Reliq to CI/CD",       anchor:"docs-github-action",
      d:"Run scans automatically from GitHub Actions or API-driven pipelines." },
  ];

  // ── Documentation categories ───────────────────────────────────────────────────
  const cats = [
    { ic:"bolt",        label:"Quick Start",             anchor:"docs-quick-start" },
    { ic:"upload",      label:"Uploading Builds",         anchor:"docs-uploading-builds" },
    { ic:"activity",    label:"Scan Results",             anchor:"docs-scan-results" },
    { ic:"alert",       label:"Findings",                 anchor:"docs-findings" },
    { ic:"tool",        label:"Fix Plan",                 anchor:"docs-fix-plan" },
    { ic:"shield",      label:"Permissions",              anchor:"docs-permissions" },
    { ic:"package",     label:"SDK Inventory",            anchor:"docs-sdk" },
    { ic:"lock",        label:"Privacy Declarations",     anchor:"docs-privacy" },
    { ic:"check-circle",label:"Store Listing Checks",    anchor:"docs-store-listing" },
    { ic:"scan",        label:"Security Checks",          anchor:"docs-security-checks" },
    { ic:"book",        label:"Policy Library",           anchor:"docs-policy" },
    { ic:"file-text",   label:"Reports & PDF Export",     anchor:"docs-reports" },
    { ic:"link",        label:"Share Links",              anchor:"docs-share-links" },
    { ic:"git-branch",  label:"GitHub Action",            anchor:"docs-github-action" },
    { ic:"key",         label:"API Keys",                 anchor:"docs-api-keys" },
    { ic:"webhook",     label:"Webhooks",                 anchor:"docs-webhooks" },
    { ic:"users",       label:"Team & Roles",             anchor:"docs-team" },
    { ic:"sliders",     label:"Billing & Usage",          anchor:"docs-billing" },
    { ic:"info",        label:"Troubleshooting",          anchor:"docs-troubleshooting" },
  ];

  // ── Shared style constants ─────────────────────────────────────────────────────
  const D = {
    eyebrow: {
      fontFamily:"var(--font-mono)", fontSize:11, letterSpacing:"0.14em",
      textTransform:"uppercase", color:"var(--teal)", marginBottom:10, display:"block",
    },
    h1: {
      fontFamily:"var(--font-display)", fontSize:34, fontWeight:700,
      letterSpacing:"-0.025em", margin:"0 0 10px", color:"var(--fg-0)", lineHeight:1.2,
    },
    h2: {
      fontFamily:"var(--font-display)", fontSize:16, fontWeight:600,
      letterSpacing:"-0.01em", margin:"0 0 12px", color:"var(--fg-0)",
    },
    h3: {
      fontFamily:"var(--font-display)", fontSize:14, fontWeight:600,
      letterSpacing:"-0.005em", margin:"20px 0 6px", color:"var(--fg-0)",
    },
    p: {
      fontSize:14.5, color:"var(--fg-1)", lineHeight:1.78, margin:"0 0 12px",
    },
    ul: {
      fontSize:14.5, color:"var(--fg-1)", lineHeight:1.78,
      paddingLeft:22, margin:"0 0 12px",
    },
    li: { marginBottom:5 },
    code: {
      background:"var(--code-bg)", border:"1px solid var(--line-2)",
      borderRadius:"var(--r-md)", padding:"14px 18px",
      fontFamily:"var(--font-mono)", fontSize:12.5, color:"var(--fg-1)",
      overflowX:"auto", margin:"12px 0", lineHeight:1.75, display:"block",
      whiteSpace:"pre",
    },
    inlineCode: {
      fontFamily:"var(--font-mono)", fontSize:13, color:"var(--teal)",
      background:"var(--bg-2)", padding:"1px 5px", borderRadius:4,
    },
    note: {
      background:"var(--teal-bg)", border:"1px solid var(--line-3)",
      borderRadius:"var(--r-sm)", padding:"12px 16px",
      fontSize:13.5, color:"var(--fg-1)", lineHeight:1.65, marginBottom:14,
    },
  };

  return (
    <LandingLayout go={go} pageTitle="Documentation" contentWidth={1100}>

      {/* ── Page header ── */}
      <div style={{marginBottom:44}}>
        <span style={D.eyebrow}>Docs</span>
        <h1 style={D.h1}>Reliq documentation</h1>
        <p style={{...D.p, fontSize:16, maxWidth:600, margin:"0 0 22px"}}>
          Learn how to scan app builds, understand store-readiness results, export reports,
          and add Reliq to your release workflow.
        </p>
        <div style={{display:"flex", gap:10, flexWrap:"wrap"}}>
          <button className="btn btn-primary btn-sm" onClick={() => go("/free-scan")}>
            Start scanning <Icon name="arrow-right" size={13} />
          </button>
          <button className="btn btn-sm" onClick={() => scrollTo("docs-github-action")}>
            <Icon name="git-branch" size={13} /> GitHub Action
          </button>
        </div>
      </div>

      {/* ── Quick-start cards ── */}
      <div className="steps-grid" style={{marginBottom:48}}>
        {qs.map(c => (
          <div className="feature-card" key={c.anchor}
               style={{cursor:"pointer"}} onClick={() => scrollTo(c.anchor)}>
            <div className="ic"><Icon name={c.ic} size={18} /></div>
            <h3 style={{fontSize:14, fontWeight:600, margin:"0 0 6px",
                        letterSpacing:"-0.005em"}}>{c.h}</h3>
            <p style={{fontSize:13, color:"var(--fg-2)", lineHeight:1.6, margin:0}}>{c.d}</p>
          </div>
        ))}
      </div>

      {/* ── Category index ── */}
      <div style={{padding:"24px 24px 28px", background:"var(--bg-1)",
                   border:"1px solid var(--line-1)", borderRadius:"var(--r-lg)",
                   marginBottom:8}}>
        <h2 style={{...D.h2, marginBottom:0}}>Documentation</h2>
        <p style={{...D.p, fontSize:13, color:"var(--fg-3)", marginBottom:0}}>
          {cats.length} sections — click to jump
        </p>
        <div className="docs-cat-grid">
          {cats.map(c => (
            <button key={c.anchor} className="docs-cat-item"
                    onClick={() => scrollTo(c.anchor)}>
              <Icon name={c.ic} size={13} style={{color:"var(--teal)", flexShrink:0}} />
              <span style={{flex:1}}>{c.label}</span>
              <Icon name="chevron" size={11} style={{color:"var(--fg-3)", flexShrink:0}} />
            </button>
          ))}
        </div>
      </div>

      {/* ══════════════════════════════════════════════════════════════════
          ARTICLE SECTIONS
      ══════════════════════════════════════════════════════════════════ */}

      {/* A ── Quick Start */}
      <section className="docs-section" id="docs-quick-start">
        <h2 style={D.h2}>Quick Start</h2>
        <p style={D.p}>
          Get a store-readiness verdict on your app build in under three minutes.
        </p>
        <ol style={{...D.ul, paddingLeft:24}}>
          <li style={D.li}><strong>Create an account.</strong> Sign up at reliq.dev. No credit card required for your first three scans.</li>
          <li style={D.li}><strong>Upload your build.</strong> Go to <em>New Scan</em> and drop in an APK, AAB, or IPA file, or paste a direct download URL.</li>
          <li style={D.li}><strong>Choose target stores.</strong> Select Google Play, Apple App Store, or both. Reliq applies the correct ruleset for each.</li>
          <li style={D.li}><strong>Run the scan.</strong> Reliq extracts metadata, permissions, SDKs, and policy-relevant signals. Most scans complete in under three minutes.</li>
          <li style={D.li}><strong>Review your score and findings.</strong> Your score (0–100), verdict, and full finding list are ready immediately.</li>
          <li style={D.li}><strong>Fix and re-scan.</strong> Work through the fix plan and re-scan until your verdict is <em>Pass</em> or <em>Likely Pass</em>.</li>
        </ol>
        <div style={D.note}>
          <Icon name="info" size={13} style={{marginRight:7, verticalAlign:"middle", color:"var(--teal)"}} />
          Free accounts get 3 preview scans. Full scan history, PDF exports, and re-scan tracking require a paid plan.
        </div>
      </section>

      {/* B ── Uploading Builds */}
      <section className="docs-section" id="docs-uploading-builds">
        <h2 style={D.h2}>Uploading Builds</h2>
        <p style={D.p}>
          Reliq accepts the standard output formats produced by Android and iOS build tools.
        </p>
        <h3 style={D.h3}>Supported formats</h3>
        <ul style={D.ul}>
          <li style={D.li}><code style={D.inlineCode}>.apk</code> — Android Package. Production and debug builds are both accepted; Reliq will flag debug flags in release builds.</li>
          <li style={D.li}><code style={D.inlineCode}>.aab</code> — Android App Bundle. The preferred submission format for Google Play. Reliq decompiles the base module and inspects the merged manifest.</li>
          <li style={D.li}><code style={D.inlineCode}>.ipa</code> — iOS App Archive. Reliq reads the embedded <code style={D.inlineCode}>Info.plist</code>, entitlements, and <code style={D.inlineCode}>PrivacyInfo.xcprivacy</code>.</li>
        </ul>
        <h3 style={D.h3}>What Reliq extracts</h3>
        <p style={D.p}>
          After upload, Reliq extracts: manifest and permission declarations, SDK fingerprints, privacy labels and declarations, security configuration, app metadata strings, content rating signals, listing assets (screenshots, icons), and build configuration flags.
        </p>
        <p style={D.p}>
          Maximum file size is <strong>500 MB</strong>. Files larger than this should be split or uploaded via API with a pre-signed URL. Uploaded builds are processed in isolated environments and are not shared with third parties.
        </p>
      </section>

      {/* C ── Scan Results */}
      <section className="docs-section" id="docs-scan-results">
        <h2 style={D.h2}>Understanding Results</h2>
        <h3 style={D.h3}>Readiness score</h3>
        <p style={D.p}>
          Your score runs from 0 to 100. It is weighted by the severity of open findings, the number of affected stores, and the category of issue. A score of 80 or above with no critical findings typically results in a <em>Likely Pass</em> verdict.
        </p>
        <h3 style={D.h3}>Verdicts</h3>
        <ul style={D.ul}>
          <li style={D.li}><strong>Pass</strong> — No blockers. Your build is ready to submit.</li>
          <li style={D.li}><strong>Likely Pass</strong> — No critical issues. Minor warnings exist but are unlikely to cause rejection.</li>
          <li style={D.li}><strong>Needs Fixes</strong> — One or more issues that commonly cause rejection. Fix before submitting.</li>
          <li style={D.li}><strong>High Rejection Risk / Will Reject</strong> — Critical policy violations detected. Submission will very likely be rejected.</li>
        </ul>
        <h3 style={D.h3}>Finding severity</h3>
        <ul style={D.ul}>
          <li style={D.li}><strong>Critical</strong> — Confirmed store policy violation. Causes rejection.</li>
          <li style={D.li}><strong>Warning</strong> — Policy risk. May cause rejection depending on reviewer discretion.</li>
          <li style={D.li}><strong>Info</strong> — Best-practice recommendation. Not a blocker but worth addressing.</li>
        </ul>
        <p style={D.p}>
          Each finding shows the affected store(s), the relevant policy rule, the exact evidence found in your build, and a recommended fix.
        </p>
      </section>

      {/* D ── Findings */}
      <section className="docs-section" id="docs-findings">
        <h2 style={D.h2}>Findings</h2>
        <p style={D.p}>
          A finding is a specific policy issue detected in your build. Each finding includes a machine-readable code (e.g. <code style={D.inlineCode}>CLEARTEXT_TRAFFIC</code>), the affected store, severity rating, the extracted evidence, a plain-English explanation, and a direct link to the relevant store policy section.
        </p>
        <p style={D.p}>
          Findings are grouped by category: Permissions, Security, Privacy, SDK Inventory, Metadata, Store Listing, and Content. You can filter findings by severity, store, or category from the scan results page.
        </p>
      </section>

      {/* E ── Fix Plan */}
      <section className="docs-section" id="docs-fix-plan">
        <h2 style={D.h2}>Fix Plan</h2>
        <p style={D.p}>
          Reliq converts every finding into a developer-ready fix task. Each task includes:
        </p>
        <ul style={D.ul}>
          <li style={D.li}><strong>Why it matters</strong> — The policy rationale and rejection risk.</li>
          <li style={D.li}><strong>Recommendation</strong> — Exact steps to fix the issue, with code snippets where applicable.</li>
          <li style={D.li}><strong>Affected store</strong> — Google Play, App Store, or both.</li>
          <li style={D.li}><strong>Policy reference</strong> — Direct link to the relevant policy section.</li>
          <li style={D.li}><strong>Re-scan guidance</strong> — What to verify in the next scan to confirm the fix.</li>
        </ul>
        <p style={D.p}>
          Fix tasks can be marked as resolved individually. Resolved tasks are tracked across re-scans so you can confirm each fix closes the finding.
        </p>
      </section>

      {/* F ── Permissions */}
      <section className="docs-section" id="docs-permissions">
        <h2 style={D.h2}>Permissions</h2>
        <p style={D.p}>
          Reliq audits every permission declared in <code style={D.inlineCode}>AndroidManifest.xml</code> and iOS entitlements. For each dangerous or sensitive permission, Reliq checks whether a valid use-case justification is present, whether the permission is actually used by code in the build, and whether the combination of permissions triggers any store policy rule.
        </p>
        <p style={D.p}>
          Common permission findings include undeclared use of <code style={D.inlineCode}>READ_CONTACTS</code>, <code style={D.inlineCode}>ACCESS_FINE_LOCATION</code> with <code style={D.inlineCode}>BACKGROUND_LOCATION</code>, and camera/microphone access without a visible foreground feature.
        </p>
      </section>

      {/* G ── SDK Inventory */}
      <section className="docs-section" id="docs-sdk">
        <h2 style={D.h2}>SDK Inventory</h2>
        <p style={D.p}>
          Reliq fingerprints third-party SDKs bundled in your build and checks each against store disclosure requirements. SDKs that collect data must be declared in Google Play's Data Safety section and Apple's Privacy Nutrition Label.
        </p>
        <p style={D.p}>
          Commonly flagged SDKs include advertising and attribution SDKs (Facebook, AppFlyer, Adjust), analytics SDKs (Firebase, Mixpanel), and crash reporters. Reliq flags undisclosed SDKs and provides the exact declaration field required for each store.
        </p>
      </section>

      {/* H ── Privacy Declarations */}
      <section className="docs-section" id="docs-privacy">
        <h2 style={D.h2}>Privacy Declarations</h2>
        <p style={D.p}>
          Both stores now require accurate privacy declarations before submission. Reliq validates:
        </p>
        <ul style={D.ul}>
          <li style={D.li}><strong>iOS PrivacyInfo.xcprivacy</strong> — Checks that all required APIs are declared with a valid reason code. Missing or incorrect reason codes are a hard blocker since iOS 17.5.</li>
          <li style={D.li}><strong>Google Play Data Safety</strong> — Compares declared data types against SDK inventory and permission usage. Mismatches are flagged as policy violations.</li>
        </ul>
      </section>

      {/* I ── Store Listing Checks */}
      <section className="docs-section" id="docs-store-listing">
        <h2 style={D.h2}>Store Listing Checks</h2>
        <p style={D.p}>
          Reliq validates your listing assets against current store requirements: screenshot dimensions, feature graphic size, icon format, short and long description character limits, content rating questionnaire completeness, and keyword density.
        </p>
        <p style={D.p}>
          Metadata checks also cover misleading descriptions, impersonation signals, and keyword stuffing — common reasons for metadata rejection that are easy to miss before submission.
        </p>
      </section>

      {/* J ── Security Checks */}
      <section className="docs-section" id="docs-security-checks">
        <h2 style={D.h2}>Security Checks</h2>
        <p style={D.p}>
          Reliq's security checks flag build-time configuration issues that stores reject:
        </p>
        <ul style={D.ul}>
          <li style={D.li}><strong>Cleartext traffic</strong> — HTTP endpoints allowed in network security config.</li>
          <li style={D.li}><strong>Hardcoded secrets</strong> — API keys, tokens, and credentials embedded in strings or resources.</li>
          <li style={D.li}><strong>Debuggable release build</strong> — <code style={D.inlineCode}>android:debuggable="true"</code> in a production manifest.</li>
          <li style={D.li}><strong>Backup-enabled storage</strong> — Sensitive data potentially exposed via Android Auto Backup.</li>
          <li style={D.li}><strong>ATS exceptions</strong> — Overly broad App Transport Security exemptions in iOS.</li>
        </ul>
      </section>

      {/* K ── Policy Library */}
      <section className="docs-section" id="docs-policy">
        <h2 style={D.h2}>Policy Library</h2>
        <p style={D.p}>
          The Reliq Policy Library indexes the current Apple App Review Guidelines and Google Play Developer Program Policy. Each policy check in Reliq maps to one or more policy entries in the library.
        </p>
        <p style={D.p}>
          The library is updated when stores publish policy changes. Policy check categories include: privacy and data handling, permissions, SDK disclosures, store listing and metadata, security configuration, and content policy.
        </p>
      </section>

      {/* L ── Reports */}
      <section className="docs-section" id="docs-reports">
        <h2 style={D.h2}>Reports &amp; PDF Export</h2>
        <p style={D.p}>
          Every scan generates a report that captures the full snapshot of findings, score, verdict, fix plan, and metadata at the time of the scan. Reports are immutable — re-scanning creates a new report rather than overwriting the previous one.
        </p>
        <ul style={D.ul}>
          <li style={D.li}><strong>PDF export</strong> — Download a branded, shareable PDF of the full report. Available on paid plans.</li>
          <li style={D.li}><strong>Share links</strong> — Generate a read-only public link (e.g. <code style={D.inlineCode}>reliq.dev/r/rep_2k8x</code>). Links can be revoked at any time.</li>
          <li style={D.li}><strong>White-label reports</strong> — Team plan includes reports with your workspace branding.</li>
        </ul>
        <p style={D.p}>
          Report IDs use the <code style={D.inlineCode}>rep_</code> prefix. Scan IDs use the <code style={D.inlineCode}>scn_</code> prefix. Each report links back to its originating scan.
        </p>
      </section>

      {/* M ── Share Links */}
      <section className="docs-section" id="docs-share-links">
        <h2 style={D.h2}>Share Links</h2>
        <p style={D.p}>
          Share links give read-only access to a report without requiring the recipient to sign in. They are useful for sharing results with clients, reviewers, or external stakeholders.
        </p>
        <p style={D.p}>
          Links are managed from the Reports page. You can set an expiry date or revoke a link immediately. Revoked links return a 404. Reliq is not responsible for disclosure resulting from share links you distribute.
        </p>
      </section>

      {/* N ── GitHub Action */}
      <section className="docs-section" id="docs-github-action">
        <h2 style={D.h2}>GitHub Action</h2>
        <p style={D.p}>
          The <code style={D.inlineCode}>reliq/scan@v1</code> GitHub Action runs a Reliq scan as part of your CI/CD workflow. Add it to any workflow that produces a build artifact.
        </p>
        <h3 style={D.h3}>Basic usage</h3>
        <code style={D.code}>{`- name: Reliq scan
  uses: reliq/scan@v1
  with:
    api_key: \${{ secrets.RELIQ_KEY }}
    file: ./build/app-release.aab
    target_stores: play_store,app_store
    fail_on: critical`}</code>
        <h3 style={D.h3}>Inputs</h3>
        <ul style={D.ul}>
          <li style={D.li}><code style={D.inlineCode}>api_key</code> — Your Reliq API key. Store as a GitHub Actions secret.</li>
          <li style={D.li}><code style={D.inlineCode}>file</code> — Path to the build artifact (.apk, .aab, or .ipa).</li>
          <li style={D.li}><code style={D.inlineCode}>target_stores</code> — Comma-separated: <code style={D.inlineCode}>play_store</code>, <code style={D.inlineCode}>app_store</code>, or both.</li>
          <li style={D.li}><code style={D.inlineCode}>fail_on</code> — Fail the workflow on: <code style={D.inlineCode}>critical</code>, <code style={D.inlineCode}>warning</code>, or <code style={D.inlineCode}>any</code>. Default is <code style={D.inlineCode}>critical</code>.</li>
        </ul>
        <h3 style={D.h3}>Outputs</h3>
        <ul style={D.ul}>
          <li style={D.li}><code style={D.inlineCode}>score</code> — Readiness score (0–100).</li>
          <li style={D.li}><code style={D.inlineCode}>verdict</code> — One of <code style={D.inlineCode}>pass</code>, <code style={D.inlineCode}>likely_pass</code>, <code style={D.inlineCode}>needs_fixes</code>, <code style={D.inlineCode}>will_reject</code>.</li>
          <li style={D.li}><code style={D.inlineCode}>report_url</code> — URL of the generated report.</li>
          <li style={D.li}><code style={D.inlineCode}>scan_id</code> — Scan ID for API retrieval.</li>
        </ul>
        <p style={D.p}>
          Find <code style={D.inlineCode}>reliq/scan@v1</code> on the GitHub Actions Marketplace. API keys are managed from the API &amp; Webhooks settings page.
        </p>
      </section>

      {/* O ── API Keys */}
      <section className="docs-section" id="docs-api-keys">
        <h2 style={D.h2}>API Keys</h2>
        <p style={D.p}>
          API keys authenticate programmatic access to the Reliq API. Create and manage keys from <em>Settings → API &amp; Webhooks</em>.
        </p>
        <ul style={D.ul}>
          <li style={D.li}>Keys are displayed once at creation. Copy and store them securely — Reliq cannot retrieve them after the initial display.</li>
          <li style={D.li}>Keys have a <code style={D.inlineCode}>rlq_</code> prefix. Do not commit keys to public repositories or embed them in app builds.</li>
          <li style={D.li}>You can rotate or revoke a key at any time. Rotating a key immediately invalidates the previous key.</li>
          <li style={D.li}>All API requests use <code style={D.inlineCode}>Authorization: Bearer {"{your_key}"}</code> header.</li>
        </ul>
      </section>

      {/* P ── Webhooks */}
      <section className="docs-section" id="docs-webhooks">
        <h2 style={D.h2}>Webhooks</h2>
        <p style={D.p}>
          Webhooks deliver scan and report events to your own HTTP endpoints in real time. Configure webhooks from <em>Settings → API &amp; Webhooks</em>.
        </p>
        <h3 style={D.h3}>Events</h3>
        <ul style={D.ul}>
          <li style={D.li}><code style={D.inlineCode}>scan.completed</code> — Fired when a scan finishes. Payload includes scan ID, score, verdict, and finding counts.</li>
          <li style={D.li}><code style={D.inlineCode}>report.generated</code> — Fired when a report is ready. Payload includes report ID and share URL.</li>
        </ul>
        <h3 style={D.h3}>Signature verification</h3>
        <p style={D.p}>
          Every webhook request includes an <code style={D.inlineCode}>X-Reliq-Signature</code> header. The value is an HMAC-SHA256 of the raw request body using your webhook secret as the key. Always verify this header before processing the payload.
        </p>
        <code style={D.code}>{`// Node.js example
const crypto = require('crypto');
const sig = req.headers['x-reliq-signature'];
const expected = crypto
  .createHmac('sha256', process.env.RELIQ_WEBHOOK_SECRET)
  .update(req.rawBody)
  .digest('hex');
if (sig !== expected) return res.status(401).send('Invalid signature');`}</code>
      </section>

      {/* Q ── Team & Roles */}
      <section className="docs-section" id="docs-team">
        <h2 style={D.h2}>Team &amp; Roles</h2>
        <p style={D.p}>
          Workspace owners can invite team members and assign roles from the <em>Team</em> page. Available roles:
        </p>
        <ul style={D.ul}>
          <li style={D.li}><strong>Admin</strong> — Full access including billing, API keys, and team management.</li>
          <li style={D.li}><strong>Editor</strong> — Can run scans, view results, and export reports. Cannot manage billing or team.</li>
          <li style={D.li}><strong>Viewer</strong> — Read-only access to scans and reports. Cannot run new scans.</li>
        </ul>
        <p style={D.p}>
          SSO via SAML/OIDC is available on Team and Enterprise plans. Audit logs recording key account events are accessible to Admin-role members.
        </p>
      </section>

      {/* R ── Billing */}
      <section className="docs-section" id="docs-billing">
        <h2 style={D.h2}>Billing &amp; Usage</h2>
        <p style={D.p}>
          Subscriptions are billed monthly or annually and renew automatically unless cancelled before the renewal date. Scan usage resets at the start of each billing period.
        </p>
        <ul style={D.ul}>
          <li style={D.li}><strong>Starter — $29/mo</strong> — 25 scans/month, PDF exports, shareable links, email support.</li>
          <li style={D.li}><strong>Pro — $79/mo</strong> — 100 scans/month, public API, GitHub Action, webhooks, priority queue.</li>
          <li style={D.li}><strong>Team — $199/mo</strong> — Unlimited scans, 5 seats, SSO, white-label reports, Slack + Linear integrations.</li>
        </ul>
        <p style={D.p}>
          Cancellation takes effect at the end of the current billing period. Usage and invoice history are available from the Billing page. For custom enterprise plans, contact <span style={{fontFamily:"var(--font-mono)", fontSize:13, color:"var(--teal)"}}>sales@reliq.dev</span>.
        </p>
      </section>

      {/* S ── Troubleshooting */}
      <section className="docs-section" id="docs-troubleshooting">
        <h2 style={D.h2}>Troubleshooting</h2>
        <ul style={{...D.ul, listStyle:"none", paddingLeft:0}}>
          {[
            { q:"Unsupported file type",    a:"Only .apk, .aab, and .ipa files are accepted. Ensure your build tool is producing a supported output format." },
            { q:"File too large",           a:"Maximum file size is 500 MB. Use the API with a pre-signed URL for larger builds, or split app modules before scanning." },
            { q:"Scan failed",              a:"Corrupted or encrypted builds may fail extraction. Ensure the file is a valid, unencrypted release or debug build. Contact support if the issue persists." },
            { q:"Missing metadata",         a:"Reliq could not read required metadata fields. This usually means the manifest is malformed or the build is incomplete." },
            { q:"Webhook not firing",       a:"Check that your endpoint returns a 2xx status within 10 seconds. Reliq retries failed deliveries up to 3 times with exponential back-off." },
            { q:"Report link expired",      a:"Share links with an expiry date become inaccessible after the set date. Regenerate the link from the Reports page." },
            { q:"GitHub Action failing",    a:"Ensure your API key is stored as a GitHub Actions secret and that the file path matches the build artifact location in your workflow." },
            { q:"Score lower than expected",a:"Check the Permissions, Security, and Privacy sections first — these categories carry the highest weight in the score calculation." },
          ].map(({ q, a }) => (
            <li key={q} style={{
              ...D.li, padding:"14px 0",
              borderBottom:"1px solid var(--line-1)",
              display:"flex", flexDirection:"column", gap:4,
            }}>
              <span style={{fontWeight:600, fontSize:14, color:"var(--fg-0)"}}>{q}</span>
              <span style={{fontSize:13.5, color:"var(--fg-2)", lineHeight:1.65}}>{a}</span>
            </li>
          ))}
        </ul>
        <p style={{...D.p, marginTop:20}}>
          Still stuck? Email <span style={{fontFamily:"var(--font-mono)", fontSize:13, color:"var(--teal)"}}>support@reliq.dev</span> or open a ticket from the dashboard.
        </p>
      </section>

    </LandingLayout>
  );
};

Object.assign(window, { DocsPage });