// ============================================================
// autoclient.io — LEGAL: Privacy Policy (+ shared LegalLayout)
// ============================================================

function LegalLayout({ kicker, title, updated, intro, sections }) {
  useReveal();
  return (
    <main>
      <section style={{ position: "relative", overflow: "hidden", padding: "150px 0 40px" }}>
        <Aura color="#8784FD" size={520} top={-200} left={"30%"} opacity={0.34} drift={1} />
        <div className="wrap-narrow" style={{ position: "relative", zIndex: 1 }}>
          <span className="overline-grad fade-up">{kicker}</span>
          <h1 className="fade-up" style={{ fontWeight: 300, fontSize: "clamp(2.4rem,4.6vw,3.8rem)", lineHeight: 1.06, letterSpacing: "-0.03em", margin: "18px 0 0" }}>{title}</h1>
          {updated && <p className="fade-up" style={{ fontSize: 14, color: "var(--fg-on-dark-3)", margin: "18px 0 0" }}>Last updated: {updated}</p>}
          {intro && <p className="fade-up" style={{ fontSize: 17, lineHeight: 1.7, color: "var(--fg-on-dark-2)", margin: "26px 0 0" }}>{intro}</p>}
        </div>
      </section>

      <section style={{ paddingBottom: 40 }}>
        <div className="wrap-narrow">
          {sections.map((s, i) => (
            <div key={i} className="reveal" style={{ paddingTop: 40, marginTop: 40, borderTop: i ? "1px solid var(--line-on-dark)" : "none" }}>
              <h2 style={{ fontWeight: 500, fontSize: 22, letterSpacing: "-0.01em", margin: "0 0 16px", display: "flex", gap: 14, alignItems: "baseline" }}>
                <span className="gt" style={{ fontWeight: 400, fontSize: 18 }}>{String(i + 1).padStart(2, "0")}</span>
                {s.h}
              </h2>
              {s.p && s.p.map((para, k) => (
                <p key={k} style={{ fontSize: 15.5, lineHeight: 1.75, color: "var(--fg-on-dark-2)", margin: k ? "14px 0 0" : 0 }}>{para}</p>
              ))}
              {s.list && (
                <ul style={{ margin: "16px 0 0", padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 12 }}>
                  {s.list.map((li, k) => (
                    <li key={k} style={{ display: "flex", gap: 12, alignItems: "flex-start", fontSize: 15.5, lineHeight: 1.6, color: "var(--fg-on-dark-2)" }}>
                      <span style={{ width: 6, height: 6, borderRadius: 99, background: "var(--auto-violet)", flexShrink: 0, marginTop: 9 }} />
                      <span>{li}</span>
                    </li>
                  ))}
                </ul>
              )}
            </div>
          ))}
          <p className="reveal" style={{ fontSize: 15, lineHeight: 1.7, color: "var(--fg-on-dark-2)", marginTop: 44, paddingTop: 28, borderTop: "1px solid var(--line-on-dark)" }}>
            Questions about this document? Reach us at <a href="mailto:info@autoclient.io" className="gt" style={{ fontWeight: 600 }}>info@autoclient.io</a>.
          </p>
        </div>
      </section>

      <CtaBanner title="Let's build your growth engine." sub="Book a call and we'll map your growth plan together." primary="Book a Call" small />
    </main>
  );
}

const PRIVACY_SECTIONS = [
  { h: "Information we collect", p: ["When you use our services or get in touch, we may collect personal information such as your name, email address, phone number, and billing details.", "We also collect usage data about how you interact with our website, including pages visited, referring links, and IP address, primarily through analytics tools."] },
  { h: "How we use your information", list: [
    "To provide our services and respond to inquiries, proposals, and bookings.",
    "To personalize your experience and recommend relevant content.",
    "To send updates, newsletters, and promotional offers, which you can opt out of at any time.",
    "To analyze behavior and improve our website's functionality, performance, and security.",
    "SMS: if you opt in, we send automated text messages to your number. Reply STOP to opt out at any time. Message and data rates may apply.",
  ] },
  { h: "Information sharing", p: ["We share information only when needed to operate: with trusted third-party service providers who help us deliver our services, when required to comply with applicable laws or legal requests, and with your consent. We do not sell your personal information."] },
  { h: "Data security", p: ["We use industry-standard security measures to protect your personal information from unauthorized access, disclosure, alteration, or destruction. No method of transmission or storage is completely secure, so we cannot guarantee absolute security."] },
  { h: "Your rights", p: ["You can access, update, or delete your personal data and manage your communication preferences at any time. To exercise these rights or raise a privacy concern, contact us at info@autoclient.io."] },
  { h: "Third-party websites", p: ["Our website may link to third-party sites. We are not responsible for their privacy practices or content, and we encourage you to review the privacy policies of any site you visit."] },
  { h: "Changes to this policy", p: ["We may update this Privacy Policy from time to time to reflect changes in our practices or legal requirements. We will note significant updates with a prominent notice on our website."] },
];

function PrivacyPage() {
  return (
    <LegalLayout
      kicker="Legal"
      title="Privacy Policy"
      intro="We're committed to protecting the privacy and security of our users' personal information. This policy explains what we collect, how we use it, and the choices you have. By using our website, you consent to the practices described here."
      sections={PRIVACY_SECTIONS}
    />
  );
}

Object.assign(window, { LegalLayout, PrivacyPage });