/* global React, SiteNav, SiteFooter, AgentModal */

/* Reusable page for TOS / Privacy / Refund / Earnings Disclaimer.
   Takes a `data` prop with { title, effectiveDate, intro, sections }. */

const LP_CANVAS_MAX = 880;

const lpEyebrow = {
  fontSize: 11,
  fontWeight: 600,
  letterSpacing: "0.16em",
  textTransform: "uppercase",
  color: "var(--bm-accent)",
  lineHeight: 1,
};

const lpDisplayL = {
  fontFamily: "var(--bm-font-display)",
  fontSize: "clamp(36px, 4.4vw, 56px)",
  fontWeight: 700,
  letterSpacing: "-0.025em",
  lineHeight: 1.06,
  color: "var(--bm-text)",
  margin: 0,
};

const lpSectionTitle = {
  fontFamily: "var(--bm-font-display)",
  fontSize: "clamp(20px, 2vw, 24px)",
  fontWeight: 700,
  letterSpacing: "-0.01em",
  lineHeight: 1.2,
  color: "var(--bm-text)",
  margin: 0,
};

const lpBody = {
  fontSize: 16,
  lineHeight: 1.65,
  color: "var(--bm-text-muted)",
  fontWeight: 400,
  margin: 0,
};

function LPGlow() {
  return (
    <div aria-hidden style={{
      position: "absolute", inset: 0, pointerEvents: "none",
      background:
        "radial-gradient(ellipse 55% 50% at 0% 100%, rgba(0,24,125,0.55), rgba(0,11,69,0.2) 38%, rgba(0,3,34,0) 70%)",
    }} />
  );
}

/* Render markdown-ish body text. We support:
   - plain paragraphs (string)
   - bullet list (array of strings)
   - "- item" lines are turned into a bulleted list automatically */
function LPBody({ content }) {
  if (Array.isArray(content)) {
    return (
      <ul style={{ margin: "0 0 0 20px", padding: 0, display: "flex", flexDirection: "column", gap: 8 }}>
        {content.map((item, i) => (
          <li key={i} style={{ ...lpBody, listStyle: "disc" }}>{item}</li>
        ))}
      </ul>
    );
  }
  return <p style={lpBody}>{content}</p>;
}

function LegalPage({ data }) {
  return (
    <>
      <SiteNav />
      <main>
        {/* Hero */}
        <section
          data-bm-section="hero"
          style={{ position: "relative", padding: "96px 32px 48px", overflow: "hidden" }}
        >
          <LPGlow />
          <div style={{ position: "relative", maxWidth: LP_CANVAS_MAX, margin: "0 auto" }}>
            <div style={lpEyebrow}>{data.eyebrow || "Legal"}</div>
            <h1 style={{ ...lpDisplayL, marginTop: 20 }}>{data.title}</h1>
            {data.effectiveDate && (
              <p style={{ ...lpBody, marginTop: 18, fontSize: 14 }}>
                <strong style={{ color: "var(--bm-text)", fontWeight: 600 }}>Effective Date:</strong>{" "}
                {data.effectiveDate}
              </p>
            )}
            {data.entity && (
              <p style={{ ...lpBody, marginTop: 8, fontSize: 14 }}>
                <strong style={{ color: "var(--bm-text)", fontWeight: 600 }}>Company:</strong>{" "}
                {data.entity}
              </p>
            )}
            {data.address && (
              <p style={{ ...lpBody, marginTop: 8, fontSize: 14 }}>
                <strong style={{ color: "var(--bm-text)", fontWeight: 600 }}>Registered Address:</strong>{" "}
                {data.address}
              </p>
            )}
          </div>
        </section>

        {/* Body */}
        <section
          data-bm-section="mid"
          style={{ padding: "32px 32px 96px" }}
        >
          <div style={{ maxWidth: LP_CANVAS_MAX, margin: "0 auto", display: "flex", flexDirection: "column", gap: 36 }}>
            {data.intro && <LPBody content={data.intro} />}
            {data.sections.map((s, i) => (
              <div key={i} style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                <div style={{ display: "flex", alignItems: "baseline", gap: 14 }}>
                  <span style={{
                    fontFamily: "var(--bm-font-display)",
                    fontSize: 14,
                    fontWeight: 700,
                    color: "var(--bm-accent)",
                    letterSpacing: "0.04em",
                    flexShrink: 0,
                    minWidth: 28,
                  }}>
                    {String(i + 1).padStart(2, "0")}
                  </span>
                  <h2 style={lpSectionTitle}>{s.heading}</h2>
                </div>
                <div style={{ marginLeft: 42, display: "flex", flexDirection: "column", gap: 12 }}>
                  {(Array.isArray(s.body) ? s.body : [s.body]).map((b, j) => (
                    <LPBody key={j} content={b} />
                  ))}
                </div>
              </div>
            ))}

            {data.contactBlock && (
              <div
                style={{
                  marginTop: 12,
                  padding: "28px 32px",
                  background: "var(--bm-surface)",
                  border: "1px solid var(--bm-hairline)",
                  borderRadius: 18,
                }}
              >
                <div style={lpEyebrow}>Contact</div>
                <p style={{ ...lpBody, marginTop: 14 }}>
                  <strong style={{ color: "var(--bm-text)", fontWeight: 600 }}>Email:</strong>{" "}
                  <a href="mailto:support@beavermind.ai" style={{ color: "var(--bm-accent)", textDecoration: "none" }}>
                    support@beavermind.ai
                  </a>
                </p>
                <p style={{ ...lpBody, marginTop: 8 }}>
                  <strong style={{ color: "var(--bm-text)", fontWeight: 600 }}>Address:</strong>{" "}
                  135 Bonham Strand Trade Centre, Unit 1701-1702, 17/F, Sheung Wan, Hong Kong
                </p>
              </div>
            )}
          </div>
        </section>
      </main>
      <SiteFooter />
      <AgentModal />
    </>
  );
}

Object.assign(window, { LegalPage });