// ============================================
// Reliq — Legal & public pages
// Privacy · Terms · Security · Status
// ============================================

// ── Shared layout (nav + footer matching landing.jsx exactly) ─────────────────
const LandingLayout = ({ go, pageTitle, contentWidth = 780, children }) => {
  const [authed, setAuthed] = React.useState(() =>
    window.reliqAuth ? window.reliqAuth.isAuthed() : false
  );

  React.useEffect(() => {
    const onAuth = (e) => setAuthed(!!e.detail);
    window.addEventListener("reliq-auth-change", onAuth);
    return () => window.removeEventListener("reliq-auth-change", onAuth);
  }, []);

  // Detect active page for nav highlighting
  const currentHash = window.location.hash.replace(/^#\/?/, "");
  const isDocsPage   = currentHash === "docs";
  const isGHAPage    = currentHash === "github-action";

  // Navigate to landing page and then smooth-scroll to a named section
  const goToSection = (section) => {
    try { sessionStorage.setItem("reliq_scroll_to", section); } catch (_) {}
    go("/");
  };

  React.useEffect(() => {
    const prev = document.title;
    document.title = pageTitle ? `${pageTitle} | Reliq` : "Reliq — Store Compliance Diagnostic";
    return () => { document.title = prev; };
  }, [pageTitle]);

  return (
    <div className="landing">
      {/* ── Nav ── */}
      <div className="landing-nav">
        <div className="landing-nav-inner">
          <div className="brand" style={{padding:0, border:0, margin:0, cursor:"pointer"}} onClick={() => go("/")}>
            <img className="brand-logo brand-logo-light" src="assets/reliq-logo-dark.png" alt="Reliq" />
            <img className="brand-logo brand-logo-dark"  src="assets/reliq-logo-light.png" alt="Reliq" />
          </div>
          <div className="links">
            <a style={{cursor:"pointer"}} onClick={() => goToSection("features")}>Features</a>
            <a style={{cursor:"pointer"}} onClick={() => goToSection("how-it-works")}>How it works</a>
            <a style={{cursor:"pointer"}} onClick={() => goToSection("pricing")}>Pricing</a>
            <a style={{cursor:"pointer", color: isDocsPage ? "var(--fg-0)" : undefined}} onClick={() => go("/docs")}>Docs</a>
            <a style={{cursor:"pointer", color: isGHAPage ? "var(--fg-0)" : undefined}} onClick={() => go("/github-action")}>GitHub Action</a>
          </div>
          <div className="right">
            <ThemeToggle />
            {authed ? (
              <button className="btn btn-ghost btn-sm" onClick={() => go("/dashboard")}>
                Open dashboard
              </button>
            ) : (
              <button className="btn btn-ghost btn-sm" onClick={() => go("/signin")}>
                Sign in
              </button>
            )}
            <button className="btn btn-primary btn-sm" onClick={() => go(authed ? "/scan/new" : "/free-scan")}>
              {authed ? "New scan" : "Start scanning"} <Icon name="arrow-right" size={13} />
            </button>
          </div>
        </div>
      </div>

      {/* ── Content ── */}
      <div style={{maxWidth:contentWidth, margin:"0 auto", padding:"72px 28px 120px"}}>
        {children}
      </div>

      {/* ── Footer ── */}
      <div className="footer-bar">
        <div>© Reliq 2025 · The store-compliance diagnostic.</div>
        <div style={{display:"flex", gap:18}}>
          <a style={{cursor:"pointer"}} onClick={() => go("/privacy")}>Privacy</a>
          <a style={{cursor:"pointer"}} onClick={() => go("/terms")}>Terms</a>
          <a style={{cursor:"pointer"}} onClick={() => go("/security")}>Security</a>
          <a style={{cursor:"pointer"}} onClick={() => go("/status")}>Status</a>
        </div>
      </div>
    </div>
  );
};

// ── Shared style constants ─────────────────────────────────────────────────────
const LS = {
  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,
  },
  meta: {
    fontFamily:"var(--font-mono)", fontSize:12, color:"var(--fg-3)", margin:"0 0 48px",
  },
  section: {
    marginTop:44, paddingTop:36, borderTop:"1px solid var(--line-1)",
  },
  h2: {
    fontFamily:"var(--font-display)", fontSize:16, fontWeight:600,
    letterSpacing:"-0.01em", margin:"0 0 12px", 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 },
  email: {
    fontFamily:"var(--font-mono)", fontSize:13.5, color:"var(--teal)",
  },
  callout: {
    background:"var(--bg-2)", border:"1px solid var(--line-2)", borderRadius:"var(--r-sm)",
    padding:"14px 18px", marginBottom:14,
    fontSize:14, color:"var(--fg-1)", lineHeight:1.7,
  },
  calloutWarn: {
    background:"var(--amber-bg)", border:"1px solid rgba(245,158,11,0.3)", borderRadius:"var(--r-sm)",
    padding:"14px 18px", marginBottom:14,
    fontSize:14, color:"var(--fg-1)", lineHeight:1.7,
  },
};

// ══════════════════════════════════════════════════════════════════════════════
// PAGE 1 — Privacy
// ══════════════════════════════════════════════════════════════════════════════
const Privacy = ({ go }) => (
  <LandingLayout go={go} pageTitle="Privacy">
    <span style={LS.eyebrow}>Legal</span>
    <h1 style={LS.h1}>Privacy Policy</h1>
    <p style={LS.meta}>Last updated: 23 May 2026 · reliq.dev</p>

    {/* Overview */}
    <p style={LS.p}>
      Reliq ("we", "us", "our") provides a store-compliance diagnostic platform that helps app developers
      scan builds, review policy signals, generate reports, and integrate checks into CI/CD pipelines.
      This Privacy Policy explains what data we collect, how we use it, and the controls available to you.
    </p>
    <p style={LS.p}>
      By using Reliq, you agree to the practices described in this policy. If you are using Reliq on behalf
      of an organisation, you represent that you have authority to bind that organisation.
    </p>

    {/* Information we collect */}
    <div style={LS.section}>
      <h2 style={LS.h2}>Information we collect</h2>
      <p style={LS.p}><strong>Account information.</strong> When you create an account we collect your name,
        email address, workspace name, team role, and authentication credentials.</p>
      <p style={LS.p}><strong>Uploaded app builds.</strong> When you run a scan, you may upload APK, AAB, or
        IPA files together with associated metadata such as app name, bundle ID, package ID, version, build
        number, and target stores. These files are processed to perform diagnostic checks.</p>
      <p style={LS.p}><strong>Scan and report data.</strong> We generate and store scan results, findings,
        severity ratings, fix recommendations, report PDFs, share links, and timestamps associated with
        each scan.</p>
      <p style={LS.p}><strong>Integration data.</strong> If you connect Reliq to GitHub Actions, webhooks,
        Slack, or Linear, we collect configuration data necessary to operate those integrations, including
        API keys you create within Reliq.</p>
      <p style={LS.p}><strong>Billing information.</strong> Payment details are processed by our payment
        provider. We store plan type, subscription status, usage counts, and invoice references — not raw
        card numbers.</p>
      <p style={LS.p}><strong>Usage analytics.</strong> We collect information about how you interact with
        Reliq: scans run, reports exported, features used, and pages visited. This is used to improve
        the product.</p>
    </div>

    {/* How we use information */}
    <div style={LS.section}>
      <h2 style={LS.h2}>How we use information</h2>
      <ul style={LS.ul}>
        <li style={LS.li}>Run scans against uploaded builds and generate findings and fix plans</li>
        <li style={LS.li}>Produce downloadable reports and shareable report links</li>
        <li style={LS.li}>Enable CI/CD integrations, webhooks, and API access</li>
        <li style={LS.li}>Improve and update policy checks as store guidelines change</li>
        <li style={LS.li}>Protect your account through authentication and audit logging</li>
        <li style={LS.li}>Manage subscriptions, enforce usage limits, and process payments</li>
        <li style={LS.li}>Respond to support requests and resolve issues</li>
        <li style={LS.li}>Send important product and account notifications</li>
      </ul>
    </div>

    {/* Uploaded builds */}
    <div style={LS.section}>
      <h2 style={LS.h2}>Uploaded builds</h2>
      <p style={LS.p}>
        Uploaded APK, AAB, and IPA files are used exclusively to perform the diagnostic scan you requested.
        During scanning, Reliq may decompile or extract elements including the manifest, permissions declarations,
        SDK fingerprints, metadata strings, security configuration, and privacy labels.
      </p>
      <p style={LS.p}>
        Reliq does not sell uploaded build files or extracted artefacts to third parties. Build files may
        be retained for a limited period to support re-scanning, comparison, and audit trails.
        You may delete scan history and associated build data from your workspace settings.
      </p>
    </div>

    {/* Sharing */}
    <div style={LS.section}>
      <h2 style={LS.h2}>How we share information</h2>
      <p style={LS.p}><strong>We do not sell your data.</strong> We do not sell, rent, or trade personal
        information or scan data to any third party.</p>
      <p style={LS.p}><strong>Service providers.</strong> We work with infrastructure and service providers
        (cloud hosting, payment processing, analytics) who process data only as necessary to operate Reliq.
        These providers are bound by data processing agreements.</p>
      <p style={LS.p}><strong>Shared reports.</strong> If you create a public or shared report link, the
        report contents are accessible to anyone with that link. You can revoke shared links at any time.</p>
      <p style={LS.p}><strong>Integrations.</strong> If you configure webhooks or Slack/Linear integrations,
        scan event payloads will be sent to the endpoints you specify. You control these connections.</p>
      <p style={LS.p}><strong>Legal requirements.</strong> We may disclose information if required by law
        or to protect the rights, safety, or property of Reliq or others.</p>
    </div>

    {/* Data retention */}
    <div style={LS.section}>
      <h2 style={LS.h2}>Data retention</h2>
      <p style={LS.p}>
        Scan results, reports, and workspace data are retained while your account is active. You may delete
        individual scan records or your entire workspace through account settings. Account deletion removes
        personally identifiable information from active systems within a reasonable period.
      </p>
      <p style={LS.p}>
        Certain security logs, billing records, and fraud-prevention data may be retained beyond account
        deletion to satisfy legal, audit, or compliance obligations.
      </p>
    </div>

    {/* Security */}
    <div style={LS.section}>
      <h2 style={LS.h2}>Security</h2>
      <p style={LS.p}>
        We use industry-standard measures to protect your data, including TLS encryption in transit,
        encryption at rest where supported, role-based access controls, API key hashing,
        and internal audit logging. For more detail, see our <a style={{color:"var(--teal)", cursor:"pointer"}} onClick={() => go("/security")}>Security page</a>.
      </p>
    </div>

    {/* User choices */}
    <div style={LS.section}>
      <h2 style={LS.h2}>Your choices</h2>
      <ul style={LS.ul}>
        <li style={LS.li}>Update your profile, email, or workspace name in account settings</li>
        <li style={LS.li}>Delete individual scan records or bulk-clear scan history</li>
        <li style={LS.li}>Revoke public report share links at any time</li>
        <li style={LS.li}>Remove connected integrations (GitHub, Slack, Linear, webhooks)</li>
        <li style={LS.li}>Delete your workspace and associated data</li>
        <li style={LS.li}>Contact us to request a copy of your data or raise a privacy concern</li>
      </ul>
    </div>

    {/* Contact */}
    <div style={LS.section}>
      <h2 style={LS.h2}>Contact</h2>
      <p style={LS.p}>
        For privacy questions, data requests, or concerns, contact us at:
      </p>
      <p><span style={LS.email}>privacy@reliq.dev</span></p>
    </div>
  </LandingLayout>
);

// ══════════════════════════════════════════════════════════════════════════════
// PAGE 2 — Terms
// ══════════════════════════════════════════════════════════════════════════════
const Terms = ({ go }) => (
  <LandingLayout go={go} pageTitle="Terms">
    <span style={LS.eyebrow}>Legal</span>
    <h1 style={LS.h1}>Terms of Service</h1>
    <p style={LS.meta}>Last updated: 23 May 2026 · reliq.dev</p>

    {/* Agreement */}
    <p style={LS.p}>
      These Terms of Service ("Terms") govern your access to and use of Reliq ("we", "us", "our"), a
      store-compliance diagnostic platform available at reliq.dev. By creating an account, running a scan,
      or using any Reliq feature, you agree to these Terms. If you do not agree, do not use Reliq.
    </p>
    <p style={LS.p}>
      If you are using Reliq on behalf of an organisation, these Terms apply to that organisation and you
      represent that you have authority to accept them.
    </p>

    {/* Product description */}
    <div style={LS.section}>
      <h2 style={LS.h2}>Product description</h2>
      <p style={LS.p}>
        Reliq provides automated app store-readiness diagnostics. This includes static analysis of uploaded
        APK, AAB, and IPA build files; policy checks against Apple App Review Guidelines and Google Play
        Developer Program Policy; compliance reports; shareable report links; CI/CD integrations via
        GitHub Actions and API; and related developer tooling.
      </p>
    </div>

    {/* No guarantee */}
    <div style={LS.section}>
      <h2 style={LS.h2}>No guarantee of store approval</h2>
      <div style={LS.calloutWarn}>
        <strong>Important:</strong> Reliq provides diagnostic guidance and risk signals based on known
        policy patterns. Reliq does not guarantee that your app will be approved by the Apple App Store,
        Google Play, or any other marketplace. Final review decisions are made solely by Apple, Google,
        or the relevant platform. Store policies change frequently and Reliq's checks may not reflect
        the most recent policy updates at all times.
      </div>
      <p style={LS.p}>
        You should treat Reliq results as a pre-submission risk assessment, not as a guarantee of
        compliance or approval.
      </p>
    </div>

    {/* User responsibilities */}
    <div style={LS.section}>
      <h2 style={LS.h2}>Your responsibilities</h2>
      <ul style={LS.ul}>
        <li style={LS.li}>You must have all necessary rights to upload, distribute, and test the app builds you submit to Reliq.</li>
        <li style={LS.li}>You are solely responsible for your app's content, code, permissions, metadata, privacy declarations, and store submissions.</li>
        <li style={LS.li}>You must not upload malicious, illegal, or unauthorised files.</li>
        <li style={LS.li}>You must keep your API keys and credentials secure and not share them with unauthorised parties.</li>
        <li style={LS.li}>You must comply with all applicable laws and store developer programme policies.</li>
      </ul>
    </div>

    {/* Accounts and workspaces */}
    <div style={LS.section}>
      <h2 style={LS.h2}>Accounts and workspaces</h2>
      <p style={LS.p}>
        You are responsible for all activity that occurs under your account. Workspace owners control
        team membership, roles, permissions, and data access within their workspace. If you suspect
        unauthorised access, notify us immediately at <span style={LS.email}>support@reliq.dev</span>.
      </p>
    </div>

    {/* Billing */}
    <div style={LS.section}>
      <h2 style={LS.h2}>Billing and subscriptions</h2>
      <p style={LS.p}>
        Paid plans are billed monthly or annually and may renew automatically unless cancelled before the
        renewal date. Each plan includes a monthly scan limit. Scans beyond the plan limit may be blocked
        or subject to overage charges depending on your plan settings.
      </p>
      <p style={LS.p}>
        Cancellation takes effect at the end of the current billing period. We do not provide refunds for
        unused portions of a billing period except where required by law.
      </p>
    </div>

    {/* Reports and share links */}
    <div style={LS.section}>
      <h2 style={LS.h2}>Reports and share links</h2>
      <p style={LS.p}>
        You control the visibility of your reports. Setting a report to "Shared" generates a public link
        accessible to anyone who has it. You should revoke share links when they are no longer needed.
        Reliq is not responsible for disclosure of information resulting from share links you create.
      </p>
    </div>

    {/* Integrations and API */}
    <div style={LS.section}>
      <h2 style={LS.h2}>Integrations and API</h2>
      <p style={LS.p}>
        API keys and webhook secrets must be managed securely. Do not commit keys to public repositories.
        You are responsible for the external systems you connect to Reliq. Reliq is not liable for failures,
        outages, or data loss in third-party systems connected via integrations.
      </p>
    </div>

    {/* Acceptable use */}
    <div style={LS.section}>
      <h2 style={LS.h2}>Acceptable use</h2>
      <p style={LS.p}>You agree not to:</p>
      <ul style={LS.ul}>
        <li style={LS.li}>Use Reliq for any unlawful purpose or in violation of any applicable law</li>
        <li style={LS.li}>Submit builds or apps that you do not own or have rights to test</li>
        <li style={LS.li}>Attempt to reverse engineer, decompile, or extract Reliq's proprietary methods or algorithms</li>
        <li style={LS.li}>Abuse or overload the Reliq API beyond documented rate limits</li>
        <li style={LS.li}>Upload malware, ransomware, or intentionally malicious binaries without prior written authorisation for security testing purposes</li>
        <li style={LS.li}>Misrepresent your identity or impersonate another person or organisation</li>
        <li style={LS.li}>Resell or sublicense access to Reliq without written permission</li>
      </ul>
    </div>

    {/* Limitation of liability */}
    <div style={LS.section}>
      <h2 style={LS.h2}>Limitation of liability</h2>
      <p style={LS.p}>
        To the maximum extent permitted by applicable law, Reliq and its officers, employees, agents,
        and licensors will not be liable for any indirect, incidental, special, consequential, or punitive
        damages — including lost profits, store rejection, revenue loss, or data loss — arising from your
        use of or inability to use Reliq, even if we have been advised of the possibility of such damages.
      </p>
      <p style={LS.p}>
        Reliq's total liability for any claim arising from these Terms or your use of the service will
        not exceed the amount you paid to Reliq in the three months preceding the claim.
      </p>
    </div>

    {/* Changes */}
    <div style={LS.section}>
      <h2 style={LS.h2}>Changes to these Terms</h2>
      <p style={LS.p}>
        We may update these Terms from time to time. We will notify you of material changes by posting
        an updated version at reliq.dev/terms and updating the "Last updated" date. Continued use of Reliq
        after changes take effect constitutes acceptance of the updated Terms.
      </p>
    </div>

    {/* Contact */}
    <div style={LS.section}>
      <h2 style={LS.h2}>Contact</h2>
      <p style={LS.p}>Questions about these Terms:</p>
      <p><span style={LS.email}>terms@reliq.dev</span></p>
    </div>
  </LandingLayout>
);

// ══════════════════════════════════════════════════════════════════════════════
// PAGE 3 — Security
// ══════════════════════════════════════════════════════════════════════════════
const Security = ({ go }) => (
  <LandingLayout go={go} pageTitle="Security">
    <span style={LS.eyebrow}>Trust</span>
    <h1 style={LS.h1}>Security</h1>
    <p style={LS.meta}>Last updated: 23 May 2026 · reliq.dev</p>

    <p style={LS.p}>
      Reliq handles sensitive artefacts — app binaries, build metadata, API keys, and compliance findings.
      We take security seriously at every layer. This page describes our current security posture and
      the controls available to you as a user.
    </p>

    {/* Data protection */}
    <div style={LS.section}>
      <h2 style={LS.h2}>Data protection</h2>
      <ul style={LS.ul}>
        <li style={LS.li}><strong>Encryption in transit.</strong> All communication between your browser, the Reliq API, and our services uses TLS 1.2 or higher. API keys are transmitted only over encrypted connections.</li>
        <li style={LS.li}><strong>Encryption at rest.</strong> Sensitive data including scan artefacts, report content, and API key hashes are encrypted at rest using industry-standard algorithms.</li>
        <li style={LS.li}><strong>Secure file handling.</strong> Uploaded build files are processed in isolated environments. Access to raw binaries is restricted to the scan pipeline and authorised workspace members.</li>
        <li style={LS.li}><strong>Least privilege.</strong> Internal system access follows the principle of least privilege. No engineer has standing read access to uploaded builds or scan artefacts.</li>
      </ul>
    </div>

    {/* Build handling */}
    <div style={LS.section}>
      <h2 style={LS.h2}>App build handling</h2>
      <p style={LS.p}>
        Uploaded APK, AAB, and IPA files are processed to extract diagnostic signals including manifest
        content, permission declarations, SDK fingerprints, metadata strings, privacy labels, and security
        configuration. Scan artefacts — findings, extracted metadata, and reports — are scoped to your
        workspace. Team members see only the data their role permits.
      </p>
      <p style={LS.p}>
        Build files are not shared with third parties, used for advertising, or disclosed outside the
        scope of operating the service. See our <a style={{color:"var(--teal)", cursor:"pointer"}} onClick={() => go("/privacy")}>Privacy Policy</a> for data retention details.
      </p>
    </div>

    {/* Account security */}
    <div style={LS.section}>
      <h2 style={LS.h2}>Account security</h2>
      <ul style={LS.ul}>
        <li style={LS.li}><strong>Password protection.</strong> Passwords are hashed and salted using a modern algorithm. We never store plaintext passwords.</li>
        <li style={LS.li}><strong>Two-factor authentication (2FA).</strong> 2FA via authenticator app is supported and strongly recommended for all accounts.</li>
        <li style={LS.li}><strong>Session management.</strong> Sessions expire after inactivity. You can terminate all active sessions from account settings.</li>
        <li style={LS.li}><strong>Role-based access.</strong> Workspace owners assign member roles. Viewer, Editor, and Admin roles control what each member can see and do.</li>
        <li style={LS.li}><strong>Audit logs.</strong> Key account events — sign-ins, key creation, report sharing, team changes — are logged and accessible to workspace admins.</li>
      </ul>
    </div>

    {/* API and webhooks */}
    <div style={LS.section}>
      <h2 style={LS.h2}>API keys and webhooks</h2>
      <ul style={LS.ul}>
        <li style={LS.li}>API keys are displayed once at creation. Store them securely — Reliq cannot retrieve them after the initial display.</li>
        <li style={LS.li}>Webhook payloads are signed with an HMAC-SHA256 signature using your webhook secret. Verify the <code style={{fontFamily:"var(--font-mono)", fontSize:13}}>X-Reliq-Signature</code> header before trusting incoming payloads.</li>
        <li style={LS.li}>You can rotate or revoke API keys at any time from the API & Webhooks settings page.</li>
        <li style={LS.li}>Do not commit API keys to public repositories or include them in app builds.</li>
      </ul>
    </div>

    {/* Infrastructure */}
    <div style={LS.section}>
      <h2 style={LS.h2}>Infrastructure security</h2>
      <ul style={LS.ul}>
        <li style={LS.li}>Production infrastructure is hosted on cloud providers with SOC 2 Type II and ISO 27001 certifications.</li>
        <li style={LS.li}>Systems are continuously monitored for anomalous activity, availability, and performance.</li>
        <li style={LS.li}>Audit trails log access to sensitive data and infrastructure changes.</li>
        <li style={LS.li}>Production and staging environments are fully separated. No production data is used in non-production environments.</li>
        <li style={LS.li}>Deployments use reviewed, automated pipelines. Direct access to production systems requires multi-party approval.</li>
      </ul>
    </div>

    {/* Responsible disclosure */}
    <div style={LS.section}>
      <h2 style={LS.h2}>Responsible disclosure</h2>
      <p style={LS.p}>
        We welcome responsible disclosure of security vulnerabilities. If you discover a potential security
        issue in Reliq, please report it privately before public disclosure. We will acknowledge your report
        within 72 hours and keep you informed as we investigate and remediate.
      </p>
      <div style={LS.callout}>
        <strong>Report security vulnerabilities to:</strong><br />
        <span style={LS.email}>security@reliq.dev</span><br />
        <span style={{fontSize:13, color:"var(--fg-2)"}}>Please do not disclose publicly until we have confirmed and addressed the issue.</span>
      </div>
    </div>

    {/* Best practices */}
    <div style={LS.section}>
      <h2 style={LS.h2}>Security best practices for users</h2>
      <ul style={LS.ul}>
        <li style={LS.li}>Enable two-factor authentication on your Reliq account</li>
        <li style={LS.li}>Rotate API keys periodically and immediately if you suspect compromise</li>
        <li style={LS.li}>Restrict team access to the minimum role required for each member</li>
        <li style={LS.li}>Revoke report share links when they are no longer needed</li>
        <li style={LS.li}>Only upload app builds that you own or have explicit rights to test</li>
        <li style={LS.li}>Verify webhook signatures in your integration code before processing payloads</li>
        <li style={LS.li}>Review connected integrations regularly and remove those no longer in use</li>
      </ul>
    </div>

    {/* Roadmap */}
    <div style={LS.section}>
      <h2 style={LS.h2}>Trust and compliance roadmap</h2>
      <p style={LS.p}>
        We are actively working toward the following trust milestones:
      </p>
      <ul style={LS.ul}>
        <li style={LS.li}><strong>SOC 2 Type II readiness</strong> — formal audit in progress</li>
        <li style={LS.li}><strong>Single sign-on (SSO)</strong> — SAML and OIDC support for Team and Enterprise plans</li>
        <li style={LS.li}><strong>Advanced audit logs</strong> — exportable, filterable logs for compliance workflows</li>
        <li style={LS.li}><strong>Data residency options</strong> — EU and US region selection for workspace data</li>
        <li style={LS.li}><strong>Enterprise security review</strong> — vendor questionnaire support and custom DPAs</li>
      </ul>
    </div>
  </LandingLayout>
);

// ══════════════════════════════════════════════════════════════════════════════
// PAGE 4 — Status
// ══════════════════════════════════════════════════════════════════════════════

// Status indicator component
const StatusBadge = ({ status }) => {
  const map = {
    operational: { label:"Operational", color:"var(--teal)",  bg:"var(--teal-bg)" },
    degraded:    { label:"Degraded",    color:"var(--amber)", bg:"var(--amber-bg)" },
    outage:      { label:"Outage",      color:"var(--red)",   bg:"var(--red-bg)" },
  };
  const m = map[status] || map.operational;
  return (
    <span style={{
      display:"inline-flex", alignItems:"center", gap:6,
      fontFamily:"var(--font-mono)", fontSize:11, fontWeight:600,
      letterSpacing:"0.08em", textTransform:"uppercase",
      color:m.color, background:m.bg,
      border:`1px solid ${m.color}40`,
      padding:"3px 9px", borderRadius:4, whiteSpace:"nowrap",
    }}>
      <span style={{
        width:6, height:6, borderRadius:"50%",
        background:m.color, boxShadow:`0 0 5px ${m.color}`,
        display:"inline-block", flexShrink:0,
      }} />
      {m.label}
    </span>
  );
};

const SERVICES = [
  { name:"Web application",    desc:"reliq.dev dashboard and UI",                      status:"operational" },
  { name:"API",                desc:"api.reliq.dev · v1 endpoints",                    status:"operational" },
  { name:"Scan engine",        desc:"APK / AAB / IPA processing pipeline",             status:"operational" },
  { name:"Report generation",  desc:"PDF and shareable HTML reports",                  status:"operational" },
  { name:"PDF exports",        desc:"Client-side and server-side PDF rendering",        status:"operational" },
  { name:"GitHub Action",      desc:"reliq/scan@v1 · GitHub Marketplace",              status:"operational" },
  { name:"Webhooks",           desc:"scan.completed event delivery",                   status:"operational" },
  { name:"Share links",        desc:"Public report and badge links (reliq.dev/r/…)",   status:"operational" },
  { name:"Billing",            desc:"Subscription, invoices, and usage metering",      status:"operational" },
  { name:"Policy Library",     desc:"Policy check index and documentation",            status:"operational" },
];

const Status = ({ go }) => (
  <LandingLayout go={go} pageTitle="Status">
    <span style={LS.eyebrow}>System status</span>
    <h1 style={LS.h1}>All systems operational</h1>
    <p style={LS.meta}>Last updated: 23 May 2026 at 12:00 UTC · reliq.dev</p>

    {/* Overall status banner */}
    <div style={{
      display:"flex", alignItems:"center", gap:14,
      background:"var(--teal-bg)", border:"1px solid rgba(0,212,170,0.3)",
      borderRadius:"var(--r-sm)", padding:"16px 20px", marginBottom:36,
    }}>
      <span style={{
        width:12, height:12, borderRadius:"50%",
        background:"var(--teal)", boxShadow:"0 0 10px var(--teal)",
        display:"inline-block", flexShrink:0,
      }} />
      <div>
        <div style={{fontWeight:600, fontSize:14.5, color:"var(--fg-0)"}}>
          All Reliq services are operating normally.
        </div>
        <div style={{fontSize:13, color:"var(--fg-2)", marginTop:2}}>
          No incidents or degraded performance detected.
        </div>
      </div>
    </div>

    {/* Service components */}
    <div style={LS.section}>
      <h2 style={LS.h2}>Service components</h2>
      <div style={{border:"1px solid var(--line-1)", borderRadius:"var(--r-sm)", overflow:"hidden", marginTop:16}}>
        {SERVICES.map((svc, i) => (
          <div key={svc.name} style={{
            display:"flex", alignItems:"center", gap:16,
            padding:"13px 18px",
            borderTop: i === 0 ? "none" : "1px solid var(--line-1)",
            background: "var(--bg-1)",
          }}>
            <div style={{flex:1, minWidth:0}}>
              <div style={{fontSize:13.5, fontWeight:500, color:"var(--fg-0)"}}>{svc.name}</div>
              <div style={{fontFamily:"var(--font-mono)", fontSize:11.5, color:"var(--fg-3)", marginTop:2}}>{svc.desc}</div>
            </div>
            <StatusBadge status={svc.status} />
          </div>
        ))}
      </div>
    </div>

    {/* Recent incidents */}
    <div style={LS.section}>
      <h2 style={LS.h2}>Recent incidents</h2>
      <div style={{
        padding:"32px 24px", textAlign:"center",
        border:"1px solid var(--line-1)", borderRadius:"var(--r-sm)",
        background:"var(--bg-1)", marginTop:16,
      }}>
        <Icon name="check" size={20} style={{color:"var(--teal)"}} />
        <div style={{fontSize:14, fontWeight:500, color:"var(--fg-2)", marginTop:10}}>
          No incidents reported in the last 90 days.
        </div>
      </div>
    </div>

    {/* Maintenance */}
    <div style={LS.section}>
      <h2 style={LS.h2}>Scheduled maintenance</h2>
      <div style={{
        padding:"24px", textAlign:"center",
        border:"1px solid var(--line-1)", borderRadius:"var(--r-sm)",
        background:"var(--bg-1)", marginTop:16,
      }}>
        <div style={{fontSize:14, color:"var(--fg-2)"}}>
          No scheduled maintenance windows.
        </div>
      </div>
    </div>

    {/* Uptime note */}
    <div style={LS.section}>
      <h2 style={LS.h2}>Uptime history</h2>
      <p style={LS.p}>
        This status page is currently maintained manually. Historical uptime metrics,
        response-time graphs, and incident timelines will be available once our production
        monitoring integration is live. We are targeting public uptime reporting in a future
        release.
      </p>
      <p style={LS.p}>
        For real-time monitoring, the Reliq API health endpoint is available at:
      </p>
      <div style={{...LS.callout, fontFamily:"var(--font-mono)", fontSize:13}}>
        GET https://api.reliq.dev/health
      </div>
    </div>

    {/* Contact */}
    <div style={LS.section}>
      <h2 style={LS.h2}>Support</h2>
      <p style={LS.p}>
        If you are experiencing an issue not reflected on this page, or if you would like to report a
        service degradation, please contact us:
      </p>
      <p><span style={LS.email}>support@reliq.dev</span></p>
    </div>
  </LandingLayout>
);

Object.assign(window, { Privacy, Terms, Security, Status, LandingLayout });