/* global React, ReactDOM, Logo, ArrowRight, LangToggle */

/* =====================================================================
   LEGAL PAGES — app-legal.jsx
   Renders Privacy / Terms / Security based on window.__LEGAL_PAGE__
   ("privacy" | "terms" | "security"). English only by design: legal
   text is not run through window.t(), only the shared nav/footer is.
   ===================================================================== */

/* ---------------------- Nav (mirrors live nav incl. Blog) ---------------------- */

const NavLegal = () => {
  const [open, setOpen] = React.useState(false);
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <a href="/" className="brand">
          <Logo size={64} />
          <span className="brand-name">
            octocrew<span className="tld">.ai</span>
          </span>
        </a>
        <div className="nav-links">
          <a href="agents.html">{window.t("AI Crew")}</a>
          <a href="case-studies.html">{window.t("Case Studies")}</a>
          <a href="/blog/">{window.t("Blog")}</a>
          <a href="about.html">{window.t("About us")}</a>
        </div>
        <LangToggle />
        <a href="contact.html" className="nav-cta" data-octocrew-cal="booking">
          {window.t("Book a discovery call")} <ArrowRight />
        </a>
        <button
          className="nav-burger"
          aria-label="Menu"
          aria-expanded={open}
          onClick={() => setOpen(!open)}
        >
          <span /><span /><span />
        </button>
      </div>
      <div className={"nav-mobile" + (open ? " open" : "")}>
        <div className="wrap">
          <a href="agents.html">{window.t("AI Crew")}</a>
          <a href="case-studies.html">{window.t("Case Studies")}</a>
          <a href="/blog/">{window.t("Blog")}</a>
          <a href="about.html">{window.t("About us")}</a>
          <a href="contact.html" className="nav-mobile-cta" data-octocrew-cal="booking">{window.t("Book a discovery call")}</a>
          <LangToggle />
        </div>
      </div>
    </nav>
  );
};

/* ---------------------- Content ---------------------- */

const UPDATED = "July 3, 2026";

const LEGAL_CONTENT = {
  privacy: {
    title: "Privacy Policy",
    intro: "This policy explains what personal data Octocrew collects through octocrew.ai, why we collect it, and the choices you have. We keep it short on purpose: we collect little, and we do not sell any of it.",
    sections: [
      {
        h: "What we collect",
        b: [
          "Contact form: name, work email, company, website, industry vertical, and your message, submitted only when you fill in the form.",
          "Booking: if you book a discovery call, scheduling runs through Cal.com, which processes the details you enter there (name, email, chosen time).",
          "Analytics: we use Google Tag Manager and Google Analytics to understand aggregate site usage (pages visited, referral source, approximate location from IP, device type). IP addresses are not stored by us.",
          "Email: if you write to hello@octocrew.ai, we keep the correspondence.",
        ],
      },
      {
        h: "What we use it for",
        b: [
          "Responding to your enquiry and preparing for a discovery call (legitimate interest / pre-contractual steps).",
          "Understanding which content brings visitors, so we can improve the site (legitimate interest; analytics cookies load via consent where required).",
          "We do not sell personal data, we do not run third-party advertising trackers on this site, and we do not add you to a mailing list unless you explicitly ask to be added.",
        ],
      },
      {
        h: "Who processes it",
        b: [
          "Cal.com (call scheduling), Google (Tag Manager / Analytics), our website hosting provider, and our email provider. Each acts as a processor under its own data processing terms.",
          "If we engage you as a client, data handling for the engagement is governed by the service agreement, not by this site policy.",
        ],
      },
      {
        h: "Retention",
        b: [
          "Enquiries and correspondence: kept while we are in contact and for up to 24 months after the last exchange, then deleted unless an engagement followed.",
          "Analytics data: retained per Google Analytics settings (14 months).",
        ],
      },
      {
        h: "Your rights",
        b: [
          "You can request access to, correction of, or deletion of your personal data, object to processing, or request portability at any time: email hello@octocrew.ai. If you are in the EU/EEA or UK, you also have the right to complain to your local supervisory authority.",
        ],
      },
      {
        h: "Contact",
        b: [
          "Octocrew, hello@octocrew.ai. We will update this page when our practices change; the date above reflects the latest revision.",
        ],
      },
    ],
  },

  terms: {
    title: "Terms of Use",
    intro: "These terms cover your use of the octocrew.ai website. Client engagements (managed AI marketing crews) are governed by a separate written service agreement signed per engagement, not by this page.",
    sections: [
      {
        h: "The website",
        b: [
          "Content on this site is provided for general information about our services. It is not professional advice, and results described in case studies are specific to those clients and timeframes: they are not a promise of identical outcomes.",
          "We may change, move, or remove content at any time without notice.",
        ],
      },
      {
        h: "Intellectual property",
        b: [
          "The Octocrew name, logo, site design, and content are owned by Octocrew. You may link to the site and quote brief excerpts with attribution; do not republish substantial portions or use our brand assets without written permission.",
        ],
      },
      {
        h: "Acceptable use",
        b: [
          "Do not attempt to disrupt the site, probe or breach its security, scrape it at abusive volume, or misrepresent your identity when contacting us.",
        ],
      },
      {
        h: "Service engagements",
        b: [
          "Descriptions of the crew, pricing, and timelines on this site are indicative. The binding scope, fees, service levels, data handling, and liability for any engagement are set out in the service agreement for that engagement.",
        ],
      },
      {
        h: "Liability",
        b: [
          "The site is provided \"as is\". To the maximum extent permitted by law, Octocrew is not liable for damages arising from use of the site or reliance on its content. Nothing here limits liability that cannot be limited by law.",
        ],
      },
      {
        h: "Changes and contact",
        b: [
          "We may revise these terms; the date above reflects the latest revision. Questions: hello@octocrew.ai.",
        ],
      },
    ],
  },

  security: {
    title: "Security",
    intro: "Octocrew agents work inside client tools and data, so security is an operating principle, not a page. This is how we run engagements.",
    sections: [
      {
        h: "Isolated infrastructure",
        b: [
          "Each client crew runs on isolated infrastructure. Client contexts, credentials, and data are never shared between clients, and one client's agents have no path to another client's stack.",
        ],
      },
      {
        h: "Least-privilege access",
        b: [
          "Agents receive the minimum access needed for their lane, granted through the platform's own permission model (API keys, OAuth scopes, role-based seats) wherever available. Access is documented per engagement and revocable by the client at any time.",
        ],
      },
      {
        h: "Approval gates and earned autonomy",
        b: [
          "New workflows start in draft-only mode: every output is reviewed by a human before it reaches the public or your customers. Workflows graduate to autonomous operation only with explicit client approval, and can be pulled back to full approval at any time. Irreversible or high-risk actions stay gated.",
        ],
      },
      {
        h: "Logging and auditability",
        b: [
          "Every agent action is logged: what was read, what was produced, what was published, and who approved it. Logs are available to the client for the duration of the engagement.",
        ],
      },
      {
        h: "Credential handling",
        b: [
          "Credentials are stored in a secrets manager, never in plain text, never in prompts, never in repositories. Offboarding includes revocation of every credential issued for the engagement.",
        ],
      },
      {
        h: "Leaving",
        b: [
          "Your accounts, your data, your history stay yours. On exit we hand over documentation and revoke our own access: there is no lock-in by design.",
        ],
      },
      {
        h: "Reporting a concern",
        b: [
          "Found a vulnerability or have a security question? Email hello@octocrew.ai with \"Security\" in the subject. We respond to security reports with priority.",
        ],
      },
    ],
  },
};

/* ---------------------- Page ---------------------- */

const LegalBody = () => {
  const page = LEGAL_CONTENT[window.__LEGAL_PAGE__] || LEGAL_CONTENT.privacy;
  return (
    <section className="section" style={{ paddingTop: "clamp(120px, 16vh, 180px)" }}>
      <div className="wrap" style={{ maxWidth: 820 }}>
        <div className="eyebrow">{UPDATED ? "Last updated · " + UPDATED : ""}</div>
        <h1 className="h-display" style={{ fontSize: "clamp(34px, 5vw, 52px)" }}>{page.title}</h1>
        <p className="sub" style={{ maxWidth: 720 }}>{page.intro}</p>
        {page.sections.map((s, i) => (
          <div key={i} style={{ marginTop: "clamp(28px, 4vh, 40px)" }}>
            <h2 style={{ fontSize: "clamp(20px, 2.4vw, 26px)", marginBottom: 12 }}>{s.h}</h2>
            {s.b.map((p, j) => (
              <p key={j} style={{ margin: "0 0 12px", lineHeight: 1.65, color: "var(--ink-soft, inherit)" }}>{p}</p>
            ))}
          </div>
        ))}
      </div>
    </section>
  );
};

const LegalFooter = () => (
  <section className="section" style={{ borderTop: "1px solid var(--rule)", paddingTop: "clamp(40px, 5vh, 64px)", paddingBottom: "clamp(40px, 5vh, 64px)" }}>
    <div className="wrap">
      <div className="foot-meta" style={{ marginTop: 0, borderTop: "none", paddingTop: 0 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <span style={{ color: "var(--brand)", display: "inline-flex" }}>
            <Logo size={22} />
          </span>
          <span>{window.t("Managed agentic crews · MMXXVI")}</span>
        </div>
        <a className="foot-email" href="mailto:hello@octocrew.ai">hello@octocrew.ai</a>
        <nav className="foot-legal">
          <a href="privacy.html">{window.t("Privacy")}</a>
          <a href="terms.html">{window.t("Terms")}</a>
          <a href="security.html">{window.t("Security")}</a>
        </nav>
      </div>
    </div>
  </section>
);

function App() {
  return (
    <React.Fragment>
      <NavLegal />
      <main id="main-content">
        <LegalBody />
      </main>
      <LegalFooter />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);
